@hashsome/ui 0.1.0 → 0.3.0

package/dist/entities/artwork-ring.d.ts

@@ -2,7 +2,7 @@ import type { SeekHold } from './media-seek.ts';
 /** The player's artwork in a circle, like the one in the bar but larger: an inner outline around
  * it, and an outer ring that shows how far along playback is. With `onSeek` the ring is a slider:
  * drag around it, or use the arrow keys. Not exported from the package: `MediaPlayerColumn` and
- * `MediaPlayerPage` draw it. */
+ * `MediaPlayerFull` draw it. */
 export declare function ArtworkRing({ artworkUrl, seek, duration, seekable, onOpen, size: SIZE, }: {
     artworkUrl?: string | undefined;
     /** The position to draw and the way to change it, shared with whatever shows the time. */

package/dist/entities/artwork-ring.js

@@ -9,23 +9,47 @@ const DEFAULT_SIZE = 168;
 /** The player's artwork in a circle, like the one in the bar but larger: an inner outline around
  * it, and an outer ring that shows how far along playback is. With `onSeek` the ring is a slider:
  * drag around it, or use the arrow keys. Not exported from the package: `MediaPlayerColumn` and
- * `MediaPlayerPage` draw it. */
+ * `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/climate-tile.d.ts

@@ -12,7 +12,7 @@ export interface ClimateTileProps {
     icon?: IconName;
     /** Power-draw chart for the drawer, above `history`. No default source yet — pass explicitly. */
     energy?: EnergyChartProps;
-    /** Recent activity, shown in the drawer. No default source yet — pass explicitly. */
+    /** Recent activity, shown in the drawer: who or what changed it, and when. Left out, it comes from the backend's own record when it keeps one (Home Assistant's logbook), fetched when the drawer opens. */
     history?: LogbookEntry[];
 }
 /** Heater / thermostat: a mode button that opens mode swatches in the card, a target temperature

package/dist/entities/climate-tile.js

@@ -44,7 +44,7 @@ export function ClimateTile({ entity, name, icon, energy, history }) {
         temperature: Math.min(max, Math.max(min, Math.round(value * 100) / 100)),
     });
     const setMode = (next) => void handle.command('setMode', { mode: next });
-    return (_jsx(Tile, { label: name ?? climate?.name ?? fallbackName(entity), icon: icon ?? 'lu:thermometer', kind: "Climate", status: status, secondary: current !== undefined ? `${current} ${unit}` : undefined, detail: _jsx(ClimateDetailBody, { climate: climate, mode: mode, modes: modes, target: target, current: current, step: step, min: min, max: max, unit: unit, onMode: setMode, onTarget: setTarget, onPreset: (preset) => void handle.command('setPreset', { preset }) }), ...(energy ? { energy } : {}), ...(history ? { history } : {}), ...(ready && picking
+    return (_jsx(Tile, { label: name ?? climate?.name ?? fallbackName(entity), icon: icon ?? 'lu:thermometer', kind: "Climate", status: status, secondary: current !== undefined ? `${current} ${unit}` : undefined, detail: _jsx(ClimateDetailBody, { climate: climate, mode: mode, modes: modes, target: target, current: current, step: step, min: min, max: max, unit: unit, onMode: setMode, onTarget: setTarget, onPreset: (preset) => void handle.command('setPreset', { preset }) }), ...(energy ? { energy } : {}), ...(history ? { history } : {}), ...(typeof entity === 'string' ? { logbook: entity } : {}), ...(ready && picking
             ? {
                 // A render prop `Tile` calls, not a component of its own.
                 // oxlint-disable-next-line react/no-unstable-nested-components

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

@@ -15,7 +15,7 @@ export interface LightTileProps {
     /** Power-draw chart (e.g. a Shelly's energy monitoring), shown in the drawer above `history`.
      * No default source yet — pass explicitly. */
     energy?: EnergyChartProps;
-    /** Recent activity, shown in the drawer. No default source yet — pass explicitly. */
+    /** Recent activity, shown in the drawer: who or what changed it, and when. Left out, it comes from the backend's own record when it keeps one (Home Assistant's logbook), fetched when the drawer opens. */
     history?: LogbookEntry[];
     /** Swatches shown when the palette button is opened. Default: four white temperatures. Each takes `kelvin` (color-temp lights) and/or `hs` (color lights) and is skipped if the light can't apply it. */
     colors?: LightColorPreset[];

package/dist/entities/light-tile.js

@@ -49,7 +49,7 @@ export function LightTile({ entity, name, icon, energy, history, colors = DEFAUL
                         const [hue, saturation] = rgbToHs(picked);
                         void handle.command('setColor', { hue, saturation });
                     }
-                } })) : null }), ...(energy ? { energy } : {}), ...(history ? { history } : {}), ...(dimmable
+                } })) : null }), ...(energy ? { energy } : {}), ...(history ? { history } : {}), ...(typeof entity === 'string' ? { logbook: entity } : {}), ...(dimmable
             ? {
                 fill: on ? (brightness ?? 1) : 0,
                 onFillChange: (fill) => void handle.command('setBrightness', { brightness: fill }),

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,93 @@ 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' }, 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 width and height of a theater card's artwork. */
+/** 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. */
+const MIN_CARD = 120;
+/** What a theater card needs under its artwork for the title and subtitle. */
+const LABEL = 56;
+/** The artwork's side: `CARD`, or less when the row it sits in is shorter than the card and its labels (`cqh` is a percent of that row's height). */
+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", width: CARD, 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", width: CARD, height: CARD, 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: CARD - 54 }, 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

@@ -15,7 +15,8 @@ import { usePressFeedback, useVolumeControl } from './media-controls.js';
 import { Cover } from '../layout/cover.js';
 import { PlainButton } from '../layout/plain-button.js';
 import { MediaBrowser } from './media-browser.js';
-import { MediaPlayerBody } from './media-player-body.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(MediaPlayerBody, { 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

@@ -7,7 +7,8 @@ import { IconButton } from '../layout/tile.js';
 import { DrawerTrigger } from '../layout/use-drawer.js';
 import { useHold } from '../layout/use-hold.js';
 import { MediaBrowser } from './media-browser.js';
-import { MediaPlayerBody } from './media-player-body.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(MediaPlayerBody, { 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

@@ -0,0 +1,22 @@
+/** @jsxImportSource @emotion/react */
+import type { EntityRef } from '@hashsome/core';
+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`. */
+    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. */
+    wide?: boolean;
+}
+/** 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;

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

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Box, Flex } from 'e-prim';
+import { fallbackName } from '../entity-handle.js';
+import { useEntityHandle } from '../hooks.js';
+import { useDetail } from '../layout/detail-provider.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;
+/** 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 }) {
+    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] }));
+}

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

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 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 `MediaPlayerPage` are its public forms. */
+ * the package; `MediaPlayerColumn` and `MediaPlayerFull` are its public forms. */
 export declare function NowPlaying({ handle, fallback, name, extra, onOpenArtwork, size, shuffle: shufflePlacement, }: {
     handle: EntityHandle<'mediaPlayer'>;
     /** What to call the player before it reports a name. */

package/dist/entities/now-playing.js

@@ -12,7 +12,7 @@ import { useSeekHold } from './media-seek.js';
 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 `MediaPlayerPage` are its public forms. */
+ * the package; `MediaPlayerColumn` and `MediaPlayerFull` are its public forms. */
 export function NowPlaying({ handle, fallback, name, extra, onOpenArtwork, size, shuffle: shufflePlacement = 'transport', }) {
     const player = handle.entity;
     const { status } = handle;

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

@@ -22,7 +22,7 @@ export interface TopBarProps {
     dashboards?: DashboardOption[];
     /** Compact circular buttons that fire `scene.turn_on` directly (not the `Tile`-based `SceneButton`); a bare entity ref uses the default icon and an auto-assigned color, or pass `{ entity, icon, color }` to pick either. */
     scenes?: (EntityRef | TopBarScene)[];
-    /** Current weather as a pill with an icon for the sky and a rounded whole-degree reading. A weather entity, like `ha:weather.forecast_home`, shows its real condition; a plain sensor, e.g. an outdoor temperature, gets a fixed sun. */
+    /** Current weather as a pill with an icon for the sky and a rounded whole-degree reading. A weather entity, like `ha:weather.forecast_home`, shows its real condition, today's high and low once its forecast has loaded, and opens the forecast (the next 24 hours and the days ahead) when tapped, if its source has one; a plain sensor, e.g. an outdoor temperature, gets a fixed sun and no forecast. */
     weather?: EntityRef;
     /** Your own component(s) for the right-hand side, after the weather: a security mode picker, a custom status. Whatever it is, it sits in the bar's row and is yours to style. */
     extra?: ReactNode;