@hanzo/ui 8.27.9 → 8.27.10

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

@@ -0,0 +1,120 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlock = CodeBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * CodeBlock — a bordered panel that shows source code line by line: a header
+ * naming the file and its language with a copy-to-clipboard button, a gutter
+ * of line numbers, and a colored band on any line a caller highlights or marks
+ * as added or removed in a diff.
+ *
+ * A line is plain monospace text, not colorized tokens: the workspace ships no
+ * highlighter. `theme` names a fixed syntax palette — a chosen surface,
+ * independent of the page's own light or dark theme — and `size` picks the
+ * type scale. A line is never wrapped, so the body scrolls on both axes once it
+ * outgrows `maxHeight` or the panel's width.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const badge_1 = require("./badge.cjs");
+const button_1 = require("./button.cjs");
+const slot_1 = require("./slot.cjs");
+/**
+ * One fixed color quartet per theme. `as const satisfies` keeps each hex a
+ * literal type rather than widening it to `string` — gui's style props are
+ * typed against a hex-literal pattern, not against `string` itself, so a
+ * literal reads straight into `bg`/`borderColor`/`color` with no cast.
+ */
+const PALETTE = {
+    dark: { bg: '#020617', border: '#1e293b', fg: '#e2e8f0', muted: '#94a3b8' },
+    light: { bg: '#f8fafc', border: '#e2e8f0', fg: '#0f172a', muted: '#64748b' },
+    github: { bg: '#ffffff', border: '#e2e8f0', fg: '#24292e', muted: '#6e7781' },
+    'github-dark': { bg: '#0d1117', border: '#30363d', fg: '#c9d1d9', muted: '#8b949e' },
+    'vs-dark': { bg: '#1e1e1e', border: '#333333', fg: '#d4d4d4', muted: '#808080' },
+    monokai: { bg: '#272822', border: '#49483e', fg: '#f8f8f2', muted: '#75715e' },
+    dracula: { bg: '#282a36', border: '#44475a', fg: '#f8f8f2', muted: '#6272a4' },
+    nord: { bg: '#2e3440', border: '#4c566a', fg: '#d8dee9', muted: '#81a1c1' },
+};
+const FONT_SIZE = { sm: 12, default: 14, lg: 16 };
+/** The band color per marked line, and the sign a diff line carries in its gutter. */
+const MARK = {
+    highlight: { color: '#3b82f6', sign: undefined },
+    added: { color: '#22c55e', sign: '+' },
+    removed: { color: '#ef4444', sign: '-' },
+};
+/** The color at 10% — its hex with an alpha byte, kept as a literal template type. */
+const band = (hex) => `${hex}1a`;
+const Frame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'CodeBlock',
+    position: 'relative',
+    width: '100%',
+    rounded: '$3',
+    borderWidth: 1,
+    overflow: 'hidden',
+});
+const Header = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'CodeBlockHeader',
+    items: 'center',
+    justify: 'space-between',
+    gap: '$2',
+    px: '$4',
+    py: '$2',
+    borderBottomWidth: 1,
+});
+const Line = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'CodeBlockLine',
+    items: 'center',
+    minH: 24,
+    px: '$4',
+    py: '$0.5',
+    gap: '$2',
+    borderLeftWidth: 2,
+    borderLeftColor: 'transparent',
+    variants: {
+        marker: {
+            highlight: { bg: band(MARK.highlight.color), borderLeftColor: MARK.highlight.color },
+            added: { bg: band(MARK.added.color), borderLeftColor: MARK.added.color },
+            removed: { bg: band(MARK.removed.color), borderLeftColor: MARK.removed.color },
+        },
+    },
+});
+const Mono = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'CodeBlockText',
+    fontFamily: '$mono',
+    whiteSpace: 'pre',
+});
+/** `code` as numbered rows, each with the marker it carries: a diff side first, then a highlight. */
+const rows = (code, highlightLines, diff) => code.split('\n').map((text, i) => {
+    const n = i + 1;
+    const marker = diff?.added?.includes(n)
+        ? 'added'
+        : diff?.removed?.includes(n)
+            ? 'removed'
+            : highlightLines.includes(n)
+                ? 'highlight'
+                : undefined;
+    return { n, text, marker };
+});
+function CodeBlock({ code, language = 'text', filename, theme, size, showLineNumbers = true, highlightLines = [], showCopyButton = true, maxHeight = 400, diff, ...props }) {
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const palette = PALETTE[theme ?? 'dark'];
+    const fontSize = FONT_SIZE[size ?? 'default'];
+    const lineHeight = fontSize * 1.5;
+    const label = copied ? 'Copied' : 'Copy code';
+    const copy = (0, react_1.useCallback)(async () => {
+        try {
+            await navigator.clipboard.writeText(code);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch {
+            // No clipboard permission or no clipboard API — nothing else to do.
+        }
+    }, [code]);
+    return ((0, jsx_runtime_1.jsxs)(Frame, { ...(0, slot_1.slot)('code-block'), style: { backgroundColor: palette.bg, borderColor: palette.border }, ...props, children: [(filename || language || showCopyButton) && ((0, jsx_runtime_1.jsxs)(Header, { ...(0, slot_1.slot)('code-block-header'), style: { borderBottomColor: palette.border }, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", children: [filename && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$1.5", children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.FileText, { size: 14, color: palette.muted }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", fontWeight: "500", style: { color: palette.fg }, children: filename })] })), language && ((0, jsx_runtime_1.jsx)(badge_1.Badge, { ...(0, slot_1.slot)('code-block-language'), variant: "secondary", children: language }))] }), showCopyButton && ((0, jsx_runtime_1.jsx)(button_1.Button, { variant: "ghost", size: "icon-sm", onClick: copy, "aria-label": label, title: label, children: copied ? ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 14, color: MARK.added.color })) : ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.Copy, { size: 14, color: palette.muted })) }))] })), (0, jsx_runtime_1.jsx)(gui_1.YStack, { style: { maxHeight, overflow: 'auto' }, children: (0, jsx_runtime_1.jsx)(gui_1.YStack, { py: "$2", minW: "100%", self: "flex-start", children: rows(code, highlightLines, diff).map(({ n, text, marker }) => {
+                        const mark = marker && MARK[marker];
+                        return ((0, jsx_runtime_1.jsxs)(Line, { marker: marker, "data-slot": "code-block-line", "data-line": n, children: [showLineNumbers && ((0, jsx_runtime_1.jsx)(Mono, { width: 32, text: "right", select: "none", fontSize: FONT_SIZE.sm, lineHeight: lineHeight, style: { color: palette.muted }, children: n })), mark?.sign && ((0, jsx_runtime_1.jsx)(Mono, { select: "none", fontSize: FONT_SIZE.sm, lineHeight: lineHeight, style: { color: mark.color }, children: mark.sign })), (0, jsx_runtime_1.jsx)(Mono, { fontSize: fontSize, lineHeight: lineHeight, style: { color: palette.fg }, children: text || ' ' })] }, n));
+                    }) }) })] }));
+}

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

@@ -0,0 +1,22 @@
+import { type ComponentProps } from 'react';
+export type CodeBlockTheme = 'dark' | 'light' | 'github' | 'github-dark' | 'vs-dark' | 'monokai' | 'dracula' | 'nord';
+export type CodeBlockSize = 'sm' | 'default' | 'lg';
+export interface CodeBlockDiff {
+    added?: number[];
+    removed?: number[];
+}
+export interface CodeBlockProps extends Omit<ComponentProps<'div'>, 'children'> {
+    code: string;
+    language?: string;
+    filename?: string;
+    theme?: CodeBlockTheme | null;
+    size?: CodeBlockSize | null;
+    showLineNumbers?: boolean;
+    highlightLines?: number[];
+    showCopyButton?: boolean;
+    /** The body's ceiling, in px or any CSS length; past it the body scrolls. */
+    maxHeight?: number | string;
+    diff?: CodeBlockDiff;
+}
+export declare function CodeBlock({ code, language, filename, theme, size, showLineNumbers, highlightLines, showCopyButton, maxHeight, diff, ...props }: CodeBlockProps): import("react").JSX.Element;
+//# sourceMappingURL=code-block.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/code-block.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAKlE,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,OAAO,GACP,QAAQ,GACR,aAAa,GACb,SAAS,GACT,SAAS,GACT,SAAS,GACT,MAAM,CAAA;AAEV,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;AAEnD,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;CACnB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7E,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC7B,IAAI,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB;AA2FD,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAiB,EACjB,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,eAAsB,EACtB,cAAmB,EACnB,cAAqB,EACrB,SAAe,EACf,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,+BA+FhB"}

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

@@ -0,0 +1,118 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CodeBlock — a bordered panel that shows source code line by line: a header
+ * naming the file and its language with a copy-to-clipboard button, a gutter
+ * of line numbers, and a colored band on any line a caller highlights or marks
+ * as added or removed in a diff.
+ *
+ * A line is plain monospace text, not colorized tokens: the workspace ships no
+ * highlighter. `theme` names a fixed syntax palette — a chosen surface,
+ * independent of the page's own light or dark theme — and `size` picks the
+ * type scale. A line is never wrapped, so the body scrolls on both axes once it
+ * outgrows `maxHeight` or the panel's width.
+ */
+import { SizableText, XStack, YStack, styled } from '@hanzo/gui';
+import { Check, Copy, FileText } from '@hanzogui/lucide-icons-2';
+import { useCallback, useState } from 'react';
+import { Badge } from './badge.js';
+import { Button } from './button.js';
+import { slot } from './slot.js';
+/**
+ * One fixed color quartet per theme. `as const satisfies` keeps each hex a
+ * literal type rather than widening it to `string` — gui's style props are
+ * typed against a hex-literal pattern, not against `string` itself, so a
+ * literal reads straight into `bg`/`borderColor`/`color` with no cast.
+ */
+const PALETTE = {
+    dark: { bg: '#020617', border: '#1e293b', fg: '#e2e8f0', muted: '#94a3b8' },
+    light: { bg: '#f8fafc', border: '#e2e8f0', fg: '#0f172a', muted: '#64748b' },
+    github: { bg: '#ffffff', border: '#e2e8f0', fg: '#24292e', muted: '#6e7781' },
+    'github-dark': { bg: '#0d1117', border: '#30363d', fg: '#c9d1d9', muted: '#8b949e' },
+    'vs-dark': { bg: '#1e1e1e', border: '#333333', fg: '#d4d4d4', muted: '#808080' },
+    monokai: { bg: '#272822', border: '#49483e', fg: '#f8f8f2', muted: '#75715e' },
+    dracula: { bg: '#282a36', border: '#44475a', fg: '#f8f8f2', muted: '#6272a4' },
+    nord: { bg: '#2e3440', border: '#4c566a', fg: '#d8dee9', muted: '#81a1c1' },
+};
+const FONT_SIZE = { sm: 12, default: 14, lg: 16 };
+/** The band color per marked line, and the sign a diff line carries in its gutter. */
+const MARK = {
+    highlight: { color: '#3b82f6', sign: undefined },
+    added: { color: '#22c55e', sign: '+' },
+    removed: { color: '#ef4444', sign: '-' },
+};
+/** The color at 10% — its hex with an alpha byte, kept as a literal template type. */
+const band = (hex) => `${hex}1a`;
+const Frame = styled(YStack, {
+    name: 'CodeBlock',
+    position: 'relative',
+    width: '100%',
+    rounded: '$3',
+    borderWidth: 1,
+    overflow: 'hidden',
+});
+const Header = styled(XStack, {
+    name: 'CodeBlockHeader',
+    items: 'center',
+    justify: 'space-between',
+    gap: '$2',
+    px: '$4',
+    py: '$2',
+    borderBottomWidth: 1,
+});
+const Line = styled(XStack, {
+    name: 'CodeBlockLine',
+    items: 'center',
+    minH: 24,
+    px: '$4',
+    py: '$0.5',
+    gap: '$2',
+    borderLeftWidth: 2,
+    borderLeftColor: 'transparent',
+    variants: {
+        marker: {
+            highlight: { bg: band(MARK.highlight.color), borderLeftColor: MARK.highlight.color },
+            added: { bg: band(MARK.added.color), borderLeftColor: MARK.added.color },
+            removed: { bg: band(MARK.removed.color), borderLeftColor: MARK.removed.color },
+        },
+    },
+});
+const Mono = styled(SizableText, {
+    name: 'CodeBlockText',
+    fontFamily: '$mono',
+    whiteSpace: 'pre',
+});
+/** `code` as numbered rows, each with the marker it carries: a diff side first, then a highlight. */
+const rows = (code, highlightLines, diff) => code.split('\n').map((text, i) => {
+    const n = i + 1;
+    const marker = diff?.added?.includes(n)
+        ? 'added'
+        : diff?.removed?.includes(n)
+            ? 'removed'
+            : highlightLines.includes(n)
+                ? 'highlight'
+                : undefined;
+    return { n, text, marker };
+});
+export function CodeBlock({ code, language = 'text', filename, theme, size, showLineNumbers = true, highlightLines = [], showCopyButton = true, maxHeight = 400, diff, ...props }) {
+    const [copied, setCopied] = useState(false);
+    const palette = PALETTE[theme ?? 'dark'];
+    const fontSize = FONT_SIZE[size ?? 'default'];
+    const lineHeight = fontSize * 1.5;
+    const label = copied ? 'Copied' : 'Copy code';
+    const copy = useCallback(async () => {
+        try {
+            await navigator.clipboard.writeText(code);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch {
+            // No clipboard permission or no clipboard API — nothing else to do.
+        }
+    }, [code]);
+    return (_jsxs(Frame, { ...slot('code-block'), style: { backgroundColor: palette.bg, borderColor: palette.border }, ...props, children: [(filename || language || showCopyButton) && (_jsxs(Header, { ...slot('code-block-header'), style: { borderBottomColor: palette.border }, children: [_jsxs(XStack, { items: "center", gap: "$2", children: [filename && (_jsxs(XStack, { items: "center", gap: "$1.5", children: [_jsx(FileText, { size: 14, color: palette.muted }), _jsx(SizableText, { size: "$2", fontWeight: "500", style: { color: palette.fg }, children: filename })] })), language && (_jsx(Badge, { ...slot('code-block-language'), variant: "secondary", children: language }))] }), showCopyButton && (_jsx(Button, { variant: "ghost", size: "icon-sm", onClick: copy, "aria-label": label, title: label, children: copied ? (_jsx(Check, { size: 14, color: MARK.added.color })) : (_jsx(Copy, { size: 14, color: palette.muted })) }))] })), _jsx(YStack, { style: { maxHeight, overflow: 'auto' }, children: _jsx(YStack, { py: "$2", minW: "100%", self: "flex-start", children: rows(code, highlightLines, diff).map(({ n, text, marker }) => {
+                        const mark = marker && MARK[marker];
+                        return (_jsxs(Line, { marker: marker, "data-slot": "code-block-line", "data-line": n, children: [showLineNumbers && (_jsx(Mono, { width: 32, text: "right", select: "none", fontSize: FONT_SIZE.sm, lineHeight: lineHeight, style: { color: palette.muted }, children: n })), mark?.sign && (_jsx(Mono, { select: "none", fontSize: FONT_SIZE.sm, lineHeight: lineHeight, style: { color: mark.color }, children: mark.sign })), _jsx(Mono, { fontSize: fontSize, lineHeight: lineHeight, style: { color: palette.fg }, children: text || ' ' })] }, n));
+                    }) }) })] }));
+}
+//# sourceMappingURL=code-block.js.map

package/dist/backends/gui/code-block.js.map

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

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

@@ -0,0 +1,195 @@
+'use client';"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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.
+ *
+ * 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.
+ *
+ * `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.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const React = __importStar(require("react"));
+const button_1 = require("./button.cjs");
+const control_1 = require("./control.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 LABEL = {
+    javascript: 'JavaScript',
+    typescript: 'TypeScript',
+    python: 'Python',
+    java: 'Java',
+    csharp: 'C#',
+    cpp: 'C++',
+    c: 'C',
+    go: 'Go',
+    rust: 'Rust',
+    ruby: 'Ruby',
+    php: 'PHP',
+    swift: 'Swift',
+    kotlin: 'Kotlin',
+    dart: 'Dart',
+    html: 'HTML',
+    css: 'CSS',
+    scss: 'SCSS',
+    json: 'JSON',
+    xml: 'XML',
+    yaml: 'YAML',
+    sql: 'SQL',
+    markdown: 'Markdown',
+    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, ...props }) {
+    const [typed, setTyped] = React.useState(defaultValue);
+    const text = value ?? typed;
+    const [selected, setSelected] = React.useState(language);
+    const [copied, setCopied] = React.useState(false);
+    const [scrollTop, setScrollTop] = React.useState(0);
+    const field = React.useRef(null);
+    const timer = React.useRef(undefined);
+    React.useEffect(() => {
+        if (field.current)
+            onMount?.(field.current);
+        return () => clearTimeout(timer.current);
+    }, []);
+    // 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)
+            return;
+        const onScroll = () => setScrollTop(el.scrollTop);
+        el.addEventListener('scroll', onScroll);
+        return () => el.removeEventListener('scroll', onScroll);
+    }, []);
+    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)
+            return;
+        e.preventDefault();
+        el.setRangeText(INDENT, el.selectionStart ?? 0, el.selectionEnd ?? 0, 'end');
+        change(el.value);
+    };
+    const copy = React.useCallback(async () => {
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(true);
+            clearTimeout(timer.current);
+            timer.current = setTimeout(() => setCopied(false), 2000);
+            toaster_1.toast.success('Code copied to clipboard');
+        }
+        catch {
+            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'), 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 }),
+                        } })] })] }));
+}

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

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ *
+ * 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.
+ *
+ * `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.
+ */
+import { type YStackProps } from '@hanzo/gui';
+import * as React from 'react';
+export type CodeEditorTheme = 'light' | 'dark' | 'auto';
+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. */
+    value?: string;
+    defaultValue?: string;
+    language?: string;
+    /** The height of the field; the toolbar sits above it, unsized. */
+    height?: string | number;
+    theme?: CodeEditorTheme;
+    onChange?: (value: string) => void;
+    /** Called once, after mount, with the field's `<textarea>`. */
+    onMount?: (element: HTMLTextAreaElement) => 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;
+    showCopyButton?: boolean;
+    showLanguageSelector?: boolean;
+    availableLanguages?: readonly string[];
+}
+export declare function CodeEditor({ value, defaultValue, language, height, theme, onChange, onMount, readOnly, lineNumbers, minimap: _minimap, wordWrap, fontSize, showCopyButton, showLanguageSelector, availableLanguages, ...props }: CodeEditorProps): React.JSX.Element;
+//# sourceMappingURL=code-editor.d.ts.map

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

@@ -0,0 +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;CACvC;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,GAAG,KAAK,EACT,EAAE,eAAe,qBAqLjB"}