@elabs-ai/components-editor 4.1.0 → 4.2.0

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

@@ -1,6 +1,13 @@
 "use client";
 
-import * as monaco from "monaco-editor";
+// Type-only: the barrel (`.`) exports this component alongside lightweight
+// chrome (`CopyButton`, `EDITOR_LANGUAGES`) that must stay import-safe without
+// Monaco. A `monaco-editor` VALUE import here would be evaluated the moment
+// anything imports the barrel, pulling megabytes of Monaco + touching browser
+// globals even for a consumer that only wants `CopyButton`. The engine is
+// loaded at RUNTIME via `import("monaco-editor")` inside the mount effect
+// below — see `monacoRef`.
+import type * as monaco from "monaco-editor";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import {
   forwardRef,
@@ -20,6 +27,14 @@ export type MonacoCodeEditor = monaco.editor.IStandaloneCodeEditor;
 /** A Monaco editor action (system command + optional hotkey + palette/menu entry). */
 export type EditorAction = monaco.editor.IActionDescriptor;
 
+/**
+ * The runtime value type handed back by `import("monaco-editor")` — same
+ * namespace as the type-only `monaco` import above (`typeof` a type-only
+ * namespace import resolves to the module's own type), used for `monacoRef`
+ * and `onMount`'s second argument.
+ */
+type MonacoNamespace = typeof monaco;
+
 export interface CodeEditorProps extends Omit<
   HTMLAttributes<HTMLDivElement>,
   "onChange" | "defaultValue"
@@ -58,7 +73,7 @@ export interface CodeEditorProps extends Omit<
    */
   contextMenu?: "brand" | "monaco" | "none";
   /** Called once the editor instance + monaco namespace are ready. */
-  onMount?: (editor: MonacoCodeEditor, monacoApi: typeof monaco) => void;
+  onMount?: (editor: MonacoCodeEditor, monacoApi: MonacoNamespace) => void;
   /**
    * Declarative Monaco editor actions — each registers a command (run on its
    * `keybindings`, in the command palette, and optionally the context menu via
@@ -73,6 +88,38 @@ export interface CodeEditorProps extends Omit<
   actions?: EditorAction[];
 }
 
+/**
+ * The smallest single edit that turns `oldValue` into `newValue`, found by
+ * trimming the common prefix and suffix. Used instead of a wholesale
+ * `editor.setValue()` when syncing a controlled `value`: `setValue` replaces
+ * the entire model in one shot, which wipes the undo stack and always resets
+ * the cursor to the start of the document. Routing the same change through
+ * `editor.executeEdits` with just the differing middle span keeps it a single
+ * coalescable undo entry and leaves the cursor/selection outside the edited
+ * span untouched by Monaco's own position mapping.
+ */
+function computeMinimalEdit(
+  oldValue: string,
+  newValue: string,
+): { start: number; endOld: number; text: string } {
+  const maxCommon = Math.min(oldValue.length, newValue.length);
+  let start = 0;
+  while (start < maxCommon && oldValue.charCodeAt(start) === newValue.charCodeAt(start)) {
+    start++;
+  }
+  let endOld = oldValue.length;
+  let endNew = newValue.length;
+  while (
+    endOld > start &&
+    endNew > start &&
+    oldValue.charCodeAt(endOld - 1) === newValue.charCodeAt(endNew - 1)
+  ) {
+    endOld--;
+    endNew--;
+  }
+  return { start, endOld, text: newValue.slice(start, endNew) };
+}
+
 const BASE_OPTIONS: monaco.editor.IStandaloneEditorConstructionOptions = {
   automaticLayout: true,
   minimap: { enabled: false },
@@ -119,6 +166,15 @@ export const CodeEditor = forwardRef<MonacoCodeEditor | null, CodeEditorProps>(f
   const containerRef = useRef<HTMLDivElement>(null);
   const [editor, setEditor] = useState<MonacoCodeEditor | null>(null);
   const { theme, revision } = useDataTheme();
+  // The CURRENT model, tracked outside React state: a `path` change swaps it
+  // (see the effect below) without waiting on a re-render, and unmount must
+  // dispose whichever model is live at that point, not the one from mount.
+  const modelRef = useRef<monaco.editor.ITextModel | null>(null);
+  // The dynamically-imported `monaco-editor` module, once loaded. `editor`
+  // (React state) is only ever set AFTER this ref is populated (see the mount
+  // effect), so every other effect below that reads both may assume: `editor`
+  // truthy implies `monacoRef.current` truthy.
+  const monacoRef = useRef<MonacoNamespace | null>(null);
 
   // Latest callbacks via refs so the mount effect can run exactly once.
   const onChangeRef = useRef(onChange);
@@ -130,64 +186,139 @@ export const CodeEditor = forwardRef<MonacoCodeEditor | null, CodeEditorProps>(f
     editor,
   ]);
 
-  // Mount once.
+  // Mount once. Monaco itself loads lazily (`import("monaco-editor")`) so the
+  // engine is only fetched/evaluated once a `CodeEditor` actually mounts, never
+  // merely by importing this module (see the top-of-file note). `cancelled`
+  // guards against the component unmounting (or `container` going away) before
+  // the dynamic import resolves.
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
+    let cancelled = false;
+    let instance: MonacoCodeEditor | null = null;
+    let model: monaco.editor.ITextModel | null = null;
+    let sub: { dispose(): void } | null = null;
 
-    const model = monaco.editor.createModel(
-      value ?? defaultValue ?? "",
-      language,
-      path ? monaco.Uri.parse(`inmemory://brand/${path}`) : undefined,
-    );
-    const instance = monaco.editor.create(container, {
-      ...BASE_OPTIONS,
-      readOnly,
-      // Disable Monaco's own menu unless explicitly opted into; "brand" renders
-      // brand-ui's ContextMenu around the editor instead.
-      contextmenu: contextMenu === "monaco",
-      // Monaco's accessible name comes from this construction option (it writes it
-      // onto its inner screen-reader <textarea>), not from a wrapper-div attribute.
-      ...(ariaLabel !== undefined ? { ariaLabel } : null),
-      model,
-      ...options,
+    import("monaco-editor").then((monacoApi) => {
+      if (cancelled) return;
+      monacoRef.current = monacoApi;
+      model = monacoApi.editor.createModel(
+        value ?? defaultValue ?? "",
+        language,
+        path ? monacoApi.Uri.parse(`inmemory://brand/${path}`) : undefined,
+      );
+      modelRef.current = model;
+      instance = monacoApi.editor.create(container, {
+        ...BASE_OPTIONS,
+        readOnly,
+        // Disable Monaco's own menu unless explicitly opted into; "brand" renders
+        // brand-ui's ContextMenu around the editor instead.
+        contextmenu: contextMenu === "monaco",
+        // Monaco's accessible name comes from this construction option (it writes it
+        // onto its inner screen-reader <textarea>), not from a wrapper-div attribute.
+        ...(ariaLabel !== undefined ? { ariaLabel } : null),
+        model,
+        ...options,
+      });
+      sub = instance.onDidChangeModelContent(() => {
+        onChangeRef.current?.(instance!.getValue());
+      });
+      // Monaco now mounts asynchronously, so stamp the initial aria-* onto its
+      // textarea right away — otherwise it is briefly exposed without a name
+      // until the aria sync effect below runs on the next commit.
+      const textarea = instance.getDomNode()?.querySelector("textarea");
+      if (textarea) {
+        if (ariaLabel !== undefined) textarea.setAttribute("aria-label", ariaLabel);
+        if (ariaInvalid !== undefined) textarea.setAttribute("aria-invalid", String(ariaInvalid));
+        if (ariaDescribedBy !== undefined)
+          textarea.setAttribute("aria-describedby", ariaDescribedBy);
+      }
+      // `setEditor` triggers the theming effect below; keeping theme application
+      // there (not here) guarantees it never blocks editor setup.
+      setEditor(instance);
+      onMountRef.current?.(instance, monacoApi);
     });
-    const sub = instance.onDidChangeModelContent(() => {
-      onChangeRef.current?.(instance.getValue());
-    });
-    // `setEditor` triggers the theming effect below; keeping theme application
-    // there (not here) guarantees it never blocks editor setup.
-    setEditor(instance);
-    onMountRef.current?.(instance, monaco);
 
     return () => {
-      sub.dispose();
-      instance.dispose();
-      model.dispose();
+      cancelled = true;
+      sub?.dispose();
+      instance?.dispose();
+      model?.dispose();
+      modelRef.current = null;
+      monacoRef.current = null;
       setEditor(null);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Controlled value sync (only when it diverges, to preserve cursor/undo).
+  // `path` drives the model's URI, which Monaco never lets you change on an
+  // existing model — a later `path` change (e.g. `CodeWorkspace` switching
+  // files) was previously just ignored. Swap in a fresh model carrying the
+  // CURRENT value/language under the new URI, and dispose the old one; a
+  // per-file undo stack is Monaco's normal behavior for a model swap.
   useEffect(() => {
-    if (!editor || value === undefined) return;
-    if (value !== editor.getValue()) editor.setValue(value);
+    const monacoApi = monacoRef.current;
+    if (!editor || !monacoApi) return;
+    const current = modelRef.current;
+    const currentUri = current?.uri?.toString();
+    const nextUri = path ? monacoApi.Uri.parse(`inmemory://brand/${path}`).toString() : undefined;
+    if (currentUri === nextUri) return;
+
+    const nextModel = monacoApi.editor.createModel(
+      current?.getValue() ?? value ?? defaultValue ?? "",
+      language,
+      path ? monacoApi.Uri.parse(`inmemory://brand/${path}`) : undefined,
+    );
+    editor.setModel(nextModel);
+    modelRef.current = nextModel;
+    current?.dispose();
+    // `value`/`defaultValue`/`language` are read once, at the moment of the
+    // swap, to seed the new model — not tracked as reactive deps here; the
+    // controlled-value and language effects below correct them independently.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, path]);
+
+  // Controlled value sync — only when it diverges, and via the smallest
+  // `executeEdits` span rather than `setValue()`: a full-document `setValue`
+  // wipes the undo stack and always resets the cursor to the start.
+  useEffect(() => {
+    const monacoApi = monacoRef.current;
+    if (!editor || !monacoApi || value === undefined) return;
+    const model = editor.getModel();
+    if (!model) return;
+    const current = model.getValue();
+    if (value === current) return;
+    const { start, endOld, text } = computeMinimalEdit(current, value);
+    const range = monacoApi.Range.fromPositions(
+      model.getPositionAt(start),
+      model.getPositionAt(endOld),
+    );
+    editor.executeEdits("controlled-value-sync", [{ range, text }]);
   }, [editor, value]);
 
   useEffect(() => {
+    const monacoApi = monacoRef.current;
     const model = editor?.getModel();
-    if (model) monaco.editor.setModelLanguage(model, language);
+    if (model && monacoApi) monacoApi.editor.setModelLanguage(model, language);
   }, [editor, language]);
 
   useEffect(() => {
     editor?.updateOptions({ readOnly, contextmenu: contextMenu === "monaco" });
   }, [editor, readOnly, contextMenu]);
 
+  // `options` after mount: the construction-time spread only ever applied it
+  // once. A caller changing `options` (e.g. toggling `minimap`) now reaches
+  // the live editor via `updateOptions`, same as `readOnly`/`contextMenu` above.
   useEffect(() => {
-    if (!editor) return;
+    if (!editor || !options) return;
+    editor.updateOptions(options);
+  }, [editor, options]);
+
+  useEffect(() => {
+    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/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);
   });
@@ -196,12 +214,13 @@ describe("CodeWorkspace — force-mounted panels stay out of the layout", () =>
 });
 
 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", () => {
+  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;

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.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";