@epilot/zenith-react 0.1.0-next.0

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

@@ -0,0 +1,667 @@
+import { jsxs as j, jsx as n } from "react/jsx-runtime";
+import * as t 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, semInfoUi as st, semWarningUi as ct, semErrorUi 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, semFocusRing 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 = {
+  ...l.margin(0),
+  ...l.borderWidth(0),
+  ...l.borderStyle("none"),
+  ...l.padding(k),
+  fontFamily: gt,
+  fontSize: ht,
+  lineHeight: le,
+  letterSpacing: ft,
+  fontWeight: ut,
+  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({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    minWidth: 0,
+    position: "relative",
+    backgroundColor: oe,
+    ...l.borderWidth(bt),
+    ...l.borderStyle("solid"),
+    ...l.borderColor(vt),
+    borderRadius: pt,
+    // 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
+    },
+    "&[data-invalid]": {
+      ...l.borderColor(De)
+    },
+    "&[data-disabled]": {
+      backgroundColor: Re
+    }
+  },
+  // Repaint the opaque gutter when the surrounding field is disabled.
+  rootDisabledGutter: {
+    [`&[data-disabled] [${c}='code-editor-line-number']`]: {
+      backgroundColor: Re
+    }
+  },
+  // focus-within would keep the overlay visible throughout the editing session.
+  rootFormatReveal: {
+    "&:hover [data-format-state]": { opacity: 1 }
+  },
+  // The textarea defines the box; this decorative layer stretches without measurement.
+  highlight: {
+    ...$e,
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    overflowX: "hidden",
+    overflowY: "hidden",
+    // Paint only: it must never take a click, a caret or a selection away from the control.
+    pointerEvents: "none",
+    userSelect: "none",
+    color: _,
+    "&[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.
+      opacity: 0
+    }
+  },
+  /** With a gutter, the left padding moves into the number cell so the cell can pin flush. */
+  highlightGutter: {
+    paddingLeft: 0
+  },
+  textarea: {
+    ...$e,
+    position: "relative",
+    width: "100%",
+    minWidth: 0,
+    backgroundColor: "transparent",
+    // The glyphs come from the layer beneath; only the caret is painted here.
+    color: "transparent",
+    caretColor: _,
+    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,
+      // Placeholders are the textarea's own paint, so they need a real colour despite the above.
+      WebkitTextFillColor: ne
+    },
+    "::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
+    },
+    ":disabled": {
+      cursor: "not-allowed"
+    },
+    "&[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: _
+    }
+  },
+  // Keep textarea glyphs aligned with the highlighted rows.
+  textareaGutter: {
+    paddingLeft: `calc(${k} + var(${ae}) + ${ie})`
+  },
+  // Unsupported browsers fall back to the native rows height.
+  autoSize: {
+    fieldSizing: "content"
+  },
+  resizeNone: {
+    resize: "none"
+  },
+  resizeVertical: {
+    resize: "vertical"
+  },
+  resizeHorizontal: {
+    resize: "horizontal"
+  },
+  resizeBoth: {
+    resize: "both"
+  },
+  noWrap: {
+    whiteSpace: "pre",
+    overflowWrap: "normal"
+  },
+  wrap: {
+    whiteSpace: "pre-wrap",
+    overflowWrap: "break-word"
+  },
+  // 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: {
+    width: "max-content",
+    minWidth: "100%"
+  },
+  line: {
+    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})`
+  },
+  lineNumber: {
+    userSelect: "none",
+    textAlign: "right",
+    flexGrow: 0,
+    flexShrink: 0,
+    color: ne,
+    boxSizing: "border-box",
+    width: `calc(var(${ae}) + ${k} + ${ie})`,
+    paddingLeft: k,
+    paddingRight: ie,
+    // 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
+  },
+  /** The caret's line number, lifted out of the gutter's grey. */
+  lineNumberActive: {
+    color: _
+  },
+  lineContent: {
+    minWidth: 0,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "auto"
+  },
+  lineContentWrap: {
+    overflowWrap: "break-word"
+  },
+  // Underline only the text; a line fill would compete with selection and active-line paint.
+  diagnosticError: {
+    textDecorationLine: "underline",
+    textDecorationStyle: "wavy",
+    textDecorationColor: y.error.rule,
+    textDecorationSkipInk: "none",
+    textUnderlineOffset: "0.2em"
+  },
+  diagnosticWarning: {
+    textDecorationLine: "underline",
+    textDecorationStyle: "wavy",
+    textDecorationColor: y.warning.rule,
+    textDecorationSkipInk: "none",
+    textUnderlineOffset: "0.2em"
+  },
+  diagnosticInfo: {
+    textDecorationLine: "underline",
+    textDecorationStyle: "wavy",
+    textDecorationColor: y.info.rule,
+    textDecorationSkipInk: "none",
+    textUnderlineOffset: "0.2em"
+  },
+  numberError: { color: y.error.number },
+  numberWarning: { color: y.warning.number },
+  numberInfo: { color: y.info.number },
+  format: {
+    position: "absolute",
+    top: ze,
+    right: ze,
+    zIndex: 1,
+    backgroundColor: oe,
+    opacity: 0,
+    transitionProperty: "opacity",
+    transitionDuration: "120ms",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0s"
+    },
+    "@media (hover: none)": {
+      opacity: 1
+    },
+    // After the base, so they win by source order (AGENTS.md rule 2).
+    "&:focus-visible": { opacity: 1 },
+    "&[data-format-state='pending']": { opacity: 1 }
+  },
+  srOnly: {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    ...l.padding(0),
+    ...l.margin("-1px"),
+    overflowX: "hidden",
+    overflowY: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap"
+  }
+}), It = (se) => /* @__PURE__ */ j(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    focusable: "false",
+    ...se,
+    children: [
+      /* @__PURE__ */ n("path", { d: "M4 5h16" }),
+      /* @__PURE__ */ n("path", { d: "M9 10h11" }),
+      /* @__PURE__ */ n("path", { d: "M9 15h7" }),
+      /* @__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,
+  onCompositionStart: N,
+  onCompositionEnd: M,
+  language: Y,
+  wrap: A = !1,
+  resize: Ie,
+  indentWithTab: de = !1,
+  indentSize: E = 2,
+  invalid: ue = !1,
+  readOnly: u = !1,
+  disabled: f = !1,
+  showLineNumbers: p = !1,
+  diagnostics: L,
+  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(
+    (e) => {
+      G.current = e, typeof x == "function" ? x(e) : x && (x.current = e);
+    },
+    [x]
+  ), S = t.useRef(!1), v = t.useCallback(
+    (e) => {
+      q || Be(e), z == null || z(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(() => {
+    if (!g) return;
+    const e = G.current;
+    if (e !== null) {
+      if (e.selectionStart !== e.selectionEnd) {
+        Q(null);
+        return;
+      }
+      Q(Wt(e.value, e.selectionStart ?? 0));
+    }
+  }, [g]), Xe = t.useCallback(
+    (e) => {
+      v(e.target.value), W == null || W(e);
+    },
+    [v, W]
+  ), _e = t.useCallback(
+    (e) => {
+      K(), T == null || T(e);
+    },
+    [T, K]
+  ), je = t.useCallback(
+    (e) => {
+      K(), D == null || D(e);
+    },
+    [D, K]
+  ), U = t.useRef(!1), [B, V] = t.useState(!1), [Ye, Se] = t.useState(""), b = t.useRef(null);
+  t.useEffect(
+    () => () => {
+      b.current !== null && clearTimeout(b.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 () => {
+    if (d === void 0 || u || f) return;
+    const e = G.current;
+    if (e === null || U.current) return;
+    const o = e.value;
+    U.current = !0, V(!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"));
+      return;
+    }
+    U.current = !1, V(!1);
+    const s = G.current;
+    if (s !== null) {
+      if (s.value !== o) {
+        H(P), 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);
+      }
+      H(fe);
+    }
+  }, [
+    H,
+    v,
+    f,
+    P,
+    fe,
+    d,
+    h,
+    u
+  ]), Pe = t.useCallback(
+    (e) => {
+      if (R == null || R(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();
+        return;
+      }
+      if (!de) return;
+      if (e.key === "Escape") {
+        S.current = !0;
+        return;
+      }
+      if (e.key !== "Tab") {
+        S.current = !1;
+        return;
+      }
+      if (S.current || e.ctrlKey || e.metaKey || e.altKey)
+        return;
+      const o = e.currentTarget, i = kt(
+        {
+          value: o.value,
+          selectionStart: o.selectionStart ?? 0,
+          selectionEnd: o.selectionEnd ?? 0
+        },
+        { outdent: e.shiftKey, indentSize: E }
+      );
+      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));
+    },
+    [
+      v,
+      f,
+      E,
+      de,
+      d,
+      R,
+      u,
+      ee
+    ]
+  ), Fe = t.useCallback(
+    (e) => {
+      S.current = !1, Q(null), $ == null || $(e);
+    },
+    [$]
+  ), Ze = t.useCallback(
+    (e) => {
+      const o = be.current;
+      o !== null && (o.scrollTop = e.currentTarget.scrollTop, o.scrollLeft = e.currentTarget.scrollLeft), I == null || I(e);
+    },
+    [I]
+  ), qe = t.useCallback(
+    (e) => {
+      ke(!0), N == null || N(e);
+    },
+    [N]
+  ), Je = t.useCallback(
+    (e) => {
+      ke(!1), M == null || M(e);
+    },
+    [M]
+  ), te = g ? a : a.endsWith(`
+`) ? `${a} ` : a, C = t.useMemo(
+    () => xt(te, Y),
+    [te, Y]
+  ), O = t.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
+  };
+  return /* @__PURE__ */ j(
+    "div",
+    {
+      "data-slot": "code-editor",
+      [c]: "code-editor",
+      "data-language": Y,
+      "data-invalid": ue || void 0,
+      "data-disabled": f || void 0,
+      "data-readonly": u || void 0,
+      "data-formatting": B || void 0,
+      className: m(
+        r.root,
+        p ? r.rootDisabledGutter : void 0,
+        d === void 0 ? void 0 : r.rootFormatReveal,
+        Me
+      ),
+      style: et,
+      children: [
+        /* @__PURE__ */ n(
+          "pre",
+          {
+            ref: be,
+            "aria-hidden": "true",
+            "data-slot": "code-editor-highlight",
+            [c]: "code-editor-highlight",
+            "data-composing": ye || void 0,
+            className: m(
+              r.highlight,
+              p ? r.highlightGutter : void 0,
+              Ce
+            ),
+            style: { tabSize: E },
+            children: /* @__PURE__ */ n(
+              "code",
+              {
+                className: m(
+                  O === null ? void 0 : r.codeRows,
+                  O !== null && !A ? r.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(
+                    "span",
+                    {
+                      "data-slot": "code-editor-line",
+                      [c]: "code-editor-line",
+                      "data-line": o + 1,
+                      "data-active": s || void 0,
+                      "data-severity": i,
+                      className: m(
+                        r.line,
+                        s ? r.lineActive : void 0
+                      ),
+                      children: [
+                        p ? /* @__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]
+                            ),
+                            children: o + 1
+                          }
+                        ) : null,
+                        /* @__PURE__ */ j(
+                          "span",
+                          {
+                            "data-slot": "code-editor-line-content",
+                            [c]: "code-editor-line-content",
+                            className: m(
+                              r.lineContent,
+                              A ? r.lineContentWrap : void 0
+                            ),
+                            children: [
+                              /* @__PURE__ */ n(
+                                "span",
+                                {
+                                  className: i === void 0 ? void 0 : rt[i],
+                                  children: we === null ? e : ve(we[o] ?? [])
+                                }
+                              ),
+                              `
+`
+                            ]
+                          }
+                        )
+                      ]
+                    },
+                    o
+                  );
+                })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ n(
+          "textarea",
+          {
+            ...Z,
+            ref: He,
+            "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,
+            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 },
+            className: m(
+              r.textarea,
+              p ? r.textareaGutter : void 0,
+              F ? r.autoSize : void 0,
+              Ce,
+              Qe
+            )
+          }
+        ),
+        d === void 0 ? null : /* @__PURE__ */ n(
+          yt,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            "data-format-state": B ? "pending" : "idle",
+            "aria-label": Ne,
+            disabled: f || u || B,
+            className: r.format,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => {
+              ee();
+            },
+            children: /* @__PURE__ */ n(It, {})
+          }
+        ),
+        J.length === 0 ? null : /* @__PURE__ */ n(
+          "ul",
+          {
+            id: pe,
+            "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))
+          }
+        ),
+        d === void 0 ? null : /* @__PURE__ */ n(
+          "span",
+          {
+            role: "status",
+            "aria-live": "polite",
+            "data-slot": "code-editor-format-status",
+            [c]: "code-editor-format-status",
+            className: r.srOnly,
+            children: Ye
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Ot as CodeEditor
+};
+//# sourceMappingURL=code-editor.js.map