@hanzo/ui 8.27.83 → 8.27.85

package/dist/backends/gui/grip.cjs

@@ -0,0 +1,132 @@
+'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.useGrip = useGrip;
+exports.Grip = Grip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The grip under a pane that resizes it, shared by CodeEditor and JsonTree.
+ *
+ * The footer is the drag target and the knob is the separator a keyboard and a
+ * screen reader find. A drag, or ArrowUp / ArrowDown on the knob, sets a height
+ * of the reader's own, as tall as they like; a double-click on the footer hands
+ * the height back to the content. `useGrip` owns that height; `Grip` draws the
+ * knob.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const React = __importStar(require("react"));
+const slot_1 = require("./slot.cjs");
+/** How far one ArrowUp / ArrowDown on the knob moves the height. */
+const STEP = 24;
+/** The separator's stated maximum, in px: the drag itself has none. */
+const CEILING = 4096;
+function useGrip({ enabled, min, measure, initial = null, onChange }) {
+    const grip = React.useRef(null);
+    const knob = React.useRef(null);
+    const [height, setHeight] = React.useState(initial);
+    const latest = React.useRef({ measure, onChange });
+    latest.current = { measure, onChange };
+    const set = React.useCallback((next) => {
+        setHeight(next);
+        latest.current.onChange?.(next);
+    }, []);
+    React.useEffect(() => {
+        const el = grip.current;
+        const handle = knob.current;
+        if (!el || !handle || !enabled)
+            return;
+        let pointer = -1;
+        let startY = 0;
+        let startH = 0;
+        const down = (e) => {
+            if (e.button !== 0)
+                return;
+            e.preventDefault();
+            pointer = e.pointerId;
+            startY = e.clientY;
+            startH = latest.current.measure();
+            el.setPointerCapture?.(pointer);
+        };
+        const move = (e) => {
+            if (e.pointerId !== pointer)
+                return;
+            set(Math.max(min, Math.round(startH + e.clientY - startY)));
+        };
+        const up = (e) => {
+            if (e.pointerId !== pointer)
+                return;
+            el.releasePointerCapture?.(pointer);
+            pointer = -1;
+        };
+        const key = (e) => {
+            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
+                return;
+            e.preventDefault();
+            set(Math.max(min, Math.round(latest.current.measure() + (e.key === 'ArrowDown' ? STEP : -STEP))));
+        };
+        const reset = () => set(null);
+        el.addEventListener('pointerdown', down);
+        el.addEventListener('pointermove', move);
+        el.addEventListener('pointerup', up);
+        el.addEventListener('pointercancel', up);
+        el.addEventListener('dblclick', reset);
+        handle.addEventListener('keydown', key);
+        return () => {
+            el.removeEventListener('pointerdown', down);
+            el.removeEventListener('pointermove', move);
+            el.removeEventListener('pointerup', up);
+            el.removeEventListener('pointercancel', up);
+            el.removeEventListener('dblclick', reset);
+            handle.removeEventListener('keydown', key);
+        };
+    }, [enabled, min, set]);
+    return { grip, knob, height };
+}
+/** The knob: a separator that names what it resizes and says how tall it is. */
+function Grip({ knob, name, label, min, height, }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ref: knob, ...(0, slot_1.slot)(name), ...{
+            role: 'separator',
+            'aria-orientation': 'horizontal',
+            'aria-label': `Resize ${label}`,
+            'aria-valuemin': min,
+            // A drag has no ceiling; this stands in for "as tall as you like".
+            'aria-valuemax': CEILING,
+            'aria-valuenow': height ?? min,
+            'aria-valuetext': height === null ? 'Fits its content' : `${height} pixels`,
+            tabIndex: 0,
+        }, rounded: "$2", p: "$1", focusVisibleStyle: { bg: '$hover' }, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.GripHorizontal, { size: 14, color: "$soft" }) }));
+}

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+export interface GripOptions {
+    enabled: boolean;
+    /** The shortest a drag makes the pane, in px. */
+    min: number;
+    /** The pane's height now, read when a drag or a key starts. */
+    measure: () => number;
+    /** A height to start from, as `onChange` last reported it. */
+    initial?: number | null;
+    /** Every height the reader sets, and `null` when a double-click hands it back. */
+    onChange?: (height: number | null) => void;
+}
+export declare function useGrip({ enabled, min, measure, initial, onChange }: GripOptions): {
+    grip: React.RefObject<HTMLElement | null>;
+    knob: React.RefObject<HTMLElement | null>;
+    height: number | null;
+};
+/** The knob: a separator that names what it resizes and says how tall it is. */
+export declare function Grip({ knob, name, label, min, height, }: {
+    knob: React.RefObject<HTMLElement | null>;
+    /** Its `data-slot`. */
+    name: string;
+    /** What it resizes, for "Resize <label>". */
+    label: string;
+    min: number;
+    height: number | null;
+}): React.JSX.Element;
+//# sourceMappingURL=grip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grip.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/grip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,OAAO,CAAA;IAChB,iDAAiD;IACjD,GAAG,EAAE,MAAM,CAAA;IACX,+DAA+D;IAC/D,OAAO,EAAE,MAAM,MAAM,CAAA;IACrB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;CAC3C;AAED,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,OAAc,EAAE,QAAQ,EAAE,EAAE,WAAW;;;;EA2DvF;AAED,gFAAgF;AAChF,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,GAAG,EACH,MAAM,GACP,EAAE;IACD,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACzC,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB,qBAuBA"}

package/dist/backends/gui/grip.js

@@ -0,0 +1,96 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The grip under a pane that resizes it, shared by CodeEditor and JsonTree.
+ *
+ * The footer is the drag target and the knob is the separator a keyboard and a
+ * screen reader find. A drag, or ArrowUp / ArrowDown on the knob, sets a height
+ * of the reader's own, as tall as they like; a double-click on the footer hands
+ * the height back to the content. `useGrip` owns that height; `Grip` draws the
+ * knob.
+ */
+import { XStack } from '@hanzo/gui';
+import { GripHorizontal } from '@hanzogui/lucide-icons-2';
+import * as React from 'react';
+import { slot } from './slot.js';
+/** How far one ArrowUp / ArrowDown on the knob moves the height. */
+const STEP = 24;
+/** The separator's stated maximum, in px: the drag itself has none. */
+const CEILING = 4096;
+export function useGrip({ enabled, min, measure, initial = null, onChange }) {
+    const grip = React.useRef(null);
+    const knob = React.useRef(null);
+    const [height, setHeight] = React.useState(initial);
+    const latest = React.useRef({ measure, onChange });
+    latest.current = { measure, onChange };
+    const set = React.useCallback((next) => {
+        setHeight(next);
+        latest.current.onChange?.(next);
+    }, []);
+    React.useEffect(() => {
+        const el = grip.current;
+        const handle = knob.current;
+        if (!el || !handle || !enabled)
+            return;
+        let pointer = -1;
+        let startY = 0;
+        let startH = 0;
+        const down = (e) => {
+            if (e.button !== 0)
+                return;
+            e.preventDefault();
+            pointer = e.pointerId;
+            startY = e.clientY;
+            startH = latest.current.measure();
+            el.setPointerCapture?.(pointer);
+        };
+        const move = (e) => {
+            if (e.pointerId !== pointer)
+                return;
+            set(Math.max(min, Math.round(startH + e.clientY - startY)));
+        };
+        const up = (e) => {
+            if (e.pointerId !== pointer)
+                return;
+            el.releasePointerCapture?.(pointer);
+            pointer = -1;
+        };
+        const key = (e) => {
+            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
+                return;
+            e.preventDefault();
+            set(Math.max(min, Math.round(latest.current.measure() + (e.key === 'ArrowDown' ? STEP : -STEP))));
+        };
+        const reset = () => set(null);
+        el.addEventListener('pointerdown', down);
+        el.addEventListener('pointermove', move);
+        el.addEventListener('pointerup', up);
+        el.addEventListener('pointercancel', up);
+        el.addEventListener('dblclick', reset);
+        handle.addEventListener('keydown', key);
+        return () => {
+            el.removeEventListener('pointerdown', down);
+            el.removeEventListener('pointermove', move);
+            el.removeEventListener('pointerup', up);
+            el.removeEventListener('pointercancel', up);
+            el.removeEventListener('dblclick', reset);
+            handle.removeEventListener('keydown', key);
+        };
+    }, [enabled, min, set]);
+    return { grip, knob, height };
+}
+/** The knob: a separator that names what it resizes and says how tall it is. */
+export function Grip({ knob, name, label, min, height, }) {
+    return (_jsx(XStack, { ref: knob, ...slot(name), ...{
+            role: 'separator',
+            'aria-orientation': 'horizontal',
+            'aria-label': `Resize ${label}`,
+            'aria-valuemin': min,
+            // A drag has no ceiling; this stands in for "as tall as you like".
+            'aria-valuemax': CEILING,
+            'aria-valuenow': height ?? min,
+            'aria-valuetext': height === null ? 'Fits its content' : `${height} pixels`,
+            tabIndex: 0,
+        }, rounded: "$2", p: "$1", focusVisibleStyle: { bg: '$hover' }, children: _jsx(GripHorizontal, { size: 14, color: "$soft" }) }));
+}
+//# sourceMappingURL=grip.js.map

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

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

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

@@ -34,25 +34,40 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.sift = sift;
 exports.JsonTree = JsonTree;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * JsonTree — a JSON value drawn as a tree a reader can open and close: one row
  * per key or element, objects and arrays behind a disclosure that says how
- * many children they hold, and a header with Expand all, Collapse all and Copy.
+ * many children they hold, and a header with a filter, Expand all, Collapse all
+ * and Copy.
  *
  * The first `depth` levels open on first paint. A row is a button (Enter and
  * Space toggle it, `aria-expanded` says which way), so the tree reads with a
  * keyboard and a screen reader as well as a pointer. Keys and values take the
  * code theme's colours (`code-theme.ts`), the same theme keys `CodeEditor`
  * paints with, and a count reads as a comment. A long value wraps anywhere, so
- * a hash never widens the page. Built from gui primitives only, so it renders
- * wherever gui does.
+ * a hash never widens the page.
+ *
+ * Filter. What is typed keeps every row whose key, dotted path
+ * (`answers.team.probabilities`) or value contains it, with the rows above it,
+ * and opens them; a branch that matches keeps everything under it. Clearing the
+ * filter hands back the tree as it was opened before.
+ *
+ * Height. The tree is as tall as its rows up to `maxHeight`, then scrolls.
+ * `resizable` adds CodeEditor's footer grip: a drag or ArrowUp / ArrowDown sets
+ * a height of the reader's own and a double-click hands it back; `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.
  */
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
 const React = __importStar(require("react"));
 const button_1 = require("./button.cjs");
+const grip_1 = require("./grip.cjs");
+const input_1 = require("./input.cjs");
 const slot_1 = require("./slot.cjs");
 const toaster_1 = require("./toaster.cjs");
 /** Indent per level, in px. */
@@ -77,12 +92,70 @@ function paths(v, depth, at = '$', level = 0, out = new Set()) {
         paths(x, depth, child(at, k), level + 1, out);
     return out;
 }
-function JsonTree({ data, depth = 2, title, showCopyButton = true, ...props }) {
+/** A leaf as it is drawn, and as the filter reads it. */
+const text = (value) => typeof value === 'string' ? JSON.stringify(value) : value === undefined ? 'undefined' : String(value);
+function sift(data, query) {
+    const q = query.trim().toLowerCase();
+    const rows = new Map();
+    const open = new Set();
+    const walk = (v, at, dotted, name) => {
+        const b = branch(v);
+        const hit = (name !== null && (name.toLowerCase().includes(q) || `.${dotted}`.toLowerCase().includes(`.${q}`))) ||
+            (!b && text(v).toLowerCase().includes(q));
+        if (hit) {
+            rows.set(at, true);
+            if (b)
+                open.add(at);
+            return true;
+        }
+        let kept = false;
+        if (b)
+            for (const [k, x] of b.entries)
+                if (walk(x, child(at, k), dotted ? `${dotted}.${k}` : k, k))
+                    kept = true;
+        if (kept) {
+            rows.set(at, false);
+            open.add(at);
+        }
+        return kept;
+    };
+    if (q)
+        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 }) {
     const [open, setOpen] = React.useState(() => paths(data, depth));
+    const [query, setQuery] = React.useState('');
     const [copied, setCopied] = React.useState(false);
     const timer = React.useRef(undefined);
+    /** The open set from before a filter, handed back when it clears. */
+    const before = React.useRef(null);
+    const body = React.useRef(null);
+    const sized = (0, grip_1.useGrip)({
+        enabled: resizable,
+        min: minHeight,
+        measure: () => body.current?.getBoundingClientRect().height ?? minHeight,
+        initial: defaultHeight,
+        onChange: onResize,
+    });
+    const sifted = React.useMemo(() => (query.trim() ? sift(data, query) : null), [data, query]);
     React.useEffect(() => () => clearTimeout(timer.current), []);
     React.useEffect(() => setOpen(paths(data, depth)), [data, depth]);
+    // After the reset above, so a filter that is on keeps its matches open on new data.
+    React.useEffect(() => {
+        if (sifted)
+            setOpen(sifted.open);
+    }, [sifted]);
+    const type = (next) => {
+        const on = next.trim() !== '';
+        if (on && before.current === null)
+            before.current = open;
+        if (!on && before.current !== null) {
+            setOpen(before.current);
+            before.current = null;
+        }
+        setQuery(next);
+    };
     const toggle = React.useCallback((path) => setOpen((prev) => {
         const next = new Set(prev);
         if (!next.delete(path))
@@ -101,9 +174,19 @@ function JsonTree({ data, depth = 2, title, showCopyButton = true, ...props }) {
             toaster_1.toast.error('Failed to copy JSON');
         }
     };
-    const header = title !== undefined || showCopyButton;
     const root = branch(data);
-    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", justify: "space-between", flexWrap: "wrap", gap: "$2", 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", children: title ?? 'JSON' }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "flex-end", flexWrap: "wrap", gap: "$1", shrink: 1, minW: 0, children: [root && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, { ...(0, slot_1.slot)('json-tree-expand'), variant: "ghost", size: "sm", onClick: () => setOpen(paths(data, Number.POSITIVE_INFINITY)), children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronsUpDown, { size: 14 }), "Expand all"] }), (0, jsx_runtime_1.jsxs)(button_1.Button, { ...(0, slot_1.slot)('json-tree-collapse'), variant: "ghost", size: "sm", onClick: () => setOpen(new Set()), children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronsDownUp, { size: 14 }), "Collapse all"] })] })), showCopyButton && ((0, jsx_runtime_1.jsxs)(button_1.Button, { ...(0, slot_1.slot)('json-tree-copy'), variant: "ghost", size: "sm", 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 }), copied ? 'Copied!' : 'Copy'] }))] })] })), (0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('json-tree-body'), py: "$2", px: "$2", children: (0, jsx_runtime_1.jsx)(Node, { name: null, value: data, path: "$", level: 0, open: open, toggle: toggle }) })] }));
+    const searchable = search && root !== null;
+    const header = title !== undefined || showCopyButton || searchable;
+    // Everything is kept when the root itself matched; nothing is when no row did.
+    const kept = sifted && !sifted.rows.get('$') ? sifted.rows : null;
+    const none = sifted !== null && sifted.rows.size === 0;
+    const fixed = sized.height !== null;
+    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 keys, paths, values", "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.jsx)(gui_1.YStack, { ref: body, ...(0, slot_1.slot)('json-tree-body'), py: "$2", px: "$2", ...(fixed ? { height: sized.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)(gui_1.XStack, { ref: sized.grip, ...(0, slot_1.slot)('json-tree-footer'), cursor: "row-resize", items: "center", justify: "flex-end", minH: 24, px: "$3", borderTopWidth: 1, borderColor: "$borderColor", bg: "$panel", select: "none", 
+                // A touch drag would otherwise scroll the page and cancel the pointer.
+                style: { touchAction: 'none' }, children: (0, jsx_runtime_1.jsx)(grip_1.Grip, { knob: sized.knob, name: "json-tree-resize", label: title ?? 'JSON', min: minHeight, height: sized.height }) }))] }));
 }
 /** A leaf's colour: the code theme's key for its JSON type. */
 const INK = {
@@ -113,14 +196,13 @@ const INK = {
     null: '$codeNull',
 };
 function Leaf({ value }) {
-    const text = typeof value === 'string' ? JSON.stringify(value) : value === undefined ? 'undefined' : String(value);
     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, 
         // 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 }));
+        style: { overflowWrap: 'anywhere' }, children: text(value) }));
 }
-function Node({ name, value, path, level, open, toggle, }) {
+function Node({ name, value, path, level, open, toggle, kept, }) {
     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: ":" })] }));
@@ -141,5 +223,10 @@ function Node({ name, value, path, level, open, toggle, }) {
                             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]) => ((0, jsx_runtime_1.jsx)(Node, { name: k, value: v, path: child(path, k), level: level + 1, open: open, toggle: toggle }, k))) }))] }));
+                    }, 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]) => {
+                    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));
+                }) }))] }));
 }

package/dist/backends/gui/json-tree.d.ts

@@ -1,26 +1,60 @@
 /**
  * JsonTree — a JSON value drawn as a tree a reader can open and close: one row
  * per key or element, objects and arrays behind a disclosure that says how
- * many children they hold, and a header with Expand all, Collapse all and Copy.
+ * many children they hold, and a header with a filter, Expand all, Collapse all
+ * and Copy.
  *
  * The first `depth` levels open on first paint. A row is a button (Enter and
  * Space toggle it, `aria-expanded` says which way), so the tree reads with a
  * keyboard and a screen reader as well as a pointer. Keys and values take the
  * code theme's colours (`code-theme.ts`), the same theme keys `CodeEditor`
  * paints with, and a count reads as a comment. A long value wraps anywhere, so
- * a hash never widens the page. Built from gui primitives only, so it renders
- * wherever gui does.
+ * a hash never widens the page.
+ *
+ * Filter. What is typed keeps every row whose key, dotted path
+ * (`answers.team.probabilities`) or value contains it, with the rows above it,
+ * and opens them; a branch that matches keeps everything under it. Clearing the
+ * filter hands back the tree as it was opened before.
+ *
+ * Height. The tree is as tall as its rows up to `maxHeight`, then scrolls.
+ * `resizable` adds CodeEditor's footer grip: a drag or ArrowUp / ArrowDown sets
+ * a height of the reader's own and a double-click hands it back; `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.
  */
 import { type YStackProps } from '@hanzo/gui';
 import * as React from 'react';
-export interface JsonTreeProps extends Omit<YStackProps, 'children'> {
+/**
+ * What a filter keeps. `rows` maps each kept path to `true` when everything
+ * under it is kept as well (it matched) and `false` when only the way down to a
+ * match is; `open` is every kept branch, so each match is in view.
+ */
+export type Sifted = {
+    rows: Map<string, boolean>;
+    open: Set<string>;
+};
+export declare function sift(data: unknown, query: string): Sifted;
+export interface JsonTreeProps extends Omit<YStackProps, 'children' | 'minHeight' | 'maxHeight'> {
     /** The value to draw — anything `JSON.stringify` accepts. */
     data: unknown;
     /** How many levels are open on first paint. */
     depth?: number;
-    /** The header's title. Omit it and `showCopyButton={false}` to drop the header. */
+    /** The header's title. Omit it, `showCopyButton={false}` and `search={false}` to drop the header. */
     title?: string;
     showCopyButton?: boolean;
+    /** Whether the header has a filter box. Defaults to true. */
+    search?: boolean;
+    /** The tallest the tree grows on its own, in px; past it the tree scrolls. */
+    maxHeight?: number;
+    /** The shortest a drag makes it, in px. */
+    minHeight?: number;
+    /** Whether a footer grip resizes the tree. */
+    resizable?: boolean;
+    /** A height to start from, as `onResize` last reported it. */
+    defaultHeight?: number | null;
+    /** Every height the reader drags to, and `null` when a double-click hands it back. */
+    onResize?: (height: number | null) => void;
 }
-export declare function JsonTree({ data, depth, title, showCopyButton, ...props }: JsonTreeProps): React.JSX.Element;
+export declare function JsonTree({ data, depth, title, showCopyButton, search, maxHeight, minHeight, resizable, defaultHeight, onResize, ...props }: JsonTreeProps): React.JSX.Element;
 //# sourceMappingURL=json-tree.d.ts.map

package/dist/backends/gui/json-tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"json-tree.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/json-tree.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,OAAO,EAA+B,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAE1E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAmC9B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAClE,6DAA6D;IAC7D,IAAI,EAAE,OAAO,CAAA;IACb,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAS,EAAE,KAAK,EAAE,cAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,qBA4FlG"}
+{"version":3,"file":"json-tree.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/json-tree.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAA+B,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAS1E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAyC9B;;;;GAIG;AACH,MAAM,MAAM,MAAM,GAAG;IAAE,IAAI,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAAE,CAAA;AAEtE,wBAAgB,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAwBzD;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,WAAW,GAAG,WAAW,CAAC;IAC9F,6DAA6D;IAC7D,IAAI,EAAE,OAAO,CAAA;IACb,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qGAAqG;IACrG,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,sFAAsF;IACtF,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;CAC3C;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAS,EACT,KAAK,EACL,cAAqB,EACrB,MAAa,EACb,SAAS,EACT,SAAc,EACd,SAAiB,EACjB,aAAoB,EACpB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,qBAmMf"}