@hashsome/ui 0.1.0

package/dist/icon.d.ts

@@ -0,0 +1,9 @@
+import { type IconName } from './icon-data.ts';
+export interface IconProps {
+    /** Prefixed icon id, e.g. `lu:lightbulb`, `tb:vacuum-cleaner`. */
+    name: IconName;
+    /** Overrides the density's icon size, in px. */
+    size?: number;
+}
+/** An inline SVG icon, from a plain prefixed id (`lu:` Lucide, `tb:` Tabler outline). Takes the surrounding text color. */
+export declare function Icon({ name, size }: IconProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/icon.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { createElement } from 'react';
+import { ICON_NODES } from './icon-data.js';
+const STROKE_WIDTH = 1.5;
+/** Packs whose icons are drawn as outlines (`fill: none`, shapes stroked in). A pack not listed
+ * here (e.g. a future filled pack) renders solid instead. */
+const STROKE_PACKS = new Set(['lu', 'tb']);
+/** An inline SVG icon, from a plain prefixed id (`lu:` Lucide, `tb:` Tabler outline). Takes the surrounding text color. */
+export function Icon({ name, size }) {
+    const stroke = STROKE_PACKS.has(name.slice(0, name.indexOf(':')));
+    const nodes = ICON_NODES[name];
+    if (!nodes) {
+        console.warn(`Could not find icon "${name}"`);
+    }
+    return (_jsx("svg", { viewBox: "0 0 24 24", css: ({ density }) => ({
+            width: size ?? density.iconSize,
+            height: size ?? density.iconSize,
+            flex: 'none',
+        }), fill: stroke ? 'none' : 'currentColor', ...(stroke
+            ? {
+                stroke: 'currentColor',
+                strokeWidth: STROKE_WIDTH,
+                strokeLinecap: 'round',
+                strokeLinejoin: 'round',
+            }
+            : {}), "aria-hidden": "true", children: (nodes ?? []).map(([tag, attrs], i) => createElement(tag, { key: i, ...attrs })) }));
+}

package/dist/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../src/icon.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,UAAU,EAAiB,MAAM,gBAAgB,CAAC;AAU3D,MAAM,YAAY,GAAG,GAAG,CAAC;AAEzB;6DAC6D;AAC7D,MAAM,YAAY,GAAG,IAAI,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;AAE3C,2HAA2H;AAC3H,MAAM,UAAU,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAa;IAC5C,MAAM,MAAM,GAAG,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAClE,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAC/B,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,CAAC,IAAI,CAAC,wBAAwB,IAAI,GAAG,CAAC,CAAC;IAChD,CAAC;IAED,OAAO,CACL,cACE,OAAO,EAAC,WAAW,EACnB,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;YACrB,KAAK,EAAE,IAAI,IAAI,OAAO,CAAC,QAAQ;YAC/B,MAAM,EAAE,IAAI,IAAI,OAAO,CAAC,QAAQ;YAChC,IAAI,EAAE,MAAM;SACb,CAAC,EACF,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,KAClC,CAAC,MAAM;YACT,CAAC,CAAC;gBACE,MAAM,EAAE,cAAc;gBACtB,WAAW,EAAE,YAAY;gBACzB,aAAa,EAAE,OAAO;gBACtB,cAAc,EAAE,OAAO;aACxB;YACH,CAAC,CAAC,EAAE,CAAC,iBACK,MAAM,YAEjB,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC,GAC7E,CACP,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+export * from './provider.tsx';
+export * from './theme/index.ts';
+export type { Density, DensityTokens } from './theme/density.ts';
+export type { ThemeOverrides } from './theme/overrides.ts';
+export * from './hooks.ts';
+export type { EntityHandle } from './entity-handle.ts';
+export * from './status.ts';
+export type { IconName } from './icon-data.ts';
+export * from './icon.tsx';
+export * from './layout/grid.tsx';
+export * from './layout/page.tsx';
+export * from './layout/room-header.tsx';
+export { Tile, type TileProps } from './layout/tile.tsx';
+export * from './layout/energy-chart.tsx';
+export * from './layout/history-section.tsx';
+export type { SensorSample } from './layout/sensor-history.tsx';
+export * from './entities/light-tile.tsx';
+export type { LightColorPreset } from './entities/light-color.ts';
+export * from './entities/climate-tile.tsx';
+export * from './entities/sensor-readout.tsx';
+export * from './entities/action-button.tsx';
+export * from './entities/scene-button.tsx';
+export * from './entities/media-player-bar.tsx';
+export * from './entities/media-player-column.tsx';
+export * from './entities/media-player-page.tsx';
+export * from './entities/media-browser.tsx';
+export { formatDuration } from './entities/media-progress.ts';
+export * from './entities/nav-rail.tsx';
+export * from './entities/nav-dock.tsx';
+export * from './entities/top-bar.tsx';

package/dist/index.js

@@ -0,0 +1,24 @@
+export * from './provider.js';
+export * from './theme/index.js';
+export * from './hooks.js';
+export * from './status.js';
+export * from './icon.js';
+export * from './layout/grid.js';
+export * from './layout/page.js';
+export * from './layout/room-header.js';
+export { Tile } from './layout/tile.js';
+export * from './layout/energy-chart.js';
+export * from './layout/history-section.js';
+export * from './entities/light-tile.js';
+export * from './entities/climate-tile.js';
+export * from './entities/sensor-readout.js';
+export * from './entities/action-button.js';
+export * from './entities/scene-button.js';
+export * from './entities/media-player-bar.js';
+export * from './entities/media-player-column.js';
+export * from './entities/media-player-page.js';
+export * from './entities/media-browser.js';
+export { formatDuration } from './entities/media-progress.js';
+export * from './entities/nav-rail.js';
+export * from './entities/nav-dock.js';
+export * from './entities/top-bar.js';

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AAGjC,cAAc,YAAY,CAAC;AAE3B,cAAc,aAAa,CAAC;AAE5B,cAAc,WAAY,CAAC;AAC3B,cAAc,kBAAmB,CAAC;AAClC,cAAc,kBAAmB,CAAC;AAClC,cAAc,yBAA0B,CAAC;AACzC,OAAO,EAAE,IAAI,EAAkB,MAAM,kBAAmB,CAAC;AACzD,cAAc,0BAA2B,CAAC;AAC1C,cAAc,6BAA8B,CAAC;AAE7C,cAAc,0BAA2B,CAAC;AAE1C,cAAc,4BAA6B,CAAC;AAC5C,cAAc,8BAA+B,CAAC;AAC9C,cAAc,6BAA8B,CAAC;AAC7C,cAAc,4BAA6B,CAAC;AAC5C,cAAc,gCAAiC,CAAC;AAChD,cAAc,mCAAoC,CAAC;AACnD,cAAc,iCAAkC,CAAC;AACjD,cAAc,6BAA8B,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,cAAc,wBAAyB,CAAC;AACxC,cAAc,wBAAyB,CAAC;AACxC,cAAc,uBAAwB,CAAC"}

package/dist/layout/cover.d.ts

@@ -0,0 +1,5 @@
+/** A picture (artwork, an avatar) that fills the box it is in, cropped to fit. Decorative: the
+ * name of what it shows is always written beside it. */
+export declare function Cover({ src }: {
+    src: string;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/cover.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { Box } from 'e-prim';
+/** A picture (artwork, an avatar) that fills the box it is in, cropped to fit. Decorative: the
+ * name of what it shows is always written beside it. */
+export function Cover({ src }) {
+    return _jsx(Box, { as: "img", src: src, alt: "", width: "100%", height: "100%", css: { objectFit: 'cover' } });
+}

package/dist/layout/cover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cover.js","sourceRoot":"","sources":["../../src/layout/cover.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B;wDACwD;AACxD,MAAM,UAAU,KAAK,CAAC,EAAE,GAAG,EAAmB;IAC5C,OAAO,KAAC,GAAG,IAAC,EAAE,EAAC,KAAK,EAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,GAAG,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,GAAI,CAAC;AACnG,CAAC"}

package/dist/layout/date-time-field.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A date + time picker that opens as a popover under its field — not a native `<input type="datetime-local">`,
+ * whose popup can't be themed and is slow to appear. Day buttons keep the chosen time of day; the
+ * time is two 24-hour number fields. `min` / `max` (`YYYY-MM-DDTHH:mm`) disable days outside the bounds and clamp the result.
+ */
+export declare function DateTimeField({ label, value, min, max, align, onChange, }: {
+    label: string;
+    /** `YYYY-MM-DDTHH:mm`, local time. */
+    value: string;
+    min?: string;
+    max?: string;
+    /** Which edge of the field the popover lines up with. Default `'left'`. */
+    align?: 'left' | 'right';
+    onChange: (value: string) => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/date-time-field.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { Box, Flex, Grid, Typography } from 'e-prim';
+import { useEffect, useRef, useState } from 'react';
+import { Icon } from '../icon.js';
+import { RoundButton } from './round-button.js';
+import { fromDateTimeInput, toDateTimeInput } from './sensor-stats.js';
+const WEEKDAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+const dayKey = (d) => d.getFullYear() * 10_000 + d.getMonth() * 100 + d.getDate();
+const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+/** The 6×7 grid of days (Monday first) that shows `month`, including the neighbouring months' spill-over. */
+function gridDays(month) {
+    const first = new Date(month.getFullYear(), month.getMonth(), 1);
+    const offset = (first.getDay() + 6) % 7;
+    return Array.from({ length: 42 }, (_, i) => new Date(first.getFullYear(), first.getMonth(), 1 - offset + i));
+}
+/**
+ * A date + time picker that opens as a popover under its field — not a native `<input type="datetime-local">`,
+ * whose popup can't be themed and is slow to appear. Day buttons keep the chosen time of day; the
+ * time is two 24-hour number fields. `min` / `max` (`YYYY-MM-DDTHH:mm`) disable days outside the bounds and clamp the result.
+ */
+export function DateTimeField({ label, value, min, max, align = 'left', onChange, }) {
+    const current = fromDateTimeInput(value) ?? new Date();
+    const lower = min ? fromDateTimeInput(min) : undefined;
+    const upper = max ? fromDateTimeInput(max) : undefined;
+    const [open, setOpen] = useState(false);
+    const root = useRef(null);
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        const onPointerDown = (event) => {
+            if (root.current && !root.current.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                event.stopPropagation();
+                setOpen(false);
+            }
+        };
+        document.addEventListener('pointerdown', onPointerDown);
+        window.addEventListener('keydown', onKeyDown, true);
+        return () => {
+            document.removeEventListener('pointerdown', onPointerDown);
+            window.removeEventListener('keydown', onKeyDown, true);
+        };
+    }, [open]);
+    const [month, setMonth] = useState(() => new Date(current.getFullYear(), current.getMonth(), 1));
+    const commit = (next) => {
+        const clamped = lower && next < lower ? lower : upper && next > upper ? upper : next;
+        onChange(toDateTimeInput(clamped));
+    };
+    const pickDay = (day) => commit(new Date(day.getFullYear(), day.getMonth(), day.getDate(), current.getHours(), current.getMinutes()));
+    const setTime = (hours, minutes) => commit(new Date(current.getFullYear(), current.getMonth(), current.getDate(), hours, minutes));
+    const shiftMonth = (delta) => setMonth((m) => new Date(m.getFullYear(), m.getMonth() + delta, 1));
+    const dayDisabled = (day) => (lower !== undefined && day < startOfDay(lower)) ||
+        (upper !== undefined &&
+            day > new Date(upper.getFullYear(), upper.getMonth(), upper.getDate(), 23, 59, 59));
+    const today = new Date();
+    const selectedKey = dayKey(current);
+    return (_jsxs(Flex, { ref: root, align: "center", gap: 2, position: "relative", children: [_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: label }), _jsx(Flex, { position: "relative", children: _jsxs(Flex, { as: "button", type: "button", "aria-label": label, "aria-expanded": open, onClick: () => {
+                        setMonth(new Date(current.getFullYear(), current.getMonth(), 1));
+                        setOpen((o) => !o);
+                    }, align: "center", gap: 2, radius: "small", cursor: "pointer", color: "text", background: "surface", border: true, py: 1.5, px: 3, children: [_jsxs(Typography, { as: "span", variant: "label", children: [current.toLocaleDateString(undefined, {
+                                    day: 'numeric',
+                                    month: 'short',
+                                    year: 'numeric',
+                                }), ' · ', current.toLocaleTimeString(undefined, {
+                                    hour: '2-digit',
+                                    minute: '2-digit',
+                                    hour12: false,
+                                })] }), _jsx(Icon, { name: "lu:calendar", size: 14 })] }) }), open ? (_jsxs(Flex, { direction: "column", gap: 2, background: "surfaceRaised", border: true, radius: "row", shadow: "drawer", p: 3, position: "absolute", width: 288, zIndex: "popover", role: "group", "aria-label": `${label} picker`, css: ({ spacing }) => ({ top: `calc(100% + ${spacing(2)})`, [align]: 0 }), children: [_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(NavButton, { icon: "lu:chevron-left", label: "Previous month", onClick: () => shiftMonth(-1) }), _jsx(Typography, { as: "span", variant: "bodyStrong", children: month.toLocaleDateString(undefined, { month: 'long', year: 'numeric' }) }), _jsx(NavButton, { icon: "lu:chevron-right", label: "Next month", onClick: () => shiftMonth(1) })] }), _jsxs(Grid, { columns: [7], gap: 0.5, css: { textAlign: 'center' }, children: [WEEKDAYS.map((d) => (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", py: 1, children: d }, d))), gridDays(month).map((day) => {
+                                const selected = dayKey(day) === selectedKey;
+                                return (_jsx(Box, { as: "button", type: "button", width: 32, height: 32, radius: "full", p: 0, background: "transparent", cursor: "pointer", css: ({ palette }) => ({
+                                        justifySelf: 'center',
+                                        '&:hover:not(:disabled)': { background: palette.surfaceRaised },
+                                        "&[data-outside='true']": { color: palette.textMuted, opacity: 0.55 },
+                                        "&[data-today='true']": { boxShadow: `inset 0 0 0 1px ${palette.line}` },
+                                        "&[aria-pressed='true']": {
+                                            background: palette.accent,
+                                            color: palette.accentText,
+                                            opacity: 1,
+                                        },
+                                        '&:disabled': { opacity: 0.25, cursor: 'default' },
+                                    }), "aria-label": day.toLocaleDateString(undefined, {
+                                        month: 'long',
+                                        day: 'numeric',
+                                        year: 'numeric',
+                                    }), "aria-pressed": selected, "data-outside": day.getMonth() !== month.getMonth(), "data-today": dayKey(day) === dayKey(today), disabled: dayDisabled(day), onClick: () => pickDay(day), children: _jsx(Typography, { as: "span", variant: "body", children: day.getDate() }) }, day.toISOString()));
+                            })] }), _jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: "Time" }), _jsxs(Flex, { align: "center", gap: 1.5, children: [_jsx(TimeInput, { label: `${label} hour`, value: current.getHours(), max: 23, onChange: (h) => setTime(h, current.getMinutes()) }), _jsx("span", { children: ":" }), _jsx(TimeInput, { label: `${label} minute`, value: current.getMinutes(), max: 59, onChange: (m) => setTime(current.getHours(), m) })] })] })] })) : null] }));
+}
+function NavButton({ icon, label, onClick, }) {
+    return (_jsx(RoundButton, { size: 28, "aria-label": label, title: label, onClick: onClick, children: _jsx(Icon, { name: icon, size: 14 }) }));
+}
+function TimeInput({ label, value, max, onChange, }) {
+    return (_jsx(Box, { as: "input", typography: "body", width: 44, py: 1, px: 1.5, border: true, radius: "small", background: "surfaceRaised", color: "text", css: ({ palette }) => ({
+            textAlign: 'center',
+            fontVariantNumeric: 'tabular-nums',
+            '&:focus-visible': { outline: `2px solid ${palette.accent}`, outlineOffset: 1 },
+        }), type: "number", inputMode: "numeric", "aria-label": label, min: 0, max: max, value: String(value).padStart(2, '0'), onChange: (event) => {
+            const next = Number(event.target.value);
+            if (Number.isFinite(next)) {
+                onChange(Math.min(max, Math.max(0, Math.round(next))));
+            }
+        } }));
+}

package/dist/layout/date-time-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-time-field.js","sourceRoot":"","sources":["../../src/layout/date-time-field.tsx"],"names":[],"mappings":"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"}

package/dist/layout/detail-provider.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+interface DetailState {
+    id: string;
+    header: ReactNode;
+    body: ReactNode;
+    expanded: boolean;
+}
+interface DetailContextValue {
+    detail: DetailState | null;
+    /** `expanded` opens it at full size instead of the side panel. */
+    openDetail: (id: string, header: ReactNode, body: ReactNode, expanded?: boolean) => void;
+    /** Keeps an already-open drawer's content live; a no-op for any other `id`. */
+    updateDetail: (id: string, header: ReactNode, body: ReactNode) => void;
+    closeDetail: () => void;
+    toggleExpanded: () => void;
+}
+/** Backs the single shared `EntityDrawer`; instantiated once by `HashsomeProvider`. */
+export declare function DetailProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useDetail(): DetailContextValue;
+export {};

package/dist/layout/detail-provider.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+const DetailContext = createContext(null);
+/** Backs the single shared `EntityDrawer`; instantiated once by `HashsomeProvider`. */
+export function DetailProvider({ children }) {
+    const [detail, setDetail] = useState(null);
+    const openDetail = useCallback((id, header, body, expanded = false) => {
+        setDetail({ id, header, body, expanded });
+    }, []);
+    const updateDetail = useCallback((id, header, body) => {
+        setDetail((current) => (current && current.id === id ? { ...current, header, body } : current));
+    }, []);
+    const closeDetail = useCallback(() => setDetail(null), []);
+    const toggleExpanded = useCallback(() => {
+        setDetail((current) => (current ? { ...current, expanded: !current.expanded } : current));
+    }, []);
+    const value = useMemo(() => ({ detail, openDetail, updateDetail, closeDetail, toggleExpanded }), [detail, openDetail, updateDetail, closeDetail, toggleExpanded]);
+    return _jsx(DetailContext.Provider, { value: value, children: children });
+}
+export function useDetail() {
+    const context = useContext(DetailContext);
+    if (!context) {
+        throw new Error('useDetail must be used inside <DetailProvider>');
+    }
+    return context;
+}

package/dist/layout/detail-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-provider.js","sourceRoot":"","sources":["../../src/layout/detail-provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAqBlG,MAAM,aAAa,GAAG,aAAa,CAA4B,IAAI,CAAC,CAAC;AAErE,uFAAuF;AACvF,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAA2B;IAClE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAE/D,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,EAAU,EAAE,MAAiB,EAAE,IAAe,EAAE,QAAQ,GAAG,KAAK,EAAE,EAAE;QACnE,SAAS,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC5C,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,EAAU,EAAE,MAAiB,EAAE,IAAe,EAAE,EAAE;QAClF,SAAS,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,IAAI,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAClG,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAC3D,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,SAAS,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,QAAQ,EAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAC5F,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC,EACzE,CAAC,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,cAAc,CAAC,CAChE,CAAC;IAEF,OAAO,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAA0B,CAAC;AACnF,CAAC;AAED,MAAM,UAAU,SAAS;IACvB,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAC;IACpE,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/dist/layout/drawer-controls.d.ts

@@ -0,0 +1,46 @@
+import type { IconName } from '../icon-data.ts';
+/** Fine adjustment: a press nudges by `delta` (1%); holding repeats in steps of 10 until released. */
+export declare function StepButton({ icon, label, delta, holdDelta, onStep, disabled, size, }: {
+    icon: IconName;
+    label: string;
+    delta: number;
+    /** Amount per repeat while held. Default `delta * 10`. */
+    holdDelta?: number;
+    onStep: (delta: number) => void;
+    disabled?: boolean;
+    /** Button diameter in px. Default 36. */
+    size?: number;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+/** A thumbless bar (like the tile's own fill): drag anywhere on it, or use the arrow keys. Plain
+ * `fill` shows accent up to the value; a `gradient` track stays vivid up to the value and dims past it instead (no marker or thumb). */
+export declare function ValueBar({ label, value, min, max, keyStep, round, gradient, height, onDrag, onCommit, }: {
+    label: string;
+    value: number;
+    min: number;
+    max: number;
+    keyStep: number;
+    round?: number;
+    gradient?: string;
+    /** Bar thickness in px. Default 28. */
+    height?: number;
+    onDrag: (value: number) => void;
+    onCommit: (value: number) => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+/** One round power icon button with two states: filled with the accent while on, neutral while off. */
+export declare function PowerButton({ on, onToggle }: {
+    on: boolean;
+    onToggle: () => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+/** A wrapping row of pill choices (modes, presets) with the selected one filled. With `tabs` it is
+ * a tab list (the selected chip is the open tab) that never wraps: too many to fit scroll sideways. */
+export declare function ChipRow({ options, value, onChange, tabs, }: {
+    options: {
+        value: string;
+        label: string;
+        icon?: IconName;
+        ariaLabel?: string;
+    }[];
+    value: string | undefined;
+    onChange: (value: string) => void;
+    tabs?: boolean;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/drawer-controls.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { Box, Flex, Typography } from 'e-prim';
+import { motion } from 'motion/react';
+import { useEffect, useRef } from 'react';
+import { Icon } from '../icon.js';
+import { FadeScroll } from './fade-scroll.js';
+import { RoundButton } from './round-button.js';
+/** Fine adjustment: a press nudges by `delta` (1%); holding repeats in steps of 10 until released. */
+export function StepButton({ icon, label, delta, holdDelta = delta * 10, onStep, disabled, size = 36, }) {
+    const timers = useRef({});
+    const held = useRef(false);
+    const stop = () => {
+        clearTimeout(timers.current.delay);
+        clearInterval(timers.current.repeat);
+    };
+    // `stop` only touches refs, so it is safe to run once on unmount.
+    // oxlint-disable-next-line react/exhaustive-effect-dependencies
+    useEffect(() => stop, []);
+    return (_jsx(RoundButton, { size: size, css: { flex: 'none' }, "aria-label": label, title: label, disabled: disabled, onPointerDown: () => {
+            held.current = false;
+            timers.current.delay = setTimeout(() => {
+                held.current = true;
+                onStep(holdDelta);
+                timers.current.repeat = setInterval(() => onStep(holdDelta), 400);
+            }, 400);
+        }, onPointerUp: stop, onPointerLeave: stop, onPointerCancel: stop, onClick: () => {
+            if (!held.current) {
+                onStep(delta);
+            }
+            held.current = false;
+        }, children: _jsx(Icon, { name: icon, size: 16 }) }));
+}
+/** A thumbless bar (like the tile's own fill): drag anywhere on it, or use the arrow keys. Plain
+ * `fill` shows accent up to the value; a `gradient` track stays vivid up to the value and dims past it instead (no marker or thumb). */
+export function ValueBar({ label, value, min, max, keyStep, round = 1, gradient, height = 28, onDrag, onCommit, }) {
+    const dragging = useRef(false);
+    const fraction = max === min ? 0 : (value - min) / (max - min);
+    const pct = Math.min(1, Math.max(0, fraction)) * 100;
+    const clampValue = (v) => Math.min(max, Math.max(min, v));
+    const valueAt = (event) => {
+        const rect = event.currentTarget.getBoundingClientRect();
+        if (rect.width === 0) {
+            return value;
+        }
+        const f = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+        return clampValue(Math.round((min + f * (max - min)) / round) * round);
+    };
+    const onKeyDown = (event) => {
+        const dir = event.key === 'ArrowRight' || event.key === 'ArrowUp'
+            ? 1
+            : event.key === 'ArrowLeft' || event.key === 'ArrowDown'
+                ? -1
+                : 0;
+        if (dir !== 0) {
+            event.preventDefault();
+            onCommit(clampValue(value + dir * keyStep));
+        }
+    };
+    return (_jsx(Box, { role: "slider", tabIndex: 0, "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, position: "relative", 
+        // Explicit width: the bar has no in-flow content (its fill is absolutely positioned), so as a
+        // flex item in a row it would size to 0 and vanish.
+        width: "100%", height: height, radius: "full", background: "surface", border: !gradient, cursor: "pointer", overflow: "hidden", css: { touchAction: 'none', ...(gradient ? { backgroundImage: gradient } : {}) }, onPointerDown: (event) => {
+            dragging.current = true;
+            event.currentTarget.setPointerCapture?.(event.pointerId);
+            onDrag(valueAt(event));
+        }, onPointerMove: (event) => {
+            if (dragging.current) {
+                onDrag(valueAt(event));
+            }
+        }, onPointerUp: (event) => {
+            if (dragging.current) {
+                dragging.current = false;
+                onCommit(valueAt(event));
+            }
+        }, onKeyDown: onKeyDown, children: gradient ? (_jsx(Box, { as: motion.span, position: "absolute", background: "surface", initial: false, animate: { left: `${Math.max(pct, 4)}%` }, transition: { duration: 0 }, css: { top: 0, bottom: 0, right: 0, opacity: 0.72, pointerEvents: 'none' } })) : (_jsx(Box, { as: motion.span, position: "absolute", background: "accent", initial: false, animate: { width: `${pct}%` }, transition: { duration: 0 }, css: { top: 0, bottom: 0, left: 0 } })) }));
+}
+/** One round power icon button with two states: filled with the accent while on, neutral while off. */
+export function PowerButton({ on, onToggle }) {
+    return (_jsx(Flex, { as: "button", type: "button", "aria-pressed": on, "aria-label": on ? 'Turn off' : 'Turn on', title: on ? 'Turn off' : 'Turn on', onClick: onToggle, align: "center", justify: "center", radius: "full", cursor: "pointer", width: 36, height: 36, p: 0, background: on ? 'accent' : 'surface', color: on ? 'accentText' : 'line', css: { flex: 'none', transition: 'background-color 0.2s ease, color 0.2s ease' }, children: _jsx(Icon, { name: "lu:power", size: 16 }) }));
+}
+/** A wrapping row of pill choices (modes, presets) with the selected one filled. With `tabs` it is
+ * a tab list (the selected chip is the open tab) that never wraps: too many to fit scroll sideways. */
+export function ChipRow({ options, value, onChange, tabs = false, }) {
+    // Tabs scroll sideways when there are more than fit, and fade at the edge that has more.
+    const Wrap = tabs ? FadeScroll : Flex;
+    return (_jsx(Wrap, { gap: 2, ...(tabs ? { role: 'tablist' } : {}), css: tabs
+            ? { flexShrink: 0, scrollbarWidth: 'none', '&::-webkit-scrollbar': { display: 'none' } }
+            : { flexWrap: 'wrap' }, children: options.map((option) => {
+            const selected = option.value === value;
+            return (_jsxs(Flex, { as: "button", type: "button", ...(tabs ? { role: 'tab', 'aria-selected': selected } : { 'aria-pressed': selected }), ...(option.ariaLabel ? { 'aria-label': option.ariaLabel } : {}), onClick: () => onChange(option.value), align: "center", gap: 1.5, radius: "full", cursor: "pointer", py: 1.5, px: 3, background: selected ? 'accent' : 'surface', color: selected ? 'accentText' : 'text', css: { flex: 'none', whiteSpace: 'nowrap' }, children: [option.icon ? _jsx(Icon, { name: option.icon, size: 14 }) : null, _jsx(Typography, { as: "span", variant: "body", noWrap: true, textOverflow: "ellipsis", css: { maxWidth: 220 }, children: option.label })] }, option.value));
+        }) }));
+}

package/dist/layout/drawer-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-controls.js","sourceRoot":"","sources":["../../src/layout/drawer-controls.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,EAA2D,MAAM,OAAO,CAAC;AAEnG,OAAO,EAAE,IAAI,EAAE,MAAM,YAAa,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAmB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAoB,CAAC;AAEjD,sGAAsG;AACtG,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,SAAS,GAAG,KAAK,GAAG,EAAE,EACtB,MAAM,EACN,QAAQ,EACR,IAAI,GAAG,EAAE,GAaV;IACC,MAAM,MAAM,GAAG,MAAM,CAGlB,EAAE,CAAC,CAAC;IAEP,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC3B,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACnC,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,kEAAkE;IAClE,gEAAgE;IAChE,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAE1B,OAAO,CACL,KAAC,WAAW,IACV,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,gBACT,KAAK,EACjB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,GAAG,EAAE;YAClB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,MAAM,CAAC,OAAO,CAAC,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;gBACrC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACpB,MAAM,CAAC,SAAS,CAAC,CAAC;gBAClB,MAAM,CAAC,OAAO,CAAC,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,GAAG,CAAC,CAAC;YACpE,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC,EACD,WAAW,EAAE,IAAI,EACjB,cAAc,EAAE,IAAI,EACpB,eAAe,EAAE,IAAI,EACrB,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBAClB,MAAM,CAAC,KAAK,CAAC,CAAC;YAChB,CAAC;YAED,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAI,GAClB,CACf,CAAC;AACJ,CAAC;AAED;wIACwI;AACxI,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,GAAG,EACH,GAAG,EACH,OAAO,EACP,KAAK,GAAG,CAAC,EACT,QAAQ,EACR,MAAM,GAAG,EAAE,EACX,MAAM,EACN,QAAQ,GAcT;IACC,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC/B,MAAM,QAAQ,GAAG,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC;IAC/D,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC;IACrD,MAAM,UAAU,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC;IAClE,MAAM,OAAO,GAAG,CAAC,KAAmC,EAAE,EAAE;QACtD,MAAM,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC;QACzD,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE,CAAC;YACrB,OAAO,KAAK,CAAC;QACf,CAAC;QAED,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAC7E,OAAO,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,CAAC;IACzE,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,KAAoC,EAAE,EAAE;QACzD,MAAM,GAAG,GACP,KAAK,CAAC,GAAG,KAAK,YAAY,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS;YACnD,CAAC,CAAC,CAAC;YACH,CAAC,CAAC,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW;gBACtD,CAAC,CAAC,CAAC,CAAC;gBACJ,CAAC,CAAC,CAAC,CAAC;QAEV,IAAI,GAAG,KAAK,CAAC,EAAE,CAAC;YACd,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,QAAQ,CAAC,UAAU,CAAC,KAAK,GAAG,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,GAAG,IACF,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,gBACC,KAAK,mBACF,GAAG,mBACH,GAAG,mBACH,KAAK,EACpB,QAAQ,EAAC,UAAU;QACnB,8FAA8F;QAC9F,oDAAoD;QACpD,KAAK,EAAC,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,MAAM,EAAC,MAAM,EACb,UAAU,EAAC,SAAS,EACpB,MAAM,EAAE,CAAC,QAAQ,EACjB,MAAM,EAAC,SAAS,EAChB,QAAQ,EAAC,QAAQ,EACjB,GAAG,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAChF,aAAa,EAAE,CAAC,KAAmC,EAAE,EAAE;YACrD,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;YACxB,KAAK,CAAC,aAAa,CAAC,iBAAiB,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YACzD,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;QACzB,CAAC,EACD,aAAa,EAAE,CAAC,KAAmC,EAAE,EAAE;YACrD,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;gBACrB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;YACzB,CAAC;QACH,CAAC,EACD,WAAW,EAAE,CAAC,KAAmC,EAAE,EAAE;YACnD,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;gBACrB,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;gBACzB,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;YAC3B,CAAC;QACH,CAAC,EACD,SAAS,EAAE,SAAS,YAInB,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,GAAG,IACF,EAAE,EAAE,MAAM,CAAC,IAAI,EACf,QAAQ,EAAC,UAAU,EACnB,UAAU,EAAC,SAAS,EACpB,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,EACzC,UAAU,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,EAC3B,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,GAC1E,CACH,CAAC,CAAC,CAAC,CACF,KAAC,GAAG,IACF,EAAE,EAAE,MAAM,CAAC,IAAI,EACf,QAAQ,EAAC,UAAU,EACnB,UAAU,EAAC,QAAQ,EACnB,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,EAAE,KAAK,EAAE,GAAG,GAAG,GAAG,EAAE,EAC7B,UAAU,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,EAC3B,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,GACnC,CACH,GACG,CACP,CAAC;AACJ,CAAC;AAED,uGAAuG;AACvG,MAAM,UAAU,WAAW,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAyC;IACjF,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,QAAQ,kBACC,EAAE,gBACJ,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACvC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAClC,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,MAAM,EAAC,MAAM,EACb,MAAM,EAAC,SAAS,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,CAAC,EAAE,CAAC,EACJ,UAAU,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACrC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,EACjC,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,6CAA6C,EAAE,YAEhF,KAAC,IAAI,IAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAE,EAAE,GAAI,GAC7B,CACR,CAAC;AACJ,CAAC;AAED;uGACuG;AACvG,MAAM,UAAU,OAAO,CAAC,EACtB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAI,GAAG,KAAK,GAMb;IACC,yFAAyF;IACzF,MAAM,IAAI,GAAgB,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;IACnD,OAAO,CACL,KAAC,IAAI,IACH,GAAG,EAAE,CAAC,KACF,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACrC,GAAG,EACD,IAAI;YACF,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,sBAAsB,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE;YACxF,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,YAGzB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACtB,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC;YACxC,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,QAAQ,KAET,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC,KAClF,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAChE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACrC,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,GAAG,EACR,MAAM,EAAC,MAAM,EACb,MAAM,EAAC,SAAS,EAChB,EAAE,EAAE,GAAG,EACP,EAAE,EAAE,CAAC,EACL,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC3C,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,EACvC,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,aAE1C,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,IAAI,EAC3D,KAAC,UAAU,IACT,EAAE,EAAC,MAAM,EACT,OAAO,EAAC,MAAM,EACd,MAAM,QACN,YAAY,EAAC,UAAU,EACvB,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,YAErB,MAAM,CAAC,KAAK,GACF,KAvBR,MAAM,CAAC,KAAK,CAwBZ,CACR,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC;AACJ,CAAC"}

package/dist/layout/energy-chart.d.ts

@@ -0,0 +1,37 @@
+/** @jsxImportSource @emotion/react */
+import type { EntityRef } from '@hashsome/core';
+export interface EnergySample {
+    /** ISO 8601. */
+    timestamp: string;
+    watts: number;
+}
+export type EnergyRange = '1h' | '1d' | '1w' | '1m';
+/** Energy used (kWh) per period. Collapsed shows today / this week / this month; expanded swaps the last two for the rolling last 7 / last 30 days. */
+export interface EnergyUsage {
+    today?: number;
+    week?: number;
+    month?: number;
+    last7d?: number;
+    last30d?: number;
+}
+export interface EnergyChartProps {
+    /** Live power sensor (current draw, e.g. a Shelly's `sensor.*_power`). Its reading is the headline and updates as it changes; without it the headline falls back to the last chart sample. */
+    power?: EntityRef;
+    /** Lifetime energy counter (kWh, e.g. `sensor.*_energy`). Shown as a quiet "Lifetime" line when expanded — per-period usage can't be derived from a counter without history, so pass `usage` for that. */
+    energy?: EntityRef;
+    /** Usage per period in kWh. Left out, it is worked out from `energy`'s history when the backend keeps one (Home Assistant's long-term statistics); pass it to use your own. */
+    usage?: EnergyUsage;
+    /** Samples for each range the person can pick; `onRangeChange` fires on pick. Left out, they are loaded from `power`'s history when the backend keeps one, for the selected range; pass them to use your own. */
+    seriesByRange?: Partial<Record<EnergyRange, EnergySample[]>>;
+    /** Called when the person picks another range, so a real data source can load it. */
+    onRangeChange?: (range: EnergyRange) => void;
+    /** Default `'W'`. */
+    unit?: string;
+}
+/**
+ * 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.
+ */
+export declare function EnergyChart({ power, energy, usage, seriesByRange, onRangeChange, unit, }: EnergyChartProps): import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/layout/energy-chart.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Flex, Typography } from 'e-prim';
+import { useState } from 'react';
+import { useEntityHandle } from '../hooks.js';
+import { useEntityHistory } from '../use-entity-history.js';
+import { usageFromDaily } from './energy-usage.js';
+import { useDetail } from './detail-provider.js';
+import { RangeSwitcher, SeriesChart } from './series-chart.js';
+const ENERGY_RANGES = [
+    { value: '1h', label: '1H' },
+    { value: '1d', label: '1D' },
+    { value: '1w', label: '1W' },
+    { value: '1m', label: '1M' },
+];
+function formatEnergy(kwh) {
+    if (kwh < 1) {
+        return `${Math.round(kwh * 1000)} Wh`;
+    }
+    return `${kwh < 10 ? kwh.toFixed(2) : kwh.toFixed(1)} kWh`;
+}
+/**
+ * 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.
+ */
+export function EnergyChart({ power, energy, usage, seriesByRange = {}, onRangeChange, unit = 'W', }) {
+    const { detail } = useDetail();
+    const expanded = detail?.expanded ?? false;
+    const [range, setRange] = useState('1d');
+    // Sparkline (collapsed) and chart (expanded) both show the selected range, 1D until picked.
+    const ownSamples = seriesByRange[range];
+    const powerHistory = useEntityHistory(ownSamples ? undefined : power, power ? { range } : undefined);
+    const energyHistory = useEntityHistory(usage ? undefined : energy, energy ? { range: '1m', bucket: '1d' } : undefined);
+    const samples = ownSamples ??
+        (powerHistory.result?.points ?? []).map((point) => ({
+            timestamp: point.timestamp,
+            watts: point.value,
+        }));
+    const shownUsage = usage ??
+        (energyHistory.result ? usageFromDaily(energyHistory.result.points, new Date()) : undefined);
+    if (!power && !shownUsage && !energy && samples.length === 0) {
+        return null;
+    }
+    const fallbackCurrent = samples.at(-1)?.watts ?? 0;
+    const selectRange = (next) => {
+        setRange(next);
+        onRangeChange?.(next);
+    };
+    return (_jsxs(Flex, { direction: "column", gap: 2, mt: 4, children: [_jsxs(Flex, { justify: "space-between", align: "center", children: [_jsx(Typography, { as: "span", variant: "eyebrow", uppercase: true, color: "textMuted", children: "Power" }), expanded ? (_jsx(RangeSwitcher, { range: range, options: ENERGY_RANGES, onChange: selectRange })) : null] }), expanded ? null : power ? (_jsx(PowerReading, { entity: power, fallbackUnit: unit })) : (_jsxs(Typography, { as: "span", variant: "stat", children: [fallbackCurrent, " ", unit] })), shownUsage ? _jsx(UsageTiles, { usage: shownUsage, expanded: expanded }) : null, expanded && energy ? _jsx(LifetimeEnergy, { entity: energy }) : null, samples.length === 0 ? null : (_jsx(SeriesChart, { samples: samples.map((sample) => ({ timestamp: sample.timestamp, value: sample.watts })), range: range, expanded: expanded, unit: unit }))] }));
+}
+function PowerReading({ entity, fallbackUnit }) {
+    const handle = useEntityHandle('sensor', entity);
+    const sensor = handle.entity;
+    const unit = sensor?.unit ?? fallbackUnit;
+    return (_jsx(Typography, { as: "span", variant: "stat", "aria-live": "off", children: handle.status === 'ready' && sensor?.numeric !== undefined
+            ? `${sensor.numeric} ${unit}`
+            : '—' }));
+}
+function LifetimeEnergy({ entity }) {
+    const handle = useEntityHandle('sensor', entity);
+    const sensor = handle.entity;
+    if (handle.status !== 'ready' || sensor?.numeric === undefined) {
+        return null;
+    }
+    return (_jsxs(Typography, { as: "span", variant: "secondary", color: "textMuted", children: ["Lifetime ", sensor.numeric, " ", sensor.unit ?? 'kWh'] }));
+}
+function UsageTiles({ usage, expanded }) {
+    const items = expanded
+        ? [
+            { label: 'Today', value: usage.today },
+            { label: 'Last 7 days', value: usage.last7d },
+            { label: 'Last 30 days', value: usage.last30d },
+        ]
+        : [
+            { label: 'Today', value: usage.today },
+            { label: 'This week', value: usage.week },
+            { label: 'This month', value: usage.month },
+        ];
+    const shown = items.filter((item) => item.value !== undefined);
+    if (shown.length === 0) {
+        return null;
+    }
+    return (_jsx(Flex, { gap: 2, children: shown.map((item) => (_jsxs(Flex, { direction: "column", grow: 1, background: "surfaceRaised", radius: "row", py: 2.5, px: 3, css: { flexBasis: 0 }, children: [_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: item.label }), _jsx(Typography, { as: "span", variant: "bodyStrong", children: formatEnergy(item.value ?? 0) })] }, item.label))) }));
+}