@hashsome/ui 0.2.0 → 0.4.0

package/dist/entities/artwork-ring.js

@@ -12,20 +12,44 @@ const DEFAULT_SIZE = 168;
  * `MediaPlayerFull` draw it. */
 export function ArtworkRing({ artworkUrl, seek, duration, seekable, onOpen, size: SIZE = DEFAULT_SIZE, }) {
     const ring = useRef(null);
-    const dragging = useRef(false);
+    /** A drag in progress: where round the ring the pointer was last, and how far along it has taken
+     * the position, which may run past either end while the pointer carries on (see `follow`). */
+    const drag = useRef(null);
     const total = seekable && duration !== undefined && duration > 0 ? duration : undefined;
     const shown = seek.shown;
     const fraction = shown !== undefined && duration ? Math.min(1, Math.max(0, shown / duration)) : undefined;
-    /** Where on the ring a pointer is, as a position in the item; `undefined` off the ring. */
-    const positionAt = (event) => {
+    /** How far round the ring a pointer is, from the top, clockwise: 0 to 1. */
+    const turnAt = (event) => {
         const box = ring.current?.getBoundingClientRect();
-        if (!box || !duration) {
+        if (!box) {
             return undefined;
         }
         const dx = event.clientX - (box.left + box.width / 2);
         const dy = event.clientY - (box.top + box.height / 2);
-        const turn = Math.atan2(dx, -dy) / (2 * Math.PI);
-        return Math.round(((turn + 1) % 1) * duration);
+        return (Math.atan2(dx, -dy) / (2 * Math.PI) + 1) % 1;
+    };
+    /** Moves a drag with the pointer and says where in the item that is. The position follows how far the
+     * pointer has gone round, not which side of the ring it is on, and stops at the start and the end:
+     * carrying on past the top (the start and the end meet there) holds it where it is, instead of
+     * jumping to the other end, and it only moves again once the pointer is back round. */
+    const follow = (event) => {
+        const now = turnAt(event);
+        const held = drag.current;
+        if (now === undefined || !held || !duration) {
+            return undefined;
+        }
+        // The way round that is the short one, so crossing the top does not read as a whole turn.
+        let step = now - held.turn;
+        if (step > 0.5) {
+            step -= 1;
+        }
+        else if (step < -0.5) {
+            step += 1;
+        }
+        // Only a little past either end is remembered, so the pointer is never far from its place.
+        held.along = Math.min(1.25, Math.max(-0.25, held.along + step));
+        held.turn = now;
+        return Math.round(Math.min(1, Math.max(0, held.along)) * duration);
     };
     const onKeyDown = (event) => {
         const step = event.key === 'ArrowRight' || event.key === 'ArrowUp' ? 5 : -5;
@@ -52,19 +76,21 @@ export function ArtworkRing({ artworkUrl, seek, duration, seekable, onOpen, size
                             if (distance < box.width * 0.4) {
                                 return;
                             }
-                            dragging.current = true;
+                            // Where it was pressed is where the position starts.
+                            const turn = turnAt(event) ?? 0;
+                            drag.current = { turn, along: turn };
                             event.currentTarget.setPointerCapture?.(event.pointerId);
-                            seek.preview(positionAt(event) ?? 0);
+                            seek.preview(Math.round(turn * total));
                         },
                         onPointerMove: (event) => {
-                            if (dragging.current) {
-                                seek.preview(positionAt(event) ?? 0);
+                            if (drag.current) {
+                                seek.preview(follow(event) ?? 0);
                             }
                         },
                         onPointerUp: (event) => {
-                            if (dragging.current) {
-                                dragging.current = false;
-                                const next = positionAt(event);
+                            if (drag.current) {
+                                const next = follow(event);
+                                drag.current = null;
                                 if (next !== undefined) {
                                     seek.commit(next);
                                 }

package/dist/entities/media-browser.js

@@ -1,12 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Box, Flex, Typography } from 'e-prim';
 import { Icon } from '../icon.js';
 import { useEntityHandle } from '../hooks.js';
 import { useDetail } from '../layout/detail-provider.js';
 import { Cover } from '../layout/cover.js';
-import { ChipRow } from '../layout/drawer-controls.js';
+import { CHIP_HEIGHT, ChipRow } from '../layout/drawer-controls.js';
 import { FadeScroll } from '../layout/fade-scroll.js';
+import { MarqueeText } from '../layout/marquee-text.js';
 import { PlainButton } from '../layout/plain-button.js';
+import { Reveal } from '../layout/reveal.js';
+import { Skeleton } from '../layout/skeleton.js';
 import { IconButton } from '../layout/tile.js';
 import { useMediaBrowser } from '../use-media-browser.js';
 const KIND_ICONS = {
@@ -28,40 +31,81 @@ export function MediaBrowser({ entity, onPlay, layout = 'list' }) {
     const theater = layout === 'theater' || (layout === 'auto' && detail?.expanded === true);
     const browser = useMediaBrowser(entity);
     const player = handle.entity;
+    // A player with a queue can be told to add to it, play next and shuffle; one without can only play.
+    const queueable = player?.capabilities.queue === true;
+    /** What the actions do. Playing replaces the queue, as in Spotify: a track in an album or playlist
+     * queues all of it and starts there, so Next goes to the next track of the album. */
     const play = (item) => {
-        void handle.command('playMedia', { item: item.id });
+        const container = browser.inside;
+        const within = item.kind === 'track' && container && ['album', 'playlist'].includes(container.kind)
+            ? container
+            : undefined;
+        void handle.command('playMedia', {
+            item: item.id,
+            mode: 'replace',
+            ...(within ? { context: within.id } : {}),
+        });
+        onPlay?.(item);
+    };
+    const playNext = (item) => void handle.command('playMedia', { item: item.id, mode: 'next' });
+    const addToQueue = (item) => void handle.command('playMedia', { item: item.id, mode: 'add' });
+    const shuffleAll = (item) => {
+        void handle.command('playMedia', { item: item.id, mode: 'replace', shuffle: true });
         onPlay?.(item);
     };
     /** Something is open inside the selected shelf (not a search): the tab shows the way back. */
     const inside = browser.canGoBack && !browser.searching;
-    const header = (_jsxs(Flex, { align: "center", gap: 2, css: { flexShrink: 0 }, children: [browser.canGoBack ? (_jsx(IconButton, { icon: "lu:arrow-left", label: "Back", glyph: 16, onClick: browser.back })) : null, _jsx(Typography, { as: "h2", variant: "heading", grow: 1, m: 0, children: browser.title ?? 'Library' })] }));
+    /** What can be done with the whole album, playlist or artist that is open: play it, shuffle it,
+     * add it to the queue. Playing it replaces the queue. They sit at the end of the row of tabs (or
+     * of the heading), never in a row of their own, so opening an album moves nothing; where there is
+     * no room for words they are just their icons. */
+    const opened = browser.inside;
+    const actionsHere = opened?.playable === true ? (_jsxs(Flex, { align: "center", gap: 2, css: { flexShrink: 0 }, children: [_jsx(PillButton, { icon: "lu:play", label: "Play", compact: !theater, onClick: () => play(opened), primary: true }), queueable ? (_jsxs(_Fragment, { children: [_jsx(PillButton, { icon: "lu:shuffle", label: "Shuffle", compact: !theater, onClick: () => shuffleAll(opened) }), _jsx(PillButton, { icon: "lu:list-plus", label: "Add to queue", compact: !theater, onClick: () => addToQueue(opened) })] })) : null] })) : null;
+    const header = (_jsxs(Flex, { align: "center", gap: 2, css: { flexShrink: 0 }, children: [browser.canGoBack ? (_jsx(IconButton, { icon: "lu:arrow-left", label: "Back", glyph: 16, onClick: browser.back })) : null, _jsx(Typography, { as: "h2", variant: "heading", grow: 1, m: 0, children: browser.title ?? 'Library' }), actionsHere] }));
     const search = player?.capabilities.search ? (_jsxs(Flex, { align: "center", gap: 2, background: "surfaceRaised", radius: "full", px: 3, height: 36, color: "textMuted", 
         // Fixed height: when the list takes all the room, the search keeps its size and the list scrolls.
         css: { flexShrink: 0 }, children: [_jsx(Icon, { name: "lu:search", size: 16 }), _jsx(Box, { as: "input", type: "search", "aria-label": "Search the library", placeholder: "Search", typography: "body", color: "text", grow: 1, minWidth: 0, value: browser.query, onChange: (event) => browser.search(event.target.value), css: { background: 'none', outline: 'none' } }), browser.query !== '' ? (_jsx(PlainButton, { "aria-label": "Clear search", title: "Clear search", onClick: () => browser.search(''), center: true, css: { flex: 'none' }, children: _jsx(Icon, { name: "lu:x", size: 16 }) })) : null] })) : null;
-    return (_jsxs(Flex, { direction: "column", gap: 3, minHeight: 0, children: [browser.tabs === undefined ? header : null, search, browser.tabs ? (_jsx(ChipRow, { tabs: true, options: browser.tabs.map((item) => 
-                // Inside a shelf the selected tab becomes the way back, so nothing is added to the
-                // layout and nothing below it moves.
-                item.id === browser.activeTab && inside
-                    ? {
-                        value: item.id,
-                        label: browser.title ?? item.title,
-                        icon: 'lu:arrow-left',
-                        ariaLabel: 'Back',
-                    }
-                    : { value: item.id, label: item.title }), value: browser.activeTab, onChange: (id) => id === browser.activeTab && inside ? browser.back() : browser.selectTab(id) })) : null, browser.error ? (_jsx(Typography, { as: "p", variant: "body", color: "danger", role: "alert", children: browser.error })) : browser.loading ? (_jsx(Typography, { as: "p", variant: "body", color: "textMuted", children: "Loading\u2026" })) : browser.items.length === 0 ? (_jsx(Typography, { as: "p", variant: "body", color: "textMuted", children: browser.searching ? 'Nothing found.' : 'Nothing here.' })) : theater ? (_jsx(FadeScroll, { as: "ul", gap: 4, m: 0, p: 0, pb: 2, css: {
-                    listStyle: 'none',
-                    scrollSnapType: 'x proximity',
-                    containerType: 'size',
-                    flex: `0 1 ${CARD + LABEL + 16}px`,
-                    minHeight: MIN_CARD + LABEL + 16,
-                }, children: browser.items.map((item) => (_jsx("li", { css: { flex: 'none', scrollSnapAlign: 'start' }, children: _jsx(BrowseCard, { item: item, onOpen: () => browser.open(item), onPlay: () => play(item) }) }, item.id))) })) : (_jsx(Flex, { direction: "column", gap: 1, as: "ul", m: 0, p: 0, minHeight: 0, css: { listStyle: 'none', overflowY: 'auto' }, children: browser.items.map((item) => (_jsx("li", { css: { flex: 'none' }, children: _jsx(BrowseRow, { item: item, onOpen: () => browser.open(item), onPlay: () => play(item) }) }, item.id))) }))] }));
+    return (_jsxs(Flex, { direction: "column", gap: 3, minHeight: 0, children: [browser.tabs === undefined ? header : null, search, browser.tabs ? (_jsxs(Flex, { align: "center", gap: 3, children: [_jsx(Flex, { direction: "column", grow: 1, minWidth: 0, children: _jsx(ChipRow, { tabs: true, options: browser.tabs.map((item) => 
+                            // Inside a shelf the selected tab becomes the way back, so nothing is added to the
+                            // layout and nothing below it moves.
+                            item.id === browser.activeTab && inside
+                                ? {
+                                    value: item.id,
+                                    label: browser.title ?? item.title,
+                                    icon: 'lu:arrow-left',
+                                    ariaLabel: 'Back',
+                                }
+                                : { value: item.id, label: item.title }), value: browser.activeTab, onChange: (id) => id === browser.activeTab && inside ? browser.back() : browser.selectTab(id) }) }), actionsHere] })) : null, browser.error ? (_jsx(Message, { theater: theater, children: _jsx(Typography, { as: "p", variant: "body", color: "danger", role: "alert", m: 0, children: browser.error }) })) : browser.loading ? (_jsx(BrowseSkeleton, { theater: theater })) : browser.items.length === 0 ? (_jsx(Message, { theater: theater, children: _jsx(Typography, { as: "p", variant: "body", color: "textMuted", m: 0, children: browser.searching ? 'Nothing found.' : 'Nothing here.' }) })) : theater ? (_jsx(FadeScroll, { as: "ul", gap: 4, m: 0, p: 0, pb: 2, css: { ...THEATER_STAGE, listStyle: 'none', scrollSnapType: 'x proximity' }, children: browser.items.map((item, index) => (_jsx("li", { css: { flex: 'none', scrollSnapAlign: 'start' }, children: _jsx(Reveal, { index: browser.searching ? 0 : index, children: _jsx(BrowseCard, { item: item, queueable: queueable, onOpen: () => browser.open(item), onPlay: () => play(item), onAdd: () => addToQueue(item) }) }) }, `${browser.listKey}:${item.id}`))) })) : (_jsx(Flex, { direction: "column", gap: 1, as: "ul", m: 0, p: 0, minHeight: 0, css: { listStyle: 'none', overflowY: 'auto' }, children: browser.items.map((item, index) => (_jsx("li", { css: { flex: 'none' }, children: _jsx(Reveal, { index: browser.searching ? 0 : index, children: _jsx(BrowseRow, { item: item, queueable: queueable, onOpen: () => browser.open(item), onPlay: () => play(item), onNext: () => playNext(item), onAdd: () => addToQueue(item) }) }) }, `${browser.listKey}:${item.id}`))) }))] }));
+}
+/** What shows where the list will be while it loads: placeholders shaped like what is coming (cards in
+ * the theater layout, rows in the list), in the room the real thing takes, so nothing moves. */
+function BrowseSkeleton({ theater }) {
+    return theater ? (_jsx(Flex, { as: "ul", role: "status", "aria-label": "Loading", "aria-busy": "true", gap: 4, m: 0, p: 0, pb: 2, css: { ...THEATER_STAGE, listStyle: 'none', overflow: 'hidden' }, children: Array.from({ length: 12 }, (_, index) => (_jsxs(Flex, { as: "li", direction: "column", gap: 2, css: { flex: 'none', width: CARD_SIZE }, children: [_jsx(Skeleton, { width: CARD_SIZE, height: CARD_SIZE, radius: "card" }), _jsxs(Flex, { direction: "column", gap: 1, px: 1, children: [_jsx(Skeleton, { width: "70%", height: 14 }), _jsx(Skeleton, { width: "45%", height: 12 })] })] }, index))) })) : (_jsx(Flex, { as: "ul", role: "status", "aria-label": "Loading", "aria-busy": "true", direction: "column", gap: 1, m: 0, p: 0, css: { listStyle: 'none' }, children: Array.from({ length: 6 }, (_, index) => (_jsxs(Flex, { as: "li", align: "center", gap: 3, py: 1.5, px: 2, children: [_jsx(Skeleton, { width: 44, height: 44 }), _jsxs(Flex, { direction: "column", gap: 1.5, grow: 1, children: [_jsx(Skeleton, { width: "60%", height: 14 }), _jsx(Skeleton, { width: "35%", height: 12 })] })] }, index))) }));
 }
-function BrowseRow({ item, onOpen, onPlay, }) {
+/** A line of text where the list would be (an error, nothing found), in the room the list takes in
+ * the theater layout, so showing it does not change the library's height. */
+function Message({ theater, children }) {
+    return theater ? (_jsx(Flex, { align: "center", css: { ...THEATER_STAGE, overflow: 'hidden' }, children: children })) : (_jsx(_Fragment, { children: children }));
+}
+/** A labelled round button, for the actions of the album or playlist that is open. */
+function PillButton({ icon, label, onClick, primary, compact, }) {
+    // Built like a tab (a button with the same padding), so the row they share does not change height.
+    return (_jsxs(Flex, { as: "button", type: "button", onClick: onClick, "aria-label": label, title: label, align: "center", justify: "center", gap: 1.5, height: CHIP_HEIGHT, px: 3, radius: "full", cursor: "pointer", background: primary ? 'accent' : 'surfaceRaised', color: primary ? 'accentText' : 'text', css: { flex: 'none', whiteSpace: 'nowrap' }, children: [_jsx(Icon, { name: icon, size: 14 }), compact ? null : (_jsx(Typography, { as: "span", variant: "body", children: label }))] }));
+}
+function BrowseRow({ item, queueable, onOpen, onPlay, onNext, onAdd, }) {
     // A row opens what can be opened and otherwise plays; an openable thing that can also be played
     // (an album) gets its own play button.
     const main = item.expandable ? onOpen : item.playable ? onPlay : undefined;
-    return (_jsxs(Flex, { align: "center", gap: 2, children: [_jsxs(PlainButton, { align: "center", gap: 3, grow: 1, minWidth: 0, radius: "row", py: 1.5, px: 2, cursor: main ? 'pointer' : 'default', disabled: !main, "aria-label": item.expandable ? `Open ${item.title}` : `Play ${item.title}`, onClick: main, css: ({ palette }) => ({ '&:hover:not(:disabled)': { background: palette.surfaceRaised } }), children: [_jsx(Flex, { align: "center", justify: "center", background: "surfaceRaised", color: "textMuted", radius: "small", width: 44, height: 44, overflow: "hidden", css: { flex: 'none' }, children: item.artworkUrl ? (_jsx(Cover, { src: item.artworkUrl })) : (_jsx(Icon, { name: KIND_ICONS[item.kind], size: 20 })) }), _jsxs(Flex, { direction: "column", minWidth: 0, children: [_jsx(Typography, { as: "span", variant: "bodyStrong", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", children: item.title }), item.subtitle ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", children: item.subtitle })) : null] })] }), item.expandable && item.playable ? (_jsx(IconButton, { icon: "lu:play", label: `Play ${item.title}`, glyph: 16, onClick: onPlay })) : null] }));
+    return (_jsxs(Flex, { align: "center", gap: 2, children: [_jsxs(PlainButton, { align: "center", gap: 3, grow: 1, minWidth: 0, radius: "row", py: 1.5, px: 2, cursor: main ? 'pointer' : 'default', disabled: !main, "aria-label": item.expandable ? `Open ${item.title}` : `Play ${item.title}`, onClick: main, css: ({ palette }) => ({ '&:hover:not(:disabled)': { background: palette.surfaceRaised } }), children: [_jsx(Flex, { align: "center", justify: "center", background: "surfaceRaised", color: "textMuted", radius: "small", width: 44, height: 44, overflow: "hidden", css: { flex: 'none' }, children: item.artworkUrl ? (_jsx(Cover, { src: item.artworkUrl })) : (_jsx(Icon, { name: KIND_ICONS[item.kind], size: 20 })) }), _jsxs(Flex, { direction: "column", minWidth: 0, children: [_jsx(Typography, { as: "span", variant: "bodyStrong", children: _jsx(MarqueeText, { children: item.title }) }), item.subtitle ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: _jsx(MarqueeText, { children: item.subtitle }) })) : null] })] }), queueable && item.playable ? (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: "lu:list-start", label: `Play ${item.title} next`, glyph: 16, onClick: onNext }), _jsx(IconButton, { icon: "lu:list-plus", label: `Add ${item.title} to the queue`, glyph: 16, onClick: onAdd })] })) : null, item.expandable && item.playable ? (_jsx(IconButton, { icon: "lu:play", label: `Play ${item.title}`, glyph: 16, onClick: onPlay })) : null] }));
 }
+/** The room the theater row takes, whatever it holds: it asks for full-size cards and gives way when
+ * there is less, and is a size container so the cards can shrink to fit. What stands in for the row
+ * while it loads, or when it is empty, takes the same room, so the library does not change height. */
+const THEATER_STAGE = {
+    containerType: 'size',
+    flex: '0 1 272px',
+    minHeight: 192,
+};
 /** The width and height of a theater card's artwork when there is room for it. */
 const CARD = 200;
 /** The smallest a theater card's artwork gets: when there is less room than that, the page scrolls instead. */
@@ -73,7 +117,7 @@ const CARD_SIZE = `min(${CARD}px, max(${MIN_CARD}px, calc(100cqh - ${LABEL}px)))
 /** An item as a large card for the theater layout: big artwork (round for an artist), then the
  * title and subtitle. It opens or plays like a row does, and an album or playlist gets its play
  * button over the artwork's corner. */
-function BrowseCard({ item, onOpen, onPlay, }) {
+function BrowseCard({ item, queueable, onOpen, onPlay, onAdd, }) {
     const main = item.expandable ? onOpen : item.playable ? onPlay : undefined;
-    return (_jsxs(Box, { position: "relative", css: { width: CARD_SIZE }, children: [_jsxs(PlainButton, { direction: "column", gap: 2, width: "100%", cursor: main ? 'pointer' : 'default', disabled: !main, "aria-label": item.expandable ? `Open ${item.title}` : `Play ${item.title}`, onClick: main, children: [_jsx(Flex, { align: "center", justify: "center", background: "surfaceRaised", color: "textMuted", radius: item.kind === 'artist' ? 'full' : 'card', overflow: "hidden", css: { width: CARD_SIZE, height: CARD_SIZE }, children: item.artworkUrl ? (_jsx(Cover, { src: item.artworkUrl })) : (_jsx(Icon, { name: KIND_ICONS[item.kind], size: 56 })) }), _jsxs(Flex, { direction: "column", minWidth: 0, px: 1, children: [_jsx(Typography, { as: "span", variant: "bodyStrong", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", children: item.title }), item.subtitle ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", children: item.subtitle })) : null] })] }), item.expandable && item.playable ? (_jsx(Box, { position: "absolute", css: { right: 10, top: `calc(${CARD_SIZE} - 54px)` }, children: _jsx(IconButton, { icon: "lu:play", label: `Play ${item.title}`, glyph: 16, onClick: onPlay }) })) : null] }));
+    return (_jsxs(Box, { position: "relative", css: { width: CARD_SIZE }, children: [_jsxs(PlainButton, { direction: "column", gap: 2, width: "100%", cursor: main ? 'pointer' : 'default', disabled: !main, "aria-label": item.expandable ? `Open ${item.title}` : `Play ${item.title}`, onClick: main, children: [_jsx(Flex, { align: "center", justify: "center", background: "surfaceRaised", color: "textMuted", radius: item.kind === 'artist' ? 'full' : 'card', overflow: "hidden", css: { width: CARD_SIZE, height: CARD_SIZE }, children: item.artworkUrl ? (_jsx(Cover, { src: item.artworkUrl })) : (_jsx(Icon, { name: KIND_ICONS[item.kind], size: 56 })) }), _jsxs(Flex, { direction: "column", minWidth: 0, px: 1, children: [_jsx(Typography, { as: "span", variant: "bodyStrong", children: _jsx(MarqueeText, { children: item.title }) }), item.subtitle ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: _jsx(MarqueeText, { children: item.subtitle }) })) : null] })] }), item.playable && (queueable || item.expandable) ? (_jsxs(Flex, { align: "center", gap: 1, position: "absolute", css: { right: 10, top: `calc(${CARD_SIZE} - 54px)` }, children: [queueable ? (_jsx(IconButton, { icon: "lu:list-plus", label: `Add ${item.title} to the queue`, glyph: 16, onClick: onAdd })) : null, item.expandable ? (_jsx(IconButton, { icon: "lu:play", label: `Play ${item.title}`, glyph: 16, onClick: onPlay })) : null] })) : null] }));
 }

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

@@ -16,6 +16,7 @@ import { Cover } from '../layout/cover.js';
 import { PlainButton } from '../layout/plain-button.js';
 import { MediaBrowser } from './media-browser.js';
 import { MediaPlayerFull } from './media-player-full.js';
+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';
@@ -74,5 +75,5 @@ export function MediaPlayerBar({ entity, name, browse }) {
                                             : 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] }));
     // 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 } : {}) }), children: (open, openExpanded) => bar(open, openExpanded) })) : (bar());
+    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());
 }

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

@@ -8,6 +8,7 @@ import { DrawerTrigger } from '../layout/use-drawer.js';
 import { useHold } from '../layout/use-hold.js';
 import { MediaBrowser } from './media-browser.js';
 import { MediaPlayerFull } from './media-player-full.js';
+import { MediaQueue } from './media-queue.js';
 import { NowPlaying } from './now-playing.js';
 /** 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
@@ -23,7 +24,7 @@ export function MediaPlayerColumn({ entity, name, browse }) {
         : (browse ??
             (ref && player?.capabilities.browse ? (_jsx(MediaBrowser, { entity: ref, layout: "auto" })) : undefined));
     const fallback = fallbackName(entity);
-    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, ...(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 } : {}) }) }));
+    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 }) {

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

@@ -7,6 +7,8 @@ export interface MediaPlayerFullProps {
     entity: EntityRef | EntityHandle<'mediaPlayer'>;
     /** What goes below the player, usually the player's library: `<MediaBrowser entity="ma:living_room" layout="theater" />`. Left out, only the player is drawn. */
     browser?: ReactNode;
+    /** What goes beside the player in a wide space, usually the player's queue: `<MediaQueue entity="ma:living_room" />`. Only used when `wide` and the player has a queue; the narrow layout has no room for it. */
+    queue?: ReactNode;
     /** Calls the player this instead of the name it reports. */
     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. */
@@ -17,4 +19,4 @@ export interface MediaPlayerFullProps {
  * 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, wide, name }: MediaPlayerFullProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MediaPlayerFull({ entity, browser, queue, wide, name }: MediaPlayerFullProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -11,9 +11,9 @@ const FULL_SIZE = 260;
  * 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, wide, name }) {
+export function MediaPlayerFull({ entity, browser, queue, wide, name }) {
     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: [_jsx(Flex, { align: "center", justify: "center", ...(full ? { grow: 1 } : {}), css: { flexShrink: 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 } : {}) }) }) }), 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] }));
+    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] }));
 }

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

@@ -0,0 +1,14 @@
+/** @jsxImportSource @emotion/react */
+import type { EntityRef } from '@hashsome/core';
+export interface MediaQueueProps {
+    /** The media player, as a ref like `ma:living_room`. Shows nothing for a player with no queue. */
+    entity: EntityRef;
+}
+/**
+ * A player's queue: the tracks that have just played (dimmed), the one playing, and what comes next,
+ * as a list that scrolls. Tap a track to jump to it, the cross takes it out, and Clear takes out everything
+ * after the track that is playing, which carries on. What comes next can be put in another order by
+ * dragging a track by its handle (or with the arrow keys on the handle). Once the last track has
+ * played and the player has stopped, that track is shown as played, not as playing. It is made to sit beside the player in a wide space (see `MediaPlayerFull`'s `queue`).
+ */
+export declare function MediaQueue({ entity }: MediaQueueProps): import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/entities/media-queue.js

@@ -0,0 +1,151 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Flex, Typography } from 'e-prim';
+import { AnimatePresence, motion, Reorder, useDragControls, useReducedMotion } from 'motion/react';
+import { useState } from 'react';
+import { useEntityHandle } from '../hooks.js';
+import { Icon } from '../icon.js';
+import { Cover } from '../layout/cover.js';
+import { MarqueeText } from '../layout/marquee-text.js';
+import { PlainButton } from '../layout/plain-button.js';
+import { useMediaQueue } from '../use-media-queue.js';
+import { formatDuration } from './media-progress.js';
+/** The height of a track's row: a touch target, with room for its picture. */
+const ROW = 56;
+/**
+ * A player's queue: the tracks that have just played (dimmed), the one playing, and what comes next,
+ * as a list that scrolls. Tap a track to jump to it, the cross takes it out, and Clear takes out everything
+ * after the track that is playing, which carries on. What comes next can be put in another order by
+ * dragging a track by its handle (or with the arrow keys on the handle). Once the last track has
+ * played and the player has stopped, that track is shown as played, not as playing. It is made to sit beside the player in a wide space (see `MediaPlayerFull`'s `queue`).
+ */
+export function MediaQueue({ entity }) {
+    const handle = useEntityHandle('mediaPlayer', entity);
+    const { queue, refresh } = useMediaQueue(entity);
+    // Clearing a long queue takes a moment: the button waits, and what is being taken out is dimmed meanwhile.
+    const [clearing, setClearing] = useState(false);
+    // The order of what comes next while it is being changed, until the queue read afterwards replaces it.
+    // It belongs to the queue it was made from: a queue read afterwards leaves it behind.
+    const [draft, setDraft] = useState(null);
+    const still = useReducedMotion();
+    if (!queue || handle.entity?.capabilities.queue !== true) {
+        return null;
+    }
+    // After a change the queue is read again, once the player has had a moment to apply it.
+    const run = (command, item, shift) => {
+        const sent = command === 'clearQueue'
+            ? handle.command('clearQueue')
+            : command === 'moveQueueItem'
+                ? handle.command('moveQueueItem', { item: item.id, shift: shift })
+                : handle.command(command, { item: item.id });
+        if (command === 'clearQueue') {
+            setClearing(true);
+        }
+        void sent
+            .then(() => setTimeout(refresh, 400))
+            .catch(() => setDraft(null))
+            .finally(() => setClearing(false));
+    };
+    const at = queue.items.findIndex((x) => x.current);
+    const firstUpcoming = at === -1 ? queue.items.length : at + 1;
+    const leading = queue.items.slice(0, firstUpcoming);
+    const upcoming = queue.items.slice(firstUpcoming);
+    // A draft only counts while it is a reordering of the very tracks that are there.
+    const byId = new Map(upcoming.map((item) => [item.id, item]));
+    const shown = draft?.of === queue &&
+        draft.ids.length === upcoming.length &&
+        draft.ids.every((id) => byId.has(id))
+        ? draft.ids.map((id) => byId.get(id))
+        : upcoming;
+    // The player has stopped on the last track and its position is at the end: it is over. A track
+    // that was merely paused or stopped part way through is not, whatever state the player reports.
+    const { playback, position, duration } = handle.entity;
+    const stopped = (playback === 'idle' || playback === 'off') &&
+        position !== undefined &&
+        duration !== undefined &&
+        position >= duration - 2;
+    const finished = stopped &&
+        at !== -1 &&
+        at === queue.items.length - 1 &&
+        queue.offset + queue.items.length === queue.total;
+    // Dropping a track puts it where the draft has it: the command says by how many places it moved.
+    const drop = (item) => {
+        const to = shown.findIndex((x) => x.id === item.id);
+        const from = upcoming.findIndex((x) => x.id === item.id);
+        if (to === from) {
+            setDraft(null);
+            return;
+        }
+        run('moveQueueItem', item, to - from);
+    };
+    // The same from the keyboard: one place up or down, straight away.
+    const step = (item, by) => {
+        const from = shown.findIndex((x) => x.id === item.id);
+        const to = from + by;
+        if (to < 0 || to >= shown.length) {
+            return;
+        }
+        const ids = shown.map((x) => x.id);
+        ids.splice(to, 0, ids.splice(from, 1)[0]);
+        setDraft({ of: queue, ids });
+        run('moveQueueItem', item, by);
+    };
+    const hidden = Math.max(0, queue.total - queue.offset - queue.items.length);
+    return (_jsxs(Flex, { direction: "column", minHeight: 0, grow: 1, gap: 2, children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: 2, children: [_jsxs(Typography, { as: "h2", variant: "heading", m: 0, children: ["Queue", _jsxs(Typography, { as: "span", variant: "secondary", color: "textMuted", children: [' ', "\u00B7 ", queue.total, " ", queue.total === 1 ? 'track' : 'tracks'] })] }), queue.total > 0 ? (_jsxs(PlainButton, { "aria-label": "Clear the queue", title: "Clear what comes next; the track playing carries on", disabled: clearing, onClick: () => run('clearQueue'), align: "center", gap: 1, px: 2.5, height: 32, radius: "full", color: "textMuted", css: ({ palette }) => ({ '&:hover': { background: palette.surfaceRaised } }), children: [_jsx(Icon, { name: "lu:trash", size: 14 }), _jsx(Typography, { as: "span", variant: "label", color: "textMuted", children: "Clear" })] })) : null] }), queue.items.length === 0 ? (_jsx(Typography, { as: "p", variant: "body", color: "textMuted", children: "Nothing is queued. Play or add something from the library." })) : (_jsxs(Reorder.Group, { as: "ul", axis: "y", values: shown.map((item) => item.id), onReorder: (ids) => setDraft({ of: queue, ids }), css: ({ density }) => ({
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: density.space / 6,
+                    margin: 0,
+                    padding: 0,
+                    minHeight: 0,
+                    listStyle: 'none',
+                    overflowY: 'auto',
+                }), children: [_jsxs(AnimatePresence, { initial: false, children: [leading.map((item, index) => (_jsx(QueueRow, { item: item, still: still === true, dim: index < at || (finished && item.current === true), played: finished && item.current === true, onPlay: () => run('playQueueItem', item) }, item.id))), shown.map((item) => (_jsx(QueueRow, { item: item, still: still === true, 
+                                // While Clear works only what is on its way out is dimmed.
+                                dim: clearing, reorderable: true, onPlay: () => run('playQueueItem', item), onRemove: () => run('removeQueueItem', item), onDrop: () => drop(item), onStep: (by) => step(item, by) }, item.id)))] }), hidden > 0 ? (_jsxs(Typography, { as: "li", variant: "secondary", color: "textMuted", py: 2, css: { flex: 'none' }, children: ["and ", hidden.toLocaleString(), " more"] })) : null] }))] }));
+}
+/** Room for the grip that a track in what comes next has, so every row lines up. */
+const GRIP = 20;
+function QueueRow({ item, still, dim, played = false, reorderable = false, onPlay, onRemove, onDrop, onStep, }) {
+    const controls = useDragControls();
+    const [dragging, setDragging] = useState(false);
+    const playing = item.current === true && !played;
+    const shared = {
+        initial: { opacity: 0, height: 0 },
+        animate: { opacity: dim ? 0.5 : 1, height: ROW },
+        exit: { opacity: 0, height: 0 },
+        transition: { duration: still ? 0 : 0.2, ease: 'easeOut' },
+    };
+    const css = ({ palette }) => ({
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4,
+        flex: 'none',
+        overflow: 'hidden',
+        borderRadius: 8,
+        background: dragging ? palette.surfaceRaised : 'transparent',
+        boxShadow: dragging ? '0 6px 18px rgba(0, 0, 0, 0.18)' : 'none',
+        position: 'relative',
+        zIndex: dragging ? 1 : 0,
+    });
+    const content = (_jsxs(_Fragment, { children: [reorderable ? (_jsx(PlainButton, { "aria-label": `Move ${item.title}`, title: "Drag to move, or use the arrow keys", center: true, width: GRIP, height: ROW, color: "textMuted", css: {
+                    flex: 'none',
+                    cursor: 'grab',
+                    touchAction: 'none',
+                    '&:active': { cursor: 'grabbing' },
+                }, onPointerDown: (event) => controls.start(event), onKeyDown: (event) => {
+                    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+                        event.preventDefault();
+                        onStep?.(event.key === 'ArrowUp' ? -1 : 1);
+                    }
+                }, children: _jsx(Icon, { name: "lu:grip-vertical", size: 16 }) })) : (_jsx(Flex, { width: GRIP, css: { flex: 'none' } })), _jsxs(PlainButton, { align: "center", gap: 3, grow: 1, minWidth: 0, height: ROW, px: 2, radius: "row", "aria-label": `${playing ? 'Playing' : 'Play'} ${item.title}`, "aria-current": playing ? 'true' : undefined, background: playing ? 'surfaceRaised' : 'transparent', onClick: onPlay, css: ({ palette }) => ({
+                    transition: 'background-color 160ms ease',
+                    '&:hover': { background: palette.surfaceRaised },
+                }), children: [_jsx(Flex, { align: "center", justify: "center", background: "surfaceRaised", color: playing ? 'accent' : 'textMuted', radius: "small", width: 40, height: 40, overflow: "hidden", css: { flex: 'none' }, children: item.artworkUrl ? (_jsx(Cover, { src: item.artworkUrl })) : (_jsx(Icon, { name: playing ? 'lu:audio-lines' : 'lu:music', size: 18 })) }), _jsxs(Flex, { direction: "column", minWidth: 0, grow: 1, align: "flex-start", children: [_jsx(Typography, { as: "span", variant: "bodyStrong", color: playing ? 'accent' : 'text', maxWidth: "100%", children: _jsx(MarqueeText, { children: item.title }) }), item.artist ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", maxWidth: "100%", children: _jsx(MarqueeText, { children: item.artist }) })) : null] }), item.duration !== undefined ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: formatDuration(item.duration) })) : null] }), onRemove ? (_jsx(PlainButton, { "aria-label": `Remove ${item.title} from the queue`, title: "Remove from the queue", onClick: onRemove, center: true, width: ROW / 2, height: ROW / 2, radius: "full", color: "textMuted", css: ({ palette }) => ({
+                    flex: 'none',
+                    '&:hover': { background: palette.surfaceRaised },
+                }), children: _jsx(Icon, { name: "lu:x", size: 16 }) })) : (_jsx(Flex, { width: ROW / 2, css: { flex: 'none' } }))] }));
+    return reorderable ? (_jsx(Reorder.Item, { value: item.id, dragListener: false, dragControls: controls, onDragStart: () => setDragging(true), onDragEnd: () => {
+            setDragging(false);
+            onDrop?.();
+        }, ...shared, css: css, children: content })) : (_jsx(motion.li, { ...shared, css: css, children: content }));
+}

package/dist/entities/top-bar.js

@@ -143,6 +143,12 @@ function StatusChip({ children }) {
 function WeatherChip({ entity }) {
     return useEntity(entity)?.kind === 'weather' ? (_jsx(WeatherPill, { entity: entity })) : (_jsx(SensorWeather, { entity: 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 }) {
     const handle = useEntityHandle('weather', entity);
     const { status } = handle;
@@ -157,9 +163,9 @@ 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] }));
+                    : statusLabels[status] }), ready && range ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", css: TRIM_TO_DIGITS, children: range })) : null] }));
     if (!forecastable) {
         return chip;
     }

package/dist/entities/weather-forecast.js

@@ -88,7 +88,7 @@ function WindMetric({ point, unit }) {
 }
 /** A tile with a label and a value, for the current readings of the expanded drawer. */
 function Stat({ label, children }) {
-    return (_jsxs(Flex, { direction: "column", gap: 0.5, background: "surfaceRaised", radius: "card", px: 3, py: 2.5, children: [_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: label }), _jsx(Typography, { as: "span", variant: "bodyStrong", children: children })] }));
+    return (_jsxs(Flex, { direction: "column", gap: 0.5, border: true, radius: "row", px: 3, py: 2.5, children: [_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: label }), _jsx(Typography, { as: "span", variant: "bodyStrong", children: children })] }));
 }
 /** The readings the weather has now, from the entity and, for what it lacks, the hour that is
  * under way (a source may give UV or cloud cover only in its forecast). */
@@ -135,22 +135,9 @@ export function WeatherForecast({ entity, expanded: layout }) {
                                     notes: describeStep(hour, hourly.result),
                                 },
                             ]
-                            : []), range: "1d", expanded: expanded, unit: hourly.result?.unit ?? '°', fitDomain: true, height: expanded ? 180 : 88 }), expanded ? (_jsx(Box, { mt: 2, css: { containerType: 'inline-size' }, children: _jsx(Box, { css: {
-                                display: 'grid',
-                                gap: 10,
-                                gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
-                                '@container (max-width: 1000px)': {
-                                    gridTemplateColumns: 'repeat(8, minmax(0, 1fr))',
-                                },
-                                '@container (max-width: 640px)': {
-                                    gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
-                                },
-                                '@container (max-width: 420px)': {
-                                    gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
-                                },
-                            }, children: hours.map((hour) => {
+                            : []), range: "1d", expanded: expanded, unit: hourly.result?.unit ?? '°', fitDomain: true, height: expanded ? 180 : 88 }), expanded ? (_jsx(Box, { mt: 2, children: _jsx(Flex, { css: { overflowX: 'auto', paddingBottom: 4 }, children: hours.map((hour) => {
                                 const rain = rainText(hour, hourly.result?.precipitationUnit);
-                                return (_jsxs(Flex, { direction: "column", align: "center", gap: 1.5, background: "surfaceRaised", radius: "card", px: 2, py: 3, children: [_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: hourName(hour.timestamp) }), _jsx(ConditionIcon, { condition: hour.condition, size: 26 }), _jsx(Typography, { as: "span", variant: "bodyStrong", children: degrees(hour.temperature) }), _jsxs(Flex, { direction: "column", align: "center", gap: 0.5, children: [rain ? _jsx(Metric, { icon: "lu:umbrella", children: rain }) : null, _jsx(WindMetric, { point: hour, unit: windUnit }), hour.humidity !== undefined ? (_jsxs(Metric, { icon: "lu:droplets", children: [Math.round(hour.humidity), "%"] })) : null, hour.uvIndex !== undefined && hour.uvIndex > 0 ? (_jsxs(Metric, { icon: "lu:sun", children: ["UV ", tenths(hour.uvIndex)] })) : null] })] }, hour.timestamp));
+                                return (_jsxs(Flex, { direction: "column", align: "center", gap: 1.5, px: 2, py: 1, css: { flex: '1 0 84px' }, children: [_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: hourName(hour.timestamp) }), _jsx(ConditionIcon, { condition: hour.condition, size: 26 }), _jsx(Typography, { as: "span", variant: "bodyStrong", children: degrees(hour.temperature) }), _jsxs(Flex, { direction: "column", align: "center", gap: 0.5, children: [rain ? _jsx(Metric, { icon: "lu:umbrella", children: rain }) : null, _jsx(WindMetric, { point: hour, unit: windUnit }), hour.humidity !== undefined ? (_jsxs(Metric, { icon: "lu:droplets", children: [Math.round(hour.humidity), "%"] })) : null, hour.uvIndex !== undefined && hour.uvIndex > 0 ? (_jsxs(Metric, { icon: "lu:sun", children: ["UV ", tenths(hour.uvIndex)] })) : null] })] }, hour.timestamp));
                             }) }) })) : (_jsx(Flex, { justify: "space-between", mt: 1, children: along.map((hour) => (_jsxs(Flex, { direction: "column", align: "center", gap: 1, grow: 1, css: { flexBasis: 0 }, children: [_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: hourName(hour.timestamp) }), _jsx(ConditionIcon, { condition: hour.condition, size: 18 }), _jsx(Typography, { as: "span", variant: "label", children: degrees(hour.temperature) })] }, hour.timestamp))) }))] })) : null, days.length > 0 ? (_jsxs(Flex, { direction: "column", gap: 2, children: [_jsxs(Typography, { as: "h3", variant: "label", color: "textMuted", m: 0, children: [days.length, " days"] }), _jsx(Flex, { as: "ul", direction: "column", gap: 1, m: 0, p: 0, css: { listStyle: 'none' }, children: days.map((day) => {
                             const rain = rainText(day, daily.result?.precipitationUnit);
                             return (_jsxs(Flex, { as: "li", align: "center", gap: 3, py: 1.5, children: [_jsx(Typography, { as: "span", variant: "body", width: 104, noWrap: true, children: dayName(day.timestamp, now) }), _jsx(ConditionIcon, { condition: day.condition, size: 20 }), _jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", width: expanded ? 90 : 40, noWrap: true, children: rain ?? '' }), _jsx(Typography, { as: "span", variant: "label", color: "textMuted", width: 36, css: { textAlign: 'right' }, children: degrees(day.low) }), _jsx(Box, { grow: 1, height: 6, radius: "full", background: "surfaceRaised", position: "relative", children: span > 0 && day.low !== undefined && day.temperature !== undefined ? (_jsx(Box, { position: "absolute", height: 6, radius: "full", background: "accent", css: {

package/dist/gallery/fixtures.d.ts

@@ -1,4 +1,10 @@
-import { LocalClient, MockIntegration } from '@hashsome/core';
+import { LocalClient, MockIntegration, type BrowseQuery, type BrowseResult } from '@hashsome/core';
+/** The gallery's backend: the mock, with one player whose shelves never finish loading, to show the
+ * loading state of the library. */
+declare class GalleryIntegration extends MockIntegration {
+    browse(entityId: string, query: BrowseQuery): Promise<BrowseResult>;
+}
 /** Mock entities covering every state the components handle. Refs are `ha:<id>`. */
-export declare function createGalleryIntegration(): MockIntegration;
+export declare function createGalleryIntegration(): GalleryIntegration;
 export declare function createGalleryClient(): LocalClient;
+export {};

package/dist/gallery/fixtures.js

@@ -4,9 +4,18 @@ import { LocalClient, mockAction, mockClimate, mockLibrary, mockLight, mockMedia
 const DEMO_ARTWORK = `${import.meta.env.BASE_URL}artwork.jpg`;
 const power = (watts) => mockSensor({ name: 'Power', value: watts, unit: 'W', measurement: 'power' });
 const energy = (kwh) => mockSensor({ name: 'Energy', value: kwh, unit: 'kWh', measurement: 'energy' });
+/** The gallery's backend: the mock, with one player whose shelves never finish loading, to show the
+ * loading state of the library. */
+class GalleryIntegration extends MockIntegration {
+    browse(entityId, query) {
+        return entityId === 'media_player.loading' && query.path !== undefined
+            ? new Promise(() => { })
+            : super.browse(entityId, query);
+    }
+}
 /** Mock entities covering every state the components handle. Refs are `ha:<id>`. */
 export function createGalleryIntegration() {
-    return new MockIntegration({
+    return new GalleryIntegration({
         library: mockLibrary(),
         entities: {
             'light.plain_on': mockLight({ name: 'Lamp', on: true }),
@@ -108,7 +117,11 @@ export function createGalleryIntegration() {
                 duration: 231,
                 positionUpdatedAt: new Date().toISOString(),
                 shuffle: false,
-                capabilities: { browse: true, search: true, seek: true, shuffle: true },
+                capabilities: { browse: true, search: true, seek: true, shuffle: true, queue: true },
+            }),
+            'media_player.loading': mockMediaPlayer({
+                name: 'Slow library',
+                capabilities: { browse: true, search: true },
             }),
             'media_player.off': mockMediaPlayer({
                 name: 'Kitchen Speaker',