@elabs-ai/components-editor 4.1.0 → 5.0.0

package/dist/{markdown-editor-CBp_4eDv.d.ts → markdown-editor-Dn-0L_MM.d.ts}

@@ -9,6 +9,13 @@ import { Command } from '@milkdown/kit/prose/state';
 type MonacoCodeEditor = monaco.editor.IStandaloneCodeEditor;
 /** A Monaco editor action (system command + optional hotkey + palette/menu entry). */
 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;
 interface CodeEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
     /** Controlled content. Pair with `onChange`. */
     value?: string;
@@ -44,7 +51,7 @@ interface CodeEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange
      */
     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

package/dist/monaco.d.ts

@@ -0,0 +1,2 @@
+import * as monaco from 'monaco-editor';
+export { monaco };

package/dist/monaco.js

@@ -0,0 +1,9 @@
+"use client";
+"use client";
+
+// src/monaco.ts
+import * as monaco from "monaco-editor";
+export {
+  monaco
+};
+//# sourceMappingURL=monaco.js.map

package/dist/monaco.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/monaco.ts"],"sourcesContent":["\"use client\";\n\n/**\n * The `monaco-editor` namespace, as its own subpath (ADR 0006 subpath exports).\n *\n * The root barrel (`.`) exports lightweight chrome — `CopyButton`,\n * `EDITOR_LANGUAGES`, `languageLabel` — that a consumer should be able to\n * import WITHOUT pulling Monaco in at all: the editing surfaces\n * (`CodeEditor`, `DiffEditor`, `MarkdownEditor`) already own lazy-loading the\n * engine themselves. Re-exporting the whole `monaco-editor` namespace from\n * that SAME barrel defeated that split — `import { CopyButton } from\n * \"@elabs-ai/components-editor\"` pulled megabytes of Monaco and touched\n * browser globals at import time, breaking SSR/RSC for a component that never\n * renders the editor.\n *\n * A consumer that needs to build a custom editor, or wire Monaco commands\n * directly, imports this subpath instead:\n *\n *   import { monaco } from \"@elabs-ai/components-editor/monaco\";\n */\nexport * as monaco from \"monaco-editor\";\n"],"mappings":";;;;AAoBA,YAAY,YAAY;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elabs-ai/components-editor",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -36,6 +36,10 @@
     "./monaco-environment": {
       "types": "./dist/lib/monaco-environment.d.ts",
       "default": "./dist/lib/monaco-environment.js"
+    },
+    "./monaco": {
+      "types": "./dist/monaco.d.ts",
+      "default": "./dist/monaco.js"
     }
   },
   "publishConfig": {
@@ -65,8 +69,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.1.0",
-    "@elabs-ai/components-ui": "4.1.0"
+    "@elabs-ai/components-tokens": "5.0.0",
+    "@elabs-ai/components-ui": "5.0.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -86,9 +90,9 @@
     "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-tokens": "5.0.0",
     "@elabs-ai/components-typescript-config": "0.1.0",
-    "@elabs-ai/components-ui": "4.1.0"
+    "@elabs-ai/components-ui": "5.0.0"
   },
   "scripts": {
     "build": "rm -rf dist && tsup && node ../../scripts/link-dist-css.mjs",

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

@@ -24,6 +24,7 @@ import {
   CardContent,
   CardHeader,
   Separator,
+  useLocale,
   type BadgeProps,
 } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
@@ -51,11 +52,12 @@ const STATUS_BADGE_VARIANT: Record<DecisionStatus, BadgeProps["variant"]> = {
   superseded: "secondary",
 };
 
-const STATUS_LABELS: Record<DecisionStatus, string> = {
-  accepted: "Accepted",
-  rejected: "Rejected",
-  proposed: "Proposed",
-  superseded: "Superseded",
+/** Status → translation key (see `editor.decisionCard.status.*` in messages.ts). */
+const STATUS_LABEL_KEYS: Record<DecisionStatus, string> = {
+  accepted: "editor.decisionCard.statusAccepted",
+  rejected: "editor.decisionCard.statusRejected",
+  proposed: "editor.decisionCard.statusProposed",
+  superseded: "editor.decisionCard.statusSuperseded",
 };
 
 const STATUS_ICONS: Record<DecisionStatus, ComponentType<SVGProps<SVGSVGElement>>> = {
@@ -113,11 +115,12 @@ export const DecisionCard = forwardRef<HTMLElement, DecisionCardProps>(function
   { status: rawStatus, date, alternatives, children, className, ...props },
   ref,
 ) {
+  const { t } = useLocale();
   const status: DecisionStatus = isDecisionStatus(rawStatus ?? "")
     ? (rawStatus as DecisionStatus)
     : "proposed";
   const badgeVariant = STATUS_BADGE_VARIANT[status];
-  const label = STATUS_LABELS[status];
+  const label = t(STATUS_LABEL_KEYS[status]);
   const Icon = STATUS_ICONS[status];
 
   const altItems = alternatives
@@ -130,7 +133,7 @@ export const DecisionCard = forwardRef<HTMLElement, DecisionCardProps>(function
   return (
     <section
       ref={ref}
-      aria-label={`Decision: ${label}`}
+      aria-label={t("editor.decisionCard.label", { label })}
       className={cn("not-prose", className)}
       {...props}
     >
@@ -158,9 +161,12 @@ export const DecisionCard = forwardRef<HTMLElement, DecisionCardProps>(function
             <Separator />
             <div className="px-6 py-4">
               <p className="mb-2 text-meta font-medium text-muted-foreground">
-                Alternatives considered
+                {t("editor.decisionCard.alternativesConsidered")}
               </p>
-              <ul className="flex flex-wrap gap-1.5" aria-label="Alternatives considered">
+              <ul
+                className="flex flex-wrap gap-1.5"
+                aria-label={t("editor.decisionCard.alternativesConsidered")}
+              >
                 {altItems.map((alt) => (
                   <li key={alt}>
                     <Badge variant="outline" className="text-meta">

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

@@ -18,7 +18,7 @@
  * `KnowledgeCard` is standalone (no `resolve` → sources rendered as plain labels).
  * The `knowledgeDirective({ resolve })` factory wires the hook for directive use.
  */
-import { Card, CardContent, CardFooter } from "@elabs-ai/components-ui";
+import { Card, CardContent, CardFooter, useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { BookOpen, FileText } from "lucide-react";
 import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
@@ -49,6 +49,7 @@ interface SourceRowProps {
 }
 
 function SourceRow({ path, resolve }: SourceRowProps) {
+  const { t } = useLocale();
   const resolved = resolve ? resolve(path) : null;
   const display = resolved?.title ?? path;
 
@@ -58,9 +59,9 @@ function SourceRow({ path, resolve }: SourceRowProps) {
         href={resolved.href}
         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-ring"
-        aria-label={`Source: ${display}`}
+        // #399 — a source link is TEXT: the `--link` ink, not the fill.
+        className="flex min-w-0 items-center gap-1.5 text-meta text-link underline-offset-2 hover:underline focus-ring"
+        aria-label={t("editor.knowledgeCard.source", { name: display })}
       >
         <FileText className="size-3 shrink-0" aria-hidden="true" />
         <span className="truncate">{display}</span>
@@ -71,7 +72,7 @@ function SourceRow({ path, resolve }: SourceRowProps) {
   return (
     <span
       className="flex min-w-0 items-center gap-1.5 text-meta text-muted-foreground"
-      aria-label={`Source (unresolved): ${display}`}
+      aria-label={t("editor.knowledgeCard.sourceUnresolved", { name: display })}
     >
       <FileText className="size-3 shrink-0" aria-hidden="true" />
       <span className="truncate">{display}</span>
@@ -102,6 +103,7 @@ export const KnowledgeCard = forwardRef<HTMLElement, KnowledgeCardProps>(functio
   { sources, resolve, children, className, ...props },
   ref,
 ) {
+  const { t } = useLocale();
   const sourcePaths = sources
     ? sources
         .split(",")
@@ -112,7 +114,7 @@ export const KnowledgeCard = forwardRef<HTMLElement, KnowledgeCardProps>(functio
   return (
     <section
       ref={ref}
-      aria-label="Knowledge fact"
+      aria-label={t("editor.knowledgeCard.label")}
       className={cn("not-prose", className)}
       {...props}
     >
@@ -120,15 +122,22 @@ export const KnowledgeCard = forwardRef<HTMLElement, KnowledgeCardProps>(functio
         <CardContent className="pt-4">
           <div className="mb-2 flex items-center gap-1.5">
             <BookOpen className="size-3.5 shrink-0 text-info-text" aria-hidden="true" />
-            <span className="text-meta font-medium text-info-text">Knowledge</span>
+            <span className="text-meta font-medium text-info-text">
+              {t("editor.knowledgeCard.heading")}
+            </span>
           </div>
           <div className="text-body text-foreground">{children}</div>
         </CardContent>
 
         {sourcePaths.length > 0 ? (
           <CardFooter className="flex-col items-start gap-1 border-t border-border pt-3">
-            <p className="text-meta font-medium text-muted-foreground">Sources</p>
-            <ul className="flex w-full flex-col gap-1" aria-label="Sources">
+            <p className="text-meta font-medium text-muted-foreground">
+              {t("editor.knowledgeCard.sources")}
+            </p>
+            <ul
+              className="flex w-full flex-col gap-1"
+              aria-label={t("editor.knowledgeCard.sources")}
+            >
               {sourcePaths.map((path) => (
                 <li key={path} className="min-w-0">
                   <SourceRow path={path} resolve={resolve} />

package/src/barrel-monaco-lazy.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it, vi } from "vitest";
+
+/**
+ * The root barrel (`.`) exports lightweight chrome (`CopyButton`,
+ * `EDITOR_LANGUAGES`, `languageLabel`) alongside the Monaco-backed editing
+ * surfaces (`CodeEditor`, `DiffEditor`, `CodeWorkspace`). A consumer that only
+ * wants the chrome must never pay for Monaco: `monaco-editor` touches browser
+ * globals at import time and is megabytes on the wire, breaking SSR/RSC for a
+ * component that never renders an editor.
+ *
+ * `code-editor.tsx`/`diff-editor.tsx` used to `import * as monaco from
+ * "monaco-editor"` at the top of the module — a VALUE import, evaluated the
+ * moment anything imports the barrel (native ESM instantiates every module in
+ * the graph, regardless of which named export is actually read). This test
+ * locks the fix: mock `monaco-editor` to THROW on evaluation, then import the
+ * barrel and prove the lightweight exports still work. If either editing
+ * surface regresses to a top-level value import, this fails at the `import`
+ * statement itself.
+ */
+vi.mock("monaco-editor", () => {
+  throw new Error(
+    "monaco-editor must not be evaluated merely by importing the @elabs-ai/components-editor barrel",
+  );
+});
+
+describe("@elabs-ai/components-editor barrel", () => {
+  it("importing the barrel never evaluates monaco-editor", async () => {
+    await expect(import("./index")).resolves.toBeDefined();
+  });
+
+  it("CopyButton is usable without evaluating monaco-editor", async () => {
+    const { CopyButton } = await import("./index");
+    expect(CopyButton).toBeTypeOf("function");
+  });
+
+  it("EDITOR_LANGUAGES / languageLabel are usable without evaluating monaco-editor", async () => {
+    const { EDITOR_LANGUAGES, languageLabel } = await import("./index");
+    expect(Array.isArray(EDITOR_LANGUAGES)).toBe(true);
+    expect(EDITOR_LANGUAGES.length).toBeGreaterThan(0);
+    expect(languageLabel(EDITOR_LANGUAGES[0]!.id)).toBeTypeOf("string");
+  });
+
+  it("EditorToolbar + EditorContextMenu are usable (rendered) without evaluating monaco-editor", async () => {
+    const { EditorToolbar, EditorContextMenu } = await import("./index");
+    // Both are `forwardRef`/context components — objects, not plain functions;
+    // assert they're valid React element types instead of a bare `typeof`.
+    expect(EditorToolbar).toBeTruthy();
+    expect(EditorContextMenu).toBeTruthy();
+  });
+});

package/src/calc-block/calc-block.tsx

@@ -32,6 +32,7 @@
  * color is never the only signal (var-def = weight, unresolved = dotted underline),
  * so roles stay distinct in the high-contrast theme.
  */
+import { useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { TriangleAlert } from "lucide-react";
 import { forwardRef, useId, useMemo, type HTMLAttributes, type ReactNode } from "react";
@@ -239,6 +240,7 @@ function renderSource(text: string, tokens: CalcToken[]): ReactNode {
 
 /** The right-hand cell: a value, a calm error marker, or nothing. */
 function ResultCell({ result }: { result: CalcLineResult }): ReactNode {
+  const { t } = useLocale();
   if (result.error) {
     // Native `title` (not a Radix Tooltip) so CalcBlock is self-contained — it
     // renders inside MarkdownPreview / a story with no TooltipProvider ancestor.
@@ -246,7 +248,7 @@ function ResultCell({ result }: { result: CalcLineResult }): ReactNode {
       <span
         className="inline-flex shrink-0 text-calc-warning"
         title={result.error.message}
-        aria-label={`Error: ${result.error.message}`}
+        aria-label={t("editor.calcBlock.error", { message: result.error.message })}
       >
         <TriangleAlert className="size-3.5" aria-hidden="true" />
       </span>
@@ -255,7 +257,7 @@ function ResultCell({ result }: { result: CalcLineResult }): ReactNode {
   if (result.value) {
     return (
       <div className="brand-calc-tok--result shrink-0 tabular-nums text-calc-result">
-        <span className="sr-only">equals </span>
+        <span className="sr-only">{t("editor.calcBlock.equals")}</span>
         <span>{result.value.display}</span>
       </div>
     );
@@ -270,7 +272,7 @@ export const CalcBlock = forwardRef<HTMLDivElement, CalcBlockProps>(function Cal
     title,
     showTotal = true,
     total,
-    totalLabel = "Total",
+    totalLabel: totalLabelProp,
     markers = true,
     readOnly: _readOnly,
     className,
@@ -278,6 +280,8 @@ export const CalcBlock = forwardRef<HTMLDivElement, CalcBlockProps>(function Cal
   },
   ref,
 ) {
+  const { t } = useLocale();
+  const totalLabel = totalLabelProp ?? t("editor.calcBlock.total");
   // Author markers are stripped BEFORE evaluation: the math engine sees clean
   // lines, and because markers are trailing, token columns stay aligned with the
   // rendered (cleaned) text. `lines`/`evalSource` are the marker-free versions.
@@ -376,7 +380,9 @@ export const CalcBlock = forwardRef<HTMLDivElement, CalcBlockProps>(function Cal
       </div>
 
       {empty ? (
-        <p className="px-4 py-6 text-body text-muted-foreground">Empty calc block.</p>
+        <p className="px-4 py-6 text-body text-muted-foreground">
+          {t("editor.calcBlock.emptyBlock")}
+        </p>
       ) : (
         <div className="flex flex-col gap-y-1 px-4 py-3 font-mono text-code leading-relaxed">
           {rows}
@@ -385,9 +391,7 @@ export const CalcBlock = forwardRef<HTMLDivElement, CalcBlockProps>(function Cal
 
       {showTotal && resolvedTotal != null && !empty ? (
         <div className="flex items-center justify-between border-t border-border px-4 py-2">
-          <span className="text-meta font-medium uppercase tracking-wide text-muted-foreground">
-            {totalLabel}
-          </span>
+          <span className="text-eyebrow uppercase text-muted-foreground">{totalLabel}</span>
           <span className="font-mono text-code font-medium tabular-nums text-foreground">
             {totalDisplay}
           </span>

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

@@ -1,13 +1,23 @@
 import { act, cleanup, render } from "@testing-library/react";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi, type Mock } from "vitest";
 
 // Monaco needs real layout/canvas, so it cannot mount in jsdom — mock the engine
 // and assert the wrapper's lifecycle contract. Real rendering + a11y are covered
 // by the Storybook interaction tests.
 const h = vi.hoisted(() => {
   const state = { changeHandler: undefined as undefined | (() => void), value: "" };
-  const model = { dispose: vi.fn() };
+  const models: {
+    dispose: Mock;
+    uri: { toString(): string } | undefined;
+    getValue: () => string;
+    getPositionAt: (offset: number) => { lineNumber: number; column: number };
+    _value: string;
+  }[] = [];
   const actionDisposable = { dispose: vi.fn() };
+  // The most recently created/set model — a simple single-document stand-in
+  // (columns are 1-based character OFFSETS, not real Monaco line/column) good
+  // enough to exercise `executeEdits`'s edit shape without a real Monaco model.
+  let currentModel: (typeof models)[number] | undefined;
   const editor = {
     onDidChangeModelContent: vi.fn((cb: () => void) => {
       state.changeHandler = cb;
@@ -17,7 +27,19 @@ const h = vi.hoisted(() => {
     setValue: vi.fn((v: string) => {
       state.value = v;
     }),
-    getModel: vi.fn(() => model),
+    getModel: vi.fn(() => currentModel),
+    setModel: vi.fn((m: (typeof models)[number]) => {
+      currentModel = m;
+    }),
+    executeEdits: vi.fn(
+      (_source: string, edits: { range: { start: number; end: number }; text: string }[]) => {
+        const edit = edits[0]!;
+        const next =
+          state.value.slice(0, edit.range.start) + edit.text + state.value.slice(edit.range.end);
+        state.value = next;
+        if (currentModel) currentModel._value = next;
+      },
+    ),
     updateOptions: vi.fn(),
     addAction: vi.fn(() => actionDisposable),
     // Minimal DOM node so the aria-forwarding effect can find (or not) a textarea.
@@ -26,13 +48,29 @@ const h = vi.hoisted(() => {
   };
   return {
     state,
-    model,
+    models,
+    get model() {
+      return models[0];
+    },
     actionDisposable,
     editor,
     create: vi.fn(() => editor),
-    createModel: vi.fn((value: string) => {
+    createModel: vi.fn((value: string, _language: string, uri?: { toString(): string }) => {
       state.value = value;
-      return model;
+      const m = {
+        dispose: vi.fn(),
+        uri,
+        _value: value,
+        getValue(this: { _value: string }) {
+          return this._value;
+        },
+        getPositionAt(offset: number) {
+          return { lineNumber: 1, column: offset };
+        },
+      };
+      models.push(m);
+      currentModel = m;
+      return m;
     }),
   };
 });
@@ -46,38 +84,56 @@ vi.mock("monaco-editor", () => ({
     setTheme: vi.fn(),
   },
   Uri: { parse: (s: string) => ({ toString: () => s }) },
+  Range: {
+    fromPositions: (start: { column: number }, end: { column: number }) => ({
+      start: start.column,
+      end: end.column,
+    }),
+  },
 }));
 
 import { CodeEditor } from "./code-editor";
 
+// The engine now loads via a dynamic `import("monaco-editor")` inside the
+// mount effect (kept lazy so the barrel never evaluates Monaco just for
+// `CopyButton`/`EDITOR_LANGUAGES` — see barrel-monaco-lazy.test.ts). The mock
+// module still resolves through that dynamic import, but only after a
+// microtask: flush it with `await act(async () => {})` after every
+// render/rerender that expects the editor to already exist.
+const flush = () => act(async () => {});
+
 beforeEach(() => {
   h.state.changeHandler = undefined;
   h.state.value = "";
+  h.models.length = 0;
   vi.clearAllMocks();
 });
 afterEach(cleanup);
 
 describe("CodeEditor", () => {
-  it("creates a Monaco editor with the initial value + language", () => {
+  it("creates a Monaco editor with the initial value + language", async () => {
     const { getByTestId } = render(
       <CodeEditor defaultValue="const a = 1;" language="typescript" />,
     );
     expect(getByTestId("code-editor")).toBeInTheDocument();
+    await flush();
     expect(h.create).toHaveBeenCalledTimes(1);
     // No `path` → no model URI.
     expect(h.createModel).toHaveBeenCalledWith("const a = 1;", "typescript", undefined);
   });
 
-  it("creates the model with a URI derived from `path`", () => {
+  it("creates the model with a URI derived from `path`", async () => {
     render(<CodeEditor defaultValue="x" language="json" path="config/app.json" />);
+    await flush();
     expect(h.createModel).toHaveBeenCalledWith("x", "json", {
       toString: expect.any(Function),
     });
   });
 
-  it("forwards content edits to onChange", () => {
+  it("forwards content edits to onChange", async () => {
     const onChange = vi.fn();
     render(<CodeEditor defaultValue="" onChange={onChange} />);
+    await flush();
     expect(h.state.changeHandler).toBeTypeOf("function");
     act(() => {
       h.state.value = "typed";
@@ -86,32 +142,35 @@ describe("CodeEditor", () => {
     expect(onChange).toHaveBeenCalledWith("typed");
   });
 
-  it("disposes the editor + model on unmount", () => {
+  it("disposes the editor + model on unmount", async () => {
     const { unmount } = render(<CodeEditor defaultValue="x" />);
+    await flush();
     unmount();
     expect(h.editor.dispose).toHaveBeenCalledTimes(1);
-    expect(h.model.dispose).toHaveBeenCalledTimes(1);
+    expect(h.model!.dispose).toHaveBeenCalledTimes(1);
   });
 
   describe("actions prop", () => {
-    it("calls addAction once per descriptor on mount", () => {
+    it("calls addAction once per descriptor on mount", async () => {
       const actions = [
         { id: "test.one", label: "One", run: vi.fn() },
         { id: "test.two", label: "Two", run: vi.fn() },
       ];
       render(<CodeEditor defaultValue="" actions={actions} />);
+      await flush();
       expect(h.editor.addAction).toHaveBeenCalledTimes(2);
       expect(h.editor.addAction).toHaveBeenCalledWith(actions[0]);
       expect(h.editor.addAction).toHaveBeenCalledWith(actions[1]);
     });
 
-    it("disposes old disposables and re-adds when the actions array identity changes", () => {
+    it("disposes old disposables and re-adds when the actions array identity changes", async () => {
       const actionsV1 = [{ id: "test.a", label: "A", run: vi.fn() }];
       const actionsV2 = [
         { id: "test.a", label: "A", run: vi.fn() },
         { id: "test.b", label: "B", run: vi.fn() },
       ];
       const { rerender } = render(<CodeEditor defaultValue="" actions={actionsV1} />);
+      await flush();
       expect(h.editor.addAction).toHaveBeenCalledTimes(1);
 
       rerender(<CodeEditor defaultValue="" actions={actionsV2} />);
@@ -120,15 +179,83 @@ describe("CodeEditor", () => {
       expect(h.editor.addAction).toHaveBeenCalledTimes(3); // 1 + 2
     });
 
-    it("disposes all action disposables on unmount", () => {
+    it("disposes all action disposables on unmount", async () => {
       const actions = [
         { id: "test.x", label: "X", run: vi.fn() },
         { id: "test.y", label: "Y", run: vi.fn() },
       ];
       const { unmount } = render(<CodeEditor defaultValue="" actions={actions} />);
+      await flush();
       expect(h.editor.addAction).toHaveBeenCalledTimes(2);
       unmount();
       expect(h.actionDisposable.dispose).toHaveBeenCalledTimes(2);
     });
   });
+
+  describe("path changes after mount", () => {
+    it("swaps the model instead of ignoring the new path (Monaco has no URI setter)", async () => {
+      const { rerender } = render(
+        <CodeEditor defaultValue="x" path="a.ts" language="typescript" />,
+      );
+      await flush();
+      expect(h.createModel).toHaveBeenCalledTimes(1);
+      const firstModel = h.models[0]!;
+
+      rerender(<CodeEditor defaultValue="x" path="b.ts" language="typescript" />);
+
+      expect(h.createModel).toHaveBeenCalledTimes(2);
+      expect(h.editor.setModel).toHaveBeenCalledWith(h.models[1]);
+      expect(firstModel.dispose).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not rebuild the model when path is unchanged across a re-render", async () => {
+      const { rerender } = render(<CodeEditor defaultValue="x" path="a.ts" />);
+      await flush();
+      expect(h.createModel).toHaveBeenCalledTimes(1);
+
+      rerender(<CodeEditor defaultValue="x" path="a.ts" ariaLabel="renamed" />);
+
+      expect(h.createModel).toHaveBeenCalledTimes(1);
+      expect(h.editor.setModel).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("controlled value sync", () => {
+    it("applies a single-character change via executeEdits, never setValue", async () => {
+      const { rerender } = render(<CodeEditor value="abc" onChange={vi.fn()} />);
+      await flush();
+      expect(h.state.value).toBe("abc");
+
+      rerender(<CodeEditor value="abd" onChange={vi.fn()} />);
+
+      expect(h.editor.executeEdits).toHaveBeenCalledTimes(1);
+      expect(h.editor.setValue).not.toHaveBeenCalled();
+      expect(h.state.value).toBe("abd");
+    });
+
+    it("does nothing when the controlled value already matches the model", async () => {
+      render(<CodeEditor value="same" onChange={vi.fn()} />);
+      await flush();
+      h.editor.executeEdits.mockClear();
+
+      render(<CodeEditor value="same" onChange={vi.fn()} />);
+      await flush();
+
+      expect(h.editor.executeEdits).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("options changes after mount", () => {
+    it("re-applies a changed `options` prop via updateOptions", async () => {
+      const { rerender } = render(
+        <CodeEditor defaultValue="" options={{ minimap: { enabled: false } }} />,
+      );
+      await flush();
+      h.editor.updateOptions.mockClear();
+
+      rerender(<CodeEditor defaultValue="" options={{ minimap: { enabled: true } }} />);
+
+      expect(h.editor.updateOptions).toHaveBeenCalledWith({ minimap: { enabled: true } });
+    });
+  });
 });