@hashsome/ui 0.10.0 → 0.11.0

package/dist/entities/media-browser.js

@@ -18,6 +18,18 @@ 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;
+/** The name of each kind of thing a search finds, on the chip that narrows the results to it. */
+const KIND_LABELS = {
+    album: 'Albums',
+    artist: 'Artists',
+    track: 'Tracks',
+    playlist: 'Playlists',
+    radio: 'Radio',
+    folder: 'Folders',
+    other: 'Other',
+};
+/** The chip for every kind at once. */
+const ALL_KINDS = 'all';
 const KIND_ICONS = {
     folder: 'lu:folder',
     artist: 'lu:mic-vocal',
@@ -95,9 +107,23 @@ export function MediaBrowser({ entity, onPlay, layout = 'list', search: searchMo
                             }
                         },
                     }
-                    : {}), 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) => 
+                    : {}), css: {
+                    background: 'none',
+                    outline: 'none',
+                    // A search field gets a clear button of the browser's own in some browsers, and this one has its own
+                    // (and a button to close it), so the browser's is not drawn.
+                    '&::-webkit-search-cancel-button, &::-webkit-search-decoration': {
+                        WebkitAppearance: 'none',
+                        appearance: 'none',
+                        display: '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). While a search has results, the
+     * same row is the kinds to narrow it to: the shelves mean nothing to a search's results, which belong to none. */
+    const tabsRow = browser.tabs ? (_jsxs(Flex, { align: "center", gap: 3, ...(onDemand ? { minHeight: SEARCH_HEIGHT } : {}), children: [_jsx(Flex, { direction: "column", grow: 1, minWidth: 0, children: browser.searching && browser.kindsPending ? (_jsx(KindsSkeleton, {})) : browser.searching && browser.kinds ? (_jsx(ChipRow, { tabs: true, options: [
+                        { value: ALL_KINDS, label: 'All' },
+                        ...browser.kinds.map((kind) => ({ value: kind, label: KIND_LABELS[kind] })),
+                    ], value: browser.kind ?? ALL_KINDS, onChange: (id) => browser.filterBy(id === ALL_KINDS ? undefined : id) })) : (_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
@@ -107,11 +133,15 @@ export function MediaBrowser({ entity, onPlay, layout = 'list', search: searchMo
                             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;
+                        : { 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, 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. */
+/** Where the kinds to narrow a search to will be, in the chips' own height, so the list below does not move. */
+function KindsSkeleton() {
+    return (_jsx(Flex, { gap: 2, "aria-busy": "true", css: { height: CHIP_HEIGHT }, children: [40, 78, 74, 70, 62].map((width) => (_jsx(Skeleton, { width: width, height: CHIP_HEIGHT, radius: "full" }, width))) }));
+}
 function BrowseSkeleton({ theater }) {
     return theater ? (_jsx(Flex, { as: "ul", role: "status", "aria-label": "Loading", "aria-busy": "true", gap: 4, m: 0, p: 0, pb: 2, css: { ...THEATER_STAGE, listStyle: 'none', overflow: 'hidden' }, children: Array.from({ length: 12 }, (_, index) => (_jsxs(Flex, { as: "li", direction: "column", gap: 2, css: { flex: 'none', width: CARD_SIZE }, children: [_jsx(Skeleton, { width: CARD_SIZE, height: CARD_SIZE, radius: "card" }), _jsxs(Flex, { direction: "column", gap: 1, px: 1, children: [_jsx(Skeleton, { width: "70%", height: 14 }), _jsx(Skeleton, { width: "45%", height: 12 })] })] }, index))) })) : (_jsx(Flex, { as: "ul", role: "status", "aria-label": "Loading", "aria-busy": "true", direction: "column", gap: 1, m: 0, p: 0, css: { listStyle: 'none' }, children: Array.from({ length: 6 }, (_, index) => (_jsxs(Flex, { as: "li", align: "center", gap: 3, py: 1.5, px: 2, children: [_jsx(Skeleton, { width: 44, height: 44 }), _jsxs(Flex, { direction: "column", gap: 1.5, grow: 1, children: [_jsx(Skeleton, { width: "60%", height: 14 }), _jsx(Skeleton, { width: "35%", height: 12 })] })] }, index))) }));
 }

package/dist/layout/debug-menu.js

@@ -85,6 +85,9 @@ export function DebugMenu({ configured, sun, }) {
     };
     const theme = debug.themeChoice ?? configuredChoice(configured);
     return (_jsxs(Flex, { ref: root, "data-debug-menu": true, 
+        // Over the page and its navigation but under a drawer and its scrim, so opening a drawer covers it
+        // instead of leaving it floating over the drawer.
+        zIndex: "dropdown", 
         // As big as the button, whatever the page's own rules say: the document shell makes every `div`
         // that is a child of `body` at least as tall as the window (`body > div { min-height: 100% }`),
         // which this is, and the button would sit at the top of it.
@@ -92,7 +95,6 @@ export function DebugMenu({ configured, sun, }) {
             position: 'fixed',
             left: INSET,
             bottom: INSET,
-            zIndex: 30,
             width: BUTTON,
             height: BUTTON,
             minHeight: 0,

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

@@ -1,4 +1,4 @@
-import type { BrowseItem, EntityRef } from '@hashsome/core';
+import type { BrowseItem, BrowseKind, EntityRef } from '@hashsome/core';
 export interface MediaBrowserState {
     /** What is listed now. */
     items: BrowseItem[];
@@ -27,6 +27,14 @@ export interface MediaBrowserState {
     query: string;
     /** Lists what matches `text`; an empty string goes back to where the browser was. */
     search(text: string): void;
+    /** The kinds of thing the search found (albums, playlists…), when it found any, so there is something to narrow it to (to a lone kind too, which brings far more of it than the mixed list); in a fixed order. Absent when not searching. While another search is on its way these are the last one's, so what is shown does not flicker as someone types. */
+    kinds: BrowseKind[] | undefined;
+    /** Searching, with no kinds to show yet (the first answer has not come) and nothing from an earlier search to show instead: a placeholder for them. */
+    kindsPending: boolean;
+    /** The kind the results are narrowed to; absent for all of them. */
+    kind: BrowseKind | undefined;
+    /** Narrows the search results to one kind, which asks for more of it than the mixed list has, or back to all of them. */
+    filterBy(kind: BrowseKind | undefined): void;
 }
 /** Walks a player's own media library through the runtime. The top level is read once: shelves
  * become tabs (the first is open to begin with), anything else is a plain list. Below it, a stack

package/dist/use-media-browser.js

@@ -1,6 +1,18 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useReconnects } from './hooks.js';
 import { useClient } from './provider.js';
+/** The order the kinds of a search result are offered in: what is played most, first. */
+const KIND_ORDER = [
+    'track',
+    'playlist',
+    'album',
+    'artist',
+    'radio',
+    'folder',
+    'other',
+];
+/** The kinds among some items, in the order they are offered. */
+const kindsOf = (items) => KIND_ORDER.filter((candidate) => items.some((item) => item.kind === candidate));
 /** A top level that is nothing but folders to look inside is a set of shelves, which read better
  * as tabs than as a list that always looks the same. */
 const isShelves = (items) => items.length >= 2 && items.every((item) => item.expandable && !item.playable);
@@ -16,6 +28,12 @@ export function useMediaBrowser(ref) {
     const [trail, setTrail] = useState([{}]);
     const [text, setText] = useState('');
     const [tab, setTab] = useState();
+    // The kind of result chosen to narrow a search to; only counts while that kind is among the results.
+    const [kindChoice, setKindChoice] = useState();
+    // The search with no kind chosen: it says which kinds there are, and is the list while none is chosen.
+    const [overview, setOverview] = useState(null);
+    // The kinds the last answered search found, kept while the next one is on its way.
+    const [lastKinds, setLastKinds] = useState();
     // Answers are kept with the request they answer, so a stale one is never shown for a new one.
     const [top, setTop] = useState(null);
     const [answer, setAnswer] = useState(null);
@@ -34,13 +52,49 @@ export function useMediaBrowser(ref) {
     const atTop = trail.length === 1;
     const tabs = top && !top.error && isShelves(top.items) ? top.items : undefined;
     const selected = tabs ? (tabs.find((item) => item.id === tab) ?? tabs[0])?.id : undefined;
-    // What to ask for, if anything: a search, a folder, or the open tab. A top level that is not
-    // shelves is already in hand.
+    // The kinds the search found, once it has answered, and the one chosen if it is among them.
+    const overviewKey = `search:${needle}`;
+    const found = searching && overview?.key === overviewKey ? overview : null;
+    const foundKinds = found ? kindsOf(found.items) : undefined;
+    if (!searching && lastKinds !== undefined) {
+        setLastKinds(undefined);
+    }
+    // What to offer: this search's kinds once they are in, the last search's until then.
+    const kinds = searching ? (foundKinds ?? lastKinds) : undefined;
+    const kind = kinds && kindChoice !== undefined && kinds.includes(kindChoice) ? kindChoice : undefined;
+    // What to ask for, if anything: a folder, the open tab, or one kind of a search's results. A top level
+    // that is not shelves is already in hand, and so is the search with no kind chosen.
     const path = atTop ? selected : here.path;
-    const key = searching ? `search:${needle}` : `path:${path ?? ''}`;
+    const key = searching ? `search:${needle}:${kind ?? ''}` : `path:${path ?? ''}`;
     const result = answer?.key === key ? answer : null;
+    // The search with no kind chosen, always: its kinds are the choices, whichever one is showing.
     useEffect(() => {
-        const request = searching ? { search: needle } : path === undefined ? undefined : { path };
+        if (!searching) {
+            return;
+        }
+        let current = true;
+        const timer = setTimeout(() => {
+            client.browse(ref, { search: needle }).then((level) => {
+                if (current) {
+                    setOverview({ key: `search:${needle}`, ...level });
+                    setLastKinds(kindsOf(level.items));
+                }
+            }, (error) => current && setOverview({ key: `search:${needle}`, items: [], error: messageOf(error) }));
+        }, 300);
+        return () => {
+            current = false;
+            clearTimeout(timer);
+        };
+        // oxlint-disable-next-line react/exhaustive-effect-dependencies
+    }, [client, ref, searching, needle, reconnects]);
+    useEffect(() => {
+        const request = searching && kind
+            ? { search: needle, kind }
+            : searching
+                ? undefined
+                : path === undefined
+                    ? undefined
+                    : { path };
         if (!request) {
             return;
         }
@@ -48,18 +102,33 @@ export function useMediaBrowser(ref) {
         const timer = setTimeout(() => {
             client.browse(ref, request).then((level) => current && setAnswer({ key, ...level }), (error) => current && setAnswer({ key, items: [], error: messageOf(error) }));
         }, 
-        // Typing in the search box waits for a pause; opening a folder or a tab does not.
-        searching ? 300 : 0);
+        // Typing in the search box waits for a pause; opening a folder or a tab or choosing a kind does not.
+        0);
         return () => {
             current = false;
             clearTimeout(timer);
         };
         // oxlint-disable-next-line react/exhaustive-effect-dependencies
-    }, [client, ref, key, searching, needle, path, reconnects]);
-    const open = useCallback((item) => setTrail((levels) => [...levels, { path: item.id, title: item.title, item }]), []);
+    }, [client, ref, key, searching, needle, kind, path, reconnects]);
+    // Opening what a search found (an album, a playlist) shows it in place of the results: the search steps
+    // aside, and going back from it returns to the results.
+    const open = useCallback((item) => {
+        const from = text.trim();
+        setTrail((levels) => [
+            ...levels,
+            {
+                path: item.id,
+                title: item.title,
+                item,
+                ...(from !== '' ? { from: { text: from, kind } } : {}),
+            },
+        ]);
+        setText('');
+    }, [text, kind]);
     const selectTab = useCallback((id) => {
         setTab(id);
         setText('');
+        setKindChoice(undefined);
         setTrail([{}]);
     }, []);
     const back = useCallback(() => {
@@ -67,13 +136,18 @@ export function useMediaBrowser(ref) {
             setText('');
             return;
         }
+        const left = trail.at(-1);
         setTrail((levels) => (levels.length > 1 ? levels.slice(0, -1) : levels));
-    }, [text]);
+        if (trail.length > 1 && left?.from !== undefined) {
+            setText(left.from.text);
+            setKindChoice(left.from.kind);
+        }
+    }, [text, trail]);
     // The plain top-level list, when there are no shelves to make tabs of.
-    const listing = !searching && atTop && !tabs ? top : result;
+    const listing = searching && !kind ? found : !searching && atTop && !tabs ? top : result;
     return {
         items: listing?.items ?? [],
-        listKey: searching ? 'search' : `path:${path ?? 'top'}`,
+        listKey: searching ? `search:${kind ?? ''}` : `path:${path ?? 'top'}`,
         title: searching
             ? (result?.title ?? `Results for “${needle}”`)
             : atTop
@@ -91,5 +165,9 @@ export function useMediaBrowser(ref) {
         back,
         query: text,
         search: setText,
+        kinds: kinds && kinds.length >= 1 ? kinds : undefined,
+        kindsPending: searching && foundKinds === undefined && !(lastKinds && lastKinds.length >= 1),
+        kind,
+        filterBy: setKindChoice,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashsome/ui",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Design system components and hooks",
   "type": "module",
   "exports": {
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@emotion/react": "11.14.0",
-    "@hashsome/core": "0.10.0",
+    "@hashsome/core": "0.11.0",
     "e-prim": "2.0.1",
     "motion": "13.4.5",
     "react": "19.3.0",