@hashsome/ui 0.7.0 → 0.9.0

package/dist/layout/drawer-controls.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { Box, Flex, Typography } from 'e-prim';
-import { motion } from 'motion/react';
+import { animate, motion } from 'motion/react';
 import { MarqueeText } from './marquee-text.js';
 import { useEffect, useId, useRef, } from 'react';
 import { Icon } from '../icon.js';
-import { FadeScroll } from './fade-scroll.js';
+import { FADE, FadeScroll } from './fade-scroll.js';
 import { RoundButton } from './round-button.js';
 /** Fine adjustment: a press nudges by `delta` (1%); holding repeats in steps of 10 until released. */
 export function StepButton({ icon, label, delta, holdDelta = delta * 10, onStep, disabled, size = 36, }) {
@@ -104,6 +104,49 @@ export function ChipRow({ options, value, onChange, tabs = false, }) {
     // The accent behind the selected chip is one pill that glides to the next; its own id, so two rows
     // on a page do not share it.
     const pill = useId();
+    // The selected tab is brought into view when it is not (it is a long name that has just opened, or a
+    // tab part way out of the row), by scrolling the row so it is at its start.
+    const marker = useRef(null);
+    const selectedLabel = options.find((option) => option.value === value)?.label;
+    useEffect(() => {
+        const chip = marker.current?.parentElement;
+        const scroller = chip?.parentElement;
+        if (!tabs || !chip || !scroller) {
+            return;
+        }
+        let scroll;
+        const reveal = () => {
+            const at = chip.getBoundingClientRect();
+            const row = scroller.getBoundingClientRect();
+            // Out of view includes under the fade at an edge that has more beyond it, which hides it nearly as much.
+            const inLeft = row.left + (scroller.scrollLeft > 1 ? FADE : 0);
+            const more = scroller.scrollLeft + scroller.clientWidth < scroller.scrollWidth - 1;
+            const inRight = row.right - (more ? FADE : 0);
+            if (at.left >= inLeft && at.right <= inRight) {
+                return;
+            }
+            scroll?.stop();
+            const from = scroller.scrollLeft;
+            // To the start of the row, clear of the fade there (a position before the start is the start).
+            scroll = animate(from, from + (at.left - row.left) - FADE, {
+                duration: 0.35,
+                ease: 'easeOut',
+                onUpdate: (to) => {
+                    scroller.scrollLeft = to;
+                },
+            });
+        };
+        reveal();
+        // The row can get narrower after the tab is selected (the actions of what opened come in beside it).
+        const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(reveal);
+        resize?.observe(scroller);
+        return () => {
+            scroll?.stop();
+            resize?.disconnect();
+        };
+        // `selectedLabel` is not read inside: a new name for the selected tab is its length changing, which is a reason to look again.
+        // oxlint-disable-next-line react/exhaustive-effect-dependencies
+    }, [tabs, value, selectedLabel]);
     // Tabs scroll sideways when there are more than fit, and fade at the edge that has more.
     const Wrap = tabs ? FadeScroll : Flex;
     return (_jsx(Wrap, { gap: 2, ...(tabs ? { role: 'tablist' } : {}), css: tabs
@@ -123,7 +166,7 @@ export function ChipRow({ options, value, onChange, tabs = false, }) {
                     position: 'relative',
                     whiteSpace: 'nowrap',
                     transition: 'color 160ms ease',
-                }, children: [selected ? (_jsx(Box, { as: motion.span, layoutId: pill, position: "absolute", radius: "full", background: "accent", transition: { type: 'spring', duration: 0.32, bounce: 0.12 }, 
+                }, children: [selected ? _jsx("span", { ref: marker, hidden: true }) : null, selected ? (_jsx(Box, { as: motion.span, layoutId: pill, position: "absolute", radius: "full", background: "accent", transition: { type: 'spring', duration: 0.32, bounce: 0.12 }, 
                         // Above every chip's own background, whichever way it is going: a later chip paints over
                         // an earlier one's pill otherwise.
                         css: { inset: 0, zIndex: 1 } })) : null, _jsxs(Flex, { as: "span", align: "center", gap: 1.5, position: "relative", minWidth: 0, css: { zIndex: 2 }, children: [option.icon ? _jsx(Icon, { name: option.icon, size: 14 }) : null, _jsx(Typography, { as: "span", variant: "body", css: { minWidth: 0, maxWidth: 220 }, children: _jsx(MarqueeText, { children: option.label }) })] })] }, option.value));

package/dist/layout/fade-scroll.d.ts

@@ -2,6 +2,8 @@
 import type { Interpolation, Theme } from '@emotion/react';
 import { type FlexProps } from 'e-prim';
 import { type ElementType } from 'react';
+/** How wide the fade at a scrolled edge is. */
+export declare const FADE = 40;
 /**
  * A row that scrolls sideways and fades out at an edge that has more content beyond it, so it
  * reads as scrollable: the right edge while there is more to the right, the left once scrolled.

package/dist/layout/fade-scroll.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Flex } from 'e-prim';
 import { useCallback, useEffect, useRef, useState } from 'react';
 /** How wide the fade at a scrolled edge is. */
-const FADE = 40;
+export const FADE = 40;
 const maskFor = (start, end) => `linear-gradient(to right, ${start ? 'transparent' : '#000'} 0, #000 ${start ? FADE : 0}px, #000 calc(100% - ${end ? FADE : 0}px), ${end ? 'transparent' : '#000'} 100%)`;
 /**
  * A row that scrolls sideways and fades out at an edge that has more content beyond it, so it

package/dist/layout/icon-button-styles.js

@@ -16,7 +16,9 @@ export const iconButtonStyles = ({ palette, radius }) => ({
     transition: 'background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease',
     '&:disabled': { cursor: 'default', opacity: 0.5 },
     "&[data-active='true']": { color: palette.warm },
-    "&[data-feedback='pending']": { opacity: 0.6 },
+    // Waiting: the ring turning around the edge says so, so the button stays as clear as it was.
+    "&[data-feedback='pending']": { position: 'relative', cursor: 'progress' },
+    "&:disabled[data-feedback='pending']": { cursor: 'progress', opacity: 1 },
     "&[data-feedback='done']": { background: palette.accent, color: palette.accentText },
     "&[data-feedback='error']": { color: palette.danger },
     "&[data-primary='true']": { background: palette.accent, color: palette.accentText },

package/dist/layout/spinner.d.ts

@@ -0,0 +1,16 @@
+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. */
+export declare function Spinner({ size, label }: {
+    size?: number;
+    label?: string;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+/** 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, 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

@@ -0,0 +1,23 @@
+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
+ * 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. */
+export function Spinner({ size = 16, label = 'Loading' }) {
+    return (_jsx("span", { role: "status", "aria-label": label, "data-keep-motion": true, css: {
+            display: 'inline-grid',
+            placeItems: 'center',
+            flex: 'none',
+            animation: `${turn} 0.9s linear infinite`,
+        }, children: _jsx(Icon, { name: "lu:loader-circle", size: size }) }));
+}
+/** 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', 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/tile.d.ts

@@ -70,6 +70,6 @@ export declare function IconButton({ icon, label, onClick, disabled, active, pre
     color?: string;
     /** For a toggle: whether it is on, announced to assistive tech (`aria-pressed`). Pair it with `active` to color it. */
     pressed?: boolean;
-    /** Shows the outcome of an action the press started: `pending` dims it, `done` flashes it with the accent, `error` turns it red. Every press also gives a small squeeze. */
+    /** Shows the outcome of an action the press started: `pending` turns a ring around it and stops it taking another press, `done` flashes it with the accent, `error` turns it red. Every press also gives a small squeeze. */
     feedback?: 'pending' | 'done' | 'error' | undefined;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/tile.js

@@ -4,6 +4,7 @@ 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 { SpinnerRing } from './spinner.js';
 import { statusLabels } from '../status.js';
 import { BADGE } from '../theme/grid.js';
 import { useDrawer } from './use-drawer.js';
@@ -211,5 +212,6 @@ export function Tile({ label, icon, secondary, status = 'ready', active = false,
                 }, 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) }) }));
+    const ring = feedback === 'pending';
+    return (_jsxs(RoundButton, { as: motion.button, ...(size !== undefined ? { size: size * 2 } : {}), ...(color ? { css: { '&&&': { color } } } : {}), whileTap: disabled || feedback === 'pending' ? {} : { scale: 0.88 }, transition: { duration: 0.12 }, "data-feedback": feedback, "aria-label": label, title: label, disabled: disabled || feedback === 'pending', "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) }), ring ? _jsx(SpinnerRing, {}) : null] }));
 }

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/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/dist/use-media-queue.js

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useEntity, useReconnects } from './hooks.js';
+import { useMediaPending } from './entities/media-pending.js';
 import { useClient } from './provider.js';
 /** How often the queue is read again while it is on screen, to pick up what another app changed. */
 const POLL_MS = 15_000;
@@ -19,6 +20,8 @@ export function useMediaQueue(ref) {
     // What changes when the queue's window does: the track playing and the order it plays in.
     const track = player?.kind === 'mediaPlayer' ? player.media?.title : undefined;
     const shuffle = player?.kind === 'mediaPlayer' ? player.shuffle : undefined;
+    // Something added to or played from the library changes the queue without changing the track.
+    const asked = useMediaPending(ref).length;
     const has = player?.kind === 'mediaPlayer' && player.capabilities.queue;
     useEffect(() => {
         if (!ref || !has) {
@@ -32,9 +35,9 @@ export function useMediaQueue(ref) {
             current = false;
             clearInterval(timer);
         };
-        // `track`, `shuffle`, `tick` and `reconnects` are not read inside: a change to any of them is the reason to read again.
+        // `track`, `shuffle`, `tick`, `reconnects` and `asked` are not read inside: a change to any of them is the reason to read again.
         // oxlint-disable-next-line react/exhaustive-effect-dependencies
-    }, [client, ref, has, track, shuffle, tick, reconnects]);
+    }, [client, ref, has, track, shuffle, tick, reconnects, asked]);
     const answered = state !== undefined && state.ref === ref;
     return {
         queue: answered ? state.queue : undefined,

package/package.json

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