);
}
// Water heater — pill-shaped tank with rising heat lines. Struggling = bubbles.
function WaterHeaterArt({ size = 72, state = 'on', tone }) {
const on = state !== 'off';
const stress = state === 'struggling';
const body = tone?.bg || '#E2ECF3';
const accent = stress ? '#B85C4A' : (tone?.fg || '#345070');
return (
);
}
// Fridge — always on. Frost shimmer animation. Status pip indicates good/bad.
function FridgeArt({ size = 72, state = 'on', tone }) {
const stress = state === 'struggling';
const body = tone?.bg || '#E8DCC4';
const accent = tone?.fg || '#5A4A22';
return (
);
}
Object.assign(window, { ACArt, WaterHeaterArt, FridgeArt });
// ─────────────────────────────────────────────────────────────────────────
// ─────────────────────────────────────────────────────────────────────────
// PowerFlow — compact "house is drawing power" strip that reads as flowing
// straight out of the battery above it. Devices are GROUPED BY KIND (three
// aircons collapse into one "AC ×3" node) so the strip stays one short row no
// matter how many devices exist. Display-first: a quick glance at what's live.
//
// Props:
// c — palette
// devices — [{ key, kind, name, watts, on, lockedOn }]
// kinds — DEVICE_KINDS(c) map: { [kind]: { Icon, tone } }
// onToggleKind — (kind) => void; tap a live group to cut its power
// ─────────────────────────────────────────────────────────────────────────
function PowerFlow({ c, menuC, devices, kinds, onToggleKind, onToggleDevice }) {
const [openKind, setOpenKind] = React.useState(null);
// Popover surfaces use `menuC` (a guaranteed-opaque palette) so the sheet
// stays readable even when the strip sits on a translucent dark card.
const mc = menuC || c;
// Group ON devices by kind → one node each. Locked-on background loads
// (e.g. the fridge) are excluded — the strip highlights what you can act on.
const groups = {};
for (const d of devices) {
if (!d.on || d.watts <= 0 || d.lockedOn) continue;
const g = groups[d.kind] || (groups[d.kind] = { kind: d.kind, watts: 0, count: 0, locked: false, items: [] });
g.watts += d.watts; g.count += 1; g.items.push(d);
}
const list = Object.values(groups).sort((a, b) => b.watts - a.watts);
const totalW = list.reduce((s, g) => s + g.watts, 0);
const flowing = list.length > 0;
// Close popover on any outside tap.
React.useEffect(() => {
if (!openKind) return undefined;
const close = () => setOpenKind(null);
window.addEventListener('click', close);
return () => window.removeEventListener('click', close);
}, [openKind]);
// All-on devices for a kind that still exist (for popover live state).
const kindDevices = (kind) => devices.filter(d => d.kind === kind && d.on && d.watts > 0);
return (
{/* SOURCE — a pipe that curves down out of the battery above and
carries the live draw out into the house. Extends upward past the
strip so it visually plugs into the battery's underside. */}
{!flowing ? (
House is idle
) : (
<>
{/* single horizontal row of group chips — scrolls, never wraps */}
{list.map((g) => {
const k = kinds[g.kind];
const multi = g.count > 1;
// Single tappable device → toggle directly. Multi → expand popover.
const interactive = !g.locked && (onToggleDevice || onToggleKind);
const onClick = (e) => {
if (!interactive) return;
e.stopPropagation();
if (multi && onToggleDevice) {
setOpenKind(openKind === g.kind ? null : g.kind);
} else if (onToggleKind) {
onToggleKind(g.kind);
}
};
return (