@hashsome/ui 0.3.0 → 0.5.0

package/dist/entities/artwork-ring.js

@@ -96,6 +96,17 @@ export function ArtworkRing({ artworkUrl, seek, duration, seekable, onOpen, size
                                 }
                             }
                         },
+                        // A touch the browser took or lost never ends with a release: let go of the position.
+                        onPointerCancel: () => {
+                            drag.current = null;
+                            seek.cancel();
+                        },
+                        onLostPointerCapture: () => {
+                            if (drag.current) {
+                                drag.current = null;
+                                seek.cancel();
+                            }
+                        },
                     }
                     : {}), css: { inset: 0, touchAction: 'none' }, children: _jsxs("svg", { viewBox: "0 0 100 100", width: SIZE, height: SIZE, "aria-hidden": "true", children: [_jsx("circle", { cx: "50", cy: "50", r: "47", fill: "none", strokeWidth: "3", css: ({ palette }) => ({ stroke: palette.border }) }), fraction !== undefined ? (_jsx("circle", { cx: "50", cy: "50", r: "47", fill: "none", strokeWidth: "3", strokeLinecap: "round", pathLength: 100, strokeDasharray: `${fraction * 100} 100`, transform: "rotate(-90 50 50)", css: ({ palette }) => ({ stroke: palette.accent }) })) : null] }) }), _jsx(Box, { position: "absolute", radius: "full", border: true, css: { inset: '9%' } }), _jsx(Flex, { center: true, position: "absolute", radius: "full", overflow: "hidden", background: "surfaceRaised", color: "textMuted", cursor: onOpen ? 'pointer' : 'inherit', css: { inset: '14%' }, ...(onOpen
                     ? {

package/dist/entities/light-tile.d.ts

@@ -19,6 +19,8 @@ export interface LightTileProps {
     history?: LogbookEntry[];
     /** Swatches shown when the palette button is opened. Default: four white temperatures. Each takes `kelvin` (color-temp lights) and/or `hs` (color lights) and is skipped if the light can't apply it. */
     colors?: LightColorPreset[];
+    /** Holding the tile opens a drawer with the full controls, the color bars, the energy chart and the recent activity. `false` leaves the tile as it is without it: a toggle that dims by dragging, with the color swatches if the light has color, and no drawer built, which is lighter on a small display. Default `true`. */
+    drawer?: boolean;
 }
 /** Toggle, drag-to-dim (if dimmable) and a color overlay + drawer picker (if color capable). */
-export declare function LightTile({ entity, name, icon, energy, history, colors, }: LightTileProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function LightTile({ entity, name, icon, energy, history, colors, drawer, }: LightTileProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/entities/light-tile.js

@@ -14,7 +14,7 @@ const kelvinGradient = (min, max) => `linear-gradient(to right, ${[0, 0.25, 0.5,
     .map((f) => rgbCss(kelvinToRgb(min + f * (max - min))))
     .join(', ')})`;
 /** Toggle, drag-to-dim (if dimmable) and a color overlay + drawer picker (if color capable). */
-export function LightTile({ entity, name, icon, energy, history, colors = DEFAULT_COLOR_PRESETS, }) {
+export function LightTile({ entity, name, icon, energy, history, colors = DEFAULT_COLOR_PRESETS, drawer = true, }) {
     const handle = useEntityHandle('light', entity);
     const [picking, setPicking] = useState(false);
     const [colorOpen, setColorOpen] = useState(false);
@@ -36,20 +36,24 @@ export function LightTile({ entity, name, icon, energy, history, colors = DEFAUL
         return data ? [{ preset, data }] : [];
     });
     const showPicker = color && status === 'ready';
-    return (_jsx(Tile, { label: name ?? light?.name ?? fallbackName(entity), icon: icon ?? (on ? 'lu:lightbulb' : 'lu:lightbulb-off'), kind: "Light", status: status, active: on, secondary: on ? (dimmable && percent !== undefined ? `${percent}%` : undefined) : 'Off', onPress: () => void handle.command('toggle'), detail: _jsx(LightDetailBody, { on: on, percent: dimmable ? percent : undefined, onToggle: () => void handle.command('toggle'), ...(dimmable
-                ? {
-                    onBrightness: (next) => void handle.command('setBrightness', { brightness: next / 100 }),
-                }
-                : {}), colorSection: showPicker ? (_jsx(LightColorSection, { light: light, open: colorOpen, onToggle: () => setColorOpen((open) => !open), supportsTemp: supportsTemp, supportsHs: supportsHs, onKelvin: (kelvin) => void handle.command('setColorTemperature', { kelvin }), onHue: (hue) => void handle.command('setColor', {
-                    hue,
-                    saturation: currentHs(light)[1] || 100,
-                }), onPicked: (hex) => {
-                    const picked = hexToRgb(hex);
-                    if (picked) {
-                        const [hue, saturation] = rgbToHs(picked);
-                        void handle.command('setColor', { hue, saturation });
-                    }
-                } })) : null }), ...(energy ? { energy } : {}), ...(history ? { history } : {}), ...(typeof entity === 'string' ? { logbook: entity } : {}), ...(dimmable
+    return (_jsx(Tile, { label: name ?? light?.name ?? fallbackName(entity), icon: icon ?? (on ? 'lu:lightbulb' : 'lu:lightbulb-off'), kind: "Light", status: status, active: on, secondary: on ? (dimmable && percent !== undefined ? `${percent}%` : undefined) : 'Off', onPress: () => void handle.command('toggle'), ...(drawer
+            ? {
+                detail: (_jsx(LightDetailBody, { on: on, percent: dimmable ? percent : undefined, onToggle: () => void handle.command('toggle'), ...(dimmable
+                        ? {
+                            onBrightness: (next) => void handle.command('setBrightness', { brightness: next / 100 }),
+                        }
+                        : {}), colorSection: showPicker ? (_jsx(LightColorSection, { light: light, open: colorOpen, onToggle: () => setColorOpen((open) => !open), supportsTemp: supportsTemp, supportsHs: supportsHs, onKelvin: (kelvin) => void handle.command('setColorTemperature', { kelvin }), onHue: (hue) => void handle.command('setColor', {
+                            hue,
+                            saturation: currentHs(light)[1] || 100,
+                        }), onPicked: (hex) => {
+                            const picked = hexToRgb(hex);
+                            if (picked) {
+                                const [hue, saturation] = rgbToHs(picked);
+                                void handle.command('setColor', { hue, saturation });
+                            }
+                        } })) : null })),
+            }
+            : {}), ...(drawer && energy ? { energy } : {}), ...(drawer && history ? { history } : {}), ...(drawer && typeof entity === 'string' ? { logbook: entity } : {}), ...(dimmable
             ? {
                 fill: on ? (brightness ?? 1) : 0,
                 onFillChange: (fill) => void handle.command('setBrightness', { brightness: fill }),
@@ -69,11 +73,16 @@ export function LightTile({ entity, name, icon, energy, history, colors = DEFAUL
                                 : handle.command('setColor', data.args));
                             setPicking(false);
                         },
-                    })), customLabel: "Custom color", onCustom: () => {
-                        setPicking(false);
-                        setColorOpen(true);
-                        openDetail();
-                    } })),
+                    })), ...(drawer
+                        ? {
+                            customLabel: 'Custom color',
+                            onCustom: () => {
+                                setPicking(false);
+                                setColorOpen(true);
+                                openDetail();
+                            },
+                        }
+                        : {}) })),
             }
             : {}), trailing: showPicker ? (_jsx(IconButton, { icon: picking ? 'lu:x' : 'lu:palette', label: picking ? 'Close colors' : 'Color', active: false, onClick: () => setPicking((open) => !open), size: 16, ...(on && paletteColor && !picking ? { color: paletteColor } : {}) })) : null }));
 }

package/dist/entities/media-player-bar.d.ts

@@ -9,6 +9,14 @@ export interface MediaPlayerBarProps {
     name?: string;
     /** Content for the media browser shown with the player in the drawer. Holding the card or pressing the artwork opens the drawer; the browse button opens it expanded. By default a `MediaBrowser` over the player's own library, shown only for a ref whose player has one; pass your own content to replace it, or `false` for no browse button. */
     browse?: ReactNode | false;
+    /** `false` builds no drawer: holding the card, pressing the artwork and the browse button then do nothing, which is lighter on a small display. Default `true`. See `onOpen` to send them somewhere else instead. */
+    drawer?: boolean;
+    /** Called instead of opening the drawer when the card is held, the artwork pressed or the browse button pressed: for a dashboard with a page of its own for the player (a `MediaPlayerFull`), `onOpen={() => navigate('/bathroom/music')}`. Given, no drawer is built. The browse button stays unless `browse` is `false`. */
+    onOpen?: () => void;
+    /** The library and the queue each open as a full-size overlay of their own, from the browse button and a new queue button, instead of one drawer with the whole player in it: for a small display, where the card itself is the player. The library overlay is a `MediaBrowser` as a list (or your `browse` content), the queue overlay a `MediaQueue`; each button is left out when the player has none, or for `browse={false}`. Holding the card and pressing the artwork then do nothing, unless `onOpen` is given. Default `false`. */
+    overlays?: boolean;
+    /** `1` puts the controls beside the track, in one pill; `2` puts them on a second row under it, for a narrow space (a small wall display). Default `'auto'`: one row, and two once the bar is narrower than 560 px wide. */
+    rows?: 1 | 2 | 'auto';
 }
 /** Now playing with previous / play-pause / next and a volume control, for a media player entity. */
-export declare function MediaPlayerBar({ entity, name, browse }: MediaPlayerBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MediaPlayerBar({ entity, name, browse, drawer, onOpen, overlays, rows, }: MediaPlayerBarProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/entities/media-player-bar.js

@@ -20,12 +20,15 @@ import { MediaQueue } from './media-queue.js';
 import { formatDuration, useMediaPosition } from './media-progress.js';
 import { useSeekHold } from './media-seek.js';
 import { SeekLine } from './seek-line.js';
+/** Narrower than this, a bar with `rows="auto"` is two rows. */
+const TWO_ROWS_BELOW = 560;
 /** Glyph size inside the player's 44px circles — smaller than an icon's default so there is breathing room around it. */
 const MEDIA_GLYPH = 18;
 /** The ring around the artwork (the size of an icon circle): a button when there is somewhere to
- * go, otherwise just the ring. */
-function Ring({ onOpen, children }) {
-    return (_jsx(Flex, { ...(onOpen
+ * go, otherwise just the ring. `fraction` (0 to 1) fills it with how far along playback is, from the
+ * top, like the large player's ring. */
+function Ring({ onOpen, fraction, children, }) {
+    return (_jsxs(Flex, { ...(onOpen
             ? {
                 as: 'button',
                 type: 'button',
@@ -34,23 +37,102 @@ function Ring({ onOpen, children }) {
                 onClick: onOpen,
                 cursor: 'pointer',
             }
-            : { as: 'span' }), center: true, position: "relative", p: 0, border: true, radius: "full", css: ({ density }) => ({
+            : { as: 'span' }), "data-part": "ring", center: true, position: "relative", p: 0, radius: "full", css: ({ density }) => ({
             width: density.iconCircle,
             height: density.iconCircle,
             flex: 'none',
             background: 'none',
-        }), children: children }));
+        }), children: [_jsxs("svg", { viewBox: "0 0 100 100", "aria-hidden": "true", css: {
+                    position: 'absolute',
+                    inset: 0,
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'none',
+                }, children: [_jsx("circle", { cx: "50", cy: "50", r: "47.5", fill: "none", strokeWidth: "4", css: ({ palette }) => ({ stroke: palette.border }) }), fraction !== undefined ? (_jsx("circle", { "data-part": "progress", cx: "50", cy: "50", r: "47.5", fill: "none", strokeWidth: "4", strokeLinecap: "round", pathLength: 100, strokeDasharray: `${fraction * 100} 100`, transform: "rotate(-90 50 50)", css: ({ palette }) => ({ stroke: palette.accent }) })) : null] }), children] }));
 }
 /** The same spring the swatch rows pop in with, so the volume overlay opens like they do. */
 const VOLUME_SPRING = { type: 'spring', stiffness: 520, damping: 26 };
+/** What the pill is like in two rows: the artwork, "title · artist" and the time on top; under them
+ * the buttons share the whole width, all of one size, and while the volume slider is open it has the
+ * row to itself, with only the button that closes it. The bar is as tall as two regular tiles and
+ * the gap between them (a tile is its icon circle and a spacing unit), so it sits in a grid of
+ * tiles. A line break between the rows comes from an empty item that fills a line of its own. */
+const stacked = ({ radius, spacing, density, }) => ({
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    alignContent: 'center',
+    columnGap: spacing(2.5),
+    rowGap: 0,
+    minHeight: 2 * (density.iconCircle + density.space / 3) + density.space,
+    paddingTop: spacing(2.5),
+    paddingBottom: spacing(2.5),
+    borderRadius: radius.card,
+    '&::before': { content: '""', order: 1, flexBasis: '100%', height: 0 },
+    '& > [data-part="track"]': {
+        flex: '1 1 0',
+        minWidth: 0,
+        flexDirection: 'row',
+        alignItems: 'baseline',
+        gap: spacing(1.5),
+        // The title and the artist share the line and shorten, with an ellipsis, before they run into
+        // the time; the artist follows the title after a dot.
+        '& > :nth-child(1)': {
+            flex: '0 1 auto',
+            minWidth: 0,
+            // The title is what gives way, not the shuffle button beside it.
+            '& > :first-child': { minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' },
+        },
+        '& > :nth-child(2)': {
+            flex: '0 1 auto',
+            minWidth: 0,
+            overflow: 'hidden',
+            '&::before': { content: '"·"', marginRight: spacing(1.5) },
+        },
+    },
+    '& [data-part="tools"], & [data-part="transport"]': { display: 'contents' },
+    '& [data-part="tools"] > button, & [data-part="transport"] > button': {
+        order: 2,
+        flex: '1 1 0',
+        minWidth: 0,
+        width: 'auto',
+        height: 34,
+        marginTop: spacing(2.5),
+    },
+    '& [data-part="transport"] > button': { order: 4 },
+    '& > [data-part="volume"]': {
+        order: 3,
+        flex: '1 1 0',
+        minWidth: 0,
+        marginTop: spacing(2.5),
+    },
+    '&[data-volume-open="true"]': {
+        '& > [data-part="track"], & > [data-part="time"]': { display: 'flex' },
+        // The slider has the row: only the button that closes it stays, a circle beside it.
+        '& [data-part="tools"] > button:nth-of-type(n + 2), & [data-part="transport"] > button': {
+            display: 'none',
+        },
+        '& [data-part="tools"] > button:first-of-type': { flex: 'none', width: 34 },
+    },
+});
 /** The bar itself. Holding it (anywhere but on a button or slider) opens the drawer, with a thin
  * line along the top that fills while the press is timed, like a tile's. */
-function HoldCard({ open, status, children, }) {
+function HoldCard({ open, status, rows, volumeOpen, children, }) {
     const hold = useHold(() => open?.(), open !== undefined);
-    return (_jsxs(Flex, { position: "relative", align: "center", gap: 3, pl: 2.25, pr: 3, background: "surface", radius: "full", overflow: "hidden", "data-status": status, css: ({ density }) => ({ minHeight: density.tileHeight }), ...hold.handlers, children: [children, hold.holding ? _jsx(HoldProgress, {}) : null] }));
+    const card = (_jsxs(Flex, { position: "relative", align: "center", grow: 1, minWidth: 0, gap: 3, pl: 2.25, pr: 3, background: "surface", radius: "full", overflow: "hidden", "data-status": status, "data-rows": rows === 2 ? 2 : undefined, "data-volume-open": volumeOpen, css: (theme) => ({
+            minHeight: theme.density.tileHeight,
+            // In one row the volume slider takes the track's place; in two it has its own row.
+            '&[data-volume-open="true"] > [data-part="track"], &[data-volume-open="true"] > [data-part="time"]': { display: 'none' },
+            ...(rows === 2 ? stacked(theme) : {}),
+            ...(rows === 'auto'
+                ? { [`@container (max-width: ${TWO_ROWS_BELOW - 1}px)`]: stacked(theme) }
+                : {}),
+        }), ...hold.handlers, children: [children, hold.holding ? _jsx(HoldProgress, {}) : null] }));
+    // `auto` asks the width the bar is given, so its parent is the thing measured.
+    return rows === 'auto' ? (_jsx(Flex, { width: "100%", css: { containerType: 'inline-size' }, children: card })) : (card);
 }
 /** Now playing with previous / play-pause / next and a volume control, for a media player entity. */
-export function MediaPlayerBar({ entity, name, browse }) {
+export function MediaPlayerBar({ entity, name, browse, drawer = true, onOpen, overlays = false, rows = 'auto', }) {
     const handle = useEntityHandle('mediaPlayer', entity);
     const player = handle.entity;
     const status = handle.status;
@@ -66,14 +148,42 @@ export function MediaPlayerBar({ entity, name, browse }) {
     const seek = useSeekHold(ready ? position : undefined, caps?.seek ? (next) => void handle.command('seek', { position: next }) : undefined);
     const duration = ready ? player?.duration : undefined;
     const timed = seek.shown !== undefined && duration !== undefined && duration > 0;
+    // How far along playback is, for the ring round the artwork.
+    const progress = timed && duration !== undefined
+        ? Math.min(1, Math.max(0, (seek.shown ?? 0) / duration))
+        : undefined;
     const ref = typeof entity === 'string' ? entity : undefined;
     const browser = browse === false
         ? undefined
         : (browse ?? (ref && caps?.browse ? _jsx(MediaBrowser, { entity: ref, layout: "auto" }) : undefined));
-    const bar = (open, openExpanded) => (_jsxs(HoldCard, { open: open, status: status, children: [_jsx(Ring, { onOpen: open, children: artwork }), volumeOpen && ready ? (_jsxs(Flex, { as: motion.div, align: "center", gap: 2, grow: 1, minWidth: 0, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.15 }, children: [_jsx(PlainButton, { as: motion.button, initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: VOLUME_SPRING, "aria-label": muted ? 'Unmute' : 'Mute', "aria-pressed": muted, title: muted ? 'Unmute' : 'Mute', onClick: volume.toggleMute, center: true, color: muted ? 'accent' : 'textMuted', css: { flex: 'none' }, children: _jsx(Icon, { name: muted ? 'lu:volume-x' : 'lu:volume-2', size: 16 }) }), _jsx(Flex, { as: motion.div, grow: 1, minWidth: 0, initial: { scaleX: 0.4, opacity: 0 }, animate: { scaleX: 1, opacity: 1 }, transition: { ...VOLUME_SPRING, delay: 0.04 }, css: { transformOrigin: 'left center' }, children: _jsx(ValueBar, { label: "Volume level", value: volume.shown, min: 0, max: 100, keyStep: 5, height: 10, onDrag: volume.drag, onCommit: volume.commit }) }), _jsxs(Typography, { as: motion.span, variant: "secondary", color: "textMuted", minWidth: 32, align: "right", css: { flex: 'none' }, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, delay: 0.1 }, children: [volume.shown, "%"] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Flex, { direction: "column", grow: 1, minWidth: 0, ...(ready ? {} : { color: 'textMuted' }), children: [_jsxs(Flex, { align: "center", gap: 1.5, minWidth: 0, children: [_jsx(Typography, { as: "span", variant: "label", noWrap: true, textOverflow: "ellipsis", children: ready
-                                            ? (player?.media?.title ?? 'Nothing playing')
-                                            : statusLabels[status] }), ready && caps?.shuffle ? (_jsx(PlainButton, { "aria-label": "Shuffle", "aria-pressed": player?.shuffle === true, title: "Shuffle", onClick: () => void handle.command('setShuffle', { shuffle: player?.shuffle !== true }), center: true, color: player?.shuffle === true ? 'accent' : 'textMuted', css: { flex: 'none' }, children: _jsx(Icon, { name: "lu:shuffle", size: 14 }) })) : null] }), ready && player?.media?.artist ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", noWrap: true, textOverflow: "ellipsis", children: player.media.artist })) : null] }), timed ? (_jsxs(Typography, { as: "span", variant: "secondary", color: "textMuted", noWrap: true, css: { flex: 'none', fontVariantNumeric: 'tabular-nums' }, children: [formatDuration(seek.shown ?? 0), " / ", formatDuration(duration ?? 0)] })) : null] })), _jsx(IconButton, { icon: volumeOpen ? 'lu:x' : muted ? 'lu:volume-x' : 'lu:volume-2', label: volumeOpen ? 'Close volume' : 'Volume', glyph: MEDIA_GLYPH, disabled: !ready || (caps?.volume === false && caps.mute === false), onClick: () => setVolumeOpen((current) => !current) }), open && browser !== undefined ? (_jsx(IconButton, { icon: "lu:library", label: "Browse media", glyph: MEDIA_GLYPH, onClick: openExpanded ?? open })) : null, _jsx(IconButton, { icon: "lu:skip-back", label: "Previous", glyph: MEDIA_GLYPH, disabled: !ready || caps?.previous === false, feedback: feedbackFor('previous'), onClick: () => press('previous', () => handle.command('previous')) }), _jsx(IconButton, { icon: playing ? 'lu:pause' : 'lu:play', label: playing ? 'Pause' : 'Play', glyph: MEDIA_GLYPH, disabled: !ready, primary: true, onClick: () => void handle.command('togglePlay') }), _jsx(IconButton, { icon: "lu:skip-forward", label: "Next", glyph: MEDIA_GLYPH, disabled: !ready || caps?.next === false, feedback: feedbackFor('next'), onClick: () => press('next', () => handle.command('next')) }), timed ? (_jsx(SeekLine, { seek: seek, duration: duration ?? 0, seekable: caps?.seek === true })) : null] }));
+    // What the overlays hold, when the library and the queue open on their own (`overlays`).
+    const libraryBody = browse === false
+        ? undefined
+        : (browse ?? (ref && caps?.browse ? _jsx(MediaBrowser, { entity: ref, layout: "list" }) : undefined));
+    const queueBody = ref && caps?.queue === true ? _jsx(MediaQueue, { entity: ref }) : undefined;
+    const volumeSlider = (_jsxs(Flex, { as: motion.div, align: "center", gap: 2, grow: 1, minWidth: 0, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.15 }, "data-part": "volume", children: [_jsx(PlainButton, { as: motion.button, initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: VOLUME_SPRING, "aria-label": muted ? 'Unmute' : 'Mute', "aria-pressed": muted, title: muted ? 'Unmute' : 'Mute', onClick: volume.toggleMute, center: true, color: muted ? 'accent' : 'textMuted', css: { flex: 'none' }, children: _jsx(Icon, { name: muted ? 'lu:volume-x' : 'lu:volume-2', size: 16 }) }), _jsx(Flex, { as: motion.div, grow: 1, minWidth: 0, initial: { scaleX: 0.4, opacity: 0 }, animate: { scaleX: 1, opacity: 1 }, transition: { ...VOLUME_SPRING, delay: 0.04 }, css: { transformOrigin: 'left center' }, children: _jsx(ValueBar, { label: "Volume level", value: volume.shown, min: 0, max: 100, keyStep: 5, height: 10, onDrag: volume.drag, onCommit: volume.commit }) }), _jsxs(Typography, { as: motion.span, variant: "secondary", color: "textMuted", minWidth: 32, align: "right", css: { flex: 'none' }, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, delay: 0.1 }, children: [volume.shown, "%"] })] }));
+    const trackInfo = (_jsx(_Fragment, { children: _jsxs(Flex, { "data-part": "track", direction: "column", grow: 1, minWidth: 0, ...(ready ? {} : { color: 'textMuted' }), children: [_jsxs(Flex, { align: "center", gap: 1.5, minWidth: 0, children: [_jsx(Typography, { as: "span", variant: "label", noWrap: true, textOverflow: "ellipsis", children: ready
+                                ? (player?.media?.title ?? 'Nothing playing')
+                                : statusLabels[status] }), ready && caps?.shuffle ? (_jsx(PlainButton, { "aria-label": "Shuffle", "aria-pressed": player?.shuffle === true, title: "Shuffle", onClick: () => void handle.command('setShuffle', { shuffle: player?.shuffle !== true }), center: true, color: player?.shuffle === true ? 'accent' : 'textMuted', css: { flex: 'none' }, children: _jsx(Icon, { name: "lu:shuffle", size: 14 }) })) : null] }), ready && player?.media?.artist ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", noWrap: true, textOverflow: "ellipsis", children: player.media.artist })) : null] }) }));
+    const bar = (open, openExpanded, openQueue) => (_jsxs(HoldCard, { open: open, status: status, rows: rows, volumeOpen: volumeOpen && ready, children: [_jsx(Ring, { onOpen: open, fraction: progress, children: artwork }), trackInfo, timed ? (_jsxs(Typography, { as: "span", "data-part": "time", variant: "secondary", color: "textMuted", noWrap: true, css: { flex: 'none', fontVariantNumeric: 'tabular-nums' }, children: [formatDuration(seek.shown ?? 0), " / ", formatDuration(duration ?? 0)] })) : null, volumeOpen && ready ? volumeSlider : null, _jsxs(Flex, { "data-part": "tools", align: "center", gap: 3, css: { flex: 'none' }, children: [_jsx(IconButton, { icon: volumeOpen ? 'lu:x' : muted ? 'lu:volume-x' : 'lu:volume-2', label: volumeOpen ? 'Close volume' : 'Volume', glyph: MEDIA_GLYPH, disabled: !ready || (caps?.volume === false && caps.mute === false), onClick: () => setVolumeOpen((current) => !current) }), (overlays
+                        ? openExpanded !== undefined
+                        : open && (onOpen ? browse !== false : browser !== undefined)) ? (_jsx(IconButton, { icon: "lu:library", label: "Browse media", glyph: MEDIA_GLYPH, onClick: () => (openExpanded ?? open)?.() })) : null, openQueue ? (_jsx(IconButton, { icon: "lu:list-music", label: "Queue", glyph: MEDIA_GLYPH, onClick: openQueue })) : null] }), _jsxs(Flex, { "data-part": "transport", align: "center", gap: 3, css: { flex: 'none' }, children: [_jsx(IconButton, { icon: "lu:skip-back", label: "Previous", glyph: MEDIA_GLYPH, disabled: !ready || caps?.previous === false, feedback: feedbackFor('previous'), onClick: () => press('previous', () => handle.command('previous')) }), _jsx(IconButton, { icon: playing ? 'lu:pause' : 'lu:play', label: playing ? 'Pause' : 'Play', glyph: MEDIA_GLYPH, disabled: !ready, primary: true, onClick: () => void handle.command('togglePlay') }), _jsx(IconButton, { icon: "lu:skip-forward", label: "Next", glyph: MEDIA_GLYPH, disabled: !ready || caps?.next === false, feedback: feedbackFor('next'), onClick: () => press('next', () => handle.command('next')) })] }), timed ? (_jsx(SeekLine, { seek: seek, duration: duration ?? 0, seekable: caps?.seek === true })) : null] }));
     // Holding the card, the artwork and the browse button open the same drawer: the player laid out
     // like the vertical one, with the library below it.
-    return ready ? (_jsx(DrawerTrigger, { icon: "lu:music", label: name ?? player?.name ?? fallbackName(entity), kind: "Media", body: _jsx(MediaPlayerFull, { entity: entity, ...(name !== undefined ? { name } : {}), ...(browser !== undefined ? { browser } : {}), ...(typeof entity === 'string' ? { queue: _jsx(MediaQueue, { entity: entity }) } : {}) }), children: (open, openExpanded) => bar(open, openExpanded) })) : (bar());
+    if (!ready) {
+        return bar();
+    }
+    // The library and the queue are overlays of their own; the card is the player.
+    if (overlays) {
+        const title = name ?? player?.name ?? fallbackName(entity);
+        return (_jsx(DrawerTrigger, { icon: "lu:library", label: "Library", kind: title, body: libraryBody ?? null, children: (_open, _expanded, openLibrary) => (_jsx(DrawerTrigger, { icon: "lu:list-music", label: "Queue", kind: title, body: queueBody ?? null, children: (_openToo, _expandedToo, openQueue) => bar(onOpen, libraryBody ? openLibrary : undefined, queueBody ? openQueue : undefined) })) }));
+    }
+    // Held, pressed or browsed, the player goes where the dashboard says instead of opening a drawer.
+    if (onOpen) {
+        return bar(onOpen, onOpen);
+    }
+    if (!drawer) {
+        return bar();
+    }
+    return (_jsx(DrawerTrigger, { icon: "lu:music", label: name ?? player?.name ?? fallbackName(entity), kind: "Media", body: _jsx(MediaPlayerFull, { entity: entity, ...(name !== undefined ? { name } : {}), ...(browser !== undefined ? { browser } : {}), ...(typeof entity === 'string' ? { queue: _jsx(MediaQueue, { entity: entity }) } : {}) }), children: (open, openExpanded) => bar(open, openExpanded) }));
 }

package/dist/entities/media-seek.d.ts

@@ -1,9 +1,12 @@
 /** The spot being sought to while a drag is in progress, and for a moment after it ends: the
  * player takes a beat to report the new position, and without this the bar would snap back to
- * the old one first. `shown` is what to draw; `preview` follows a drag; `commit` ends it. */
+ * the old one first. `shown` is what to draw; `preview` follows a drag; `commit` ends it and seeks;
+ * `cancel` ends it without seeking (a cancelled or lost touch). A drag that is neither committed nor
+ * cancelled expires on its own, so the position can never stay stuck. */
 export declare function useSeekHold(position: number | undefined, onSeek: ((position: number) => void) | undefined): {
     shown: number | undefined;
     preview: (next: number) => void;
     commit: (next: number) => void;
+    cancel: () => void;
 };
 export type SeekHold = ReturnType<typeof useSeekHold>;

package/dist/entities/media-seek.js

@@ -1,19 +1,38 @@
 import { useEffect, useRef, useState } from 'react';
+/** How long a drag may go without a word before it is given up on: a touch whose end never arrived
+ * (cancelled by the browser, the finger lifted off the screen) must not leave the position frozen. */
+const IDLE_MS = 8000;
 /** The spot being sought to while a drag is in progress, and for a moment after it ends: the
  * player takes a beat to report the new position, and without this the bar would snap back to
- * the old one first. `shown` is what to draw; `preview` follows a drag; `commit` ends it. */
+ * the old one first. `shown` is what to draw; `preview` follows a drag; `commit` ends it and seeks;
+ * `cancel` ends it without seeking (a cancelled or lost touch). A drag that is neither committed nor
+ * cancelled expires on its own, so the position can never stay stuck. */
 export function useSeekHold(position, onSeek) {
     const [drag, setDrag] = useState(null);
     const release = useRef(undefined);
-    useEffect(() => () => clearTimeout(release.current), []);
+    const idle = useRef(undefined);
+    useEffect(() => () => {
+        clearTimeout(release.current);
+        clearTimeout(idle.current);
+    }, []);
     return {
         shown: drag ?? position,
-        preview: (next) => setDrag(next),
+        preview: (next) => {
+            setDrag(next);
+            clearTimeout(idle.current);
+            idle.current = setTimeout(() => setDrag(null), IDLE_MS);
+        },
         commit: (next) => {
             setDrag(next);
+            clearTimeout(idle.current);
             clearTimeout(release.current);
             release.current = setTimeout(() => setDrag(null), 1500);
             onSeek?.(next);
         },
+        cancel: () => {
+            clearTimeout(idle.current);
+            clearTimeout(release.current);
+            setDrag(null);
+        },
     };
 }

package/dist/entities/nav-dock.js

@@ -10,13 +10,13 @@ import { useThemeToggle } from '../provider.js';
  * surrounding `Page`, which pads for it. */
 export function NavDock({ items, base, showThemeToggle }) {
     usePageInset('bottom', 88);
-    return (_jsxs(Flex, { as: "nav", "aria-label": "Pages", align: "center", gap: 1.5, background: "rail", radius: "full", p: 1.5, shadow: "drawer", position: "fixed", css: ({ spacing }) => ({
+    return (_jsxs(Flex, { as: "nav", "aria-label": "Pages", align: "center", gap: 1.5, background: "rail", radius: "full", p: 1.5, shadow: "dock", position: "fixed", css: ({ spacing }) => ({
             bottom: spacing(5),
             left: '50%',
             transform: 'translateX(-50%)',
-        }), children: [items.map((item) => (_jsx(NavLink, { to: item.to ? `${base}/${item.to}` : base, end: true, "aria-label": item.label, title: item.label, children: ({ isActive }) => (_jsx(Flex, { as: "span", align: "center", justify: "center", width: 44, height: 44, radius: "chrome", cursor: "pointer", color: isActive ? 'accentText' : 'line', ...(isActive ? { background: 'accent' } : {}), children: _jsx(Icon, { name: item.icon, size: 22 }) })) }, item.to))), showThemeToggle ? _jsx(ThemeToggleButton, {}) : null] }));
+        }), children: [items.map((item) => (_jsx(NavLink, { to: item.to ? `${base}/${item.to}` : base, end: true, "aria-label": item.label, title: item.label, children: ({ isActive }) => (_jsx(Flex, { as: "span", align: "center", justify: "center", width: 44, height: 44, radius: "full", cursor: "pointer", color: isActive ? 'accentText' : 'line', ...(isActive ? { background: 'accent' } : {}), children: _jsx(Icon, { name: item.icon, size: 22 }) })) }, item.to))), showThemeToggle ? _jsx(ThemeToggleButton, {}) : null] }));
 }
 function ThemeToggleButton() {
     const { resolved, toggle } = useThemeToggle();
-    return (_jsx(Flex, { as: "button", type: "button", onClick: toggle, "aria-label": `Switch to ${resolved === 'dark' ? 'light' : 'dark'} theme`, title: `Switch to ${resolved === 'dark' ? 'light' : 'dark'} theme`, align: "center", justify: "center", width: 44, height: 44, radius: "chrome", cursor: "pointer", color: "line", css: { background: 'none' }, children: _jsx(Icon, { name: resolved === 'dark' ? 'lu:moon' : 'lu:sun', size: 22 }) }));
+    return (_jsx(Flex, { as: "button", type: "button", onClick: toggle, "aria-label": `Switch to ${resolved === 'dark' ? 'light' : 'dark'} theme`, title: `Switch to ${resolved === 'dark' ? 'light' : 'dark'} theme`, align: "center", justify: "center", width: 44, height: 44, radius: "full", cursor: "pointer", color: "line", css: { background: 'none' }, children: _jsx(Icon, { name: resolved === 'dark' ? 'lu:moon' : 'lu:sun', size: 22 }) }));
 }

package/dist/entities/seek-line.js

@@ -42,6 +42,18 @@ export function SeekLine({ seek, duration, seekable, }) {
                         seek.commit(positionAt(event));
                     }
                 },
+                // A touch the browser took (a gesture, a scroll) or lost never ends with a release: give
+                // the position back to the player instead of leaving it where the finger was.
+                onPointerCancel: () => {
+                    dragging.current = false;
+                    seek.cancel();
+                },
+                onLostPointerCapture: () => {
+                    if (dragging.current) {
+                        dragging.current = false;
+                        seek.cancel();
+                    }
+                },
             }
             : { role: 'progressbar' }), "aria-label": "Position", "aria-valuemin": 0, "aria-valuemax": Math.round(duration), "aria-valuenow": Math.round(shown), css: ({ palette }) => ({
             left: 0,

package/dist/entities/top-bar.d.ts

@@ -58,6 +58,18 @@ export interface SystemStatusProps {
  * something connects, red when something is down; click for per-system detail. `TopBar` renders it
  * from live status, so it only needs the props above for demos. */
 export declare function SystemStatus({ link: linkOverride, statuses: statusesOverride, defaultOpen, }: SystemStatusProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export interface WeatherChipProps {
+    /** A weather entity, like `ha:weather.forecast_home`, or a plain temperature sensor. */
+    entity: EntityRef;
+    /** Tapping a weather entity's pill opens its forecast in a drawer. `false` builds none and the pill is only what it shows, which is lighter on a small display. Default `true`. */
+    drawer?: boolean;
+}
+/** Current weather, as a pill: an icon for the sky and a rounded whole-degree reading. A `weather`
+ * entity gives the real condition, today's high and low once its forecast has loaded, and opens the
+ * forecast when tapped (if its source has one); a plain `sensor.*` (an outdoor temperature) gets a
+ * fixed sun and no forecast, since a sensor says nothing about the sky. The top bar's weather pill,
+ * for a dashboard that builds its own header instead of using `TopBar`. */
+export declare function WeatherChip({ entity, drawer }: WeatherChipProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export interface PresenceStackProps {
     /** People, as refs like `ha:person.dan`: one avatar each (their picture, or a colored initial). Someone who is away is dimmed and grayscale. */
     entities: EntityRef[];
@@ -66,3 +78,12 @@ export interface PresenceStackProps {
 }
 /** Overlapping avatar circles for a handful of `person.*` entities. */
 export declare function PresenceStack({ entities, colors }: PresenceStackProps): import("@emotion/react/jsx-runtime").JSX.Element;
+/** A short date pill (`Tue · Oct 6`), the top bar's, for a dashboard that builds its own header. */
+export declare function DateChip(): import("@emotion/react/jsx-runtime").JSX.Element;
+export interface ClockProps {
+    /** `'auto'` follows the browser's locale (browsers don't read the OS 12/24h setting, so an `en-US` browser shows AM/PM); `'12h'`/`'24h'` force it. Default `'auto'`. */
+    format?: 'auto' | '12h' | '24h';
+}
+/** The top bar's clock: the time in the large clock type, with AM/PM beside it in a 12h format. For
+ * a dashboard that builds its own header instead of using `TopBar`. */
+export declare function Clock({ format }: ClockProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/entities/top-bar.js

@@ -138,12 +138,20 @@ function StatusChip({ children }) {
     return (_jsx(Flex, { align: "center", gap: 2, background: "surface", border: true, radius: "full", px: 3.5, py: 2.5, children: children }));
 }
 /** Current weather, as a pill: an icon for the sky and a rounded whole-degree reading. A `weather`
- * entity gives the real condition; a plain `sensor.*` (an outdoor temperature) gets a fixed sun,
- * since a sensor says nothing about the sky. */
-function WeatherChip({ entity }) {
-    return useEntity(entity)?.kind === 'weather' ? (_jsx(WeatherPill, { entity: entity })) : (_jsx(SensorWeather, { entity: entity }));
+ * entity gives the real condition, today's high and low once its forecast has loaded, and opens the
+ * forecast when tapped (if its source has one); a plain `sensor.*` (an outdoor temperature) gets a
+ * fixed sun and no forecast, since a sensor says nothing about the sky. The top bar's weather pill,
+ * for a dashboard that builds its own header instead of using `TopBar`. */
+export function WeatherChip({ entity, drawer = true }) {
+    return useEntity(entity)?.kind === 'weather' ? (_jsx(WeatherPill, { entity: entity, drawer: drawer })) : (_jsx(SensorWeather, { entity: entity }));
 }
-function WeatherPill({ entity }) {
+/** Text boxes cut to the height of the digits, so the reading and the range, in different sizes, are
+ * both centred on their digits and not on the font's line box (which sits a little low or high).
+ * Where the browser does not know `text-box` the text keeps its usual box. */
+/** The height of one line of the 12px label text. */
+const LABEL_LINE = 15;
+const TRIM_TO_DIGITS = { textBox: 'trim-both cap alphabetic' };
+function WeatherPill({ entity, drawer }) {
     const handle = useEntityHandle('weather', entity);
     const { status } = handle;
     const weather = handle.entity;
@@ -157,10 +165,10 @@ function WeatherPill({ entity }) {
     const range = today?.temperature !== undefined && today.low !== undefined
         ? `${Math.round(today.temperature)}° / ${Math.round(today.low)}°`
         : undefined;
-    const chip = (_jsxs(StatusChip, { children: [_jsx(Flex, { as: "span", children: _jsx(WeatherIcon, { condition: condition, size: 14 }) }), _jsx(Typography, { as: "span", variant: "label", children: ready
+    const chip = (_jsxs(StatusChip, { children: [_jsx(Flex, { as: "span", css: { minHeight: LABEL_LINE }, children: _jsx(WeatherIcon, { condition: condition, size: 14 }) }), _jsx(Typography, { as: "span", variant: "label", css: TRIM_TO_DIGITS, children: ready
                     ? `${Math.round(weather.temperature ?? 0)}°`
-                    : statusLabels[status] }), ready && range ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: range })) : null] }));
-    if (!forecastable) {
+                    : statusLabels[status] }), ready && range ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", css: TRIM_TO_DIGITS, children: range })) : null] }));
+    if (!forecastable || !drawer) {
         return chip;
     }
     return (_jsx(DrawerTrigger, { icon: look.icon, label: weather?.name ?? 'Weather', kind: "Weather", body: _jsx(WeatherForecast, { entity: entity }), children: (open) => (_jsx(PlainButton, { "aria-label": `${weather?.name ?? 'Weather'}: forecast`, onClick: open, children: chip })) }));
@@ -238,13 +246,16 @@ function useNow(intervalMs) {
     }, [intervalMs]);
     return now;
 }
-function DateChip() {
+/** A short date pill (`Tue · Oct 6`), the top bar's, for a dashboard that builds its own header. */
+export function DateChip() {
     const now = useNow(60_000);
     const weekday = now.toLocaleDateString(undefined, { weekday: 'short' });
     const day = now.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
     return (_jsx(StatusChip, { children: _jsxs(Typography, { as: "span", variant: "label", children: [weekday, " \u00B7 ", day] }) }));
 }
-function Clock({ format }) {
+/** The top bar's clock: the time in the large clock type, with AM/PM beside it in a 12h format. For
+ * a dashboard that builds its own header instead of using `TopBar`. */
+export function Clock({ format = 'auto' }) {
     const now = useNow(30_000);
     const { time, dayPeriod } = formatClock(now, format);
     return (_jsxs(Flex, { align: "flex-start", gap: 1, children: [_jsx(Typography, { as: "span", variant: "clock", children: time }), dayPeriod ? (_jsx(Typography, { as: "span", variant: "label", css: { textTransform: 'uppercase' }, children: dayPeriod })) : null] }));