@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/checklist/StatusChecklist.js

@@ -0,0 +1,103 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useId as k } from "react";
+import { Badge as y } from "../Badge.js";
+import { Icon as C } from "../Icon.js";
+import { EmptyState as S } from "../Surface.js";
+import { cn as m } from "../../lib/cn.js";
+import { tallyChecklist as I } from "./tally.js";
+import { useUiStrings as j } from "../../lib/i18n/provider.js";
+import { useNumberFormat as z } from "../../lib/i18n/number-format.js";
+function d({
+  option: a,
+  children: l
+}) {
+  return /* @__PURE__ */ t(
+    y,
+    {
+      size: "sm",
+      tone: a.tone,
+      dot: !0,
+      pulse: a.pulse,
+      icon: a.icon,
+      "data-state": a.value,
+      children: l
+    }
+  );
+}
+function p({
+  item: a,
+  option: l
+}) {
+  return /* @__PURE__ */ i(
+    "li",
+    {
+      "data-state": a.state,
+      className: m(
+        "flex min-w-0 items-start gap-3 rounded-lg border border-border-subtle bg-surface px-3 py-2.5",
+        "transition-colors duration-(--dur-fast) ease-hover"
+      ),
+      children: [
+        /* @__PURE__ */ t(d, { option: l, children: l.label }),
+        /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ t("span", { className: "text-sm text-primary text-pretty", children: a.label }),
+          a.detail && /* @__PURE__ */ t("span", { className: "text-xs text-tertiary text-pretty", children: a.detail })
+        ] }),
+        a.action && /* @__PURE__ */ t("div", { className: "shrink-0", children: a.action })
+      ]
+    }
+  );
+}
+function G({
+  label: a,
+  states: l,
+  items: s,
+  order: f = "state",
+  emptyTitle: u,
+  emptyDescription: x,
+  emptyAction: h,
+  emptyIcon: g,
+  className: b
+}) {
+  const r = j().statusChecklist, N = z(), n = I(l, s), v = k(), w = (e) => n.find((o) => o.option.value === e).option;
+  return (
+    /* GROUP, NOT REGION. `role="region"` is a landmark, and a page carrying
+       three of these would offer three landmarks — the `landmark-unique`
+       finding the docs' code blocks already produced once. A checklist is
+       content, not page structure. */
+    /* @__PURE__ */ i("div", { role: "group", "aria-label": a, className: m("flex min-w-0 flex-col gap-4", b), children: [
+      /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center gap-2", children: n.map((e) => (
+        /* EVERY declared state, including the zeroes — see `tallyChecklist`. */
+        /* @__PURE__ */ t(d, { option: e.option, children: r.tally(N(e.count), e.option.label) }, e.option.value)
+      )) }),
+      s.length === 0 ? /* @__PURE__ */ t(
+        S,
+        {
+          icon: g ?? /* @__PURE__ */ t(C, { name: "list-checks", size: "lg" }),
+          title: u ?? r.empty,
+          description: x,
+          action: h
+        }
+      ) : f === "given" ? /* @__PURE__ */ t("ul", { className: "flex min-w-0 flex-col gap-2", children: s.map((e) => /* @__PURE__ */ t(p, { item: e, option: w(e.state) }, e.id)) }) : /* @__PURE__ */ t("div", { className: "flex min-w-0 flex-col gap-5", children: n.filter((e) => e.count > 0).map((e) => {
+        const o = `checklist-${v}-${e.option.value}`;
+        return /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-col gap-2", children: [
+          /* @__PURE__ */ i(
+            "p",
+            {
+              id: o,
+              className: "flex items-center gap-2 text-2xs font-semibold tracking-widest text-tertiary uppercase",
+              children: [
+                e.option.label,
+                /* @__PURE__ */ t("span", { className: "font-mono tabular-nums normal-case", children: e.count })
+              ]
+            }
+          ),
+          /* @__PURE__ */ t("ul", { "aria-labelledby": o, className: "flex min-w-0 flex-col gap-2", children: e.items.map((c) => /* @__PURE__ */ t(p, { item: c, option: e.option }, c.id)) })
+        ] }, e.option.value);
+      }) })
+    ] })
+  );
+}
+export {
+  G as StatusChecklist
+};
+//# sourceMappingURL=StatusChecklist.js.map

package/dist/components/checklist/StatusChecklist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusChecklist.js","sources":["../../../src/components/checklist/StatusChecklist.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport { Badge } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport { EmptyState } from \"../Surface\";\nimport type { StatusOption } from \"../StatusSelect\";\nimport { cn } from \"../../lib/cn\";\nimport { useNumberFormat, useUiStrings } from \"../../lib/i18n\";\nimport { tallyChecklist } from \"./tally\";\nimport type { ChecklistItem, ChecklistState, ChecklistTally } from \"./types\";\n\nexport type { ChecklistItem, ChecklistState, ChecklistTally };\n\n/* ============================================================================\n   STATUS CHECKLIST — what you have, what you are missing, and what that shape\n   is, in one read.\n\n   NOT A TODO LIST. A checklist with two states is a list of ticks, and a tick\n   answers one question: is it done. This answers a different one — WHAT KIND OF\n   missing is each of these — which only has an answer when the states are\n   meaningful categories the consumer defined. Two surfaces in one application\n   already need different words for the same control, which is exactly why the\n   vocabulary is a prop and this file contributes none of it. See `types.ts`.\n\n   THE SUMMARY IS THE POINT, AND IT IS NOT OPTIONAL. Reading twelve rows and\n   counting them is the work this control exists to remove; a switch to hide the\n   counts would be a switch to make it an ordinary list.\n\n   NEVER HUE ALONE — and the option's own `dot` is deliberately overruled. Every\n   chip here carries the state's WORD and a dot, in both the summary and each\n   row, because `tokens.mdx` names the bare coloured square as a `Dont` and that\n   promise belongs to the reader, not to whoever configured the states. `pulse`\n   IS honoured: a genuinely live state is a fact about the data, not about\n   legibility.\n   ========================================================================= */\n\nexport interface StatusChecklistProps<Key extends string = string> {\n  /**\n   * What this list IS — \"Evidence for the March filing\".\n   *\n   * Names the group, so somebody landing on it by keyboard learns what the\n   * counts are counting. Required for the same reason `KanbanBoard.label` is.\n   */\n  label: string;\n  /** The consumer's vocabulary, in the order the summary and groups read. */\n  states: readonly StatusOption<Key>[];\n  items: readonly ChecklistItem<Key>[];\n  /**\n   * `state` groups the rows under their state's heading; `given` renders them\n   * in the order supplied.\n   *\n   * GROUPED IS THE DEFAULT, and that is the opposite of what a checklist\n   * usually wants. A checklist you work down top to bottom should stay in its\n   * given order — but this control's stated job is to make the shape of the gap\n   * legible, and an interleaved list makes the reader do the sorting in their\n   * head while the summary above already claims to have done it for them.\n   * `given` is there for the case where the order is itself meaningful — a\n   * sequence, a priority, a filing order — because then regrouping destroys\n   * information the consumer put in deliberately.\n   */\n  order?: \"state\" | \"given\";\n  /** Shown when `items` is empty (absent means the provider's own words). `EmptyState` supplies the shape. */\n  emptyTitle?: ReactNode;\n  emptyDescription?: ReactNode;\n  emptyAction?: ReactNode;\n  emptyIcon?: ReactNode;\n  className?: string;\n}\n\nfunction StateChip<Key extends string>({\n  option,\n  children,\n}: {\n  option: StatusOption<Key>;\n  children: ReactNode;\n}) {\n  return (\n    <Badge\n      size=\"sm\"\n      tone={option.tone}\n      /* Forced, not read from the option — see the header note. */\n      dot\n      pulse={option.pulse}\n      icon={option.icon}\n      data-state={option.value}\n    >\n      {children}\n    </Badge>\n  );\n}\n\nfunction Row<Key extends string>({\n  item,\n  option,\n}: {\n  item: ChecklistItem<Key>;\n  option: StatusOption<Key>;\n}) {\n  return (\n    <li\n      data-state={item.state}\n      className={cn(\n        \"flex min-w-0 items-start gap-3 rounded-lg border border-border-subtle bg-surface px-3 py-2.5\",\n        \"transition-colors duration-(--dur-fast) ease-hover\",\n      )}\n    >\n      <StateChip option={option}>{option.label}</StateChip>\n      <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <span className=\"text-sm text-primary text-pretty\">{item.label}</span>\n        {item.detail && <span className=\"text-xs text-tertiary text-pretty\">{item.detail}</span>}\n      </div>\n      {/* The action a row can fire — a request, a link, a re-check. The consumer\n          renders the control; this only reserves the column and keeps it from\n          being squeezed by a long label. */}\n      {item.action && <div className=\"shrink-0\">{item.action}</div>}\n    </li>\n  );\n}\n\nexport function StatusChecklist<Key extends string = string>({\n  label,\n  states,\n  items,\n  order = \"state\",\n  emptyTitle,\n  emptyDescription,\n  emptyAction,\n  emptyIcon,\n  className,\n}: StatusChecklistProps<Key>) {\n  /* Throws on an unknown state, a duplicate, or no vocabulary at all — every\n     one of which otherwise renders as a plausible-looking shorter list. */\n  const strings = useUiStrings().statusChecklist;\n  const fmt = useNumberFormat();\n  const tally = tallyChecklist(states, items);\n  const uid = useId();\n  const optionFor = (key: Key): StatusOption<Key> =>\n    tally.find((entry) => entry.option.value === key)!.option;\n\n  return (\n    /* GROUP, NOT REGION. `role=\"region\"` is a landmark, and a page carrying\n       three of these would offer three landmarks — the `landmark-unique`\n       finding the docs' code blocks already produced once. A checklist is\n       content, not page structure. */\n    <div role=\"group\" aria-label={label} className={cn(\"flex min-w-0 flex-col gap-4\", className)}>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {tally.map((entry) => (\n          /* EVERY declared state, including the zeroes — see `tallyChecklist`. */\n          <StateChip key={entry.option.value} option={entry.option}>\n            {strings.tally(fmt(entry.count), entry.option.label)}\n          </StateChip>\n        ))}\n      </div>\n\n      {items.length === 0 ? (\n        <EmptyState\n          icon={emptyIcon ?? <Icon name=\"list-checks\" size=\"lg\" />}\n          title={emptyTitle ?? strings.empty}\n          description={emptyDescription}\n          action={emptyAction}\n        />\n      ) : order === \"given\" ? (\n        <ul className=\"flex min-w-0 flex-col gap-2\">\n          {items.map((item) => (\n            <Row key={item.id} item={item} option={optionFor(item.state)} />\n          ))}\n        </ul>\n      ) : (\n        <div className=\"flex min-w-0 flex-col gap-5\">\n          {tally\n            /* THE BODY DROPS EMPTY STATES, THE SUMMARY KEEPS THEM. A heading\n               over nothing reads as a section that failed to load, and the chip\n               above has already reported the zero in the one place where a zero\n               is legible. */\n            .filter((entry) => entry.count > 0)\n            .map((entry) => {\n              const headingId = `checklist-${uid}-${entry.option.value}`;\n              return (\n                <div key={entry.option.value} className=\"flex min-w-0 flex-col gap-2\">\n                  <p\n                    id={headingId}\n                    className=\"flex items-center gap-2 text-2xs font-semibold tracking-widest text-tertiary uppercase\"\n                  >\n                    {entry.option.label}\n                    <span className=\"font-mono tabular-nums normal-case\">{entry.count}</span>\n                  </p>\n                  {/* Labelled by the visible heading rather than by an\n                      `aria-label` repeating it — one string, and it stays in\n                      step with what is on screen. */}\n                  <ul aria-labelledby={headingId} className=\"flex min-w-0 flex-col gap-2\">\n                    {entry.items.map((item) => (\n                      <Row key={item.id} item={item} option={entry.option} />\n                    ))}\n                  </ul>\n                </div>\n              );\n            })}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["StateChip","option","children","jsx","Badge","Row","item","jsxs","cn","StatusChecklist","label","states","items","order","emptyTitle","emptyDescription","emptyAction","emptyIcon","className","strings","useUiStrings","fmt","useNumberFormat","tally","tallyChecklist","uid","useId","optionFor","key","entry","EmptyState","Icon","headingId"],"mappings":"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"}

package/dist/components/checklist/tally.js

@@ -0,0 +1,29 @@
+function r(e, a) {
+  if (e.length === 0)
+    throw new Error(
+      "StatusChecklist: `states` is empty — this component has no vocabulary of its own to fall back on."
+    );
+  const o = /* @__PURE__ */ new Map();
+  for (const t of e) {
+    if (o.has(t.value))
+      throw new Error(`StatusChecklist: two states share the value "${t.value}".`);
+    o.set(t.value, { option: t, count: 0, items: [] });
+  }
+  const i = /* @__PURE__ */ new Set();
+  for (const t of a) {
+    if (i.has(t.id))
+      throw new Error(`StatusChecklist: two items share the id "${t.id}".`);
+    i.add(t.id);
+    const s = o.get(t.state);
+    if (s === void 0)
+      throw new Error(
+        `StatusChecklist: item "${t.id}" is in state "${t.state}", which is not one of the declared states (${e.map((n) => n.value).join(", ")}).`
+      );
+    s.items.push(t), s.count += 1;
+  }
+  return e.map((t) => o.get(t.value));
+}
+export {
+  r as tallyChecklist
+};
+//# sourceMappingURL=tally.js.map

package/dist/components/checklist/tally.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tally.js","sources":["../../../src/components/checklist/tally.ts"],"sourcesContent":["import type { StatusOption } from \"../StatusSelect\";\nimport type { ChecklistItem, ChecklistTally } from \"./types\";\n\n/* ----------------------------------------------------------------------------\n   ONE TRAVERSAL, TWO READERS.\n\n   The summary counts and the grouped body are the same fact rendered twice, so\n   they are computed once. Two independent passes is how a summary comes to say\n   \"3 need\" over a list showing four of them — and the reader has no way to tell\n   which half is lying.\n   -------------------------------------------------------------------------- */\n\n/**\n * Split `items` across the declared `states`, in the order the states were\n * given.\n *\n * Every state appears in the result, INCLUDING EMPTY ONES. A zero is\n * information — \"nothing is blocking\" is the single most useful thing this\n * control ever says — and a chip that vanishes at zero is invisible at exactly\n * the moment its emptiness is the news, while also making the summary row\n * change width every time an item moves. The BODY is the other way round: see\n * `StatusChecklist`.\n *\n * Throws rather than tolerating: an unknown state key, a duplicate state, a\n * duplicate item id, or no states at all. Each of those renders as something\n * plausible if allowed through — an item silently dropped from a list whose\n * whole purpose is to be exhaustive is the worst failure this component has.\n */\nexport function tallyChecklist<Key extends string>(\n  states: readonly StatusOption<Key>[],\n  items: readonly ChecklistItem<Key>[],\n): ChecklistTally<Key>[] {\n  if (states.length === 0) {\n    throw new Error(\n      \"StatusChecklist: `states` is empty — this component has no vocabulary of its own to fall back on.\",\n    );\n  }\n\n  const buckets = new Map<Key, ChecklistTally<Key>>();\n  for (const option of states) {\n    if (buckets.has(option.value)) {\n      throw new Error(`StatusChecklist: two states share the value \"${option.value}\".`);\n    }\n    buckets.set(option.value, { option, count: 0, items: [] });\n  }\n\n  const seen = new Set<string>();\n  for (const item of items) {\n    if (seen.has(item.id)) {\n      throw new Error(`StatusChecklist: two items share the id \"${item.id}\".`);\n    }\n    seen.add(item.id);\n\n    const bucket = buckets.get(item.state);\n    if (bucket === undefined) {\n      throw new Error(\n        `StatusChecklist: item \"${item.id}\" is in state \"${item.state}\", which is not one of ` +\n          `the declared states (${states.map((s) => s.value).join(\", \")}).`,\n      );\n    }\n    bucket.items.push(item);\n    bucket.count += 1;\n  }\n\n  /* The declared order, not the map's. Same list the summary reads. */\n  return states.map((option) => buckets.get(option.value)!);\n}\n"],"names":["tallyChecklist","states","items","buckets","option","seen","item","bucket","s"],"mappings":"AA4BO,SAASA,EACdC,GACAC,GACuB;AACvB,MAAID,EAAO,WAAW;AACpB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAIJ,QAAME,wBAAc,IAAA;AACpB,aAAWC,KAAUH,GAAQ;AAC3B,QAAIE,EAAQ,IAAIC,EAAO,KAAK;AAC1B,YAAM,IAAI,MAAM,gDAAgDA,EAAO,KAAK,IAAI;AAElF,IAAAD,EAAQ,IAAIC,EAAO,OAAO,EAAE,QAAAA,GAAQ,OAAO,GAAG,OAAO,CAAA,GAAI;AAAA,EAC3D;AAEA,QAAMC,wBAAW,IAAA;AACjB,aAAWC,KAAQJ,GAAO;AACxB,QAAIG,EAAK,IAAIC,EAAK,EAAE;AAClB,YAAM,IAAI,MAAM,4CAA4CA,EAAK,EAAE,IAAI;AAEzE,IAAAD,EAAK,IAAIC,EAAK,EAAE;AAEhB,UAAMC,IAASJ,EAAQ,IAAIG,EAAK,KAAK;AACrC,QAAIC,MAAW;AACb,YAAM,IAAI;AAAA,QACR,0BAA0BD,EAAK,EAAE,kBAAkBA,EAAK,KAAK,+CACnCL,EAAO,IAAI,CAACO,MAAMA,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;AAAA,MAAA;AAGnE,IAAAD,EAAO,MAAM,KAAKD,CAAI,GACtBC,EAAO,SAAS;AAAA,EAClB;AAGA,SAAON,EAAO,IAAI,CAACG,MAAWD,EAAQ,IAAIC,EAAO,KAAK,CAAE;AAC1D;"}

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

@@ -0,0 +1,13 @@
+import { createContext as r, useContext as n } from "react";
+const e = r(null), i = e.Provider;
+function s(t) {
+  const o = n(e);
+  if (!o)
+    throw new Error(`<${t}> must be rendered inside a <CodeEditor>.`);
+  return o;
+}
+export {
+  i as CodeEditorProvider,
+  s as useCodeEditor
+};
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../src/components/code-editor/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\n/* ----------------------------------------------------------------------------\n   Shared state for `CodeEditor`'s parts.\n\n   A MODULE-PRIVATE CONTEXT PLUS A HOOK THAT THROWS, which is the shape every\n   multi-part component in this library uses (see `Panel.tsx`). The alternative\n   — threading a dozen props through a toolbar the consumer may have replaced —\n   makes a custom toolbar impossible without re-declaring the entire surface.\n\n   The throw is the point. `<CodeEditorCopyButton>` rendered outside a\n   `<CodeEditor>` would otherwise read `undefined` from a defaulted context and\n   copy an empty string: a button that looks right, reports nothing, and does\n   not work. Failing at the moment of the mistake, naming the missing parent, is\n   the only version of that anyone can act on.\n   -------------------------------------------------------------------------- */\n\n/** How the content is presented. `split` is source and preview side by side. */\nexport type CodeEditorView = \"source\" | \"rendered\" | \"split\";\n\nexport interface CodeEditorContextValue {\n  /** The current text — the source of truth for copying and for the preview. */\n  value: string;\n  /** Language name as given, before registry resolution. Null when unset. */\n  language: string | null;\n  /** Caption for the toolbar, usually a filename. */\n  filename?: string;\n  /** True when there is no textarea and the surface is a viewer. */\n  readOnly: boolean;\n  /** Soft wrap on. */\n  wrap: boolean;\n  setWrap: (next: boolean) => void;\n  /** Current presentation. */\n  view: CodeEditorView;\n  setView: (next: CodeEditorView) => void;\n  /**\n   * The views THIS instance can offer. One entry means there is nothing to\n   * switch between, so the switch does not render — the configuration is the\n   * switch, not a `showViewSwitch` prop.\n   */\n  views: readonly CodeEditorView[];\n  /** Copies `value` to the clipboard. */\n  copy: () => void;\n  /** True for a moment after a successful copy. */\n  copied: boolean;\n  /** Lines in `value`, for the gutter and for the expand affordance's label. */\n  lineCount: number;\n}\n\nconst CodeEditorContext = createContext<CodeEditorContextValue | null>(null);\n\nexport const CodeEditorProvider = CodeEditorContext.Provider;\n\nexport function useCodeEditor(component: string): CodeEditorContextValue {\n  const context = useContext(CodeEditorContext);\n  if (!context) {\n    throw new Error(`<${component}> must be rendered inside a <CodeEditor>.`);\n  }\n  return context;\n}\n"],"names":["CodeEditorContext","createContext","CodeEditorProvider","useCodeEditor","component","context","useContext"],"mappings":";AAiDA,MAAMA,IAAoBC,EAA6C,IAAI,GAE9DC,IAAqBF,EAAkB;AAE7C,SAASG,EAAcC,GAA2C;AACvE,QAAMC,IAAUC,EAAWN,CAAiB;AAC5C,MAAI,CAACK;AACH,UAAM,IAAI,MAAM,IAAID,CAAS,2CAA2C;AAE1E,SAAOC;AACT;"}

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

@@ -0,0 +1,93 @@
+const f = { "(": ")", "[": "]", "{": "}" }, S = /* @__PURE__ */ new Set(['"', "'", "`"]), O = /* @__PURE__ */ new Set([")", "]", "}"]), E = /[\p{L}\p{N}_$]/u;
+function m(t, n, s, e, o) {
+  t.focus(), t.setSelectionRange(n, s);
+  let c = !1;
+  try {
+    c = typeof document.execCommand == "function" && document.execCommand("insertText", !1, e);
+  } catch {
+    c = !1;
+  }
+  if (!c) {
+    const r = t.value.slice(0, n) + e + t.value.slice(s), a = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")?.set;
+    a ? a.call(t, r) : t.value = r, t.dispatchEvent(new Event("input", { bubbles: !0 }));
+  }
+  return o && t.setSelectionRange(o[0], o[1]), c;
+}
+function x(t, n) {
+  return t.lastIndexOf(`
+`, n - 1) + 1;
+}
+function R(t, n) {
+  const s = t.indexOf(`
+`, n);
+  return s < 0 ? t.length : s;
+}
+function w(t, n) {
+  const s = x(t, n);
+  return /^[ \t]*/.exec(t.slice(s, n))?.[0] ?? "";
+}
+function $(t, n, s) {
+  const e = t.value, { selectionStart: o, selectionEnd: c } = t;
+  if (!e.slice(o, c).includes(`
+`) && !s) {
+    m(t, o, c, n, [o + n.length, o + n.length]);
+    return;
+  }
+  const a = x(e, o), l = R(e, c), i = e.slice(a, l).split(`
+`);
+  let p = 0, h = 0;
+  const b = i.map((u, d) => {
+    if (s) {
+      const v = /^(\t| {1,})/.exec(u);
+      if (!v) return u;
+      const g = u.startsWith("	") ? 1 : Math.min(n.length, v[1].length);
+      return d === 0 && (p = -g), h -= g, u.slice(g);
+    }
+    return u.length === 0 ? u : (d === 0 && (p = n.length), h += n.length, n + u);
+  }).join(`
+`);
+  m(t, a, l, b, [
+    Math.max(a, o + p),
+    Math.max(a, c + h)
+  ]);
+}
+function D(t, n) {
+  const s = t.value, { selectionStart: e, selectionEnd: o } = t, c = w(s, e), r = e > 0 ? s[e - 1] : "", a = o < s.length ? s[o] : "", l = r in f, i = l ? `
+${c}${n}` : `
+${c}`, p = l && f[r] === a ? `
+${c}` : "", h = e + i.length;
+  m(t, e, o, i + p, [h, h]);
+}
+function I(t, n) {
+  const s = t.value, { selectionStart: e, selectionEnd: o } = t, c = n in f, r = S.has(n);
+  if (e !== o && (c || r)) {
+    const i = r ? n : f[n];
+    return m(t, e, o, n + s.slice(e, o) + i, [e + 1, o + 1]), !0;
+  }
+  const a = o < s.length ? s[o] : "";
+  if ((O.has(n) || r) && a === n)
+    return t.setSelectionRange(o + 1, o + 1), !0;
+  if (!c && !r || a && E.test(a)) return !1;
+  if (r) {
+    const i = e > 0 ? s[e - 1] : "";
+    if (i && (E.test(i) || S.has(i))) return !1;
+  }
+  const l = r ? n : f[n];
+  return m(t, e, o, n + l, [e + 1, e + 1]), !0;
+}
+function L(t) {
+  const { selectionStart: n, selectionEnd: s } = t;
+  if (n !== s || n === 0) return !1;
+  const e = t.value[n - 1], o = s < t.value.length ? t.value[s] : "", c = e in f ? f[e] : S.has(e) ? e : "";
+  return !c || o !== c ? !1 : (m(t, n - 1, s + 1, "", [n - 1, n - 1]), !0);
+}
+export {
+  m as applyEdit,
+  D as autoIndentNewline,
+  I as handleAutoPair,
+  L as handlePairBackspace,
+  $ as indentSelection,
+  R as lineEnd,
+  x as lineStart
+};
+//# sourceMappingURL=editing.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"editing.js","sources":["../../../src/components/code-editor/editing.ts"],"sourcesContent":["/* ============================================================================\n   EDITOR MECHANICS — every mutation goes through the browser's own undo stack.\n\n   `document.execCommand(\"insertText\")` IS DEPRECATED AND IS STILL THE ONLY WAY\n   TO DO THIS. Setting `textarea.value` from script replaces the content without\n   telling the browser anything happened: the undo stack is cleared, and Ctrl+Z\n   after an auto-indent or a Tab either does nothing or jumps back past every\n   edit since the last real keystroke. A code editor whose Ctrl+Z does not work\n   is broken in the way people notice first, and there is no modern replacement\n   — `beforeinput` is an observation point, not an insertion API.\n\n   So: every one of these helpers positions the selection and asks the browser\n   to type. The browser then coalesces the edit into its history exactly as if a\n   person had, and fires `input`, so React's `onChange` runs and the controlled\n   value follows. Nothing here writes `value` on the happy path.\n\n   THE ONE FALLBACK IS ENVIRONMENTAL, NOT DEFENSIVE. `execCommand` is absent in\n   a headless DOM (this package's tests run in happy-dom) and returns false in\n   a few embedded webviews. There, the value is set through the prototype's own\n   setter so React's value tracker still sees a change — undo is lost, which is\n   the honest outcome of the API being unavailable, and the surface stays usable\n   rather than silently ignoring every keystroke.\n   ========================================================================= */\n\n/** Closing partner for each opener that auto-closes. */\nconst PAIRS: Record<string, string> = { \"(\": \")\", \"[\": \"]\", \"{\": \"}\" };\nconst QUOTES = new Set(['\"', \"'\", \"`\"]);\nconst CLOSERS = new Set([\")\", \"]\", \"}\"]);\n\n/** A character that a new `(` or `\"` should NOT be auto-closed in front of. */\nconst WORDLIKE = /[\\p{L}\\p{N}_$]/u;\n\n/**\n * Writes `text` over `[start, end)` and leaves the caret at `caret`.\n *\n * Returns true when the browser's history recorded it — false when this fell\n * through to the direct-write path and undo will not reach past this edit.\n */\nexport function applyEdit(\n  el: HTMLTextAreaElement,\n  start: number,\n  end: number,\n  text: string,\n  caret?: readonly [number, number],\n): boolean {\n  el.focus();\n  el.setSelectionRange(start, end);\n\n  let undoable = false;\n  try {\n    undoable = typeof document.execCommand === \"function\" && document.execCommand(\"insertText\", false, text);\n  } catch {\n    undoable = false;\n  }\n\n  if (!undoable) {\n    const next = el.value.slice(0, start) + text + el.value.slice(end);\n    /* Through the PROTOTYPE setter, not `el.value =`. React installs its own\n       setter on the instance to track the last value it wrote; assigning\n       through it makes React believe the DOM already matches state, and the\n       `input` event below is then dropped as a no-op change. */\n    // I18N-ALLOW: DOM property name read off the textarea prototype\n    const setter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, \"value\")?.set;\n    if (setter) setter.call(el, next);\n    else el.value = next;\n    el.dispatchEvent(new Event(\"input\", { bubbles: true }));\n  }\n\n  if (caret) el.setSelectionRange(caret[0], caret[1]);\n  return undoable;\n}\n\n/** Offset of the first character of the line containing `at`. */\nexport function lineStart(value: string, at: number): number {\n  return value.lastIndexOf(\"\\n\", at - 1) + 1;\n}\n\n/** Offset of the newline ending the line containing `at`, or the length. */\nexport function lineEnd(value: string, at: number): number {\n  const next = value.indexOf(\"\\n\", at);\n  return next < 0 ? value.length : next;\n}\n\n/** Leading whitespace of the line containing `at`, up to `at` itself. */\nfunction leadingWhitespace(value: string, at: number): string {\n  const from = lineStart(value, at);\n  return /^[ \\t]*/.exec(value.slice(from, at))?.[0] ?? \"\";\n}\n\n/**\n * Tab / Shift+Tab.\n *\n * A selection that spans a line break indents or dedents the whole BLOCK —\n * including when the selection is only partial on its first and last lines,\n * because a person who dragged across four lines meant those four lines.\n */\nexport function indentSelection(el: HTMLTextAreaElement, indent: string, dedent: boolean): void {\n  const value = el.value;\n  const { selectionStart: from, selectionEnd: to } = el;\n  const multiline = value.slice(from, to).includes(\"\\n\");\n\n  if (!multiline && !dedent) {\n    applyEdit(el, from, to, indent, [from + indent.length, from + indent.length]);\n    return;\n  }\n\n  const blockStart = lineStart(value, from);\n  const blockEnd = lineEnd(value, to);\n  const lines = value.slice(blockStart, blockEnd).split(\"\\n\");\n\n  let firstDelta = 0;\n  let totalDelta = 0;\n\n  const next = lines\n    .map((line, index) => {\n      if (dedent) {\n        /* One indent unit, or the whitespace that is actually there when the\n           line is shallower — a dedent that refuses to act on a 1-space line\n           looks broken to the person pressing the key. */\n        const match = /^(\\t| {1,})/.exec(line);\n        if (!match) return line;\n        const removed = line.startsWith(\"\\t\") ? 1 : Math.min(indent.length, match[1].length);\n        if (index === 0) firstDelta = -removed;\n        totalDelta -= removed;\n        return line.slice(removed);\n      }\n      /* A blank line gets no indentation: trailing whitespace on an empty line\n         is invisible, survives into the file, and shows up in every diff. */\n      if (line.length === 0) return line;\n      if (index === 0) firstDelta = indent.length;\n      totalDelta += indent.length;\n      return indent + line;\n    })\n    .join(\"\\n\");\n\n  applyEdit(el, blockStart, blockEnd, next, [\n    Math.max(blockStart, from + firstDelta),\n    Math.max(blockStart, to + totalDelta),\n  ]);\n}\n\n/**\n * Enter. Copies the current line's indentation, adds one unit after an opener,\n * and pushes a closer that was sitting right after the caret onto its own line.\n *\n * That last case is the only \"clever\" one and it earns its place: typing `{`\n * then Enter is how a block is opened, and without it the caret lands on the\n * same line as the `}` every single time.\n */\nexport function autoIndentNewline(el: HTMLTextAreaElement, indent: string): void {\n  const value = el.value;\n  const { selectionStart: from, selectionEnd: to } = el;\n  const base = leadingWhitespace(value, from);\n\n  const before = from > 0 ? value[from - 1] : \"\";\n  const after = to < value.length ? value[to] : \"\";\n  const opened = before in PAIRS;\n\n  const head = opened ? `\\n${base}${indent}` : `\\n${base}`;\n  const tail = opened && PAIRS[before] === after ? `\\n${base}` : \"\";\n  const caret = from + head.length;\n\n  applyEdit(el, from, to, head + tail, [caret, caret]);\n}\n\n/**\n * Bracket and quote handling for one printable character. Returns true when it\n * consumed the key, false to let the browser type it normally.\n *\n * DELIBERATELY SMALL. Auto-pairing that tries to be smart is the feature people\n * turn off: the rules below never delete anything, never act inside a word, and\n * never insert a partner the caret is not immediately in front of.\n */\nexport function handleAutoPair(el: HTMLTextAreaElement, key: string): boolean {\n  const value = el.value;\n  const { selectionStart: from, selectionEnd: to } = el;\n  const isOpener = key in PAIRS;\n  const isQuote = QUOTES.has(key);\n\n  /* Wrapping a selection is unambiguous — nobody selects five words and types\n     `(` meaning \"replace this with a bracket\". */\n  if (from !== to && (isOpener || isQuote)) {\n    const close = isQuote ? key : PAIRS[key];\n    applyEdit(el, from, to, key + value.slice(from, to) + close, [from + 1, to + 1]);\n    return true;\n  }\n\n  const after = to < value.length ? value[to] : \"\";\n\n  /* Typing the closer that is already sitting there steps over it instead of\n     doubling it — the other half of auto-pairing, and the half whose absence\n     makes the first half annoying. */\n  if ((CLOSERS.has(key) || isQuote) && after === key) {\n    el.setSelectionRange(to + 1, to + 1);\n    return true;\n  }\n\n  if (!isOpener && !isQuote) return false;\n\n  /* Never in front of a word: `(` typed before `foo` almost always means the\n     person is wrapping what follows, and an inserted `)` lands in the middle\n     of it. */\n  if (after && WORDLIKE.test(after)) return false;\n\n  if (isQuote) {\n    const before = from > 0 ? value[from - 1] : \"\";\n    /* `don't` must not become `don''t`, and a quote right after another quote\n       is the person closing a string by hand. */\n    if (before && (WORDLIKE.test(before) || QUOTES.has(before))) return false;\n  }\n\n  const close = isQuote ? key : PAIRS[key];\n  applyEdit(el, from, to, key + close, [from + 1, from + 1]);\n  return true;\n}\n\n/** Backspace between an auto-inserted pair removes both halves. */\nexport function handlePairBackspace(el: HTMLTextAreaElement): boolean {\n  const { selectionStart: from, selectionEnd: to } = el;\n  if (from !== to || from === 0) return false;\n\n  const before = el.value[from - 1];\n  const after = to < el.value.length ? el.value[to] : \"\";\n  const closes = before in PAIRS ? PAIRS[before] : QUOTES.has(before) ? before : \"\";\n  if (!closes || after !== closes) return false;\n\n  applyEdit(el, from - 1, to + 1, \"\", [from - 1, from - 1]);\n  return true;\n}\n"],"names":["PAIRS","QUOTES","CLOSERS","WORDLIKE","applyEdit","el","start","end","text","caret","undoable","next","setter","lineStart","value","at","lineEnd","leadingWhitespace","from","indentSelection","indent","dedent","to","blockStart","blockEnd","lines","firstDelta","totalDelta","line","index","match","removed","autoIndentNewline","base","before","after","opened","head","tail","handleAutoPair","key","isOpener","isQuote","close","handlePairBackspace","closes"],"mappings":"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"}

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

@@ -0,0 +1,27 @@
+import { jsx as s, Fragment as i, jsxs as d } from "react/jsx-runtime";
+import { useMemo as a, memo as m } from "react";
+import { tokenize as c } from "../../lib/syntax/index.js";
+function f(e, r) {
+  return a(() => c(e, r), [e, r]);
+}
+const h = m(function({
+  source: r,
+  tokens: n
+}) {
+  return /* @__PURE__ */ d(i, { children: [
+    n.map((t, o) => /* @__PURE__ */ s("span", { "data-t": t.type, "data-l": t.lang, children: r.slice(t.start, t.end) }, o)),
+    `
+`
+  ] });
+}), C = m(function({
+  count: r,
+  from: n
+}) {
+  return /* @__PURE__ */ s(i, { children: Array.from({ length: r }, (t, o) => /* @__PURE__ */ s("span", { className: "block", children: n + o }, o)) });
+});
+export {
+  C as CodeEditorGutterNumbers,
+  h as CodeEditorTokens,
+  f as useTokens
+};
+//# sourceMappingURL=highlight.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.js","sources":["../../../src/components/code-editor/highlight.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { tokenize } from \"../../lib/syntax\";\nimport type { Token } from \"../../lib/syntax\";\n\n/* ----------------------------------------------------------------------------\n   THE HIGHLIGHT LAYER.\n\n   One `<span data-t>` per token, and the spans' text concatenated IS the\n   source — guaranteed by the engine's coverage invariant, not by this file's\n   good behaviour. That is the whole reason the tokenizer returns offsets rather\n   than markup: `src.slice(start, end)` cannot escape, cannot re-order and\n   cannot drop a character, so the layer under the caret is provably the same\n   text the textarea holds.\n\n   `data-l` carries the grammar that produced the token. It changes nothing\n   visually and is there because a nesting bug — CSS tokens leaking past\n   `</style>`, a fence highlighted as its container — is otherwise only \"the\n   colours look a bit wrong\". With the attribute it is one glance in devtools.\n   -------------------------------------------------------------------------- */\n\n/** Tokens for `source`, recomputed only when the text or the language moves. */\nexport function useTokens(source: string, language: string | null | undefined): Token[] {\n  return useMemo(() => tokenize(source, language), [source, language]);\n}\n\nexport const CodeEditorTokens = memo(function CodeEditorTokens({\n  source,\n  tokens,\n}: {\n  source: string;\n  tokens: Token[];\n}) {\n  return (\n    <>\n      {tokens.map((token, index) => (\n        <span key={index} data-t={token.type} data-l={token.lang}>\n          {source.slice(token.start, token.end)}\n        </span>\n      ))}\n      {/* A `<pre>` DROPS ITS FINAL NEWLINE — an HTML parsing rule, not a\n          styling choice. Without this the last line of a document ending in a\n          newline has no box in the highlight layer while the textarea reserves\n          a full row for it, so every subsequent scroll position is off by one\n          line height and the caret sits a row below its glyph at the bottom of\n          the file. The extra newline is past `source.length`, so it cannot\n          disturb any offset arithmetic. */}\n      {\"\\n\"}\n    </>\n  );\n});\n\n/**\n * The line-number column.\n *\n * NOT RENDERED WHILE SOFT WRAP IS ON, and that is deliberate rather than\n * unfinished. A wrapped line occupies several visual rows, so a fixed column of\n * numbers drifts one row further out of true for every line that wraps — and a\n * number printed beside the wrong line is worse than no number, because it is\n * believed. `CodeEditor` decides; this component just draws.\n */\nexport const CodeEditorGutterNumbers = memo(function CodeEditorGutterNumbers({\n  count,\n  from,\n}: {\n  count: number;\n  from: number;\n}) {\n  return (\n    <>\n      {Array.from({ length: count }, (_, index) => (\n        <span key={index} className=\"block\">\n          {from + index}\n        </span>\n      ))}\n    </>\n  );\n});\n"],"names":["useTokens","source","language","useMemo","tokenize","CodeEditorTokens","memo","tokens","jsxs","Fragment","token","index","CodeEditorGutterNumbers","count","from","_","jsx"],"mappings":";;;AAqBO,SAASA,EAAUC,GAAgBC,GAA8C;AACtF,SAAOC,EAAQ,MAAMC,EAASH,GAAQC,CAAQ,GAAG,CAACD,GAAQC,CAAQ,CAAC;AACrE;AAEO,MAAMG,IAAmBC,EAAK,SAA0B;AAAA,EAC7D,QAAAL;AAAA,EACA,QAAAM;AACF,GAGG;AACD,SACE,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAF,EAAO,IAAI,CAACG,GAAOC,wBACjB,QAAA,EAAiB,UAAQD,EAAM,MAAM,UAAQA,EAAM,MACjD,UAAAT,EAAO,MAAMS,EAAM,OAAOA,EAAM,GAAG,KAD3BC,CAEX,CACD;AAAA,IAQA;AAAA;AAAA,EAAA,GACH;AAEJ,CAAC,GAWYC,IAA0BN,EAAK,SAAiC;AAAA,EAC3E,OAAAO;AAAA,EACA,MAAAC;AACF,GAGG;AACD,gCAEK,UAAA,MAAM,KAAK,EAAE,QAAQD,EAAA,GAAS,CAACE,GAAGJ,MACjC,gBAAAK,EAAC,UAAiB,WAAU,SACzB,cAAOL,EAAA,GADCA,CAEX,CACD,GACH;AAEJ,CAAC;"}

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

@@ -0,0 +1,75 @@
+import { tv as e } from "tailwind-variants";
+const t = e({
+  slots: {
+    /* min-w-0 + max-w-full is the fix for the defect this repo has already
+       shipped once: a code block is the single most common thing that runs off
+       a phone screen, and `audit:responsive` fails the whole route for it.
+       Without min-w-0 a flex or grid child refuses to shrink below its content,
+       and the content here is a line of code of arbitrary length. */
+    root: [
+      "group/code flex min-w-0 max-w-full flex-col overflow-hidden",
+      /* `border-border`, not `border-border-subtle`, and the reason is a
+         measurement: in the light theme `--surface-inset` and `--canvas` are
+         the SAME slate-50, so the block's fill separates it from the page by a
+         contrast ratio of exactly 1.00 and the outline is the only thing
+         holding the surface together. Dark gets a genuine recess from its fill
+         and does not need the help, but one border token has to serve both —
+         and the theme that needs it more decides. */
+      "rounded-lg border border-border bg-surface-inset",
+      /* THE FOCUS RING BELONGS TO THE VISIBLE BOX, NOT TO THE TEXTAREA. The
+         textarea is sized to the whole document — wider and taller than what
+         is on screen — so a ring on it is drawn around the CONTENT and reaches
+         the viewer as a stray bright line down one edge of a scrolled surface,
+         with the other three sides off-screen entirely. Hoisting it here rings
+         the component, which is also what a person means by "the editor is
+         focused". */
+      "has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-focus-ring"
+    ],
+    toolbar: "flex min-w-0 flex-wrap items-center gap-1 border-b border-border-subtle px-2 py-1.5",
+    caption: "mr-auto min-w-0 truncate font-mono text-2xs text-tertiary",
+    control: [
+      "dx-tap grid size-6 shrink-0 cursor-pointer place-items-center rounded-md",
+      "text-tertiary outline-none",
+      /* Naming a transition list REPLACES the global one rather than adding to
+         it, so the colour family is re-included by hand. Leaving it out is how
+         one control snaps while the one beside it eases. */
+      "transition-[var(--tx-colors),opacity] duration-(--dur-fast) ease-hover",
+      "hover:bg-surface-hover hover:text-primary",
+      "focus-visible:ring-2 focus-visible:ring-focus-ring"
+    ],
+    body: "flex min-w-0 flex-col md:flex-row",
+    scroller: [
+      "dx-code-metrics relative min-w-0 flex-1 overflow-auto outline-none",
+      "focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset"
+    ],
+    layers: "dx-code-layers dx-code-metrics relative flex",
+    gutter: "dx-code-gutter dx-code-metrics sticky left-0 z-10 shrink-0 select-none bg-surface-inset text-right text-tertiary",
+    pre: "dx-code-pre dx-code-metrics dx-code-pad text-primary",
+    textarea: [
+      "dx-code-metrics dx-code-pad absolute inset-y-0 right-0 z-10 block resize-none",
+      /* The textarea never scrolls itself: it is sized to its whole content and
+         sits inside the one scroller both layers share, which is what makes
+         scroll sync structural rather than an onScroll handler that can lag a
+         frame behind and shear the two layers apart. */
+      "overflow-hidden bg-transparent text-transparent caret-primary outline-none"
+    ],
+    rendered: "dx-md min-w-0 flex-1 overflow-auto px-3 py-2.5",
+    footer: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 border-t border-border-subtle px-3 py-1.5",
+    hint: "min-w-0 font-mono text-2xs text-tertiary",
+    expand: [
+      "dx-tap flex w-full cursor-pointer items-center justify-center gap-1.5 px-3 py-1.5",
+      "border-t border-border-subtle text-2xs font-medium text-tertiary outline-none",
+      "transition-[var(--tx-colors)] duration-(--dur-fast) ease-hover",
+      "hover:bg-surface-hover hover:text-primary",
+      "focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset"
+    ],
+    /* The collapsed preview fades out rather than being cut mid-glyph — a hard
+       edge through the middle of a line reads as a rendering fault, while a
+       fade reads as "there is more". */
+    fade: "pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-b from-transparent to-surface-inset"
+  }
+});
+export {
+  t as code
+};
+//# sourceMappingURL=recipe.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"recipe.js","sources":["../../../src/components/code-editor/recipe.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\n/* ----------------------------------------------------------------------------\n   The slots for `Code`.\n\n   THE METRIC-BEARING CLASSES ARE NOT TAILWIND. `dx-code-metrics`, `dx-code-pad`\n   and the wrap pair live in `src/styles/syntax.css`, and every layer that has\n   to line up character-for-character takes the SAME class rather than the same\n   list of utilities. A stack of utilities repeated three times is three places\n   for `tracking-tight` to be added to one of them; one class is unrepresentable\n   divergence. See that file's banner.\n   -------------------------------------------------------------------------- */\n\nexport const code = tv({\n  slots: {\n    /* min-w-0 + max-w-full is the fix for the defect this repo has already\n       shipped once: a code block is the single most common thing that runs off\n       a phone screen, and `audit:responsive` fails the whole route for it.\n       Without min-w-0 a flex or grid child refuses to shrink below its content,\n       and the content here is a line of code of arbitrary length. */\n    root: [\n      \"group/code flex min-w-0 max-w-full flex-col overflow-hidden\",\n      /* `border-border`, not `border-border-subtle`, and the reason is a\n         measurement: in the light theme `--surface-inset` and `--canvas` are\n         the SAME slate-50, so the block's fill separates it from the page by a\n         contrast ratio of exactly 1.00 and the outline is the only thing\n         holding the surface together. Dark gets a genuine recess from its fill\n         and does not need the help, but one border token has to serve both —\n         and the theme that needs it more decides. */\n      \"rounded-lg border border-border bg-surface-inset\",\n      /* THE FOCUS RING BELONGS TO THE VISIBLE BOX, NOT TO THE TEXTAREA. The\n         textarea is sized to the whole document — wider and taller than what\n         is on screen — so a ring on it is drawn around the CONTENT and reaches\n         the viewer as a stray bright line down one edge of a scrolled surface,\n         with the other three sides off-screen entirely. Hoisting it here rings\n         the component, which is also what a person means by \"the editor is\n         focused\". */\n      \"has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-focus-ring\",\n    ],\n    toolbar: \"flex min-w-0 flex-wrap items-center gap-1 border-b border-border-subtle px-2 py-1.5\",\n    caption: \"mr-auto min-w-0 truncate font-mono text-2xs text-tertiary\",\n    control: [\n      \"dx-tap grid size-6 shrink-0 cursor-pointer place-items-center rounded-md\",\n      \"text-tertiary outline-none\",\n      /* Naming a transition list REPLACES the global one rather than adding to\n         it, so the colour family is re-included by hand. Leaving it out is how\n         one control snaps while the one beside it eases. */\n      \"transition-[var(--tx-colors),opacity] duration-(--dur-fast) ease-hover\",\n      \"hover:bg-surface-hover hover:text-primary\",\n      \"focus-visible:ring-2 focus-visible:ring-focus-ring\",\n    ],\n    body: \"flex min-w-0 flex-col md:flex-row\",\n    scroller: [\n      \"dx-code-metrics relative min-w-0 flex-1 overflow-auto outline-none\",\n      \"focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset\",\n    ],\n    layers: \"dx-code-layers dx-code-metrics relative flex\",\n    gutter: \"dx-code-gutter dx-code-metrics sticky left-0 z-10 shrink-0 select-none bg-surface-inset text-right text-tertiary\",\n    pre: \"dx-code-pre dx-code-metrics dx-code-pad text-primary\",\n    textarea: [\n      \"dx-code-metrics dx-code-pad absolute inset-y-0 right-0 z-10 block resize-none\",\n      /* The textarea never scrolls itself: it is sized to its whole content and\n         sits inside the one scroller both layers share, which is what makes\n         scroll sync structural rather than an onScroll handler that can lag a\n         frame behind and shear the two layers apart. */\n      \"overflow-hidden bg-transparent text-transparent caret-primary outline-none\",\n    ],\n    rendered: \"dx-md min-w-0 flex-1 overflow-auto px-3 py-2.5\",\n    footer: \"flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 border-t border-border-subtle px-3 py-1.5\",\n    hint: \"min-w-0 font-mono text-2xs text-tertiary\",\n    expand: [\n      \"dx-tap flex w-full cursor-pointer items-center justify-center gap-1.5 px-3 py-1.5\",\n      \"border-t border-border-subtle text-2xs font-medium text-tertiary outline-none\",\n      \"transition-[var(--tx-colors)] duration-(--dur-fast) ease-hover\",\n      \"hover:bg-surface-hover hover:text-primary\",\n      \"focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset\",\n    ],\n    /* The collapsed preview fades out rather than being cut mid-glyph — a hard\n       edge through the middle of a line reads as a rendering fault, while a\n       fade reads as \"there is more\". */\n    fade: \"pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-b from-transparent to-surface-inset\",\n  },\n});\n"],"names":["code","tv"],"mappings":";AAaO,MAAMA,IAAOC,EAAG;AAAA,EACrB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML,MAAM;AAAA,MACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQA;AAAA,IAAA;AAAA,IAEF,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,MACP;AAAA,MACA;AAAA;AAAA;AAAA;AAAA,MAIA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,MAAM;AAAA,IACN,UAAU;AAAA,MACR;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,UAAU;AAAA,MACR;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA;AAAA,IAAA;AAAA,IAEF,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA,IAKF,MAAM;AAAA,EAAA;AAEV,CAAC;"}