@hashsome/ui 0.1.0

package/dist/layout/tile.js

@@ -0,0 +1,207 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { Box, Flex, Typography, useColorByKey } from 'e-prim';
+import { AnimatePresence, motion } from 'motion/react';
+import { useEffect, useMemo, useRef, useState, } from 'react';
+import { Icon } from '../icon.js';
+import { RoundButton } from './round-button.js';
+import { statusLabels } from '../status.js';
+import { useDrawer } from './use-drawer.js';
+import { EnergyChart } from './energy-chart.js';
+import { HistorySection } from './history-section.js';
+const DRAG_THRESHOLD = 8;
+const KEY_STEP = 0.05;
+const HOLD_MS = 500;
+const COLOR_TRANSITION = { duration: 0.28 };
+const clamp01 = (value) => Math.min(1, Math.max(0, value));
+const valueAt = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return rect.width > 0 ? clamp01((event.clientX - rect.left) / rect.width) : 0;
+};
+/** Base pill used by all entity tiles. Tap to press; hold (with `detail` set) to open the drawer. */
+export function Tile({ label, icon, secondary, status = 'ready', active = false, feedback, onPress, fill, onFillChange, trailing, overlay, title, detail, kind, energy, history, }) {
+    const ready = status === 'ready';
+    const adjustable = fill !== undefined && onFillChange !== undefined && ready;
+    const holdable = (detail !== undefined || energy !== undefined || history !== undefined) && ready;
+    const drawerBody = useMemo(() => (_jsxs(_Fragment, { children: [detail, energy ? _jsx(EnergyChart, { ...energy }) : null, history ? _jsx(HistorySection, { entries: history }) : null] })), [detail, energy, history]);
+    const [drag, setDrag] = useState(null);
+    const [holding, setHolding] = useState(false);
+    const start = useRef(null);
+    const justDragged = useRef(false);
+    const holdFired = useRef(false);
+    const holdTimer = useRef(null);
+    const clearHoldTimer = () => {
+        if (holdTimer.current !== null) {
+            clearTimeout(holdTimer.current);
+            holdTimer.current = null;
+        }
+        setHolding(false);
+    };
+    // `clearHoldTimer` only touches refs and a state setter, so it is safe to run once on unmount.
+    // oxlint-disable-next-line react/exhaustive-effect-dependencies
+    useEffect(() => clearHoldTimer, []);
+    // `onFillChange` only requests the new value — the entity's actual `fill` doesn't update until
+    // the backend confirms it and a new prop flows back down, which is never in the same tick. If a
+    // drag/key-nudge cleared `drag` immediately, `shownFill` would fall through to the still-stale
+    // `fill` prop and visibly snap back to the pre-drag position until the round trip completes.
+    // Keeping `drag` set to the just-committed value instead, and only clearing it once `fill`
+    // actually catches up to match, makes the handoff from optimistic to real state seamless.
+    // Adjusting state during render (React's documented pattern for this, not an effect) so the
+    // clear-out and the `fill` update that triggered it land in the same commit, with no extra
+    // stale-`drag` frame in between.
+    if (drag !== null && fill !== undefined && Math.abs(fill - drag) < 0.005) {
+        setDrag(null);
+    }
+    const { open: openDrawer } = useDrawer({ icon, label, kind, body: drawerBody });
+    const onPointerDown = (event) => {
+        if (adjustable) {
+            start.current = { x: event.clientX, dragging: false };
+            event.currentTarget.setPointerCapture?.(event.pointerId);
+        }
+        if (holdable) {
+            holdFired.current = false;
+            setHolding(true);
+            holdTimer.current = setTimeout(() => {
+                holdFired.current = true;
+                clearHoldTimer();
+                start.current = null;
+                openDrawer();
+            }, HOLD_MS);
+        }
+    };
+    const onPointerMove = (event) => {
+        const s = start.current;
+        if (!s) {
+            return;
+        }
+        if (!s.dragging && Math.abs(event.clientX - s.x) > DRAG_THRESHOLD) {
+            s.dragging = true;
+            clearHoldTimer();
+        }
+        if (s.dragging) {
+            setDrag(valueAt(event));
+        }
+    };
+    const onPointerUp = (event) => {
+        clearHoldTimer();
+        const s = start.current;
+        start.current = null;
+        if (!s?.dragging) {
+            return;
+        }
+        justDragged.current = true;
+        const next = valueAt(event);
+        setDrag(next);
+        onFillChange?.(next);
+    };
+    const onPointerCancel = () => {
+        clearHoldTimer();
+        start.current = null;
+        setDrag(null);
+    };
+    const onKeyDown = (event) => {
+        if (!adjustable) {
+            return;
+        }
+        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+            event.preventDefault();
+            const delta = event.key === 'ArrowRight' ? KEY_STEP : -KEY_STEP;
+            const next = clamp01(Math.round(((drag ?? fill ?? 0) + delta) * 100) / 100);
+            setDrag(next);
+            onFillChange?.(next);
+        }
+    };
+    const onClick = () => {
+        if (justDragged.current) {
+            justDragged.current = false;
+            return;
+        }
+        if (holdFired.current) {
+            holdFired.current = false;
+            return;
+        }
+        onPress?.();
+    };
+    const shownFill = drag ?? fill;
+    // `active` reflects the entity's current (pre-drag) on/off state — gating the fill bar on it
+    // alone hides it entirely while dragging an off light up to a brightness, since it doesn't turn
+    // on until the backend confirms. `drag !== null` keeps it visible for the live preview regardless.
+    const overlaid = overlay !== undefined;
+    const hasFill = shownFill !== undefined && ready && (active || drag !== null);
+    // Stays mounted (just transparent) while an overlay is open: unmounting it would replay the
+    // 0 → value grow animation on close, as if the light had just been turned on.
+    const showFill = hasFill && !overlaid;
+    // While actively dragging, show the live percentage instead of the (now stale) `secondary` prop
+    // — the entity's own state, and thus `secondary`, only catches up once `onFillChange` commits.
+    const liveSecondary = drag !== null ? `${Math.round(drag * 100)}%` : secondary;
+    const surface = useColorByKey('surface') ?? '';
+    const surfaceRaised = useColorByKey('surfaceRaised') ?? '';
+    const accent = useColorByKey('accent') ?? '';
+    const text = useColorByKey('text') ?? '';
+    const textMuted = useColorByKey('textMuted') ?? '';
+    const accentText = useColorByKey('accentText') ?? '';
+    const line = useColorByKey('line') ?? '';
+    const accented = active && ready;
+    const isDimmable = fill !== undefined;
+    // A dimmable tile never gets a solid accent-colored CARD — its own `fill` bar is the "how on"
+    // indicator instead, growing from neutral `surface`/`text` — unlike a solid on/off tile, whose
+    // whole card turns `accent`. `solidAccent` still gates `cardBg` (and the hold-progress wash
+    // below, which genuinely needs to pick a dark-on-orange vs light-on-neutral highlight) for that
+    // reason, but text/icon colors below do NOT follow it — seeing both a solid-accent tile and a
+    // dimmable one at 100% fill side by side (same visible solid-orange card either way) with two
+    // different text colors reads as a bug even though each one is "correct" for its own case.
+    // `text`/`line` read fine against `accent` in both themes (dark-on-orange and near-white-on-orange
+    // are each decent contrast) as well as against `surface`, where `accentText` (white) is only
+    // readable in dark mode and invisible in light — so every accented state just uses the normal
+    // ready-state color, never a separate white-on-accent one.
+    const solidAccent = accented && !isDimmable;
+    let cardBg = surface;
+    // The label keeps the neutral light `text` everywhere; only the status line (e.g. "100%"), which
+    // sits at the far right, goes near-black (`onAccent`) once the card behind it is orange — the
+    // muted `line` grey it normally uses is ~1.6:1 on orange. `fill`'s opacity scales with
+    // brightness, so it only flips once the fill is nearly solid (or the whole card is accent).
+    const wholeCardAccent = (solidAccent && !overlaid) || feedback === 'done';
+    const fillLevel = showFill ? (shownFill ?? 0) : 0;
+    const statusOnAccent = ready && (wholeCardAccent || fillLevel > 0.85);
+    const cardColor = ready ? text : textMuted;
+    if ((solidAccent && !overlaid) || feedback === 'done') {
+        cardBg = accent;
+    }
+    const iconBg = accented && !overlaid ? 'rgba(0, 0, 0, 0.25)' : surfaceRaised;
+    // The icon glyph sits inside that translucent badge, which self-adapts to whatever's behind it
+    // (the orange fill at a high `fill`, plain `surface` at a low one) — so it still needs the
+    // lighter `accentText` glyph once accented, unlike the flat label/secondary text above.
+    const iconColor = accented && !overlaid ? accentText : ready ? line : textMuted;
+    // The label always stays full brightness; only the icon glyph and this line dim when the tile is
+    // off (matches the converged mockup — `#726C6A`/`line`, not `textMuted`, which is reserved for
+    // the unavailable/unknown/missing/loading statuses below).
+    const dimColorKey = ready ? 'line' : 'textMuted';
+    const cardOpacity = !ready || feedback === 'pending' ? 0.7 : 1;
+    const iconBadge = icon ? (_jsx(Flex, { as: motion.span, align: "center", justify: "center", position: "relative", radius: "full", width: 32, height: 32, animate: { backgroundColor: iconBg, color: iconColor }, transition: COLOR_TRANSITION, css: { flex: 'none' }, children: _jsx(Icon, { name: icon, size: 16 }) })) : null;
+    return (_jsxs(Flex, { as: motion.div, radius: "card", position: "relative", align: "center", overflow: "hidden", minWidth: 0, "data-status": status, "data-active": accented, "data-solid-accent": solidAccent, "data-fill": fill !== undefined, "data-fill-visible": showFill, "data-overlay": overlay !== undefined, "data-pending": feedback === 'pending', "data-feedback": feedback === 'pending' ? undefined : feedback, animate: { backgroundColor: cardBg, color: cardColor, opacity: cardOpacity }, transition: COLOR_TRANSITION, css: ({ palette }) => feedback === 'error' ? { outline: `2px solid ${palette.danger}`, outlineOffset: -2 } : null, children: [hasFill ? (_jsx(Box, { as: motion.span, position: "absolute", background: "accent", 
+                // Spans the whole card, including behind `trailing` (e.g. a color-capable light's
+                // picker button) — it's a sibling of the button and `trailing`, not nested inside the
+                // button, specifically so its width isn't capped at the button's own narrower bounds.
+                animate: { width: `${(shownFill ?? 0) * 100}%`, opacity: overlaid ? 0 : shownFill }, transition: drag !== null ? { duration: 0 } : COLOR_TRANSITION, css: { inset: '0 auto 0 0', pointerEvents: 'none' } })) : null, holdable && holding ? (_jsx(Box, { as: motion.span, position: "absolute", initial: { width: '0%' }, animate: { width: '100%' }, transition: { duration: HOLD_MS / 1000, ease: 'linear' }, height: 2, css: {
+                    inset: 'auto auto 0 0',
+                    pointerEvents: 'none',
+                    // Visible against either background: a light wash normally, a dark wash on an
+                    // accent-colored (non-dimmable-active) card, where a light or accent bar would
+                    // disappear or clash.
+                    backgroundColor: solidAccent ? 'rgba(0, 0, 0, 0.35)' : 'rgba(255, 255, 255, 0.55)',
+                } }, "hold-progress")) : null, overlay ? (_jsxs(Flex, { align: "center", gap: 2.5, minWidth: 0, grow: 1, position: "relative", pt: 2, pr: 2, pb: 2, pl: 2, css: { alignSelf: 'stretch' }, children: [iconBadge, _jsx(Flex, { grow: 1, minWidth: 0, justify: "center", align: "center", children: overlay({ openDetail: openDrawer }) })] })) : (_jsxs(Flex, { as: "button", type: "button", disabled: !ready || (!onPress && !adjustable && !holdable), onClick: onClick, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, onKeyDown: onKeyDown, title: title, "aria-label": label, align: "center", gap: 2.5, minWidth: 0, grow: 1, position: "relative", cursor: ready ? 'pointer' : 'default', pt: 2, pr: 3.5, pb: 2, pl: 2, css: {
+                    alignSelf: 'stretch',
+                    background: 'none',
+                    textAlign: 'left',
+                    touchAction: 'pan-y',
+                    WebkitTapHighlightColor: 'transparent',
+                    '&:focus-visible': {
+                        outline: `2px solid ${accent}`,
+                        outlineOffset: -2,
+                        borderRadius: 'inherit',
+                    },
+                }, children: [iconBadge, _jsx(Typography, { variant: "label", as: "span", noWrap: true, textOverflow: "ellipsis", position: "relative", grow: 1, minWidth: 0, children: label }), !ready ? (_jsx(Typography, { variant: "secondary", as: "span", noWrap: true, textOverflow: "ellipsis", color: "textMuted", position: "relative", css: { flex: 'none' }, children: statusLabels[status] })) : liveSecondary ? (_jsx(Typography, { variant: "secondary", as: "span", noWrap: true, textOverflow: "ellipsis", color: statusOnAccent ? 'onAccent' : dimColorKey, position: "relative", css: { flex: 'none' }, children: liveSecondary })) : null] })), trailing ? (_jsx(Flex, { align: "center", gap: 2, pr: 2.5, position: "relative", children: trailing })) : null] }));
+}
+export function IconButton({ icon, label, onClick, disabled, active, pressed, primary, size, glyph, color, feedback, }) {
+    return (_jsx(RoundButton, { as: motion.button, ...(size !== undefined ? { size: size * 2 } : {}), ...(color ? { css: { '&&&': { color } } } : {}), whileTap: disabled ? {} : { scale: 0.88 }, transition: { duration: 0.12 }, "data-feedback": feedback, "aria-label": label, title: label, disabled: disabled, "data-active": active, "aria-pressed": pressed, "data-primary": primary, onClick: onClick, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(Box, { as: motion.span, css: { display: 'grid' }, initial: { rotate: -90, opacity: 0, scale: 0.6 }, animate: { rotate: 0, opacity: 1, scale: 1 }, exit: { rotate: 90, opacity: 0, scale: 0.6 }, transition: { duration: 0.18 }, children: _jsx(Icon, { name: icon, ...(glyph !== undefined ? { size: glyph } : size !== undefined ? { size } : {}) }) }, icon) }) }));
+}

package/dist/layout/tile.js.map

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

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

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+import type { IconName } from '../icon-data.ts';
+export declare function DrawerHeader({ icon, label, kind, }: {
+    icon?: IconName | undefined;
+    label: string;
+    kind?: string | undefined;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+/** Opens the shared `EntityDrawer` for one owner (a tile, a readout) and keeps it live: `body` is
+ * a fresh element every render (its props can change while the drawer is open — including from an
+ * action taken inside it), but `open` only fires once, so an effect re-pushes the content for as
+ * long as this owner's drawer is the open one. */
+export declare function useDrawer({ icon, label, kind, body, }: {
+    icon?: IconName | undefined;
+    label: string;
+    kind?: string | undefined;
+    body: ReactNode;
+}): {
+    open: () => void;
+    openExpanded: () => void;
+    isOpen: boolean;
+};
+/** `useDrawer` for an owner that must not itself subscribe to the drawer's context. Re-pushing the
+ * body on every context change re-renders whoever called the hook; if that is the same component
+ * that built `body`, it makes a fresh element each time and loops. Hosting the hook in this child
+ * keeps `body`'s identity tied to the parent's own renders (entity updates), not the drawer's. */
+export declare function DrawerTrigger({ icon, label, kind, body, children, }: {
+    icon?: IconName | undefined;
+    label: string;
+    kind?: string | undefined;
+    body: ReactNode;
+    /** Gets `open` (the side panel) and `openExpanded` (full size). */
+    children: (open: () => void, openExpanded: () => void) => ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/use-drawer.js

@@ -0,0 +1,34 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { Flex, Typography } from 'e-prim';
+import { useEffect, useId } from 'react';
+import { Icon } from '../icon.js';
+import { useDetail } from './detail-provider.js';
+export function DrawerHeader({ icon, label, kind, }) {
+    return (_jsxs(Flex, { align: "center", gap: 2.5, children: [icon ? (_jsx(Flex, { align: "center", justify: "center", background: "surfaceRaised", color: "text", radius: "full", width: 34, height: 34, css: { flex: 'none' }, children: _jsx(Icon, { name: icon, size: 16 }) })) : null, _jsxs(Flex, { direction: "column", children: [_jsx(Typography, { as: "span", variant: "heading", children: label }), kind ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: kind })) : null] })] }));
+}
+/** Opens the shared `EntityDrawer` for one owner (a tile, a readout) and keeps it live: `body` is
+ * a fresh element every render (its props can change while the drawer is open — including from an
+ * action taken inside it), but `open` only fires once, so an effect re-pushes the content for as
+ * long as this owner's drawer is the open one. */
+export function useDrawer({ icon, label, kind, body, }) {
+    const id = useId();
+    const { detail, openDetail, updateDetail } = useDetail();
+    const isOpen = detail?.id === id;
+    useEffect(() => {
+        if (isOpen) {
+            updateDetail(id, _jsx(DrawerHeader, { icon: icon, label: label, kind: kind }), body);
+        }
+    }, [isOpen, id, icon, label, kind, body, updateDetail]);
+    const open = () => openDetail(id, _jsx(DrawerHeader, { icon: icon, label: label, kind: kind }), body);
+    const openExpanded = () => openDetail(id, _jsx(DrawerHeader, { icon: icon, label: label, kind: kind }), body, true);
+    return { open, openExpanded, isOpen };
+}
+/** `useDrawer` for an owner that must not itself subscribe to the drawer's context. Re-pushing the
+ * body on every context change re-renders whoever called the hook; if that is the same component
+ * that built `body`, it makes a fresh element each time and loops. Hosting the hook in this child
+ * keeps `body`'s identity tied to the parent's own renders (entity updates), not the drawer's. */
+export function DrawerTrigger({ icon, label, kind, body, children, }) {
+    const { open, openExpanded } = useDrawer({ icon, label, kind, body });
+    return _jsx(_Fragment, { children: children(open, openExpanded) });
+}

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

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

package/dist/layout/use-hold.d.ts

@@ -0,0 +1,21 @@
+import { type PointerEvent } from 'react';
+/** How long a press has to last to count as a hold. The same as a tile's. */
+export declare const HOLD_MS = 500;
+/** Calls `onHold` when a press on the element lasts `HOLD_MS`, ignoring presses that start on a
+ * button, slider, input or link inside it (those have their own meaning). `holding` is true while
+ * the press is being timed, for a progress cue. Spread `handlers` on the element. */
+export declare function useHold(onHold: () => void, enabled: boolean): {
+    holding: boolean;
+    handlers: {
+        onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+        onPointerMove: (event: PointerEvent<HTMLElement>) => void;
+        onPointerUp: () => void;
+        onPointerLeave: () => void;
+        onPointerCancel: () => void;
+        /** The click that ends a hold would otherwise also fire whatever it lands on. */
+        onClickCapture: (event: {
+            stopPropagation(): void;
+            preventDefault(): void;
+        }) => void;
+    };
+};

package/dist/layout/use-hold.js

@@ -0,0 +1,61 @@
+import { useEffect, useRef, useState } from 'react';
+/** How long a press has to last to count as a hold. The same as a tile's. */
+export const HOLD_MS = 500;
+/** A finger that moves further than this is scrolling or dragging, not holding. */
+const MOVE_TOLERANCE = 10;
+/** Calls `onHold` when a press on the element lasts `HOLD_MS`, ignoring presses that start on a
+ * button, slider, input or link inside it (those have their own meaning). `holding` is true while
+ * the press is being timed, for a progress cue. Spread `handlers` on the element. */
+export function useHold(onHold, enabled) {
+    const [holding, setHolding] = useState(false);
+    const timer = useRef(undefined);
+    const origin = useRef(null);
+    const fired = useRef(false);
+    const latest = useRef(onHold);
+    useEffect(() => {
+        latest.current = onHold;
+    });
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const cancel = () => {
+        clearTimeout(timer.current);
+        origin.current = null;
+        setHolding(false);
+    };
+    return {
+        holding,
+        handlers: {
+            onPointerDown: (event) => {
+                fired.current = false;
+                if (!enabled ||
+                    event.target.closest('button, [role="button"], [role="slider"], input, a')) {
+                    return;
+                }
+                origin.current = { x: event.clientX, y: event.clientY };
+                setHolding(true);
+                timer.current = setTimeout(() => {
+                    fired.current = true;
+                    cancel();
+                    latest.current();
+                }, HOLD_MS);
+            },
+            onPointerMove: (event) => {
+                const start = origin.current;
+                if (start &&
+                    Math.hypot(event.clientX - start.x, event.clientY - start.y) > MOVE_TOLERANCE) {
+                    cancel();
+                }
+            },
+            onPointerUp: cancel,
+            onPointerLeave: cancel,
+            onPointerCancel: cancel,
+            /** The click that ends a hold would otherwise also fire whatever it lands on. */
+            onClickCapture: (event) => {
+                if (fired.current) {
+                    fired.current = false;
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+            },
+        },
+    };
+}

package/dist/layout/use-hold.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hold.js","sourceRoot":"","sources":["../../src/layout/use-hold.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAqB,MAAM,OAAO,CAAC;AAEvE,6EAA6E;AAC7E,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAC;AAE3B,mFAAmF;AACnF,MAAM,cAAc,GAAG,EAAE,CAAC;AAE1B;;qFAEqF;AACrF,MAAM,UAAU,OAAO,CAAC,MAAkB,EAAE,OAAgB;IAC1D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,KAAK,GAAG,MAAM,CAA4C,SAAS,CAAC,CAAC;IAC3E,MAAM,MAAM,GAAG,MAAM,CAAkC,IAAI,CAAC,CAAC;IAC7D,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5B,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IAC9B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;IAEvD,MAAM,MAAM,GAAG,GAAG,EAAE;QAClB,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC5B,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,OAAO;QACL,OAAO;QACP,QAAQ,EAAE;YACR,aAAa,EAAE,CAAC,KAAgC,EAAE,EAAE;gBAClD,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;gBACtB,IACE,CAAC,OAAO;oBACP,KAAK,CAAC,MAAsB,CAAC,OAAO,CACnC,oDAAoD,CACrD,EACD,CAAC;oBACD,OAAO;gBACT,CAAC;gBAED,MAAM,CAAC,OAAO,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;gBACxD,UAAU,CAAC,IAAI,CAAC,CAAC;gBACjB,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;oBAC9B,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;oBACrB,MAAM,EAAE,CAAC;oBACT,MAAM,CAAC,OAAO,EAAE,CAAC;gBACnB,CAAC,EAAE,OAAO,CAAC,CAAC;YACd,CAAC;YACD,aAAa,EAAE,CAAC,KAAgC,EAAE,EAAE;gBAClD,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC;gBAC7B,IACE,KAAK;oBACL,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,cAAc,EAC7E,CAAC;oBACD,MAAM,EAAE,CAAC;gBACX,CAAC;YACH,CAAC;YACD,WAAW,EAAE,MAAM;YACnB,cAAc,EAAE,MAAM;YACtB,eAAe,EAAE,MAAM;YAEvB,iFAAiF;YACjF,cAAc,EAAE,CAAC,KAA0D,EAAE,EAAE;gBAC7E,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;oBAClB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;oBACtB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;gBAC1B,CAAC;YACH,CAAC;SACF;KACF,CAAC;AACJ,CAAC"}

package/dist/provider.d.ts

@@ -0,0 +1,37 @@
+import { type Client, type RemoteClientOptions } from '@hashsome/core';
+import { type ReactNode } from 'react';
+import { type Density } from './theme/density.ts';
+import { type ThemeOverrides } from './theme/overrides.ts';
+export type ThemeMode = 'light' | 'dark' | 'system';
+export interface HashsomeProviderProps {
+    /** Runtime WebSocket URL. Defaults to `/ws` on the current origin. */
+    url?: string;
+    /** Provide a ready-made client (gallery, tests). */
+    client?: Client;
+    /** Options for the default `RemoteClient` (reconnect timing, a custom socket factory). Ignored when `client` is given. */
+    clientOptions?: Omit<RemoteClientOptions, 'url'>;
+    /** `'system'` follows the browser/OS preference and updates live. Default `'dark'`. A `useThemeToggle()` caller (e.g. `NavRail`'s dev toggle) can still override this at runtime. */
+    theme?: ThemeMode;
+    /** Any Google Fonts family name (e.g. `'Inter'`, `'Roboto'`, `'Poppins'`), loaded dynamically. Default `'Inter'`. */
+    font?: string;
+    /** `'compact'` for small square displays: tighter spacing, shorter tiles, smaller icon circles. Default `'comfortable'`. */
+    density?: Density;
+    /** Partial changes to the built-in theme — colors per light/dark, radii, typography, spacing, density sizes. Pass a constant defined outside the component: a new object each render rebuilds the theme each render. */
+    overrides?: ThemeOverrides;
+    /** The app. */
+    children: ReactNode;
+}
+export interface ThemeModeState {
+    /** The theme actually in effect right now — never `'system'`, already resolved against the
+     * live OS preference and any `useThemeToggle()` override. */
+    resolved: 'light' | 'dark';
+    /** Flips between light and dark, overriding the configured `theme` (including `'system'`) until
+     * the page reloads. */
+    toggle: () => void;
+}
+/** Reads the live light/dark state and a way to flip it — e.g. a dev-only toggle in `NavRail`.
+ * Must be rendered inside `<HashsomeProvider>`. */
+export declare function useThemeToggle(): ThemeModeState;
+/** Connects the tree to the runtime proxy. Render only on the client. */
+export declare function HashsomeProvider({ url, client, clientOptions, theme, font, density, overrides, children, }: HashsomeProviderProps): import("react").JSX.Element;
+export declare function useClient(): Client;

package/dist/provider.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RemoteClient } from '@hashsome/core';
+import { Global, ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import { ThemeProvider } from 'e-prim';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { DetailProvider } from './layout/detail-provider.js';
+import { EntityDrawer } from './layout/entity-drawer.js';
+import { UNITS_PER_SPACE } from './theme/density.js';
+import { globalStyles } from './theme/global-styles.js';
+import { applyThemeOverrides, densityTokens } from './theme/overrides.js';
+import { DEFAULT_FONT, darkTheme, googleFontHref, lightTheme, withFontFamily, } from './theme/index.js';
+const HashsomeContext = createContext(null);
+/** Loads a Google Fonts family at runtime via a single `<link>` this hook owns and reuses (keyed
+ * by a `data-hashsome-font` marker, not the family, so switching fonts updates it in place instead of
+ * accumulating stale `<link>` tags). A no-op outside the browser (SSR has no `document`). */
+function useGoogleFont(family) {
+    useEffect(() => {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        let link = document.querySelector('link[data-hashsome-font]');
+        if (!link) {
+            link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.dataset.hashsomeFont = '';
+            document.head.appendChild(link);
+        }
+        link.href = googleFontHref(family);
+    }, [family]);
+}
+function defaultUrl() {
+    const { protocol, host } = window.location;
+    return `${protocol === 'https:' ? 'wss:' : 'ws:'}//${host}/ws`;
+}
+// jsdom (unit tests) has no `matchMedia` — guarded so only `theme="system"` ever touches it, and
+// even then it degrades to `false` instead of throwing if a test environment lacks it too.
+function systemPrefersDark() {
+    return (typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches);
+}
+const ThemeModeContext = createContext(null);
+/** Reads the live light/dark state and a way to flip it — e.g. a dev-only toggle in `NavRail`.
+ * Must be rendered inside `<HashsomeProvider>`. */
+export function useThemeToggle() {
+    const value = useContext(ThemeModeContext);
+    if (!value) {
+        throw new Error('useThemeToggle() must be used inside <HashsomeProvider>');
+    }
+    return value;
+}
+/** Resolves `'system'` against the live OS/browser preference, updating if it changes while open —
+ * a kiosk tablet left running overnight should follow a scheduled OS-level dark mode, for example.
+ * `override` (set via `useThemeToggle().toggle()`) wins over both until the page reloads. */
+function useThemeMode(mode) {
+    const [systemDark, setSystemDark] = useState(() => mode === 'system' && systemPrefersDark());
+    const [override, setOverride] = useState(null);
+    useEffect(() => {
+        if (mode !== 'system' || typeof window.matchMedia !== 'function') {
+            return;
+        }
+        const query = window.matchMedia('(prefers-color-scheme: dark)');
+        const onChange = () => setSystemDark(query.matches);
+        query.addEventListener('change', onChange);
+        return () => query.removeEventListener('change', onChange);
+    }, [mode]);
+    const configured = mode === 'light' ? 'light' : mode === 'dark' ? 'dark' : systemDark ? 'dark' : 'light';
+    const resolved = override ?? configured;
+    return { resolved, toggle: () => setOverride(resolved === 'dark' ? 'light' : 'dark') };
+}
+/** Connects the tree to the runtime proxy. Render only on the client. */
+export function HashsomeProvider({ url, client, clientOptions, theme = 'dark', font = DEFAULT_FONT, density = 'comfortable', overrides, children, }) {
+    const instance = useMemo(() => client ?? new RemoteClient({ url: url ?? defaultUrl(), ...clientOptions }), [client, url, clientOptions]);
+    const themeMode = useThemeMode(theme);
+    // Memoized: Emotion recomputes the merged theme (and every `css` prop) when the function changes.
+    const withDensity = useMemo(() => (outer) => ({ ...outer, density: densityTokens(density, overrides) }), [density, overrides]);
+    useGoogleFont(font);
+    const resolvedTheme = useMemo(() => ({
+        ...withFontFamily(applyThemeOverrides(themeMode.resolved === 'dark' ? darkTheme : lightTheme, themeMode.resolved, overrides), font),
+        // The spacing unit follows density, so `gap={3}` is always one space and the rest scale.
+        spacing: densityTokens(density, overrides).space / UNITS_PER_SPACE,
+    }), [themeMode.resolved, font, overrides, density]);
+    useEffect(() => {
+        instance.connect();
+        return () => instance.close();
+    }, [instance]);
+    return (_jsx(HashsomeContext.Provider, { value: instance, children: _jsx(ThemeModeContext.Provider, { value: themeMode, children: _jsx(ThemeProvider, { theme: resolvedTheme, children: _jsxs(EmotionThemeProvider, { theme: withDensity, children: [_jsx(Global, { styles: globalStyles }), _jsxs(DetailProvider, { children: [children, _jsx(EntityDrawer, {})] })] }) }) }) }));
+}
+export function useClient() {
+    const client = useContext(HashsomeContext);
+    if (!client) {
+        throw new Error('Hashsome hooks must be used inside <HashsomeProvider>');
+    }
+    return client;
+}

package/dist/provider.js.map

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

package/dist/status.d.ts

@@ -0,0 +1,8 @@
+import type { Entity } from '@hashsome/core';
+/** Uniform lifecycle of an entity as seen by components. */
+export type EntityStatus = 'loading' | 'missing' | 'unsupported' | 'unavailable' | 'unknown' | 'ready';
+/** `undefined` = still loading, `null` = no such entity. */
+export declare function entityStatus(entity: Entity | null | undefined): EntityStatus;
+export declare const statusLabels: Record<Exclude<EntityStatus, 'ready'>, string>;
+/** Capitalizes just the first character; a no-op on text that's already capitalized. */
+export declare function capitalize(text: string): string;

package/dist/status.js

@@ -0,0 +1,27 @@
+/** `undefined` = still loading, `null` = no such entity. */
+export function entityStatus(entity) {
+    if (entity === undefined) {
+        return 'loading';
+    }
+    if (entity === null) {
+        return 'missing';
+    }
+    if (entity.availability === 'unavailable') {
+        return 'unavailable';
+    }
+    if (entity.availability === 'unknown') {
+        return 'unknown';
+    }
+    return 'ready';
+}
+export const statusLabels = {
+    loading: '…',
+    missing: 'Not found',
+    unsupported: 'Unsupported',
+    unavailable: 'Unavailable',
+    unknown: 'Unknown',
+};
+/** Capitalizes just the first character; a no-op on text that's already capitalized. */
+export function capitalize(text) {
+    return text.length > 0 ? text.charAt(0).toUpperCase() + text.slice(1) : text;
+}

package/dist/status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.js","sourceRoot":"","sources":["../src/status.ts"],"names":[],"mappings":"AAWA,4DAA4D;AAC5D,MAAM,UAAU,YAAY,CAAC,MAAiC;IAC5D,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACzB,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;QACpB,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,IAAI,MAAM,CAAC,YAAY,KAAK,aAAa,EAAE,CAAC;QAC1C,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,IAAI,MAAM,CAAC,YAAY,KAAK,SAAS,EAAE,CAAC;QACtC,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAmD;IAC1E,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,WAAW;IACpB,WAAW,EAAE,aAAa;IAC1B,WAAW,EAAE,aAAa;IAC1B,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,wFAAwF;AACxF,MAAM,UAAU,UAAU,CAAC,IAAY;IACrC,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AAC/E,CAAC"}

package/dist/theme/density.d.ts

@@ -0,0 +1,16 @@
+export type Density = 'comfortable' | 'compact';
+/** How many of the theme's spacing units make one `space`: `gap={3}` is one space. */
+export declare const UNITS_PER_SPACE = 3;
+/** Sizes that scale with how much room a display has, in px. Spacing follows it on its own: the
+ * theme's spacing unit is `space / 3`, so e-prim's `gap={3}`, `p={3}` and friends are one space,
+ * and every other spacing prop scales with it. The rest are read from the theme in a `css` prop:
+ * `css={({ density }) => ({ height: density.tileHeight })}`. */
+export interface DensityTokens {
+    /** The gap between tiles, in px: three spacing units, so `gap={3}`. Changing it rescales all spacing. */
+    space: number;
+    tileHeight: number;
+    iconSize: number;
+    /** The diameter of the round icon buttons and media art. */
+    iconCircle: number;
+}
+export declare const DENSITY: Record<Density, DensityTokens>;

package/dist/theme/density.js

@@ -0,0 +1,7 @@
+/** How many of the theme's spacing units make one `space`: `gap={3}` is one space. */
+export const UNITS_PER_SPACE = 3;
+export const DENSITY = {
+    comfortable: { space: 12, tileHeight: 68, iconSize: 24, iconCircle: 44 },
+    // Small square displays (e.g. a Shelly wall display).
+    compact: { space: 8, tileHeight: 52, iconSize: 20, iconCircle: 36 },
+};

package/dist/theme/density.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"density.js","sourceRoot":"","sources":["../../src/theme/density.ts"],"names":[],"mappings":"AAEA,sFAAsF;AACtF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAC;AAgBjC,MAAM,CAAC,MAAM,OAAO,GAAmC;IACrD,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;IACxE,sDAAsD;IACtD,OAAO,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;CACpE,CAAC"}