@hanzo/ui 8.27.91 → 8.28.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":"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"}
+{"version":3,"file":"grip.js","sourceRoot":"","sources":["../../../src/backends/gui/grip.tsx"],"names":[],"mappings":"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"}

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

package/dist/backends/gui/image-input.cjs

@@ -0,0 +1,78 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.accepts = void 0;
+exports.ImageInput = ImageInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * ImageInput — one picture with upload, remove and abort: a profile photo, a
+ * workspace logo, a record's own image.
+ *
+ * The square preview is the control: pressing it opens the file picker, and on
+ * the web a file dropped on it is taken the same way. Beside it, Upload (or
+ * Abort while `isUploading`) and Remove, a helper line and an error line. The
+ * host owns the upload: `onChange` hands it the chosen file, `onAbort` asks it
+ * to stop, `onRemove` to clear; the preview shows whatever `src` it is given.
+ *
+ * Anatomy after twenty-ui's ImageInput (MIT, NOTICE): a 66px preview with an 8px
+ * corner and a 20px image-up glyph, a column 16px beside it with 12px between
+ * its rows, outline buttons with 14px icons.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const button_1 = require("./button.cjs");
+const press_1 = require("./press.cjs");
+const slot_1 = require("./slot.cjs");
+const SIZE = 66;
+/** A file matches `accept` on its MIME type, a MIME wildcard, or its extension. */
+const accepts = (file, accept) => accept
+    .split(',')
+    .map((a) => a.trim().toLowerCase())
+    .filter(Boolean)
+    .some((a) => a.startsWith('.')
+    ? file.name.toLowerCase().endsWith(a)
+    : a.endsWith('/*')
+        ? file.type.toLowerCase().startsWith(a.slice(0, -1))
+        : file.type.toLowerCase() === a);
+exports.accepts = accepts;
+function ImageInput({ src, alt = '', onChange, onRemove, onAbort, isUploading = false, accept = 'image/*', capture, title = 'Picture', helperText, errorMessage, uploadLabel = 'Upload', removeLabel = 'Remove', abortLabel = 'Abort', disabled = false, required, name, }) {
+    const file = (0, react_1.useRef)(null);
+    const id = (0, react_1.useId)();
+    const [over, setOver] = (0, react_1.useState)(false);
+    const pick = () => {
+        if (disabled || isUploading)
+            return;
+        file.current?.click();
+    };
+    const take = (f) => {
+        if (f && (0, exports.accepts)(f, accept))
+            onChange?.(f);
+    };
+    const drop = gui_1.isWeb && !disabled && !isUploading
+        ? {
+            onDragOver: (e) => {
+                e.preventDefault();
+                setOver(true);
+            },
+            onDragLeave: () => setOver(false),
+            onDrop: (e) => {
+                e.preventDefault();
+                setOver(false);
+                take(e.dataTransfer?.files?.[0]);
+            },
+        }
+        : null;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('image-input'), items: "flex-start", gap: "$4", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('image-input-preview'), render: "button", ...{
+                    type: 'button',
+                    disabled: disabled || isUploading,
+                    'aria-label': src ? `${title}: change` : `${title}: ${uploadLabel}`,
+                    'aria-describedby': errorMessage || helperText ? id : undefined,
+                    ...drop,
+                }, width: SIZE, height: SIZE, shrink: 0, rounded: "$3", borderWidth: 1, borderColor: over ? '$borderColorFocus' : '$borderColor', bg: disabled ? '$panel' : '$hover', overflow: "hidden", items: "center", justify: "center", p: 0, cursor: disabled ? 'not-allowed' : isUploading ? 'progress' : 'pointer', 
+                // No hover tint over a picture: the picture is what is being shown.
+                hoverStyle: src || disabled ? undefined : { bg: '$raised' }, focusVisibleStyle: press_1.RING, onPress: pick, children: src ? ((0, jsx_runtime_1.jsx)(gui_1.Image, { src: src, alt: alt, width: SIZE, height: SIZE, objectFit: "cover" })) : ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.ImageUp, { size: 20, color: over ? '$hint' : '$hush' })) }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$3", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [isUploading ? ((0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", variant: "outline", startIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, {}), onPress: onAbort, children: abortLabel })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", variant: "outline", startIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Upload, {}), disabled: disabled, onPress: pick, children: uploadLabel })), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", variant: "outline", startIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Trash2, {}), disabled: disabled || isUploading || !src, onPress: onRemove, children: removeLabel })] }), helperText || errorMessage ? ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { id: id, gap: "$1", children: [helperText ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$hint", children: helperText })) : null, errorMessage ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$bad", role: "alert", children: errorMessage })) : null] })) : null] }), gui_1.isWeb ? (0, jsx_runtime_1.jsx)("input", { ref: file, type: "file", accept: accept, capture: capture, name: name, required: required, disabled: disabled, "aria-label": title, tabIndex: -1, style: { display: 'none' }, onChange: (e) => {
+                    take(e.currentTarget.files?.[0]);
+                    e.currentTarget.value = '';
+                } }) : null] }));
+}