@hanzo/ui 8.29.45 → 8.30.3

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

@@ -72,50 +72,27 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * move into it, so an editor has one bar. A `title` or `actions` alone implies
  * `with-header`. `autoHeight` lets the editor follow its text with no ceiling.
  */
-const gui_1 = require("@hanzo/gui");
-const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const React = __importStar(require("react"));
 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 gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
 const highlight_1 = require("@lezer/highlight");
-const React = __importStar(require("react"));
+const i18n_1 = require("@hanzo/i18n");
+const react_1 = require("@hanzo/i18n/react");
 const code_theme_1 = require("../../code-theme.cjs");
 const button_1 = require("./button.cjs");
-const grip_1 = require("./grip.cjs");
 const dir_1 = require("./dir.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");
 const toaster_1 = require("./toaster.cjs");
 /** The languages the menu offers when a caller does not narrow the list. */
-const LANGUAGES = [
-    'javascript',
-    'typescript',
-    'python',
-    'java',
-    'csharp',
-    'cpp',
-    'c',
-    'go',
-    'rust',
-    'ruby',
-    'php',
-    'swift',
-    'kotlin',
-    'dart',
-    'html',
-    'css',
-    'scss',
-    'json',
-    'xml',
-    'yaml',
-    'sql',
-    'markdown',
-    'shell',
-    'plaintext',
-];
+const LANGUAGES = ['javascript', 'typescript', 'python', 'java', 'csharp', 'cpp', 'c', 'go', 'rust', 'ruby', 'php', 'swift', 'kotlin', 'dart', 'html', 'css', 'scss', 'json', 'xml', 'yaml', 'sql', 'markdown', 'shell', 'plaintext'];
 const LABEL = {
     javascript: 'JavaScript',
     typescript: 'TypeScript',
@@ -140,7 +117,7 @@ const LABEL = {
     sql: 'SQL',
     markdown: 'Markdown',
     shell: 'Shell',
-    plaintext: 'Plain Text',
+    plaintext: (0, i18n_1.phrase)('Plain Text'),
 };
 /** The tallest a drag makes the editor, px: a ceiling that is not one. */
 const CEILING = 4096;
@@ -182,9 +159,15 @@ const FRAME = /* @__PURE__ */ view_1.EditorView.theme({
         border: 'none',
         borderInlineEnd: '1px solid var(--edge)',
     },
-    '.cm-lineNumbers .cm-gutterElement': { padding: '0 10px 0 12px', minWidth: '28px' },
+    '.cm-lineNumbers .cm-gutterElement': {
+        padding: '0 10px 0 12px',
+        minWidth: '28px',
+    },
     '.cm-activeLine': { backgroundColor: 'var(--panel)' },
-    '.cm-activeLineGutter': { backgroundColor: 'transparent', color: 'var(--quiet)' },
+    '.cm-activeLineGutter': {
+        backgroundColor: 'transparent',
+        color: 'var(--quiet)',
+    },
     '.cm-cursor, .cm-dropCursor': { borderInlineStartColor: 'var(--ink)' },
     '.cm-selectionBackground, &.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, ::selection': {
         backgroundColor: 'var(--raised)',
@@ -194,9 +177,15 @@ const FRAME = /* @__PURE__ */ view_1.EditorView.theme({
         color: 'inherit',
         outline: 'none',
     },
-    '.cm-nonmatchingBracket, &.cm-focused .cm-nonmatchingBracket': { backgroundColor: 'transparent' },
+    '.cm-nonmatchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+        backgroundColor: 'transparent',
+    },
     '.cm-placeholder': { color: 'var(--codeDim)' },
-    '.cm-foldGutter .cm-gutterElement': { padding: '0 4px', color: 'var(--codeDim)', cursor: 'pointer' },
+    '.cm-foldGutter .cm-gutterElement': {
+        padding: '0 4px',
+        color: 'var(--codeDim)',
+        cursor: 'pointer',
+    },
     '.cm-foldGutter .cm-gutterElement:hover': { color: 'var(--ink)' },
     '.cm-foldPlaceholder': {
         backgroundColor: 'var(--raised)',
@@ -208,7 +197,9 @@ const FRAME = /* @__PURE__ */ view_1.EditorView.theme({
         cursor: 'pointer',
     },
     '.cm-foldCount': { color: 'var(--codeComment)' },
-    '.cm-fault': { backgroundColor: 'var(--state-error-bg, rgb(239 68 68 / .1))' },
+    '.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)',
@@ -217,7 +208,10 @@ const FRAME = /* @__PURE__ */ view_1.EditorView.theme({
     },
 });
 /** One kind of token in the code theme: its theme key, and its slant or weight (`face`). */
-const paint = (token) => ({ color: `var(--code${token[0].toUpperCase()}${token.slice(1)})`, ...code_theme_1.face[token] });
+const paint = (token) => ({
+    color: `var(--code${token[0].toUpperCase()}${token.slice(1)})`,
+    ...code_theme_1.face[token],
+});
 /** The syntax in the code theme: one theme key per kind of token, from `code-theme.ts`. */
 const SYNTAX = /* @__PURE__ */ language_1.HighlightStyle.define([
     { tag: highlight_1.tags.propertyName, ...paint('key') },
@@ -225,7 +219,10 @@ const SYNTAX = /* @__PURE__ */ language_1.HighlightStyle.define([
     { tag: highlight_1.tags.number, ...paint('number') },
     { tag: highlight_1.tags.bool, ...paint('boolean') },
     { tag: highlight_1.tags.null, ...paint('null') },
-    { tag: [highlight_1.tags.punctuation, highlight_1.tags.separator, highlight_1.tags.brace, highlight_1.tags.squareBracket], ...paint('punctuation') },
+    {
+        tag: [highlight_1.tags.punctuation, highlight_1.tags.separator, highlight_1.tags.brace, highlight_1.tags.squareBracket],
+        ...paint('punctuation'),
+    },
     { tag: highlight_1.tags.comment, ...paint('comment') },
     { tag: highlight_1.tags.keyword, ...paint('keyword') },
 ]);
@@ -235,29 +232,35 @@ const SYNTAX = /* @__PURE__ */ language_1.HighlightStyle.define([
  * 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 }) })],
+    props: [
+        language_1.foldNodeProp.add({
+            'Object Array': (node) => ({ from: node.from, to: node.to }),
+        }),
+    ],
 }));
-const words = (n, one) => `${n} ${one}${n === 1 ? '' : 's'}`;
+const keys = (t, n) => (n === 1 ? t('1 key') : t('{n} keys', { n }));
+const items = (t, n) => (n === 1 ? t('1 item') : t('{n} items', { n }));
 /** What a folded range holds: its brackets and how many keys or items sit inside. */
-function measureFold(state, range) {
+function measureFold(state, range, t) {
     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') };
+        return { open: '{', close: '}', count: keys(t, node.getChildren('Property').length) };
     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') };
+    return { open: '[', close: ']', count: items(t, n) };
 }
-const FOLDING = /* @__PURE__ */ (0, language_1.codeFolding)({
-    preparePlaceholder: measureFold,
+/** Folding, its placeholder worded in the reader's language. */
+const folding = (t) => (0, language_1.codeFolding)({
+    preparePlaceholder: (state, range) => measureFold(state, range, t),
     placeholderDOM: (_view, onclick, fold) => {
         const el = document.createElement('span');
         el.className = 'cm-foldPlaceholder';
-        el.title = 'Unfold';
-        el.setAttribute('aria-label', `Folded, ${fold.count}`);
+        el.title = t('Unfold');
+        el.setAttribute('aria-label', t('Folded, {count}', { count: fold.count }));
         el.textContent = `${fold.open}…${fold.close}`;
         const count = document.createElement('span');
         count.className = 'cm-foldCount';
@@ -286,7 +289,11 @@ const hangs = new Map();
 const hangFor = (n) => {
     let d = hangs.get(n);
     if (!d) {
-        d = view_1.Decoration.line({ attributes: { style: `padding-inline-start: calc(${n}ch + 12px); text-indent: -${n}ch` } });
+        d = view_1.Decoration.line({
+            attributes: {
+                style: `padding-inline-start: calc(${n}ch + 12px); text-indent: -${n}ch`,
+            },
+        });
         hangs.set(n, d);
     }
     return d;
@@ -334,19 +341,23 @@ function judge(state, text) {
     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)]) };
+    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),
-    ],
+    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', variant, title, actions, autoHeight = false, ...props }) {
+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, variant, title, actions, autoHeight = false, ...props }) {
+    const { t } = (0, react_1.useI18n)();
+    const name = label ?? t('Code');
+    const fold = React.useMemo(() => folding(t), [t]);
     const frame = variant ?? (title !== undefined || actions !== undefined ? 'with-header' : 'default');
     const headed = frame === 'with-header';
     const [selected, setSelected] = React.useState(language);
@@ -362,12 +373,19 @@ function CodeEditor({ value, defaultValue = '', language = 'javascript', height,
     const timer = React.useRef(undefined);
     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 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 });
+    const judged = React.useRef({
+        field,
+    });
     judged.current.field = field;
-    const grammar = () => (isJson ? [JSON_GRAMMAR, field, FOLDING, (0, language_1.foldGutter)()] : []);
+    const grammar = () => (isJson ? [JSON_GRAMMAR, field, fold, (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)];
@@ -436,7 +454,7 @@ function CodeEditor({ value, defaultValue = '', language = 'javascript', height,
                     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' }),
+                    view_1.EditorView.contentAttributes.of({ 'aria-label': name, 'data-slot': 'code-editor-content' }),
                     FRAME,
                     listen,
                 ],
@@ -455,14 +473,9 @@ function CodeEditor({ value, defaultValue = '', language = 'javascript', height,
     // 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()),
-            ],
+            effects: [compartments.language.reconfigure(grammar()), compartments.gutter.reconfigure(gutter()), compartments.wrap.reconfigure(wrap()), compartments.edit.reconfigure(edit())],
         });
-    }, [isJson, field, lineNumbers, wordWrap, readOnly]);
+    }, [isJson, field, fold, lineNumbers, wordWrap, readOnly]);
     // A controlled value that moved out from under the editor replaces the text. A
     // value the editor itself reported is an echo, however late it arrives: a parent
     // that renders one keystroke behind hands back the text before the last key, and
@@ -480,7 +493,10 @@ function CodeEditor({ value, defaultValue = '', language = 'javascript', height,
         const current = v.state.doc.toString();
         if (value === current)
             return;
-        v.dispatch({ changes: { from: 0, to: current.length, insert: value }, annotations: External.of(true) });
+        v.dispatch({
+            changes: { from: 0, to: current.length, insert: value },
+            annotations: External.of(true),
+        });
         setText(value);
     }, [value]);
     React.useEffect(() => {
@@ -500,33 +516,34 @@ function CodeEditor({ value, defaultValue = '', language = 'javascript', height,
             setCopied(true);
             clearTimeout(timer.current);
             timer.current = setTimeout(() => setCopied(false), 2000);
-            toaster_1.toast.success('Code copied to clipboard');
+            toaster_1.toast.success(t('Code copied to clipboard'));
         }
         catch {
-            toaster_1.toast.error('Failed to copy code');
+            toaster_1.toast.error(t('Failed to copy code'));
         }
-    }, [text]);
+    }, [text, t]);
     // 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 = headed || showLanguageSelector || showCopyButton || formattable;
     const footer = isJson && check !== null;
-    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('code-editor'), "data-variant": frame, borderWidth: frame === 'borderless' ? 0 : 1, borderColor: "$borderColor", rounded: frame === 'borderless' ? 0 : '$3', overflow: "hidden", bg: "$background", focusWithinStyle: frame === 'borderless' ? undefined : { borderColor: '$outlineColor' }, ...props, children: [toolbar && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)(headed ? 'code-editor-header' : 'code-editor-toolbar'), items: "center", justify: "space-between", flexWrap: "wrap", gap: "$2", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$panel", px: "$2", py: headed ? 0 : '$1', ...(headed ? { minH: 40 } : null), children: [headed ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('code-editor-title'), size: "$2", fontWeight: "500", color: "$hint", px: "$1", numberOfLines: 1, flex: 1, minW: 0, children: title ?? label })) : null, 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: headed ? '$2' : '$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'] })), actions] })] })), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { position: "relative", ...(fills && { flex: 1, minH: 0 }), children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { ref: host, ...(0, slot_1.slot)('code-editor-body'), ...dir_1.ltr, ...(fills && { flex: 1, minH: 0 }) }), resizable && ((0, jsx_runtime_1.jsx)(grip_1.Grip, { side: "top", span: dragged ?? minHeight, floor: minHeight, ceil: CEILING, onSpan: setDragged, onReset: () => setDragged(null), label: `Resize ${label}`, 
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('code-editor'), "data-variant": frame, borderWidth: frame === 'borderless' ? 0 : 1, borderColor: "$borderColor", rounded: frame === 'borderless' ? 0 : '$3', overflow: "hidden", bg: "$background", focusWithinStyle: frame === 'borderless' ? undefined : { borderColor: '$outlineColor' }, ...props, children: [toolbar && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)(headed ? 'code-editor-header' : 'code-editor-toolbar'), items: "center", justify: "space-between", flexWrap: "wrap", gap: "$2", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$panel", px: "$2", py: headed ? 0 : '$1', ...(headed ? { minH: 40 } : null), children: [headed ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('code-editor-title'), size: "$2", fontWeight: "500", color: "$hint", px: "$1", numberOfLines: 1, flex: 1, minW: 0, children: title ?? name })) : null, 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] ? t(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] ? t(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] ? t(LABEL[selected]) : selected })), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "flex-end", flexWrap: "wrap", gap: headed ? '$2' : '$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 }), t('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 ? t('Copied!') : t('Copy')] })), actions] })] })), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { position: "relative", ...(fills && { flex: 1, minH: 0 }), children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { ref: host, ...(0, slot_1.slot)('code-editor-body'), ...dir_1.ltr, ...(fills && { flex: 1, minH: 0 }) }), resizable && ((0, jsx_runtime_1.jsx)(grip_1.Grip, { side: "top", span: dragged ?? minHeight, floor: minHeight, ceil: CEILING, onSpan: setDragged, onReset: () => setDragged(null), label: t('Resize {label}', { label: name }), 
                         // Astride the editor's bottom edge, so it takes no line from the text.
                         b: -BAND_HALF }))] }), footer && ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('code-editor-footer'), items: "center", justify: "space-between", gap: "$2", minH: 28, px: "$3", py: "$1", borderTopWidth: 1, borderColor: "$borderColor", bg: "$panel", children: (0, jsx_runtime_1.jsx)(Status, { check: check }) }))] }));
 }
 /** The footer's JSON verdict, announced politely when it changes. */
 function Status({ check }) {
+    const { t } = (0, react_1.useI18n)();
     const bad = check?.kind === 'error';
     const words = check === null
         ? ''
         : check.kind === 'error'
-            ? `Line ${check.line}, column ${check.column}: ${check.message}`
+            ? t('Line {line}, column {column}: {message}', { line: check.line, column: check.column, message: check.message })
             : check.kind === 'text'
-                ? 'Plain text'
+                ? t('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 })] }));
+                    ? t('Empty')
+                    : t('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

@@ -34,9 +34,9 @@
  * move into it, so an editor has one bar. A `title` or `actions` alone implies
  * `with-header`. `autoHeight` lets the editor follow its text with no ceiling.
  */
-import { type YStackProps } from '@hanzo/gui';
-import { EditorView } from '@codemirror/view';
 import * as React from 'react';
+import { EditorView } from '@codemirror/view';
+import { type YStackProps } from '@hanzo/gui';
 import { type JsonCheck } from './json.js';
 export type CodeEditorWordWrap = 'on' | 'off' | 'wordWrapColumn' | 'bounded';
 export interface CodeEditorProps extends Omit<YStackProps, 'children' | 'height' | 'minHeight' | 'maxHeight' | 'onChange'> {

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;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;AAM9B,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAK9D,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,KAAK,GAAG,gBAAgB,GAAG,SAAS,CAAA;AAsR5E,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,4FAA4F;IAC5F,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;IACd,yFAAyF;IACzF,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,CAAA;IAClD,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;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,OAAO,EACP,KAAK,EACL,OAAO,EACP,UAAkB,EAClB,GAAG,KAAK,EACT,EAAE,eAAe,qBAuSjB"}
+{"version":3,"file":"code-editor.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/code-editor.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAA6B,UAAU,EAAyL,MAAM,kBAAkB,CAAA;AAC/P,OAAO,EAA+B,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAU1E,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAK9D,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,KAAK,GAAG,gBAAgB,GAAG,SAAS,CAAA;AAgS5E,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,GAAG,UAAU,CAAC;IACxH,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,4FAA4F;IAC5F,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;IACd,yFAAyF;IACzF,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,CAAA;IAClD,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;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,KAAK,EACL,OAAO,EACP,KAAK,EACL,OAAO,EACP,UAAkB,EAClB,GAAG,KAAK,EACT,EAAE,eAAe,qBA0PjB"}