monto-email-builder 1.0.6 → 1.0.8

package/dist/index.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect, Fragment as Fragment$1, useContext, createContext, useMemo } from "react";
-import { Box, Typography, Stack, InputLabel, ToggleButtonGroup, Slider, TextField, Button, Menu, ButtonBase, MenuItem, ToggleButton, FormControlLabel, Switch, Drawer, Tabs, Tab, IconButton, Divider, Fade, Paper, Tooltip, Dialog, DialogTitle, DialogContent, Link, DialogActions, Alert, Snackbar, useTheme, ThemeProvider, CssBaseline } from "@mui/material";
+import { useState, useRef, useEffect, Fragment as Fragment$1, useContext, createContext, useMemo } from "react";
+import { Box, Typography, Stack, InputLabel, ToggleButtonGroup, Slider, TextField, Button, Menu, ButtonBase, MenuItem, ToggleButton, CircularProgress, FormControlLabel, Switch, Drawer, Tabs, Tab, Divider, Fade, IconButton, Paper, Tooltip, Dialog, DialogTitle, DialogContent, Link, DialogActions, Alert, useTheme, ThemeProvider, CssBaseline } from "@mui/material";
 import { create } from "zustand";
-import { E as EMPTY_EMAIL_MESSAGE } from "./samples-SfLrANbd.js";
+import { E as EMPTY_EMAIL_MESSAGE } from "./samples-BnRgwIcn.js";
 import { createTheme, alpha, lighten, darken } from "@mui/material/styles";
-import { CloseOutlined, AddOutlined, TextFieldsOutlined, AlignVerticalTopOutlined, AlignVerticalBottomOutlined, AlignHorizontalLeftOutlined, AlignHorizontalRightOutlined, FormatAlignLeftOutlined, FormatAlignCenterOutlined, FormatAlignRightOutlined, RoundedCornerOutlined, AspectRatioOutlined, SpaceBarOutlined, VerticalAlignTopOutlined, VerticalAlignCenterOutlined, VerticalAlignBottomOutlined, HeightOutlined, LinkOutlined, CloudUploadOutlined, LanguageOutlined, HMobiledataOutlined, NotesOutlined, SmartButtonOutlined, ImageOutlined, AccountCircleOutlined, HorizontalRuleOutlined, Crop32Outlined, HtmlOutlined, ViewColumnOutlined, LibraryAddOutlined, ArrowUpwardOutlined, ArrowDownwardOutlined, DeleteOutlined, LastPageOutlined, AppRegistrationOutlined, FirstPageOutlined, MenuOutlined, FileDownloadOutlined, FileUploadOutlined, EditOutlined, PreviewOutlined, CodeOutlined, DataObjectOutlined, IosShareOutlined, MonitorOutlined, PhoneIphoneOutlined } from "@mui/icons-material";
+import { CloseOutlined, AddOutlined, TextFieldsOutlined, AlignVerticalTopOutlined, AlignVerticalBottomOutlined, AlignHorizontalLeftOutlined, AlignHorizontalRightOutlined, FormatAlignLeftOutlined, FormatAlignCenterOutlined, FormatAlignRightOutlined, RoundedCornerOutlined, AspectRatioOutlined, SpaceBarOutlined, VerticalAlignTopOutlined, VerticalAlignCenterOutlined, VerticalAlignBottomOutlined, HeightOutlined, LinkOutlined, CloudUploadOutlined, HMobiledataOutlined, NotesOutlined, SmartButtonOutlined, ImageOutlined, AccountCircleOutlined, HorizontalRuleOutlined, Crop32Outlined, HtmlOutlined, ViewColumnOutlined, LibraryAddOutlined, ArrowUpwardOutlined, ArrowDownwardOutlined, DeleteOutlined, LastPageOutlined, AppRegistrationOutlined, FirstPageOutlined, MenuOutlined, FileDownloadOutlined, FileUploadOutlined, EditOutlined, PreviewOutlined, CodeOutlined, DataObjectOutlined, ExitToAppOutlined, SaveOutlined, MonitorOutlined, PhoneIphoneOutlined } from "@mui/icons-material";
 import { AvatarPropsDefaults, AvatarPropsSchema, Avatar } from "@usewaypoint/block-avatar";
 import { HexColorPicker, HexColorInput } from "react-colorful";
 import { ButtonPropsDefaults, ButtonPropsSchema, Button as Button$1 } from "@usewaypoint/block-button";
@@ -19,58 +19,30 @@ import { SpacerPropsDefaults, SpacerPropsSchema, Spacer } from "@usewaypoint/blo
 import { TextPropsSchema, Text } from "@usewaypoint/block-text";
 import { renderToStaticMarkup, Reader } from "@usewaypoint/email-builder";
 import { buildBlockConfigurationDictionary, buildBlockComponent, buildBlockConfigurationSchema } from "@usewaypoint/document-core";
-const sampleTemplates = {
-  welcome: () => import("./samples-SfLrANbd.js").then((n) => n.w).then((m) => m.default),
-  "one-time-password": () => import("./samples-SfLrANbd.js").then((n) => n.o).then((m) => m.default),
-  "order-ecomerce": () => import("./samples-SfLrANbd.js").then((n) => n.a).then((m) => m.default),
-  "post-metrics-report": () => import("./samples-SfLrANbd.js").then((n) => n.p).then((m) => m.default),
-  "reservation-reminder": () => import("./samples-SfLrANbd.js").then((n) => n.r).then((m) => m.default),
-  "reset-password": () => import("./samples-SfLrANbd.js").then((n) => n.b).then((m) => m.default),
-  "respond-to-message": () => import("./samples-SfLrANbd.js").then((n) => n.c).then((m) => m.default),
-  "subscription-receipt": () => import("./samples-SfLrANbd.js").then((n) => n.s).then((m) => m.default)
-};
-const templateCache = {};
-function getConfiguration(template) {
-  if (template.startsWith("#sample/")) {
-    return EMPTY_EMAIL_MESSAGE;
-  }
-  if (template.startsWith("#code/")) {
-    const encodedString = template.replace("#code/", "");
-    const configurationString = decodeURIComponent(atob(encodedString));
-    try {
-      return JSON.parse(configurationString);
-    } catch {
-      console.error(`Couldn't load configuration from hash.`);
-    }
-  }
-  return EMPTY_EMAIL_MESSAGE;
-}
-async function loadSampleTemplate(sampleName) {
-  const loader = sampleTemplates[sampleName];
-  if (!loader) {
-    return EMPTY_EMAIL_MESSAGE;
-  }
-  if (templateCache[sampleName]) {
-    return templateCache[sampleName];
-  }
-  const template = await loader();
-  templateCache[sampleName] = template;
-  return template;
-}
 const common$1 = {
   newDocument: "New Blank Document",
   useBuiltInTemplates: "Use Built-in Templates",
-  emailBuilder: "Email Builder"
+  emailBuilder: "Email Builder",
+  save: "Save",
+  saving: "Saving...",
+  saveAndExit: "Save and Exit",
+  namePlaceholder: "Enter template name",
+  unnamedTemplate: "",
+  desktopView: "Desktop view",
+  mobileView: "Mobile view",
+  downloadJson: "Download JSON file",
+  importJson: "Import JSON"
 };
 const samples$1 = {
-  welcomeEmail: "Welcome email",
+  welcomeEmail: "Marketing Template",
   oneTimePasscode: "One-time passcode (OTP)",
   resetPassword: "Reset password",
   orderEcommerce: "E-commerce receipt",
   subscriptionReceipt: "Subscription receipt",
-  reservationReminder: "Reservation reminder",
+  reservationReminder: "Verification Code Template",
   postMetrics: "Post metrics",
-  respondToMessage: "Respond to inquiry"
+  respondToMessage: "Respond to inquiry",
+  quickStart: "Quick Start"
 };
 const inspector$1 = {
   styles: "Styles",
@@ -121,17 +93,27 @@ const en = {
 const common = {
   newDocument: "新建空白文档",
   useBuiltInTemplates: "使用内置模板",
-  emailBuilder: "邮件编辑器"
+  emailBuilder: "邮件编辑器",
+  save: "保存",
+  saving: "保存中...",
+  saveAndExit: "保存并退出",
+  namePlaceholder: "这里放置接受的 name",
+  unnamedTemplate: "",
+  desktopView: "桌面视图",
+  mobileView: "移动视图",
+  downloadJson: "下载 JSON 文件",
+  importJson: "导入 JSON"
 };
 const samples = {
-  welcomeEmail: "欢迎邮件",
+  welcomeEmail: "营销模板",
   oneTimePasscode: "一次性密码 (OTP)",
   resetPassword: "重置密码",
   orderEcommerce: "电商收据",
   subscriptionReceipt: "订阅收据",
-  reservationReminder: "预约提醒",
+  reservationReminder: "验证码模板",
   postMetrics: "指标报告",
-  respondToMessage: "回复询问"
+  respondToMessage: "回复询问",
+  quickStart: "快速开始"
 };
 const inspector = {
   styles: "样式",
@@ -222,7 +204,7 @@ function setLanguage$1(lang) {
   }
 }
 const editorStateStore = create((set, get) => ({
-  document: getConfiguration(typeof window !== "undefined" ? window.location.hash : ""),
+  document: EMPTY_EMAIL_MESSAGE,
   selectedBlockId: null,
   selectedSidebarTab: "styles",
   selectedMainTab: "editor",
@@ -230,7 +212,11 @@ const editorStateStore = create((set, get) => ({
   inspectorDrawerOpen: true,
   samplesDrawerOpen: true,
   language: getLanguage(),
-  onChange: void 0
+  onChange: void 0,
+  saveHandler: void 0,
+  saveAndExitHandler: void 0,
+  name: "",
+  onNameChange: void 0
 }));
 function useDocument() {
   return editorStateStore((s) => s.document);
@@ -271,22 +257,22 @@ function setSelectedBlockId(selectedBlockId) {
 function setSidebarTab(selectedSidebarTab) {
   return editorStateStore.setState({ selectedSidebarTab });
 }
-function resetDocument(document) {
+function resetDocument(document2) {
   editorStateStore.setState({
-    document,
+    document: document2,
     selectedSidebarTab: "styles",
     selectedBlockId: null
   });
   const onChange = editorStateStore.getState().onChange;
   if (onChange) {
-    onChange(document);
+    onChange(document2);
   }
 }
-function setDocument(document) {
+function setDocument(document2) {
   const originalDocument = editorStateStore.getState().document;
   const newDocument = {
     ...originalDocument,
-    ...document
+    ...document2
   };
   editorStateStore.setState({
     document: newDocument
@@ -323,8 +309,48 @@ function setLanguage(lang) {
   setLanguage$1(lang);
   return editorStateStore.setState({ language: lang });
 }
+function useSaveHandler() {
+  return editorStateStore((s) => s.saveHandler);
+}
+function setSaveHandler(handler) {
+  return editorStateStore.setState({ saveHandler: handler });
+}
+async function saveDocument() {
+  const document2 = editorStateStore.getState().document;
+  const saveHandler = editorStateStore.getState().saveHandler;
+  if (saveHandler) {
+    await saveHandler(document2);
+  }
+}
+function useSaveAndExitHandler() {
+  return editorStateStore((s) => s.saveAndExitHandler);
+}
+function setSaveAndExitHandler(handler) {
+  return editorStateStore.setState({ saveAndExitHandler: handler });
+}
+function saveAndExitDocument(onExit) {
+  const document2 = editorStateStore.getState().document;
+  if (onExit) {
+    Promise.resolve(onExit(document2)).catch((error) => {
+      console.error("Error in exit handler:", error);
+    });
+  }
+}
+function useName() {
+  return editorStateStore((s) => s.name);
+}
+function setName(name) {
+  editorStateStore.setState({ name });
+  const onNameChange = editorStateStore.getState().onNameChange;
+  if (onNameChange) {
+    onNameChange(name);
+  }
+}
+function setOnNameChange(handler) {
+  return editorStateStore.setState({ onNameChange: handler });
+}
 const BRAND_NAVY = "#212443";
-const BRAND_BLUE = "#0079CC";
+const BRAND_BLUE = "#1E40AF";
 const BRAND_GREEN = "#1F8466";
 const BRAND_RED = "#E81212";
 const BRAND_YELLOW = "#F6DC9F";
@@ -1944,6 +1970,7 @@ function HtmlSidebarPanel({ data, setData }) {
 }
 function ImageSidebarPanel({ data, setData }) {
   var _a, _b, _c, _d, _e, _f;
+  const { t: t2 } = useTranslation();
   const [, setErrors] = useState(null);
   const [uploadMode, setUploadMode] = useState("url");
   const [uploading, setUploading] = useState(false);
@@ -1984,7 +2011,7 @@ function ImageSidebarPanel({ data, setData }) {
     var _a2;
     (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
   };
-  return /* @__PURE__ */ jsxs(BaseSidebarPanel, { title: "Image block", children: [
+  return /* @__PURE__ */ jsxs(BaseSidebarPanel, { title: t2("image.imageBlock"), children: [
     /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
       /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
         /* @__PURE__ */ jsxs(
@@ -1997,7 +2024,7 @@ function ImageSidebarPanel({ data, setData }) {
             fullWidth: true,
             children: [
               /* @__PURE__ */ jsx(LinkOutlined, { fontSize: "small", sx: { mr: 0.5 } }),
-              "URL"
+              t2("image.url")
             ]
           }
         ),
@@ -2012,7 +2039,7 @@ function ImageSidebarPanel({ data, setData }) {
             disabled: !imageUploadHandler,
             children: [
               /* @__PURE__ */ jsx(CloudUploadOutlined, { fontSize: "small", sx: { mr: 0.5 } }),
-              "上传"
+              t2("image.upload")
             ]
           }
         )
@@ -2020,7 +2047,7 @@ function ImageSidebarPanel({ data, setData }) {
       uploadMode === "url" ? /* @__PURE__ */ jsx(
         TextInput,
         {
-          label: "Source URL",
+          label: t2("image.sourceUrl"),
           defaultValue: ((_a = data.props) == null ? void 0 : _a.url) ?? "",
           onChange: (v) => {
             const url = v.trim().length === 0 ? null : v.trim();
@@ -2042,20 +2069,20 @@ function ImageSidebarPanel({ data, setData }) {
           Button,
           {
             variant: "outlined",
-            startIcon: /* @__PURE__ */ jsx(CloudUploadOutlined, {}),
+            startIcon: uploading ? /* @__PURE__ */ jsx(CircularProgress, { size: 16 }) : /* @__PURE__ */ jsx(CloudUploadOutlined, {}),
             onClick: handleUploadClick,
             disabled: uploading || !imageUploadHandler,
             fullWidth: true,
-            children: uploading ? "上传中..." : "选择图片"
+            children: uploading ? t2("image.uploading") : t2("image.selectImage")
           }
         ),
-        !imageUploadHandler && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "请配置 imageUploadHandler 以启用本地上传功能" })
+        !imageUploadHandler && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t2("image.uploadHandlerNotConfigured") })
       ] })
     ] }),
     /* @__PURE__ */ jsx(
       TextInput,
       {
-        label: "Alt text",
+        label: t2("image.altText"),
         defaultValue: ((_b = data.props) == null ? void 0 : _b.alt) ?? "",
         onChange: (alt) => updateData({ ...data, props: { ...data.props, alt } })
       }
@@ -2063,7 +2090,7 @@ function ImageSidebarPanel({ data, setData }) {
     /* @__PURE__ */ jsx(
       TextInput,
       {
-        label: "Click through URL",
+        label: t2("image.clickThroughUrl"),
         defaultValue: ((_c = data.props) == null ? void 0 : _c.linkHref) ?? "",
         onChange: (v) => {
           const linkHref = v.trim().length === 0 ? null : v.trim();
@@ -2075,7 +2102,7 @@ function ImageSidebarPanel({ data, setData }) {
       /* @__PURE__ */ jsx(
         TextDimensionInput,
         {
-          label: "Width",
+          label: t2("image.width"),
           defaultValue: (_d = data.props) == null ? void 0 : _d.width,
           onChange: (width) => updateData({ ...data, props: { ...data.props, width } })
         }
@@ -2083,7 +2110,7 @@ function ImageSidebarPanel({ data, setData }) {
       /* @__PURE__ */ jsx(
         TextDimensionInput,
         {
-          label: "Height",
+          label: t2("image.height"),
           defaultValue: (_e = data.props) == null ? void 0 : _e.height,
           onChange: (height) => updateData({ ...data, props: { ...data.props, height } })
         }
@@ -2092,7 +2119,7 @@ function ImageSidebarPanel({ data, setData }) {
     /* @__PURE__ */ jsxs(
       RadioGroupInput,
       {
-        label: "Alignment",
+        label: t2("image.alignment"),
         defaultValue: ((_f = data.props) == null ? void 0 : _f.contentAlignment) ?? "middle",
         onChange: (contentAlignment) => updateData({ ...data, props: { ...data.props, contentAlignment } }),
         children: [
@@ -2202,12 +2229,12 @@ function renderMessage(val) {
 }
 function ConfigurationPanel() {
   const { t: t2 } = useTranslation();
-  const document = useDocument();
+  const document2 = useDocument();
   const selectedBlockId = useSelectedBlockId();
   if (!selectedBlockId) {
     return renderMessage(t2("inspector.clickBlockToInspect"));
   }
-  const block = document[selectedBlockId];
+  const block = document2[selectedBlockId];
   if (!block) {
     return renderMessage(t2("inspector.blockNotFound", { id: selectedBlockId }));
   }
@@ -2273,7 +2300,8 @@ function InspectorDrawer() {
       PaperProps: {
         sx: {
           position: "relative",
-          height: "100%"
+          height: "100%",
+          zIndex: 0
         }
       },
       sx: {
@@ -2282,10 +2310,12 @@ function InspectorDrawer() {
         flexShrink: 0,
         flexGrow: 0,
         overflow: "hidden",
+        zIndex: 0,
         "& .MuiDrawer-paper": {
           position: "relative",
           height: "100%",
-          width: "100%"
+          width: "100%",
+          zIndex: 0
         }
       },
       children: [
@@ -2298,59 +2328,51 @@ function InspectorDrawer() {
     }
   );
 }
-function LanguageSwitcher() {
-  const language = useLanguage();
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  const handleLanguageChange = (lang) => {
-    setLanguage(lang);
-    handleClose();
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(IconButton, { onClick: handleClick, size: "small", sx: { color: "text.secondary" }, children: /* @__PURE__ */ jsx(LanguageOutlined, { fontSize: "small" }) }),
-    /* @__PURE__ */ jsxs(Menu, { anchorEl, open, onClose: handleClose, children: [
-      /* @__PURE__ */ jsx(MenuItem, { onClick: () => handleLanguageChange("zh"), selected: language === "zh", children: "中文" }),
-      /* @__PURE__ */ jsx(MenuItem, { onClick: () => handleLanguageChange("en"), selected: language === "en", children: "English" })
-    ] })
-  ] });
+const sampleTemplates = {
+  welcome: () => import("./samples-BnRgwIcn.js").then((n) => n.w).then((m) => m.default),
+  "one-time-password": () => import("./samples-BnRgwIcn.js").then((n) => n.o).then((m) => m.default),
+  "order-ecomerce": () => import("./samples-BnRgwIcn.js").then((n) => n.a).then((m) => m.default),
+  "post-metrics-report": () => import("./samples-BnRgwIcn.js").then((n) => n.p).then((m) => m.default),
+  "reservation-reminder": () => import("./samples-BnRgwIcn.js").then((n) => n.r).then((m) => m.default),
+  "reset-password": () => import("./samples-BnRgwIcn.js").then((n) => n.b).then((m) => m.default),
+  "respond-to-message": () => import("./samples-BnRgwIcn.js").then((n) => n.c).then((m) => m.default),
+  "subscription-receipt": () => import("./samples-BnRgwIcn.js").then((n) => n.s).then((m) => m.default),
+  "basic-template": () => import("./samples-BnRgwIcn.js").then((n) => n.d).then((m) => m.default)
+};
+const templateCache = {};
+async function loadSampleTemplate(sampleName) {
+  const loader = sampleTemplates[sampleName];
+  if (!loader) {
+    return EMPTY_EMAIL_MESSAGE;
+  }
+  if (templateCache[sampleName]) {
+    return templateCache[sampleName];
+  }
+  const template = await loader();
+  templateCache[sampleName] = template;
+  return template;
 }
-function SidebarButton({ href, children }) {
+function SidebarButton({ sampleName, children }) {
   const [loading, setLoading] = useState(false);
   const handleClick = async () => {
-    if (href.startsWith("#sample/")) {
-      setLoading(true);
-      try {
-        const sampleName = href.replace("#sample/", "");
-        const template = await loadSampleTemplate(sampleName);
-        resetDocument(template);
-      } catch (error) {
-        console.error("Failed to load template:", error);
-      } finally {
-        setLoading(false);
-      }
-    } else {
-      resetDocument(getConfiguration(href));
+    setLoading(true);
+    try {
+      const template = await loadSampleTemplate(sampleName);
+      resetDocument(template);
+    } catch (error) {
+      console.error("Failed to load template:", error);
+    } finally {
+      setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsx(Button, { size: "small", href, onClick: handleClick, disabled: loading, children: loading ? "Loading..." : children });
+  return /* @__PURE__ */ jsx(Button, { size: "small", onClick: handleClick, disabled: loading, children: loading ? "Loading..." : children });
 }
 const SAMPLES_DRAWER_WIDTH = 240;
 function SamplesDrawer() {
   const { t: t2 } = useTranslation();
   const samplesDrawerOpen = useSamplesDrawerOpen();
-  const currentHash = typeof window !== "undefined" ? window.location.hash : "";
-  const isNewDocument = !currentHash || currentHash === "#";
   const handleNewDocumentClick = () => {
-    resetDocument(getConfiguration("#"));
-    if (typeof window !== "undefined") {
-      window.location.hash = "#";
-    }
+    resetDocument(EMPTY_EMAIL_MESSAGE);
   };
   return /* @__PURE__ */ jsx(
     Drawer,
@@ -2361,7 +2383,8 @@ function SamplesDrawer() {
       PaperProps: {
         sx: {
           position: "relative",
-          height: "100%"
+          height: "100%",
+          zIndex: 0
         }
       },
       sx: {
@@ -2370,10 +2393,12 @@ function SamplesDrawer() {
         flexShrink: 0,
         flexGrow: 0,
         overflow: "hidden",
+        zIndex: 0,
         "& .MuiDrawer-paper": {
           position: "relative",
           height: "100%",
-          width: "100%"
+          width: "100%",
+          zIndex: 0
         }
       },
       children: /* @__PURE__ */ jsx(Stack, { spacing: 3, py: 1, px: 2, width: SAMPLES_DRAWER_WIDTH, children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, sx: { "& .MuiButtonBase-root": { width: "100%", justifyContent: "flex-start" } }, children: [
@@ -2384,10 +2409,9 @@ function SamplesDrawer() {
             size: "small",
             variant: "contained",
             color: "primary",
-            href: "#",
             onClick: handleNewDocumentClick,
             sx: {
-              fontWeight: isNewDocument ? 600 : 400,
+              fontWeight: 600,
               width: "100%",
               justifyContent: "flex-start"
             },
@@ -2398,8 +2422,9 @@ function SamplesDrawer() {
         /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
           /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { px: 0.75, fontWeight: 500 }, children: t2("common.useBuiltInTemplates") }),
           /* @__PURE__ */ jsxs(Stack, { alignItems: "flex-start", children: [
-            /* @__PURE__ */ jsx(SidebarButton, { href: "#sample/welcome", children: t2("samples.welcomeEmail") }),
-            /* @__PURE__ */ jsx(SidebarButton, { href: "#sample/reservation-reminder", children: t2("samples.reservationReminder") })
+            /* @__PURE__ */ jsx(SidebarButton, { sampleName: "basic-template", children: t2("samples.quickStart") }),
+            /* @__PURE__ */ jsx(SidebarButton, { sampleName: "welcome", children: t2("samples.welcomeEmail") }),
+            /* @__PURE__ */ jsx(SidebarButton, { sampleName: "reservation-reminder", children: t2("samples.reservationReminder") })
           ] })
         ] })
       ] }) })
@@ -2763,7 +2788,7 @@ function ColumnsContainerEditor({ style, props }) {
 }
 function ContainerEditor({ style, props }) {
   const childrenIds = (props == null ? void 0 : props.childrenIds) ?? [];
-  const document = useDocument();
+  const document2 = useDocument();
   const currentBlockId = useCurrentBlockId();
   return /* @__PURE__ */ jsx(Container, { style, children: /* @__PURE__ */ jsx(
     EditorChildrenIds,
@@ -2775,7 +2800,7 @@ function ContainerEditor({ style, props }) {
           [currentBlockId]: {
             type: "Container",
             data: {
-              ...document[currentBlockId].data,
+              ...document2[currentBlockId].data,
               props: { childrenIds: childrenIds2 }
             }
           }
@@ -2810,7 +2835,7 @@ function getFontFamily(fontFamily) {
 }
 function EmailLayoutEditor(props) {
   const childrenIds = props.childrenIds ?? [];
-  const document = useDocument();
+  const document2 = useDocument();
   const currentBlockId = useCurrentBlockId();
   return /* @__PURE__ */ jsx(
     "div",
@@ -2863,7 +2888,7 @@ function EmailLayoutEditor(props) {
                   [currentBlockId]: {
                     type: "EmailLayout",
                     data: {
-                      ...document[currentBlockId].data,
+                      ...document2[currentBlockId].data,
                       childrenIds: childrenIds2
                     }
                   }
@@ -2910,7 +2935,7 @@ const sx = {
   zIndex: "fab"
 };
 function TuneMenu({ blockId }) {
-  const document = useDocument();
+  const document2 = useDocument();
   const handleDeleteClick = () => {
     var _a, _b, _c;
     const filterChildrenIds = (childrenIds) => {
@@ -2919,7 +2944,7 @@ function TuneMenu({ blockId }) {
       }
       return childrenIds.filter((f) => f !== blockId);
     };
-    const nDocument = { ...document };
+    const nDocument = { ...document2 };
     for (const [id, b] of Object.entries(nDocument)) {
       const block = b;
       if (id === blockId) {
@@ -2986,7 +3011,7 @@ function TuneMenu({ blockId }) {
       }
       return childrenIds;
     };
-    const nDocument = { ...document };
+    const nDocument = { ...document2 };
     for (const [id, b] of Object.entries(nDocument)) {
       const block = b;
       if (id === blockId) {
@@ -3139,8 +3164,8 @@ const EditorConfigurationSchema = z.record(z.string(), EditorBlockSchema);
 const EditorBlockContext = createContext(null);
 const useCurrentBlockId = () => useContext(EditorBlockContext);
 function EditorBlock({ id }) {
-  const document = useDocument();
-  const block = document[id];
+  const document2 = useDocument();
+  const block = document2[id];
   if (!block) {
     throw new Error("Could not find block");
   }
@@ -3168,28 +3193,60 @@ function ToggleSamplesPanelButton() {
   return /* @__PURE__ */ jsx(IconButton, { onClick: toggleSamplesDrawerOpen, children: icon });
 }
 function DownloadJson() {
+  const { t: t2 } = useTranslation();
   const doc = useDocument();
   const href = useMemo(() => {
     return `data:text/plain,${encodeURIComponent(JSON.stringify(doc, null, "  "))}`;
   }, [doc]);
-  return /* @__PURE__ */ jsx(Tooltip, { title: "Download JSON file", children: /* @__PURE__ */ jsx(IconButton, { href, download: "emailTemplate.json", children: /* @__PURE__ */ jsx(FileDownloadOutlined, { fontSize: "small" }) }) });
+  return /* @__PURE__ */ jsx(Tooltip, { title: t2("common.downloadJson"), children: /* @__PURE__ */ jsx(IconButton, { href, download: "emailTemplate.json", children: /* @__PURE__ */ jsx(FileDownloadOutlined, { fontSize: "small" }) }) });
 }
 let hljs;
 let jsonHighlighter;
 let xmlHighlighter;
 let prettierFormat;
-let prettierPluginBabel;
-let prettierPluginEstree;
 let prettierPluginHtml;
+function escapeHtml(text) {
+  if (typeof document === "undefined") {
+    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  }
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+}
+function loadHighlightJsCSS() {
+  if (typeof document === "undefined") return;
+  const existingLink = document.querySelector("link[data-highlight-js-css]");
+  if (existingLink) return;
+  try {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css";
+    link.setAttribute("data-highlight-js-css", "true");
+    document.head.appendChild(link);
+  } catch (error) {
+    console.warn("Failed to load highlight.js CSS:", error);
+  }
+}
 async function loadHighlightJs() {
   if (!hljs) {
-    hljs = await import("highlight.js");
-    jsonHighlighter = await import("highlight.js/lib/languages/json");
-    xmlHighlighter = await import("highlight.js/lib/languages/xml");
-    hljs.default.registerLanguage("json", jsonHighlighter.default);
-    hljs.default.registerLanguage("html", xmlHighlighter.default);
+    try {
+      const hljsModule = await import("highlight.js");
+      hljs = hljsModule.default || hljsModule;
+      jsonHighlighter = await import("highlight.js/lib/languages/json");
+      xmlHighlighter = await import("highlight.js/lib/languages/xml");
+      const jsonLang = jsonHighlighter.default || jsonHighlighter;
+      const xmlLang = xmlHighlighter.default || xmlHighlighter;
+      hljs.registerLanguage("json", jsonLang);
+      hljs.registerLanguage("html", xmlLang);
+      loadHighlightJsCSS();
+    } catch (error) {
+      console.error("Failed to load highlight.js. Please ensure highlight.js is installed:", error);
+      hljs = {
+        highlight: (code) => ({ value: escapeHtml(code) })
+      };
+    }
   }
-  return hljs.default;
+  return hljs;
 }
 function dynamicImport(path) {
   const importFunc = new Function("path", "return import(path)");
@@ -3199,28 +3256,27 @@ async function loadPrettier() {
   if (!prettierFormat) {
     try {
       const prettierMain = await import("prettier");
+      const prettierVersion = prettierMain.version || "2.0.0";
+      const majorVersion = parseInt(prettierVersion.split(".")[0], 10);
+      if (majorVersion < 3) {
+        prettierFormat = prettierMain.format;
+        prettierPluginHtml = null;
+        return prettierFormat;
+      }
       try {
         const prettierStandalone = await dynamicImport("prettier/standalone");
         prettierFormat = prettierStandalone.format;
         try {
-          prettierPluginBabel = await dynamicImport("prettier/plugins/babel");
+          prettierPluginHtml = await dynamicImport("prettier/parser-html");
         } catch {
-          prettierPluginBabel = null;
-        }
-        try {
-          prettierPluginEstree = await dynamicImport("prettier/plugins/estree");
-        } catch {
-          prettierPluginEstree = null;
-        }
-        try {
-          prettierPluginHtml = await dynamicImport("prettier/plugins/html");
-        } catch {
-          prettierPluginHtml = null;
+          try {
+            prettierPluginHtml = await dynamicImport("prettier/plugins/html");
+          } catch {
+            prettierPluginHtml = null;
+          }
         }
       } catch {
         prettierFormat = prettierMain.format;
-        prettierPluginBabel = null;
-        prettierPluginEstree = null;
         prettierPluginHtml = null;
       }
     } catch (error) {
@@ -3231,28 +3287,200 @@ async function loadPrettier() {
   return prettierFormat;
 }
 async function html(value) {
-  const [hljsInstance, format] = await Promise.all([loadHighlightJs(), loadPrettier()]);
+  let hljsInstance;
+  let format;
+  try {
+    [hljsInstance, format] = await Promise.all([loadHighlightJs(), loadPrettier()]);
+  } catch (error) {
+    console.error("Failed to load highlight.js or prettier:", error);
+    return escapeHtml(value);
+  }
   const formatOptions = {
-    parser: "html"
+    parser: "html",
+    printWidth: 120,
+    tabWidth: 2,
+    useTabs: false,
+    htmlWhitespaceSensitivity: "ignore",
+    // 忽略HTML空白敏感度，避免不必要的缩进
+    bracketSameLine: false
+    // 确保开始和结束标签在不同行，便于对齐
   };
   if (prettierPluginHtml) {
-    formatOptions.plugins = [prettierPluginHtml.default];
+    const htmlParser = prettierPluginHtml.default || prettierPluginHtml;
+    formatOptions.plugins = [htmlParser];
+  }
+  const removeLeadingIndent = (text) => {
+    const lines = text.split("\n");
+    if (lines.length === 0) return text;
+    const firstNonEmptyLine = lines.find((line) => line.trim().length > 0);
+    if (!firstNonEmptyLine) return text;
+    const trimmedFirstLine = firstNonEmptyLine.trim();
+    const isRootTag = trimmedFirstLine.startsWith("<!DOCTYPE") || trimmedFirstLine.startsWith("<html");
+    if (isRootTag) {
+      const leadingSpaces = firstNonEmptyLine.length - firstNonEmptyLine.trimStart().length;
+      if (leadingSpaces > 0) {
+        return lines.map((line) => {
+          if (line.trim().length === 0) return line;
+          const currentLeading = line.length - line.trimStart().length;
+          if (currentLeading >= leadingSpaces) {
+            return line.substring(leadingSpaces);
+          }
+          return line;
+        }).join("\n");
+      }
+    }
+    return text;
+  };
+  const fixTagAlignment = (text) => {
+    var _a, _b;
+    const lines = text.split("\n");
+    const stack = [];
+    const result = [];
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      const trimmed = line.trim();
+      if (!trimmed) {
+        result.push(line);
+        continue;
+      }
+      const currentIndent = line.length - line.trimStart().length;
+      const isClosingTag = trimmed.startsWith("</");
+      const isSelfClosing = trimmed.endsWith("/>");
+      const isOpeningTag = trimmed.startsWith("<") && !isClosingTag && !isSelfClosing;
+      if (isClosingTag) {
+        const tagName = (_a = trimmed.match(/<\/(\w+)/)) == null ? void 0 : _a[1];
+        if (tagName && stack.length > 0) {
+          const opening = stack[stack.length - 1];
+          if (opening.tag === tagName) {
+            const correctIndent = opening.indent;
+            result.push(" ".repeat(correctIndent) + trimmed);
+            stack.pop();
+            continue;
+          }
+        }
+        result.push(line);
+      } else if (isOpeningTag) {
+        const tagName = (_b = trimmed.match(/<(\w+)/)) == null ? void 0 : _b[1];
+        if (tagName) {
+          stack.push({ tag: tagName, indent: currentIndent });
+        }
+        result.push(line);
+      } else {
+        result.push(line);
+      }
+    }
+    return result.join("\n");
+  };
+  let prettyValue;
+  try {
+    prettyValue = await format(value, formatOptions);
+    if (!prettyValue || typeof prettyValue !== "string") {
+      throw new Error("Prettier returned invalid value");
+    }
+    prettyValue = removeLeadingIndent(prettyValue);
+    prettyValue = fixTagAlignment(prettyValue);
+  } catch (error) {
+    try {
+      const prettierMain = await import("prettier");
+      const mainFormatOptions = {
+        parser: "html",
+        printWidth: 120,
+        tabWidth: 2,
+        useTabs: false,
+        htmlWhitespaceSensitivity: "ignore",
+        bracketSameLine: false
+        // 确保开始和结束标签在不同行，便于对齐
+      };
+      prettyValue = await prettierMain.format(value, mainFormatOptions);
+      if (!prettyValue || typeof prettyValue !== "string") {
+        throw new Error("Prettier main package returned invalid value");
+      }
+      prettyValue = removeLeadingIndent(prettyValue);
+      prettyValue = fixTagAlignment(prettyValue);
+    } catch (fallbackError) {
+      try {
+        let formatted = value.replace(/></g, ">\n<").replace(/\n\s*\n/g, "\n").split("\n");
+        let indent = 0;
+        const indentSize = 2;
+        const result = [];
+        for (let i = 0; i < formatted.length; i++) {
+          const line = formatted[i];
+          const trimmed = line.trim();
+          if (!trimmed) {
+            result.push("");
+            continue;
+          }
+          const isClosingTag = trimmed.startsWith("</");
+          const isSelfClosing = trimmed.endsWith("/>");
+          const isOpeningTag = trimmed.startsWith("<") && !isClosingTag && !isSelfClosing;
+          if (isClosingTag) {
+            indent = Math.max(0, indent - indentSize);
+            result.push(" ".repeat(indent) + trimmed);
+          } else if (isOpeningTag) {
+            result.push(" ".repeat(indent) + trimmed);
+            indent += indentSize;
+          } else if (isSelfClosing) {
+            result.push(" ".repeat(indent) + trimmed);
+          } else {
+            result.push(" ".repeat(indent) + trimmed);
+          }
+        }
+        prettyValue = result.filter((line) => line.length > 0).join("\n");
+      } catch {
+        console.warn("Failed to format HTML, returning original value:", error);
+        prettyValue = value;
+      }
+    }
+  }
+  try {
+    return hljsInstance.highlight(prettyValue, { language: "html" }).value;
+  } catch (error) {
+    console.error("Failed to highlight HTML:", error);
+    return escapeHtml(prettyValue);
   }
-  const prettyValue = await format(value, formatOptions);
-  return hljsInstance.highlight(prettyValue, { language: "html" }).value;
 }
 async function json(value) {
-  const [hljsInstance, format] = await Promise.all([loadHighlightJs(), loadPrettier()]);
+  let hljsInstance;
+  let format;
+  try {
+    [hljsInstance, format] = await Promise.all([loadHighlightJs(), loadPrettier()]);
+  } catch (error) {
+    console.error("Failed to load highlight.js or prettier:", error);
+    return escapeHtml(value);
+  }
   const formatOptions = {
-    parser: "json",
-    printWidth: 0,
-    trailingComma: "all"
+    parser: "json"
+    // 移除 printWidth: 0，使用默认值或设置一个合理的值
+    // trailingComma: 'all' 在 JSON 中可能不支持，移除
   };
-  if (prettierPluginBabel && prettierPluginEstree) {
-    formatOptions.plugins = [prettierPluginBabel.default, prettierPluginEstree.default];
+  let prettyValue;
+  try {
+    prettyValue = await format(value, formatOptions);
+  } catch (error) {
+    try {
+      const prettierMain = await import("prettier");
+      prettyValue = await prettierMain.format(value, {
+        parser: "json"
+      });
+    } catch (fallbackError) {
+      try {
+        const parsed = JSON.parse(value);
+        prettyValue = JSON.stringify(parsed, null, 2);
+      } catch {
+        console.warn("Failed to format JSON, returning original value:", error);
+        prettyValue = value;
+      }
+    }
+  }
+  if (typeof prettyValue !== "string") {
+    prettyValue = JSON.stringify(prettyValue, null, 2);
+  }
+  try {
+    return hljsInstance.highlight(prettyValue, { language: "json" }).value;
+  } catch (error) {
+    console.error("Failed to highlight JSON:", error);
+    return escapeHtml(prettyValue);
   }
-  const prettyValue = await format(value, formatOptions);
-  return hljsInstance.highlight(prettyValue, { language: "javascript" }).value;
 }
 function HighlightedCodePanel({ type, value }) {
   const [code, setCode] = useState(null);
@@ -3285,8 +3513,8 @@ function HighlightedCodePanel({ type, value }) {
   );
 }
 function HtmlPanel() {
-  const document = useDocument();
-  const code = useMemo(() => renderToStaticMarkup(document, { rootBlockId: "root" }), [document]);
+  const document2 = useDocument();
+  const code = useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
   return /* @__PURE__ */ jsx(HighlightedCodePanel, { type: "html", value: code });
 }
 function validateTextAreaValue(value) {
@@ -3374,19 +3602,20 @@ function ImportJsonDialog({ onClose }) {
   ] });
 }
 function ImportJson() {
+  const { t: t2 } = useTranslation();
   const [open, setOpen] = useState(false);
   let dialog = null;
   if (open) {
     dialog = /* @__PURE__ */ jsx(ImportJsonDialog, { onClose: () => setOpen(false) });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Tooltip, { title: "Import JSON", children: /* @__PURE__ */ jsx(IconButton, { onClick: () => setOpen(true), children: /* @__PURE__ */ jsx(FileUploadOutlined, { fontSize: "small" }) }) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: t2("common.importJson"), children: /* @__PURE__ */ jsx(IconButton, { onClick: () => setOpen(true), children: /* @__PURE__ */ jsx(FileUploadOutlined, { fontSize: "small" }) }) }),
     dialog
   ] });
 }
 function JsonPanel() {
-  const document = useDocument();
-  const code = useMemo(() => JSON.stringify(document, null, "  "), [document]);
+  const document2 = useDocument();
+  const code = useMemo(() => JSON.stringify(document2, null, "  "), [document2]);
   return /* @__PURE__ */ jsx(HighlightedCodePanel, { type: "json", value: code });
 }
 function MainTabsGroup() {
@@ -3435,32 +3664,93 @@ function MainTabsGroup() {
     )
   ] });
 }
-function ShareButton() {
-  const document = useDocument();
-  const [message, setMessage] = useState(null);
-  const onClick = async () => {
-    const c = encodeURIComponent(JSON.stringify(document));
-    location.hash = `#code/${btoa(c)}`;
-    setMessage("The URL was updated. Copy it to share your current template.");
+function NameInput() {
+  const { t: t2 } = useTranslation();
+  const name = useName();
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      component: "span",
+      variant: "body2",
+      sx: {
+        position: "absolute",
+        left: "50%",
+        transform: "translateX(-50%)",
+        maxWidth: "300px",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        color: "text.primary",
+        fontWeight: 500
+      },
+      children: name || t2("common.unnamedTemplate")
+    }
+  );
+}
+function SaveAndExitButton() {
+  const { t: t2 } = useTranslation();
+  const saveHandler = useSaveHandler();
+  const saveAndExitHandler = useSaveAndExitHandler();
+  const [saving, setSaving] = useState(false);
+  const handleSaveAndExit = async () => {
+    if (!saveAndExitHandler) {
+      console.warn("Save and exit handler is not configured.");
+      return;
+    }
+    setSaving(true);
+    try {
+      if (saveHandler) {
+        await saveDocument();
+      }
+      saveAndExitDocument(saveAndExitHandler);
+    } catch (error) {
+      console.error("Failed to save and exit:", error);
+    } finally {
+      setSaving(false);
+    }
   };
-  const onClose = () => {
-    setMessage(null);
+  return /* @__PURE__ */ jsx(Tooltip, { title: t2("common.saveAndExit"), children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      color: "primary",
+      size: "small",
+      onClick: handleSaveAndExit,
+      disabled: saving || !saveAndExitHandler,
+      children: saving ? /* @__PURE__ */ jsx(CircularProgress, { size: 16, color: "inherit" }) : /* @__PURE__ */ jsx(ExitToAppOutlined, { fontSize: "small" })
+    }
+  ) }) });
+}
+function SaveButton() {
+  const { t: t2 } = useTranslation();
+  const saveHandler = useSaveHandler();
+  const [saving, setSaving] = useState(false);
+  const handleSave = async () => {
+    if (!saveHandler) {
+      console.warn("Save handler is not configured. Please set saveHandler in EmailBuilder props.");
+      return;
+    }
+    setSaving(true);
+    try {
+      await saveDocument();
+    } catch (error) {
+      console.error("Failed to save document:", error);
+    } finally {
+      setSaving(false);
+    }
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(IconButton, { onClick, children: /* @__PURE__ */ jsx(Tooltip, { title: "Share current template", children: /* @__PURE__ */ jsx(IosShareOutlined, { fontSize: "small" }) }) }),
-    /* @__PURE__ */ jsx(
-      Snackbar,
-      {
-        anchorOrigin: { vertical: "top", horizontal: "center" },
-        open: message !== null,
-        onClose,
-        message
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(Tooltip, { title: t2("common.save"), children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      color: "primary",
+      onClick: handleSave,
+      disabled: saving || !saveHandler,
+      children: saving ? /* @__PURE__ */ jsx(CircularProgress, { size: 16 }) : /* @__PURE__ */ jsx(SaveOutlined, { fontSize: "small" })
+    }
+  ) }) });
 }
 function TemplatePanel() {
-  const document = useDocument();
+  const { t: t2 } = useTranslation();
+  const document2 = useDocument();
   const selectedMainTab = useSelectedMainTab();
   const selectedScreenSize = useSelectedScreenSize();
   let mainBoxSx = {
@@ -3491,7 +3781,7 @@ function TemplatePanel() {
       case "editor":
         return /* @__PURE__ */ jsx(Box, { sx: mainBoxSx, children: /* @__PURE__ */ jsx(EditorBlock, { id: "root" }) });
       case "preview":
-        return /* @__PURE__ */ jsx(Box, { sx: mainBoxSx, children: /* @__PURE__ */ jsx(Reader, { document, rootBlockId: "root" }) });
+        return /* @__PURE__ */ jsx(Box, { sx: mainBoxSx, children: /* @__PURE__ */ jsx(Reader, { document: document2, rootBlockId: "root" }) });
       case "html":
         return /* @__PURE__ */ jsx(HtmlPanel, {});
       case "json":
@@ -3508,7 +3798,8 @@ function TemplatePanel() {
           borderColor: "divider",
           backgroundColor: "white",
           flexShrink: 0,
-          zIndex: "appBar",
+          position: "relative",
+          zIndex: 1,
           px: 1
         },
         direction: "row",
@@ -3516,16 +3807,18 @@ function TemplatePanel() {
         alignItems: "center",
         children: [
           /* @__PURE__ */ jsx(ToggleSamplesPanelButton, {}),
+          /* @__PURE__ */ jsx(NameInput, {}),
           /* @__PURE__ */ jsxs(Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center", children: [
             /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 2, children: /* @__PURE__ */ jsx(MainTabsGroup, {}) }),
-            /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, children: [
+            /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
               /* @__PURE__ */ jsx(DownloadJson, {}),
               /* @__PURE__ */ jsx(ImportJson, {}),
-              /* @__PURE__ */ jsxs(ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange, children: [
-                /* @__PURE__ */ jsx(ToggleButton, { value: "desktop", children: /* @__PURE__ */ jsx(Tooltip, { title: "Desktop view", children: /* @__PURE__ */ jsx(MonitorOutlined, { fontSize: "small" }) }) }),
-                /* @__PURE__ */ jsx(ToggleButton, { value: "mobile", children: /* @__PURE__ */ jsx(Tooltip, { title: "Mobile view", children: /* @__PURE__ */ jsx(PhoneIphoneOutlined, { fontSize: "small" }) }) })
-              ] }),
-              /* @__PURE__ */ jsx(ShareButton, {})
+              /* @__PURE__ */ jsx(SaveButton, {}),
+              /* @__PURE__ */ jsx(SaveAndExitButton, {}),
+              /* @__PURE__ */ jsxs(ToggleButtonGroup, { size: "small", value: selectedScreenSize, exclusive: true, onChange: handleScreenSizeChange, children: [
+                /* @__PURE__ */ jsx(ToggleButton, { value: "desktop", children: /* @__PURE__ */ jsx(Tooltip, { title: t2("common.desktopView"), children: /* @__PURE__ */ jsx(MonitorOutlined, { fontSize: "small" }) }) }),
+                /* @__PURE__ */ jsx(ToggleButton, { value: "mobile", children: /* @__PURE__ */ jsx(Tooltip, { title: t2("common.mobileView"), children: /* @__PURE__ */ jsx(PhoneIphoneOutlined, { fontSize: "small" }) }) })
+              ] })
             ] })
           ] }),
           /* @__PURE__ */ jsx(ToggleInspectorPanelButton, {})
@@ -3559,7 +3852,7 @@ function App() {
       },
       children: [
         /* @__PURE__ */ jsx(SamplesDrawer, {}),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           Stack,
           {
             sx: {
@@ -3568,12 +3861,10 @@ function App() {
               // 允许 flex 项目收缩到内容以下
               transition: `${marginLeftTransition}, ${marginRightTransition}`,
               position: "relative",
-              overflow: "hidden"
+              overflow: "hidden",
+              zIndex: 0
             },
-            children: [
-              /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top: 8, right: 8, zIndex: 1e3 }, children: /* @__PURE__ */ jsx(LanguageSwitcher, {}) }),
-              /* @__PURE__ */ jsx(TemplatePanel, {})
-            ]
+            children: /* @__PURE__ */ jsx(TemplatePanel, {})
           }
         ),
         /* @__PURE__ */ jsx(InspectorDrawer, {})
@@ -3586,38 +3877,42 @@ function EmailBuilder({
   initialLanguage = "en",
   imageUploadHandler,
   onChange,
+  saveHandler,
+  saveAndExitHandler,
+  initialName,
+  onNameChange,
   theme: customTheme
 }) {
-  const currentLanguage = useLanguage();
   useEffect(() => {
-    if (initialDocument) {
+    if (initialDocument !== void 0) {
       resetDocument(initialDocument);
     }
-    if (initialLanguage) {
-      setLanguage(initialLanguage);
-    }
-    if (imageUploadHandler) {
-      setImageUploadHandler(imageUploadHandler);
-    }
-    if (onChange) {
-      setOnChange(onChange);
-    }
-  }, []);
+  }, [initialDocument]);
   useEffect(() => {
-    if (initialLanguage && initialLanguage !== currentLanguage) {
+    if (initialLanguage !== void 0) {
       setLanguage(initialLanguage);
     }
-  }, [initialLanguage, currentLanguage]);
+  }, [initialLanguage]);
   useEffect(() => {
-    if (imageUploadHandler) {
-      setImageUploadHandler(imageUploadHandler);
-    }
+    setImageUploadHandler(imageUploadHandler);
   }, [imageUploadHandler]);
   useEffect(() => {
-    if (onChange) {
-      setOnChange(onChange);
-    }
+    setOnChange(onChange);
   }, [onChange]);
+  useEffect(() => {
+    setSaveHandler(saveHandler);
+  }, [saveHandler]);
+  useEffect(() => {
+    setSaveAndExitHandler(saveAndExitHandler);
+  }, [saveAndExitHandler]);
+  useEffect(() => {
+    if (initialName !== void 0) {
+      setName(initialName);
+    }
+  }, [initialName]);
+  useEffect(() => {
+    setOnNameChange(onNameChange);
+  }, [onNameChange]);
   return /* @__PURE__ */ jsxs(ThemeProvider, { theme: customTheme || THEME, children: [
     /* @__PURE__ */ jsx(CssBaseline, {}),
     /* @__PURE__ */ jsx(