@elabs-ai/components-editor 4.0.0 → 4.1.0

package/dist/{markdown-editor-DfBZibAn.d.ts → markdown-editor-CBp_4eDv.d.ts}

@@ -62,7 +62,7 @@ interface CodeEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange
  * A token-themed Monaco editor wrapped as a brand-ui React component. Monaco
  * renders its own editing surface + widgets; this wrapper owns lifecycle,
  * controlled/uncontrolled value, and applies the brand theme bridge so the
- * editor matches the active `data-theme` (all three themes).
+ * editor matches the active `data-theme` (every theme).
  *
  * Workers (for completions/diagnostics) are wired by importing
  * `@elabs-ai/components-editor/monaco-environment` once at the app entry.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elabs-ai/components-editor",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -65,8 +65,8 @@
     "monaco-editor": "^0.55.1",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
-    "@elabs-ai/components-tokens": "4.0.0",
-    "@elabs-ai/components-ui": "4.0.0"
+    "@elabs-ai/components-tokens": "4.1.0",
+    "@elabs-ai/components-ui": "4.1.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -85,10 +85,10 @@
     "tsup": "^8.3.5",
     "typescript": "^5.7.3",
     "vitest": "^3.0.2",
+    "@elabs-ai/components-eslint-config": "0.1.0",
+    "@elabs-ai/components-tokens": "4.1.0",
     "@elabs-ai/components-typescript-config": "0.1.0",
-    "@elabs-ai/components-tokens": "4.0.0",
-    "@elabs-ai/components-ui": "4.0.0",
-    "@elabs-ai/components-eslint-config": "0.1.0"
+    "@elabs-ai/components-ui": "4.1.0"
   },
   "scripts": {
     "build": "rm -rf dist && tsup && node ../../scripts/link-dist-css.mjs",

package/src/ai-objects/entity.tsx

@@ -62,7 +62,7 @@ function kindMeta(kind: string | undefined): KindMeta {
 export const entityChipVariants = cva(
   // inline-flex + align-middle keeps the chip in the text baseline;
   // no `block` wrapper so it is valid inside <p>.
-  "inline-flex items-center gap-1 rounded-sm border px-1.5 py-0.5 text-meta font-medium align-middle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "inline-flex items-center gap-1 rounded-sm border px-1.5 py-0.5 text-meta font-medium align-middle focus-ring",
   {
     variants: {
       kind: {

package/src/ai-objects/knowledge-card.tsx

@@ -59,7 +59,7 @@ function SourceRow({ path, resolve }: SourceRowProps) {
         rel="noopener noreferrer"
         target="_blank"
         // #399 — a source link is TEXT: on-surface `-text` rung, not the fill.
-        className="flex min-w-0 items-center gap-1.5 text-meta text-primary-text underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        className="flex min-w-0 items-center gap-1.5 text-meta text-primary-text underline-offset-2 hover:underline focus-ring"
         aria-label={`Source: ${display}`}
       >
         <FileText className="size-3 shrink-0" aria-hidden="true" />

package/src/calc-block/calc-editor.css

@@ -5,7 +5,7 @@
  *
  * Colors come from the `--calc-*` syntax tokens — the SAME tokens `CalcBlock`
  * paints with (#221), already AA-verified against `--background` (the editor
- * surface) and `--card` in all three themes — so highlighting tracks the theme via
+ * surface) and `--card` in every theme — so highlighting tracks the theme via
  * the cascade with no hardcoded hex. The compound `.brand-calc-tok.brand-calc-tok--x`
  * selector raises specificity above Monaco's own token color class (`.mtkN`) so
  * the calc color wins regardless of stylesheet load order (no `!important`).

package/src/code-editor/code-editor.stories.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from "react";
 import * as monaco from "monaco-editor";
 import { CodeEditor } from "./code-editor";
 import { EditorToolbar } from "../editor-toolbar";
+import { buildBrandThemeData } from "../lib/monaco-theme-bridge";
 
 const meta = {
   title: "Editor/CodeEditor",
@@ -14,9 +15,12 @@ const meta = {
     docs: {
       description: {
         component:
+          "The real Monaco EDITING surface; a read-only highlighted block is `AI/CodeBlock` " +
+          "and a tool-output viewer is `AI/Sandbox` — see " +
+          "[Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). " +
           "A token-themed Monaco editor. The editing surface + widgets are Monaco; " +
           "brand-ui supplies the chrome (toolbar/Select/Button). Colors track the " +
-          "active `data-theme` across all three themes via the theming bridge.",
+          "active `data-theme` across every theme via the theming bridge.",
       },
     },
   },
@@ -76,6 +80,15 @@ export const WithToolbar: Story = {
   },
 };
 
+/**
+ * Locks #90: Monaco's `vs`/`vs-dark` base themes ship LANGUAGE-SUFFIXED JSON
+ * scopes (`string.key.json`, `string.value.json`, `keyword.json`) that beat the
+ * bridge's shorter, unsuffixed rules in Monaco's token-theme trie (deepest scope
+ * wins) — so JSON rendered in stock VS Code colors instead of brand colors. The
+ * play function reads REAL computed colors off the rendered `.mtk*` token spans
+ * and asserts none of them is a stock JSON color, in whichever theme this story
+ * is rendered under (`globals=theme:light|dark`).
+ */
 export const JsonReadOnly: Story = {
   name: "JSON (read-only)",
   render: () => (
@@ -83,6 +96,68 @@ export const JsonReadOnly: Story = {
       <CodeEditor language="json" defaultValue={JSON_SAMPLE} readOnly />
     </div>
   ),
+  play: async ({ canvasElement }) => {
+    // Monaco mounts asynchronously, and syntax tokenization is a SEPARATE,
+    // later pass: the editor first paints one un-highlighted `.mtk*` span per
+    // line, then re-renders with per-scope spans once the JSON monarch
+    // tokenizer finishes (observed to take ~1-3s in a headless test browser).
+    // Waiting for "any `.mtk*` span" resolves on that FIRST, un-highlighted
+    // paint — a false green that passes identically whether the fix is
+    // present or not (#90 fix-round-1 finding). Wait for the actual `"name"`
+    // key to have tokenized into its own span instead — that only exists once
+    // real per-scope highlighting has landed.
+    const surface = await within(canvasElement).findByTestId("code-editor", {}, { timeout: 10000 });
+    let spans: HTMLSpanElement[] = [];
+    await waitFor(
+      () => {
+        spans = Array.from(
+          surface.querySelectorAll<HTMLSpanElement>('.view-line span[class*="mtk"]'),
+        );
+        const keySpan = spans.some((span) => span.textContent?.trim() === '"name"');
+        if (!keySpan) {
+          throw new Error(
+            `Monaco has not tokenized the "name" key into its own span yet (spans=${spans.length})`,
+          );
+        }
+      },
+      { timeout: 20000, interval: 100 },
+    );
+
+    // Stock `vs`/`vs-dark` colors for string.key.json / string.value.json /
+    // keyword.json (extracted straight from monaco-editor's own base themes —
+    // see monaco-theme-bridge.test.ts's "Monaco real trie resolution" block for
+    // the same values as raw hex). If the bridge's brand rules ever stop beating
+    // the base theme's suffixed scopes, a token renders one of these again.
+    const stockColors = new Set([
+      "rgb(163, 21, 21)", // vs: string.key.json / string (maroon)
+      "rgb(4, 81, 165)", // vs: string.value.json / keyword.json (navy)
+      "rgb(156, 220, 254)", // vs-dark: string.key.json (cyan)
+      "rgb(206, 145, 120)", // vs-dark: string.value.json / keyword.json / string (orange)
+    ]);
+
+    const offenders = spans
+      .map((span) => getComputedStyle(span).color)
+      .filter((color) => stockColors.has(color));
+    await expect(offenders).toEqual([]);
+
+    // Positive check, not just an absence check: the "name" key span must be
+    // colored with the bridge's OWN live `string.key.json` brand ink (read
+    // straight off the currently-applied CSS custom properties), not merely
+    // "some color that isn't stock" — a fix that mapped the scope to the
+    // wrong token would pass the negative check above but fail this one.
+    const hexToRgb = (hex: string) => {
+      const n = Number.parseInt(hex.replace("#", ""), 16);
+      return `rgb(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255})`;
+    };
+    const liveRules = buildBrandThemeData().rules ?? [];
+    const expectedKeyForeground = liveRules.find(
+      (rule) => rule.token === "string.key.json",
+    )?.foreground;
+    await expect(expectedKeyForeground).toBeDefined();
+    const keySpan = spans.find((span) => span.textContent?.trim() === '"name"');
+    await expect(keySpan).toBeDefined();
+    await expect(getComputedStyle(keySpan!).color).toEqual(hexToRgb(expectedKeyForeground!));
+  },
 };
 
 /**

package/src/code-editor/code-editor.tsx

@@ -89,7 +89,7 @@ const BASE_OPTIONS: monaco.editor.IStandaloneEditorConstructionOptions = {
  * A token-themed Monaco editor wrapped as a brand-ui React component. Monaco
  * renders its own editing surface + widgets; this wrapper owns lifecycle,
  * controlled/uncontrolled value, and applies the brand theme bridge so the
- * editor matches the active `data-theme` (all three themes).
+ * editor matches the active `data-theme` (every theme).
  *
  * Workers (for completions/diagnostics) are wired by importing
  * `@elabs-ai/components-editor/monaco-environment` once at the app entry.

package/src/code-workspace/code-workspace.test.tsx

@@ -144,3 +144,86 @@ describe("CodeWorkspace — CodeWorkspaceHandle via ref", () => {
     expect(listener).not.toHaveBeenCalled(); // not called yet, only on selection change
   });
 });
+
+describe("CodeWorkspace — tab/panel a11y (#154)", () => {
+  it("gives every tab an aria-controls that resolves to a real element, for paths with '/', '.', a space and non-ASCII", () => {
+    const trickyFiles: EditorFile[] = [
+      { path: "src/hello.ts", value: "a" },
+      { path: "a b/c.d.json", value: "b" },
+      { path: "café/résumé.md", value: "c" },
+    ];
+    render(<CodeWorkspace files={trickyFiles} />);
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs).toHaveLength(trickyFiles.length);
+    for (const tab of tabs) {
+      const controls = tab.getAttribute("aria-controls");
+      expect(controls).toBeTruthy();
+      expect(document.getElementById(controls!)).not.toBeNull();
+    }
+  });
+});
+
+describe("CodeWorkspace — force-mounted panels stay out of the layout", () => {
+  const threeFiles: EditorFile[] = [
+    { path: "a.ts", value: "A" },
+    { path: "b.ts", value: "B" },
+    { path: "c.ts", value: "C" },
+  ];
+
+  it("hides every inactive tabpanel so it takes no layout space and no tab stop", () => {
+    render(<CodeWorkspace files={threeFiles} />);
+    const panels = screen.getAllByRole("tabpanel", { hidden: true });
+    expect(panels).toHaveLength(3);
+    const active = panels.filter((p) => p.getAttribute("data-state") === "active");
+    const inactive = panels.filter((p) => p.getAttribute("data-state") !== "active");
+    expect(active).toHaveLength(1);
+    expect(active[0]!.hasAttribute("hidden")).toBe(false);
+    expect(active[0]!.getAttribute("tabindex")).toBe("0");
+    for (const panel of inactive) {
+      expect(panel.hasAttribute("hidden")).toBe(true);
+      expect(panel.getAttribute("tabindex")).toBe("-1");
+    }
+  });
+
+  it("keeps aria-controls resolvable while the inactive panels are hidden", () => {
+    render(<CodeWorkspace files={threeFiles} />);
+    for (const tab of screen.getAllByRole("tab")) {
+      const controls = tab.getAttribute("aria-controls");
+      expect(controls).toBeTruthy();
+      expect(document.getElementById(controls!)).not.toBeNull();
+    }
+  });
+});
+
+describe("CodeWorkspace — tab identity survives a file-list reorder (#412 review)", () => {
+  it("keeps the active panel's id stable and does not remount Monaco when a file is prepended", () => {
+    const initial: EditorFile[] = [
+      { path: "src/a.ts", value: "AAA" },
+      { path: "b.json", value: "{}" },
+    ];
+    const { rerender } = render(<CodeWorkspace files={initial} />);
+    const idBefore = screen
+      .getAllByRole("tabpanel", { hidden: true })
+      .find((p) => p.getAttribute("data-state") === "active")!.id;
+    const createdBefore = h.create.mock.calls.length;
+
+    rerender(<CodeWorkspace files={[{ path: "zz/new.ts", value: "N" }, ...initial]} />);
+
+    const idAfter = screen
+      .getAllByRole("tabpanel", { hidden: true })
+      .find((p) => p.getAttribute("data-state") === "active")!.id;
+    expect(idAfter).toBe(idBefore);
+    expect(h.create.mock.calls.length).toBe(createdBefore);
+  });
+
+  it("gives colliding paths distinct tab values", () => {
+    const colliding: EditorFile[] = [
+      { path: "a/b", value: "1" },
+      { path: "a.b", value: "2" },
+      { path: "a-b", value: "3" },
+    ];
+    render(<CodeWorkspace files={colliding} />);
+    const ids = screen.getAllByRole("tabpanel", { hidden: true }).map((p) => p.id);
+    expect(new Set(ids).size).toBe(colliding.length);
+  });
+});

package/src/code-workspace/code-workspace.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Tabs, TabsList, TabsTrigger } from "@elabs-ai/components-ui";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import {
   forwardRef,
@@ -74,6 +74,31 @@ const EXT_LANGUAGE: Record<string, string> = {
 
 const basename = (path: string) => path.split("/").pop() || path;
 
+/**
+ * Radix composes each `TabsContent`'s DOM id from the `Tabs`/`TabsTrigger`
+ * `value` (see #154): a raw `file.path` leaks `/`, `.`, spaces and non-ASCII
+ * characters straight into that id, which is what a screen reader gets back
+ * via `aria-controls`. `path` stays the display label and the lookup key in
+ * component state (`active`); this is only ever a DOM-id-safe Tabs value.
+ *
+ * The encoding is INJECTIVE and depends only on the path — never on the
+ * file's position in `files`. Every character outside `[A-Za-z0-9-]` becomes
+ * `_<hex code point>_`, and `_` itself is never emitted literally, so the
+ * mapping is reversible and two distinct paths can never produce the same
+ * value ("a/b" → `tab-a_2f_b`, "a.b" → `tab-a_2e_b`). An index-derived value
+ * would have been collision-safe too, but it changes when the list is
+ * reordered or a file is inserted, which re-keys the active `TabsContent` and
+ * throws away Monaco's selection, scroll position and undo history on an
+ * otherwise harmless `files` update.
+ */
+function tabIdForFile(path: string): string {
+  let out = "";
+  for (const char of path) {
+    out += /[A-Za-z0-9-]/.test(char) ? char : `_${char.codePointAt(0)!.toString(16)}_`;
+  }
+  return `tab-${out}`;
+}
+
 function inferLanguage(file: EditorFile): string {
   if (file.language) return file.language;
   const ext = file.path.split(".").pop()?.toLowerCase() ?? "";
@@ -143,6 +168,10 @@ export const CodeWorkspace = forwardRef<CodeWorkspaceHandle, CodeWorkspaceProps>
     const activeFile = files.find((f) => f.path === requested) ?? files[0];
     const active = activeFile?.path ?? "";
 
+    // DOM-id-safe Tabs value per file (#154); `path` stays the lookup key.
+    const tabs = files.map((file) => ({ file, id: tabIdForFile(file.path) }));
+    const activeTabId = tabs.find((t) => t.file.path === active)?.id ?? "";
+
     // The root div ref (getElement() preserves old HTMLDivElement access).
     const rootRef = useRef<HTMLDivElement | null>(null);
 
@@ -213,16 +242,19 @@ export const CodeWorkspace = forwardRef<CodeWorkspaceHandle, CodeWorkspaceProps>
         {...props}
       >
         <Tabs
-          value={active}
-          onValueChange={selectTab}
+          value={activeTabId}
+          onValueChange={(id) => {
+            const found = tabs.find((t) => t.id === id);
+            if (found) selectTab(found.file.path);
+          }}
           className="flex min-h-0 flex-1 flex-col gap-0"
         >
           <div className="flex items-center border-b border-border bg-surface">
             <TabsList className="h-9 flex-1 justify-start gap-0 rounded-none bg-transparent p-0">
-              {files.map((file) => (
+              {tabs.map(({ file, id }) => (
                 <TabsTrigger
-                  key={file.path}
-                  value={file.path}
+                  key={id}
+                  value={id}
                   className="h-9 rounded-none border-e border-border px-3 text-xs data-[state=active]:bg-background data-[state=active]:shadow-none"
                 >
                   {basename(file.path)}
@@ -232,20 +264,41 @@ export const CodeWorkspace = forwardRef<CodeWorkspaceHandle, CodeWorkspaceProps>
             {activeFile ? <CopyButton value={activeFile.value} className="me-1.5" /> : null}
           </div>
 
-          <div className="min-h-0 flex-1">
-            {activeFile ? (
-              <CodeEditor
-                key={activeFile.path}
-                path={activeFile.path}
-                language={inferLanguage(activeFile)}
-                value={activeFile.value}
-                readOnly={readOnly}
-                onChange={(next) => onFileChange?.(activeFile.path, next)}
-                onMount={(editor) => setActiveEditor(editor)}
-                height="100%"
-              />
-            ) : null}
-          </div>
+          {tabs.map(({ file, id }) => {
+            const isActive = file.path === activeFile?.path;
+            return (
+              // `forceMount` keeps every tab's content in the DOM so each
+              // trigger's `aria-controls` resolves to a real element, not only
+              // the active one (#154). Radix derives its own `hidden` from
+              // `forceMount || isSelected`, so under `forceMount` it hides
+              // NOTHING: without the explicit `hidden` below every inactive
+              // panel stays a visible `flex-1` child and the editor height is
+              // split across all of them. `tabIndex={-1}` keeps the empty
+              // panels out of the tab sequence for the same reason. Only the
+              // active file mounts a (single) Monaco instance.
+              <TabsContent
+                key={id}
+                value={id}
+                forceMount
+                hidden={!isActive}
+                tabIndex={isActive ? 0 : -1}
+                className="mt-0 min-h-0 flex-1"
+              >
+                {isActive ? (
+                  <CodeEditor
+                    key={file.path}
+                    path={file.path}
+                    language={inferLanguage(file)}
+                    value={file.value}
+                    readOnly={readOnly}
+                    onChange={(next) => onFileChange?.(file.path, next)}
+                    onMount={(editor) => setActiveEditor(editor)}
+                    height="100%"
+                  />
+                ) : null}
+              </TabsContent>
+            );
+          })}
         </Tabs>
       </div>
     );

package/src/diff-editor/diff-editor.stories.tsx

@@ -5,7 +5,15 @@ const meta = {
   title: "Editor/DiffEditor",
   component: DiffEditor,
   tags: ["autodocs"],
-  parameters: { layout: "fullscreen" },
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "The only diff surface that can be TYPED INTO — Monaco’s side-by-side editor. Reading lines of a patch is `AI/DiffView`, accepting or rejecting per hunk is `AI/ChangeReview`, and reading a patch in a console transcript is `Terminal/TerminalDiffHunk`. See [Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs).",
+      },
+    },
+  },
 } satisfies Meta<typeof DiffEditor>;
 
 export default meta;

package/src/lib/monaco-deep-imports.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Ambient declarations for the `monaco-editor` deep ESM paths used by
+ * `monaco-theme-bridge.test.ts` to resolve syntax colours through Monaco's
+ * REAL token-theme trie (#90) — the only way to prove the bridge's rules
+ * actually beat the inherited `vs`/`vs-dark` base themes, since the bug this
+ * locks is invisible to a check that only reads `buildBrandThemeData()`'s
+ * returned array.
+ *
+ * `monaco-editor`'s package `exports` map (`"./*": "./*"`) makes these paths
+ * resolvable at runtime/bundle time, but ships no `.d.ts` for anything below
+ * the top-level `editor.main.d.ts` barrel — hence the shims. Typed only as
+ * far as the test needs; internals (`ThemeTrieElementRule`'s private-by-
+ * convention `_foreground`/`_background` fields) are read structurally
+ * because that's the real shape `tokenization.js` constructs at runtime (see
+ * `ThemeTrieElementRule` in that file for the source of truth).
+ */
+declare module "monaco-editor/esm/vs/editor/common/languages/supports/tokenization.js" {
+  import type * as Monaco from "monaco-editor";
+
+  /** Mirrors `ThemeTrieElementRule` — the resolved node `_match` returns. */
+  interface ResolvedThemeTrieRule {
+    readonly _fontStyle: number;
+    readonly _foreground: number;
+    readonly _background: number;
+    readonly metadata: number;
+  }
+
+  /** Mirrors `Color` (`base/common/color.js`) — enough to read RGB channels. */
+  interface MonacoColor {
+    readonly rgba: { r: number; g: number; b: number; a: number };
+    toString(): string;
+  }
+
+  export class TokenTheme {
+    static createFromRawTokenTheme(
+      source: Monaco.editor.ITokenThemeRule[],
+      customTokenColors: string[],
+    ): TokenTheme;
+    /** Internal (underscore) but exercised directly — see file header. */
+    _match(token: string): ResolvedThemeTrieRule;
+    getColorMap(): MonacoColor[];
+  }
+}
+
+declare module "monaco-editor/esm/vs/editor/standalone/common/themes.js" {
+  import type * as Monaco from "monaco-editor";
+
+  interface BuiltinRawTheme {
+    readonly base: string;
+    readonly inherit: boolean;
+    readonly rules: Monaco.editor.ITokenThemeRule[];
+    readonly colors: Record<string, string>;
+  }
+
+  export const vs: BuiltinRawTheme;
+  export const vs_dark: BuiltinRawTheme;
+  export const hc_black: BuiltinRawTheme;
+  export const hc_light: BuiltinRawTheme;
+}