@elabs-ai/components-editor 4.0.0 → 4.1.0

package/README.md

@@ -6,15 +6,14 @@
 > Token-themed Monaco editor: CodeEditor, DiffEditor, CodeWorkspace.
 
 Part of **brand-ui**, a source-owned, token-driven React component system.
-These packages are **private** and are not published to any registry — they are
-consumed from this workspace. See `docs/CONSUMING.md`.
+Published to the **public npm registry** under the `@elabs-ai` scope — it
+installs like any other npm dependency, with no registry configuration and
+no token required. See `docs/CONSUMING.md`.
 
 ## Install
 
-Inside this monorepo the packages resolve as workspace dependencies:
-
-```json
-"@elabs-ai/components-editor": "workspace:*"
+```bash
+pnpm add @elabs-ai/components-tokens @elabs-ai/components-editor
 ```
 
 ## Set up styling (do not skip)
@@ -75,7 +74,7 @@ prompt for migrating an existing project: `docs/CONSUMING.md`.
 
 ## License
 
-UNLICENSED — private.
+MIT
 
 <!-- brand-ui:gen:readme:end -->
 

package/dist/{chunk-LBC5VJBD.js → chunk-C62O7IOQ.js}

@@ -130,6 +130,7 @@ function withAlpha(hex, alpha) {
   const base = hex.slice(0, 7);
   return `${base}${byte(Math.round(clamp01(alpha) * 255))}`;
 }
+var LINE_HIGHLIGHT_ALPHA = 0.05;
 function bare(hex) {
   return hex.replace("#", "").slice(0, 6).padEnd(6, "0");
 }
@@ -146,6 +147,13 @@ function contrast(a, b) {
   const lb = luminance(b);
   return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
 }
+function flattenOver(overlayHexWithAlpha, groundHex) {
+  const overlayBase = overlayHexWithAlpha.slice(0, 7);
+  const alphaHex = overlayHexWithAlpha.length >= 9 ? overlayHexWithAlpha.slice(7, 9) : "ff";
+  const alpha = clamp01((parseInt(alphaHex, 16) || 0) / 255);
+  const blend = (i) => Math.round(channel(overlayBase, i) * alpha + channel(groundHex, i) * (1 - alpha));
+  return `#${byte(blend(0))}${byte(blend(1))}${byte(blend(2))}`;
+}
 function mixHex(hex, target, t) {
   const lerp = (i) => Math.round(channel(hex, i) + (channel(target, i) - channel(hex, i)) * t);
   return `#${byte(lerp(0))}${byte(lerp(1))}${byte(lerp(2))}`;
@@ -174,6 +182,8 @@ function buildBrandThemeData(rootEl) {
   const border = read("--border", muted);
   const primary = read("--primary", foreground);
   const ring = read("--ring", primary);
+  const ringContour = read("--ring-contour", ring);
+  const focusBorder = contrast(ringContour, background) > contrast(ring, background) ? ringContour : ring;
   const popover = read("--popover", background);
   const popoverFg = read("--popover-foreground", foreground);
   const input = read("--input", border);
@@ -183,7 +193,9 @@ function buildBrandThemeData(rootEl) {
   const chart4 = read("--chart-4", primary);
   const success = read("--success", chart2);
   const destructive = read("--destructive", "#ff0000");
-  const calcResult = ensureReadable(read("--calc-result", primary), background, 4.5);
+  const lineHighlight = withAlpha(foreground, LINE_HIGHLIGHT_ALPHA);
+  const tokenGround = flattenOver(lineHighlight, background);
+  const calcResult = ensureReadable(read("--calc-result", primary), tokenGround, 4.5);
   const colors = {
     "editor.background": background,
     "editor.foreground": foreground,
@@ -194,7 +206,7 @@ function buildBrandThemeData(rootEl) {
     "editor.selectionBackground": withAlpha(primary, 0.28),
     "editor.inactiveSelectionBackground": withAlpha(primary, 0.14),
     "editor.selectionHighlightBackground": withAlpha(primary, 0.14),
-    "editor.lineHighlightBackground": withAlpha(foreground, 0.05),
+    "editor.lineHighlightBackground": lineHighlight,
     "editor.lineHighlightBorder": "#00000000",
     "editorIndentGuide.background1": withAlpha(border, 0.6),
     "editorIndentGuide.activeBackground1": mutedFg,
@@ -220,7 +232,7 @@ function buildBrandThemeData(rootEl) {
     "input.background": input,
     "input.foreground": foreground,
     "input.border": border,
-    focusBorder: ring,
+    focusBorder,
     "dropdown.background": popover,
     "dropdown.foreground": popoverFg,
     "dropdown.border": border,
@@ -261,7 +273,8 @@ function buildBrandThemeData(rootEl) {
     "diffEditorOverview.removedForeground": withAlpha(destructive, 0.6),
     "diffEditor.border": border
   };
-  const ink = (hex, ratio = 4.5) => bare(ensureReadable(hex, background, ratio));
+  const AA_MARGIN = 0.15;
+  const ink = (hex, ratio = 4.5) => bare(ensureReadable(hex, tokenGround, ratio + AA_MARGIN));
   const rules = [
     { token: "", foreground: bare(foreground), background: bare(background) },
     { token: "comment", foreground: ink(mutedFg, 3.2), fontStyle: "italic" },
@@ -286,7 +299,61 @@ function buildBrandThemeData(rootEl) {
     { token: "string.key", foreground: ink(chart1) },
     { token: "string.value", foreground: ink(chart2) },
     { token: "invalid", foreground: ink(destructive) },
-    { token: "namespace", foreground: ink(success) }
+    { token: "namespace", foreground: ink(success) },
+    // Monaco's built-in `vs`/`vs-dark` bases (inherited at `inherit: true`,
+    // below) ship LANGUAGE-SUFFIXED rules — `string.key.json`,
+    // `string.value.json`, `keyword.json`, `string.yaml`, `delimiter.html`, …
+    // — and Monaco's token-theme trie resolves the DEEPEST matching scope
+    // (`ThemeTrieElement.match`), with rules sorted lexicographically before
+    // insertion. A shorter brand scope (e.g. `string.key`, above) can
+    // therefore NEVER override a longer base scope: every scope a base theme
+    // specialises must be re-declared here, or that language renders in
+    // stock VS colours (#90). Keep this list in sync with the base themes —
+    // `IGNORED_BASE_SCOPES` + the drift guard in `monaco-theme-bridge.test.ts`
+    // fail CI if a future `monaco-editor` upgrade adds a new one.
+    { token: "string.key.json", foreground: ink(chart1) },
+    // pairs with `key`
+    { token: "string.value.json", foreground: ink(chart2) },
+    // pairs with `string`
+    { token: "keyword.json", foreground: ink(primary) },
+    // pairs with `keyword`
+    // Closes the class, not just JSON — the same base-specialisation gap
+    // reaches YAML/HTML/SQL/XML/CSS/SCSS (#90 evidence #7).
+    { token: "string.html", foreground: ink(chart2) },
+    { token: "string.sql", foreground: ink(chart2) },
+    { token: "string.yaml", foreground: ink(chart2) },
+    { token: "delimiter.html", foreground: ink(mutedFg, 3.2) },
+    { token: "delimiter.xml", foreground: ink(mutedFg, 3.2) },
+    { token: "attribute.value.html", foreground: ink(chart2) },
+    { token: "attribute.value.xml", foreground: ink(chart2) },
+    { token: "attribute.value.number", foreground: ink(chart4) },
+    { token: "attribute.value.unit", foreground: ink(chart4) },
+    { token: "attribute.value.number.css", foreground: ink(chart4) },
+    { token: "attribute.value.unit.css", foreground: ink(chart4) },
+    { token: "attribute.value.hex.css", foreground: ink(chart4) },
+    { token: "number.hex", foreground: ink(chart4) },
+    { token: "keyword.flow", foreground: ink(primary) },
+    { token: "keyword.flow.scss", foreground: ink(primary) },
+    { token: "operator.scss", foreground: ink(primary) },
+    { token: "operator.sql", foreground: ink(primary) },
+    { token: "operator.swift", foreground: ink(primary) },
+    { token: "predefined.sql", foreground: ink(chart3) },
+    { token: "metatag", foreground: ink(chart3) },
+    { token: "metatag.html", foreground: ink(chart3) },
+    { token: "metatag.xml", foreground: ink(chart3) },
+    { token: "metatag.content.html", foreground: ink(chart3) },
+    { token: "meta.scss", foreground: ink(chart1) },
+    { token: "meta.tag", foreground: ink(chart1) },
+    // `CodeEditorProps.language` is a plain, unrestricted `string` passed
+    // straight to `monaco.editor.setModelLanguage` (`code-editor.tsx`) — NOT
+    // limited to `EDITOR_LANGUAGES` — so a consumer really can reach these
+    // pug/handlebars scopes (PR #119 review thread 2). See
+    // `IGNORED_BASE_SCOPES` below for the one scope that stays un-overridden.
+    { token: "tag.id.pug", foreground: ink(primary) },
+    // pairs with `tag`
+    { token: "tag.class.pug", foreground: ink(primary) },
+    { token: "variable.parameter", foreground: bare(foreground) }
+    // pairs with `variable`
   ];
   return { base: "vs", inherit: true, colors, rules };
 }
@@ -912,7 +979,7 @@ var DocumentOutline = forwardRef2(
                   className: cn2(
                     "-ms-px block w-full truncate border-s-2 py-1 pe-2 text-start text-caption",
                     "transition-colors duration-fast ease-standard motion-reduce:transition-none",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                    "focus-ring-inset",
                     item.id === activeId ? "border-s-primary font-medium text-foreground" : "border-s-transparent text-muted-foreground hover:border-s-border-strong hover:text-foreground",
                     actions && "pe-8"
                   ),
@@ -1725,7 +1792,23 @@ var SlashMenu = forwardRef4(function SlashMenu2({
         className
       ),
       ...props,
-      children: commands.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "px-2 py-6 text-center text-caption text-muted-foreground", children: emptyLabel }) : groups.map(({ group, commands: groupCommands }) => /* @__PURE__ */ jsxs4("div", { role: "group", "aria-label": group, className: "overflow-hidden p-1", children: [
+      children: commands.length === 0 ? (
+        // A `role="listbox"` may only own `option`/`group` children (WCAG 1.3.1,
+        // #157): a bare `<div>` here is an unannounced, dangling message — an
+        // AT user who types a query matching nothing gets silence. Shaping it
+        // as a disabled, unselectable option keeps the listbox contract AND
+        // makes the message reachable by an accessible-name query.
+        /* @__PURE__ */ jsx5(
+          "div",
+          {
+            role: "option",
+            "aria-disabled": "true",
+            "aria-selected": "false",
+            className: "cursor-default select-none px-2 py-6 text-center text-caption text-muted-foreground",
+            children: emptyLabel
+          }
+        )
+      ) : groups.map(({ group, commands: groupCommands }) => /* @__PURE__ */ jsxs4("div", { role: "group", "aria-label": group, className: "overflow-hidden p-1", children: [
         /* @__PURE__ */ jsx5("div", { className: "px-2 py-1.5 text-meta font-medium text-muted-foreground", children: group }),
         groupCommands.map((command) => {
           const selected = command.id === activeId;
@@ -2414,6 +2497,7 @@ import { useMemo as useMemo2, useRef as useRef5, useState as useState3 } from "r
 // src/markdown-editor/milkdown-react/use-get-editor.ts
 import { createContext as createContext2, useContext, useEffect as useEffect3, useRef as useRef4 } from "react";
 var editorInfoContext = createContext2({});
+var pendingDestroys = /* @__PURE__ */ new Set();
 function useGetEditor() {
   const {
     dom,
@@ -2436,7 +2520,11 @@ function useGetEditor() {
       setLoading(false);
     }).catch(console.error);
     return () => {
-      editor2.destroy().catch(console.error);
+      const destroyPromise = editor2.destroy().catch(console.error);
+      pendingDestroys.add(destroyPromise);
+      void destroyPromise.finally(() => {
+        pendingDestroys.delete(destroyPromise);
+      });
     };
   }, [dom, editorRef, getEditor, setLoading]);
   return domRef;
@@ -2549,10 +2637,7 @@ function InlineEdit({ value, onCommit, ariaLabel, placeholder, className }) {
       spellCheck: false,
       onBlur: commit,
       onKeyDown,
-      className: cn6(
-        "brand-inline-edit rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        className
-      )
+      className: cn6("brand-inline-edit rounded-sm focus-ring", className)
     }
   );
 }
@@ -2833,7 +2918,7 @@ function IterationDirectiveView() {
           "data-directive-chrome": "",
           "aria-label": "Iteration actions",
           title: "Iteration actions\u2026",
-          className: "ms-auto inline-flex size-5 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className: "ms-auto inline-flex size-5 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground focus-ring",
           children: /* @__PURE__ */ jsx10(MoreHorizontal, { className: "size-4", "aria-hidden": "true" })
         }
       ) }),
@@ -3045,7 +3130,7 @@ function makeErrorChip(message) {
   chip.setAttribute("role", "alert");
   chip.setAttribute("aria-live", "assertive");
   chip.setAttribute("title", message);
-  chip.className = "inline-flex items-center gap-1 rounded px-2 py-0.5 text-caption bg-destructive/10 text-destructive border border-destructive/30 select-none";
+  chip.className = "inline-flex items-center gap-1 rounded px-2 py-0.5 text-caption bg-destructive/10 text-destructive-text border border-destructive/30 select-none";
   const label = document.createElement("span");
   label.textContent = `\u26A0 Upload failed`;
   chip.appendChild(label);
@@ -3259,9 +3344,10 @@ function ToolbarButton({
       className: cn7(
         "inline-flex h-7 items-center gap-1 rounded px-2 text-caption font-medium",
         "border border-border-strong",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "focus-ring",
         "transition-colors duration-fast ease-standard motion-reduce:transition-none",
-        variant === "destructive" ? "bg-background text-destructive hover:bg-destructive/10" : "bg-background text-foreground hover:bg-surface-muted"
+        // #124: the button's LABEL text, not a mark — ink rung.
+        variant === "destructive" ? "bg-background text-destructive-text hover:bg-destructive/10" : "bg-background text-foreground hover:bg-surface-muted"
       ),
       children
     }
@@ -3591,10 +3677,13 @@ var MarkdownEditor = forwardRef6(
       {
         "data-testid": "markdown-editor",
         className: cn8(
-          // A 1px hairline focus ring (not a heavy 2px ring) — the editable is a
-          // large surface, so a thinner edit-mode ring reads calmer while still
-          // meeting the visible-focus requirement (same `ring` token). (A7)
-          "milkdown-host overflow-auto rounded-md border border-border bg-background text-foreground focus-within:ring-1 focus-within:ring-ring",
+          // No focus-ring utility here (deliberately, #309): the editable
+          // `.ProseMirror` element owns the compound focus indicator itself
+          // (`markdown-editor.css`'s `:focus-visible` rule), so it renders
+          // even when a consumer `className` overrides this wrapper's
+          // classes (`MarkdownWorkspace` does exactly that via
+          // `className="border-0"`) and never doubles up with a wrapper ring.
+          "milkdown-host overflow-auto rounded-md border border-border bg-background text-foreground",
           className
         ),
         style: { ...markdownScaleVars(), ...style },
@@ -3745,4 +3834,4 @@ export {
   CopyButton,
   monacoContentAccess
 };
-//# sourceMappingURL=chunk-LBC5VJBD.js.map
+//# sourceMappingURL=chunk-C62O7IOQ.js.map