@hashsome/ui 0.7.0 → 0.9.0

package/dist/entities/now-playing.js

@@ -7,10 +7,11 @@ import { ValueBar } from '../layout/drawer-controls.js';
 import { PlainButton } from '../layout/plain-button.js';
 import { IconButton } from '../layout/tile.js';
 import { statusLabels } from '../status.js';
-import { usePressFeedback, useVolumeControl } from './media-controls.js';
-import { formatDuration, useMediaPosition } from './media-progress.js';
+import { usePressFeedback, useTransportAvailability, useVolumeControl } from './media-controls.js';
+import { formatDuration, useMediaPosition, useSteadyPlaying } from './media-progress.js';
 import { useSeekHold } from './media-seek.js';
 import { ArtworkRing } from './artwork-ring.js';
+import { LoadingLine, useLoadingLabel } from './media-loading-line.js';
 /** The upright "now playing" panel the media column and page share: the artwork on a record, what is playing, how
  * far along it is, the transport buttons and a volume bar that is always there. Not exported from
  * the package; `MediaPlayerColumn` and `MediaPlayerFull` are its public forms. */
@@ -19,12 +20,14 @@ export function NowPlaying({ handle, fallback, name, extra, leading, onOpenArtwo
     const { iconCircle, space } = useTheme().density;
     const transportWidth = 5 * iconCircle + 4 * space;
     const { status } = handle;
+    const loading = useLoadingLabel(player?.ref);
     const ready = status === 'ready';
     const caps = player?.capabilities;
-    const playing = player?.playback === 'playing';
-    const { feedbackFor, press } = usePressFeedback();
+    const playing = useSteadyPlaying(player);
+    const { feedbackFor, press } = usePressFeedback(player?.ref);
     const volume = useVolumeControl(handle);
     const position = useMediaPosition(player);
+    const can = useTransportAvailability(player, position);
     const duration = ready ? player?.duration : undefined;
     // The ring and the time under the title share one position, so dragging the ring moves both.
     const seek = useSeekHold(ready ? position : undefined, caps?.seek ? (next) => void handle.command('seek', { position: next }) : undefined);
@@ -32,8 +35,8 @@ export function NowPlaying({ handle, fallback, name, extra, leading, onOpenArtwo
                 // No wider than the row of five buttons under it (268px: five circles and the gaps between them).
                 maxSize: transportWidth }), _jsxs(Flex, { direction: "column", align: "center", gap: 0.5, color: ready ? 'text' : 'textMuted', children: [_jsxs(Flex, { align: "center", justify: "center", gap: 2, maxWidth: "100%", children: [_jsx(Typography, { as: "h2", variant: "title", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", m: 0, minWidth: 0, children: ready
                                     ? (player?.media?.title ?? 'Nothing playing')
-                                    : statusLabels[status] }), caps?.shuffle && shufflePlacement === 'title' ? (_jsx(IconButton, { icon: "lu:shuffle", label: "Shuffle", size: 14, active: player?.shuffle === true, pressed: player?.shuffle === true, disabled: !ready, onClick: () => void handle.command('setShuffle', { shuffle: player?.shuffle !== true }) })) : null] }), ready && player?.media?.artist ? (_jsx(Typography, { as: "span", variant: "body", color: "textMuted", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", children: [player.media.artist, player.media.album].filter(Boolean).join(' · ') })) : (_jsx(Typography, { as: "span", variant: "body", color: "textMuted", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", children: name ?? player?.name ?? fallback }))] }), seek.shown !== undefined && duration ? (_jsxs(Typography, { as: "span", variant: "secondary", color: "textMuted", align: "center", css: { fontVariantNumeric: 'tabular-nums' }, children: [formatDuration(seek.shown), " / ", formatDuration(duration)] })) : null, _jsxs(Grid, { gap: 3, css: ({ density }) => ({
+                                    : statusLabels[status] }), caps?.shuffle && shufflePlacement === 'title' ? (_jsx(IconButton, { icon: "lu:shuffle", label: "Shuffle", size: 14, active: player?.shuffle === true, pressed: player?.shuffle === true, disabled: !ready, feedback: feedbackFor('setShuffle'), onClick: () => press('setShuffle', () => handle.command('setShuffle', { shuffle: player?.shuffle !== true })) })) : null] }), loading ? (_jsx(LoadingLine, { label: loading, variant: "body" })) : ready && player?.media?.artist ? (_jsx(Typography, { as: "span", variant: "body", color: "textMuted", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", children: [player.media.artist, player.media.album].filter(Boolean).join(' · ') })) : (_jsx(Typography, { as: "span", variant: "body", color: "textMuted", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", children: name ?? player?.name ?? fallback }))] }), seek.shown !== undefined && duration ? (_jsxs(Typography, { as: "span", variant: "secondary", color: "textMuted", align: "center", css: { fontVariantNumeric: 'tabular-nums' }, children: [formatDuration(seek.shown), " / ", formatDuration(duration)] })) : null, _jsxs(Grid, { gap: 3, css: ({ density }) => ({
                     gridTemplateColumns: `repeat(5, ${density.iconCircle}px)`,
                     justifyContent: 'center',
-                }), children: [caps?.shuffle && shufflePlacement === 'transport' ? (_jsx(IconButton, { icon: "lu:shuffle", label: "Shuffle", glyph: 18, active: player?.shuffle === true, pressed: player?.shuffle === true, disabled: !ready, onClick: () => void handle.command('setShuffle', { shuffle: player?.shuffle !== true }) })) : shufflePlacement === 'title' ? ((leading ?? _jsx("span", {}))) : (_jsx("span", {})), _jsx(IconButton, { icon: "lu:skip-back", label: "Previous", glyph: 18, disabled: !ready || caps?.previous === false, feedback: feedbackFor('previous'), onClick: () => press('previous', () => handle.command('previous')) }), _jsx(IconButton, { icon: playing ? 'lu:pause' : 'lu:play', label: playing ? 'Pause' : 'Play', glyph: 18, disabled: !ready, primary: true, onClick: () => void handle.command('togglePlay') }), _jsx(IconButton, { icon: "lu:skip-forward", label: "Next", glyph: 18, disabled: !ready || caps?.next === false, feedback: feedbackFor('next'), onClick: () => press('next', () => handle.command('next')) }), extra ?? _jsx("span", {})] }), caps?.volume !== false || caps.mute ? (_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(PlainButton, { "aria-label": volume.muted ? 'Unmute' : 'Mute', "aria-pressed": volume.muted, title: volume.muted ? 'Unmute' : 'Mute', disabled: !ready || caps?.mute === false, onClick: volume.toggleMute, center: true, color: volume.muted ? 'accent' : 'textMuted', css: { flex: 'none' }, children: _jsx(Icon, { name: volume.muted ? 'lu:volume-x' : 'lu:volume-2', size: 16 }) }), _jsx(ValueBar, { label: "Volume level", value: volume.shown, min: 0, max: 100, keyStep: 5, height: 10, onDrag: volume.drag, onCommit: volume.commit }), _jsxs(Typography, { as: "span", variant: "secondary", color: "textMuted", minWidth: 32, align: "right", css: { flex: 'none', fontVariantNumeric: 'tabular-nums' }, children: [volume.shown, "%"] })] })) : null] }));
+                }), children: [caps?.shuffle && shufflePlacement === 'transport' ? (_jsx(IconButton, { icon: "lu:shuffle", label: "Shuffle", glyph: 18, active: player?.shuffle === true, pressed: player?.shuffle === true, disabled: !ready, feedback: feedbackFor('setShuffle'), onClick: () => press('setShuffle', () => handle.command('setShuffle', { shuffle: player?.shuffle !== true })) })) : shufflePlacement === 'title' ? ((leading ?? _jsx("span", {}))) : (_jsx("span", {})), _jsx(IconButton, { icon: "lu:skip-back", label: "Previous", glyph: 18, disabled: !ready || caps?.previous === false || !can.previous, feedback: feedbackFor('previous'), onClick: () => press('previous', () => handle.command('previous')) }), _jsx(IconButton, { icon: playing ? 'lu:pause' : 'lu:play', label: playing ? 'Pause' : 'Play', glyph: 18, disabled: !ready || !can.play, primary: true, feedback: feedbackFor('togglePlay'), onClick: () => press('togglePlay', () => handle.command('togglePlay')) }), _jsx(IconButton, { icon: "lu:skip-forward", label: "Next", glyph: 18, disabled: !ready || caps?.next === false || !can.next, feedback: feedbackFor('next'), onClick: () => press('next', () => handle.command('next')) }), extra ?? _jsx("span", {})] }), caps?.volume !== false || caps.mute ? (_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(PlainButton, { "aria-label": volume.muted ? 'Unmute' : 'Mute', "aria-pressed": volume.muted, title: volume.muted ? 'Unmute' : 'Mute', disabled: !ready || caps?.mute === false, onClick: volume.toggleMute, center: true, color: volume.muted ? 'accent' : 'textMuted', css: { flex: 'none' }, children: _jsx(Icon, { name: volume.muted ? 'lu:volume-x' : 'lu:volume-2', size: 16 }) }), _jsx(ValueBar, { label: "Volume level", value: volume.shown, min: 0, max: 100, keyStep: 5, height: 10, onDrag: volume.drag, onCommit: volume.commit }), _jsxs(Typography, { as: "span", variant: "secondary", color: "textMuted", minWidth: 32, align: "right", css: { flex: 'none', fontVariantNumeric: 'tabular-nums' }, children: [volume.shown, "%"] })] })) : null] }));
 }

package/dist/entities/top-bar.d.ts

@@ -12,7 +12,7 @@ export interface DashboardOption {
 export interface TopBarScene {
     entity: EntityRef;
     icon?: IconName;
-    /** A literal CSS color for this scene's dot (e.g. `#8B5CF6`) — scenes are meant to read as distinct at a glance, which the palette doesn't have enough colors for, so each app picks its own. Defaults to the theme's accent. */
+    /** A literal CSS color for this scene's dot (the one place a color is not from the theme: scenes are meant to be told apart by their own) (e.g. `#8B5CF6`) — scenes are meant to read as distinct at a glance, which the palette doesn't have enough colors for, so each app picks its own. Defaults to the theme's accent. */
     color?: string;
 }
 export interface TopBarProps {

package/dist/entities/top-bar.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Box, Flex, Typography } from 'e-prim';
+import { motion } from 'motion/react';
 import { PlainButton } from '../layout/plain-button.js';
 import { useEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router';
@@ -8,7 +9,9 @@ import { useConnectionStatus, useEntity, useEntityHandle, useIntegrationStatuses
 import { Icon } from '../icon.js';
 import { statusLabels } from '../status.js';
 import { TOP_ROW } from '../theme/grid.js';
+import { CheckMark } from '../layout/check-mark.js';
 import { DrawerTrigger } from '../layout/use-drawer.js';
+import { useTimed } from '../layout/use-timed.js';
 import { useWeatherForecast } from '../use-weather-forecast.js';
 import { SensorReadout } from './sensor-readout.js';
 import { WeatherForecast } from './weather-forecast.js';
@@ -86,11 +89,8 @@ function DashboardSwitcher({ title, dashboards, }) {
                             height: SWITCHER_HEIGHT, radius: "small", px: 3, color: "text", background: active ? 'surface' : 'transparent', cursor: active ? 'default' : 'pointer', css: { textAlign: 'left' }, children: [d.icon ? _jsx(Icon, { name: d.icon, size: 16 }) : null, _jsx(Typography, { as: "span", variant: "body", grow: 1, children: d.title }), active ? _jsx(Icon, { name: "lu:check", size: 16 }) : null] }) }, d.id));
                 }) })) : null] }));
 }
-const HEALTH_COLORS = {
-    ok: '#34D399',
-    pending: '#FBBF24',
-    down: '#F2554A',
-};
+/** The palette color each health reads as. */
+const HEALTH_COLORS = { ok: 'success', pending: 'warm', down: 'danger' };
 function linkHealth(link) {
     return link === 'open' ? 'ok' : link === 'connecting' ? 'pending' : 'down';
 }
@@ -133,10 +133,10 @@ export function SystemStatus({ link: linkOverride, statuses: statusesOverride, d
         : overall === 'pending'
             ? 'Connecting…'
             : `${rows.filter((row) => row.health === 'down').length} system(s) down`;
-    return (_jsxs(Flex, { ref: ref, position: "relative", children: [_jsx(PlainButton, { "aria-label": summary, "aria-expanded": open, title: summary, onClick: () => setOpen((o) => !o), align: "center", justify: "center", width: 32, height: 32, radius: "full", children: _jsx(Flex, { as: "span", width: 12, height: 12, radius: "full", css: {
-                        background: HEALTH_COLORS[overall],
-                        boxShadow: `0 0 0 4px ${HEALTH_COLORS[overall]}33`,
-                    } }) }), open ? (_jsxs(Flex, { direction: "column", gap: 2, background: "surfaceRaised", radius: "row", shadow: "drawer", p: 3.5, role: "status", position: "absolute", zIndex: "dropdown", mt: 2, minWidth: 220, css: { top: '100%', right: 0, whiteSpace: 'nowrap' }, children: [_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Flex, { as: "span", width: 8, height: 8, radius: "full", css: { background: HEALTH_COLORS[overall] } }), _jsx(Typography, { as: "span", variant: "bodyStrong", children: summary })] }), rows.map((row) => (_jsxs(Flex, { align: "center", justify: "space-between", gap: 6, children: [_jsx(Typography, { as: "span", variant: "body", children: row.name }), _jsx(Typography, { as: "span", variant: "label", css: { color: HEALTH_COLORS[row.health] }, children: row.label })] }, row.name)))] })) : null] }));
+    return (_jsxs(Flex, { ref: ref, position: "relative", children: [_jsx(PlainButton, { "aria-label": summary, "aria-expanded": open, title: summary, onClick: () => setOpen((o) => !o), align: "center", justify: "center", width: 32, height: 32, radius: "full", children: _jsx(Flex, { as: "span", width: 12, height: 12, radius: "full", css: ({ palette }) => ({
+                        background: palette[HEALTH_COLORS[overall]],
+                        boxShadow: `0 0 0 4px color-mix(in srgb, ${palette[HEALTH_COLORS[overall]]} 20%, transparent)`,
+                    }) }) }), open ? (_jsxs(Flex, { direction: "column", gap: 2, background: "surfaceRaised", radius: "row", shadow: "drawer", p: 3.5, role: "status", position: "absolute", zIndex: "dropdown", mt: 2, minWidth: 220, css: { top: '100%', right: 0, whiteSpace: 'nowrap' }, children: [_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Flex, { as: "span", width: 8, height: 8, radius: "full", css: ({ palette }) => ({ background: palette[HEALTH_COLORS[overall]] }) }), _jsx(Typography, { as: "span", variant: "bodyStrong", children: summary })] }), rows.map((row) => (_jsxs(Flex, { align: "center", justify: "space-between", gap: 6, children: [_jsx(Typography, { as: "span", variant: "body", children: row.name }), _jsx(Typography, { as: "span", variant: "label", css: ({ palette }) => ({ color: palette[HEALTH_COLORS[row.health]] }), children: row.label })] }, row.name)))] })) : null] }));
 }
 function StatusChip({ children }) {
     return (_jsx(Flex, { align: "center", gap: 2, background: "surface", border: true, radius: "full", px: 3.5, py: 2.5, children: children }));
@@ -181,14 +181,27 @@ function SensorWeather({ entity }) {
     const handle = useEntityHandle('sensor', entity);
     const { status } = handle;
     const sensor = handle.entity;
-    return (_jsxs(StatusChip, { children: [_jsx(Flex, { as: "span", css: { color: '#FBBF24' }, children: _jsx(Icon, { name: "lu:sun", size: 14 }) }), _jsx(Typography, { as: "span", variant: "label", children: status === 'ready' && sensor?.numeric !== undefined
+    return (_jsxs(StatusChip, { children: [_jsx(Flex, { as: "span", css: ({ palette }) => ({ color: palette.warm }), children: _jsx(Icon, { name: "lu:sun", size: 14 }) }), _jsx(Typography, { as: "span", variant: "label", children: status === 'ready' && sensor?.numeric !== undefined
                     ? `${Math.round(sensor.numeric)}°`
                     : statusLabels[status] })] }));
 }
+/** How long a scene's dot shows it has been pressed, from the press. */
+const SCENE_DONE_MS = 1500;
 function SceneDot({ entity, icon, color }) {
     const handle = useEntityHandle('action', entity);
     const label = handle.entity?.name ?? '';
-    return (_jsx(Flex, { as: "button", type: "button", "aria-label": label, title: label, onClick: () => void handle.command('trigger'), align: "center", justify: "center", width: 40, height: 40, radius: "full", cursor: "pointer", css: ({ palette }) => ({ background: color ?? palette.accent, color: '#fff' }), children: _jsx(Icon, { name: icon ?? 'lu:palette', size: 18 }) }));
+    // A press is answered at once, for a fixed time and whatever the scene does: the dot pops, turns green and
+    // draws a check in place of its icon. It cannot be pressed again until that is over.
+    const { active: done, start } = useTimed(SCENE_DONE_MS);
+    return (_jsxs(Flex, { as: motion.button, type: "button", "aria-label": label, title: label, disabled: done, onClick: () => {
+            if (start()) {
+                void handle.command('trigger');
+            }
+        }, align: "center", justify: "center", width: 40, height: 40, radius: "full", position: "relative", cursor: done ? 'default' : 'pointer', animate: { scale: done ? [1, 1.18, 1] : 1 }, transition: { duration: 0.4 }, css: ({ palette }) => ({
+            background: done ? palette.success : (color ?? palette.accent),
+            color: palette.accentText,
+            transition: 'background-color 0.25s ease',
+        }), children: [_jsx(Box, { as: motion.span, css: { display: 'grid' }, animate: { opacity: done ? 0 : 1, scale: done ? 0.5 : 1 }, transition: { duration: 0.18 }, children: _jsx(Icon, { name: icon ?? 'lu:palette', size: 18 }) }), done ? (_jsx(Flex, { align: "center", justify: "center", position: "absolute", css: { inset: 0 }, children: _jsx(CheckMark, {}) })) : null] }));
 }
 function initials(name) {
     const words = name.trim().split(/\s+/).filter(Boolean);

package/dist/gallery/gallery.js

@@ -27,6 +27,8 @@ import { Board, Cell } from '../layout/board.js';
 import { Grid } from '../layout/grid.js';
 import { HistorySection } from '../layout/history-section.js';
 import { RoomHeader } from '../layout/room-header.js';
+import { ConfirmDialog } from '../layout/confirm-dialog.js';
+import { TaskTile } from '../layout/task-tile.js';
 import { Tile } from '../layout/tile.js';
 import { TopRow } from '../layout/top-row.js';
 import { HashsomeProvider } from '../provider.js';
@@ -42,6 +44,12 @@ const NAV_ITEMS = [
     { to: 'climate', label: 'Climate', icon: 'lu:thermometer' },
     { to: 'music', label: 'Music', icon: 'lu:music' },
 ];
+/** The same pages with something to look at on two of them: a warm dot (`notice`) and a red one (`urgent`). */
+const ATTENTION_ITEMS = NAV_ITEMS.map((item) => item.to === 'lights'
+    ? { ...item, attention: 'notice' }
+    : item.to === 'climate'
+        ? { ...item, attention: 'urgent' }
+        : item);
 const codeStyles = {
     fontFamily: "ui-monospace, 'SF Mono', Menlo, monospace",
     overflowWrap: 'anywhere',
@@ -75,6 +83,24 @@ function PropsTable({ name }) {
 function ComponentDoc({ title, description, components, children, }) {
     return (_jsxs("section", { css: { marginBottom: 40 }, children: [_jsxs(Flex, { direction: "column", gap: 1, maxWidth: "60ch", mb: 4, children: [_jsx(Typography, { as: "h2", variant: "heading", children: title }), _jsx(Typography, { as: "p", variant: "body", color: "textMuted", children: description })] }), _jsx(Stage, { children: children }), components.map((name) => (_jsx(PropsTable, { name: name }, name)))] }));
 }
+/** A day `n` days from today, at the start of it. */
+const inDays = (n) => {
+    const now = new Date();
+    return new Date(now.getFullYear(), now.getMonth(), now.getDate() + n);
+};
+/** What marking something done takes in a demo: a moment, and nothing else. */
+const pause = () => new Promise((resolve) => setTimeout(resolve, 600));
+function ConfirmDialogDemo() {
+    const [open, setOpen] = useState(false);
+    const [answer, setAnswer] = useState();
+    return (_jsxs(Flex, { align: "center", gap: 4, children: [_jsx(ActionButton, { label: "Empty the trash?", icon: "lu:trash-2", onPress: async () => setOpen(true) }), _jsx(Typography, { as: "span", variant: "body", color: "textMuted", children: answer ?? 'Not asked yet' }), _jsx(ConfirmDialog, { open: open, title: "Empty the trash?", description: "Nothing in it can be brought back.", confirmLabel: "Empty it", onConfirm: () => {
+                    setAnswer('Emptied');
+                    setOpen(false);
+                }, onCancel: () => {
+                    setAnswer('Left alone');
+                    setOpen(false);
+                } })] }));
+}
 /** A reading that changes every time the button is pressed, to see it move. */
 function AnimatedNumberDemo() {
     const [watts, setWatts] = useState(40.1);
@@ -374,7 +400,7 @@ export function Gallery({ density = 'comfortable' }) {
                                             boxShadow: '0 1px 3px rgba(0, 0, 0, 0.25)',
                                             transform: mode === 'dark' ? 'translate(28px, -50%)' : 'translateY(-50%)',
                                             transition: 'transform 0.2s ease',
-                                        }) }), _jsx(Icon, { name: "lu:sun", size: 14 }), _jsx(Icon, { name: "lu:moon", size: 14 })] })] }), _jsx(ComponentDoc, { title: "Board & Cell", components: ['Board', 'Cell'], description: "A page for one known device, laid out on a grid. Each cell says only how big it is (`cols` wide, `rows` tall); the board places them in order, in the first spot they fit. Rows are as tall as their content, so a cell of `rows={2}` ends where the second row does, and `rows='fill'` runs from where the cell is placed down to the bottom of the page, whatever rows are beside it. Every card is a whole number of grid modules tall, the gap between columns and inside a cell is three modules and between rows six, so the result stays on the grid (turn on the debug menu's Show grid to see it).", children: _jsxs(Flex, { direction: "column", gap: 5, children: [_jsxs(Board, { children: [_jsxs(Cell, { cols: 8, children: [_jsx(RoomHeader, { title: "Kitchen", icon: "lu:utensils-crossed" }), _jsxs(Grid, { columns: 2, children: [_jsx(Tile, { label: "Lamp", icon: "lu:lightbulb" }), _jsx(Tile, { label: "Ceiling", icon: "lu:lightbulb" })] })] }), _jsx(Cell, { cols: 4, rows: 2, children: _jsx(MediaPlayerColumn, { entity: "ha:media_player.off" }) }), _jsxs(Cell, { cols: 8, children: [_jsx(RoomHeader, { title: "Stairs", icon: "lu:footprints" }), _jsxs(Grid, { columns: 2, children: [_jsx(Tile, { label: "Lamp", icon: "lu:lightbulb" }), _jsx(Tile, { label: "Spotlights", icon: "lu:lightbulb" })] })] })] }), _jsx(Flex, { direction: "column", height: 460, css: { outline: '1px dashed currentColor' }, children: _jsxs(Board, { children: [_jsx(Cell, { children: _jsxs(TopRow, { children: [_jsx(DateChip, {}), _jsx(Clock, { format: "24h" })] }) }), _jsxs(Cell, { cols: 8, children: [_jsx(RoomHeader, { title: "Kitchen", icon: "lu:utensils-crossed" }), _jsxs(Grid, { columns: 2, children: [_jsx(Tile, { label: "Lamp", icon: "lu:lightbulb" }), _jsx(Tile, { label: "Ceiling", icon: "lu:lightbulb" })] })] }), _jsx(Cell, { cols: 4, rows: "fill", children: _jsx(MediaPlayerColumn, { entity: "ha:media_player.off" }) })] }) })] }) }), _jsx(ComponentDoc, { title: "Top Row", components: ['TopRow'], description: "The row along the top of a page you build yourself instead of with `TopBar`: the date, the weather, the clock and the status in a line at the right, in the height the grid gives the top row (40px), with no padding of its own.", children: _jsxs(TopRow, { children: [_jsx(DateChip, {}), _jsx(Clock, { format: "24h" })] }) }), _jsx(ComponentDoc, { title: "Grid", components: ['Grid'], description: "Lays tiles out in equal-width columns (`columns`, default 2). Cells share the width and never overflow it.", children: _jsxs(Flex, { direction: "column", gap: 5, children: [_jsxs(Grid, { columns: 2, children: [_jsx(Tile, { label: "Two", icon: "lu:layout-grid", secondary: "columns={2}" }), _jsx(Tile, { label: "Columns", icon: "lu:layout-grid", secondary: "equal width" })] }), _jsxs(Grid, { columns: 3, children: [_jsx(Tile, { label: "Three", icon: "lu:layout-grid", secondary: "columns={3}" }), _jsx(Tile, { label: "Columns", icon: "lu:layout-grid", secondary: "equal width" }), _jsx(Tile, { label: "Wide", icon: "lu:layout-grid", secondary: "fits the row" })] })] }) }), _jsx(ComponentDoc, { title: "Room Header", components: ['RoomHeader'], description: "The header that starts a room: a muted icon and title, a hairline and readouts on the right, placed above a Grid (or any tiles). It adds its own space above, so consecutive rooms read as groups.", children: _jsxs(Flex, { direction: "column", gap: 4, children: [_jsx(RoomHeader, { title: "Kitchen", icon: "lu:utensils-crossed" }), _jsx(RoomHeader, { title: "Porch", icon: "lu:house", readouts: _jsxs(_Fragment, { children: [_jsx(SensorReadout, { entity: "ha:sensor.temperature" }), _jsx(SensorReadout, { entity: "ha:sensor.humidity" })] }) })] }) }), _jsx(ComponentDoc, { title: "Tile", components: ['Tile'], description: "The base card every entity tile is built from: icon, label, status line, optional fill bar (drag to change it), trailing controls, a hold-to-open drawer and pending / done / error feedback. Use it directly for something that isn't an entity.", children: _jsxs(Grid, { children: [_jsx(Tile, { label: "Plain", icon: "lu:lamp", secondary: "Off" }), _jsx(Tile, { label: "Active", icon: "lu:lamp", active: true }), _jsx(TileFillDemo, {}), _jsx(Tile, { label: "With controls", icon: "lu:fan", trailing: _jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: "trailing" }) }), _jsx(Tile, { label: "Pending", icon: "lu:lamp", feedback: "pending" }), _jsx(Tile, { label: "Error", icon: "lu:lamp", feedback: "error" }), _jsx(Tile, { label: "Unavailable", icon: "lu:lamp", status: "unavailable" }), _jsx(Tile, { label: "Not found", icon: "lu:lamp", status: "missing" })] }) }), _jsx(ComponentDoc, { title: "Icon", components: ['Icon'], description: "A plain prefixed string, no import: `lu:` is Lucide, `tb:` is Tabler outline. It takes the surrounding text color and scales with `size` (default 24px).", children: _jsxs(Flex, { direction: "column", gap: 4, children: [_jsxs(Flex, { align: "center", gap: 4, children: [_jsx(Icon, { name: "lu:lightbulb" }), _jsx(Icon, { name: "lu:thermometer", size: 16 }), _jsx(Icon, { name: "lu:sofa", size: 32 }), _jsx(Icon, { name: "tb:vacuum-cleaner" }), _jsx(Icon, { name: "tb:car-fan", size: 16 })] }), _jsxs(Flex, { align: "center", gap: 4, css: { flexWrap: 'wrap' }, children: [_jsx(Typography, { as: "span", variant: "body", color: "textMuted", children: "Find an icon:" }), ICON_PACKS.map((pack) => (_jsx(Typography, { as: "span", variant: "body", children: _jsxs("a", { css: ({ palette }) => ({ color: palette.accent, textUnderlineOffset: 3 }), href: pack.href, target: "_blank", rel: "noreferrer", children: ["Search ", pack.name, " icons (", _jsxs("span", { css: codeStyles, children: [pack.prefix, ":"] }), ")"] }) }, pack.prefix)))] })] }) }), _jsx(ComponentDoc, { title: "Energy Chart", components: ['EnergyChart'], description: "A power section for a drawer, which tiles pass through `energy`: a live power reading, usage tiles and a sparkline. Expanded in a drawer it becomes the full chart with a range switcher.", children: _jsx(EnergyChart, { power: "ha:sensor.heater_power", energy: "ha:sensor.heater_energy", usage: heaterUsage, seriesByRange: heaterSeries }) }), _jsx(ComponentDoc, { title: "History Section", components: ['HistorySection'], description: "Recent activity for a drawer, which tiles pass through `history`: who or what changed the entity, and when. An empty list renders nothing.", children: _jsx(HistorySection, { entries: lampHistory }) }), _jsx(ComponentDoc, { title: "Light Tile", components: ['LightTile'], description: "Tap to toggle, hold to open its detail drawer. Dimmable lights drag to set brightness; color-capable lights add a palette button that opens swatches in the card (white temperatures by default, overridable with `colors`), and the card's icon shows the light's current color. The drawer has the full temperature and hue bars.", children: _jsxs(Grid, { children: [_jsx(LightTile, { entity: "ha:light.plain_on", energy: lampEnergy, history: lampHistory }), _jsx(LightTile, { entity: "ha:light.plain_off", history: stairsHistory }), _jsx(LightTile, { entity: "ha:light.dimmable", icon: "lu:sparkles", energy: ledEnergy, history: ledHistory }), _jsx(LightTile, { entity: "ha:light.color", icon: "lu:lamp-desk", history: nightLampHistory }), _jsx(LightTile, { entity: "ha:light.cct", icon: "lu:lamp-desk" }), _jsx(LightTile, { entity: "ha:light.unavailable" }), _jsx(LightTile, { entity: "ha:light.missing" })] }) }), _jsx(ComponentDoc, { title: "Climate Tile", components: ['ClimateTile'], description: "A heater/thermostat tile: a mode button that opens mode swatches in the card (like light colors), plus a target-temperature stepper. Hold for the drawer: modes, a target bar with fine +/- (hold to repeat), presets, energy and history.", children: _jsxs(Grid, { columns: 1, children: [_jsx(ClimateTile, { entity: "ha:climate.heater", energy: heaterEnergy, history: heaterHistory }), _jsx(ClimateTile, { entity: "ha:climate.off", energy: thermostatEnergy, history: heaterHistory }), _jsx(ClimateTile, { entity: "ha:climate.unavailable" })] }) }), _jsx(ComponentDoc, { title: "Animated Number", components: ['AnimatedNumber'], description: "A number that moves to its new value instead of jumping: a power reading, a temperature. The first value is shown at once; a new one is moved to from what is shown now, even if the last move has not finished. The text is changed directly, with no render for each step, so many of them cost little, and nothing moves when the app is set to reduced motion. `format` writes a number with its unit and should round, as it is called for each step. The drawer's power reading, the sensor readouts and a thermostat's current temperature use it.", children: _jsx(AnimatedNumberDemo, {}) }), _jsx(ComponentDoc, { title: "Sensor Readout", components: ['SensorReadout'], description: "An inline value with icon and unit, defaulting its icon by device class. Readings outside a safe range get a warning (humidity defaults to 30\u201360 %; override with `safeRange`). Pass `history` to make it tappable: the drawer charts it with min/max for today, this week and this month, and a custom date and time range when expanded.", children: _jsxs(Grid, { columns: 3, children: [_jsx(SensorReadout, { entity: "ha:sensor.temperature", history: temperatureHistory }), _jsx(SensorReadout, { entity: "ha:sensor.humidity", history: humidityHistory }), _jsx(SensorReadout, { entity: "ha:sensor.bedroom_humidity", history: bedroomHumidityHistory }), _jsx(SensorReadout, { entity: "ha:sensor.office_humidity", history: officeHumidityHistory }), _jsx(SensorReadout, { entity: "ha:sensor.unavailable" }), _jsx(SensorReadout, { entity: "ha:sensor.unknown" })] }) }), _jsx(ComponentDoc, { title: "Scene Button & Action Button", components: ['SceneButton', 'ActionButton'], description: "A scene is just an action entity. An action button triggers an action (or flips a switch) and shows pending / done / error feedback after a press; `onPress` runs your own logic instead.", children: _jsxs(Grid, { columns: 3, children: [_jsx(SceneButton, { entity: "ha:scene.tv_time" }), _jsx(ActionButton, { label: "Shower", icon: "tb:bath", entity: "ha:script.shower" }), _jsx(ActionButton, { label: "Always Fails", onPress: () => Promise.reject(new Error('That went wrong')) })] }) }), _jsx(ComponentDoc, { title: "Media Player Bar", components: ['MediaPlayerBar'], description: "Track info (with a small shuffle toggle by the title) and the time beside it, then volume, browse, previous, play/pause and next (the artwork opens the browser too), with a thin progress line along the bottom while something plays. The browse button opens the player's own library in the drawer; pass `browse` content to replace it, or `false` for no button. The volume button opens a volume slider in the bar (with a mute swatch, like the light colors and climate modes). Shows album art, or a note glyph when there is none. In a space narrower than 560px, or with `rows={2}`, the controls move to a second row under the track.", children: _jsxs(Flex, { direction: "column", gap: 3, children: [_jsx(MediaPlayerBar, { entity: "ha:media_player.living_room" }), _jsx(MediaPlayerBar, { entity: "ha:media_player.off" }), _jsx(Flex, { width: 380, children: _jsx(MediaPlayerBar, { entity: "ha:media_player.living_room", rows: 2 }) })] }) }), _jsx(ComponentDoc, { title: "Media Player Column", components: ['MediaPlayerColumn'], description: "The player as an upright card for a narrow column beside a dashboard: the artwork in a ring that shows how far along playback is (drag around it to seek), title, transport, and a volume bar that is always visible. The browse button opens the library in the drawer.", children: _jsx(Flex, { width: 320, children: _jsx(MediaPlayerColumn, { entity: "ha:media_player.living_room" }) }) }), _jsx(ComponentDoc, { title: "Media Player Full", components: ['MediaPlayerFull', 'MediaQueue'], description: "The big player: the player centered with its queue beside it (`MediaQueue`: tap a track to jump to it, the cross takes it out, Clear empties it), and its library below, where every track can be played, played next or added to the queue, and an open album or playlist can be played, shuffled or added whole. The media cards' drawers show the player and library too. Where the queue has no room beside the player (a narrow column, the side drawer), Library and Queue are tabs above the list; `tabs={false}` leaves only the library, `defaultTab` and `tab` / `onTabChange` choose which is open. A dashboard puts it in a page of its own, around it whatever it likes.", children: _jsx(Flex, { direction: "column", children: _jsx(MediaPlayerFull, { entity: "ha:media_player.living_room", wide: true, queue: _jsx(MediaQueue, { entity: "ha:media_player.living_room" }), browser: _jsx(MediaBrowser, { entity: "ha:media_player.living_room", layout: "theater" }) }) }) }), _jsx(ComponentDoc, { title: "Weather Forecast", components: ['WeatherForecast'], description: "A weather entity's forecast: the weather now, the next 24 hours as a chart (hover it for everything about an hour) and the days ahead. The top bar's weather chip shows it in a drawer; a dashboard can put it in a page of its own. Narrow, then with `expanded` (readings tiles, a card for each hour).", children: _jsxs(Flex, { direction: "column", gap: 6, children: [_jsx(Flex, { direction: "column", width: 380, children: _jsx(WeatherForecast, { entity: "ha:weather.home", expanded: false }) }), _jsx(WeatherForecast, { entity: "ha:weather.home", expanded: true })] }) }), _jsx(ComponentDoc, { title: "Media Browser", components: ['MediaBrowser'], description: "A player's own library in the app's style: tap a folder to open it, a track or station to play it, or the play button on an album, playlist or artist for all of it. The search box appears when the library can be searched; with `search='icon'` (the second demo) it is an icon at the end of the row of tabs, after a thin line, and pressing it turns that row into the field, so it takes no room of its own. The `theater` layout (third demo) is one row of large cards that scrolls sideways, for a wide space; `list` is the compact default. While a shelf loads, placeholders take the room the cards will (fourth demo, a shelf that never arrives), so nothing moves.", children: _jsxs(Flex, { direction: "column", gap: 6, children: [_jsx(Flex, { direction: "column", maxHeight: 420, overflow: "auto", children: _jsx(MediaBrowser, { entity: "ha:media_player.living_room" }) }), _jsx(Flex, { direction: "column", maxHeight: 420, overflow: "auto", children: _jsx(MediaBrowser, { entity: "ha:media_player.living_room", search: "icon" }) }), _jsx(MediaBrowser, { entity: "ha:media_player.living_room", layout: "theater" }), _jsx(MediaBrowser, { entity: "ha:media_player.loading", layout: "theater" })] }) }), _jsx(ComponentDoc, { title: "Navigation", components: ['NavRail', 'NavDock', 'Page'], description: "Routes within one dashboard. A dashboard includes one itself, usually in its layout route: NavRail is fixed to the left and NavDock floats at the bottom, and both reserve the space they take in the Page around them, which pads so content never sits under them.", children: _jsxs(Flex, { direction: "column", gap: 5, children: [_jsx(SubPreview, { label: "NavRail, in a Page", height: 240, children: _jsxs(Page, { height: "100%", children: [_jsx(NavRail, { base: "/gallery", items: NAV_ITEMS }), _jsx(Typography, { as: "p", variant: "body", color: "textMuted", children: "Page content, padded clear of the rail." })] }) }), _jsx(SubPreview, { label: "NavDock", height: 140, children: _jsx(NavDock, { base: "/gallery", items: NAV_ITEMS }) })] }) }), _jsx(ComponentDoc, { title: "Animated Outlet", components: ['AnimatedOutlet'], description: "A dashboard layout's `Outlet` with a transition between its pages: the page that was showing fades out, then the new one fades in, sliding from the side it sits on in the nav (a later page from the right, an earlier one from the left) when you give it the nav's `items`. Without them the pages only fade. It does nothing for a visitor who prefers reduced motion. Try the links.", children: _jsx(AnimatedOutletDemo, {}) }), _jsx(ComponentDoc, { title: "Top Bar", components: ['TopBar'], description: "Page chrome above a dashboard's content: a title (a dropdown to switch dashboards, once there's more than one to switch to), scene shortcuts, weather (tap it for the forecast), presence, and a clock.", children: _jsx(TopBar, { title: "Living Room", dashboards: [
+                                        }) }), _jsx(Icon, { name: "lu:sun", size: 14 }), _jsx(Icon, { name: "lu:moon", size: 14 })] })] }), _jsx(ComponentDoc, { title: "Board & Cell", components: ['Board', 'Cell'], description: "A page for one known device, laid out on a grid. Each cell says only how big it is (`cols` wide, `rows` tall); the board places them in order, in the first spot they fit. Rows are as tall as their content, so a cell of `rows={2}` ends where the second row does, and `rows='fill'` runs from where the cell is placed down to the bottom of the page, whatever rows are beside it. Every card is a whole number of grid modules tall, the gap between columns and inside a cell is three modules and between rows six, so the result stays on the grid (turn on the debug menu's Show grid to see it).", children: _jsxs(Flex, { direction: "column", gap: 5, children: [_jsxs(Board, { children: [_jsxs(Cell, { cols: 8, children: [_jsx(RoomHeader, { title: "Kitchen", icon: "lu:utensils-crossed" }), _jsxs(Grid, { columns: 2, children: [_jsx(Tile, { label: "Lamp", icon: "lu:lightbulb" }), _jsx(Tile, { label: "Ceiling", icon: "lu:lightbulb" })] })] }), _jsx(Cell, { cols: 4, rows: 2, children: _jsx(MediaPlayerColumn, { entity: "ha:media_player.off" }) }), _jsxs(Cell, { cols: 8, children: [_jsx(RoomHeader, { title: "Stairs", icon: "lu:footprints" }), _jsxs(Grid, { columns: 2, children: [_jsx(Tile, { label: "Lamp", icon: "lu:lightbulb" }), _jsx(Tile, { label: "Spotlights", icon: "lu:lightbulb" })] })] })] }), _jsx(Flex, { direction: "column", height: 460, css: { outline: '1px dashed currentColor' }, children: _jsxs(Board, { children: [_jsx(Cell, { children: _jsxs(TopRow, { children: [_jsx(DateChip, {}), _jsx(Clock, { format: "24h" })] }) }), _jsxs(Cell, { cols: 8, children: [_jsx(RoomHeader, { title: "Kitchen", icon: "lu:utensils-crossed" }), _jsxs(Grid, { columns: 2, children: [_jsx(Tile, { label: "Lamp", icon: "lu:lightbulb" }), _jsx(Tile, { label: "Ceiling", icon: "lu:lightbulb" })] })] }), _jsx(Cell, { cols: 4, rows: "fill", children: _jsx(MediaPlayerColumn, { entity: "ha:media_player.off" }) })] }) })] }) }), _jsx(ComponentDoc, { title: "Top Row", components: ['TopRow'], description: "The row along the top of a page you build yourself instead of with `TopBar`: the date, the weather, the clock and the status in a line at the right, in the height the grid gives the top row (40px), with no padding of its own.", children: _jsxs(TopRow, { children: [_jsx(DateChip, {}), _jsx(Clock, { format: "24h" })] }) }), _jsx(ComponentDoc, { title: "Grid", components: ['Grid'], description: "Lays tiles out in equal-width columns (`columns`, default 2). Cells share the width and never overflow it.", children: _jsxs(Flex, { direction: "column", gap: 5, children: [_jsxs(Grid, { columns: 2, children: [_jsx(Tile, { label: "Two", icon: "lu:layout-grid", secondary: "columns={2}" }), _jsx(Tile, { label: "Columns", icon: "lu:layout-grid", secondary: "equal width" })] }), _jsxs(Grid, { columns: 3, children: [_jsx(Tile, { label: "Three", icon: "lu:layout-grid", secondary: "columns={3}" }), _jsx(Tile, { label: "Columns", icon: "lu:layout-grid", secondary: "equal width" }), _jsx(Tile, { label: "Wide", icon: "lu:layout-grid", secondary: "fits the row" })] })] }) }), _jsx(ComponentDoc, { title: "Room Header", components: ['RoomHeader'], description: "The header that starts a room: a muted icon and title, a hairline and readouts on the right, placed above a Grid (or any tiles). It adds its own space above, so consecutive rooms read as groups.", children: _jsxs(Flex, { direction: "column", gap: 4, children: [_jsx(RoomHeader, { title: "Kitchen", icon: "lu:utensils-crossed" }), _jsx(RoomHeader, { title: "Porch", icon: "lu:house", readouts: _jsxs(_Fragment, { children: [_jsx(SensorReadout, { entity: "ha:sensor.temperature" }), _jsx(SensorReadout, { entity: "ha:sensor.humidity" })] }) })] }) }), _jsx(ComponentDoc, { title: "Tile", components: ['Tile'], description: "The base card every entity tile is built from: icon, label, status line, optional fill bar (drag to change it), trailing controls, a hold-to-open drawer and pending / done / error feedback. Use it directly for something that isn't an entity.", children: _jsxs(Grid, { children: [_jsx(Tile, { label: "Plain", icon: "lu:lamp", secondary: "Off" }), _jsx(Tile, { label: "Active", icon: "lu:lamp", active: true }), _jsx(TileFillDemo, {}), _jsx(Tile, { label: "With controls", icon: "lu:fan", trailing: _jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: "trailing" }) }), _jsx(Tile, { label: "Pending", icon: "lu:lamp", feedback: "pending" }), _jsx(Tile, { label: "Error", icon: "lu:lamp", feedback: "error" }), _jsx(Tile, { label: "Unavailable", icon: "lu:lamp", status: "unavailable" }), _jsx(Tile, { label: "Not found", icon: "lu:lamp", status: "missing" })] }) }), _jsx(ComponentDoc, { title: "Task Tile", components: ['TaskTile'], description: "A recurring task (a filter to change, an additive to add) as a tile: its name, where it stands (up to date, due soon, overdue) and when it is due. Whoever has the task decides the state, since how soon is 'soon' differs between a weekly task and a yearly one. Tap one: it asks whether it is done, and for the day it was done on (today, or an earlier one if it was forgotten), and only a confirmation calls `onComplete`. Marking one done here only waits a moment.", children: _jsxs(Grid, { children: [_jsx(TaskTile, { label: "Filter", icon: "lu:wrench", state: "ok", dueAt: inDays(20), lastDoneAt: inDays(-10), onComplete: pause }), _jsx(TaskTile, { label: "Additive", icon: "lu:pipette", state: "dueSoon", dueAt: inDays(2), lastDoneAt: inDays(-5), onComplete: pause }), _jsx(TaskTile, { label: "Salt", icon: "lu:shaker", state: "overdue", dueAt: inDays(-3), lastDoneAt: inDays(-10), onComplete: pause }), _jsx(TaskTile, { label: "Not found", icon: "lu:wrench", state: "ok", status: "missing", onComplete: pause })] }) }), _jsx(ComponentDoc, { title: "Confirm Dialog", components: ['ConfirmDialog'], description: "A question that has to be answered before something is done, so a stray tap cannot do it. It is drawn over the whole page, with a way to back out (Cancel, a tap outside, Escape) and a button to go ahead; more to ask for (a date, say) goes inside it.", children: _jsx(ConfirmDialogDemo, {}) }), _jsx(ComponentDoc, { title: "Icon", components: ['Icon'], description: "A plain prefixed string, no import: `lu:` is Lucide, `tb:` is Tabler outline. It takes the surrounding text color and scales with `size` (default 24px).", children: _jsxs(Flex, { direction: "column", gap: 4, children: [_jsxs(Flex, { align: "center", gap: 4, children: [_jsx(Icon, { name: "lu:lightbulb" }), _jsx(Icon, { name: "lu:thermometer", size: 16 }), _jsx(Icon, { name: "lu:sofa", size: 32 }), _jsx(Icon, { name: "tb:vacuum-cleaner" }), _jsx(Icon, { name: "tb:car-fan", size: 16 })] }), _jsxs(Flex, { align: "center", gap: 4, css: { flexWrap: 'wrap' }, children: [_jsx(Typography, { as: "span", variant: "body", color: "textMuted", children: "Find an icon:" }), ICON_PACKS.map((pack) => (_jsx(Typography, { as: "span", variant: "body", children: _jsxs("a", { css: ({ palette }) => ({ color: palette.accent, textUnderlineOffset: 3 }), href: pack.href, target: "_blank", rel: "noreferrer", children: ["Search ", pack.name, " icons (", _jsxs("span", { css: codeStyles, children: [pack.prefix, ":"] }), ")"] }) }, pack.prefix)))] })] }) }), _jsx(ComponentDoc, { title: "Energy Chart", components: ['EnergyChart'], description: "A power section for a drawer, which tiles pass through `energy`: a live power reading, usage tiles and a sparkline. Expanded in a drawer it becomes the full chart with a range switcher.", children: _jsx(EnergyChart, { power: "ha:sensor.heater_power", energy: "ha:sensor.heater_energy", usage: heaterUsage, seriesByRange: heaterSeries }) }), _jsx(ComponentDoc, { title: "History Section", components: ['HistorySection'], description: "Recent activity for a drawer, which tiles pass through `history`: who or what changed the entity, and when. An empty list renders nothing.", children: _jsx(HistorySection, { entries: lampHistory }) }), _jsx(ComponentDoc, { title: "Light Tile", components: ['LightTile'], description: "Tap to toggle, hold to open its detail drawer. Dimmable lights drag to set brightness; color-capable lights add a palette button that opens swatches in the card (white temperatures by default, overridable with `colors`), and the card's icon shows the light's current color. The drawer has the full temperature and hue bars.", children: _jsxs(Grid, { children: [_jsx(LightTile, { entity: "ha:light.plain_on", energy: lampEnergy, history: lampHistory }), _jsx(LightTile, { entity: "ha:light.plain_off", history: stairsHistory }), _jsx(LightTile, { entity: "ha:light.dimmable", icon: "lu:sparkles", energy: ledEnergy, history: ledHistory }), _jsx(LightTile, { entity: "ha:light.color", icon: "lu:lamp-desk", history: nightLampHistory }), _jsx(LightTile, { entity: "ha:light.cct", icon: "lu:lamp-desk" }), _jsx(LightTile, { entity: "ha:light.unavailable" }), _jsx(LightTile, { entity: "ha:light.missing" })] }) }), _jsx(ComponentDoc, { title: "Climate Tile", components: ['ClimateTile'], description: "A heater/thermostat tile: a mode button that opens mode swatches in the card (like light colors), plus a target-temperature stepper. Hold for the drawer: modes, a target bar with fine +/- (hold to repeat), presets, energy and history.", children: _jsxs(Grid, { columns: 1, children: [_jsx(ClimateTile, { entity: "ha:climate.heater", energy: heaterEnergy, history: heaterHistory }), _jsx(ClimateTile, { entity: "ha:climate.off", energy: thermostatEnergy, history: heaterHistory }), _jsx(ClimateTile, { entity: "ha:climate.unavailable" })] }) }), _jsx(ComponentDoc, { title: "Animated Number", components: ['AnimatedNumber'], description: "A number that moves to its new value instead of jumping: a power reading, a temperature. The first value is shown at once; a new one is moved to from what is shown now, even if the last move has not finished. The text is changed directly, with no render for each step, so many of them cost little, and nothing moves when the app is set to reduced motion. `format` writes a number with its unit and should round, as it is called for each step. The drawer's power reading, the sensor readouts and a thermostat's current temperature use it.", children: _jsx(AnimatedNumberDemo, {}) }), _jsx(ComponentDoc, { title: "Sensor Readout", components: ['SensorReadout'], description: "An inline value with icon and unit, defaulting its icon by device class. Readings outside a safe range get a warning (humidity defaults to 30\u201360 %; override with `safeRange`). Pass `history` to make it tappable: the drawer charts it with min/max for today, this week and this month, and a custom date and time range when expanded.", children: _jsxs(Grid, { columns: 3, children: [_jsx(SensorReadout, { entity: "ha:sensor.temperature", history: temperatureHistory }), _jsx(SensorReadout, { entity: "ha:sensor.humidity", history: humidityHistory }), _jsx(SensorReadout, { entity: "ha:sensor.bedroom_humidity", history: bedroomHumidityHistory }), _jsx(SensorReadout, { entity: "ha:sensor.office_humidity", history: officeHumidityHistory }), _jsx(SensorReadout, { entity: "ha:sensor.unavailable" }), _jsx(SensorReadout, { entity: "ha:sensor.unknown" })] }) }), _jsx(ComponentDoc, { title: "Scene Button & Action Button", components: ['SceneButton', 'ActionButton'], description: "A scene is just an action entity. An action button triggers an action (or flips a switch) and shows pending / done / error feedback after a press; `onPress` runs your own logic instead.", children: _jsxs(Grid, { columns: 3, children: [_jsx(SceneButton, { entity: "ha:scene.tv_time" }), _jsx(ActionButton, { label: "Shower", icon: "tb:bath", entity: "ha:script.shower" }), _jsx(ActionButton, { label: "Always Fails", onPress: () => Promise.reject(new Error('That went wrong')) })] }) }), _jsx(ComponentDoc, { title: "Media Player Bar", components: ['MediaPlayerBar'], description: "Track info (with a small shuffle toggle by the title) and the time beside it, then volume, browse, previous, play/pause and next (the artwork opens the browser too), with a thin progress line along the bottom while something plays. The browse button opens the player's own library in the drawer; pass `browse` content to replace it, or `false` for no button. The volume button opens a volume slider in the bar (with a mute swatch, like the light colors and climate modes). Shows album art, or a note glyph when there is none. In a space narrower than 560px, or with `rows={2}`, the controls move to a second row under the track.", children: _jsxs(Flex, { direction: "column", gap: 3, children: [_jsx(MediaPlayerBar, { entity: "ha:media_player.living_room" }), _jsx(MediaPlayerBar, { entity: "ha:media_player.off" }), _jsx(Flex, { width: 380, children: _jsx(MediaPlayerBar, { entity: "ha:media_player.living_room", rows: 2 }) })] }) }), _jsx(ComponentDoc, { title: "Media Player Column", components: ['MediaPlayerColumn'], description: "The player as an upright card for a narrow column beside a dashboard: the artwork in a ring that shows how far along playback is (drag around it to seek), title, transport, and a volume bar that is always visible. The browse button opens the library in the drawer.", children: _jsx(Flex, { width: 320, children: _jsx(MediaPlayerColumn, { entity: "ha:media_player.living_room" }) }) }), _jsx(ComponentDoc, { title: "Media Player Full", components: ['MediaPlayerFull', 'MediaQueue'], description: "The big player: the player centered with its queue beside it (`MediaQueue`: tap a track to jump to it, the cross takes it out, Clear empties it), and its library below, where every track can be played, played next or added to the queue, and an open album or playlist can be played, shuffled or added whole. The media cards' drawers show the player and library too. Where the queue has no room beside the player (a narrow column, the side drawer), Library and Queue are tabs above the list; `tabs={false}` leaves only the library, `defaultTab` and `tab` / `onTabChange` choose which is open. A dashboard puts it in a page of its own, around it whatever it likes.", children: _jsx(Flex, { direction: "column", children: _jsx(MediaPlayerFull, { entity: "ha:media_player.living_room", wide: true, queue: _jsx(MediaQueue, { entity: "ha:media_player.living_room" }), browser: _jsx(MediaBrowser, { entity: "ha:media_player.living_room", layout: "theater" }) }) }) }), _jsx(ComponentDoc, { title: "Weather Forecast", components: ['WeatherForecast'], description: "A weather entity's forecast: the weather now, the next 24 hours as a chart (hover it for everything about an hour) and the days ahead. The top bar's weather chip shows it in a drawer; a dashboard can put it in a page of its own. Narrow, then with `expanded` (readings tiles, a card for each hour).", children: _jsxs(Flex, { direction: "column", gap: 6, children: [_jsx(Flex, { direction: "column", width: 380, children: _jsx(WeatherForecast, { entity: "ha:weather.home", expanded: false }) }), _jsx(WeatherForecast, { entity: "ha:weather.home", expanded: true })] }) }), _jsx(ComponentDoc, { title: "Media Browser", components: ['MediaBrowser'], description: "A player's own library in the app's style: tap a folder to open it, a track or station to play it, or the play button on an album, playlist or artist for all of it. The search box appears when the library can be searched; with `search='icon'` (the second demo) it is an icon at the end of the row of tabs, after a thin line, and pressing it turns that row into the field, so it takes no room of its own. The `theater` layout (third demo) is one row of large cards that scrolls sideways, for a wide space; `list` is the compact default. While a shelf loads, placeholders take the room the cards will (fourth demo, a shelf that never arrives), so nothing moves.", children: _jsxs(Flex, { direction: "column", gap: 6, children: [_jsx(Flex, { direction: "column", maxHeight: 420, overflow: "auto", children: _jsx(MediaBrowser, { entity: "ha:media_player.living_room" }) }), _jsx(Flex, { direction: "column", maxHeight: 420, overflow: "auto", children: _jsx(MediaBrowser, { entity: "ha:media_player.living_room", search: "icon" }) }), _jsx(MediaBrowser, { entity: "ha:media_player.living_room", layout: "theater" }), _jsx(MediaBrowser, { entity: "ha:media_player.loading", layout: "theater" })] }) }), _jsx(ComponentDoc, { title: "Navigation", components: ['NavRail', 'NavDock', 'Page'], description: "Routes within one dashboard. A dashboard includes one itself, usually in its layout route: NavRail is fixed to the left and NavDock floats at the bottom, and both reserve the space they take in the Page around them, which pads so content never sits under them. An item can carry a dot (`attention`: `notice` or `urgent`) when something on its page needs a look, so it is seen without opening the page.", children: _jsxs(Flex, { direction: "column", gap: 5, children: [_jsx(SubPreview, { label: "NavRail, in a Page", height: 240, children: _jsxs(Page, { height: "100%", children: [_jsx(NavRail, { base: "/gallery", items: NAV_ITEMS }), _jsx(Typography, { as: "p", variant: "body", color: "textMuted", children: "Page content, padded clear of the rail." })] }) }), _jsx(SubPreview, { label: "NavDock", height: 140, children: _jsx(NavDock, { base: "/gallery", items: NAV_ITEMS }) }), _jsx(SubPreview, { label: "NavRail, with something to look at on two pages", height: 240, children: _jsxs(Page, { height: "100%", children: [_jsx(NavRail, { base: "/gallery", items: ATTENTION_ITEMS }), _jsx(Typography, { as: "p", variant: "body", color: "textMuted", children: "A warm dot says something is coming up, a red one that it needs doing now." })] }) }), _jsx(SubPreview, { label: "NavDock, with something to look at on two pages", height: 140, children: _jsx(NavDock, { base: "/gallery", items: ATTENTION_ITEMS }) })] }) }), _jsx(ComponentDoc, { title: "Animated Outlet", components: ['AnimatedOutlet'], description: "A dashboard layout's `Outlet` with a transition between its pages: the page that was showing fades out, then the new one fades in, sliding from the side it sits on in the nav (a later page from the right, an earlier one from the left) when you give it the nav's `items`. Without them the pages only fade. It does nothing for a visitor who prefers reduced motion. Try the links.", children: _jsx(AnimatedOutletDemo, {}) }), _jsx(ComponentDoc, { title: "Top Bar", components: ['TopBar'], description: "Page chrome above a dashboard's content: a title (a dropdown to switch dashboards, once there's more than one to switch to), scene shortcuts, weather (tap it for the forecast), presence, and a clock.", children: _jsx(TopBar, { title: "Living Room", dashboards: [
                                 { id: 'living-room', title: 'Living Room', icon: 'lu:sofa' },
                                 { id: 'bedroom', title: 'Bedroom', icon: 'lu:bed' },
                                 { id: 'bathroom', title: 'Bathroom', icon: 'tb:bath' },

package/dist/gallery/props-data.js

@@ -260,6 +260,112 @@ export const COMPONENT_PROPS = {
         doc: '',
         props: [],
     },
+    TaskTile: {
+        doc: 'A recurring task as a tile: its name, where it stands (up to date, due soon, overdue) and when it is due. Tapping it asks whether it is done, with the day it was done on (today, or an earlier one if it was forgotten), and only a confirmation calls `onComplete`, so a stray tap does nothing.',
+        props: [
+            {
+                doc: 'What is to be done, e.g. `Septic additive`.',
+                name: 'label',
+                optional: false,
+                type: 'string',
+            },
+            {
+                doc: 'Icon id, e.g. `lu:wrench`.',
+                name: 'icon',
+                optional: true,
+                type: 'IconName',
+            },
+            {
+                doc: 'Where the task stands. Whoever has the task decides it: how soon is "soon" is different for a weekly task and a yearly one.',
+                name: 'state',
+                optional: false,
+                type: 'TaskState',
+            },
+            {
+                doc: 'When it is next due. Shown as "Due in 2 days" or "Overdue by 3 days".',
+                name: 'dueAt',
+                optional: true,
+                type: 'Date | undefined',
+            },
+            {
+                doc: 'When it was last done, shown in the question that marks it done again.',
+                name: 'lastDoneAt',
+                optional: true,
+                type: 'Date | undefined',
+            },
+            {
+                doc: 'Status of the thing behind it, as for `Tile`: anything but `ready` shows why instead and disables the tile.',
+                name: 'status',
+                optional: true,
+                type: 'EntityStatus',
+            },
+            {
+                doc: 'The person confirmed it is done, on this day (today unless they chose another, in case it was forgotten at the time). Rejecting shows the error in the dialog and leaves it open.',
+                name: 'onComplete',
+                optional: false,
+                type: '(doneOn: Date) => void | Promise<void>',
+            },
+        ],
+    },
+    ConfirmDialog: {
+        doc: 'A question that has to be answered before something is done, so a stray tap cannot do it: a card in the middle of the page over a dimmed scrim, with a way to back out (Cancel, a tap outside, Escape) and a button to go ahead. It is drawn over the whole page, whatever it is opened from. Focus moves into it while it is open and returns to what had it after, and Tab stays inside.',
+        props: [
+            {
+                doc: 'Whether the dialog is showing.',
+                name: 'open',
+                optional: false,
+                type: 'boolean',
+            },
+            {
+                doc: 'What is being asked, as a short question: "Mark the septic additive as done?".',
+                name: 'title',
+                optional: false,
+                type: 'string',
+            },
+            {
+                doc: 'A line under the title.',
+                name: 'description',
+                optional: true,
+                type: 'ReactNode',
+            },
+            {
+                doc: 'Label of the button that goes ahead. Default `Confirm`.',
+                name: 'confirmLabel',
+                optional: true,
+                type: 'string',
+            },
+            {
+                doc: 'Label of the button that backs out. Default `Cancel`.',
+                name: 'cancelLabel',
+                optional: true,
+                type: 'string',
+            },
+            {
+                doc: 'The person went ahead.',
+                name: 'onConfirm',
+                optional: false,
+                type: '() => void',
+            },
+            {
+                doc: 'The person backed out: the Cancel button, a tap outside, or Escape.',
+                name: 'onCancel',
+                optional: false,
+                type: '() => void',
+            },
+            {
+                doc: 'Something is being done with the answer: both buttons wait.',
+                name: 'busy',
+                optional: true,
+                type: 'boolean',
+            },
+            {
+                doc: 'More to ask for before going ahead, e.g. a date.',
+                name: 'children',
+                optional: true,
+                type: 'ReactNode',
+            },
+        ],
+    },
     EnergyChart: {
         doc: "A power-draw chart for an entity's detail drawer, e.g. from a Shelly's energy monitoring. Generic — any entity type can supply it. Deliberately two-tier: a bare sparkline while the drawer is at its normal (side) width, and the full interactive chart — axes, tooltip, a selectable time range — only once it's expanded to fullscreen, where there's room for it.",
         props: [

package/dist/index.d.ts

@@ -15,6 +15,8 @@ export * from './layout/page.tsx';
 export * from './layout/animated-outlet.tsx';
 export * from './layout/room-header.tsx';
 export { Tile, type TileProps } from './layout/tile.tsx';
+export { TaskTile, taskLine, type TaskState, type TaskTileProps } from './layout/task-tile.tsx';
+export { ConfirmDialog, type ConfirmDialogProps } from './layout/confirm-dialog.tsx';
 export * from './layout/energy-chart.tsx';
 export * from './layout/history-section.tsx';
 export type { SensorSample } from './layout/sensor-history.tsx';

package/dist/index.js

@@ -11,6 +11,8 @@ export * from './layout/page.js';
 export * from './layout/animated-outlet.js';
 export * from './layout/room-header.js';
 export { Tile } from './layout/tile.js';
+export { TaskTile, taskLine } from './layout/task-tile.js';
+export { ConfirmDialog } from './layout/confirm-dialog.js';
 export * from './layout/energy-chart.js';
 export * from './layout/history-section.js';
 export * from './entities/light-tile.js';

package/dist/layout/check-mark.d.ts

@@ -0,0 +1,5 @@
+/** A check that draws itself, in the text color of what it is in. It plays once, as it appears; with
+ * reduced motion it appears drawn. Announced as "Done". */
+export declare function CheckMark({ size }: {
+    size?: number;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/check-mark.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { Box } from 'e-prim';
+import { motion } from 'motion/react';
+/** A check that draws itself, in the text color of what it is in. It plays once, as it appears; with
+ * reduced motion it appears drawn. Announced as "Done". */
+export function CheckMark({ size = 22 }) {
+    return (_jsx(Box, { as: "span", role: "status", "aria-label": "Done", css: { display: 'grid', color: 'inherit' }, children: _jsx("svg", { viewBox: "0 0 24 24", width: size, height: size, "aria-hidden": "true", children: _jsx(motion.path, { d: "M6 12.5 L10.5 17 L18 8", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: 0.3, delay: 0.05, ease: 'easeOut' } }) }) }));
+}

package/dist/layout/confirm-dialog.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+export interface ConfirmDialogProps {
+    /** Whether the dialog is showing. */
+    open: boolean;
+    /** What is being asked, as a short question: "Mark the septic additive as done?". */
+    title: string;
+    /** A line under the title. */
+    description?: ReactNode;
+    /** Label of the button that goes ahead. Default `Confirm`. */
+    confirmLabel?: string;
+    /** Label of the button that backs out. Default `Cancel`. */
+    cancelLabel?: string;
+    /** The person went ahead. */
+    onConfirm: () => void;
+    /** The person backed out: the Cancel button, a tap outside, or Escape. */
+    onCancel: () => void;
+    /** Something is being done with the answer: both buttons wait. */
+    busy?: boolean;
+    /** More to ask for before going ahead, e.g. a date. */
+    children?: ReactNode;
+}
+/**
+ * A question that has to be answered before something is done, so a stray tap cannot do it: a card in the
+ * middle of the page over a dimmed scrim, with a way to back out (Cancel, a tap outside, Escape) and a button
+ * to go ahead. It is drawn over the whole page, whatever it is opened from. Focus moves into it while it is
+ * open and returns to what had it after, and Tab stays inside.
+ */
+export declare function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, onConfirm, onCancel, busy, children, }: ConfirmDialogProps): import("react").ReactPortal;

package/dist/layout/confirm-dialog.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { Box, Flex, Typography } from 'e-prim';
+import { AnimatePresence, motion } from 'motion/react';
+import { useEffect, useId, useRef } from 'react';
+import { createPortal } from 'react-dom';
+const FOCUSABLE = 'button:not(:disabled), [href], input:not(:disabled), [tabindex]:not([tabindex="-1"])';
+/**
+ * A question that has to be answered before something is done, so a stray tap cannot do it: a card in the
+ * middle of the page over a dimmed scrim, with a way to back out (Cancel, a tap outside, Escape) and a button
+ * to go ahead. It is drawn over the whole page, whatever it is opened from. Focus moves into it while it is
+ * open and returns to what had it after, and Tab stays inside.
+ */
+export function ConfirmDialog({ open, title, description, confirmLabel = 'Confirm', cancelLabel = 'Cancel', onConfirm, onCancel, busy = false, children, }) {
+    const heading = useId();
+    const about = useId();
+    const card = useRef(null);
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        const before = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        card.current?.focus();
+        return () => before?.focus();
+    }, [open]);
+    const onKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            onCancel();
+            return;
+        }
+        if (event.key === 'Tab' && card.current) {
+            const inside = [...card.current.querySelectorAll(FOCUSABLE)];
+            const first = inside[0];
+            const last = inside.at(-1);
+            if (event.shiftKey &&
+                (document.activeElement === first || document.activeElement === card.current)) {
+                event.preventDefault();
+                last?.focus();
+            }
+            else if (!event.shiftKey && document.activeElement === last) {
+                event.preventDefault();
+                first?.focus();
+            }
+        }
+    };
+    return createPortal(_jsx(AnimatePresence, { children: open ? (_jsx(Flex, { as: motion.div, align: "center", justify: "center", position: "fixed", zIndex: "modal", p: 4, onClick: onCancel, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.16 }, css: ({ palette }) => ({
+                inset: 0,
+                // The page's own color, so the dimming follows the theme.
+                background: `color-mix(in srgb, ${palette.bg} 72%, transparent)`,
+            }), children: _jsxs(Flex, { as: motion.div, ref: card, role: "dialog", "aria-modal": "true", "aria-labelledby": heading, ...(description ? { 'aria-describedby': about } : {}), tabIndex: -1, direction: "column", gap: 4, background: "surfaceRaised", radius: "card", shadow: "drawer", p: 5, onClick: (event) => event.stopPropagation(), onKeyDown: onKeyDown, initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.98 }, transition: { duration: 0.18, ease: 'easeOut' }, 
+                // Scrolls when what is in it does not fit the screen, rather than running off it.
+                css: {
+                    width: 'min(420px, 100%)',
+                    maxHeight: '100%',
+                    overflowY: 'auto',
+                    outline: 'none',
+                }, children: [_jsxs(Flex, { direction: "column", gap: 1.5, children: [_jsx(Typography, { as: "h2", variant: "heading", id: heading, children: title }), description ? (_jsx(Typography, { as: "p", variant: "body", color: "textMuted", id: about, children: description })) : null] }), children ? _jsx(Box, { children: children }) : null, _jsxs(Flex, { justify: "flex-end", gap: 2, children: [_jsx(DialogButton, { label: cancelLabel, disabled: busy, onClick: onCancel }), _jsx(DialogButton, { label: confirmLabel, primary: true, disabled: busy, onClick: onConfirm })] })] }) }, "scrim")) : null }), document.body);
+}
+function DialogButton({ label, primary = false, disabled, onClick, }) {
+    return (_jsx(Flex, { as: "button", type: "button", onClick: onClick, disabled: disabled, align: "center", justify: "center", radius: "full", cursor: disabled ? 'default' : 'pointer', height: 40, px: 5, background: primary ? 'accent' : 'surface', color: primary ? 'accentText' : 'text', css: { opacity: disabled ? 0.5 : 1 }, children: _jsx(Typography, { as: "span", variant: "label", children: label }) }));
+}

package/dist/layout/debug-menu.js

@@ -5,6 +5,11 @@ import { THEME_CHOICES, useDebug } from '../debug.js';
 import { Icon } from '../icon.js';
 import { ChipRow } from './drawer-controls.js';
 import { PlainButton } from './plain-button.js';
+import { NAV_RAIL } from '../theme/grid.js';
+/** The button's size, in px. */
+const BUTTON = 40;
+/** How far it is from the left and the bottom edge: on the line the navigation rail's icons are centered on, so it sits under them, and the same from the bottom. */
+const INSET = (NAV_RAIL - BUTTON) / 2;
 const THEME_LABELS = {
     light: 'Light',
     dark: 'Dark',
@@ -85,15 +90,15 @@ export function DebugMenu({ configured, sun, }) {
         // which this is, and the button would sit at the top of it.
         css: {
             position: 'fixed',
-            left: 12,
-            bottom: 12,
+            left: INSET,
+            bottom: INSET,
             zIndex: 30,
-            width: 40,
-            height: 40,
+            width: BUTTON,
+            height: BUTTON,
             minHeight: 0,
         }, children: [open ? (_jsxs(Flex, { role: "dialog", "aria-label": "Debug", direction: "column", gap: 4, background: "surface", radius: "row", shadow: "drawer", p: 4, width: 288, css: { position: 'absolute', left: 0, bottom: 52, boxSizing: 'border-box' }, children: [_jsx(Row, { label: "Show grid", children: _jsx(ChipRow, { options: ON_OFF, value: debug.grid ? 'on' : 'off', onChange: (value) => debug.setGrid(value === 'on') }) }), _jsx(Row, { label: "Fullscreen", children: canFullscreen ? (_jsx(ChipRow, { options: ON_OFF, value: isFull ? 'on' : 'off', onChange: (value) => toggleFullscreen(value === 'on') })) : (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: "Not available in this browser." })) }), _jsx(Row, { label: "Theme", children: _jsx(ChipRow
                         // The sun only if the project has one to follow.
                         , { 
                             // The sun only if the project has one to follow.
-                            options: THEME_CHOICES.filter((choice) => choice !== 'sun' || sun !== undefined).map((choice) => ({ value: choice, label: THEME_LABELS[choice] })), value: theme, onChange: (value) => debug.setThemeChoice(value) }) })] })) : null, _jsx(PlainButton, { "aria-label": "Debug menu", title: "Debug menu", "aria-expanded": open, onClick: () => setOpen((current) => !current), center: true, radius: "full", background: "surface", color: "textMuted", shadow: "dock", width: 40, height: 40, css: { flex: 'none' }, children: _jsx(Icon, { name: "lu:bug", size: 18 }) })] }));
+                            options: THEME_CHOICES.filter((choice) => choice !== 'sun' || sun !== undefined).map((choice) => ({ value: choice, label: THEME_LABELS[choice] })), value: theme, onChange: (value) => debug.setThemeChoice(value) }) })] })) : null, _jsx(PlainButton, { "aria-label": "Debug menu", title: "Debug menu", "aria-expanded": open, onClick: () => setOpen((current) => !current), center: true, radius: "full", background: "surface", color: "textMuted", shadow: "dock", width: BUTTON, height: BUTTON, css: { flex: 'none' }, children: _jsx(Icon, { name: "lu:bug", size: 18 }) })] }));
 }