@hashsome/ui 0.4.0 → 0.5.0

package/dist/provider.js

@@ -2,12 +2,14 @@ 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 { MotionGlobalConfig } from 'motion/react';
+import { createContext, useContext, useEffect, useMemo, useState, useSyncExternalStore, } 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 { 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 +51,140 @@ 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());
+const MOTION_KEY = 'hashsome:motion';
+/** What this device chose for motion: `?motion=reduced` or `?motion=full` on the address (which is
+ * also remembered), or what an earlier visit remembered. `?motion=auto` forgets it. */
+function motionFromDevice() {
+    try {
+        const asked = new URLSearchParams(window.location.search).get('motion');
+        if (asked === 'reduced' || asked === 'full') {
+            localStorage.setItem(MOTION_KEY, asked);
+            return asked;
+        }
+        if (asked === 'auto') {
+            localStorage.removeItem(MOTION_KEY);
+            return undefined;
+        }
+        const kept = localStorage.getItem(MOTION_KEY);
+        return kept === 'reduced' || kept === 'full' ? kept : 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 = motionFromDevice() ?? 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;
+    }
+}
+/** 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]);
+    const sun = useSyncExternalStore((onChange) => (sunRef ? client.subscribe(sunRef, onChange) : () => undefined), () => (sunRef ? client.getEntity(sunRef) : undefined), () => 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, children, }) {
     const instance = useMemo(() => client ?? new RemoteClient({ url: url ?? defaultUrl(), ...clientOptions }), [client, url, clientOptions]);
-    const themeMode = useThemeMode(theme);
+    useMotionMode(motion);
+    const themeMode = useThemeMode(theme, 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);

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/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.5.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.5.0",
     "e-prim": "2.0.1",
     "motion": "13.4.5",
     "react": "19.3.0",