@hanzo/ui 8.27.91 → 8.29.0

package/dist/product/ComboBox.cjs

@@ -13,32 +13,50 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * identical to every other menu and render correctly through the portal under a nested
  * `<Theme>` on gui-native hosts. The input row is the anchor (excluded from dismiss) and
  * the panel does NOT steal focus, so typing keeps filtering.
+ *
+ * Under `<Density value="compact">` it is the record kit's Autocomplete
+ * (twenty-ui's, MIT, NOTICE): one 32px field box, the chevron a quiet icon
+ * button inside its end rather than a control beside it. `limit` caps how many
+ * live options the list shows. A regular surface draws the row it always has.
  */
 const react_1 = require("react");
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const button_1 = require("../backends/gui/button.cjs");
+const density_1 = require("../backends/gui/density.cjs");
+const input_1 = require("../backends/gui/input.cjs");
+const input_group_1 = require("../backends/gui/input-group.cjs");
 const instrument_1 = require("./instrument.cjs");
 const filter_1 = require("./combobox/filter.cjs");
 const items_1 = require("./menu/items.cjs");
 const FloatingMenu_1 = require("./menu/FloatingMenu.cjs");
-function ComboBox({ value, onChange, options, loading = false, error = null, onRetry, placeholder, disabled, emptyText = 'No matches — press to use what you typed.', minWidth = 240, }) {
+function ComboBox({ value, onChange, options, loading = false, error = null, onRetry, placeholder, disabled, emptyText = 'No matches — press to use what you typed.', minWidth = 240, limit, }) {
     const [open, setOpen] = (0, react_1.useState)(false);
     const rowRef = (0, react_1.useRef)(null);
     const anchorRect = (0, react_1.useCallback)(() => rowRef.current?.getBoundingClientRect() ?? null, []);
     const anchorEl = (0, react_1.useCallback)(() => rowRef.current, []);
-    const filtered = (0, react_1.useMemo)(() => (0, filter_1.filterOptions)(options, value), [options, value]);
+    const filtered = (0, react_1.useMemo)(() => {
+        const all = (0, filter_1.filterOptions)(options, value);
+        return limit != null && limit >= 0 ? all.slice(0, limit) : all;
+    }, [options, value, limit]);
+    const compact = (0, density_1.useDensity)() === 'compact';
     const track = (0, instrument_1.useEmit)();
     const pick = (v) => {
         track({ component: 'ComboBox', action: 'select', id: v, value: filtered.length });
         onChange(v);
         setOpen(false);
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { ref: rowRef, items: "center", gap: "$2", minW: minWidth, children: [(0, jsx_runtime_1.jsx)(gui_1.Input, { flex: 1, value: value, onChangeText: (v) => {
+    const toggle = () => {
+        track({ component: 'ComboBox', action: open ? 'close' : 'open' });
+        setOpen((o) => !o);
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [compact ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ref: rowRef, minW: minWidth, "data-slot": "combo-box", children: (0, jsx_runtime_1.jsx)(input_group_1.InputGroup, { end: (0, jsx_runtime_1.jsx)(button_1.Button, { size: "icon-2xs", variant: "ghost", emphasis: "subtle", disabled: disabled, "aria-label": "Show options", onPress: toggle, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, {}) }), children: (0, jsx_runtime_1.jsx)(input_1.Input, { value: value, onChangeText: (v) => {
+                            onChange(v);
+                            if (!open)
+                                setOpen(true);
+                        }, onFocus: () => setOpen(true), disabled: disabled, placeholder: placeholder, autoCapitalize: "none" }) }) })) : ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ref: rowRef, items: "center", gap: "$2", minW: minWidth, children: [(0, jsx_runtime_1.jsx)(gui_1.Input, { flex: 1, value: value, onChangeText: (v) => {
                             onChange(v);
                             if (!open)
                                 setOpen(true);
-                        }, onFocus: () => setOpen(true), disabled: disabled, placeholder: placeholder, autoCapitalize: "none" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", chromeless: true, disabled: disabled, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 16, opacity: 0.7 }), onPress: () => {
-                            track({ component: 'ComboBox', action: open ? 'close' : 'open' });
-                            setOpen((o) => !o);
-                        }, "aria-label": "Show options" })] }), (0, jsx_runtime_1.jsx)(FloatingMenu_1.FloatingMenu, { open: open, onClose: () => setOpen(false), anchorRect: anchorRect, anchorEl: anchorEl, autoFocus: false, minWidth: minWidth, maxHeight: 300, children: loading ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", px: "$2", py: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.Spinner, { size: "small", color: "$quiet" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$soft", children: "Loading options\u2026" })] })) : error ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", px: "$2", py: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$soft", flex: 1, numberOfLines: 2, children: error }), onRetry ? ((0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$1", chromeless: true, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.RefreshCw, { size: 12 }), onPress: onRetry, "aria-label": "Retry" })) : null] })) : filtered.length === 0 ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$soft", px: "$2", py: "$2", children: emptyText })) : (filtered.map((o) => ((0, jsx_runtime_1.jsx)(items_1.MenuItemView, { label: o.label ?? o.value, description: o.hint, selected: o.value === value, onSelect: () => pick(o.value) }, o.value)))) })] }));
+                        }, onFocus: () => setOpen(true), disabled: disabled, placeholder: placeholder, autoCapitalize: "none" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", chromeless: true, disabled: disabled, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 16, opacity: 0.7 }), onPress: toggle, "aria-label": "Show options" })] })), (0, jsx_runtime_1.jsx)(FloatingMenu_1.FloatingMenu, { open: open, onClose: () => setOpen(false), anchorRect: anchorRect, anchorEl: anchorEl, autoFocus: false, minWidth: minWidth, maxHeight: 300, children: loading ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", px: "$2", py: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.Spinner, { size: "small", color: "$quiet" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$soft", children: "Loading options\u2026" })] })) : error ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", px: "$2", py: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$soft", flex: 1, numberOfLines: 2, children: error }), onRetry ? ((0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$1", chromeless: true, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.RefreshCw, { size: 12 }), onPress: onRetry, "aria-label": "Retry" })) : null] })) : filtered.length === 0 ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$soft", px: "$2", py: "$2", children: emptyText })) : (filtered.map((o) => ((0, jsx_runtime_1.jsx)(items_1.MenuItemView, { label: o.label ?? o.value, description: o.hint, selected: o.value === value, onSelect: () => pick(o.value) }, o.value)))) })] }));
 }

package/dist/product/ComboBox.d.ts

@@ -1,6 +1,6 @@
 import { type ComboOption } from './combobox/filter.js';
 export type { ComboOption } from './combobox/filter.js';
-export declare function ComboBox({ value, onChange, options, loading, error, onRetry, placeholder, disabled, emptyText, minWidth, }: {
+export declare function ComboBox({ value, onChange, options, loading, error, onRetry, placeholder, disabled, emptyText, minWidth, limit, }: {
     value: string;
     onChange: (v: string) => void;
     /** The live option list. Filtered against the typed text. */
@@ -16,5 +16,7 @@ export declare function ComboBox({ value, onChange, options, loading, error, onR
     /** Row shown when the filter matches nothing (the typed value is still usable). */
     emptyText?: string;
     minWidth?: number;
+    /** At most this many live options in the list; all of them when unset. */
+    limit?: number;
 }): import("react").JSX.Element;
 //# sourceMappingURL=ComboBox.d.ts.map

package/dist/product/ComboBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../src/product/ComboBox.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAInE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAe,EACf,KAAY,EACZ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAuD,EACvD,QAAc,GACf,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,6DAA6D;IAC7D,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,+BAsFA"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../src/product/ComboBox.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAInE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAe,EACf,KAAY,EACZ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAuD,EACvD,QAAc,EACd,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,6DAA6D;IAC7D,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,+BAoHA"}

package/dist/product/ComboBox.js

@@ -10,33 +10,51 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * identical to every other menu and render correctly through the portal under a nested
  * `<Theme>` on gui-native hosts. The input row is the anchor (excluded from dismiss) and
  * the panel does NOT steal focus, so typing keeps filtering.
+ *
+ * Under `<Density value="compact">` it is the record kit's Autocomplete
+ * (twenty-ui's, MIT, NOTICE): one 32px field box, the chevron a quiet icon
+ * button inside its end rather than a control beside it. `limit` caps how many
+ * live options the list shows. A regular surface draws the row it always has.
  */
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { Button, Input, Spinner, Text, XStack } from '@hanzo/gui';
 import { ChevronDown, RefreshCw } from '@hanzogui/lucide-icons-2';
+import { Button as KitButton } from '../backends/gui/button.js';
+import { useDensity } from '../backends/gui/density.js';
+import { Input as KitInput } from '../backends/gui/input.js';
+import { InputGroup } from '../backends/gui/input-group.js';
 import { useEmit } from './instrument.js';
 import { filterOptions } from './combobox/filter.js';
 import { MenuItemView } from './menu/items.js';
 import { FloatingMenu } from './menu/FloatingMenu.js';
-export function ComboBox({ value, onChange, options, loading = false, error = null, onRetry, placeholder, disabled, emptyText = 'No matches — press to use what you typed.', minWidth = 240, }) {
+export function ComboBox({ value, onChange, options, loading = false, error = null, onRetry, placeholder, disabled, emptyText = 'No matches — press to use what you typed.', minWidth = 240, limit, }) {
     const [open, setOpen] = useState(false);
     const rowRef = useRef(null);
     const anchorRect = useCallback(() => rowRef.current?.getBoundingClientRect() ?? null, []);
     const anchorEl = useCallback(() => rowRef.current, []);
-    const filtered = useMemo(() => filterOptions(options, value), [options, value]);
+    const filtered = useMemo(() => {
+        const all = filterOptions(options, value);
+        return limit != null && limit >= 0 ? all.slice(0, limit) : all;
+    }, [options, value, limit]);
+    const compact = useDensity() === 'compact';
     const track = useEmit();
     const pick = (v) => {
         track({ component: 'ComboBox', action: 'select', id: v, value: filtered.length });
         onChange(v);
         setOpen(false);
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(XStack, { ref: rowRef, items: "center", gap: "$2", minW: minWidth, children: [_jsx(Input, { flex: 1, value: value, onChangeText: (v) => {
+    const toggle = () => {
+        track({ component: 'ComboBox', action: open ? 'close' : 'open' });
+        setOpen((o) => !o);
+    };
+    return (_jsxs(_Fragment, { children: [compact ? (_jsx(XStack, { ref: rowRef, minW: minWidth, "data-slot": "combo-box", children: _jsx(InputGroup, { end: _jsx(KitButton, { size: "icon-2xs", variant: "ghost", emphasis: "subtle", disabled: disabled, "aria-label": "Show options", onPress: toggle, children: _jsx(ChevronDown, {}) }), children: _jsx(KitInput, { value: value, onChangeText: (v) => {
+                            onChange(v);
+                            if (!open)
+                                setOpen(true);
+                        }, onFocus: () => setOpen(true), disabled: disabled, placeholder: placeholder, autoCapitalize: "none" }) }) })) : (_jsxs(XStack, { ref: rowRef, items: "center", gap: "$2", minW: minWidth, children: [_jsx(Input, { flex: 1, value: value, onChangeText: (v) => {
                             onChange(v);
                             if (!open)
                                 setOpen(true);
-                        }, onFocus: () => setOpen(true), disabled: disabled, placeholder: placeholder, autoCapitalize: "none" }), _jsx(Button, { size: "$2", chromeless: true, disabled: disabled, icon: _jsx(ChevronDown, { size: 16, opacity: 0.7 }), onPress: () => {
-                            track({ component: 'ComboBox', action: open ? 'close' : 'open' });
-                            setOpen((o) => !o);
-                        }, "aria-label": "Show options" })] }), _jsx(FloatingMenu, { open: open, onClose: () => setOpen(false), anchorRect: anchorRect, anchorEl: anchorEl, autoFocus: false, minWidth: minWidth, maxHeight: 300, children: loading ? (_jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$2", children: [_jsx(Spinner, { size: "small", color: "$quiet" }), _jsx(Text, { fontSize: "$2", color: "$soft", children: "Loading options\u2026" })] })) : error ? (_jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$2", children: [_jsx(Text, { fontSize: "$2", color: "$soft", flex: 1, numberOfLines: 2, children: error }), onRetry ? (_jsx(Button, { size: "$1", chromeless: true, icon: _jsx(RefreshCw, { size: 12 }), onPress: onRetry, "aria-label": "Retry" })) : null] })) : filtered.length === 0 ? (_jsx(Text, { fontSize: "$2", color: "$soft", px: "$2", py: "$2", children: emptyText })) : (filtered.map((o) => (_jsx(MenuItemView, { label: o.label ?? o.value, description: o.hint, selected: o.value === value, onSelect: () => pick(o.value) }, o.value)))) })] }));
+                        }, onFocus: () => setOpen(true), disabled: disabled, placeholder: placeholder, autoCapitalize: "none" }), _jsx(Button, { size: "$2", chromeless: true, disabled: disabled, icon: _jsx(ChevronDown, { size: 16, opacity: 0.7 }), onPress: toggle, "aria-label": "Show options" })] })), _jsx(FloatingMenu, { open: open, onClose: () => setOpen(false), anchorRect: anchorRect, anchorEl: anchorEl, autoFocus: false, minWidth: minWidth, maxHeight: 300, children: loading ? (_jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$2", children: [_jsx(Spinner, { size: "small", color: "$quiet" }), _jsx(Text, { fontSize: "$2", color: "$soft", children: "Loading options\u2026" })] })) : error ? (_jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$2", children: [_jsx(Text, { fontSize: "$2", color: "$soft", flex: 1, numberOfLines: 2, children: error }), onRetry ? (_jsx(Button, { size: "$1", chromeless: true, icon: _jsx(RefreshCw, { size: 12 }), onPress: onRetry, "aria-label": "Retry" })) : null] })) : filtered.length === 0 ? (_jsx(Text, { fontSize: "$2", color: "$soft", px: "$2", py: "$2", children: emptyText })) : (filtered.map((o) => (_jsx(MenuItemView, { label: o.label ?? o.value, description: o.hint, selected: o.value === value, onSelect: () => pick(o.value) }, o.value)))) })] }));
 }
 //# sourceMappingURL=ComboBox.js.map

package/dist/product/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../src/product/ComboBox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../src/product/ComboBox.tsx"],"names":[],"mappings":"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"}

package/dist/product/CommandMenu.cjs

@@ -0,0 +1,137 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COMMAND = void 0;
+exports.CommandMenu = CommandMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * CommandMenu — the palette as a side-panel page (twenty-ui's command menu
+ * frame, MIT, NOTICE): the search field IS the top bar, and the commands are
+ * grouped rows under it.
+ *
+ *   const pane = useDetailPane()
+ *   useCommandK(() => pane.open({ title: 'Command menu', bare: true, content: <CommandMenu groups={groups} /> }))
+ *
+ * Layout: the 48px pane bar holds a borderless 24px field ("Type anything…");
+ * each group opens on a 32px header row (a 24px icon slot, the label in medium
+ * ink, a hairline under it); rows are the record menu row — 32 high, a 16px
+ * icon in its well, contextual text, keycaps for the command's shortcut ("G
+ * then P"), a chevron when it opens a page — 2 apart, groups 12 apart. A query
+ * that matches nothing says so in a 64px status line.
+ *
+ * The decisions are the palette's own (`command.logic`): `score` keeps and
+ * ranks a row against the query, `step` moves the cursor. The view is drawn
+ * here as the ARIA combobox it is — the field owns focus and names the active
+ * option, the rows are options in grouped listboxes — so a screen reader hears
+ * the row the arrows land on while the caret stays in the field.
+ *
+ * Keys, from the field: ArrowDown/ArrowUp move (wrapping), Enter runs the
+ * active row, Escape clears a query (and on an empty one lets the pane close),
+ * Backspace on an empty query goes back a page.
+ */
+const react_1 = require("react");
+const gui_1 = require("@hanzo/gui");
+const command_logic_1 = require("../backends/gui/command.logic.cjs");
+const shortcut_1 = require("../backends/gui/shortcut.cjs");
+const slot_1 = require("../backends/gui/slot.cjs");
+const gesture_1 = require("../backends/gui/gesture.cjs");
+const MenuRow_1 = require("./MenuRow.cjs");
+const DetailPane_1 = require("./DetailPane.cjs");
+/** The frame's measures (twenty-ui's command menu, MIT). */
+exports.COMMAND = { field: 24, header: 32, icon: 24, row: 32, rows: 2, groups: 12, empty: 64, margin: 48 };
+function CommandMenu({ groups, placeholder = 'Type anything…', empty = 'No results found', label = 'Commands', query: controlled, onQueryChange, onBack, onClose, autoFocus = true, }) {
+    const pane = (0, DetailPane_1.usePane)();
+    const base = (0, react_1.useId)();
+    const [own, setOwn] = (0, react_1.useState)('');
+    const query = controlled ?? own;
+    const setQuery = (q) => {
+        if (controlled === undefined)
+            setOwn(q);
+        onQueryChange?.(q);
+    };
+    // The rows that survive the query, grouped, in source order.
+    const shown = (0, react_1.useMemo)(() => groups
+        .map((g) => ({
+        ...g,
+        items: g.items.filter((it) => (0, command_logic_1.score)(it.label, query, [...(it.keywords ?? []), ...(it.contextual ? [it.contextual] : [])]) > 0),
+    }))
+        .filter((g) => g.items.length > 0), [groups, query]);
+    const reachable = (0, react_1.useMemo)(() => shown.flatMap((g) => g.items.filter((it) => !it.disabled)), [shown]);
+    const [active, setActive] = (0, react_1.useState)(undefined);
+    const current = reachable.find((it) => it.id === active) ?? reachable[0];
+    const optionId = (id) => `${base}-option-${id}`;
+    const listId = `${base}-list`;
+    // A cursor the arrows moved is brought into view; the first row of a group
+    // carries a scroll margin, so its header comes with it.
+    const moved = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (!moved.current || !current || typeof document === 'undefined')
+            return;
+        moved.current = false;
+        const el = document.getElementById(optionId(current.id));
+        el?.scrollIntoView?.({ block: 'nearest' });
+    });
+    const field = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!autoFocus)
+            return;
+        const t = setTimeout(() => field.current?.focus?.(), 0);
+        return () => clearTimeout(t);
+    }, [autoFocus]);
+    const onKey = (e) => {
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const at = current ? reachable.indexOf(current) : -1;
+            const next = reachable[(0, command_logic_1.step)(reachable.length, at, e.key === 'ArrowDown' ? 1 : -1, true)];
+            if (next) {
+                moved.current = true;
+                setActive(next.id);
+            }
+        }
+        else if (e.key === 'Enter') {
+            if (!current)
+                return;
+            e.preventDefault();
+            current.onSelect();
+        }
+        else if (e.key === 'Escape') {
+            if (query) {
+                // Clearing the query is this key's whole job: it must not reach the pane.
+                e.preventDefault();
+                e.stopPropagation();
+                setQuery('');
+            }
+            else if (!pane && onClose) {
+                e.preventDefault();
+                onClose();
+            }
+        }
+        else if (e.key === 'Backspace' && !query) {
+            const back = onBack ?? (pane && pane.depth > 1 ? pane.back : undefined);
+            if (back) {
+                e.preventDefault();
+                back();
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('command-menu'), flex: 1, minH: 0, children: [(0, jsx_runtime_1.jsx)(DetailPane_1.PaneBar, { children: (0, jsx_runtime_1.jsx)(gui_1.Input, { ref: field, ...(0, slot_1.slot)('command-menu-input'), ...{
+                        role: 'combobox',
+                        'aria-expanded': true,
+                        'aria-controls': listId,
+                        'aria-autocomplete': 'list',
+                        'aria-activedescendant': current ? optionId(current.id) : undefined,
+                        'aria-label': label,
+                    }, flex: 1, minW: 0, height: exports.COMMAND.field, px: 0, borderWidth: 0, rounded: 0, bg: "transparent", color: "$ink", fontSize: "$2", placeholder: placeholder, placeholderTextColor: "$hush", value: query, onChangeText: (t) => {
+                        setQuery(t);
+                        setActive(undefined);
+                    }, onKeyDown: onKey, 
+                    // The bar is the field; its caret is the focus, so the field draws no
+                    // ring of its own (inline, to outrank design's :focus-visible rule).
+                    style: { outlineStyle: 'none' } }) }), (0, jsx_runtime_1.jsx)(DetailPane_1.PaneBody, { padded: false, children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { id: listId, ...(0, slot_1.slot)('command-menu-list'), px: "$2", pt: "$2", pb: "$2", gap: exports.COMMAND.groups, children: [shown.map((g) => {
+                            const head = `${base}-group-${g.id}`;
+                            return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('command-menu-group'), gap: exports.COMMAND.rows, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { id: head, ...(0, slot_1.slot)('command-menu-heading'), height: exports.COMMAND.header, items: "center", gap: "$1", pl: "$1", borderBottomWidth: 1, borderColor: "$borderColor", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { width: exports.COMMAND.icon, height: exports.COMMAND.icon, items: "center", justify: "center", shrink: 0, children: g.icon }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", fontWeight: "500", color: "$ink", numberOfLines: 1, children: g.label })] }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { role: "listbox", "aria-labelledby": head, gap: exports.COMMAND.rows, children: g.items.map((it, i) => {
+                                            const on = current?.id === it.id;
+                                            return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { id: optionId(it.id), ...(0, slot_1.slot)('command-menu-item'), ...{ role: 'option', 'aria-selected': on, 'aria-disabled': it.disabled || undefined }, "data-active": on ? '' : undefined, items: "center", gap: "$2", px: "$1", minH: exports.COMMAND.row, rounded: "$xs", cursor: it.disabled ? 'default' : 'pointer', opacity: it.disabled ? 0.5 : 1, bg: on ? '$hover' : 'transparent', hoverStyle: it.disabled ? undefined : { bg: '$hover' }, ...(0, gesture_1.touch)(exports.COMMAND.row, 44, 'y'), onHoverIn: it.disabled ? undefined : () => setActive(it.id), onPress: it.disabled ? undefined : it.onSelect, style: i === 0 ? { scrollMarginTop: exports.COMMAND.margin } : undefined, children: (0, jsx_runtime_1.jsx)(MenuRow_1.MenuRowContent, { label: it.label, icon: it.icon, iconContainer: it.icon != null, contextual: it.contextual, shortcut: it.shortcut ? (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: it.shortcut }) : undefined, submenu: it.submenu, quiet: true }) }, it.id));
+                                        }) })] }, g.id));
+                        }), shown.length === 0 ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('command-menu-empty'), role: "status", "aria-live": "polite", height: exports.COMMAND.empty, items: "center", justify: "center", children: typeof empty === 'string' ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$hush", children: empty })) : (empty) })) : null] }) })] }));
+}

package/dist/product/CommandMenu.d.ts

@@ -0,0 +1,77 @@
+/**
+ * CommandMenu — the palette as a side-panel page (twenty-ui's command menu
+ * frame, MIT, NOTICE): the search field IS the top bar, and the commands are
+ * grouped rows under it.
+ *
+ *   const pane = useDetailPane()
+ *   useCommandK(() => pane.open({ title: 'Command menu', bare: true, content: <CommandMenu groups={groups} /> }))
+ *
+ * Layout: the 48px pane bar holds a borderless 24px field ("Type anything…");
+ * each group opens on a 32px header row (a 24px icon slot, the label in medium
+ * ink, a hairline under it); rows are the record menu row — 32 high, a 16px
+ * icon in its well, contextual text, keycaps for the command's shortcut ("G
+ * then P"), a chevron when it opens a page — 2 apart, groups 12 apart. A query
+ * that matches nothing says so in a 64px status line.
+ *
+ * The decisions are the palette's own (`command.logic`): `score` keeps and
+ * ranks a row against the query, `step` moves the cursor. The view is drawn
+ * here as the ARIA combobox it is — the field owns focus and names the active
+ * option, the rows are options in grouped listboxes — so a screen reader hears
+ * the row the arrows land on while the caret stays in the field.
+ *
+ * Keys, from the field: ArrowDown/ArrowUp move (wrapping), Enter runs the
+ * active row, Escape clears a query (and on an empty one lets the pane close),
+ * Backspace on an empty query goes back a page.
+ */
+import { type ReactNode } from 'react';
+import { type ShortcutKeys } from '../backends/gui/shortcut.js';
+export type CommandMenuItem = {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** Dimmed text after the label: an object's name, a count. */
+    contextual?: string;
+    /** More words the query matches it by. */
+    keywords?: string[];
+    /** The keys that run it outside the menu, drawn as keycaps: `['Mod', 'K']`, or `[['G'], ['P']]` for G then P. */
+    shortcut?: ShortcutKeys;
+    /** It opens a page rather than acting: a chevron at its end. */
+    submenu?: boolean;
+    disabled?: boolean;
+    onSelect: () => void;
+};
+export type CommandMenuGroup = {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    items: CommandMenuItem[];
+};
+export type CommandMenuProps = {
+    groups: CommandMenuGroup[];
+    placeholder?: string;
+    /** What a query that matches nothing says. */
+    empty?: ReactNode;
+    /** The listbox's accessible name. */
+    label?: string;
+    /** The query, controlled; uncontrolled when absent. */
+    query?: string;
+    onQueryChange?: (query: string) => void;
+    /** Backspace on an empty query. Default: the pane's `back`, when there is a page under this one. */
+    onBack?: () => void;
+    /** Escape on an empty query, outside a pane (inside one, the pane closes itself). */
+    onClose?: () => void;
+    autoFocus?: boolean;
+};
+/** The frame's measures (twenty-ui's command menu, MIT). */
+export declare const COMMAND: {
+    readonly field: 24;
+    readonly header: 32;
+    readonly icon: 24;
+    readonly row: 32;
+    readonly rows: 2;
+    readonly groups: 12;
+    readonly empty: 64;
+    readonly margin: 48;
+};
+export declare function CommandMenu({ groups, placeholder, empty, label, query: controlled, onQueryChange, onBack, onClose, autoFocus, }: CommandMenuProps): import("react").JSX.Element;
+//# sourceMappingURL=CommandMenu.d.ts.map

package/dist/product/CommandMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandMenu.d.ts","sourceRoot":"","sources":["../../src/product/CommandMenu.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAA+C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAInF,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMtE,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,eAAe,EAAE,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,gBAAgB,EAAE,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,oGAAoG;IACpG,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,qFAAqF;IACrF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,4DAA4D;AAC5D,eAAO,MAAM,OAAO;aAAK,KAAK,EAAE,EAAE;aAAE,MAAM,EAAE,EAAE;aAAE,IAAI,EAAE,EAAE;aAAE,GAAG,EAAE,EAAE;aAAE,IAAI,EAAE,CAAC;aAAE,MAAM,EAAE,EAAE;aAAE,KAAK,EAAE,EAAE;aAAE,MAAM,EAAE,EAAE;CAAW,CAAA;AAIxH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,WAA8B,EAC9B,KAA0B,EAC1B,KAAkB,EAClB,KAAK,EAAE,UAAU,EACjB,aAAa,EACb,MAAM,EACN,OAAO,EACP,SAAgB,GACjB,EAAE,gBAAgB,+BAgMlB"}

package/dist/product/CommandMenu.js

@@ -0,0 +1,134 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CommandMenu — the palette as a side-panel page (twenty-ui's command menu
+ * frame, MIT, NOTICE): the search field IS the top bar, and the commands are
+ * grouped rows under it.
+ *
+ *   const pane = useDetailPane()
+ *   useCommandK(() => pane.open({ title: 'Command menu', bare: true, content: <CommandMenu groups={groups} /> }))
+ *
+ * Layout: the 48px pane bar holds a borderless 24px field ("Type anything…");
+ * each group opens on a 32px header row (a 24px icon slot, the label in medium
+ * ink, a hairline under it); rows are the record menu row — 32 high, a 16px
+ * icon in its well, contextual text, keycaps for the command's shortcut ("G
+ * then P"), a chevron when it opens a page — 2 apart, groups 12 apart. A query
+ * that matches nothing says so in a 64px status line.
+ *
+ * The decisions are the palette's own (`command.logic`): `score` keeps and
+ * ranks a row against the query, `step` moves the cursor. The view is drawn
+ * here as the ARIA combobox it is — the field owns focus and names the active
+ * option, the rows are options in grouped listboxes — so a screen reader hears
+ * the row the arrows land on while the caret stays in the field.
+ *
+ * Keys, from the field: ArrowDown/ArrowUp move (wrapping), Enter runs the
+ * active row, Escape clears a query (and on an empty one lets the pane close),
+ * Backspace on an empty query goes back a page.
+ */
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { Input, Text, XStack, YStack } from '@hanzo/gui';
+import { score, step } from '../backends/gui/command.logic.js';
+import { Shortcut } from '../backends/gui/shortcut.js';
+import { slot } from '../backends/gui/slot.js';
+import { touch } from '../backends/gui/gesture.js';
+import { MenuRowContent } from './MenuRow.js';
+import { PaneBar, PaneBody, usePane } from './DetailPane.js';
+/** The frame's measures (twenty-ui's command menu, MIT). */
+export const COMMAND = { field: 24, header: 32, icon: 24, row: 32, rows: 2, groups: 12, empty: 64, margin: 48 };
+export function CommandMenu({ groups, placeholder = 'Type anything…', empty = 'No results found', label = 'Commands', query: controlled, onQueryChange, onBack, onClose, autoFocus = true, }) {
+    const pane = usePane();
+    const base = useId();
+    const [own, setOwn] = useState('');
+    const query = controlled ?? own;
+    const setQuery = (q) => {
+        if (controlled === undefined)
+            setOwn(q);
+        onQueryChange?.(q);
+    };
+    // The rows that survive the query, grouped, in source order.
+    const shown = useMemo(() => groups
+        .map((g) => ({
+        ...g,
+        items: g.items.filter((it) => score(it.label, query, [...(it.keywords ?? []), ...(it.contextual ? [it.contextual] : [])]) > 0),
+    }))
+        .filter((g) => g.items.length > 0), [groups, query]);
+    const reachable = useMemo(() => shown.flatMap((g) => g.items.filter((it) => !it.disabled)), [shown]);
+    const [active, setActive] = useState(undefined);
+    const current = reachable.find((it) => it.id === active) ?? reachable[0];
+    const optionId = (id) => `${base}-option-${id}`;
+    const listId = `${base}-list`;
+    // A cursor the arrows moved is brought into view; the first row of a group
+    // carries a scroll margin, so its header comes with it.
+    const moved = useRef(false);
+    useEffect(() => {
+        if (!moved.current || !current || typeof document === 'undefined')
+            return;
+        moved.current = false;
+        const el = document.getElementById(optionId(current.id));
+        el?.scrollIntoView?.({ block: 'nearest' });
+    });
+    const field = useRef(null);
+    useEffect(() => {
+        if (!autoFocus)
+            return;
+        const t = setTimeout(() => field.current?.focus?.(), 0);
+        return () => clearTimeout(t);
+    }, [autoFocus]);
+    const onKey = (e) => {
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const at = current ? reachable.indexOf(current) : -1;
+            const next = reachable[step(reachable.length, at, e.key === 'ArrowDown' ? 1 : -1, true)];
+            if (next) {
+                moved.current = true;
+                setActive(next.id);
+            }
+        }
+        else if (e.key === 'Enter') {
+            if (!current)
+                return;
+            e.preventDefault();
+            current.onSelect();
+        }
+        else if (e.key === 'Escape') {
+            if (query) {
+                // Clearing the query is this key's whole job: it must not reach the pane.
+                e.preventDefault();
+                e.stopPropagation();
+                setQuery('');
+            }
+            else if (!pane && onClose) {
+                e.preventDefault();
+                onClose();
+            }
+        }
+        else if (e.key === 'Backspace' && !query) {
+            const back = onBack ?? (pane && pane.depth > 1 ? pane.back : undefined);
+            if (back) {
+                e.preventDefault();
+                back();
+            }
+        }
+    };
+    return (_jsxs(YStack, { ...slot('command-menu'), flex: 1, minH: 0, children: [_jsx(PaneBar, { children: _jsx(Input, { ref: field, ...slot('command-menu-input'), ...{
+                        role: 'combobox',
+                        'aria-expanded': true,
+                        'aria-controls': listId,
+                        'aria-autocomplete': 'list',
+                        'aria-activedescendant': current ? optionId(current.id) : undefined,
+                        'aria-label': label,
+                    }, flex: 1, minW: 0, height: COMMAND.field, px: 0, borderWidth: 0, rounded: 0, bg: "transparent", color: "$ink", fontSize: "$2", placeholder: placeholder, placeholderTextColor: "$hush", value: query, onChangeText: (t) => {
+                        setQuery(t);
+                        setActive(undefined);
+                    }, onKeyDown: onKey, 
+                    // The bar is the field; its caret is the focus, so the field draws no
+                    // ring of its own (inline, to outrank design's :focus-visible rule).
+                    style: { outlineStyle: 'none' } }) }), _jsx(PaneBody, { padded: false, children: _jsxs(YStack, { id: listId, ...slot('command-menu-list'), px: "$2", pt: "$2", pb: "$2", gap: COMMAND.groups, children: [shown.map((g) => {
+                            const head = `${base}-group-${g.id}`;
+                            return (_jsxs(YStack, { ...slot('command-menu-group'), gap: COMMAND.rows, children: [_jsxs(XStack, { id: head, ...slot('command-menu-heading'), height: COMMAND.header, items: "center", gap: "$1", pl: "$1", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(XStack, { width: COMMAND.icon, height: COMMAND.icon, items: "center", justify: "center", shrink: 0, children: g.icon }), _jsx(Text, { fontSize: "$2", fontWeight: "500", color: "$ink", numberOfLines: 1, children: g.label })] }), _jsx(YStack, { role: "listbox", "aria-labelledby": head, gap: COMMAND.rows, children: g.items.map((it, i) => {
+                                            const on = current?.id === it.id;
+                                            return (_jsx(XStack, { id: optionId(it.id), ...slot('command-menu-item'), ...{ role: 'option', 'aria-selected': on, 'aria-disabled': it.disabled || undefined }, "data-active": on ? '' : undefined, items: "center", gap: "$2", px: "$1", minH: COMMAND.row, rounded: "$xs", cursor: it.disabled ? 'default' : 'pointer', opacity: it.disabled ? 0.5 : 1, bg: on ? '$hover' : 'transparent', hoverStyle: it.disabled ? undefined : { bg: '$hover' }, ...touch(COMMAND.row, 44, 'y'), onHoverIn: it.disabled ? undefined : () => setActive(it.id), onPress: it.disabled ? undefined : it.onSelect, style: i === 0 ? { scrollMarginTop: COMMAND.margin } : undefined, children: _jsx(MenuRowContent, { label: it.label, icon: it.icon, iconContainer: it.icon != null, contextual: it.contextual, shortcut: it.shortcut ? _jsx(Shortcut, { keys: it.shortcut }) : undefined, submenu: it.submenu, quiet: true }) }, it.id));
+                                        }) })] }, g.id));
+                        }), shown.length === 0 ? (_jsx(YStack, { ...slot('command-menu-empty'), role: "status", "aria-live": "polite", height: COMMAND.empty, items: "center", justify: "center", children: typeof empty === 'string' ? (_jsx(Text, { fontSize: "$2", color: "$hush", children: empty })) : (empty) })) : null] }) })] }));
+}
+//# sourceMappingURL=CommandMenu.js.map

package/dist/product/CommandMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandMenu.js","sourceRoot":"","sources":["../../src/product/CommandMenu.tsx"],"names":[],"mappings":"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"}