@mjml-agent-editor/editor 0.1.4 → 0.1.6

package/dist/index.cjs

@@ -33,24 +33,101 @@ var index_exports = {};
 __export(index_exports, {
   CanvasComments: () => CanvasComments,
   ChatPanel: () => ChatPanel,
+  DEFAULT_LABELS: () => DEFAULT_LABELS,
   EditorHeader: () => EditorHeader,
   EditorStoreProvider: () => EditorStoreProvider,
   Markdown: () => Markdown,
   STARTER_MJML: () => import_core.STARTER_MJML,
+  mergeLabels: () => mergeLabels,
   useCommentStore: () => useCommentStore,
-  useDocumentStore: () => useDocumentStore
+  useDocumentStore: () => useDocumentStore,
+  useLabels: () => useLabels
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/stores.tsx
 var import_react = require("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
 var import_jsx_runtime = require("react/jsx-runtime");
 var StoreContext = (0, import_react.createContext)(null);
+var LabelContext = (0, import_react.createContext)(null);
 function EditorStoreProvider({
   stores,
+  labels,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StoreContext.Provider, { value: stores, children });
+  const merged = (0, import_react.useMemo)(() => mergeLabels(labels), [labels]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StoreContext.Provider, { value: stores, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelContext.Provider, { value: merged, children }) });
+}
+function useLabels() {
+  return (0, import_react.useContext)(LabelContext) ?? mergeLabels();
 }
 function useStores() {
   const stores = (0, import_react.useContext)(StoreContext);
@@ -553,29 +630,24 @@ function DialogTitle({ className, ...props }) {
 
 // src/components/editor/EditorHeader.tsx
 var import_jsx_runtime13 = require("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__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Monitor, { className: "size-3.5" }),
   Mobile: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Smartphone, { className: "size-3.5" })
 };
 function SaveBadge({ status }) {
+  const labels = useLabels();
   if (status === "idle") return null;
   if (status === "saving")
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center gap-1 text-xs text-panel-muted-fg", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Spinner, { className: "size-3" }),
       " ",
-      SAVE_LABEL.saving
+      labels.saving
     ] });
-  if (status === "error") return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "destructive", children: SAVE_LABEL.error });
+  if (status === "error") return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "destructive", children: labels.saveFailed });
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "text-xs text-emerald-400", children: [
     "\u2713 ",
-    SAVE_LABEL.saved
+    labels.saved
   ] });
 }
 function slugify(name) {
@@ -598,6 +670,7 @@ function EditorHeader({
   homeLink
 }) {
   const documents = useDocumentStore();
+  const labels = useLabels();
   const [name, setName] = (0, import_react2.useState)("");
   const [state, setState] = (0, import_react2.useState)({
     device: "Desktop",
@@ -623,7 +696,7 @@ function EditorHeader({
     try {
       await documents.save(docId, { name: n });
     } catch {
-      import_sonner.toast.error("Failed to rename.");
+      import_sonner.toast.error(labels.renameFailed);
     }
   };
   const devices = api?.getDevices() ?? [];
@@ -631,7 +704,7 @@ function EditorHeader({
   const openCode = () => setCode({ mjml: api?.getMjml() ?? "", html: api?.getCompiledHtml() ?? "" });
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("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__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Mail, { className: "size-4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "hidden text-sm font-semibold sm:inline", children: "MJML Editor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "hidden text-sm font-semibold sm:inline", children: labels.appName }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Separator, { orientation: "vertical", className: "mx-1 !h-5 bg-panel-border" }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Input,
@@ -641,7 +714,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__ */ (0, import_jsx_runtime13.jsx)(Separator, { orientation: "vertical", className: "mx-1 !h-5 bg-panel-border" }),
@@ -679,7 +752,7 @@ function EditorHeader({
           children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Undo2, {})
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipContent, { children: "Undo" })
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipContent, { children: labels.undo })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Tooltip, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -693,7 +766,7 @@ function EditorHeader({
           children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Redo2, {})
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipContent, { children: "Redo" })
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipContent, { children: labels.redo })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Separator, { orientation: "vertical", className: "mx-1 !h-5 bg-panel-border max-xl:hidden" }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Popover, { children: [
@@ -704,7 +777,7 @@ function EditorHeader({
           size: "sm",
           className: cn(darkGhost, "gap-1.5 rounded-md border border-panel-border max-xl:hidden"),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-panel-muted-fg", children: "Content width" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-panel-muted-fg", children: labels.contentWidth }),
             state.contentWidth,
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.ChevronDown, { className: "size-3.5" })
           ]
@@ -766,7 +839,8 @@ function EditorHeader({
             onClick: () => setPreview(api?.getCompiledHtml() ?? ""),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Eye, {}),
-              " Preview"
+              " ",
+              labels.preview
             ]
           }
         ) }),
@@ -778,7 +852,8 @@ function EditorHeader({
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex h-12 shrink-0 items-center justify-between border-b bg-white px-4", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DialogTitle, { className: "text-sm", children: [
-                  "Preview \u2014 ",
+                  labels.preview,
+                  " \u2014 ",
                   name
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -805,13 +880,13 @@ function EditorHeader({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "ghost", size: "icon", "aria-label": "Close preview", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.X, {}) }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "ghost", size: "icon", "aria-label": labels.closePreview, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.X, {}) }) })
                 ] })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "min-h-0 flex-1 overflow-auto p-6", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "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",
@@ -838,7 +913,7 @@ function EditorHeader({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DialogContent, { className: "flex !max-w-4xl flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogTitle, { children: "Source code" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogTitle, { children: labels.sourceCode }) }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Tabs, { defaultValue: "mjml", className: "min-h-0 flex-1", children: [
             /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(TabsList, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TabsTrigger, { value: "mjml", children: "MJML" }),
@@ -871,7 +946,7 @@ function EditorHeader({
                     size: "sm",
                     onClick: () => {
                       void navigator.clipboard?.writeText(code[kind]);
-                      import_sonner.toast.success(`${kind.toUpperCase()} copied.`);
+                      import_sonner.toast.success(labels.copied(kind.toUpperCase()));
                     },
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Copy, {}),
@@ -897,7 +972,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__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-medium", children: "Export HTML" }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-medium", children: labels.exportHtml }),
                 /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
                   base,
                   ".html"
@@ -911,7 +986,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__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-medium", children: "Export MJML" }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-medium", children: labels.exportMjml }),
                 /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
                   base,
                   ".mjml"
@@ -1365,17 +1440,6 @@ function MessageScrollerButton({
 
 // src/components/chat/ChatPanel.tsx
 var import_jsx_runtime22 = require("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",
@@ -1409,30 +1473,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__ */ (0, import_jsx_runtime22.jsxs)(Marker, { className: cn(failed ? "text-destructive" : "text-panel-fg"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MarkerIcon, { children: failed ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.TriangleAlert, {}) : done ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.Check, { className: "text-emerald-400" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.Loader2, { className: "animate-spin" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(MarkerContent, { children: [
-      TOOL_LABELS[name] ?? name,
+      labels.toolLabels[name] ?? name,
       failed && tool.errorText ? `: ${tool.errorText}` : ""
     ] })
   ] });
 }
 function BusyMarker() {
+  const labels = useLabels();
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Marker, { className: "text-panel-fg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MarkerIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.Loader2, { className: "animate-spin" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MarkerContent, { children: "Agent is working\u2026" })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(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"
@@ -1442,7 +1517,7 @@ function ToolActivity({ tools }) {
     finished.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Collapsible, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(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__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.ChevronRight, { className: "size-3.5 shrink-0 transition-transform group-data-[state=open]/col:rotate-90" }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: failedCount > 0 ? `Completed steps (${finished.length}, ${failedCount} failed)` : `Completed steps (${finished.length})` })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: labels.completedSteps(finished.length, failedCount) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CollapsibleContent, { className: "mt-1 space-y-0.5 pl-1", children: finished.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolMarker, { tool: t }, `f${i}`)) })
     ] }),
@@ -1450,11 +1525,12 @@ function ToolActivity({ tools }) {
   ] });
 }
 function ReasoningBlock({ text }) {
+  const labels = useLabels();
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "rounded-lg border border-panel-border bg-panel-elevated/60 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Collapsible, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(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__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.ChevronRight, { className: "size-3.5 shrink-0 transition-transform group-data-[state=open]/col:rotate-90" }),
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.Brain, { className: "size-3.5 shrink-0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Reasoning" })
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: labels.reasoning })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CollapsibleContent, { className: "mt-1.5 pl-1 text-xs whitespace-pre-wrap text-panel-muted-fg", children: text })
   ] }) });
@@ -1469,6 +1545,7 @@ function ChatPanel({
   onSectionEditStart,
   onSectionEditEnd
 }) {
+  const labels = useLabels();
   const [input, setInput] = (0, import_react5.useState)("");
   const taRef = (0, import_react5.useRef)(null);
   const times = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
@@ -1491,7 +1568,7 @@ function ChatPanel({
     onFinish: onAgentFinish,
     onError: (e) => {
       console.error("chat error:", e);
-      import_sonner2.toast.error("Agent chat error.");
+      import_sonner2.toast.error(labels.chatError);
     }
   });
   const firedTools = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
@@ -1553,8 +1630,8 @@ function ChatPanel({
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MessageScrollerViewport, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(MessageScrollerContent, { className: "p-3", children: [
         messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Empty, { className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(EmptyHeader, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EmptyMedia, { variant: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.MessageSquare, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EmptyTitle, { children: "Start a conversation with the agent" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EmptyDescription, { children: "Describe the email (goal, tone, content) and paste your data \u2014 the agent will design the sections and images." })
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EmptyTitle, { children: labels.chatEmptyTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EmptyDescription, { children: labels.chatEmptyDescription })
         ] }) }) : messages.map((message, mi) => {
           const isUser = message.role === "user";
           const isLast = mi === messages.length - 1;
@@ -1578,6 +1655,17 @@ function ChatPanel({
                       if (block.kind === "reasoning") {
                         return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ReasoningBlock, { text: block.text }, i);
                       }
+                      if (block.narration && !isUser) {
+                        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                          "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__ */ (0, import_jsx_runtime22.jsx)(Markdown, { children: block.text })
+                          },
+                          i
+                        );
+                      }
                       return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                         Bubble,
                         {
@@ -1618,7 +1706,8 @@ function ChatPanel({
           onClick: () => void send(APPLY_COMMENTS_PROMPT),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.Sparkles, {}),
-            " Apply changes from comments"
+            " ",
+            labels.applyComments
           ]
         }
       ),
@@ -1637,7 +1726,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);
@@ -1662,7 +1751,8 @@ function ChatPanel({
                   onClick: () => void stop(),
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.Square, {}),
-                    " Stop"
+                    " ",
+                    labels.stop
                   ]
                 }
               ),
@@ -1675,7 +1765,8 @@ function ChatPanel({
                   className: "bg-brand text-brand-fg hover:bg-brand/90",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.Send, {}),
-                    " Send"
+                    " ",
+                    labels.send
                   ]
                 }
               )
@@ -1702,6 +1793,7 @@ function CanvasComments({
   onOpenCountChange
 }) {
   const commentStore = useCommentStore();
+  const labels = useLabels();
   const editor = (0, import_react6.useEditorMaybe)();
   const containerRef = (0, import_react7.useRef)(null);
   const [comments, setComments] = (0, import_react7.useState)([]);
@@ -1890,7 +1982,7 @@ function CanvasComments({
                 " ",
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "font-medium text-foreground", children: activeTarget.objectLabel })
               ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-                "Comment on the whole section",
+                labels.commentOnSection,
                 " ",
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("code", { className: "font-mono", children: activeTarget?.sectionId })
               ] }) }),
@@ -1899,14 +1991,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__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react6.X, { className: "size-4" })
                 }
               )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "max-h-64 space-y-2 overflow-y-auto p-3", children: [
-              activeComments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-xs text-muted-foreground", children: "No comments yet \u2014 add the first one." }),
+              activeComments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-xs text-muted-foreground", children: labels.noCommentsYet }),
               activeComments.map((c) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "rounded-md border bg-muted/40 p-2 text-sm", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "whitespace-pre-wrap", children: c.body }),
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
@@ -1916,7 +2008,8 @@ function CanvasComments({
                     className: "mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground",
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react6.Check, { className: "size-3" }),
-                      " Resolve"
+                      " ",
+                      labels.resolveComment
                     ]
                   }
                 )
@@ -1929,7 +2022,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)) {
@@ -1941,7 +2034,8 @@ function CanvasComments({
               ),
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Button, { size: "sm", disabled: !body.trim(), onClick: () => void submit(), children: [
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react6.MessageSquarePlus, {}),
-                " Add"
+                " ",
+                labels.addComment
               ] }) })
             ] })
           ]
@@ -1954,11 +2048,14 @@ function CanvasComments({
 0 && (module.exports = {
   CanvasComments,
   ChatPanel,
+  DEFAULT_LABELS,
   EditorHeader,
   EditorStoreProvider,
   Markdown,
   STARTER_MJML,
+  mergeLabels,
   useCommentStore,
-  useDocumentStore
+  useDocumentStore,
+  useLabels
 });
 //# sourceMappingURL=index.cjs.map