@elabs-ai/components-editor 4.1.0 → 4.2.0

package/dist/{chunk-C62O7IOQ.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 }),
@@ -360,12 +360,12 @@ function buildBrandThemeData(rootEl) {
 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;
 }
 
@@ -402,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,
@@ -412,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 },
@@ -443,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 monacoApi = monacoRef.current;
+    const model = editor?.getModel();
+    if (model && monacoApi) monacoApi.editor.setModelLanguage(model, language);
+  }, [editor, language]);
   useEffect2(() => {
-    const model = editor2?.getModel();
-    if (model) monaco.editor.setModelLanguage(model, language);
-  }, [editor2, language]);
+    editor?.updateOptions({ readOnly, contextmenu: contextMenu === "monaco" });
+  }, [editor, readOnly, contextMenu]);
   useEffect2(() => {
-    editor2?.updateOptions({ readOnly, contextmenu: contextMenu === "monaco" });
-  }, [editor2, readOnly, contextMenu]);
+    if (!editor || !options) return;
+    editor.updateOptions(options);
+  }, [editor, options]);
   useEffect2(() => {
-    if (!editor2) return;
+    const monacoApi = monacoRef.current;
+    if (!editor || !monacoApi) return;
     try {
-      applyBrandTheme(monaco, theme);
+      applyBrandTheme(monacoApi, theme);
     } catch (err) {
       console.error("[@elabs-ai/components-editor] failed to apply brand theme", err);
     }
-  }, [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);
@@ -514,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
@@ -535,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;
 });
@@ -950,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";
@@ -958,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: [
@@ -990,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
         ]
       }
     );
@@ -1765,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";
@@ -1776,17 +1845,19 @@ 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
@@ -2335,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";
@@ -2347,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
@@ -2474,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";
@@ -2511,16 +2586,16 @@ 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 () => {
-      const destroyPromise = editor2.destroy().catch(console.error);
+      const destroyPromise = editor.destroy().catch(console.error);
       pendingDestroys.add(destroyPromise);
       void destroyPromise.finally(() => {
         pendingDestroys.delete(destroyPromise);
@@ -2539,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 });
@@ -2642,6 +2717,7 @@ function InlineEdit({ value, onCommit, ariaLabel, placeholder, 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 });
@@ -2650,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)
         }
@@ -2671,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)
@@ -2696,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 })
       ]
     }
@@ -2707,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
       );
@@ -2722,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
       );
@@ -2753,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
       );
@@ -2806,6 +2879,7 @@ function IterationMenuItems({
   }) });
 }
 function IterationDirectiveView() {
+  const { t } = useLocale4();
   const { contentRef, node, getPos, setAttrs } = useNodeViewContext();
   const { name, attributes } = useDirectiveAttrs();
   const [, getInstance] = useInstance();
@@ -2860,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);
@@ -2870,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],
@@ -2887,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
@@ -2896,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
@@ -2904,20 +2978,17 @@ 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",
+          "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" })
         }
@@ -2958,6 +3029,7 @@ function IterationDirectiveView() {
   ] });
 }
 function LeafDirectiveView() {
+  const { t } = useLocale4();
   const { name, attributes, update } = useDirectiveAttrs();
   if (name !== "metric") {
     return /* @__PURE__ */ jsxs6(
@@ -2966,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
@@ -2984,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)
         }
@@ -2993,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]"
@@ -3313,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";
@@ -3358,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+"
           }
@@ -3384,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+"
           }
@@ -3393,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+"
           }
@@ -3414,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+"
           }
@@ -3423,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"
@@ -3460,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();
@@ -3521,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) => ({
@@ -3542,7 +3623,7 @@ var MarkdownEditorView = forwardRef6(function MarkdownEditorView2({
         )
       );
       if (slashEnabled) {
-        editor2 = editor2.use(
+        editor = editor.use(
           brandSlashViewPlugins(widgetViewFactory, {
             ...slashConfigRef.current,
             getIterationEditHandler: () => iterationEditHandlerRef.current
@@ -3550,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]
   );
@@ -3565,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);
@@ -3591,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) {
@@ -3612,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;
         }
@@ -3639,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);
         }
       };
     },
@@ -3709,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,
     {
@@ -3728,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,
@@ -3738,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();
     }
   };
@@ -3834,4 +3917,4 @@ export {
   CopyButton,
   monacoContentAccess
 };
-//# sourceMappingURL=chunk-C62O7IOQ.js.map
+//# sourceMappingURL=chunk-FO5S3YZM.js.map