@hanzo/ui 8.27.91 → 8.29.0

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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"}

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

@@ -0,0 +1,36 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tileTones = void 0;
+exports.IconTile = IconTile;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * IconTile — a 16px icon on a tinted square: an object's mark in the navigation,
+ * a command, a settings area, a workflow node.
+ *
+ * The tint is the object's data hue — step 4 under a step 10 glyph — so People
+ * and Companies keep the colours a person gave them. The icon is decorative;
+ * the row beside it carries the name.
+ *
+ * Re-expressed from twenty-ui's TintedIconTile (MIT, see NOTICE).
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const data_1 = require("@hanzo/tokens/data");
+const hue_1 = require("./hue.cjs");
+const slot_1 = require("./slot.cjs");
+const BOX = 16;
+/** A hue's tile pair — fill and glyph — for a row that wants the same two without the tile. */
+const tileTones = (hue) => ({ fill: (0, data_1.data)(hue, 4), glyph: (0, data_1.data)(hue, 10) });
+exports.tileTones = tileTones;
+function IconTile({ icon, color, style, ...props }) {
+    const hue = (0, hue_1.hueOr)(color);
+    const { style: hueStyle, tone } = (0, hue_1.useTone)(hue, [4, 10]);
+    const glyph = (0, react_1.isValidElement)(icon) && icon.props.color == null
+        ? (0, react_1.cloneElement)(icon, {
+            color: tone(10),
+            ...(icon.props.size == null ? { size: BOX } : null),
+        })
+        : icon;
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('icon-tile'), "data-color": hue, "aria-hidden": true, width: BOX, height: BOX, shrink: 0, rounded: "$xs", items: "center", justify: "center", bg: tone(4), style: { ...hueStyle, ...style }, ...props, children: glyph }));
+}

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

@@ -0,0 +1,26 @@
+/**
+ * IconTile — a 16px icon on a tinted square: an object's mark in the navigation,
+ * a command, a settings area, a workflow node.
+ *
+ * The tint is the object's data hue — step 4 under a step 10 glyph — so People
+ * and Companies keep the colours a person gave them. The icon is decorative;
+ * the row beside it carries the name.
+ *
+ * Re-expressed from twenty-ui's TintedIconTile (MIT, see NOTICE).
+ */
+import { XStack } from '@hanzo/gui';
+import { type ComponentProps, type ReactNode } from 'react';
+import { type DataHue } from './hue.js';
+/** A hue's tile pair — fill and glyph — for a row that wants the same two without the tile. */
+export declare const tileTones: (hue: DataHue) => {
+    fill: string;
+    glyph: string;
+};
+export type IconTileProps = Omit<ComponentProps<typeof XStack>, 'children' | 'color'> & {
+    /** A 16px icon. Given no colour, it takes the glyph step. */
+    icon: ReactNode;
+    /** A data hue; anything else, or none, is gray. */
+    color?: DataHue | (string & {}) | null;
+};
+export declare function IconTile({ icon, color, style, ...props }: IconTileProps): import("react").JSX.Element;
+//# sourceMappingURL=icon-tile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-tile.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/icon-tile.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAgC,KAAK,cAAc,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5G,OAAO,EAAkB,KAAK,OAAO,EAAE,MAAM,OAAO,CAAA;AAKpD,+FAA+F;AAC/F,eAAO,MAAM,SAAS,QAAS,OAAO;IAAQ,IAAI;IAAgB,KAAK;CAAkB,CAAA;AAEzF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACtF,6DAA6D;IAC7D,IAAI,EAAE,SAAS,CAAA;IACf,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,IAAI,CAAA;CACvC,CAAA;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BA4BvE"}

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

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * IconTile — a 16px icon on a tinted square: an object's mark in the navigation,
+ * a command, a settings area, a workflow node.
+ *
+ * The tint is the object's data hue — step 4 under a step 10 glyph — so People
+ * and Companies keep the colours a person gave them. The icon is decorative;
+ * the row beside it carries the name.
+ *
+ * Re-expressed from twenty-ui's TintedIconTile (MIT, see NOTICE).
+ */
+import { XStack } from '@hanzo/gui';
+import { cloneElement, isValidElement } from 'react';
+import { data } from '@hanzo/tokens/data';
+import { hueOr, useTone } from './hue.js';
+import { slot } from './slot.js';
+const BOX = 16;
+/** A hue's tile pair — fill and glyph — for a row that wants the same two without the tile. */
+export const tileTones = (hue) => ({ fill: data(hue, 4), glyph: data(hue, 10) });
+export function IconTile({ icon, color, style, ...props }) {
+    const hue = hueOr(color);
+    const { style: hueStyle, tone } = useTone(hue, [4, 10]);
+    const glyph = isValidElement(icon) && icon.props.color == null
+        ? cloneElement(icon, {
+            color: tone(10),
+            ...(icon.props.size == null ? { size: BOX } : null),
+        })
+        : icon;
+    return (_jsx(XStack, { ...slot('icon-tile'), "data-color": hue, "aria-hidden": true, width: BOX, height: BOX, shrink: 0, rounded: "$xs", items: "center", justify: "center", bg: tone(4), style: { ...hueStyle, ...style }, ...props, children: glyph }));
+}
+//# sourceMappingURL=icon-tile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-tile.js","sourceRoot":"","sources":["../../../src/backends/gui/icon-tile.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;GASG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,YAAY,EAAE,cAAc,EAA0D,MAAM,OAAO,CAAA;AAC5G,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAgB,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,GAAG,GAAG,EAAE,CAAA;AAEd,+FAA+F;AAC/F,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,GAAY,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAA;AASzF,MAAM,UAAU,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAiB;IACtE,MAAM,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,CAAA;IACxB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAA;IACvD,MAAM,KAAK,GACT,cAAc,CAAC,IAAI,CAAC,IAAK,IAAI,CAAC,KAA6B,CAAC,KAAK,IAAI,IAAI;QACvE,CAAC,CAAC,YAAY,CAAC,IAA6C,EAAE;YAC1D,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC;YACf,GAAG,CAAE,IAAI,CAAC,KAA4B,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;SAC5E,CAAC;QACJ,CAAC,CAAC,IAAI,CAAA;IACV,OAAO,CACL,KAAC,MAAM,OACD,IAAI,CAAC,WAAW,CAAC,gBACT,GAAG,uBAEf,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,MAAM,EAAE,CAAC,EACT,OAAO,EAAC,KAAK,EACb,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,EACX,KAAK,EAAE,EAAE,GAAG,QAAQ,EAAE,GAAI,KAAgB,EAAE,KACxC,KAAK,YAER,KAAK,GACC,CACV,CAAA;AACH,CAAC"}