@hashsome/ui 0.4.0 → 0.6.0

package/dist/layout/tile.js

@@ -5,9 +5,11 @@ import { useEffect, useMemo, useRef, useState, } from 'react';
 import { Icon } from '../icon.js';
 import { RoundButton } from './round-button.js';
 import { statusLabels } from '../status.js';
+import { BADGE } from '../theme/grid.js';
 import { useDrawer } from './use-drawer.js';
 import { EnergyChart } from './energy-chart.js';
 import { HistorySection } from './history-section.js';
+import { HoldProgress } from './hold-progress.js';
 import { LogbookHistory } from './logbook-history.js';
 const DRAG_THRESHOLD = 8;
 const KEY_STEP = 0.05;
@@ -181,19 +183,21 @@ export function Tile({ label, icon, secondary, status = 'ready', active = false,
     // 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", 
+    const iconBadge = icon ? (_jsx(Flex, { as: motion.span, align: "center", justify: "center", position: "relative", radius: "full", width: 32, height: 32, initial: false, 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-grid-card": true, "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, 
+        // A card that mounts (a page opened) is drawn as it is, not animated from nothing.
+        initial: false, animate: { backgroundColor: cardBg, color: cardColor, opacity: cardOpacity }, transition: COLOR_TRANSITION, css: ({ palette, spacing }) => ({
+            // The badge between its padding, written down rather than left to the content, so a tile is a
+            // whole number of grid modules (12, in the comfortable density) whatever is in it.
+            minHeight: `calc(${spacing(4)} + ${BADGE}px)`,
+            ...(feedback === 'error'
+                ? { outline: `2px solid ${palette.danger}`, outlineOffset: -2 }
+                : {}),
+        }), 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: {
+                initial: false, 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(HoldProgress, { edge: "bottom", color: solidAccent ? 'rgba(0, 0, 0, 0.35)' : 'rgba(255, 255, 255, 0.55)' })) : 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',

package/dist/layout/top-row.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface TopRowProps {
+    /** What goes in the row: the date, the weather, the clock. */
+    children: ReactNode;
+}
+/** The row along the top of a page you build yourself instead of with `TopBar`: its pieces (`DateChip`,
+ * `WeatherChip`, `Clock`, `SystemStatus`) in a line at the right, in the height the grid gives the top
+ * row, with no padding of its own. */
+export declare function TopRow({ children }: TopRowProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/top-row.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { Flex } from 'e-prim';
+import { TOP_ROW } from '../theme/grid.js';
+/** The row along the top of a page you build yourself instead of with `TopBar`: its pieces (`DateChip`,
+ * `WeatherChip`, `Clock`, `SystemStatus`) in a line at the right, in the height the grid gives the top
+ * row, with no padding of its own. */
+export function TopRow({ children }) {
+    return (_jsx(Flex, { align: "center", justify: "flex-end", gap: 3, css: { minHeight: TOP_ROW }, children: children }));
+}

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

@@ -17,6 +17,7 @@ export declare function useDrawer({ icon, label, kind, body, }: {
 }): {
     open: () => void;
     openExpanded: () => void;
+    openFull: () => void;
     isOpen: boolean;
 };
 /** `useDrawer` for an owner that must not itself subscribe to the drawer's context. Re-pushing the
@@ -28,6 +29,6 @@ export declare function DrawerTrigger({ icon, label, kind, body, children, }: {
     label: string;
     kind?: string | undefined;
     body: ReactNode;
-    /** Gets `open` (the side panel) and `openExpanded` (full size). */
-    children: (open: () => void, openExpanded: () => void) => ReactNode;
+    /** Gets `open` (the side panel), `openExpanded` (full size, which can be collapsed) and `openFull` (full size, with no collapse button). */
+    children: (open: () => void, openExpanded: () => void, openFull: () => void) => ReactNode;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/use-drawer.js

@@ -22,13 +22,15 @@ export function useDrawer({ icon, label, 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 };
+    // Full size and kept there: for content that is an overlay of its own, with nothing to collapse to.
+    const openFull = () => openDetail(id, _jsx(DrawerHeader, { icon: icon, label: label, kind: kind }), body, true, true);
+    return { open, openExpanded, openFull, 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) });
+    const { open, openExpanded, openFull } = useDrawer({ icon, label, kind, body });
+    return _jsx(_Fragment, { children: children(open, openExpanded, openFull) });
 }

package/dist/provider.d.ts

@@ -1,8 +1,13 @@
-import { type Client, type RemoteClientOptions } from '@hashsome/core';
+import { type Client, type EntityRef, 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';
+import { type ThemeSchedule } from './theme/schedule.ts';
+export type { ThemeSchedule };
+/** `reduced` turns every animation off, for a slow display; `full` keeps them; `auto` (the default) leaves things as they are. */
+export type MotionPreference = 'auto' | 'full' | 'reduced';
+/** `'system'` follows the display's own light/dark preference; a `ThemeSchedule` changes with the time of day. */
+export type ThemeMode = 'light' | 'dark' | 'system' | ThemeSchedule;
 export interface HashsomeProviderProps {
     /** Runtime WebSocket URL. Defaults to `/ws` on the current origin. */
     url?: string;
@@ -10,14 +15,20 @@ export interface HashsomeProviderProps {
     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. */
+    /** `'light'`, `'dark'`, `'system'` (follows the browser/OS preference and updates live), or a schedule: `{ dark: { from: '19:00', to: '07:00' } }` is dark between those times on the display's clock, `{ sun: 'ha:sun.sun' }` is dark while that entity, a `daylight` sensor (`on` while the sun is up; the Home Assistant integration makes one of `sun.sun`), is `off`. Default `'dark'`. A schedule and the document shell's first paint use `'system'` until the time or the entity is known. A `useThemeToggle()` caller (e.g. `NavRail`'s dev toggle) can still override this at runtime. Pass a constant defined outside the component. */
     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;
+    /** `'reduced'` turns animations and transitions off, for a slow display, `'full'` keeps them and `'auto'` (the default) leaves things as they are. A device can choose for itself with `?motion=reduced` (or `full`) on the address it opens, which wins over this prop. Nothing is kept: it holds while the app is open, moving between its pages, and a reload without the parameter goes back to this prop. */
+    motion?: MotionPreference;
     /** 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;
+    /** Shows the debug menu: a floating button at the bottom left whose popover shows the module grid, makes the page fullscreen and changes the theme, on the device, kept there. Default: on when `HASHSOME_DEBUG=1` (or `true`) was in the environment of `hashsome dev` or `build`. */
+    debug?: boolean;
+    /** The daylight sensor (`on` while the sun is up) the debug menu's Sun theme follows, when `theme` is not a sun schedule already (`theme={{ sun: … }}` names one). Without either, the menu has no Sun choice: Hashsome does not know which entity is the sun. */
+    sun?: EntityRef;
     /** The app. */
     children: ReactNode;
 }
@@ -33,5 +44,5 @@ export interface ThemeModeState {
  * 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 HashsomeProvider({ url, client, clientOptions, theme, motion, font, density, overrides, debug, sun, children, }: HashsomeProviderProps): import("react").JSX.Element;
 export declare function useClient(): Client;

package/dist/provider.js

@@ -1,13 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RemoteClient } from '@hashsome/core';
+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 { MotionGlobalConfig } from 'motion/react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, useSyncExternalStore, } from 'react';
+import { DebugContext, debugFromEnv, useDebugState, useFullscreenKept, } from './debug.js';
+import { DebugMenu } from './layout/debug-menu.js';
 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 { isDarkAt, msUntilSwitch, sunIsDown } from './theme/schedule.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
@@ -49,29 +53,156 @@ export function useThemeToggle() {
     }
     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());
+/** What the address asks for motion: `?motion=reduced` or `?motion=full`. Nothing is kept, and the
+ * app reads it once, when it starts, so moving between pages inside the app keeps it and a reload
+ * without it does not. `?motion=auto` (or anything else) leaves it to the prop. */
+function motionFromAddress() {
+    try {
+        const asked = new URLSearchParams(window.location.search).get('motion');
+        return asked === 'reduced' || asked === 'full' ? asked : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+/** Settles motion once, when the app starts, before anything renders: in `reduced` every animation
+ * motion would run is skipped, and a flag on the page lets the global styles switch off CSS
+ * transitions and animations too. */
+function useMotionMode(preference) {
+    const [mode] = useState(() => {
+        const chosen = motionFromAddress() ?? preference;
+        MotionGlobalConfig.skipAnimations = chosen === 'reduced';
+        if (typeof document !== 'undefined') {
+            if (chosen === 'reduced') {
+                document.documentElement.dataset.motion = 'reduced';
+            }
+            else {
+                delete document.documentElement.dataset.motion;
+            }
+        }
+        return chosen;
+    });
+    return mode;
+}
+const SUN_KEY = 'hashsome:sun-down';
+/** The last answer a sun entity gave, kept across page loads so a reload at night does not start light. */
+function rememberedSun() {
+    try {
+        const stored = localStorage.getItem(SUN_KEY);
+        return stored === null ? undefined : stored === '1';
+    }
+    catch {
+        return undefined;
+    }
+}
+/** The sun entity a theme follows, if it is a sun schedule. */
+function sunOf(mode) {
+    return typeof mode === 'object' && 'sun' in mode ? mode.sun : undefined;
+}
+/** The theme in effect: what the debug menu chose, if it chose, else what the project configured.
+ * The sun is the project's: the one its theme follows, or the `sun` it gave. Without one there is no
+ * sun to follow, so that choice (kept from a visit that had one) leaves the configured theme as it was. */
+function chosenTheme(configured, choice, sun) {
+    if (choice === null) {
+        return configured;
+    }
+    if (choice === 'sun') {
+        return sun === undefined ? configured : { sun };
+    }
+    return choice;
+}
+/** Resolves the configured mode: `'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), a time range against the clock (re-checked at each boundary and whenever the
+ * page is shown again, since a sleeping tablet misses timers) and a sun entity against what it says.
+ * `override` (set via `useThemeToggle().toggle()`) wins over all of them until the page reloads. */
+function useThemeMode(mode, client) {
+    const range = typeof mode === 'object' && 'dark' in mode ? mode.dark : undefined;
+    const from = range?.from;
+    const to = range?.to;
+    const sunRef = typeof mode === 'object' && 'sun' in mode ? mode.sun : undefined;
+    const followsSystem = mode === 'system' || sunRef !== undefined;
+    const [systemDark, setSystemDark] = useState(() => followsSystem && systemPrefersDark());
     const [override, setOverride] = useState(null);
+    const [now, setNow] = useState(() => new Date());
     useEffect(() => {
-        if (mode !== 'system' || typeof window.matchMedia !== 'function') {
+        if (!followsSystem || 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';
+    }, [followsSystem]);
+    useEffect(() => {
+        if (from === undefined || to === undefined) {
+            return;
+        }
+        const bounds = { from, to };
+        let timer;
+        const arm = () => {
+            clearTimeout(timer);
+            const wait = msUntilSwitch(bounds, new Date());
+            if (Number.isFinite(wait)) {
+                // A moment past the boundary, so the clock has certainly crossed it.
+                timer = setTimeout(refresh, wait + 500);
+            }
+        };
+        const refresh = () => {
+            setNow(new Date());
+            arm();
+        };
+        const onVisible = () => document.visibilityState === 'visible' && refresh();
+        refresh();
+        document.addEventListener('visibilitychange', onVisible);
+        return () => {
+            clearTimeout(timer);
+            document.removeEventListener('visibilitychange', onVisible);
+        };
+    }, [from, to]);
+    // Memoized, like every other `subscribe` given to `useSyncExternalStore` (see hooks.ts): a new
+    // function each render makes React resubscribe, which against a remote runtime is an unsubscribe and
+    // a subscribe whose reply is a new entity object, which renders again, without end.
+    const subscribeSun = useCallback((onChange) => (sunRef ? client.subscribe(sunRef, onChange) : () => undefined), [client, sunRef]);
+    const readSun = useCallback(() => (sunRef ? client.getEntity(sunRef) : undefined), [client, sunRef]);
+    const sun = useSyncExternalStore(subscribeSun, readSun, () => undefined);
+    const sunDown = sunIsDown(sun);
+    useEffect(() => {
+        if (sunDown === undefined) {
+            return;
+        }
+        try {
+            localStorage.setItem(SUN_KEY, sunDown ? '1' : '0');
+        }
+        catch {
+            // Without storage the next load just starts from the system preference again.
+        }
+    }, [sunDown]);
+    let configured;
+    if (mode === 'light' || mode === 'dark') {
+        configured = mode;
+    }
+    else if (range) {
+        configured = isDarkAt(range, now) ? 'dark' : 'light';
+    }
+    else if (sunRef) {
+        configured = (sunDown ?? rememberedSun() ?? systemDark) ? 'dark' : 'light';
+    }
+    else {
+        configured = 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, }) {
+export function HashsomeProvider({ url, client, clientOptions, theme = 'dark', motion = 'auto', font = DEFAULT_FONT, density = 'comfortable', overrides, debug = debugFromEnv(), sun, children, }) {
     const instance = useMemo(() => client ?? new RemoteClient({ url: url ?? defaultUrl(), ...clientOptions }), [client, url, clientOptions]);
-    const themeMode = useThemeMode(theme);
+    useMotionMode(motion);
+    const debugState = useDebugState();
+    useFullscreenKept(debugState.fullscreen, debugState.setFullscreen);
+    // The debug menu can choose a theme over the configured one; the sun is the project's own entity.
+    const sunEntity = sunOf(theme) ?? sun;
+    const themeMode = useThemeMode(chosenTheme(theme, debug ? debugState.themeChoice : null, sunEntity), instance);
     // 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);
@@ -84,7 +215,7 @@ export function HashsomeProvider({ url, client, clientOptions, theme = 'dark', f
         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, {})] })] }) }) }) }));
+    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 }), _jsx(DebugContext.Provider, { value: debugState, children: _jsxs(DetailProvider, { children: [children, _jsx(EntityDrawer, {}), debug ? _jsx(DebugMenu, { configured: theme, sun: sunEntity }) : null] }) })] }) }) }) }));
 }
 export function useClient() {
     const client = useContext(HashsomeContext);

package/dist/theme/global-styles.js

@@ -20,6 +20,9 @@ export function globalStyles({ palette, typography }) {
             color: palette.text,
             fontFamily: typography.default.fontFamily,
         },
+        // `?motion=reduced` (see `HashsomeProvider`): no CSS transitions or animations, except the ones
+        // that are a cue the user waits for (a hold's progress line, marked `data-keep-motion`).
+        'html[data-motion="reduced"] *:not([data-keep-motion]), html[data-motion="reduced"] *:not([data-keep-motion])::before, html[data-motion="reduced"] *:not([data-keep-motion])::after': { transition: 'none !important', animation: 'none !important' },
         button: { font: 'inherit', color: 'inherit' },
         // Buttons and inputs start borderless; one that wants a border asks for it with the `border` prop.
         'button, input': { border: 0 },

package/dist/theme/grid.d.ts

@@ -0,0 +1,30 @@
+/** The icon badge a tile starts with, in px: the one size in a tile that does not scale with density. */
+export declare const BADGE = 32;
+/** The height of a room header, in px. */
+export declare const HEADER = 32;
+/** The height of the top row, in px: the clock's line and the tallest things beside it (the switcher, the
+ * scene buttons), with no padding of its own, so its content sits as far from the page's edge as
+ * everything else does. Sizes that do not scale with density are multiples of 8, so they are whole
+ * modules in both (4px and 2.67px). */
+export declare const TOP_ROW = 40;
+/** The vertical grid every card sits on. The module is the theme's spacing unit (a third of a
+ * space: 4px in comfortable density, 2.67px in compact), so the gap between cards is always 3
+ * modules, and a tile and a header are whole numbers of them in either density. Sizes are in px;
+ * `pitch` is a card's height plus the gap that follows it, and a card spanning n pitches is n heights
+ * and n-1 gaps tall. */
+export interface GridMetrics {
+    module: number;
+    gap: number;
+    tile: number;
+    header: number;
+    tilePitch: number;
+    headerPitch: number;
+}
+export declare function gridMetrics(space: number): GridMetrics;
+/** Whether a box's top edge, measured from the grid's origin, or its height is off the module grid. Browsers round to the pixel, so a little under a pixel is still on it. */
+export declare function offGrid(top: number, height: number, module: number): boolean;
+/** How a height's leftover (what is under one module after as many whole ones as fit) is shared between the top and the bottom padding: half each, in whole pixels, the odd one to the bottom. `available` is the height inside the page's padding. */
+export declare function centeringOffsets(available: number, module: number): {
+    top: number;
+    bottom: number;
+};

package/dist/theme/grid.js

@@ -0,0 +1,38 @@
+import { UNITS_PER_SPACE } from './density.js';
+/** The icon badge a tile starts with, in px: the one size in a tile that does not scale with density. */
+export const BADGE = 32;
+/** The height of a room header, in px. */
+export const HEADER = 32;
+/** The height of the top row, in px: the clock's line and the tallest things beside it (the switcher, the
+ * scene buttons), with no padding of its own, so its content sits as far from the page's edge as
+ * everything else does. Sizes that do not scale with density are multiples of 8, so they are whole
+ * modules in both (4px and 2.67px). */
+export const TOP_ROW = 40;
+export function gridMetrics(space) {
+    const module = space / UNITS_PER_SPACE;
+    // A tile is its badge between two spacing-unit-2 paddings.
+    const tile = BADGE + 4 * module;
+    return {
+        module,
+        gap: space,
+        tile,
+        header: HEADER,
+        tilePitch: tile + space,
+        headerPitch: HEADER + space,
+    };
+}
+/** Whether a box's top edge, measured from the grid's origin, or its height is off the module grid. Browsers round to the pixel, so a little under a pixel is still on it. */
+export function offGrid(top, height, module) {
+    const tolerance = Math.max(0.5, module * 0.15);
+    const off = (value) => {
+        const rest = Math.abs(value) % module;
+        return Math.min(rest, module - rest) > tolerance;
+    };
+    return off(top) || off(height);
+}
+/** How a height's leftover (what is under one module after as many whole ones as fit) is shared between the top and the bottom padding: half each, in whole pixels, the odd one to the bottom. `available` is the height inside the page's padding. */
+export function centeringOffsets(available, module) {
+    const leftover = available > 0 ? Math.floor(available % module) : 0;
+    const top = Math.floor(leftover / 2);
+    return { top, bottom: leftover - top };
+}

package/dist/theme/index.js

@@ -38,6 +38,7 @@ const shared = {
     },
     shadow: {
         drawer: '0 20px 48px rgba(0, 0, 0, 0.5)',
+        dock: '0 6px 20px rgba(0, 0, 0, 0.16)',
     },
     radius: {
         full: '999px',
@@ -75,7 +76,7 @@ export const darkTheme = {
         surfaceRaised: '#211E26',
         text: '#F2EFEA',
         textMuted: '#96908C',
-        accent: '#FF7A45',
+        accent: '#B85C38',
         accentText: '#FFFFFF',
         onAccent: '#1B1B1F',
         warm: '#E3B341',

package/dist/theme/schedule.d.ts

@@ -0,0 +1,33 @@
+import type { EntityRef } from '@hashsome/core';
+/**
+ * When the dark theme is on, for a display that should change with the time of day:
+ * - `{ dark: { from: '19:00', to: '07:00' } }`: dark between two times of day on the display's own
+ *   clock. `to` may be earlier than `from` (it is the next morning); the same time twice means never dark.
+ * - `{ sun: 'ha:sun.sun' }`: dark while a `daylight` sensor (the sun entity: `on` while the sun is up) is off.
+ */
+export type ThemeSchedule = {
+    dark: {
+        from: string;
+        to: string;
+    };
+} | {
+    sun: EntityRef;
+};
+/** Minutes after midnight for `HH:MM`. Throws on anything else, naming what was wrong. */
+export declare function minutesOf(time: string, name: string): number;
+/** Whether `now` is inside the dark hours. */
+export declare function isDarkAt(range: {
+    from: string;
+    to: string;
+}, now: Date): boolean;
+/** How long until the theme next changes, in ms; `Infinity` when it never does. */
+export declare function msUntilSwitch(range: {
+    from: string;
+    to: string;
+}, now: Date): number;
+/** What a `daylight` sensor says (`on` while the sun is up): dark once it is `off`. `undefined` for anything else (not loaded yet, unavailable, not that kind of sensor). */
+export declare function sunIsDown(entity: {
+    kind: string;
+    value?: string;
+    measurement?: string;
+} | null | undefined): boolean | undefined;

package/dist/theme/schedule.js

@@ -0,0 +1,44 @@
+const TIME = /^([01]\d|2[0-3]):([0-5]\d)$/;
+/** Minutes after midnight for `HH:MM`. Throws on anything else, naming what was wrong. */
+export function minutesOf(time, name) {
+    const match = TIME.exec(time);
+    if (!match) {
+        throw new Error(`theme.dark.${name} must be a time like "19:00", not "${time}"`);
+    }
+    return Number(match[1]) * 60 + Number(match[2]);
+}
+const minutesNow = (now) => now.getHours() * 60 + now.getMinutes();
+/** Whether `now` is inside the dark hours. */
+export function isDarkAt(range, now) {
+    const from = minutesOf(range.from, 'from');
+    const to = minutesOf(range.to, 'to');
+    const at = minutesNow(now);
+    if (from === to) {
+        return false;
+    }
+    // Dark hours that run past midnight are everything except the daytime between `to` and `from`.
+    return from < to ? at >= from && at < to : at >= from || at < to;
+}
+const DAY_MS = 24 * 60 * 60 * 1000;
+/** How long until the theme next changes, in ms; `Infinity` when it never does. */
+export function msUntilSwitch(range, now) {
+    const from = minutesOf(range.from, 'from');
+    const to = minutesOf(range.to, 'to');
+    if (from === to) {
+        return Infinity;
+    }
+    const wait = (minutes) => {
+        const at = new Date(now);
+        at.setHours(Math.floor(minutes / 60), minutes % 60, 0, 0);
+        const ms = at.getTime() - now.getTime();
+        return ms > 0 ? ms : ms + DAY_MS;
+    };
+    return Math.min(wait(from), wait(to));
+}
+/** What a `daylight` sensor says (`on` while the sun is up): dark once it is `off`. `undefined` for anything else (not loaded yet, unavailable, not that kind of sensor). */
+export function sunIsDown(entity) {
+    if (entity?.kind !== 'sensor' || entity.measurement !== 'daylight') {
+        return undefined;
+    }
+    return entity.value === 'off' ? true : entity.value === 'on' ? false : undefined;
+}

package/dist/theme/tokens.d.ts

@@ -42,6 +42,8 @@ declare module 'e-prim' {
     interface TShadow {
         /** `EntityDrawer`'s own drop shadow. */
         drawer: string;
+        /** `NavDock`'s: a softer one, for a small pill that floats over the page. */
+        dock: string;
     }
     interface TZIndex {
         scrim: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashsome/ui",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Design system components and hooks",
   "type": "module",
   "exports": {
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@emotion/react": "11.14.0",
-    "@hashsome/core": "0.4.0",
+    "@hashsome/core": "0.6.0",
     "e-prim": "2.0.1",
     "motion": "13.4.5",
     "react": "19.3.0",