@hashsome/ui 0.5.0 → 0.6.0

package/dist/debug.d.ts

@@ -0,0 +1,27 @@
+/** What the debug menu can set the theme to. `sun` follows the project's daylight sensor, so it is only offered when there is one. */
+export type ThemeChoice = 'light' | 'dark' | 'system' | 'sun';
+export declare const THEME_CHOICES: ThemeChoice[];
+/** Whether the build or run was asked for the debug menu: `HASHSOME_DEBUG=1` (or `true`) in the
+ * environment of `hashsome dev` or `hashsome build`. A production build has it only if it was built with it. */
+export declare function debugFromEnv(): boolean;
+/** What the debug menu has set, kept on the device and handed down by `HashsomeProvider`. */
+export interface DebugState {
+    /** The module grid is drawn over the page. */
+    grid: boolean;
+    setGrid: (on: boolean) => void;
+    /** The theme the menu chose, over the one the project configured; `null` until it chooses. */
+    themeChoice: ThemeChoice | null;
+    setThemeChoice: (choice: ThemeChoice | null) => void;
+    /** The page should be fullscreen: the first touch after a reload makes it so again. */
+    fullscreen: boolean;
+    setFullscreen: (on: boolean) => void;
+}
+export declare const DebugContext: import("react").Context<DebugState>;
+/** What the debug menu has set; everything off outside a `HashsomeProvider`. */
+export declare function useDebug(): DebugState;
+/** The state `HashsomeProvider` keeps: read from the device once, written back on each change. */
+export declare function useDebugState(): DebugState;
+/** Keeps the page's fullscreen as `wanted` says. A browser only allows entering fullscreen in answer
+ * to a touch, so after a reload (which always leaves it) the first touch puts the page back; leaving
+ * it by the system's own gesture turns `wanted` off, so the next touch does not pull it back in. */
+export declare function useFullscreenKept(wanted: boolean, setWanted: (on: boolean) => void): void;

package/dist/debug.js

@@ -0,0 +1,95 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+export const THEME_CHOICES = ['light', 'dark', 'system', 'sun'];
+const GRID_KEY = 'hashsome:grid';
+const THEME_KEY = 'hashsome:theme';
+const FULLSCREEN_KEY = 'hashsome:fullscreen';
+/** Whether the build or run was asked for the debug menu: `HASHSOME_DEBUG=1` (or `true`) in the
+ * environment of `hashsome dev` or `hashsome build`. A production build has it only if it was built with it. */
+export function debugFromEnv() {
+    return typeof HASHSOME_DEBUG_ON !== 'undefined' && HASHSOME_DEBUG_ON === true;
+}
+function read(key) {
+    try {
+        return localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+}
+function write(key, value) {
+    try {
+        if (value === null) {
+            localStorage.removeItem(key);
+        }
+        else {
+            localStorage.setItem(key, value);
+        }
+    }
+    catch {
+        // Without storage the choice just lasts until the page is closed.
+    }
+}
+const OFF = {
+    grid: false,
+    setGrid: () => undefined,
+    themeChoice: null,
+    setThemeChoice: () => undefined,
+    fullscreen: false,
+    setFullscreen: () => undefined,
+};
+export const DebugContext = createContext(OFF);
+/** What the debug menu has set; everything off outside a `HashsomeProvider`. */
+export function useDebug() {
+    return useContext(DebugContext);
+}
+/** The state `HashsomeProvider` keeps: read from the device once, written back on each change. */
+export function useDebugState() {
+    const [grid, setGridState] = useState(() => read(GRID_KEY) === 'on');
+    const [fullscreen, setFullscreenState] = useState(() => read(FULLSCREEN_KEY) === 'on');
+    const [themeChoice, setThemeState] = useState(() => {
+        const kept = read(THEME_KEY);
+        return THEME_CHOICES.find((choice) => choice === kept) ?? null;
+    });
+    // Stable: the setters are dependencies of effects, and a new one each render would run them each render.
+    const setGrid = useCallback((on) => {
+        write(GRID_KEY, on ? 'on' : null);
+        setGridState(on);
+    }, []);
+    const setThemeChoice = useCallback((choice) => {
+        write(THEME_KEY, choice);
+        setThemeState(choice);
+    }, []);
+    const setFullscreen = useCallback((on) => {
+        write(FULLSCREEN_KEY, on ? 'on' : null);
+        setFullscreenState(on);
+    }, []);
+    return useMemo(() => ({ grid, setGrid, themeChoice, setThemeChoice, fullscreen, setFullscreen }), [grid, setGrid, themeChoice, setThemeChoice, fullscreen, setFullscreen]);
+}
+/** Keeps the page's fullscreen as `wanted` says. A browser only allows entering fullscreen in answer
+ * to a touch, so after a reload (which always leaves it) the first touch puts the page back; leaving
+ * it by the system's own gesture turns `wanted` off, so the next touch does not pull it back in. */
+export function useFullscreenKept(wanted, setWanted) {
+    useEffect(() => {
+        if (typeof document === 'undefined' || !document.fullscreenEnabled) {
+            return;
+        }
+        const enter = () => {
+            if (wanted && !document.fullscreenElement) {
+                document.documentElement.requestFullscreen({ navigationUI: 'hide' }).catch(() => undefined);
+            }
+        };
+        const onChange = () => {
+            if (!document.fullscreenElement && wanted) {
+                setWanted(false);
+            }
+        };
+        document.addEventListener('fullscreenchange', onChange);
+        if (wanted && !document.fullscreenElement) {
+            window.addEventListener('pointerup', enter, { once: true });
+        }
+        return () => {
+            document.removeEventListener('fullscreenchange', onChange);
+            window.removeEventListener('pointerup', enter);
+        };
+    }, [wanted, setWanted]);
+}

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

@@ -3,7 +3,7 @@ import type { SeekHold } from './media-seek.ts';
  * 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
  * `MediaPlayerFull` draw it. */
-export declare function ArtworkRing({ artworkUrl, seek, duration, seekable, onOpen, size: SIZE, }: {
+export declare function ArtworkRing({ artworkUrl, seek, duration, seekable, onOpen, size: SIZE, maxSize, }: {
     artworkUrl?: string | undefined;
     /** The position to draw and the way to change it, shared with whatever shows the time. */
     seek: SeekHold;
@@ -12,6 +12,8 @@ export declare function ArtworkRing({ artworkUrl, seek, duration, seekable, onOp
     seekable: boolean;
     /** Makes the artwork itself a button, for opening something (the library). */
     onOpen?: (() => void) | undefined;
-    /** The ring's diameter in px. Default 168. */
+    /** The ring's diameter in px, when there is room for it; it shrinks in a column that is shorter. Default 168. */
     size?: number;
+    /** The most it grows to, in px, when the column has more room than `size` (a card stretched beside other cards). Default: as far as the width allows. */
+    maxSize?: number;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/entities/artwork-ring.js

@@ -6,11 +6,13 @@ import { Icon } from '../icon.js';
 import { Cover } from '../layout/cover.js';
 /** The ring's diameter when none is given. */
 const DEFAULT_SIZE = 168;
+/** The smallest it shrinks to, when the space is short. */
+const MIN_SIZE = 72;
 /** 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
  * `MediaPlayerFull` draw it. */
-export function ArtworkRing({ artworkUrl, seek, duration, seekable, onOpen, size: SIZE = DEFAULT_SIZE, }) {
+export function ArtworkRing({ artworkUrl, seek, duration, seekable, onOpen, size: SIZE = DEFAULT_SIZE, maxSize = Infinity, }) {
     const ring = useRef(null);
     /** 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`). */
@@ -60,67 +62,82 @@ export function ArtworkRing({ artworkUrl, seek, duration, seekable, onOpen, size
         event.preventDefault();
         seek.commit(Math.min(total, Math.max(0, Math.round((shown ?? 0) + step))));
     };
-    return (_jsxs(Box, { position: "relative", width: SIZE, height: SIZE, mx: "auto", css: { flex: 'none' }, children: [_jsx(Box, { ref: ring, position: "absolute", cursor: total !== undefined ? 'pointer' : 'default', ...(total !== undefined
-                    ? {
-                        role: 'slider',
-                        tabIndex: 0,
-                        'aria-label': 'Position',
-                        'aria-valuemin': 0,
-                        'aria-valuemax': Math.round(total ?? 0),
-                        'aria-valuenow': Math.round(shown ?? 0),
-                        onKeyDown,
-                        onPointerDown: (event) => {
-                            const box = event.currentTarget.getBoundingClientRect();
-                            const distance = Math.hypot(event.clientX - (box.left + box.width / 2), event.clientY - (box.top + box.height / 2));
-                            // Only the ring itself seeks, not the artwork inside it.
-                            if (distance < box.width * 0.4) {
-                                return;
-                            }
-                            // 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(Math.round(turn * total));
-                        },
-                        onPointerMove: (event) => {
-                            if (drag.current) {
-                                seek.preview(follow(event) ?? 0);
-                            }
-                        },
-                        onPointerUp: (event) => {
-                            if (drag.current) {
-                                const next = follow(event);
-                                drag.current = null;
-                                if (next !== undefined) {
-                                    seek.commit(next);
+    return (_jsx(Box, { css: {
+            flex: `1 1 ${SIZE}px`,
+            minHeight: MIN_SIZE,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            containerType: 'size',
+        }, children: _jsxs(Box, { position: "relative", css: {
+                aspectRatio: '1',
+                // A browser that does not know container units keeps the first, fixed size.
+                width: [
+                    `${SIZE}px`,
+                    `min(100cqw, 100cqh, ${Math.max(maxSize, SIZE)}px)`,
+                ],
+                flex: 'none',
+            }, children: [_jsx(Box, { ref: ring, position: "absolute", cursor: total !== undefined ? 'pointer' : 'default', ...(total !== undefined
+                        ? {
+                            role: 'slider',
+                            tabIndex: 0,
+                            'aria-label': 'Position',
+                            'aria-valuemin': 0,
+                            'aria-valuemax': Math.round(total ?? 0),
+                            'aria-valuenow': Math.round(shown ?? 0),
+                            onKeyDown,
+                            onPointerDown: (event) => {
+                                const box = event.currentTarget.getBoundingClientRect();
+                                const distance = Math.hypot(event.clientX - (box.left + box.width / 2), event.clientY - (box.top + box.height / 2));
+                                // Only the ring itself seeks, not the artwork inside it.
+                                if (distance < box.width * 0.4) {
+                                    return;
+                                }
+                                // 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(Math.round(turn * total));
+                            },
+                            onPointerMove: (event) => {
+                                if (drag.current) {
+                                    seek.preview(follow(event) ?? 0);
+                                }
+                            },
+                            onPointerUp: (event) => {
+                                if (drag.current) {
+                                    const next = follow(event);
+                                    drag.current = null;
+                                    if (next !== undefined) {
+                                        seek.commit(next);
+                                    }
                                 }
-                            }
-                        },
-                        // A touch the browser took or lost never ends with a release: let go of the position.
-                        onPointerCancel: () => {
-                            drag.current = null;
-                            seek.cancel();
-                        },
-                        onLostPointerCapture: () => {
-                            if (drag.current) {
+                            },
+                            // A touch the browser took or lost never ends with a release: let go of the position.
+                            onPointerCancel: () => {
                                 drag.current = null;
                                 seek.cancel();
-                            }
-                        },
-                    }
-                    : {}), css: { inset: 0, touchAction: 'none' }, children: _jsxs("svg", { viewBox: "0 0 100 100", width: SIZE, height: SIZE, "aria-hidden": "true", children: [_jsx("circle", { cx: "50", cy: "50", r: "47", fill: "none", strokeWidth: "3", css: ({ palette }) => ({ stroke: palette.border }) }), fraction !== undefined ? (_jsx("circle", { cx: "50", cy: "50", r: "47", fill: "none", strokeWidth: "3", strokeLinecap: "round", pathLength: 100, strokeDasharray: `${fraction * 100} 100`, transform: "rotate(-90 50 50)", css: ({ palette }) => ({ stroke: palette.accent }) })) : null] }) }), _jsx(Box, { position: "absolute", radius: "full", border: true, css: { inset: '9%' } }), _jsx(Flex, { center: true, position: "absolute", radius: "full", overflow: "hidden", background: "surfaceRaised", color: "textMuted", cursor: onOpen ? 'pointer' : 'inherit', css: { inset: '14%' }, ...(onOpen
-                    ? {
-                        role: 'button',
-                        tabIndex: 0,
-                        'aria-label': 'Open media browser',
-                        title: 'Open media browser',
-                        onClick: onOpen,
-                        onKeyDown: (event) => {
-                            if (event.key === 'Enter' || event.key === ' ') {
-                                event.preventDefault();
-                                onOpen();
-                            }
-                        },
-                    }
-                    : {}), children: artworkUrl ? _jsx(Cover, { src: artworkUrl }) : _jsx(Icon, { name: "lu:music", size: 40 }) })] }));
+                            },
+                            onLostPointerCapture: () => {
+                                if (drag.current) {
+                                    drag.current = null;
+                                    seek.cancel();
+                                }
+                            },
+                        }
+                        : {}), css: { inset: 0, touchAction: 'none' }, children: _jsxs("svg", { viewBox: "0 0 100 100", width: "100%", height: "100%", "aria-hidden": "true", children: [_jsx("circle", { cx: "50", cy: "50", r: "47", fill: "none", strokeWidth: "3", css: ({ palette }) => ({ stroke: palette.border }) }), fraction !== undefined ? (_jsx("circle", { cx: "50", cy: "50", r: "47", fill: "none", strokeWidth: "3", strokeLinecap: "round", pathLength: 100, strokeDasharray: `${fraction * 100} 100`, transform: "rotate(-90 50 50)", css: ({ palette }) => ({ stroke: palette.accent }) })) : null] }) }), _jsx(Box, { position: "absolute", radius: "full", border: true, css: { inset: '9%' } }), _jsx(Flex, { center: true, position: "absolute", radius: "full", overflow: "hidden", background: "surfaceRaised", color: "textMuted", cursor: onOpen ? 'pointer' : 'inherit', css: { inset: '14%' }, ...(onOpen
+                        ? {
+                            role: 'button',
+                            tabIndex: 0,
+                            'aria-label': 'Open media browser',
+                            title: 'Open media browser',
+                            onClick: onOpen,
+                            onKeyDown: (event) => {
+                                if (event.key === 'Enter' || event.key === ' ') {
+                                    event.preventDefault();
+                                    onOpen();
+                                }
+                            },
+                        }
+                        : {}), children: artworkUrl ? _jsx(Cover, { src: artworkUrl }) : _jsx(Icon, { name: "lu:music", size: 40 }) })] }) }));
 }

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

@@ -7,9 +7,11 @@ export interface MediaBrowserProps {
     onPlay?: (item: BrowseItem) => void;
     /** How items are laid out. `list` is rows, compact enough for a narrow drawer. `theater` is a single row of large cards that scrolls sideways, for a wide space. `auto` is `theater` inside an expanded drawer and `list` anywhere else. Default `list`. */
     layout?: 'list' | 'theater' | 'auto';
+    /** How the search is offered, for a library that can be searched. `bar` is a field above the list. `icon` is a search icon at the right end of the row of tabs (or of the heading), after a thin line, which becomes the field when pressed, in that same row, so search takes no room of its own; its close button puts the tabs back. Default `bar`. */
+    search?: 'bar' | 'icon';
 }
 /** The library of a media player, in the app's own style: shelves, albums, playlists and the rest
  * as rows with artwork. Tap a folder to open it, a track or station to play it, or the play button
  * on an album, playlist or artist to play all of it. A search box appears when the library can be
  * searched. */
-export declare function MediaBrowser({ entity, onPlay, layout }: MediaBrowserProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MediaBrowser({ entity, onPlay, layout, search: searchMode, }: MediaBrowserProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/entities/media-browser.js

@@ -1,5 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Box, Flex, Typography } from 'e-prim';
+import { AnimatePresence, motion } from 'motion/react';
+import { useState } from 'react';
 import { Icon } from '../icon.js';
 import { useEntityHandle } from '../hooks.js';
 import { useDetail } from '../layout/detail-provider.js';
@@ -12,6 +14,8 @@ 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';
+/** The height of the search field, and of the row of tabs it replaces. */
+const SEARCH_HEIGHT = 36;
 const KIND_ICONS = {
     folder: 'lu:folder',
     artist: 'lu:mic-vocal',
@@ -25,11 +29,13 @@ const KIND_ICONS = {
  * as rows with artwork. Tap a folder to open it, a track or station to play it, or the play button
  * on an album, playlist or artist to play all of it. A search box appears when the library can be
  * searched. */
-export function MediaBrowser({ entity, onPlay, layout = 'list' }) {
+export function MediaBrowser({ entity, onPlay, layout = 'list', search: searchMode = 'bar', }) {
     const handle = useEntityHandle('mediaPlayer', entity);
     const { detail } = useDetail();
     const theater = layout === 'theater' || (layout === 'auto' && detail?.expanded === true);
     const browser = useMediaBrowser(entity);
+    // `icon`: the field is open (or has something in it); otherwise only the icon is there.
+    const [searchOpen, setSearchOpen] = useState(false);
     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;
@@ -61,21 +67,41 @@ export function MediaBrowser({ entity, onPlay, layout = 'list' }) {
      * 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", 
+    const canSearch = player?.capabilities.search === true;
+    const onDemand = searchMode === 'icon' && canSearch;
+    const fieldShown = onDemand && (searchOpen || browser.query !== '');
+    const closeSearch = () => {
+        browser.search('');
+        setSearchOpen(false);
+    };
+    /** `icon`: a thin line and the search icon, fixed at the end of the row. */
+    const searchTrigger = onDemand ? (_jsxs(Flex, { align: "center", gap: 2, css: { flexShrink: 0 }, children: [_jsx(Box, { width: 1, height: 20, background: "border" }), _jsx(PlainButton, { "aria-label": "Search", title: "Search", onClick: () => setSearchOpen(true), center: true, color: "textMuted", width: SEARCH_HEIGHT, height: SEARCH_HEIGHT, css: { flex: 'none' }, children: _jsx(Icon, { name: "lu:search", size: 18 }) })] })) : 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, searchTrigger] }));
+    const search = canSearch ? (_jsxs(Flex, { align: "center", gap: 2, background: "surfaceRaised", radius: "full", px: 3, height: SEARCH_HEIGHT, 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 ? (_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}`))) }))] }));
+        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), ...(onDemand
+                    ? {
+                        autoFocus: true,
+                        onKeyDown: (event) => {
+                            if (event.key === 'Escape') {
+                                closeSearch();
+                            }
+                        },
+                    }
+                    : {}), css: { background: 'none', outline: 'none' } }), onDemand ? (_jsx(PlainButton, { "aria-label": "Close search", title: "Close search", onClick: closeSearch, center: true, css: { flex: 'none' }, children: _jsx(Icon, { name: "lu:x", size: 16 }) })) : 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;
+    /** The categories (and, with `search='icon'`, the search icon at the end). */
+    const tabsRow = browser.tabs ? (_jsxs(Flex, { align: "center", gap: 3, ...(onDemand ? { minHeight: SEARCH_HEIGHT } : {}), 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, 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}`))) }))] }));
 }
 /** 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. */

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

@@ -119,7 +119,7 @@ const stacked = ({ radius, spacing, density, }) => ({
  * line along the top that fills while the press is timed, like a tile's. */
 function HoldCard({ open, status, rows, volumeOpen, children, }) {
     const hold = useHold(() => open?.(), open !== undefined);
-    const card = (_jsxs(Flex, { position: "relative", align: "center", grow: 1, minWidth: 0, gap: 3, pl: 2.25, pr: 3, background: "surface", radius: "full", overflow: "hidden", "data-status": status, "data-rows": rows === 2 ? 2 : undefined, "data-volume-open": volumeOpen, css: (theme) => ({
+    const card = (_jsxs(Flex, { position: "relative", align: "center", grow: 1, minWidth: 0, gap: 3, pl: 2.25, pr: 3, background: "surface", radius: "full", overflow: "hidden", "data-grid-card": true, "data-status": status, "data-rows": rows === 2 ? 2 : undefined, "data-volume-open": volumeOpen, css: (theme) => ({
             minHeight: theme.density.tileHeight,
             // In one row the volume slider takes the track's place; in two it has its own row.
             '&[data-volume-open="true"] > [data-part="track"], &[data-volume-open="true"] > [data-part="time"]': { display: 'none' },

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

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

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

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

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

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

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

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