@hanzo/ui 8.27.91 → 8.28.0

package/dist/primitives/fieldSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldSize.js","sourceRoot":"","sources":["../../src/primitives/fieldSize.tsx"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,kEAAkE;AAClE,qEAAqE;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/primitives/flag.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flag = void 0;
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+var flag_1 = require("../backends/gui/flag.cjs");
+Object.defineProperty(exports, "flag", { enumerable: true, get: function () { return flag_1.flag; } });

package/dist/primitives/flag.d.ts

@@ -0,0 +1,2 @@
+export { flag } from '../backends/gui/flag.js';
+//# sourceMappingURL=flag.d.ts.map

package/dist/primitives/flag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flag.d.ts","sourceRoot":"","sources":["../../src/primitives/flag.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/primitives/flag.js

@@ -0,0 +1,5 @@
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+export { flag } from '../backends/gui/flag.js';
+//# sourceMappingURL=flag.js.map

package/dist/primitives/flag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flag.js","sourceRoot":"","sources":["../../src/primitives/flag.tsx"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,kEAAkE;AAClE,qEAAqE;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/primitives/formatShortcut.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatShortcut = void 0;
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+var shortcut_1 = require("../backends/gui/shortcut.cjs");
+Object.defineProperty(exports, "formatShortcut", { enumerable: true, get: function () { return shortcut_1.formatShortcut; } });

package/dist/primitives/formatShortcut.d.ts

@@ -0,0 +1,2 @@
+export { formatShortcut } from '../backends/gui/shortcut.js';
+//# sourceMappingURL=formatShortcut.d.ts.map

package/dist/primitives/formatShortcut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatShortcut.d.ts","sourceRoot":"","sources":["../../src/primitives/formatShortcut.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/primitives/formatShortcut.js

@@ -0,0 +1,5 @@
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+export { formatShortcut } from '../backends/gui/shortcut.js';
+//# sourceMappingURL=formatShortcut.js.map

package/dist/primitives/formatShortcut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatShortcut.js","sourceRoot":"","sources":["../../src/primitives/formatShortcut.tsx"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,kEAAkE;AAClE,qEAAqE;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/primitives/initialOf.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initialOf = void 0;
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+var avatar_1 = require("../backends/gui/avatar.cjs");
+Object.defineProperty(exports, "initialOf", { enumerable: true, get: function () { return avatar_1.initialOf; } });

package/dist/primitives/initialOf.d.ts

@@ -0,0 +1,2 @@
+export { initialOf } from '../backends/gui/avatar.js';
+//# sourceMappingURL=initialOf.d.ts.map

package/dist/primitives/initialOf.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"initialOf.d.ts","sourceRoot":"","sources":["../../src/primitives/initialOf.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA"}

package/dist/primitives/initialOf.js

@@ -0,0 +1,5 @@
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+export { initialOf } from '../backends/gui/avatar.js';
+//# sourceMappingURL=initialOf.js.map

package/dist/primitives/initialOf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"initialOf.js","sourceRoot":"","sources":["../../src/primitives/initialOf.tsx"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,kEAAkE;AAClE,qEAAqE;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA"}

package/dist/primitives/parseNumber.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseNumber = void 0;
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+var number_field_1 = require("../backends/gui/number-field.cjs");
+Object.defineProperty(exports, "parseNumber", { enumerable: true, get: function () { return number_field_1.parseNumber; } });

package/dist/primitives/parseNumber.d.ts

@@ -0,0 +1,2 @@
+export { parseNumber } from '../backends/gui/number-field.js';
+//# sourceMappingURL=parseNumber.d.ts.map

package/dist/primitives/parseNumber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseNumber.d.ts","sourceRoot":"","sources":["../../src/primitives/parseNumber.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA"}

package/dist/primitives/parseNumber.js

@@ -0,0 +1,5 @@
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+export { parseNumber } from '../backends/gui/number-field.js';
+//# sourceMappingURL=parseNumber.js.map

package/dist/primitives/parseNumber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseNumber.js","sourceRoot":"","sources":["../../src/primitives/parseNumber.tsx"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,kEAAkE;AAClE,qEAAqE;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA"}

package/dist/primitives/speakShortcut.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.speakShortcut = void 0;
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+var shortcut_1 = require("../backends/gui/shortcut.cjs");
+Object.defineProperty(exports, "speakShortcut", { enumerable: true, get: function () { return shortcut_1.speakShortcut; } });

package/dist/primitives/speakShortcut.d.ts

@@ -0,0 +1,2 @@
+export { speakShortcut } from '../backends/gui/shortcut.js';
+//# sourceMappingURL=speakShortcut.d.ts.map

package/dist/primitives/speakShortcut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"speakShortcut.d.ts","sourceRoot":"","sources":["../../src/primitives/speakShortcut.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/primitives/speakShortcut.js

@@ -0,0 +1,5 @@
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+export { speakShortcut } from '../backends/gui/shortcut.js';
+//# sourceMappingURL=speakShortcut.js.map

package/dist/primitives/speakShortcut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"speakShortcut.js","sourceRoot":"","sources":["../../src/primitives/speakShortcut.tsx"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,kEAAkE;AAClE,qEAAqE;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/primitives/tileTones.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tileTones = void 0;
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+var icon_tile_1 = require("../backends/gui/icon-tile.cjs");
+Object.defineProperty(exports, "tileTones", { enumerable: true, get: function () { return icon_tile_1.tileTones; } });

package/dist/primitives/tileTones.d.ts

@@ -0,0 +1,2 @@
+export { tileTones } from '../backends/gui/icon-tile.js';
+//# sourceMappingURL=tileTones.d.ts.map

package/dist/primitives/tileTones.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tileTones.d.ts","sourceRoot":"","sources":["../../src/primitives/tileTones.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA"}

package/dist/primitives/tileTones.js

@@ -0,0 +1,5 @@
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+export { tileTones } from '../backends/gui/icon-tile.js';
+//# sourceMappingURL=tileTones.js.map

package/dist/primitives/tileTones.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tileTones.js","sourceRoot":"","sources":["../../src/primitives/tileTones.tsx"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,kEAAkE;AAClE,qEAAqE;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA"}

package/dist/primitives/useDensity.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDensity = void 0;
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+var density_1 = require("../backends/gui/density.cjs");
+Object.defineProperty(exports, "useDensity", { enumerable: true, get: function () { return density_1.useDensity; } });

package/dist/primitives/useDensity.d.ts

@@ -0,0 +1,2 @@
+export { useDensity } from '../backends/gui/density.js';
+//# sourceMappingURL=useDensity.d.ts.map

package/dist/primitives/useDensity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDensity.d.ts","sourceRoot":"","sources":["../../src/primitives/useDensity.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/primitives/useDensity.js

@@ -0,0 +1,5 @@
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+export { useDensity } from '../backends/gui/density.js';
+//# sourceMappingURL=useDensity.js.map

package/dist/primitives/useDensity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDensity.js","sourceRoot":"","sources":["../../src/primitives/useDensity.tsx"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,kEAAkE;AAClE,qEAAqE;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/primitives/useField.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useField = void 0;
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+var field_1 = require("../backends/gui/field.cjs");
+Object.defineProperty(exports, "useField", { enumerable: true, get: function () { return field_1.useField; } });

package/dist/primitives/useField.d.ts

@@ -0,0 +1,2 @@
+export { useField } from '../backends/gui/field.js';
+//# sourceMappingURL=useField.d.ts.map

package/dist/primitives/useField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useField.d.ts","sourceRoot":"","sources":["../../src/primitives/useField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/primitives/useField.js

@@ -0,0 +1,5 @@
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+export { useField } from '../backends/gui/field.js';
+//# sourceMappingURL=useField.js.map

package/dist/primitives/useField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useField.js","sourceRoot":"","sources":["../../src/primitives/useField.tsx"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,kEAAkE;AAClE,qEAAqE;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA"}

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] }) })] }));
+}