@hanzo/ui 8.27.57 → 8.27.59

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

@@ -37,26 +37,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeEditor = CodeEditor;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * CodeEditor — a bordered, monospace editing surface: a toolbar carrying a
- * language menu and a copy-to-clipboard button, above a plain-text field with
- * a gutter of line numbers that scrolls with it.
+ * CodeEditor — a CodeMirror 6 editor in a gui frame: a toolbar with the
+ * language (a menu, or a label), Format for JSON and Copy; the editor with a
+ * line-number gutter; and a footer that reports whether JSON parses and is the
+ * handle that resizes the editor.
  *
- * The field is gui's `TextArea`, so what is edited is the text itself. Tab
- * inserts two spaces and Escape releases focus; `wordWrap` is the field's own
- * white-space; the gutter numbers lines of text, so a line that wraps keeps
- * one number; there is no syntax colouring, and `minimap` is accepted and
- * ignored because a plain field has no surface to draw one on.
+ * Height. With no `height` the editor is as tall as its text, from `minHeight`
+ * up to `maxHeight`, and scrolls past that. Dragging the footer (or ArrowUp /
+ * ArrowDown on it) sets a height of the reader's own, past the cap if they
+ * want; a double-click hands the height back to the text. A `height` fixes it,
+ * and `'100%'` fills a frame that is itself sized (a flex child).
  *
- * `theme` is the editor's own palette, independent of the surrounding gui
- * theme the way a syntax theme is: `'light'` and `'dark'` paint a fixed set of
- * literal colours, and `'auto'` (the default) takes the ambient `$background`,
- * `$color` and `$borderColor` tokens, so it follows the host page.
+ * 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
+ * `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.
  */
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const commands_1 = require("@codemirror/commands");
+const lang_json_1 = require("@codemirror/lang-json");
+const language_1 = require("@codemirror/language");
+const state_1 = require("@codemirror/state");
+const view_1 = require("@codemirror/view");
+const highlight_1 = require("@lezer/highlight");
 const React = __importStar(require("react"));
 const button_1 = require("./button.cjs");
-const control_1 = require("./control.cjs");
+const json_1 = require("./json.cjs");
 const select_1 = require("./select.cjs");
 const slot_1 = require("./slot.cjs");
 const toaster_1 = require("./toaster.cjs");
@@ -113,53 +128,332 @@ const LABEL = {
     shell: 'Shell',
     plaintext: 'Plain Text',
 };
-/** The two named palettes; `'auto'` paints none of this. */
-const PALETTE = {
-    light: { bg: '#ffffff', fg: '#1f2328', border: '#d0d7de', head: '#f6f8fa', gutter: '#8c959f' },
-    dark: { bg: '#1e1e1e', fg: '#d4d4d4', border: '#3c3c3c', head: '#252526', gutter: '#858585' },
-};
-/** What Tab inserts. */
-const INDENT = '  ';
 /** Line height as a multiple of the font size. */
-const LEADING = 1.5;
-function CodeEditor({ value, defaultValue = '', language = 'javascript', height = '400px', theme = 'auto', onChange, onMount, readOnly = false, lineNumbers = true, minimap: _minimap, wordWrap = 'on', fontSize = 14, showCopyButton = true, showLanguageSelector = true, availableLanguages = LANGUAGES, label = 'Code', ...props }) {
-    const [typed, setTyped] = React.useState(defaultValue);
-    const text = value ?? typed;
+const LEADING = 1.6;
+/** How far one ArrowUp / ArrowDown on the footer moves the height. */
+const STEP = 24;
+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
+ * each as a custom property on the theme class, so it inverts with the page — and
+ * those rungs read @hanzo/design's tokens (`--ink` is `--foreground`, `--edge` is
+ * `--border`, `--bad` is `--state-error`). The design ladder is NOT read directly:
+ * on a host that mounts design's sheet without its light selector, `--text-primary`
+ * stays the dark theme's white on a light page.
+ */
+const FRAME = /* @__PURE__ */ view_1.EditorView.theme({
+    '&': { color: 'var(--ink)', backgroundColor: 'transparent' },
+    '&.cm-focused': { outline: 'none' },
+    // The scroller fills what the editor is given and no more: grown with its text up to the
+    // editor's max-height, then scrolling; stretched to a fixed or dragged height. CodeMirror's
+    // own `height: 100%` resolves against an auto-height editor as its min-height, which pinned
+    // a growing editor at its floor.
+    '.cm-scroller': {
+        fontFamily: MONO,
+        lineHeight: String(LEADING),
+        overflow: 'auto',
+        flex: '1 1 auto',
+        height: 'auto',
+        minHeight: '0',
+    },
+    '.cm-content': { padding: '8px 0', caretColor: 'var(--ink)' },
+    '.cm-line': { padding: '0 12px' },
+    '.cm-gutters': {
+        backgroundColor: 'transparent',
+        color: 'var(--dim)',
+        border: 'none',
+        borderRight: '1px solid var(--edge)',
+    },
+    '.cm-lineNumbers .cm-gutterElement': { padding: '0 10px 0 12px', minWidth: '28px' },
+    '.cm-activeLine': { backgroundColor: 'var(--panel)' },
+    '.cm-activeLineGutter': { backgroundColor: 'transparent', color: 'var(--quiet)' },
+    '.cm-cursor, .cm-dropCursor': { borderLeftColor: 'var(--ink)' },
+    '.cm-selectionBackground, &.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, ::selection': {
+        backgroundColor: 'var(--raised)',
+    },
+    '.cm-matchingBracket, &.cm-focused .cm-matchingBracket': {
+        backgroundColor: 'var(--raised)',
+        color: 'inherit',
+        outline: 'none',
+    },
+    '.cm-nonmatchingBracket, &.cm-focused .cm-nonmatchingBracket': { backgroundColor: 'transparent' },
+    '.cm-placeholder': { color: 'var(--dim)' },
+    '.cm-fault': { backgroundColor: 'var(--state-error-bg, rgb(239 68 68 / .1))' },
+    '.cm-gutterElement.cm-fault': { color: 'var(--bad)' },
+    '.cm-fault-at': {
+        textDecoration: 'underline wavy var(--bad)',
+        textDecorationSkipInk: 'none',
+        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)' },
+]);
+/** 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 as two. */
+const indentOf = (text) => {
+    let n = 0;
+    for (const c of text) {
+        if (c === ' ')
+            n += 1;
+        else if (c === '\t')
+            n += 2;
+        else
+            break;
+    }
+    return n;
+};
+const hangs = new Map();
+const hangFor = (n) => {
+    let d = hangs.get(n);
+    if (!d) {
+        d = view_1.Decoration.line({ attributes: { style: `padding-left: calc(${n}ch + 12px); text-indent: -${n}ch` } });
+        hangs.set(n, d);
+    }
+    return d;
+};
+/**
+ * Wrapped lines hang under their own text rather than restarting at the margin, so a
+ * long string inside nested JSON still reads as belonging to its key. A line's padding
+ * is its indentation plus the hang, and a negative text-indent of the same width puts
+ * its first row back where it was.
+ */
+const hang = /* @__PURE__ */ view_1.ViewPlugin.fromClass(class {
+    decorations;
+    constructor(view) {
+        this.decorations = this.build(view);
+    }
+    update(u) {
+        if (u.docChanged || u.viewportChanged)
+            this.decorations = this.build(u.view);
+    }
+    build(view) {
+        const out = new state_1.RangeSetBuilder();
+        for (const { from, to } of view.visibleRanges) {
+            for (let pos = from; pos <= to;) {
+                const line = view.state.doc.lineAt(pos);
+                out.add(line.from, line.from, hangFor(indentOf(line.text) + HANG));
+                pos = line.to + 1;
+            }
+        }
+        return out.finish();
+    }
+}, { decorations: (v) => v.decorations });
+/** Marks a programmatic edit, so a caller's own `value` is never echoed back to `onChange`. */
+const External = /* @__PURE__ */ state_1.Annotation.define();
+class Fault extends view_1.GutterMarker {
+    elementClass = 'cm-fault';
+}
+const FAULT_GUTTER = /* @__PURE__ */ new Fault();
+const FAULT_LINE = /* @__PURE__ */ view_1.Decoration.line({ class: 'cm-fault' });
+const FAULT_AT = /* @__PURE__ */ view_1.Decoration.mark({ class: 'cm-fault-at' });
+function judge(state, text) {
+    const check = (0, json_1.checkJson)(state.doc.toString(), { text });
+    if (check.kind !== 'error')
+        return { check, marks: view_1.Decoration.none, gutter: state_1.RangeSet.empty };
+    const at = Math.min(check.at, state.doc.length);
+    const line = state.doc.lineAt(at);
+    const end = Math.min(at + 1, line.to);
+    const ranges = [FAULT_LINE.range(line.from), ...(end > at ? [FAULT_AT.range(at, end)] : [])];
+    return { check, marks: view_1.Decoration.set(ranges, true), gutter: state_1.RangeSet.of([FAULT_GUTTER.range(line.from)]) };
+}
+/** The JSON verdict as editor state: recomputed on every edit, drawn as decorations. */
+const verdict = (text) => state_1.StateField.define({
+    create: (state) => judge(state, text),
+    update: (value, tr) => (tr.docChanged ? judge(tr.state, text) : value),
+    provide: (field) => [
+        view_1.EditorView.decorations.from(field, (v) => v.marks),
+        view_1.gutterLineClass.from(field, (v) => v.gutter),
+    ],
+});
+const px = (v) => (typeof v === 'number' ? `${v}px` : v);
+function CodeEditor({ value, defaultValue = '', language = 'javascript', height, minHeight = 96, maxHeight = 480, resizable = height === undefined, allowText = false, onChange, onCheck, onMount, readOnly = false, lineNumbers = true, wordWrap = 'on', fontSize = 14, placeholder, showCopyButton = true, showFormatButton, showLanguageSelector = true, availableLanguages = LANGUAGES, label = 'Code', ...props }) {
     const [selected, setSelected] = React.useState(language);
+    const [text, setText] = React.useState(value ?? defaultValue);
+    const [check, setCheck] = React.useState(null);
     const [copied, setCopied] = React.useState(false);
-    const [scrollTop, setScrollTop] = React.useState(0);
-    const field = React.useRef(null);
+    const [dragged, setDragged] = React.useState(null);
+    const host = React.useRef(null);
+    const grip = React.useRef(null);
+    const view = React.useRef(null);
     const timer = React.useRef(undefined);
-    React.useEffect(() => {
-        if (field.current)
-            onMount?.(field.current);
-        return () => clearTimeout(timer.current);
+    const listeners = React.useRef({ onChange, onCheck });
+    listeners.current = { onChange, onCheck };
+    const compartments = React.useMemo(() => ({ language: new state_1.Compartment(), gutter: new state_1.Compartment(), wrap: new state_1.Compartment(), edit: new state_1.Compartment() }), []);
+    const isJson = selected === 'json';
+    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 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)];
+    /** Report the JSON verdict when it changed (an edit, or a new grammar). */
+    const report = (state) => {
+        const v = state.field(judged.current.field, false);
+        if (v === judged.current.seen)
+            return;
+        judged.current.seen = v;
+        setCheck(v ? v.check : null);
+        if (v)
+            listeners.current.onCheck?.(v.check);
+    };
+    const format = React.useCallback(() => {
+        const v = view.current;
+        if (!v || v.state.readOnly)
+            return false;
+        const current = v.state.doc.toString();
+        const next = (0, json_1.formatJson)(current);
+        if (next === null || next === current)
+            return false;
+        v.dispatch({ changes: { from: 0, to: current.length, insert: next } });
+        return true;
     }, []);
-    // Bound directly rather than through the gui field's `onScroll` prop: native
-    // `scroll` does not bubble, and a listener attached this way fires however
-    // the offset changed — a real drag or a test stating it outright.
     React.useEffect(() => {
-        const el = field.current;
-        if (!el)
+        const parent = host.current;
+        if (!parent)
             return;
-        const onScroll = () => setScrollTop(el.scrollTop);
-        el.addEventListener('scroll', onScroll);
-        return () => el.removeEventListener('scroll', onScroll);
+        const listen = view_1.EditorView.updateListener.of((update) => {
+            if (update.docChanged && !update.transactions.some((tr) => tr.annotation(External))) {
+                const next = update.state.doc.toString();
+                setText(next);
+                listeners.current.onChange?.(next);
+            }
+            report(update.state);
+        });
+        const editor = new view_1.EditorView({
+            parent,
+            state: state_1.EditorState.create({
+                doc: value ?? defaultValue,
+                extensions: [
+                    compartments.gutter.of(gutter()),
+                    (0, commands_1.history)(),
+                    (0, view_1.drawSelection)(),
+                    (0, language_1.indentOnInput)(),
+                    (0, language_1.bracketMatching)(),
+                    (0, view_1.highlightActiveLine)(),
+                    (0, language_1.syntaxHighlighting)(INK),
+                    view_1.keymap.of([
+                        { key: 'Shift-Alt-f', run: format },
+                        commands_1.indentWithTab,
+                        ...commands_1.defaultKeymap,
+                        ...commands_1.historyKeymap,
+                        {
+                            key: 'Escape',
+                            run: (v) => {
+                                v.contentDOM.blur();
+                                return true;
+                            },
+                        },
+                    ]),
+                    compartments.language.of(grammar()),
+                    compartments.wrap.of(wrap()),
+                    compartments.edit.of(edit()),
+                    placeholder ? (0, view_1.placeholder)(placeholder) : [],
+                    view_1.EditorView.contentAttributes.of({ 'aria-label': label, 'data-slot': 'code-editor-content' }),
+                    FRAME,
+                    listen,
+                ],
+            }),
+        });
+        view.current = editor;
+        report(editor.state);
+        onMount?.(editor);
+        return () => {
+            editor.destroy();
+            view.current = null;
+            clearTimeout(timer.current);
+        };
     }, []);
-    const change = React.useCallback((next) => {
-        setTyped(next);
-        onChange?.(next);
-    }, [onChange]);
-    const key = (e) => {
-        const el = e.currentTarget;
-        if (e.key === 'Escape')
-            el.blur();
-        if (e.key !== 'Tab' || e.shiftKey || readOnly)
+    // Props that reshape the editor reach it as a reconfiguration, not a remount,
+    // so the caret, the selection and the undo history survive.
+    React.useEffect(() => {
+        view.current?.dispatch({
+            effects: [
+                compartments.language.reconfigure(grammar()),
+                compartments.gutter.reconfigure(gutter()),
+                compartments.wrap.reconfigure(wrap()),
+                compartments.edit.reconfigure(edit()),
+            ],
+        });
+    }, [isJson, field, lineNumbers, wordWrap, readOnly]);
+    // A controlled value that moved out from under the editor replaces the text.
+    React.useEffect(() => {
+        const v = view.current;
+        if (!v || value === undefined)
             return;
-        e.preventDefault();
-        el.setRangeText(INDENT, el.selectionStart ?? 0, el.selectionEnd ?? 0, 'end');
-        change(el.value);
-    };
+        const current = v.state.doc.toString();
+        if (value === current)
+            return;
+        v.dispatch({ changes: { from: 0, to: current.length, insert: value }, annotations: External.of(true) });
+        setText(value);
+    }, [value]);
+    React.useEffect(() => {
+        const dom = view.current?.dom;
+        if (!dom)
+            return;
+        dom.style.fontSize = `${fontSize}px`;
+        const fixed = dragged !== null ? `${dragged}px` : height !== undefined ? px(height) : '';
+        dom.style.height = fixed;
+        dom.style.minHeight = fixed ? '' : `${minHeight}px`;
+        dom.style.maxHeight = fixed ? '' : `${maxHeight}px`;
+        view.current?.requestMeasure();
+    }, [dragged, height, minHeight, maxHeight, fontSize]);
+    React.useEffect(() => {
+        const el = grip.current;
+        if (!el || !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('keydown', key);
+        el.addEventListener('dblclick', reset);
+        return () => {
+            el.removeEventListener('pointerdown', down);
+            el.removeEventListener('pointermove', move);
+            el.removeEventListener('pointerup', up);
+            el.removeEventListener('pointercancel', up);
+            el.removeEventListener('keydown', key);
+            el.removeEventListener('dblclick', reset);
+        };
+    }, [resizable, minHeight]);
     const copy = React.useCallback(async () => {
         try {
             await navigator.clipboard.writeText(text);
@@ -172,24 +466,33 @@ function CodeEditor({ value, defaultValue = '', language = 'javascript', height
             toaster_1.toast.error('Failed to copy code');
         }
     }, [text]);
-    const named = theme === 'auto' ? undefined : PALETTE[theme];
-    const lineHeight = `${fontSize * LEADING}px`;
-    const wrap = wordWrap !== 'off';
-    const gutter = Array.from({ length: text.split('\n').length }, (_, i) => i + 1).join('\n');
-    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", style: named && { backgroundColor: named.bg, borderColor: named.border }, ...props, children: [(showLanguageSelector || showCopyButton) && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('code-editor-toolbar'), items: "center", justify: showLanguageSelector ? 'space-between' : 'flex-end', borderBottomWidth: 1, borderColor: "$borderColor", bg: "$panel", px: "$3", py: "$2", style: named && { backgroundColor: named.head, borderColor: named.border }, 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", style: named && { color: named.fg }, 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))) })] })), 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.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('code-editor-body'), overflow: "hidden", style: { height }, children: [lineNumbers && ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('code-editor-gutter'), width: 48, overflow: "hidden", borderRightWidth: 1, borderColor: "$borderColor", bg: "$panel", py: control_1.RISER, style: named && { backgroundColor: named.head, borderColor: named.border }, children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", fontFamily: "$mono", color: "$soft", px: "$2", whiteSpace: "pre", style: {
-                                fontSize,
-                                lineHeight,
-                                textAlign: 'right',
-                                transform: `translateY(${-scrollTop}px)`,
-                                ...(named && { color: named.gutter }),
-                            }, children: gutter }) })), (0, jsx_runtime_1.jsx)(gui_1.TextArea, { ref: field, ...(0, slot_1.slot)('code-editor-textarea'), "aria-label": label, value: text, onChangeText: change, onKeyDown: key, readOnly: readOnly, unstyled: true, flex: 1, minH: 0, borderWidth: 0, rounded: 0, px: "$2", py: control_1.RISER, fontFamily: "$mono", color: "$color", bg: "transparent", style: {
-                            fontSize,
-                            lineHeight,
-                            whiteSpace: wrap ? 'pre-wrap' : 'pre',
-                            overflowWrap: wrap ? 'break-word' : 'normal',
-                            overflow: 'auto',
-                            resize: 'none',
-                            height: '100%',
-                            ...(named && { color: named.fg }),
-                        } })] })] }));
+    // A percentage height fills a frame that is itself sized; the body has to flex for it to
+    // resolve. Any other height is the editor's own, so the body is just as tall as the editor.
+    const fills = typeof height === 'string' && height.endsWith('%');
+    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'), ...(resizable &&
+                    {
+                        role: 'separator',
+                        'aria-orientation': 'horizontal',
+                        'aria-label': `Resize ${label}`,
+                        'aria-valuemin': minHeight,
+                        'aria-valuenow': dragged ?? undefined,
+                        tabIndex: 0,
+                    }), cursor: resizable ? 'row-resize' : undefined, focusVisibleStyle: { bg: '$hover' }, items: "center", justify: "space-between", gap: "$2", minH: 28, px: "$3", py: "$1", borderTopWidth: 1, borderColor: "$borderColor", bg: "$panel", select: "none", children: [(0, jsx_runtime_1.jsx)(Status, { check: isJson ? check : null }), resizable && (0, jsx_runtime_1.jsx)(lucide_icons_2_1.GripHorizontal, { size: 14, color: "$soft" })] }))] }));
+}
+/** The footer's JSON verdict, announced politely when it changes. */
+function Status({ check }) {
+    const bad = check?.kind === 'error';
+    const words = check === null
+        ? ''
+        : check.kind === 'error'
+            ? `Line ${check.line}, column ${check.column}: ${check.message}`
+            : check.kind === 'text'
+                ? 'Plain text'
+                : check.kind === 'empty'
+                    ? 'Empty'
+                    : 'Valid JSON';
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('code-editor-status'), "aria-live": "polite", items: "center", gap: "$1.5", flex: 1, minW: 0, children: [bad ? ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.CircleAlert, { size: 14, color: "$bad" })) : check?.kind === 'text' ? ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.Type, { size: 14, color: "$soft" })) : check?.kind === 'json' ? ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.CircleCheck, { size: 14, color: "$soft" })) : null, (0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('code-editor-status-text'), "data-kind": check?.kind, size: "$1", fontFamily: "$mono", color: bad ? '$bad' : '$soft', numberOfLines: 2, children: words })] }));
 }

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

@@ -1,49 +1,70 @@
 /**
- * CodeEditor — a bordered, monospace editing surface: a toolbar carrying a
- * language menu and a copy-to-clipboard button, above a plain-text field with
- * a gutter of line numbers that scrolls with it.
+ * CodeEditor — a CodeMirror 6 editor in a gui frame: a toolbar with the
+ * language (a menu, or a label), Format for JSON and Copy; the editor with a
+ * line-number gutter; and a footer that reports whether JSON parses and is the
+ * handle that resizes the editor.
  *
- * The field is gui's `TextArea`, so what is edited is the text itself. Tab
- * inserts two spaces and Escape releases focus; `wordWrap` is the field's own
- * white-space; the gutter numbers lines of text, so a line that wraps keeps
- * one number; there is no syntax colouring, and `minimap` is accepted and
- * ignored because a plain field has no surface to draw one on.
+ * Height. With no `height` the editor is as tall as its text, from `minHeight`
+ * up to `maxHeight`, and scrolls past that. Dragging the footer (or ArrowUp /
+ * ArrowDown on it) sets a height of the reader's own, past the cap if they
+ * want; a double-click hands the height back to the text. A `height` fixes it,
+ * and `'100%'` fills a frame that is itself sized (a flex child).
  *
- * `theme` is the editor's own palette, independent of the surrounding gui
- * theme the way a syntax theme is: `'light'` and `'dark'` paint a fixed set of
- * literal colours, and `'auto'` (the default) takes the ambient `$background`,
- * `$color` and `$borderColor` tokens, so it follows the host page.
+ * 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
+ * `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.
  */
 import { type YStackProps } from '@hanzo/gui';
+import { EditorView } from '@codemirror/view';
 import * as React from 'react';
-export type CodeEditorTheme = 'light' | 'dark' | 'auto';
+import { type JsonCheck } from './json.js';
 export type CodeEditorWordWrap = 'on' | 'off' | 'wordWrapColumn' | 'bounded';
-export interface CodeEditorProps extends Omit<YStackProps, 'children' | 'height' | 'theme' | 'onChange'> {
-    /** A controlled value; omit it and set `defaultValue` to let the field own its text. */
+export interface CodeEditorProps extends Omit<YStackProps, 'children' | 'height' | 'minHeight' | 'maxHeight' | 'onChange'> {
+    /** A controlled value; omit it and set `defaultValue` to let the editor own its text. */
     value?: string;
     defaultValue?: string;
     language?: string;
-    /** The height of the field; the toolbar sits above it, unsized. */
+    /** A fixed height. Omit it and the editor follows its text between `minHeight` and `maxHeight`. */
     height?: string | number;
-    theme?: CodeEditorTheme;
+    /** The shortest the editor gets when it follows its text, in px. */
+    minHeight?: number;
+    /** The tallest it grows on its own, in px; past it the editor scrolls. */
+    maxHeight?: number;
+    /** Whether the footer resizes the editor. Defaults to true unless `height` is set. */
+    resizable?: boolean;
+    /** JSON only: text that does not open an object or an array is plain text, not an error. */
+    allowText?: boolean;
     onChange?: (value: string) => void;
-    /** Called once, after mount, with the field's `<textarea>`. */
-    onMount?: (element: HTMLTextAreaElement) => void;
+    /** JSON only: the verdict on the text, after mount and after every edit. */
+    onCheck?: (check: JsonCheck) => void;
+    /** Called once, after mount, with the CodeMirror view. */
+    onMount?: (view: EditorView) => void;
     readOnly?: boolean;
     lineNumbers?: boolean;
-    /** Accepted and ignored: a plain text field has no surface to draw a minimap on. */
-    minimap?: boolean;
     wordWrap?: CodeEditorWordWrap;
     fontSize?: number;
+    /** Shown while the editor is empty. */
+    placeholder?: string;
     showCopyButton?: boolean;
+    /** Defaults to true for editable JSON. */
+    showFormatButton?: boolean;
     showLanguageSelector?: boolean;
     availableLanguages?: readonly string[];
     /**
-     * The field's accessible name. A text field with none is announced as
-     * "edit text" with nothing to say what it holds; a file's path is the usual
-     * answer. Defaults to "Code".
+     * The editor's accessible name. An editing surface with none is announced
+     * with nothing to say what it holds; a file's path is the usual answer.
+     * Defaults to "Code".
      */
     label?: string;
 }
-export declare function CodeEditor({ value, defaultValue, language, height, theme, onChange, onMount, readOnly, lineNumbers, minimap: _minimap, wordWrap, fontSize, showCopyButton, showLanguageSelector, availableLanguages, label, ...props }: CodeEditorProps): React.JSX.Element;
+export declare function CodeEditor({ value, defaultValue, language, height, minHeight, maxHeight, resizable, allowText, onChange, onCheck, onMount, readOnly, lineNumbers, wordWrap, fontSize, placeholder, showCopyButton, showFormatButton, showLanguageSelector, availableLanguages, label, ...props }: CodeEditorProps): React.JSX.Element;
 //# sourceMappingURL=code-editor.d.ts.map

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;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAyC,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAEpF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AACvD,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,KAAK,GAAG,gBAAgB,GAAG,SAAS,CAAA;AAoE5E,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;IACtG,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oFAAoF;IACpF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,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,MAAgB,EAChB,KAAc,EACd,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,WAAkB,EAClB,OAAO,EAAE,QAAQ,EACjB,QAAe,EACf,QAAa,EACb,cAAqB,EACrB,oBAA2B,EAC3B,kBAA8B,EAC9B,KAAc,EACd,GAAG,KAAK,EACT,EAAE,eAAe,qBAsLjB"}
+{"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;AAsN5E,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,qBA2TjB"}