@epilot/zenith-react 0.2.0-next.0 → 0.2.0-next.3

package/dist/components/code-editor/code-editor.js

@@ -1,62 +1,64 @@
-import { jsxs as j, jsx as n } from "react/jsx-runtime";
-import * as t from "react";
+import { jsxs as Y, jsx as n } from "react/jsx-runtime";
+import * as r from "react";
 import { mergeClasses as m, SLOT_ATTR as c, shorthands as l } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as it } from "../../styles/make-styles.js";
-import { leadingXs as le, spacingElement2 as k, surfaceField as oe, spacingElement05 as ze, info11 as nt, warning11 as lt, error11 as at, infoUi as st, warningUi as ct, errorUi as De, grayA12 as _, spacingElement3 as ie, grayA8 as ne, grayA2 as We, accentA5 as dt, fontWeightNormal as ut, trackingNormal as ft, textXs as ht, fontMono as gt, grayA3 as Re, focusRing as mt, surfaceRadiusField as pt, borderField as vt, borderWidthField as bt } from "../../tokens/index.js";
-import { Button as yt } from "../button/button.js";
-import { applyIndent as kt } from "./indent.js";
-import { highlightCode as xt, splitTokenLines as St } from "../../lib/code-highlight.js";
-import { useCodeTokenRenderer as wt } from "../../lib/code-tokens.js";
-import { severityByLine as Ct, visibleDiagnostics as zt, lineIndexAt as Wt, caretAfterRewrite as Rt, gutterDigits as $t } from "../../lib/code-lines.js";
-const Dt = 2e3, ae = "--zenith-code-gutter", $e = {
+import { makeZenithStyles as lt } from "../../styles/make-styles.js";
+import { boxModel as p, nativeControl as at } from "../../styles/host-reset.js";
+import { leadingXs as ae, spacingElement2 as x, surfaceField as ie, spacingElement05 as We, info11 as st, warning11 as ct, error11 as dt, infoUi as ut, warningUi as ft, errorUi as Te, grayA12 as j, spacingElement3 as ne, grayA8 as le, grayA2 as Re, fontMono as Ie, accentA5 as ht, fontWeightNormal as gt, trackingNormal as mt, textXs as pt, grayA3 as $e, focusRing as vt, surfaceRadiusField as bt, borderField as yt, borderWidthField as kt } from "../../tokens/index.js";
+import { Button as xt } from "../button/button.js";
+import { applyIndent as St } from "./indent.js";
+import { highlightCode as wt, splitTokenLines as Ct } from "../../lib/code-highlight.js";
+import { useCodeTokenRenderer as zt } from "../../lib/code-tokens.js";
+import { severityByLine as Wt, visibleDiagnostics as Rt, lineIndexAt as $t, caretAfterRewrite as Dt, gutterDigits as Tt } from "../../lib/code-lines.js";
+const It = 2e3, se = "--zenith-code-gutter", De = {
   ...l.margin(0),
   ...l.borderWidth(0),
   ...l.borderStyle("none"),
-  ...l.padding(k),
-  fontFamily: gt,
-  fontSize: ht,
-  lineHeight: le,
-  letterSpacing: ft,
-  fontWeight: ut,
+  ...l.padding(x),
+  fontFamily: Ie,
+  fontSize: pt,
+  lineHeight: ae,
+  letterSpacing: mt,
+  fontWeight: gt,
   textIndent: 0,
   boxSizing: "border-box",
   // A classic, space-consuming scrollbar narrows the textarea's content box but not the layer's,
   // which moves where wrapped lines break. Reserving the gutter on both keeps one content width.
   // Platforms with overlay scrollbars never had the problem.
   scrollbarGutter: "stable"
-}, y = {
-  error: { rule: De, number: at },
-  warning: { rule: ct, number: lt },
-  info: { rule: st, number: nt }
-}, Tt = it({
+}, k = {
+  error: { rule: Te, number: dt },
+  warning: { rule: ft, number: ct },
+  info: { rule: ut, number: st }
+}, Mt = lt({
   root: {
+    ...p,
     display: "flex",
     flexDirection: "column",
     minWidth: 0,
     position: "relative",
-    backgroundColor: oe,
-    ...l.borderWidth(bt),
+    backgroundColor: ie,
+    ...l.borderWidth(kt),
     ...l.borderStyle("solid"),
-    ...l.borderColor(vt),
-    borderRadius: pt,
+    ...l.borderColor(yt),
+    borderRadius: bt,
     // Declared before the state rules below so those win by source order, per AGENTS.md rule 2.
     "&:focus-within": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "-1px",
-      outlineColor: mt
+      outlineColor: vt
     },
     "&[data-invalid]": {
-      ...l.borderColor(De)
+      ...l.borderColor(Te)
     },
     "&[data-disabled]": {
-      backgroundColor: Re
+      backgroundColor: $e
     }
   },
   // Repaint the opaque gutter when the surrounding field is disabled.
   rootDisabledGutter: {
     [`&[data-disabled] [${c}='code-editor-line-number']`]: {
-      backgroundColor: Re
+      backgroundColor: $e
     }
   },
   // focus-within would keep the overlay visible throughout the editing session.
@@ -65,7 +67,7 @@ const Dt = 2e3, ae = "--zenith-code-gutter", $e = {
   },
   // The textarea defines the box; this decorative layer stretches without measurement.
   highlight: {
-    ...$e,
+    ...De,
     position: "absolute",
     top: 0,
     right: 0,
@@ -76,7 +78,7 @@ const Dt = 2e3, ae = "--zenith-code-gutter", $e = {
     // Paint only: it must never take a click, a caret or a selection away from the control.
     pointerEvents: "none",
     userSelect: "none",
-    color: _,
+    color: j,
     "&[data-composing]": {
       // Provisional IME text lives in the textarea, so the layer would be showing stale colours
       // over it. Declared after the base so it wins by source order.
@@ -85,30 +87,32 @@ const Dt = 2e3, ae = "--zenith-code-gutter", $e = {
   },
   /** With a gutter, the left padding moves into the number cell so the cell can pin flush. */
   highlightGutter: {
+    ...p,
     paddingLeft: 0
   },
   textarea: {
-    ...$e,
+    ...at,
+    ...De,
     position: "relative",
     width: "100%",
     minWidth: 0,
     backgroundColor: "transparent",
     // The glyphs come from the layer beneath; only the caret is painted here.
     color: "transparent",
-    caretColor: _,
+    caretColor: j,
     overflowX: "auto",
     overflowY: "auto",
     // The root paints the ring for the whole surface; a second one on the control would double it.
     outlineStyle: "none",
     "::placeholder": {
-      color: ne,
+      color: le,
       // Placeholders are the textarea's own paint, so they need a real colour despite the above.
-      WebkitTextFillColor: ne
+      WebkitTextFillColor: le
     },
     "::selection": {
       // An alpha tint, so highlighted glyphs stay legible through the selection band instead of
       // being covered by it — transparent text under an opaque selection is invisible text.
-      backgroundColor: dt
+      backgroundColor: ht
     },
     ":disabled": {
       cursor: "not-allowed"
@@ -116,12 +120,13 @@ const Dt = 2e3, ae = "--zenith-code-gutter", $e = {
     "&[data-composing]": {
       // Reveal what the IME is composing. Without this the author types blind through a CJK
       // composition, which is the one way this technique can fail outright.
-      color: _
+      color: j
     }
   },
   // Keep textarea glyphs aligned with the highlighted rows.
   textareaGutter: {
-    paddingLeft: `calc(${k} + var(${ae}) + ${ie})`
+    ...p,
+    paddingLeft: `calc(${x} + var(${se}) + ${ne})`
   },
   // Unsupported browsers fall back to the native rows height.
   autoSize: {
@@ -147,44 +152,53 @@ const Dt = 2e3, ae = "--zenith-code-gutter", $e = {
     whiteSpace: "pre-wrap",
     overflowWrap: "break-word"
   },
+  // The UA gives `<code>` its own monospace family and size, so the pre's metrics would not reach
+  // the rows without this.
+  code: {
+    fontFamily: Ie,
+    fontSize: "1em"
+  },
   // Width constraints below require a block formatting context.
   codeRows: {
     display: "block"
   },
   // Give the sticky gutter and active-line band the full width of unwrapped code.
   codeNoWrap: {
+    ...p,
     width: "max-content",
     minWidth: "100%"
   },
   line: {
+    ...p,
     display: "flex",
     width: "100%"
   },
   /** The band under the caret's line. See `caretLine` in the component for when it is on. */
   lineActive: {
-    backgroundImage: `linear-gradient(${We}, ${We})`
+    backgroundImage: `linear-gradient(${Re}, ${Re})`
   },
   lineNumber: {
     userSelect: "none",
     textAlign: "right",
     flexGrow: 0,
     flexShrink: 0,
-    color: ne,
+    color: le,
     boxSizing: "border-box",
-    width: `calc(var(${ae}) + ${k} + ${ie})`,
-    paddingLeft: k,
-    paddingRight: ie,
+    width: `calc(var(${se}) + ${x} + ${ne})`,
+    paddingLeft: x,
+    paddingRight: ne,
     // Pinned, so a long line scrolled sideways does not take the numbers with it. Opaque, because
     // scrolled code passes underneath.
     position: "sticky",
     left: 0,
-    backgroundColor: oe
+    backgroundColor: ie
   },
   /** The caret's line number, lifted out of the gutter's grey. */
   lineNumberActive: {
-    color: _
+    color: j
   },
   lineContent: {
+    ...p,
     minWidth: 0,
     flexGrow: 1,
     flexShrink: 1,
@@ -197,33 +211,33 @@ const Dt = 2e3, ae = "--zenith-code-gutter", $e = {
   diagnosticError: {
     textDecorationLine: "underline",
     textDecorationStyle: "wavy",
-    textDecorationColor: y.error.rule,
+    textDecorationColor: k.error.rule,
     textDecorationSkipInk: "none",
     textUnderlineOffset: "0.2em"
   },
   diagnosticWarning: {
     textDecorationLine: "underline",
     textDecorationStyle: "wavy",
-    textDecorationColor: y.warning.rule,
+    textDecorationColor: k.warning.rule,
     textDecorationSkipInk: "none",
     textUnderlineOffset: "0.2em"
   },
   diagnosticInfo: {
     textDecorationLine: "underline",
     textDecorationStyle: "wavy",
-    textDecorationColor: y.info.rule,
+    textDecorationColor: k.info.rule,
     textDecorationSkipInk: "none",
     textUnderlineOffset: "0.2em"
   },
-  numberError: { color: y.error.number },
-  numberWarning: { color: y.warning.number },
-  numberInfo: { color: y.info.number },
+  numberError: { color: k.error.number },
+  numberWarning: { color: k.warning.number },
+  numberInfo: { color: k.info.number },
   format: {
     position: "absolute",
-    top: ze,
-    right: ze,
+    top: We,
+    right: We,
     zIndex: 1,
-    backgroundColor: oe,
+    backgroundColor: ie,
     opacity: 0,
     transitionProperty: "opacity",
     transitionDuration: "120ms",
@@ -238,6 +252,7 @@ const Dt = 2e3, ae = "--zenith-code-gutter", $e = {
     "&[data-format-state='pending']": { opacity: 1 }
   },
   srOnly: {
+    ...p,
     position: "absolute",
     width: "1px",
     height: "1px",
@@ -248,7 +263,7 @@ const Dt = 2e3, ae = "--zenith-code-gutter", $e = {
     clip: "rect(0, 0, 0, 0)",
     whiteSpace: "nowrap"
   }
-}), It = (se) => /* @__PURE__ */ j(
+}), Nt = (ce) => /* @__PURE__ */ Y(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -260,7 +275,7 @@ const Dt = 2e3, ae = "--zenith-code-gutter", $e = {
     strokeLinejoin: "round",
     "aria-hidden": "true",
     focusable: "false",
-    ...se,
+    ...ce,
     children: [
       /* @__PURE__ */ n("path", { d: "M4 5h16" }),
       /* @__PURE__ */ n("path", { d: "M9 10h11" }),
@@ -268,262 +283,263 @@ const Dt = 2e3, ae = "--zenith-code-gutter", $e = {
       /* @__PURE__ */ n("path", { d: "M4 20h16" })
     ]
   }
-), Ot = t.forwardRef(function({
-  value: ce,
-  defaultValue: Te,
-  onValueChange: z,
-  onChange: W,
-  onKeyDown: R,
-  onBlur: $,
-  onFocus: D,
-  onSelect: T,
-  onScroll: I,
+), jt = r.forwardRef(function({
+  value: de,
+  defaultValue: Me,
+  onValueChange: W,
+  onChange: R,
+  onKeyDown: $,
+  onBlur: D,
+  onFocus: T,
+  onSelect: I,
+  onScroll: M,
   onCompositionStart: N,
-  onCompositionEnd: M,
-  language: Y,
-  wrap: A = !1,
-  resize: Ie,
-  indentWithTab: de = !1,
-  indentSize: E = 2,
-  invalid: ue = !1,
+  onCompositionEnd: A,
+  language: P,
+  wrap: E = !1,
+  resize: Ne,
+  indentWithTab: ue = !1,
+  indentSize: L = 2,
+  invalid: fe = !1,
   readOnly: u = !1,
   disabled: f = !1,
-  showLineNumbers: p = !1,
-  diagnostics: L,
+  showLineNumbers: v = !1,
+  diagnostics: G,
   onFormat: d,
   onFormatError: h,
-  formatLabel: Ne = "Format code",
-  formattedLabel: fe = "Formatted",
-  formatErrorLabel: P = "Formatting failed",
-  autoSize: F = !1,
-  maxRows: he,
-  rows: ge,
-  className: Me,
-  style: me,
-  spellCheck: Ae = !1,
-  autoComplete: Ee = "off",
-  autoCorrect: Le = "off",
-  autoCapitalize: Ge = "off",
-  dir: Ke = "ltr",
-  ...Z
-}, x) {
-  const r = Tt(), pe = `${t.useId()}-diagnostics`, q = ce !== void 0, [Ue, Be] = t.useState(Te ?? ""), a = q ? ce : Ue, ve = wt(), be = t.useRef(null), [ye, ke] = t.useState(!1), G = t.useRef(null), He = t.useCallback(
+  formatLabel: Ae = "Format code",
+  formattedLabel: he = "Formatted",
+  formatErrorLabel: F = "Formatting failed",
+  autoSize: Z = !1,
+  maxRows: ge,
+  rows: me,
+  className: Ee,
+  style: pe,
+  spellCheck: Le = !1,
+  autoComplete: Ge = "off",
+  autoCorrect: Ke = "off",
+  autoCapitalize: Ue = "off",
+  dir: Be = "ltr",
+  ...q
+}, S) {
+  const t = Mt(), ve = `${r.useId()}-diagnostics`, J = de !== void 0, [He, Oe] = r.useState(Me ?? ""), a = J ? de : He, be = zt(), ye = r.useRef(null), [ke, xe] = r.useState(!1), K = r.useRef(null), Xe = r.useCallback(
     (e) => {
-      G.current = e, typeof x == "function" ? x(e) : x && (x.current = e);
+      K.current = e, typeof S == "function" ? S(e) : S && (S.current = e);
     },
-    [x]
-  ), S = t.useRef(!1), v = t.useCallback(
+    [S]
+  ), w = r.useRef(!1), b = r.useCallback(
     (e) => {
-      q || Be(e), z == null || z(e);
+      J || Oe(e), W == null || W(e);
     },
-    [q, z]
-  ), w = t.useMemo(() => a.split(`
-`).length, [a]), xe = t.useMemo(
-    () => Ct(L, w),
-    [L, w]
-  ), J = t.useMemo(
-    () => zt(L, w),
-    [L, w]
-  ), g = p || xe.size > 0, [Oe, Q] = t.useState(null), K = t.useCallback(() => {
+    [J, W]
+  ), C = r.useMemo(() => a.split(`
+`).length, [a]), Se = r.useMemo(
+    () => Wt(G, C),
+    [G, C]
+  ), Q = r.useMemo(
+    () => Rt(G, C),
+    [G, C]
+  ), g = v || Se.size > 0, [_e, V] = r.useState(null), U = r.useCallback(() => {
     if (!g) return;
-    const e = G.current;
+    const e = K.current;
     if (e !== null) {
       if (e.selectionStart !== e.selectionEnd) {
-        Q(null);
+        V(null);
         return;
       }
-      Q(Wt(e.value, e.selectionStart ?? 0));
+      V($t(e.value, e.selectionStart ?? 0));
     }
-  }, [g]), Xe = t.useCallback(
+  }, [g]), je = r.useCallback(
     (e) => {
-      v(e.target.value), W == null || W(e);
+      b(e.target.value), R == null || R(e);
     },
-    [v, W]
-  ), _e = t.useCallback(
+    [b, R]
+  ), Ye = r.useCallback(
     (e) => {
-      K(), T == null || T(e);
+      U(), I == null || I(e);
     },
-    [T, K]
-  ), je = t.useCallback(
+    [I, U]
+  ), Pe = r.useCallback(
     (e) => {
-      K(), D == null || D(e);
+      U(), T == null || T(e);
     },
-    [D, K]
-  ), U = t.useRef(!1), [B, V] = t.useState(!1), [Ye, Se] = t.useState(""), b = t.useRef(null);
-  t.useEffect(
+    [T, U]
+  ), B = r.useRef(!1), [H, ee] = r.useState(!1), [Fe, we] = r.useState(""), y = r.useRef(null);
+  r.useEffect(
     () => () => {
-      b.current !== null && clearTimeout(b.current);
+      y.current !== null && clearTimeout(y.current);
     },
     []
   );
-  const H = t.useCallback((e) => {
-    Se(e), b.current !== null && clearTimeout(b.current), b.current = setTimeout(() => {
-      b.current = null, Se("");
-    }, Dt);
-  }, []), ee = t.useCallback(async () => {
+  const O = r.useCallback((e) => {
+    we(e), y.current !== null && clearTimeout(y.current), y.current = setTimeout(() => {
+      y.current = null, we("");
+    }, It);
+  }, []), te = r.useCallback(async () => {
     if (d === void 0 || u || f) return;
-    const e = G.current;
-    if (e === null || U.current) return;
+    const e = K.current;
+    if (e === null || B.current) return;
     const o = e.value;
-    U.current = !0, V(!0);
+    B.current = !0, ee(!0);
     let i;
     try {
       i = await d(o);
-    } catch (X) {
-      U.current = !1, V(!1), H(P), h == null || h(X ?? new Error("Formatting failed"));
+    } catch (_) {
+      B.current = !1, ee(!1), O(F), h == null || h(_ ?? new Error("Formatting failed"));
       return;
     }
-    U.current = !1, V(!1);
-    const s = G.current;
+    B.current = !1, ee(!1);
+    const s = K.current;
     if (s !== null) {
       if (s.value !== o) {
-        H(P), h == null || h(
+        O(F), h == null || h(
           new Error("Formatting discarded: the value changed while formatting")
         );
         return;
       }
       if (i !== o) {
-        const X = Rt(o, i, s.selectionStart ?? 0);
-        s.value = i, s.setSelectionRange(X, X), v(i);
+        const _ = Dt(o, i, s.selectionStart ?? 0);
+        s.value = i, s.setSelectionRange(_, _), b(i);
       }
-      H(fe);
+      O(he);
     }
   }, [
-    H,
-    v,
+    O,
+    b,
     f,
-    P,
-    fe,
+    F,
+    he,
     d,
     h,
     u
-  ]), Pe = t.useCallback(
+  ]), Ze = r.useCallback(
     (e) => {
-      if (R == null || R(e), e.defaultPrevented || u || f) return;
+      if ($ == null || $(e), e.defaultPrevented || u || f) return;
       if (d !== void 0 && e.altKey && e.shiftKey && !e.ctrlKey && !e.metaKey && (e.code === "KeyF" || e.key.toLowerCase() === "f")) {
-        e.preventDefault(), S.current = !1, ee();
+        e.preventDefault(), w.current = !1, te();
         return;
       }
-      if (!de) return;
+      if (!ue) return;
       if (e.key === "Escape") {
-        S.current = !0;
+        w.current = !0;
         return;
       }
       if (e.key !== "Tab") {
-        S.current = !1;
+        w.current = !1;
         return;
       }
-      if (S.current || e.ctrlKey || e.metaKey || e.altKey)
+      if (w.current || e.ctrlKey || e.metaKey || e.altKey)
         return;
-      const o = e.currentTarget, i = kt(
+      const o = e.currentTarget, i = St(
         {
           value: o.value,
           selectionStart: o.selectionStart ?? 0,
           selectionEnd: o.selectionEnd ?? 0
         },
-        { outdent: e.shiftKey, indentSize: E }
+        { outdent: e.shiftKey, indentSize: L }
       );
-      i.value === o.value && i.selectionStart === o.selectionStart && i.selectionEnd === o.selectionEnd || (e.preventDefault(), o.value = i.value, o.setSelectionRange(i.selectionStart, i.selectionEnd), v(i.value));
+      i.value === o.value && i.selectionStart === o.selectionStart && i.selectionEnd === o.selectionEnd || (e.preventDefault(), o.value = i.value, o.setSelectionRange(i.selectionStart, i.selectionEnd), b(i.value));
     },
     [
-      v,
+      b,
       f,
-      E,
-      de,
+      L,
+      ue,
       d,
-      R,
+      $,
       u,
-      ee
+      te
     ]
-  ), Fe = t.useCallback(
+  ), qe = r.useCallback(
     (e) => {
-      S.current = !1, Q(null), $ == null || $(e);
+      w.current = !1, V(null), D == null || D(e);
     },
-    [$]
-  ), Ze = t.useCallback(
+    [D]
+  ), Je = r.useCallback(
     (e) => {
-      const o = be.current;
-      o !== null && (o.scrollTop = e.currentTarget.scrollTop, o.scrollLeft = e.currentTarget.scrollLeft), I == null || I(e);
+      const o = ye.current;
+      o !== null && (o.scrollTop = e.currentTarget.scrollTop, o.scrollLeft = e.currentTarget.scrollLeft), M == null || M(e);
     },
-    [I]
-  ), qe = t.useCallback(
+    [M]
+  ), Qe = r.useCallback(
     (e) => {
-      ke(!0), N == null || N(e);
+      xe(!0), N == null || N(e);
     },
     [N]
-  ), Je = t.useCallback(
+  ), Ve = r.useCallback(
     (e) => {
-      ke(!1), M == null || M(e);
+      xe(!1), A == null || A(e);
     },
-    [M]
-  ), te = g ? a : a.endsWith(`
-`) ? `${a} ` : a, C = t.useMemo(
-    () => xt(te, Y),
-    [te, Y]
-  ), O = t.useMemo(
+    [A]
+  ), re = g ? a : a.endsWith(`
+`) ? `${a} ` : a, z = r.useMemo(
+    () => wt(re, P),
+    [re, P]
+  ), X = r.useMemo(
     () => g ? a.split(`
 `) : null,
     [a, g]
-  ), we = t.useMemo(
-    () => g && C !== null ? St(C) : null,
-    [C, g]
-  ), Ce = A ? r.wrap : r.noWrap, re = Ie ?? (F ? "none" : "vertical"), Qe = re === "vertical" ? r.resizeVertical : re === "horizontal" ? r.resizeHorizontal : re === "both" ? r.resizeBoth : r.resizeNone, Ve = F ? {
-    minHeight: `calc(${ge ?? 3} * ${le} + ${k} * 2)`,
-    maxHeight: he === void 0 ? void 0 : `calc(${he} * ${le} + ${k} * 2)`
-  } : void 0, et = p ? {
-    [ae]: `${$t(w)}ch`,
-    ...me
-  } : me, tt = J.length === 0 ? Z["aria-describedby"] : [Z["aria-describedby"], pe].filter(Boolean).join(" "), rt = {
-    error: r.diagnosticError,
-    warning: r.diagnosticWarning,
-    info: r.diagnosticInfo
-  }, ot = {
-    error: r.numberError,
-    warning: r.numberWarning,
-    info: r.numberInfo
+  ), Ce = r.useMemo(
+    () => g && z !== null ? Ct(z) : null,
+    [z, g]
+  ), ze = E ? t.wrap : t.noWrap, oe = Ne ?? (Z ? "none" : "vertical"), et = oe === "vertical" ? t.resizeVertical : oe === "horizontal" ? t.resizeHorizontal : oe === "both" ? t.resizeBoth : t.resizeNone, tt = Z ? {
+    minHeight: `calc(${me ?? 3} * ${ae} + ${x} * 2)`,
+    maxHeight: ge === void 0 ? void 0 : `calc(${ge} * ${ae} + ${x} * 2)`
+  } : void 0, rt = v ? {
+    [se]: `${Tt(C)}ch`,
+    ...pe
+  } : pe, ot = Q.length === 0 ? q["aria-describedby"] : [q["aria-describedby"], ve].filter(Boolean).join(" "), it = {
+    error: t.diagnosticError,
+    warning: t.diagnosticWarning,
+    info: t.diagnosticInfo
+  }, nt = {
+    error: t.numberError,
+    warning: t.numberWarning,
+    info: t.numberInfo
   };
-  return /* @__PURE__ */ j(
+  return /* @__PURE__ */ Y(
     "div",
     {
       "data-slot": "code-editor",
       [c]: "code-editor",
-      "data-language": Y,
-      "data-invalid": ue || void 0,
+      "data-language": P,
+      "data-invalid": fe || void 0,
       "data-disabled": f || void 0,
       "data-readonly": u || void 0,
-      "data-formatting": B || void 0,
+      "data-formatting": H || void 0,
       className: m(
-        r.root,
-        p ? r.rootDisabledGutter : void 0,
-        d === void 0 ? void 0 : r.rootFormatReveal,
-        Me
+        t.root,
+        v ? t.rootDisabledGutter : void 0,
+        d === void 0 ? void 0 : t.rootFormatReveal,
+        Ee
       ),
-      style: et,
+      style: rt,
       children: [
         /* @__PURE__ */ n(
           "pre",
           {
-            ref: be,
+            ref: ye,
             "aria-hidden": "true",
             "data-slot": "code-editor-highlight",
             [c]: "code-editor-highlight",
-            "data-composing": ye || void 0,
+            "data-composing": ke || void 0,
             className: m(
-              r.highlight,
-              p ? r.highlightGutter : void 0,
-              Ce
+              t.highlight,
+              v ? t.highlightGutter : void 0,
+              ze
             ),
-            style: { tabSize: E },
+            style: { tabSize: L },
             children: /* @__PURE__ */ n(
               "code",
               {
                 className: m(
-                  O === null ? void 0 : r.codeRows,
-                  O !== null && !A ? r.codeNoWrap : void 0
+                  t.code,
+                  X === null ? void 0 : t.codeRows,
+                  X !== null && !E ? t.codeNoWrap : void 0
                 ),
-                children: O === null ? C === null ? te : ve(C) : O.map((e, o) => {
-                  const i = xe.get(o + 1), s = Oe === o;
-                  return /* @__PURE__ */ j(
+                children: X === null ? z === null ? re : be(z) : X.map((e, o) => {
+                  const i = Se.get(o + 1), s = _e === o;
+                  return /* @__PURE__ */ Y(
                     "span",
                     {
                       "data-slot": "code-editor-line",
@@ -532,38 +548,38 @@ const Dt = 2e3, ae = "--zenith-code-gutter", $e = {
                       "data-active": s || void 0,
                       "data-severity": i,
                       className: m(
-                        r.line,
-                        s ? r.lineActive : void 0
+                        t.line,
+                        s ? t.lineActive : void 0
                       ),
                       children: [
-                        p ? /* @__PURE__ */ n(
+                        v ? /* @__PURE__ */ n(
                           "span",
                           {
                             "data-slot": "code-editor-line-number",
                             [c]: "code-editor-line-number",
                             className: m(
-                              r.lineNumber,
-                              s ? r.lineNumberActive : void 0,
-                              i === void 0 ? void 0 : ot[i]
+                              t.lineNumber,
+                              s ? t.lineNumberActive : void 0,
+                              i === void 0 ? void 0 : nt[i]
                             ),
                             children: o + 1
                           }
                         ) : null,
-                        /* @__PURE__ */ j(
+                        /* @__PURE__ */ Y(
                           "span",
                           {
                             "data-slot": "code-editor-line-content",
                             [c]: "code-editor-line-content",
                             className: m(
-                              r.lineContent,
-                              A ? r.lineContentWrap : void 0
+                              t.lineContent,
+                              E ? t.lineContentWrap : void 0
                             ),
                             children: [
                               /* @__PURE__ */ n(
                                 "span",
                                 {
-                                  className: i === void 0 ? void 0 : rt[i],
-                                  children: we === null ? e : ve(we[o] ?? [])
+                                  className: i === void 0 ? void 0 : it[i],
+                                  children: Ce === null ? e : be(Ce[o] ?? [])
                                 }
                               ),
                               `
@@ -583,67 +599,67 @@ const Dt = 2e3, ae = "--zenith-code-gutter", $e = {
         /* @__PURE__ */ n(
           "textarea",
           {
-            ...Z,
-            ref: He,
+            ...q,
+            ref: Xe,
             "data-slot": "code-editor-input",
             [c]: "code-editor-input",
             value: a,
-            rows: ge,
-            onChange: Xe,
-            onKeyDown: Pe,
-            onFocus: je,
-            onBlur: Fe,
-            onSelect: _e,
-            onScroll: Ze,
-            onCompositionStart: qe,
-            onCompositionEnd: Je,
-            "data-composing": ye || void 0,
+            rows: me,
+            onChange: je,
+            onKeyDown: Ze,
+            onFocus: Pe,
+            onBlur: qe,
+            onSelect: Ye,
+            onScroll: Je,
+            onCompositionStart: Qe,
+            onCompositionEnd: Ve,
+            "data-composing": ke || void 0,
             readOnly: u,
             disabled: f,
-            "aria-invalid": ue || void 0,
-            "aria-describedby": tt,
-            "aria-busy": B || void 0,
-            spellCheck: Ae,
-            autoComplete: Ee,
-            autoCorrect: Le,
-            autoCapitalize: Ge,
-            dir: Ke,
-            wrap: A ? "soft" : "off",
-            style: { tabSize: E, ...Ve },
+            "aria-invalid": fe || void 0,
+            "aria-describedby": ot,
+            "aria-busy": H || void 0,
+            spellCheck: Le,
+            autoComplete: Ge,
+            autoCorrect: Ke,
+            autoCapitalize: Ue,
+            dir: Be,
+            wrap: E ? "soft" : "off",
+            style: { tabSize: L, ...tt },
             className: m(
-              r.textarea,
-              p ? r.textareaGutter : void 0,
-              F ? r.autoSize : void 0,
-              Ce,
-              Qe
+              t.textarea,
+              v ? t.textareaGutter : void 0,
+              Z ? t.autoSize : void 0,
+              ze,
+              et
             )
           }
         ),
         d === void 0 ? null : /* @__PURE__ */ n(
-          yt,
+          xt,
           {
             type: "button",
             variant: "ghost",
             size: "icon-sm",
-            "data-format-state": B ? "pending" : "idle",
-            "aria-label": Ne,
-            disabled: f || u || B,
-            className: r.format,
+            "data-format-state": H ? "pending" : "idle",
+            "aria-label": Ae,
+            disabled: f || u || H,
+            className: t.format,
             onMouseDown: (e) => e.preventDefault(),
             onClick: () => {
-              ee();
+              te();
             },
-            children: /* @__PURE__ */ n(It, {})
+            children: /* @__PURE__ */ n(Nt, {})
           }
         ),
-        J.length === 0 ? null : /* @__PURE__ */ n(
+        Q.length === 0 ? null : /* @__PURE__ */ n(
           "ul",
           {
-            id: pe,
+            id: ve,
             "data-slot": "code-editor-diagnostics",
             [c]: "code-editor-diagnostics",
-            className: r.srOnly,
-            children: J.map((e, o) => /* @__PURE__ */ n("li", { children: `${e.severity ?? "error"}, line ${e.line}${e.column === void 0 ? "" : `, column ${e.column}`}: ${e.message}` }, o))
+            className: t.srOnly,
+            children: Q.map((e, o) => /* @__PURE__ */ n("li", { children: `${e.severity ?? "error"}, line ${e.line}${e.column === void 0 ? "" : `, column ${e.column}`}: ${e.message}` }, o))
           }
         ),
         d === void 0 ? null : /* @__PURE__ */ n(
@@ -653,8 +669,8 @@ const Dt = 2e3, ae = "--zenith-code-gutter", $e = {
             "aria-live": "polite",
             "data-slot": "code-editor-format-status",
             [c]: "code-editor-format-status",
-            className: r.srOnly,
-            children: Ye
+            className: t.srOnly,
+            children: Fe
           }
         )
       ]
@@ -662,6 +678,6 @@ const Dt = 2e3, ae = "--zenith-code-gutter", $e = {
   );
 });
 export {
-  Ot as CodeEditor
+  jt as CodeEditor
 };
 //# sourceMappingURL=code-editor.js.map