@kontakto/email-template-editor 2.4.0 → 2.6.0

package/dist/index.js

@@ -5,9 +5,12 @@ import { z } from 'zod';
 import { renderToStaticMarkup as renderToStaticMarkup$1 } from 'react-dom/server';
 import Handlebars from 'handlebars';
 import { createTheme, alpha, lighten, darken } from '@mui/material/styles';
+import { I18nProvider, Trans } from '@lingui/react';
 import { MenuItem, Stack, ThemeProvider, CssBaseline, useTheme, Drawer, Box, Tabs, Tab, Typography, Tooltip, IconButton, TextField, InputAdornment, Chip, CircularProgress, Alert, ToggleButtonGroup, ToggleButton, Snackbar, Menu, ListItemIcon, ListItemText, Divider as Divider$1, Dialog, DialogTitle, DialogContent, Button as Button$1, DialogActions, List, ListItemButton, InputBase, AlertTitle, FormControlLabel, Switch, InputLabel, Slider, ButtonBase, Popper, Paper, Fade } from '@mui/material';
-import { create } from 'zustand';
-import { AddOutlined, SearchOutlined, MonitorOutlined, PhoneIphoneOutlined, MoreVertOutlined, DriveFileRenameOutlineOutlined, ContentCopyOutlined, LibraryAddOutlined, FileUploadOutlined, FileDownloadOutlined, DeleteOutlined, InsertDriveFileOutlined, DescriptionOutlined, EditOutlined, PreviewOutlined, CodeOutlined, SubjectOutlined, DataObjectOutlined, LastPageOutlined, AppRegistrationOutlined, CloudUploadOutlined, SaveOutlined, SaveAsOutlined, ViewColumnSharp, ExpandMore, ChevronRight, KeyboardArrowUp, KeyboardArrowDown, FirstPageOutlined, MenuOutlined, GridOnOutlined, SquareOutlined, CheckOutlined, InputOutlined, DeleteOutline, RoundedCornerOutlined, AspectRatioOutlined, HeightOutlined, CollectionsOutlined, ErrorOutlineOutlined, VerticalAlignTopOutlined, VerticalAlignCenterOutlined, VerticalAlignBottomOutlined, SpaceBarOutlined, BusinessOutlined, ViewColumnOutlined, HtmlOutlined, Crop32Outlined, HorizontalRuleOutlined, ContactMailOutlined, AccountCircleOutlined, ImageOutlined, SmartButtonOutlined, NotesOutlined, HMobiledataOutlined, DashboardOutlined, CloseOutlined, AlignVerticalTopOutlined, AlignVerticalBottomOutlined, AlignHorizontalLeftOutlined, AlignHorizontalRightOutlined, FormatAlignLeftOutlined, FormatAlignCenterOutlined, FormatAlignRightOutlined, FormatLineSpacingOutlined, TextFieldsOutlined, FormatBoldOutlined, FormatItalicOutlined, LinkOutlined, ArrowUpwardOutlined, ArrowDownwardOutlined } from '@mui/icons-material';
+import { i18n } from '@lingui/core';
+import { create, useStore } from 'zustand';
+import { temporal } from 'zundo';
+import { AddOutlined, SearchOutlined, MonitorOutlined, PhoneIphoneOutlined, MoreVertOutlined, DriveFileRenameOutlineOutlined, ContentCopyOutlined, LibraryAddOutlined, FileUploadOutlined, FileDownloadOutlined, DeleteOutlined, InsertDriveFileOutlined, DescriptionOutlined, EditOutlined, PreviewOutlined, CodeOutlined, SubjectOutlined, DataObjectOutlined, UndoOutlined, RedoOutlined, LastPageOutlined, AppRegistrationOutlined, CloudUploadOutlined, SaveOutlined, SaveAsOutlined, ViewColumnSharp, ExpandMore, ChevronRight, KeyboardArrowUp, KeyboardArrowDown, FirstPageOutlined, MenuOutlined, GridOnOutlined, SquareOutlined, CheckOutlined, InputOutlined, DeleteOutline, RoundedCornerOutlined, AspectRatioOutlined, HeightOutlined, CollectionsOutlined, ErrorOutlineOutlined, VerticalAlignTopOutlined, VerticalAlignCenterOutlined, VerticalAlignBottomOutlined, SpaceBarOutlined, BusinessOutlined, ViewColumnOutlined, HtmlOutlined, Crop32Outlined, HorizontalRuleOutlined, ContactMailOutlined, AccountCircleOutlined, ImageOutlined, SmartButtonOutlined, NotesOutlined, HMobiledataOutlined, DashboardOutlined, CloseOutlined, AlignVerticalTopOutlined, AlignVerticalBottomOutlined, AlignHorizontalLeftOutlined, AlignHorizontalRightOutlined, FormatAlignLeftOutlined, FormatAlignCenterOutlined, FormatAlignRightOutlined, FormatLineSpacingOutlined, TextFieldsOutlined, FormatBoldOutlined, FormatItalicOutlined, LinkOutlined, ArrowUpwardOutlined, ArrowDownwardOutlined } from '@mui/icons-material';
 import { HexColorPicker, HexColorInput } from 'react-colorful';
 import hljs from 'highlight.js';
 import jsonHighlighter from 'highlight.js/lib/languages/json';
@@ -2000,6 +2003,37 @@ var THEME = createTheme(BASE_THEME, {
   ]
 });
 var theme_default = THEME;
+
+// src/locales/en/messages.ts
+var messages = JSON.parse('{"drawer.library":["Library"],"drawer.new-sample":["New sample"],"drawer.new-template":["New template"],"drawer.no-samples":["No samples available"],"drawer.no-samples-match":["No samples match your filters"],"drawer.no-templates":["No saved templates yet"],"drawer.no-templates-match":["No templates match your filters"],"drawer.search-samples":["Search samples"],"drawer.search-templates":["Search templates"],"drawer.sort-by":["Sort by"],"drawer.tab.outline":["Outline"],"drawer.tab.samples":["Samples"],"drawer.tab.templates":["Templates"],"drawer.tag.all":["All"],"panel.avatar-block":["Avatar block"],"panel.button-block":["Button block"],"panel.columns-block":["Columns block"],"panel.container-block":["Container block"],"panel.divider-block":["Divider block"],"panel.editor-appearance":["Editor appearance"],"panel.export":["Export"],"panel.global":["Global"],"panel.heading-block":["Heading block"],"panel.html-block":["HTML block"],"panel.image-block":["Image block"],"panel.signature-block":["Signature block"],"panel.spacer-block":["Spacer block"],"panel.template":["Template"],"panel.text-block":["Text block"],"savebar.error-saving":["Error saving"],"savebar.new":["New"],"savebar.new-template-created":["New template created"],"savebar.sample-prefix":["Sample"],"savebar.sample-saved":["Sample saved"],"savebar.save":["Save"],"savebar.save-as":["Save as\u2026"],"savebar.save-as-new":["Save as new\u2026"],"savebar.save-as-new-template":["Save as a new template"],"savebar.save-changes":["Save changes"],"savebar.save-changes-to-sample":["Save changes to this sample"],"savebar.start-fresh":["Start a fresh template"],"savebar.template-saved":["Template saved"],"sort.last-updated":["Last updated"],"sort.name":["Name (A\u2013Z)"],"sort.recently-created":["Recently created"],"style.alignment":["Alignment"],"style.background-color":["Background color"],"style.border-color":["Border color"],"style.border-radius":["Border radius"],"style.font-family":["Font family"],"style.font-size":["Font size"],"style.font-weight":["Font weight"],"style.letter-spacing":["Letter spacing"],"style.line-height":["Line height"],"style.padding":["Padding"],"style.text-color":["Text color"],"toolbar.bold":["Bold"],"toolbar.bold-shortcut":["Bold (Cmd+B)"],"toolbar.italic":["Italic"],"toolbar.italic-shortcut":["Italic (Cmd+I)"],"toolbar.link":["Link"],"toolbar.link-shortcut":["Link (Cmd+K)"],"tune.copy":["Copy block"],"tune.delete":["Delete"],"tune.move-down":["Move down"],"tune.move-up":["Move up"]}');
+
+// src/locales/fi/messages.ts
+var messages2 = JSON.parse('{"drawer.library":["Kirjasto"],"drawer.new-sample":["Uusi malli"],"drawer.new-template":["Uusi pohja"],"drawer.no-samples":["Ei malleja saatavilla"],"drawer.no-samples-match":["Mik\xE4\xE4n malli ei vastaa hakua"],"drawer.no-templates":["Ei tallennettuja pohjia"],"drawer.no-templates-match":["Mik\xE4\xE4n pohja ei vastaa hakua"],"drawer.search-samples":["Etsi malleja"],"drawer.search-templates":["Etsi pohjia"],"drawer.sort-by":["J\xE4rjestys"],"drawer.tab.outline":["Rakenne"],"drawer.tab.samples":["Mallit"],"drawer.tab.templates":["Pohjat"],"drawer.tag.all":["Kaikki"],"panel.avatar-block":["Avatarlohko"],"panel.button-block":["Painikelohko"],"panel.columns-block":["Sarakkeet"],"panel.container-block":["S\xE4ili\xF6lohko"],"panel.divider-block":["Erotin"],"panel.editor-appearance":["Editorin ulkoasu"],"panel.export":["Vienti"],"panel.global":["Yleiset"],"panel.heading-block":["Otsikkolohko"],"panel.html-block":["HTML-lohko"],"panel.image-block":["Kuvalohko"],"panel.signature-block":["Allekirjoituslohko"],"panel.spacer-block":["V\xE4lilohko"],"panel.template":["Pohja"],"panel.text-block":["Tekstilohko"],"savebar.error-saving":["Tallennus ep\xE4onnistui"],"savebar.new":["Uusi"],"savebar.new-template-created":["Uusi pohja luotu"],"savebar.sample-prefix":["Malli"],"savebar.sample-saved":["Malli tallennettu"],"savebar.save":["Tallenna"],"savebar.save-as":["Tallenna nimell\xE4\u2026"],"savebar.save-as-new":["Tallenna uutena\u2026"],"savebar.save-as-new-template":["Tallenna uutena pohjana"],"savebar.save-changes":["Tallenna muutokset"],"savebar.save-changes-to-sample":["Tallenna muutokset t\xE4h\xE4n malliin"],"savebar.start-fresh":["Aloita tyhj\xE4st\xE4 pohjasta"],"savebar.template-saved":["Pohja tallennettu"],"sort.last-updated":["Viimeksi p\xE4ivitetty"],"sort.name":["Nimi (A\u2013\xD6)"],"sort.recently-created":["\xC4skett\xE4in luotu"],"style.alignment":["Tasaus"],"style.background-color":["Taustav\xE4ri"],"style.border-color":["Reunan v\xE4ri"],"style.border-radius":["Reunan py\xF6ristys"],"style.font-family":["Fontti"],"style.font-size":["Fonttikoko"],"style.font-weight":["Fontin paksuus"],"style.letter-spacing":["Kirjainv\xE4li"],"style.line-height":["Rivikorkeus"],"style.padding":["T\xE4yte"],"style.text-color":["Tekstin v\xE4ri"],"toolbar.bold":["Lihavointi"],"toolbar.bold-shortcut":["Lihavointi (Cmd+B)"],"toolbar.italic":["Kursivointi"],"toolbar.italic-shortcut":["Kursivointi (Cmd+I)"],"toolbar.link":["Linkki"],"toolbar.link-shortcut":["Linkki (Cmd+K)"],"tune.copy":["Kopioi lohko"],"tune.delete":["Poista"],"tune.move-down":["Siirr\xE4 alas"],"tune.move-up":["Siirr\xE4 yl\xF6s"]}');
+
+// src/locales/sv/messages.ts
+var messages3 = JSON.parse('{"drawer.library":["Bibliotek"],"drawer.new-sample":["Ny mall"],"drawer.new-template":["Ny e-postmall"],"drawer.no-samples":["Inga exempel tillg\xE4ngliga"],"drawer.no-samples-match":["Inga exempel matchar dina filter"],"drawer.no-templates":["Inga sparade mallar \xE4nnu"],"drawer.no-templates-match":["Inga mallar matchar dina filter"],"drawer.search-samples":["S\xF6k exempel"],"drawer.search-templates":["S\xF6k mallar"],"drawer.sort-by":["Sortera efter"],"drawer.tab.outline":["Struktur"],"drawer.tab.samples":["Exempel"],"drawer.tab.templates":["Mallar"],"drawer.tag.all":["Alla"],"panel.avatar-block":["Avatarblock"],"panel.button-block":["Knappblock"],"panel.columns-block":["Kolumner"],"panel.container-block":["Beh\xE5llarblock"],"panel.divider-block":["Avgr\xE4nsare"],"panel.editor-appearance":["Editorns utseende"],"panel.export":["Exportera"],"panel.global":["Allm\xE4nt"],"panel.heading-block":["Rubrikblock"],"panel.html-block":["HTML-block"],"panel.image-block":["Bildblock"],"panel.signature-block":["Signaturblock"],"panel.spacer-block":["Mellanrumsblock"],"panel.template":["Mall"],"panel.text-block":["Textblock"],"savebar.error-saving":["Fel vid sparande"],"savebar.new":["Ny"],"savebar.new-template-created":["Ny mall skapad"],"savebar.sample-prefix":["Exempel"],"savebar.sample-saved":["Exempel sparat"],"savebar.save":["Spara"],"savebar.save-as":["Spara som\u2026"],"savebar.save-as-new":["Spara som ny\u2026"],"savebar.save-as-new-template":["Spara som en ny mall"],"savebar.save-changes":["Spara \xE4ndringar"],"savebar.save-changes-to-sample":["Spara \xE4ndringar till detta exempel"],"savebar.start-fresh":["Starta en ny mall"],"savebar.template-saved":["Mall sparad"],"sort.last-updated":["Senast uppdaterad"],"sort.name":["Namn (A\u2013\xD6)"],"sort.recently-created":["Nyligen skapad"],"style.alignment":["Justering"],"style.background-color":["Bakgrundsf\xE4rg"],"style.border-color":["Kantf\xE4rg"],"style.border-radius":["Kantradie"],"style.font-family":["Typsnitt"],"style.font-size":["Typsnittsstorlek"],"style.font-weight":["Typsnittsvikt"],"style.letter-spacing":["Teckenavst\xE5nd"],"style.line-height":["Radh\xF6jd"],"style.padding":["Utrymme"],"style.text-color":["Textf\xE4rg"],"toolbar.bold":["Fet"],"toolbar.bold-shortcut":["Fet (Cmd+B)"],"toolbar.italic":["Kursiv"],"toolbar.italic-shortcut":["Kursiv (Cmd+I)"],"toolbar.link":["L\xE4nk"],"toolbar.link-shortcut":["L\xE4nk (Cmd+K)"],"tune.copy":["Kopiera block"],"tune.delete":["Ta bort"],"tune.move-down":["Flytta ner"],"tune.move-up":["Flytta upp"]}');
+var SUPPORTED_LOCALES = ["en", "sv", "fi"];
+var CATALOGS = {
+  en: messages,
+  sv: messages3,
+  fi: messages2
+};
+var loaded = false;
+function activateLocale(locale) {
+  const resolved = SUPPORTED_LOCALES.includes(locale != null ? locale : "") ? locale : "en";
+  if (locale && resolved !== locale) {
+    console.warn(`[email-template-editor] Unsupported locale "${locale}", falling back to "en".`);
+  }
+  if (!loaded) {
+    i18n.load({ en: CATALOGS.en, sv: CATALOGS.sv, fi: CATALOGS.fi });
+    loaded = true;
+  }
+  i18n.activate(resolved);
+  return resolved;
+}
+function t(id, fallback) {
+  return i18n._(id, {}, { message: fallback != null ? fallback : id });
+}
 var EMPTY_DOCUMENT = {
   root: {
     type: "EmailLayout",
@@ -2012,20 +2046,48 @@ var EMPTY_DOCUMENT = {
     }
   }
 };
-var editorStateStore = create(() => ({
-  document: EMPTY_DOCUMENT,
-  selectedBlockId: null,
-  selectedSidebarTab: "styles",
-  selectedMainTab: "editor",
-  selectedScreenSize: "desktop",
-  inspectorDrawerOpen: true,
-  samplesDrawerOpen: true,
-  persistenceEnabled: false,
-  lastFocusedEditable: null,
-  hoveredBlockId: null,
-  draggingBlock: null,
-  workspaceBackground: "checkerboard"
-}));
+var COALESCE_MS = 300;
+function leadingThrottle(fn, wait) {
+  let last = Number.NEGATIVE_INFINITY;
+  return (...args) => {
+    const now = Date.now();
+    if (now - last >= wait) {
+      last = now;
+      fn(...args);
+    }
+  };
+}
+var editorStateStore = create()(
+  temporal(
+    () => ({
+      document: EMPTY_DOCUMENT,
+      selectedBlockId: null,
+      selectedSidebarTab: "styles",
+      selectedMainTab: "editor",
+      selectedScreenSize: "desktop",
+      inspectorDrawerOpen: true,
+      samplesDrawerOpen: true,
+      persistenceEnabled: false,
+      lastFocusedEditable: null,
+      hoveredBlockId: null,
+      draggingBlock: null,
+      workspaceBackground: "checkerboard"
+    }),
+    {
+      limit: 100,
+      // Only the document participates in history — selection, drawers, tabs
+      // and other UI state are intentionally excluded.
+      partialize: (state) => ({ document: state.document }),
+      // Skip UI-only state changes: if the document reference is unchanged,
+      // no history entry is recorded.
+      equality: (a, b) => a.document === b.document,
+      handleSet: (handleSet) => leadingThrottle(
+        (pastState, replace, currentState) => handleSet(pastState, replace, currentState),
+        COALESCE_MS
+      )
+    }
+  )
+);
 function useDocument() {
   return editorStateStore((s) => s.document);
 }
@@ -2068,11 +2130,15 @@ function setSidebarTab(selectedSidebarTab) {
   return editorStateStore.setState({ selectedSidebarTab });
 }
 function resetDocument(document2) {
-  return editorStateStore.setState({
+  const temporalApi = editorStateStore.temporal.getState();
+  temporalApi.pause();
+  editorStateStore.setState({
     document: document2,
     selectedSidebarTab: "styles",
     selectedBlockId: null
   });
+  temporalApi.clear();
+  temporalApi.resume();
 }
 function getDocument() {
   return editorStateStore.getState().document;
@@ -2083,6 +2149,9 @@ function setDocument(document2) {
     document: __spreadValues(__spreadValues({}, originalDocument), document2)
   });
 }
+function replaceDocument(document2) {
+  editorStateStore.setState({ document: document2 });
+}
 function toggleInspectorDrawerOpen() {
   const inspectorDrawerOpen = !editorStateStore.getState().inspectorDrawerOpen;
   return editorStateStore.setState({ inspectorDrawerOpen });
@@ -2127,6 +2196,18 @@ function setWorkspaceBackground(workspaceBackground) {
 function setLastFocusedEditable(lastFocusedEditable) {
   return editorStateStore.setState({ lastFocusedEditable });
 }
+function undo() {
+  editorStateStore.temporal.getState().undo();
+}
+function redo() {
+  editorStateStore.temporal.getState().redo();
+}
+function useCanUndo() {
+  return useStore(editorStateStore.temporal, (s) => s.pastStates.length > 0);
+}
+function useCanRedo() {
+  return useStore(editorStateStore.temporal, (s) => s.futureStates.length > 0);
+}
 
 // src/app/save-payload.ts
 var ROOT_BLOCK_ID = "root";
@@ -2236,8 +2317,27 @@ function ImageCallbacksProvider({
 function useImageCallbacks() {
   return useContext(ImageCallbacksContext);
 }
+var TITLE_KEYS = {
+  "Editor appearance": "panel.editor-appearance",
+  Template: "panel.template",
+  Export: "panel.export",
+  Global: "panel.global",
+  "Text block": "panel.text-block",
+  "Heading block": "panel.heading-block",
+  "Button block": "panel.button-block",
+  "Image block": "panel.image-block",
+  "Avatar block": "panel.avatar-block",
+  "Signature block": "panel.signature-block",
+  "Spacer block": "panel.spacer-block",
+  "Divider block": "panel.divider-block",
+  "Columns block": "panel.columns-block",
+  "Container block": "panel.container-block",
+  "Html block": "panel.html-block"
+};
 function BaseSidebarPanel({ title, children }) {
-  return /* @__PURE__ */ React57.createElement(Box, { p: 2 }, /* @__PURE__ */ React57.createElement(Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, title), /* @__PURE__ */ React57.createElement(Stack, { spacing: 5, mb: 3 }, children));
+  const key = TITLE_KEYS[title];
+  const displayTitle = key ? t(key, title) : title;
+  return /* @__PURE__ */ React57.createElement(Box, { p: 2 }, /* @__PURE__ */ React57.createElement(Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, displayTitle), /* @__PURE__ */ React57.createElement(Stack, { spacing: 5, mb: 3 }, children));
 }
 function RadioGroupInput({ label, children, defaultValue, onChange }) {
   const [value, setValue] = useState(defaultValue);
@@ -2741,9 +2841,9 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
   };
   switch (name) {
     case "backgroundColor":
-      return /* @__PURE__ */ React57.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React57.createElement(NullableColorInput, { label: t("style.background-color", "Background color"), defaultValue, onChange: handleChange });
     case "borderColor":
-      return /* @__PURE__ */ React57.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React57.createElement(NullableColorInput, { label: t("style.border-color", "Border color"), defaultValue, onChange: handleChange });
     case "borderRadius":
       return /* @__PURE__ */ React57.createElement(
         SliderInput,
@@ -2754,27 +2854,27 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
           marks: true,
           min: 0,
           max: 48,
-          label: "Border radius",
+          label: t("style.border-radius", "Border radius"),
           defaultValue,
           onChange: handleChange
         }
       );
     case "color":
-      return /* @__PURE__ */ React57.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React57.createElement(NullableColorInput, { label: t("style.text-color", "Text color"), defaultValue, onChange: handleChange });
     case "fontFamily":
-      return /* @__PURE__ */ React57.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React57.createElement(NullableFontFamily, { label: t("style.font-family", "Font family"), defaultValue, onChange: handleChange });
     case "fontSize":
-      return /* @__PURE__ */ React57.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React57.createElement(FontSizeInput, { label: t("style.font-size", "Font size"), defaultValue, onChange: handleChange });
     case "fontWeight":
-      return /* @__PURE__ */ React57.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React57.createElement(FontWeightInput, { label: t("style.font-weight", "Font weight"), defaultValue, onChange: handleChange });
     case "lineHeight":
-      return /* @__PURE__ */ React57.createElement(LineHeightInput, { label: "Line height", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React57.createElement(LineHeightInput, { label: t("style.line-height", "Line height"), defaultValue, onChange: handleChange });
     case "letterSpacing":
-      return /* @__PURE__ */ React57.createElement(LetterSpacingInput, { label: "Letter spacing", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React57.createElement(LetterSpacingInput, { label: t("style.letter-spacing", "Letter spacing"), defaultValue, onChange: handleChange });
     case "textAlign":
-      return /* @__PURE__ */ React57.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React57.createElement(TextAlignInput, { label: t("style.alignment", "Alignment"), defaultValue, onChange: handleChange });
     case "padding":
-      return /* @__PURE__ */ React57.createElement(PaddingInput, { label: "Padding", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React57.createElement(PaddingInput, { label: t("style.padding", "Padding"), defaultValue, onChange: handleChange });
   }
 }
 
@@ -4081,15 +4181,15 @@ function DetailsEditor({ templateId, currentName, currentTags, canEdit, onSave }
   const addTag = () => {
     const trimmed = tagInput.trim();
     if (!trimmed) return;
-    if (tags.some((t) => t.toLowerCase() === trimmed.toLowerCase())) {
+    if (tags.some((t2) => t2.toLowerCase() === trimmed.toLowerCase())) {
       setTagInput("");
       return;
     }
     setTags([...tags, trimmed]);
     setTagInput("");
   };
-  const removeTag = (tag) => setTags(tags.filter((t) => t !== tag));
-  const dirty = name !== currentName || tags.length !== currentTags.length || tags.some((t, i) => t !== currentTags[i]);
+  const removeTag = (tag) => setTags(tags.filter((t2) => t2 !== tag));
+  const dirty = name !== currentName || tags.length !== currentTags.length || tags.some((t2, i) => t2 !== currentTags[i]);
   const handleSave = () => __async(null, null, function* () {
     if (!canEdit || !dirty || !name.trim()) return;
     setSaving(true);
@@ -5517,15 +5617,15 @@ function RenameDialog({
   const addTag = () => {
     const trimmed = tagInput.trim();
     if (!trimmed) return;
-    if (tags.some((t) => t.toLowerCase() === trimmed.toLowerCase())) {
+    if (tags.some((t2) => t2.toLowerCase() === trimmed.toLowerCase())) {
       setTagInput("");
       return;
     }
     setTags([...tags, trimmed]);
     setTagInput("");
   };
-  const removeTag = (tag) => setTags(tags.filter((t) => t !== tag));
-  const tagsUnchanged = tags.length === currentTags.length && tags.every((t, i) => t === currentTags[i]);
+  const removeTag = (tag) => setTags(tags.filter((t2) => t2 !== tag));
+  const tagsUnchanged = tags.length === currentTags.length && tags.every((t2, i) => t2 === currentTags[i]);
   const handleSubmit = () => __async(null, null, function* () {
     const trimmedSlug = slug.trim();
     if (!trimmedSlug) {
@@ -5749,9 +5849,9 @@ var EMPTY_TEMPLATE = {
   description: "A blank email template to start from scratch"
 };
 var SORT_OPTIONS = [
-  { value: "updatedAt", label: "Last updated" },
-  { value: "createdAt", label: "Recently created" },
-  { value: "slug", label: "Name (A\u2013Z)" }
+  { value: "updatedAt", labelKey: "sort.last-updated", fallback: "Last updated" },
+  { value: "createdAt", labelKey: "sort.recently-created", fallback: "Recently created" },
+  { value: "slug", labelKey: "sort.name", fallback: "Name (A\u2013Z)" }
 ];
 function compareTemplates(a, b, key) {
   if (key === "slug") {
@@ -5835,9 +5935,9 @@ function SamplesDrawer({
     const now = (/* @__PURE__ */ new Date()).toISOString();
     const row = { id, slug, kind, tags, createdAt: now, updatedAt: now };
     if (kind === "sample") {
-      setSamples((prev) => prev.some((t) => t.id === id) ? prev : [...prev, row]);
+      setSamples((prev) => prev.some((t2) => t2.id === id) ? prev : [...prev, row]);
     } else {
-      setTemplates((prev) => prev.some((t) => t.id === id) ? prev : [...prev, row]);
+      setTemplates((prev) => prev.some((t2) => t2.id === id) ? prev : [...prev, row]);
     }
   };
   useEffect(() => {
@@ -5855,30 +5955,30 @@ function SamplesDrawer({
   const { templateRows, sampleRows } = useMemo(() => {
     const byId = /* @__PURE__ */ new Map();
     for (const s of samples) byId.set(s.id, s);
-    for (const t of templates) byId.set(t.id, t);
+    for (const t2 of templates) byId.set(t2.id, t2);
     const all = Array.from(byId.values());
     return {
-      templateRows: all.filter((t) => t.kind === "template"),
-      sampleRows: all.filter((t) => t.kind === "sample")
+      templateRows: all.filter((t2) => t2.kind === "template"),
+      sampleRows: all.filter((t2) => t2.kind === "sample")
     };
   }, [samples, templates]);
   const allTags = useMemo(() => {
     var _a2, _b2;
     const set = /* @__PURE__ */ new Set();
-    for (const t of templateRows) (_a2 = t.tags) == null ? void 0 : _a2.forEach((tag) => set.add(tag));
+    for (const t2 of templateRows) (_a2 = t2.tags) == null ? void 0 : _a2.forEach((tag) => set.add(tag));
     for (const s of sampleRows) (_b2 = s.tags) == null ? void 0 : _b2.forEach((tag) => set.add(tag));
     return Array.from(set).sort();
   }, [templateRows, sampleRows]);
   const matchesSearchAndTags = useMemo(() => {
     const term = search.trim().toLowerCase();
-    return (t) => {
+    return (t2) => {
       if (term) {
-        const haystack = [t.slug, t.description, t.subject].filter(Boolean).join(" ").toLowerCase();
+        const haystack = [t2.slug, t2.description, t2.subject].filter(Boolean).join(" ").toLowerCase();
         if (!haystack.includes(term)) return false;
       }
       if (activeTags.length > 0) {
-        if (!t.tags || t.tags.length === 0) return false;
-        if (!activeTags.every((tag) => t.tags.includes(tag))) return false;
+        if (!t2.tags || t2.tags.length === 0) return false;
+        if (!activeTags.every((tag) => t2.tags.includes(tag))) return false;
       }
       return true;
     };
@@ -5892,7 +5992,7 @@ function SamplesDrawer({
     [sampleRows, matchesSearchAndTags, sortKey]
   );
   const toggleTag = (tag) => {
-    setActiveTags((prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]);
+    setActiveTags((prev) => prev.includes(tag) ? prev.filter((t2) => t2 !== tag) : [...prev, tag]);
   };
   const handleDuplicate = (template) => {
     if (!copyTemplate) return;
@@ -5922,7 +6022,7 @@ function SamplesDrawer({
     if (!renameTarget || !renameTemplate) return;
     yield renameTemplate(renameTarget.id, newSlug, opts);
     const newTags = (_b2 = (_a2 = opts == null ? void 0 : opts.tags) != null ? _a2 : renameTarget.tags) != null ? _b2 : [];
-    const patch = (t) => t.id === renameTarget.id ? __spreadProps(__spreadValues({}, t), { slug: newSlug, tags: newTags }) : t;
+    const patch = (t2) => t2.id === renameTarget.id ? __spreadProps(__spreadValues({}, t2), { slug: newSlug, tags: newTags }) : t2;
     setTemplates((prev) => prev.map(patch));
     setSamples((prev) => prev.map(patch));
     if (currentTemplateId === renameTarget.id) {
@@ -5931,8 +6031,8 @@ function SamplesDrawer({
     showMessage("Details saved");
   });
   const flipKindLocally = (id, kind) => {
-    setTemplates((prev) => prev.map((t) => t.id === id ? __spreadProps(__spreadValues({}, t), { kind }) : t));
-    setSamples((prev) => prev.map((t) => t.id === id ? __spreadProps(__spreadValues({}, t), { kind }) : t));
+    setTemplates((prev) => prev.map((t2) => t2.id === id ? __spreadProps(__spreadValues({}, t2), { kind }) : t2));
+    setSamples((prev) => prev.map((t2) => t2.id === id ? __spreadProps(__spreadValues({}, t2), { kind }) : t2));
   };
   const handleSetKind = (template, kind) => {
     if (!setTemplateKind) return;
@@ -5969,7 +6069,7 @@ function SamplesDrawer({
   };
   const handleSaveAsSubmit = (templateName) => __async(null, null, function* () {
     if (!saveAs || !pendingSaveAs) return false;
-    const taken = templateRows.some((t) => t.slug.toLowerCase() === templateName.toLowerCase());
+    const taken = templateRows.some((t2) => t2.slug.toLowerCase() === templateName.toLowerCase());
     if (taken) {
       setNewError("A template with this name already exists");
       return false;
@@ -6032,7 +6132,7 @@ function SamplesDrawer({
   if (!enabled) {
     return null;
   }
-  const existingSlugs = templates.map((t) => t.slug);
+  const existingSlugs = templates.map((t2) => t2.slug);
   return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
     Drawer,
     {
@@ -6058,12 +6158,12 @@ function SamplesDrawer({
         spacing: 1.5,
         sx: { overflowY: "auto" }
       },
-      /* @__PURE__ */ React57.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { pt: 1 } }, /* @__PURE__ */ React57.createElement(Typography, { variant: "h6", component: "h1" }, "Library"), saveAs && (activeLeftTab === "templates" || activeLeftTab === "samples") && /* @__PURE__ */ React57.createElement(Tooltip, { title: activeLeftTab === "samples" ? "New sample" : "New template" }, /* @__PURE__ */ React57.createElement(
+      /* @__PURE__ */ React57.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { pt: 1 } }, /* @__PURE__ */ React57.createElement(Typography, { variant: "h6", component: "h1" }, /* @__PURE__ */ React57.createElement(Trans, { id: "drawer.library" }, "Library")), saveAs && (activeLeftTab === "templates" || activeLeftTab === "samples") && /* @__PURE__ */ React57.createElement(Tooltip, { title: activeLeftTab === "samples" ? t("drawer.new-sample", "New sample") : t("drawer.new-template", "New template") }, /* @__PURE__ */ React57.createElement(
         IconButton,
         {
           size: "small",
           onClick: () => openNewPicker(activeLeftTab === "samples" ? "sample" : "template"),
-          "aria-label": activeLeftTab === "samples" ? "New sample" : "New template"
+          "aria-label": activeLeftTab === "samples" ? t("drawer.new-sample", "New sample") : t("drawer.new-template", "New template")
         },
         /* @__PURE__ */ React57.createElement(AddOutlined, { fontSize: "small" })
       ))),
@@ -6075,15 +6175,15 @@ function SamplesDrawer({
           variant: "fullWidth",
           sx: { minHeight: 36, "& .MuiTab-root": { minHeight: 36, minWidth: 0, px: 1, fontSize: 13 } }
         },
-        /* @__PURE__ */ React57.createElement(Tab, { value: "templates", label: "Templates", disabled: !loadTemplates }),
-        /* @__PURE__ */ React57.createElement(Tab, { value: "samples", label: "Samples" }),
-        /* @__PURE__ */ React57.createElement(Tab, { value: "outline", label: "Outline" })
+        /* @__PURE__ */ React57.createElement(Tab, { value: "templates", label: t("drawer.tab.templates", "Templates"), disabled: !loadTemplates }),
+        /* @__PURE__ */ React57.createElement(Tab, { value: "samples", label: t("drawer.tab.samples", "Samples") }),
+        /* @__PURE__ */ React57.createElement(Tab, { value: "outline", label: t("drawer.tab.outline", "Outline") })
       ),
       activeLeftTab === "outline" ? /* @__PURE__ */ React57.createElement(OutlinePanel, null) : /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
         TextField,
         {
           size: "small",
-          placeholder: activeLeftTab === "templates" ? "Search templates" : "Search samples",
+          placeholder: activeLeftTab === "templates" ? t("drawer.search-templates", "Search templates") : t("drawer.search-samples", "Search samples"),
           value: search,
           onChange: (e) => setSearch(e.target.value),
           InputProps: {
@@ -6095,15 +6195,15 @@ function SamplesDrawer({
         {
           select: true,
           size: "small",
-          label: "Sort by",
+          label: t("drawer.sort-by", "Sort by"),
           value: sortKey,
           onChange: (e) => setSortKey(e.target.value)
         },
-        SORT_OPTIONS.map((opt) => /* @__PURE__ */ React57.createElement(MenuItem, { key: opt.value, value: opt.value }, opt.label))
+        SORT_OPTIONS.map((opt) => /* @__PURE__ */ React57.createElement(MenuItem, { key: opt.value, value: opt.value }, t(opt.labelKey, opt.fallback)))
       ), allTags.length > 0 && /* @__PURE__ */ React57.createElement(Stack, { direction: "row", sx: { flexWrap: "wrap", gap: 0.5 } }, /* @__PURE__ */ React57.createElement(
         Chip,
         {
-          label: "All",
+          label: t("drawer.tag.all", "All"),
           size: "small",
           clickable: true,
           color: activeTags.length === 0 ? "primary" : "default",
@@ -6133,7 +6233,7 @@ function SamplesDrawer({
           onDelete: deleteTemplate ? () => handleDelete(template) : void 0,
           onPromote: setTemplateKind ? () => handleSetKind(template, "sample") : void 0
         }
-      ))) : /* @__PURE__ */ React57.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, templateRows.length === 0 ? "No saved templates yet" : "No templates match your filters")) : /* @__PURE__ */ React57.createElement(Box, null, loadingSamples ? /* @__PURE__ */ React57.createElement(Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React57.createElement(CircularProgress, { size: 24 })) : filteredSamples.length > 0 ? /* @__PURE__ */ React57.createElement(Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredSamples.map((sample) => /* @__PURE__ */ React57.createElement(
+      ))) : /* @__PURE__ */ React57.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, templateRows.length === 0 ? t("drawer.no-templates", "No saved templates yet") : t("drawer.no-templates-match", "No templates match your filters"))) : /* @__PURE__ */ React57.createElement(Box, null, loadingSamples ? /* @__PURE__ */ React57.createElement(Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React57.createElement(CircularProgress, { size: 24 })) : filteredSamples.length > 0 ? /* @__PURE__ */ React57.createElement(Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredSamples.map((sample) => /* @__PURE__ */ React57.createElement(
         TemplateRow,
         {
           key: sample.id,
@@ -6145,7 +6245,7 @@ function SamplesDrawer({
           onDelete: deleteTemplate ? () => handleDelete(sample) : void 0,
           onDemote: setTemplateKind ? () => handleSetKind(sample, "template") : void 0
         }
-      ))) : /* @__PURE__ */ React57.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, sampleRows.length === 0 ? "No samples available" : "No samples match your filters")))
+      ))) : /* @__PURE__ */ React57.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, sampleRows.length === 0 ? t("drawer.no-samples", "No samples available") : t("drawer.no-samples-match", "No samples match your filters"))))
     )
   ), renameTarget && /* @__PURE__ */ React57.createElement(
     RenameDialog,
@@ -6176,7 +6276,7 @@ function SamplesDrawer({
       open: pickerKind !== null,
       kind: pickerKind != null ? pickerKind : "template",
       samples: sampleRows,
-      existingSlugs: pickerKind === "sample" ? sampleRows.map((s) => s.slug) : templateRows.map((t) => t.slug),
+      existingSlugs: pickerKind === "sample" ? sampleRows.map((s) => s.slug) : templateRows.map((t2) => t2.slug),
       onClose: () => setPickerKind(null),
       onCreate: handleCreateFromPicker
     }
@@ -6800,7 +6900,7 @@ function EmailLayoutEditor(props) {
       }
     }
     delete nDocument[selectedBlockId];
-    resetDocument(nDocument);
+    replaceDocument(nDocument);
   }, [selectedBlockId, document2]);
   const handleCopy = useCallback((e) => {
     if (!(e.metaKey || e.ctrlKey) || e.key !== "c") return;
@@ -6843,7 +6943,7 @@ function EmailLayoutEditor(props) {
         childrenIds: currentChildrenIds
       })
     };
-    resetDocument(doc);
+    replaceDocument(doc);
     setSelectedBlockId(newRootId);
   }), [document2, childrenIds, selectedBlockId, currentBlockId]);
   useEffect(() => {
@@ -6884,7 +6984,6 @@ function EmailLayoutEditor(props) {
       }
     }
   );
-  const WORKSPACE_BG = "#e7e8ec";
   const CARD_MAX_WIDTH = 664;
   const cardStyle = {
     maxWidth: CARD_MAX_WIDTH,
@@ -6900,7 +6999,6 @@ function EmailLayoutEditor(props) {
           setSelectedBlockId(null);
         },
         style: __spreadProps(__spreadValues({}, baseStyle), {
-          backgroundColor: WORKSPACE_BG,
           padding: "32px",
           width: "100%",
           minHeight: "100%"
@@ -6925,7 +7023,6 @@ function EmailLayoutEditor(props) {
         setSelectedBlockId(null);
       },
       style: __spreadProps(__spreadValues({}, baseStyle), {
-        backgroundColor: WORKSPACE_BG,
         padding: "32px 16px",
         width: "100%",
         minHeight: "100%"
@@ -7123,7 +7220,7 @@ function TuneMenu({ blockId }) {
     resetDocument(nDocument);
     setSelectedBlockId(blockId);
   };
-  return /* @__PURE__ */ React57.createElement(Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React57.createElement(Stack, null, /* @__PURE__ */ React57.createElement(Tooltip, { title: "Move up", placement: "left-start" }, /* @__PURE__ */ React57.createElement(IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React57.createElement(ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57.createElement(Tooltip, { title: "Move down", placement: "left-start" }, /* @__PURE__ */ React57.createElement(IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React57.createElement(ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57.createElement(Tooltip, { title: "Copy block", placement: "left-start" }, /* @__PURE__ */ React57.createElement(IconButton, { onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React57.createElement(ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57.createElement(Tooltip, { title: "Delete", placement: "left-start" }, /* @__PURE__ */ React57.createElement(IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React57.createElement(DeleteOutlined, { fontSize: "small" })))));
+  return /* @__PURE__ */ React57.createElement(Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React57.createElement(Stack, null, /* @__PURE__ */ React57.createElement(Tooltip, { title: t("tune.move-up", "Move up"), placement: "left-start" }, /* @__PURE__ */ React57.createElement(IconButton, { "aria-label": t("tune.move-up", "Move up"), onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React57.createElement(ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57.createElement(Tooltip, { title: t("tune.move-down", "Move down"), placement: "left-start" }, /* @__PURE__ */ React57.createElement(IconButton, { "aria-label": t("tune.move-down", "Move down"), onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React57.createElement(ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57.createElement(Tooltip, { title: t("tune.copy", "Copy block"), placement: "left-start" }, /* @__PURE__ */ React57.createElement(IconButton, { "aria-label": t("tune.copy", "Copy block"), onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React57.createElement(ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57.createElement(Tooltip, { title: t("tune.delete", "Delete"), placement: "left-start" }, /* @__PURE__ */ React57.createElement(IconButton, { "aria-label": t("tune.delete", "Delete"), onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React57.createElement(DeleteOutlined, { fontSize: "small" })))));
 }
 
 // src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
@@ -7486,7 +7583,7 @@ function InlineFormattingToolbar({
       },
       sx: { width: 220 }
     }
-  )) : /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 0.25 }, /* @__PURE__ */ React57.createElement(IconButton, { size: "small", onClick: onBold, title: "Bold (Cmd+B)", "aria-label": "Bold" }, /* @__PURE__ */ React57.createElement(FormatBoldOutlined, { fontSize: "small" })), /* @__PURE__ */ React57.createElement(IconButton, { size: "small", onClick: onItalic, title: "Italic (Cmd+I)", "aria-label": "Italic" }, /* @__PURE__ */ React57.createElement(FormatItalicOutlined, { fontSize: "small" })), /* @__PURE__ */ React57.createElement(IconButton, { size: "small", onClick: onLinkRequest, title: "Link (Cmd+K)", "aria-label": "Link" }, /* @__PURE__ */ React57.createElement(LinkOutlined, { fontSize: "small" })))));
+  )) : /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 0.25 }, /* @__PURE__ */ React57.createElement(IconButton, { size: "small", onClick: onBold, title: t("toolbar.bold-shortcut", "Bold (Cmd+B)"), "aria-label": t("toolbar.bold", "Bold") }, /* @__PURE__ */ React57.createElement(FormatBoldOutlined, { fontSize: "small" })), /* @__PURE__ */ React57.createElement(IconButton, { size: "small", onClick: onItalic, title: t("toolbar.italic-shortcut", "Italic (Cmd+I)"), "aria-label": t("toolbar.italic", "Italic") }, /* @__PURE__ */ React57.createElement(FormatItalicOutlined, { fontSize: "small" })), /* @__PURE__ */ React57.createElement(IconButton, { size: "small", onClick: onLinkRequest, title: t("toolbar.link-shortcut", "Link (Cmd+K)"), "aria-label": t("toolbar.link", "Link") }, /* @__PURE__ */ React57.createElement(LinkOutlined, { fontSize: "small" })))));
 }
 
 // src/editor/blocks/heading/heading-editor.tsx
@@ -8437,7 +8534,7 @@ function SaveBar({ loadTemplates, saveAs }) {
   const [nameError, setNameError] = useState(null);
   const hasOpenRow = Boolean(currentTemplateId);
   const isSample = currentTemplateKind === "sample";
-  const primaryLabel = hasOpenRow ? "Save" : "Save as new\u2026";
+  const primaryLabel = hasOpenRow ? t("savebar.save", "Save") : t("savebar.save-as-new", "Save as new\u2026");
   const handlePrimary = () => __async(null, null, function* () {
     try {
       if (!hasOpenRow) {
@@ -8446,11 +8543,11 @@ function SaveBar({ loadTemplates, saveAs }) {
         return;
       }
       saveTemplate();
-      showMessage(isSample ? "Sample saved" : "Template saved");
+      showMessage(isSample ? t("savebar.sample-saved", "Sample saved") : t("savebar.template-saved", "Template saved"));
       if (loadTemplates) yield loadTemplates();
     } catch (e) {
       console.error("Error saving:", e);
-      showMessage("Error saving");
+      showMessage(t("savebar.error-saving", "Error saving"));
     }
   });
   const handleSaveAs = (name) => __async(null, null, function* () {
@@ -8462,12 +8559,14 @@ function SaveBar({ loadTemplates, saveAs }) {
       setCurrentTemplate(id, slug, "template");
       ctxLoadTemplate(starterContent, id, slug, "template");
       if (loadTemplates) yield loadTemplates();
-      showMessage(dialogMode === "new-blank" ? "New template created" : "Template saved");
+      showMessage(
+        dialogMode === "new-blank" ? t("savebar.new-template-created", "New template created") : t("savebar.template-saved", "Template saved")
+      );
       window.location.hash = `#template/${id}`;
       return true;
     } catch (e) {
       console.error("Error in saveAs:", e);
-      showMessage("Error saving");
+      showMessage(t("savebar.error-saving", "Error saving"));
       return false;
     }
   });
@@ -8514,10 +8613,10 @@ function SaveBar({ loadTemplates, saveAs }) {
           },
           title: currentTemplateName
         },
-        isSample ? "Sample \xB7 " : "",
+        isSample ? `${t("savebar.sample-prefix", "Sample")} \xB7 ` : "",
         /* @__PURE__ */ React57.createElement(Box, { component: "span", sx: { color: "text.primary", fontWeight: 600 } }, currentTemplateName)
       ),
-      /* @__PURE__ */ React57.createElement(Tooltip, { title: hasOpenRow ? `Save changes${isSample ? " to this sample" : ""}` : "Save as a new template" }, /* @__PURE__ */ React57.createElement(
+      /* @__PURE__ */ React57.createElement(Tooltip, { title: hasOpenRow ? isSample ? t("savebar.save-changes-to-sample", "Save changes to this sample") : t("savebar.save-changes", "Save changes") : t("savebar.save-as-new-template", "Save as a new template") }, /* @__PURE__ */ React57.createElement(
         Button$1,
         {
           variant: "contained",
@@ -8528,7 +8627,7 @@ function SaveBar({ loadTemplates, saveAs }) {
         },
         primaryLabel
       )),
-      hasOpenRow && saveAs && /* @__PURE__ */ React57.createElement(Tooltip, { title: "Save as a new template" }, /* @__PURE__ */ React57.createElement(
+      hasOpenRow && saveAs && /* @__PURE__ */ React57.createElement(Tooltip, { title: t("savebar.save-as-new-template", "Save as a new template") }, /* @__PURE__ */ React57.createElement(
         Button$1,
         {
           variant: "outlined",
@@ -8540,9 +8639,9 @@ function SaveBar({ loadTemplates, saveAs }) {
           },
           sx: { borderRadius: 999, textTransform: "none", px: 2, fontSize: 14 }
         },
-        "Save as\u2026"
+        t("savebar.save-as", "Save as\u2026")
       )),
-      saveAs && /* @__PURE__ */ React57.createElement(Tooltip, { title: "Start a fresh template" }, /* @__PURE__ */ React57.createElement(
+      saveAs && /* @__PURE__ */ React57.createElement(Tooltip, { title: t("savebar.start-fresh", "Start a fresh template") }, /* @__PURE__ */ React57.createElement(
         Button$1,
         {
           variant: "text",
@@ -8554,7 +8653,7 @@ function SaveBar({ loadTemplates, saveAs }) {
           },
           sx: { borderRadius: 999, textTransform: "none", px: 2, fontSize: 14, color: "text.secondary" }
         },
-        "New"
+        t("savebar.new", "New")
       ))
     )
   ), /* @__PURE__ */ React57.createElement(
@@ -8572,6 +8671,64 @@ function SaveBar({ loadTemplates, saveAs }) {
     }
   ));
 }
+function isMac() {
+  if (typeof navigator === "undefined") return false;
+  const platform = (navigator.platform || "").toLowerCase();
+  if (platform.includes("mac")) return true;
+  const ua = (navigator.userAgent || "").toLowerCase();
+  return ua.includes("mac") && !ua.includes("windows");
+}
+function isEditableTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  if (target.isContentEditable) return true;
+  return false;
+}
+function UndoRedoButtons() {
+  const canUndo = useCanUndo();
+  const canRedo = useCanRedo();
+  const mac = isMac();
+  const modKey = mac ? "\u2318" : "Ctrl";
+  const undoHint = `${modKey}+Z`;
+  const redoHint = mac ? `${modKey}+\u21E7+Z` : `${modKey}+Shift+Z / ${modKey}+Y`;
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      const mod = mac ? e.metaKey : e.ctrlKey;
+      if (!mod) return;
+      if (isEditableTarget(e.target)) return;
+      const key = e.key.toLowerCase();
+      if (key === "z" && !e.shiftKey) {
+        e.preventDefault();
+        undo();
+      } else if (key === "z" && e.shiftKey || key === "y" && !mac) {
+        e.preventDefault();
+        redo();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [mac]);
+  return /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 0.5, alignItems: "center" }, /* @__PURE__ */ React57.createElement(Tooltip, { title: `${t("undo.tooltip", "Undo")} (${undoHint})` }, /* @__PURE__ */ React57.createElement("span", null, /* @__PURE__ */ React57.createElement(
+    IconButton,
+    {
+      size: "small",
+      onClick: undo,
+      disabled: !canUndo,
+      "aria-label": t("undo.label", "Undo")
+    },
+    /* @__PURE__ */ React57.createElement(UndoOutlined, { fontSize: "small" })
+  ))), /* @__PURE__ */ React57.createElement(Tooltip, { title: `${t("redo.tooltip", "Redo")} (${redoHint})` }, /* @__PURE__ */ React57.createElement("span", null, /* @__PURE__ */ React57.createElement(
+    IconButton,
+    {
+      size: "small",
+      onClick: redo,
+      disabled: !canRedo,
+      "aria-label": t("redo.label", "Redo")
+    },
+    /* @__PURE__ */ React57.createElement(RedoOutlined, { fontSize: "small" })
+  ))));
+}
 function SubjectInput() {
   var _a;
   const document2 = useDocument();
@@ -8800,7 +8957,7 @@ function ImageDropPasteHandler({ enabled, children }) {
 
 // src/app/email-canvas/index.tsx
 var WORKSPACE_SOLID = "#e7e8ec";
-var WORKSPACE_CHECKERBOARD = "repeating-conic-gradient(#eceef2 0% 25%, #dfe1e6 0% 50%) 50% / 24px 24px";
+var WORKSPACE_CHECKERBOARD = "repeating-conic-gradient(#eceef2 0% 25%, #dfe1e6 0% 50%) 50% / 12px 12px";
 function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true }) {
   const document2 = useDocument();
   const selectedMainTab = useSelectedMainTab();
@@ -8870,7 +9027,7 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
       alignItems: "center"
     },
     samplesDrawerEnabled && /* @__PURE__ */ React57.createElement(ToggleSamplesPanelButton, null),
-    /* @__PURE__ */ React57.createElement(Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React57.createElement(MainTabsGroup, null)), /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React57.createElement(ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React57.createElement(ToggleButton, { value: "desktop" }, /* @__PURE__ */ React57.createElement(Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React57.createElement(MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57.createElement(ToggleButton, { value: "mobile" }, /* @__PURE__ */ React57.createElement(Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React57.createElement(PhoneIphoneOutlined, { fontSize: "small" })))))),
+    /* @__PURE__ */ React57.createElement(Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React57.createElement(MainTabsGroup, null)), /* @__PURE__ */ React57.createElement(Stack, { direction: "row", spacing: 2, alignItems: "center" }, selectedMainTab === "editor" && /* @__PURE__ */ React57.createElement(UndoRedoButtons, null), /* @__PURE__ */ React57.createElement(ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React57.createElement(ToggleButton, { value: "desktop" }, /* @__PURE__ */ React57.createElement(Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React57.createElement(MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React57.createElement(ToggleButton, { value: "mobile" }, /* @__PURE__ */ React57.createElement(Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React57.createElement(PhoneIphoneOutlined, { fontSize: "small" })))))),
     /* @__PURE__ */ React57.createElement(ToggleInspectorPanelButton, null)
   ), selectedMainTab === "editor" && /* @__PURE__ */ React57.createElement(SubjectInput, null), selectedMainTab === "preview" && /* @__PURE__ */ React57.createElement(SubjectPreview, null), /* @__PURE__ */ React57.createElement(ImageDropPasteHandler, { enabled: selectedMainTab === "editor" }, /* @__PURE__ */ React57.createElement(
     Box,
@@ -9031,8 +9188,10 @@ var EmailEditor = forwardRef((props, ref) => {
     uploadImage,
     loadImages,
     deleteImage,
-    theme
+    theme,
+    locale
   } = props;
+  activateLocale(locale);
   const resolvedTemplate = useMemo(
     () => typeof initialTemplateProp === "string" ? htmlToEditorConfig(initialTemplateProp) : initialTemplateProp,
     [initialTemplateProp]
@@ -9049,7 +9208,7 @@ var EmailEditor = forwardRef((props, ref) => {
     () => ({ uploadImage, loadImages, deleteImage }),
     [uploadImage, loadImages, deleteImage]
   );
-  return /* @__PURE__ */ React57.createElement(ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React57.createElement(CssBaseline, null), /* @__PURE__ */ React57.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React57.createElement(SnackbarProvider, null, /* @__PURE__ */ React57.createElement(ImageCallbacksProvider, { callbacks: imageCallbacks }, /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React57.createElement(I18nProvider, { i18n }, /* @__PURE__ */ React57.createElement(ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React57.createElement(CssBaseline, null), /* @__PURE__ */ React57.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React57.createElement(SnackbarProvider, null, /* @__PURE__ */ React57.createElement(ImageCallbacksProvider, { callbacks: imageCallbacks }, /* @__PURE__ */ React57.createElement(
     EmailEditorProvider,
     {
       initialTemplate: resolvedTemplate,
@@ -9077,11 +9236,11 @@ var EmailEditor = forwardRef((props, ref) => {
         onChange
       }
     )
-  )))));
+  ))))));
 });
 EmailEditor.displayName = "EmailEditor";
 EmailEditorInternal.displayName = "EmailEditorInternal";
 
-export { avatar_default as Avatar, AvatarProps, AvatarPropsDefaults, AvatarPropsSchema, BlockConfiguration, button_default as Button, ButtonProps, ButtonPropsDefaults, ButtonPropsSchema, columns_container_default as ColumnsContainer, ColumnsContainerProps, ColumnsContainerPropsSchema, ColumnsContainerReader, container_default as Container, ContainerProps, ContainerPropsSchema, ContainerReader, divider_default as Divider, DividerProps, DividerPropsDefaults, DividerPropsSchema, DocumentBlocksDictionary, EmailEditor, EmailEditorProvider, EmailLayoutPropsSchema, EmailLayoutReader, EmailMarkdown, heading_default as Heading, HeadingProps, HeadingPropsDefaults, HeadingPropsSchema, html_default as Html, HtmlProps, HtmlPropsSchema, image_default as Image, ImageProps, ImagePropsSchema, Reader, ReaderBlock, ReaderBlockSchema, ReaderDocumentSchema, signature_default as Signature, SignatureProps, SignaturePropsDefaults, SignaturePropsSchema, spacer_default as Spacer, SpacerProps, SpacerPropsDefaults, SpacerPropsSchema, TemplateVariableSchema, Text, TextProps, TextPropsDefaults, TextPropsSchema, buildBlockComponent, buildBlockConfigurationDictionary, buildBlockConfigurationSchema, editorHandlebars, evaluateHandlebars, htmlToEditorConfig, renderToStaticMarkup, renderToText, theme_default as theme, useEmailEditor };
+export { avatar_default as Avatar, AvatarProps, AvatarPropsDefaults, AvatarPropsSchema, BlockConfiguration, button_default as Button, ButtonProps, ButtonPropsDefaults, ButtonPropsSchema, columns_container_default as ColumnsContainer, ColumnsContainerProps, ColumnsContainerPropsSchema, ColumnsContainerReader, container_default as Container, ContainerProps, ContainerPropsSchema, ContainerReader, divider_default as Divider, DividerProps, DividerPropsDefaults, DividerPropsSchema, DocumentBlocksDictionary, EmailEditor, EmailEditorProvider, EmailLayoutPropsSchema, EmailLayoutReader, EmailMarkdown, heading_default as Heading, HeadingProps, HeadingPropsDefaults, HeadingPropsSchema, html_default as Html, HtmlProps, HtmlPropsSchema, image_default as Image, ImageProps, ImagePropsSchema, Reader, ReaderBlock, ReaderBlockSchema, ReaderDocumentSchema, SUPPORTED_LOCALES, signature_default as Signature, SignatureProps, SignaturePropsDefaults, SignaturePropsSchema, spacer_default as Spacer, SpacerProps, SpacerPropsDefaults, SpacerPropsSchema, TemplateVariableSchema, Text, TextProps, TextPropsDefaults, TextPropsSchema, buildBlockComponent, buildBlockConfigurationDictionary, buildBlockConfigurationSchema, editorHandlebars, evaluateHandlebars, htmlToEditorConfig, renderToStaticMarkup, renderToText, theme_default as theme, useEmailEditor };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map