@kanzo-tech/ui 0.0.1-alpha

package/dist/composites/CodeEditor.js

@@ -0,0 +1,521 @@
+"use client";
+var j = Object.defineProperty;
+var J = (e, t, n) => t in e ? j(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var x = (e, t, n) => J(e, typeof t != "symbol" ? t + "" : t, n);
+import { jsx as k } from "react/jsx-runtime";
+import { useRef as l, useState as E, useEffect as g } from "react";
+import { createPortal as Q } from "react-dom";
+import { cn as M } from "../lib/cn.js";
+import { kanzoSearch as U } from "./code-editor-search.js";
+import { useKanzoThemeOptional as X } from "../theme/theme-context.js";
+import { Compartment as y, EditorState as v, Annotation as Y, RangeSet as Z } from "@codemirror/state";
+import { EditorView as d, keymap as _, drawSelection as $, dropCursor as rr, highlightSpecialChars as er, rectangularSelection as or, crosshairCursor as tr, lineNumbers as ar, placeholder as nr, ViewPlugin as cr, gutterLineClass as ir, Decoration as G, GutterMarker as lr } from "@codemirror/view";
+import { history as dr, defaultKeymap as sr, historyKeymap as mr } from "@codemirror/commands";
+import { foldKeymap as ur, bracketMatching as gr, indentOnInput as pr, foldGutter as fr, syntaxHighlighting as vr, HighlightStyle as br } from "@codemirror/language";
+import { closeBracketsKeymap as hr, completionKeymap as xr, autocompletion as kr, closeBrackets as yr } from "@codemirror/autocomplete";
+import { searchKeymap as wr, highlightSelectionMatches as Cr } from "@codemirror/search";
+import { tags as r } from "@lezer/highlight";
+const K = Y.define(), Sr = br.define([
+  { tag: [r.keyword, r.operatorKeyword, r.controlKeyword, r.definitionKeyword, r.moduleKeyword, r.self], color: "var(--syntax-keyword)" },
+  { tag: [r.atom, r.bool, r.constant(r.name), r.standard(r.name)], color: "var(--syntax-number)" },
+  { tag: [r.string, r.special(r.string), r.docString, r.character, r.regexp], color: "var(--syntax-string)" },
+  // An escape sequence inside a string used to fall through to --foreground, so `\n` rendered
+  // as plain text mid-string. `t.escape`'s parent is `literal`, which was unmapped.
+  { tag: [r.escape, r.special(r.brace)], color: "var(--syntax-number)" },
+  { tag: [r.number, r.integer, r.float, r.unit], color: "var(--syntax-number)" },
+  { tag: [r.comment, r.lineComment, r.blockComment, r.docComment], color: "var(--faint)", fontStyle: "italic" },
+  // Object keys and attribute names. These used to be grouped with `variableName`, which
+  // resolved to a token byte-identical to --foreground — so every key in a JSON document
+  // rendered as unstyled text and the whole sample looked near-monochrome.
+  { tag: [r.propertyName, r.attributeName], color: "var(--syntax-property)" },
+  { tag: [r.function(r.variableName), r.function(r.propertyName), r.macroName], color: "var(--syntax-function)" },
+  // Declarations are coloured; plain variable USES inherit --foreground, as in most themes.
+  { tag: [r.definition(r.variableName), r.definition(r.propertyName)], color: "var(--syntax-identifier)" },
+  { tag: [r.operator, r.derefOperator, r.arithmeticOperator, r.logicOperator, r.bitwiseOperator, r.compareOperator, r.updateOperator], color: "var(--foreground)" },
+  { tag: [r.punctuation, r.separator, r.bracket, r.angleBracket, r.squareBracket, r.paren, r.brace], color: "var(--muted-foreground)" },
+  { tag: [r.typeName, r.className, r.namespace, r.tagName, r.labelName], color: "var(--syntax-type)" },
+  { tag: [r.meta, r.annotation, r.processingInstruction, r.documentMeta], color: "var(--faint)" },
+  { tag: [r.url, r.link], color: "var(--syntax-function)", textDecoration: "underline" },
+  // Markdown: only `heading` was mapped, so prose rendered flat.
+  { tag: r.heading, color: "var(--syntax-keyword)", fontWeight: "bold" },
+  { tag: r.emphasis, fontStyle: "italic" },
+  { tag: r.strong, fontWeight: "bold" },
+  { tag: r.strikethrough, textDecoration: "line-through" },
+  { tag: [r.monospace, r.list], color: "var(--syntax-string)" },
+  { tag: r.quote, color: "var(--faint)" },
+  // Diff.
+  { tag: r.inserted, color: "var(--success)" },
+  { tag: r.deleted, color: "var(--destructive)" },
+  { tag: r.changed, color: "var(--warning)" },
+  { tag: r.invalid, color: "var(--destructive-foreground)" }
+]), Nr = vr(Sr, { fallback: !0 }), Hr = G.line({ class: "cm-activeLine" }), Ir = new class extends lr {
+  constructor() {
+    super(...arguments);
+    x(this, "elementClass", "cm-activeLineGutter");
+  }
+}(), R = (e) => {
+  if (e.selection.ranges.some((s) => !s.empty)) return [];
+  const t = [];
+  let n = -1;
+  for (const s of e.selection.ranges) {
+    const { from: m } = e.doc.lineAt(s.head);
+    m > n && (t.push(m), n = m);
+  }
+  return t;
+}, Lr = cr.fromClass(
+  class {
+    constructor(e) {
+      x(this, "decorations");
+      this.decorations = z(e.state);
+    }
+    update(e) {
+      (e.docChanged || e.selectionSet) && (this.decorations = z(e.state));
+    }
+  },
+  { decorations: (e) => e.decorations }
+), z = (e) => G.set(R(e).map((t) => Hr.range(t))), Or = ir.compute(
+  ["selection", "doc"],
+  (e) => Z.of(R(e).map((t) => Ir.range(t)))
+), Br = d.theme({
+  // `flex: 1`, not `height: 100%`: the chrome surface sizes with `min-height`/`max-height`, and
+  // a percentage height does not resolve against a `min-height`'d parent — so the editor stayed
+  // at content height and the field's extra `min-height` showed as dead space below the last
+  // line. As a flex child of the flex-column surface it fills the field; `min-height: 0` lets it
+  // shrink so `.cm-scroller` scrolls once content passes `max-height`.
+  "&": { fontSize: "var(--kanzo-font-size-base, 14px)", backgroundColor: "transparent", flex: "1 1 auto", minHeight: 0 },
+  // NO PADDING AT ALL any more, and that is the fix for a gap somebody could see: the vertical
+  // padding used to live here, and `.cm-line` sits INSIDE it — so the active-line highlight on the
+  // first line started half a rem below the top of the field and read as a bar floating in a
+  // margin. It moved to `.cm-scroller`, which contains the gutter as well as the content, so both
+  // shift together and the numbers stay on their lines.
+  //
+  // NO BACKGROUND either, and no horizontal padding. Both were here and both were wrong:
+  //
+  //   · An opaque background on `.cm-content` HIDES THE SELECTION. `drawSelection` paints into
+  //     `.cm-selectionLayer`, a sibling at `z-index: -2`, and CSS paints negative-z-index
+  //     descendants *below* the backgrounds of in-flow block-level siblings — so the paper
+  //     covered the layer completely. There is no fallback either: `drawSelection` forces the
+  //     native `::selection` to transparent, so a selection rendered as nothing at all and the
+  //     selected glyphs went invisible. Verified in the browser, and it is why no CodeMirror
+  //     theme upstream puts a background here. The paper is on `.cm-scroller` now.
+  //   · Horizontal padding here inset the ACTIVE LINE highlight by 12px at each edge, because
+  //     the highlight is `.cm-line`'s own background and `.cm-line` sits inside the padding
+  //     box. The row read as a floating bar rather than a highlighted line. The inset moved to
+  //     `.cm-line`, so the highlight spans the field and the text keeps the same rhythm.
+  ".cm-content": {
+    // Explicitly zero, and as the SHORTHAND: CodeMirror's base theme ships `padding: 4px 0` here,
+    // and a longhand `padding-block: 0` beside a shorthand loses — measured in the browser, the
+    // content kept its 4px and the gutter numbers drifted 4px off their lines. That 4px was the
+    // last of the gap above the first line's highlight.
+    padding: 0,
+    color: "var(--foreground)",
+    caretColor: "var(--foreground)"
+  },
+  // The field rhythm — 0.75rem is Textarea's `px-3`, so code sits on the same inset as an
+  // input's text (rem-based, so it tracks the density preference). On the LINE, so every
+  // full-width line decoration (active line, and any caller's `Decoration.line`) reaches the
+  // edges instead of stopping short of them.
+  //
+  // The inset is a HANGING one: a wrapped line resumes past the first row's start, so a Turtle URI
+  // that does not fit reads as a continuation rather than as a new statement. `basics` turns
+  // `EditorView.lineWrapping` on, so in a narrow pane most lines are wrapped ones — which is where
+  // the editor is used: a dock beside a canvas, an aside beside a table.
+  ".cm-line": {
+    paddingBlock: 0,
+    paddingInlineStart: "2rem",
+    paddingInlineEnd: "0.75rem",
+    textIndent: "-1.25rem"
+  },
+  // The font belongs on `.cm-scroller`, not `.cm-content`: the GUTTER is a child of the
+  // scroller, and CodeMirror's base sets `.cm-scroller { font-family: monospace }`. With the
+  // family only on the content, line numbers rendered in the browser's generic monospace —
+  // Courier on many systems — beside content in the Kanzo stack. It also made the gutter's
+  // `min-width: 2.25ch` compute against the wrong font.
+  ".cm-scroller": {
+    // NO VERTICAL INSET, on either surface. It was `0.5rem` here, on the argument that a code field
+    // wants the same breathing room `Textarea` has — and what it actually produced was nine pixels
+    // between the field's border and the first line, and a first line that does not start where
+    // every other box on the screen starts. A pane docked under its own header showed it worst.
+    // A caller who wants an inset has `className` and the surface it owns.
+    fontFamily: "var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)",
+    lineHeight: "1.5",
+    overflow: "auto",
+    // Fill the editor so clicking the empty area below the last line still lands the caret,
+    // rather than leaving dead surface — see the `&` note.
+    flexGrow: 1,
+    minHeight: 0,
+    // The paper. It lives here and NOT on `.cm-content` — see the note there: an opaque
+    // background on the content box hides the selection layer beneath it. The scroller fills
+    // the whole field (flexGrow above), so the paper reaches the bottom on a short document.
+    background: "var(--background)"
+  },
+  "&.cm-focused": { outline: "none" },
+  // The gutter column carries its own tint. It used to be painted by the scroller instead, on
+  // the grounds that a fill here "only spans the content rows and stops mid-field on a short
+  // document" — measured against the current CodeMirror, that is no longer true: this element
+  // is sized to the full scroller height, so the column reaches the bottom. Reclaiming it
+  // freed the scroller to hold the paper, which is what un-hides the selection layer.
+  // No divider; the tint step from `--muted` to the scroller's `--background` is the separation.
+  ".cm-gutters": {
+    // NO vertical padding: the scroller's is the only one, and the gutter is inside it, so every
+    // number already sits at its line's y. Repeating it here dropped each number one step too
+    // low — verified back when the padding was on `.cm-content`: a constant 9px below its line.
+    background: "var(--muted)",
+    border: "none",
+    color: "var(--faint)"
+  },
+  // Line numbers: tabular figures (no jitter across 9→10→100), right-aligned with breathing
+  // room from the border edge, and a comfortable minimum width.
+  ".cm-lineNumbers .cm-gutterElement": {
+    fontVariantNumeric: "tabular-nums",
+    fontFeatureSettings: '"tnum"',
+    minWidth: "2.25ch",
+    padding: "0 0.5rem 0 0.75rem",
+    textAlign: "right",
+    cursor: "pointer",
+    transition: "color 120ms, background-color 120ms"
+  },
+  // A line number is a click target (it selects the line), so it has to answer the
+  // pointer — without this the whole column reads as inert decoration.
+  // Quieter than the active line on purpose: this is a hover affordance, and at equal
+  // strength the two read as the same state and the column flickers as the pointer moves.
+  ".cm-lineNumbers .cm-gutterElement:hover": {
+    backgroundColor: "color-mix(in srgb, var(--editor-active-line, var(--muted)) 60%, transparent)",
+    color: "var(--foreground)"
+  },
+  ".cm-foldGutter .cm-gutterElement:hover": { color: "var(--foreground)" },
+  ".cm-placeholder": { color: "var(--muted-foreground)" },
+  // `highlightSpecialChars` ships its own `&light`/`&dark` rule at a raw `red` / `#f78`. Whichever
+  // half the appearance selects is a raw hue nobody chose. Tokenised here, at equal specificity and
+  // later in the sheet, so ours wins in both.
+  ".cm-specialChar": { color: "var(--destructive-foreground)" },
+  // ── Floating surfaces ─────────────────────────────────────────────────────────
+  // CodeMirror ships its own light-mode chrome for tooltips, autocomplete and the
+  // search panel. Left alone they arrive as white boxes with system-blue selection —
+  // the moment an editor is more than a text box, that is where the theme visibly
+  // breaks. These read from the same tokens as `popover` / `menu`.
+  ".cm-tooltip": {
+    background: "var(--popover)",
+    color: "var(--popover-foreground)",
+    border: "1px solid var(--border)",
+    borderRadius: "var(--radius-md)",
+    boxShadow: "0 4px 12px rgb(0 0 0 / 0.08)",
+    overflow: "hidden"
+  },
+  // The divider between an autocomplete tooltip's sections. CodeMirror's `&light` default is
+  // `1px solid #bbb`, and it is the half with no `&dark` counterpart — so before the facet followed
+  // the appearance it drew a pale hairline inside a dark popover, and it is *still* the rule that
+  // covers a light page. Found by `codemirror-dark-parity.test.ts`, not by looking.
+  ".cm-tooltip-section:not(:first-child)": { borderTop: "1px solid var(--border)" },
+  ".cm-tooltip .cm-tooltip-arrow:before": { borderTopColor: "var(--border)" },
+  ".cm-tooltip .cm-tooltip-arrow:after": { borderTopColor: "var(--popover)" },
+  ".cm-tooltip-autocomplete > ul": {
+    fontFamily: "var(--font-mono, ui-monospace, monospace)",
+    maxHeight: "16rem"
+  },
+  ".cm-tooltip-autocomplete > ul > li": {
+    padding: "0.125rem 0.5rem",
+    lineHeight: "1.6"
+  },
+  ".cm-tooltip-autocomplete > ul > li[aria-selected]": {
+    background: "var(--accent)",
+    color: "var(--accent-foreground)"
+  },
+  ".cm-completionLabel": { color: "inherit" },
+  ".cm-completionMatchedText": {
+    color: "var(--primary)",
+    fontWeight: "600",
+    textDecoration: "none"
+  },
+  ".cm-completionDetail": {
+    color: "var(--muted-foreground)",
+    fontStyle: "normal",
+    marginInlineStart: "0.5rem"
+  },
+  ".cm-completionIcon": { opacity: 0.64, paddingInlineEnd: "0.5rem" },
+  ".cm-panels": {
+    background: "var(--card)",
+    color: "var(--card-foreground)",
+    borderColor: "var(--border)"
+  },
+  ".cm-panels.cm-panels-top": { borderBottom: "1px solid var(--border)" },
+  ".cm-panels.cm-panels-bottom": { borderTop: "1px solid var(--border)" },
+  // **`.cm-textfield` and `.cm-button` are no longer OUR controls, and that is the whole point of
+  // `code-editor-search.tsx`.** The find/replace panel is `InputGroup`, `Toggle`, `Button` and
+  // `ButtonGroup` now, rendered through a portal, so it wears the library's typography, focus ring
+  // and hover states rather than a run of rules restating them in CSS. Six selectors went with it:
+  // `.cm-panel.cm-search`, its `input, button, label { font-size: inherit }`, the two
+  // `.cm-textfield` rules and the two for `button[name=close]`.
+  //
+  // These two stay, unscoped, for the controls that are still CodeMirror's: `gotoLine`'s dialog
+  // (Mod-Alt-G), and any panel a caller's own extensions bring — `@codemirror/lint`'s is the
+  // obvious one, and it is a caller's dependency rather than ours.
+  //
+  // **They also have to stay because they are the only thing standing between a page and a box
+  // nobody themed.** `&light .cm-textfield { background: white; border: 1px solid silver }` and
+  // `&light .cm-button { background: linear-gradient(#eff1f5, #d9d9df) }` are one half of it and
+  // `&dark`'s `#333` and `linear-gradient(#393939, #111)` are the other; the `darkTheme` facet picks
+  // which, and neither is a token. `codemirror-dark-parity.test.ts` checks BOTH halves and fails the
+  // day either selector leaves this file. The previous
+  // spelling was `.cm-panel.cm-search .cm-textfield`, which covered the search field and left
+  // `gotoLine`'s identical field wearing the white default; before that it was `input[type=text]`,
+  // which matched nothing at all, because CodeMirror sets no `type` on it.
+  ".cm-textfield": {
+    background: "var(--background)",
+    color: "var(--foreground)",
+    border: "1px solid var(--input)",
+    borderRadius: "var(--radius-sm)",
+    padding: "0.125rem 0.375rem",
+    outline: "none"
+  },
+  ".cm-textfield:focus": {
+    borderColor: "var(--ring)",
+    boxShadow: "0 0 0 3px color-mix(in srgb, var(--ring) 32%, transparent)"
+  },
+  ".cm-button": {
+    background: "var(--secondary)",
+    color: "var(--secondary-foreground)",
+    border: "1px solid transparent",
+    borderRadius: "var(--radius-sm)",
+    backgroundImage: "none",
+    padding: "0.125rem 0.5rem",
+    cursor: "pointer"
+  },
+  ".cm-button:hover": { background: "var(--accent)" },
+  ".cm-button:active": { backgroundImage: "none" },
+  ".cm-dialog": { padding: "0.375rem 0.5rem", fontSize: "var(--kanzo-font-size-small, 12px)" },
+  ".cm-dialog label": { display: "inline-flex", alignItems: "center", gap: "0.375rem" },
+  ".cm-dialog-close": { color: "var(--muted-foreground)", cursor: "pointer" },
+  ".cm-dialog-close:hover": { color: "var(--foreground)" },
+  // Search hits: the current one is the primary-tinted anchor, the rest are quieter so
+  // "where am I" stays readable at a glance.
+  ".cm-searchMatch": {
+    backgroundColor: "var(--warning-a5)",
+    outline: "1px solid var(--border)",
+    borderRadius: "2px"
+  },
+  ".cm-searchMatch.cm-searchMatch-selected": {
+    backgroundColor: "var(--warning-a8)",
+    outline: "1px solid var(--warning)"
+  },
+  // Lint diagnostics — semantic tokens, so severity survives a re-theme.
+  ".cm-diagnostic": {
+    padding: "0.25rem 0.5rem",
+    borderInlineStartWidth: "3px",
+    borderInlineStartStyle: "solid",
+    fontFamily: "var(--font-sans)"
+  },
+  ".cm-diagnostic-error": { borderInlineStartColor: "var(--destructive)" },
+  ".cm-diagnostic-warning": { borderInlineStartColor: "var(--warning)" },
+  ".cm-diagnostic-info": { borderInlineStartColor: "var(--info)" },
+  ".cm-lintPoint-error:after": { borderBottomColor: "var(--destructive)" },
+  ".cm-lintPoint-warning:after": { borderBottomColor: "var(--warning)" },
+  // Scrollbars: the default OS chrome is the loudest thing in a dark editor.
+  ".cm-scroller::-webkit-scrollbar": { width: "10px", height: "10px" },
+  ".cm-scroller::-webkit-scrollbar-track": { background: "transparent" },
+  ".cm-scroller::-webkit-scrollbar-thumb": {
+    background: "color-mix(in srgb, var(--muted-foreground) 32%, transparent)",
+    borderRadius: "6px",
+    border: "2px solid transparent",
+    backgroundClip: "content-box"
+  },
+  ".cm-scroller::-webkit-scrollbar-thumb:hover": {
+    background: "color-mix(in srgb, var(--muted-foreground) 56%, transparent)",
+    backgroundClip: "content-box"
+  },
+  ".cm-scroller::-webkit-scrollbar-corner": { background: "transparent" },
+  // Tokenised selection (drawSelection), active line, matching bracket, search matches.
+  ".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--foreground)" },
+  // The full child chain is LOAD-BEARING. CodeMirror's base theme ships
+  // `&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground`
+  // (@codemirror/view), which compiles to specificity 0,5,0. A flat
+  // `&.cm-focused .cm-selectionBackground` is 0,3,0 and LOSES — so the focused selection
+  // rendered in CodeMirror's stock lavender (#d7d4f0) instead of a Kanzo token. Worse, that
+  // base rule is `&light`, and for as long as the `darkTheme` facet was pinned false the light
+  // lavender applied in dark mode too. It is driven from the appearance now, which moves the
+  // default to `&dark`'s — a different stock colour, still not ours, still covered by this rule.
+  "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
+    backgroundColor: "var(--brand-a5)"
+  },
+  // **A selection must not repaint the text, and ours repainted all of it.** `tokens.css` sets a
+  // document-wide `::selection { bg-primary/80 text-primary-foreground }`, which is right
+  // everywhere prose is selected and wrong inside an editor: `drawSelection` suppresses the native
+  // selection's *background* and not its `color`, so the fill came from `.cm-selectionBackground`
+  // — `--brand-a5`, black at 12% — while every glyph inside it took `--primary-foreground`.
+  //
+  // Measured on `/docs/forms/code-editor`: #fafafa text on a #dcdcdc block. Keys, strings and
+  // numbers all flattened to one near-white, so selecting seven lines of JSON erased the
+  // highlighting from them. It happens under every palette, because a `-foreground` role is a
+  // contrast colour for a fill that is not being painted here.
+  //
+  // `currentColor` is the fix, and it has to be `currentColor` and not a token: a fixed colour
+  // flattens the tokens just as thoroughly, one shade later.
+  ".cm-selectionBackground, .cm-content ::selection": {
+    backgroundColor: "var(--brand-a5)",
+    color: "currentColor"
+  },
+  ".cm-activeLine": { backgroundColor: "var(--editor-active-line, var(--muted))" },
+  // The active line's gutter cell is emphasised beyond the row: stronger tint, full-strength
+  // ink and a weight bump so the current line number stands out from the dim column.
+  ".cm-activeLineGutter": {
+    backgroundColor: "var(--editor-active-line, var(--muted))",
+    color: "var(--foreground)",
+    fontWeight: "600"
+  },
+  ".cm-matchingBracket, &.cm-focused .cm-matchingBracket": { backgroundColor: "var(--brand-a5)", outline: "1px solid var(--primary)" },
+  ".cm-nonmatchingBracket": { backgroundColor: "var(--destructive-a4)" },
+  // **A neutral tint, because it is not a search hit.** This wore `--warning-a5`, byte for byte
+  // what `.cm-searchMatch` wears — so the other occurrences of the word under your caret were
+  // indistinguishable from the hits of a query you actually typed, and the two co-occur constantly:
+  // open the find panel while a word is selected and every match looks like the same kind of thing.
+  //
+  // They are not. A search hit is something you asked for; this is the editor noticing a
+  // repetition. Every editor that draws both separates them the same way — the query keeps the
+  // colour, the passive one goes neutral — and `--base-a5` is the house's neutral wash. It also
+  // takes the collision off `--warning-a5`, which `Highlight` uses for a search-term mark in prose.
+  ".cm-selectionMatch": { backgroundColor: "var(--base-a5)" },
+  ".cm-foldGutter .cm-gutterElement": { cursor: "pointer", color: "var(--faint)" },
+  ".cm-foldPlaceholder": { background: "var(--muted)", border: "1px solid var(--border)", color: "var(--muted-foreground)", borderRadius: "var(--radius-sm)", padding: "0 4px" }
+}), F = (e) => e ? d.darkTheme.of(!0) : [];
+function jr(e) {
+  var L;
+  const t = l(null), n = l(void 0), [s, m] = E(!1), a = l(e);
+  a.current = e;
+  const w = l(new y()), C = l(new y()), S = l(new y()), p = ((L = X()) == null ? void 0 : L.resolvedAppearance) === "dark", N = l(p);
+  N.current = p;
+  const [T, H] = E([]);
+  g(() => {
+    var O, B;
+    const o = a.current.basics ?? !0;
+    let P = 0;
+    const W = {
+      panel: (c, i) => {
+        const u = document.createElement("div"), f = ++P;
+        return {
+          dom: u,
+          top: i == null ? void 0 : i.top,
+          mount: () => H((h) => [...h, { id: f, dom: u, node: c }]),
+          destroy: () => H((h) => h.filter((q) => q.id !== f))
+        };
+      }
+    }, D = d.updateListener.of((c) => {
+      var i, u;
+      c.focusChanged && m(c.view.hasFocus), c.docChanged && (c.transactions.some((f) => f.annotation(K)) || (u = (i = a.current).onChange) == null || u.call(i, c.state.doc.toString()));
+    }), V = a.current.wrap ?? !0, A = o ? [
+      dr(),
+      _.of([
+        ...sr,
+        ...mr,
+        ...wr,
+        ...hr,
+        ...xr,
+        ...ur
+      ]),
+      ...V ? [d.lineWrapping] : [],
+      $(),
+      rr(),
+      // `completionKeymap` was already bound below, but the extension itself was never
+      // installed — so Ctrl-Space did nothing and the ~25 lines of
+      // `.cm-tooltip-autocomplete` styling in this theme were dead CSS.
+      kr(),
+      // Makes NBSP, zero-width and control characters visible. Without it they are
+      // invisible in the document, which is a real footgun when editing data.
+      er(),
+      // Alt-drag column selection, and the crosshair cursor that signals it is available.
+      or(),
+      tr(),
+      Lr,
+      gr(),
+      yr(),
+      pr(),
+      Cr(),
+      // **`search()` has to be in the configuration, and it was not.** `searchKeymap` was
+      // bound below and nothing installed the extension, so `openSearchPanel` appended the
+      // defaults itself the first time Mod-F was pressed — which works, and silently discards
+      // any configuration, `createPanel` included. Same shape as the `autocompletion()` bug
+      // noted further down: a keymap for an extension nobody added.
+      U(W),
+      Nr,
+      Br
+    ] : [], b = new d({
+      parent: t.current,
+      state: v.create({
+        doc: a.current.value ?? "",
+        extensions: [
+          // Multiple cursors. Off by default in CodeMirror, and table stakes in an editor.
+          v.allowMultipleSelections.of(!0),
+          ...A,
+          ...a.current.lineNumbers ? [ar()] : [],
+          ...o && a.current.lineNumbers ? [Or, fr()] : [],
+          ...a.current.placeholder ? [nr(a.current.placeholder)] : [],
+          D,
+          S.current.of(F(N.current)),
+          w.current.of(a.current.extensions ?? []),
+          C.current.of([
+            d.editable.of(!a.current.readOnly),
+            v.readOnly.of(!!a.current.readOnly)
+          ])
+        ]
+      })
+    });
+    return n.current = b, (B = (O = a.current).onView) == null || B.call(O, b), () => {
+      var c, i;
+      (i = (c = a.current).onView) == null || i.call(c, null), b.destroy();
+    };
+  }, []), g(() => {
+    const o = n.current;
+    !o || o.hasFocus || e.value !== o.state.doc.toString() && o.dispatch({
+      changes: { from: 0, to: o.state.doc.length, insert: e.value },
+      annotations: K.of(!0)
+    });
+  }, [e.value]), g(() => {
+    var o;
+    (o = n.current) == null || o.dispatch({ effects: w.current.reconfigure(e.extensions ?? []) });
+  }, [e.extensions]), g(() => {
+    var o;
+    (o = n.current) == null || o.dispatch({ effects: S.current.reconfigure(F(p)) });
+  }, [p]), g(() => {
+    var o;
+    (o = n.current) == null || o.dispatch({
+      effects: C.current.reconfigure([
+        d.editable.of(!e.readOnly),
+        v.readOnly.of(!!e.readOnly)
+      ])
+    });
+  }, [e.readOnly]);
+  const I = T.map((o) => Q(o.node, o.dom, String(o.id)));
+  return e.chrome === !1 ? /* @__PURE__ */ k(
+    "div",
+    {
+      className: M("flex flex-col", e.className),
+      "data-slot": "code-editor",
+      ref: t,
+      style: { minHeight: e.minHeight, maxHeight: e.maxHeight },
+      children: I
+    }
+  ) : /* @__PURE__ */ k("div", { "data-slot": "code-editor", style: { flex: 1, width: "100%" }, children: /* @__PURE__ */ k(
+    "div",
+    {
+      "data-slot": "code-editor-surface",
+      "data-focused": s || void 0,
+      "data-invalid": e.invalid || void 0,
+      ref: t,
+      className: M(
+        "flex w-full flex-col overflow-hidden",
+        "rounded-lg border border-input bg-transparent shadow-xs/5 bg-field",
+        "transition-[color,box-shadow]",
+        "data-focused:border-primary data-focused:ring-[3px] data-focused:ring-ring",
+        "data-invalid:border-destructive data-invalid:ring-[3px] data-invalid:ring-destructive/24",
+        "motion-reduce:transition-none!"
+      ),
+      style: { minHeight: e.minHeight, maxHeight: e.maxHeight },
+      children: I
+    }
+  ) });
+}
+export {
+  jr as CodeEditor,
+  Sr as kanzoHighlightStyle,
+  Nr as kanzoHighlighting
+};
+//# sourceMappingURL=CodeEditor.js.map

package/dist/composites/CodeEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.js","sources":["../../src/composites/CodeEditor.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn.js\";\nimport { type ReactPanelHost, kanzoSearch } from \"./code-editor-search.js\";\nimport { useKanzoThemeOptional } from \"../theme/theme-context.js\";\nimport { Annotation, Compartment, EditorState, type Extension, RangeSet } from \"@codemirror/state\";\nimport {\n  Decoration,\n  type DecorationSet,\n  EditorView,\n  GutterMarker,\n  ViewPlugin,\n  type ViewUpdate,\n  crosshairCursor,\n  drawSelection,\n  dropCursor,\n  gutterLineClass,\n  highlightSpecialChars,\n  keymap,\n  lineNumbers as cmLineNumbers,\n  placeholder as cmPlaceholder,\n  rectangularSelection,\n} from \"@codemirror/view\";\nimport { defaultKeymap, history, historyKeymap } from \"@codemirror/commands\";\nimport {\n  HighlightStyle,\n  bracketMatching,\n  foldGutter,\n  foldKeymap,\n  indentOnInput,\n  syntaxHighlighting,\n} from \"@codemirror/language\";\nimport { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from \"@codemirror/autocomplete\";\nimport { highlightSelectionMatches, searchKeymap } from \"@codemirror/search\";\nimport { tags as t } from \"@lezer/highlight\";\n\n/**\n * A **CodeMirror 6** editing surface — the reusable lifecycle core (view\n * create/destroy, controlled-value reconcile, live-reconfigured `extensions`\n * slot, readOnly toggle) plus optional batteries + chrome. Domain-free: it knows\n * nothing about any specific language — the consumer injects that via `extensions`.\n *\n * Two consumer shapes, both real:\n *   · **Batteries-included** (default): history + default keymap + line wrapping +\n *     the Kanzo-tokened theme, wrapped in a styled focus-ring chrome. For quick\n *     editors (a JSON field, a code preview).\n *   · **Bring-your-own** (`basics={false} chrome={false}`): a bare surface driven\n *     entirely by the caller's `extensions`, for a mature editor that owns its own\n *     theme/keymap/behaviour (e.g. fossil's LSP editor). `onView` hands back the\n *     `EditorView` for side-wiring.\n */\n\nconst External = Annotation.define<boolean>();\n\n/**\n * Kanzo syntax theme — maps Lezer highlight tags to the design tokens, so a consumer's language\n * extension is coloured by whichever palette document is on the page. Exported so a\n * bring-your-own editor can wire the same palette. Inert until the caller injects a language\n * (there is no tree to tag).\n *\n * **Seven of these are `--syntax-*` and the rest are tokens that already existed**, which is the\n * shape the palette layer settled on: `comment` is `--faint` (the quietest legible ink — a gutter\n * number, a field's placeholder and a code comment are one decision), `punctuation` is\n * `--muted-foreground`, `operator` is `--foreground`, and `invalid` is the destructive family.\n * There were thirteen `--syntax-*` tokens; six of them were duplicating a tint the ramp\n * already publishes.\n *\n * The seven that remain are derived per tenant and graded against `--editor-active-line`, so a\n * palette finally repaints keywords: Dracula's pink, Nord's purple, Catppuccin's mauve. Every\n * document used to declare Kanzo's.\n */\nexport const kanzoHighlightStyle = HighlightStyle.define([\n  { tag: [t.keyword, t.operatorKeyword, t.controlKeyword, t.definitionKeyword, t.moduleKeyword, t.self], color: \"var(--syntax-keyword)\" },\n  { tag: [t.atom, t.bool, t.constant(t.name), t.standard(t.name)], color: \"var(--syntax-number)\" },\n  { tag: [t.string, t.special(t.string), t.docString, t.character, t.regexp], color: \"var(--syntax-string)\" },\n  // An escape sequence inside a string used to fall through to --foreground, so `\\n` rendered\n  // as plain text mid-string. `t.escape`'s parent is `literal`, which was unmapped.\n  { tag: [t.escape, t.special(t.brace)], color: \"var(--syntax-number)\" },\n  { tag: [t.number, t.integer, t.float, t.unit], color: \"var(--syntax-number)\" },\n  { tag: [t.comment, t.lineComment, t.blockComment, t.docComment], color: \"var(--faint)\", fontStyle: \"italic\" },\n  // Object keys and attribute names. These used to be grouped with `variableName`, which\n  // resolved to a token byte-identical to --foreground — so every key in a JSON document\n  // rendered as unstyled text and the whole sample looked near-monochrome.\n  { tag: [t.propertyName, t.attributeName], color: \"var(--syntax-property)\" },\n  { tag: [t.function(t.variableName), t.function(t.propertyName), t.macroName], color: \"var(--syntax-function)\" },\n  // Declarations are coloured; plain variable USES inherit --foreground, as in most themes.\n  { tag: [t.definition(t.variableName), t.definition(t.propertyName)], color: \"var(--syntax-identifier)\" },\n  { tag: [t.operator, t.derefOperator, t.arithmeticOperator, t.logicOperator, t.bitwiseOperator, t.compareOperator, t.updateOperator], color: \"var(--foreground)\" },\n  { tag: [t.punctuation, t.separator, t.bracket, t.angleBracket, t.squareBracket, t.paren, t.brace], color: \"var(--muted-foreground)\" },\n  { tag: [t.typeName, t.className, t.namespace, t.tagName, t.labelName], color: \"var(--syntax-type)\" },\n  { tag: [t.meta, t.annotation, t.processingInstruction, t.documentMeta], color: \"var(--faint)\" },\n  { tag: [t.url, t.link], color: \"var(--syntax-function)\", textDecoration: \"underline\" },\n  // Markdown: only `heading` was mapped, so prose rendered flat.\n  { tag: t.heading, color: \"var(--syntax-keyword)\", fontWeight: \"bold\" },\n  { tag: t.emphasis, fontStyle: \"italic\" },\n  { tag: t.strong, fontWeight: \"bold\" },\n  { tag: t.strikethrough, textDecoration: \"line-through\" },\n  { tag: [t.monospace, t.list], color: \"var(--syntax-string)\" },\n  { tag: t.quote, color: \"var(--faint)\" },\n  // Diff.\n  { tag: t.inserted, color: \"var(--success)\" },\n  { tag: t.deleted, color: \"var(--destructive)\" },\n  { tag: t.changed, color: \"var(--warning)\" },\n  { tag: t.invalid, color: \"var(--destructive-foreground)\" },\n]);\n\n/** The Kanzo highlight style as a ready-to-drop extension. */\nexport const kanzoHighlighting: Extension = syntaxHighlighting(kanzoHighlightStyle, { fallback: true });\n\n/**\n * The caret's line — **and only while nothing is selected.**\n *\n * `highlightActiveLine` decorates the line under every range's `head` whether the range is empty or\n * not (`@codemirror/view@6.43.4`), so one line of a selection also wore the active-line band. Ours\n * is `--muted`, which is *lighter* than the selection tint and runs the full width, so that line\n * read as hovered rather than selected: two affordances arguing over one row. VS Code drops its\n * line highlight while a selection exists, and this is that.\n *\n * Reimplemented rather than suppressed with a CSS rule. Overriding upstream would leave two\n * extensions drawing the same decoration and the reason for it nowhere near the theme.\n */\nconst caretLine = Decoration.line({ class: \"cm-activeLine\" });\n\nconst caretLineGutter = new (class extends GutterMarker {\n  override elementClass = \"cm-activeLineGutter\";\n})();\n\n/** The line start of each caret, empty while any range holds a selection. Ranges arrive sorted. */\nconst caretLines = (state: EditorState): number[] => {\n  if (state.selection.ranges.some((r) => !r.empty)) return [];\n  const starts: number[] = [];\n  let last = -1;\n  for (const r of state.selection.ranges) {\n    const { from } = state.doc.lineAt(r.head);\n    if (from > last) {\n      starts.push(from);\n      last = from;\n    }\n  }\n  return starts;\n};\n\nconst highlightCaretLine = ViewPlugin.fromClass(\n  class {\n    decorations: DecorationSet;\n    constructor(view: EditorView) {\n      this.decorations = build(view.state);\n    }\n    update(u: ViewUpdate) {\n      if (u.docChanged || u.selectionSet) this.decorations = build(u.state);\n    }\n  },\n  { decorations: (v) => v.decorations },\n);\n\nconst build = (state: EditorState): DecorationSet =>\n  Decoration.set(caretLines(state).map((from) => caretLine.range(from)));\n\nconst highlightCaretLineGutter = gutterLineClass.compute([\"selection\", \"doc\"], (state) =>\n  RangeSet.of(caretLines(state).map((from) => caretLineGutter.range(from))),\n);\n\nconst baseTheme = EditorView.theme({\n  // `flex: 1`, not `height: 100%`: the chrome surface sizes with `min-height`/`max-height`, and\n  // a percentage height does not resolve against a `min-height`'d parent — so the editor stayed\n  // at content height and the field's extra `min-height` showed as dead space below the last\n  // line. As a flex child of the flex-column surface it fills the field; `min-height: 0` lets it\n  // shrink so `.cm-scroller` scrolls once content passes `max-height`.\n  \"&\": { fontSize: \"var(--kanzo-font-size-base, 14px)\", backgroundColor: \"transparent\", flex: \"1 1 auto\", minHeight: 0 },\n  // NO PADDING AT ALL any more, and that is the fix for a gap somebody could see: the vertical\n  // padding used to live here, and `.cm-line` sits INSIDE it — so the active-line highlight on the\n  // first line started half a rem below the top of the field and read as a bar floating in a\n  // margin. It moved to `.cm-scroller`, which contains the gutter as well as the content, so both\n  // shift together and the numbers stay on their lines.\n  //\n  // NO BACKGROUND either, and no horizontal padding. Both were here and both were wrong:\n  //\n  //   · An opaque background on `.cm-content` HIDES THE SELECTION. `drawSelection` paints into\n  //     `.cm-selectionLayer`, a sibling at `z-index: -2`, and CSS paints negative-z-index\n  //     descendants *below* the backgrounds of in-flow block-level siblings — so the paper\n  //     covered the layer completely. There is no fallback either: `drawSelection` forces the\n  //     native `::selection` to transparent, so a selection rendered as nothing at all and the\n  //     selected glyphs went invisible. Verified in the browser, and it is why no CodeMirror\n  //     theme upstream puts a background here. The paper is on `.cm-scroller` now.\n  //   · Horizontal padding here inset the ACTIVE LINE highlight by 12px at each edge, because\n  //     the highlight is `.cm-line`'s own background and `.cm-line` sits inside the padding\n  //     box. The row read as a floating bar rather than a highlighted line. The inset moved to\n  //     `.cm-line`, so the highlight spans the field and the text keeps the same rhythm.\n  \".cm-content\": {\n    // Explicitly zero, and as the SHORTHAND: CodeMirror's base theme ships `padding: 4px 0` here,\n    // and a longhand `padding-block: 0` beside a shorthand loses — measured in the browser, the\n    // content kept its 4px and the gutter numbers drifted 4px off their lines. That 4px was the\n    // last of the gap above the first line's highlight.\n    padding: 0,\n    color: \"var(--foreground)\",\n    caretColor: \"var(--foreground)\",\n  },\n  // The field rhythm — 0.75rem is Textarea's `px-3`, so code sits on the same inset as an\n  // input's text (rem-based, so it tracks the density preference). On the LINE, so every\n  // full-width line decoration (active line, and any caller's `Decoration.line`) reaches the\n  // edges instead of stopping short of them.\n  //\n  // The inset is a HANGING one: a wrapped line resumes past the first row's start, so a Turtle URI\n  // that does not fit reads as a continuation rather than as a new statement. `basics` turns\n  // `EditorView.lineWrapping` on, so in a narrow pane most lines are wrapped ones — which is where\n  // the editor is used: a dock beside a canvas, an aside beside a table.\n  \".cm-line\": {\n    paddingBlock: 0,\n    paddingInlineStart: \"2rem\",\n    paddingInlineEnd: \"0.75rem\",\n    textIndent: \"-1.25rem\",\n  },\n  // The font belongs on `.cm-scroller`, not `.cm-content`: the GUTTER is a child of the\n  // scroller, and CodeMirror's base sets `.cm-scroller { font-family: monospace }`. With the\n  // family only on the content, line numbers rendered in the browser's generic monospace —\n  // Courier on many systems — beside content in the Kanzo stack. It also made the gutter's\n  // `min-width: 2.25ch` compute against the wrong font.\n  \".cm-scroller\": {\n    // NO VERTICAL INSET, on either surface. It was `0.5rem` here, on the argument that a code field\n    // wants the same breathing room `Textarea` has — and what it actually produced was nine pixels\n    // between the field's border and the first line, and a first line that does not start where\n    // every other box on the screen starts. A pane docked under its own header showed it worst.\n    // A caller who wants an inset has `className` and the surface it owns.\n    fontFamily: \"var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)\",\n    lineHeight: \"1.5\",\n    overflow: \"auto\",\n    // Fill the editor so clicking the empty area below the last line still lands the caret,\n    // rather than leaving dead surface — see the `&` note.\n    flexGrow: 1,\n    minHeight: 0,\n    // The paper. It lives here and NOT on `.cm-content` — see the note there: an opaque\n    // background on the content box hides the selection layer beneath it. The scroller fills\n    // the whole field (flexGrow above), so the paper reaches the bottom on a short document.\n    background: \"var(--background)\",\n  },\n  \"&.cm-focused\": { outline: \"none\" },\n  // The gutter column carries its own tint. It used to be painted by the scroller instead, on\n  // the grounds that a fill here \"only spans the content rows and stops mid-field on a short\n  // document\" — measured against the current CodeMirror, that is no longer true: this element\n  // is sized to the full scroller height, so the column reaches the bottom. Reclaiming it\n  // freed the scroller to hold the paper, which is what un-hides the selection layer.\n  // No divider; the tint step from `--muted` to the scroller's `--background` is the separation.\n  \".cm-gutters\": {\n    // NO vertical padding: the scroller's is the only one, and the gutter is inside it, so every\n    // number already sits at its line's y. Repeating it here dropped each number one step too\n    // low — verified back when the padding was on `.cm-content`: a constant 9px below its line.\n    background: \"var(--muted)\",\n    border: \"none\",\n    color: \"var(--faint)\",\n  },\n  // Line numbers: tabular figures (no jitter across 9→10→100), right-aligned with breathing\n  // room from the border edge, and a comfortable minimum width.\n  \".cm-lineNumbers .cm-gutterElement\": {\n    fontVariantNumeric: \"tabular-nums\",\n    fontFeatureSettings: '\"tnum\"',\n    minWidth: \"2.25ch\",\n    padding: \"0 0.5rem 0 0.75rem\",\n    textAlign: \"right\",\n    cursor: \"pointer\",\n    transition: \"color 120ms, background-color 120ms\",\n  },\n  // A line number is a click target (it selects the line), so it has to answer the\n  // pointer — without this the whole column reads as inert decoration.\n  // Quieter than the active line on purpose: this is a hover affordance, and at equal\n  // strength the two read as the same state and the column flickers as the pointer moves.\n  \".cm-lineNumbers .cm-gutterElement:hover\": {\n    backgroundColor: \"color-mix(in srgb, var(--editor-active-line, var(--muted)) 60%, transparent)\",\n    color: \"var(--foreground)\",\n  },\n  \".cm-foldGutter .cm-gutterElement:hover\": { color: \"var(--foreground)\" },\n  \".cm-placeholder\": { color: \"var(--muted-foreground)\" },\n  // `highlightSpecialChars` ships its own `&light`/`&dark` rule at a raw `red` / `#f78`. Whichever\n  // half the appearance selects is a raw hue nobody chose. Tokenised here, at equal specificity and\n  // later in the sheet, so ours wins in both.\n  \".cm-specialChar\": { color: \"var(--destructive-foreground)\" },\n\n  // ── Floating surfaces ─────────────────────────────────────────────────────────\n  // CodeMirror ships its own light-mode chrome for tooltips, autocomplete and the\n  // search panel. Left alone they arrive as white boxes with system-blue selection —\n  // the moment an editor is more than a text box, that is where the theme visibly\n  // breaks. These read from the same tokens as `popover` / `menu`.\n  \".cm-tooltip\": {\n    background: \"var(--popover)\",\n    color: \"var(--popover-foreground)\",\n    border: \"1px solid var(--border)\",\n    borderRadius: \"var(--radius-md)\",\n    boxShadow: \"0 4px 12px rgb(0 0 0 / 0.08)\",\n    overflow: \"hidden\",\n  },\n  // The divider between an autocomplete tooltip's sections. CodeMirror's `&light` default is\n  // `1px solid #bbb`, and it is the half with no `&dark` counterpart — so before the facet followed\n  // the appearance it drew a pale hairline inside a dark popover, and it is *still* the rule that\n  // covers a light page. Found by `codemirror-dark-parity.test.ts`, not by looking.\n  \".cm-tooltip-section:not(:first-child)\": { borderTop: \"1px solid var(--border)\" },\n  \".cm-tooltip .cm-tooltip-arrow:before\": { borderTopColor: \"var(--border)\" },\n  \".cm-tooltip .cm-tooltip-arrow:after\": { borderTopColor: \"var(--popover)\" },\n  \".cm-tooltip-autocomplete > ul\": {\n    fontFamily: \"var(--font-mono, ui-monospace, monospace)\",\n    maxHeight: \"16rem\",\n  },\n  \".cm-tooltip-autocomplete > ul > li\": {\n    padding: \"0.125rem 0.5rem\",\n    lineHeight: \"1.6\",\n  },\n  \".cm-tooltip-autocomplete > ul > li[aria-selected]\": {\n    background: \"var(--accent)\",\n    color: \"var(--accent-foreground)\",\n  },\n  \".cm-completionLabel\": { color: \"inherit\" },\n  \".cm-completionMatchedText\": {\n    color: \"var(--primary)\",\n    fontWeight: \"600\",\n    textDecoration: \"none\",\n  },\n  \".cm-completionDetail\": {\n    color: \"var(--muted-foreground)\",\n    fontStyle: \"normal\",\n    marginInlineStart: \"0.5rem\",\n  },\n  \".cm-completionIcon\": { opacity: 0.64, paddingInlineEnd: \"0.5rem\" },\n\n  \".cm-panels\": {\n    background: \"var(--card)\",\n    color: \"var(--card-foreground)\",\n    borderColor: \"var(--border)\",\n  },\n  \".cm-panels.cm-panels-top\": { borderBottom: \"1px solid var(--border)\" },\n  \".cm-panels.cm-panels-bottom\": { borderTop: \"1px solid var(--border)\" },\n\n  // **`.cm-textfield` and `.cm-button` are no longer OUR controls, and that is the whole point of\n  // `code-editor-search.tsx`.** The find/replace panel is `InputGroup`, `Toggle`, `Button` and\n  // `ButtonGroup` now, rendered through a portal, so it wears the library's typography, focus ring\n  // and hover states rather than a run of rules restating them in CSS. Six selectors went with it:\n  // `.cm-panel.cm-search`, its `input, button, label { font-size: inherit }`, the two\n  // `.cm-textfield` rules and the two for `button[name=close]`.\n  //\n  // These two stay, unscoped, for the controls that are still CodeMirror's: `gotoLine`'s dialog\n  // (Mod-Alt-G), and any panel a caller's own extensions bring — `@codemirror/lint`'s is the\n  // obvious one, and it is a caller's dependency rather than ours.\n  //\n  // **They also have to stay because they are the only thing standing between a page and a box\n  // nobody themed.** `&light .cm-textfield { background: white; border: 1px solid silver }` and\n  // `&light .cm-button { background: linear-gradient(#eff1f5, #d9d9df) }` are one half of it and\n  // `&dark`'s `#333` and `linear-gradient(#393939, #111)` are the other; the `darkTheme` facet picks\n  // which, and neither is a token. `codemirror-dark-parity.test.ts` checks BOTH halves and fails the\n  // day either selector leaves this file. The previous\n  // spelling was `.cm-panel.cm-search .cm-textfield`, which covered the search field and left\n  // `gotoLine`'s identical field wearing the white default; before that it was `input[type=text]`,\n  // which matched nothing at all, because CodeMirror sets no `type` on it.\n  \".cm-textfield\": {\n    background: \"var(--background)\",\n    color: \"var(--foreground)\",\n    border: \"1px solid var(--input)\",\n    borderRadius: \"var(--radius-sm)\",\n    padding: \"0.125rem 0.375rem\",\n    outline: \"none\",\n  },\n  \".cm-textfield:focus\": {\n    borderColor: \"var(--ring)\",\n    boxShadow: \"0 0 0 3px color-mix(in srgb, var(--ring) 32%, transparent)\",\n  },\n  \".cm-button\": {\n    background: \"var(--secondary)\",\n    color: \"var(--secondary-foreground)\",\n    border: \"1px solid transparent\",\n    borderRadius: \"var(--radius-sm)\",\n    backgroundImage: \"none\",\n    padding: \"0.125rem 0.5rem\",\n    cursor: \"pointer\",\n  },\n  \".cm-button:hover\": { background: \"var(--accent)\" },\n  \".cm-button:active\": { backgroundImage: \"none\" },\n  \".cm-dialog\": { padding: \"0.375rem 0.5rem\", fontSize: \"var(--kanzo-font-size-small, 12px)\" },\n  \".cm-dialog label\": { display: \"inline-flex\", alignItems: \"center\", gap: \"0.375rem\" },\n  \".cm-dialog-close\": { color: \"var(--muted-foreground)\", cursor: \"pointer\" },\n  \".cm-dialog-close:hover\": { color: \"var(--foreground)\" },\n\n  // Search hits: the current one is the primary-tinted anchor, the rest are quieter so\n  // \"where am I\" stays readable at a glance.\n  \".cm-searchMatch\": {\n    backgroundColor: \"var(--warning-a5)\",\n    outline: \"1px solid var(--border)\",\n    borderRadius: \"2px\",\n  },\n  \".cm-searchMatch.cm-searchMatch-selected\": {\n    backgroundColor: \"var(--warning-a8)\",\n    outline: \"1px solid var(--warning)\",\n  },\n\n  // Lint diagnostics — semantic tokens, so severity survives a re-theme.\n  \".cm-diagnostic\": {\n    padding: \"0.25rem 0.5rem\",\n    borderInlineStartWidth: \"3px\",\n    borderInlineStartStyle: \"solid\",\n    fontFamily: \"var(--font-sans)\",\n  },\n  \".cm-diagnostic-error\": { borderInlineStartColor: \"var(--destructive)\" },\n  \".cm-diagnostic-warning\": { borderInlineStartColor: \"var(--warning)\" },\n  \".cm-diagnostic-info\": { borderInlineStartColor: \"var(--info)\" },\n  \".cm-lintPoint-error:after\": { borderBottomColor: \"var(--destructive)\" },\n  \".cm-lintPoint-warning:after\": { borderBottomColor: \"var(--warning)\" },\n\n  // Scrollbars: the default OS chrome is the loudest thing in a dark editor.\n  \".cm-scroller::-webkit-scrollbar\": { width: \"10px\", height: \"10px\" },\n  \".cm-scroller::-webkit-scrollbar-track\": { background: \"transparent\" },\n  \".cm-scroller::-webkit-scrollbar-thumb\": {\n    background: \"color-mix(in srgb, var(--muted-foreground) 32%, transparent)\",\n    borderRadius: \"6px\",\n    border: \"2px solid transparent\",\n    backgroundClip: \"content-box\",\n  },\n  \".cm-scroller::-webkit-scrollbar-thumb:hover\": {\n    background: \"color-mix(in srgb, var(--muted-foreground) 56%, transparent)\",\n    backgroundClip: \"content-box\",\n  },\n  \".cm-scroller::-webkit-scrollbar-corner\": { background: \"transparent\" },\n  // Tokenised selection (drawSelection), active line, matching bracket, search matches.\n  \".cm-cursor, .cm-dropCursor\": { borderLeftColor: \"var(--foreground)\" },\n  // The full child chain is LOAD-BEARING. CodeMirror's base theme ships\n  // `&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground`\n  // (@codemirror/view), which compiles to specificity 0,5,0. A flat\n  // `&.cm-focused .cm-selectionBackground` is 0,3,0 and LOSES — so the focused selection\n  // rendered in CodeMirror's stock lavender (#d7d4f0) instead of a Kanzo token. Worse, that\n  // base rule is `&light`, and for as long as the `darkTheme` facet was pinned false the light\n  // lavender applied in dark mode too. It is driven from the appearance now, which moves the\n  // default to `&dark`'s — a different stock colour, still not ours, still covered by this rule.\n  \"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground\": {\n    backgroundColor: \"var(--brand-a5)\",\n  },\n  // **A selection must not repaint the text, and ours repainted all of it.** `tokens.css` sets a\n  // document-wide `::selection { bg-primary/80 text-primary-foreground }`, which is right\n  // everywhere prose is selected and wrong inside an editor: `drawSelection` suppresses the native\n  // selection's *background* and not its `color`, so the fill came from `.cm-selectionBackground`\n  // — `--brand-a5`, black at 12% — while every glyph inside it took `--primary-foreground`.\n  //\n  // Measured on `/docs/forms/code-editor`: #fafafa text on a #dcdcdc block. Keys, strings and\n  // numbers all flattened to one near-white, so selecting seven lines of JSON erased the\n  // highlighting from them. It happens under every palette, because a `-foreground` role is a\n  // contrast colour for a fill that is not being painted here.\n  //\n  // `currentColor` is the fix, and it has to be `currentColor` and not a token: a fixed colour\n  // flattens the tokens just as thoroughly, one shade later.\n  \".cm-selectionBackground, .cm-content ::selection\": {\n    backgroundColor: \"var(--brand-a5)\",\n    color: \"currentColor\",\n  },\n  \".cm-activeLine\": { backgroundColor: \"var(--editor-active-line, var(--muted))\" },\n  // The active line's gutter cell is emphasised beyond the row: stronger tint, full-strength\n  // ink and a weight bump so the current line number stands out from the dim column.\n  \".cm-activeLineGutter\": {\n    backgroundColor: \"var(--editor-active-line, var(--muted))\",\n    color: \"var(--foreground)\",\n    fontWeight: \"600\",\n  },\n  \".cm-matchingBracket, &.cm-focused .cm-matchingBracket\": { backgroundColor: \"var(--brand-a5)\", outline: \"1px solid var(--primary)\" },\n  \".cm-nonmatchingBracket\": { backgroundColor: \"var(--destructive-a4)\" },\n  // **A neutral tint, because it is not a search hit.** This wore `--warning-a5`, byte for byte\n  // what `.cm-searchMatch` wears — so the other occurrences of the word under your caret were\n  // indistinguishable from the hits of a query you actually typed, and the two co-occur constantly:\n  // open the find panel while a word is selected and every match looks like the same kind of thing.\n  //\n  // They are not. A search hit is something you asked for; this is the editor noticing a\n  // repetition. Every editor that draws both separates them the same way — the query keeps the\n  // colour, the passive one goes neutral — and `--base-a5` is the house's neutral wash. It also\n  // takes the collision off `--warning-a5`, which `Highlight` uses for a search-term mark in prose.\n  \".cm-selectionMatch\": { backgroundColor: \"var(--base-a5)\" },\n  \".cm-foldGutter .cm-gutterElement\": { cursor: \"pointer\", color: \"var(--faint)\" },\n  \".cm-foldPlaceholder\": { background: \"var(--muted)\", border: \"1px solid var(--border)\", color: \"var(--muted-foreground)\", borderRadius: \"var(--radius-sm)\", padding: \"0 4px\" },\n});\n\n/**\n * **The base theme's other half, switched on by the side the page is wearing.**\n *\n * `EditorView.theme(spec, { dark })` bakes the answer into the theme, and ours cannot: it is ONE\n * theme for both appearances, because the tokens flip underneath it. So the facet is set beside the\n * theme instead of by it, from `resolvedAppearance`, and `codemirror-dark-parity.test.ts` widened to\n * both halves the day this landed — until now only `&light` could ever apply, and now either can.\n *\n * `false` is spelled as *nothing*, not as `of(false)`: the facet combines with\n * `values.indexOf(true) > -1`, so a `false` from us would not switch off a `true` a caller's own\n * theme contributed, and pretending otherwise would be the more confusing lie.\n */\nconst darkFacet = (dark: boolean): Extension => (dark ? EditorView.darkTheme.of(true) : []);\n\nexport interface CodeEditorProps {\n  value: string;\n  onChange?: (value: string) => void;\n  /** The language brain — CodeMirror extensions injected by the consumer (LSP,\n   *  StreamParser, autocomplete, linting…). Reconfigured live when it changes. */\n  extensions?: Extension;\n  readOnly?: boolean;\n  lineNumbers?: boolean;\n  invalid?: boolean;\n  placeholder?: string;\n  minHeight?: string;\n  maxHeight?: string;\n  /** Include the built-in batteries (history + default keymap + line wrapping +\n   *  the Kanzo token theme). Default true. Set false when the caller's `extensions`\n   *  own all behaviour and theming. */\n  basics?: boolean;\n  /**\n   * Wrap long lines, or scroll sideways. Default true, which is what `basics` always did.\n   *\n   * Wrapping is right where the editor is a reading surface in a narrow pane; it is wrong where\n   * the document has structure a reader tracks by column — a Turtle predicate list read against\n   * its indentation stops being a list once every third line reflows. There is no third option:\n   * `EditorView.lineWrapping` is on or it is not.\n   *\n   * Read once, when the view is built — like `basics`, and for the same reason. Changing it after\n   * mount does nothing.\n   */\n  wrap?: boolean;\n  /**\n   * Wrap the editor in the styled focus-ring chrome (Box + inset ring + surface background).\n   * Default true. Set false for a bare surface.\n   */\n  chrome?: boolean;\n  /** Class applied to the editor host (only meaningful when `chrome={false}`). */\n  className?: string;\n  /** Receives the `EditorView` on mount and `null` on unmount — for side-wiring\n   *  (e.g. pushing LSP notifications). */\n  onView?: (view: EditorView | null) => void;\n}\n\nexport function CodeEditor(p: CodeEditorProps) {\n  const container = useRef<HTMLDivElement>(null);\n  const view = useRef<EditorView>(undefined);\n  const [focused, setFocused] = useState(false);\n\n  const props = useRef(p);\n  props.current = p;\n\n  const langSlot = useRef(new Compartment());\n  const editable = useRef(new Compartment());\n  const appearance = useRef(new Compartment());\n\n  // Optional, like every other reader of the cascade in this package: without a provider the facet\n  // stays false, which is where it sat before this existed, and the guard proves the `&light`\n  // defaults that then apply are all overridden anyway.\n  const dark = useKanzoThemeOptional()?.resolvedAppearance === \"dark\";\n  const darkNow = useRef(dark);\n  darkNow.current = dark;\n\n  // **CodeMirror's panels, rendered by React.** A `Panel` is an object with a `dom`, and nothing\n  // says who fills it — so we hand over an empty element and portal into it. The portals are\n  // children of THIS tree, which is the reason the host lives here and not in the panel's own\n  // module: a panel rendered from anywhere else loses every provider above the editor.\n  //\n  // `mount`/`destroy` are CodeMirror's, and they bracket the element's life in the document\n  // exactly. `mount` runs before React has rendered anything into it, which is why a panel that\n  // wants focus takes it in its own effect rather than relying on CodeMirror's.\n  const [panels, setPanels] = useState<{ id: number; dom: HTMLElement; node: ReactNode }[]>([]);\n\n  // Build the editor once; long-lived callbacks read the latest props via the ref.\n  useEffect(() => {\n    const basics = props.current.basics ?? true;\n    let nextPanel = 0;\n    const panelHost: ReactPanelHost = {\n      panel: (node, opts) => {\n        const dom = document.createElement(\"div\");\n        const id = ++nextPanel;\n        return {\n          dom,\n          top: opts?.top,\n          mount: () => setPanels((open) => [...open, { id, dom, node }]),\n          destroy: () => setPanels((open) => open.filter((entry) => entry.id !== id)),\n        };\n      },\n    };\n    const updateListener = EditorView.updateListener.of((u) => {\n      if (u.focusChanged) setFocused(u.view.hasFocus);\n      if (!u.docChanged) return;\n      if (u.transactions.some((t) => t.annotation(External))) return; // our own reconcile\n      props.current.onChange?.(u.state.doc.toString());\n    });\n    const wrap = props.current.wrap ?? true;\n    const batteries: Extension[] = basics\n      ? [\n          history(),\n          keymap.of([\n            ...defaultKeymap,\n            ...historyKeymap,\n            ...searchKeymap,\n            ...closeBracketsKeymap,\n            ...completionKeymap,\n            ...foldKeymap,\n          ]),\n          ...(wrap ? [EditorView.lineWrapping] : []),\n          drawSelection(),\n          dropCursor(),\n          // `completionKeymap` was already bound below, but the extension itself was never\n          // installed — so Ctrl-Space did nothing and the ~25 lines of\n          // `.cm-tooltip-autocomplete` styling in this theme were dead CSS.\n          autocompletion(),\n          // Makes NBSP, zero-width and control characters visible. Without it they are\n          // invisible in the document, which is a real footgun when editing data.\n          highlightSpecialChars(),\n          // Alt-drag column selection, and the crosshair cursor that signals it is available.\n          rectangularSelection(),\n          crosshairCursor(),\n          highlightCaretLine,\n          bracketMatching(),\n          closeBrackets(),\n          indentOnInput(),\n          highlightSelectionMatches(),\n          // **`search()` has to be in the configuration, and it was not.** `searchKeymap` was\n          // bound below and nothing installed the extension, so `openSearchPanel` appended the\n          // defaults itself the first time Mod-F was pressed — which works, and silently discards\n          // any configuration, `createPanel` included. Same shape as the `autocompletion()` bug\n          // noted further down: a keymap for an extension nobody added.\n          kanzoSearch(panelHost),\n          kanzoHighlighting,\n          baseTheme,\n        ]\n      : [];\n    const v = new EditorView({\n      parent: container.current!,\n      state: EditorState.create({\n        doc: props.current.value ?? \"\",\n        extensions: [\n          // Multiple cursors. Off by default in CodeMirror, and table stakes in an editor.\n          EditorState.allowMultipleSelections.of(true),\n          ...batteries,\n          ...(props.current.lineNumbers ? [cmLineNumbers()] : []),\n          ...(basics && props.current.lineNumbers ? [highlightCaretLineGutter, foldGutter()] : []),\n          ...(props.current.placeholder ? [cmPlaceholder(props.current.placeholder)] : []),\n          updateListener,\n          appearance.current.of(darkFacet(darkNow.current)),\n          langSlot.current.of(props.current.extensions ?? []),\n          editable.current.of([\n            EditorView.editable.of(!props.current.readOnly),\n            EditorState.readOnly.of(!!props.current.readOnly),\n          ]),\n        ],\n      }),\n    });\n    view.current = v;\n    props.current.onView?.(v);\n    return () => {\n      props.current.onView?.(null);\n      v.destroy();\n    };\n  }, []);\n\n  // Reconcile external value changes — but never clobber active typing.\n  useEffect(() => {\n    const v = view.current;\n    if (!v || v.hasFocus) return;\n    if (p.value !== v.state.doc.toString()) {\n      v.dispatch({\n        changes: { from: 0, to: v.state.doc.length, insert: p.value },\n        annotations: External.of(true),\n      });\n    }\n  }, [p.value]);\n\n  // Swap the language extensions live (compartment reconfigure, no re-create).\n  useEffect(() => {\n    view.current?.dispatch({ effects: langSlot.current.reconfigure(p.extensions ?? []) });\n  }, [p.extensions]);\n\n  // Follow the page's side. Nothing of ours is keyed off the facet — our rules are unprefixed and\n  // the tokens do the flipping — so what this moves is CodeMirror's own base theme and any theme a\n  // caller's extensions bring.\n  useEffect(() => {\n    view.current?.dispatch({ effects: appearance.current.reconfigure(darkFacet(dark)) });\n  }, [dark]);\n\n  // Toggle editability when `readOnly` changes.\n  useEffect(() => {\n    view.current?.dispatch({\n      effects: editable.current.reconfigure([\n        EditorView.editable.of(!p.readOnly),\n        EditorState.readOnly.of(!!p.readOnly),\n      ]),\n    });\n  }, [p.readOnly]);\n\n  // A portal contributes no DOM to the element it is written inside, so these are safe as children\n  // of the very element CodeMirror owns: React mounts each node into the panel's `dom` and nothing\n  // else. Written once and used by both branches below.\n  const portals = panels.map((entry) => createPortal(entry.node, entry.dom, String(entry.id)));\n\n  // Bare surface (caller owns theme/chrome).\n  //\n  // `flex flex-col` is LOAD-BEARING, not styling. The theme sizes the editor with\n  // `\"&\": { flex: \"1 1 auto\", minHeight: 0 }`, which resolves only inside a flex container — and\n  // this host was a plain block, so `.cm-editor` fell back to content height. A caller asking for\n  // a full-height pane (`chrome={false} className=\"flex-1\"`) got a host that filled its parent\n  // and an editor that did not fill the host: measured 467px of scroller inside an 883px pane,\n  // with the rest dead. The chromed branch below never had the bug because its wrapper is\n  // already a flex column.\n  if (p.chrome === false) {\n    return (\n      <div\n        className={cn(\"flex flex-col\", p.className)}\n        data-slot=\"code-editor\"\n        ref={container}\n        style={{ minHeight: p.minHeight, maxHeight: p.maxHeight }}\n      >\n        {portals}\n      </div>\n    );\n  }\n\n  // A field, not an IDE pane: the surface wears the exact chrome as Textarea/Input — a\n  // hairline `--input` border, `rounded-lg`, the transparent/`--field`-tinted surface, a\n  // faint shadow, and the same focus/invalid treatment (border shifts colour + a 3px ring).\n  // The ring is a `box-shadow` (Tailwind `ring`), drawn OUTSIDE the border box, so it is not\n  // clipped by `overflow-hidden` and the gutter's own background cannot paint over it — the\n  // failure the old inset approach worked around. Focus is driven off `data-focused`\n  // (CodeMirror's contenteditable holds focus, not this wrapper, so `:focus-visible` can't).\n  return (\n    <div data-slot=\"code-editor\" style={{ flex: 1, width: \"100%\" }}>\n      <div\n        data-slot=\"code-editor-surface\"\n        data-focused={focused || undefined}\n        data-invalid={p.invalid || undefined}\n        ref={container}\n        className={cn(\n          \"flex w-full flex-col overflow-hidden\",\n          \"rounded-lg border border-input bg-transparent shadow-xs/5 bg-field\",\n          \"transition-[color,box-shadow]\",\n          \"data-focused:border-primary data-focused:ring-[3px] data-focused:ring-ring\",\n          \"data-invalid:border-destructive data-invalid:ring-[3px] data-invalid:ring-destructive/24\",\n          \"motion-reduce:transition-none!\"\n        )}\n        style={{ minHeight: p.minHeight, maxHeight: p.maxHeight }}\n      >\n        {portals}\n      </div>\n    </div>\n  );\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsDA;AAmByD;AACuD;AACtC;AACW;AAAA;AAAA;AAGrC;AACQ;AAC6C;AAAA;AAAA;AAAA;AAIlD;AACoC;AAAA;AAET;AACgE;AAClC;AAC5B;AACC;AACN;AAAA;AAEX;AAChC;AACD;AACW;AACH;AACd;AAAA;AAEG;AACD;AACA;AAE3B;AAmBwD;AAA3B;AAClB;AAAe;AAC1B;AAIE;AACA;AACA;AACA;AACE;AACA;AAES;AAGX;AACF;AAEsC;AAC9B;AACJ;AAEE;AAAmC;AACrC;AAEE;AAAoE;AACtE;AAAA;AAGJ;AAKiD;AAA2B;AAE5E;AAEmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMkF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBpG;AAAA;AAAA;AAAA;AAAA;AAKJ;AACF;AACK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWF;AACI;AACM;AACF;AACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOE;AAAA;AAAA;AAAA;AAAA;AAAA;AAMF;AACA;AACF;AAAA;AAAA;AAGA;AACC;AAAA;AAAA;AAAA;AAIC;AAAA;AAEa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOZ;AAAA;AAAA;AAAA;AAID;AACJ;AACD;AAAA;AAAA;AAAA;AAI4B;AACf;AACC;AACX;AACD;AACE;AACH;AACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAM6B;AACxB;AACV;AAAA;AAE0C;AACvB;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOb;AACD;AACL;AACC;AACM;AACH;AACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAM0C;AACI;AACD;AACxB;AACnB;AACD;AAAA;AAEyB;AAC3B;AACG;AAAA;AAEuC;AACvC;AACL;AAAA;AAEuB;AACH;AACpB;AACK;AACI;AAAA;AAEM;AACf;AACI;AACQ;AAAA;AAEoC;AAE3C;AACA;AACL;AACM;AAAA;AAE6B;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsB3B;AACH;AACL;AACC;AACM;AACL;AACA;AAAA;AAEY;AACR;AACF;AAAA;AAEC;AACA;AACL;AACC;AACM;AACG;AACR;AACD;AAAA;AAEwB;AACM;AACc;AACmB;AACT;AAC7B;AAAA;AAAA;AAIhB;AACA;AACR;AACK;AAAA;AAE2B;AACxB;AACR;AAAA;AAAA;AAIO;AACP;AACe;AACA;AACZ;AAAA;AAEoC;AACE;AACH;AACC;AACE;AAAA;AAGQ;AACL;AACd;AAC3B;AACE;AACN;AACQ;AAAA;AAE6B;AACjC;AACI;AAAA;AAEsC;AAAA;AAEP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS2B;AACzD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeiC;AACjC;AACV;AAAA;AAE4B;AAAA;AAAA;AAGb;AACL;AACV;AACK;AAAA;AAE0F;AAC3D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUJ;AACuB;AAElE;AAwDO;;AACL;AAKA;AAEA;AASA;AAUA;AAGA;;AACE;AACA;AACA;AAAkC;AAE9B;AAEA;AAAO;AACL;AACW;AACkD;AACa;AAAA;AAE9E;;AAIA;;AAME;AACE;AACU;AACL;AACA;AACA;AACA;AACA;AACA;AACJ;AACsC;AACvC;AACA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAGA;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMqB;AACrB;AACA;AAGmB;AACL;AACQ;AACI;AAChB;AAAA;AAEiC;AACxC;AACiD;AACiC;AACR;AAC7E;AACgD;AACE;AAC9B;AAC4B;AACE;AACjD;AAAA;AAEJ;AAEH;;AAGE;AACE;AACJ;AAKA;AACA;AAEa;AAC6C;AACzB;AAC9B;;AAMH;AAAiF;;AAOjF;AAAgF;;AAKhF;AAAuB;AACiB;AACF;AACE;AACrC;AAAA;AAOL;AAWA;AAEI;AAAC;AAAA;AAC2C;AAChC;AACL;AACyC;AAE7C;AAAA;AAcH;AAAC;AAAA;AACW;AACe;AACE;AACtB;AACM;AACT;AACA;AACA;AACA;AACA;AACA;AAAA;AAE4C;AAE7C;AAAA;AAIT;;;;;;"}