@hashsome/ui 0.4.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,56 +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);
+    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;
-                                if (next !== undefined) {
-                                    seek.commit(next);
+                                seek.cancel();
+                            },
+                            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();
                                 }
-                            }
-                        },
-                    }
-                    : {}), 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 }) })] }));
+                            },
+                        }
+                        : {}), children: artworkUrl ? _jsx(Cover, { src: artworkUrl }) : _jsx(Icon, { name: "lu:music", size: 40 }) })] }) }));
 }

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

@@ -19,6 +19,8 @@ export interface LightTileProps {
     history?: LogbookEntry[];
     /** Swatches shown when the palette button is opened. Default: four white temperatures. Each takes `kelvin` (color-temp lights) and/or `hs` (color lights) and is skipped if the light can't apply it. */
     colors?: LightColorPreset[];
+    /** Holding the tile opens a drawer with the full controls, the color bars, the energy chart and the recent activity. `false` leaves the tile as it is without it: a toggle that dims by dragging, with the color swatches if the light has color, and no drawer built, which is lighter on a small display. Default `true`. */
+    drawer?: boolean;
 }
 /** Toggle, drag-to-dim (if dimmable) and a color overlay + drawer picker (if color capable). */
-export declare function LightTile({ entity, name, icon, energy, history, colors, }: LightTileProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function LightTile({ entity, name, icon, energy, history, colors, drawer, }: LightTileProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/entities/light-tile.js

@@ -14,7 +14,7 @@ const kelvinGradient = (min, max) => `linear-gradient(to right, ${[0, 0.25, 0.5,
     .map((f) => rgbCss(kelvinToRgb(min + f * (max - min))))
     .join(', ')})`;
 /** Toggle, drag-to-dim (if dimmable) and a color overlay + drawer picker (if color capable). */
-export function LightTile({ entity, name, icon, energy, history, colors = DEFAULT_COLOR_PRESETS, }) {
+export function LightTile({ entity, name, icon, energy, history, colors = DEFAULT_COLOR_PRESETS, drawer = true, }) {
     const handle = useEntityHandle('light', entity);
     const [picking, setPicking] = useState(false);
     const [colorOpen, setColorOpen] = useState(false);
@@ -36,20 +36,24 @@ export function LightTile({ entity, name, icon, energy, history, colors = DEFAUL
         return data ? [{ preset, data }] : [];
     });
     const showPicker = color && status === 'ready';
-    return (_jsx(Tile, { label: name ?? light?.name ?? fallbackName(entity), icon: icon ?? (on ? 'lu:lightbulb' : 'lu:lightbulb-off'), kind: "Light", status: status, active: on, secondary: on ? (dimmable && percent !== undefined ? `${percent}%` : undefined) : 'Off', onPress: () => void handle.command('toggle'), detail: _jsx(LightDetailBody, { on: on, percent: dimmable ? percent : undefined, onToggle: () => void handle.command('toggle'), ...(dimmable
-                ? {
-                    onBrightness: (next) => void handle.command('setBrightness', { brightness: next / 100 }),
-                }
-                : {}), colorSection: showPicker ? (_jsx(LightColorSection, { light: light, open: colorOpen, onToggle: () => setColorOpen((open) => !open), supportsTemp: supportsTemp, supportsHs: supportsHs, onKelvin: (kelvin) => void handle.command('setColorTemperature', { kelvin }), onHue: (hue) => void handle.command('setColor', {
-                    hue,
-                    saturation: currentHs(light)[1] || 100,
-                }), onPicked: (hex) => {
-                    const picked = hexToRgb(hex);
-                    if (picked) {
-                        const [hue, saturation] = rgbToHs(picked);
-                        void handle.command('setColor', { hue, saturation });
-                    }
-                } })) : null }), ...(energy ? { energy } : {}), ...(history ? { history } : {}), ...(typeof entity === 'string' ? { logbook: entity } : {}), ...(dimmable
+    return (_jsx(Tile, { label: name ?? light?.name ?? fallbackName(entity), icon: icon ?? (on ? 'lu:lightbulb' : 'lu:lightbulb-off'), kind: "Light", status: status, active: on, secondary: on ? (dimmable && percent !== undefined ? `${percent}%` : undefined) : 'Off', onPress: () => void handle.command('toggle'), ...(drawer
+            ? {
+                detail: (_jsx(LightDetailBody, { on: on, percent: dimmable ? percent : undefined, onToggle: () => void handle.command('toggle'), ...(dimmable
+                        ? {
+                            onBrightness: (next) => void handle.command('setBrightness', { brightness: next / 100 }),
+                        }
+                        : {}), colorSection: showPicker ? (_jsx(LightColorSection, { light: light, open: colorOpen, onToggle: () => setColorOpen((open) => !open), supportsTemp: supportsTemp, supportsHs: supportsHs, onKelvin: (kelvin) => void handle.command('setColorTemperature', { kelvin }), onHue: (hue) => void handle.command('setColor', {
+                            hue,
+                            saturation: currentHs(light)[1] || 100,
+                        }), onPicked: (hex) => {
+                            const picked = hexToRgb(hex);
+                            if (picked) {
+                                const [hue, saturation] = rgbToHs(picked);
+                                void handle.command('setColor', { hue, saturation });
+                            }
+                        } })) : null })),
+            }
+            : {}), ...(drawer && energy ? { energy } : {}), ...(drawer && history ? { history } : {}), ...(drawer && typeof entity === 'string' ? { logbook: entity } : {}), ...(dimmable
             ? {
                 fill: on ? (brightness ?? 1) : 0,
                 onFillChange: (fill) => void handle.command('setBrightness', { brightness: fill }),
@@ -69,11 +73,16 @@ export function LightTile({ entity, name, icon, energy, history, colors = DEFAUL
                                 : handle.command('setColor', data.args));
                             setPicking(false);
                         },
-                    })), customLabel: "Custom color", onCustom: () => {
-                        setPicking(false);
-                        setColorOpen(true);
-                        openDetail();
-                    } })),
+                    })), ...(drawer
+                        ? {
+                            customLabel: 'Custom color',
+                            onCustom: () => {
+                                setPicking(false);
+                                setColorOpen(true);
+                                openDetail();
+                            },
+                        }
+                        : {}) })),
             }
             : {}), trailing: showPicker ? (_jsx(IconButton, { icon: picking ? 'lu:x' : 'lu:palette', label: picking ? 'Close colors' : 'Color', active: false, onClick: () => setPicking((open) => !open), size: 16, ...(on && paletteColor && !picking ? { color: paletteColor } : {}) })) : null }));
 }

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.d.ts

@@ -9,6 +9,14 @@ export interface MediaPlayerBarProps {
     name?: string;
     /** Content for the media browser shown with the player in the drawer. Holding the card or pressing the artwork opens the drawer; the browse button opens it expanded. 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 browse button. */
     browse?: ReactNode | false;
+    /** `false` builds no drawer: holding the card, pressing the artwork and the browse button then do nothing, which is lighter on a small display. Default `true`. See `onOpen` to send them somewhere else instead. */
+    drawer?: boolean;
+    /** Called instead of opening the drawer when the card is held, the artwork pressed or the browse button pressed: for a dashboard with a page of its own for the player (a `MediaPlayerFull`), `onOpen={() => navigate('/bathroom/music')}`. Given, no drawer is built. The browse button stays unless `browse` is `false`. */
+    onOpen?: () => void;
+    /** The library and the queue each open as a full-size overlay of their own, from the browse button and a new queue button, instead of one drawer with the whole player in it: for a small display, where the card itself is the player. 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, unless `onOpen` is given. Default `false`. */
+    overlays?: boolean;
+    /** `1` puts the controls beside the track, in one pill; `2` puts them on a second row under it, for a narrow space (a small wall display). Default `'auto'`: one row, and two once the bar is narrower than 560 px wide. */
+    rows?: 1 | 2 | 'auto';
 }
 /** Now playing with previous / play-pause / next and a volume control, for a media player entity. */
-export declare function MediaPlayerBar({ entity, name, browse }: MediaPlayerBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MediaPlayerBar({ entity, name, browse, drawer, onOpen, overlays, rows, }: MediaPlayerBarProps): import("@emotion/react/jsx-runtime").JSX.Element;