@elabs-ai/components-editor 4.0.0 → 4.2.0

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

@@ -14,7 +14,14 @@ const h = vi.hoisted(() => {
     setValue: vi.fn(),
     getModel: vi.fn(() => ({
       getValueInRange: vi.fn(() => "selected"),
+      // Deliberately reports the SAME content the controlled `value` prop
+      // carries in this suite's fixtures, so the controlled-value-sync
+      // effect (added for the executeEdits-over-setValue fix) is a no-op
+      // here and doesn't perturb these unrelated tab/selection assertions.
+      getValue: vi.fn(() => "AAA"),
+      getPositionAt: vi.fn((offset: number) => ({ lineNumber: 1, column: offset })),
     })),
+    setModel: vi.fn(),
     getSelection: vi.fn(() => ({ isEmpty: () => false })),
     executeEdits: vi.fn(),
     pushUndoStop: vi.fn(),
@@ -32,7 +39,11 @@ const h = vi.hoisted(() => {
     selectionHandlers,
     selectionDisposable,
     create: vi.fn(() => editor),
-    createModel: vi.fn(() => ({ dispose: vi.fn() })),
+    createModel: vi.fn((value: string) => ({
+      dispose: vi.fn(),
+      getValue: vi.fn(() => value),
+      getPositionAt: vi.fn((offset: number) => ({ lineNumber: 1, column: offset })),
+    })),
   };
 });
 
@@ -45,6 +56,9 @@ vi.mock("monaco-editor", () => ({
     setTheme: vi.fn(),
   },
   Uri: { parse: (s: string) => ({ toString: () => s }) },
+  Range: {
+    fromPositions: (start: unknown, end: unknown) => ({ start, end }),
+  },
 }));
 
 import { createRef } from "react";
@@ -55,20 +69,28 @@ const FILES: EditorFile[] = [
   { path: "b.json", value: "{}" },
 ];
 
+// CodeEditor's underlying engine now loads via a dynamic `import("monaco-editor")`
+// (kept lazy so the barrel never evaluates Monaco just for `CopyButton`/
+// `EDITOR_LANGUAGES` — see barrel-monaco-lazy.test.ts). Flush that microtask
+// before asserting on anything the mount effect populates.
+const flush = () => act(async () => {});
+
 beforeEach(() => vi.clearAllMocks());
 afterEach(cleanup);
 
 describe("CodeWorkspace — tabs", () => {
-  it("renders a tab per file and opens the first file with its inferred language", () => {
+  it("renders a tab per file and opens the first file with its inferred language", async () => {
     render(<CodeWorkspace files={FILES} />);
     expect(screen.getByRole("tab", { name: "a.ts" })).toBeInTheDocument();
     expect(screen.getByRole("tab", { name: "b.json" })).toBeInTheDocument();
+    await flush();
     expect(h.createModel).toHaveBeenCalledWith("AAA", "typescript", expect.anything());
   });
 
   it("switches the editor to the file whose tab is activated", async () => {
     const onActivePathChange = vi.fn();
     render(<CodeWorkspace files={FILES} onActivePathChange={onActivePathChange} />);
+    await flush();
     await userEvent.click(screen.getByRole("tab", { name: "b.json" }));
     expect(onActivePathChange).toHaveBeenCalledWith("b.json");
     expect(h.createModel).toHaveBeenCalledWith("{}", "json", expect.anything());
@@ -84,18 +106,14 @@ describe("CodeWorkspace — CodeWorkspaceHandle via ref", () => {
     expect(el).toBeInstanceOf(HTMLDivElement);
   });
 
-  it("exposes getActiveEditor() returning the Monaco instance after mount", () => {
+  it("exposes getActiveEditor() returning the Monaco instance after mount", async () => {
     const ref = createRef<CodeWorkspaceHandle>();
     render(<CodeWorkspace files={FILES} ref={ref} />);
-    // onMount fires synchronously inside the mocked monaco.editor.create path.
-    // The mock `create` calls onMountRef immediately after setEditor in the effect —
-    // but since monaco.editor.create is mocked synchronously and CodeEditor calls
-    // onMountRef.current?.(instance) right after create(), the instance is available.
-    // We verify getActiveEditor() returns the mock editor (or null if mount async).
+    // The engine loads via `import("monaco-editor")`, resolved as a microtask
+    // (mocked module, no real network) — flush it, then the handle reflects
+    // the mounted instance.
+    await flush();
     const active = ref.current!.getActiveEditor();
-    // The mock editor.create is called synchronously in the useEffect, so after
-    // the first render + effect flush the handle should reflect it.
-    // If it's null the store hasn't flushed yet — both are valid jsdom outcomes.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     expect(active === null || (active as any) === h.editor).toBe(true);
   });
@@ -144,3 +162,87 @@ 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", async () => {
+    const initial: EditorFile[] = [
+      { path: "src/a.ts", value: "AAA" },
+      { path: "b.json", value: "{}" },
+    ];
+    const { rerender } = render(<CodeWorkspace files={initial} />);
+    await flush();
+    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/copy-button/copy-button.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, useCopyToClipboard } from "@elabs-ai/components-ui";
+import { Button, useCopyToClipboard, useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useCallback, type ComponentProps } from "react";
@@ -21,11 +21,14 @@ export function CopyButton({ value, label = true, className, ...props }: CopyBut
   // hook, so this button and `CopyableValue` cannot drift on timing or on what
   // happens where there is no clipboard.
   const { copied, copy } = useCopyToClipboard();
+  const { t } = useLocale();
 
   const onClick = useCallback(() => {
     void copy(value);
   }, [copy, value]);
 
+  const text = copied ? t("editor.copyButton.copied") : t("copy");
+
   return (
     <Button
       variant="ghost"
@@ -34,7 +37,7 @@ export function CopyButton({ value, label = true, className, ...props }: CopyBut
       type="button"
       className={cn("h-7 gap-1.5", className)}
       onClick={onClick}
-      aria-label={copied ? "Copied" : "Copy"}
+      aria-label={text}
     >
       {copied ? (
         <CheckIcon
@@ -45,7 +48,7 @@ export function CopyButton({ value, label = true, className, ...props }: CopyBut
       ) : (
         <CopyIcon className="size-4" aria-hidden="true" />
       )}
-      {label ? <span className="text-xs">{copied ? "Copied" : "Copy"}</span> : null}
+      {label ? <span className="text-xs">{text}</span> : null}
     </Button>
   );
 }

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/diff-editor/diff-editor.test.tsx

@@ -1,4 +1,4 @@
-import { cleanup, render } from "@testing-library/react";
+import { act, cleanup, render } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 // Monaco can't mount in jsdom — mock it and assert the wrapper's lifecycle.
@@ -38,6 +38,10 @@ vi.mock("monaco-editor", () => ({
 
 import { DiffEditor } from "./diff-editor";
 
+// See the matching note in `../code-editor/code-editor.test.tsx` — the engine
+// loads via a dynamic `import("monaco-editor")`; flush it before asserting.
+const flush = () => act(async () => {});
+
 beforeEach(() => {
   h.models.length = 0;
   vi.clearAllMocks();
@@ -45,9 +49,10 @@ beforeEach(() => {
 afterEach(cleanup);
 
 describe("DiffEditor", () => {
-  it("creates a diff editor with original + modified models", () => {
+  it("creates a diff editor with original + modified models", async () => {
     const { getByTestId } = render(<DiffEditor original="a" modified="b" language="typescript" />);
     expect(getByTestId("diff-editor")).toBeInTheDocument();
+    await flush();
     expect(h.createDiffEditor).toHaveBeenCalledTimes(1);
     expect(h.createModel).toHaveBeenNthCalledWith(1, "a", "typescript");
     expect(h.createModel).toHaveBeenNthCalledWith(2, "b", "typescript");
@@ -57,8 +62,9 @@ describe("DiffEditor", () => {
     });
   });
 
-  it("disposes the editor + both models on unmount", () => {
+  it("disposes the editor + both models on unmount", async () => {
     const { unmount } = render(<DiffEditor original="a" modified="b" />);
+    await flush();
     const [original, modified] = h.models;
     unmount();
     expect(h.diff.dispose).toHaveBeenCalledTimes(1);

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

@@ -1,6 +1,10 @@
 "use client";
 
-import * as monaco from "monaco-editor";
+// Type-only — see the matching note in `../code-editor/code-editor.tsx`. The
+// engine loads at RUNTIME via `import("monaco-editor")` in the mount effect
+// below (`monacoRef`), so importing this module (e.g. transitively, via the
+// barrel) never evaluates Monaco.
+import type * as monaco from "monaco-editor";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import {
   forwardRef,
@@ -16,6 +20,9 @@ import { useDataTheme } from "../lib/use-data-theme";
 
 export type MonacoDiffEditor = monaco.editor.IStandaloneDiffEditor;
 
+/** Same pattern as `code-editor.tsx`'s `MonacoNamespace`. */
+type MonacoNamespace = typeof monaco;
+
 export interface DiffEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> {
   /** Left/original document. */
   original: string;
@@ -32,7 +39,7 @@ export interface DiffEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "d
   /** Passthrough Monaco diff options (merged over the defaults). */
   options?: monaco.editor.IStandaloneDiffEditorConstructionOptions;
   /** Called once the diff editor + monaco namespace are ready. */
-  onMount?: (editor: MonacoDiffEditor, monacoApi: typeof monaco) => void;
+  onMount?: (editor: MonacoDiffEditor, monacoApi: MonacoNamespace) => void;
 }
 
 const BASE_OPTIONS: monaco.editor.IStandaloneDiffEditorConstructionOptions = {
@@ -68,6 +75,10 @@ export const DiffEditor = forwardRef<MonacoDiffEditor | null, DiffEditorProps>(f
   const containerRef = useRef<HTMLDivElement>(null);
   const [editor, setEditor] = useState<MonacoDiffEditor | null>(null);
   const { theme, revision } = useDataTheme();
+  // Populated once the dynamic `import("monaco-editor")` below resolves.
+  // `editor` (React state) is only ever set AFTER this ref, so every other
+  // effect that reads both may assume: `editor` truthy implies this truthy.
+  const monacoRef = useRef<MonacoNamespace | null>(null);
 
   const onMountRef = useRef(onMount);
   onMountRef.current = onMount;
@@ -76,28 +87,39 @@ export const DiffEditor = forwardRef<MonacoDiffEditor | null, DiffEditorProps>(f
     editor,
   ]);
 
-  // Mount once.
+  // Mount once. Monaco itself loads lazily (see the top-of-file note) — merely
+  // importing this module never evaluates the engine.
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
-
-    const instance = monaco.editor.createDiffEditor(container, {
-      ...BASE_OPTIONS,
-      readOnly,
-      renderSideBySide,
-      ...options,
+    let cancelled = false;
+    let instance: MonacoDiffEditor | null = null;
+    let originalModel: monaco.editor.ITextModel | null = null;
+    let modifiedModel: monaco.editor.ITextModel | null = null;
+
+    import("monaco-editor").then((monacoApi) => {
+      if (cancelled) return;
+      monacoRef.current = monacoApi;
+      instance = monacoApi.editor.createDiffEditor(container, {
+        ...BASE_OPTIONS,
+        readOnly,
+        renderSideBySide,
+        ...options,
+      });
+      originalModel = monacoApi.editor.createModel(original, language);
+      modifiedModel = monacoApi.editor.createModel(modified, language);
+      instance.setModel({ original: originalModel, modified: modifiedModel });
+      // Theme is applied by the effect below once `setEditor` runs.
+      setEditor(instance);
+      onMountRef.current?.(instance, monacoApi);
     });
-    const originalModel = monaco.editor.createModel(original, language);
-    const modifiedModel = monaco.editor.createModel(modified, language);
-    instance.setModel({ original: originalModel, modified: modifiedModel });
-    // Theme is applied by the effect below once `setEditor` runs.
-    setEditor(instance);
-    onMountRef.current?.(instance, monaco);
 
     return () => {
-      instance.dispose();
-      originalModel.dispose();
-      modifiedModel.dispose();
+      cancelled = true;
+      instance?.dispose();
+      originalModel?.dispose();
+      modifiedModel?.dispose();
+      monacoRef.current = null;
       setEditor(null);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -114,10 +136,11 @@ export const DiffEditor = forwardRef<MonacoDiffEditor | null, DiffEditorProps>(f
   }, [editor, modified]);
 
   useEffect(() => {
+    const monacoApi = monacoRef.current;
     const models = editor?.getModel();
-    if (!models) return;
-    monaco.editor.setModelLanguage(models.original, language);
-    monaco.editor.setModelLanguage(models.modified, language);
+    if (!models || !monacoApi) return;
+    monacoApi.editor.setModelLanguage(models.original, language);
+    monacoApi.editor.setModelLanguage(models.modified, language);
   }, [editor, language]);
 
   useEffect(() => {
@@ -125,9 +148,10 @@ export const DiffEditor = forwardRef<MonacoDiffEditor | null, DiffEditorProps>(f
   }, [editor, readOnly, renderSideBySide]);
 
   useEffect(() => {
-    if (!editor) return;
+    const monacoApi = monacoRef.current;
+    if (!editor || !monacoApi) return;
     try {
-      applyBrandTheme(monaco, theme);
+      applyBrandTheme(monacoApi, theme);
     } catch (err) {
       console.error("[@elabs-ai/components-editor] failed to apply brand theme", err);
     }

package/src/editor-toolbar/editor-toolbar.tsx

@@ -6,6 +6,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  useLocale,
 } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
@@ -45,6 +46,7 @@ export const EditorToolbar = forwardRef<HTMLDivElement, EditorToolbarProps>(func
   },
   ref,
 ) {
+  const { t } = useLocale();
   return (
     <div
       ref={ref}
@@ -63,8 +65,12 @@ export const EditorToolbar = forwardRef<HTMLDivElement, EditorToolbarProps>(func
 
         {onLanguageChange ? (
           <Select value={language} onValueChange={onLanguageChange}>
-            <SelectTrigger size="sm" className="h-7 w-[140px]" aria-label="Language">
-              <SelectValue placeholder="Language" />
+            <SelectTrigger
+              size="sm"
+              className="h-7 w-[140px]"
+              aria-label={t("editor.editorToolbar.language")}
+            >
+              <SelectValue placeholder={t("editor.editorToolbar.language")} />
             </SelectTrigger>
             <SelectContent>
               {languages.map((l) => (

package/src/index.ts

@@ -43,6 +43,7 @@ export { applyBrandTheme, buildBrandThemeData, brandThemeId } from "./lib/monaco
 export { useDataTheme, type DataThemeState } from "./lib/use-data-theme";
 export { EDITOR_LANGUAGES, languageLabel, type EditorLanguage } from "./lib/languages";
 
-// Re-export the monaco namespace so consumers can build custom editors / wire
-// commands without adding a direct dependency.
-export * as monaco from "monaco-editor";
+// The `monaco-editor` namespace moved to its own subpath — see `./monaco.ts`.
+// Re-exporting it here pulled Monaco into every consumer of this barrel, even
+// one only importing `CopyButton`/`EDITOR_LANGUAGES`:
+//   import { monaco } from "@elabs-ai/components-editor/monaco";

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;
+}