@citisen/litearea 0.1.0

package/dist/styles.cjs

@@ -0,0 +1,453 @@
+'use strict';
+
+// src/styles.ts
+var SCOPE_PALETTE = [
+  { scope: "text", light: "var(--litearea-fg)" },
+  { scope: "word", light: "var(--litearea-fg)" },
+  { scope: "family", light: "var(--litearea-fg)" },
+  { scope: "family-generic", light: "#7c3aed", dark: "#c4a2ff" },
+  { scope: "family-unknown", light: "var(--litearea-warning)" },
+  { scope: "family-unclosed", light: "var(--litearea-error)" },
+  { scope: "weight", light: "var(--litearea-accent)" },
+  { scope: "weight-missing", light: "var(--litearea-warning)" },
+  { scope: "state", light: "var(--litearea-accent)" },
+  { scope: "property", light: "#7c3aed", dark: "#c4a2ff" },
+  { scope: "operator", light: "var(--litearea-fg-dim)" },
+  { scope: "separator", light: "var(--litearea-fg-dim)" },
+  { scope: "value-shape", light: "#0f766e", dark: "#5eead4" },
+  { scope: "value-color", light: "#0f766e", dark: "#5eead4" },
+  { scope: "value-pattern", light: "#0f766e", dark: "#5eead4" },
+  { scope: "value-motion", light: "#0f766e", dark: "#5eead4" },
+  { scope: "value-number", light: "#b45309", dark: "#fbbf24" },
+  { scope: "comment", light: "var(--litearea-fg-dim)" },
+  { scope: "invalid", light: "var(--litearea-error)" },
+  { scope: "keyword", light: "var(--litearea-accent)" },
+  { scope: "string", light: "#0f766e", dark: "#5eead4" },
+  { scope: "number", light: "#b45309", dark: "#fbbf24" }
+];
+function scopeVariables(scheme) {
+  return SCOPE_PALETTE.filter((entry) => scheme === "light" || entry.dark !== void 0).map((entry) => {
+    const value = scheme === "light" ? entry.light : entry.dark;
+    return `  --litearea-scope-${entry.scope}: ${String(value)};`;
+  }).join("\n");
+}
+function scopeRules() {
+  return SCOPE_PALETTE.map(
+    (entry) => `.litearea-scope-${entry.scope} { color: var(--litearea-scope-${entry.scope}); }`
+  ).join("\n");
+}
+var LITEAREA_STYLES = `
+.litearea {
+  --litearea-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --litearea-font-size: 13px;
+  --litearea-line-height: 20px;
+  --litearea-padding-block: 6px;
+  --litearea-padding-inline: 10px;
+  --litearea-radius: 8px;
+  --litearea-fg: #1f2328;
+  --litearea-fg-dim: #6b7280;
+  --litearea-fg-strong: #111827;
+  --litearea-bg: #ffffff;
+  --litearea-bg-raised: #ffffff;
+  --litearea-border: #d8dbe0;
+  --litearea-border-focus: #4d6bfe;
+  --litearea-accent: #4d6bfe;
+  --litearea-accent-soft: rgba(77, 107, 254, 0.12);
+  --litearea-selection: rgba(77, 107, 254, 0.22);
+  --litearea-error: #e5484d;
+  --litearea-warning: #d97706;
+  --litearea-info: #4d6bfe;
+  --litearea-hint: #8b8f97;
+  --litearea-shadow: 0 6px 24px rgba(15, 23, 42, 0.14);
+
+${scopeVariables("light")}
+
+  position: relative;
+  display: block;
+  color: var(--litearea-fg);
+}
+
+@media (prefers-color-scheme: dark) {
+  .litearea {
+    --litearea-fg: #e6e8eb;
+    --litearea-fg-dim: #8b919b;
+    --litearea-fg-strong: #ffffff;
+    --litearea-bg: #1b1e24;
+    --litearea-bg-raised: #23262c;
+    --litearea-border: #363b44;
+${scopeVariables("dark")}
+    --litearea-error: #ff6b6b;
+    --litearea-warning: #f59e0b;
+    --litearea-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
+  }
+}
+
+/* \u2500\u2500 the box \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.litearea-box {
+  position: relative;
+  display: block;
+  border: 1px solid var(--litearea-border);
+  border-radius: var(--litearea-radius);
+  background: var(--litearea-bg);
+  transition: border-color 120ms ease;
+}
+
+.litearea-box:focus-within {
+  border-color: var(--litearea-border-focus);
+}
+
+.litearea-invalid .litearea-box {
+  border-color: var(--litearea-error);
+}
+
+/*
+ * The layer and the field share this rule and nothing may be added to one alone.
+ * Every property here is a property the mirror copies too \u2014 three elements, one
+ * typography, or the paint drifts.
+ */
+.litearea-layer,
+.litearea-input {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: var(--litearea-padding-block) var(--litearea-padding-inline);
+  border: none;
+  font-family: var(--litearea-font);
+  font-size: var(--litearea-font-size);
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-variant-ligatures: none;
+  font-kerning: none;
+  font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
+  line-height: var(--litearea-line-height);
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-transform: none;
+  text-indent: 0;
+  text-align: left;
+  direction: ltr;
+  tab-size: 2;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.litearea-layer {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+}
+
+/*
+ * When the box is clamped to its maximum height the field grows a scrollbar, and a
+ * scrollbar narrows the text. If the layer kept the full width it would wrap
+ * differently from the field and every colour would slide off its character, so the
+ * field's measured scrollbar width is published as --litearea-scrollbar and added
+ * here. The value is 0 whenever no scrollbar is shown.
+ */
+.litearea-layer {
+  padding-right: calc(var(--litearea-padding-inline) + var(--litearea-scrollbar, 0px));
+}
+
+.litearea-paint {
+  position: relative;
+  min-height: 100%;
+  /* A zero-width space keeps the layer's last line box as tall as the field's:
+     a trailing newline would otherwise collapse in the paint alone, and the box
+     would jump the moment one was typed. */
+  will-change: transform;
+}
+
+.litearea-input {
+  position: relative;
+  display: block;
+  resize: none;
+  background: transparent;
+  color: transparent;
+  caret-color: var(--litearea-fg);
+  outline: none;
+  overflow-y: hidden;
+}
+
+.litearea-growable .litearea-input {
+  resize: none;
+}
+
+.litearea-resizable .litearea-input {
+  resize: vertical;
+}
+
+.litearea-input::placeholder {
+  color: var(--litearea-fg-dim);
+}
+
+.litearea-input::selection {
+  background: var(--litearea-selection);
+}
+
+.litearea-readonly .litearea-input {
+  caret-color: transparent;
+}
+
+/*
+ * The rules that spend the variables, generated from the same list that declares them. There is
+ * deliberately NO catch-all rule setting a property on every painted span: there was one, and a
+ * class plus an element outranks a bare class on specificity, so it silently switched off every
+ * squiggle in the library.
+ *
+ * A scope that is not in the list gets no colour from here, and a host writing a grammar of its
+ * own styles it with a plain rule \u2014 .litearea-scope-my-thing { color: \u2026 } \u2014 since nothing in
+ * this file competes for that selector.
+ */
+${scopeRules()}
+
+.litearea-dec-effective {
+  border-radius: 3px;
+  background: var(--litearea-accent-soft);
+  box-shadow: 0 0 0 1px var(--litearea-accent-soft);
+}
+
+/* The four shapes a diagnostic can take. Wavy for the two that mean "fix this", dotted for
+   the two that mean "worth knowing" \u2014 the same distinction VSCode draws, and the reason
+   severity is a class rather than an inline colour. */
+.litearea-diag-error {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: var(--litearea-error);
+  text-decoration-skip-ink: none;
+  text-underline-offset: 3px;
+}
+
+.litearea-diag-warning {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: var(--litearea-warning);
+  text-decoration-skip-ink: none;
+  text-underline-offset: 3px;
+}
+
+.litearea-diag-info {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: var(--litearea-info);
+  text-decoration-skip-ink: none;
+  text-underline-offset: 3px;
+}
+
+.litearea-diag-hint {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: var(--litearea-hint);
+  text-decoration-skip-ink: none;
+  text-underline-offset: 3px;
+}
+
+/* \u2500\u2500 the completion list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/*
+ * The container holds two things and scrolls NEITHER of them: the list scrolls itself, and the
+ * documentation is pinned below it. Putting the documentation inside the scroll range \u2014 which is
+ * what this used to do \u2014 makes it unreachable with a long list and a long explanation: the
+ * arrows move the active row rather than the scrollbar, so a keyboard user never sees it, and a
+ * mouse user has to scroll down to read it and back up to reach the next row.
+ */
+.litearea-popup {
+  position: absolute;
+  z-index: 30;
+  display: none;
+  flex-direction: column;
+  max-width: 460px;
+  padding: 4px;
+  border: 1px solid var(--litearea-border);
+  border-radius: 10px;
+  background: var(--litearea-bg-raised);
+  box-shadow: var(--litearea-shadow);
+  font-family: var(--litearea-font);
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--litearea-fg);
+  overflow: hidden;
+}
+
+.litearea-popup[data-open="true"] {
+  display: flex;
+}
+
+/* The rows, and the only part that scrolls. Its height is bounded so the documentation below
+   always has somewhere to live. */
+.litearea-list {
+  min-height: 0;
+  max-height: 208px;
+  overflow-y: auto;
+}
+
+/*
+ * The explanation, pinned. Its own height is bounded and it scrolls ITSELF, so a long
+ * explanation stays readable while the rows stay put \u2014 and arrowing to the next row swaps the
+ * text in place instead of requiring a scroll back up.
+ */
+.litearea-docs {
+  flex: none;
+  max-height: 132px;
+  overflow-y: auto;
+  margin: 4px -4px -4px;
+  padding: 6px 10px;
+  border-top: 1px solid var(--litearea-border);
+  background: var(--litearea-bg);
+  border-radius: 0 0 10px 10px;
+  color: var(--litearea-fg);
+  white-space: pre-wrap;
+}
+
+.litearea-popup[data-docs="false"] .litearea-docs {
+  display: none;
+}
+
+.litearea-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 3px 6px;
+  border-radius: 6px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.litearea-row[aria-selected="true"] {
+  background: var(--litearea-accent-soft);
+}
+
+.litearea-rowKind {
+  flex: none;
+  width: 7px;
+  height: 7px;
+  border-radius: 2px;
+  background: var(--litearea-fg-dim);
+  transform: translateY(-1px);
+}
+
+.litearea-kind-family { background: var(--litearea-scope-family-generic); }
+.litearea-kind-generic { background: var(--litearea-scope-family-generic); }
+.litearea-kind-weight { background: var(--litearea-scope-weight); }
+.litearea-kind-state { background: var(--litearea-scope-state); }
+.litearea-kind-property { background: var(--litearea-scope-property); }
+.litearea-kind-value { background: var(--litearea-scope-value-shape); }
+.litearea-kind-number { background: var(--litearea-scope-value-number); }
+.litearea-kind-custom { background: var(--litearea-fg-dim); }
+
+.litearea-rowLabel {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.litearea-rowMatch {
+  color: var(--litearea-accent);
+  font-weight: 600;
+}
+
+.litearea-rowDetail {
+  flex: none;
+  color: var(--litearea-fg-dim);
+  font-size: 11px;
+}
+
+.litearea-docsTitle {
+  font-weight: 600;
+}
+
+.litearea-docsDetail {
+  color: var(--litearea-fg-dim);
+}
+
+.litearea-docsBody {
+  margin-top: 2px;
+  color: var(--litearea-fg-dim);
+}
+
+/* \u2500\u2500 the hover tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.litearea-tooltip {
+  position: absolute;
+  z-index: 40;
+  display: none;
+  max-width: 340px;
+  padding: 6px 10px;
+  border: 1px solid var(--litearea-border);
+  border-radius: 8px;
+  background: var(--litearea-bg-raised);
+  box-shadow: var(--litearea-shadow);
+  font-family: var(--litearea-font);
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--litearea-fg);
+  pointer-events: none;
+  white-space: pre-wrap;
+}
+
+.litearea-tooltip[data-open="true"] {
+  display: block;
+}
+
+.litearea-tooltipTitle {
+  font-weight: 600;
+}
+
+.litearea-tooltipDetail {
+  color: var(--litearea-fg-dim);
+}
+
+.litearea-tooltipBody {
+  margin-top: 3px;
+  color: var(--litearea-fg-dim);
+}
+
+.litearea-srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+`.trim();
+function injectStyles(ownerDocument, nonce) {
+  if (ownerDocument === null || ownerDocument === void 0) return void 0;
+  const existing = ownerDocument.querySelector("style[data-litearea-styles]");
+  if (existing !== null) return existing;
+  const style = ownerDocument.createElement("style");
+  style.dataset.liteareaStyles = "";
+  if (nonce !== void 0) style.nonce = nonce;
+  style.textContent = LITEAREA_STYLES;
+  const head = ownerDocument.head ?? ownerDocument.documentElement;
+  if (head === null || head === void 0) return void 0;
+  head.appendChild(style);
+  return style;
+}
+function scopeClass(scope) {
+  const folded = scope.replace(/[^A-Za-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
+  return folded === "" ? "litearea-scope-text" : `litearea-scope-${folded}`;
+}
+function decorationClass(kind) {
+  return `litearea-dec-${kind.replace(/[^A-Za-z0-9_-]+/g, "-")}`;
+}
+function severityClass(severity) {
+  return `litearea-diag-${severity.replace(/[^A-Za-z0-9_-]+/g, "-")}`;
+}
+
+exports.LITEAREA_STYLES = LITEAREA_STYLES;
+exports.decorationClass = decorationClass;
+exports.injectStyles = injectStyles;
+exports.scopeClass = scopeClass;
+exports.severityClass = severityClass;
+//# sourceMappingURL=styles.cjs.map
+//# sourceMappingURL=styles.cjs.map

package/dist/styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles.ts"],"names":[],"mappings":"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A;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgItB,YAAY;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAwNZ,IAAA;AAYK,SAAS,YAAA,CACd,eACA,KAAA,EAC8B;AAC9B,EAAA,IAAI,aAAA,KAAkB,IAAA,IAAQ,aAAA,KAAkB,MAAA,EAAW,OAAO,MAAA;AAClE,EAAA,MAAM,QAAA,GAAW,aAAA,CAAc,aAAA,CAAgC,6BAA6B,CAAA;AAC5F,EAAA,IAAI,QAAA,KAAa,MAAM,OAAO,QAAA;AAC9B,EAAA,MAAM,KAAA,GAAQ,aAAA,CAAc,aAAA,CAAc,OAAO,CAAA;AACjD,EAAA,KAAA,CAAM,QAAQ,cAAA,GAAiB,EAAA;AAC/B,EAAA,IAAI,KAAA,KAAU,MAAA,EAAW,KAAA,CAAM,KAAA,GAAQ,KAAA;AACvC,EAAA,KAAA,CAAM,WAAA,GAAc,eAAA;AACpB,EAAA,MAAM,IAAA,GAAO,aAAA,CAAc,IAAA,IAAQ,aAAA,CAAc,eAAA;AACjD,EAAA,IAAI,IAAA,KAAS,IAAA,IAAQ,IAAA,KAAS,MAAA,EAAW,OAAO,MAAA;AAChD,EAAA,IAAA,CAAK,YAAY,KAAK,CAAA;AACtB,EAAA,OAAO,KAAA;AACT;AAYO,SAAS,WAAW,KAAA,EAAuB;AAChD,EAAA,MAAM,MAAA,GAAS,MAAM,OAAA,CAAQ,kBAAA,EAAoB,GAAG,CAAA,CAAE,OAAA,CAAQ,YAAY,EAAE,CAAA;AAC5E,EAAA,OAAO,MAAA,KAAW,EAAA,GAAK,qBAAA,GAAwB,CAAA,eAAA,EAAkB,MAAM,CAAA,CAAA;AACzE;AAGO,SAAS,gBAAgB,IAAA,EAAsB;AACpD,EAAA,OAAO,CAAA,aAAA,EAAgB,IAAA,CAAK,OAAA,CAAQ,kBAAA,EAAoB,GAAG,CAAC,CAAA,CAAA;AAC9D;AAGO,SAAS,cAAc,QAAA,EAA0B;AACtD,EAAA,OAAO,CAAA,cAAA,EAAiB,QAAA,CAAS,OAAA,CAAQ,kBAAA,EAAoB,GAAG,CAAC,CAAA,CAAA;AACnE","file":"styles.cjs","sourcesContent":["// ─── styles: the one stylesheet ─────────────────────────────────────────────\n//\n// The CSS lives in a TypeScript string so it can be injected with no build step\n// and no CSS loader, which is what keeps the library usable from a plain script\n// tag. `scripts/build-css.mjs` also writes it out as `dist/styles.css` for the\n// hosts that would rather link it, from this same string, so the two can never\n// disagree.\n//\n// The alignment contract\n// ----------------------\n// The painted layer sits behind the real textarea and draws the same characters, so it may\n// change only what does not move a glyph: colour, background, and text-decoration. Anything\n// that changes an advance — a different font, a weight, letter-spacing, a font-feature —\n// slides the paint off the character it belongs to, and by a different amount on every\n// character, so it reads as a rendering glitch rather than as a styling mistake.\n//\n// The two elements therefore share ONE rule for their typography, and that rule is the only\n// thing that has to hold. THE FONT ITSELF IS THE HOST'S CHOICE: a proportional face aligns just\n// as well as a monospace one, because the layer, the field, and the measuring mirror all read\n// the same computed font. `--litearea-font` is a variable like any other.\n//\n// What is NOT the host's choice is ligatures and kerning, which are forced off, and the reason\n// is subtler than \"a ligature would look wrong\". A ligature draws one glyph where the field\n// holds two characters — and the layer splits its spans wherever a diagnostic or a decoration\n// begins, which cuts a ligature in half. The field would then render one glyph and the layer\n// two, at different widths, and the rest of the line would slide. Turning them off removes the\n// possibility rather than relying on no span boundary ever landing inside a pair.\n\n/**\n * One colour per scope, in one list, because the variables and the rules that use them MUST\n * agree and once did not.\n *\n * Twenty-nine scope variables were declared here with no rule anywhere that consumed them. The\n * tokenizer painted the right classes, the variables were documented, the stylesheet looked\n * complete — and every scope rendered in the inherited text colour, so the editor had no syntax\n * colouring at all. Nothing in the DOM revealed it: the spans were correct. Generating both\n * halves from this list is the fix, and it is the kind of drift a browser check cannot catch\n * either, since a colourless token is a perfectly ordinary thing to find.\n *\n * A key is the FOLDED scope name, which is what a scope becomes as a class: `value.shape` is\n * written `value-shape` here because `scopeClass` turns its dots into hyphens.\n */\nconst SCOPE_PALETTE: ReadonlyArray<{ scope: string; light: string; dark?: string }> = [\n  { scope: 'text', light: 'var(--litearea-fg)' },\n  { scope: 'word', light: 'var(--litearea-fg)' },\n  { scope: 'family', light: 'var(--litearea-fg)' },\n  { scope: 'family-generic', light: '#7c3aed', dark: '#c4a2ff' },\n  { scope: 'family-unknown', light: 'var(--litearea-warning)' },\n  { scope: 'family-unclosed', light: 'var(--litearea-error)' },\n  { scope: 'weight', light: 'var(--litearea-accent)' },\n  { scope: 'weight-missing', light: 'var(--litearea-warning)' },\n  { scope: 'state', light: 'var(--litearea-accent)' },\n  { scope: 'property', light: '#7c3aed', dark: '#c4a2ff' },\n  { scope: 'operator', light: 'var(--litearea-fg-dim)' },\n  { scope: 'separator', light: 'var(--litearea-fg-dim)' },\n  { scope: 'value-shape', light: '#0f766e', dark: '#5eead4' },\n  { scope: 'value-color', light: '#0f766e', dark: '#5eead4' },\n  { scope: 'value-pattern', light: '#0f766e', dark: '#5eead4' },\n  { scope: 'value-motion', light: '#0f766e', dark: '#5eead4' },\n  { scope: 'value-number', light: '#b45309', dark: '#fbbf24' },\n  { scope: 'comment', light: 'var(--litearea-fg-dim)' },\n  { scope: 'invalid', light: 'var(--litearea-error)' },\n  { scope: 'keyword', light: 'var(--litearea-accent)' },\n  { scope: 'string', light: '#0f766e', dark: '#5eead4' },\n  { scope: 'number', light: '#b45309', dark: '#fbbf24' },\n]\n\n/**\n * The variable declarations for one colour scheme.\n * @param scheme - `light` declares every scope; `dark` declares only those that differ.\n * @returns one CSS declaration per line.\n */\nfunction scopeVariables(scheme: 'light' | 'dark'): string {\n  return SCOPE_PALETTE.filter((entry) => scheme === 'light' || entry.dark !== undefined)\n    .map((entry) => {\n      const value = scheme === 'light' ? entry.light : entry.dark\n      return `  --litearea-scope-${entry.scope}: ${String(value)};`\n    })\n    .join('\\n')\n}\n\n/**\n * The rules that spend those variables.\n * @returns one CSS rule per line.\n */\nfunction scopeRules(): string {\n  return SCOPE_PALETTE.map(\n    (entry) =>\n      `.litearea-scope-${entry.scope} { color: var(--litearea-scope-${entry.scope}); }`,\n  ).join('\\n')\n}\n\n/** Everything a scope or a mark is painted with comes from one of these. */\nexport const LITEAREA_STYLES = `\n.litearea {\n  --litearea-font: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --litearea-font-size: 13px;\n  --litearea-line-height: 20px;\n  --litearea-padding-block: 6px;\n  --litearea-padding-inline: 10px;\n  --litearea-radius: 8px;\n  --litearea-fg: #1f2328;\n  --litearea-fg-dim: #6b7280;\n  --litearea-fg-strong: #111827;\n  --litearea-bg: #ffffff;\n  --litearea-bg-raised: #ffffff;\n  --litearea-border: #d8dbe0;\n  --litearea-border-focus: #4d6bfe;\n  --litearea-accent: #4d6bfe;\n  --litearea-accent-soft: rgba(77, 107, 254, 0.12);\n  --litearea-selection: rgba(77, 107, 254, 0.22);\n  --litearea-error: #e5484d;\n  --litearea-warning: #d97706;\n  --litearea-info: #4d6bfe;\n  --litearea-hint: #8b8f97;\n  --litearea-shadow: 0 6px 24px rgba(15, 23, 42, 0.14);\n\n${scopeVariables('light')}\n\n  position: relative;\n  display: block;\n  color: var(--litearea-fg);\n}\n\n@media (prefers-color-scheme: dark) {\n  .litearea {\n    --litearea-fg: #e6e8eb;\n    --litearea-fg-dim: #8b919b;\n    --litearea-fg-strong: #ffffff;\n    --litearea-bg: #1b1e24;\n    --litearea-bg-raised: #23262c;\n    --litearea-border: #363b44;\n${scopeVariables('dark')}\n    --litearea-error: #ff6b6b;\n    --litearea-warning: #f59e0b;\n    --litearea-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);\n  }\n}\n\n/* ── the box ─────────────────────────────────────────────────────────────── */\n\n.litearea-box {\n  position: relative;\n  display: block;\n  border: 1px solid var(--litearea-border);\n  border-radius: var(--litearea-radius);\n  background: var(--litearea-bg);\n  transition: border-color 120ms ease;\n}\n\n.litearea-box:focus-within {\n  border-color: var(--litearea-border-focus);\n}\n\n.litearea-invalid .litearea-box {\n  border-color: var(--litearea-error);\n}\n\n/*\n * The layer and the field share this rule and nothing may be added to one alone.\n * Every property here is a property the mirror copies too — three elements, one\n * typography, or the paint drifts.\n */\n.litearea-layer,\n.litearea-input {\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0;\n  padding: var(--litearea-padding-block) var(--litearea-padding-inline);\n  border: none;\n  font-family: var(--litearea-font);\n  font-size: var(--litearea-font-size);\n  font-weight: 400;\n  font-style: normal;\n  font-stretch: normal;\n  font-variant-ligatures: none;\n  font-kerning: none;\n  font-feature-settings: \"liga\" 0, \"calt\" 0, \"dlig\" 0;\n  line-height: var(--litearea-line-height);\n  letter-spacing: normal;\n  word-spacing: normal;\n  text-transform: none;\n  text-indent: 0;\n  text-align: left;\n  direction: ltr;\n  tab-size: 2;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n\n.litearea-layer {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  pointer-events: none;\n  user-select: none;\n}\n\n/*\n * When the box is clamped to its maximum height the field grows a scrollbar, and a\n * scrollbar narrows the text. If the layer kept the full width it would wrap\n * differently from the field and every colour would slide off its character, so the\n * field's measured scrollbar width is published as --litearea-scrollbar and added\n * here. The value is 0 whenever no scrollbar is shown.\n */\n.litearea-layer {\n  padding-right: calc(var(--litearea-padding-inline) + var(--litearea-scrollbar, 0px));\n}\n\n.litearea-paint {\n  position: relative;\n  min-height: 100%;\n  /* A zero-width space keeps the layer's last line box as tall as the field's:\n     a trailing newline would otherwise collapse in the paint alone, and the box\n     would jump the moment one was typed. */\n  will-change: transform;\n}\n\n.litearea-input {\n  position: relative;\n  display: block;\n  resize: none;\n  background: transparent;\n  color: transparent;\n  caret-color: var(--litearea-fg);\n  outline: none;\n  overflow-y: hidden;\n}\n\n.litearea-growable .litearea-input {\n  resize: none;\n}\n\n.litearea-resizable .litearea-input {\n  resize: vertical;\n}\n\n.litearea-input::placeholder {\n  color: var(--litearea-fg-dim);\n}\n\n.litearea-input::selection {\n  background: var(--litearea-selection);\n}\n\n.litearea-readonly .litearea-input {\n  caret-color: transparent;\n}\n\n/*\n * The rules that spend the variables, generated from the same list that declares them. There is\n * deliberately NO catch-all rule setting a property on every painted span: there was one, and a\n * class plus an element outranks a bare class on specificity, so it silently switched off every\n * squiggle in the library.\n *\n * A scope that is not in the list gets no colour from here, and a host writing a grammar of its\n * own styles it with a plain rule — .litearea-scope-my-thing { color: … } — since nothing in\n * this file competes for that selector.\n */\n${scopeRules()}\n\n.litearea-dec-effective {\n  border-radius: 3px;\n  background: var(--litearea-accent-soft);\n  box-shadow: 0 0 0 1px var(--litearea-accent-soft);\n}\n\n/* The four shapes a diagnostic can take. Wavy for the two that mean \"fix this\", dotted for\n   the two that mean \"worth knowing\" — the same distinction VSCode draws, and the reason\n   severity is a class rather than an inline colour. */\n.litearea-diag-error {\n  text-decoration-line: underline;\n  text-decoration-style: wavy;\n  text-decoration-color: var(--litearea-error);\n  text-decoration-skip-ink: none;\n  text-underline-offset: 3px;\n}\n\n.litearea-diag-warning {\n  text-decoration-line: underline;\n  text-decoration-style: wavy;\n  text-decoration-color: var(--litearea-warning);\n  text-decoration-skip-ink: none;\n  text-underline-offset: 3px;\n}\n\n.litearea-diag-info {\n  text-decoration-line: underline;\n  text-decoration-style: dotted;\n  text-decoration-color: var(--litearea-info);\n  text-decoration-skip-ink: none;\n  text-underline-offset: 3px;\n}\n\n.litearea-diag-hint {\n  text-decoration-line: underline;\n  text-decoration-style: dotted;\n  text-decoration-color: var(--litearea-hint);\n  text-decoration-skip-ink: none;\n  text-underline-offset: 3px;\n}\n\n/* ── the completion list ─────────────────────────────────────────────────── */\n\n/*\n * The container holds two things and scrolls NEITHER of them: the list scrolls itself, and the\n * documentation is pinned below it. Putting the documentation inside the scroll range — which is\n * what this used to do — makes it unreachable with a long list and a long explanation: the\n * arrows move the active row rather than the scrollbar, so a keyboard user never sees it, and a\n * mouse user has to scroll down to read it and back up to reach the next row.\n */\n.litearea-popup {\n  position: absolute;\n  z-index: 30;\n  display: none;\n  flex-direction: column;\n  max-width: 460px;\n  padding: 4px;\n  border: 1px solid var(--litearea-border);\n  border-radius: 10px;\n  background: var(--litearea-bg-raised);\n  box-shadow: var(--litearea-shadow);\n  font-family: var(--litearea-font);\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--litearea-fg);\n  overflow: hidden;\n}\n\n.litearea-popup[data-open=\"true\"] {\n  display: flex;\n}\n\n/* The rows, and the only part that scrolls. Its height is bounded so the documentation below\n   always has somewhere to live. */\n.litearea-list {\n  min-height: 0;\n  max-height: 208px;\n  overflow-y: auto;\n}\n\n/*\n * The explanation, pinned. Its own height is bounded and it scrolls ITSELF, so a long\n * explanation stays readable while the rows stay put — and arrowing to the next row swaps the\n * text in place instead of requiring a scroll back up.\n */\n.litearea-docs {\n  flex: none;\n  max-height: 132px;\n  overflow-y: auto;\n  margin: 4px -4px -4px;\n  padding: 6px 10px;\n  border-top: 1px solid var(--litearea-border);\n  background: var(--litearea-bg);\n  border-radius: 0 0 10px 10px;\n  color: var(--litearea-fg);\n  white-space: pre-wrap;\n}\n\n.litearea-popup[data-docs=\"false\"] .litearea-docs {\n  display: none;\n}\n\n.litearea-row {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  padding: 3px 6px;\n  border-radius: 6px;\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.litearea-row[aria-selected=\"true\"] {\n  background: var(--litearea-accent-soft);\n}\n\n.litearea-rowKind {\n  flex: none;\n  width: 7px;\n  height: 7px;\n  border-radius: 2px;\n  background: var(--litearea-fg-dim);\n  transform: translateY(-1px);\n}\n\n.litearea-kind-family { background: var(--litearea-scope-family-generic); }\n.litearea-kind-generic { background: var(--litearea-scope-family-generic); }\n.litearea-kind-weight { background: var(--litearea-scope-weight); }\n.litearea-kind-state { background: var(--litearea-scope-state); }\n.litearea-kind-property { background: var(--litearea-scope-property); }\n.litearea-kind-value { background: var(--litearea-scope-value-shape); }\n.litearea-kind-number { background: var(--litearea-scope-value-number); }\n.litearea-kind-custom { background: var(--litearea-fg-dim); }\n\n.litearea-rowLabel {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.litearea-rowMatch {\n  color: var(--litearea-accent);\n  font-weight: 600;\n}\n\n.litearea-rowDetail {\n  flex: none;\n  color: var(--litearea-fg-dim);\n  font-size: 11px;\n}\n\n.litearea-docsTitle {\n  font-weight: 600;\n}\n\n.litearea-docsDetail {\n  color: var(--litearea-fg-dim);\n}\n\n.litearea-docsBody {\n  margin-top: 2px;\n  color: var(--litearea-fg-dim);\n}\n\n/* ── the hover tooltip ───────────────────────────────────────────────────── */\n\n.litearea-tooltip {\n  position: absolute;\n  z-index: 40;\n  display: none;\n  max-width: 340px;\n  padding: 6px 10px;\n  border: 1px solid var(--litearea-border);\n  border-radius: 8px;\n  background: var(--litearea-bg-raised);\n  box-shadow: var(--litearea-shadow);\n  font-family: var(--litearea-font);\n  font-size: 11px;\n  line-height: 16px;\n  color: var(--litearea-fg);\n  pointer-events: none;\n  white-space: pre-wrap;\n}\n\n.litearea-tooltip[data-open=\"true\"] {\n  display: block;\n}\n\n.litearea-tooltipTitle {\n  font-weight: 600;\n}\n\n.litearea-tooltipDetail {\n  color: var(--litearea-fg-dim);\n}\n\n.litearea-tooltipBody {\n  margin-top: 3px;\n  color: var(--litearea-fg-dim);\n}\n\n.litearea-srOnly {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n`.trim()\n\n/**\n * Put the stylesheet in a document, once.\n *\n * Marked with a data attribute so two editors on one page, or two copies of the\n * library, do not stack two identical sheets — and so a host can find and replace\n * it.\n * @param ownerDocument - the document to install into.\n * @param nonce - an optional CSP nonce for the style element.\n * @returns the style element, or undefined when there is no document.\n */\nexport function injectStyles(\n  ownerDocument: Document,\n  nonce?: string,\n): HTMLStyleElement | undefined {\n  if (ownerDocument === null || ownerDocument === undefined) return undefined\n  const existing = ownerDocument.querySelector<HTMLStyleElement>('style[data-litearea-styles]')\n  if (existing !== null) return existing\n  const style = ownerDocument.createElement('style')\n  style.dataset.liteareaStyles = ''\n  if (nonce !== undefined) style.nonce = nonce\n  style.textContent = LITEAREA_STYLES\n  const head = ownerDocument.head ?? ownerDocument.documentElement\n  if (head === null || head === undefined) return undefined\n  head.appendChild(style)\n  return style\n}\n\n/**\n * The class a scope is painted with.\n *\n * Dots and other punctuation are folded to hyphens, because a scope like\n * `value.shape` is a nice name to write and a terrible one to select: the CSS\n * would need a backslash before the dot at every use, and one forgotten escape\n * silently paints nothing.\n * @param scope - the scope name.\n * @returns the class name.\n */\nexport function scopeClass(scope: string): string {\n  const folded = scope.replace(/[^A-Za-z0-9_-]+/g, '-').replace(/^-+|-+$/g, '')\n  return folded === '' ? 'litearea-scope-text' : `litearea-scope-${folded}`\n}\n\n/** The class a decoration kind is painted with. */\nexport function decorationClass(kind: string): string {\n  return `litearea-dec-${kind.replace(/[^A-Za-z0-9_-]+/g, '-')}`\n}\n\n/** The class a diagnostic severity is underlined with. */\nexport function severityClass(severity: string): string {\n  return `litearea-diag-${severity.replace(/[^A-Za-z0-9_-]+/g, '-')}`\n}\n"]}