monto-email-builder 1.0.0

package/dist/index.js

@@ -0,0 +1,3534 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect, Fragment as Fragment$1, createContext, useContext, 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 { create } from "zustand";
+import { E as EMPTY_EMAIL_MESSAGE } from "./samples-SfLrANbd.js";
+import { createTheme, lighten, darken, alpha } 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 { AvatarPropsDefaults, AvatarPropsSchema, Avatar } from "@usewaypoint/block-avatar";
+import { HexColorPicker, HexColorInput } from "react-colorful";
+import { ButtonPropsDefaults, ButtonPropsSchema, Button as Button$1 } from "@usewaypoint/block-button";
+import { z } from "zod";
+import { ColumnsContainerPropsSchema as ColumnsContainerPropsSchema$1, ColumnsContainer } from "@usewaypoint/block-columns-container";
+import { ContainerPropsSchema as ContainerPropsSchema$1, Container } from "@usewaypoint/block-container";
+import { DividerPropsDefaults, DividerPropsSchema, Divider as Divider$1 } from "@usewaypoint/block-divider";
+import { HeadingPropsDefaults, HeadingPropsSchema, Heading } from "@usewaypoint/block-heading";
+import { HtmlPropsSchema, Html } from "@usewaypoint/block-html";
+import { ImagePropsSchema, Image } from "@usewaypoint/block-image";
+import { SpacerPropsDefaults, SpacerPropsSchema, Spacer } from "@usewaypoint/block-spacer";
+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"
+};
+const samples$1 = {
+  welcomeEmail: "Welcome email",
+  oneTimePasscode: "One-time passcode (OTP)",
+  resetPassword: "Reset password",
+  orderEcommerce: "E-commerce receipt",
+  subscriptionReceipt: "Subscription receipt",
+  reservationReminder: "Reservation reminder",
+  postMetrics: "Post metrics",
+  respondToMessage: "Respond to inquiry"
+};
+const inspector$1 = {
+  styles: "Styles",
+  inspect: "Inspect",
+  clickBlockToInspect: "Click on a block to inspect.",
+  blockNotFound: "Block with id {{id}} was not found. Click on a block to reset."
+};
+const tabs$1 = {
+  edit: "Edit",
+  preview: "Preview",
+  htmlOutput: "HTML output",
+  jsonOutput: "JSON output"
+};
+const image$1 = {
+  title: "Image block",
+  sourceUrl: "Source URL",
+  altText: "Alt text",
+  clickThroughUrl: "Click through URL",
+  width: "Width",
+  height: "Height",
+  alignment: "Alignment",
+  backgroundColor: "Background color",
+  upload: "Upload",
+  url: "URL",
+  selectImage: "Select Image",
+  uploading: "Uploading...",
+  uploadHandlerNotConfigured: "Please configure imageUploadHandler to enable local upload"
+};
+const emailLayout$1 = {
+  global: "Global",
+  backdropColor: "Backdrop color",
+  canvasColor: "Canvas color",
+  canvasBorderColor: "Canvas border color",
+  canvasBorderRadius: "Canvas border radius",
+  pageWidth: "Page width",
+  fontFamily: "Font family",
+  textColor: "Text color"
+};
+const en = {
+  common: common$1,
+  samples: samples$1,
+  inspector: inspector$1,
+  tabs: tabs$1,
+  image: image$1,
+  emailLayout: emailLayout$1
+};
+const common = {
+  newDocument: "新建空白文档",
+  useBuiltInTemplates: "使用内置模板",
+  emailBuilder: "邮件编辑器"
+};
+const samples = {
+  welcomeEmail: "欢迎邮件",
+  oneTimePasscode: "一次性密码 (OTP)",
+  resetPassword: "重置密码",
+  orderEcommerce: "电商收据",
+  subscriptionReceipt: "订阅收据",
+  reservationReminder: "预约提醒",
+  postMetrics: "指标报告",
+  respondToMessage: "回复询问"
+};
+const inspector = {
+  styles: "样式",
+  inspect: "检查",
+  clickBlockToInspect: "点击一个块进行检查。",
+  blockNotFound: "未找到 id 为 {{id}} 的块。点击一个块以重置。"
+};
+const tabs = {
+  edit: "编辑",
+  preview: "预览",
+  htmlOutput: "HTML 输出",
+  jsonOutput: "JSON 输出"
+};
+const image = {
+  title: "图片块",
+  sourceUrl: "图片地址",
+  altText: "替代文本",
+  clickThroughUrl: "点击跳转链接",
+  width: "宽度",
+  height: "高度",
+  alignment: "对齐方式",
+  backgroundColor: "背景颜色",
+  upload: "上传",
+  url: "URL",
+  selectImage: "选择图片",
+  uploading: "上传中...",
+  uploadHandlerNotConfigured: "请配置 imageUploadHandler 以启用本地上传功能"
+};
+const emailLayout = {
+  global: "全局",
+  backdropColor: "背景颜色",
+  canvasColor: "画布颜色",
+  canvasBorderColor: "画布边框颜色",
+  canvasBorderRadius: "画布圆角",
+  pageWidth: "页面宽度",
+  fontFamily: "字体",
+  textColor: "文字颜色"
+};
+const zh = {
+  common,
+  samples,
+  inspector,
+  tabs,
+  image,
+  emailLayout
+};
+const translations = {
+  zh,
+  en
+};
+function t(key, params, language) {
+  const lang = language ?? getLanguage();
+  const keys = key.split(".");
+  let value = translations[lang];
+  for (const k of keys) {
+    if (value && typeof value === "object" && k in value) {
+      value = value[k];
+    } else {
+      return key;
+    }
+  }
+  if (typeof value !== "string") {
+    return key;
+  }
+  if (params) {
+    return value.replace(/\{\{(\w+)\}\}/g, (match, paramKey) => {
+      var _a;
+      return ((_a = params[paramKey]) == null ? void 0 : _a.toString()) ?? match;
+    });
+  }
+  return value;
+}
+function getLanguage() {
+  if (typeof window === "undefined") {
+    return "en";
+  }
+  const stored = localStorage.getItem("app-language");
+  if (stored && (stored === "zh" || stored === "en")) {
+    return stored;
+  }
+  const browserLang = navigator.language.toLowerCase();
+  return browserLang.startsWith("zh") ? "zh" : "en";
+}
+function setLanguage$1(lang) {
+  if (typeof window !== "undefined") {
+    localStorage.setItem("app-language", lang);
+  }
+}
+const editorStateStore = create((set, get) => ({
+  document: getConfiguration(typeof window !== "undefined" ? window.location.hash : ""),
+  selectedBlockId: null,
+  selectedSidebarTab: "styles",
+  selectedMainTab: "editor",
+  selectedScreenSize: "desktop",
+  inspectorDrawerOpen: true,
+  samplesDrawerOpen: true,
+  language: getLanguage(),
+  onChange: void 0
+}));
+function useDocument() {
+  return editorStateStore((s) => s.document);
+}
+function useSelectedBlockId() {
+  return editorStateStore((s) => s.selectedBlockId);
+}
+function useSelectedScreenSize() {
+  return editorStateStore((s) => s.selectedScreenSize);
+}
+function useSelectedMainTab() {
+  return editorStateStore((s) => s.selectedMainTab);
+}
+function setSelectedMainTab(selectedMainTab) {
+  return editorStateStore.setState({ selectedMainTab });
+}
+function useSelectedSidebarTab() {
+  return editorStateStore((s) => s.selectedSidebarTab);
+}
+function useInspectorDrawerOpen() {
+  return editorStateStore((s) => s.inspectorDrawerOpen);
+}
+function useSamplesDrawerOpen() {
+  return editorStateStore((s) => s.samplesDrawerOpen);
+}
+function setSelectedBlockId(selectedBlockId) {
+  const selectedSidebarTab = selectedBlockId === null ? "styles" : "block-configuration";
+  const options = {};
+  if (selectedBlockId !== null) {
+    options.inspectorDrawerOpen = true;
+  }
+  return editorStateStore.setState({
+    selectedBlockId,
+    selectedSidebarTab,
+    ...options
+  });
+}
+function setSidebarTab(selectedSidebarTab) {
+  return editorStateStore.setState({ selectedSidebarTab });
+}
+function resetDocument(document) {
+  editorStateStore.setState({
+    document,
+    selectedSidebarTab: "styles",
+    selectedBlockId: null
+  });
+  const onChange = editorStateStore.getState().onChange;
+  if (onChange) {
+    onChange(document);
+  }
+}
+function setDocument(document) {
+  const originalDocument = editorStateStore.getState().document;
+  const newDocument = {
+    ...originalDocument,
+    ...document
+  };
+  editorStateStore.setState({
+    document: newDocument
+  });
+  const onChange = editorStateStore.getState().onChange;
+  if (onChange) {
+    onChange(newDocument);
+  }
+}
+function setOnChange(onChange) {
+  return editorStateStore.setState({ onChange });
+}
+function toggleInspectorDrawerOpen() {
+  const inspectorDrawerOpen = !editorStateStore.getState().inspectorDrawerOpen;
+  return editorStateStore.setState({ inspectorDrawerOpen });
+}
+function toggleSamplesDrawerOpen() {
+  const samplesDrawerOpen = !editorStateStore.getState().samplesDrawerOpen;
+  return editorStateStore.setState({ samplesDrawerOpen });
+}
+function setSelectedScreenSize(selectedScreenSize) {
+  return editorStateStore.setState({ selectedScreenSize });
+}
+function useImageUploadHandler() {
+  return editorStateStore((s) => s.imageUploadHandler);
+}
+function setImageUploadHandler(handler) {
+  return editorStateStore.setState({ imageUploadHandler: handler });
+}
+function useLanguage() {
+  return editorStateStore((s) => s.language);
+}
+function setLanguage(lang) {
+  setLanguage$1(lang);
+  return editorStateStore.setState({ language: lang });
+}
+const BRAND_NAVY = "#212443";
+const BRAND_BLUE = "#0079CC";
+const BRAND_GREEN = "#1F8466";
+const BRAND_RED = "#E81212";
+const BRAND_YELLOW = "#F6DC9F";
+const BRAND_PURPLE = "#6C0E7C";
+const BRAND_BROWN = "#CC996C";
+const STANDARD_FONT_FAMILY = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
+const MONOSPACE_FONT_FAMILY = 'ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace';
+const BASE_THEME = createTheme({
+  palette: {
+    background: {
+      default: "#f2f5f7"
+    },
+    text: {
+      primary: "#1F1F21",
+      secondary: "#4F4F4F"
+    }
+  },
+  typography: {
+    fontFamily: STANDARD_FONT_FAMILY
+  }
+});
+const THEME = createTheme(BASE_THEME, {
+  palette: {
+    brand: {
+      navy: BRAND_NAVY,
+      blue: BRAND_BLUE,
+      red: BRAND_RED,
+      green: BRAND_GREEN,
+      yellow: BRAND_YELLOW,
+      purple: BRAND_PURPLE,
+      brown: BRAND_BROWN
+    },
+    success: {
+      main: BRAND_GREEN,
+      light: lighten(BRAND_GREEN, 0.15),
+      dark: darken(BRAND_GREEN, 0.15)
+    },
+    error: {
+      main: BRAND_RED,
+      light: lighten(BRAND_RED, 0.15),
+      dark: darken(BRAND_RED, 0.15)
+    },
+    cadet: {
+      100: "#F9FAFB",
+      200: "#F2F5F7",
+      300: "#DCE4EA",
+      400: "#A8BBCA",
+      500: "#6A8BA4"
+    },
+    highlight: {
+      100: lighten(BRAND_YELLOW, 0.8),
+      200: lighten(BRAND_YELLOW, 0.6),
+      300: lighten(BRAND_YELLOW, 0.4),
+      400: lighten(BRAND_YELLOW, 0.2),
+      500: BRAND_YELLOW
+    },
+    info: {
+      main: BRAND_BLUE
+    },
+    primary: {
+      main: BRAND_BLUE
+    }
+  },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: `
+        address {
+          font-style: normal;
+        }
+        fieldset {
+          border: none;
+          padding: 0;
+        }
+        pre {
+          font-family: ${MONOSPACE_FONT_FAMILY}
+          white-space: pre-wrap;
+          font-size: 12px;
+        }
+      `
+    },
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          fontSize: BASE_THEME.typography.pxToRem(14)
+        },
+        action: {
+          paddingTop: 0,
+          marginRight: 0
+        },
+        filledSuccess: {
+          backgroundColor: BRAND_GREEN
+        }
+      }
+    },
+    MuiStepLabel: {
+      styleOverrides: {
+        label: {
+          fontWeight: BASE_THEME.typography.fontWeightMedium
+        }
+      }
+    },
+    MuiDialog: {
+      defaultProps: {
+        fullWidth: true
+      }
+    },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: {
+          paddingTop: BASE_THEME.spacing(1),
+          paddingBottom: BASE_THEME.spacing(2)
+        }
+      }
+    },
+    MuiDialogTitle: {
+      defaultProps: {
+        variant: "h4"
+      },
+      styleOverrides: {
+        root: {
+          paddingTop: BASE_THEME.spacing(3),
+          paddingBottom: BASE_THEME.spacing(1)
+        }
+      }
+    },
+    MuiDialogActions: {
+      styleOverrides: {
+        root: {
+          borderTop: "1px solid",
+          borderTopColor: BASE_THEME.palette.divider,
+          marginTop: BASE_THEME.spacing(2.5),
+          padding: `${BASE_THEME.spacing(1.5)} ${BASE_THEME.spacing(3)}`
+        }
+      }
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          ...BASE_THEME.typography.body2,
+          borderColor: BASE_THEME.palette.grey[200]
+        },
+        head: {
+          ...BASE_THEME.typography.overline,
+          fontWeight: BASE_THEME.typography.fontWeightMedium,
+          letterSpacing: "0.075em",
+          color: BASE_THEME.palette.text.secondary
+        }
+      }
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          "&:last-child td": {
+            borderBottom: 0
+          }
+        }
+      }
+    },
+    MuiAvatar: {
+      styleOverrides: {
+        root: {
+          textTransform: "uppercase",
+          fontSize: BASE_THEME.typography.pxToRem(14)
+        }
+      }
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          "&.MuiChip-filledError, &.MuiChip-filledSuccess": {
+            fill: BASE_THEME.palette.primary.contrastText
+          }
+        },
+        sizeSmall: {
+          borderRadius: BASE_THEME.spacing(0.5),
+          fontSize: 12
+        },
+        iconSmall: {
+          fontSize: 14,
+          marginLeft: BASE_THEME.spacing(1)
+        },
+        colorSecondary: {
+          borderColor: BASE_THEME.palette.grey[400],
+          color: BASE_THEME.palette.text.secondary
+        },
+        label: {
+          fontWeight: BASE_THEME.typography.fontWeightMedium
+        }
+      }
+    },
+    MuiDrawer: {
+      defaultProps: {
+        PaperProps: {
+          elevation: 2
+        }
+      }
+    },
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          fontSize: BASE_THEME.typography.pxToRem(12),
+          backgroundColor: alpha(BASE_THEME.palette.text.primary, 0.9)
+        }
+      }
+    },
+    MuiSlider: {
+      styleOverrides: {
+        root: {
+          height: 1
+        },
+        track: {
+          height: 1,
+          border: "none"
+        },
+        rail: {
+          height: 1,
+          backgroundColor: BASE_THEME.palette.grey[500]
+        },
+        mark: {
+          backgroundColor: BASE_THEME.palette.grey[500]
+        },
+        markActive: {
+          height: 0
+        },
+        thumb: {
+          height: 16,
+          width: 16,
+          cursor: "col-resize",
+          "&:hover, &.Mui-active, &.Mui-focusVisible": {
+            boxShadow: `0 0 0 4px ${alpha(BRAND_BLUE, 0.2)}`
+          },
+          "&:before": {
+            display: "none"
+          }
+        }
+      }
+    },
+    MuiPaper: {
+      defaultProps: {
+        elevation: 2,
+        square: true
+      }
+    },
+    MuiButtonBase: {
+      defaultProps: {
+        disableTouchRipple: true,
+        focusRipple: true
+      },
+      styleOverrides: {
+        root: {
+          "&.MuiButton-containedSecondary.Mui-disabled": {
+            backgroundColor: BASE_THEME.palette.grey[100]
+          }
+        }
+      }
+    },
+    MuiButtonGroup: {
+      defaultProps: {
+        disableElevation: true
+      }
+    },
+    MuiIconButton: {
+      styleOverrides: {
+        edgeStart: {
+          marginLeft: BASE_THEME.spacing(-1)
+        },
+        colorSecondary: {
+          color: BASE_THEME.palette.grey[500]
+        }
+      }
+    },
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true
+      },
+      styleOverrides: {
+        textPrimary: {
+          color: BASE_THEME.palette.text.primary
+        },
+        textSecondary: {
+          color: BASE_THEME.palette.text.secondary
+        },
+        outlinedPrimary: {
+          borderColor: BASE_THEME.palette.grey[300],
+          color: BASE_THEME.palette.text.primary,
+          "&:hover, &:active, &:focus": {
+            borderColor: BASE_THEME.palette.grey[500],
+            color: BASE_THEME.palette.text.primary
+          }
+        },
+        containedSecondary: {
+          backgroundColor: BASE_THEME.palette.common.white,
+          border: `1px solid ${BASE_THEME.palette.grey[300]}`,
+          color: BASE_THEME.palette.text.primary,
+          "&:hover, &:active, &:focus": {
+            backgroundColor: BASE_THEME.palette.common.white,
+            borderColor: BASE_THEME.palette.grey[500],
+            color: BASE_THEME.palette.text.primary
+          }
+        }
+      }
+    },
+    MuiToggleButton: {
+      styleOverrides: {
+        root: {
+          paddingLeft: BASE_THEME.spacing(1.5),
+          paddingRight: BASE_THEME.spacing(1.5)
+        }
+      }
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        root: {
+          "&:not(.Mui-disabled, .Mui-error):before": {
+            borderBottom: `1px solid ${BASE_THEME.palette.grey[400]}`
+          },
+          "&:hover:not(.Mui-disabled, .Mui-error):before": {
+            borderBottom: `1px solid ${BASE_THEME.palette.grey[500]} !important`
+          },
+          "&:after": {
+            borderBottom: `1px solid ${BASE_THEME.palette.text.primary} !important`
+          },
+          "&.MuiOutlinedInput-root:not(.Mui-error)": {
+            "& fieldset": {
+              borderColor: BASE_THEME.palette.grey[300],
+              transition: "border-color 0.2s"
+            }
+          },
+          "&.MuiOutlinedInput-root:not(.Mui-disabled, .Mui-error)": {
+            "&:hover fieldset": {
+              borderColor: BASE_THEME.palette.grey[400]
+            },
+            "&.Mui-focused fieldset": {
+              borderColor: BASE_THEME.palette.text.secondary,
+              borderWidth: 1
+            }
+          }
+        },
+        input: {
+          fontSize: BASE_THEME.typography.pxToRem(14),
+          "&.Mui-disabled": {
+            WebkitTextFillColor: "inherit",
+            color: BASE_THEME.palette.text.secondary
+          }
+        },
+        inputSizeSmall: {}
+      }
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        notchedOutline: {
+          "& legend": {
+            fontSize: "0.85em",
+            maxWidth: "100%"
+          }
+        }
+      }
+    },
+    MuiInputAdornment: {
+      styleOverrides: {
+        root: {
+          "& .MuiTypography-root": {
+            fontSize: BASE_THEME.typography.pxToRem(14),
+            color: BASE_THEME.palette.text.secondary
+          }
+        }
+      }
+    },
+    MuiInputLabel: {
+      defaultProps: {
+        shrink: true
+      },
+      styleOverrides: {
+        shrink: {
+          transform: "scale(0.85)",
+          fontWeight: BASE_THEME.typography.fontWeightMedium,
+          "&.Mui-focused": {
+            color: BASE_THEME.palette.text.primary
+          },
+          "&.MuiInputLabel-standard": {
+            transform: "translate(0, -4px) scale(0.85)",
+            color: "#4F4F4F"
+          },
+          "&.MuiInputLabel-outlined": {
+            transform: "translate(15px, -8px) scale(0.85)"
+          }
+        }
+      }
+    },
+    MuiTabs: {
+      defaultProps: {
+        variant: "scrollable"
+      },
+      styleOverrides: {
+        indicator: {
+          height: 1,
+          backgroundColor: BASE_THEME.palette.text.primary
+        }
+      }
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          textTransform: "none",
+          minWidth: BASE_THEME.spacing(2),
+          paddingLeft: BASE_THEME.spacing(1.5),
+          paddingRight: BASE_THEME.spacing(1.5),
+          fontSize: BASE_THEME.typography.pxToRem(14),
+          fontFamily: BASE_THEME.typography.fontFamily,
+          lineHeight: 1.5,
+          fontWeight: BASE_THEME.typography.fontWeightMedium,
+          transition: "color 0.2s",
+          "&.Mui-selected": {
+            color: BASE_THEME.palette.text.primary
+          },
+          "&:hover": {
+            color: BASE_THEME.palette.text.primary
+          }
+        }
+      }
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: 0
+        }
+      }
+    },
+    MuiCardHeader: {
+      styleOverrides: {
+        title: {
+          fontSize: BASE_THEME.typography.pxToRem(18),
+          fontWeight: BASE_THEME.typography.fontWeightMedium
+        }
+      }
+    }
+  },
+  typography: {
+    fontFamily: BASE_THEME.typography.fontFamily,
+    h1: {
+      fontFamily: BASE_THEME.typography.fontFamily,
+      fontSize: BASE_THEME.typography.pxToRem(40),
+      lineHeight: 1.2,
+      letterSpacing: "-0.02em",
+      fontWeight: BASE_THEME.typography.fontWeightMedium
+    },
+    h2: {
+      fontFamily: BASE_THEME.typography.fontFamily,
+      fontSize: BASE_THEME.typography.pxToRem(32),
+      lineHeight: 1.2,
+      letterSpacing: "-0.02em",
+      fontWeight: BASE_THEME.typography.fontWeightMedium
+    },
+    h3: {
+      fontFamily: BASE_THEME.typography.fontFamily,
+      fontSize: BASE_THEME.typography.pxToRem(24),
+      lineHeight: 1.5,
+      letterSpacing: "-0.01em",
+      fontWeight: BASE_THEME.typography.fontWeightMedium
+    },
+    h4: {
+      fontFamily: BASE_THEME.typography.fontFamily,
+      fontSize: BASE_THEME.typography.pxToRem(20),
+      lineHeight: 1.5,
+      letterSpacing: "-0.01em",
+      fontWeight: BASE_THEME.typography.fontWeightMedium
+    },
+    h5: {
+      fontFamily: BASE_THEME.typography.fontFamily,
+      fontSize: BASE_THEME.typography.pxToRem(18),
+      lineHeight: 1.5,
+      letterSpacing: "-0.01em",
+      fontWeight: BASE_THEME.typography.fontWeightMedium
+    },
+    h6: {
+      fontFamily: BASE_THEME.typography.fontFamily,
+      fontSize: BASE_THEME.typography.pxToRem(16),
+      lineHeight: 1.5,
+      letterSpacing: "-0.005em",
+      fontWeight: BASE_THEME.typography.fontWeightMedium
+    },
+    body1: {
+      fontSize: BASE_THEME.typography.pxToRem(14)
+    },
+    body2: {
+      fontSize: BASE_THEME.typography.pxToRem(12)
+    },
+    overline: {
+      fontWeight: BASE_THEME.typography.fontWeightMedium,
+      letterSpacing: "0.05em"
+    },
+    button: {
+      textTransform: "none",
+      fontWeight: BASE_THEME.typography.fontWeightMedium,
+      lineHeight: 1.5
+    },
+    caption: {
+      letterSpacing: 0,
+      lineHeight: 1.5
+    }
+  },
+  shadows: [
+    "none",
+    "0px 4px 15px rgba(33, 36, 67, 0.04), 0px 0px 2px rgba(33, 36, 67, 0.04), 0px 0px 1px rgba(33, 36, 67, 0.04)",
+    "0px 10px 20px rgba(33, 36, 67, 0.04), 0px 2px 6px rgba(33, 36, 67, 0.04), 0px 0px 1px rgba(33, 36, 67, 0.04)",
+    "0px 16px 24px rgba(33, 36, 67, 0.05), 0px 2px 6px rgba(33, 36, 67, 0.05), 0px 0px 1px rgba(33, 36, 67, 0.05)",
+    "0px 24px 32px rgba(33, 36, 67, 0.06), 0px 16px 24px rgba(33, 36, 67, 0.06), 0px 4px 8px rgba(33, 36, 67, 0.06)",
+    ...Array(20).fill("none")
+  ]
+});
+function useTranslation() {
+  const language = useLanguage();
+  const t$1 = (key, params) => {
+    return t(key, params, language);
+  };
+  return { t: t$1, language };
+}
+function BaseSidebarPanel({ title, children }) {
+  return /* @__PURE__ */ jsxs(Box, { p: 2, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 }, children: title }),
+    /* @__PURE__ */ jsx(Stack, { spacing: 5, mb: 3, children })
+  ] });
+}
+function RadioGroupInput({ label, children, defaultValue, onChange }) {
+  const [value, setValue] = useState(defaultValue);
+  return /* @__PURE__ */ jsxs(Stack, { alignItems: "flex-start", children: [
+    /* @__PURE__ */ jsx(InputLabel, { shrink: true, children: label }),
+    /* @__PURE__ */ jsx(
+      ToggleButtonGroup,
+      {
+        exclusive: true,
+        fullWidth: true,
+        value,
+        size: "small",
+        onChange: (_, v) => {
+          if (typeof v !== "string") {
+            throw new Error("RadioGroupInput can only receive string values");
+          }
+          setValue(v);
+          onChange(v);
+        },
+        children
+      }
+    )
+  ] });
+}
+function RawSliderInput({ iconLabel, value, setValue, units, ...props }) {
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%", children: [
+    /* @__PURE__ */ jsx(Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 }, children: iconLabel }),
+    /* @__PURE__ */ jsx(
+      Slider,
+      {
+        ...props,
+        value,
+        onChange: (_, value2) => {
+          if (typeof value2 !== "number") {
+            throw new Error("RawSliderInput values can only receive numeric values");
+          }
+          setValue(value2);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 }, children: /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1 }, children: [
+      value,
+      units
+    ] }) })
+  ] });
+}
+function SliderInput({ label, defaultValue, onChange, ...props }) {
+  const [value, setValue] = useState(defaultValue);
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 1, alignItems: "flex-start", children: [
+    /* @__PURE__ */ jsx(InputLabel, { shrink: true, children: label }),
+    /* @__PURE__ */ jsx(
+      RawSliderInput,
+      {
+        value,
+        setValue: (value2) => {
+          setValue(value2);
+          onChange(value2);
+        },
+        ...props
+      }
+    )
+  ] });
+}
+function TextInput({ helperText, label, placeholder, rows, InputProps: InputProps2, defaultValue, onChange }) {
+  const [value, setValue] = useState(defaultValue);
+  const isMultiline = typeof rows === "number" && rows > 1;
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      fullWidth: true,
+      multiline: isMultiline,
+      minRows: rows,
+      variant: isMultiline ? "outlined" : "standard",
+      label,
+      placeholder,
+      helperText,
+      InputProps: InputProps2,
+      value,
+      onChange: (ev) => {
+        const v = ev.target.value;
+        setValue(v);
+        onChange(v);
+      }
+    }
+  );
+}
+const TILE_BUTTON = {
+  width: 24,
+  height: 24
+};
+function Swatch({ paletteColors, value, onChange }) {
+  const renderButton = (colorValue) => {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: () => onChange(colorValue),
+        sx: {
+          ...TILE_BUTTON,
+          backgroundColor: colorValue,
+          border: "1px solid",
+          borderColor: value === colorValue ? "black" : "grey.200",
+          minWidth: 24,
+          display: "inline-flex",
+          "&:hover": {
+            backgroundColor: colorValue,
+            borderColor: "grey.500"
+          }
+        }
+      },
+      colorValue
+    );
+  };
+  return /* @__PURE__ */ jsx(Box, { width: "100%", sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr" }, children: paletteColors.map((c) => renderButton(c)) });
+}
+const DEFAULT_PRESET_COLORS = [
+  "#E11D48",
+  "#DB2777",
+  "#C026D3",
+  "#9333EA",
+  "#7C3AED",
+  "#4F46E5",
+  "#2563EB",
+  "#0284C7",
+  "#0891B2",
+  "#0D9488",
+  "#059669",
+  "#16A34A",
+  "#65A30D",
+  "#CA8A04",
+  "#D97706",
+  "#EA580C",
+  "#DC2626",
+  "#FFFFFF",
+  "#FAFAFA",
+  "#F5F5F5",
+  "#E5E5E5",
+  "#D4D4D4",
+  "#A3A3A3",
+  "#737373",
+  "#525252",
+  "#404040",
+  "#262626",
+  "#171717",
+  "#0A0A0A",
+  "#000000"
+];
+const SX = {
+  p: 1,
+  ".react-colorful__pointer ": {
+    width: 16,
+    height: 16
+  },
+  ".react-colorful__saturation": {
+    mb: 1,
+    borderRadius: "4px"
+  },
+  ".react-colorful__last-control": {
+    borderRadius: "4px"
+  },
+  ".react-colorful__hue-pointer": {
+    width: "4px",
+    borderRadius: "4px",
+    height: 24,
+    cursor: "col-resize"
+  },
+  ".react-colorful__saturation-pointer": {
+    cursor: "all-scroll"
+  },
+  input: {
+    padding: 1,
+    border: "1px solid",
+    borderColor: "grey.300",
+    borderRadius: "4px",
+    width: "100%"
+  }
+};
+function Picker({ value, onChange }) {
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 1, sx: SX, children: [
+    /* @__PURE__ */ jsx(HexColorPicker, { color: value, onChange }),
+    /* @__PURE__ */ jsx(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }),
+    /* @__PURE__ */ jsx(Box, { pt: 1, children: /* @__PURE__ */ jsx(HexColorInput, { prefixed: true, color: value, onChange }) })
+  ] });
+}
+const BUTTON_SX$1 = {
+  border: "1px solid",
+  borderColor: "cadet.400",
+  width: 32,
+  height: 32,
+  borderRadius: "4px",
+  bgcolor: "#FFFFFF"
+};
+function ColorInput$1({ label, defaultValue, onChange, nullable }) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [value, setValue] = useState(defaultValue);
+  const handleClickOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const renderResetButton = () => {
+    if (!nullable) {
+      return null;
+    }
+    if (typeof value !== "string" || value.trim().length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      ButtonBase,
+      {
+        onClick: () => {
+          setValue(null);
+          onChange(null);
+        },
+        children: /* @__PURE__ */ jsx(CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
+      }
+    );
+  };
+  const renderOpenButton = () => {
+    if (value) {
+      return /* @__PURE__ */ jsx(ButtonBase, { onClick: handleClickOpen, sx: { ...BUTTON_SX$1, bgcolor: value } });
+    }
+    return /* @__PURE__ */ jsx(ButtonBase, { onClick: handleClickOpen, sx: { ...BUTTON_SX$1 }, children: /* @__PURE__ */ jsx(AddOutlined, { fontSize: "small" }) });
+  };
+  return /* @__PURE__ */ jsxs(Stack, { alignItems: "flex-start", children: [
+    /* @__PURE__ */ jsx(InputLabel, { sx: { mb: 0.5 }, children: label }),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+      renderOpenButton(),
+      renderResetButton()
+    ] }),
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        anchorEl,
+        open: Boolean(anchorEl),
+        onClose: () => setAnchorEl(null),
+        MenuListProps: {
+          sx: { height: "auto", padding: 0 }
+        },
+        children: /* @__PURE__ */ jsx(
+          Picker,
+          {
+            value: value || "",
+            onChange: (v) => {
+              setValue(v);
+              onChange(v);
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+function ColorInput(props) {
+  return /* @__PURE__ */ jsx(ColorInput$1, { ...props, nullable: false });
+}
+function NullableColorInput(props) {
+  return /* @__PURE__ */ jsx(ColorInput$1, { ...props, nullable: true });
+}
+const FONT_FAMILIES = [
+  {
+    key: "MODERN_SANS",
+    label: "Modern sans",
+    value: '"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif'
+  },
+  {
+    key: "BOOK_SANS",
+    label: "Book sans",
+    value: 'Optima, Candara, "Noto Sans", source-sans-pro, sans-serif'
+  },
+  {
+    key: "ORGANIC_SANS",
+    label: "Organic sans",
+    value: 'Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif'
+  },
+  {
+    key: "GEOMETRIC_SANS",
+    label: "Geometric sans",
+    value: 'Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif'
+  },
+  {
+    key: "HEAVY_SANS",
+    label: "Heavy sans",
+    value: 'Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif'
+  },
+  {
+    key: "ROUNDED_SANS",
+    label: "Rounded sans",
+    value: 'ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif'
+  },
+  {
+    key: "MODERN_SERIF",
+    label: "Modern serif",
+    value: 'Charter, "Bitstream Charter", "Sitka Text", Cambria, serif'
+  },
+  {
+    key: "BOOK_SERIF",
+    label: "Book serif",
+    value: '"Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif'
+  },
+  {
+    key: "MONOSPACE",
+    label: "Monospace",
+    value: '"Nimbus Mono PS", "Courier New", "Cutive Mono", monospace'
+  }
+];
+const OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option.key, sx: { fontFamily: option.value }, children: option.label }, option.key));
+function NullableFontFamily({ label, onChange, defaultValue }) {
+  const [value, setValue] = useState(defaultValue ?? "inherit");
+  return /* @__PURE__ */ jsxs(
+    TextField,
+    {
+      select: true,
+      variant: "standard",
+      label,
+      value,
+      onChange: (ev) => {
+        const v = ev.target.value;
+        setValue(v);
+        onChange(v === null ? null : v);
+      },
+      children: [
+        /* @__PURE__ */ jsx(MenuItem, { value: "inherit", children: "Match email settings" }),
+        OPTIONS
+      ]
+    }
+  );
+}
+function FontSizeInput({ label, defaultValue, onChange }) {
+  const [value, setValue] = useState(defaultValue);
+  const handleChange = (value2) => {
+    setValue(value2);
+    onChange(value2);
+  };
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 1, alignItems: "flex-start", children: [
+    /* @__PURE__ */ jsx(InputLabel, { shrink: true, children: label }),
+    /* @__PURE__ */ jsx(
+      RawSliderInput,
+      {
+        iconLabel: /* @__PURE__ */ jsx(TextFieldsOutlined, { sx: { fontSize: 16 } }),
+        value,
+        setValue: handleChange,
+        units: "px",
+        step: 1,
+        min: 10,
+        max: 48
+      }
+    )
+  ] });
+}
+function FontWeightInput({ label, defaultValue, onChange }) {
+  const [value, setValue] = useState(defaultValue);
+  return /* @__PURE__ */ jsxs(
+    RadioGroupInput,
+    {
+      label,
+      defaultValue: value,
+      onChange: (fontWeight) => {
+        setValue(fontWeight);
+        onChange(fontWeight);
+      },
+      children: [
+        /* @__PURE__ */ jsx(ToggleButton, { value: "normal", children: "Regular" }),
+        /* @__PURE__ */ jsx(ToggleButton, { value: "bold", children: "Bold" })
+      ]
+    }
+  );
+}
+function PaddingInput({ label, defaultValue, onChange }) {
+  const [value, setValue] = useState(() => {
+    if (defaultValue) {
+      return defaultValue;
+    }
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0
+    };
+  });
+  function handleChange(internalName, nValue) {
+    const v = {
+      ...value,
+      [internalName]: nValue
+    };
+    setValue(v);
+    onChange(v);
+  }
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 2, alignItems: "flex-start", pb: 1, children: [
+    /* @__PURE__ */ jsx(InputLabel, { shrink: true, children: label }),
+    /* @__PURE__ */ jsx(
+      RawSliderInput,
+      {
+        iconLabel: /* @__PURE__ */ jsx(AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
+        value: value.top,
+        setValue: (num) => handleChange("top", num),
+        units: "px",
+        step: 4,
+        min: 0,
+        max: 80,
+        marks: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RawSliderInput,
+      {
+        iconLabel: /* @__PURE__ */ jsx(AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
+        value: value.bottom,
+        setValue: (num) => handleChange("bottom", num),
+        units: "px",
+        step: 4,
+        min: 0,
+        max: 80,
+        marks: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RawSliderInput,
+      {
+        iconLabel: /* @__PURE__ */ jsx(AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
+        value: value.left,
+        setValue: (num) => handleChange("left", num),
+        units: "px",
+        step: 4,
+        min: 0,
+        max: 80,
+        marks: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RawSliderInput,
+      {
+        iconLabel: /* @__PURE__ */ jsx(AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
+        value: value.right,
+        setValue: (num) => handleChange("right", num),
+        units: "px",
+        step: 4,
+        min: 0,
+        max: 80,
+        marks: true
+      }
+    )
+  ] });
+}
+function TextAlignInput({ label, defaultValue, onChange }) {
+  const [value, setValue] = useState(defaultValue ?? "left");
+  return /* @__PURE__ */ jsxs(
+    RadioGroupInput,
+    {
+      label,
+      defaultValue: value,
+      onChange: (value2) => {
+        setValue(value2);
+        onChange(value2);
+      },
+      children: [
+        /* @__PURE__ */ jsx(ToggleButton, { value: "left", children: /* @__PURE__ */ jsx(FormatAlignLeftOutlined, { fontSize: "small" }) }),
+        /* @__PURE__ */ jsx(ToggleButton, { value: "center", children: /* @__PURE__ */ jsx(FormatAlignCenterOutlined, { fontSize: "small" }) }),
+        /* @__PURE__ */ jsx(ToggleButton, { value: "right", children: /* @__PURE__ */ jsx(FormatAlignRightOutlined, { fontSize: "small" }) })
+      ]
+    }
+  );
+}
+function SingleStylePropertyPanel({ name, value, onChange }) {
+  const defaultValue = value[name] ?? null;
+  const handleChange = (v) => {
+    onChange({ ...value, [name]: v });
+  };
+  switch (name) {
+    case "backgroundColor":
+      return /* @__PURE__ */ jsx(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
+    case "borderColor":
+      return /* @__PURE__ */ jsx(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
+    case "borderRadius":
+      return /* @__PURE__ */ jsx(
+        SliderInput,
+        {
+          iconLabel: /* @__PURE__ */ jsx(RoundedCornerOutlined, {}),
+          units: "px",
+          step: 4,
+          marks: true,
+          min: 0,
+          max: 48,
+          label: "Border radius",
+          defaultValue,
+          onChange: handleChange
+        }
+      );
+    case "color":
+      return /* @__PURE__ */ jsx(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
+    case "fontFamily":
+      return /* @__PURE__ */ jsx(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
+    case "fontSize":
+      return /* @__PURE__ */ jsx(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
+    case "fontWeight":
+      return /* @__PURE__ */ jsx(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
+    case "textAlign":
+      return /* @__PURE__ */ jsx(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
+    case "padding":
+      return /* @__PURE__ */ jsx(PaddingInput, { label: "Padding", defaultValue, onChange: handleChange });
+  }
+}
+function MultiStylePropertyPanel({ names, value, onChange }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: names.map((name) => /* @__PURE__ */ jsx(SingleStylePropertyPanel, { name, value: value || {}, onChange }, name)) });
+}
+function AvatarSidebarPanel({ data, setData }) {
+  var _a, _b, _c, _d;
+  const [, setErrors] = useState(null);
+  const updateData = (d) => {
+    const res = AvatarPropsSchema.safeParse(d);
+    if (res.success) {
+      setData(res.data);
+      setErrors(null);
+    } else {
+      setErrors(res.error);
+    }
+  };
+  const size = ((_a = data.props) == null ? void 0 : _a.size) ?? AvatarPropsDefaults.size;
+  const imageUrl = ((_b = data.props) == null ? void 0 : _b.imageUrl) ?? AvatarPropsDefaults.imageUrl;
+  const alt = ((_c = data.props) == null ? void 0 : _c.alt) ?? AvatarPropsDefaults.alt;
+  const shape = ((_d = data.props) == null ? void 0 : _d.shape) ?? AvatarPropsDefaults.shape;
+  return /* @__PURE__ */ jsxs(BaseSidebarPanel, { title: "Avatar block", children: [
+    /* @__PURE__ */ jsx(
+      SliderInput,
+      {
+        label: "Size",
+        iconLabel: /* @__PURE__ */ jsx(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
+        units: "px",
+        step: 3,
+        min: 32,
+        max: 256,
+        defaultValue: size,
+        onChange: (size2) => {
+          updateData({ ...data, props: { ...data.props, size: size2 } });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      RadioGroupInput,
+      {
+        label: "Shape",
+        defaultValue: shape,
+        onChange: (shape2) => {
+          updateData({ ...data, props: { ...data.props, shape: shape2 } });
+        },
+        children: [
+          /* @__PURE__ */ jsx(ToggleButton, { value: "circle", children: "Circle" }),
+          /* @__PURE__ */ jsx(ToggleButton, { value: "square", children: "Square" }),
+          /* @__PURE__ */ jsx(ToggleButton, { value: "rounded", children: "Rounded" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        label: "Image URL",
+        defaultValue: imageUrl,
+        onChange: (imageUrl2) => {
+          updateData({ ...data, props: { ...data.props, imageUrl: imageUrl2 } });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        label: "Alt text",
+        defaultValue: alt,
+        onChange: (alt2) => {
+          updateData({ ...data, props: { ...data.props, alt: alt2 } });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MultiStylePropertyPanel,
+      {
+        names: ["textAlign", "padding"],
+        value: data.style,
+        onChange: (style) => updateData({ ...data, style })
+      }
+    )
+  ] });
+}
+function ButtonSidebarPanel({ data, setData }) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const [, setErrors] = useState(null);
+  const updateData = (d) => {
+    const res = ButtonPropsSchema.safeParse(d);
+    if (res.success) {
+      setData(res.data);
+      setErrors(null);
+    } else {
+      setErrors(res.error);
+    }
+  };
+  const text = ((_a = data.props) == null ? void 0 : _a.text) ?? ButtonPropsDefaults.text;
+  const url = ((_b = data.props) == null ? void 0 : _b.url) ?? ButtonPropsDefaults.url;
+  const fullWidth = ((_c = data.props) == null ? void 0 : _c.fullWidth) ?? ButtonPropsDefaults.fullWidth;
+  const size = ((_d = data.props) == null ? void 0 : _d.size) ?? ButtonPropsDefaults.size;
+  const buttonStyle = ((_e = data.props) == null ? void 0 : _e.buttonStyle) ?? ButtonPropsDefaults.buttonStyle;
+  const buttonTextColor = ((_f = data.props) == null ? void 0 : _f.buttonTextColor) ?? ButtonPropsDefaults.buttonTextColor;
+  const buttonBackgroundColor = ((_g = data.props) == null ? void 0 : _g.buttonBackgroundColor) ?? ButtonPropsDefaults.buttonBackgroundColor;
+  return /* @__PURE__ */ jsxs(BaseSidebarPanel, { title: "Button block", children: [
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        label: "Text",
+        defaultValue: text,
+        onChange: (text2) => updateData({ ...data, props: { ...data.props, text: text2 } })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        label: "Url",
+        defaultValue: url,
+        onChange: (url2) => updateData({ ...data, props: { ...data.props, url: url2 } })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      RadioGroupInput,
+      {
+        label: "Width",
+        defaultValue: fullWidth ? "FULL_WIDTH" : "AUTO",
+        onChange: (v) => updateData({ ...data, props: { ...data.props, fullWidth: v === "FULL_WIDTH" } }),
+        children: [
+          /* @__PURE__ */ jsx(ToggleButton, { value: "FULL_WIDTH", children: "Full" }),
+          /* @__PURE__ */ jsx(ToggleButton, { value: "AUTO", children: "Auto" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      RadioGroupInput,
+      {
+        label: "Size",
+        defaultValue: size,
+        onChange: (size2) => updateData({ ...data, props: { ...data.props, size: size2 } }),
+        children: [
+          /* @__PURE__ */ jsx(ToggleButton, { value: "x-small", children: "Xs" }),
+          /* @__PURE__ */ jsx(ToggleButton, { value: "small", children: "Sm" }),
+          /* @__PURE__ */ jsx(ToggleButton, { value: "medium", children: "Md" }),
+          /* @__PURE__ */ jsx(ToggleButton, { value: "large", children: "Lg" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      RadioGroupInput,
+      {
+        label: "Style",
+        defaultValue: buttonStyle,
+        onChange: (buttonStyle2) => updateData({ ...data, props: { ...data.props, buttonStyle: buttonStyle2 } }),
+        children: [
+          /* @__PURE__ */ jsx(ToggleButton, { value: "rectangle", children: "Rectangle" }),
+          /* @__PURE__ */ jsx(ToggleButton, { value: "rounded", children: "Rounded" }),
+          /* @__PURE__ */ jsx(ToggleButton, { value: "pill", children: "Pill" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ColorInput,
+      {
+        label: "Text color",
+        defaultValue: buttonTextColor,
+        onChange: (buttonTextColor2) => updateData({ ...data, props: { ...data.props, buttonTextColor: buttonTextColor2 } })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ColorInput,
+      {
+        label: "Button color",
+        defaultValue: buttonBackgroundColor,
+        onChange: (buttonBackgroundColor2) => updateData({ ...data, props: { ...data.props, buttonBackgroundColor: buttonBackgroundColor2 } })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MultiStylePropertyPanel,
+      {
+        names: ["backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
+        value: data.style,
+        onChange: (style) => updateData({ ...data, style })
+      }
+    )
+  ] });
+}
+const BasePropsShape = ColumnsContainerPropsSchema$1.shape.props.unwrap().unwrap().shape;
+const ColumnsContainerPropsSchema = z.object({
+  style: ColumnsContainerPropsSchema$1.shape.style,
+  props: z.object({
+    ...BasePropsShape,
+    columns: z.tuple([
+      z.object({ childrenIds: z.array(z.string()) }),
+      z.object({ childrenIds: z.array(z.string()) }),
+      z.object({ childrenIds: z.array(z.string()) })
+    ])
+  }).optional().nullable()
+});
+function TextDimensionInput({ label, defaultValue, onChange }) {
+  const handleChange = (ev) => {
+    const value = parseInt(ev.target.value);
+    onChange(isNaN(value) ? null : value);
+  };
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      fullWidth: true,
+      onChange: handleChange,
+      defaultValue,
+      label,
+      variant: "standard",
+      placeholder: "auto",
+      size: "small",
+      InputProps: {
+        endAdornment: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "px" })
+      }
+    }
+  );
+}
+function ColumnWidthsInput({ defaultValue, onChange }) {
+  const [currentValue, setCurrentValue] = useState(() => {
+    if (defaultValue) {
+      return defaultValue;
+    }
+    return [null, null, null];
+  });
+  const setIndexValue = (index, value) => {
+    const nValue = [...currentValue];
+    nValue[index] = value;
+    setCurrentValue(nValue);
+    onChange(nValue);
+  };
+  let column3 = null;
+  {
+    column3 = /* @__PURE__ */ jsx(
+      TextDimensionInput,
+      {
+        label: "Column 3",
+        defaultValue: currentValue == null ? void 0 : currentValue[2],
+        onChange: (v) => {
+          setIndexValue(2, v);
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+    /* @__PURE__ */ jsx(
+      TextDimensionInput,
+      {
+        label: "Column 1",
+        defaultValue: currentValue == null ? void 0 : currentValue[0],
+        onChange: (v) => {
+          setIndexValue(0, v);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TextDimensionInput,
+      {
+        label: "Column 2",
+        defaultValue: currentValue == null ? void 0 : currentValue[1],
+        onChange: (v) => {
+          setIndexValue(1, v);
+        }
+      }
+    ),
+    column3
+  ] });
+}
+function ColumnsContainerPanel({ data, setData }) {
+  var _a, _b, _c, _d;
+  const [, setErrors] = useState(null);
+  const updateData = (d) => {
+    const res = ColumnsContainerPropsSchema.safeParse(d);
+    if (res.success) {
+      setData(res.data);
+      setErrors(null);
+    } else {
+      setErrors(res.error);
+    }
+  };
+  return /* @__PURE__ */ jsxs(BaseSidebarPanel, { title: "Columns block", children: [
+    /* @__PURE__ */ jsxs(
+      RadioGroupInput,
+      {
+        label: "Number of columns",
+        defaultValue: ((_a = data.props) == null ? void 0 : _a.columnsCount) === 2 ? "2" : "3",
+        onChange: (v) => {
+          updateData({ ...data, props: { ...data.props, columnsCount: v === "2" ? 2 : 3 } });
+        },
+        children: [
+          /* @__PURE__ */ jsx(ToggleButton, { value: "2", children: "2" }),
+          /* @__PURE__ */ jsx(ToggleButton, { value: "3", children: "3" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ColumnWidthsInput,
+      {
+        defaultValue: (_b = data.props) == null ? void 0 : _b.fixedWidths,
+        onChange: (fixedWidths) => {
+          updateData({ ...data, props: { ...data.props, fixedWidths } });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SliderInput,
+      {
+        label: "Columns gap",
+        iconLabel: /* @__PURE__ */ jsx(SpaceBarOutlined, { sx: { color: "text.secondary" } }),
+        units: "px",
+        step: 4,
+        marks: true,
+        min: 0,
+        max: 80,
+        defaultValue: ((_c = data.props) == null ? void 0 : _c.columnsGap) ?? 0,
+        onChange: (columnsGap) => updateData({ ...data, props: { ...data.props, columnsGap } })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      RadioGroupInput,
+      {
+        label: "Alignment",
+        defaultValue: ((_d = data.props) == null ? void 0 : _d.contentAlignment) ?? "middle",
+        onChange: (contentAlignment) => {
+          updateData({ ...data, props: { ...data.props, contentAlignment } });
+        },
+        children: [
+          /* @__PURE__ */ jsx(ToggleButton, { value: "top", children: /* @__PURE__ */ jsx(VerticalAlignTopOutlined, { fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(ToggleButton, { value: "middle", children: /* @__PURE__ */ jsx(VerticalAlignCenterOutlined, { fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(ToggleButton, { value: "bottom", children: /* @__PURE__ */ jsx(VerticalAlignBottomOutlined, { fontSize: "small" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MultiStylePropertyPanel,
+      {
+        names: ["backgroundColor", "padding"],
+        value: data.style,
+        onChange: (style) => updateData({ ...data, style })
+      }
+    )
+  ] });
+}
+const ContainerPropsSchema = z.object({
+  style: ContainerPropsSchema$1.shape.style,
+  props: z.object({
+    childrenIds: z.array(z.string()).optional().nullable()
+  }).optional().nullable()
+});
+function ContainerSidebarPanel({ data, setData }) {
+  const [, setErrors] = useState(null);
+  const updateData = (d) => {
+    const res = ContainerPropsSchema.safeParse(d);
+    if (res.success) {
+      setData(res.data);
+      setErrors(null);
+    } else {
+      setErrors(res.error);
+    }
+  };
+  return /* @__PURE__ */ jsx(BaseSidebarPanel, { title: "Container block", children: /* @__PURE__ */ jsx(
+    MultiStylePropertyPanel,
+    {
+      names: ["backgroundColor", "borderColor", "borderRadius", "padding"],
+      value: data.style,
+      onChange: (style) => updateData({ ...data, style })
+    }
+  ) });
+}
+function DividerSidebarPanel({ data, setData }) {
+  var _a, _b;
+  const [, setErrors] = useState(null);
+  const updateData = (d) => {
+    const res = DividerPropsSchema.safeParse(d);
+    if (res.success) {
+      setData(res.data);
+      setErrors(null);
+    } else {
+      setErrors(res.error);
+    }
+  };
+  const lineColor = ((_a = data.props) == null ? void 0 : _a.lineColor) ?? DividerPropsDefaults.lineColor;
+  const lineHeight = ((_b = data.props) == null ? void 0 : _b.lineHeight) ?? DividerPropsDefaults.lineHeight;
+  return /* @__PURE__ */ jsxs(BaseSidebarPanel, { title: "Divider block", children: [
+    /* @__PURE__ */ jsx(
+      ColorInput,
+      {
+        label: "Color",
+        defaultValue: lineColor,
+        onChange: (lineColor2) => updateData({ ...data, props: { ...data.props, lineColor: lineColor2 } })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SliderInput,
+      {
+        label: "Height",
+        iconLabel: /* @__PURE__ */ jsx(HeightOutlined, { sx: { color: "text.secondary" } }),
+        units: "px",
+        step: 1,
+        min: 1,
+        max: 24,
+        defaultValue: lineHeight,
+        onChange: (lineHeight2) => updateData({ ...data, props: { ...data.props, lineHeight: lineHeight2 } })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MultiStylePropertyPanel,
+      {
+        names: ["backgroundColor", "padding"],
+        value: data.style,
+        onChange: (style) => updateData({ ...data, style })
+      }
+    )
+  ] });
+}
+const COLOR_SCHEMA = z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
+const FONT_FAMILY_SCHEMA = z.enum([
+  "MODERN_SANS",
+  "BOOK_SANS",
+  "ORGANIC_SANS",
+  "GEOMETRIC_SANS",
+  "HEAVY_SANS",
+  "ROUNDED_SANS",
+  "MODERN_SERIF",
+  "BOOK_SERIF",
+  "MONOSPACE"
+]).nullable().optional();
+const EmailLayoutPropsSchema = z.object({
+  backdropColor: COLOR_SCHEMA,
+  borderColor: COLOR_SCHEMA,
+  borderRadius: z.number().optional().nullable(),
+  canvasColor: COLOR_SCHEMA,
+  textColor: COLOR_SCHEMA,
+  fontFamily: FONT_FAMILY_SCHEMA,
+  width: z.number().optional().nullable(),
+  childrenIds: z.array(z.string()).optional().nullable()
+});
+function EmailLayoutSidebarFields({ data, setData }) {
+  const [, setErrors] = useState(null);
+  const updateData = (d) => {
+    const res = EmailLayoutPropsSchema.safeParse(d);
+    if (res.success) {
+      setData(res.data);
+      setErrors(null);
+    } else {
+      setErrors(res.error);
+    }
+  };
+  return /* @__PURE__ */ jsxs(BaseSidebarPanel, { title: "Global", children: [
+    /* @__PURE__ */ jsx(
+      ColorInput,
+      {
+        label: "Backdrop color",
+        defaultValue: data.backdropColor ?? "#F5F5F5",
+        onChange: (backdropColor) => updateData({ ...data, backdropColor })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ColorInput,
+      {
+        label: "Canvas color",
+        defaultValue: data.canvasColor ?? "#FFFFFF",
+        onChange: (canvasColor) => updateData({ ...data, canvasColor })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NullableColorInput,
+      {
+        label: "Canvas border color",
+        defaultValue: data.borderColor ?? null,
+        onChange: (borderColor) => updateData({ ...data, borderColor })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SliderInput,
+      {
+        iconLabel: /* @__PURE__ */ jsx(RoundedCornerOutlined, {}),
+        units: "px",
+        step: 4,
+        marks: true,
+        min: 0,
+        max: 48,
+        label: "Canvas border radius",
+        defaultValue: data.borderRadius ?? 0,
+        onChange: (borderRadius) => updateData({ ...data, borderRadius })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SliderInput,
+      {
+        iconLabel: /* @__PURE__ */ jsx(AspectRatioOutlined, {}),
+        units: "px",
+        step: 20,
+        marks: true,
+        min: 400,
+        max: 1200,
+        label: "Page width",
+        defaultValue: data.width ?? 600,
+        onChange: (width) => updateData({ ...data, width })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NullableFontFamily,
+      {
+        label: "Font family",
+        defaultValue: "MODERN_SANS",
+        onChange: (fontFamily) => updateData({ ...data, fontFamily })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ColorInput,
+      {
+        label: "Text color",
+        defaultValue: data.textColor ?? "#262626",
+        onChange: (textColor) => updateData({ ...data, textColor })
+      }
+    )
+  ] });
+}
+function HeadingSidebarPanel({ data, setData }) {
+  var _a, _b;
+  const [, setErrors] = useState(null);
+  const updateData = (d) => {
+    const res = HeadingPropsSchema.safeParse(d);
+    if (res.success) {
+      setData(res.data);
+      setErrors(null);
+    } else {
+      setErrors(res.error);
+    }
+  };
+  return /* @__PURE__ */ jsxs(BaseSidebarPanel, { title: "Heading block", children: [
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        label: "Content",
+        rows: 3,
+        defaultValue: ((_a = data.props) == null ? void 0 : _a.text) ?? HeadingPropsDefaults.text,
+        onChange: (text) => {
+          updateData({ ...data, props: { ...data.props, text } });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      RadioGroupInput,
+      {
+        label: "Level",
+        defaultValue: ((_b = data.props) == null ? void 0 : _b.level) ?? HeadingPropsDefaults.level,
+        onChange: (level) => {
+          updateData({ ...data, props: { ...data.props, level } });
+        },
+        children: [
+          /* @__PURE__ */ jsx(ToggleButton, { value: "h1", children: "H1" }),
+          /* @__PURE__ */ jsx(ToggleButton, { value: "h2", children: "H2" }),
+          /* @__PURE__ */ jsx(ToggleButton, { value: "h3", children: "H3" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MultiStylePropertyPanel,
+      {
+        names: ["color", "backgroundColor", "fontFamily", "fontWeight", "textAlign", "padding"],
+        value: data.style,
+        onChange: (style) => updateData({ ...data, style })
+      }
+    )
+  ] });
+}
+function HtmlSidebarPanel({ data, setData }) {
+  var _a;
+  const [, setErrors] = useState(null);
+  const updateData = (d) => {
+    const res = HtmlPropsSchema.safeParse(d);
+    if (res.success) {
+      setData(res.data);
+      setErrors(null);
+    } else {
+      setErrors(res.error);
+    }
+  };
+  return /* @__PURE__ */ jsxs(BaseSidebarPanel, { title: "Html block", children: [
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        label: "Content",
+        rows: 5,
+        defaultValue: ((_a = data.props) == null ? void 0 : _a.contents) ?? "",
+        onChange: (contents) => updateData({ ...data, props: { ...data.props, contents } })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MultiStylePropertyPanel,
+      {
+        names: ["color", "backgroundColor", "fontFamily", "fontSize", "textAlign", "padding"],
+        value: data.style,
+        onChange: (style) => updateData({ ...data, style })
+      }
+    )
+  ] });
+}
+function ImageSidebarPanel({ data, setData }) {
+  var _a, _b, _c, _d, _e, _f;
+  const [, setErrors] = useState(null);
+  const [uploadMode, setUploadMode] = useState("url");
+  const [uploading, setUploading] = useState(false);
+  const fileInputRef = useRef(null);
+  const imageUploadHandler = useImageUploadHandler();
+  const updateData = (d) => {
+    const res = ImagePropsSchema.safeParse(d);
+    if (res.success) {
+      setData(res.data);
+      setErrors(null);
+    } else {
+      setErrors(res.error);
+    }
+  };
+  const handleFileSelect = async (event) => {
+    var _a2;
+    const file = (_a2 = event.target.files) == null ? void 0 : _a2[0];
+    if (!file)
+      return;
+    if (!imageUploadHandler) {
+      console.warn("Image upload handler is not configured. Please set imageUploadHandler in EditorContext.");
+      return;
+    }
+    setUploading(true);
+    try {
+      const url = await imageUploadHandler(file);
+      updateData({ ...data, props: { ...data.props, url } });
+      setUploadMode("url");
+    } catch (error) {
+      console.error("Failed to upload image:", error);
+    } finally {
+      setUploading(false);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  };
+  const handleUploadClick = () => {
+    var _a2;
+    (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
+  };
+  return /* @__PURE__ */ jsxs(BaseSidebarPanel, { title: "Image block", children: [
+    /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+        /* @__PURE__ */ jsxs(
+          ToggleButton,
+          {
+            value: "url",
+            selected: uploadMode === "url",
+            onChange: () => setUploadMode("url"),
+            size: "small",
+            fullWidth: true,
+            children: [
+              /* @__PURE__ */ jsx(LinkOutlined, { fontSize: "small", sx: { mr: 0.5 } }),
+              "URL"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          ToggleButton,
+          {
+            value: "upload",
+            selected: uploadMode === "upload",
+            onChange: () => setUploadMode("upload"),
+            size: "small",
+            fullWidth: true,
+            disabled: !imageUploadHandler,
+            children: [
+              /* @__PURE__ */ jsx(CloudUploadOutlined, { fontSize: "small", sx: { mr: 0.5 } }),
+              "上传"
+            ]
+          }
+        )
+      ] }),
+      uploadMode === "url" ? /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          label: "Source URL",
+          defaultValue: ((_a = data.props) == null ? void 0 : _a.url) ?? "",
+          onChange: (v) => {
+            const url = v.trim().length === 0 ? null : v.trim();
+            updateData({ ...data, props: { ...data.props, url } });
+          }
+        }
+      ) : /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept: "image/*",
+            style: { display: "none" },
+            onChange: handleFileSelect
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            startIcon: /* @__PURE__ */ jsx(CloudUploadOutlined, {}),
+            onClick: handleUploadClick,
+            disabled: uploading || !imageUploadHandler,
+            fullWidth: true,
+            children: uploading ? "上传中..." : "选择图片"
+          }
+        ),
+        !imageUploadHandler && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "请配置 imageUploadHandler 以启用本地上传功能" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        label: "Alt text",
+        defaultValue: ((_b = data.props) == null ? void 0 : _b.alt) ?? "",
+        onChange: (alt) => updateData({ ...data, props: { ...data.props, alt } })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        label: "Click through URL",
+        defaultValue: ((_c = data.props) == null ? void 0 : _c.linkHref) ?? "",
+        onChange: (v) => {
+          const linkHref = v.trim().length === 0 ? null : v.trim();
+          updateData({ ...data, props: { ...data.props, linkHref } });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, children: [
+      /* @__PURE__ */ jsx(
+        TextDimensionInput,
+        {
+          label: "Width",
+          defaultValue: (_d = data.props) == null ? void 0 : _d.width,
+          onChange: (width) => updateData({ ...data, props: { ...data.props, width } })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TextDimensionInput,
+        {
+          label: "Height",
+          defaultValue: (_e = data.props) == null ? void 0 : _e.height,
+          onChange: (height) => updateData({ ...data, props: { ...data.props, height } })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      RadioGroupInput,
+      {
+        label: "Alignment",
+        defaultValue: ((_f = data.props) == null ? void 0 : _f.contentAlignment) ?? "middle",
+        onChange: (contentAlignment) => updateData({ ...data, props: { ...data.props, contentAlignment } }),
+        children: [
+          /* @__PURE__ */ jsx(ToggleButton, { value: "top", children: /* @__PURE__ */ jsx(VerticalAlignTopOutlined, { fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(ToggleButton, { value: "middle", children: /* @__PURE__ */ jsx(VerticalAlignCenterOutlined, { fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(ToggleButton, { value: "bottom", children: /* @__PURE__ */ jsx(VerticalAlignBottomOutlined, { fontSize: "small" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MultiStylePropertyPanel,
+      {
+        names: ["backgroundColor", "textAlign", "padding"],
+        value: data.style,
+        onChange: (style) => updateData({ ...data, style })
+      }
+    )
+  ] });
+}
+function SpacerSidebarPanel({ data, setData }) {
+  var _a;
+  const [, setErrors] = useState(null);
+  const updateData = (d) => {
+    const res = SpacerPropsSchema.safeParse(d);
+    if (res.success) {
+      setData(res.data);
+      setErrors(null);
+    } else {
+      setErrors(res.error);
+    }
+  };
+  return /* @__PURE__ */ jsx(BaseSidebarPanel, { title: "Spacer block", children: /* @__PURE__ */ jsx(
+    SliderInput,
+    {
+      label: "Height",
+      iconLabel: /* @__PURE__ */ jsx(HeightOutlined, { sx: { color: "text.secondary" } }),
+      units: "px",
+      step: 4,
+      min: 4,
+      max: 128,
+      defaultValue: ((_a = data.props) == null ? void 0 : _a.height) ?? SpacerPropsDefaults.height,
+      onChange: (height) => updateData({ ...data, props: { ...data.props, height } })
+    }
+  ) });
+}
+function BooleanInput({ label, defaultValue, onChange }) {
+  const [value, setValue] = useState(defaultValue);
+  return /* @__PURE__ */ jsx(
+    FormControlLabel,
+    {
+      label,
+      control: /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: value,
+          onChange: (_, checked) => {
+            setValue(checked);
+            onChange(checked);
+          }
+        }
+      )
+    }
+  );
+}
+function TextSidebarPanel({ data, setData }) {
+  var _a, _b;
+  const [, setErrors] = useState(null);
+  const updateData = (d) => {
+    const res = TextPropsSchema.safeParse(d);
+    if (res.success) {
+      setData(res.data);
+      setErrors(null);
+    } else {
+      setErrors(res.error);
+    }
+  };
+  return /* @__PURE__ */ jsxs(BaseSidebarPanel, { title: "Text block", children: [
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        label: "Content",
+        rows: 5,
+        defaultValue: ((_a = data.props) == null ? void 0 : _a.text) ?? "",
+        onChange: (text) => updateData({ ...data, props: { ...data.props, text } })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BooleanInput,
+      {
+        label: "Markdown",
+        defaultValue: ((_b = data.props) == null ? void 0 : _b.markdown) ?? false,
+        onChange: (markdown) => updateData({ ...data, props: { ...data.props, markdown } })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MultiStylePropertyPanel,
+      {
+        names: ["color", "backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
+        value: data.style,
+        onChange: (style) => updateData({ ...data, style })
+      }
+    )
+  ] });
+}
+function renderMessage(val) {
+  return /* @__PURE__ */ jsx(Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" }, children: /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: val }) });
+}
+function ConfigurationPanel() {
+  const { t: t2 } = useTranslation();
+  const document = useDocument();
+  const selectedBlockId = useSelectedBlockId();
+  if (!selectedBlockId) {
+    return renderMessage(t2("inspector.clickBlockToInspect"));
+  }
+  const block = document[selectedBlockId];
+  if (!block) {
+    return renderMessage(t2("inspector.blockNotFound", { id: selectedBlockId }));
+  }
+  const setBlock = (conf) => setDocument({ [selectedBlockId]: conf });
+  const { data, type } = block;
+  switch (type) {
+    case "Avatar":
+      return /* @__PURE__ */ jsx(AvatarSidebarPanel, { data, setData: (data2) => setBlock({ type, data: data2 }) }, selectedBlockId);
+    case "Button":
+      return /* @__PURE__ */ jsx(ButtonSidebarPanel, { data, setData: (data2) => setBlock({ type, data: data2 }) }, selectedBlockId);
+    case "ColumnsContainer":
+      return /* @__PURE__ */ jsx(ColumnsContainerPanel, { data, setData: (data2) => setBlock({ type, data: data2 }) }, selectedBlockId);
+    case "Container":
+      return /* @__PURE__ */ jsx(ContainerSidebarPanel, { data, setData: (data2) => setBlock({ type, data: data2 }) }, selectedBlockId);
+    case "Divider":
+      return /* @__PURE__ */ jsx(DividerSidebarPanel, { data, setData: (data2) => setBlock({ type, data: data2 }) }, selectedBlockId);
+    case "Heading":
+      return /* @__PURE__ */ jsx(HeadingSidebarPanel, { data, setData: (data2) => setBlock({ type, data: data2 }) }, selectedBlockId);
+    case "Html":
+      return /* @__PURE__ */ jsx(HtmlSidebarPanel, { data, setData: (data2) => setBlock({ type, data: data2 }) }, selectedBlockId);
+    case "Image":
+      return /* @__PURE__ */ jsx(ImageSidebarPanel, { data, setData: (data2) => setBlock({ type, data: data2 }) }, selectedBlockId);
+    case "EmailLayout":
+      return /* @__PURE__ */ jsx(EmailLayoutSidebarFields, { data, setData: (data2) => setBlock({ type, data: data2 }) }, selectedBlockId);
+    case "Spacer":
+      return /* @__PURE__ */ jsx(SpacerSidebarPanel, { data, setData: (data2) => setBlock({ type, data: data2 }) }, selectedBlockId);
+    case "Text":
+      return /* @__PURE__ */ jsx(TextSidebarPanel, { data, setData: (data2) => setBlock({ type, data: data2 }) }, selectedBlockId);
+    default:
+      return /* @__PURE__ */ jsx("pre", { children: JSON.stringify(block, null, "  ") });
+  }
+}
+function StylesPanel() {
+  const block = useDocument().root;
+  if (!block) {
+    return /* @__PURE__ */ jsx("p", { children: "Block not found" });
+  }
+  const { data, type } = block;
+  if (type !== "EmailLayout") {
+    throw new Error('Expected "root" element to be of type EmailLayout');
+  }
+  return /* @__PURE__ */ jsx(EmailLayoutSidebarFields, { data, setData: (data2) => setDocument({ root: { type, data: data2 } }) }, "root");
+}
+const INSPECTOR_DRAWER_WIDTH = 320;
+function InspectorDrawer() {
+  const { t: t2 } = useTranslation();
+  const selectedSidebarTab = useSelectedSidebarTab();
+  const inspectorDrawerOpen = useInspectorDrawerOpen();
+  const renderCurrentSidebarPanel = () => {
+    switch (selectedSidebarTab) {
+      case "block-configuration":
+        return /* @__PURE__ */ jsx(ConfigurationPanel, {});
+      case "styles":
+        return /* @__PURE__ */ jsx(StylesPanel, {});
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Drawer,
+    {
+      variant: "persistent",
+      anchor: "right",
+      open: inspectorDrawerOpen,
+      sx: {
+        width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" }, children: /* @__PURE__ */ jsx(Box, { px: 2, children: /* @__PURE__ */ jsxs(Tabs, { value: selectedSidebarTab, onChange: (_, v) => setSidebarTab(v), children: [
+          /* @__PURE__ */ jsx(Tab, { value: "styles", label: t2("inspector.styles") }),
+          /* @__PURE__ */ jsx(Tab, { value: "block-configuration", label: t2("inspector.inspect") })
+        ] }) }) }),
+        /* @__PURE__ */ jsx(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" }, children: renderCurrentSidebarPanel() })
+      ]
+    }
+  );
+}
+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" })
+    ] })
+  ] });
+}
+function SidebarButton({ href, 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));
+    }
+  };
+  return /* @__PURE__ */ jsx(Button, { size: "small", href, 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 = "#";
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      variant: "persistent",
+      anchor: "left",
+      open: samplesDrawerOpen,
+      sx: {
+        width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 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: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", component: "h1", sx: { p: 0.75 }, children: t2("common.emailBuilder") }),
+        /* @__PURE__ */ jsx(Stack, { spacing: 1, alignItems: "flex-start", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            variant: "contained",
+            color: "primary",
+            href: "#",
+            onClick: handleNewDocumentClick,
+            sx: {
+              fontWeight: isNewDocument ? 600 : 400,
+              width: "100%",
+              justifyContent: "flex-start"
+            },
+            children: t2("common.newDocument")
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__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") })
+          ] })
+        ] })
+      ] }) })
+    }
+  );
+}
+const BUTTON_SX = { p: 1.5, display: "flex", flexDirection: "column" };
+const ICON_SX = {
+  mb: 0.75,
+  width: "100%",
+  bgcolor: "cadet.200",
+  display: "flex",
+  justifyContent: "center",
+  p: 1,
+  border: "1px solid",
+  borderColor: "cadet.300"
+};
+function BlockTypeButton({ label, icon, onClick }) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      sx: BUTTON_SX,
+      onClick: (ev) => {
+        ev.stopPropagation();
+        onClick();
+      },
+      children: [
+        /* @__PURE__ */ jsx(Box, { sx: ICON_SX, children: icon }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: label })
+      ]
+    }
+  );
+}
+const BUTTONS = [
+  {
+    label: "Heading",
+    icon: /* @__PURE__ */ jsx(HMobiledataOutlined, {}),
+    block: () => ({
+      type: "Heading",
+      data: {
+        props: { text: "Hello friend" },
+        style: {
+          padding: { top: 16, bottom: 16, left: 24, right: 24 }
+        }
+      }
+    })
+  },
+  {
+    label: "Text",
+    icon: /* @__PURE__ */ jsx(NotesOutlined, {}),
+    block: () => ({
+      type: "Text",
+      data: {
+        props: { text: "My new text block" },
+        style: {
+          padding: { top: 16, bottom: 16, left: 24, right: 24 },
+          fontWeight: "normal"
+        }
+      }
+    })
+  },
+  {
+    label: "Button",
+    icon: /* @__PURE__ */ jsx(SmartButtonOutlined, {}),
+    block: () => ({
+      type: "Button",
+      data: {
+        props: {
+          text: "Button",
+          url: "https://www.usewaypoint.com"
+        },
+        style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } }
+      }
+    })
+  },
+  {
+    label: "Image",
+    icon: /* @__PURE__ */ jsx(ImageOutlined, {}),
+    block: () => ({
+      type: "Image",
+      data: {
+        props: {
+          url: "https://assets.usewaypoint.com/sample-image.jpg",
+          alt: "Sample product",
+          contentAlignment: "middle",
+          linkHref: null
+        },
+        style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } }
+      }
+    })
+  },
+  {
+    label: "Avatar",
+    icon: /* @__PURE__ */ jsx(AccountCircleOutlined, {}),
+    block: () => ({
+      type: "Avatar",
+      data: {
+        props: {
+          imageUrl: "https://ui-avatars.com/api/?size=128",
+          shape: "circle"
+        },
+        style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } }
+      }
+    })
+  },
+  {
+    label: "Divider",
+    icon: /* @__PURE__ */ jsx(HorizontalRuleOutlined, {}),
+    block: () => ({
+      type: "Divider",
+      data: {
+        style: { padding: { top: 16, right: 0, bottom: 16, left: 0 } },
+        props: {
+          lineColor: "#CCCCCC"
+        }
+      }
+    })
+  },
+  {
+    label: "Spacer",
+    icon: /* @__PURE__ */ jsx(Crop32Outlined, {}),
+    block: () => ({
+      type: "Spacer",
+      data: {}
+    })
+  },
+  {
+    label: "Html",
+    icon: /* @__PURE__ */ jsx(HtmlOutlined, {}),
+    block: () => ({
+      type: "Html",
+      data: {
+        props: { contents: "<strong>Hello world</strong>" },
+        style: {
+          fontSize: 16,
+          textAlign: null,
+          padding: { top: 16, bottom: 16, left: 24, right: 24 }
+        }
+      }
+    })
+  },
+  {
+    label: "Columns",
+    icon: /* @__PURE__ */ jsx(ViewColumnOutlined, {}),
+    block: () => ({
+      type: "ColumnsContainer",
+      data: {
+        props: {
+          columnsGap: 16,
+          columnsCount: 3,
+          columns: [{ childrenIds: [] }, { childrenIds: [] }, { childrenIds: [] }]
+        },
+        style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } }
+      }
+    })
+  },
+  {
+    label: "Container",
+    icon: /* @__PURE__ */ jsx(LibraryAddOutlined, {}),
+    block: () => ({
+      type: "Container",
+      data: {
+        style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } }
+      }
+    })
+  }
+  // { label: 'ProgressBar', icon: <ProgressBarOutlined />, block: () => ({}) },
+  // { label: 'LoopContainer', icon: <ViewListOutlined />, block: () => ({}) },
+];
+function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
+  const onClose = () => {
+    setAnchorEl(null);
+  };
+  const onClick = (block) => {
+    onSelect(block);
+    setAnchorEl(null);
+  };
+  if (anchorEl === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      open: true,
+      anchorEl,
+      onClose,
+      anchorOrigin: { vertical: "bottom", horizontal: "center" },
+      transformOrigin: { vertical: "top", horizontal: "center" },
+      children: /* @__PURE__ */ jsx(Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" }, children: BUTTONS.map((k, i) => /* @__PURE__ */ jsx(BlockTypeButton, { label: k.label, icon: k.icon, onClick: () => onClick(k.block()) }, i)) })
+    }
+  );
+}
+function DividerButton({ buttonElement, onClick }) {
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    function listener({ clientX, clientY }) {
+      if (!buttonElement) {
+        return;
+      }
+      const rect = buttonElement.getBoundingClientRect();
+      const rectY = rect.y;
+      const bottomX = rect.x;
+      const topX = bottomX + rect.width;
+      if (Math.abs(clientY - rectY) < 20) {
+        if (bottomX < clientX && clientX < topX) {
+          setVisible(true);
+          return;
+        }
+      }
+      setVisible(false);
+    }
+    window.addEventListener("mousemove", listener);
+    return () => {
+      window.removeEventListener("mousemove", listener);
+    };
+  }, [buttonElement, setVisible]);
+  return /* @__PURE__ */ jsx(Fade, { in: visible, children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "small",
+      sx: {
+        p: 0.12,
+        position: "absolute",
+        top: "-12px",
+        left: "50%",
+        transform: "translateX(-10px)",
+        bgcolor: "brand.blue",
+        color: "primary.contrastText",
+        zIndex: "fab",
+        "&:hover, &:active, &:focus": {
+          bgcolor: "brand.blue",
+          color: "primary.contrastText"
+        }
+      },
+      onClick: (ev) => {
+        ev.stopPropagation();
+        onClick();
+      },
+      children: /* @__PURE__ */ jsx(AddOutlined, { fontSize: "small" })
+    }
+  ) });
+}
+function PlaceholderButton({ onClick }) {
+  return /* @__PURE__ */ jsx(
+    ButtonBase,
+    {
+      onClick: (ev) => {
+        ev.stopPropagation();
+        onClick();
+      },
+      sx: {
+        display: "flex",
+        alignContent: "center",
+        justifyContent: "center",
+        height: 48,
+        width: "100%",
+        bgcolor: "rgba(0,0,0, 0.05)"
+      },
+      children: /* @__PURE__ */ jsx(
+        AddOutlined,
+        {
+          sx: {
+            p: 0.12,
+            bgcolor: "brand.blue",
+            borderRadius: 24,
+            color: "primary.contrastText"
+          },
+          fontSize: "small"
+        }
+      )
+    }
+  );
+}
+function AddBlockButton({ onSelect, placeholder }) {
+  const [menuAnchorEl, setMenuAnchorEl] = useState(null);
+  const [buttonElement, setButtonElement] = useState(null);
+  const handleButtonClick = () => {
+    setMenuAnchorEl(buttonElement);
+  };
+  const renderButton = () => {
+    if (placeholder) {
+      return /* @__PURE__ */ jsx(PlaceholderButton, { onClick: handleButtonClick });
+    } else {
+      return /* @__PURE__ */ jsx(DividerButton, { buttonElement, onClick: handleButtonClick });
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { ref: setButtonElement, style: { position: "relative" }, children: renderButton() }),
+    /* @__PURE__ */ jsx(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect })
+  ] });
+}
+function generateId() {
+  return `block-${Date.now()}`;
+}
+function EditorChildrenIds({ childrenIds, onChange }) {
+  const appendBlock = (block) => {
+    const blockId = generateId();
+    return onChange({
+      blockId,
+      block,
+      childrenIds: [...childrenIds || [], blockId]
+    });
+  };
+  const insertBlock = (block, index) => {
+    const blockId = generateId();
+    const newChildrenIds = [...childrenIds || []];
+    newChildrenIds.splice(index, 0, blockId);
+    return onChange({
+      blockId,
+      block,
+      childrenIds: newChildrenIds
+    });
+  };
+  if (!childrenIds || childrenIds.length === 0) {
+    return /* @__PURE__ */ jsx(AddBlockButton, { placeholder: true, onSelect: appendBlock });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    childrenIds.map((childId, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }),
+      /* @__PURE__ */ jsx(EditorBlock, { id: childId })
+    ] }, childId)),
+    /* @__PURE__ */ jsx(AddBlockButton, { onSelect: appendBlock })
+  ] });
+}
+const EMPTY_COLUMNS = [{ childrenIds: [] }, { childrenIds: [] }, { childrenIds: [] }];
+function ColumnsContainerEditor({ style, props }) {
+  var _a, _b, _c;
+  const currentBlockId = useCurrentBlockId();
+  const { columns, ...restProps } = props ?? {};
+  const columnsValue = columns ?? EMPTY_COLUMNS;
+  const updateColumn = (columnIndex, { block, blockId, childrenIds }) => {
+    const nColumns = [...columnsValue];
+    nColumns[columnIndex] = { childrenIds };
+    setDocument({
+      [blockId]: block,
+      [currentBlockId]: {
+        type: "ColumnsContainer",
+        data: ColumnsContainerPropsSchema.parse({
+          style,
+          props: {
+            ...restProps,
+            columns: nColumns
+          }
+        })
+      }
+    });
+    setSelectedBlockId(blockId);
+  };
+  return /* @__PURE__ */ jsx(
+    ColumnsContainer,
+    {
+      props: restProps,
+      style,
+      columns: [
+        /* @__PURE__ */ jsx(EditorChildrenIds, { childrenIds: (_a = columns == null ? void 0 : columns[0]) == null ? void 0 : _a.childrenIds, onChange: (change) => updateColumn(0, change) }),
+        /* @__PURE__ */ jsx(EditorChildrenIds, { childrenIds: (_b = columns == null ? void 0 : columns[1]) == null ? void 0 : _b.childrenIds, onChange: (change) => updateColumn(1, change) }),
+        /* @__PURE__ */ jsx(EditorChildrenIds, { childrenIds: (_c = columns == null ? void 0 : columns[2]) == null ? void 0 : _c.childrenIds, onChange: (change) => updateColumn(2, change) })
+      ]
+    }
+  );
+}
+function ContainerEditor({ style, props }) {
+  const childrenIds = (props == null ? void 0 : props.childrenIds) ?? [];
+  const document = useDocument();
+  const currentBlockId = useCurrentBlockId();
+  return /* @__PURE__ */ jsx(Container, { style, children: /* @__PURE__ */ jsx(
+    EditorChildrenIds,
+    {
+      childrenIds,
+      onChange: ({ block, blockId, childrenIds: childrenIds2 }) => {
+        setDocument({
+          [blockId]: block,
+          [currentBlockId]: {
+            type: "Container",
+            data: {
+              ...document[currentBlockId].data,
+              props: { childrenIds: childrenIds2 }
+            }
+          }
+        });
+        setSelectedBlockId(blockId);
+      }
+    }
+  ) });
+}
+function getFontFamily(fontFamily) {
+  const f = fontFamily ?? "MODERN_SANS";
+  switch (f) {
+    case "MODERN_SANS":
+      return '"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif';
+    case "BOOK_SANS":
+      return 'Optima, Candara, "Noto Sans", source-sans-pro, sans-serif';
+    case "ORGANIC_SANS":
+      return 'Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif';
+    case "GEOMETRIC_SANS":
+      return 'Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif';
+    case "HEAVY_SANS":
+      return 'Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif';
+    case "ROUNDED_SANS":
+      return 'ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif';
+    case "MODERN_SERIF":
+      return 'Charter, "Bitstream Charter", "Sitka Text", Cambria, serif';
+    case "BOOK_SERIF":
+      return '"Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif';
+    case "MONOSPACE":
+      return '"Nimbus Mono PS", "Courier New", "Cutive Mono", monospace';
+  }
+}
+function EmailLayoutEditor(props) {
+  const childrenIds = props.childrenIds ?? [];
+  const document = useDocument();
+  const currentBlockId = useCurrentBlockId();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick: () => {
+        setSelectedBlockId(null);
+      },
+      style: {
+        backgroundColor: props.backdropColor ?? "#F5F5F5",
+        color: props.textColor ?? "#262626",
+        fontFamily: getFontFamily(props.fontFamily),
+        fontSize: "16px",
+        fontWeight: "400",
+        letterSpacing: "0.15008px",
+        lineHeight: "1.5",
+        margin: "0",
+        padding: "32px 0",
+        width: "100%",
+        minHeight: "100%"
+      },
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          align: "center",
+          width: "100%",
+          style: {
+            margin: "0 auto",
+            maxWidth: props.width ? `${props.width}px` : "600px",
+            backgroundColor: props.canvasColor ?? "#FFFFFF",
+            borderRadius: props.borderRadius ?? void 0,
+            border: (() => {
+              const v = props.borderColor;
+              if (!v) {
+                return void 0;
+              }
+              return `1px solid ${v}`;
+            })()
+          },
+          role: "presentation",
+          cellSpacing: "0",
+          cellPadding: "0",
+          border: 0,
+          children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { style: { width: "100%" }, children: /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+            EditorChildrenIds,
+            {
+              childrenIds,
+              onChange: ({ block, blockId, childrenIds: childrenIds2 }) => {
+                setDocument({
+                  [blockId]: block,
+                  [currentBlockId]: {
+                    type: "EmailLayout",
+                    data: {
+                      ...document[currentBlockId].data,
+                      childrenIds: childrenIds2
+                    }
+                  }
+                });
+                setSelectedBlockId(blockId);
+              }
+            }
+          ) }) }) })
+        }
+      )
+    }
+  );
+}
+const sx = {
+  position: "absolute",
+  top: 0,
+  left: -56,
+  borderRadius: 64,
+  paddingX: 0.5,
+  paddingY: 1,
+  zIndex: "fab"
+};
+function TuneMenu({ blockId }) {
+  const document = useDocument();
+  const handleDeleteClick = () => {
+    var _a, _b, _c;
+    const filterChildrenIds = (childrenIds) => {
+      if (!childrenIds) {
+        return childrenIds;
+      }
+      return childrenIds.filter((f) => f !== blockId);
+    };
+    const nDocument = { ...document };
+    for (const [id, b] of Object.entries(nDocument)) {
+      const block = b;
+      if (id === blockId) {
+        continue;
+      }
+      switch (block.type) {
+        case "EmailLayout":
+          nDocument[id] = {
+            ...block,
+            data: {
+              ...block.data,
+              childrenIds: filterChildrenIds(block.data.childrenIds)
+            }
+          };
+          break;
+        case "Container":
+          nDocument[id] = {
+            ...block,
+            data: {
+              ...block.data,
+              props: {
+                ...block.data.props,
+                childrenIds: filterChildrenIds((_a = block.data.props) == null ? void 0 : _a.childrenIds)
+              }
+            }
+          };
+          break;
+        case "ColumnsContainer":
+          nDocument[id] = {
+            type: "ColumnsContainer",
+            data: {
+              style: block.data.style,
+              props: {
+                ...block.data.props,
+                columns: (_c = (_b = block.data.props) == null ? void 0 : _b.columns) == null ? void 0 : _c.map((c) => ({
+                  childrenIds: filterChildrenIds(c.childrenIds)
+                }))
+              }
+            }
+          };
+          break;
+        default:
+          nDocument[id] = block;
+      }
+    }
+    delete nDocument[blockId];
+    resetDocument(nDocument);
+  };
+  const handleMoveClick = (direction) => {
+    var _a, _b, _c;
+    const moveChildrenIds = (ids) => {
+      if (!ids) {
+        return ids;
+      }
+      const index = ids.indexOf(blockId);
+      if (index < 0) {
+        return ids;
+      }
+      const childrenIds = [...ids];
+      if (direction === "up" && index > 0) {
+        [childrenIds[index], childrenIds[index - 1]] = [childrenIds[index - 1], childrenIds[index]];
+      } else if (direction === "down" && index < childrenIds.length - 1) {
+        [childrenIds[index], childrenIds[index + 1]] = [childrenIds[index + 1], childrenIds[index]];
+      }
+      return childrenIds;
+    };
+    const nDocument = { ...document };
+    for (const [id, b] of Object.entries(nDocument)) {
+      const block = b;
+      if (id === blockId) {
+        continue;
+      }
+      switch (block.type) {
+        case "EmailLayout":
+          nDocument[id] = {
+            ...block,
+            data: {
+              ...block.data,
+              childrenIds: moveChildrenIds(block.data.childrenIds)
+            }
+          };
+          break;
+        case "Container":
+          nDocument[id] = {
+            ...block,
+            data: {
+              ...block.data,
+              props: {
+                ...block.data.props,
+                childrenIds: moveChildrenIds((_a = block.data.props) == null ? void 0 : _a.childrenIds)
+              }
+            }
+          };
+          break;
+        case "ColumnsContainer":
+          nDocument[id] = {
+            type: "ColumnsContainer",
+            data: {
+              style: block.data.style,
+              props: {
+                ...block.data.props,
+                columns: (_c = (_b = block.data.props) == null ? void 0 : _b.columns) == null ? void 0 : _c.map((c) => ({
+                  childrenIds: moveChildrenIds(c.childrenIds)
+                }))
+              }
+            }
+          };
+          break;
+        default:
+          nDocument[id] = block;
+      }
+    }
+    resetDocument(nDocument);
+    setSelectedBlockId(blockId);
+  };
+  return /* @__PURE__ */ jsx(Paper, { sx, onClick: (ev) => ev.stopPropagation(), children: /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: "Move up", placement: "left-start", children: /* @__PURE__ */ jsx(IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" }, children: /* @__PURE__ */ jsx(ArrowUpwardOutlined, { fontSize: "small" }) }) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: "Move down", placement: "left-start", children: /* @__PURE__ */ jsx(IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" }, children: /* @__PURE__ */ jsx(ArrowDownwardOutlined, { fontSize: "small" }) }) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: "Delete", placement: "left-start", children: /* @__PURE__ */ jsx(IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" }, children: /* @__PURE__ */ jsx(DeleteOutlined, { fontSize: "small" }) }) })
+  ] }) });
+}
+function EditorBlockWrapper({ children }) {
+  const selectedBlockId = useSelectedBlockId();
+  const [mouseInside, setMouseInside] = useState(false);
+  const blockId = useCurrentBlockId();
+  let outline;
+  if (selectedBlockId === blockId) {
+    outline = "2px solid rgba(0,121,204, 1)";
+  } else if (mouseInside) {
+    outline = "2px solid rgba(0,121,204, 0.3)";
+  }
+  const renderMenu = () => {
+    if (selectedBlockId !== blockId) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(TuneMenu, { blockId });
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "relative",
+        maxWidth: "100%",
+        outlineOffset: "-1px",
+        outline
+      },
+      onMouseEnter: (ev) => {
+        setMouseInside(true);
+        ev.stopPropagation();
+      },
+      onMouseLeave: () => {
+        setMouseInside(false);
+      },
+      onClick: (ev) => {
+        setSelectedBlockId(blockId);
+        ev.stopPropagation();
+        ev.preventDefault();
+      },
+      children: [
+        renderMenu(),
+        children
+      ]
+    }
+  );
+}
+const EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
+  Avatar: {
+    schema: AvatarPropsSchema,
+    Component: (props) => /* @__PURE__ */ jsx(EditorBlockWrapper, { children: /* @__PURE__ */ jsx(Avatar, { ...props }) })
+  },
+  Button: {
+    schema: ButtonPropsSchema,
+    Component: (props) => /* @__PURE__ */ jsx(EditorBlockWrapper, { children: /* @__PURE__ */ jsx(Button$1, { ...props }) })
+  },
+  Container: {
+    schema: ContainerPropsSchema,
+    Component: (props) => /* @__PURE__ */ jsx(EditorBlockWrapper, { children: /* @__PURE__ */ jsx(ContainerEditor, { ...props }) })
+  },
+  ColumnsContainer: {
+    schema: ColumnsContainerPropsSchema,
+    Component: (props) => /* @__PURE__ */ jsx(EditorBlockWrapper, { children: /* @__PURE__ */ jsx(ColumnsContainerEditor, { ...props }) })
+  },
+  Heading: {
+    schema: HeadingPropsSchema,
+    Component: (props) => /* @__PURE__ */ jsx(EditorBlockWrapper, { children: /* @__PURE__ */ jsx(Heading, { ...props }) })
+  },
+  Html: {
+    schema: HtmlPropsSchema,
+    Component: (props) => /* @__PURE__ */ jsx(EditorBlockWrapper, { children: /* @__PURE__ */ jsx(Html, { ...props }) })
+  },
+  Image: {
+    schema: ImagePropsSchema,
+    Component: (data) => {
+      var _a;
+      const props = {
+        ...data,
+        props: {
+          ...data.props,
+          url: ((_a = data.props) == null ? void 0 : _a.url) ?? "https://placehold.co/600x400@2x/F8F8F8/CCC?text=Your%20image"
+        }
+      };
+      return /* @__PURE__ */ jsx(EditorBlockWrapper, { children: /* @__PURE__ */ jsx(Image, { ...props }) });
+    }
+  },
+  Text: {
+    schema: TextPropsSchema,
+    Component: (props) => /* @__PURE__ */ jsx(EditorBlockWrapper, { children: /* @__PURE__ */ jsx(Text, { ...props }) })
+  },
+  EmailLayout: {
+    schema: EmailLayoutPropsSchema,
+    Component: (p) => /* @__PURE__ */ jsx(EmailLayoutEditor, { ...p })
+  },
+  Spacer: {
+    schema: SpacerPropsSchema,
+    Component: (props) => /* @__PURE__ */ jsx(EditorBlockWrapper, { children: /* @__PURE__ */ jsx(Spacer, { ...props }) })
+  },
+  Divider: {
+    schema: DividerPropsSchema,
+    Component: (props) => /* @__PURE__ */ jsx(EditorBlockWrapper, { children: /* @__PURE__ */ jsx(Divider$1, { ...props }) })
+  }
+});
+const EditorBlock$1 = buildBlockComponent(EDITOR_DICTIONARY);
+const EditorBlockSchema = buildBlockConfigurationSchema(EDITOR_DICTIONARY);
+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];
+  if (!block) {
+    throw new Error("Could not find block");
+  }
+  return /* @__PURE__ */ jsx(EditorBlockContext.Provider, { value: id, children: /* @__PURE__ */ jsx(EditorBlock$1, { ...block }) });
+}
+function ToggleInspectorPanelButton() {
+  const inspectorDrawerOpen = useInspectorDrawerOpen();
+  const handleClick = () => {
+    toggleInspectorDrawerOpen();
+  };
+  if (inspectorDrawerOpen) {
+    return /* @__PURE__ */ jsx(IconButton, { onClick: handleClick, children: /* @__PURE__ */ jsx(LastPageOutlined, { fontSize: "small" }) });
+  }
+  return /* @__PURE__ */ jsx(IconButton, { onClick: handleClick, children: /* @__PURE__ */ jsx(AppRegistrationOutlined, { fontSize: "small" }) });
+}
+function useIcon() {
+  const samplesDrawerOpen = useSamplesDrawerOpen();
+  if (samplesDrawerOpen) {
+    return /* @__PURE__ */ jsx(FirstPageOutlined, { fontSize: "small" });
+  }
+  return /* @__PURE__ */ jsx(MenuOutlined, { fontSize: "small" });
+}
+function ToggleSamplesPanelButton() {
+  const icon = useIcon();
+  return /* @__PURE__ */ jsx(IconButton, { onClick: toggleSamplesDrawerOpen, children: icon });
+}
+function DownloadJson() {
+  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" }) }) });
+}
+let hljs;
+let jsonHighlighter;
+let xmlHighlighter;
+let prettierFormat;
+let prettierPluginBabel;
+let prettierPluginEstree;
+let prettierPluginHtml;
+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);
+  }
+  return hljs.default;
+}
+async function loadPrettier() {
+  if (!prettierFormat) {
+    const prettier = await import("prettier/standalone");
+    prettierFormat = prettier.format;
+    prettierPluginBabel = await import("prettier/plugins/babel");
+    prettierPluginEstree = await import("prettier/plugins/estree");
+    prettierPluginHtml = await import("prettier/plugins/html");
+  }
+  return prettierFormat;
+}
+async function html(value) {
+  const [hljsInstance, format] = await Promise.all([loadHighlightJs(), loadPrettier()]);
+  const prettyValue = await format(value, {
+    parser: "html",
+    plugins: [prettierPluginHtml.default]
+  });
+  return hljsInstance.highlight(prettyValue, { language: "html" }).value;
+}
+async function json(value) {
+  const [hljsInstance, format] = await Promise.all([loadHighlightJs(), loadPrettier()]);
+  const prettyValue = await format(value, {
+    parser: "json",
+    printWidth: 0,
+    trailingComma: "all",
+    plugins: [prettierPluginBabel.default, prettierPluginEstree.default]
+  });
+  return hljsInstance.highlight(prettyValue, { language: "javascript" }).value;
+}
+function HighlightedCodePanel({ type, value }) {
+  const [code, setCode] = useState(null);
+  useEffect(() => {
+    switch (type) {
+      case "html":
+        html(value).then(setCode);
+        return;
+      case "json":
+        json(value).then(setCode);
+        return;
+    }
+  }, [setCode, value, type]);
+  if (code === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "pre",
+    {
+      style: { margin: 0, padding: 16 },
+      dangerouslySetInnerHTML: { __html: code },
+      onClick: (ev) => {
+        const s = window.getSelection();
+        if (s === null) {
+          return;
+        }
+        s.selectAllChildren(ev.currentTarget);
+      }
+    }
+  );
+}
+function HtmlPanel() {
+  const document = useDocument();
+  const code = useMemo(() => renderToStaticMarkup(document, { rootBlockId: "root" }), [document]);
+  return /* @__PURE__ */ jsx(HighlightedCodePanel, { type: "html", value: code });
+}
+function validateTextAreaValue(value) {
+  let jsonObject = void 0;
+  try {
+    jsonObject = JSON.parse(value);
+  } catch {
+    return { error: "Invalid json" };
+  }
+  const parseResult = EditorConfigurationSchema.safeParse(jsonObject);
+  if (!parseResult.success) {
+    return { error: "Invalid JSON schema" };
+  }
+  if (!parseResult.data.root) {
+    return { error: 'Missing "root" node' };
+  }
+  return { data: parseResult.data };
+}
+function ImportJsonDialog({ onClose }) {
+  const [value, setValue] = useState("");
+  const [error, setError] = useState(null);
+  const handleChange = (ev) => {
+    const v = ev.currentTarget.value;
+    setValue(v);
+    const { error: error2 } = validateTextAreaValue(v);
+    setError(error2 ?? null);
+  };
+  let errorAlert = null;
+  if (error) {
+    errorAlert = /* @__PURE__ */ jsx(Alert, { color: "error", children: error });
+  }
+  return /* @__PURE__ */ jsxs(Dialog, { open: true, onClose, children: [
+    /* @__PURE__ */ jsx(DialogTitle, { children: "Import JSON" }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit: (ev) => {
+          ev.preventDefault();
+          const { error: error2, data } = validateTextAreaValue(value);
+          setError(error2 ?? null);
+          if (!data) {
+            return;
+          }
+          resetDocument(data);
+          onClose();
+        },
+        children: [
+          /* @__PURE__ */ jsxs(DialogContent, { children: [
+            /* @__PURE__ */ jsxs(Typography, { color: "text.secondary", paragraph: true, children: [
+              "Copy and paste an EmailBuilder.js JSON (",
+              /* @__PURE__ */ jsx(
+                Link,
+                {
+                  href: "https://gist.githubusercontent.com/jordanisip/efb61f56ba71bd36d3a9440122cb7f50/raw/30ea74a6ac7e52ebdc309bce07b71a9286ce2526/emailBuilderTemplate.json",
+                  target: "_blank",
+                  underline: "none",
+                  children: "example"
+                }
+              ),
+              ")."
+            ] }),
+            errorAlert,
+            /* @__PURE__ */ jsx(
+              TextField,
+              {
+                error: error !== null,
+                value,
+                onChange: handleChange,
+                type: "text",
+                helperText: "This will override your current template.",
+                variant: "outlined",
+                fullWidth: true,
+                rows: 10,
+                multiline: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(Button, { type: "button", onClick: onClose, children: "Cancel" }),
+            /* @__PURE__ */ jsx(Button, { variant: "contained", type: "submit", disabled: error !== null, children: "Import" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function ImportJson() {
+  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" }) }) }),
+    dialog
+  ] });
+}
+function JsonPanel() {
+  const document = useDocument();
+  const code = useMemo(() => JSON.stringify(document, null, "  "), [document]);
+  return /* @__PURE__ */ jsx(HighlightedCodePanel, { type: "json", value: code });
+}
+function MainTabsGroup() {
+  const { t: t2 } = useTranslation();
+  const selectedMainTab = useSelectedMainTab();
+  const handleChange = (_, v) => {
+    switch (v) {
+      case "json":
+      case "preview":
+      case "editor":
+      case "html":
+        setSelectedMainTab(v);
+        return;
+      default:
+        setSelectedMainTab("editor");
+    }
+  };
+  return /* @__PURE__ */ jsxs(Tabs, { value: selectedMainTab, onChange: handleChange, children: [
+    /* @__PURE__ */ jsx(
+      Tab,
+      {
+        value: "editor",
+        label: /* @__PURE__ */ jsx(Tooltip, { title: t2("tabs.edit"), children: /* @__PURE__ */ jsx(EditOutlined, { fontSize: "small" }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Tab,
+      {
+        value: "preview",
+        label: /* @__PURE__ */ jsx(Tooltip, { title: t2("tabs.preview"), children: /* @__PURE__ */ jsx(PreviewOutlined, { fontSize: "small" }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Tab,
+      {
+        value: "html",
+        label: /* @__PURE__ */ jsx(Tooltip, { title: t2("tabs.htmlOutput"), children: /* @__PURE__ */ jsx(CodeOutlined, { fontSize: "small" }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Tab,
+      {
+        value: "json",
+        label: /* @__PURE__ */ jsx(Tooltip, { title: t2("tabs.jsonOutput"), children: /* @__PURE__ */ jsx(DataObjectOutlined, { fontSize: "small" }) })
+      }
+    )
+  ] });
+}
+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.");
+  };
+  const onClose = () => {
+    setMessage(null);
+  };
+  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
+      }
+    )
+  ] });
+}
+function TemplatePanel() {
+  const document = useDocument();
+  const selectedMainTab = useSelectedMainTab();
+  const selectedScreenSize = useSelectedScreenSize();
+  let mainBoxSx = {
+    height: "100%"
+  };
+  if (selectedScreenSize === "mobile") {
+    mainBoxSx = {
+      ...mainBoxSx,
+      margin: "32px auto",
+      width: 370,
+      height: 800,
+      boxShadow: "rgba(33, 36, 67, 0.04) 0px 10px 20px, rgba(33, 36, 67, 0.04) 0px 2px 6px, rgba(33, 36, 67, 0.04) 0px 0px 1px"
+    };
+  }
+  const handleScreenSizeChange = (_, value) => {
+    switch (value) {
+      case "mobile":
+      case "desktop":
+        setSelectedScreenSize(value);
+        return;
+      default:
+        setSelectedScreenSize("desktop");
+    }
+  };
+  const renderMainPanel = () => {
+    switch (selectedMainTab) {
+      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" }) });
+      case "html":
+        return /* @__PURE__ */ jsx(HtmlPanel, {});
+      case "json":
+        return /* @__PURE__ */ jsx(JsonPanel, {});
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        sx: {
+          height: 49,
+          borderBottom: 1,
+          borderColor: "divider",
+          backgroundColor: "white",
+          position: "sticky",
+          top: 0,
+          zIndex: "appBar",
+          px: 1
+        },
+        direction: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [
+          /* @__PURE__ */ jsx(ToggleSamplesPanelButton, {}),
+          /* @__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__ */ 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(ToggleInspectorPanelButton, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { sx: { height: "calc(100vh - 49px)", overflow: "auto", minWidth: 370 }, children: renderMainPanel() })
+  ] });
+}
+function useDrawerTransition(cssProperty, open) {
+  const { transitions } = useTheme();
+  return transitions.create(cssProperty, {
+    easing: !open ? transitions.easing.sharp : transitions.easing.easeOut,
+    duration: !open ? transitions.duration.leavingScreen : transitions.duration.enteringScreen
+  });
+}
+function App() {
+  const inspectorDrawerOpen = useInspectorDrawerOpen();
+  const samplesDrawerOpen = useSamplesDrawerOpen();
+  const marginLeftTransition = useDrawerTransition("margin-left", samplesDrawerOpen);
+  const marginRightTransition = useDrawerTransition("margin-right", inspectorDrawerOpen);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(InspectorDrawer, {}),
+    /* @__PURE__ */ jsx(SamplesDrawer, {}),
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        sx: {
+          marginRight: inspectorDrawerOpen ? `${INSPECTOR_DRAWER_WIDTH}px` : 0,
+          marginLeft: samplesDrawerOpen ? `${SAMPLES_DRAWER_WIDTH}px` : 0,
+          transition: `${marginLeftTransition}, ${marginRightTransition}`
+        },
+        children: [
+          /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top: 8, right: 8, zIndex: 1e3 }, children: /* @__PURE__ */ jsx(LanguageSwitcher, {}) }),
+          /* @__PURE__ */ jsx(TemplatePanel, {})
+        ]
+      }
+    )
+  ] });
+}
+function EmailBuilder({
+  initialDocument,
+  initialLanguage = "en",
+  imageUploadHandler,
+  onChange,
+  theme: customTheme
+}) {
+  const currentLanguage = useLanguage();
+  useEffect(() => {
+    if (initialDocument) {
+      resetDocument(initialDocument);
+    }
+    if (initialLanguage) {
+      setLanguage(initialLanguage);
+    }
+    if (imageUploadHandler) {
+      setImageUploadHandler(imageUploadHandler);
+    }
+    if (onChange) {
+      setOnChange(onChange);
+    }
+  }, []);
+  useEffect(() => {
+    if (initialLanguage && initialLanguage !== currentLanguage) {
+      setLanguage(initialLanguage);
+    }
+  }, [initialLanguage, currentLanguage]);
+  useEffect(() => {
+    if (imageUploadHandler) {
+      setImageUploadHandler(imageUploadHandler);
+    }
+  }, [imageUploadHandler]);
+  useEffect(() => {
+    if (onChange) {
+      setOnChange(onChange);
+    }
+  }, [onChange]);
+  return /* @__PURE__ */ jsxs(ThemeProvider, { theme: customTheme || THEME, children: [
+    /* @__PURE__ */ jsx(CssBaseline, {}),
+    /* @__PURE__ */ jsx(App, {})
+  ] });
+}
+export {
+  EmailBuilder,
+  useDocument,
+  useLanguage
+};