@hashsome/ui 0.7.0 → 0.8.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,13 @@
+/** 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 }: {
+    label?: string;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/spinner.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { keyframes } from '@emotion/react';
+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' }) {
+    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" }) }) }));
+}

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