@viax.io/uxm 4.36.0

package/dist/ui/code-editor/code-editor-preview.js

@@ -0,0 +1,76 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { CodeBlock, CodeEditor } from "../../ui/index.js";
+const SAMPLE = `query OrdersByAccount($account: ID!) {
+  orders(where: { accountId: { eq: $account } }) {
+    id
+    status
+    total { amount currency }
+  }
+}`;
+const SAMPLE_RESULT = `{
+  "data": {
+    "orders": [
+      { "id": "ord_8842", "status": "OPEN" }
+    ]
+  }
+}`;
+function buildVars(styles) {
+  return {
+    "--uxm-code-editor-bg": styles.backgroundColor,
+    "--uxm-code-editor-border-color": styles.borderColor,
+    "--uxm-code-editor-color": styles.color,
+    "--uxm-code-editor-border-radius": `${styles.borderRadius}px`,
+    "--uxm-code-editor-padding-x": `${styles.paddingX}px`,
+    "--uxm-code-editor-padding-y": `${styles.paddingY}px`,
+    "--uxm-code-editor-font-size": `${styles.fontSize}px`,
+    "--uxm-code-editor-line-height": styles.lineHeight != null ? String(styles.lineHeight) : void 0,
+    "--uxm-code-editor-min-height": `${styles.minHeight}px`,
+    "--uxm-code-editor-gutter-color": styles.gutterColor,
+    "--uxm-code-editor-gutter-bg": styles.gutterBg,
+    "--uxm-code-editor-gutter-border": styles.gutterBorder,
+    "--uxm-code-editor-gutter-gap": `${styles.gutterGap}px`,
+    "--uxm-code-editor-hover-border": styles.hoverBorder,
+    "--uxm-code-editor-focus-border": styles.focusBorder,
+    "--uxm-code-editor-focus-ring": styles.focusRing,
+    "--uxm-code-editor-disabled-bg": styles.disabledBg,
+    "--uxm-code-editor-disabled-border": styles.disabledBorder,
+    "--uxm-code-editor-disabled-color": styles.disabledColor,
+    "--uxm-code-editor-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-code-editor-error-border": styles.errorBorder,
+    "--uxm-code-editor-error-color": styles.errorColor,
+    "--uxm-code-editor-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : void 0
+  };
+}
+function CodeEditorPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  return /* @__PURE__ */ jsx(CodeEditorDemo, { state, styles }, state);
+}
+function CodeEditorDemo({ state, styles }) {
+  const isError = state === "error";
+  const [code, setCode] = useState(isError ? `${SAMPLE.slice(0, 62)}
+` : SAMPLE);
+  return /* @__PURE__ */ jsxs("div", { style: { width: 460, ...buildVars(styles) }, children: [
+    /* @__PURE__ */ jsx(
+      CodeEditor,
+      {
+        value: code,
+        onChange: (e) => setCode(e.target.value),
+        lineNumbers: true,
+        disabled: state === "disabled",
+        error: isError ? 'Syntax error on line 2: expected "}".' : void 0,
+        className: cn(
+          state === "hover" && "uxm-code-editor--state-hover",
+          state === "focus" && "uxm-code-editor--state-focus"
+        ) || void 0,
+        "aria-label": "GraphQL query"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsx(CodeBlock, { lineNumbers: true, children: SAMPLE_RESULT }) })
+  ] });
+}
+export {
+  CodeEditorPreview
+};
+//# sourceMappingURL=code-editor-preview.js.map

package/dist/ui/code-editor/code-editor-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/code-editor/code-editor-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { CodeBlock, CodeEditor } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nconst SAMPLE = `query OrdersByAccount($account: ID!) {\n  orders(where: { accountId: { eq: $account } }) {\n    id\n    status\n    total { amount currency }\n  }\n}`;\n\nconst SAMPLE_RESULT = `{\n  \"data\": {\n    \"orders\": [\n      { \"id\": \"ord_8842\", \"status\": \"OPEN\" }\n    ]\n  }\n}`;\n\n/**\n * Project the knobs onto the wrapper. The cascade has to start ABOVE the\n * atom's root, not on it — the gutter, the textarea and the CodeBlock all\n * read the same `--uxm-code-editor-*` vars, and the alignment between the\n * gutter and the code only holds while they resolve to the same values.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-code-editor-bg': styles.backgroundColor as string,\n    '--uxm-code-editor-border-color': styles.borderColor as string,\n    '--uxm-code-editor-color': styles.color as string,\n    '--uxm-code-editor-border-radius': `${styles.borderRadius}px`,\n    '--uxm-code-editor-padding-x': `${styles.paddingX}px`,\n    '--uxm-code-editor-padding-y': `${styles.paddingY}px`,\n    '--uxm-code-editor-font-size': `${styles.fontSize}px`,\n    '--uxm-code-editor-line-height':\n      styles.lineHeight != null ? String(styles.lineHeight) : undefined,\n    '--uxm-code-editor-min-height': `${styles.minHeight}px`,\n    '--uxm-code-editor-gutter-color': styles.gutterColor as string,\n    '--uxm-code-editor-gutter-bg': styles.gutterBg as string,\n    '--uxm-code-editor-gutter-border': styles.gutterBorder as string,\n    '--uxm-code-editor-gutter-gap': `${styles.gutterGap}px`,\n    '--uxm-code-editor-hover-border': styles.hoverBorder as string,\n    '--uxm-code-editor-focus-border': styles.focusBorder as string,\n    '--uxm-code-editor-focus-ring': styles.focusRing as string,\n    '--uxm-code-editor-disabled-bg': styles.disabledBg as string,\n    '--uxm-code-editor-disabled-border': styles.disabledBorder as string,\n    '--uxm-code-editor-disabled-color': styles.disabledColor as string,\n    '--uxm-code-editor-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-code-editor-error-border': styles.errorBorder as string,\n    '--uxm-code-editor-error-color': styles.errorColor as string,\n    '--uxm-code-editor-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n  } as CSSProperties;\n}\n\nexport function CodeEditorPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  // Keyed by state so the State knob remounts the demo and `useState`\n  // re-seeds — no effect needed to sync.\n  return <CodeEditorDemo key={state} state={state} styles={styles} />;\n}\n\nfunction CodeEditorDemo({ state, styles }: { state: string; styles: Styles }) {\n  const isError = state === 'error';\n  const [code, setCode] = useState(isError ? `${SAMPLE.slice(0, 62)}\\n` : SAMPLE);\n\n  return (\n    <div style={{ width: 460, ...buildVars(styles) } as CSSProperties}>\n      <CodeEditor\n        value={code}\n        onChange={(e) => setCode(e.target.value)}\n        lineNumbers\n        disabled={state === 'disabled'}\n        error={isError ? 'Syntax error on line 2: expected \"}\".' : undefined}\n        className={\n          cn(\n            state === 'hover' && 'uxm-code-editor--state-hover',\n            state === 'focus' && 'uxm-code-editor--state-focus',\n          ) || undefined\n        }\n        aria-label=\"GraphQL query\"\n      />\n      {/* The read-only half, under the same knobs. CodeBlock has no registry\n          entry of its own on purpose — it IS this surface, so it renders here\n          to prove a knob change reaches both. An output panel that drifted\n          from the query above it would be the bug. */}\n      <div style={{ marginTop: 12 }}>\n        <CodeBlock lineNumbers>{SAMPLE_RESULT}</CodeBlock>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAiES,cAQL,YARK;AAjET,SAAS,gBAAoC;AAE7C,SAAS,UAAU;AAEnB,SAAS,WAAW,kBAAkB;AAItC,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQf,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AActB,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,wBAAwB,OAAO;AAAA,IAC/B,kCAAkC,OAAO;AAAA,IACzC,2BAA2B,OAAO;AAAA,IAClC,mCAAmC,GAAG,OAAO,YAAY;AAAA,IACzD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,iCACE,OAAO,cAAc,OAAO,OAAO,OAAO,UAAU,IAAI;AAAA,IAC1D,gCAAgC,GAAG,OAAO,SAAS;AAAA,IACnD,kCAAkC,OAAO;AAAA,IACzC,+BAA+B,OAAO;AAAA,IACtC,mCAAmC,OAAO;AAAA,IAC1C,gCAAgC,GAAG,OAAO,SAAS;AAAA,IACnD,kCAAkC,OAAO;AAAA,IACzC,kCAAkC,OAAO;AAAA,IACzC,gCAAgC,OAAO;AAAA,IACvC,iCAAiC,OAAO;AAAA,IACxC,qCAAqC,OAAO;AAAA,IAC5C,oCAAoC,OAAO;AAAA,IAC3C,sCACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,kCAAkC,OAAO;AAAA,IACzC,iCAAiC,OAAO;AAAA,IACxC,wCACE,OAAO,oBAAoB,OAAO,GAAG,OAAO,gBAAgB,OAAO;AAAA,EACvE;AACF;AAEO,SAAS,kBAAkB,EAAE,QAAQ,SAAS,GAAiB;AACpE,QAAM,QAAS,SAAS,SAAoB;AAG5C,SAAO,oBAAC,kBAA2B,OAAc,UAArB,KAAqC;AACnE;AAEA,SAAS,eAAe,EAAE,OAAO,OAAO,GAAsC;AAC5E,QAAM,UAAU,UAAU;AAC1B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,UAAU,GAAG,OAAO,MAAM,GAAG,EAAE,CAAC;AAAA,IAAO,MAAM;AAE9E,SACE,qBAAC,SAAI,OAAO,EAAE,OAAO,KAAK,GAAG,UAAU,MAAM,EAAE,GAC7C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK;AAAA,QACvC,aAAW;AAAA,QACX,UAAU,UAAU;AAAA,QACpB,OAAO,UAAU,0CAA0C;AAAA,QAC3D,WACE;AAAA,UACE,UAAU,WAAW;AAAA,UACrB,UAAU,WAAW;AAAA,QACvB,KAAK;AAAA,QAEP,cAAW;AAAA;AAAA,IACb;AAAA,IAKA,oBAAC,SAAI,OAAO,EAAE,WAAW,GAAG,GAC1B,8BAAC,aAAU,aAAW,MAAE,yBAAc,GACxC;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/code-editor/code-editor.cjs

@@ -0,0 +1,309 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var code_editor_exports = {};
+__export(code_editor_exports, {
+  CodeBlock: () => CodeBlock,
+  CodeEditor: () => CodeEditor
+});
+module.exports = __toCommonJS(code_editor_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_field_error = require("../field-error/index.cjs");
+function lineStart(text, pos) {
+  return text.lastIndexOf("\n", pos - 1) + 1;
+}
+function lineEnd(text, pos) {
+  const next = text.indexOf("\n", pos);
+  return next === -1 ? text.length : next;
+}
+function reindent(block, unit, outdent) {
+  const outdentRe = new RegExp(`^(?:\\t| {1,${unit.length}})`);
+  const lines = block.split("\n");
+  let firstDelta = 0;
+  let totalDelta = 0;
+  const next = lines.map((line, i) => {
+    if (!outdent && line.length === 0) return line;
+    const match = outdent ? outdentRe.exec(line) : null;
+    const delta = outdent ? -(match?.[0].length ?? 0) : unit.length;
+    if (i === 0) firstDelta = delta;
+    totalDelta += delta;
+    return outdent ? line.slice(-delta) : unit + line;
+  });
+  return { text: next.join("\n"), firstDelta, totalDelta };
+}
+function replaceRange(el, from, to, text, selStart, selEnd) {
+  el.focus();
+  el.setSelectionRange(from, to);
+  let inserted = false;
+  try {
+    inserted = document.execCommand("insertText", false, text);
+  } catch {
+    inserted = false;
+  }
+  if (!inserted) {
+    const setValue = Object.getOwnPropertyDescriptor(
+      HTMLTextAreaElement.prototype,
+      "value"
+    )?.set;
+    const next = el.value.slice(0, from) + text + el.value.slice(to);
+    setValue?.call(el, next);
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+  el.setSelectionRange(selStart, selEnd);
+}
+function useGutterSync(scrollerRef) {
+  const linesRef = (0, import_react.useRef)(null);
+  const syncGutter = (0, import_react.useCallback)((el) => {
+    const lines = linesRef.current;
+    if (!lines) return;
+    const next = `translateY(${-el.scrollTop}px)`;
+    if (lines.style.transform !== next) lines.style.transform = next;
+  }, []);
+  (0, import_react.useLayoutEffect)(() => {
+    if (scrollerRef.current) syncGutter(scrollerRef.current);
+  });
+  return { linesRef, syncGutter };
+}
+function gutterWidth(count) {
+  return `${Math.max(2, String(Math.max(count, 1)).length)}ch`;
+}
+function CodeEditor({
+  className,
+  style,
+  value,
+  defaultValue,
+  onChange,
+  onKeyDown,
+  onScroll,
+  onBlur,
+  indentSize = 2,
+  indentWithTab = true,
+  autoIndent = true,
+  lineNumbers = false,
+  wrap = false,
+  error,
+  disabled,
+  readOnly,
+  textareaRef,
+  spellCheck = false,
+  ...rest
+}) {
+  const errorId = (0, import_react.useId)();
+  const innerRef = (0, import_react.useRef)(null);
+  const { linesRef, syncGutter } = useGutterSync(innerRef);
+  const tabEscapedRef = (0, import_react.useRef)(false);
+  const isControlled = value !== void 0;
+  const unit = " ".repeat(Math.max(1, indentSize));
+  const gutterWouldLie = lineNumbers && wrap;
+  if (gutterWouldLie) {
+    console.warn(
+      "[CodeEditor] `lineNumbers` is ignored while `wrap` is set: wrapped lines occupy several rows each, so the numbers cannot line up with the code. Turn off `wrap` to show the gutter."
+    );
+  }
+  const showGutter = lineNumbers && !wrap;
+  const [uncontrolledText, setUncontrolledText] = (0, import_react.useState)(() => defaultValue ?? "");
+  const sourceText = isControlled ? value ?? "" : uncontrolledText;
+  const lineCount = (0, import_react.useMemo)(
+    () => showGutter ? sourceText.split("\n").length : 0,
+    [showGutter, sourceText]
+  );
+  const handleChange = (e) => {
+    if (!isControlled) setUncontrolledText(e.target.value);
+    onChange?.(e);
+  };
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    const el = e.currentTarget;
+    if (readOnly || disabled) return;
+    if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+    if (e.key === "Escape") {
+      tabEscapedRef.current = true;
+      return;
+    }
+    if (e.key === "Tab") {
+      if (!indentWithTab || tabEscapedRef.current || e.altKey || e.ctrlKey || e.metaKey) {
+        tabEscapedRef.current = false;
+        return;
+      }
+      e.preventDefault();
+      const text = el.value;
+      const start = el.selectionStart;
+      const end = el.selectionEnd;
+      if (start === end && !e.shiftKey) {
+        replaceRange(el, start, end, unit, start + unit.length, start + unit.length);
+        return;
+      }
+      const from = lineStart(text, start);
+      const lastTouched = end > start && end === lineStart(text, end) ? end - 1 : end;
+      const to = lineEnd(text, lastTouched);
+      const { text: block, firstDelta, totalDelta } = reindent(
+        text.slice(from, to),
+        unit,
+        e.shiftKey
+      );
+      replaceRange(
+        el,
+        from,
+        to,
+        block,
+        Math.max(from, start + firstDelta),
+        Math.max(from, end + totalDelta)
+      );
+      return;
+    }
+    if (e.key === "Enter" && autoIndent && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey) {
+      tabEscapedRef.current = false;
+      const el2 = el;
+      const start = el2.selectionStart;
+      const end = el2.selectionEnd;
+      const head = el2.value.slice(lineStart(el2.value, start), start);
+      const indent = /^[ \t]*/.exec(head)?.[0] ?? "";
+      const opensBlock = /[{[(]\s*$/.test(head);
+      if (!indent && !opensBlock) return;
+      e.preventDefault();
+      const insert = `
+${indent}${opensBlock ? unit : ""}`;
+      const caret = start + insert.length;
+      replaceRange(el2, start, end, insert, caret, caret);
+      return;
+    }
+    tabEscapedRef.current = false;
+  };
+  const handleScroll = (e) => {
+    syncGutter(e.currentTarget);
+    onScroll?.(e);
+  };
+  const setTextareaRef = (0, import_react.useMemo)(() => (0, import_helpers.mergeRefs)(innerRef, textareaRef), [textareaRef]);
+  const handleBlur = (0, import_react.useCallback)(
+    (e) => {
+      tabEscapedRef.current = false;
+      onBlur?.(e);
+    },
+    [onBlur]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        style,
+        className: (0, import_helpers.cn)(
+          "uxm-code-editor",
+          error && "uxm-code-editor--error",
+          disabled && "uxm-code-editor--disabled",
+          wrap && "uxm-code-editor--wrap",
+          className
+        ),
+        children: [
+          showGutter && // aria-hidden: the numbers are a visual ruler. A screen reader
+          // reading "1 2 3 4" before the code would be noise, and the
+          // textarea already exposes the text itself.
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: "uxm-code-editor__gutter",
+              "aria-hidden": "true",
+              style: { width: gutterWidth(lineCount) },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: linesRef, className: "uxm-code-editor__gutter-lines", children: Array.from({ length: lineCount }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-code-editor__line-number", children: i + 1 }, i)) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "textarea",
+            {
+              ...rest,
+              ref: setTextareaRef,
+              className: "uxm-code-editor__input",
+              value,
+              defaultValue: isControlled ? void 0 : defaultValue,
+              onChange: handleChange,
+              onKeyDown: handleKeyDown,
+              onScroll: handleScroll,
+              onBlur: handleBlur,
+              disabled,
+              readOnly,
+              spellCheck,
+              autoCorrect: "off",
+              autoCapitalize: "off",
+              autoComplete: "off",
+              wrap: wrap ? "soft" : "off",
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": (0, import_helpers.mergeDescribedBy)(
+                rest["aria-describedby"],
+                error ? errorId : void 0
+              )
+            }
+          )
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field_error.FieldError, { id: errorId, className: "uxm-code-editor__error-message", children: error })
+  ] });
+}
+CodeEditor.hasError = true;
+function CodeBlock({
+  className,
+  children,
+  lineNumbers = false,
+  wrap = false,
+  onScroll,
+  ...rest
+}) {
+  const preRef = (0, import_react.useRef)(null);
+  const { linesRef, syncGutter } = useGutterSync(preRef);
+  const text = typeof children === "string" ? children : null;
+  const lineCount = lineNumbers && !wrap && text ? text.replace(/\n$/, "").split("\n").length : 0;
+  const showGutter = lineCount > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...rest,
+      className: (0, import_helpers.cn)("uxm-code-block", wrap && "uxm-code-block--wrap", className),
+      children: [
+        showGutter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "uxm-code-block__gutter",
+            "aria-hidden": "true",
+            style: { width: gutterWidth(lineCount) },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: linesRef, className: "uxm-code-block__gutter-lines", children: Array.from({ length: lineCount }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-code-block__line-number", children: i + 1 }, i)) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "pre",
+          {
+            ref: preRef,
+            className: "uxm-code-block__content",
+            onScroll: (e) => {
+              syncGutter(e.currentTarget);
+              onScroll?.(e);
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children })
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CodeBlock,
+  CodeEditor
+});
+//# sourceMappingURL=code-editor.cjs.map

package/dist/ui/code-editor/code-editor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/code-editor/code-editor.tsx"],"sourcesContent":["import {\n  useCallback,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type FocusEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  type TextareaHTMLAttributes,\n  type UIEvent,\n} from 'react';\n\nimport { cn, mergeDescribedBy, mergeRefs } from '@/helpers';\n\nimport { FieldError } from '../field-error';\n\n/**\n * Code Editor — a plain-text code surface for developer tooling (query\n * consoles, payload editors, expression fields).\n *\n * Deliberately a real `<textarea>`, not a wrapper over CodeMirror/Monaco:\n * the library ships zero runtime dependencies and that is a constitutional\n * rule, not an accident. The consequence is the scope boundary — a\n * `<textarea>` renders one uniform text run, so there is NO syntax\n * highlighting here and there cannot be. What it does buy is everything\n * that comes free with a native control: IME composition, spellcheck\n * opt-out, autofill/undo/redo, form participation, mobile keyboards, and\n * a screen-reader contract that already works. If highlighting becomes a\n * real requirement, that is a different atom (a `<pre>` overlay behind\n * transparent text plus a tokenizer) — not a prop on this one.\n *\n * Why it is not `<Textarea variant=\"code\">`:\n *   1. Studio theming is per-component-id. Every `styleProperty` maps to\n *      one `--uxm-<id>-*` var and `layoutVariants` are ephemeral display\n *      states, so a variant could not carry its own font size — the mono\n *      surface would drag every prose textarea in the app with it.\n *   2. Tab-to-indent is the point of a code field and a keyboard trap in\n *      a prose one. Gating it on a prop gives one component two keyboard\n *      contracts.\n *   3. The input family already splits by purpose — password, number,\n *      currency, date, time, phone are each their own atom.\n */\n\n/** Start index of the line containing `pos`. */\nfunction lineStart(text: string, pos: number): number {\n  return text.lastIndexOf('\\n', pos - 1) + 1;\n}\n\n/** End index of the line containing `pos` (exclusive of the newline). */\nfunction lineEnd(text: string, pos: number): number {\n  const next = text.indexOf('\\n', pos);\n  return next === -1 ? text.length : next;\n}\n\n/**\n * Add or remove one indent level on every line of `block`.\n *\n * Returns the rewritten block plus the caret arithmetic the caller needs:\n * `firstDelta` shifts `selectionStart` (it only moves by what happened to\n * ITS line) and `totalDelta` shifts `selectionEnd`. Computing both here is\n * what keeps a multi-line selection selected across a Tab press instead of\n * collapsing to a caret.\n */\nfunction reindent(\n  block: string,\n  unit: string,\n  outdent: boolean,\n): { text: string; firstDelta: number; totalDelta: number } {\n  // Matches one indent level's worth of leading whitespace: a single tab, or\n  // up to `unit.length` spaces. Capped so outdenting a 1-space line removes\n  // that one space rather than eating the first real character.\n  const outdentRe = new RegExp(`^(?:\\\\t| {1,${unit.length}})`);\n  const lines = block.split('\\n');\n  let firstDelta = 0;\n  let totalDelta = 0;\n\n  const next = lines.map((line, i) => {\n    // Never indent a blank line: the result is a whitespace-only line, which\n    // is invisible in the editor but real trailing whitespace that lint rules\n    // reject and diffs show. Editors that implement this skip these lines.\n    if (!outdent && line.length === 0) return line;\n    const match = outdent ? outdentRe.exec(line) : null;\n    const delta = outdent ? -(match?.[0].length ?? 0) : unit.length;\n    if (i === 0) firstDelta = delta;\n    totalDelta += delta;\n    return outdent ? line.slice(-delta) : unit + line;\n  });\n\n  return { text: next.join('\\n'), firstDelta, totalDelta };\n}\n\n/**\n * Replace `[from, to)` with `text`, then place the caret.\n *\n * Uses `document.execCommand('insertText')` on purpose despite its\n * deprecation: it is the only API that writes into a `<textarea>` while\n * keeping the browser's native undo stack intact, so ⌘Z after an auto-indent\n * still works. It also emits a real `input` event, which is what React's\n * controlled-value tracking listens to — assigning `el.value` directly would\n * update the DOM and leave React's state stale.\n *\n * The fallback covers engines that refuse the command: React 19 tracks the\n * last value on the DOM node, so going through the native `value` setter and\n * dispatching `input` by hand is what makes a controlled consumer re-render.\n * Undo history is lost on that path — correctness over polish.\n */\nfunction replaceRange(\n  el: HTMLTextAreaElement,\n  from: number,\n  to: number,\n  text: string,\n  selStart: number,\n  selEnd: number,\n): void {\n  el.focus();\n  el.setSelectionRange(from, to);\n\n  let inserted = false;\n  try {\n    inserted = document.execCommand('insertText', false, text);\n  } catch {\n    inserted = false;\n  }\n\n  if (!inserted) {\n    const setValue = Object.getOwnPropertyDescriptor(\n      HTMLTextAreaElement.prototype,\n      'value',\n    )?.set;\n    const next = el.value.slice(0, from) + text + el.value.slice(to);\n    setValue?.call(el, next);\n    el.dispatchEvent(new Event('input', { bubbles: true }));\n  }\n\n  el.setSelectionRange(selStart, selEnd);\n}\n\n/**\n * Keep a line-number gutter locked to its code.\n *\n * The numbers are TRANSLATED, not scrolled. Two reasons: the gutter is a\n * clipped box with no scrollable overflow of its own (see the stylesheet —\n * the numbers are absolutely positioned so they contribute no intrinsic\n * height, which is what stops the gutter from dictating the editor's height),\n * and a transform is composited rather than triggering layout on every\n * scroll frame.\n */\nfunction useGutterSync(scrollerRef: RefObject<HTMLElement | null>) {\n  const linesRef = useRef<HTMLDivElement>(null);\n  const syncGutter = useCallback((el: HTMLElement) => {\n    const lines = linesRef.current;\n    if (!lines) return;\n    const next = `translateY(${-el.scrollTop}px)`;\n    // Idempotent: this also runs on every render (below), and a no-op write\n    // would still dirty the compositor.\n    if (lines.style.transform !== next) lines.style.transform = next;\n  }, []);\n\n  // The transform lives on the DOM node, not in React's tree, so a freshly\n  // mounted lines element starts at zero — and no scroll event is coming to\n  // correct it, because the scroller's own scrollTop never changed. Toggling\n  // `lineNumbers` on while scrolled to line 200 would otherwise show the\n  // gutter counting from 1. Runs after every render on purpose; the write\n  // above is guarded.\n  useLayoutEffect(() => {\n    if (scrollerRef.current) syncGutter(scrollerRef.current);\n  });\n\n  return { linesRef, syncGutter };\n}\n\n/**\n * Width the gutter needs for `count` lines, in `ch` of its own monospace\n * font. Explicit because the numbers are out of flow and so cannot size\n * their own column — without this a jump from line 99 to 100 would clip.\n */\nfunction gutterWidth(count: number): string {\n  return `${Math.max(2, String(Math.max(count, 1)).length)}ch`;\n}\n\nexport interface CodeEditorProps\n  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'wrap'> {\n  /** Controlled source text. */\n  value?: string;\n  /** Initial source text when uncontrolled. */\n  defaultValue?: string;\n  /**\n   * Spaces inserted per indent level, and the maximum stripped per outdent.\n   * Only affects what the editor TYPES — rendering of literal tab characters\n   * is `--uxm-code-editor-tab-size`. Default `2`.\n   */\n  indentSize?: number;\n  /**\n   * Tab / Shift+Tab indent and outdent instead of moving focus. Default\n   * `true`.\n   *\n   * The field is never a keyboard trap: pressing Escape releases the next\n   * Tab to move focus normally (CodeMirror's convention), and any other\n   * keystroke re-arms indenting. Set `false` to opt out entirely — worth\n   * doing when the editor sits in a form whose primary interaction is\n   * tabbing between fields.\n   */\n  indentWithTab?: boolean;\n  /**\n   * Enter carries the current line's leading whitespace onto the new line,\n   * adding one level after an opening `{`, `[` or `(`. Default `true`.\n   */\n  autoIndent?: boolean;\n  /** Line-number gutter down the left edge. Default `false`. */\n  lineNumbers?: boolean;\n  /**\n   * Soft-wrap long lines. Default `false` — code scrolls horizontally, so a\n   * long line stays one line and the gutter keeps counting truthfully.\n   */\n  wrap?: boolean;\n  /**\n   * Validation message shown beneath the field; also sets `aria-invalid` and\n   * the `--error` visual. Same contract as the rest of the input family.\n   */\n  error?: string;\n  /**\n   * Handle to the underlying `<textarea>`, merged with the atom's own\n   * internal ref. Use it to focus, select, or insert at the caret. A plain\n   * React `ref` on `<CodeEditor>` does NOT reach the element.\n   */\n  textareaRef?: Ref<HTMLTextAreaElement>;\n}\n\nexport function CodeEditor({\n  className,\n  style,\n  value,\n  defaultValue,\n  onChange,\n  onKeyDown,\n  onScroll,\n  onBlur,\n  indentSize = 2,\n  indentWithTab = true,\n  autoIndent = true,\n  lineNumbers = false,\n  wrap = false,\n  error,\n  disabled,\n  readOnly,\n  textareaRef,\n  spellCheck = false,\n  ...rest\n}: CodeEditorProps) {\n  const errorId = useId();\n  const innerRef = useRef<HTMLTextAreaElement>(null);\n  const { linesRef, syncGutter } = useGutterSync(innerRef);\n  // Escape \"unlocks\" the next Tab so the field can always be left by\n  // keyboard. Kept in a ref, not state — it must not cause a render, and\n  // every read happens inside the same keydown that writes it.\n  const tabEscapedRef = useRef(false);\n\n  const isControlled = value !== undefined;\n  const unit = ' '.repeat(Math.max(1, indentSize));\n\n  // A soft-wrapped textarea lays out one row per VISUAL line, but a gutter can\n  // only count LOGICAL ones — so with `wrap` every number past the first\n  // wrapped line points at the wrong row. Showing no ruler beats showing a\n  // wrong one; the warn is diagnostic (same always-on shape as Dialog's).\n  const gutterWouldLie = lineNumbers && wrap;\n  if (gutterWouldLie) {\n    console.warn(\n      '[CodeEditor] `lineNumbers` is ignored while `wrap` is set: wrapped lines occupy several rows each, so the numbers cannot line up with the code. Turn off `wrap` to show the gutter.',\n    );\n  }\n  const showGutter = lineNumbers && !wrap;\n\n  // Mirrored on every edit while uncontrolled, not just while the gutter is\n  // shown: gating it on `lineNumbers` left this stale for anything typed\n  // BEFORE the gutter was switched on, so flipping it mid-session rendered a\n  // count from the original `defaultValue`.\n  const [uncontrolledText, setUncontrolledText] = useState(() => defaultValue ?? '');\n  const sourceText = isControlled ? (value ?? '') : uncontrolledText;\n  const lineCount = useMemo(\n    () => (showGutter ? sourceText.split('\\n').length : 0),\n    [showGutter, sourceText],\n  );\n\n  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n    if (!isControlled) setUncontrolledText(e.target.value);\n    onChange?.(e);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n    onKeyDown?.(e);\n    // A consumer that handled the key owns it — e.g. ⌘Enter to run a query.\n    if (e.defaultPrevented) return;\n\n    const el = e.currentTarget;\n    if (readOnly || disabled) return;\n\n    // Mid-composition, Enter COMMITS the IME candidate and Tab often cycles\n    // candidates — both belong to the IME, not to us. Claiming them would\n    // insert a newline instead of the composed text. `keyCode === 229` is the\n    // legacy signal some engines still send instead of `isComposing`.\n    if (e.nativeEvent.isComposing || e.keyCode === 229) return;\n\n    if (e.key === 'Escape') {\n      // Not prevented: Escape must still reach an enclosing Modal/Popover.\n      // Arming the flag and letting it bubble does both jobs.\n      tabEscapedRef.current = true;\n      return;\n    }\n\n    if (e.key === 'Tab') {\n      if (!indentWithTab || tabEscapedRef.current || e.altKey || e.ctrlKey || e.metaKey) {\n        tabEscapedRef.current = false;\n        return; // native focus move\n      }\n      e.preventDefault();\n\n      const text = el.value;\n      const start = el.selectionStart;\n      const end = el.selectionEnd;\n\n      // Plain Tab with nothing selected types an indent at the caret, the\n      // way every code editor does — it does not re-indent the line.\n      if (start === end && !e.shiftKey) {\n        replaceRange(el, start, end, unit, start + unit.length, start + unit.length);\n        return;\n      }\n\n      const from = lineStart(text, start);\n      // A selection that ENDS at column 0 has not touched that line — the\n      // caret merely sits in front of it. Without stepping back, selecting\n      // \"alpha\\n\" in \"alpha\\nbeta\" would indent `beta` too.\n      const lastTouched = end > start && end === lineStart(text, end) ? end - 1 : end;\n      const to = lineEnd(text, lastTouched);\n      const { text: block, firstDelta, totalDelta } = reindent(\n        text.slice(from, to),\n        unit,\n        e.shiftKey,\n      );\n      replaceRange(\n        el,\n        from,\n        to,\n        block,\n        Math.max(from, start + firstDelta),\n        Math.max(from, end + totalDelta),\n      );\n      return;\n    }\n\n    if (e.key === 'Enter' && autoIndent && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey) {\n      tabEscapedRef.current = false;\n      const el2 = el;\n      const start = el2.selectionStart;\n      const end = el2.selectionEnd;\n      const head = el2.value.slice(lineStart(el2.value, start), start);\n      const indent = /^[ \\t]*/.exec(head)?.[0] ?? '';\n      const opensBlock = /[{[(]\\s*$/.test(head);\n      // Nothing to carry — let the browser insert the newline itself so the\n      // native undo stack stays granular.\n      if (!indent && !opensBlock) return;\n\n      e.preventDefault();\n      const insert = `\\n${indent}${opensBlock ? unit : ''}`;\n      const caret = start + insert.length;\n      replaceRange(el2, start, end, insert, caret, caret);\n      return;\n    }\n\n    tabEscapedRef.current = false;\n  };\n\n  // Only the vertical offset is mirrored — the gutter stays put while the\n  // code scrolls sideways under it, which is what makes long lines readable\n  // without the numbers sliding out of view.\n  const handleScroll = (e: UIEvent<HTMLTextAreaElement>) => {\n    syncGutter(e.currentTarget);\n    onScroll?.(e);\n  };\n\n  const setTextareaRef = useMemo(() => mergeRefs(innerRef, textareaRef), [textareaRef]);\n\n  const handleBlur = useCallback(\n    (e: FocusEvent<HTMLTextAreaElement>) => {\n      tabEscapedRef.current = false;\n      onBlur?.(e);\n    },\n    [onBlur],\n  );\n\n  return (\n    <>\n      {/* `className` AND `style` both land here. `style` is the documented way\n          to set a `--uxm-code-editor-*` var per instance, and those vars are\n          read by this root (background, border, radius) as well as by the\n          gutter — on the inner textarea they would cascade to neither. */}\n      <div\n        style={style}\n        className={cn(\n          'uxm-code-editor',\n          error && 'uxm-code-editor--error',\n          disabled && 'uxm-code-editor--disabled',\n          wrap && 'uxm-code-editor--wrap',\n          className,\n        )}\n      >\n        {showGutter && (\n          // aria-hidden: the numbers are a visual ruler. A screen reader\n          // reading \"1 2 3 4\" before the code would be noise, and the\n          // textarea already exposes the text itself.\n          <div\n            className=\"uxm-code-editor__gutter\"\n            aria-hidden=\"true\"\n            style={{ width: gutterWidth(lineCount) }}\n          >\n            <div ref={linesRef} className=\"uxm-code-editor__gutter-lines\">\n              {Array.from({ length: lineCount }, (_, i) => (\n                <span key={i} className=\"uxm-code-editor__line-number\">\n                  {i + 1}\n                </span>\n              ))}\n            </div>\n          </div>\n        )}\n        {/* `{...rest}` first so managed props win — the sanctioned element\n            handle is `textareaRef`. `defaultValue` only when uncontrolled. */}\n        <textarea\n          {...rest}\n          ref={setTextareaRef}\n          className=\"uxm-code-editor__input\"\n          value={value}\n          defaultValue={isControlled ? undefined : defaultValue}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          onScroll={handleScroll}\n          onBlur={handleBlur}\n          disabled={disabled}\n          readOnly={readOnly}\n          // Code is not prose: browser text assistance corrupts it silently\n          // (autocapitalising an identifier, smart-quoting a string literal).\n          spellCheck={spellCheck}\n          autoCorrect=\"off\"\n          autoCapitalize=\"off\"\n          autoComplete=\"off\"\n          wrap={wrap ? 'soft' : 'off'}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={mergeDescribedBy(\n            rest['aria-describedby'],\n            error ? errorId : undefined,\n          )}\n        />\n      </div>\n      {error && (\n        <FieldError id={errorId} className=\"uxm-code-editor__error-message\">\n          {error}\n        </FieldError>\n      )}\n    </>\n  );\n}\nCodeEditor.hasError = true;\n\nexport interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onScroll'> {\n  /** Source text. Rendered verbatim — whitespace and line breaks preserved. */\n  children?: ReactNode;\n  /**\n   * Fires on the inner `<pre>` — the element that actually scrolls, since it\n   * carries `max-height`. Re-typed from the root's `HTMLDivElement` for that\n   * reason: the root never scrolls, so a handler bound there never fires.\n   */\n  onScroll?: (event: UIEvent<HTMLPreElement>) => void;\n  /** Line-number gutter down the left edge. Default `false`. */\n  lineNumbers?: boolean;\n  /** Soft-wrap long lines. Default `false` (horizontal scroll). */\n  wrap?: boolean;\n}\n\n/**\n * Code Block — the read-only half of the code surface: query output, a\n * generated payload, an SDL dump.\n *\n * Split from `CodeEditor` rather than folded in behind `readOnly` because\n * the two want different DOM. This is a `<pre><code>`, which is what the\n * content actually IS — it sizes to its content, it is selectable and\n * copyable without a focusable form control in the tab order, and assistive\n * tech announces it as code rather than as an editable field the user\n * cannot edit.\n */\nexport function CodeBlock({\n  className,\n  children,\n  lineNumbers = false,\n  wrap = false,\n  onScroll,\n  ...rest\n}: CodeBlockProps) {\n  const preRef = useRef<HTMLPreElement>(null);\n  const { linesRef, syncGutter } = useGutterSync(preRef);\n\n  // Counting needs the raw text; anything non-string (an element, a\n  // fragment) can't be counted, so the gutter degrades to off rather than\n  // rendering a wrong count.\n  const text = typeof children === 'string' ? children : null;\n  // `wrap` makes a logical line span several rows, which no per-line gutter\n  // can track — same reason as CodeEditor, so the ruler is dropped rather\n  // than shown wrong.\n  const lineCount = lineNumbers && !wrap && text ? text.replace(/\\n$/, '').split('\\n').length : 0;\n  const showGutter = lineCount > 0;\n\n  return (\n    <div\n      {...rest}\n      className={cn('uxm-code-block', wrap && 'uxm-code-block--wrap', className)}\n    >\n      {showGutter && (\n        <div\n          className=\"uxm-code-block__gutter\"\n          aria-hidden=\"true\"\n          style={{ width: gutterWidth(lineCount) }}\n        >\n          <div ref={linesRef} className=\"uxm-code-block__gutter-lines\">\n            {Array.from({ length: lineCount }, (_, i) => (\n              <span key={i} className=\"uxm-code-block__line-number\">\n                {i + 1}\n              </span>\n            ))}\n          </div>\n        </div>\n      )}\n      {/* `max-height` makes THIS the scroll container, not the root — so it\n          carries both the gutter sync and the consumer's `onScroll`, which on\n          the (never-scrolling) root would simply never fire. */}\n      <pre\n        ref={preRef}\n        className=\"uxm-code-block__content\"\n        onScroll={(e) => {\n          syncGutter(e.currentTarget);\n          onScroll?.(e);\n        }}\n      >\n        <code>{children}</code>\n      </pre>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/code-editor/code-editor.css

@@ -0,0 +1,210 @@
+@charset "UTF-8";
+/* Code Editor / Code Block — the developer-tooling code surface.
+
+   Both atoms are a flex row: an optional line-number gutter, then the code.
+   The chrome (background, border, radius, focus ring) lives on the ROOT, not
+   on the `<textarea>`, so the gutter sits inside the same box and the focus
+   ring wraps both. That is why `:focus-within` drives the focus visual here
+   instead of the `:focus` the rest of the input family uses.
+
+   ALIGNMENT IS LOAD-BEARING. The gutter and the code are separate boxes, so
+   line N only lines up with number N while font-size, line-height and the
+   vertical padding are byte-identical between them. Every one of those three
+   is a shared var read by both — never hardcode one side. */
+.uxm-code-editor,
+.uxm-code-block {
+  box-sizing: border-box;
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  overflow: hidden; /* clip the children's corners to the root's radius */
+  background-color: var(--uxm-code-editor-bg, var(--color-surface-alt));
+  border: 1px solid var(--uxm-code-editor-border-color, var(--color-border));
+  border-radius: var(--uxm-code-editor-border-radius, 8px);
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+/* The shared type surface. Applied to every text-bearing box in both atoms so
+   the editor and its output panel are the same typeface at the same size —
+   the point of having one surface rather than two lookalikes.
+
+   `font-size` follows the house calc-outside-var form so a brand type scale
+   still reaches it; see the theming skill. */
+.uxm-code-editor__input,
+.uxm-code-editor__gutter,
+.uxm-code-editor__gutter-lines,
+.uxm-code-block__content,
+.uxm-code-block__gutter,
+.uxm-code-block__gutter-lines {
+  font-family: var(--uxm-code-editor-font-family, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
+  font-size: calc(var(--uxm-code-editor-font-size, 12.5px) * var(--type-scale, 1));
+  line-height: var(--uxm-code-editor-line-height, 1.6);
+  tab-size: var(--uxm-code-editor-tab-size, 2);
+  margin: 0;
+}
+
+/* Vertical padding lives on the text-bearing boxes ONLY — the gutter box is
+   a clipping window, and padding on it would offset the window instead of
+   the numbers, desyncing every line by exactly `padding-y`. */
+.uxm-code-editor__input,
+.uxm-code-editor__gutter-lines,
+.uxm-code-block__content,
+.uxm-code-block__gutter-lines {
+  padding-top: var(--uxm-code-editor-padding-y, 12px);
+  padding-bottom: var(--uxm-code-editor-padding-y, 12px);
+}
+
+/* Gutter — a passive ruler, and a clipping window nothing scrolls.
+
+   THE NUMBERS ARE OUT OF FLOW ON PURPOSE. In normal flow, 400 line numbers
+   are 400 line-boxes tall, and as a stretched flex item the gutter would
+   hand that height to the ROOT — the editor would grow to fit every line
+   instead of scrolling, and the sync below would never fire because nothing
+   ever overflowed. Absolutely positioned, the numbers contribute no
+   intrinsic height, so the `<textarea>` alone decides how tall the editor
+   is and the gutter simply stretches to match it.
+
+   The cost is that the column can no longer size itself, which is why the
+   atom sets an explicit `ch` width from the digit count. */
+.uxm-code-editor__gutter,
+.uxm-code-block__gutter {
+  position: relative;
+  flex: 0 0 auto;
+  /* content-box so the inline `ch` width covers the digits only and the
+     padding below adds to it, instead of eating into the number column. */
+  box-sizing: content-box;
+  min-width: var(--uxm-code-editor-gutter-width, 2ch);
+  padding-right: var(--uxm-code-editor-gutter-gap, 12px);
+  padding-left: var(--uxm-code-editor-padding-x, 14px);
+  overflow: hidden;
+  user-select: none;
+  color: var(--uxm-code-editor-gutter-color, var(--color-text-muted));
+  background-color: var(--uxm-code-editor-gutter-bg, transparent);
+  border-right: 1px solid var(--uxm-code-editor-gutter-border, var(--color-border));
+}
+
+/* The scrolling layer. Offset by `transform` from the atom's scroll handler
+   — composited, so it does not relayout on every scroll frame. */
+.uxm-code-editor__gutter-lines,
+.uxm-code-block__gutter-lines {
+  position: absolute;
+  top: 0;
+  left: var(--uxm-code-editor-padding-x, 14px);
+  right: var(--uxm-code-editor-gutter-gap, 12px);
+  text-align: right;
+}
+
+.uxm-code-editor__line-number,
+.uxm-code-block__line-number {
+  display: block;
+  /* Numbers must not wrap — a wrapped number would desync every line below
+     it from its code. */
+  white-space: pre;
+  font-variant-numeric: tabular-nums;
+}
+
+/* The editable surface. Transparent and border-less: all chrome is the
+   root's, so the textarea only owns the text. */
+.uxm-code-editor__input {
+  flex: 1 1 auto;
+  min-width: 0;
+  box-sizing: border-box;
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: var(--uxm-code-editor-resize, vertical);
+  color: var(--uxm-code-editor-color, var(--color-text));
+  padding-left: var(--uxm-code-editor-padding-x, 14px);
+  padding-right: var(--uxm-code-editor-padding-x, 14px);
+  min-height: var(--uxm-code-editor-min-height, 140px);
+  /* `wrap="off"` gives horizontal scrolling; the white-space rule has to
+     agree with it or long lines silently wrap anyway. */
+  white-space: pre;
+  overflow: auto;
+}
+
+.uxm-code-editor--wrap .uxm-code-editor__input {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.uxm-code-editor__input::placeholder {
+  color: var(--color-text-muted);
+}
+
+/* State coverage mirrors the rest of the input family. The `--state-*`
+   modifiers let the studio preview force a visual without real pointer or
+   keyboard interaction, while the real pseudo-classes layer on top via
+   source order (focus after hover). */
+.uxm-code-editor--state-hover,
+.uxm-code-editor:hover:not(.uxm-code-editor--disabled):not(.uxm-code-editor--error) {
+  border-color: var(--uxm-code-editor-hover-border, var(--color-accent));
+}
+
+.uxm-code-editor--state-focus,
+.uxm-code-editor:focus-within {
+  border-color: var(--uxm-code-editor-focus-border, var(--color-accent));
+  outline: 2px solid var(--uxm-code-editor-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+
+.uxm-code-editor--disabled {
+  background-color: var(--uxm-code-editor-disabled-bg, var(--color-surface-alt));
+  border-color: var(--uxm-code-editor-disabled-border, var(--color-border));
+  opacity: var(--uxm-code-editor-disabled-opacity, 0.6);
+}
+
+.uxm-code-editor__input:disabled {
+  color: var(--uxm-code-editor-disabled-color, var(--color-text-muted));
+  cursor: not-allowed;
+  /* Safari paints its own washed-out text on a disabled textarea and
+     ignores `color`; this is the documented opt-out. */
+  -webkit-text-fill-color: var(--uxm-code-editor-disabled-color, var(--color-text-muted));
+}
+
+/* Doubled class on purpose. `:focus-within` scores (0,1,1) and would beat a
+   single (0,1,0) `--error`, so clicking into an invalid field to fix it would
+   swap the danger border for the accent one. (0,2,0) wins outright, and the
+   focus RING still layers on top because that rule sets `outline`, not
+   `border-color`. Same trick as `.uxm-input-text.uxm-input-text--error`. */
+.uxm-code-editor.uxm-code-editor--error {
+  border-color: var(--uxm-code-editor-error-border, var(--color-danger-text));
+}
+
+.uxm-code-editor__error-message {
+  display: block;
+  margin-top: 4px;
+  font-size: calc(var(--uxm-code-editor-error-message-size, 12px) * var(--type-scale, 1));
+  color: var(--uxm-code-editor-error-color, var(--color-danger-text));
+}
+
+/* Code Block — the same surface, read-only.
+
+   It reads the `--uxm-code-editor-*` vars rather than owning a parallel set,
+   and it has no registry entry of its own. That is deliberate: an output
+   panel that did not match the query typed above it would be a bug, so the
+   two are ONE themeable surface with one set of knobs. `max-height` is the
+   only thing genuinely its own — an editor grows to its content, a result
+   dump has to be capped. */
+.uxm-code-block__content {
+  flex: 1 1 auto;
+  min-width: 0;
+  box-sizing: border-box;
+  color: var(--uxm-code-editor-color, var(--color-text));
+  padding-left: var(--uxm-code-editor-padding-x, 14px);
+  padding-right: var(--uxm-code-editor-padding-x, 14px);
+  max-height: var(--uxm-code-block-max-height, 460px);
+  white-space: pre;
+  overflow: auto;
+}
+
+.uxm-code-block--wrap .uxm-code-block__content {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.uxm-code-block__content code {
+  font: inherit;
+  color: inherit;
+  background: none;
+}