@hashsome/ui 0.8.0 → 0.10.0

package/dist/layout/confirm-dialog.js

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

package/dist/layout/debug-menu.js

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

package/dist/layout/spinner.d.ts

@@ -1,3 +1,4 @@
+import { type PaletteKey } from 'e-prim';
 /** A turning ring: something is in progress and will not say how long it takes. Kept turning when the
  * app is set to reduced motion (`data-keep-motion`): a spinner that stopped would look stuck, and one
  * small turning icon costs next to nothing. */
@@ -8,6 +9,8 @@ export declare function Spinner({ size, label }: {
 /** A ring that turns around the edge of a round button (give the button `position: relative`): the
  * button is waiting for an answer and will not take another press. Kept turning under reduced motion
  * for the same reason `Spinner` is. */
-export declare function SpinnerRing({ label }: {
+export declare function SpinnerRing({ label, color, }: {
     label?: string;
+    /** A palette color: the theme's accent by default. Pass `accentText` for a button that is itself accent-colored (or filled with a color of the app's own). */
+    color?: PaletteKey;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/spinner.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { keyframes } from '@emotion/react';
+import { Box } from 'e-prim';
 import { Icon } from '../icon.js';
 const turn = keyframes({ to: { transform: 'rotate(360deg)' } });
 /** A turning ring: something is in progress and will not say how long it takes. Kept turning when the
@@ -17,12 +18,6 @@ export function Spinner({ size = 16, label = 'Loading' }) {
 /** A ring that turns around the edge of a round button (give the button `position: relative`): the
  * button is waiting for an answer and will not take another press. Kept turning under reduced motion
  * for the same reason `Spinner` is. */
-export function SpinnerRing({ label = 'Loading' }) {
-    return (_jsx("span", { role: "status", "aria-label": label, "data-keep-motion": true, css: ({ palette }) => ({
-            position: 'absolute',
-            inset: 0,
-            pointerEvents: 'none',
-            color: palette.accent,
-            animation: `${turn} 0.9s linear infinite`,
-        }), children: _jsx("svg", { viewBox: "0 0 100 100", width: "100%", height: "100%", "aria-hidden": "true", children: _jsx("circle", { cx: "50", cy: "50", r: "47", fill: "none", stroke: "currentColor", strokeWidth: "5", strokeLinecap: "round", strokeDasharray: "75 221" }) }) }));
+export function SpinnerRing({ label = 'Loading', color = 'accent', }) {
+    return (_jsx(Box, { as: "span", role: "status", "aria-label": label, "data-keep-motion": true, position: "absolute", color: color, css: { inset: 0, pointerEvents: 'none', animation: `${turn} 0.9s linear infinite` }, children: _jsx("svg", { viewBox: "0 0 100 100", width: "100%", height: "100%", "aria-hidden": "true", children: _jsx("circle", { cx: "50", cy: "50", r: "47", fill: "none", stroke: "currentColor", strokeWidth: "5", strokeLinecap: "round", strokeDasharray: "75 221" }) }) }));
 }

package/dist/layout/task-tile.d.ts

@@ -0,0 +1,28 @@
+import type { IconName } from '../icon-data.ts';
+import type { EntityStatus } from '../status.ts';
+/** Where a recurring task stands: not due for a while, due before long, or past its date. */
+export type TaskState = 'ok' | 'dueSoon' | 'overdue';
+export interface TaskTileProps {
+    /** What is to be done, e.g. `Septic additive`. */
+    label: string;
+    /** Icon id, e.g. `lu:wrench`. */
+    icon?: IconName;
+    /** Where the task stands. Whoever has the task decides it: how soon is "soon" is different for a weekly task and a yearly one. */
+    state: TaskState;
+    /** When it is next due. Shown as "Due in 2 days" or "Overdue by 3 days". */
+    dueAt?: Date | undefined;
+    /** When it was last done, shown in the question that marks it done again. */
+    lastDoneAt?: Date | undefined;
+    /** Status of the thing behind it, as for `Tile`: anything but `ready` shows why instead and disables the tile. */
+    status?: EntityStatus;
+    /** The person confirmed it is done, on this day (today unless they chose another, in case it was forgotten at the time). Rejecting shows the error in the dialog and leaves it open. */
+    onComplete: (doneOn: Date) => void | Promise<void>;
+}
+/** The line under a task's name. */
+export declare function taskLine(state: TaskState, dueAt: Date | undefined, now: Date): string;
+/**
+ * A recurring task as a tile: its name, where it stands (up to date, due soon, overdue) and when it is due.
+ * Tapping it asks whether it is done, with the day it was done on (today, or an earlier one if it was
+ * forgotten), and only a confirmation calls `onComplete`, so a stray tap does nothing.
+ */
+export declare function TaskTile({ label, icon, state, dueAt, lastDoneAt, status, onComplete, }: TaskTileProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/task-tile.js

@@ -0,0 +1,78 @@
+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, useState } from 'react';
+import { ConfirmDialog } from './confirm-dialog.js';
+import { IconButton, Tile } from './tile.js';
+const DAY_MS = 86_400_000;
+const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+/** How many calendar days from `now` to `then`: negative when `then` has passed. */
+const daysTo = (then, now) => Math.round((startOfDay(then).getTime() - startOfDay(now).getTime()) / DAY_MS);
+const plural = (n) => `${n} day${n === 1 ? '' : 's'}`;
+const short = (date) => date.toLocaleDateString(undefined, { day: 'numeric', month: 'short' });
+/** The line under a task's name. */
+export function taskLine(state, dueAt, now) {
+    if (!dueAt) {
+        return state === 'overdue' ? 'Overdue' : state === 'dueSoon' ? 'Due soon' : 'Up to date';
+    }
+    const days = daysTo(dueAt, now);
+    if (state === 'ok') {
+        return `Next ${short(dueAt)}`;
+    }
+    if (days === 0) {
+        return 'Due today';
+    }
+    if (days > 0) {
+        return days === 1 ? 'Due tomorrow' : `Due in ${plural(days)}`;
+    }
+    return `Overdue by ${plural(-days)}`;
+}
+/** The palette color of each state's line. */
+const TONE = { ok: 'textMuted', dueSoon: 'warm', overdue: 'danger' };
+/**
+ * A recurring task as a tile: its name, where it stands (up to date, due soon, overdue) and when it is due.
+ * Tapping it asks whether it is done, with the day it was done on (today, or an earlier one if it was
+ * forgotten), and only a confirmation calls `onComplete`, so a stray tap does nothing.
+ */
+export function TaskTile({ label, icon, state, dueAt, lastDoneAt, status = 'ready', onComplete, }) {
+    const [open, setOpen] = useState(false);
+    // How many days before today it was done: 0 is today.
+    const [daysAgo, setDaysAgo] = useState(0);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState();
+    // The words under the name follow the clock: "Due tomorrow" becomes "Due today" at midnight.
+    const [now, setNow] = useState(() => new Date());
+    useEffect(() => {
+        const id = setInterval(() => setNow(new Date()), 60_000);
+        return () => clearInterval(id);
+    }, []);
+    const ask = () => {
+        setDaysAgo(0);
+        setError(undefined);
+        setOpen(true);
+    };
+    const confirm = async () => {
+        setBusy(true);
+        try {
+            await onComplete(daysAgo === 0 ? new Date() : startOfDay(new Date(now.getTime() - daysAgo * DAY_MS)));
+            setOpen(false);
+        }
+        catch (failure) {
+            setError(failure instanceof Error ? failure.message : String(failure));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Tile, { label: label, ...(icon ? { icon } : {}), status: status, onPress: ask, secondary: _jsx(Typography, { as: "span", variant: "secondary", css: ({ colorByKey }) => ({ color: colorByKey(TONE[state]) }), children: taskLine(state, dueAt, now) }) }), _jsx(ConfirmDialog, { open: open, title: `Mark “${label}” as done?`, description: lastDoneAt ? `Last done ${short(lastDoneAt)}.` : undefined, confirmLabel: "Mark as done", busy: busy, onConfirm: () => void confirm(), onCancel: () => setOpen(false), children: _jsxs(Flex, { direction: "column", gap: 2, children: [_jsx(DayStepper, { label: "Done on", daysAgo: daysAgo, now: now, onChange: setDaysAgo }), error ? (_jsx(Typography, { as: "span", variant: "secondary", color: "danger", role: "alert", children: error })) : null] }) })] }));
+}
+/** A day chosen by stepping back from today one at a time, which is what is wanted for a task that was done a day or two ago and is quicker, and far smaller, than a calendar. It cannot go past today. */
+function DayStepper({ label, daysAgo, now, onChange, }) {
+    const day = new Date(now.getTime() - daysAgo * DAY_MS);
+    const words = daysAgo === 0
+        ? 'Today'
+        : daysAgo === 1
+            ? 'Yesterday'
+            : day.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' });
+    return (_jsxs(Flex, { align: "center", justify: "space-between", gap: 3, role: "group", "aria-label": label, children: [_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: label }), _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(IconButton, { icon: "lu:chevron-left", label: "Previous day", glyph: 16, onClick: () => onChange(daysAgo + 1) }), _jsx(Typography, { as: "span", variant: "bodyStrong", css: { minWidth: 96, textAlign: 'center' }, children: words }), _jsx(IconButton, { icon: "lu:chevron-right", label: "Next day", glyph: 16, disabled: daysAgo === 0, onClick: () => onChange(daysAgo - 1) })] })] }));
+}

package/dist/layout/use-idle-return.d.ts

@@ -0,0 +1,22 @@
+/** The app-wide time a display is left alone before it goes back to a dashboard's main page, set by
+ * `HashsomeProvider`'s `idleReturn`. `false`: it does not. */
+export declare const IdleReturnContext: import("react").Context<number | false>;
+/** Whether it is time to go back: nothing has been touched for `after`. */
+export declare function shouldLeave(now: number, lastTouched: number, after: number): boolean;
+/** The app's own setting for how long a display is left alone before it goes back to a main page: what
+ * `HashsomeProvider`'s `idleReturn` says, `false` when it says nothing. */
+export declare function useIdleReturnDefault(): number | false;
+/**
+ * Takes a wall display back to `to` (a dashboard's main page) once nobody has touched it for `after` ms,
+ * so that a page opened for a while (a music page, say) does not stay up for hours. Any touch, click, key
+ * or scroll anywhere starts the time again; it is counted from arriving on a page that is not `to`, and
+ * on `to` itself nothing happens. The page it leaves replaces itself in the history, so the back button does
+ * not return to it. `false` (or no time) turns it off.
+ *
+ * `NavRail` and `NavDock` do this for the dashboard they are in (see their `idleReturn`); use the hook
+ * directly for a dashboard that builds its own navigation.
+ */
+export declare function useIdleReturn({ to, after }: {
+    to: string;
+    after: number | false | undefined;
+}): void;

package/dist/layout/use-idle-return.js

@@ -0,0 +1,66 @@
+import { createContext, useContext, useEffect, useRef } from 'react';
+import { useLocation, useNavigate } from 'react-router';
+/** The app-wide time a display is left alone before it goes back to a dashboard's main page, set by
+ * `HashsomeProvider`'s `idleReturn`. `false`: it does not. */
+export const IdleReturnContext = createContext(false);
+/** How often the page checks whether it has been left alone long enough, at most. */
+const CHECK_MS = 10_000;
+/** What counts as someone being there: a touch or a click, a key, a scroll or a wheel anywhere on the page. */
+const INTERACTIONS = [
+    'pointerdown',
+    'pointermove',
+    'keydown',
+    'wheel',
+    'touchstart',
+    'scroll',
+];
+/** Whether it is time to go back: nothing has been touched for `after`. */
+export function shouldLeave(now, lastTouched, after) {
+    return now - lastTouched >= after;
+}
+/** The app's own setting for how long a display is left alone before it goes back to a main page: what
+ * `HashsomeProvider`'s `idleReturn` says, `false` when it says nothing. */
+export function useIdleReturnDefault() {
+    return useContext(IdleReturnContext);
+}
+/**
+ * Takes a wall display back to `to` (a dashboard's main page) once nobody has touched it for `after` ms,
+ * so that a page opened for a while (a music page, say) does not stay up for hours. Any touch, click, key
+ * or scroll anywhere starts the time again; it is counted from arriving on a page that is not `to`, and
+ * on `to` itself nothing happens. The page it leaves replaces itself in the history, so the back button does
+ * not return to it. `false` (or no time) turns it off.
+ *
+ * `NavRail` and `NavDock` do this for the dashboard they are in (see their `idleReturn`); use the hook
+ * directly for a dashboard that builds its own navigation.
+ */
+export function useIdleReturn({ to, after }) {
+    const navigate = useNavigate();
+    const { pathname } = useLocation();
+    // Set when the time starts, in the effect below.
+    const lastTouched = useRef(0);
+    const enabled = typeof after === 'number' && after > 0;
+    const away = pathname.replace(/\/$/, '') !== to.replace(/\/$/, '');
+    useEffect(() => {
+        if (!enabled || !away) {
+            return;
+        }
+        lastTouched.current = Date.now();
+        const touched = () => {
+            lastTouched.current = Date.now();
+        };
+        for (const name of INTERACTIONS) {
+            window.addEventListener(name, touched, { passive: true, capture: true });
+        }
+        const check = setInterval(() => {
+            if (shouldLeave(Date.now(), lastTouched.current, after)) {
+                navigate(to, { replace: true });
+            }
+        }, Math.min(CHECK_MS, after / 2));
+        return () => {
+            for (const name of INTERACTIONS) {
+                window.removeEventListener(name, touched, { capture: true });
+            }
+            clearInterval(check);
+        };
+    }, [enabled, away, after, to, navigate]);
+}

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

@@ -0,0 +1,7 @@
+/** Whether something that plays for a fixed time is playing. `start` begins it, and it is over `ms`
+ * later whatever else happens; starting it while it plays does nothing, so a press cannot be repeated until
+ * the animation it set off is over. */
+export declare function useTimed(ms: number): {
+    active: boolean;
+    start: () => boolean;
+};

package/dist/layout/use-timed.js

@@ -0,0 +1,22 @@
+import { useEffect, useRef, useState } from 'react';
+/** Whether something that plays for a fixed time is playing. `start` begins it, and it is over `ms`
+ * later whatever else happens; starting it while it plays does nothing, so a press cannot be repeated until
+ * the animation it set off is over. */
+export function useTimed(ms) {
+    const [active, setActive] = useState(false);
+    const timer = useRef(undefined);
+    // Cleared with the component: a timer left running would set state on what is gone.
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const start = () => {
+        if (timer.current !== undefined) {
+            return false;
+        }
+        setActive(true);
+        timer.current = setTimeout(() => {
+            timer.current = undefined;
+            setActive(false);
+        }, ms);
+        return true;
+    };
+    return { active, start };
+}

package/dist/provider.d.ts

@@ -29,6 +29,8 @@ export interface HashsomeProviderProps {
     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;
+    /** How long, in ms, a display is left alone on a dashboard's page other than its main one before it goes back to the main page, so a wall display does not stay on the music page for hours. Any touch, click, key or scroll starts the time again, and the main page itself is left alone. It is done by the dashboard's `NavRail` or `NavDock`, which can set their own `idleReturn` (a time, or `false`) over this. Default `false`: off. */
+    idleReturn?: number | false;
     /** The app. */
     children: ReactNode;
 }
@@ -44,5 +46,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, motion, font, density, overrides, debug, sun, children, }: HashsomeProviderProps): import("react").JSX.Element;
+export declare function HashsomeProvider({ url, client, clientOptions, theme, motion, font, density, overrides, debug, sun, idleReturn, children, }: HashsomeProviderProps): import("react").JSX.Element;
 export declare function useClient(): Client;

package/dist/provider.js

@@ -8,6 +8,7 @@ import { DebugContext, debugFromEnv, useDebugState, useFullscreenKept, } from '.
 import { DebugMenu } from './layout/debug-menu.js';
 import { DetailProvider } from './layout/detail-provider.js';
 import { EntityDrawer } from './layout/entity-drawer.js';
+import { IdleReturnContext } from './layout/use-idle-return.js';
 import { UNITS_PER_SPACE } from './theme/density.js';
 import { globalStyles } from './theme/global-styles.js';
 import { applyThemeOverrides, densityTokens } from './theme/overrides.js';
@@ -195,7 +196,7 @@ function useThemeMode(mode, client) {
     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', motion = 'auto', font = DEFAULT_FONT, density = 'comfortable', overrides, debug = debugFromEnv(), sun, children, }) {
+export function HashsomeProvider({ url, client, clientOptions, theme = 'dark', motion = 'auto', font = DEFAULT_FONT, density = 'comfortable', overrides, debug = debugFromEnv(), sun, idleReturn = false, children, }) {
     const instance = useMemo(() => client ?? new RemoteClient({ url: url ?? defaultUrl(), ...clientOptions }), [client, url, clientOptions]);
     useMotionMode(motion);
     const debugState = useDebugState();
@@ -215,7 +216,7 @@ export function HashsomeProvider({ url, client, clientOptions, theme = 'dark', m
         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 }), _jsx(DebugContext.Provider, { value: debugState, children: _jsxs(DetailProvider, { children: [children, _jsx(EntityDrawer, {}), debug ? _jsx(DebugMenu, { configured: theme, sun: sunEntity }) : null] }) })] }) }) }) }));
+    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: _jsx(IdleReturnContext.Provider, { value: idleReturn, 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/grid.d.ts

@@ -28,3 +28,6 @@ export declare function centeringOffsets(available: number, module: number): {
     top: number;
     bottom: number;
 };
+/** The width of the page navigation rail (`NavRail`), whose icons are centered in it. Things that sit at the
+ * left edge of the screen over a dashboard (the debug button) are centered on the same line. */
+export declare const NAV_RAIL = 76;

package/dist/theme/grid.js

@@ -36,3 +36,6 @@ export function centeringOffsets(available, module) {
     const top = Math.floor(leftover / 2);
     return { top, bottom: leftover - top };
 }
+/** The width of the page navigation rail (`NavRail`), whose icons are centered in it. Things that sit at the
+ * left edge of the screen over a dashboard (the debug button) are centered on the same line. */
+export const NAV_RAIL = 76;

package/dist/theme/index.js

@@ -35,6 +35,7 @@ const shared = {
         scrim: 20,
         drawer: 21,
         popover: 30,
+        modal: 40,
     },
     shadow: {
         drawer: '0 20px 48px rgba(0, 0, 0, 0.5)',
@@ -81,6 +82,7 @@ export const darkTheme = {
         onAccent: '#1B1B1F',
         warm: '#E3B341',
         danger: '#F2554A',
+        success: '#34D399',
         line: '#726C6A',
         rail: '#141216',
         border: 'rgba(255, 255, 255, 0.09)',
@@ -100,6 +102,7 @@ export const lightTheme = {
         onAccent: '#1B1B1F',
         warm: '#E3B341',
         danger: '#F2554A',
+        success: '#34D399',
         line: '#4A4540',
         rail: '#EAE4DA',
         border: 'rgba(0, 0, 0, 0.08)',

package/dist/theme/tokens.d.ts

@@ -20,6 +20,8 @@ declare module 'e-prim' {
         onAccent: string;
         warm: string;
         danger: string;
+        /** Something fine or connected (a status dot, a healthy link). */
+        success: string;
         line: string;
         /** The left nav rail / bottom nav dock's background — a third near-black, distinct from
          * `bg`/`surface`. */
@@ -54,6 +56,8 @@ declare module 'e-prim' {
         dropdown: number;
         /** A floating panel anchored to a control (the date picker's calendar), above what it sits in. */
         popover: number;
+        /** A dialog (`ConfirmDialog`) and the scrim behind it, over everything else on the page. */
+        modal: number;
     }
     interface TTypography {
         /** A tile's own name (`Tile`'s label). */

package/package.json

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