@mjml-agent-editor/editor 0.1.5 → 0.1.7

package/README.md

@@ -60,11 +60,23 @@ warning about it:
 @source "../../node_modules/@mjml-agent-editor/editor/dist";
 ```
 
-## Routing
+## Routing and branding
 
 The package has no router dependency. `EditorHeader` takes a `homeLink` node, so a Next.js
 host passes `<Link href="/">` and anything else passes an anchor.
 
+`logo` works the same way. A brand mark belongs to the host, so the header renders whatever
+node it is given and falls back to a generic envelope:
+
+```tsx
+<EditorHeader
+  docId={id}
+  api={api}
+  openCount={n}
+  logo={<img src="/logo.png" alt="" className="size-8" />}
+/>
+```
+
 ## Data access
 
 Nothing here talks to a database. The host passes a `DocumentStore` and a `CommentStore`
@@ -86,6 +98,31 @@ satisfying the two interfaces works, including an in-memory object.
 
 Forgetting the provider throws with an explanation rather than failing on a null read.
 
+## Copy
+
+Every word the editor renders comes from a dictionary with English defaults, so a host
+building in another language overrides rather than forks:
+
+```tsx
+<EditorStoreProvider
+  stores={stores}
+  labels={{
+    appName: "Edytor MJML",
+    send: "Wyślij",
+    agentWorking: "Agent pracuje…",
+    toolLabels: { set_section: "Podmieniam sekcję" },
+  }}
+>
+```
+
+Overrides are shallow-merged, so anything omitted stays English. `toolLabels` is the one
+exception and merges key by key — renaming one step would otherwise silently drop the other
+eight. `DEFAULT_LABELS` and the `EditorLabels` type are exported if you want to see the full
+list or build a complete translation.
+
+Values that interpolate are functions rather than format strings — `copied(kind)`,
+`completedSteps(count, failed)` — so word order belongs to the translator.
+
 ## Reaching the agent
 
 `ChatPanel` posts to `/api/chat` on the same origin by default, which is what

package/dist/canvas.cjs

@@ -44,8 +44,80 @@ var import_core2 = require("@mjml-agent-editor/core");
 
 // 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 useLabels() {
+  return (0, import_react.useContext)(LabelContext) ?? mergeLabels();
+}
 function useStores() {
   const stores = (0, import_react.useContext)(StoreContext);
   if (!stores) {
@@ -223,6 +295,7 @@ function CanvasComments({
   onOpenCountChange
 }) {
   const commentStore = useCommentStore();
+  const labels = useLabels();
   const editor = (0, import_react2.useEditorMaybe)();
   const containerRef = (0, import_react3.useRef)(null);
   const [comments, setComments] = (0, import_react3.useState)([]);
@@ -411,7 +484,7 @@ function CanvasComments({
                 " ",
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-medium text-foreground", children: activeTarget.objectLabel })
               ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-                "Comment on the whole section",
+                labels.commentOnSection,
                 " ",
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: "font-mono", children: activeTarget?.sectionId })
               ] }) }),
@@ -420,14 +493,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_runtime7.jsx)(import_lucide_react2.X, { className: "size-4" })
                 }
               )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "max-h-64 space-y-2 overflow-y-auto p-3", children: [
-              activeComments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-xs text-muted-foreground", children: "No comments yet \u2014 add the first one." }),
+              activeComments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-xs text-muted-foreground", children: labels.noCommentsYet }),
               activeComments.map((c) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rounded-md border bg-muted/40 p-2 text-sm", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "whitespace-pre-wrap", children: c.body }),
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
@@ -437,7 +510,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_runtime7.jsx)(import_lucide_react2.Check, { className: "size-3" }),
-                      " Resolve"
+                      " ",
+                      labels.resolveComment
                     ]
                   }
                 )
@@ -450,7 +524,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)) {
@@ -462,7 +536,8 @@ function CanvasComments({
               ),
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Button, { size: "sm", disabled: !body.trim(), onClick: () => void submit(), children: [
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.MessageSquarePlus, {}),
-                " Add"
+                " ",
+                labels.addComment
               ] }) })
             ] })
           ]
@@ -603,13 +678,13 @@ function wrapSelectionStyle(el, style) {
   } catch {
   }
 }
-function setupRichText(editor) {
+function setupRichText(editor, labels) {
   const rte = editor.RichTextEditor;
   if (!rte || rte.__customActions) return;
   rte.__customActions = true;
   const val = (action, sel) => action.btn?.querySelector(sel)?.value ?? "";
   rte.add("fontName", {
-    icon: `<select class="gjs-rte-select" title="Font"><option value="">Font</option>${RTE_FONTS.map(
+    icon: `<select class="gjs-rte-select" title="${labels.rteFont}"><option value="">${labels.rteFont}</option>${RTE_FONTS.map(
       (f) => `<option value="${f}">${f}</option>`
     ).join("")}</select>`,
     event: "change",
@@ -619,7 +694,7 @@ function setupRichText(editor) {
     }
   });
   rte.add("fontSize", {
-    icon: `<select class="gjs-rte-select" title="Size"><option value="">Size</option>${RTE_SIZES.map(
+    icon: `<select class="gjs-rte-select" title="${labels.rteSize}"><option value="">${labels.rteSize}</option>${RTE_SIZES.map(
       (s) => `<option value="${s}px">${s}</option>`
     ).join("")}</select>`,
     event: "change",
@@ -629,18 +704,19 @@ function setupRichText(editor) {
     }
   });
   rte.add("forecolor", {
-    icon: `<input type="color" class="gjs-rte-color" title="Text color" value="#000000">`,
+    icon: `<input type="color" class="gjs-rte-color" title="${labels.rteTextColor}" value="#000000">`,
     event: "change",
     result: (r, action) => r.exec("foreColor", val(action, "input"))
   });
   rte.add("hilitecolor", {
-    icon: `<input type="color" class="gjs-rte-color" title="Background color" value="#ffff00">`,
+    icon: `<input type="color" class="gjs-rte-color" title="${labels.rteBackgroundColor}" value="#ffff00">`,
     event: "change",
     result: (r, action) => r.exec("hiliteColor", val(action, "input"))
   });
 }
 function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
   const documents = useDocumentStore();
+  const labels = useLabels();
   const loadingRef = (0, import_react5.useRef)(false);
   const saveTimer = (0, import_react5.useRef)(null);
   const saveStatusRef = (0, import_react5.useRef)("idle");
@@ -720,7 +796,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         if (target) setComposeTarget(target);
       }
     });
-    setupRichText(editor);
+    setupRichText(editor, labels);
     const blockCategory = (label) => {
       const l = label.toLowerCase();
       if (/(column|section)/.test(l)) return "Layout";
@@ -774,7 +850,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         setSave("saved");
       } catch (e) {
         setSave("error");
-        import_sonner.toast.error("Failed to save changes.");
+        import_sonner.toast.error(labels.documentSaveFailed);
         throw e;
       }
     };
@@ -832,7 +908,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       const doc = await documents.get(docId);
       loadMjml(doc.mjml);
     } catch (e) {
-      import_sonner.toast.error("Failed to load the document.");
+      import_sonner.toast.error(labels.documentLoadFailed);
       console.error(e);
     } finally {
       setLoading(false);
@@ -969,6 +1045,7 @@ function LeftSidebar({
   markLayersSource
 }) {
   const editor = (0, import_react4.useEditorMaybe)();
+  const labels = useLabels();
   const [layersExpanded, setLayersExpanded] = (0, import_react5.useState)(false);
   const [blockSearch, setBlockSearch] = (0, import_react5.useState)("");
   const changeView = (v) => {
@@ -1026,7 +1103,7 @@ function LeftSidebar({
           {
             value: blockSearch,
             onChange: (e) => filterBlocks(e.target.value),
-            placeholder: "Search blocks\u2026",
+            placeholder: labels.searchBlocks,
             className: "h-8 border-panel-border bg-panel-elevated pr-10 pl-7 text-sm text-panel-fg placeholder:text-panel-muted-fg"
           }
         ),
@@ -1035,8 +1112,8 @@ function LeftSidebar({
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id: "gjs-blocks", className: "min-h-0 flex-1 overflow-y-auto" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("min-h-0 flex-1 overflow-y-auto", view !== "settings" && "hidden"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CollapseSection, { title: "Attributes", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id: "gjs-traits" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CollapseSection, { title: "Style", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id: "gjs-styles" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CollapseSection, { title: labels.attributes, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id: "gjs-traits" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CollapseSection, { title: labels.style, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id: "gjs-styles" }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "div",
@@ -1045,7 +1122,7 @@ function LeftSidebar({
         onMouseDownCapture: markLayersSource,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex items-center justify-between gap-2 border-b border-panel-border px-3 py-2 text-xs text-panel-muted-fg", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Expand all" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: labels.expandAll }),
             /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               Switch,
               {
@@ -1065,7 +1142,8 @@ function Breadcrumb({
   crumbs,
   onSelect
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex h-9 shrink-0 items-center gap-0.5 border-t border-border bg-surface px-3 text-xs text-muted-foreground", children: crumbs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-muted-foreground/60", children: "Select an element\u2026" }) : crumbs.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5", children: [
+  const labels = useLabels();
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex h-9 shrink-0 items-center gap-0.5 border-t border-border bg-surface px-3 text-xs text-muted-foreground", children: crumbs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-muted-foreground/60", children: labels.selectAnElement }) : crumbs.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5", children: [
     i > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronRight, { className: "size-3 opacity-40" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "button",