@hanzo/ui 8.28.0 → 8.29.0

package/dist/backends/gui/icon-picker.cjs

@@ -0,0 +1,194 @@
+'use client';"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PICKER_W = void 0;
+exports.loadIcons = loadIcons;
+exports.useIcons = useIcons;
+exports.Glyph = Glyph;
+exports.IconPicker = IconPicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Glyph and IconPicker — a stored icon name, drawn; and the grid a person picks
+ * one from.
+ *
+ * Both load Lucide through ONE dynamic import of @hanzogui/lucide-icons-2
+ * (`loadIcons`), so a page that never draws a stored icon pays nothing, and a
+ * page that does loads one chunk once: every later Glyph reads the module-level
+ * cache and draws on its first render. The name is resolved by `resolveIcon`
+ * (icons.ts): a Lucide name, a Tabler name with its pair, a same-name match, or
+ * the kind's fallback.
+ *
+ * The picker is the data-model editor's icon picker (twenty-ui's icon picker,
+ * MIT, NOTICE): 176 wide, a search field over the names and the concepts each
+ * icon draws, and a grid of 32px cells five across, run by the arrows in two
+ * dimensions, Home/End, and Enter. It shows the first 150 matches and says how
+ * many more a search would narrow to, rather than mounting 1,760 icons at once.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const button_1 = require("./button.cjs");
+const density_1 = require("./density.cjs");
+const icons_1 = require("./icons.cjs");
+const input_1 = require("./input.cjs");
+const popover_1 = require("./popover.cjs");
+const search_list_1 = require("./search-list.cjs");
+const slot_1 = require("./slot.cjs");
+let cache = null;
+let pending = null;
+/** Every Lucide icon, loaded once, by name. */
+function loadIcons() {
+    if (cache)
+        return Promise.resolve(cache);
+    pending ??= Promise.resolve().then(() => __importStar(require('@hanzogui/lucide-icons-2'))).then((mod) => {
+        const table = mod;
+        // The barrel exports the icons and nothing else (1,760, each by its name).
+        const list = Object.keys(table).filter((k) => /^[A-Z]/.test(k)).sort();
+        cache = { names: new Set(list), get: (n) => table[n], list };
+        return cache;
+    });
+    return pending;
+}
+/** The icon set, once it has loaded (`null` until then). */
+function useIcons() {
+    const [icons, setIcons] = (0, react_1.useState)(cache);
+    (0, react_1.useEffect)(() => {
+        if (icons)
+            return;
+        let live = true;
+        loadIcons().then((loaded) => live && setIcons(loaded));
+        return () => {
+            live = false;
+        };
+    }, [icons]);
+    return icons;
+}
+/**
+ * A stored icon name, drawn. Holds its box while the set loads, so a row of
+ * glyphs does not shift when they arrive; draws nothing (and still holds the
+ * box) for a name with no icon and no fallback.
+ */
+function Glyph({ name, kind = 'other', size = 16, color }) {
+    const icons = useIcons();
+    const resolved = icons ? (0, icons_1.resolveIcon)(name, icons.names, kind) : null;
+    const Icon = resolved ? icons?.get(resolved) : undefined;
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('glyph'), width: size, height: size, items: "center", justify: "center", shrink: 0, "aria-hidden": true, children: Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: size, ...(color ? { color } : null) }) : null }));
+}
+const COLUMNS = 5;
+const CELL = 32;
+const GAP = 2;
+const INSET = 4;
+/** Five cells of 32 with 2 between and 4 round: twenty-ui's 176px picker. */
+exports.PICKER_W = INSET * 2 + COLUMNS * CELL + (COLUMNS - 1) * GAP;
+const SHOWN = 150;
+/** The names a query keeps: every word of it in the name or a concept it draws. */
+const filterIcons = (list, q) => {
+    const words = q.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    if (!words.length)
+        return [...list];
+    return list.filter((n) => {
+        const hay = (0, icons_1.iconWords)(n);
+        return words.every((w) => hay.includes(w));
+    });
+};
+function IconPicker({ value, onValueChange, kind = 'other', trigger, open: openProp, defaultOpen, onOpenChange, label = 'Icon', searchLabel = 'Search icons', emptyLabel = 'No icon matches', disabled, }) {
+    const density = (0, density_1.useDensity)();
+    const [open, setOpen] = (0, search_list_1.useOpen)(openProp, defaultOpen, onOpenChange);
+    const icons = useIcons();
+    const [q, setQ] = (0, react_1.useState)('');
+    const [cursor, setCursor] = (0, react_1.useState)(0);
+    const grid = (0, react_1.useRef)(null);
+    const matches = (0, react_1.useMemo)(() => (icons ? filterIcons(icons.list, q) : []), [icons, q]);
+    const shown = matches.slice(0, SHOWN);
+    const chosen = icons ? (0, icons_1.resolveIcon)(value, icons.names, kind) : null;
+    // A fresh open starts on the chosen icon when it is in view, else the first.
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const at = chosen ? shown.indexOf(chosen) : -1;
+        setCursor(at >= 0 ? at : 0);
+        // Only the opening and a new result set reset the cursor.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, q, icons]);
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            setQ('');
+    }, [open]);
+    const pick = (name) => {
+        onValueChange?.(name);
+        setOpen(false);
+    };
+    const move = (e) => {
+        const last = shown.length - 1;
+        if (last < 0)
+            return;
+        const step = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: COLUMNS, ArrowUp: -COLUMNS };
+        let next = cursor;
+        if (e.key && e.key in step)
+            next = Math.min(last, Math.max(0, cursor + step[e.key]));
+        else if (e.key === 'Home')
+            next = 0;
+        else if (e.key === 'End')
+            next = last;
+        else if (e.key === 'Enter') {
+            e.preventDefault?.();
+            if (shown[cursor])
+                pick(shown[cursor]);
+            return;
+        }
+        else
+            return;
+        e.preventDefault?.();
+        setCursor(next);
+    };
+    (0, react_1.useEffect)(() => {
+        const el = grid.current?.querySelector?.(`[data-index="${cursor}"]`);
+        el?.scrollIntoView?.({ block: 'nearest' });
+    }, [cursor]);
+    const ActiveIcon = chosen ? icons?.get(chosen) : undefined;
+    const id = `icon-picker-${(0, react_1.useId)().replace(/:/g, '')}`;
+    return ((0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, placement: "bottom-start", children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: trigger ?? ((0, jsx_runtime_1.jsx)(button_1.Button, { size: "icon-sm", variant: "outline", disabled: disabled, "aria-label": chosen ? `${label}: ${chosen}` : label, ...{ 'aria-haspopup': 'listbox' }, children: ActiveIcon ? (0, jsx_runtime_1.jsx)(ActiveIcon, { size: 16 }) : (0, jsx_runtime_1.jsx)(gui_1.XStack, { width: 16, height: 16 }) })) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { ...(0, slot_1.slot)('icon-picker'), p: 0, width: exports.PICKER_W, sideOffset: 8, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(density_1.Density, { value: density, children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { p: INSET, borderBottomWidth: 1, borderColor: "$borderColor", children: (0, jsx_runtime_1.jsx)(input_1.Input, { size: "xs", value: q, onChangeText: (t) => setQ(t), placeholder: searchLabel, "aria-label": searchLabel, "aria-controls": id, "aria-activedescendant": shown[cursor] ? `${id}-${cursor}` : undefined, autoFocus: true, ...{ onKeyDown: move } }) }), !icons ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$hint", p: "$2", role: "status", "aria-live": "polite", children: "Loading\u2026" })) : shown.length === 0 ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$hint", p: "$2", role: "status", "aria-live": "polite", children: emptyLabel })) : ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ref: grid, ...(0, slot_1.slot)('icon-picker-grid'), ...{ id, role: 'listbox', 'aria-label': label }, flexWrap: "wrap", gap: GAP, p: INSET, maxH: CELL * 6 + GAP * 5 + INSET * 2, overflow: "scroll", children: shown.map((name, i) => {
+                                    const Icon = icons.get(name);
+                                    const on = name === chosen;
+                                    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...{
+                                            id: `${id}-${i}`,
+                                            role: 'option',
+                                            'aria-selected': on,
+                                            'aria-label': name,
+                                            'data-index': i,
+                                            title: name,
+                                        }, width: CELL, height: CELL, items: "center", justify: "center", rounded: "$xs", cursor: "pointer", bg: i === cursor ? '$hover' : on ? '$raised' : 'transparent', hoverStyle: { bg: '$hover' }, onPress: () => pick(name), children: Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 16, color: on ? '$ink' : '$aside' }) : null }, name));
+                                }) })), icons && matches.length > SHOWN ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$hint", px: "$2", pb: "$2", role: "status", "aria-live": "polite", children: `${matches.length - SHOWN} more — type to narrow` })) : null] }) }) })] }));
+}

package/dist/backends/gui/icon-picker.d.ts

@@ -0,0 +1,51 @@
+import { type ComponentType, type ReactElement } from 'react';
+import { type IconKind } from './icons.js';
+type IconComponent = ComponentType<{
+    size?: number;
+    color?: string;
+}>;
+type Icons = {
+    names: ReadonlySet<string>;
+    get: (name: string) => IconComponent | undefined;
+    list: readonly string[];
+};
+/** Every Lucide icon, loaded once, by name. */
+export declare function loadIcons(): Promise<Icons>;
+/** The icon set, once it has loaded (`null` until then). */
+export declare function useIcons(): Icons | null;
+export type GlyphProps = {
+    /** The stored name: a Lucide name, or a Tabler one from an import. */
+    name: string | null | undefined;
+    /** What it names, which decides the fallback for an unknown name. */
+    kind?: IconKind;
+    size?: number;
+    color?: string;
+};
+/**
+ * A stored icon name, drawn. Holds its box while the set loads, so a row of
+ * glyphs does not shift when they arrive; draws nothing (and still holds the
+ * box) for a name with no icon and no fallback.
+ */
+export declare function Glyph({ name, kind, size, color }: GlyphProps): import("react").JSX.Element;
+/** Five cells of 32 with 2 between and 4 round: twenty-ui's 176px picker. */
+export declare const PICKER_W: number;
+export type IconPickerProps = {
+    /** The chosen icon's stored name. */
+    value?: string | null;
+    onValueChange?: (name: string) => void;
+    /** What the chosen name is for; its fallback draws the trigger when unknown. */
+    kind?: IconKind;
+    /** Replaces the default trigger (an outline icon button drawing the value). */
+    trigger?: ReactElement;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** The trigger's and the grid's accessible name. */
+    label?: string;
+    searchLabel?: string;
+    emptyLabel?: string;
+    disabled?: boolean;
+};
+export declare function IconPicker({ value, onValueChange, kind, trigger, open: openProp, defaultOpen, onOpenChange, label, searchLabel, emptyLabel, disabled, }: IconPickerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=icon-picker.d.ts.map

package/dist/backends/gui/icon-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-picker.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/icon-picker.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAML,KAAK,aAAa,EAElB,KAAK,YAAY,EAClB,MAAM,OAAO,CAAA;AAGd,OAAO,EAA0B,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AAM/D,KAAK,aAAa,GAAG,aAAa,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA;AACrE,KAAK,KAAK,GAAG;IAAE,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAAC,GAAG,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,aAAa,GAAG,SAAS,CAAC;IAAC,IAAI,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,CAAA;AAKtH,+CAA+C;AAC/C,wBAAgB,SAAS,IAAI,OAAO,CAAC,KAAK,CAAC,CAU1C;AAED,4DAA4D;AAC5D,wBAAgB,QAAQ,IAAI,KAAK,GAAG,IAAI,CAWvC;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,sEAAsE;IACtE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IAC/B,qEAAqE;IACrE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,IAAc,EAAE,IAAS,EAAE,KAAK,EAAE,EAAE,UAAU,+BAS3E;AAMD,6EAA6E;AAC7E,eAAO,MAAM,QAAQ,QAAmD,CAAA;AAGxE,MAAM,MAAM,eAAe,GAAG;IAC5B,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,gFAAgF;IAChF,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,+EAA+E;IAC/E,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAYD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,aAAa,EACb,IAAc,EACd,OAAO,EACP,IAAI,EAAE,QAAQ,EACd,WAAW,EACX,YAAY,EACZ,KAAc,EACd,WAA4B,EAC5B,UAA8B,EAC9B,QAAQ,GACT,EAAE,eAAe,+BAiJjB"}

package/dist/backends/gui/icon-picker.js

@@ -0,0 +1,155 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Glyph and IconPicker — a stored icon name, drawn; and the grid a person picks
+ * one from.
+ *
+ * Both load Lucide through ONE dynamic import of @hanzogui/lucide-icons-2
+ * (`loadIcons`), so a page that never draws a stored icon pays nothing, and a
+ * page that does loads one chunk once: every later Glyph reads the module-level
+ * cache and draws on its first render. The name is resolved by `resolveIcon`
+ * (icons.ts): a Lucide name, a Tabler name with its pair, a same-name match, or
+ * the kind's fallback.
+ *
+ * The picker is the data-model editor's icon picker (twenty-ui's icon picker,
+ * MIT, NOTICE): 176 wide, a search field over the names and the concepts each
+ * icon draws, and a grid of 32px cells five across, run by the arrows in two
+ * dimensions, Home/End, and Enter. It shows the first 150 matches and says how
+ * many more a search would narrow to, rather than mounting 1,760 icons at once.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { Button } from './button.js';
+import { Density, useDensity } from './density.js';
+import { iconWords, resolveIcon } from './icons.js';
+import { Input } from './input.js';
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
+import { useOpen } from './search-list.js';
+import { slot } from './slot.js';
+let cache = null;
+let pending = null;
+/** Every Lucide icon, loaded once, by name. */
+export function loadIcons() {
+    if (cache)
+        return Promise.resolve(cache);
+    pending ??= import('@hanzogui/lucide-icons-2').then((mod) => {
+        const table = mod;
+        // The barrel exports the icons and nothing else (1,760, each by its name).
+        const list = Object.keys(table).filter((k) => /^[A-Z]/.test(k)).sort();
+        cache = { names: new Set(list), get: (n) => table[n], list };
+        return cache;
+    });
+    return pending;
+}
+/** The icon set, once it has loaded (`null` until then). */
+export function useIcons() {
+    const [icons, setIcons] = useState(cache);
+    useEffect(() => {
+        if (icons)
+            return;
+        let live = true;
+        loadIcons().then((loaded) => live && setIcons(loaded));
+        return () => {
+            live = false;
+        };
+    }, [icons]);
+    return icons;
+}
+/**
+ * A stored icon name, drawn. Holds its box while the set loads, so a row of
+ * glyphs does not shift when they arrive; draws nothing (and still holds the
+ * box) for a name with no icon and no fallback.
+ */
+export function Glyph({ name, kind = 'other', size = 16, color }) {
+    const icons = useIcons();
+    const resolved = icons ? resolveIcon(name, icons.names, kind) : null;
+    const Icon = resolved ? icons?.get(resolved) : undefined;
+    return (_jsx(XStack, { ...slot('glyph'), width: size, height: size, items: "center", justify: "center", shrink: 0, "aria-hidden": true, children: Icon ? _jsx(Icon, { size: size, ...(color ? { color } : null) }) : null }));
+}
+const COLUMNS = 5;
+const CELL = 32;
+const GAP = 2;
+const INSET = 4;
+/** Five cells of 32 with 2 between and 4 round: twenty-ui's 176px picker. */
+export const PICKER_W = INSET * 2 + COLUMNS * CELL + (COLUMNS - 1) * GAP;
+const SHOWN = 150;
+/** The names a query keeps: every word of it in the name or a concept it draws. */
+const filterIcons = (list, q) => {
+    const words = q.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    if (!words.length)
+        return [...list];
+    return list.filter((n) => {
+        const hay = iconWords(n);
+        return words.every((w) => hay.includes(w));
+    });
+};
+export function IconPicker({ value, onValueChange, kind = 'other', trigger, open: openProp, defaultOpen, onOpenChange, label = 'Icon', searchLabel = 'Search icons', emptyLabel = 'No icon matches', disabled, }) {
+    const density = useDensity();
+    const [open, setOpen] = useOpen(openProp, defaultOpen, onOpenChange);
+    const icons = useIcons();
+    const [q, setQ] = useState('');
+    const [cursor, setCursor] = useState(0);
+    const grid = useRef(null);
+    const matches = useMemo(() => (icons ? filterIcons(icons.list, q) : []), [icons, q]);
+    const shown = matches.slice(0, SHOWN);
+    const chosen = icons ? resolveIcon(value, icons.names, kind) : null;
+    // A fresh open starts on the chosen icon when it is in view, else the first.
+    useEffect(() => {
+        if (!open)
+            return;
+        const at = chosen ? shown.indexOf(chosen) : -1;
+        setCursor(at >= 0 ? at : 0);
+        // Only the opening and a new result set reset the cursor.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, q, icons]);
+    useEffect(() => {
+        if (!open)
+            setQ('');
+    }, [open]);
+    const pick = (name) => {
+        onValueChange?.(name);
+        setOpen(false);
+    };
+    const move = (e) => {
+        const last = shown.length - 1;
+        if (last < 0)
+            return;
+        const step = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: COLUMNS, ArrowUp: -COLUMNS };
+        let next = cursor;
+        if (e.key && e.key in step)
+            next = Math.min(last, Math.max(0, cursor + step[e.key]));
+        else if (e.key === 'Home')
+            next = 0;
+        else if (e.key === 'End')
+            next = last;
+        else if (e.key === 'Enter') {
+            e.preventDefault?.();
+            if (shown[cursor])
+                pick(shown[cursor]);
+            return;
+        }
+        else
+            return;
+        e.preventDefault?.();
+        setCursor(next);
+    };
+    useEffect(() => {
+        const el = grid.current?.querySelector?.(`[data-index="${cursor}"]`);
+        el?.scrollIntoView?.({ block: 'nearest' });
+    }, [cursor]);
+    const ActiveIcon = chosen ? icons?.get(chosen) : undefined;
+    const id = `icon-picker-${useId().replace(/:/g, '')}`;
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, placement: "bottom-start", children: [_jsx(PopoverTrigger, { asChild: true, children: trigger ?? (_jsx(Button, { size: "icon-sm", variant: "outline", disabled: disabled, "aria-label": chosen ? `${label}: ${chosen}` : label, ...{ 'aria-haspopup': 'listbox' }, children: ActiveIcon ? _jsx(ActiveIcon, { size: 16 }) : _jsx(XStack, { width: 16, height: 16 }) })) }), _jsx(PopoverContent, { ...slot('icon-picker'), p: 0, width: PICKER_W, sideOffset: 8, overflow: "hidden", children: _jsx(Density, { value: density, children: _jsxs(YStack, { children: [_jsx(XStack, { p: INSET, borderBottomWidth: 1, borderColor: "$borderColor", children: _jsx(Input, { size: "xs", value: q, onChangeText: (t) => setQ(t), placeholder: searchLabel, "aria-label": searchLabel, "aria-controls": id, "aria-activedescendant": shown[cursor] ? `${id}-${cursor}` : undefined, autoFocus: true, ...{ onKeyDown: move } }) }), !icons ? (_jsx(SizableText, { size: "$1", color: "$hint", p: "$2", role: "status", "aria-live": "polite", children: "Loading\u2026" })) : shown.length === 0 ? (_jsx(SizableText, { size: "$1", color: "$hint", p: "$2", role: "status", "aria-live": "polite", children: emptyLabel })) : (_jsx(XStack, { ref: grid, ...slot('icon-picker-grid'), ...{ id, role: 'listbox', 'aria-label': label }, flexWrap: "wrap", gap: GAP, p: INSET, maxH: CELL * 6 + GAP * 5 + INSET * 2, overflow: "scroll", children: shown.map((name, i) => {
+                                    const Icon = icons.get(name);
+                                    const on = name === chosen;
+                                    return (_jsx(XStack, { ...{
+                                            id: `${id}-${i}`,
+                                            role: 'option',
+                                            'aria-selected': on,
+                                            'aria-label': name,
+                                            'data-index': i,
+                                            title: name,
+                                        }, width: CELL, height: CELL, items: "center", justify: "center", rounded: "$xs", cursor: "pointer", bg: i === cursor ? '$hover' : on ? '$raised' : 'transparent', hoverStyle: { bg: '$hover' }, onPress: () => pick(name), children: Icon ? _jsx(Icon, { size: 16, color: on ? '$ink' : '$aside' }) : null }, name));
+                                }) })), icons && matches.length > SHOWN ? (_jsx(SizableText, { size: "$1", color: "$hint", px: "$2", pb: "$2", role: "status", "aria-live": "polite", children: `${matches.length - SHOWN} more — type to narrow` })) : null] }) }) })] }));
+}
+//# sourceMappingURL=icon-picker.js.map

package/dist/backends/gui/icon-picker.js.map

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