@elabs-ai/components-editor 4.0.0 → 4.2.0

package/dist/{chunk-LBC5VJBD.js → chunk-FO5S3YZM.js}

@@ -11,12 +11,12 @@ import {
 } from "@elabs-ai/components-ui";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-function EditorContextMenu({ editor: editor2, readOnly = false, children }) {
+function EditorContextMenu({ editor, readOnly = false, children }) {
   const selection = () => {
-    if (!editor2) return null;
-    const model = editor2.getModel();
-    const sel = editor2.getSelection();
-    return model && sel ? { editor: editor2, model, sel } : null;
+    if (!editor) return null;
+    const model = editor.getModel();
+    const sel = editor.getSelection();
+    return model && sel ? { editor, model, sel } : null;
   };
   const copy = async () => {
     const ctx2 = selection();
@@ -51,8 +51,8 @@ function EditorContextMenu({ editor: editor2, readOnly = false, children }) {
     ctx2.editor.focus();
   };
   const runAction = (id) => {
-    editor2?.focus();
-    void editor2?.getAction(id)?.run();
+    editor?.focus();
+    void editor?.getAction(id)?.run();
   };
   return /* @__PURE__ */ jsxs(ContextMenu, { children: [
     /* @__PURE__ */ jsx(ContextMenuTrigger, { asChild: true, children }),
@@ -130,6 +130,7 @@ function withAlpha(hex, alpha) {
   const base = hex.slice(0, 7);
   return `${base}${byte(Math.round(clamp01(alpha) * 255))}`;
 }
+var LINE_HIGHLIGHT_ALPHA = 0.05;
 function bare(hex) {
   return hex.replace("#", "").slice(0, 6).padEnd(6, "0");
 }
@@ -146,6 +147,13 @@ function contrast(a, b) {
   const lb = luminance(b);
   return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
 }
+function flattenOver(overlayHexWithAlpha, groundHex) {
+  const overlayBase = overlayHexWithAlpha.slice(0, 7);
+  const alphaHex = overlayHexWithAlpha.length >= 9 ? overlayHexWithAlpha.slice(7, 9) : "ff";
+  const alpha = clamp01((parseInt(alphaHex, 16) || 0) / 255);
+  const blend = (i) => Math.round(channel(overlayBase, i) * alpha + channel(groundHex, i) * (1 - alpha));
+  return `#${byte(blend(0))}${byte(blend(1))}${byte(blend(2))}`;
+}
 function mixHex(hex, target, t) {
   const lerp = (i) => Math.round(channel(hex, i) + (channel(target, i) - channel(hex, i)) * t);
   return `#${byte(lerp(0))}${byte(lerp(1))}${byte(lerp(2))}`;
@@ -174,6 +182,8 @@ function buildBrandThemeData(rootEl) {
   const border = read("--border", muted);
   const primary = read("--primary", foreground);
   const ring = read("--ring", primary);
+  const ringContour = read("--ring-contour", ring);
+  const focusBorder = contrast(ringContour, background) > contrast(ring, background) ? ringContour : ring;
   const popover = read("--popover", background);
   const popoverFg = read("--popover-foreground", foreground);
   const input = read("--input", border);
@@ -183,7 +193,9 @@ function buildBrandThemeData(rootEl) {
   const chart4 = read("--chart-4", primary);
   const success = read("--success", chart2);
   const destructive = read("--destructive", "#ff0000");
-  const calcResult = ensureReadable(read("--calc-result", primary), background, 4.5);
+  const lineHighlight = withAlpha(foreground, LINE_HIGHLIGHT_ALPHA);
+  const tokenGround = flattenOver(lineHighlight, background);
+  const calcResult = ensureReadable(read("--calc-result", primary), tokenGround, 4.5);
   const colors = {
     "editor.background": background,
     "editor.foreground": foreground,
@@ -194,7 +206,7 @@ function buildBrandThemeData(rootEl) {
     "editor.selectionBackground": withAlpha(primary, 0.28),
     "editor.inactiveSelectionBackground": withAlpha(primary, 0.14),
     "editor.selectionHighlightBackground": withAlpha(primary, 0.14),
-    "editor.lineHighlightBackground": withAlpha(foreground, 0.05),
+    "editor.lineHighlightBackground": lineHighlight,
     "editor.lineHighlightBorder": "#00000000",
     "editorIndentGuide.background1": withAlpha(border, 0.6),
     "editorIndentGuide.activeBackground1": mutedFg,
@@ -220,7 +232,7 @@ function buildBrandThemeData(rootEl) {
     "input.background": input,
     "input.foreground": foreground,
     "input.border": border,
-    focusBorder: ring,
+    focusBorder,
     "dropdown.background": popover,
     "dropdown.foreground": popoverFg,
     "dropdown.border": border,
@@ -261,7 +273,8 @@ function buildBrandThemeData(rootEl) {
     "diffEditorOverview.removedForeground": withAlpha(destructive, 0.6),
     "diffEditor.border": border
   };
-  const ink = (hex, ratio = 4.5) => bare(ensureReadable(hex, background, ratio));
+  const AA_MARGIN = 0.15;
+  const ink = (hex, ratio = 4.5) => bare(ensureReadable(hex, tokenGround, ratio + AA_MARGIN));
   const rules = [
     { token: "", foreground: bare(foreground), background: bare(background) },
     { token: "comment", foreground: ink(mutedFg, 3.2), fontStyle: "italic" },
@@ -286,19 +299,73 @@ function buildBrandThemeData(rootEl) {
     { token: "string.key", foreground: ink(chart1) },
     { token: "string.value", foreground: ink(chart2) },
     { token: "invalid", foreground: ink(destructive) },
-    { token: "namespace", foreground: ink(success) }
+    { token: "namespace", foreground: ink(success) },
+    // Monaco's built-in `vs`/`vs-dark` bases (inherited at `inherit: true`,
+    // below) ship LANGUAGE-SUFFIXED rules — `string.key.json`,
+    // `string.value.json`, `keyword.json`, `string.yaml`, `delimiter.html`, …
+    // — and Monaco's token-theme trie resolves the DEEPEST matching scope
+    // (`ThemeTrieElement.match`), with rules sorted lexicographically before
+    // insertion. A shorter brand scope (e.g. `string.key`, above) can
+    // therefore NEVER override a longer base scope: every scope a base theme
+    // specialises must be re-declared here, or that language renders in
+    // stock VS colours (#90). Keep this list in sync with the base themes —
+    // `IGNORED_BASE_SCOPES` + the drift guard in `monaco-theme-bridge.test.ts`
+    // fail CI if a future `monaco-editor` upgrade adds a new one.
+    { token: "string.key.json", foreground: ink(chart1) },
+    // pairs with `key`
+    { token: "string.value.json", foreground: ink(chart2) },
+    // pairs with `string`
+    { token: "keyword.json", foreground: ink(primary) },
+    // pairs with `keyword`
+    // Closes the class, not just JSON — the same base-specialisation gap
+    // reaches YAML/HTML/SQL/XML/CSS/SCSS (#90 evidence #7).
+    { token: "string.html", foreground: ink(chart2) },
+    { token: "string.sql", foreground: ink(chart2) },
+    { token: "string.yaml", foreground: ink(chart2) },
+    { token: "delimiter.html", foreground: ink(mutedFg, 3.2) },
+    { token: "delimiter.xml", foreground: ink(mutedFg, 3.2) },
+    { token: "attribute.value.html", foreground: ink(chart2) },
+    { token: "attribute.value.xml", foreground: ink(chart2) },
+    { token: "attribute.value.number", foreground: ink(chart4) },
+    { token: "attribute.value.unit", foreground: ink(chart4) },
+    { token: "attribute.value.number.css", foreground: ink(chart4) },
+    { token: "attribute.value.unit.css", foreground: ink(chart4) },
+    { token: "attribute.value.hex.css", foreground: ink(chart4) },
+    { token: "number.hex", foreground: ink(chart4) },
+    { token: "keyword.flow", foreground: ink(primary) },
+    { token: "keyword.flow.scss", foreground: ink(primary) },
+    { token: "operator.scss", foreground: ink(primary) },
+    { token: "operator.sql", foreground: ink(primary) },
+    { token: "operator.swift", foreground: ink(primary) },
+    { token: "predefined.sql", foreground: ink(chart3) },
+    { token: "metatag", foreground: ink(chart3) },
+    { token: "metatag.html", foreground: ink(chart3) },
+    { token: "metatag.xml", foreground: ink(chart3) },
+    { token: "metatag.content.html", foreground: ink(chart3) },
+    { token: "meta.scss", foreground: ink(chart1) },
+    { token: "meta.tag", foreground: ink(chart1) },
+    // `CodeEditorProps.language` is a plain, unrestricted `string` passed
+    // straight to `monaco.editor.setModelLanguage` (`code-editor.tsx`) — NOT
+    // limited to `EDITOR_LANGUAGES` — so a consumer really can reach these
+    // pug/handlebars scopes (PR #119 review thread 2). See
+    // `IGNORED_BASE_SCOPES` below for the one scope that stays un-overridden.
+    { token: "tag.id.pug", foreground: ink(primary) },
+    // pairs with `tag`
+    { token: "tag.class.pug", foreground: ink(primary) },
+    { token: "variable.parameter", foreground: bare(foreground) }
+    // pairs with `variable`
   ];
   return { base: "vs", inherit: true, colors, rules };
 }
 function brandThemeId(theme) {
   return `brand-${theme}`;
 }
-function applyBrandTheme(monaco2, theme, rootEl) {
+function applyBrandTheme(monaco, theme, rootEl) {
   const id = brandThemeId(theme);
   const data = buildBrandThemeData(rootEl);
   data.base = builtinBase(rootEl);
-  monaco2.editor.defineTheme(id, data);
-  monaco2.editor.setTheme(id);
+  monaco.editor.defineTheme(id, data);
+  monaco.editor.setTheme(id);
   return id;
 }
 
@@ -335,7 +402,6 @@ function useDataTheme(target) {
 }
 
 // src/code-editor/code-editor.tsx
-import * as monaco from "monaco-editor";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import {
   forwardRef,
@@ -345,6 +411,20 @@ import {
   useState as useState2
 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
+function computeMinimalEdit(oldValue, newValue) {
+  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) };
+}
 var BASE_OPTIONS = {
   automaticLayout: true,
   minimap: { enabled: false },
@@ -376,70 +456,123 @@ var CodeEditor = forwardRef(function CodeEditor2({
   ...props
 }, ref) {
   const containerRef = useRef(null);
-  const [editor2, setEditor] = useState2(null);
+  const [editor, setEditor] = useState2(null);
   const { theme, revision } = useDataTheme();
+  const modelRef = useRef(null);
+  const monacoRef = useRef(null);
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
   const onMountRef = useRef(onMount);
   onMountRef.current = onMount;
-  useImperativeHandle(ref, () => editor2, [
-    editor2
+  useImperativeHandle(ref, () => editor, [
+    editor
   ]);
   useEffect2(() => {
     const container = containerRef.current;
     if (!container) return;
-    const model = monaco.editor.createModel(
-      value ?? defaultValue ?? "",
-      language,
-      path ? monaco.Uri.parse(`inmemory://brand/${path}`) : void 0
-    );
-    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 !== void 0 ? { ariaLabel } : null,
-      model,
-      ...options
-    });
-    const sub = instance.onDidChangeModelContent(() => {
-      onChangeRef.current?.(instance.getValue());
+    let cancelled = false;
+    let instance = null;
+    let model = null;
+    let sub = null;
+    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}`) : void 0
+      );
+      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 !== void 0 ? { ariaLabel } : null,
+        model,
+        ...options
+      });
+      sub = instance.onDidChangeModelContent(() => {
+        onChangeRef.current?.(instance.getValue());
+      });
+      const textarea = instance.getDomNode()?.querySelector("textarea");
+      if (textarea) {
+        if (ariaLabel !== void 0) textarea.setAttribute("aria-label", ariaLabel);
+        if (ariaInvalid !== void 0) textarea.setAttribute("aria-invalid", String(ariaInvalid));
+        if (ariaDescribedBy !== void 0)
+          textarea.setAttribute("aria-describedby", ariaDescribedBy);
+      }
+      setEditor(instance);
+      onMountRef.current?.(instance, monacoApi);
     });
-    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);
     };
   }, []);
   useEffect2(() => {
-    if (!editor2 || value === void 0) return;
-    if (value !== editor2.getValue()) editor2.setValue(value);
-  }, [editor2, 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() : void 0;
+    if (currentUri === nextUri) return;
+    const nextModel = monacoApi.editor.createModel(
+      current?.getValue() ?? value ?? defaultValue ?? "",
+      language,
+      path ? monacoApi.Uri.parse(`inmemory://brand/${path}`) : void 0
+    );
+    editor.setModel(nextModel);
+    modelRef.current = nextModel;
+    current?.dispose();
+  }, [editor, path]);
+  useEffect2(() => {
+    const monacoApi = monacoRef.current;
+    if (!editor || !monacoApi || value === void 0) 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]);
   useEffect2(() => {
-    const model = editor2?.getModel();
-    if (model) monaco.editor.setModelLanguage(model, language);
-  }, [editor2, language]);
+    const monacoApi = monacoRef.current;
+    const model = editor?.getModel();
+    if (model && monacoApi) monacoApi.editor.setModelLanguage(model, language);
+  }, [editor, language]);
   useEffect2(() => {
-    editor2?.updateOptions({ readOnly, contextmenu: contextMenu === "monaco" });
-  }, [editor2, readOnly, contextMenu]);
+    editor?.updateOptions({ readOnly, contextmenu: contextMenu === "monaco" });
+  }, [editor, readOnly, contextMenu]);
   useEffect2(() => {
-    if (!editor2) return;
+    if (!editor || !options) return;
+    editor.updateOptions(options);
+  }, [editor, options]);
+  useEffect2(() => {
+    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);
     }
-  }, [editor2, theme, revision]);
+  }, [editor, theme, revision]);
   useEffect2(() => {
-    if (!editor2) return;
-    if (ariaLabel !== void 0) editor2.updateOptions({ ariaLabel });
-    const textarea = editor2.getDomNode()?.querySelector("textarea");
+    if (!editor) return;
+    if (ariaLabel !== void 0) editor.updateOptions({ ariaLabel });
+    const textarea = editor.getDomNode()?.querySelector("textarea");
     if (!textarea) return;
     if (ariaLabel === void 0) textarea.removeAttribute("aria-label");
     else textarea.setAttribute("aria-label", ariaLabel);
@@ -447,12 +580,12 @@ var CodeEditor = forwardRef(function CodeEditor2({
     else textarea.setAttribute("aria-invalid", String(ariaInvalid));
     if (ariaDescribedBy === void 0) textarea.removeAttribute("aria-describedby");
     else textarea.setAttribute("aria-describedby", ariaDescribedBy);
-  }, [editor2, ariaLabel, ariaInvalid, ariaDescribedBy]);
+  }, [editor, ariaLabel, ariaInvalid, ariaDescribedBy]);
   useEffect2(() => {
-    if (!editor2 || !actions || actions.length === 0) return;
-    const disposables = actions.map((a) => editor2.addAction(a));
+    if (!editor || !actions || actions.length === 0) return;
+    const disposables = actions.map((a) => editor.addAction(a));
     return () => disposables.forEach((d) => d.dispose());
-  }, [editor2, actions]);
+  }, [editor, actions]);
   const resolvedStyle = {
     height: typeof height === "number" ? `${height}px` : height,
     ...style
@@ -468,7 +601,7 @@ var CodeEditor = forwardRef(function CodeEditor2({
     }
   );
   if (contextMenu === "brand") {
-    return /* @__PURE__ */ jsx2(EditorContextMenu, { editor: editor2, readOnly, children: editorEl });
+    return /* @__PURE__ */ jsx2(EditorContextMenu, { editor, readOnly, children: editorEl });
   }
   return editorEl;
 });
@@ -883,6 +1016,7 @@ function parseMarkdownOutline(markdown) {
 }
 
 // src/markdown-outline/document-outline.tsx
+import { useLocale } from "@elabs-ai/components-ui";
 import { cn as cn2 } from "@elabs-ai/components-ui/lib/cn";
 import { forwardRef as forwardRef2, useMemo } from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -891,12 +1025,13 @@ function useMarkdownOutline(markdown) {
 }
 var DocumentOutline = forwardRef2(
   function DocumentOutline2({ items, activeId, onSelect, itemActions, className, ...props }, ref) {
+    const { t } = useLocale();
     const minLevel = items.reduce((min, it) => Math.min(min, it.level), 6);
     return /* @__PURE__ */ jsxs2(
       "nav",
       {
         ref,
-        "aria-label": "Document outline",
+        "aria-label": t("editor.documentOutline.label"),
         className: cn2("text-body", className),
         ...props,
         children: [
@@ -912,7 +1047,7 @@ var DocumentOutline = forwardRef2(
                   className: cn2(
                     "-ms-px block w-full truncate border-s-2 py-1 pe-2 text-start text-caption",
                     "transition-colors duration-fast ease-standard motion-reduce:transition-none",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                    "focus-ring-inset",
                     item.id === activeId ? "border-s-primary font-medium text-foreground" : "border-s-transparent text-muted-foreground hover:border-s-border-strong hover:text-foreground",
                     actions && "pe-8"
                   ),
@@ -923,7 +1058,7 @@ var DocumentOutline = forwardRef2(
               actions ? /* @__PURE__ */ jsx3("span", { className: "absolute end-0.5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity duration-fast ease-standard focus-within:opacity-100 group-hover/outline-item:opacity-100 has-[[aria-pressed=true]]:opacity-100 motion-reduce:transition-none", children: actions }) : null
             ] }, item.id);
           }) }),
-          items.length === 0 ? /* @__PURE__ */ jsx3("p", { className: "px-2 py-1 text-caption text-muted-foreground", children: "No headings yet." }) : null
+          items.length === 0 ? /* @__PURE__ */ jsx3("p", { className: "px-2 py-1 text-caption text-muted-foreground", children: t("editor.documentOutline.empty") }) : null
         ]
       }
     );
@@ -1698,6 +1833,7 @@ function groupSlashCommands(commands) {
 }
 
 // src/markdown-editor/slash/slash-menu.tsx
+import { useLocale as useLocale2 } from "@elabs-ai/components-ui";
 import { cn as cn4 } from "@elabs-ai/components-ui/lib/cn";
 import { forwardRef as forwardRef4 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -1709,23 +1845,41 @@ var SlashMenu = forwardRef4(function SlashMenu2({
   activeId,
   onSelect,
   idPrefix = "brand-slash",
-  emptyLabel = "No matching blocks",
+  emptyLabel: emptyLabelProp,
   className,
   ...props
 }, ref) {
+  const { t } = useLocale2();
+  const emptyLabel = emptyLabelProp ?? t("editor.slashMenu.noMatchingBlocks");
   const groups = groupSlashCommands(commands);
   return /* @__PURE__ */ jsx5(
     "div",
     {
       ref,
       role: "listbox",
-      "aria-label": "Insert block",
+      "aria-label": t("editor.slashMenu.insertBlock"),
       className: cn4(
         "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
       ),
       ...props,
-      children: commands.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "px-2 py-6 text-center text-caption text-muted-foreground", children: emptyLabel }) : groups.map(({ group, commands: groupCommands }) => /* @__PURE__ */ jsxs4("div", { role: "group", "aria-label": group, className: "overflow-hidden p-1", children: [
+      children: commands.length === 0 ? (
+        // 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.
+        /* @__PURE__ */ jsx5(
+          "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",
+            children: emptyLabel
+          }
+        )
+      ) : groups.map(({ group, commands: groupCommands }) => /* @__PURE__ */ jsxs4("div", { role: "group", "aria-label": group, className: "overflow-hidden p-1", children: [
         /* @__PURE__ */ jsx5("div", { className: "px-2 py-1.5 text-meta font-medium text-muted-foreground", children: group }),
         groupCommands.map((command) => {
           const selected = command.id === activeId;
@@ -2252,6 +2406,7 @@ import { useWidgetViewContext as useWidgetViewContext2 } from "@prosemirror-adap
 import { useLayoutEffect as useLayoutEffect2, useRef as useRef3 } from "react";
 
 // src/markdown-editor/completions/completions-menu.tsx
+import { useLocale as useLocale3 } from "@elabs-ai/components-ui";
 import { cn as cn5 } from "@elabs-ai/components-ui/lib/cn";
 import { forwardRef as forwardRef5 } from "react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -2264,16 +2419,18 @@ var CompletionMenu = forwardRef5(
     activeIndex,
     onSelect,
     idPrefix = "brand-completions",
-    emptyLabel = "No suggestions",
+    emptyLabel: emptyLabelProp,
     className,
     ...props
   }, ref) {
+    const { t } = useLocale3();
+    const emptyLabel = emptyLabelProp ?? t("editor.completions.noSuggestions");
     return /* @__PURE__ */ jsx7(
       "div",
       {
         ref,
         role: "listbox",
-        "aria-label": "Suggestions",
+        "aria-label": t("editor.completions.suggestions"),
         className: cn5(
           "max-h-[min(280px,50vh)] w-64 overflow-y-auto overflow-x-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md",
           className
@@ -2391,7 +2548,8 @@ import {
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuTrigger
+  DropdownMenuTrigger,
+  useLocale as useLocale4
 } from "@elabs-ai/components-ui";
 import { cn as cn6 } from "@elabs-ai/components-ui/lib/cn";
 import { editorViewCtx as editorViewCtx2, parserCtx as parserCtx2, serializerCtx } from "@milkdown/kit/core";
@@ -2414,6 +2572,7 @@ import { useMemo as useMemo2, useRef as useRef5, useState as useState3 } from "r
 // src/markdown-editor/milkdown-react/use-get-editor.ts
 import { createContext as createContext2, useContext, useEffect as useEffect3, useRef as useRef4 } from "react";
 var editorInfoContext = createContext2({});
+var pendingDestroys = /* @__PURE__ */ new Set();
 function useGetEditor() {
   const {
     dom,
@@ -2427,16 +2586,20 @@ function useGetEditor() {
     if (!getEditor) return;
     if (!div) return;
     dom.current = div;
-    const editor2 = getEditor(div);
-    if (!editor2) return;
+    const editor = getEditor(div);
+    if (!editor) return;
     setLoading(true);
-    editor2.create().then((editor3) => {
-      editorRef.current = editor3;
+    editor.create().then((editor2) => {
+      editorRef.current = editor2;
     }).finally(() => {
       setLoading(false);
     }).catch(console.error);
     return () => {
-      editor2.destroy().catch(console.error);
+      const destroyPromise = editor.destroy().catch(console.error);
+      pendingDestroys.add(destroyPromise);
+      void destroyPromise.finally(() => {
+        pendingDestroys.delete(destroyPromise);
+      });
     };
   }, [dom, editorRef, getEditor, setLoading]);
   return domRef;
@@ -2451,10 +2614,10 @@ var Milkdown = () => {
 var MilkdownProvider = ({ children }) => {
   const dom = useRef5(void 0);
   const [editorFactory, setEditorFactory] = useState3(void 0);
-  const editor2 = useRef5(void 0);
+  const editor = useRef5(void 0);
   const [loading, setLoading] = useState3(true);
   const editorInfoCtx = useMemo2(
-    () => ({ loading, dom, editor: editor2, setLoading, editorFactory, setEditorFactory }),
+    () => ({ loading, dom, editor, setLoading, editorFactory, setEditorFactory }),
     [loading, editorFactory]
   );
   return /* @__PURE__ */ jsx9(editorInfoContext.Provider, { value: editorInfoCtx, children });
@@ -2549,14 +2712,12 @@ function InlineEdit({ value, onCommit, ariaLabel, placeholder, className }) {
       spellCheck: false,
       onBlur: commit,
       onKeyDown,
-      className: cn6(
-        "brand-inline-edit rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        className
-      )
+      className: cn6("brand-inline-edit rounded-sm focus-ring", className)
     }
   );
 }
 function ContainerDirectiveView() {
+  const { t } = useLocale4();
   const { contentRef } = useNodeViewContext();
   const { name, attributes, update } = useDirectiveAttrs();
   const body = /* @__PURE__ */ jsx10("div", { className: "brand-directive__body", ref: contentRef });
@@ -2565,8 +2726,8 @@ function ContainerDirectiveView() {
       /* @__PURE__ */ jsx10(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsx10(CardTitle, { children: /* @__PURE__ */ jsx10(
         InlineEdit,
         {
-          ariaLabel: "Card title",
-          placeholder: "Card title",
+          ariaLabel: t("editor.directiveViews.cardTitle"),
+          placeholder: t("editor.directiveViews.cardTitle"),
           value: attributes.title ?? "",
           onCommit: (v) => update("title", v)
         }
@@ -2586,7 +2747,7 @@ function ContainerDirectiveView() {
           /* @__PURE__ */ jsx10("div", { className: "mb-1 font-medium leading-none tracking-tight", children: /* @__PURE__ */ jsx10(
             InlineEdit,
             {
-              ariaLabel: "Callout title",
+              ariaLabel: t("editor.directiveViews.calloutTitle"),
               placeholder: capitalize(attributes.type ?? "note"),
               value: attributes.title ?? "",
               onCommit: (v) => update("title", v)
@@ -2611,10 +2772,7 @@ function ContainerDirectiveView() {
       className: "brand-directive brand-directive--unknown",
       "data-brand-directive": name,
       children: [
-        /* @__PURE__ */ jsxs6("div", { className: "mb-1 font-medium leading-none tracking-tight", children: [
-          "Unknown block: ",
-          name
-        ] }),
+        /* @__PURE__ */ jsx10("div", { className: "mb-1 font-medium leading-none tracking-tight", children: t("editor.directiveViews.unknownBlock", { name }) }),
         /* @__PURE__ */ jsx10(AlertDescription, { children: body })
       ]
     }
@@ -2622,9 +2780,9 @@ function ContainerDirectiveView() {
 }
 function readBodyMarkdown(getInstance, node) {
   try {
-    const editor2 = getInstance();
-    if (!editor2) return node.textContent;
-    return editor2.action((ctx2) => {
+    const editor = getInstance();
+    if (!editor) return node.textContent;
+    return editor.action((ctx2) => {
       const serialize = ctx2.get(
         serializerCtx
       );
@@ -2637,10 +2795,10 @@ function readBodyMarkdown(getInstance, node) {
 }
 function writeBodyMarkdown(getInstance, getPos, template) {
   try {
-    const editor2 = getInstance();
+    const editor = getInstance();
     const pos = getPos();
-    if (!editor2 || pos == null) return;
-    editor2.action((ctx2) => {
+    if (!editor || pos == null) return;
+    editor.action((ctx2) => {
       const parse = ctx2.get(
         parserCtx2
       );
@@ -2668,10 +2826,10 @@ function mergeAttrsOmittingEmpty(attrs, next) {
 function replaceNodeWithMarkdown(getInstance, getPos, markdown) {
   if (!markdown.trim()) return;
   try {
-    const editor2 = getInstance();
+    const editor = getInstance();
     const pos = getPos();
-    if (!editor2 || pos == null) return;
-    editor2.action((ctx2) => {
+    if (!editor || pos == null) return;
+    editor.action((ctx2) => {
       const parse = ctx2.get(
         parserCtx2
       );
@@ -2721,6 +2879,7 @@ function IterationMenuItems({
   }) });
 }
 function IterationDirectiveView() {
+  const { t } = useLocale4();
   const { contentRef, node, getPos, setAttrs } = useNodeViewContext();
   const { name, attributes } = useDirectiveAttrs();
   const [, getInstance] = useInstance();
@@ -2775,7 +2934,7 @@ function IterationDirectiveView() {
     as: attributes.as || "item",
     attributes
   }).cells.length > 0;
-  const disabledHint = "\u2014 needs embedded values";
+  const disabledHint = t("editor.directiveViews.needsEmbeddedValues");
   const convertToStatic = () => {
     const template = readBodyMarkdown(getInstance, node);
     const value = builderValueFromParts(kind, attributes, template);
@@ -2785,14 +2944,14 @@ function IterationDirectiveView() {
     {
       type: "item",
       id: "edit",
-      label: "Edit iteration\u2026",
+      label: t("editor.directiveViews.editIteration"),
       icon: /* @__PURE__ */ jsx10(Pencil, { className: "size-4", "aria-hidden": "true" }),
       onSelect: requestEdit
     },
     {
       type: "layout",
       id: "layout",
-      label: "Change layout",
+      label: t("editor.directiveViews.changeLayout"),
       icon: /* @__PURE__ */ jsx10(LayoutGrid, { className: "size-4", "aria-hidden": "true" }),
       value: attributes.layout || ITERATION_LAYOUTS[kind][0],
       options: ITERATION_LAYOUTS[kind],
@@ -2802,7 +2961,7 @@ function IterationDirectiveView() {
       {
         type: "item",
         id: "transpose",
-        label: hasEmbeddedData ? "Transpose" : `Transpose ${disabledHint}`,
+        label: hasEmbeddedData ? t("editor.directiveViews.transpose") : `${t("editor.directiveViews.transpose")} ${disabledHint}`,
         icon: /* @__PURE__ */ jsx10(ArrowLeftRight, { className: "size-4", "aria-hidden": "true" }),
         onSelect: transpose,
         disabled: !hasEmbeddedData
@@ -2811,7 +2970,7 @@ function IterationDirectiveView() {
     {
       type: "item",
       id: "convert-to-static",
-      label: hasEmbeddedData ? "Convert to static" : `Convert to static ${disabledHint}`,
+      label: hasEmbeddedData ? t("editor.directiveViews.convertToStatic") : `${t("editor.directiveViews.convertToStatic")} ${disabledHint}`,
       icon: /* @__PURE__ */ jsx10(FileText, { className: "size-4", "aria-hidden": "true" }),
       onSelect: convertToStatic,
       disabled: !hasEmbeddedData
@@ -2819,21 +2978,18 @@ function IterationDirectiveView() {
   ];
   const header = /* @__PURE__ */ jsxs6("div", { className: "mb-1.5 flex items-center gap-1.5 text-meta font-medium text-info-text", children: [
     /* @__PURE__ */ jsx10(Icon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx10("span", { children: isPivot ? "Pivot" : "Iterate" }),
-    !isPivot && attributes.as ? /* @__PURE__ */ jsxs6("span", { className: "font-normal text-muted-foreground", children: [
-      "\xB7 per ",
-      attributes.as
-    ] }) : null,
-    /* @__PURE__ */ jsx10("span", { className: "font-normal text-muted-foreground", children: "\u2014 template" }),
+    /* @__PURE__ */ jsx10("span", { children: isPivot ? t("editor.directiveViews.pivot") : t("editor.directiveViews.iterate") }),
+    !isPivot && attributes.as ? /* @__PURE__ */ jsx10("span", { className: "font-normal text-muted-foreground", children: t("editor.directiveViews.perItem", { as: attributes.as }) }) : null,
+    /* @__PURE__ */ jsx10("span", { className: "font-normal text-muted-foreground", children: t("editor.directiveViews.templateSuffix") }),
     onEdit ? /* @__PURE__ */ jsxs6(DropdownMenu, { children: [
       /* @__PURE__ */ jsx10(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx10(
         "button",
         {
           type: "button",
           "data-directive-chrome": "",
-          "aria-label": "Iteration actions",
-          title: "Iteration actions\u2026",
-          className: "ms-auto inline-flex size-5 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "aria-label": t("editor.directiveViews.iterationActions"),
+          title: t("editor.directiveViews.iterationActionsTitle"),
+          className: "ms-auto inline-flex size-5 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground focus-ring",
           children: /* @__PURE__ */ jsx10(MoreHorizontal, { className: "size-4", "aria-hidden": "true" })
         }
       ) }),
@@ -2873,6 +3029,7 @@ function IterationDirectiveView() {
   ] });
 }
 function LeafDirectiveView() {
+  const { t } = useLocale4();
   const { name, attributes, update } = useDirectiveAttrs();
   if (name !== "metric") {
     return /* @__PURE__ */ jsxs6(
@@ -2881,7 +3038,8 @@ function LeafDirectiveView() {
         className: "brand-directive brand-directive--leaf brand-directive--unknown rounded-md border border-destructive/40 bg-surface-muted p-3 text-sm text-muted-foreground",
         "data-brand-leaf": name,
         children: [
-          "Unknown inline block: ",
+          t("editor.directiveViews.unknownInlineBlock"),
+          " ",
           /* @__PURE__ */ jsxs6("code", { children: [
             "::",
             name
@@ -2899,8 +3057,8 @@ function LeafDirectiveView() {
       label: /* @__PURE__ */ jsx10(
         InlineEdit,
         {
-          ariaLabel: "Metric label",
-          placeholder: "Label",
+          ariaLabel: t("editor.directiveViews.metricLabel"),
+          placeholder: t("editor.directiveViews.metricLabelPlaceholder"),
           value: attributes.label ?? "",
           onCommit: (v) => update("label", v)
         }
@@ -2908,8 +3066,8 @@ function LeafDirectiveView() {
       value: /* @__PURE__ */ jsx10(
         InlineEdit,
         {
-          ariaLabel: "Metric value",
-          placeholder: "0",
+          ariaLabel: t("editor.directiveViews.metricValue"),
+          placeholder: t("editor.directiveViews.metricValuePlaceholder"),
           value: attributes.value ?? "",
           onCommit: (v) => update("value", v),
           className: "min-w-[1ch]"
@@ -3045,7 +3203,7 @@ function makeErrorChip(message) {
   chip.setAttribute("role", "alert");
   chip.setAttribute("aria-live", "assertive");
   chip.setAttribute("title", message);
-  chip.className = "inline-flex items-center gap-1 rounded px-2 py-0.5 text-caption bg-destructive/10 text-destructive border border-destructive/30 select-none";
+  chip.className = "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");
   label.textContent = `\u26A0 Upload failed`;
   chip.appendChild(label);
@@ -3228,6 +3386,7 @@ import {
 import { Plugin as Plugin7, PluginKey as PluginKey6 } from "@milkdown/kit/prose/state";
 import { $prose as $prose7 } from "@milkdown/kit/utils";
 import { isInTable } from "@milkdown/kit/prose/tables";
+import { useLocale as useLocale5 } from "@elabs-ai/components-ui";
 import { cn as cn7 } from "@elabs-ai/components-ui/lib/cn";
 import { usePluginViewContext } from "@prosemirror-adapter/react";
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -3259,9 +3418,10 @@ function ToolbarButton({
       className: cn7(
         "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",
-        variant === "destructive" ? "bg-background text-destructive hover:bg-destructive/10" : "bg-background text-foreground hover:bg-surface-muted"
+        // #124: the button's LABEL text, not a mark — ink rung.
+        variant === "destructive" ? "bg-background text-destructive-text hover:bg-destructive/10" : "bg-background text-foreground hover:bg-surface-muted"
       ),
       children
     }
@@ -3272,25 +3432,32 @@ function ToolbarDivider() {
 }
 function TableControlsView() {
   const { view } = usePluginViewContext();
+  const { t } = useLocale5();
   const inTable = isInTable(view.state);
   const run = (key) => () => 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 /* @__PURE__ */ jsxs7(
     "div",
     {
       role: "toolbar",
-      "aria-label": "Table controls",
+      "aria-label": t("editor.tableView.tableControls"),
       className: cn7(
         "flex flex-wrap items-center gap-1 px-2 py-1.5",
         "border-t border-border-strong bg-surface-muted"
       ),
       children: [
-        /* @__PURE__ */ jsx11("span", { className: "mr-1 select-none text-caption text-muted-foreground", children: "Row" }),
+        /* @__PURE__ */ jsx11("span", { className: "mr-1 select-none text-caption text-muted-foreground", children: t("editor.tableView.row") }),
         /* @__PURE__ */ jsx11(
           ToolbarButton,
           {
-            ariaLabel: "Add row above",
-            title: "Add row above",
+            ariaLabel: addRowAbove,
+            title: addRowAbove,
             onClick: run(addRowBeforeCommand.key),
             children: "\u2191+"
           }
@@ -3298,8 +3465,8 @@ function TableControlsView() {
         /* @__PURE__ */ jsx11(
           ToolbarButton,
           {
-            ariaLabel: "Add row below",
-            title: "Add row below",
+            ariaLabel: addRowBelow,
+            title: addRowBelow,
             onClick: run(addRowAfterCommand.key),
             children: "\u2193+"
           }
@@ -3307,20 +3474,20 @@ function TableControlsView() {
         /* @__PURE__ */ jsx11(
           ToolbarButton,
           {
-            ariaLabel: "Delete row",
-            title: "Delete row",
+            ariaLabel: deleteRow,
+            title: deleteRow,
             variant: "destructive",
             onClick: run(deleteSelectedCellsCommand.key),
             children: "\xD7row"
           }
         ),
         /* @__PURE__ */ jsx11(ToolbarDivider, {}),
-        /* @__PURE__ */ jsx11("span", { className: "mr-1 select-none text-caption text-muted-foreground", children: "Col" }),
+        /* @__PURE__ */ jsx11("span", { className: "mr-1 select-none text-caption text-muted-foreground", children: t("editor.tableView.col") }),
         /* @__PURE__ */ jsx11(
           ToolbarButton,
           {
-            ariaLabel: "Add column left",
-            title: "Add column left",
+            ariaLabel: addColLeft,
+            title: addColLeft,
             onClick: run(addColBeforeCommand.key),
             children: "\u2190+"
           }
@@ -3328,8 +3495,8 @@ function TableControlsView() {
         /* @__PURE__ */ jsx11(
           ToolbarButton,
           {
-            ariaLabel: "Add column right",
-            title: "Add column right",
+            ariaLabel: addColRight,
+            title: addColRight,
             onClick: run(addColAfterCommand.key),
             children: "\u2192+"
           }
@@ -3337,8 +3504,8 @@ function TableControlsView() {
         /* @__PURE__ */ jsx11(
           ToolbarButton,
           {
-            ariaLabel: "Delete column",
-            title: "Delete column",
+            ariaLabel: deleteCol,
+            title: deleteCol,
             variant: "destructive",
             onClick: run(deleteSelectedCellsCommand.key),
             children: "\xD7col"
@@ -3374,8 +3541,8 @@ function tableViewPlugins(pluginViewFactory) {
 
 // src/markdown-editor/markdown-editor.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
-function scrollHeadingBySlug(editor2, slug) {
-  editor2.action((ctx2) => {
+function scrollHeadingBySlug(editor, slug) {
+  editor.action((ctx2) => {
     const view = ctx2.get(editorViewCtx3);
     const { doc } = view.state;
     const used = /* @__PURE__ */ new Map();
@@ -3435,7 +3602,7 @@ var MarkdownEditorView = forwardRef6(function MarkdownEditorView2({
       const embedPlugin = pasteEmbedPlugin(
         onEmbedAssetRef.current ? (file) => onEmbedAssetRef.current(file) : void 0
       );
-      let editor2 = Editor.make().config((ctx2) => {
+      let editor = Editor.make().config((ctx2) => {
         ctx2.set(rootCtx, root);
         ctx2.set(defaultValueCtx, lastMarkdown.current);
         ctx2.update(editorViewOptionsCtx, (prev) => ({
@@ -3456,7 +3623,7 @@ var MarkdownEditorView = forwardRef6(function MarkdownEditorView2({
         )
       );
       if (slashEnabled) {
-        editor2 = editor2.use(
+        editor = editor.use(
           brandSlashViewPlugins(widgetViewFactory, {
             ...slashConfigRef.current,
             getIterationEditHandler: () => iterationEditHandlerRef.current
@@ -3464,14 +3631,14 @@ var MarkdownEditorView = forwardRef6(function MarkdownEditorView2({
         );
       }
       if (calcEnabled) {
-        editor2 = editor2.use(calcProsePlugins(() => calcRef.current));
+        editor = editor.use(calcProsePlugins(() => calcRef.current));
       }
       if (completionsEnabled) {
-        editor2 = editor2.use(
+        editor = editor.use(
           completionsViewPlugins(widgetViewFactory, () => completionsRef.current)
         );
       }
-      return editor2;
+      return editor;
     },
     [readOnly, ariaLabel, slashEnabled, calcEnabled, completionsEnabled]
   );
@@ -3479,21 +3646,21 @@ var MarkdownEditorView = forwardRef6(function MarkdownEditorView2({
   useEffect5(() => {
     if (loading || value === void 0) return;
     if (value === lastMarkdown.current) return;
-    const editor2 = getInstance();
-    if (!editor2) return;
+    const editor = getInstance();
+    if (!editor) return;
     lastMarkdown.current = value;
-    editor2.action(replaceAll(value));
+    editor.action(replaceAll(value));
   }, [loading, value, getInstance]);
   useImperativeHandle2(
     ref,
     () => {
       const serializeSlice = (view) => {
-        const editor2 = getInstance();
-        if (!editor2) return "";
+        const editor = getInstance();
+        if (!editor) return "";
         const { selection } = view.state;
         if (selection.empty) return "";
         try {
-          return editor2.action((ctx2) => {
+          return editor.action((ctx2) => {
             const serialize = ctx2.get(serializerCtx2);
             const doc = selection.content().content;
             const wrapper = view.state.doc.type.schema.topNodeType.create(null, doc);
@@ -3505,10 +3672,10 @@ var MarkdownEditorView = forwardRef6(function MarkdownEditorView2({
       };
       serializeSliceRef.current = serializeSlice;
       const parseAndReplace = (view, md) => {
-        const editor2 = getInstance();
-        if (!editor2) return;
+        const editor = getInstance();
+        if (!editor) return;
         try {
-          editor2.action((ctx2) => {
+          editor.action((ctx2) => {
             const parse = ctx2.get(parserCtx3);
             const parsed = parse(md);
             if (!parsed) {
@@ -3526,10 +3693,10 @@ var MarkdownEditorView = forwardRef6(function MarkdownEditorView2({
         }
       };
       const getView = () => {
-        const editor2 = getInstance();
-        if (!editor2) return null;
+        const editor = getInstance();
+        if (!editor) return null;
         try {
-          return editor2.action((ctx2) => ctx2.get(editorViewCtx3));
+          return editor.action((ctx2) => ctx2.get(editorViewCtx3));
         } catch {
           return null;
         }
@@ -3553,15 +3720,15 @@ var MarkdownEditorView = forwardRef6(function MarkdownEditorView2({
         getMarkdown: () => getInstance()?.action(getMarkdown()) ?? lastMarkdown.current,
         serialized: () => getInstance()?.action(getMarkdown()) ?? null,
         scrollToHeading: (slug) => {
-          const editor2 = getInstance();
-          if (editor2) scrollHeadingBySlug(editor2, slug);
+          const editor = getInstance();
+          if (editor) scrollHeadingBySlug(editor, slug);
         },
         revealLine: (line, _opts) => {
-          const editor2 = getInstance();
-          if (!editor2) return;
-          const md = editor2.action(getMarkdown());
+          const editor = getInstance();
+          if (!editor) return;
+          const md = editor.action(getMarkdown());
           const preceding = parseMarkdownOutline(md).filter((item) => item.line <= line).at(-1);
-          if (preceding) scrollHeadingBySlug(editor2, preceding.id);
+          if (preceding) scrollHeadingBySlug(editor, preceding.id);
         }
       };
     },
@@ -3591,10 +3758,13 @@ var MarkdownEditor = forwardRef6(
       {
         "data-testid": "markdown-editor",
         className: cn8(
-          // A 1px hairline focus ring (not a heavy 2px ring) — the editable is a
-          // large surface, so a thinner edit-mode ring reads calmer while still
-          // meeting the visible-focus requirement (same `ring` token). (A7)
-          "milkdown-host overflow-auto rounded-md border border-border bg-background text-foreground focus-within:ring-1 focus-within:ring-ring",
+          // No focus-ring utility here (deliberately, #309): the editable
+          // `.ProseMirror` element owns the compound focus indicator itself
+          // (`markdown-editor.css`'s `:focus-visible` rule), so it renders
+          // even when a consumer `className` overrides this wrapper's
+          // classes (`MarkdownWorkspace` does exactly that via
+          // `className="border-0"`) and never doubles up with a wrapper ring.
+          "milkdown-host overflow-auto rounded-md border border-border bg-background text-foreground",
           className
         ),
         style: { ...markdownScaleVars(), ...style },
@@ -3620,16 +3790,18 @@ var MarkdownEditor = forwardRef6(
 );
 
 // src/copy-button/copy-button.tsx
-import { Button, useCopyToClipboard } from "@elabs-ai/components-ui";
+import { Button, useCopyToClipboard, useLocale as useLocale6 } from "@elabs-ai/components-ui";
 import { cn as cn9 } from "@elabs-ai/components-ui/lib/cn";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useCallback as useCallback3 } from "react";
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function CopyButton({ value, label = true, className, ...props }) {
   const { copied, copy } = useCopyToClipboard();
+  const { t } = useLocale6();
   const onClick = useCallback3(() => {
     void copy(value);
   }, [copy, value]);
+  const text = copied ? t("editor.copyButton.copied") : t("copy");
   return /* @__PURE__ */ jsxs8(
     Button,
     {
@@ -3639,7 +3811,7 @@ function CopyButton({ value, label = true, className, ...props }) {
       type: "button",
       className: cn9("h-7 gap-1.5", className),
       onClick,
-      "aria-label": copied ? "Copied" : "Copy",
+      "aria-label": text,
       children: [
         copied ? /* @__PURE__ */ jsx13(
           CheckIcon,
@@ -3649,37 +3821,37 @@ function CopyButton({ value, label = true, className, ...props }) {
           },
           String(copied)
         ) : /* @__PURE__ */ jsx13(CopyIcon, { className: "size-4", "aria-hidden": "true" }),
-        label ? /* @__PURE__ */ jsx13("span", { className: "text-xs", children: copied ? "Copied" : "Copy" }) : null
+        label ? /* @__PURE__ */ jsx13("span", { className: "text-xs", children: text }) : null
       ]
     }
   );
 }
 
 // src/lib/editor-content-access.ts
-function monacoContentAccess(editor2) {
+function monacoContentAccess(editor) {
   const readSelection = () => {
-    const model = editor2.getModel();
-    const selection = editor2.getSelection();
+    const model = editor.getModel();
+    const selection = editor.getSelection();
     if (!model || !selection) return { text: "", empty: true };
     const text = model.getValueInRange(selection);
     return { text, empty: selection.isEmpty() };
   };
   const applyAtSelection = (text) => {
-    const selection = editor2.getSelection();
+    const selection = editor.getSelection();
     if (!selection) return;
-    editor2.executeEdits("editor-content-access", [
+    editor.executeEdits("editor-content-access", [
       { range: selection, text, forceMoveMarkers: true }
     ]);
-    editor2.pushUndoStop();
+    editor.pushUndoStop();
   };
   return {
-    getText: () => editor2.getValue(),
+    getText: () => editor.getValue(),
     getSelection: readSelection,
     replaceSelection: applyAtSelection,
     insertAtCursor: applyAtSelection,
-    focus: () => editor2.focus(),
+    focus: () => editor.focus(),
     onSelectionChange: (listener2) => {
-      const sub = editor2.onDidChangeCursorSelection(() => listener2(readSelection()));
+      const sub = editor.onDidChangeCursorSelection(() => listener2(readSelection()));
       return () => sub.dispose();
     }
   };
@@ -3745,4 +3917,4 @@ export {
   CopyButton,
   monacoContentAccess
 };
-//# sourceMappingURL=chunk-LBC5VJBD.js.map
+//# sourceMappingURL=chunk-FO5S3YZM.js.map