import { For, Show, createSignal } from "solid-js"; import { IslandPill, ModuleCard, CALM, WARM } from "./IslandMock"; import { Glyph, type GlyphName } from "./ModuleMocks"; import { useDemoLoop } from "./useDemoLoop"; const PAPER = "#f1ead9"; const BATTERY = "#8dc9b3"; const CALENDAR = "#ff9e42"; /** SettingsSlider: paper fill, dark knob, and a unity notch on app sliders. */ function MixerSlider(props: { level: number; tint?: string; muted?: boolean }) { const fraction = () => props.level / (props.tint ? 125 : 100); const position = () => `calc(9px + (100% - 18px) * ${fraction()})`; return (
); } function RoutePicker(props: { label: string }) { return ( {props.label} ); } const MIXER_APPS = [ { name: "Music", color: "#fa5c7c", glyph: "♫" }, { name: "Browser", color: CALM, glyph: "◎" }, { name: "Meeting", color: BATTERY, glyph: "▰" } ]; /** VolumeMixerPanelView and MixerAppRow, including the current route controls. */ export function MixerDemo() { const [step, setStep] = createSignal(0); useDemoLoop(10800, [ [0, () => setStep(0)], [2400, () => setStep(1)], [4800, () => setStep(2)], [7200, () => setStep(3)] ]); const muted = (i: number) => i === 1 && step() >= 1; const volume = (i: number) => i === 0 ? (step() >= 3 ? 38 : 100) : i === 1 ? 55 : 86; return (
65%
{(route) => (
{route.label}
)}
{(app, i) => (
{app.glyph} {app.name} = 2 ? "Headphones" : "Default"} />
{muted(i()) ? 0 : volume(i())}%
)}

{ [ "Adjust each app separately", "Browser muted", "Music playing through headphones", "Music volume lowered to 38%" ][step()] }

); } function PowerNode(props: { label: string; glyph: GlyphName; watts: number; tint: string; }) { return (

{props.label}

{props.watts.toFixed(1)} W

); } /** PowerPanelView: system draw, parallel power circuit, battery bar and controls. */ export function BatteryDemo() { const [step, setStep] = createSignal(0); useDemoLoop(14000, [ [0, () => setStep(0)], [1800, () => setStep(1)], [3600, () => setStep(2)], [6400, () => setStep(3)], [8400, () => setStep(4)], [10400, () => setStep(5)] ]); const pct = () => [62, 71, 80, 80, 92, 100][step()]; const topUp = () => step() >= 3; const held = () => step() === 2; const batteryWatts = () => (held() || pct() === 100 ? 0 : 26.4); return (
ϟ 18.2 W

System draw

Battery {pct()}% Limit{" "} 80 %
{(control) => (

{control.label}

{control.note}

)}

{held() ? "Charging paused at the 80% limit" : topUp() ? "Top-up mode allows a full charge" : "Charging with an 80% limit"}

); } const DAYS = [ { letter: "M", day: 9, dots: 1 }, { letter: "T", day: 10, dots: 2 }, { letter: "W", day: 11, dots: 1 }, { letter: "T", day: 12, dots: 2 }, { letter: "F", day: 13, dots: 3 }, { letter: "S", day: 14, dots: 0 }, { letter: "S", day: 15, dots: 0 } ]; const EVENTS = [ { start: "09:30", end: "09:45", title: "Standup", calendar: "Work", color: CALENDAR, location: "Video call", meeting: true }, { start: "15:30", end: "16:00", title: "Design review", calendar: "Work", color: CALENDAR, location: "4th floor", meeting: false } ]; /** CalendarSlotFace's daymark / next-up / on-air states, and CalendarPanelView. */ export function CalendarDemo() { const [step, setStep] = createSignal(0); useDemoLoop(16000, [ [0, () => setStep(0)], [2400, () => setStep(1)], [4800, () => setStep(2)], [9000, () => setStep(3)], [12000, () => setStep(4)] ]); const onAir = () => step() >= 3; return ( ); }