@hanzo/ui 8.27.91 → 8.29.0

package/dist/backends/gui/input.cjs

@@ -17,6 +17,9 @@ const slot_1 = require("./slot.cjs");
 const gesture_1 = require("./gesture.cjs");
 const mask_1 = require("./mask.cjs");
 const control_1 = require("./control.cjs");
+const density_1 = require("./density.cjs");
+const input_group_1 = require("./input-group.cjs");
+const field_1 = require("./field.cjs");
 /** What an adornment takes past the gutter: its 16px mark and 8 beside it. */
 const MARK = 24;
 /** The height a field takes under a coarse pointer: a thumb, not a cursor (Button's floor). */
@@ -29,17 +32,42 @@ const well = (side, gutter) => ({
     items: 'center',
     justify: 'center',
 });
-const Input = /* @__PURE__ */ (0, react_1.forwardRef)(function Input({ startAdornment, endAdornment, reveal = true, type, secureTextEntry, size = 'default', fill = false, ...props }, ref) {
+const Input = /* @__PURE__ */ (0, react_1.forwardRef)(function Input({ startAdornment, endAdornment, reveal = true, type, secureTextEntry, size, fill = false, ...props }, ref) {
     const [revealed, setRevealed] = (0, react_1.useState)(false);
+    const density = (0, density_1.useDensity)();
+    const group = (0, react_1.useContext)(input_group_1.GroupContext);
     const isPassword = type === 'password' || secureTextEntry === true;
     const toggle = isPassword && reveal;
-    const box = control_1.BOX[size];
+    const box = control_1.BOX[group?.size ?? (0, density_1.fieldSize)(size, density)];
     const inset = box.gutter + MARK;
-    const field = ((0, jsx_runtime_1.jsx)(gui_1.Input, { ref: ref, ...(0, slot_1.slot)('input'), ...(isPassword ? (0, mask_1.masked)(!revealed) : { type, secureTextEntry }), ...control_1.FIELD, ...(fill ? control_1.FILL : null), height: box.h, ...('height' in props ? null : { $touchable: { height: Math.max(box.h, TOUCH) } }), width: "100%", minW: 0, 
+    // Its own `aria-invalid` first, else the enclosing Field's stated validity —
+    // the one rule Textarea and SelectTrigger read too (field.tsx `invalidOf`).
+    const enclosing = (0, field_1.useField)();
+    const invalid = (0, field_1.invalidOf)(props['aria-invalid'], enclosing);
+    const disabled = !!props.disabled;
+    const report = group?.report;
+    (0, react_1.useEffect)(() => report?.({ invalid, disabled }), [report, invalid, disabled]);
+    // Inside a group the GROUP is the box — its edge, its fill, its focus — and the
+    // field is the text that fills the space its adornments leave.
+    if (group) {
+        const { onFocus, onBlur } = props;
+        return ((0, jsx_runtime_1.jsx)(gui_1.Input, { ref: ref, ...(0, slot_1.slot)('input'), ...(isPassword ? (0, mask_1.masked)(!revealed) : { type, secureTextEntry }), flex: 1, minW: 0, height: box.h - 2, px: 0, borderWidth: 0, rounded: 0, bg: "transparent", color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: box.font, ...(invalid ? { 'aria-invalid': true } : null), ...props, 
+            // The group draws the one focus ring, round the whole box. Inline,
+            // because design's `:focus-visible` outline is a stylesheet rule and
+            // only an inline declaration is certain to outrank it here.
+            style: { ...(props.style ?? null), outlineStyle: 'none' }, onFocus: (e) => {
+                group.focus(true);
+                onFocus?.(e);
+            }, onBlur: (e) => {
+                group.focus(false);
+                onBlur?.(e);
+            } }));
+    }
+    const field = ((0, jsx_runtime_1.jsx)(gui_1.Input, { ref: ref, ...(0, slot_1.slot)('input'), ...(isPassword ? (0, mask_1.masked)(!revealed) : { type, secureTextEntry }), ...control_1.FIELD, ...(density === 'compact' ? { bg: '$panel' } : null), ...(fill ? control_1.FILL : null), ...(invalid ? { borderColor: '$red7', focusStyle: { borderColor: '$red8' } } : null), height: box.h, ...('height' in props ? null : { $touchable: { height: Math.max(box.h, TOUCH) } }), width: "100%", minW: 0, 
         // The value at the full ink, the hint at the placeholder token. gui's
         // Input sub-theme draws its value at 80% grey, which left a typed value
         // and a sample placeholder one rung apart.
-        color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: "$3", pl: startAdornment ? inset : box.gutter, pr: endAdornment || toggle ? inset : box.gutter, ...props }));
+        color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: box.font, ...(invalid ? { 'aria-invalid': true } : null), pl: startAdornment ? inset : box.gutter, pr: endAdornment || toggle ? inset : box.gutter, ...props }));
     if (!startAdornment && !endAdornment && !toggle)
         return field;
     return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { position: "relative", width: "100%", items: "center", children: [startAdornment ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...well('l', box.gutter), pointerEvents: "none", opacity: 0.6, children: startAdornment })) : null, field, toggle ? ((0, jsx_runtime_1.jsx)(gui_1.XStack

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

@@ -23,7 +23,11 @@ export type InputProps = Omit<ComponentProps<typeof GuiInput>, 'children' | 'siz
      * was pressed last and neither control can say which.
      */
     reveal?: boolean;
-    /** The box: `default` 36 high, `lg` 46 for a page's own form (control.ts `BOX`). */
+    /**
+     * The box: `default` 36 high, `lg` 46 for a page's own form, `sm` 32 and `xs`
+     * 24 for the record density (control.ts `BOX`). Unset, the nearest `<Density>`
+     * decides; inside an `InputGroup` the group's box is the field's.
+     */
     size?: FieldSize;
     /** On the raised ground instead of a bare edge (control.ts `FILL`). */
     fill?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/input.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAU,MAAM,YAAY,CAAA;AAEtD,OAAO,EAAwB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjF,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,WAAW,CAAA;AAQ5D,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IACpF,yEAAyE;IACzE,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oFAAoF;IACpF,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAYD,QAAA,MAAM,KAAK,sHAgFT,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/input.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAU,MAAM,YAAY,CAAA;AAEtD,OAAO,EAA+C,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIxG,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,WAAW,CAAA;AAW5D,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IACpF,yEAAyE;IACzE,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAYD,QAAA,MAAM,KAAK,sHAmIT,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/backends/gui/input.js

@@ -9,11 +9,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Input as GuiInput, XStack } from '@hanzo/gui';
 import { Eye, EyeOff } from '@hanzogui/lucide-icons-2';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useContext, useEffect, useState } from 'react';
 import { slot } from './slot.js';
 import { touch } from './gesture.js';
 import { masked } from './mask.js';
 import { BOX, FIELD, FILL } from './control.js';
+import { fieldSize, useDensity } from './density.js';
+import { GroupContext } from './input-group.js';
+import { invalidOf, useField } from './field.js';
 /** What an adornment takes past the gutter: its 16px mark and 8 beside it. */
 const MARK = 24;
 /** The height a field takes under a coarse pointer: a thumb, not a cursor (Button's floor). */
@@ -26,17 +29,42 @@ const well = (side, gutter) => ({
     items: 'center',
     justify: 'center',
 });
-const Input = /* @__PURE__ */ forwardRef(function Input({ startAdornment, endAdornment, reveal = true, type, secureTextEntry, size = 'default', fill = false, ...props }, ref) {
+const Input = /* @__PURE__ */ forwardRef(function Input({ startAdornment, endAdornment, reveal = true, type, secureTextEntry, size, fill = false, ...props }, ref) {
     const [revealed, setRevealed] = useState(false);
+    const density = useDensity();
+    const group = useContext(GroupContext);
     const isPassword = type === 'password' || secureTextEntry === true;
     const toggle = isPassword && reveal;
-    const box = BOX[size];
+    const box = BOX[group?.size ?? fieldSize(size, density)];
     const inset = box.gutter + MARK;
-    const field = (_jsx(GuiInput, { ref: ref, ...slot('input'), ...(isPassword ? masked(!revealed) : { type, secureTextEntry }), ...FIELD, ...(fill ? FILL : null), height: box.h, ...('height' in props ? null : { $touchable: { height: Math.max(box.h, TOUCH) } }), width: "100%", minW: 0, 
+    // Its own `aria-invalid` first, else the enclosing Field's stated validity —
+    // the one rule Textarea and SelectTrigger read too (field.tsx `invalidOf`).
+    const enclosing = useField();
+    const invalid = invalidOf(props['aria-invalid'], enclosing);
+    const disabled = !!props.disabled;
+    const report = group?.report;
+    useEffect(() => report?.({ invalid, disabled }), [report, invalid, disabled]);
+    // Inside a group the GROUP is the box — its edge, its fill, its focus — and the
+    // field is the text that fills the space its adornments leave.
+    if (group) {
+        const { onFocus, onBlur } = props;
+        return (_jsx(GuiInput, { ref: ref, ...slot('input'), ...(isPassword ? masked(!revealed) : { type, secureTextEntry }), flex: 1, minW: 0, height: box.h - 2, px: 0, borderWidth: 0, rounded: 0, bg: "transparent", color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: box.font, ...(invalid ? { 'aria-invalid': true } : null), ...props, 
+            // The group draws the one focus ring, round the whole box. Inline,
+            // because design's `:focus-visible` outline is a stylesheet rule and
+            // only an inline declaration is certain to outrank it here.
+            style: { ...(props.style ?? null), outlineStyle: 'none' }, onFocus: (e) => {
+                group.focus(true);
+                onFocus?.(e);
+            }, onBlur: (e) => {
+                group.focus(false);
+                onBlur?.(e);
+            } }));
+    }
+    const field = (_jsx(GuiInput, { ref: ref, ...slot('input'), ...(isPassword ? masked(!revealed) : { type, secureTextEntry }), ...FIELD, ...(density === 'compact' ? { bg: '$panel' } : null), ...(fill ? FILL : null), ...(invalid ? { borderColor: '$red7', focusStyle: { borderColor: '$red8' } } : null), height: box.h, ...('height' in props ? null : { $touchable: { height: Math.max(box.h, TOUCH) } }), width: "100%", minW: 0, 
         // The value at the full ink, the hint at the placeholder token. gui's
         // Input sub-theme draws its value at 80% grey, which left a typed value
         // and a sample placeholder one rung apart.
-        color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: "$3", pl: startAdornment ? inset : box.gutter, pr: endAdornment || toggle ? inset : box.gutter, ...props }));
+        color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: box.font, ...(invalid ? { 'aria-invalid': true } : null), pl: startAdornment ? inset : box.gutter, pr: endAdornment || toggle ? inset : box.gutter, ...props }));
     if (!startAdornment && !endAdornment && !toggle)
         return field;
     return (_jsxs(XStack, { position: "relative", width: "100%", items: "center", children: [startAdornment ? (_jsx(XStack, { ...well('l', box.gutter), pointerEvents: "none", opacity: 0.6, children: startAdornment })) : null, field, toggle ? (_jsx(XStack

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

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

package/dist/backends/gui/item.cjs

@@ -25,11 +25,25 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * Variant and size live on `Item` alone — border, background, gap and padding.
  * The parts inside (`ItemMedia`, `ItemTitle`, ...) carry fixed styling of their
  * own and never read Item's variant or size, matching the original shape.
+ *
+ * `size="row"` is the list row a picker, a field list and a member list are
+ * made of (twenty-ui's ListItem, MIT, NOTICE): 32px, 4px inset, 8px gap, the 4px
+ * corner, the hover rung. It takes the parts a list row has around its content —
+ * an `indicator` (a trailing check or a leading box), a `shortcut`, trailing
+ * `actions` revealed under the pointer or focus, a submenu chevron — and the
+ * states a list owner sets: `selected`, `focused` (a cursor that is not focus),
+ * `color="danger"`, `disabled`. Rendered as a button it is a list row button:
+ * `render="button"` gives the native element, and `focusableWhenDisabled` keeps
+ * a disabled row in the tab order as `aria-disabled` instead of `disabled`.
  */
 const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
 const layout_1 = require("./layout.cjs");
 const ink_1 = require("./ink.cjs");
 const press_1 = require("./press.cjs");
+const gesture_1 = require("./gesture.cjs");
+const kbd_1 = require("./kbd.cjs");
 const ItemFrame = (0, gui_1.styled)(gui_1.XStack, {
     name: 'Item',
     flexWrap: 'wrap',
@@ -49,14 +63,32 @@ const ItemFrame = (0, gui_1.styled)(gui_1.XStack, {
         size: {
             default: { gap: '$4', p: '$4' },
             sm: { gap: '$2.5', px: '$4', py: '$3' },
+            row: { gap: '$2', px: '$1', py: 0, minH: 32, rounded: '$xs', flexWrap: 'nowrap' },
         },
     },
     defaultVariants: { variant: 'default', size: 'default' },
 });
-function Item({ variant = 'default', size = 'default', asChild = false, ...props }) {
+/** A picture of a checkbox for a row that is itself the control. */
+const Box = ({ on }) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { width: 14, height: 14, shrink: 0, rounded: "$xs", borderWidth: 1, borderColor: on ? 'var(--primary)' : '$bound', bg: on ? 'var(--primary)' : 'transparent', items: "center", justify: "center", children: on ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 12, strokeWidth: 3, color: 'var(--primary-foreground)' }) : null }));
+function Item({ variant = 'default', size = 'default', asChild = false, indicator = 'none', selected = false, focused = false, color = 'neutral', disabled = false, focusableWhenDisabled = false, shortcut, actions, actionsVisibility = 'hover', hasSubmenu = false, children, ...props }) {
     const v = variant ?? 'default';
     const s = size ?? 'default';
-    return ((0, jsx_runtime_1.jsx)(ItemFrame, { "data-slot": "item", "data-variant": v, "data-size": s, variant: v, size: s, asChild: asChild, render: asChild ? undefined : 'div', ...props }));
+    const row = s === 'row';
+    const [shown, setShown] = (0, react_1.useState)(false);
+    const button = props.render === 'button';
+    const visible = actionsVisibility === 'always' || shown;
+    return ((0, jsx_runtime_1.jsx)(ItemFrame, { "data-slot": "item", "data-variant": v, "data-size": s, ...(selected ? { 'data-selected': '' } : null), ...(focused ? { 'data-focused': '' } : null), variant: v, size: s, asChild: asChild, render: asChild ? undefined : 'div', ...(row ? (0, gesture_1.touch)(32, 44, 'y') : null), ...((selected && indicator === 'none') || focused ? { bg: '$hover' } : null), ...(color === 'danger' && !row ? { theme: 'red' } : null), ...(disabled
+            ? {
+                opacity: 0.5,
+                hoverStyle: { bg: 'transparent' },
+                cursor: 'default',
+                ...(button && !focusableWhenDisabled ? { disabled: true } : { 'aria-disabled': true }),
+            }
+            : row
+                ? { cursor: 'pointer' }
+                : null), ...(button ? { type: 'button' } : null), ...(actions ? { onHoverIn: () => setShown(true), onHoverOut: () => setShown(false), onFocus: () => setShown(true), onBlur: () => setShown(false) } : null), ...props, children: asChild ? (children) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [indicator === 'checkbox' ? (0, jsx_runtime_1.jsx)(Box, { on: selected }) : null, row
+                    ? (0, ink_1.ink)(children, gui_1.SizableText, { size: '$2', color: color === 'danger' ? '$bad' : '$aside', numberOfLines: 1, flex: 1, minW: 0 })
+                    : children, shortcut ? (typeof shortcut === 'string' ? ((0, jsx_runtime_1.jsx)(kbd_1.Kbd, { children: shortcut })) : ((0, jsx_runtime_1.jsx)(kbd_1.KbdGroup, { children: shortcut.map((k, i) => ((0, jsx_runtime_1.jsx)(kbd_1.Kbd, { children: k }, `${k}-${i}`))) }))) : null, indicator === 'check' && selected ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 16, strokeWidth: 2 }) : null, actions ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { "data-slot": "item-row-actions", role: "group", shrink: 0, items: "center", gap: "$1", opacity: visible ? 1 : 0, $touchable: { opacity: 1 }, animation: "75ms", children: actions })) : null, hasSubmenu ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { shrink: 0, opacity: disabled ? 0 : 1, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronRight, { size: 14, color: "$hush" }) })) : null] })) }));
 }
 const ItemMediaFrame = (0, gui_1.styled)(gui_1.XStack, {
     name: 'ItemMedia',

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

@@ -1,20 +1,36 @@
-import type { ComponentProps } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 import { Separator } from './layout.js';
 export type ItemVariant = 'default' | 'outline' | 'muted';
-export type ItemSize = 'default' | 'sm';
+export type ItemSize = 'default' | 'sm' | 'row';
 export type ItemMediaVariant = 'default' | 'icon' | 'image';
 declare const ItemFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, any, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
     elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
     fullscreen?: boolean | undefined;
-    size?: "default" | "sm" | undefined;
+    size?: "default" | "row" | "sm" | undefined;
     variant?: "default" | "muted" | "outline" | undefined;
 }, import("@hanzogui/web").StaticConfigPublic>;
-export type ItemProps = ComponentProps<typeof ItemFrame> & {
+export type ItemProps = Omit<ComponentProps<typeof ItemFrame>, 'color'> & {
     variant?: ItemVariant | null;
     size?: ItemSize | null;
     asChild?: boolean;
+    /** `check` after the content when `selected`; `checkbox` a box before it; `none` (default) tints a selected row. */
+    indicator?: 'none' | 'check' | 'checkbox';
+    selected?: boolean;
+    /** Highlighted by a cursor that is not focus (a list whose search field keeps focus). */
+    focused?: boolean;
+    color?: 'neutral' | 'danger';
+    disabled?: boolean;
+    /** Keep a disabled row focusable, saying `aria-disabled` instead of `disabled`. */
+    focusableWhenDisabled?: boolean;
+    /** Keys after the content: one key or a list read as a chord. */
+    shortcut?: string | readonly string[];
+    /** Trailing controls; `hover` shows them under the pointer or focus (always on touch). */
+    actions?: ReactNode;
+    actionsVisibility?: 'hover' | 'always';
+    /** A trailing chevron; a disabled row keeps its width so rows align. */
+    hasSubmenu?: boolean;
 };
-export declare function Item({ variant, size, asChild, ...props }: ItemProps): import("react").JSX.Element;
+export declare function Item({ variant, size, asChild, indicator, selected, focused, color, disabled, focusableWhenDisabled, shortcut, actions, actionsVisibility, hasSubmenu, children, ...props }: ItemProps): import("react").JSX.Element;
 declare const ItemMediaFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, any, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
     elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
     fullscreen?: boolean | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/item.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAIpC,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AACzD,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAA;AACvC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;AAG3D,QAAA,MAAM,SAAS;;;;;8CAwBb,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IACzD,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,wBAAgB,IAAI,CAAC,EAAE,OAAmB,EAAE,IAAgB,EAAE,OAAe,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BAenG;AAED,QAAA,MAAM,cAAc;;;;8CAgBlB,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;CAClC,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAG1E;AAED,QAAA,MAAM,gBAAgB;;;8CAIpB,CAAA;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEtE,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAElD;AAED,QAAA,MAAM,cAAc;;;8CAMlB,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAA;AAElE,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAM/D;AAED,QAAA,MAAM,oBAAoB;;;8CAKxB,CAAA;AAEF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAa9E,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BAQxE;AAED,QAAA,MAAM,gBAAgB;;;8CAIpB,CAAA;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEtE,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAElD;AAED,QAAA,MAAM,eAAe;;;8CAMnB,CAAA;AAEF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;AAEpE,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BAEhD;AAED,QAAA,MAAM,eAAe;;;8CAMnB,CAAA;AAEF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;AAEpE,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BAEhD;AAED,QAAA,MAAM,cAAc;;;8CAElB,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAA;AAElE,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BAE9C;AAED,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAA;AAEjE,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAEtD"}
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/item.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/item.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Item — a flex row for displaying content with media, a title, a description
  * and actions. `ItemGroup` stacks several with one rhythm and a separator
@@ -13,11 +13,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Variant and size live on `Item` alone — border, background, gap and padding.
  * The parts inside (`ItemMedia`, `ItemTitle`, ...) carry fixed styling of their
  * own and never read Item's variant or size, matching the original shape.
+ *
+ * `size="row"` is the list row a picker, a field list and a member list are
+ * made of (twenty-ui's ListItem, MIT, NOTICE): 32px, 4px inset, 8px gap, the 4px
+ * corner, the hover rung. It takes the parts a list row has around its content —
+ * an `indicator` (a trailing check or a leading box), a `shortcut`, trailing
+ * `actions` revealed under the pointer or focus, a submenu chevron — and the
+ * states a list owner sets: `selected`, `focused` (a cursor that is not focus),
+ * `color="danger"`, `disabled`. Rendered as a button it is a list row button:
+ * `render="button"` gives the native element, and `focusableWhenDisabled` keeps
+ * a disabled row in the tab order as `aria-disabled` instead of `disabled`.
  */
 import { SizableText, XStack, YStack, styled } from '@hanzo/gui';
+import { Check, ChevronRight } from '@hanzogui/lucide-icons-2';
+import { useState } from 'react';
 import { Separator } from './layout.js';
 import { ink } from './ink.js';
 import { RING } from './press.js';
+import { touch } from './gesture.js';
+import { Kbd, KbdGroup } from './kbd.js';
 const ItemFrame = styled(XStack, {
     name: 'Item',
     flexWrap: 'wrap',
@@ -37,14 +51,32 @@ const ItemFrame = styled(XStack, {
         size: {
             default: { gap: '$4', p: '$4' },
             sm: { gap: '$2.5', px: '$4', py: '$3' },
+            row: { gap: '$2', px: '$1', py: 0, minH: 32, rounded: '$xs', flexWrap: 'nowrap' },
         },
     },
     defaultVariants: { variant: 'default', size: 'default' },
 });
-export function Item({ variant = 'default', size = 'default', asChild = false, ...props }) {
+/** A picture of a checkbox for a row that is itself the control. */
+const Box = ({ on }) => (_jsx(XStack, { width: 14, height: 14, shrink: 0, rounded: "$xs", borderWidth: 1, borderColor: on ? 'var(--primary)' : '$bound', bg: on ? 'var(--primary)' : 'transparent', items: "center", justify: "center", children: on ? _jsx(Check, { size: 12, strokeWidth: 3, color: 'var(--primary-foreground)' }) : null }));
+export function Item({ variant = 'default', size = 'default', asChild = false, indicator = 'none', selected = false, focused = false, color = 'neutral', disabled = false, focusableWhenDisabled = false, shortcut, actions, actionsVisibility = 'hover', hasSubmenu = false, children, ...props }) {
     const v = variant ?? 'default';
     const s = size ?? 'default';
-    return (_jsx(ItemFrame, { "data-slot": "item", "data-variant": v, "data-size": s, variant: v, size: s, asChild: asChild, render: asChild ? undefined : 'div', ...props }));
+    const row = s === 'row';
+    const [shown, setShown] = useState(false);
+    const button = props.render === 'button';
+    const visible = actionsVisibility === 'always' || shown;
+    return (_jsx(ItemFrame, { "data-slot": "item", "data-variant": v, "data-size": s, ...(selected ? { 'data-selected': '' } : null), ...(focused ? { 'data-focused': '' } : null), variant: v, size: s, asChild: asChild, render: asChild ? undefined : 'div', ...(row ? touch(32, 44, 'y') : null), ...((selected && indicator === 'none') || focused ? { bg: '$hover' } : null), ...(color === 'danger' && !row ? { theme: 'red' } : null), ...(disabled
+            ? {
+                opacity: 0.5,
+                hoverStyle: { bg: 'transparent' },
+                cursor: 'default',
+                ...(button && !focusableWhenDisabled ? { disabled: true } : { 'aria-disabled': true }),
+            }
+            : row
+                ? { cursor: 'pointer' }
+                : null), ...(button ? { type: 'button' } : null), ...(actions ? { onHoverIn: () => setShown(true), onHoverOut: () => setShown(false), onFocus: () => setShown(true), onBlur: () => setShown(false) } : null), ...props, children: asChild ? (children) : (_jsxs(_Fragment, { children: [indicator === 'checkbox' ? _jsx(Box, { on: selected }) : null, row
+                    ? ink(children, SizableText, { size: '$2', color: color === 'danger' ? '$bad' : '$aside', numberOfLines: 1, flex: 1, minW: 0 })
+                    : children, shortcut ? (typeof shortcut === 'string' ? (_jsx(Kbd, { children: shortcut })) : (_jsx(KbdGroup, { children: shortcut.map((k, i) => (_jsx(Kbd, { children: k }, `${k}-${i}`))) }))) : null, indicator === 'check' && selected ? _jsx(Check, { size: 16, strokeWidth: 2 }) : null, actions ? (_jsx(XStack, { "data-slot": "item-row-actions", role: "group", shrink: 0, items: "center", gap: "$1", opacity: visible ? 1 : 0, $touchable: { opacity: 1 }, animation: "75ms", children: actions })) : null, hasSubmenu ? (_jsx(XStack, { shrink: 0, opacity: disabled ? 0 : 1, children: _jsx(ChevronRight, { size: 14, color: "$hush" }) })) : null] })) }));
 }
 const ItemMediaFrame = styled(XStack, {
     name: 'ItemMedia',

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

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

package/dist/backends/gui/json-tree.cjs

@@ -61,6 +61,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * `onResize` hears each one and `defaultHeight` starts from it. Copy writes the whole
  * value, whatever is open or filtered. Built from gui primitives only, so it
  * renders wherever gui does.
+ *
+ * `variant="boxed"` is the record kit's tree (twenty-ui's JsonTree, MIT —
+ * NOTICE), for workflow runs, tool calls and webhook samples: each disclosure a
+ * 24px boxed arrow that turns as it opens, each key a 24px boxed label led by a
+ * 16px icon naming its type (Type, Hash, SquareCheck, CircleOff, Brackets, Box),
+ * 32px of indent and 8px between rows. Either variant takes
+ * `getNodeHighlighting(keyPath)` — `blue` marks a node in the accent, `red` in
+ * the error state, `partial-blue` only its arrow — `onNodeValueClick(value,
+ * keyPath)`, which makes every leaf a button (copy a value, pick a variable),
+ * `entries` for a labelled root, and `labels` for the words the tree says.
+ * A keyPath is the keys joined with dots, entries by their id.
  */
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
@@ -72,8 +83,13 @@ const slot_1 = require("./slot.cjs");
 const toaster_1 = require("./toaster.cjs");
 /** The tallest a drag makes the tree, px: a ceiling that is not one. */
 const CEILING = 4096;
-/** Indent per level, in px. */
-const INDENT = 16;
+/** Indent per level, in px: the code tree, and the boxed one. */
+const INDENT = { code: 16, boxed: 32 };
+const LABELS = {
+    emptyString: 'Empty string',
+    emptyArray: 'Empty array',
+    emptyObject: 'Empty object',
+};
 const branch = (v) => Array.isArray(v)
     ? { kind: 'array', entries: v.map((x, i) => [String(i), x]) }
     : v !== null && typeof v === 'object'
@@ -125,7 +141,15 @@ function sift(data, query) {
         walk(data, '$', '', null);
     return { rows, open };
 }
-function JsonTree({ data, depth = 2, title, showCopyButton = true, search = true, maxHeight, minHeight = 96, resizable = false, defaultHeight = null, onResize, ...props }) {
+function JsonTree({ data: given, entries, variant = 'code', getNodeHighlighting, onNodeValueClick, labels, depth = 2, title, showCopyButton = true, search = true, maxHeight, minHeight = 96, resizable = false, defaultHeight = null, onResize, ...props }) {
+    const data = React.useMemo(() => (entries ? Object.fromEntries(entries.map((e) => [e.id, e.value])) : given), [entries, given]);
+    const ctx = React.useMemo(() => ({
+        variant,
+        highlight: getNodeHighlighting,
+        onValue: onNodeValueClick,
+        labels: { ...LABELS, ...labels },
+        names: new Map((entries ?? []).map((e) => [e.id, e.label])),
+    }), [variant, getNodeHighlighting, onNodeValueClick, labels, entries]);
     const [open, setOpen] = React.useState(() => paths(data, depth));
     const [query, setQuery] = React.useState('');
     const [copied, setCopied] = React.useState(false);
@@ -184,7 +208,7 @@ function JsonTree({ data, depth = 2, title, showCopyButton = true, search = true
     return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('json-tree'), borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", bg: "$background", ...props, children: [header && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('json-tree-header'), items: "center", flexWrap: "wrap", gap: "$1", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$panel", px: "$2", py: "$1", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", fontFamily: "$mono", color: "$soft", px: "$2", grow: 1, children: title ?? 'JSON' }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { grow: 1, shrink: 1, flexBasis: searchable ? 240 : 'auto', minW: 0, justify: "flex-end", items: "center", gap: "$1", children: [searchable && ((0, jsx_runtime_1.jsx)(gui_1.XStack, { flex: 1, minW: 0, maxW: 260, children: (0, jsx_runtime_1.jsx)(input_1.Input, { ...(0, slot_1.slot)('json-tree-filter'), type: "search", value: query, onChangeText: type, placeholder: "Filter", "aria-label": `Filter ${title ?? 'JSON'} by key, path or value`, 
                                     // No adornment: its wrapper holds the field at its intrinsic width, and
                                     // on a narrow pane that pushed the actions out of the header.
-                                    height: 32, fontSize: "$2" }) })), root && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('json-tree-expand'), variant: "ghost", size: "icon-sm", "aria-label": "Expand all", title: "Expand all", onClick: () => setOpen(paths(data, Number.POSITIVE_INFINITY)), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronsUpDown, { size: 14 }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('json-tree-collapse'), variant: "ghost", size: "icon-sm", "aria-label": "Collapse all", title: "Collapse all", onClick: () => setOpen(new Set()), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronsDownUp, { size: 14 }) })] })), showCopyButton && ((0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('json-tree-copy'), variant: "ghost", size: "icon-sm", "aria-label": copied ? 'Copied' : `Copy ${title ?? 'JSON'}`, title: "Copy", onClick: copy, children: copied ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 14 }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Copy, { size: 14 }) }))] })] })), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { position: "relative", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('json-tree-body'), py: "$2", px: "$2", ...(fixed ? { height } : maxHeight !== undefined ? { maxH: maxHeight } : null), overflowY: fixed || maxHeight !== undefined ? 'auto' : undefined, children: none ? ((0, jsx_runtime_1.jsxs)(gui_1.SizableText, { ...(0, slot_1.slot)('json-tree-empty'), size: "$2", color: "$soft", px: "$2", py: "$1", children: ["Nothing matches \u201C", query.trim(), "\u201D."] })) : ((0, jsx_runtime_1.jsx)(Node, { name: null, value: data, path: "$", level: 0, open: open, toggle: toggle, kept: kept })) }), resizable && ((0, jsx_runtime_1.jsx)(grip_1.Grip, { side: "top", span: height ?? minHeight, floor: minHeight, ceil: CEILING, onSpan: setHeight, onKeep: size, onReset: () => size(null), label: `Resize ${title ?? 'JSON'}`, b: 0 }))] })] }));
+                                    height: 32, fontSize: "$2" }) })), root && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('json-tree-expand'), variant: "ghost", size: "icon-sm", "aria-label": "Expand all", title: "Expand all", onClick: () => setOpen(paths(data, Number.POSITIVE_INFINITY)), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronsUpDown, { size: 14 }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('json-tree-collapse'), variant: "ghost", size: "icon-sm", "aria-label": "Collapse all", title: "Collapse all", onClick: () => setOpen(new Set()), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronsDownUp, { size: 14 }) })] })), showCopyButton && ((0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('json-tree-copy'), variant: "ghost", size: "icon-sm", "aria-label": copied ? 'Copied' : `Copy ${title ?? 'JSON'}`, title: "Copy", onClick: copy, children: copied ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 14 }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Copy, { size: 14 }) }))] })] })), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { position: "relative", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('json-tree-body'), py: "$2", px: "$2", ...(fixed ? { height } : maxHeight !== undefined ? { maxH: maxHeight } : null), overflowY: fixed || maxHeight !== undefined ? 'auto' : undefined, children: none ? ((0, jsx_runtime_1.jsxs)(gui_1.SizableText, { ...(0, slot_1.slot)('json-tree-empty'), size: "$2", color: "$soft", px: "$2", py: "$1", children: ["Nothing matches \u201C", query.trim(), "\u201D."] })) : ((0, jsx_runtime_1.jsx)(Node, { name: null, value: data, path: "$", dotted: "", level: 0, open: open, toggle: toggle, kept: kept, ctx: ctx })) }), resizable && ((0, jsx_runtime_1.jsx)(grip_1.Grip, { side: "top", span: height ?? minHeight, floor: minHeight, ceil: CEILING, onSpan: setHeight, onKeep: size, onReset: () => size(null), label: `Resize ${title ?? 'JSON'}`, b: 0 }))] })] }));
 }
 /** A leaf's colour: the code theme's key for its JSON type. */
 const INK = {
@@ -193,38 +217,102 @@ const INK = {
     boolean: '$codeBoolean',
     null: '$codeNull',
 };
-function Leaf({ value }) {
+/** The type icon a boxed key carries. */
+const KIND = {
+    string: lucide_icons_2_1.Type,
+    number: lucide_icons_2_1.Hash,
+    boolean: lucide_icons_2_1.SquareCheck,
+    null: lucide_icons_2_1.CircleOff,
+    array: lucide_icons_2_1.Brackets,
+    object: lucide_icons_2_1.Box,
+};
+/** A value's JSON kind, for its icon and its colour. */
+const kindOf = (v) => {
+    if (v === null)
+        return 'null';
+    if (Array.isArray(v))
+        return 'array';
+    const t = typeof v;
+    return t === 'object' ? 'object' : t === 'number' || t === 'boolean' ? t : 'string';
+};
+/** The accent, the error state, or nothing, as the three parts of a node paint it. */
+const MARK = {
+    blue: { edge: 'var(--primary)', fill: '$hover', ink: 'var(--primary)', value: 'var(--primary)' },
+    red: { edge: '$red7', fill: 'var(--state-error-bg)', ink: '$bad', value: '$bad' },
+};
+function Leaf({ value, dotted, mark, ctx }) {
     const type = value === null ? 'null' : typeof value;
-    return ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('json-tree-value'), "data-type": type, size: "$2", fontFamily: "$mono", color: INK[type] ?? '$codePunctuation', shrink: 1, minW: 0, 
+    const boxed = ctx.variant === 'boxed';
+    const shown = value === '' ? ctx.labels.emptyString : text(value);
+    const hue = mark === 'blue' || mark === 'red' ? MARK[mark].value : null;
+    const body = ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('json-tree-value'), "data-type": type, size: "$2", fontFamily: "$mono", color: (hue ?? (boxed ? '$hint' : (INK[type] ?? '$codePunctuation'))), shrink: 1, minW: 0, ...(boxed ? { lineHeight: 24 } : null), 
         // A hash or a URL is one unbreakable word; without this it sets the tree's
         // min-content width and pushes the page sideways on a phone.
-        style: { overflowWrap: 'anywhere' }, children: text(value) }));
+        style: { overflowWrap: 'anywhere' }, children: shown }));
+    if (!ctx.onValue)
+        return body;
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('json-tree-value-button'), render: "button", ...{ type: 'button' }, shrink: 1, minW: 0, bg: "transparent", borderWidth: 0, p: 0, rounded: "$xs", cursor: "pointer", hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' }, "aria-label": `${dotted || 'value'}: ${shown}`, onPress: () => ctx.onValue?.(value, dotted), children: body }));
+}
+/** The disclosure arrow: a bare chevron in the code tree, a 24px box that turns in the boxed one. */
+function Arrow({ expanded, empty, mark, ctx }) {
+    // `partial-blue` exists for exactly this: a branch with a marked node somewhere
+    // below it shows the accent on its arrow and nowhere else.
+    const ink = mark === 'red' ? '$bad' : mark ? 'var(--primary)' : '$hint';
+    if (ctx.variant !== 'boxed') {
+        if (empty)
+            return (0, jsx_runtime_1.jsx)(gui_1.XStack, { width: 14, shrink: 0 });
+        return expanded ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 14, color: ink }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronRight, { size: 14, color: ink });
+    }
+    if (empty)
+        return (0, jsx_runtime_1.jsx)(gui_1.XStack, { width: 24, shrink: 0 });
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('json-tree-arrow'), width: 24, height: 24, shrink: 0, items: "center", justify: "center", rounded: "$xs", borderWidth: 1, borderColor: (mark === 'red' ? '$red7' : mark ? 'var(--primary)' : '$borderColor'), bg: "$panel", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 16, color: (mark ? ink : '$aside'), style: { transform: `rotate(${expanded ? 0 : -90}deg)`, transition: 'transform 300ms ease' } }) }));
+}
+/** A key: name and colon in the code tree, a boxed label with its type icon in the boxed one. */
+function Key({ name, kind, mark, ctx }) {
+    const shown = ctx.names.get(name) ?? name;
+    if (ctx.variant !== 'boxed')
+        return ((0, jsx_runtime_1.jsxs)(gui_1.SizableText, { ...(0, slot_1.slot)('json-tree-key'), size: "$2", fontFamily: "$mono", color: (mark === 'blue' || mark === 'red' ? MARK[mark].ink : '$codeKey'), children: [shown, (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", fontFamily: "$mono", color: "$codePunctuation", children: ":" })] }));
+    const Icon = KIND[kind];
+    const m = mark === 'blue' || mark === 'red' ? MARK[mark] : null;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('json-tree-key'), items: "center", gap: "$1", height: 24, px: "$2", shrink: 0, rounded: "$xs", borderWidth: 1, borderColor: (m?.edge ?? '$borderColor'), bg: (m?.fill ?? '$panel'), children: [(0, jsx_runtime_1.jsx)(Icon, { size: 16, color: (m?.ink ?? '$hint'), "aria-hidden": true }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: (m?.ink ?? '$ink'), numberOfLines: 1, children: shown })] }));
 }
-function Node({ name, value, path, level, open, toggle, kept, }) {
+function Node({ name, value, path, dotted, level, open, toggle, kept, ctx, }) {
     const b = branch(value);
     const expanded = b !== null && open.has(path);
-    const key = name === null ? null : ((0, jsx_runtime_1.jsxs)(gui_1.SizableText, { ...(0, slot_1.slot)('json-tree-key'), size: "$2", fontFamily: "$mono", color: "$codeKey", children: [name, (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", fontFamily: "$mono", color: "$codePunctuation", children: ":" })] }));
+    const mark = (ctx.highlight && dotted ? ctx.highlight(dotted) : null) ?? null;
+    const boxed = ctx.variant === 'boxed';
+    const indent = level * INDENT[ctx.variant];
+    const gap = boxed ? '$2' : '$1.5';
+    const key = name === null ? null : (0, jsx_runtime_1.jsx)(Key, { name: name, kind: kindOf(value), mark: mark, ctx: ctx });
     if (!b) {
-        return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('json-tree-row'), items: "flex-start", gap: "$1.5", pl: level * INDENT, py: 1, children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { width: 14, shrink: 0 }), key, (0, jsx_runtime_1.jsx)(Leaf, { value: value })] }));
+        return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('json-tree-row'), "data-highlight": mark ?? undefined, items: "flex-start", gap: gap, pl: indent, py: boxed ? 0 : 1, children: [boxed ? null : (0, jsx_runtime_1.jsx)(gui_1.XStack, { width: 14, shrink: 0 }), key, (0, jsx_runtime_1.jsx)(Leaf, { value: value, dotted: dotted, mark: mark, ctx: ctx })] }));
     }
     const empty = b.entries.length === 0;
-    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('json-tree-node'), children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('json-tree-row'), ...(!empty &&
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('json-tree-node'), gap: boxed ? '$2' : 0, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('json-tree-row'), "data-highlight": mark ?? undefined, ...(!empty &&
                     {
                         role: 'button',
                         tabIndex: 0,
                         'aria-expanded': expanded,
-                        'aria-label': `${name ?? 'root'} ${count(b)}`,
-                    }), items: "center", gap: "$1.5", pl: level * INDENT, py: 1, rounded: "$2", cursor: empty ? undefined : 'pointer', hoverStyle: empty ? undefined : { bg: '$hover' }, focusVisibleStyle: { bg: '$hover' }, onPress: empty ? undefined : () => toggle(path), onKeyDown: empty
+                        'aria-label': `${name === null ? 'root' : (ctx.names.get(name) ?? name)} ${count(b)}`,
+                    }), items: "center", gap: gap, pl: indent, py: boxed ? 0 : 1, rounded: "$2", cursor: empty ? undefined : 'pointer', hoverStyle: empty ? undefined : { bg: '$hover' }, focusVisibleStyle: { bg: '$hover' }, onPress: empty ? undefined : () => toggle(path), onKeyDown: empty
                     ? undefined
                     : (e) => {
                         if (e.key !== 'Enter' && e.key !== ' ')
                             return;
                         e.preventDefault();
                         toggle(path);
-                    }, children: [empty ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { width: 14, shrink: 0 })) : expanded ? ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 14, color: "$soft" })) : ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronRight, { size: 14, color: "$soft" })), key, (0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('json-tree-count'), size: "$2", fontFamily: "$mono", color: "$codeComment", children: empty ? (b.kind === 'array' ? '[]' : '{}') : count(b) })] }), expanded && ((0, jsx_runtime_1.jsx)(gui_1.YStack, { children: b.entries.map(([k, v]) => {
+                    }, children: [(0, jsx_runtime_1.jsx)(Arrow, { expanded: expanded, empty: empty, mark: mark, ctx: ctx }), key, (0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('json-tree-count'), size: "$2", fontFamily: boxed ? undefined : '$mono', color: boxed ? '$hint' : '$codeComment', children: empty
+                            ? boxed
+                                ? b.kind === 'array'
+                                    ? ctx.labels.emptyArray
+                                    : ctx.labels.emptyObject
+                                : b.kind === 'array'
+                                    ? '[]'
+                                    : '{}'
+                            : count(b) })] }), expanded && ((0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: boxed ? '$2' : 0, children: b.entries.map(([k, v]) => {
                     const at = child(path, k);
                     if (kept && !kept.has(at))
                         return null;
-                    return ((0, jsx_runtime_1.jsx)(Node, { name: k, value: v, path: at, level: level + 1, open: open, toggle: toggle, kept: kept && !kept.get(at) ? kept : null }, k));
+                    return ((0, jsx_runtime_1.jsx)(Node, { name: k, value: v, path: at, dotted: dotted ? `${dotted}.${k}` : k, level: level + 1, open: open, toggle: toggle, kept: kept && !kept.get(at) ? kept : null, ctx: ctx }, k));
                 }) }))] }));
 }