@hanzo/ui 8.27.82 → 8.27.84

package/dist/backends/gui/code-editor.cjs

@@ -50,16 +50,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  *
  * JSON. `language="json"` colours the syntax and checks the text on every
  * change with `checkJson`: a broken document tints the failing line, marks the
- * failing character and names line, column and reason in the footer. With
+ * failing character and names line, column and reason in the footer. Every
+ * object and array that spans lines folds from a marker in the gutter, and a
+ * folded one reads `{…}` or `[…]` with how many keys or items it hides. With
  * `allowText`, text that does not open an object or an array is plain text and
  * passes. Format (or Shift-Alt-F) re-indents valid JSON by two spaces. Other
  * languages are edited as plain text: the package carries one grammar.
  *
- * Colour. Every colour is a theme rung over a design token — the ink, the
- * hairline, the selection and the error state — so the editor follows the page
- * into light or dark with nothing to configure. Hanzo is monochrome, so the syntax is ranked
- * by ink and weight, not by hue: property names in full ink, strings one rank
- * down, punctuation at the rank of a hint. Hue is spent only on an error.
+ * Colour. The frame's colours are theme rungs over design tokens — the ink, the
+ * hairline, the selection and the error state — and the syntax is the code
+ * theme (`code-theme.ts`: Dracula on dark, GitHub Light on light), each token a
+ * theme key of its own. Both follow the page into light or dark with nothing to
+ * configure.
  */
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
@@ -71,6 +73,7 @@ const view_1 = require("@codemirror/view");
 const highlight_1 = require("@lezer/highlight");
 const React = __importStar(require("react"));
 const button_1 = require("./button.cjs");
+const grip_1 = require("./grip.cjs");
 const json_1 = require("./json.cjs");
 const select_1 = require("./select.cjs");
 const slot_1 = require("./slot.cjs");
@@ -130,10 +133,6 @@ const LABEL = {
 };
 /** Line height as a multiple of the font size. */
 const LEADING = 1.6;
-/** How far one ArrowUp / ArrowDown on the footer moves the height. */
-const STEP = 24;
-/** The separator's stated maximum, in px: the drag itself has none. */
-const RESIZE_CEILING = 4096;
 const MONO = "var(--font-mono, 'Zen Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)";
 /**
  * The editor's surface. Every colour is one of the theme's named rungs — gui emits
@@ -180,6 +179,18 @@ const FRAME = /* @__PURE__ */ view_1.EditorView.theme({
     },
     '.cm-nonmatchingBracket, &.cm-focused .cm-nonmatchingBracket': { backgroundColor: 'transparent' },
     '.cm-placeholder': { color: 'var(--dim)' },
+    '.cm-foldGutter .cm-gutterElement': { padding: '0 4px', color: 'var(--dim)', cursor: 'pointer' },
+    '.cm-foldGutter .cm-gutterElement:hover': { color: 'var(--ink)' },
+    '.cm-foldPlaceholder': {
+        backgroundColor: 'var(--raised)',
+        border: '1px solid var(--edge)',
+        borderRadius: '4px',
+        color: 'var(--codePunctuation)',
+        padding: '0 4px',
+        margin: '0 2px',
+        cursor: 'pointer',
+    },
+    '.cm-foldCount': { color: 'var(--codeComment)' },
     '.cm-fault': { backgroundColor: 'var(--state-error-bg, rgb(239 68 68 / .1))' },
     '.cm-gutterElement.cm-fault': { color: 'var(--bad)' },
     '.cm-fault-at': {
@@ -188,13 +199,55 @@ const FRAME = /* @__PURE__ */ view_1.EditorView.theme({
         textUnderlineOffset: '3px',
     },
 });
-/** The syntax, ranked by ink: names in full ink, strings a rank down, punctuation at a hint. */
-const INK = /* @__PURE__ */ language_1.HighlightStyle.define([
-    { tag: highlight_1.tags.propertyName, color: 'var(--ink)', fontWeight: '500' },
-    { tag: highlight_1.tags.string, color: 'var(--soft)' },
-    { tag: [highlight_1.tags.number, highlight_1.tags.bool, highlight_1.tags.null], color: 'var(--ink)' },
-    { tag: [highlight_1.tags.punctuation, highlight_1.tags.separator, highlight_1.tags.brace, highlight_1.tags.squareBracket], color: 'var(--dim)' },
+/** The syntax in the code theme's colours: one theme key per kind of token, from `code-theme.ts`. */
+const SYNTAX = /* @__PURE__ */ language_1.HighlightStyle.define([
+    { tag: highlight_1.tags.propertyName, color: 'var(--codeKey)' },
+    { tag: highlight_1.tags.string, color: 'var(--codeString)' },
+    { tag: highlight_1.tags.number, color: 'var(--codeNumber)' },
+    { tag: highlight_1.tags.bool, color: 'var(--codeBoolean)' },
+    { tag: highlight_1.tags.null, color: 'var(--codeNull)' },
+    { tag: [highlight_1.tags.punctuation, highlight_1.tags.separator, highlight_1.tags.brace, highlight_1.tags.squareBracket], color: 'var(--codePunctuation)' },
+    { tag: highlight_1.tags.comment, color: 'var(--codeComment)' },
+    { tag: highlight_1.tags.keyword, color: 'var(--codeKeyword)' },
 ]);
+/**
+ * JSON folds from its opening bracket through its closing one, so a folded block
+ * is drawn whole as `{…}` or `[…]` and has room to say what it holds. lang-json
+ * folds inside the brackets, which leaves them standing around an ellipsis.
+ */
+const JSON_GRAMMAR = /* @__PURE__ */ new language_1.LanguageSupport(lang_json_1.jsonLanguage.configure({
+    props: [language_1.foldNodeProp.add({ 'Object Array': (node) => ({ from: node.from, to: node.to }) })],
+}));
+const words = (n, one) => `${n} ${one}${n === 1 ? '' : 's'}`;
+/** What a folded range holds: its brackets and how many keys or items sit inside. */
+function measureFold(state, range) {
+    let node = (0, language_1.syntaxTree)(state).resolveInner(range.from, 1);
+    while (node.parent && node.name !== 'Object' && node.name !== 'Array')
+        node = node.parent;
+    if (node.name === 'Object')
+        return { open: '{', close: '}', count: words(node.getChildren('Property').length, 'key') };
+    let n = 0;
+    for (let c = node.firstChild; c; c = c.nextSibling)
+        if (!/^[[\],]$/.test(c.name) && !c.type.isError)
+            n += 1;
+    return { open: '[', close: ']', count: words(n, 'item') };
+}
+const FOLDING = /* @__PURE__ */ (0, language_1.codeFolding)({
+    preparePlaceholder: measureFold,
+    placeholderDOM: (_view, onclick, fold) => {
+        const el = document.createElement('span');
+        el.className = 'cm-foldPlaceholder';
+        el.title = 'Unfold';
+        el.setAttribute('aria-label', `Folded, ${fold.count}`);
+        el.textContent = `${fold.open}…${fold.close}`;
+        const count = document.createElement('span');
+        count.className = 'cm-foldCount';
+        count.textContent = ` ${fold.count}`;
+        el.append(count);
+        el.onclick = onclick;
+        return el;
+    },
+});
 /** How much deeper than its line a wrapped continuation starts, in characters. */
 const HANG = 2;
 /** A line's own indentation in characters, a tab counted at the editor's tab width. */
@@ -279,13 +332,16 @@ function CodeEditor({ value, defaultValue = '', language = 'javascript', height,
     const [text, setText] = React.useState(value ?? defaultValue);
     const [check, setCheck] = React.useState(null);
     const [copied, setCopied] = React.useState(false);
-    const [dragged, setDragged] = React.useState(null);
     const host = React.useRef(null);
-    const grip = React.useRef(null);
-    const knob = React.useRef(null);
     /** Every text reported to `onChange` and not yet seen back as `value`. */
     const sent = React.useRef([]);
     const view = React.useRef(null);
+    const sized = (0, grip_1.useGrip)({
+        enabled: resizable,
+        min: minHeight,
+        measure: () => view.current?.dom.getBoundingClientRect().height ?? minHeight,
+    });
+    const dragged = sized.height;
     const timer = React.useRef(undefined);
     const listeners = React.useRef({ onChange, onCheck });
     listeners.current = { onChange, onCheck };
@@ -294,7 +350,7 @@ function CodeEditor({ value, defaultValue = '', language = 'javascript', height,
     const field = React.useMemo(() => verdict(allowText), [allowText]);
     const judged = React.useRef({ field });
     judged.current.field = field;
-    const grammar = () => (isJson ? [(0, lang_json_1.json)(), field] : []);
+    const grammar = () => (isJson ? [JSON_GRAMMAR, field, FOLDING, (0, language_1.foldGutter)()] : []);
     const gutter = () => (lineNumbers ? [(0, view_1.lineNumbers)(), (0, view_1.highlightActiveLineGutter)()] : []);
     const wrap = () => (wordWrap === 'off' ? [] : [view_1.EditorView.lineWrapping, hang]);
     const edit = () => [state_1.EditorState.readOnly.of(readOnly), view_1.EditorView.editable.of(!readOnly)];
@@ -344,10 +400,11 @@ function CodeEditor({ value, defaultValue = '', language = 'javascript', height,
                     (0, language_1.indentOnInput)(),
                     (0, language_1.bracketMatching)(),
                     (0, view_1.highlightActiveLine)(),
-                    (0, language_1.syntaxHighlighting)(INK),
+                    (0, language_1.syntaxHighlighting)(SYNTAX),
                     view_1.keymap.of([
                         { key: 'Shift-Alt-f', run: format },
                         commands_1.indentWithTab,
+                        ...language_1.foldKeymap,
                         ...commands_1.defaultKeymap,
                         ...commands_1.historyKeymap,
                         {
@@ -420,57 +477,6 @@ function CodeEditor({ value, defaultValue = '', language = 'javascript', height,
         dom.style.maxHeight = fixed ? '' : `${maxHeight}px`;
         view.current?.requestMeasure();
     }, [dragged, height, minHeight, maxHeight, fontSize]);
-    React.useEffect(() => {
-        const el = grip.current;
-        const handle = knob.current;
-        if (!el || !handle || !resizable)
-            return;
-        let pointer = -1;
-        let startY = 0;
-        let startH = 0;
-        const current = () => view.current?.dom.getBoundingClientRect().height ?? minHeight;
-        const down = (e) => {
-            if (e.button !== 0)
-                return;
-            e.preventDefault();
-            pointer = e.pointerId;
-            startY = e.clientY;
-            startH = current();
-            el.setPointerCapture?.(pointer);
-        };
-        const move = (e) => {
-            if (e.pointerId !== pointer)
-                return;
-            setDragged(Math.max(minHeight, 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();
-            setDragged(Math.max(minHeight, Math.round(current() + (e.key === 'ArrowDown' ? STEP : -STEP))));
-        };
-        const reset = () => setDragged(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);
-        };
-    }, [resizable, minHeight]);
     const copy = React.useCallback(async () => {
         try {
             await navigator.clipboard.writeText(text);
@@ -489,19 +495,9 @@ function CodeEditor({ value, defaultValue = '', language = 'javascript', height,
     const formattable = showFormatButton ?? (isJson && !readOnly);
     const toolbar = showLanguageSelector || showCopyButton || formattable;
     const footer = resizable || (isJson && check !== null);
-    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('code-editor'), borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", bg: "$background", focusWithinStyle: { borderColor: '$outlineColor' }, ...props, children: [toolbar && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('code-editor-toolbar'), items: "center", justify: "space-between", flexWrap: "wrap", gap: "$2", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$panel", px: "$2", py: "$1", children: [showLanguageSelector ? ((0, jsx_runtime_1.jsxs)(select_1.Select, { value: selected, onValueChange: setSelected, children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { ...(0, slot_1.slot)('code-editor-language-trigger'), width: "auto", minHeight: 32, borderWidth: 0, bg: "transparent", gap: "$1.5", px: "$2", children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", fontFamily: "$mono", children: LABEL[selected] ?? selected }) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { ...(0, slot_1.slot)('code-editor-language-content'), children: availableLanguages.map((lang) => ((0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: lang, children: LABEL[lang] ?? lang }, lang))) })] })) : ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('code-editor-language'), size: "$1", fontFamily: "$mono", color: "$soft", px: "$2", children: LABEL[selected] ?? selected })), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "flex-end", flexWrap: "wrap", gap: "$1", shrink: 1, minW: 0, children: [formattable && ((0, jsx_runtime_1.jsxs)(button_1.Button, { ...(0, slot_1.slot)('code-editor-format-button'), variant: "ghost", size: "sm", disabled: check?.kind !== 'json', onClick: format, children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.AlignLeft, { size: 14 }), "Format"] })), showCopyButton && ((0, jsx_runtime_1.jsxs)(button_1.Button, { ...(0, slot_1.slot)('code-editor-copy-button'), variant: "ghost", size: "sm", disabled: !text, 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, { ref: host, ...(0, slot_1.slot)('code-editor-body'), ...(fills && { flex: 1, minH: 0 }) }), footer && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ref: grip, ...(0, slot_1.slot)('code-editor-footer'), cursor: resizable ? 'row-resize' : undefined, items: "center", justify: "space-between", gap: "$2", minH: 28, px: "$3", py: "$1", borderTopWidth: 1, borderColor: "$borderColor", bg: "$panel", select: "none", 
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('code-editor'), borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", bg: "$background", focusWithinStyle: { borderColor: '$outlineColor' }, ...props, children: [toolbar && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('code-editor-toolbar'), items: "center", justify: "space-between", flexWrap: "wrap", gap: "$2", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$panel", px: "$2", py: "$1", children: [showLanguageSelector ? ((0, jsx_runtime_1.jsxs)(select_1.Select, { value: selected, onValueChange: setSelected, children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { ...(0, slot_1.slot)('code-editor-language-trigger'), width: "auto", minHeight: 32, borderWidth: 0, bg: "transparent", gap: "$1.5", px: "$2", children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", fontFamily: "$mono", children: LABEL[selected] ?? selected }) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { ...(0, slot_1.slot)('code-editor-language-content'), children: availableLanguages.map((lang) => ((0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: lang, children: LABEL[lang] ?? lang }, lang))) })] })) : ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('code-editor-language'), size: "$1", fontFamily: "$mono", color: "$soft", px: "$2", children: LABEL[selected] ?? selected })), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "flex-end", flexWrap: "wrap", gap: "$1", shrink: 1, minW: 0, children: [formattable && ((0, jsx_runtime_1.jsxs)(button_1.Button, { ...(0, slot_1.slot)('code-editor-format-button'), variant: "ghost", size: "sm", disabled: check?.kind !== 'json', onClick: format, children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.AlignLeft, { size: 14 }), "Format"] })), showCopyButton && ((0, jsx_runtime_1.jsxs)(button_1.Button, { ...(0, slot_1.slot)('code-editor-copy-button'), variant: "ghost", size: "sm", disabled: !text, 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, { ref: host, ...(0, slot_1.slot)('code-editor-body'), ...(fills && { flex: 1, minH: 0 }) }), footer && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ref: sized.grip, ...(0, slot_1.slot)('code-editor-footer'), cursor: resizable ? 'row-resize' : undefined, items: "center", justify: "space-between", gap: "$2", minH: 28, px: "$3", py: "$1", borderTopWidth: 1, borderColor: "$borderColor", bg: "$panel", select: "none", 
                 // A touch drag would otherwise scroll the page and cancel the pointer.
-                style: resizable ? { touchAction: 'none' } : undefined, children: [(0, jsx_runtime_1.jsx)(Status, { check: isJson ? check : null }), resizable && ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ref: knob, ...(0, slot_1.slot)('code-editor-resize'), ...{
-                            role: 'separator',
-                            'aria-orientation': 'horizontal',
-                            'aria-label': `Resize ${label}`,
-                            'aria-valuemin': minHeight,
-                            // A drag has no ceiling; this stands in for "as tall as you like".
-                            'aria-valuemax': RESIZE_CEILING,
-                            'aria-valuenow': dragged ?? minHeight,
-                            'aria-valuetext': dragged === null ? 'Fits its text' : `${dragged} 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" }) }))] }))] }));
+                style: resizable ? { touchAction: 'none' } : undefined, children: [(0, jsx_runtime_1.jsx)(Status, { check: isJson ? check : null }), resizable && ((0, jsx_runtime_1.jsx)(grip_1.Grip, { knob: sized.knob, name: "code-editor-resize", label: label, min: minHeight, height: dragged }))] }))] }));
 }
 /** The footer's JSON verdict, announced politely when it changes. */
 function Status({ check }) {

package/dist/backends/gui/code-editor.d.ts

@@ -12,16 +12,18 @@
  *
  * JSON. `language="json"` colours the syntax and checks the text on every
  * change with `checkJson`: a broken document tints the failing line, marks the
- * failing character and names line, column and reason in the footer. With
+ * failing character and names line, column and reason in the footer. Every
+ * object and array that spans lines folds from a marker in the gutter, and a
+ * folded one reads `{…}` or `[…]` with how many keys or items it hides. With
  * `allowText`, text that does not open an object or an array is plain text and
  * passes. Format (or Shift-Alt-F) re-indents valid JSON by two spaces. Other
  * languages are edited as plain text: the package carries one grammar.
  *
- * Colour. Every colour is a theme rung over a design token — the ink, the
- * hairline, the selection and the error state — so the editor follows the page
- * into light or dark with nothing to configure. Hanzo is monochrome, so the syntax is ranked
- * by ink and weight, not by hue: property names in full ink, strings one rank
- * down, punctuation at the rank of a hint. Hue is spent only on an error.
+ * Colour. The frame's colours are theme rungs over design tokens — the ink, the
+ * hairline, the selection and the error state — and the syntax is the code
+ * theme (`code-theme.ts`: Dracula on dark, GitHub Light on light), each token a
+ * theme key of its own. Both follow the page into light or dark with nothing to
+ * configure.
  */
 import { type YStackProps } from '@hanzo/gui';
 import { EditorView } from '@codemirror/view';

package/dist/backends/gui/code-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-editor.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/code-editor.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAA+B,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAM1E,OAAO,EAEL,UAAU,EAYX,MAAM,kBAAkB,CAAA;AAEzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAK9D,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,KAAK,GAAG,gBAAgB,GAAG,SAAS,CAAA;AAwN5E,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,GAAG,UAAU,CAAC;IACzF,yFAAyF;IACzF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mGAAmG;IACnG,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sFAAsF;IACtF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;IACpC,0DAA0D;IAC1D,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAA;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,kBAAkB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,YAAiB,EACjB,QAAuB,EACvB,MAAM,EACN,SAAc,EACd,SAAe,EACf,SAAgC,EAChC,SAAiB,EACjB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAgB,EAChB,WAAkB,EAClB,QAAe,EACf,QAAa,EACb,WAAW,EACX,cAAqB,EACrB,gBAAgB,EAChB,oBAA2B,EAC3B,kBAA8B,EAC9B,KAAc,EACd,GAAG,KAAK,EACT,EAAE,eAAe,qBAyVjB"}
+{"version":3,"file":"code-editor.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/code-editor.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,EAA+B,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAiB1E,OAAO,EAEL,UAAU,EAYX,MAAM,kBAAkB,CAAA;AAEzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAK9D,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,KAAK,GAAG,gBAAgB,GAAG,SAAS,CAAA;AA4Q5E,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,GAAG,UAAU,CAAC;IACzF,yFAAyF;IACzF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mGAAmG;IACnG,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sFAAsF;IACtF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;IACpC,0DAA0D;IAC1D,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAA;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,kBAAkB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,YAAiB,EACjB,QAAuB,EACvB,MAAM,EACN,SAAc,EACd,SAAe,EACf,SAAgC,EAChC,SAAiB,EACjB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAgB,EAChB,WAAkB,EAClB,QAAe,EACf,QAAa,EACb,WAAW,EACX,cAAqB,EACrB,gBAAgB,EAChB,oBAA2B,EAC3B,kBAA8B,EAC9B,KAAc,EACd,GAAG,KAAK,EACT,EAAE,eAAe,qBA2RjB"}

package/dist/backends/gui/code-editor.js

@@ -14,27 +14,30 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * JSON. `language="json"` colours the syntax and checks the text on every
  * change with `checkJson`: a broken document tints the failing line, marks the
- * failing character and names line, column and reason in the footer. With
+ * failing character and names line, column and reason in the footer. Every
+ * object and array that spans lines folds from a marker in the gutter, and a
+ * folded one reads `{…}` or `[…]` with how many keys or items it hides. With
  * `allowText`, text that does not open an object or an array is plain text and
  * passes. Format (or Shift-Alt-F) re-indents valid JSON by two spaces. Other
  * languages are edited as plain text: the package carries one grammar.
  *
- * Colour. Every colour is a theme rung over a design token — the ink, the
- * hairline, the selection and the error state — so the editor follows the page
- * into light or dark with nothing to configure. Hanzo is monochrome, so the syntax is ranked
- * by ink and weight, not by hue: property names in full ink, strings one rank
- * down, punctuation at the rank of a hint. Hue is spent only on an error.
+ * Colour. The frame's colours are theme rungs over design tokens — the ink, the
+ * hairline, the selection and the error state — and the syntax is the code
+ * theme (`code-theme.ts`: Dracula on dark, GitHub Light on light), each token a
+ * theme key of its own. Both follow the page into light or dark with nothing to
+ * configure.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { AlignLeft, Check, CircleAlert, CircleCheck, Copy, GripHorizontal, Type } from '@hanzogui/lucide-icons-2';
+import { AlignLeft, Check, CircleAlert, CircleCheck, Copy, Type } from '@hanzogui/lucide-icons-2';
 import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
-import { json } from '@codemirror/lang-json';
-import { HighlightStyle, bracketMatching, indentOnInput, syntaxHighlighting } from '@codemirror/language';
+import { jsonLanguage } from '@codemirror/lang-json';
+import { HighlightStyle, LanguageSupport, bracketMatching, codeFolding, foldGutter, foldKeymap, foldNodeProp, indentOnInput, syntaxHighlighting, syntaxTree, } from '@codemirror/language';
 import { Annotation, Compartment, EditorState, RangeSet, RangeSetBuilder, StateField } from '@codemirror/state';
 import { Decoration, EditorView, GutterMarker, drawSelection, gutterLineClass, highlightActiveLine, highlightActiveLineGutter, keymap, lineNumbers as numbering, placeholder as hint, ViewPlugin, } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
 import * as React from 'react';
 import { Button } from './button.js';
+import { Grip, useGrip } from './grip.js';
 import { checkJson, formatJson } from './json.js';
 import { Select, SelectContent, SelectItem, SelectTrigger } from './select.js';
 import { slot } from './slot.js';
@@ -94,10 +97,6 @@ const LABEL = {
 };
 /** Line height as a multiple of the font size. */
 const LEADING = 1.6;
-/** How far one ArrowUp / ArrowDown on the footer moves the height. */
-const STEP = 24;
-/** The separator's stated maximum, in px: the drag itself has none. */
-const RESIZE_CEILING = 4096;
 const MONO = "var(--font-mono, 'Zen Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)";
 /**
  * The editor's surface. Every colour is one of the theme's named rungs — gui emits
@@ -144,6 +143,18 @@ const FRAME = /* @__PURE__ */ EditorView.theme({
     },
     '.cm-nonmatchingBracket, &.cm-focused .cm-nonmatchingBracket': { backgroundColor: 'transparent' },
     '.cm-placeholder': { color: 'var(--dim)' },
+    '.cm-foldGutter .cm-gutterElement': { padding: '0 4px', color: 'var(--dim)', cursor: 'pointer' },
+    '.cm-foldGutter .cm-gutterElement:hover': { color: 'var(--ink)' },
+    '.cm-foldPlaceholder': {
+        backgroundColor: 'var(--raised)',
+        border: '1px solid var(--edge)',
+        borderRadius: '4px',
+        color: 'var(--codePunctuation)',
+        padding: '0 4px',
+        margin: '0 2px',
+        cursor: 'pointer',
+    },
+    '.cm-foldCount': { color: 'var(--codeComment)' },
     '.cm-fault': { backgroundColor: 'var(--state-error-bg, rgb(239 68 68 / .1))' },
     '.cm-gutterElement.cm-fault': { color: 'var(--bad)' },
     '.cm-fault-at': {
@@ -152,13 +163,55 @@ const FRAME = /* @__PURE__ */ EditorView.theme({
         textUnderlineOffset: '3px',
     },
 });
-/** The syntax, ranked by ink: names in full ink, strings a rank down, punctuation at a hint. */
-const INK = /* @__PURE__ */ HighlightStyle.define([
-    { tag: tags.propertyName, color: 'var(--ink)', fontWeight: '500' },
-    { tag: tags.string, color: 'var(--soft)' },
-    { tag: [tags.number, tags.bool, tags.null], color: 'var(--ink)' },
-    { tag: [tags.punctuation, tags.separator, tags.brace, tags.squareBracket], color: 'var(--dim)' },
+/** The syntax in the code theme's colours: one theme key per kind of token, from `code-theme.ts`. */
+const SYNTAX = /* @__PURE__ */ HighlightStyle.define([
+    { tag: tags.propertyName, color: 'var(--codeKey)' },
+    { tag: tags.string, color: 'var(--codeString)' },
+    { tag: tags.number, color: 'var(--codeNumber)' },
+    { tag: tags.bool, color: 'var(--codeBoolean)' },
+    { tag: tags.null, color: 'var(--codeNull)' },
+    { tag: [tags.punctuation, tags.separator, tags.brace, tags.squareBracket], color: 'var(--codePunctuation)' },
+    { tag: tags.comment, color: 'var(--codeComment)' },
+    { tag: tags.keyword, color: 'var(--codeKeyword)' },
 ]);
+/**
+ * JSON folds from its opening bracket through its closing one, so a folded block
+ * is drawn whole as `{…}` or `[…]` and has room to say what it holds. lang-json
+ * folds inside the brackets, which leaves them standing around an ellipsis.
+ */
+const JSON_GRAMMAR = /* @__PURE__ */ new LanguageSupport(jsonLanguage.configure({
+    props: [foldNodeProp.add({ 'Object Array': (node) => ({ from: node.from, to: node.to }) })],
+}));
+const words = (n, one) => `${n} ${one}${n === 1 ? '' : 's'}`;
+/** What a folded range holds: its brackets and how many keys or items sit inside. */
+function measureFold(state, range) {
+    let node = syntaxTree(state).resolveInner(range.from, 1);
+    while (node.parent && node.name !== 'Object' && node.name !== 'Array')
+        node = node.parent;
+    if (node.name === 'Object')
+        return { open: '{', close: '}', count: words(node.getChildren('Property').length, 'key') };
+    let n = 0;
+    for (let c = node.firstChild; c; c = c.nextSibling)
+        if (!/^[[\],]$/.test(c.name) && !c.type.isError)
+            n += 1;
+    return { open: '[', close: ']', count: words(n, 'item') };
+}
+const FOLDING = /* @__PURE__ */ codeFolding({
+    preparePlaceholder: measureFold,
+    placeholderDOM: (_view, onclick, fold) => {
+        const el = document.createElement('span');
+        el.className = 'cm-foldPlaceholder';
+        el.title = 'Unfold';
+        el.setAttribute('aria-label', `Folded, ${fold.count}`);
+        el.textContent = `${fold.open}…${fold.close}`;
+        const count = document.createElement('span');
+        count.className = 'cm-foldCount';
+        count.textContent = ` ${fold.count}`;
+        el.append(count);
+        el.onclick = onclick;
+        return el;
+    },
+});
 /** How much deeper than its line a wrapped continuation starts, in characters. */
 const HANG = 2;
 /** A line's own indentation in characters, a tab counted at the editor's tab width. */
@@ -243,13 +296,16 @@ export function CodeEditor({ value, defaultValue = '', language = 'javascript',
     const [text, setText] = React.useState(value ?? defaultValue);
     const [check, setCheck] = React.useState(null);
     const [copied, setCopied] = React.useState(false);
-    const [dragged, setDragged] = React.useState(null);
     const host = React.useRef(null);
-    const grip = React.useRef(null);
-    const knob = React.useRef(null);
     /** Every text reported to `onChange` and not yet seen back as `value`. */
     const sent = React.useRef([]);
     const view = React.useRef(null);
+    const sized = useGrip({
+        enabled: resizable,
+        min: minHeight,
+        measure: () => view.current?.dom.getBoundingClientRect().height ?? minHeight,
+    });
+    const dragged = sized.height;
     const timer = React.useRef(undefined);
     const listeners = React.useRef({ onChange, onCheck });
     listeners.current = { onChange, onCheck };
@@ -258,7 +314,7 @@ export function CodeEditor({ value, defaultValue = '', language = 'javascript',
     const field = React.useMemo(() => verdict(allowText), [allowText]);
     const judged = React.useRef({ field });
     judged.current.field = field;
-    const grammar = () => (isJson ? [json(), field] : []);
+    const grammar = () => (isJson ? [JSON_GRAMMAR, field, FOLDING, foldGutter()] : []);
     const gutter = () => (lineNumbers ? [numbering(), highlightActiveLineGutter()] : []);
     const wrap = () => (wordWrap === 'off' ? [] : [EditorView.lineWrapping, hang]);
     const edit = () => [EditorState.readOnly.of(readOnly), EditorView.editable.of(!readOnly)];
@@ -308,10 +364,11 @@ export function CodeEditor({ value, defaultValue = '', language = 'javascript',
                     indentOnInput(),
                     bracketMatching(),
                     highlightActiveLine(),
-                    syntaxHighlighting(INK),
+                    syntaxHighlighting(SYNTAX),
                     keymap.of([
                         { key: 'Shift-Alt-f', run: format },
                         indentWithTab,
+                        ...foldKeymap,
                         ...defaultKeymap,
                         ...historyKeymap,
                         {
@@ -384,57 +441,6 @@ export function CodeEditor({ value, defaultValue = '', language = 'javascript',
         dom.style.maxHeight = fixed ? '' : `${maxHeight}px`;
         view.current?.requestMeasure();
     }, [dragged, height, minHeight, maxHeight, fontSize]);
-    React.useEffect(() => {
-        const el = grip.current;
-        const handle = knob.current;
-        if (!el || !handle || !resizable)
-            return;
-        let pointer = -1;
-        let startY = 0;
-        let startH = 0;
-        const current = () => view.current?.dom.getBoundingClientRect().height ?? minHeight;
-        const down = (e) => {
-            if (e.button !== 0)
-                return;
-            e.preventDefault();
-            pointer = e.pointerId;
-            startY = e.clientY;
-            startH = current();
-            el.setPointerCapture?.(pointer);
-        };
-        const move = (e) => {
-            if (e.pointerId !== pointer)
-                return;
-            setDragged(Math.max(minHeight, 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();
-            setDragged(Math.max(minHeight, Math.round(current() + (e.key === 'ArrowDown' ? STEP : -STEP))));
-        };
-        const reset = () => setDragged(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);
-        };
-    }, [resizable, minHeight]);
     const copy = React.useCallback(async () => {
         try {
             await navigator.clipboard.writeText(text);
@@ -453,19 +459,9 @@ export function CodeEditor({ value, defaultValue = '', language = 'javascript',
     const formattable = showFormatButton ?? (isJson && !readOnly);
     const toolbar = showLanguageSelector || showCopyButton || formattable;
     const footer = resizable || (isJson && check !== null);
-    return (_jsxs(YStack, { ...slot('code-editor'), borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", bg: "$background", focusWithinStyle: { borderColor: '$outlineColor' }, ...props, children: [toolbar && (_jsxs(XStack, { ...slot('code-editor-toolbar'), items: "center", justify: "space-between", flexWrap: "wrap", gap: "$2", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$panel", px: "$2", py: "$1", children: [showLanguageSelector ? (_jsxs(Select, { value: selected, onValueChange: setSelected, children: [_jsx(SelectTrigger, { ...slot('code-editor-language-trigger'), width: "auto", minHeight: 32, borderWidth: 0, bg: "transparent", gap: "$1.5", px: "$2", children: _jsx(SizableText, { size: "$1", fontFamily: "$mono", children: LABEL[selected] ?? selected }) }), _jsx(SelectContent, { ...slot('code-editor-language-content'), children: availableLanguages.map((lang) => (_jsx(SelectItem, { value: lang, children: LABEL[lang] ?? lang }, lang))) })] })) : (_jsx(SizableText, { ...slot('code-editor-language'), size: "$1", fontFamily: "$mono", color: "$soft", px: "$2", children: LABEL[selected] ?? selected })), _jsxs(XStack, { items: "center", justify: "flex-end", flexWrap: "wrap", gap: "$1", shrink: 1, minW: 0, children: [formattable && (_jsxs(Button, { ...slot('code-editor-format-button'), variant: "ghost", size: "sm", disabled: check?.kind !== 'json', onClick: format, children: [_jsx(AlignLeft, { size: 14 }), "Format"] })), showCopyButton && (_jsxs(Button, { ...slot('code-editor-copy-button'), variant: "ghost", size: "sm", disabled: !text, onClick: copy, children: [copied ? _jsx(Check, { size: 14 }) : _jsx(Copy, { size: 14 }), copied ? 'Copied!' : 'Copy'] }))] })] })), _jsx(YStack, { ref: host, ...slot('code-editor-body'), ...(fills && { flex: 1, minH: 0 }) }), footer && (_jsxs(XStack, { ref: grip, ...slot('code-editor-footer'), cursor: resizable ? 'row-resize' : undefined, items: "center", justify: "space-between", gap: "$2", minH: 28, px: "$3", py: "$1", borderTopWidth: 1, borderColor: "$borderColor", bg: "$panel", select: "none", 
+    return (_jsxs(YStack, { ...slot('code-editor'), borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", bg: "$background", focusWithinStyle: { borderColor: '$outlineColor' }, ...props, children: [toolbar && (_jsxs(XStack, { ...slot('code-editor-toolbar'), items: "center", justify: "space-between", flexWrap: "wrap", gap: "$2", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$panel", px: "$2", py: "$1", children: [showLanguageSelector ? (_jsxs(Select, { value: selected, onValueChange: setSelected, children: [_jsx(SelectTrigger, { ...slot('code-editor-language-trigger'), width: "auto", minHeight: 32, borderWidth: 0, bg: "transparent", gap: "$1.5", px: "$2", children: _jsx(SizableText, { size: "$1", fontFamily: "$mono", children: LABEL[selected] ?? selected }) }), _jsx(SelectContent, { ...slot('code-editor-language-content'), children: availableLanguages.map((lang) => (_jsx(SelectItem, { value: lang, children: LABEL[lang] ?? lang }, lang))) })] })) : (_jsx(SizableText, { ...slot('code-editor-language'), size: "$1", fontFamily: "$mono", color: "$soft", px: "$2", children: LABEL[selected] ?? selected })), _jsxs(XStack, { items: "center", justify: "flex-end", flexWrap: "wrap", gap: "$1", shrink: 1, minW: 0, children: [formattable && (_jsxs(Button, { ...slot('code-editor-format-button'), variant: "ghost", size: "sm", disabled: check?.kind !== 'json', onClick: format, children: [_jsx(AlignLeft, { size: 14 }), "Format"] })), showCopyButton && (_jsxs(Button, { ...slot('code-editor-copy-button'), variant: "ghost", size: "sm", disabled: !text, onClick: copy, children: [copied ? _jsx(Check, { size: 14 }) : _jsx(Copy, { size: 14 }), copied ? 'Copied!' : 'Copy'] }))] })] })), _jsx(YStack, { ref: host, ...slot('code-editor-body'), ...(fills && { flex: 1, minH: 0 }) }), footer && (_jsxs(XStack, { ref: sized.grip, ...slot('code-editor-footer'), cursor: resizable ? 'row-resize' : undefined, items: "center", justify: "space-between", gap: "$2", minH: 28, px: "$3", py: "$1", borderTopWidth: 1, borderColor: "$borderColor", bg: "$panel", select: "none", 
                 // A touch drag would otherwise scroll the page and cancel the pointer.
-                style: resizable ? { touchAction: 'none' } : undefined, children: [_jsx(Status, { check: isJson ? check : null }), resizable && (_jsx(XStack, { ref: knob, ...slot('code-editor-resize'), ...{
-                            role: 'separator',
-                            'aria-orientation': 'horizontal',
-                            'aria-label': `Resize ${label}`,
-                            'aria-valuemin': minHeight,
-                            // A drag has no ceiling; this stands in for "as tall as you like".
-                            'aria-valuemax': RESIZE_CEILING,
-                            'aria-valuenow': dragged ?? minHeight,
-                            'aria-valuetext': dragged === null ? 'Fits its text' : `${dragged} pixels`,
-                            tabIndex: 0,
-                        }, rounded: "$2", p: "$1", focusVisibleStyle: { bg: '$hover' }, children: _jsx(GripHorizontal, { size: 14, color: "$soft" }) }))] }))] }));
+                style: resizable ? { touchAction: 'none' } : undefined, children: [_jsx(Status, { check: isJson ? check : null }), resizable && (_jsx(Grip, { knob: sized.knob, name: "code-editor-resize", label: label, min: minHeight, height: dragged }))] }))] }));
 }
 /** The footer's JSON verdict, announced politely when it changes. */
 function Status({ check }) {