@hashsome/ui 0.4.0 → 0.6.0

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-grid-card": true, "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-player-column.d.ts

@@ -9,10 +9,13 @@ export interface MediaPlayerColumnProps {
     name?: string;
     /** Content for the media browser shown with the player in the drawer. 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 drawer. */
     browse?: ReactNode | false;
+    /** The library and the queue each open as a full-size overlay of their own, from a library button and a queue button beside the transport, instead of one half-size drawer with the whole player in it: for a small display, where the drawer's half state is no use. 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. Shuffle moves up beside the title. Default `false`. */
+    overlays?: boolean;
 }
 /** The player as an upright card for a narrow column beside a dashboard (a quarter to a third of
  * the width): the artwork in a ring that shows (and seeks) the position, title, transport and a
  * volume bar that is always visible. It is only as tall as it needs to be. Holding the card or
  * pressing the artwork opens the drawer with the player and its library; the browse button opens
- * that drawer expanded. */
-export declare function MediaPlayerColumn({ entity, name, browse }: MediaPlayerColumnProps): import("@emotion/react/jsx-runtime").JSX.Element;
+ * that drawer expanded. With `overlays` there is no drawer: the library and the queue open full
+ * size, each on its own. */
+export declare function MediaPlayerColumn({ entity, name, browse, overlays, }: MediaPlayerColumnProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -14,8 +14,9 @@ import { NowPlaying } from './now-playing.js';
  * the width): the artwork in a ring that shows (and seeks) the position, title, transport and a
  * volume bar that is always visible. It is only as tall as it needs to be. Holding the card or
  * pressing the artwork opens the drawer with the player and its library; the browse button opens
- * that drawer expanded. */
-export function MediaPlayerColumn({ entity, name, browse }) {
+ * that drawer expanded. With `overlays` there is no drawer: the library and the queue open full
+ * size, each on its own. */
+export function MediaPlayerColumn({ entity, name, browse, overlays = false, }) {
     const handle = useEntityHandle('mediaPlayer', entity);
     const player = handle.entity;
     const ref = typeof entity === 'string' ? entity : undefined;
@@ -24,12 +25,39 @@ export function MediaPlayerColumn({ entity, name, browse }) {
         : (browse ??
             (ref && player?.capabilities.browse ? (_jsx(MediaBrowser, { entity: ref, layout: "auto" })) : undefined));
     const fallback = fallbackName(entity);
+    if (overlays) {
+        // What the overlays hold: the library as a list, the queue; each only when the player has one.
+        const title = name ?? player?.name ?? fallback;
+        const libraryBody = browse === false
+            ? undefined
+            : (browse ??
+                (ref && player?.capabilities.browse ? (_jsx(MediaBrowser, { entity: ref, layout: "list" })) : undefined));
+        const queueBody = ref && player?.capabilities.queue === true ? _jsx(MediaQueue, { entity: ref }) : undefined;
+        return handle.status === 'ready' ? (_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) => (_jsx(Card, { children: _jsx(NowPlaying, { handle: handle, fallback: fallback, shuffle: "title", ...(name !== undefined ? { name } : {}), ...(libraryBody
+                            ? {
+                                leading: (_jsx(IconButton, { icon: "lu:library", label: "Browse media", glyph: 18, onClick: openLibrary })),
+                            }
+                            : {}), ...(queueBody
+                            ? {
+                                extra: (_jsx(IconButton, { icon: "lu:list-music", label: "Queue", glyph: 18, onClick: openQueue })),
+                            }
+                            : {}) }) })) })) })) : (_jsx(Card, { children: _jsx(NowPlaying, { handle: handle, fallback: fallback, ...(name !== undefined ? { name } : {}) }) }));
+    }
     return browser !== undefined && handle.status === 'ready' ? (_jsx(DrawerTrigger, { icon: "lu:music", label: name ?? player?.name ?? fallback, kind: "Media", body: _jsx(MediaPlayerFull, { entity: entity, browser: browser, ...(typeof entity === 'string' ? { queue: _jsx(MediaQueue, { entity: entity }) } : {}), ...(name !== undefined ? { name } : {}) }), children: (open, openExpanded) => (_jsx(Card, { open: open, children: _jsx(NowPlaying, { handle: handle, fallback: fallback, ...(name !== undefined ? { name } : {}), onOpenArtwork: open, extra: _jsx(IconButton, { icon: "lu:library", label: "Browse media", glyph: 18, onClick: openExpanded }) }) })) })) : (_jsx(Card, { children: _jsx(NowPlaying, { handle: handle, fallback: fallback, ...(name !== undefined ? { name } : {}) }) }));
 }
 /** The card itself; with `open`, holding it (anywhere but on a control) calls it. */
 function Card({ open, children }) {
     const hold = useHold(() => open?.(), open !== undefined);
-    return (_jsxs(Flex, { direction: "column", background: "surface", radius: "card", p: 4, width: "100%", 
-        // Only as tall as it needs, even in a parent that stretches its children.
-        css: { alignSelf: 'flex-start', position: 'relative', overflow: 'hidden' }, ...hold.handlers, children: [children, hold.holding ? _jsx(HoldProgress, {}) : null] }));
+    return (_jsxs(Flex, { "data-grid-card": true, direction: "column", background: "surface", radius: "card", p: 4, width: "100%", 
+        // Only as tall as it needs, even in a parent that stretches its children, and no taller than
+        // the parent: the artwork gives way.
+        css: {
+            alignSelf: 'flex-start',
+            position: 'relative',
+            overflow: 'hidden',
+            maxHeight: '100%',
+            minHeight: 0,
+            // Stretched beside other cards, the artwork takes the room and the controls stay at the bottom.
+            '& > [data-status]': { flex: '1 1 auto' },
+        }, ...hold.handlers, children: [children, hold.holding ? _jsx(HoldProgress, {}) : null] }));
 }

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

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import type { EntityRef } from '@hashsome/core';
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { type EntityHandle } from '../entity-handle.ts';
 export interface MediaPlayerFullProps {
     /** The media player, as a ref like `ma:living_room`. */
@@ -13,10 +13,20 @@ export interface MediaPlayerFullProps {
     name?: string;
     /** Gives the library the whole width, for one laid out to use it (the theater layout). Defaults to whether the drawer is expanded. */
     wide?: boolean;
+    /** In the narrow layout, where the queue has no room beside the player, a Library and a Queue tab above the list switch between them (shown when there is a `browser`, a `queue` and a player with a queue). `false` leaves the library alone, as before. In the wide layout the queue is beside the player and there are no tabs. Default `true`. */
+    tabs?: boolean;
+    /** The tab that is open first, when the tabs are on. Default `'library'`. */
+    defaultTab?: ListTab;
+    /** The open tab, to keep it yourself (to remember it between visits, or open the queue from elsewhere); the tabs ask for a change through `onTabChange`. Without it, the component keeps it, until it is gone. */
+    tab?: ListTab;
+    /** Called with the tab someone chose. */
+    onTabChange?: (tab: ListTab) => void;
 }
+/** What the tabs below the player choose between. */
+export type ListTab = 'library' | 'queue';
 /** The big player: the player centered at the top, and the library (or whatever `browser` is) below
  * it. It is what the media cards' drawers show, at every width, and it is the widget a dashboard puts
  * in a page of its own, around it whatever it likes (a surface that fills the space and scrolls, a
  * heading, other cards beside it). It fills the height it is given, so the page that holds it
  * decides how tall that is. */
-export declare function MediaPlayerFull({ entity, browser, queue, wide, name }: MediaPlayerFullProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MediaPlayerFull({ entity, browser, queue, wide, name, tabs, defaultTab, tab, onTabChange, }: MediaPlayerFullProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,19 +1,61 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Box, Flex } from 'e-prim';
+import { Box, Flex, Typography } from 'e-prim';
+import { motion } from 'motion/react';
+import { useId, useState } from 'react';
 import { fallbackName } from '../entity-handle.js';
 import { useEntityHandle } from '../hooks.js';
 import { useDetail } from '../layout/detail-provider.js';
+import { Icon } from '../icon.js';
 import { NowPlaying } from './now-playing.js';
 /** The artwork ring's diameter in a full-size player, against the usual 168px. */
 const FULL_SIZE = 260;
+const TAB_HEIGHT = 40;
+/** Library and Queue, as text with an underline (not the pills the library's own categories are, so the
+ * two rows read as different things). */
+function ListTabs({ value, onChange }) {
+    // One line that slides between the tabs; its own id, so two players on a page do not share it.
+    const line = useId();
+    const tabs = [
+        { id: 'library', label: 'Library', icon: 'lu:library' },
+        { id: 'queue', label: 'Queue', icon: 'lu:list-music' },
+    ];
+    return (_jsx(Flex, { role: "tablist", "aria-label": "Library or queue", gap: 5, css: ({ palette }) => ({ flexShrink: 0, borderBottom: `1px solid ${palette.border}` }), children: tabs.map((tab) => {
+            const selected = tab.id === value;
+            return (_jsxs(Flex, { as: "button", type: "button", role: "tab", "aria-selected": selected, onClick: () => onChange(tab.id), align: "center", justify: "center", gap: 2, height: TAB_HEIGHT, cursor: "pointer", color: selected ? 'text' : 'textMuted', css: {
+                    flex: 1,
+                    background: 'none',
+                    border: 0,
+                    padding: 0,
+                    position: 'relative',
+                    marginBottom: -1,
+                }, children: [selected ? (_jsx(Box, { as: motion.span, layoutId: line, position: "absolute", background: "accent", transition: { duration: 0.2, ease: 'easeOut' }, css: { left: 0, right: 0, bottom: 0, height: 2 } })) : null, _jsx(Icon, { name: tab.icon, size: 16 }), _jsx(Typography, { as: "span", variant: selected ? 'bodyStrong' : 'body', children: tab.label })] }, tab.id));
+        }) }));
+}
 /** The big player: the player centered at the top, and the library (or whatever `browser` is) below
  * it. It is what the media cards' drawers show, at every width, and it is the widget a dashboard puts
  * in a page of its own, around it whatever it likes (a surface that fills the space and scrolls, a
  * heading, other cards beside it). It fills the height it is given, so the page that holds it
  * decides how tall that is. */
-export function MediaPlayerFull({ entity, browser, queue, wide, name }) {
+export function MediaPlayerFull({ entity, browser, queue, wide, name, tabs = true, defaultTab = 'library', tab, onTabChange, }) {
     const handle = useEntityHandle('mediaPlayer', entity);
     const { detail } = useDetail();
     const full = wide ?? detail?.expanded === true;
-    return (_jsxs(Flex, { direction: "column", gap: 5, grow: 1, minHeight: 0, children: [_jsxs(Flex, { align: "stretch", justify: "center", gap: 6, ...(full ? { grow: 1 } : {}), css: { flexShrink: 0 }, children: [_jsx(Flex, { align: "center", justify: "center", grow: 1, minWidth: 0, children: _jsx(Box, { width: "100%", maxWidth: full ? 560 : 420, children: _jsx(NowPlaying, { handle: handle, fallback: fallbackName(entity), ...(name !== undefined ? { name } : {}), shuffle: "title", ...(full ? { size: FULL_SIZE } : {}) }) }) }), full && queue !== undefined && handle.entity?.capabilities.queue === true ? (_jsx(Flex, { position: "relative", width: 400, css: ({ palette }) => ({ flex: 'none', borderLeft: `1px solid ${palette.border}` }), children: _jsx(Flex, { direction: "column", position: "absolute", pl: 5, css: { inset: 0 }, children: queue }) })) : null] }), browser !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Box, { height: 1, background: "border", css: { flexShrink: 0 } }), _jsx(Flex, { direction: "column", width: "100%", minHeight: 0, ...(full ? {} : { maxWidth: 960, mx: 'auto' }), children: browser })] })) : null] }));
+    // Narrow, the queue and the library take turns in the one space below the player.
+    const [kept, setKept] = useState(defaultTab);
+    const hasQueue = queue !== undefined && handle.entity?.capabilities.queue === true;
+    const lists = [
+        ...(browser !== undefined ? ['library'] : []),
+        ...(!full && tabs && hasQueue ? ['queue'] : []),
+    ];
+    const wanted = tab ?? kept;
+    const open = lists.includes(wanted) ? wanted : lists[0];
+    const choose = (next) => {
+        setKept(next);
+        onTabChange?.(next);
+    };
+    return (_jsxs(Flex, { direction: "column", gap: 5, grow: 1, minHeight: 0, children: [_jsxs(Flex, { align: "stretch", justify: "center", gap: 6, ...(full ? { grow: 1 } : {}), css: { flexShrink: 0 }, children: [_jsx(Flex, { align: "center", justify: "center", grow: 1, minWidth: 0, children: _jsx(Box, { width: "100%", maxWidth: full ? 560 : 420, children: _jsx(NowPlaying, { handle: handle, fallback: fallbackName(entity), ...(name !== undefined ? { name } : {}), shuffle: "title", ...(full ? { size: FULL_SIZE } : {}) }) }) }), full && queue !== undefined && handle.entity?.capabilities.queue === true ? (_jsx(Flex, { position: "relative", width: 400, css: ({ palette }) => ({ flex: 'none', borderLeft: `1px solid ${palette.border}` }), children: _jsx(Flex, { direction: "column", position: "absolute", pl: 5, css: { inset: 0 }, children: queue }) })) : null] }), open !== undefined ? (_jsxs(_Fragment, { children: [lists.length > 1 ? (_jsx(ListTabs, { value: open, onChange: choose })) : (_jsx(Box, { height: 1, background: "border", css: { flexShrink: 0 } })), _jsx(Flex
+                    // Another list fades in where the last one was, so a tab does not cut from one to the other.
+                    , { 
+                        // Another list fades in where the last one was, so a tab does not cut from one to the other.
+                        as: motion.div, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.15, ease: 'easeOut' }, direction: "column", width: "100%", minHeight: 0, ...(full ? {} : { maxWidth: 960, mx: 'auto' }), children: open === 'queue' ? queue : browser }, open)] })) : null] }));
 }

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/now-playing.d.ts

@@ -3,7 +3,7 @@ import type { EntityHandle } from '../entity-handle.ts';
 /** The upright "now playing" panel the media column and page share: the artwork on a record, what is playing, how
  * far along it is, the transport buttons and a volume bar that is always there. Not exported from
  * the package; `MediaPlayerColumn` and `MediaPlayerFull` are its public forms. */
-export declare function NowPlaying({ handle, fallback, name, extra, onOpenArtwork, size, shuffle: shufflePlacement, }: {
+export declare function NowPlaying({ handle, fallback, name, extra, leading, onOpenArtwork, size, shuffle: shufflePlacement, }: {
     handle: EntityHandle<'mediaPlayer'>;
     /** What to call the player before it reports a name. */
     fallback: string;
@@ -11,6 +11,8 @@ export declare function NowPlaying({ handle, fallback, name, extra, onOpenArtwor
     name?: string;
     /** One more button, to the right of the transport (the browse button). Shuffle takes the slot on the left, unless it sits by the title. */
     extra?: ReactNode;
+    /** One more button, to the left of the transport, in the slot shuffle has when it sits by the title. Not shown while shuffle is in the row. */
+    leading?: ReactNode;
     /** Makes the artwork a button that calls this (opens the library). */
     onOpenArtwork?: () => void;
     /** The artwork ring's diameter in px, for a roomier player. Default 168. */

package/dist/entities/now-playing.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
+import { useTheme } from '@emotion/react';
 import { Flex, Grid, Typography } from 'e-prim';
 import { Icon } from '../icon.js';
 import { ValueBar } from '../layout/drawer-controls.js';
@@ -13,8 +14,10 @@ import { ArtworkRing } from './artwork-ring.js';
 /** The upright "now playing" panel the media column and page share: the artwork on a record, what is playing, how
  * far along it is, the transport buttons and a volume bar that is always there. Not exported from
  * the package; `MediaPlayerColumn` and `MediaPlayerFull` are its public forms. */
-export function NowPlaying({ handle, fallback, name, extra, onOpenArtwork, size, shuffle: shufflePlacement = 'transport', }) {
+export function NowPlaying({ handle, fallback, name, extra, leading, onOpenArtwork, size, shuffle: shufflePlacement = 'transport', }) {
     const player = handle.entity;
+    const { iconCircle, space } = useTheme().density;
+    const transportWidth = 5 * iconCircle + 4 * space;
     const { status } = handle;
     const ready = status === 'ready';
     const caps = player?.capabilities;
@@ -25,10 +28,12 @@ export function NowPlaying({ handle, fallback, name, extra, onOpenArtwork, size,
     const duration = ready ? player?.duration : undefined;
     // The ring and the time under the title share one position, so dragging the ring moves both.
     const seek = useSeekHold(ready ? position : undefined, caps?.seek ? (next) => void handle.command('seek', { position: next }) : undefined);
-    return (_jsxs(Flex, { direction: "column", gap: 4, "data-status": status, children: [_jsx(ArtworkRing, { artworkUrl: player?.media?.artworkUrl, seek: seek, duration: duration, seekable: caps?.seek === true, onOpen: onOpenArtwork, ...(size !== undefined ? { size } : {}) }), _jsxs(Flex, { direction: "column", align: "center", gap: 0.5, color: ready ? 'text' : 'textMuted', children: [_jsxs(Flex, { align: "center", justify: "center", gap: 2, maxWidth: "100%", children: [_jsx(Typography, { as: "h2", variant: "title", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", m: 0, minWidth: 0, children: ready
+    return (_jsxs(Flex, { direction: "column", gap: 4, "data-status": status, css: { minHeight: 0 }, children: [_jsx(ArtworkRing, { artworkUrl: player?.media?.artworkUrl, seek: seek, duration: duration, seekable: caps?.seek === true, onOpen: onOpenArtwork, ...(size !== undefined ? { size } : {}), 
+                // No wider than the row of five buttons under it (268px: five circles and the gaps between them).
+                maxSize: transportWidth }), _jsxs(Flex, { direction: "column", align: "center", gap: 0.5, color: ready ? 'text' : 'textMuted', children: [_jsxs(Flex, { align: "center", justify: "center", gap: 2, maxWidth: "100%", children: [_jsx(Typography, { as: "h2", variant: "title", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", m: 0, minWidth: 0, children: ready
                                     ? (player?.media?.title ?? 'Nothing playing')
                                     : statusLabels[status] }), caps?.shuffle && shufflePlacement === 'title' ? (_jsx(IconButton, { icon: "lu:shuffle", label: "Shuffle", size: 14, active: player?.shuffle === true, pressed: player?.shuffle === true, disabled: !ready, onClick: () => void handle.command('setShuffle', { shuffle: player?.shuffle !== true }) })) : null] }), ready && player?.media?.artist ? (_jsx(Typography, { as: "span", variant: "body", color: "textMuted", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", children: [player.media.artist, player.media.album].filter(Boolean).join(' · ') })) : (_jsx(Typography, { as: "span", variant: "body", color: "textMuted", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", children: name ?? player?.name ?? fallback }))] }), seek.shown !== undefined && duration ? (_jsxs(Typography, { as: "span", variant: "secondary", color: "textMuted", align: "center", css: { fontVariantNumeric: 'tabular-nums' }, children: [formatDuration(seek.shown), " / ", formatDuration(duration)] })) : null, _jsxs(Grid, { gap: 3, css: ({ density }) => ({
                     gridTemplateColumns: `repeat(5, ${density.iconCircle}px)`,
                     justifyContent: 'center',
-                }), children: [caps?.shuffle && shufflePlacement === 'transport' ? (_jsx(IconButton, { icon: "lu:shuffle", label: "Shuffle", glyph: 18, active: player?.shuffle === true, pressed: player?.shuffle === true, disabled: !ready, onClick: () => void handle.command('setShuffle', { shuffle: player?.shuffle !== true }) })) : (_jsx("span", {})), _jsx(IconButton, { icon: "lu:skip-back", label: "Previous", glyph: 18, 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: 18, disabled: !ready, primary: true, onClick: () => void handle.command('togglePlay') }), _jsx(IconButton, { icon: "lu:skip-forward", label: "Next", glyph: 18, disabled: !ready || caps?.next === false, feedback: feedbackFor('next'), onClick: () => press('next', () => handle.command('next')) }), extra ?? _jsx("span", {})] }), caps?.volume !== false || caps.mute ? (_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(PlainButton, { "aria-label": volume.muted ? 'Unmute' : 'Mute', "aria-pressed": volume.muted, title: volume.muted ? 'Unmute' : 'Mute', disabled: !ready || caps?.mute === false, onClick: volume.toggleMute, center: true, color: volume.muted ? 'accent' : 'textMuted', css: { flex: 'none' }, children: _jsx(Icon, { name: volume.muted ? 'lu:volume-x' : 'lu:volume-2', size: 16 }) }), _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: "span", variant: "secondary", color: "textMuted", minWidth: 32, align: "right", css: { flex: 'none', fontVariantNumeric: 'tabular-nums' }, children: [volume.shown, "%"] })] })) : null] }));
+                }), children: [caps?.shuffle && shufflePlacement === 'transport' ? (_jsx(IconButton, { icon: "lu:shuffle", label: "Shuffle", glyph: 18, active: player?.shuffle === true, pressed: player?.shuffle === true, disabled: !ready, onClick: () => void handle.command('setShuffle', { shuffle: player?.shuffle !== true }) })) : shufflePlacement === 'title' ? ((leading ?? _jsx("span", {}))) : (_jsx("span", {})), _jsx(IconButton, { icon: "lu:skip-back", label: "Previous", glyph: 18, 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: 18, disabled: !ready, primary: true, onClick: () => void handle.command('togglePlay') }), _jsx(IconButton, { icon: "lu:skip-forward", label: "Next", glyph: 18, disabled: !ready || caps?.next === false, feedback: feedbackFor('next'), onClick: () => press('next', () => handle.command('next')) }), extra ?? _jsx("span", {})] }), caps?.volume !== false || caps.mute ? (_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(PlainButton, { "aria-label": volume.muted ? 'Unmute' : 'Mute', "aria-pressed": volume.muted, title: volume.muted ? 'Unmute' : 'Mute', disabled: !ready || caps?.mute === false, onClick: volume.toggleMute, center: true, color: volume.muted ? 'accent' : 'textMuted', css: { flex: 'none' }, children: _jsx(Icon, { name: volume.muted ? 'lu:volume-x' : 'lu:volume-2', size: 16 }) }), _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: "span", variant: "secondary", color: "textMuted", minWidth: 32, align: "right", css: { flex: 'none', fontVariantNumeric: 'tabular-nums' }, children: [volume.shown, "%"] })] })) : null] }));
 }

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;