@hanzo/ui 8.27.91 → 8.29.0

package/dist/backends/gui/grip.cjs

@@ -68,6 +68,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * draws instead of an outline.
  *
  * Moved here from @hanzo/build, where hanzo.ai's sidebar and asides used it.
+ *
+ * `bar` draws a handle a person can see before reaching for it (twenty-ui's
+ * ResizeHandle, MIT, NOTICE): a pill in the middle of the band, 4×48 on an edge
+ * (`edge`) or 3×32 between two panes (`inline`), the raised rung at rest, the
+ * soft one under the pointer, and the strong edge while it moves, lengthened by
+ * a fifth whenever it is reached for. A drag in progress is cancelled by Escape,
+ * which puts the box back where the drag found it. `step` sets the key's step.
+ *
+ * It is THE standalone resizer: the docked side panel's edge, a drawer's width
+ * and an editor's height are a Grip; `ResizableHandle` is the separator inside
+ * a `ResizablePanelGroup` and nothing else.
  */
 const gui_1 = require("@hanzo/gui");
 const React = __importStar(require("react"));
@@ -78,7 +89,7 @@ const LONG = 32;
 const SLACK = 48;
 /** The grab band's thickness, px; the line drawn inside it is 2. */
 const BAND = 8;
-function Grip({ side, span, floor, ceil, reset, onReset, onSpan, onKeep, onShut, label, ...rest }) {
+function Grip({ side, span, floor, ceil, reset, onReset, onSpan, onKeep, onShut, label, bar, step: unit = STEP, ...rest }) {
     const tall = side === 'top';
     /** +1 when the pointer moving away from the pinned edge grows the box. */
     const grows = side === 'right' ? -1 : 1;
@@ -89,6 +100,8 @@ function Grip({ side, span, floor, ceil, reset, onReset, onSpan, onKeep, onShut,
     // keeps nothing.
     const drag = React.useRef('none');
     const want = React.useRef(span);
+    // The size the drag began at, for Escape to put back.
+    const began = React.useRef(span);
     const frame = React.useRef(0);
     const [hovered, setHovered] = React.useState(false);
     const [keyed, setKeyed] = React.useState(false);
@@ -119,6 +132,21 @@ function Grip({ side, span, floor, ceil, reset, onReset, onSpan, onKeep, onShut,
         if (moved)
             settle(want.current);
     };
+    // Escape cancels a drag. The press took no focus (pointerdown is prevented so
+    // no text selection starts), so the key arrives at the document, not here.
+    React.useEffect(() => {
+        if (!moving || typeof window === 'undefined')
+            return;
+        const cancel = (e) => {
+            if (e.key !== 'Escape' || drag.current === 'none')
+                return;
+            e.preventDefault();
+            stop();
+            onSpan(began.current);
+        };
+        window.addEventListener('keydown', cancel, true);
+        return () => window.removeEventListener('keydown', cancel, true);
+    });
     const wider = side === 'left' ? 'ArrowRight' : side === 'right' ? 'ArrowLeft' : 'ArrowDown';
     const narrower = side === 'left' ? 'ArrowLeft' : side === 'right' ? 'ArrowRight' : 'ArrowUp';
     const edge = tall
@@ -135,6 +163,7 @@ function Grip({ side, span, floor, ceil, reset, onReset, onSpan, onKeep, onShut,
             const now = drawn(e.currentTarget);
             held.current = along(e) - grows * now;
             want.current = clamp(now);
+            began.current = clamp(now);
             drag.current = 'held';
             setMoving(true);
         }, onPointerMove: (e) => {
@@ -158,7 +187,7 @@ function Grip({ side, span, floor, ceil, reset, onReset, onSpan, onKeep, onShut,
         }, 
         // A drag ends when the pointer is let go: lifted, or taken by the browser.
         onPointerUp: end, onPointerCancel: end, onDoubleClick: () => (onReset ? onReset() : settle(clamp(reset ?? span))), onKeyDown: (e) => {
-            const step = e.shiftKey ? LONG : STEP;
+            const step = e.shiftKey ? LONG : unit;
             const now = drawn(e.currentTarget);
             const to = e.key === wider
                 ? now + step
@@ -175,5 +204,8 @@ function Grip({ side, span, floor, ceil, reset, onReset, onSpan, onKeep, onShut,
             if (onShut && to < floor)
                 return onShut();
             settle(clamp(to));
-        }, ...rest, children: (0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(tall ? { height: 2, width: '100%' } : { width: 2, height: '100%' }), rounded: 1, bg: keyed || moving ? '$outlineColor' : hovered ? '$rim' : 'transparent', pointerEvents: "none" }) }));
+        }, ...rest, children: bar ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { "data-slot": "grip-bar", ...(() => {
+                const [thick, long] = bar === 'edge' ? [4, 48] : [3, 32];
+                return tall ? { height: thick, width: long } : { width: thick, height: long };
+            })(), self: "center", rounded: "$10", bg: moving ? '$rim' : keyed ? '$outlineColor' : hovered ? '$hint' : '$raised', [tall ? 'scaleX' : 'scaleY']: moving || hovered || keyed ? 1.2 : 1, animation: "quickest", pointerEvents: "none" })) : ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(tall ? { height: 2, width: '100%' } : { width: 2, height: '100%' }), rounded: 1, bg: keyed || moving ? '$outlineColor' : hovered ? '$rim' : 'transparent', pointerEvents: "none" })) }));
 }

package/dist/backends/gui/grip.d.ts

@@ -30,6 +30,17 @@
  * draws instead of an outline.
  *
  * Moved here from @hanzo/build, where hanzo.ai's sidebar and asides used it.
+ *
+ * `bar` draws a handle a person can see before reaching for it (twenty-ui's
+ * ResizeHandle, MIT, NOTICE): a pill in the middle of the band, 4×48 on an edge
+ * (`edge`) or 3×32 between two panes (`inline`), the raised rung at rest, the
+ * soft one under the pointer, and the strong edge while it moves, lengthened by
+ * a fifth whenever it is reached for. A drag in progress is cancelled by Escape,
+ * which puts the box back where the drag found it. `step` sets the key's step.
+ *
+ * It is THE standalone resizer: the docked side panel's edge, a drawer's width
+ * and an editor's height are a Grip; `ResizableHandle` is the separator inside
+ * a `ResizablePanelGroup` and nothing else.
  */
 import { type YStackProps } from '@hanzo/gui';
 import * as React from 'react';
@@ -46,6 +57,10 @@ export interface GripProps extends Omit<YStackProps, 'children'> {
     onShut?: () => void;
     /** The separator's accessible name: "Resize sidebar", "Resize Input". */
     label: string;
+    /** A visible handle: `edge` 4×48 on a box's edge, `inline` 3×32 between panes. Absent, the line alone. */
+    bar?: 'edge' | 'inline';
+    /** A key's step, px (32 with Shift). Default 8. */
+    step?: number;
 }
-export declare function Grip({ side, span, floor, ceil, reset, onReset, onSpan, onKeep, onShut, label, ...rest }: GripProps): React.JSX.Element;
+export declare function Grip({ side, span, floor, ceil, reset, onReset, onSpan, onKeep, onShut, label, bar, step: unit, ...rest }: GripProps): React.JSX.Element;
 //# sourceMappingURL=grip.d.ts.map

package/dist/backends/gui/grip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grip.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/grip.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAA;AAE/C,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAC9D,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAA;CACd;AAKD,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,MAAM,EACN,KAAK,EACL,GAAG,IAAI,EACR,EAAE,SAAS,qBAmIX"}
+{"version":3,"file":"grip.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/grip.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAA;AAE/C,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAC9D,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAA;IACb,0GAA0G;IAC1G,GAAG,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;IACvB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAKD,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,MAAM,EACN,KAAK,EACL,GAAG,EACH,IAAI,EAAE,IAAW,EACjB,GAAG,IAAI,EACR,EAAE,SAAS,qBAsKX"}

package/dist/backends/gui/grip.js

@@ -32,6 +32,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * draws instead of an outline.
  *
  * Moved here from @hanzo/build, where hanzo.ai's sidebar and asides used it.
+ *
+ * `bar` draws a handle a person can see before reaching for it (twenty-ui's
+ * ResizeHandle, MIT, NOTICE): a pill in the middle of the band, 4×48 on an edge
+ * (`edge`) or 3×32 between two panes (`inline`), the raised rung at rest, the
+ * soft one under the pointer, and the strong edge while it moves, lengthened by
+ * a fifth whenever it is reached for. A drag in progress is cancelled by Escape,
+ * which puts the box back where the drag found it. `step` sets the key's step.
+ *
+ * It is THE standalone resizer: the docked side panel's edge, a drawer's width
+ * and an editor's height are a Grip; `ResizableHandle` is the separator inside
+ * a `ResizablePanelGroup` and nothing else.
  */
 import { YStack } from '@hanzo/gui';
 import * as React from 'react';
@@ -42,7 +53,7 @@ const LONG = 32;
 const SLACK = 48;
 /** The grab band's thickness, px; the line drawn inside it is 2. */
 const BAND = 8;
-export function Grip({ side, span, floor, ceil, reset, onReset, onSpan, onKeep, onShut, label, ...rest }) {
+export function Grip({ side, span, floor, ceil, reset, onReset, onSpan, onKeep, onShut, label, bar, step: unit = STEP, ...rest }) {
     const tall = side === 'top';
     /** +1 when the pointer moving away from the pinned edge grows the box. */
     const grows = side === 'right' ? -1 : 1;
@@ -53,6 +64,8 @@ export function Grip({ side, span, floor, ceil, reset, onReset, onSpan, onKeep,
     // keeps nothing.
     const drag = React.useRef('none');
     const want = React.useRef(span);
+    // The size the drag began at, for Escape to put back.
+    const began = React.useRef(span);
     const frame = React.useRef(0);
     const [hovered, setHovered] = React.useState(false);
     const [keyed, setKeyed] = React.useState(false);
@@ -83,6 +96,21 @@ export function Grip({ side, span, floor, ceil, reset, onReset, onSpan, onKeep,
         if (moved)
             settle(want.current);
     };
+    // Escape cancels a drag. The press took no focus (pointerdown is prevented so
+    // no text selection starts), so the key arrives at the document, not here.
+    React.useEffect(() => {
+        if (!moving || typeof window === 'undefined')
+            return;
+        const cancel = (e) => {
+            if (e.key !== 'Escape' || drag.current === 'none')
+                return;
+            e.preventDefault();
+            stop();
+            onSpan(began.current);
+        };
+        window.addEventListener('keydown', cancel, true);
+        return () => window.removeEventListener('keydown', cancel, true);
+    });
     const wider = side === 'left' ? 'ArrowRight' : side === 'right' ? 'ArrowLeft' : 'ArrowDown';
     const narrower = side === 'left' ? 'ArrowLeft' : side === 'right' ? 'ArrowRight' : 'ArrowUp';
     const edge = tall
@@ -99,6 +127,7 @@ export function Grip({ side, span, floor, ceil, reset, onReset, onSpan, onKeep,
             const now = drawn(e.currentTarget);
             held.current = along(e) - grows * now;
             want.current = clamp(now);
+            began.current = clamp(now);
             drag.current = 'held';
             setMoving(true);
         }, onPointerMove: (e) => {
@@ -122,7 +151,7 @@ export function Grip({ side, span, floor, ceil, reset, onReset, onSpan, onKeep,
         }, 
         // A drag ends when the pointer is let go: lifted, or taken by the browser.
         onPointerUp: end, onPointerCancel: end, onDoubleClick: () => (onReset ? onReset() : settle(clamp(reset ?? span))), onKeyDown: (e) => {
-            const step = e.shiftKey ? LONG : STEP;
+            const step = e.shiftKey ? LONG : unit;
             const now = drawn(e.currentTarget);
             const to = e.key === wider
                 ? now + step
@@ -139,6 +168,9 @@ export function Grip({ side, span, floor, ceil, reset, onReset, onSpan, onKeep,
             if (onShut && to < floor)
                 return onShut();
             settle(clamp(to));
-        }, ...rest, children: _jsx(YStack, { ...(tall ? { height: 2, width: '100%' } : { width: 2, height: '100%' }), rounded: 1, bg: keyed || moving ? '$outlineColor' : hovered ? '$rim' : 'transparent', pointerEvents: "none" }) }));
+        }, ...rest, children: bar ? (_jsx(YStack, { "data-slot": "grip-bar", ...(() => {
+                const [thick, long] = bar === 'edge' ? [4, 48] : [3, 32];
+                return tall ? { height: thick, width: long } : { width: thick, height: long };
+            })(), self: "center", rounded: "$10", bg: moving ? '$rim' : keyed ? '$outlineColor' : hovered ? '$hint' : '$raised', [tall ? 'scaleX' : 'scaleY']: moving || hovered || keyed ? 1.2 : 1, animation: "quickest", pointerEvents: "none" })) : (_jsx(YStack, { ...(tall ? { height: 2, width: '100%' } : { width: 2, height: '100%' }), rounded: 1, bg: keyed || moving ? '$outlineColor' : hovered ? '$rim' : 'transparent', pointerEvents: "none" })) }));
 }
 //# sourceMappingURL=grip.js.map

package/dist/backends/gui/grip.js.map

@@ -1 +1 @@
-{"version":3,"file":"grip.js","sourceRoot":"","sources":["../../../src/backends/gui/grip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,EAAE,MAAM,EAAoB,MAAM,YAAY,CAAA;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,kDAAkD;AAClD,MAAM,IAAI,GAAG,CAAC,CAAA;AACd,MAAM,IAAI,GAAG,EAAE,CAAA;AAEf,4GAA4G;AAC5G,MAAM,KAAK,GAAG,EAAE,CAAA;AAEhB,oEAAoE;AACpE,MAAM,IAAI,GAAG,CAAC,CAAA;AAqBd,MAAM,UAAU,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,MAAM,EACN,KAAK,EACL,GAAG,IAAI,EACG;IACV,MAAM,IAAI,GAAG,IAAI,KAAK,KAAK,CAAA;IAC3B,0EAA0E;IAC1E,MAAM,KAAK,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IACvC,mEAAmE;IACnE,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAC5B,gFAAgF;IAChF,4EAA4E;IAC5E,iBAAiB;IACjB,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAA4B,MAAM,CAAC,CAAA;IAC5D,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IAC/B,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAC7B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACnD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAA;IAEpE,MAAM,KAAK,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;IAC3E,MAAM,KAAK,GAAG,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAC1D,+DAA+D;IAC/D,MAAM,KAAK,GAAG,CAAC,EAAW,EAAE,EAAE;QAC5B,MAAM,GAAG,GAAI,EAAyB,EAAE,aAAa,EAAE,qBAAqB,EAAE,CAAA;QAC9E,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IACrD,CAAC,CAAA;IACD,MAAM,MAAM,GAAG,CAAC,CAAS,EAAE,EAAE;QAC3B,MAAM,CAAC,CAAC,CAAC,CAAA;QACT,MAAM,EAAE,CAAC,CAAC,CAAC,CAAA;IACb,CAAC,CAAA;IACD,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAA;QACrB,oBAAoB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;QACnC,KAAK,CAAC,OAAO,GAAG,CAAC,CAAA;QACjB,SAAS,CAAC,KAAK,CAAC,CAAA;IAClB,CAAC,CAAA;IACD,MAAM,GAAG,GAAG,GAAG,EAAE;QACf,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;YAAE,OAAM;QACnC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,CAAA;QACtC,IAAI,EAAE,CAAA;QACN,IAAI,KAAK;YAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IACjC,CAAC,CAAA;IACD,MAAM,KAAK,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAA;IAC3F,MAAM,QAAQ,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAA;IAC5F,MAAM,IAAI,GAAG,IAAI;QACf,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,QAAiB,EAAE;QAChE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAiB,EAAE,GAAG,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;IAErG,OAAO,CACL,KAAC,MAAM,IACL,IAAI,EAAC,WAAW,sBACE,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,gBACtC,KAAK,mBACF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,mBAChB,KAAK,mBACL,IAAI,EACnB,QAAQ,EAAE,CAAC,eACD,MAAM,eACL,IAAI,iBACF,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACpC,QAAQ,EAAC,UAAU,KACf,IAAI,EACR,CAAC,EAAE,EAAE,EACL,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,EAC1C,YAAY,EAAE,CAAC,EACf,iBAAiB,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,EACtC,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,EAC9B,cAAc,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EACtC,cAAc,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC;QACvC,gFAAgF;QAChF,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,EAClG,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC7B,aAAa,EAAE,CAAC,CAAkC,EAAE,EAAE;YACpD,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC;gBAAE,OAAM;YAC1B,yCAAyC;YACzC,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,CAAC,CAAC,aAAa,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;YAChD,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA;YAClC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,GAAG,CAAA;YACrC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;YACzB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAA;YACrB,SAAS,CAAC,IAAI,CAAC,CAAA;QACjB,CAAC,EACD,aAAa,EAAE,CAAC,CAAkC,EAAE,EAAE;YACpD,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;gBAAE,OAAM;YACnC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;YACtB,MAAM,MAAM,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAA;YAChD,IAAI,MAAM,IAAI,MAAM,GAAG,KAAK,GAAG,KAAK,EAAE,CAAC;gBACrC,IAAI,EAAE,CAAA;gBACN,CAAC,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;gBACpD,MAAM,EAAE,CAAA;gBACR,OAAM;YACR,CAAC;YACD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAA;YAC5B,IAAI,KAAK,CAAC,OAAO;gBAAE,OAAM;YACzB,KAAK,CAAC,OAAO,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBACzC,KAAK,CAAC,OAAO,GAAG,CAAC,CAAA;gBACjB,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;YACtB,CAAC,CAAC,CAAA;QACJ,CAAC;QACD,2EAA2E;QAC3E,WAAW,EAAE,GAAG,EAChB,eAAe,EAAE,GAAG,EACpB,aAAa,EAAE,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EACzE,SAAS,EAAE,CAAC,CAAQ,EAAE,EAAE;YACtB,MAAM,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;YACrC,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA;YAClC,MAAM,EAAE,GACN,CAAC,CAAC,GAAG,KAAK,KAAK;gBACb,CAAC,CAAC,GAAG,GAAG,IAAI;gBACZ,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,QAAQ;oBAClB,CAAC,CAAC,GAAG,GAAG,IAAI;oBACZ,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,MAAM;wBAChB,CAAC,CAAC,KAAK;wBACP,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK;4BACf,CAAC,CAAC,IAAI;4BACN,CAAC,CAAC,IAAI,CAAA;YAChB,IAAI,EAAE,KAAK,IAAI;gBAAE,OAAM;YACvB,CAAC,CAAC,cAAc,EAAE,EAAE,CAAA;YACpB,IAAI,MAAM,IAAI,EAAE,GAAG,KAAK;gBAAE,OAAO,MAAM,EAAE,CAAA;YACzC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;QACnB,CAAC,KACG,IAAI,YAGR,KAAC,MAAM,OACD,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EACxE,OAAO,EAAE,CAAC,EACV,EAAE,EAAE,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,EACxE,aAAa,EAAC,MAAM,GACpB,GACK,CACV,CAAA;AACH,CAAC"}
+{"version":3,"file":"grip.js","sourceRoot":"","sources":["../../../src/backends/gui/grip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,OAAO,EAAE,MAAM,EAAoB,MAAM,YAAY,CAAA;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,kDAAkD;AAClD,MAAM,IAAI,GAAG,CAAC,CAAA;AACd,MAAM,IAAI,GAAG,EAAE,CAAA;AAEf,4GAA4G;AAC5G,MAAM,KAAK,GAAG,EAAE,CAAA;AAEhB,oEAAoE;AACpE,MAAM,IAAI,GAAG,CAAC,CAAA;AAyBd,MAAM,UAAU,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,MAAM,EACN,KAAK,EACL,GAAG,EACH,IAAI,EAAE,IAAI,GAAG,IAAI,EACjB,GAAG,IAAI,EACG;IACV,MAAM,IAAI,GAAG,IAAI,KAAK,KAAK,CAAA;IAC3B,0EAA0E;IAC1E,MAAM,KAAK,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IACvC,mEAAmE;IACnE,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAC5B,gFAAgF;IAChF,4EAA4E;IAC5E,iBAAiB;IACjB,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAA4B,MAAM,CAAC,CAAA;IAC5D,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IAC/B,sDAAsD;IACtD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IAChC,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAC7B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACnD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAA;IAEpE,MAAM,KAAK,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;IAC3E,MAAM,KAAK,GAAG,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAC1D,+DAA+D;IAC/D,MAAM,KAAK,GAAG,CAAC,EAAW,EAAE,EAAE;QAC5B,MAAM,GAAG,GAAI,EAAyB,EAAE,aAAa,EAAE,qBAAqB,EAAE,CAAA;QAC9E,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IACrD,CAAC,CAAA;IACD,MAAM,MAAM,GAAG,CAAC,CAAS,EAAE,EAAE;QAC3B,MAAM,CAAC,CAAC,CAAC,CAAA;QACT,MAAM,EAAE,CAAC,CAAC,CAAC,CAAA;IACb,CAAC,CAAA;IACD,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAA;QACrB,oBAAoB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;QACnC,KAAK,CAAC,OAAO,GAAG,CAAC,CAAA;QACjB,SAAS,CAAC,KAAK,CAAC,CAAA;IAClB,CAAC,CAAA;IACD,MAAM,GAAG,GAAG,GAAG,EAAE;QACf,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;YAAE,OAAM;QACnC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,CAAA;QACtC,IAAI,EAAE,CAAA;QACN,IAAI,KAAK;YAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IACjC,CAAC,CAAA;IACD,8EAA8E;IAC9E,2EAA2E;IAC3E,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,MAAM,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAM;QACpD,MAAM,MAAM,GAAG,CAAC,CAAgB,EAAE,EAAE;YAClC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;gBAAE,OAAM;YACzD,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,IAAI,EAAE,CAAA;YACN,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;QACvB,CAAC,CAAA;QACD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,CAAA;QAChD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,CAAA;IAClE,CAAC,CAAC,CAAA;IAEF,MAAM,KAAK,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAA;IAC3F,MAAM,QAAQ,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAA;IAC5F,MAAM,IAAI,GAAG,IAAI;QACf,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,QAAiB,EAAE;QAChE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAiB,EAAE,GAAG,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;IAErG,OAAO,CACL,KAAC,MAAM,IACL,IAAI,EAAC,WAAW,sBACE,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,gBACtC,KAAK,mBACF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,mBAChB,KAAK,mBACL,IAAI,EACnB,QAAQ,EAAE,CAAC,eACD,MAAM,eACL,IAAI,iBACF,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACpC,QAAQ,EAAC,UAAU,KACf,IAAI,EACR,CAAC,EAAE,EAAE,EACL,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,EAC1C,YAAY,EAAE,CAAC,EACf,iBAAiB,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,EACtC,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,EAC9B,cAAc,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EACtC,cAAc,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC;QACvC,gFAAgF;QAChF,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,EAClG,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC7B,aAAa,EAAE,CAAC,CAAkC,EAAE,EAAE;YACpD,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC;gBAAE,OAAM;YAC1B,yCAAyC;YACzC,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,CAAC,CAAC,aAAa,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;YAChD,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA;YAClC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,GAAG,CAAA;YACrC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;YACzB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;YAC1B,IAAI,CAAC,OAAO,GAAG,MAAM,CAAA;YACrB,SAAS,CAAC,IAAI,CAAC,CAAA;QACjB,CAAC,EACD,aAAa,EAAE,CAAC,CAAkC,EAAE,EAAE;YACpD,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;gBAAE,OAAM;YACnC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;YACtB,MAAM,MAAM,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAA;YAChD,IAAI,MAAM,IAAI,MAAM,GAAG,KAAK,GAAG,KAAK,EAAE,CAAC;gBACrC,IAAI,EAAE,CAAA;gBACN,CAAC,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;gBACpD,MAAM,EAAE,CAAA;gBACR,OAAM;YACR,CAAC;YACD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAA;YAC5B,IAAI,KAAK,CAAC,OAAO;gBAAE,OAAM;YACzB,KAAK,CAAC,OAAO,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBACzC,KAAK,CAAC,OAAO,GAAG,CAAC,CAAA;gBACjB,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;YACtB,CAAC,CAAC,CAAA;QACJ,CAAC;QACD,2EAA2E;QAC3E,WAAW,EAAE,GAAG,EAChB,eAAe,EAAE,GAAG,EACpB,aAAa,EAAE,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EACzE,SAAS,EAAE,CAAC,CAAQ,EAAE,EAAE;YACtB,MAAM,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;YACrC,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA;YAClC,MAAM,EAAE,GACN,CAAC,CAAC,GAAG,KAAK,KAAK;gBACb,CAAC,CAAC,GAAG,GAAG,IAAI;gBACZ,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,QAAQ;oBAClB,CAAC,CAAC,GAAG,GAAG,IAAI;oBACZ,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,MAAM;wBAChB,CAAC,CAAC,KAAK;wBACP,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK;4BACf,CAAC,CAAC,IAAI;4BACN,CAAC,CAAC,IAAI,CAAA;YAChB,IAAI,EAAE,KAAK,IAAI;gBAAE,OAAM;YACvB,CAAC,CAAC,cAAc,EAAE,EAAE,CAAA;YACpB,IAAI,MAAM,IAAI,EAAE,GAAG,KAAK;gBAAE,OAAO,MAAM,EAAE,CAAA;YACzC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;QACnB,CAAC,KACG,IAAI,YAEP,GAAG,CAAC,CAAC,CAAC,CAEL,KAAC,MAAM,iBACK,UAAU,KAChB,CAAC,GAAG,EAAE;gBACR,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,GAAG,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;gBACxD,OAAO,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;YAC/E,CAAC,CAAC,EAAE,EACJ,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,KAAK,EACb,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAEvE,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EACxE,SAAS,EAAC,UAAU,EACpB,aAAa,EAAC,MAAM,GACpB,CACH,CAAC,CAAC,CAAC,CAEF,KAAC,MAAM,OACD,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EACxE,OAAO,EAAE,CAAC,EACV,EAAE,EAAE,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,EACxE,aAAa,EAAC,MAAM,GACpB,CACH,GACM,CACV,CAAA;AACH,CAAC"}

package/dist/backends/gui/heading.cjs

@@ -0,0 +1,27 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Heading = void 0;
+/**
+ * Heading — gui's semantic heading, with a `tone`.
+ *
+ * Sizes stay gui's own rungs, and the record headings are four of them: a
+ * settings section or a widget title is `size="$2"` (13), a group header `$1`
+ * (12, also twenty-ui's xs, since 12px is Hanzo's text floor), a dialog or
+ * empty-state title `$4` (15) — twenty-ui's xs/sm/md/lg
+ * (11/12/13/16, MIT, see NOTICE) on Hanzo's ramp. `tone` is the new axis:
+ * primary ink, secondary or tertiary, at the heading's own weight. A styled
+ * extension rather than a wrapper, so `styled(Heading, …)` in a host still
+ * extends the component it always did.
+ */
+const gui_1 = require("@hanzo/gui");
+exports.Heading = (0, gui_1.styled)(gui_1.Heading, {
+    name: 'Heading',
+    variants: {
+        tone: {
+            primary: { color: '$ink' },
+            secondary: { color: '$aside' },
+            tertiary: { color: '$hint' },
+        },
+    },
+});

package/dist/backends/gui/heading.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from 'react';
+export declare const Heading: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, any, import("@hanzogui/web").TextNonStyleProps, import("@hanzogui/web").TextStylePropsBase, {
+    size?: import("@hanzogui/web").FontSizeTokens | undefined;
+    tone?: "primary" | "secondary" | "tertiary" | undefined;
+    unstyled?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type HeadingProps = ComponentProps<typeof Heading>;
+//# sourceMappingURL=heading.d.ts.map

package/dist/backends/gui/heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/heading.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,eAAO,MAAM,OAAO;;;;8CASlB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA"}

package/dist/backends/gui/heading.js

@@ -0,0 +1,25 @@
+'use client';
+/**
+ * Heading — gui's semantic heading, with a `tone`.
+ *
+ * Sizes stay gui's own rungs, and the record headings are four of them: a
+ * settings section or a widget title is `size="$2"` (13), a group header `$1`
+ * (12, also twenty-ui's xs, since 12px is Hanzo's text floor), a dialog or
+ * empty-state title `$4` (15) — twenty-ui's xs/sm/md/lg
+ * (11/12/13/16, MIT, see NOTICE) on Hanzo's ramp. `tone` is the new axis:
+ * primary ink, secondary or tertiary, at the heading's own weight. A styled
+ * extension rather than a wrapper, so `styled(Heading, …)` in a host still
+ * extends the component it always did.
+ */
+import { Heading as GuiHeading, styled } from '@hanzo/gui';
+export const Heading = styled(GuiHeading, {
+    name: 'Heading',
+    variants: {
+        tone: {
+            primary: { color: '$ink' },
+            secondary: { color: '$aside' },
+            tertiary: { color: '$hint' },
+        },
+    },
+});
+//# sourceMappingURL=heading.js.map

package/dist/backends/gui/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../src/backends/gui/heading.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAG1D,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,EAAE;IACxC,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;YAC1B,SAAS,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;YAC9B,QAAQ,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;SAC7B;KACO;CACX,CAAC,CAAA"}

package/dist/backends/gui/hue.cjs

@@ -0,0 +1,49 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hueOr = exports.isHue = exports.neutrals = exports.hues = void 0;
+exports.useTone = useTone;
+/**
+ * A data hue on a component: the colour a person chose for a record, carried as
+ * custom properties so the component's rules are written once.
+ *
+ * A tag, an avatar, an icon tile and a status pill can each take any of thirty
+ * hues, and which one is DATA — read from a record at run time. Spelling the
+ * hue into each style prop would mint one atomic class per hue per step, every
+ * one of which the shipped sheet would have to hold before first paint. So the
+ * element states its hue once, inline — `--tone-3: var(--data-red-3)` — and the
+ * styled parts read `var(--tone-3)`: one class per step, whatever the hue, and
+ * the value still follows the theme, because `--data-red-3` is declared per
+ * theme in @hanzo/tokens' data.css.
+ *
+ * Off the web there are no custom properties, so `tone(step)` hands back the
+ * step's own hex for the theme being rendered (from `scales`), and `style` is
+ * empty.
+ */
+const gui_1 = require("@hanzo/gui");
+const data_1 = require("@hanzo/tokens/data");
+Object.defineProperty(exports, "hues", { enumerable: true, get: function () { return data_1.hues; } });
+Object.defineProperty(exports, "neutrals", { enumerable: true, get: function () { return data_1.neutrals; } });
+/** Whether `v` names one of the thirty data hues. */
+const isHue = (v) => typeof v === 'string' && Object.hasOwn(data_1.scales, v);
+exports.isHue = isHue;
+/** `v` when it is a hue, `gray` otherwise — an unknown colour reads as the neutral, never as nothing. */
+const hueOr = (v, fallback = 'gray') => ((0, exports.isHue)(v) ? v : fallback);
+exports.hueOr = hueOr;
+/**
+ * The hue's steps for one element.
+ *
+ * `style` goes on the element that roots the part (its children inherit the
+ * properties); `tone(step)` is the value a style prop reads.
+ */
+function useTone(hue, steps) {
+    const theme = (0, gui_1.useThemeName)();
+    if (!gui_1.isWeb) {
+        const scale = data_1.scales[hue][String(theme).startsWith('light') ? 'light' : 'dark'];
+        return { style: {}, tone: (step) => scale[step - 1] };
+    }
+    const style = {};
+    for (const s of steps)
+        style[`--tone-${s}`] = `var(--data-${hue}-${s})`;
+    return { style, tone: (step) => `var(--tone-${step})` };
+}

package/dist/backends/gui/hue.d.ts

@@ -0,0 +1,18 @@
+import { hues, neutrals, type DataHue } from '@hanzo/tokens/data';
+export type { DataHue };
+export { hues, neutrals };
+/** Whether `v` names one of the thirty data hues. */
+export declare const isHue: (v: unknown) => v is DataHue;
+/** `v` when it is a hue, `gray` otherwise — an unknown colour reads as the neutral, never as nothing. */
+export declare const hueOr: (v: unknown, fallback?: DataHue) => DataHue;
+/**
+ * The hue's steps for one element.
+ *
+ * `style` goes on the element that roots the part (its children inherit the
+ * properties); `tone(step)` is the value a style prop reads.
+ */
+export declare function useTone(hue: DataHue, steps: readonly number[]): {
+    style: Record<string, string>;
+    tone: (step: number) => string;
+};
+//# sourceMappingURL=hue.d.ts.map

package/dist/backends/gui/hue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hue.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/hue.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAU,KAAK,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAEzE,YAAY,EAAE,OAAO,EAAE,CAAA;AACvB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAA;AAEzB,qDAAqD;AACrD,eAAO,MAAM,KAAK,MAAO,OAAO,KAAG,CAAC,IAAI,OAA4D,CAAA;AAEpG,yGAAyG;AACzG,eAAO,MAAM,KAAK,MAAO,OAAO,aAAY,OAAO,KAAY,OAAoC,CAAA;AAEnG;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,MAAM,EAAE;;iBAQ/B,MAAM;EACpC"}

package/dist/backends/gui/hue.js

@@ -0,0 +1,43 @@
+'use client';
+/**
+ * A data hue on a component: the colour a person chose for a record, carried as
+ * custom properties so the component's rules are written once.
+ *
+ * A tag, an avatar, an icon tile and a status pill can each take any of thirty
+ * hues, and which one is DATA — read from a record at run time. Spelling the
+ * hue into each style prop would mint one atomic class per hue per step, every
+ * one of which the shipped sheet would have to hold before first paint. So the
+ * element states its hue once, inline — `--tone-3: var(--data-red-3)` — and the
+ * styled parts read `var(--tone-3)`: one class per step, whatever the hue, and
+ * the value still follows the theme, because `--data-red-3` is declared per
+ * theme in @hanzo/tokens' data.css.
+ *
+ * Off the web there are no custom properties, so `tone(step)` hands back the
+ * step's own hex for the theme being rendered (from `scales`), and `style` is
+ * empty.
+ */
+import { isWeb, useThemeName } from '@hanzo/gui';
+import { hues, neutrals, scales } from '@hanzo/tokens/data';
+export { hues, neutrals };
+/** Whether `v` names one of the thirty data hues. */
+export const isHue = (v) => typeof v === 'string' && Object.hasOwn(scales, v);
+/** `v` when it is a hue, `gray` otherwise — an unknown colour reads as the neutral, never as nothing. */
+export const hueOr = (v, fallback = 'gray') => (isHue(v) ? v : fallback);
+/**
+ * The hue's steps for one element.
+ *
+ * `style` goes on the element that roots the part (its children inherit the
+ * properties); `tone(step)` is the value a style prop reads.
+ */
+export function useTone(hue, steps) {
+    const theme = useThemeName();
+    if (!isWeb) {
+        const scale = scales[hue][String(theme).startsWith('light') ? 'light' : 'dark'];
+        return { style: {}, tone: (step) => scale[step - 1] };
+    }
+    const style = {};
+    for (const s of steps)
+        style[`--tone-${s}`] = `var(--data-${hue}-${s})`;
+    return { style, tone: (step) => `var(--tone-${step})` };
+}
+//# sourceMappingURL=hue.js.map

package/dist/backends/gui/hue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hue.js","sourceRoot":"","sources":["../../../src/backends/gui/hue.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAgB,MAAM,oBAAoB,CAAA;AAGzE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAA;AAEzB,qDAAqD;AACrD,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,CAAU,EAAgB,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;AAEpG,yGAAyG;AACzG,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,CAAU,EAAE,QAAQ,GAAY,MAAM,EAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;AAEnG;;;;;GAKG;AACH,MAAM,UAAU,OAAO,CAAC,GAAY,EAAE,KAAwB;IAC5D,MAAM,KAAK,GAAG,YAAY,EAAE,CAAA;IAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;QAC/E,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,EAAE,CAAA;IAC/D,CAAC;IACD,MAAM,KAAK,GAA2B,EAAE,CAAA;IACxC,KAAK,MAAM,CAAC,IAAI,KAAK;QAAE,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC,GAAG,cAAc,GAAG,IAAI,CAAC,GAAG,CAAA;IACvE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,cAAc,IAAI,GAAG,EAAE,CAAA;AACjE,CAAC"}

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