/* ============================================ WIDGETS — weather, calendar, lights, WAN, media, cameras, solar ============================================ */ const panelStyles = { weather: { display: "flex", flexDirection: "column", height: "100%", }, }; // -------- Small atoms -------- const PanelHeader = ({ title, icon, rightText }) => (
{icon &&
}
{title}
{rightText && (
{rightText}
)}
); const MiniStat = ({ label, value, color }) => (
{label}
{value}
); // -------- WEATHER -------- function WeatherPanel() { const w = WEATHER; const isNight = w.conditionText.toLowerCase().includes("night"); return (
{/* Hero */}
Current
{w.conditionText}
{w.tempF}°F
feels {w.feelsF}° · {w.windMph} mph {w.windDir}
{/* Forecast strip */}
{w.forecast.map((d, i) => (
{d.day}
{d.hi}°
{d.lo}°
))}
{/* Sun/moon facts */}
); } // -------- INTERNET / WAN -------- function InternetPanel() { const n = NET; return (
{/* WAN up */}
WAN Status
CONNECTED
LATENCY
{n.latencyMs}ms
{/* Down/Up */}
Download
{n.downMbps} MB/s
Upload
{n.upMbps} MB/s
{/* SSID */}
SSID {n.ssid}
); } // -------- SYSTEM / BACKUPS -------- function SystemPanel() { const s = SYSTEM; return (
Last Backup
{s.lastBackupHoursAgo}h ago
Backup State
{s.backupState}
NEXT
{s.nextScheduledIn}
CPU
{s.cpu}%
Memory
{s.memory}%
); } const BarGauge = ({ pct, color }) => (
); // -------- CALENDAR -------- function CalendarPanel() { const c = CALENDAR; // April 2026: April 1 = Wednesday (weekday 3). 30 days. const startOffset = 3; // Sun=0 const days = 30; const cells = []; // previous month trailing: Mar 29, 30, 31 const prevTrail = [29, 30, 31]; for (let i = 0; i < startOffset; i++) cells.push({ d: prevTrail[i], muted: true }); for (let d = 1; d <= days; d++) cells.push({ d, muted: false }); while (cells.length % 7 !== 0) cells.push({ d: cells.length - startOffset - days + 1, muted: true }); const [view, setView] = React.useState("month"); return (
{/* Title */}
{c.title}
{c.monthLabel}
{/* View switcher */}
{["month","week","day"].map(v => ( ))}
{/* Weekday headers */}
{["SUN","MON","TUE","WED","THU","FRI","SAT"].map(d => (
{d}
))}
{/* Grid */}
{cells.map((cell, i) => { const ev = !cell.muted ? c.events[cell.d] : null; const isToday = !cell.muted && cell.d === c.today; return (
{cell.d}
{ev && (
)}
); })}
); } // -------- FAMILY PROFILES (header) -------- function FamilyStrip() { return (
Winding down…
{FAMILY.map(p => )}
); } function Avatar({ person: p, size = 74, labelBelow }) { return (
{labelBelow && (
{p.name.toUpperCase()}
)}
); } // Hand-drawn SVG comic portrait (silver age vibes) function ComicPortrait({ person: p }) { // Variants based on id const skinColor = "#f2d3ae"; const hairColors = { blonde: "#d9a84a", brown: "#6b3a1f", dark: "#2b1a0e" }; const hair = hairColors[p.hair] || "#4a2e1a"; return ( {/* bg halftone spots */} {/* Mom - wavy hair, earrings */} {p.id === "mom" && (<> {/* shoulders */} {/* neck */} {/* hair back */} {/* face */} {/* hair front bangs */} {/* eyes */} {/* lashes */} {/* nose */} {/* lips */} )} {/* Dad - short hair, tie */} {p.id === "dad" && (<> {/* tie */} {/* face */} {/* hair */} {/* eyes */} {/* brows */} {/* nose */} {/* mouth */} {/* jaw shadow */} )} {/* Son - spiky hair */} {p.id === "son" && (<> {/* hair spikes */} )} ); } // -------- LIGHTS PANEL -------- function LightsPanel() { const [states, setStates] = React.useState(() => { const out = {}; AREAS.forEach(a => { out[a.id] = { lightsOn: a.lightsOn, total: a.lights }; }); return out; }); const toggleAll = (id) => { setStates(s => ({ ...s, [id]: { ...s[id], lightsOn: s[id].lightsOn > 0 ? 0 : s[id].total, } })); }; const totalOn = Object.values(states).reduce((a,b) => a + b.lightsOn, 0); const totalAll = Object.values(states).reduce((a,b) => a + b.total, 0); return (
{AREAS.map(a => { const s = states[a.id]; const on = s.lightsOn > 0; return ( ); })}
); } // -------- MEDIA PANEL -------- function MediaPanel() { const [playing, setPlaying] = React.useState(MEDIA.playing); const [elapsed, setElapsed] = React.useState(MEDIA.elapsed); React.useEffect(() => { if (!playing) return; const t = setInterval(() => setElapsed(e => (e + 1) % MEDIA.duration), 1000); return () => clearInterval(t); }, [playing]); const pct = (elapsed / MEDIA.duration) * 100; const fmt = s => `${Math.floor(s/60)}:${String(s%60).padStart(2,'0')}`; return (
{/* album art — comic-style */}
BTR
{MEDIA.track}
{MEDIA.artist} · {MEDIA.album}
{/* progress */}
{fmt(elapsed)} {fmt(MEDIA.duration)}
); } // -------- CAMERAS PANEL -------- function CamerasPanel() { return (
{CAMERAS.map(c => (
{c.motion ? "● LIVE" : "CLEAR"}
{c.name}
{c.lastEvent &&
{c.lastEvent}
}
))}
); } // -------- SOLAR PANEL -------- function SolarPanel() { const s = SOLAR; return (
Producing
{s.producingKw}
kW
Using
{s.usingKw}
kW
Grid
{Math.abs(s.gridKw)}↑
EXPORT
Battery
{s.batteryPct}%
); } // -------- AREAS GRID -------- function AreasGrid({ onOpen }) { return (
{AREAS.map(a => ( ))}
); } // Exports Object.assign(window, { PanelHeader, MiniStat, BarGauge, WeatherPanel, InternetPanel, SystemPanel, CalendarPanel, FamilyStrip, Avatar, ComicPortrait, LightsPanel, MediaPanel, CamerasPanel, SolarPanel, AreasGrid, });