@mjml-agent-editor/editor 0.1.4 → 0.1.6

package/dist/{chunk-YAKRVIM2.js → chunk-XAEUCHL4.js}

@@ -18,14 +18,88 @@ import {
 } from "./chunk-V6RR4VRD.js";
 
 // src/stores.tsx
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
+
+// src/labels.ts
+var DEFAULT_LABELS = {
+  appName: "MJML Editor",
+  emailNameAria: "Email name",
+  renameFailed: "Failed to rename.",
+  saving: "Saving\u2026",
+  saved: "Saved",
+  saveFailed: "Save failed",
+  undo: "Undo",
+  redo: "Redo",
+  contentWidth: "Content width",
+  preview: "Preview",
+  closePreview: "Close preview",
+  previewFrameTitle: "Email preview",
+  sourceCode: "Source code",
+  exportHtml: "Export HTML",
+  exportMjml: "Export MJML",
+  copied: (kind) => `${kind} copied.`,
+  searchBlocks: "Search blocks\u2026",
+  expandAll: "Expand all",
+  selectAnElement: "Select an element\u2026",
+  attributes: "Attributes",
+  style: "Style",
+  rteFont: "Font",
+  rteSize: "Size",
+  rteTextColor: "Text color",
+  rteBackgroundColor: "Background color",
+  documentLoadFailed: "Failed to load the document.",
+  documentSaveFailed: "Failed to save changes.",
+  commentOnSection: "Comment on the whole section",
+  closeComments: "Close",
+  noCommentsYet: "No comments yet \u2014 add the first one.",
+  resolveComment: "Resolve",
+  addComment: "Add",
+  addCommentPlaceholder: "Add a comment\u2026 (\u2318/Ctrl+Enter to send)",
+  chatEmptyTitle: "Start a conversation with the agent",
+  chatEmptyDescription: "Describe the email (goal, tone, content) and paste your data \u2014 the agent will design the sections and images.",
+  agentWorking: "Agent is working\u2026",
+  reasoning: "Reasoning",
+  completedSteps: (count, failed) => failed > 0 ? `Completed steps (${count}, ${failed} failed)` : `Completed steps (${count})`,
+  applyComments: "Apply changes from comments",
+  chatPlaceholder: "Describe what you want to change\u2026 (Enter = send, Shift+Enter = new line)",
+  stop: "Stop",
+  send: "Send",
+  chatError: "Agent chat error.",
+  toolLabels: {
+    get_document: "Reading document",
+    get_section: "Reading section",
+    set_document: "Saving whole email",
+    set_section: "Replacing section",
+    insert_section: "Adding section",
+    remove_section: "Removing section",
+    generate_image: "Generating image",
+    list_open_comments: "Reading comments",
+    resolve_comment: "Resolving comment"
+  }
+};
+function mergeLabels(overrides) {
+  if (!overrides) return DEFAULT_LABELS;
+  return {
+    ...DEFAULT_LABELS,
+    ...overrides,
+    toolLabels: { ...DEFAULT_LABELS.toolLabels, ...overrides.toolLabels }
+  };
+}
+
+// src/stores.tsx
 import { jsx } from "react/jsx-runtime";
 var StoreContext = createContext(null);
+var LabelContext = createContext(null);
 function EditorStoreProvider({
   stores,
+  labels,
   children
 }) {
-  return /* @__PURE__ */ jsx(StoreContext.Provider, { value: stores, children });
+  const merged = useMemo(() => mergeLabels(labels), [labels]);
+  return /* @__PURE__ */ jsx(StoreContext.Provider, { value: stores, children: /* @__PURE__ */ jsx(LabelContext.Provider, { value: merged, children }) });
+}
+function useLabels() {
+  return useContext(LabelContext) ?? mergeLabels();
 }
 function useStores() {
   const stores = useContext(StoreContext);
@@ -349,29 +423,24 @@ function DialogTitle({ className, ...props }) {
 
 // src/components/editor/EditorHeader.tsx
 import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
-var SAVE_LABEL = {
-  idle: "",
-  saving: "Saving\u2026",
-  saved: "Saved",
-  error: "Save failed"
-};
 var WIDTHS = ["600px", "640px", "680px", "720px"];
 var DEVICE_ICON = {
   Desktop: /* @__PURE__ */ jsx7(Monitor, { className: "size-3.5" }),
   Mobile: /* @__PURE__ */ jsx7(Smartphone, { className: "size-3.5" })
 };
 function SaveBadge({ status }) {
+  const labels = useLabels();
   if (status === "idle") return null;
   if (status === "saving")
     return /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-1 text-xs text-panel-muted-fg", children: [
       /* @__PURE__ */ jsx7(Spinner, { className: "size-3" }),
       " ",
-      SAVE_LABEL.saving
+      labels.saving
     ] });
-  if (status === "error") return /* @__PURE__ */ jsx7(Badge, { variant: "destructive", children: SAVE_LABEL.error });
+  if (status === "error") return /* @__PURE__ */ jsx7(Badge, { variant: "destructive", children: labels.saveFailed });
   return /* @__PURE__ */ jsxs2("span", { className: "text-xs text-emerald-400", children: [
     "\u2713 ",
-    SAVE_LABEL.saved
+    labels.saved
   ] });
 }
 function slugify(name) {
@@ -394,6 +463,7 @@ function EditorHeader({
   homeLink
 }) {
   const documents = useDocumentStore();
+  const labels = useLabels();
   const [name, setName] = useState("");
   const [state, setState] = useState({
     device: "Desktop",
@@ -419,7 +489,7 @@ function EditorHeader({
     try {
       await documents.save(docId, { name: n });
     } catch {
-      toast.error("Failed to rename.");
+      toast.error(labels.renameFailed);
     }
   };
   const devices = api?.getDevices() ?? [];
@@ -427,7 +497,7 @@ function EditorHeader({
   const openCode = () => setCode({ mjml: api?.getMjml() ?? "", html: api?.getCompiledHtml() ?? "" });
   return /* @__PURE__ */ jsxs2("header", { className: "flex h-14 shrink-0 items-center gap-2 border-b border-panel-border bg-panel px-3 text-panel-fg", children: [
     /* @__PURE__ */ jsx7("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-brand to-indigo-400 text-brand-fg shadow-sm", children: /* @__PURE__ */ jsx7(Mail, { className: "size-4" }) }),
-    /* @__PURE__ */ jsx7("span", { className: "hidden text-sm font-semibold sm:inline", children: "MJML Editor" }),
+    /* @__PURE__ */ jsx7("span", { className: "hidden text-sm font-semibold sm:inline", children: labels.appName }),
     /* @__PURE__ */ jsx7(Separator, { orientation: "vertical", className: "mx-1 !h-5 bg-panel-border" }),
     /* @__PURE__ */ jsx7(
       Input,
@@ -437,7 +507,7 @@ function EditorHeader({
         onBlur: () => void commitName(),
         onKeyDown: (e) => e.key === "Enter" && e.currentTarget.blur(),
         className: "h-8 w-44 border-transparent bg-transparent text-sm font-medium text-panel-fg hover:border-panel-border focus-visible:border-panel-border",
-        "aria-label": "Email name"
+        "aria-label": labels.emailNameAria
       }
     ),
     /* @__PURE__ */ jsx7(Separator, { orientation: "vertical", className: "mx-1 !h-5 bg-panel-border" }),
@@ -475,7 +545,7 @@ function EditorHeader({
           children: /* @__PURE__ */ jsx7(Undo2, {})
         }
       ) }),
-      /* @__PURE__ */ jsx7(TooltipContent, { children: "Undo" })
+      /* @__PURE__ */ jsx7(TooltipContent, { children: labels.undo })
     ] }),
     /* @__PURE__ */ jsxs2(Tooltip, { children: [
       /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx7(
@@ -489,7 +559,7 @@ function EditorHeader({
           children: /* @__PURE__ */ jsx7(Redo2, {})
         }
       ) }),
-      /* @__PURE__ */ jsx7(TooltipContent, { children: "Redo" })
+      /* @__PURE__ */ jsx7(TooltipContent, { children: labels.redo })
     ] }),
     /* @__PURE__ */ jsx7(Separator, { orientation: "vertical", className: "mx-1 !h-5 bg-panel-border max-xl:hidden" }),
     /* @__PURE__ */ jsxs2(Popover, { children: [
@@ -500,7 +570,7 @@ function EditorHeader({
           size: "sm",
           className: cn(darkGhost, "gap-1.5 rounded-md border border-panel-border max-xl:hidden"),
           children: [
-            /* @__PURE__ */ jsx7("span", { className: "text-panel-muted-fg", children: "Content width" }),
+            /* @__PURE__ */ jsx7("span", { className: "text-panel-muted-fg", children: labels.contentWidth }),
             state.contentWidth,
             /* @__PURE__ */ jsx7(ChevronDown, { className: "size-3.5" })
           ]
@@ -562,7 +632,8 @@ function EditorHeader({
             onClick: () => setPreview(api?.getCompiledHtml() ?? ""),
             children: [
               /* @__PURE__ */ jsx7(Eye, {}),
-              " Preview"
+              " ",
+              labels.preview
             ]
           }
         ) }),
@@ -574,7 +645,8 @@ function EditorHeader({
             children: [
               /* @__PURE__ */ jsxs2("div", { className: "flex h-12 shrink-0 items-center justify-between border-b bg-white px-4", children: [
                 /* @__PURE__ */ jsxs2(DialogTitle, { className: "text-sm", children: [
-                  "Preview \u2014 ",
+                  labels.preview,
+                  " \u2014 ",
                   name
                 ] }),
                 /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
@@ -601,13 +673,13 @@ function EditorHeader({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx7(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx7(Button, { variant: "ghost", size: "icon", "aria-label": "Close preview", children: /* @__PURE__ */ jsx7(X, {}) }) })
+                  /* @__PURE__ */ jsx7(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx7(Button, { variant: "ghost", size: "icon", "aria-label": labels.closePreview, children: /* @__PURE__ */ jsx7(X, {}) }) })
                 ] })
               ] }),
               /* @__PURE__ */ jsx7("div", { className: "min-h-0 flex-1 overflow-auto p-6", children: /* @__PURE__ */ jsx7(
                 "iframe",
                 {
-                  title: "Email preview",
+                  title: labels.previewFrameTitle,
                   srcDoc: preview,
                   className: cn(
                     "mx-auto block h-full min-h-[80vh] rounded-md border bg-white shadow-sm",
@@ -634,7 +706,7 @@ function EditorHeader({
           }
         ) }),
         /* @__PURE__ */ jsxs2(DialogContent, { className: "flex !max-w-4xl flex-col", children: [
-          /* @__PURE__ */ jsx7(DialogHeader, { children: /* @__PURE__ */ jsx7(DialogTitle, { children: "Source code" }) }),
+          /* @__PURE__ */ jsx7(DialogHeader, { children: /* @__PURE__ */ jsx7(DialogTitle, { children: labels.sourceCode }) }),
           /* @__PURE__ */ jsxs2(Tabs, { defaultValue: "mjml", className: "min-h-0 flex-1", children: [
             /* @__PURE__ */ jsxs2(TabsList, { children: [
               /* @__PURE__ */ jsx7(TabsTrigger, { value: "mjml", children: "MJML" }),
@@ -667,7 +739,7 @@ function EditorHeader({
                     size: "sm",
                     onClick: () => {
                       void navigator.clipboard?.writeText(code[kind]);
-                      toast.success(`${kind.toUpperCase()} copied.`);
+                      toast.success(labels.copied(kind.toUpperCase()));
                     },
                     children: [
                       /* @__PURE__ */ jsx7(Copy, {}),
@@ -693,7 +765,7 @@ function EditorHeader({
               onClick: () => download(`${base}.html`, api?.getCompiledHtml() ?? "", "text/html"),
               className: "flex w-full flex-col rounded px-2 py-1.5 text-left text-sm hover:bg-muted",
               children: [
-                /* @__PURE__ */ jsx7("span", { className: "font-medium", children: "Export HTML" }),
+                /* @__PURE__ */ jsx7("span", { className: "font-medium", children: labels.exportHtml }),
                 /* @__PURE__ */ jsxs2("span", { className: "text-xs text-muted-foreground", children: [
                   base,
                   ".html"
@@ -707,7 +779,7 @@ function EditorHeader({
               onClick: () => download(`${base}.mjml`, api?.getMjml() ?? "", "text/plain"),
               className: "flex w-full flex-col rounded px-2 py-1.5 text-left text-sm hover:bg-muted",
               children: [
-                /* @__PURE__ */ jsx7("span", { className: "font-medium", children: "Export MJML" }),
+                /* @__PURE__ */ jsx7("span", { className: "font-medium", children: labels.exportMjml }),
                 /* @__PURE__ */ jsxs2("span", { className: "text-xs text-muted-foreground", children: [
                   base,
                   ".mjml"
@@ -1080,17 +1152,6 @@ function MessageScrollerButton({
 
 // src/components/chat/ChatPanel.tsx
 import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
-var TOOL_LABELS = {
-  get_document: "Reading document",
-  get_section: "Reading section",
-  set_document: "Saving whole email",
-  set_section: "Replacing section",
-  insert_section: "Adding section",
-  remove_section: "Removing section",
-  generate_image: "Generating image",
-  list_open_comments: "Reading comments",
-  resolve_comment: "Resolving comment"
-};
 var APPLY_COMMENTS_PROMPT = "Apply changes based on all open section comments. After each successful change mark the comment as resolved and summarize what you changed.";
 var MUTATING_TOOLS = /* @__PURE__ */ new Set([
   "set_document",
@@ -1124,30 +1185,41 @@ function toBlocks(parts) {
     }
     if (part.type === "text") {
       if (!part.text.trim()) continue;
-      blocks.push({ kind: "text", text: part.text });
+      blocks.push({ kind: "text", text: part.text, narration: false });
+    }
+  }
+  let seenTools = false;
+  for (let i = blocks.length - 1; i >= 0; i--) {
+    const block = blocks[i];
+    if (block.kind === "tools") seenTools = true;
+    else if (block.kind === "text" && seenTools) {
+      blocks[i] = { kind: "text", text: block.text, narration: true };
     }
   }
   return blocks;
 }
 function ToolMarker({ tool }) {
+  const labels = useLabels();
   const name = tool.type.slice(5);
   const done = tool.state === "output-available";
   const failed = tool.state === "output-error";
   return /* @__PURE__ */ jsxs4(Marker, { className: cn(failed ? "text-destructive" : "text-panel-fg"), children: [
     /* @__PURE__ */ jsx14(MarkerIcon, { children: failed ? /* @__PURE__ */ jsx14(TriangleAlert, {}) : done ? /* @__PURE__ */ jsx14(Check, { className: "text-emerald-400" }) : /* @__PURE__ */ jsx14(Loader2, { className: "animate-spin" }) }),
     /* @__PURE__ */ jsxs4(MarkerContent, { children: [
-      TOOL_LABELS[name] ?? name,
+      labels.toolLabels[name] ?? name,
       failed && tool.errorText ? `: ${tool.errorText}` : ""
     ] })
   ] });
 }
 function BusyMarker() {
+  const labels = useLabels();
   return /* @__PURE__ */ jsxs4(Marker, { className: "text-panel-fg", children: [
     /* @__PURE__ */ jsx14(MarkerIcon, { children: /* @__PURE__ */ jsx14(Loader2, { className: "animate-spin" }) }),
-    /* @__PURE__ */ jsx14(MarkerContent, { children: "Agent is working\u2026" })
+    /* @__PURE__ */ jsx14(MarkerContent, { children: labels.agentWorking })
   ] });
 }
 function ToolActivity({ tools }) {
+  const labels = useLabels();
   const running = tools.filter((t) => t.state !== "output-available" && t.state !== "output-error");
   const finished = tools.filter(
     (t) => t.state === "output-available" || t.state === "output-error"
@@ -1157,7 +1229,7 @@ function ToolActivity({ tools }) {
     finished.length > 0 && /* @__PURE__ */ jsxs4(Collapsible, { children: [
       /* @__PURE__ */ jsxs4(CollapsibleTrigger, { className: "group/col flex w-full items-center gap-1.5 text-left text-xs font-medium text-panel-fg hover:text-panel-fg", children: [
         /* @__PURE__ */ jsx14(ChevronRight, { className: "size-3.5 shrink-0 transition-transform group-data-[state=open]/col:rotate-90" }),
-        /* @__PURE__ */ jsx14("span", { children: failedCount > 0 ? `Completed steps (${finished.length}, ${failedCount} failed)` : `Completed steps (${finished.length})` })
+        /* @__PURE__ */ jsx14("span", { children: labels.completedSteps(finished.length, failedCount) })
       ] }),
       /* @__PURE__ */ jsx14(CollapsibleContent, { className: "mt-1 space-y-0.5 pl-1", children: finished.map((t, i) => /* @__PURE__ */ jsx14(ToolMarker, { tool: t }, `f${i}`)) })
     ] }),
@@ -1165,11 +1237,12 @@ function ToolActivity({ tools }) {
   ] });
 }
 function ReasoningBlock({ text }) {
+  const labels = useLabels();
   return /* @__PURE__ */ jsx14("div", { className: "rounded-lg border border-panel-border bg-panel-elevated/60 p-2", children: /* @__PURE__ */ jsxs4(Collapsible, { children: [
     /* @__PURE__ */ jsxs4(CollapsibleTrigger, { className: "group/col flex w-full items-center gap-1.5 text-left text-xs font-medium text-panel-muted-fg hover:text-panel-fg", children: [
       /* @__PURE__ */ jsx14(ChevronRight, { className: "size-3.5 shrink-0 transition-transform group-data-[state=open]/col:rotate-90" }),
       /* @__PURE__ */ jsx14(Brain, { className: "size-3.5 shrink-0" }),
-      /* @__PURE__ */ jsx14("span", { children: "Reasoning" })
+      /* @__PURE__ */ jsx14("span", { children: labels.reasoning })
     ] }),
     /* @__PURE__ */ jsx14(CollapsibleContent, { className: "mt-1.5 pl-1 text-xs whitespace-pre-wrap text-panel-muted-fg", children: text })
   ] }) });
@@ -1184,6 +1257,7 @@ function ChatPanel({
   onSectionEditStart,
   onSectionEditEnd
 }) {
+  const labels = useLabels();
   const [input, setInput] = useState2("");
   const taRef = useRef(null);
   const times = useRef(/* @__PURE__ */ new Map());
@@ -1206,7 +1280,7 @@ function ChatPanel({
     onFinish: onAgentFinish,
     onError: (e) => {
       console.error("chat error:", e);
-      toast2.error("Agent chat error.");
+      toast2.error(labels.chatError);
     }
   });
   const firedTools = useRef(/* @__PURE__ */ new Set());
@@ -1268,8 +1342,8 @@ function ChatPanel({
       /* @__PURE__ */ jsx14(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs4(MessageScrollerContent, { className: "p-3", children: [
         messages.length === 0 ? /* @__PURE__ */ jsx14(Empty, { className: "h-full", children: /* @__PURE__ */ jsxs4(EmptyHeader, { children: [
           /* @__PURE__ */ jsx14(EmptyMedia, { variant: "icon", children: /* @__PURE__ */ jsx14(MessageSquare2, {}) }),
-          /* @__PURE__ */ jsx14(EmptyTitle, { children: "Start a conversation with the agent" }),
-          /* @__PURE__ */ jsx14(EmptyDescription, { children: "Describe the email (goal, tone, content) and paste your data \u2014 the agent will design the sections and images." })
+          /* @__PURE__ */ jsx14(EmptyTitle, { children: labels.chatEmptyTitle }),
+          /* @__PURE__ */ jsx14(EmptyDescription, { children: labels.chatEmptyDescription })
         ] }) }) : messages.map((message, mi) => {
           const isUser = message.role === "user";
           const isLast = mi === messages.length - 1;
@@ -1293,6 +1367,17 @@ function ChatPanel({
                       if (block.kind === "reasoning") {
                         return /* @__PURE__ */ jsx14(ReasoningBlock, { text: block.text }, i);
                       }
+                      if (block.narration && !isUser) {
+                        return /* @__PURE__ */ jsx14(
+                          "div",
+                          {
+                            "data-slot": "narration",
+                            className: "px-1 text-xs leading-relaxed text-panel-muted-fg [&_a]:text-brand [&_code]:!bg-white/10 [&_p]:my-0.5",
+                            children: /* @__PURE__ */ jsx14(Markdown, { children: block.text })
+                          },
+                          i
+                        );
+                      }
                       return /* @__PURE__ */ jsx14(
                         Bubble,
                         {
@@ -1333,7 +1418,8 @@ function ChatPanel({
           onClick: () => void send(APPLY_COMMENTS_PROMPT),
           children: [
             /* @__PURE__ */ jsx14(Sparkles, {}),
-            " Apply changes from comments"
+            " ",
+            labels.applyComments
           ]
         }
       ),
@@ -1352,7 +1438,7 @@ function ChatPanel({
                 ref: taRef,
                 rows: 2,
                 className: "max-h-40 min-h-14 resize-none border-0 bg-transparent px-3 pt-2.5 text-panel-fg shadow-none placeholder:text-panel-muted-fg focus-visible:ring-0",
-                placeholder: "Describe what you want to change\u2026 (Enter = send, Shift+Enter = new line)",
+                placeholder: labels.chatPlaceholder,
                 value: input,
                 onChange: (e) => {
                   setInput(e.target.value);
@@ -1377,7 +1463,8 @@ function ChatPanel({
                   onClick: () => void stop(),
                   children: [
                     /* @__PURE__ */ jsx14(Square, {}),
-                    " Stop"
+                    " ",
+                    labels.stop
                   ]
                 }
               ),
@@ -1390,7 +1477,8 @@ function ChatPanel({
                   className: "bg-brand text-brand-fg hover:bg-brand/90",
                   children: [
                     /* @__PURE__ */ jsx14(Send, {}),
-                    " Send"
+                    " ",
+                    labels.send
                   ]
                 }
               )
@@ -1404,7 +1492,7 @@ function ChatPanel({
 
 // src/components/comments/CanvasComments.tsx
 import { useEditorMaybe } from "@grapesjs/react";
-import { useCallback, useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
 import { Check as Check2, MessageSquarePlus, X as X2 } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
 var keyOf = (c) => c.objectId ? `obj-${c.objectId}` : `sec-${c.sectionId}`;
@@ -1417,6 +1505,7 @@ function CanvasComments({
   onOpenCountChange
 }) {
   const commentStore = useCommentStore();
+  const labels = useLabels();
   const editor = useEditorMaybe();
   const containerRef = useRef2(null);
   const [comments, setComments] = useState3([]);
@@ -1430,11 +1519,11 @@ function CanvasComments({
   useEffect3(() => {
     reload();
   }, [reload, refreshSignal]);
-  const open = useMemo(() => comments.filter((c) => c.status === "open"), [comments]);
+  const open = useMemo2(() => comments.filter((c) => c.status === "open"), [comments]);
   useEffect3(() => {
     onOpenCountChange(open.length);
   }, [open.length, onOpenCountChange]);
-  const pins = useMemo(() => {
+  const pins = useMemo2(() => {
     const map = /* @__PURE__ */ new Map();
     for (const c of open) {
       const k = keyOf(c);
@@ -1605,7 +1694,7 @@ function CanvasComments({
                 " ",
                 /* @__PURE__ */ jsx15("span", { className: "font-medium text-foreground", children: activeTarget.objectLabel })
               ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
-                "Comment on the whole section",
+                labels.commentOnSection,
                 " ",
                 /* @__PURE__ */ jsx15("code", { className: "font-mono", children: activeTarget?.sectionId })
               ] }) }),
@@ -1614,14 +1703,14 @@ function CanvasComments({
                 {
                   type: "button",
                   onClick: closePopover,
-                  "aria-label": "Close",
+                  "aria-label": labels.closeComments,
                   className: "-mr-1 -mt-0.5 shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
                   children: /* @__PURE__ */ jsx15(X2, { className: "size-4" })
                 }
               )
             ] }),
             /* @__PURE__ */ jsxs5("div", { className: "max-h-64 space-y-2 overflow-y-auto p-3", children: [
-              activeComments.length === 0 && /* @__PURE__ */ jsx15("p", { className: "text-xs text-muted-foreground", children: "No comments yet \u2014 add the first one." }),
+              activeComments.length === 0 && /* @__PURE__ */ jsx15("p", { className: "text-xs text-muted-foreground", children: labels.noCommentsYet }),
               activeComments.map((c) => /* @__PURE__ */ jsxs5("div", { className: "rounded-md border bg-muted/40 p-2 text-sm", children: [
                 /* @__PURE__ */ jsx15("p", { className: "whitespace-pre-wrap", children: c.body }),
                 /* @__PURE__ */ jsxs5(
@@ -1631,7 +1720,8 @@ function CanvasComments({
                     className: "mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground",
                     children: [
                       /* @__PURE__ */ jsx15(Check2, { className: "size-3" }),
-                      " Resolve"
+                      " ",
+                      labels.resolveComment
                     ]
                   }
                 )
@@ -1644,7 +1734,7 @@ function CanvasComments({
                   autoFocus: true,
                   value: body,
                   onChange: (e) => setBody(e.target.value),
-                  placeholder: "Add a comment\u2026 (\u2318/Ctrl+Enter to send)",
+                  placeholder: labels.addCommentPlaceholder,
                   className: "min-h-14 resize-none text-sm",
                   onKeyDown: (e) => {
                     if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
@@ -1656,7 +1746,8 @@ function CanvasComments({
               ),
               /* @__PURE__ */ jsx15("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ jsxs5(Button, { size: "sm", disabled: !body.trim(), onClick: () => void submit(), children: [
                 /* @__PURE__ */ jsx15(MessageSquarePlus, {}),
-                " Add"
+                " ",
+                labels.addComment
               ] }) })
             ] })
           ]
@@ -1667,7 +1758,10 @@ function CanvasComments({
 }
 
 export {
+  DEFAULT_LABELS,
+  mergeLabels,
   EditorStoreProvider,
+  useLabels,
   useDocumentStore,
   useCommentStore,
   EditorHeader,
@@ -1676,4 +1770,4 @@ export {
   CanvasComments,
   STARTER_MJML
 };
-//# sourceMappingURL=chunk-YAKRVIM2.js.map
+//# sourceMappingURL=chunk-XAEUCHL4.js.map