@elabs-ai/components-editor 4.0.0 → 4.2.0

package/src/markdown-editor/milkdown-react/use-get-editor.ts

@@ -9,6 +9,16 @@
  * settles), so the double-mount converges to a single editor. The co-located
  * `markdown-editor.strictmode.test.tsx` is the gate that proves that convergence
  * for our vendored copy; harden here only if that test ever shows >1 surface.
+ *
+ * DESTROY gets the same rigor (issue #65). Effect cleanup fires
+ * `editor.destroy()` but nothing awaited it, and `@milkdown/ctx` schedules its
+ * own internal async cleanup (a timer) inside that promise — so an unmount that
+ * doesn't wait can let the timer fire after Vitest has already recycled the
+ * file's jsdom environment (`ReferenceError: removeEventListener is not
+ * defined`). `pendingDestroys` tracks every in-flight `destroy()`, and
+ * `waitForPendingMilkdownTeardown()` lets a caller — a test's `afterEach`, or any
+ * consumer that cares — await "every Milkdown teardown has settled" the same way
+ * `create()` already converges before this effect resolves.
  */
 import { createContext, useContext, useEffect, useRef } from "react";
 
@@ -16,6 +26,25 @@ import type { EditorInfoCtx } from "./types";
 
 export const editorInfoContext = createContext<EditorInfoCtx>({} as EditorInfoCtx);
 
+/** Module-scoped registry of in-flight Milkdown `destroy()` promises. Not part
+ *  of the package's public API (not re-exported from `./index`) — reached by
+ *  relative import from tests/consumers that specifically need to await
+ *  teardown, mirroring how `editorInfoContext` itself stays internal. */
+const pendingDestroys = new Set<Promise<unknown>>();
+
+/** True while at least one Milkdown `destroy()` is still in flight. */
+export function hasPendingMilkdownTeardown(): boolean {
+  return pendingDestroys.size > 0;
+}
+
+/** Await every Milkdown `destroy()` currently in flight. Resolves immediately
+ *  when none are pending. Never rejects — `destroy()` already routes its own
+ *  failure through `console.error` (see the cleanup below), so a caller awaiting
+ *  teardown only needs "settled", not "succeeded". */
+export function waitForPendingMilkdownTeardown(): Promise<void> {
+  return Promise.all(pendingDestroys).then(() => undefined);
+}
+
 export function useGetEditor() {
   const {
     dom,
@@ -48,7 +77,14 @@ export function useGetEditor() {
       .catch(console.error);
 
     return () => {
-      editor.destroy().catch(console.error);
+      // `.catch(console.error)` means this promise itself never rejects, so
+      // it's safe to await via `Promise.all` in `waitForPendingMilkdownTeardown`
+      // without a stray unhandled rejection.
+      const destroyPromise = editor.destroy().catch(console.error);
+      pendingDestroys.add(destroyPromise);
+      void destroyPromise.finally(() => {
+        pendingDestroys.delete(destroyPromise);
+      });
     };
   }, [dom, editorRef, getEditor, setLoading]);
 

package/src/markdown-editor/paste-embed.ts

@@ -123,8 +123,9 @@ function makeErrorChip(message: string): HTMLElement {
   chip.setAttribute("role", "alert");
   chip.setAttribute("aria-live", "assertive");
   chip.setAttribute("title", message);
+  // #124: the chip's own "Upload failed" label is running text — ink rung.
   chip.className =
-    "inline-flex items-center gap-1 rounded px-2 py-0.5 text-caption bg-destructive/10 text-destructive " +
+    "inline-flex items-center gap-1 rounded px-2 py-0.5 text-caption bg-destructive/10 text-destructive-text " +
     "border border-destructive/30 select-none";
 
   const label = document.createElement("span");

package/src/markdown-editor/slash/slash-menu.stories.tsx

@@ -14,19 +14,22 @@ import { SlashMenu } from "./slash-menu";
  * `MarkdownWorkspace` (default `true`).
  *
  * The popup itself is rendered here standalone (the `SlashMenu` stories) so its
- * branding + a11y can be verified directly across all three themes; the in-editor
+ * branding + a11y can be verified directly across every theme; the in-editor
  * stories exercise the integration (mount + the `slashMenu={false}` no-op). The
  * live keyboard/insert UX is best verified in a real browser — ProseMirror
  * keystroke dispatch can't be fully simulated in jsdom.
  */
 const meta = {
-  title: "Editor/MarkdownEditor/Slash menu",
+  title: "Editor/MarkdownEditor/SlashMenu",
   component: SlashMenu,
   tags: ["autodocs"],
   parameters: {
     docs: {
       description: {
         component:
+          "The EDITOR slash menu, which inserts ProseMirror nodes; a chat composer uses " +
+          "`AI/Composer/PromptInputSlash` and a console composer `Terminal/TerminalSlashMenu` — see " +
+          "[Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). " +
           "Branded `/` command menu for the WYSIWYG editor. Inserts brand `:::` " +
           "directives + basic blocks at the caret. Token-driven `listbox`/`option` " +
           "list; the editor `textbox` owns `aria-activedescendant`.",
@@ -92,7 +95,9 @@ export const Empty: Story = {
   ),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await expect(canvas.getByText("No matching blocks")).toBeVisible();
+    // A `role="option"` (not a bare div), so it's reachable via an
+    // assistive-tech query and stays inside the listbox contract (#157).
+    await expect(canvas.getByRole("option", { name: "No matching blocks" })).toBeVisible();
   },
 };
 

package/src/markdown-editor/slash/slash-menu.test.tsx

@@ -0,0 +1,27 @@
+/**
+ * Locking test for #157 (site 1): `SlashMenu`'s empty state used to be a bare
+ * `<div>` inside `role="listbox"` — not `option`/`group`, so a user who types
+ * a query matching nothing got silence (axe `aria-required-children`).
+ */
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import { SlashMenu } from "./slash-menu";
+
+describe("SlashMenu — empty state a11y (#157)", () => {
+  it("announces the no-match message as a disabled option, not a bare div", () => {
+    render(<SlashMenu commands={[]} onSelect={() => {}} emptyLabel="No matching blocks" />);
+
+    const listbox = screen.getByRole("listbox", { name: "Insert block" });
+    // Reachable via an assistive-tech query, not only present in the DOM.
+    const empty = screen.getByRole("option", { name: "No matching blocks" });
+    expect(listbox).toContainElement(empty);
+    expect(empty).toHaveAttribute("aria-disabled", "true");
+
+    // Every direct child of the listbox is an `option` or `group` — never a
+    // bare, roleless element.
+    for (const child of Array.from(listbox.children)) {
+      expect(["option", "group"]).toContain(child.getAttribute("role"));
+    }
+  });
+});

package/src/markdown-editor/slash/slash-menu.tsx

@@ -14,6 +14,7 @@
  * Semantic tokens only; matches the `Command` popover look (bg-popover, accent
  * selection, muted group headings).
  */
+import { useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { forwardRef, type HTMLAttributes } from "react";
 
@@ -43,12 +44,14 @@ export const SlashMenu = forwardRef<HTMLDivElement, SlashMenuProps>(function Sla
     activeId,
     onSelect,
     idPrefix = "brand-slash",
-    emptyLabel = "No matching blocks",
+    emptyLabel: emptyLabelProp,
     className,
     ...props
   },
   ref,
 ) {
+  const { t } = useLocale();
+  const emptyLabel = emptyLabelProp ?? t("editor.slashMenu.noMatchingBlocks");
   const groups = groupSlashCommands(commands);
 
   return (
@@ -57,7 +60,7 @@ export const SlashMenu = forwardRef<HTMLDivElement, SlashMenuProps>(function Sla
       // The editor surface carries `role="textbox"`; this list is its popup. The
       // plugin sets `aria-controls`/`aria-activedescendant` on the textbox.
       role="listbox"
-      aria-label="Insert block"
+      aria-label={t("editor.slashMenu.insertBlock")}
       className={cn(
         "max-h-[min(320px,60vh)] w-72 overflow-y-auto overflow-x-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md",
         className,
@@ -65,7 +68,19 @@ export const SlashMenu = forwardRef<HTMLDivElement, SlashMenuProps>(function Sla
       {...props}
     >
       {commands.length === 0 ? (
-        <div className="px-2 py-6 text-center text-caption text-muted-foreground">{emptyLabel}</div>
+        // A `role="listbox"` may only own `option`/`group` children (WCAG 1.3.1,
+        // #157): a bare `<div>` here is an unannounced, dangling message — an
+        // AT user who types a query matching nothing gets silence. Shaping it
+        // as a disabled, unselectable option keeps the listbox contract AND
+        // makes the message reachable by an accessible-name query.
+        <div
+          role="option"
+          aria-disabled="true"
+          aria-selected="false"
+          className="cursor-default select-none px-2 py-6 text-center text-caption text-muted-foreground"
+        >
+          {emptyLabel}
+        </div>
       ) : (
         groups.map(({ group, commands: groupCommands }) => (
           <div key={group} role="group" aria-label={group} className="overflow-hidden p-1">

package/src/markdown-editor/table-view.tsx

@@ -42,6 +42,7 @@ import { Plugin, PluginKey } from "@milkdown/kit/prose/state";
 import type { EditorView } from "@milkdown/kit/prose/view";
 import { $prose } from "@milkdown/kit/utils";
 import { isInTable } from "@milkdown/kit/prose/tables";
+import { useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { usePluginViewContext } from "@prosemirror-adapter/react";
 import type { usePluginViewFactory } from "@prosemirror-adapter/react";
@@ -109,10 +110,11 @@ function ToolbarButton({
       className={cn(
         "inline-flex h-7 items-center gap-1 rounded px-2 text-caption font-medium",
         "border border-border-strong",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "focus-ring",
         "transition-colors duration-fast ease-standard motion-reduce:transition-none",
+        // #124: the button's LABEL text, not a mark — ink rung.
         variant === "destructive"
-          ? "bg-background text-destructive hover:bg-destructive/10"
+          ? "bg-background text-destructive-text hover:bg-destructive/10"
           : "bg-background text-foreground hover:bg-surface-muted",
       )}
     >
@@ -136,39 +138,49 @@ function ToolbarDivider() {
  */
 function TableControlsView() {
   const { view } = usePluginViewContext();
+  const { t } = useLocale();
   const inTable = isInTable(view.state);
   const run = (key: Parameters<typeof dispatchCommand>[1]) => () => dispatchCommand(view, key);
 
   if (!inTable) return null;
 
+  const addRowAbove = t("editor.tableView.addRowAbove");
+  const addRowBelow = t("editor.tableView.addRowBelow");
+  const deleteRow = t("editor.tableView.deleteRow");
+  const addColLeft = t("editor.tableView.addColumnLeft");
+  const addColRight = t("editor.tableView.addColumnRight");
+  const deleteCol = t("editor.tableView.deleteColumn");
+
   return (
     <div
       role="toolbar"
-      aria-label="Table controls"
+      aria-label={t("editor.tableView.tableControls")}
       className={cn(
         "flex flex-wrap items-center gap-1 px-2 py-1.5",
         "border-t border-border-strong bg-surface-muted",
       )}
     >
       {/* Row group */}
-      <span className="mr-1 select-none text-caption text-muted-foreground">Row</span>
+      <span className="mr-1 select-none text-caption text-muted-foreground">
+        {t("editor.tableView.row")}
+      </span>
       <ToolbarButton
-        ariaLabel="Add row above"
-        title="Add row above"
+        ariaLabel={addRowAbove}
+        title={addRowAbove}
         onClick={run(addRowBeforeCommand.key)}
       >
         ↑+
       </ToolbarButton>
       <ToolbarButton
-        ariaLabel="Add row below"
-        title="Add row below"
+        ariaLabel={addRowBelow}
+        title={addRowBelow}
         onClick={run(addRowAfterCommand.key)}
       >
         ↓+
       </ToolbarButton>
       <ToolbarButton
-        ariaLabel="Delete row"
-        title="Delete row"
+        ariaLabel={deleteRow}
+        title={deleteRow}
         variant="destructive"
         onClick={run(deleteSelectedCellsCommand.key)}
       >
@@ -178,24 +190,26 @@ function TableControlsView() {
       <ToolbarDivider />
 
       {/* Column group */}
-      <span className="mr-1 select-none text-caption text-muted-foreground">Col</span>
+      <span className="mr-1 select-none text-caption text-muted-foreground">
+        {t("editor.tableView.col")}
+      </span>
       <ToolbarButton
-        ariaLabel="Add column left"
-        title="Add column left"
+        ariaLabel={addColLeft}
+        title={addColLeft}
         onClick={run(addColBeforeCommand.key)}
       >
         ←+
       </ToolbarButton>
       <ToolbarButton
-        ariaLabel="Add column right"
-        title="Add column right"
+        ariaLabel={addColRight}
+        title={addColRight}
         onClick={run(addColAfterCommand.key)}
       >
         →+
       </ToolbarButton>
       <ToolbarButton
-        ariaLabel="Delete column"
-        title="Delete column"
+        ariaLabel={deleteCol}
+        title={deleteCol}
         variant="destructive"
         onClick={run(deleteSelectedCellsCommand.key)}
       >

package/src/markdown-iteration/iteration-builder-dialog.stories.tsx

@@ -1,7 +1,7 @@
 import { Button } from "@elabs-ai/components-ui";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
-import { expect, userEvent, within } from "storybook/test";
+import { expect, userEvent, waitFor, within } from "storybook/test";
 
 import { IterationBuilderDialog } from "./iteration-builder-dialog";
 import type { IterationBuilderValue } from "./iteration-builder";
@@ -41,6 +41,32 @@ const room = (child: HTMLElement, box: HTMLElement) => {
   };
 };
 
+/**
+ * Presence is not visibility. `findByText` resolves the instant the node lands in
+ * the DOM — which is INSIDE the dialog's enter animation (`data-[state=open]:animate-in
+ * fade-in-0 zoom-in-95` on `DialogContent`), so the query can hand back an element
+ * still holding that animation's start value, `opacity: 0`. A one-shot
+ * `toBeVisible()` on the node the query just returned then fails.
+ *
+ * Reduced motion does NOT remove that window: the token backstop in `themes.css`
+ * (`@media (prefers-reduced-motion: reduce)`) clamps every animation to `0.01ms`,
+ * it does not cancel it — and by taking the enter animation's real duration out of
+ * the way it makes the play function reach the assertion sooner. That is why these
+ * stories only started failing in CI once the browser context asked for reduced
+ * motion (`apps/docs/vitest.config.ts`); the two stories below that already waited
+ * for the settled state kept passing in the same run.
+ *
+ * (The failure PRINTS as an empty element — `<th scope="col" />`. That is jest-dom's
+ * formatting, not the DOM: `toBeVisible` reports `element.cloneNode(false)`, a
+ * shallow clone, so children are never shown. The element was populated.)
+ *
+ * So assert the SETTLED end state: re-query inside `waitFor` and re-check visibility
+ * until it holds. Not a timeout bump — a stale node can never be asserted, and the
+ * text still has to become visible for the story to pass.
+ */
+const expectVisibleText = (scope: HTMLElement, text: string) =>
+  waitFor(() => expect(within(scope).getByText(text)).toBeVisible(), { timeout: 8000 });
+
 const meta = {
   title: "Editor/Iteration/BuilderDialog",
   component: IterationBuilderDialog,
@@ -105,14 +131,12 @@ export const PivotBuilder: Story = {
     // Each value string renders TWICE — once as a TagInput chip in the left
     // column, once in the live preview — so scope queries to the preview region
     // (the confirming pattern from PivotWithCalc / WithNestedCard below).
-    const preview = within(
-      await d.findByRole("region", { name: /live preview/i }, { timeout: 8000 }),
-    );
+    const preview = await d.findByRole("region", { name: /live preview/i }, { timeout: 8000 });
     // The live preview renders a populated matrix from the embedded value lists:
     // axis headers + an interpolated cell.
-    await expect(await preview.findByText("North", {}, { timeout: 8000 })).toBeVisible();
-    await expect(preview.getByText("Q1")).toBeVisible();
-    await expect(preview.getByText("Q1 · North")).toBeVisible();
+    await expectVisibleText(preview, "North");
+    await expectVisibleText(preview, "Q1");
+    await expectVisibleText(preview, "Q1 · North");
   },
 };
 
@@ -149,13 +173,24 @@ export const IterateBuilder: Story = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole("button", { name: /Edit iteration/i }));
     const dialog = await within(document.body).findByRole("dialog", {}, { timeout: 12000 });
+    // The per-cell template field is a Monaco editor (`MarkdownWorkspace`
+    // defaultMode="source"). axe scans whatever is in the DOM the instant it
+    // runs, so a scan that races Monaco's first paint can measure a token span
+    // before its (AA-clamped) syntax color has actually been applied — wait for
+    // a real rendered token span first (#88).
+    await waitFor(
+      () => expect(dialog.querySelector('.view-line span[class*="mtk"]')).toBeTruthy(),
+      { timeout: 8000 },
+    );
     // "Alice" renders TWICE — as a TagInput chip AND in the live preview — so
     // scope to the preview region (mirrors the PivotBuilder fix above).
-    const preview = within(
-      await within(dialog).findByRole("region", { name: /live preview/i }, { timeout: 8000 }),
+    const preview = await within(dialog).findByRole(
+      "region",
+      { name: /live preview/i },
+      { timeout: 8000 },
     );
     // The live preview renders one cell per embedded value.
-    await expect(await preview.findByText("Alice", {}, { timeout: 8000 })).toBeVisible();
+    await expectVisibleText(preview, "Alice");
 
     // #425 acceptance criterion: this dialog's `Bind name` field sits directly
     // against the (now real) `DialogBody` scrollport as its first child — the
@@ -244,12 +279,13 @@ export const WithNestedCard: Story = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole("button", { name: /Edit iteration with card/i }));
     const dialog = await within(document.body).findByRole("dialog", {}, { timeout: 12000 });
-    const d = within(dialog);
-    // The nested card rendered as a real component (title + body interpolated)...
-    await expect(await d.findByText("Lead engineer for Ada", {}, { timeout: 8000 })).toBeVisible();
+    // The nested card rendered as a real component (title + body interpolated) —
+    // waited out through `expectVisibleText` (see its note: presence ≠ visibility
+    // while the dialog's enter animation is on its first frame)...
+    await expectVisibleText(dialog, "Lead engineer for Ada");
     // ...and the content AFTER it survived (dropped before the fence-collision fix).
-    await expect(d.getByText("Notes for Ada")).toBeVisible();
-    await expect(d.getByText("Notes for Grace")).toBeVisible();
+    await expectVisibleText(dialog, "Notes for Ada");
+    await expectVisibleText(dialog, "Notes for Grace");
   },
 };
 
@@ -284,10 +320,12 @@ export const BentoBuilder: Story = {
     const dialog = await within(document.body).findByRole("dialog", {}, { timeout: 12000 });
     // "Alpha"/"Epsilon" render TWICE — as TagInput chips AND in the live
     // preview's BentoGrid tiles — so scope to the preview region.
-    const preview = within(
-      await within(dialog).findByRole("region", { name: /live preview/i }, { timeout: 8000 }),
+    const preview = await within(dialog).findByRole(
+      "region",
+      { name: /live preview/i },
+      { timeout: 8000 },
     );
-    await expect(await preview.findByText("Alpha", {}, { timeout: 8000 })).toBeVisible();
-    await expect(preview.getByText("Epsilon")).toBeVisible();
+    await expectVisibleText(preview, "Alpha");
+    await expectVisibleText(preview, "Epsilon");
   },
 };

package/src/markdown-iteration/iteration-builder-dialog.tsx

@@ -28,6 +28,7 @@ import {
   TagInput,
   ToggleGroup,
   ToggleGroupItem,
+  useLocale,
 } from "@elabs-ai/components-ui";
 import { useEffect, useId, useMemo, useState, type ReactNode } from "react";
 
@@ -79,6 +80,7 @@ export function IterationBuilderDialog({
   evaluate,
   interpolate,
 }: IterationBuilderDialogProps) {
+  const { t } = useLocale();
   const kind = value?.kind ?? kindProp;
   const isPivot = kind === "pivot";
   const ids = useId();
@@ -130,19 +132,26 @@ export function IterationBuilderDialog({
     onOpenChange(false);
   };
 
-  const noun = isPivot ? "pivot" : "iteration";
+  const noun = isPivot
+    ? t("editor.iterationBuilder.pivotNoun")
+    : t("editor.iterationBuilder.iterationNoun");
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="flex max-h-[88vh] w-[min(56rem,94vw)] max-w-none flex-col">
         <DialogHeader>
           <DialogTitle>
-            {value ? "Edit" : "Insert"} {noun}
+            {t(
+              value ? "editor.iterationBuilder.editTitle" : "editor.iterationBuilder.insertTitle",
+              {
+                noun,
+              },
+            )}
           </DialogTitle>
           <DialogDescription>
             {isPivot
-              ? "Pick the row and column values, then write the per-cell template. The matrix below fills in live."
-              : "Add the list values, then write the per-row template. The result below fills in live."}
+              ? t("editor.iterationBuilder.pivotDescription")
+              : t("editor.iterationBuilder.iterationDescription")}
           </DialogDescription>
         </DialogHeader>
 
@@ -151,47 +160,53 @@ export function IterationBuilderDialog({
           <div className="flex min-w-0 flex-col gap-4">
             {!isPivot ? (
               <div className="flex flex-col gap-1.5">
-                <Label htmlFor={`${ids}-as`}>Bind name</Label>
+                <Label htmlFor={`${ids}-as`}>{t("editor.iterationBuilder.bindName")}</Label>
                 <Input
                   id={`${ids}-as`}
                   value={asName}
                   spellCheck={false}
                   autoComplete="off"
-                  placeholder="item"
+                  placeholder={t("editor.iterationBuilder.bindNamePlaceholder")}
                   onChange={(e) => setAsName(e.target.value)}
                 />
                 <p className="text-meta text-muted-foreground">
-                  Use <code>{`{{${asName.trim() || "item"}.name}}`}</code> in the template.
+                  {t("editor.iterationBuilder.bindNameHintPrefix")}
+                  <code>{`{{${asName.trim() || "item"}.name}}`}</code>
+                  {t("editor.iterationBuilder.bindNameHintSuffix")}
                 </p>
               </div>
             ) : null}
 
             <div className="flex flex-col gap-1.5">
-              <Label htmlFor={`${ids}-values`}>{isPivot ? "Row values" : "Values"}</Label>
+              <Label htmlFor={`${ids}-values`}>
+                {isPivot
+                  ? t("editor.iterationBuilder.rowValues")
+                  : t("editor.iterationBuilder.values")}
+              </Label>
               <TagInput
                 id={`${ids}-values`}
                 value={values}
                 onValueChange={setValues}
                 delimiter={[",", "\n"]}
-                placeholder="Type a value, press Enter…"
+                placeholder={t("editor.iterationBuilder.valuePlaceholder")}
               />
             </div>
 
             {isPivot ? (
               <div className="flex flex-col gap-1.5">
-                <Label htmlFor={`${ids}-cols`}>Column values</Label>
+                <Label htmlFor={`${ids}-cols`}>{t("editor.iterationBuilder.columnValues")}</Label>
                 <TagInput
                   id={`${ids}-cols`}
                   value={cols}
                   onValueChange={setCols}
                   delimiter={[",", "\n"]}
-                  placeholder="Type a value, press Enter…"
+                  placeholder={t("editor.iterationBuilder.valuePlaceholder")}
                 />
               </div>
             ) : null}
 
             <div className="flex flex-col gap-1.5">
-              <Label id={`${ids}-layout`}>Layout</Label>
+              <Label id={`${ids}-layout`}>{t("editor.iterationBuilder.layout")}</Label>
               <ToggleGroup
                 type="single"
                 variant="segmented"
@@ -216,23 +231,27 @@ export function IterationBuilderDialog({
           {/* Right column — the per-cell TEMPLATE + the live populated preview. */}
           <div className="flex min-h-0 min-w-0 flex-col gap-4">
             <div className="flex min-h-0 flex-col gap-1.5">
-              <Label>Per-{isPivot ? "cell" : "row"} template</Label>
+              <Label>
+                {isPivot
+                  ? t("editor.iterationBuilder.perCellTemplate")
+                  : t("editor.iterationBuilder.perRowTemplate")}
+              </Label>
               <div className="h-44 min-h-0 overflow-hidden rounded-md border border-border">
                 <MarkdownWorkspace
                   value={template}
                   onChange={setTemplate}
                   defaultMode="source"
                   className="h-full"
-                  aria-label="Per-cell template"
+                  aria-label={t("editor.iterationBuilder.perCellTemplate")}
                 />
               </div>
             </div>
 
             <div className="flex min-h-0 flex-col gap-1.5">
-              <Label>Live preview</Label>
+              <Label>{t("editor.iterationBuilder.livePreview")}</Label>
               <div
                 role="region"
-                aria-label="Live preview"
+                aria-label={t("editor.iterationBuilder.livePreview")}
                 className="min-h-0 flex-1 overflow-auto rounded-md border border-border bg-card p-3"
               >
                 <MarkdownPreview
@@ -249,9 +268,11 @@ export function IterationBuilderDialog({
 
         <DialogFooter>
           <Button variant="ghost" onClick={() => onOpenChange(false)}>
-            Cancel
+            {t("editor.iterationBuilder.cancel")}
+          </Button>
+          <Button onClick={save}>
+            {value ? t("editor.iterationBuilder.save") : t("editor.iterationBuilder.insert")}
           </Button>
-          <Button onClick={save}>{value ? "Save" : "Insert"}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

package/src/markdown-iteration/template-dialog.tsx

@@ -18,6 +18,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  useLocale,
 } from "@elabs-ai/components-ui";
 import { useEffect, useState, type ReactNode } from "react";
 
@@ -47,6 +48,7 @@ export function IterationTemplateDialog({
   kind = "iterate",
   mode = "split",
 }: IterationTemplateDialogProps) {
+  const { t } = useLocale();
   const [draft, setDraft] = useState(template);
 
   // Re-seed the draft whenever the dialog (re)opens against a new template.
@@ -63,12 +65,28 @@ export function IterationTemplateDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="flex max-h-[85vh] w-[min(48rem,92vw)] max-w-none flex-col">
+      <DialogContent
+        className="flex max-h-[85vh] w-[min(48rem,92vw)] max-w-none flex-col"
+        // Radix autofocuses the first tabbable element — the toolbar's Bold button —
+        // and its Tooltip opens on focus, so the dialog opened with a stray tooltip.
+        // Focus the dialog itself instead; Tab still reaches the toolbar first.
+        onOpenAutoFocus={(event) => {
+          event.preventDefault();
+          (event.currentTarget as HTMLElement | null)?.focus();
+        }}
+      >
         <DialogHeader>
-          <DialogTitle>Edit {kind === "pivot" ? "pivot" : "iteration"} template</DialogTitle>
+          <DialogTitle>
+            {kind === "pivot"
+              ? t("editor.templateDialog.editPivotTitle")
+              : t("editor.templateDialog.editIterationTitle")}
+          </DialogTitle>
           <DialogDescription>
-            The per-{unit} template. Use <code>{"{{token}}"}</code> placeholders (e.g.{" "}
-            <code>{"{{item.name}}"}</code>) — each is filled per {unit} when the block renders.
+            {t("editor.templateDialog.descriptionPrefix", { unit })}
+            <code>{"{{token}}"}</code>
+            {t("editor.templateDialog.descriptionMiddle")}
+            <code>{"{{item.name}}"}</code>
+            {t("editor.templateDialog.descriptionSuffix", { unit })}
           </DialogDescription>
         </DialogHeader>
         <div className="min-h-0 flex-1">
@@ -77,14 +95,14 @@ export function IterationTemplateDialog({
             onChange={setDraft}
             defaultMode={mode}
             className="h-full"
-            aria-label="Iteration template editor"
+            aria-label={t("editor.templateDialog.editorLabel")}
           />
         </div>
         <DialogFooter>
           <Button variant="ghost" onClick={() => onOpenChange(false)}>
-            Cancel
+            {t("editor.templateDialog.cancel")}
           </Button>
-          <Button onClick={save}>Save template</Button>
+          <Button onClick={save}>{t("editor.templateDialog.saveTemplate")}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>