@hashsome/ui 0.7.0 → 0.9.0

package/dist/entities/attention-dot.d.ts

@@ -0,0 +1,4 @@
+/** The dot at the corner of a nav item: its ring is the rail's own color, so it reads as cut out of the button. */
+export declare function AttentionDot({ level }: {
+    level: 'notice' | 'urgent';
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/entities/attention-dot.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { Flex } from 'e-prim';
+/** The dot at the corner of a nav item: its ring is the rail's own color, so it reads as cut out of the button. */
+export function AttentionDot({ level }) {
+    return (_jsx(Flex, { as: "span", "aria-hidden": "true", position: "absolute", width: 10, height: 10, radius: "full", css: ({ palette }) => ({
+            top: 6,
+            right: 6,
+            background: level === 'urgent' ? palette.danger : palette.warm,
+            boxShadow: `0 0 0 2px ${palette.rail}`,
+        }) }));
+}

package/dist/entities/media-browser.js

@@ -10,10 +10,12 @@ 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 { Spinner } from '../layout/spinner.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';
+import { trackMedia, useMediaPending } from './media-pending.js';
 /** The height of the search field, and of the row of tabs it replaces. */
 const SEARCH_HEIGHT = 36;
 const KIND_ICONS = {
@@ -39,6 +41,11 @@ export function MediaBrowser({ entity, onPlay, layout = 'list', search: searchMo
     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;
+    /** Asking the player to play something can take it many seconds; until it answers, the item and the
+     * player say so. */
+    const waiting = useMediaPending(entity);
+    const ask = (kind, item, args) => trackMedia(entity, { kind, item: item.id, label: item.title }, handle.command('playMedia', args));
+    const askedOf = (item) => waiting.filter((entry) => entry.item === item.id).map((entry) => entry.kind);
     /** 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) => {
@@ -46,17 +53,17 @@ export function MediaBrowser({ entity, onPlay, layout = 'list', search: searchMo
         const within = item.kind === 'track' && container && ['album', 'playlist'].includes(container.kind)
             ? container
             : undefined;
-        void handle.command('playMedia', {
+        ask('playItem', item, {
             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 playNext = (item) => ask('queueNext', item, { item: item.id, mode: 'next' });
+    const addToQueue = (item) => ask('queueAdd', item, { item: item.id, mode: 'add' });
     const shuffleAll = (item) => {
-        void handle.command('playMedia', { item: item.id, mode: 'replace', shuffle: true });
+        ask('playItem', item, { 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. */
@@ -101,7 +108,7 @@ export function MediaBrowser({ entity, onPlay, layout = 'list', search: searchMo
                             ariaLabel: 'Back',
                         }
                         : { value: item.id, label: item.title }), value: browser.activeTab, onChange: (id) => id === browser.activeTab && inside ? browser.back() : browser.selectTab(id) }) }), actionsHere, searchTrigger] })) : null;
-    return (_jsxs(Flex, { direction: "column", gap: 3, minHeight: 0, position: "relative", children: [onDemand ? (_jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.div, { initial: { opacity: 0, x: fieldShown ? 28 : 0 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: fieldShown ? 0 : 28 }, transition: { duration: 0.18, ease: 'easeOut' }, children: fieldShown ? search : browser.tabs === undefined ? header : tabsRow }, fieldShown ? 'field' : 'row') })) : (_jsxs(_Fragment, { children: [browser.tabs === undefined ? header : null, search, tabsRow] })), 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}`))) }))] }));
+    return (_jsxs(Flex, { direction: "column", gap: 3, minHeight: 0, position: "relative", children: [onDemand ? (_jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.div, { initial: { opacity: 0, x: fieldShown ? 28 : 0 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: fieldShown ? 0 : 28 }, transition: { duration: 0.18, ease: 'easeOut' }, children: fieldShown ? search : browser.tabs === undefined ? header : tabsRow }, fieldShown ? 'field' : 'row') })) : (_jsxs(_Fragment, { children: [browser.tabs === undefined ? header : null, search, tabsRow] })), 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, asked: askedOf(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, asked: askedOf(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. */
@@ -118,11 +125,11 @@ 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, }) {
+function BrowseRow({ item, asked, 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", 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] }));
+    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: [_jsxs(Flex, { align: "center", justify: "center", background: "surfaceRaised", color: "textMuted", radius: "small", width: 44, height: 44, overflow: "hidden", position: "relative", css: { flex: 'none' }, children: [item.artworkUrl ? (_jsx(Cover, { src: item.artworkUrl })) : (_jsx(Icon, { name: KIND_ICONS[item.kind], size: 20 })), asked.includes('playItem') ? _jsx(Waiting, { size: 20 }) : null] }), _jsxs(Flex, { direction: "column", minWidth: 0, grow: 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.expandable ? _jsx(Opens, {}) : null] }), queueable && item.playable ? (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: "lu:list-start", label: `Play ${item.title} next`, glyph: 16, disabled: asked.includes('queueNext'), feedback: asked.includes('queueNext') ? 'pending' : undefined, onClick: onNext }), _jsx(IconButton, { icon: "lu:list-plus", label: `Add ${item.title} to the queue`, glyph: 16, disabled: asked.includes('queueAdd'), feedback: asked.includes('queueAdd') ? 'pending' : undefined, onClick: onAdd })] })) : null, item.expandable && item.playable ? (_jsx(IconButton, { icon: "lu:play", label: `Play ${item.title}`, glyph: 16, disabled: asked.includes('playItem'), feedback: asked.includes('playItem') ? 'pending' : undefined, 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
@@ -143,7 +150,26 @@ 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, queueable, onOpen, onPlay, onAdd, }) {
+function BrowseCard({ item, asked, 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", 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] }));
+    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: [_jsxs(Flex, { align: "center", justify: "center", background: "surfaceRaised", color: "textMuted", radius: item.kind === 'artist' ? 'full' : 'card', overflow: "hidden", position: "relative", css: { width: CARD_SIZE, height: CARD_SIZE }, children: [item.artworkUrl ? (_jsx(Cover, { src: item.artworkUrl })) : (_jsx(Icon, { name: KIND_ICONS[item.kind], size: 56 })), asked.includes('playItem') ? _jsx(Waiting, { size: 32 }) : null] }), _jsxs(Flex, { direction: "column", minWidth: 0, px: 1, children: [_jsxs(Flex, { align: "center", gap: 1, minWidth: 0, children: [_jsx(Typography, { as: "span", variant: "bodyStrong", css: { minWidth: 0 }, children: _jsx(MarqueeText, { children: item.title }) }), item.expandable ? _jsx(Opens, {}) : null] }), 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, disabled: asked.includes('queueAdd'), feedback: asked.includes('queueAdd') ? 'pending' : undefined, onClick: onAdd })) : null, item.expandable ? (_jsx(IconButton, { icon: "lu:play", label: `Play ${item.title}`, glyph: 16, disabled: asked.includes('playItem'), feedback: asked.includes('playItem') ? 'pending' : undefined, onClick: onPlay })) : null] })) : null] }));
+}
+/** Over an item's artwork while the player has not answered a request to play it. */
+function Waiting({ size }) {
+    return (_jsx(Flex, { align: "center", justify: "center", position: "absolute", css: ({ palette }) => ({
+            inset: 0,
+            color: palette.text,
+            // The artwork is dimmed by a layer of the page's own color, under the spinner.
+            '&::before': {
+                content: '""',
+                position: 'absolute',
+                inset: 0,
+                background: palette.bg,
+                opacity: 0.6,
+            },
+        }), children: _jsx(Box, { position: "relative", css: { display: 'grid' }, children: _jsx(Spinner, { size: size }) }) }));
+}
+/** Marks something that opens (an album, a playlist, an artist, a folder) and is not played by a tap, as against a track. */
+function Opens() {
+    return (_jsx(Box, { color: "textMuted", css: { flex: 'none', display: 'grid' }, "aria-hidden": "true", children: _jsx(Icon, { name: "lu:chevron-right", size: 16 }) }));
 }

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

@@ -1,4 +1,6 @@
+import type { EntityRef } from '@hashsome/core';
 import type { EntityHandle } from '../entity-handle.ts';
+import type { MediaPlayerEntity, QueueResult } from '@hashsome/core';
 type Handle = EntityHandle<'mediaPlayer'>;
 /** The volume of a player as a 0..100 level plus the drag in progress: what to draw, and what a
  * drag, a commit and the mute button each ask the player to do. 0 is mute and anything above it
@@ -11,10 +13,26 @@ export declare function useVolumeControl(handle: Handle): {
     commit: (next: number) => void;
     toggleMute: () => void;
 };
-/** A press that changes nothing visible until the player reports back (a skip) confirms itself:
- * the button dims while the call is in flight, then flashes, or turns red on failure. */
-export declare function usePressFeedback(): {
-    feedbackFor: (key: string) => "done" | "error" | "pending" | undefined;
+/** A press that changes nothing visible until the player takes it up (play, pause, a skip, shuffle) shows it is
+ * waiting: the button is pending (a ring turns around it and it cannot be pressed again) until the player
+ * has changed, or turns red when the request fails. The pending part is shared per player, so every control
+ * of it agrees. */
+export declare function usePressFeedback(ref: EntityRef | undefined): {
+    feedbackFor: (key: string) => 'pending' | 'error' | undefined;
     press: (key: string, action: () => Promise<void>) => void;
 };
+/** What the transport buttons can do now, from the queue: Next when something comes after the track playing,
+ * Previous when something comes before it (or the track is far enough in to restart), Play when there is
+ * something loaded or queued. Without a queue to read (a player with none, or before it answers) nothing
+ * is held back: a button is only disabled for what is known. */
+export declare function transportAvailability(queue: QueueResult | undefined, player: MediaPlayerEntity | undefined, position: number | undefined): {
+    next: boolean;
+    previous: boolean;
+    play: boolean;
+};
+export declare function useTransportAvailability(player: MediaPlayerEntity | undefined, position: number | undefined): {
+    next: boolean;
+    previous: boolean;
+    play: boolean;
+};
 export {};

package/dist/entities/media-controls.js

@@ -1,4 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
+import { useMediaQueue } from '../use-media-queue.js';
+import { trackMedia, useMediaPending } from './media-pending.js';
 /** Unmuting while the level is 0 would restore silence, so it jumps to this instead. */
 const UNMUTE_FROM_ZERO = 0.15;
 /** The volume of a player as a 0..100 level plus the drag in progress: what to draw, and what a
@@ -32,22 +34,55 @@ export function useVolumeControl(handle) {
         },
     };
 }
-/** A press that changes nothing visible until the player reports back (a skip) confirms itself:
- * the button dims while the call is in flight, then flashes, or turns red on failure. */
-export function usePressFeedback() {
-    const [feedback, setFeedback] = useState(null);
+/** A press that changes nothing visible until the player takes it up (play, pause, a skip, shuffle) shows it is
+ * waiting: the button is pending (a ring turns around it and it cannot be pressed again) until the player
+ * has changed, or turns red when the request fails. The pending part is shared per player, so every control
+ * of it agrees. */
+export function usePressFeedback(ref) {
+    const waiting = useMediaPending(ref);
+    const [failed, setFailed] = useState(null);
     const timer = useRef(undefined);
     useEffect(() => () => clearTimeout(timer.current), []);
     return {
-        feedbackFor: (key) => (feedback?.key === key ? feedback.state : undefined),
+        feedbackFor: (key) => waiting.some((entry) => entry.kind === key)
+            ? 'pending'
+            : failed === key
+                ? 'error'
+                : undefined,
         press: (key, action) => {
             clearTimeout(timer.current);
-            setFeedback({ key, state: 'pending' });
-            action()
-                .then(() => setFeedback({ key, state: 'done' }), () => setFeedback({ key, state: 'error' }))
-                .finally(() => {
-                timer.current = setTimeout(() => setFeedback(null), 700);
+            setFailed(null);
+            const request = action();
+            if (ref) {
+                trackMedia(ref, { kind: key }, request);
+            }
+            request.catch(() => {
+                setFailed(key);
+                timer.current = setTimeout(() => setFailed(null), 700);
             });
         },
     };
 }
+/** Past this far into a track, Previous restarts it, so it has somewhere to go even on the first one. */
+const RESTART_AFTER_S = 3;
+/** What the transport buttons can do now, from the queue: Next when something comes after the track playing,
+ * Previous when something comes before it (or the track is far enough in to restart), Play when there is
+ * something loaded or queued. Without a queue to read (a player with none, or before it answers) nothing
+ * is held back: a button is only disabled for what is known. */
+export function transportAvailability(queue, player, position) {
+    const current = queue ? queue.items.findIndex((item) => item.current === true) : -1;
+    const known = queue !== undefined && current >= 0;
+    const index = known ? queue.offset + current : 0;
+    return {
+        next: !known || index + 1 < queue.total,
+        previous: !known || index > 0 || (position ?? 0) >= RESTART_AFTER_S,
+        play: queue === undefined ||
+            queue.total > 0 ||
+            player?.media?.title !== undefined ||
+            player?.playback === 'playing',
+    };
+}
+export function useTransportAvailability(player, position) {
+    const { queue } = useMediaQueue(player?.ref);
+    return transportAvailability(queue, player, position);
+}

package/dist/entities/media-loading-line.d.ts

@@ -0,0 +1,9 @@
+import type { EntityRef } from '@hashsome/core';
+/** What a player has been asked to start and is not ready with yet, as the line a player shows in the place
+ * of the artist: a spinner and "Loading <title>…". Nothing, when it has been asked nothing. Starting a
+ * playlist can take many seconds, during which the player would otherwise look as if nothing was happening. */
+export declare function useLoadingLabel(ref: EntityRef | undefined): string | undefined;
+export declare function LoadingLine({ label, variant }: {
+    label: string;
+    variant: 'body' | 'secondary';
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/entities/media-loading-line.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { Flex, Typography } from 'e-prim';
+import { Spinner } from '../layout/spinner.js';
+import { useMediaPending } from './media-pending.js';
+/** What a player has been asked to start and is not ready with yet, as the line a player shows in the place
+ * of the artist: a spinner and "Loading <title>…". Nothing, when it has been asked nothing. Starting a
+ * playlist can take many seconds, during which the player would otherwise look as if nothing was happening. */
+export function useLoadingLabel(ref) {
+    return useMediaPending(ref).find((entry) => entry.kind === 'playItem')?.label;
+}
+export function LoadingLine({ label, variant }) {
+    return (_jsxs(Flex, { align: "center", gap: 1.5, minWidth: 0, color: "accent", css: { minWidth: 0 }, children: [_jsx(Spinner, { size: variant === 'body' ? 14 : 12, label: "Loading" }), _jsxs(Typography, { as: "span", variant: variant, noWrap: true, textOverflow: "ellipsis", overflow: "hidden", children: ["Loading ", label, "\u2026"] })] }));
+}

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

@@ -0,0 +1,24 @@
+import type { EntityRef } from '@hashsome/core';
+/** Something asked of a player that has not taken effect yet. Starting an album or a playlist can take
+ * the player many seconds after it has acknowledged the request, a skip a few, and nothing on screen
+ * changes until it does: so the button, the item and the player say it is waiting. */
+export interface MediaPending {
+    /** What was asked. A transport command is its own name (`togglePlay`, `next`, `previous`, `setShuffle`);
+     * from the library: `playItem` (replaces what is playing, so the player says it is loading it), `queueNext`, `queueAdd`. */
+    kind: string;
+    /** For the library kinds: the item it was asked for. */
+    item?: string;
+    /** What to call it while it loads: the item's title. */
+    label?: string;
+}
+/** The most a request is shown as pending: a backend that never answers must not leave a ring for good. */
+export declare const PENDING_LIMIT_MS = 60000;
+/** Shows `entry` as pending for `ref` from now until the player has taken it up, whichever way: until it
+ * refuses it, or changes after acknowledging it, or a while after (`useMediaPending` reports the change). */
+export declare function trackMedia(ref: string, entry: MediaPending, request: Promise<unknown>): void;
+/** Forgets everything pending: for tests, which share this module between them. */
+export declare function resetMediaPending(): void;
+/** What is being asked of a player and has not taken effect yet: for a ring on the button, a spinner on
+ * the item, and a "loading" line on the player. Also watches the player for the change that ends the
+ * wait: a different track, play or pause, shuffle. */
+export declare function useMediaPending(ref: EntityRef | undefined): MediaPending[];

package/dist/entities/media-pending.js

@@ -0,0 +1,121 @@
+import { useEffect, useSyncExternalStore } from 'react';
+import { useEntity } from '../hooks.js';
+/** Asked and not in effect yet, for each player by ref. A new array each time it changes, which is
+ * what `useSyncExternalStore` compares. */
+const pending = new Map();
+const view = new Map();
+const listeners = new Set();
+const NONE = [];
+/** The most a request is shown as pending: a backend that never answers must not leave a ring for good. */
+export const PENDING_LIMIT_MS = 60_000;
+const lastSeen = new Map();
+/** Asks that change the track are done when another track plays, and not when it is only announced. */
+const changesTrack = (kind) => kind === 'next' || kind === 'previous' || kind === 'playItem';
+/** How long after the player acknowledges a request to wait for it to take effect, when it never
+ * visibly does (a skip back on a track already at its start). A skip or a start from the library
+ * takes the player several seconds. */
+const settleFor = (kind) => kind === 'playItem' ? 15_000 : kind === 'next' ? 10_000 : kind === 'previous' ? 4_000 : 2_000;
+/** A position past this many seconds means the track plays, and is not only announced. */
+const STARTED_AFTER_S = 0.05;
+/** At least this long is shown for a request, so a quick answer still shows a turn. */
+const MIN_SHOWN_MS = 600;
+const publish = (ref) => {
+    const list = pending.get(ref) ?? [];
+    if (list.length > 0) {
+        view.set(ref, list.map((waiting) => waiting.entry));
+    }
+    else {
+        view.delete(ref);
+    }
+    for (const listener of listeners) {
+        listener();
+    }
+};
+/** Shows `entry` as pending for `ref` from now until the player has taken it up, whichever way: until it
+ * refuses it, or changes after acknowledging it, or a while after (`useMediaPending` reports the change). */
+export function trackMedia(ref, entry, request) {
+    const waiting = { entry, answered: false, baseTitle: lastSeen.get(ref)?.title };
+    const started = Date.now();
+    pending.set(ref, [...(pending.get(ref) ?? []), waiting]);
+    publish(ref);
+    const timers = new Set();
+    const finish = () => {
+        for (const timer of timers) {
+            clearTimeout(timer);
+        }
+        const rest = (pending.get(ref) ?? []).filter((other) => other !== waiting);
+        if (rest.length > 0) {
+            pending.set(ref, rest);
+        }
+        else {
+            pending.delete(ref);
+        }
+        publish(ref);
+    };
+    timers.add(setTimeout(finish, PENDING_LIMIT_MS));
+    request.then(() => {
+        const shown = Date.now() - started;
+        const settle = settleFor(entry.kind);
+        waiting.answered = true;
+        const taken = () => {
+            // The player changed: done, once it has been shown for long enough.
+            timers.add(setTimeout(finish, Math.max(0, MIN_SHOWN_MS - (Date.now() - started))));
+        };
+        waiting.release = taken;
+        timers.add(setTimeout(finish, Math.max(settle, MIN_SHOWN_MS - shown)));
+        if (waiting.changed) {
+            taken();
+        }
+    }, finish);
+}
+/** The player changed: what it has acknowledged is now in effect, once it is as far as each ask needs. */
+function observe(ref, seen) {
+    lastSeen.set(ref, seen);
+    for (const waiting of pending.get(ref) ?? []) {
+        const done = !changesTrack(waiting.entry.kind) || (seen.title !== waiting.baseTitle && seen.started);
+        if (!done) {
+            continue;
+        }
+        if (waiting.answered) {
+            waiting.release?.();
+            waiting.release = undefined;
+        }
+        else {
+            waiting.changed = true;
+        }
+    }
+}
+/** Forgets everything pending: for tests, which share this module between them. */
+export function resetMediaPending() {
+    pending.clear();
+    view.clear();
+    lastSeen.clear();
+}
+const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+};
+/** What is being asked of a player and has not taken effect yet: for a ring on the button, a spinner on
+ * the item, and a "loading" line on the player. Also watches the player for the change that ends the
+ * wait: a different track, play or pause, shuffle. */
+export function useMediaPending(ref) {
+    const player = useEntity(ref);
+    const media = player?.kind === 'mediaPlayer' ? player : undefined;
+    const present = media !== undefined;
+    const title = media?.media?.title;
+    const started = media?.playback === 'playing' && (media.position ?? 0) >= STARTED_AFTER_S;
+    // Anything else the player does (play or pause, shuffle, another album) ends what was asked of it too.
+    const playback = media?.playback;
+    const album = media?.media?.album;
+    const shuffle = media?.shuffle;
+    useEffect(() => {
+        if (ref && present) {
+            observe(ref, { title, started });
+        }
+        // `playback`, `album` and `shuffle` are not read inside: a change to any of them is the reason to look again.
+        // oxlint-disable-next-line react/exhaustive-effect-dependencies
+    }, [ref, present, title, started, playback, album, shuffle]);
+    return useSyncExternalStore(subscribe, () => (ref ? (view.get(ref) ?? NONE) : NONE), () => NONE);
+}

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

@@ -11,13 +11,15 @@ import { HoldProgress } from '../layout/hold-progress.js';
 import { useHold } from '../layout/use-hold.js';
 import { IconButton } from '../layout/tile.js';
 import { statusLabels } from '../status.js';
-import { usePressFeedback, useVolumeControl } from './media-controls.js';
+import { usePressFeedback, useTransportAvailability, useVolumeControl } from './media-controls.js';
 import { Cover } from '../layout/cover.js';
+import { Spinner } from '../layout/spinner.js';
 import { PlainButton } from '../layout/plain-button.js';
 import { MediaBrowser } from './media-browser.js';
+import { LoadingLine, useLoadingLabel } from './media-loading-line.js';
 import { MediaPlayerFull } from './media-player-full.js';
 import { MediaQueue } from './media-queue.js';
-import { formatDuration, useMediaPosition } from './media-progress.js';
+import { formatDuration, useMediaPosition, useSteadyPlaying } from './media-progress.js';
 import { useSeekHold } from './media-seek.js';
 import { SeekLine } from './seek-line.js';
 /** Narrower than this, a bar with `rows="auto"` is two rows. */
@@ -137,14 +139,16 @@ export function MediaPlayerBar({ entity, name, browse, drawer = true, onOpen, ov
     const player = handle.entity;
     const status = handle.status;
     const [volumeOpen, setVolumeOpen] = useState(false);
+    const loading = useLoadingLabel(player?.ref);
     const ready = status === 'ready';
-    const playing = player?.playback === 'playing';
+    const playing = useSteadyPlaying(player);
     const muted = player?.muted === true;
     const caps = player?.capabilities;
-    const { feedbackFor, press } = usePressFeedback();
+    const { feedbackFor, press } = usePressFeedback(player?.ref);
     const volume = useVolumeControl(handle);
     const artwork = (_jsx(Flex, { as: "span", center: true, width: 30, height: 30, radius: "full", overflow: "hidden", background: "surfaceRaised", color: "textMuted", children: player?.media?.artworkUrl ? (_jsx(Cover, { src: player.media.artworkUrl })) : (_jsx(Icon, { name: "lu:music", size: 14 })) }));
     const position = useMediaPosition(player);
+    const can = useTransportAvailability(player, position);
     const seek = useSeekHold(ready ? position : undefined, caps?.seek ? (next) => void handle.command('seek', { position: next }) : undefined);
     const duration = ready ? player?.duration : undefined;
     const timed = seek.shown !== undefined && duration !== undefined && duration > 0;
@@ -164,10 +168,10 @@ export function MediaPlayerBar({ entity, name, browse, drawer = true, onOpen, ov
     const volumeSlider = (_jsxs(Flex, { as: motion.div, align: "center", gap: 2, grow: 1, minWidth: 0, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.15 }, "data-part": "volume", children: [_jsx(PlainButton, { as: motion.button, initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: VOLUME_SPRING, "aria-label": muted ? 'Unmute' : 'Mute', "aria-pressed": muted, title: muted ? 'Unmute' : 'Mute', onClick: volume.toggleMute, center: true, color: muted ? 'accent' : 'textMuted', css: { flex: 'none' }, children: _jsx(Icon, { name: muted ? 'lu:volume-x' : 'lu:volume-2', size: 16 }) }), _jsx(Flex, { as: motion.div, grow: 1, minWidth: 0, initial: { scaleX: 0.4, opacity: 0 }, animate: { scaleX: 1, opacity: 1 }, transition: { ...VOLUME_SPRING, delay: 0.04 }, css: { transformOrigin: 'left center' }, children: _jsx(ValueBar, { label: "Volume level", value: volume.shown, min: 0, max: 100, keyStep: 5, height: 10, onDrag: volume.drag, onCommit: volume.commit }) }), _jsxs(Typography, { as: motion.span, variant: "secondary", color: "textMuted", minWidth: 32, align: "right", css: { flex: 'none' }, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, delay: 0.1 }, children: [volume.shown, "%"] })] }));
     const trackInfo = (_jsx(_Fragment, { children: _jsxs(Flex, { "data-part": "track", direction: "column", grow: 1, minWidth: 0, ...(ready ? {} : { color: 'textMuted' }), children: [_jsxs(Flex, { align: "center", gap: 1.5, minWidth: 0, children: [_jsx(Typography, { as: "span", variant: "label", noWrap: true, textOverflow: "ellipsis", children: ready
                                 ? (player?.media?.title ?? 'Nothing playing')
-                                : statusLabels[status] }), ready && caps?.shuffle ? (_jsx(PlainButton, { "aria-label": "Shuffle", "aria-pressed": player?.shuffle === true, title: "Shuffle", onClick: () => void handle.command('setShuffle', { shuffle: player?.shuffle !== true }), center: true, color: player?.shuffle === true ? 'accent' : 'textMuted', css: { flex: 'none' }, children: _jsx(Icon, { name: "lu:shuffle", size: 14 }) })) : null] }), ready && player?.media?.artist ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", noWrap: true, textOverflow: "ellipsis", children: player.media.artist })) : null] }) }));
+                                : statusLabels[status] }), ready && caps?.shuffle ? (_jsx(PlainButton, { "aria-label": "Shuffle", "aria-pressed": player?.shuffle === true, title: "Shuffle", onClick: () => press('setShuffle', () => handle.command('setShuffle', { shuffle: player?.shuffle !== true })), center: true, color: player?.shuffle === true ? 'accent' : 'textMuted', css: { flex: 'none' }, children: feedbackFor('setShuffle') === 'pending' ? (_jsx(Spinner, { size: 14 })) : (_jsx(Icon, { name: "lu:shuffle", size: 14 })) })) : null] }), loading ? (_jsx(LoadingLine, { label: loading, variant: "secondary" })) : ready && player?.media?.artist ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", noWrap: true, textOverflow: "ellipsis", children: player.media.artist })) : null] }) }));
     const bar = (open, openExpanded, openQueue) => (_jsxs(HoldCard, { open: open, status: status, rows: rows, volumeOpen: volumeOpen && ready, children: [_jsx(Ring, { onOpen: open, fraction: progress, children: artwork }), trackInfo, timed ? (_jsxs(Typography, { as: "span", "data-part": "time", variant: "secondary", color: "textMuted", noWrap: true, css: { flex: 'none', fontVariantNumeric: 'tabular-nums' }, children: [formatDuration(seek.shown ?? 0), " / ", formatDuration(duration ?? 0)] })) : null, volumeOpen && ready ? volumeSlider : null, _jsxs(Flex, { "data-part": "tools", align: "center", gap: 3, css: { flex: 'none' }, children: [_jsx(IconButton, { icon: volumeOpen ? 'lu:x' : muted ? 'lu:volume-x' : 'lu:volume-2', label: volumeOpen ? 'Close volume' : 'Volume', glyph: MEDIA_GLYPH, disabled: !ready || (caps?.volume === false && caps.mute === false), onClick: () => setVolumeOpen((current) => !current) }), (overlays
                         ? openExpanded !== undefined
-                        : open && (onOpen ? browse !== false : browser !== undefined)) ? (_jsx(IconButton, { icon: "lu:library", label: "Browse media", glyph: MEDIA_GLYPH, onClick: () => (openExpanded ?? open)?.() })) : null, openQueue ? (_jsx(IconButton, { icon: "lu:list-music", label: "Queue", glyph: MEDIA_GLYPH, onClick: openQueue })) : null] }), _jsxs(Flex, { "data-part": "transport", align: "center", gap: 3, css: { flex: 'none' }, children: [_jsx(IconButton, { icon: "lu:skip-back", label: "Previous", glyph: MEDIA_GLYPH, disabled: !ready || caps?.previous === false, feedback: feedbackFor('previous'), onClick: () => press('previous', () => handle.command('previous')) }), _jsx(IconButton, { icon: playing ? 'lu:pause' : 'lu:play', label: playing ? 'Pause' : 'Play', glyph: MEDIA_GLYPH, disabled: !ready, primary: true, onClick: () => void handle.command('togglePlay') }), _jsx(IconButton, { icon: "lu:skip-forward", label: "Next", glyph: MEDIA_GLYPH, disabled: !ready || caps?.next === false, feedback: feedbackFor('next'), onClick: () => press('next', () => handle.command('next')) })] }), timed ? (_jsx(SeekLine, { seek: seek, duration: duration ?? 0, seekable: caps?.seek === true })) : null] }));
+                        : open && (onOpen ? browse !== false : browser !== undefined)) ? (_jsx(IconButton, { icon: "lu:library", label: "Browse media", glyph: MEDIA_GLYPH, onClick: () => (openExpanded ?? open)?.() })) : null, openQueue ? (_jsx(IconButton, { icon: "lu:list-music", label: "Queue", glyph: MEDIA_GLYPH, onClick: openQueue })) : null] }), _jsxs(Flex, { "data-part": "transport", align: "center", gap: 3, css: { flex: 'none' }, children: [_jsx(IconButton, { icon: "lu:skip-back", label: "Previous", glyph: MEDIA_GLYPH, disabled: !ready || caps?.previous === false || !can.previous, 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 || !can.play, primary: true, feedback: feedbackFor('togglePlay'), onClick: () => press('togglePlay', () => handle.command('togglePlay')) }), _jsx(IconButton, { icon: "lu:skip-forward", label: "Next", glyph: MEDIA_GLYPH, disabled: !ready || caps?.next === false || !can.next, 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.
     if (!ready) {

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

@@ -5,3 +5,7 @@ export declare function formatDuration(seconds: number): string;
  * moves it forward from there on its own clock, so the bar advances without a message per second.
  * `undefined` until the player reports a position. */
 export declare function useMediaPosition(player: MediaPlayerEntity | undefined): number | undefined;
+/** Whether to show the player as playing: `playback === 'playing'`, except that a player which flips to
+ * idle and back within a moment as a new track starts (as Music Assistant's do) does not make the button
+ * change to Play and back. A pause at any other time shows at once. */
+export declare function useSteadyPlaying(player: MediaPlayerEntity | undefined): boolean;

package/dist/entities/media-progress.js

@@ -28,3 +28,44 @@ export function useMediaPosition(player) {
     const position = player.position + elapsed;
     return player.duration === undefined ? position : Math.min(player.duration, position);
 }
+/** How long after a track changes the player may dip out of playing without the button showing it. */
+const NEW_TRACK_MS = 6000;
+/** How long such a dip has to last to be believed. */
+const DIP_MS = 800;
+/** Whether to show the player as playing: `playback === 'playing'`, except that a player which flips to
+ * idle and back within a moment as a new track starts (as Music Assistant's do) does not make the button
+ * change to Play and back. A pause at any other time shows at once. */
+export function useSteadyPlaying(player) {
+    const raw = player?.playback === 'playing';
+    const track = player?.media?.title;
+    // A track change opens a short window, in which a dip out of playing is held up for a moment.
+    const [seen, setSeen] = useState(track);
+    const [recent, setRecent] = useState(false);
+    if (seen !== track) {
+        setSeen(track);
+        setRecent(true);
+    }
+    useEffect(() => {
+        if (!recent) {
+            return;
+        }
+        const id = setTimeout(() => setRecent(false), NEW_TRACK_MS);
+        return () => clearTimeout(id);
+        // `track` is not read inside: another change of track restarts the window.
+        // oxlint-disable-next-line react/exhaustive-effect-dependencies
+    }, [recent, track]);
+    const [was, setWas] = useState(raw);
+    const [held, setHeld] = useState(false);
+    if (raw !== was) {
+        setWas(raw);
+        setHeld(!raw && recent);
+    }
+    useEffect(() => {
+        if (!held) {
+            return;
+        }
+        const id = setTimeout(() => setHeld(false), DIP_MS);
+        return () => clearTimeout(id);
+    }, [held]);
+    return raw || held;
+}

package/dist/entities/nav-dock.js

@@ -4,6 +4,7 @@ import { Flex } from 'e-prim';
 import { NavLink } from 'react-router';
 import { Icon } from '../icon.js';
 import { usePageInset } from '../layout/page.js';
+import { AttentionDot } from './attention-dot.js';
 import { useThemeToggle } from '../provider.js';
 /** Floating bottom pill for switching between a dashboard's pages. Must be rendered inside a
  * router. `position: fixed`, floating over the page; it reserves the space it takes in the
@@ -14,7 +15,7 @@ export function NavDock({ items, base, showThemeToggle }) {
             bottom: spacing(5),
             left: '50%',
             transform: 'translateX(-50%)',
-        }), children: [items.map((item) => (_jsx(NavLink, { to: item.to ? `${base}/${item.to}` : base, end: true, "aria-label": item.label, title: item.label, children: ({ isActive }) => (_jsx(Flex, { as: "span", align: "center", justify: "center", width: 44, height: 44, radius: "full", cursor: "pointer", color: isActive ? 'accentText' : 'line', ...(isActive ? { background: 'accent' } : {}), children: _jsx(Icon, { name: item.icon, size: 22 }) })) }, item.to))), showThemeToggle ? _jsx(ThemeToggleButton, {}) : null] }));
+        }), children: [items.map((item) => (_jsx(NavLink, { to: item.to ? `${base}/${item.to}` : base, end: true, "aria-label": item.attention ? `${item.label}, needs attention` : item.label, title: item.label, children: ({ isActive }) => (_jsxs(Flex, { as: "span", align: "center", justify: "center", width: 44, height: 44, radius: "full", cursor: "pointer", position: "relative", color: isActive ? 'accentText' : 'line', ...(isActive ? { background: 'accent' } : {}), children: [_jsx(Icon, { name: item.icon, size: 22 }), item.attention ? _jsx(AttentionDot, { level: item.attention }) : null] })) }, item.to))), showThemeToggle ? _jsx(ThemeToggleButton, {}) : null] }));
 }
 function ThemeToggleButton() {
     const { resolved, toggle } = useThemeToggle();

package/dist/entities/nav-rail.d.ts

@@ -4,6 +4,8 @@ export interface NavItem {
     to: string;
     label: string;
     icon: IconName;
+    /** A dot on the item for something on that page that needs a look: `notice` (warm) or `urgent` (red). Nothing by default. */
+    attention?: 'notice' | 'urgent';
 }
 export interface NavRailProps {
     /** The pages to link to; `to` is relative to `base`. */

package/dist/entities/nav-rail.js

@@ -5,12 +5,14 @@ import { NavLink } from 'react-router';
 import { Icon } from '../icon.js';
 import { usePageInset } from '../layout/page.js';
 import { useThemeToggle } from '../provider.js';
+import { NAV_RAIL } from '../theme/grid.js';
+import { AttentionDot } from './attention-dot.js';
 /** Fixed left sidebar for switching between a dashboard's pages. Must be rendered inside a
  * router. It is `position: fixed` and reserves its width in the surrounding `Page`, which pads
  * for it so content never sits under it. */
 export function NavRail({ items, base, showThemeToggle }) {
-    usePageInset('left', 76);
-    return (_jsxs(Flex, { as: "nav", "aria-label": "Pages", direction: "column", align: "center", gap: 2.5, background: "rail", width: 76, py: 6, position: "fixed", zIndex: "nav", css: { top: 0, bottom: 0, left: 0 }, children: [items.map((item) => (_jsx(NavLink, { to: item.to ? `${base}/${item.to}` : base, end: true, "aria-label": item.label, title: item.label, children: ({ isActive }) => (_jsx(Flex, { as: "span", align: "center", justify: "center", width: 44, height: 44, radius: "chrome", cursor: "pointer", color: isActive ? 'accentText' : 'line', ...(isActive ? { background: 'accent' } : {}), children: _jsx(Icon, { name: item.icon, size: 22 }) })) }, item.to))), showThemeToggle ? _jsx(ThemeToggleButton, {}) : null] }));
+    usePageInset('left', NAV_RAIL);
+    return (_jsxs(Flex, { as: "nav", "aria-label": "Pages", direction: "column", align: "center", gap: 2.5, background: "rail", width: NAV_RAIL, py: 6, position: "fixed", zIndex: "nav", css: { top: 0, bottom: 0, left: 0 }, children: [items.map((item) => (_jsx(NavLink, { to: item.to ? `${base}/${item.to}` : base, end: true, "aria-label": item.attention ? `${item.label}, needs attention` : item.label, title: item.label, children: ({ isActive }) => (_jsxs(Flex, { as: "span", align: "center", justify: "center", width: 44, height: 44, radius: "chrome", cursor: "pointer", position: "relative", color: isActive ? 'accentText' : 'line', ...(isActive ? { background: 'accent' } : {}), children: [_jsx(Icon, { name: item.icon, size: 22 }), item.attention ? _jsx(AttentionDot, { level: item.attention }) : null] })) }, item.to))), showThemeToggle ? _jsx(ThemeToggleButton, {}) : null] }));
 }
 function ThemeToggleButton() {
     const { resolved, toggle } = useThemeToggle();