@kontakto/email-template-editor 1.6.0 → 2.0.0

package/dist/index.js

@@ -1,12 +1,12 @@
 import DOMPurify from 'dompurify';
 import { marked, Renderer } from 'marked';
-import React72, { createContext, forwardRef, useRef, useEffect, useImperativeHandle, useMemo, useContext, useState, useCallback, Fragment } from 'react';
+import React60, { createContext, forwardRef, useRef, useEffect, useImperativeHandle, useMemo, useContext, useState, useCallback, Fragment } from 'react';
 import { z } from 'zod';
 import { renderToStaticMarkup as renderToStaticMarkup$1 } from 'react-dom/server';
 import { createTheme, alpha, lighten, darken } from '@mui/material/styles';
-import { MenuItem, Stack, ThemeProvider, CssBaseline, useTheme, Drawer, Box, Tabs, Tab, Typography, CircularProgress, Divider as Divider$1, ToggleButtonGroup, ToggleButton, Tooltip, Snackbar, Button as Button$1, IconButton, Dialog, DialogTitle, DialogContent, TextField, DialogActions, FormControlLabel, Switch, InputLabel, Menu, Slider, ButtonBase, Paper, Fade } from '@mui/material';
+import { MenuItem, Stack, ThemeProvider, CssBaseline, useTheme, Drawer, Box, Tabs, Tab, Typography, Tooltip, IconButton, TextField, InputAdornment, Chip, CircularProgress, Alert, Divider as Divider$1, ToggleButtonGroup, ToggleButton, Snackbar, Dialog, DialogTitle, DialogContent, DialogActions, Button as Button$1, InputBase, FormControlLabel, Switch, InputLabel, Menu, Slider, ButtonBase, Paper, Fade } from '@mui/material';
 import { create } from 'zustand';
-import { MonitorOutlined, PhoneIphoneOutlined, EditOutlined, PreviewOutlined, CodeOutlined, SubjectOutlined, DataObjectOutlined, Add, SaveOutlined, LastPageOutlined, AppRegistrationOutlined, ContentCopyOutlined, DeleteOutlined, FirstPageOutlined, MenuOutlined, FileDownloadOutlined, RoundedCornerOutlined, AspectRatioOutlined, HeightOutlined, VerticalAlignTopOutlined, VerticalAlignCenterOutlined, VerticalAlignBottomOutlined, SpaceBarOutlined, AddOutlined, CloseOutlined, AlignVerticalTopOutlined, AlignVerticalBottomOutlined, AlignHorizontalLeftOutlined, AlignHorizontalRightOutlined, FormatAlignLeftOutlined, FormatAlignCenterOutlined, FormatAlignRightOutlined, TextFieldsOutlined, ArrowUpwardOutlined, ArrowDownwardOutlined, HMobiledataOutlined, NotesOutlined, SmartButtonOutlined, ImageOutlined, AccountCircleOutlined, ContactMailOutlined, BusinessOutlined, HorizontalRuleOutlined, Crop32Outlined, HtmlOutlined, ViewColumnOutlined, LibraryAddOutlined } from '@mui/icons-material';
+import { AddOutlined, SearchOutlined, MonitorOutlined, PhoneIphoneOutlined, LibraryAddOutlined, ContentCopyOutlined, DriveFileRenameOutlineOutlined, FileUploadOutlined, FileDownloadOutlined, DeleteOutlined, EditOutlined, PreviewOutlined, CodeOutlined, SubjectOutlined, DataObjectOutlined, Add, SaveOutlined, LastPageOutlined, AppRegistrationOutlined, DeleteOutline, FirstPageOutlined, MenuOutlined, RoundedCornerOutlined, AspectRatioOutlined, HeightOutlined, VerticalAlignTopOutlined, VerticalAlignCenterOutlined, VerticalAlignBottomOutlined, SpaceBarOutlined, CloseOutlined, AlignVerticalTopOutlined, AlignVerticalBottomOutlined, AlignHorizontalLeftOutlined, AlignHorizontalRightOutlined, FormatAlignLeftOutlined, FormatAlignCenterOutlined, FormatAlignRightOutlined, TextFieldsOutlined, ArrowUpwardOutlined, ArrowDownwardOutlined, HMobiledataOutlined, NotesOutlined, SmartButtonOutlined, ImageOutlined, AccountCircleOutlined, ContactMailOutlined, BusinessOutlined, HorizontalRuleOutlined, Crop32Outlined, HtmlOutlined, ViewColumnOutlined } from '@mui/icons-material';
 import { HexColorPicker, HexColorInput } from 'react-colorful';
 import hljs from 'highlight.js';
 import jsonHighlighter from 'highlight.js/lib/languages/json';
@@ -159,7 +159,7 @@ function renderMarkdownString(str) {
 function EmailMarkdown(_a) {
   var _b = _a, { markdown } = _b, props = __objRest(_b, ["markdown"]);
   const data = useMemo(() => renderMarkdownString(markdown), [markdown]);
-  return /* @__PURE__ */ React72.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
+  return /* @__PURE__ */ React60.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
 }
 var FONT_FAMILY_SCHEMA = z.enum([
   "MODERN_SANS",
@@ -235,9 +235,9 @@ function Text({ style, props }) {
   };
   const text = (_f = props == null ? void 0 : props.text) != null ? _f : TextPropsDefaults.text;
   if (props == null ? void 0 : props.markdown) {
-    return /* @__PURE__ */ React72.createElement(EmailMarkdown, { style: wStyle, markdown: text });
+    return /* @__PURE__ */ React60.createElement(EmailMarkdown, { style: wStyle, markdown: text });
   }
-  return /* @__PURE__ */ React72.createElement("div", { style: wStyle }, text);
+  return /* @__PURE__ */ React60.createElement("div", { style: wStyle }, text);
 }
 var PADDING_SCHEMA2 = z.object({
   top: z.number(),
@@ -286,7 +286,7 @@ function Avatar({ style, props }) {
     textAlign: (_e = style == null ? void 0 : style.textAlign) != null ? _e : void 0,
     padding: getPadding2(style == null ? void 0 : style.padding)
   };
-  return /* @__PURE__ */ React72.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React60.createElement(
     "img",
     {
       alt,
@@ -434,14 +434,14 @@ function Button({ style, props }) {
     padding: `${padding[0]}px ${padding[1]}px`,
     textDecoration: "none"
   };
-  return /* @__PURE__ */ React72.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React72.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React60.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React60.createElement(
     "span",
     {
       dangerouslySetInnerHTML: {
         __html: `<!--[if mso]><i style="letter-spacing: ${padding[1]}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`
       }
     }
-  ), /* @__PURE__ */ React72.createElement("span", null, text), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement("span", null, text), /* @__PURE__ */ React60.createElement(
     "span",
     {
       dangerouslySetInnerHTML: {
@@ -490,7 +490,7 @@ function ColumnsContainer({ style, columns, props }) {
     contentAlignment: (_d = props == null ? void 0 : props.contentAlignment) != null ? _d : ColumnsContainerPropsDefaults.contentAlignment,
     fixedWidths: props == null ? void 0 : props.fixedWidths
   };
-  return /* @__PURE__ */ React72.createElement("div", { style: wStyle }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement("div", { style: wStyle }, /* @__PURE__ */ React60.createElement(
     "table",
     {
       align: "center",
@@ -499,7 +499,7 @@ function ColumnsContainer({ style, columns, props }) {
       border: 0,
       style: { tableLayout: "fixed", borderCollapse: "collapse" }
     },
-    /* @__PURE__ */ React72.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React72.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React72.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React72.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React72.createElement(TableCell, { index: 2, props: blockProps, columns })))
+    /* @__PURE__ */ React60.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React60.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React60.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React60.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React60.createElement(TableCell, { index: 2, props: blockProps, columns })))
   ));
 }
 function TableCell({ index, props, columns }) {
@@ -517,7 +517,7 @@ function TableCell({ index, props, columns }) {
     width: (_d = (_c = props.fixedWidths) == null ? void 0 : _c[index]) != null ? _d : void 0
   };
   const children = (_e = columns && columns[index]) != null ? _e : null;
-  return /* @__PURE__ */ React72.createElement("td", { style }, children);
+  return /* @__PURE__ */ React60.createElement("td", { style }, children);
 }
 function getPaddingBefore(index, { columnsGap, columnsCount }) {
   if (index === 0) {
@@ -579,9 +579,9 @@ function Container({ style, children }) {
     padding: getPadding5(style == null ? void 0 : style.padding)
   };
   if (!children) {
-    return /* @__PURE__ */ React72.createElement("div", { style: wStyle });
+    return /* @__PURE__ */ React60.createElement("div", { style: wStyle });
   }
-  return /* @__PURE__ */ React72.createElement("div", { style: wStyle }, children);
+  return /* @__PURE__ */ React60.createElement("div", { style: wStyle }, children);
 }
 var container_default = Container;
 var COLOR_SCHEMA5 = z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
@@ -615,7 +615,7 @@ function Divider({ style, props }) {
   };
   const borderTopWidth = (_b = props == null ? void 0 : props.lineHeight) != null ? _b : DividerPropsDefaults.lineHeight;
   const borderTopColor = (_c = props == null ? void 0 : props.lineColor) != null ? _c : DividerPropsDefaults.lineColor;
-  return /* @__PURE__ */ React72.createElement("div", { style: st }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement("div", { style: st }, /* @__PURE__ */ React60.createElement(
     "hr",
     {
       style: {
@@ -705,11 +705,11 @@ function Heading({ props, style }) {
   };
   switch (level) {
     case "h1":
-      return /* @__PURE__ */ React72.createElement("h1", { style: hStyle }, text);
+      return /* @__PURE__ */ React60.createElement("h1", { style: hStyle }, text);
     case "h2":
-      return /* @__PURE__ */ React72.createElement("h2", { style: hStyle }, text);
+      return /* @__PURE__ */ React60.createElement("h2", { style: hStyle }, text);
     case "h3":
-      return /* @__PURE__ */ React72.createElement("h3", { style: hStyle }, text);
+      return /* @__PURE__ */ React60.createElement("h3", { style: hStyle }, text);
   }
 }
 function getFontSize(level) {
@@ -791,9 +791,9 @@ function Html({ style, props }) {
     padding: getPadding8(style == null ? void 0 : style.padding)
   };
   if (!children) {
-    return /* @__PURE__ */ React72.createElement("div", { style: cssStyle });
+    return /* @__PURE__ */ React60.createElement("div", { style: cssStyle });
   }
-  return /* @__PURE__ */ React72.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
+  return /* @__PURE__ */ React60.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
 }
 var html_default = Html;
 var PADDING_SCHEMA9 = z.object({
@@ -829,7 +829,7 @@ function Image({ style, props }) {
   const linkHref = (_c = props == null ? void 0 : props.linkHref) != null ? _c : null;
   const width = (_d = props == null ? void 0 : props.width) != null ? _d : void 0;
   const height = (_e = props == null ? void 0 : props.height) != null ? _e : void 0;
-  const imageElement = /* @__PURE__ */ React72.createElement(
+  const imageElement = /* @__PURE__ */ React60.createElement(
     "img",
     {
       alt: (_f = props == null ? void 0 : props.alt) != null ? _f : "",
@@ -849,9 +849,9 @@ function Image({ style, props }) {
     }
   );
   if (!linkHref) {
-    return /* @__PURE__ */ React72.createElement("div", { style: sectionStyle }, imageElement);
+    return /* @__PURE__ */ React60.createElement("div", { style: sectionStyle }, imageElement);
   }
-  return /* @__PURE__ */ React72.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React72.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
+  return /* @__PURE__ */ React60.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React60.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
 }
 var image_default = Image;
 var FONT_FAMILY_SCHEMA5 = z.enum([
@@ -997,7 +997,7 @@ function Signature({ style, props }) {
     color: linkColor,
     textDecoration: "none"
   };
-  const imageElement = imageUrl ? /* @__PURE__ */ React72.createElement(
+  const imageElement = imageUrl ? /* @__PURE__ */ React60.createElement(
     "img",
     {
       src: imageUrl,
@@ -1016,18 +1016,18 @@ function Signature({ style, props }) {
     }
   ) : null;
   const contactParts = [];
-  if (email) contactParts.push(/* @__PURE__ */ React72.createElement("a", { key: "email", href: `mailto:${email}`, style: linkStyle }, email));
-  if (phone) contactParts.push(/* @__PURE__ */ React72.createElement("a", { key: "phone", href: `tel:${phone}`, style: linkStyle }, phone));
+  if (email) contactParts.push(/* @__PURE__ */ React60.createElement("a", { key: "email", href: `mailto:${email}`, style: linkStyle }, email));
+  if (phone) contactParts.push(/* @__PURE__ */ React60.createElement("a", { key: "phone", href: `tel:${phone}`, style: linkStyle }, phone));
   if (website) {
     const href = website.startsWith("http") ? website : `https://${website}`;
-    contactParts.push(/* @__PURE__ */ React72.createElement("a", { key: "website", href, style: linkStyle, target: "_blank" }, website));
+    contactParts.push(/* @__PURE__ */ React60.createElement("a", { key: "website", href, style: linkStyle, target: "_blank" }, website));
   }
-  const textContent = /* @__PURE__ */ React72.createElement("div", null, name && /* @__PURE__ */ React72.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React72.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React72.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React72.createElement("p", { style: detailStyle }, address), contactParts.length > 0 && /* @__PURE__ */ React72.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, contactParts.map((part, i) => /* @__PURE__ */ React72.createElement(React72.Fragment, { key: i }, i > 0 && /* @__PURE__ */ React72.createElement("span", { style: detailStyle }, " \xB7 "), part))));
-  const greetingElement = greeting ? /* @__PURE__ */ React72.createElement("p", { style: greetingStyle }, greeting) : null;
+  const textContent = /* @__PURE__ */ React60.createElement("div", null, name && /* @__PURE__ */ React60.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React60.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React60.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React60.createElement("p", { style: detailStyle }, address), contactParts.length > 0 && /* @__PURE__ */ React60.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, contactParts.map((part, i) => /* @__PURE__ */ React60.createElement(React60.Fragment, { key: i }, i > 0 && /* @__PURE__ */ React60.createElement("span", { style: detailStyle }, " \xB7 "), part))));
+  const greetingElement = greeting ? /* @__PURE__ */ React60.createElement("p", { style: greetingStyle }, greeting) : null;
   if (layout === "vertical") {
-    return /* @__PURE__ */ React72.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React72.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
+    return /* @__PURE__ */ React60.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React60.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
   }
-  return /* @__PURE__ */ React72.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React72.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React72.createElement("tbody", null, /* @__PURE__ */ React72.createElement("tr", null, imageElement && /* @__PURE__ */ React72.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React72.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
+  return /* @__PURE__ */ React60.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React60.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React60.createElement("tbody", null, /* @__PURE__ */ React60.createElement("tr", null, imageElement && /* @__PURE__ */ React60.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React60.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
 }
 var signature_default = Signature;
 var SpacerPropsSchema = z.object({
@@ -1044,13 +1044,13 @@ function Spacer({ props }) {
   const style = {
     height: (_a = props == null ? void 0 : props.height) != null ? _a : SpacerPropsDefaults.height
   };
-  return /* @__PURE__ */ React72.createElement("div", { style });
+  return /* @__PURE__ */ React60.createElement("div", { style });
 }
 var spacer_default = Spacer;
 function buildBlockComponent(blocks) {
   return function BlockComponent({ type, data }) {
     const Component = blocks[type].Component;
-    return /* @__PURE__ */ React72.createElement(Component, __spreadValues({}, data));
+    return /* @__PURE__ */ React60.createElement(Component, __spreadValues({}, data));
   };
 }
 function buildBlockConfigurationSchema(blocks) {
@@ -1087,9 +1087,9 @@ function ColumnsContainerReader({ style, props }) {
   const _a = props != null ? props : {}, { columns } = _a, restProps = __objRest(_a, ["columns"]);
   let cols = void 0;
   if (columns) {
-    cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ React72.createElement(ReaderBlock, { key: childId, id: childId })));
+    cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ React60.createElement(ReaderBlock, { key: childId, id: childId })));
   }
-  return /* @__PURE__ */ React72.createElement(columns_container_default, { props: restProps, columns: cols, style });
+  return /* @__PURE__ */ React60.createElement(columns_container_default, { props: restProps, columns: cols, style });
 }
 var ContainerPropsSchema2 = z.object({
   style: ContainerPropsSchema.shape.style,
@@ -1100,7 +1100,7 @@ var ContainerPropsSchema2 = z.object({
 function ContainerReader({ style, props }) {
   var _a;
   const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
-  return /* @__PURE__ */ React72.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React72.createElement(ReaderBlock, { key: childId, id: childId })));
+  return /* @__PURE__ */ React60.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React60.createElement(ReaderBlock, { key: childId, id: childId })));
 }
 var COLOR_SCHEMA9 = z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
 var FONT_FAMILY_SCHEMA6 = z.enum([
@@ -1114,6 +1114,10 @@ var FONT_FAMILY_SCHEMA6 = z.enum([
   "BOOK_SERIF",
   "MONOSPACE"
 ]).nullable().optional();
+var TemplateVariableSchema = z.object({
+  name: z.string(),
+  description: z.string().optional().nullable()
+});
 var EmailLayoutPropsSchema = z.object({
   backdropColor: COLOR_SCHEMA9,
   backdropDisabled: z.boolean().optional().nullable(),
@@ -1122,7 +1126,9 @@ var EmailLayoutPropsSchema = z.object({
   canvasColor: COLOR_SCHEMA9,
   textColor: COLOR_SCHEMA9,
   fontFamily: FONT_FAMILY_SCHEMA6,
-  childrenIds: z.array(z.string()).optional().nullable()
+  childrenIds: z.array(z.string()).optional().nullable(),
+  subject: z.string().optional().nullable(),
+  variables: z.array(TemplateVariableSchema).optional().nullable()
 });
 function getFontFamily6(fontFamily) {
   const f = fontFamily != null ? fontFamily : "MODERN_SANS";
@@ -1166,9 +1172,9 @@ function EmailLayoutReader(props) {
     margin: "0"
   };
   if (props.backdropDisabled) {
-    return /* @__PURE__ */ React72.createElement("div", { style: baseStyle }, childrenIds.map((childId) => /* @__PURE__ */ React72.createElement(ReaderBlock, { key: childId, id: childId })));
+    return /* @__PURE__ */ React60.createElement("div", { style: baseStyle }, childrenIds.map((childId) => /* @__PURE__ */ React60.createElement(ReaderBlock, { key: childId, id: childId })));
   }
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(
     "div",
     {
       style: __spreadProps(__spreadValues({}, baseStyle), {
@@ -1178,7 +1184,7 @@ function EmailLayoutReader(props) {
         width: "100%"
       })
     },
-    /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React60.createElement(
       "table",
       {
         align: "center",
@@ -1196,7 +1202,7 @@ function EmailLayoutReader(props) {
         cellPadding: "0",
         border: 0
       },
-      /* @__PURE__ */ React72.createElement("tbody", null, /* @__PURE__ */ React72.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React72.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React72.createElement(ReaderBlock, { key: childId, id: childId })))))
+      /* @__PURE__ */ React60.createElement("tbody", null, /* @__PURE__ */ React60.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React60.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React60.createElement(ReaderBlock, { key: childId, id: childId })))))
     )
   );
 }
@@ -1208,7 +1214,7 @@ function useReaderDocument() {
 }
 function ReaderBlock({ id }) {
   const document2 = useReaderDocument();
-  return document2[id] ? /* @__PURE__ */ React72.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
+  return document2[id] ? /* @__PURE__ */ React60.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
 }
 var READER_DICTIONARY = buildBlockConfigurationDictionary({
   ColumnsContainer: {
@@ -1265,13 +1271,13 @@ var ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
 var ReaderDocumentSchema = z.record(z.string(), ReaderBlockSchema);
 var BaseReaderBlock = buildBlockComponent(READER_DICTIONARY);
 function Reader({ document: document2, rootBlockId }) {
-  return /* @__PURE__ */ React72.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React72.createElement(ReaderBlock, { id: rootBlockId }));
+  return /* @__PURE__ */ React60.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React60.createElement(ReaderBlock, { id: rootBlockId }));
 }
 
 // src/email-builder/renderers/render-to-static-markup.tsx
 function renderToStaticMarkup(document2, { rootBlockId }) {
   return "<!DOCTYPE html>" + renderToStaticMarkup$1(
-    /* @__PURE__ */ React72.createElement("html", null, /* @__PURE__ */ React72.createElement("body", null, /* @__PURE__ */ React72.createElement(Reader, { document: document2, rootBlockId })))
+    /* @__PURE__ */ React60.createElement("html", null, /* @__PURE__ */ React60.createElement("body", null, /* @__PURE__ */ React60.createElement(Reader, { document: document2, rootBlockId })))
   );
 }
 
@@ -2012,6 +2018,23 @@ function setSelectedScreenSize(selectedScreenSize) {
 function setPersistenceEnabled(persistenceEnabled) {
   return editorStateStore.setState({ persistenceEnabled });
 }
+
+// src/app/save-payload.ts
+var ROOT_BLOCK_ID = "root";
+function buildSavePayload(doc) {
+  var _a, _b;
+  const root = doc.root;
+  const layoutData = root && root.type === "EmailLayout" ? root.data : void 0;
+  return {
+    editorConfig: doc,
+    subject: (_a = layoutData == null ? void 0 : layoutData.subject) != null ? _a : void 0,
+    variables: (_b = layoutData == null ? void 0 : layoutData.variables) != null ? _b : void 0,
+    bodyHtml: renderToStaticMarkup(doc, { rootBlockId: ROOT_BLOCK_ID }),
+    bodyText: renderToText(doc, { rootBlockId: ROOT_BLOCK_ID })
+  };
+}
+
+// src/app/context.tsx
 var EmailEditorContext = createContext(null);
 var EmailEditorProvider = ({
   children,
@@ -2021,6 +2044,7 @@ var EmailEditorProvider = ({
 }) => {
   const [currentTemplateId, setCurrentTemplateId] = useState(initialTemplateId);
   const [currentTemplateName, setCurrentTemplateName] = useState(initialTemplateName);
+  const [currentTemplateKind, setCurrentTemplateKind] = useState(null);
   const saveListenersRef = useRef([]);
   const onSaveRef = useRef(onSave);
   onSaveRef.current = onSave;
@@ -2028,21 +2052,27 @@ var EmailEditorProvider = ({
     const currentDoc = getDocument();
     saveListenersRef.current.forEach((listener) => listener(currentDoc));
     if (onSaveRef.current) {
-      onSaveRef.current(currentDoc);
+      onSaveRef.current(buildSavePayload(currentDoc));
     }
     return currentDoc;
   }, []);
-  const loadTemplate = useCallback((newTemplate, templateId, templateName) => {
+  const loadTemplate = useCallback((newTemplate, templateId, templateName, kind) => {
     if (templateId !== void 0) {
       setCurrentTemplateId(templateId);
     }
     if (templateName !== void 0) {
       setCurrentTemplateName(templateName);
     }
+    if (kind !== void 0) {
+      setCurrentTemplateKind(kind);
+    }
   }, []);
-  const setCurrentTemplate = useCallback((templateId, templateName) => {
+  const setCurrentTemplate = useCallback((templateId, templateName, kind) => {
     setCurrentTemplateId(templateId);
     setCurrentTemplateName(templateName);
+    if (kind !== void 0) {
+      setCurrentTemplateKind(kind);
+    }
   }, []);
   const registerSaveListener = useCallback((callback) => {
     saveListenersRef.current = [...saveListenersRef.current, callback];
@@ -2053,12 +2083,13 @@ var EmailEditorProvider = ({
   const value = useMemo(() => ({
     currentTemplateId,
     currentTemplateName,
+    currentTemplateKind,
     saveTemplate,
     loadTemplate,
     registerSaveListener,
     setCurrentTemplate
-  }), [currentTemplateId, currentTemplateName, saveTemplate, loadTemplate, registerSaveListener, setCurrentTemplate]);
-  return /* @__PURE__ */ React72.createElement(EmailEditorContext.Provider, { value }, children);
+  }), [currentTemplateId, currentTemplateName, currentTemplateKind, saveTemplate, loadTemplate, registerSaveListener, setCurrentTemplate]);
+  return /* @__PURE__ */ React60.createElement(EmailEditorContext.Provider, { value }, children);
 };
 var useEmailEditor = () => {
   const context = useContext(EmailEditorContext);
@@ -2068,14 +2099,14 @@ var useEmailEditor = () => {
   return context;
 };
 function BaseSidebarPanel({ title, children }) {
-  return /* @__PURE__ */ React72.createElement(Box, { p: 2 }, /* @__PURE__ */ React72.createElement(Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, title), /* @__PURE__ */ React72.createElement(Stack, { spacing: 5, mb: 3 }, children));
+  return /* @__PURE__ */ React60.createElement(Box, { p: 2 }, /* @__PURE__ */ React60.createElement(Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, title), /* @__PURE__ */ React60.createElement(Stack, { spacing: 5, mb: 3 }, children));
 }
 function RadioGroupInput({ label, children, defaultValue, onChange }) {
   const [value, setValue] = useState(defaultValue);
   useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React72.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React72.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React60.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React60.createElement(
     ToggleButtonGroup,
     {
       exclusive: true,
@@ -2095,7 +2126,7 @@ function RadioGroupInput({ label, children, defaultValue, onChange }) {
 }
 function RawSliderInput(_a) {
   var _b = _a, { iconLabel, value, setValue, units } = _b, props = __objRest(_b, ["iconLabel", "value", "setValue", "units"]);
-  return /* @__PURE__ */ React72.createElement(Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React72.createElement(Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React60.createElement(Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React60.createElement(
     Slider,
     __spreadProps(__spreadValues({}, props), {
       value,
@@ -2106,14 +2137,14 @@ function RawSliderInput(_a) {
         setValue(value2);
       }
     })
-  ), /* @__PURE__ */ React72.createElement(Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React72.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1 } }, value, units)));
+  ), /* @__PURE__ */ React60.createElement(Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React60.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1 } }, value, units)));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/slider-input.tsx
 function SliderInput(_a) {
   var _b = _a, { label, defaultValue, onChange } = _b, props = __objRest(_b, ["label", "defaultValue", "onChange"]);
   const [value, setValue] = useState(defaultValue);
-  return /* @__PURE__ */ React72.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React72.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React60.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React60.createElement(
     RawSliderInput,
     __spreadValues({
       value,
@@ -2130,7 +2161,7 @@ function TextInput({ helperText, label, placeholder, rows, InputProps: InputProp
   useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(
     TextField,
     {
       fullWidth: true,
@@ -2156,7 +2187,7 @@ var TILE_BUTTON = {
 };
 function Swatch({ paletteColors, value, onChange }) {
   const renderButton2 = (colorValue) => {
-    return /* @__PURE__ */ React72.createElement(
+    return /* @__PURE__ */ React60.createElement(
       Button$1,
       {
         key: colorValue,
@@ -2175,7 +2206,7 @@ function Swatch({ paletteColors, value, onChange }) {
       }
     );
   };
-  return /* @__PURE__ */ React72.createElement(Box, { width: "100%", sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr" } }, paletteColors.map((c) => renderButton2(c)));
+  return /* @__PURE__ */ React60.createElement(Box, { width: "100%", sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr" } }, paletteColors.map((c) => renderButton2(c)));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/picker.tsx
@@ -2242,7 +2273,7 @@ var SX = {
   }
 };
 function Picker({ value, onChange }) {
-  return /* @__PURE__ */ React72.createElement(Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React72.createElement(HexColorPicker, { color: value, onChange }), /* @__PURE__ */ React72.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React72.createElement(Box, { pt: 1 }, /* @__PURE__ */ React72.createElement(HexColorInput, { prefixed: true, color: value, onChange })));
+  return /* @__PURE__ */ React60.createElement(Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React60.createElement(HexColorPicker, { color: value, onChange }), /* @__PURE__ */ React60.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React60.createElement(Box, { pt: 1 }, /* @__PURE__ */ React60.createElement(HexColorInput, { prefixed: true, color: value, onChange })));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/base-color-input.tsx
@@ -2267,7 +2298,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
     if (typeof value !== "string" || value.trim().length === 0) {
       return null;
     }
-    return /* @__PURE__ */ React72.createElement(
+    return /* @__PURE__ */ React60.createElement(
       ButtonBase,
       {
         onClick: () => {
@@ -2275,16 +2306,16 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
           onChange(null);
         }
       },
-      /* @__PURE__ */ React72.createElement(CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
+      /* @__PURE__ */ React60.createElement(CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
     );
   };
   const renderOpenButton = () => {
     if (value) {
-      return /* @__PURE__ */ React72.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
+      return /* @__PURE__ */ React60.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
     }
-    return /* @__PURE__ */ React72.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React72.createElement(AddOutlined, { fontSize: "small" }));
+    return /* @__PURE__ */ React60.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React60.createElement(AddOutlined, { fontSize: "small" }));
   };
-  return /* @__PURE__ */ React72.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React72.createElement(InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React72.createElement(Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React60.createElement(InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React60.createElement(Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React60.createElement(
     Menu,
     {
       anchorEl,
@@ -2294,7 +2325,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
         sx: { height: "auto", padding: 0 }
       }
     },
-    /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React60.createElement(
       Picker,
       {
         value: value || "",
@@ -2309,10 +2340,10 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/index.tsx
 function ColorInput2(props) {
-  return /* @__PURE__ */ React72.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
+  return /* @__PURE__ */ React60.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
 }
 function NullableColorInput(props) {
-  return /* @__PURE__ */ React72.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
+  return /* @__PURE__ */ React60.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
 }
 
 // src/editor/blocks/helpers/font-family.ts
@@ -2365,13 +2396,13 @@ var FONT_FAMILIES = [
 ];
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/font-family.tsx
-var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React72.createElement(MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
+var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React60.createElement(MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
 function NullableFontFamily({ label, onChange, defaultValue }) {
   const [value, setValue] = useState(defaultValue != null ? defaultValue : "inherit");
   useEffect(() => {
     setValue(defaultValue != null ? defaultValue : "inherit");
   }, [defaultValue]);
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(
     TextField,
     {
       select: true,
@@ -2384,7 +2415,7 @@ function NullableFontFamily({ label, onChange, defaultValue }) {
         onChange(v === null ? null : v);
       }
     },
-    /* @__PURE__ */ React72.createElement(MenuItem, { value: "inherit" }, "Match email settings"),
+    /* @__PURE__ */ React60.createElement(MenuItem, { value: "inherit" }, "Match email settings"),
     OPTIONS
   );
 }
@@ -2397,10 +2428,10 @@ function FontSizeInput({ label, defaultValue, onChange }) {
     setValue(value2);
     onChange(value2);
   };
-  return /* @__PURE__ */ React72.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React72.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React60.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React60.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React72.createElement(TextFieldsOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React60.createElement(TextFieldsOutlined, { sx: { fontSize: 16 } }),
       value,
       setValue: handleChange,
       units: "px",
@@ -2415,7 +2446,7 @@ function FontWeightInput({ label, defaultValue, onChange }) {
   useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(
     RadioGroupInput,
     {
       label,
@@ -2425,8 +2456,8 @@ function FontWeightInput({ label, defaultValue, onChange }) {
         onChange(fontWeight);
       }
     },
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "normal" }, "Regular"),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "bold" }, "Bold")
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "normal" }, "Regular"),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "bold" }, "Bold")
   );
 }
 function PaddingInput({ label, defaultValue, onChange }) {
@@ -2448,10 +2479,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
     setValue(v);
     onChange(v);
   }
-  return /* @__PURE__ */ React72.createElement(Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React72.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React60.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React60.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React72.createElement(AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React60.createElement(AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
       value: value.top,
       setValue: (num) => handleChange("top", num),
       units: "px",
@@ -2460,10 +2491,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
       max: 80,
       marks: true
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React72.createElement(AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React60.createElement(AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
       value: value.bottom,
       setValue: (num) => handleChange("bottom", num),
       units: "px",
@@ -2472,10 +2503,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
       max: 80,
       marks: true
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React72.createElement(AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React60.createElement(AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
       value: value.left,
       setValue: (num) => handleChange("left", num),
       units: "px",
@@ -2484,10 +2515,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
       max: 80,
       marks: true
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React72.createElement(AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React60.createElement(AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
       value: value.right,
       setValue: (num) => handleChange("right", num),
       units: "px",
@@ -2503,7 +2534,7 @@ function TextAlignInput({ label, defaultValue, onChange }) {
   useEffect(() => {
     setValue(defaultValue != null ? defaultValue : "left");
   }, [defaultValue]);
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(
     RadioGroupInput,
     {
       label,
@@ -2513,9 +2544,9 @@ function TextAlignInput({ label, defaultValue, onChange }) {
         onChange(value2);
       }
     },
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "left" }, /* @__PURE__ */ React72.createElement(FormatAlignLeftOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "center" }, /* @__PURE__ */ React72.createElement(FormatAlignCenterOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "right" }, /* @__PURE__ */ React72.createElement(FormatAlignRightOutlined, { fontSize: "small" }))
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "left" }, /* @__PURE__ */ React60.createElement(FormatAlignLeftOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "center" }, /* @__PURE__ */ React60.createElement(FormatAlignCenterOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "right" }, /* @__PURE__ */ React60.createElement(FormatAlignRightOutlined, { fontSize: "small" }))
   );
 }
 
@@ -2528,14 +2559,14 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
   };
   switch (name) {
     case "backgroundColor":
-      return /* @__PURE__ */ React72.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React60.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
     case "borderColor":
-      return /* @__PURE__ */ React72.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React60.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
     case "borderRadius":
-      return /* @__PURE__ */ React72.createElement(
+      return /* @__PURE__ */ React60.createElement(
         SliderInput,
         {
-          iconLabel: /* @__PURE__ */ React72.createElement(RoundedCornerOutlined, null),
+          iconLabel: /* @__PURE__ */ React60.createElement(RoundedCornerOutlined, null),
           units: "px",
           step: 4,
           marks: true,
@@ -2547,23 +2578,23 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
         }
       );
     case "color":
-      return /* @__PURE__ */ React72.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React60.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
     case "fontFamily":
-      return /* @__PURE__ */ React72.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React60.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
     case "fontSize":
-      return /* @__PURE__ */ React72.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React60.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
     case "fontWeight":
-      return /* @__PURE__ */ React72.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React60.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
     case "textAlign":
-      return /* @__PURE__ */ React72.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React60.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
     case "padding":
-      return /* @__PURE__ */ React72.createElement(PaddingInput, { label: "Padding", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React60.createElement(PaddingInput, { label: "Padding", defaultValue, onChange: handleChange });
   }
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/style-inputs/multi-style-property-panel.tsx
 function MultiStylePropertyPanel({ names, value, onChange }) {
-  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, names.map((name) => /* @__PURE__ */ React72.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
+  return /* @__PURE__ */ React60.createElement(React60.Fragment, null, names.map((name) => /* @__PURE__ */ React60.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/avatar-sidebar-panel.tsx
@@ -2583,11 +2614,11 @@ function AvatarSidebarPanel({ data, setData }) {
   const imageUrl = (_d = (_c = data.props) == null ? void 0 : _c.imageUrl) != null ? _d : AvatarPropsDefaults.imageUrl;
   const alt = (_f = (_e = data.props) == null ? void 0 : _e.alt) != null ? _f : AvatarPropsDefaults.alt;
   const shape = (_h = (_g = data.props) == null ? void 0 : _g.shape) != null ? _h : AvatarPropsDefaults.shape;
-  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React60.createElement(
     SliderInput,
     {
       label: "Size",
-      iconLabel: /* @__PURE__ */ React72.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React60.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 3,
       min: 32,
@@ -2597,7 +2628,7 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }));
       }
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     RadioGroupInput,
     {
       label: "Shape",
@@ -2606,10 +2637,10 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { shape: shape2 }) }));
       }
     },
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "circle" }, "Circle"),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "square" }, "Square"),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "rounded" }, "Rounded")
-  ), /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "circle" }, "Circle"),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "square" }, "Square"),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "rounded" }, "Rounded")
+  ), /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Image URL",
@@ -2618,7 +2649,7 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }));
       }
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Alt text",
@@ -2627,7 +2658,7 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt: alt2 }) }));
       }
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     MultiStylePropertyPanel,
     {
       names: ["textAlign", "padding"],
@@ -2655,65 +2686,65 @@ function ButtonSidebarPanel({ data, setData }) {
   const buttonStyle = (_j = (_i = data.props) == null ? void 0 : _i.buttonStyle) != null ? _j : ButtonPropsDefaults.buttonStyle;
   const buttonTextColor = (_l = (_k = data.props) == null ? void 0 : _k.buttonTextColor) != null ? _l : ButtonPropsDefaults.buttonTextColor;
   const buttonBackgroundColor = (_n = (_m = data.props) == null ? void 0 : _m.buttonBackgroundColor) != null ? _n : ButtonPropsDefaults.buttonBackgroundColor;
-  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Text",
       defaultValue: text,
       onChange: (text2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text: text2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Url",
       defaultValue: url,
       onChange: (url2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: url2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     RadioGroupInput,
     {
       label: "Width",
       defaultValue: fullWidth ? "FULL_WIDTH" : "AUTO",
       onChange: (v) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fullWidth: v === "FULL_WIDTH" }) }))
     },
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "FULL_WIDTH" }, "Full"),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "AUTO" }, "Auto")
-  ), /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "FULL_WIDTH" }, "Full"),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "AUTO" }, "Auto")
+  ), /* @__PURE__ */ React60.createElement(
     RadioGroupInput,
     {
       label: "Size",
       defaultValue: size,
       onChange: (size2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }))
     },
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "x-small" }, "Xs"),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "small" }, "Sm"),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "medium" }, "Md"),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "large" }, "Lg")
-  ), /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "x-small" }, "Xs"),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "small" }, "Sm"),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "medium" }, "Md"),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "large" }, "Lg")
+  ), /* @__PURE__ */ React60.createElement(
     RadioGroupInput,
     {
       label: "Style",
       defaultValue: buttonStyle,
       onChange: (buttonStyle2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonStyle: buttonStyle2 }) }))
     },
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "rectangle" }, "Rectangle"),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "rounded" }, "Rounded"),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "pill" }, "Pill")
-  ), /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "rectangle" }, "Rectangle"),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "rounded" }, "Rounded"),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "pill" }, "Pill")
+  ), /* @__PURE__ */ React60.createElement(
     ColorInput2,
     {
       label: "Text color",
       defaultValue: buttonTextColor,
       onChange: (buttonTextColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonTextColor: buttonTextColor2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     ColorInput2,
     {
       label: "Button color",
       defaultValue: buttonBackgroundColor,
       onChange: (buttonBackgroundColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonBackgroundColor: buttonBackgroundColor2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
@@ -2739,7 +2770,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
     const value = parseInt(ev.target.value);
     onChange(isNaN(value) ? null : value);
   };
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(
     TextField,
     {
       fullWidth: true,
@@ -2750,7 +2781,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
       placeholder: "auto",
       size: "small",
       InputProps: {
-        endAdornment: /* @__PURE__ */ React72.createElement(Typography, { variant: "body2", color: "text.secondary" }, "px")
+        endAdornment: /* @__PURE__ */ React60.createElement(Typography, { variant: "body2", color: "text.secondary" }, "px")
       }
     }
   );
@@ -2772,7 +2803,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
   };
   let column3 = null;
   {
-    column3 = /* @__PURE__ */ React72.createElement(
+    column3 = /* @__PURE__ */ React60.createElement(
       TextDimensionInput,
       {
         label: "Column 3",
@@ -2783,7 +2814,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
       }
     );
   }
-  return /* @__PURE__ */ React72.createElement(Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React60.createElement(
     TextDimensionInput,
     {
       label: "Column 1",
@@ -2792,7 +2823,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
         setIndexValue(0, v);
       }
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     TextDimensionInput,
     {
       label: "Column 2",
@@ -2817,7 +2848,7 @@ function ColumnsContainerPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React60.createElement(
     RadioGroupInput,
     {
       label: "Number of columns",
@@ -2826,9 +2857,9 @@ function ColumnsContainerPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsCount: v === "2" ? 2 : 3 }) }));
       }
     },
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "2" }, "2"),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "3" }, "3")
-  ), /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "2" }, "2"),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "3" }, "3")
+  ), /* @__PURE__ */ React60.createElement(
     ColumnWidthsInput,
     {
       defaultValue: (_b = data.props) == null ? void 0 : _b.fixedWidths,
@@ -2836,11 +2867,11 @@ function ColumnsContainerPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fixedWidths }) }));
       }
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     SliderInput,
     {
       label: "Columns gap",
-      iconLabel: /* @__PURE__ */ React72.createElement(SpaceBarOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React60.createElement(SpaceBarOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 4,
       marks: true,
@@ -2849,7 +2880,7 @@ function ColumnsContainerPanel({ data, setData }) {
       defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.columnsGap) != null ? _d : 0,
       onChange: (columnsGap) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsGap }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     RadioGroupInput,
     {
       label: "Alignment",
@@ -2858,10 +2889,10 @@ function ColumnsContainerPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }));
       }
     },
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React72.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React72.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React72.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
-  ), /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React60.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React60.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React60.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
+  ), /* @__PURE__ */ React60.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "padding"],
@@ -2890,7 +2921,7 @@ function ContainerSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React60.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "borderColor", "borderRadius", "padding"],
@@ -2913,18 +2944,18 @@ function DividerSidebarPanel({ data, setData }) {
   };
   const lineColor = (_b = (_a = data.props) == null ? void 0 : _a.lineColor) != null ? _b : DividerPropsDefaults.lineColor;
   const lineHeight = (_d = (_c = data.props) == null ? void 0 : _c.lineHeight) != null ? _d : DividerPropsDefaults.lineHeight;
-  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React60.createElement(
     ColorInput2,
     {
       label: "Color",
       defaultValue: lineColor,
       onChange: (lineColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineColor: lineColor2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     SliderInput,
     {
       label: "Height",
-      iconLabel: /* @__PURE__ */ React72.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React60.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 1,
       min: 1,
@@ -2932,7 +2963,7 @@ function DividerSidebarPanel({ data, setData }) {
       defaultValue: lineHeight,
       onChange: (lineHeight2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineHeight: lineHeight2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "padding"],
@@ -2953,6 +2984,10 @@ var FONT_FAMILY_SCHEMA7 = z.enum([
   "BOOK_SERIF",
   "MONOSPACE"
 ]).nullable().optional();
+var TemplateVariableSchema2 = z.object({
+  name: z.string(),
+  description: z.string().optional().nullable()
+});
 var EmailLayoutPropsSchema2 = z.object({
   backdropColor: COLOR_SCHEMA10,
   backdropDisabled: z.boolean().optional().nullable(),
@@ -2961,7 +2996,9 @@ var EmailLayoutPropsSchema2 = z.object({
   canvasColor: COLOR_SCHEMA10,
   textColor: COLOR_SCHEMA10,
   fontFamily: FONT_FAMILY_SCHEMA7,
-  childrenIds: z.array(z.string()).optional().nullable()
+  childrenIds: z.array(z.string()).optional().nullable(),
+  subject: z.string().optional().nullable(),
+  variables: z.array(TemplateVariableSchema2).optional().nullable()
 });
 var email_layout_props_schema_default = EmailLayoutPropsSchema2;
 function BooleanInput({ label, defaultValue, onChange }) {
@@ -2969,11 +3006,11 @@ function BooleanInput({ label, defaultValue, onChange }) {
   useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(
     FormControlLabel,
     {
       label,
-      control: /* @__PURE__ */ React72.createElement(
+      control: /* @__PURE__ */ React60.createElement(
         Switch,
         {
           checked: value,
@@ -3001,38 +3038,38 @@ function EmailLayoutSidebarFields({ data, setData }) {
     }
   };
   const backdropDisabled = (_a = data.backdropDisabled) != null ? _a : false;
-  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React60.createElement(
     BooleanInput,
     {
       label: "Disable backdrop",
       defaultValue: backdropDisabled,
       onChange: (backdropDisabled2) => updateData(__spreadProps(__spreadValues({}, data), { backdropDisabled: backdropDisabled2 }))
     }
-  ), !backdropDisabled && /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
+  ), !backdropDisabled && /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(
     ColorInput2,
     {
       label: "Backdrop color",
       defaultValue: (_b = data.backdropColor) != null ? _b : "#F5F5F5",
       onChange: (backdropColor) => updateData(__spreadProps(__spreadValues({}, data), { backdropColor }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     ColorInput2,
     {
       label: "Canvas color",
       defaultValue: (_c = data.canvasColor) != null ? _c : "#FFFFFF",
       onChange: (canvasColor) => updateData(__spreadProps(__spreadValues({}, data), { canvasColor }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     NullableColorInput,
     {
       label: "Canvas border color",
       defaultValue: (_d = data.borderColor) != null ? _d : null,
       onChange: (borderColor) => updateData(__spreadProps(__spreadValues({}, data), { borderColor }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     SliderInput,
     {
-      iconLabel: /* @__PURE__ */ React72.createElement(RoundedCornerOutlined, null),
+      iconLabel: /* @__PURE__ */ React60.createElement(RoundedCornerOutlined, null),
       units: "px",
       step: 4,
       marks: true,
@@ -3042,14 +3079,14 @@ function EmailLayoutSidebarFields({ data, setData }) {
       defaultValue: (_e = data.borderRadius) != null ? _e : 0,
       onChange: (borderRadius) => updateData(__spreadProps(__spreadValues({}, data), { borderRadius }))
     }
-  )), /* @__PURE__ */ React72.createElement(
+  )), /* @__PURE__ */ React60.createElement(
     NullableFontFamily,
     {
       label: "Font family",
       defaultValue: "MODERN_SANS",
       onChange: (fontFamily) => updateData(__spreadProps(__spreadValues({}, data), { fontFamily }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     ColorInput2,
     {
       label: "Text color",
@@ -3070,7 +3107,7 @@ function HeadingSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Content",
@@ -3080,7 +3117,7 @@ function HeadingSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }));
       }
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     RadioGroupInput,
     {
       label: "Level",
@@ -3089,10 +3126,10 @@ function HeadingSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { level }) }));
       }
     },
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "h1" }, "H1"),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "h2" }, "H2"),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "h3" }, "H3")
-  ), /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "h1" }, "H1"),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "h2" }, "H2"),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "h3" }, "H3")
+  ), /* @__PURE__ */ React60.createElement(
     MultiStylePropertyPanel,
     {
       names: ["color", "backgroundColor", "fontFamily", "fontWeight", "textAlign", "padding"],
@@ -3113,7 +3150,7 @@ function HtmlSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Content",
@@ -3121,7 +3158,7 @@ function HtmlSidebarPanel({ data, setData }) {
       defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.contents) != null ? _b : "",
       onChange: (contents) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contents }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     MultiStylePropertyPanel,
     {
       names: ["color", "backgroundColor", "fontFamily", "fontSize", "textAlign", "padding"],
@@ -3142,7 +3179,7 @@ function ImageSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Image block" }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(BaseSidebarPanel, { title: "Image block" }, /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Source URL",
@@ -3152,14 +3189,14 @@ function ImageSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url }) }));
       }
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Alt text",
       defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.alt) != null ? _d : "",
       onChange: (alt) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Click through URL",
@@ -3169,31 +3206,31 @@ function ImageSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkHref }) }));
       }
     }
-  ), /* @__PURE__ */ React72.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React60.createElement(
     TextDimensionInput,
     {
       label: "Width",
       defaultValue: (_g = data.props) == null ? void 0 : _g.width,
       onChange: (width) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { width }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     TextDimensionInput,
     {
       label: "Height",
       defaultValue: (_h = data.props) == null ? void 0 : _h.height,
       onChange: (height) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { height }) }))
     }
-  )), /* @__PURE__ */ React72.createElement(
+  )), /* @__PURE__ */ React60.createElement(
     RadioGroupInput,
     {
       label: "Alignment",
       defaultValue: (_j = (_i = data.props) == null ? void 0 : _i.contentAlignment) != null ? _j : "middle",
       onChange: (contentAlignment) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }))
     },
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React72.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React72.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React72.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
-  ), /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React60.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React60.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React60.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
+  ), /* @__PURE__ */ React60.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "textAlign", "padding"],
@@ -3229,74 +3266,74 @@ function SignatureSidebarPanel({ data, setData }) {
   const nameColor = (_z = (_y = data.props) == null ? void 0 : _y.nameColor) != null ? _z : SignaturePropsDefaults.nameColor;
   const textColor = (_B = (_A = data.props) == null ? void 0 : _A.textColor) != null ? _B : SignaturePropsDefaults.textColor;
   const linkColor = (_D = (_C = data.props) == null ? void 0 : _C.linkColor) != null ? _D : SignaturePropsDefaults.linkColor;
-  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Signature block" }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(BaseSidebarPanel, { title: "Signature block" }, /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Greeting",
       defaultValue: greeting,
       onChange: (greeting2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { greeting: greeting2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Name",
       defaultValue: name,
       onChange: (name2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { name: name2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Title",
       defaultValue: title,
       onChange: (title2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { title: title2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Company",
       defaultValue: company,
       onChange: (company2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { company: company2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Address",
       defaultValue: address,
       onChange: (address2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { address: address2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Email",
       defaultValue: email,
       onChange: (email2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { email: email2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Phone",
       defaultValue: phone,
       onChange: (phone2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { phone: phone2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Website",
       defaultValue: website,
       onChange: (website2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { website: website2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Image URL",
       defaultValue: imageUrl,
       onChange: (imageUrl2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     SliderInput,
     {
       label: "Image size",
-      iconLabel: /* @__PURE__ */ React72.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React60.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 4,
       min: 32,
@@ -3304,47 +3341,47 @@ function SignatureSidebarPanel({ data, setData }) {
       defaultValue: imageSize,
       onChange: (imageSize2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageSize: imageSize2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     RadioGroupInput,
     {
       label: "Image shape",
       defaultValue: imageShape,
       onChange: (imageShape2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageShape: imageShape2 }) }))
     },
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "circle" }, "Circle"),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "square" }, "Square"),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "rounded" }, "Rounded")
-  ), /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "circle" }, "Circle"),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "square" }, "Square"),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "rounded" }, "Rounded")
+  ), /* @__PURE__ */ React60.createElement(
     RadioGroupInput,
     {
       label: "Layout",
       defaultValue: layout,
       onChange: (layout2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { layout: layout2 }) }))
     },
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "horizontal" }, "Horizontal"),
-    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "vertical" }, "Vertical")
-  ), /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "horizontal" }, "Horizontal"),
+    /* @__PURE__ */ React60.createElement(ToggleButton, { value: "vertical" }, "Vertical")
+  ), /* @__PURE__ */ React60.createElement(
     ColorInput2,
     {
       label: "Name color",
       defaultValue: nameColor,
       onChange: (nameColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { nameColor: nameColor2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     ColorInput2,
     {
       label: "Text color",
       defaultValue: textColor,
       onChange: (textColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { textColor: textColor2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     ColorInput2,
     {
       label: "Link color",
       defaultValue: linkColor,
       onChange: (linkColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkColor: linkColor2 }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "fontFamily", "padding"],
@@ -3365,11 +3402,11 @@ function SpacerSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React60.createElement(
     SliderInput,
     {
       label: "Height",
-      iconLabel: /* @__PURE__ */ React72.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React60.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 4,
       min: 4,
@@ -3391,7 +3428,7 @@ function TextSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React60.createElement(
     TextInput,
     {
       label: "Content",
@@ -3399,14 +3436,14 @@ function TextSidebarPanel({ data, setData }) {
       defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.text) != null ? _b : "",
       onChange: (text) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     BooleanInput,
     {
       label: "Markdown",
       defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.markdown) != null ? _d : false,
       onChange: (markdown) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { markdown }) }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     MultiStylePropertyPanel,
     {
       names: ["color", "backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
@@ -3418,7 +3455,7 @@ function TextSidebarPanel({ data, setData }) {
 
 // src/app/inspector-drawer/configuration-panel/index.tsx
 function renderMessage(val) {
-  return /* @__PURE__ */ React72.createElement(Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React72.createElement(Typography, { color: "text.secondary" }, val));
+  return /* @__PURE__ */ React60.createElement(Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React60.createElement(Typography, { color: "text.secondary" }, val));
 }
 function ConfigurationPanel() {
   const document2 = useDocument();
@@ -3434,55 +3471,55 @@ function ConfigurationPanel() {
   const { data, type } = block;
   switch (type) {
     case "Avatar":
-      return /* @__PURE__ */ React72.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Button":
-      return /* @__PURE__ */ React72.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "ColumnsContainer":
-      return /* @__PURE__ */ React72.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Container":
-      return /* @__PURE__ */ React72.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Divider":
-      return /* @__PURE__ */ React72.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Heading":
-      return /* @__PURE__ */ React72.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Html":
-      return /* @__PURE__ */ React72.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Image":
-      return /* @__PURE__ */ React72.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "EmailLayout":
-      return /* @__PURE__ */ React72.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Spacer":
-      return /* @__PURE__ */ React72.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Signature":
-      return /* @__PURE__ */ React72.createElement(SignatureSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60.createElement(SignatureSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Text":
-      return /* @__PURE__ */ React72.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     default:
-      return /* @__PURE__ */ React72.createElement("pre", null, JSON.stringify(block, null, "  "));
+      return /* @__PURE__ */ React60.createElement("pre", null, JSON.stringify(block, null, "  "));
   }
 }
 function StylesPanel() {
   const block = useDocument().root;
   if (!block) {
-    return /* @__PURE__ */ React72.createElement("p", null, "Block not found");
+    return /* @__PURE__ */ React60.createElement("p", null, "Block not found");
   }
   const { data, type } = block;
   if (type !== "EmailLayout") {
     throw new Error('Expected "root" element to be of type EmailLayout');
   }
-  return /* @__PURE__ */ React72.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
+  return /* @__PURE__ */ React60.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
 }
 function TemplateDownloadButton() {
   const doc = useDocument();
   const href = useMemo(() => {
     return `data:text/plain,${encodeURIComponent(JSON.stringify(doc, null, "  "))}`;
   }, [doc]);
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(
     Button$1,
     {
       variant: "outlined",
       color: "primary",
-      startIcon: /* @__PURE__ */ React72.createElement(FileDownloadOutlined, null),
+      startIcon: /* @__PURE__ */ React60.createElement(FileDownloadOutlined, null),
       href,
       download: "emailTemplate.json",
       fullWidth: true
@@ -3514,9 +3551,9 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
     }
   };
   if (!currentTemplateId) {
-    return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected");
+    return /* @__PURE__ */ React60.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected");
   }
-  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React72.createElement(Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React60.createElement(Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React60.createElement(
     Typography,
     {
       variant: "body2",
@@ -3529,29 +3566,110 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
       }
     },
     "Save functionality is disabled. To enable saving, provide the necessary callback functions."
-  ), persistenceEnabled && /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
+  ), persistenceEnabled && /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(
     Button$1,
     {
       variant: "outlined",
       color: "primary",
-      startIcon: /* @__PURE__ */ React72.createElement(ContentCopyOutlined, null),
+      startIcon: /* @__PURE__ */ React60.createElement(ContentCopyOutlined, null),
       onClick: handleCopyToSamples,
       fullWidth: true,
       disabled: !copyTemplate
     },
     "Save as Sample Template"
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     Button$1,
     {
       variant: "outlined",
       color: "error",
-      startIcon: /* @__PURE__ */ React72.createElement(DeleteOutlined, null),
+      startIcon: /* @__PURE__ */ React60.createElement(DeleteOutlined, null),
       onClick: handleDelete,
       fullWidth: true,
       disabled: !deleteTemplate
     },
     "Delete Template"
-  )))), persistenceEnabled && /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React72.createElement(Stack, { spacing: 2 }, /* @__PURE__ */ React72.createElement(TemplateDownloadButton, null))));
+  )))), persistenceEnabled && /* @__PURE__ */ React60.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React60.createElement(Stack, { spacing: 2 }, /* @__PURE__ */ React60.createElement(TemplateDownloadButton, null))));
+}
+var VARIABLE_NAME_RE = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+function validateName(name, index, all) {
+  if (!name.trim()) return "Name is required";
+  if (!VARIABLE_NAME_RE.test(name)) return "Use letters, digits, underscore; start with a letter or underscore";
+  const duplicate = all.some((v, i) => i !== index && v.name === name);
+  if (duplicate) return "Already declared";
+  return null;
+}
+function VariablesPanel() {
+  var _a;
+  const document2 = useDocument();
+  const root = document2.root;
+  if (!root || root.type !== "EmailLayout") {
+    return /* @__PURE__ */ React60.createElement(Box, { p: 2 }, /* @__PURE__ */ React60.createElement(Alert, { severity: "info" }, "Open a template to manage variables."));
+  }
+  const data = root.data;
+  const variables = ((_a = data.variables) != null ? _a : []).map((v) => {
+    var _a2;
+    return {
+      name: v.name,
+      description: (_a2 = v.description) != null ? _a2 : ""
+    };
+  });
+  const commit = (next) => {
+    setDocument({
+      root: __spreadProps(__spreadValues({}, root), {
+        data: __spreadProps(__spreadValues({}, data), {
+          variables: next.map((v) => ({
+            name: v.name,
+            description: v.description ? v.description : void 0
+          }))
+        })
+      })
+    });
+  };
+  const updateAt = (index, patch) => {
+    const next = variables.map((v, i) => i === index ? __spreadValues(__spreadValues({}, v), patch) : v);
+    commit(next);
+  };
+  const add = () => {
+    commit([...variables, { name: "", description: "" }]);
+  };
+  const removeAt = (index) => {
+    commit(variables.filter((_, i) => i !== index));
+  };
+  return /* @__PURE__ */ React60.createElement(Box, { p: 2 }, /* @__PURE__ */ React60.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { mb: 1 } }, /* @__PURE__ */ React60.createElement(Typography, { variant: "subtitle1", sx: { fontWeight: 600 } }, "Variables"), /* @__PURE__ */ React60.createElement(Tooltip, { title: "Add variable" }, /* @__PURE__ */ React60.createElement(IconButton, { size: "small", onClick: add, "aria-label": "Add variable" }, /* @__PURE__ */ React60.createElement(AddOutlined, { fontSize: "small" })))), /* @__PURE__ */ React60.createElement(Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mb: 2 } }, "Declared variables travel with the template. Reference them in subject and body as", " ", /* @__PURE__ */ React60.createElement(Box, { component: "code", sx: { fontFamily: "monospace" } }, "{{name}}"), "."), variables.length === 0 ? /* @__PURE__ */ React60.createElement(Typography, { variant: "body2", sx: { color: "text.secondary" } }, "No variables declared. Click + to add one.") : /* @__PURE__ */ React60.createElement(Stack, { spacing: 2 }, variables.map((v, i) => {
+    var _a2;
+    const nameError = validateName(v.name, i, variables);
+    return /* @__PURE__ */ React60.createElement(Stack, { key: i, spacing: 0.75, sx: { pb: 1, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React60.createElement(Stack, { direction: "row", spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React60.createElement(
+      TextField,
+      {
+        label: "Name",
+        size: "small",
+        fullWidth: true,
+        value: v.name,
+        onChange: (e) => updateAt(i, { name: e.target.value }),
+        error: Boolean(nameError),
+        helperText: nameError != null ? nameError : " "
+      }
+    ), /* @__PURE__ */ React60.createElement(Tooltip, { title: "Remove" }, /* @__PURE__ */ React60.createElement(
+      IconButton,
+      {
+        size: "small",
+        onClick: () => removeAt(i),
+        "aria-label": `Remove ${v.name || "variable"}`,
+        sx: { mt: 0.5 }
+      },
+      /* @__PURE__ */ React60.createElement(DeleteOutline, { fontSize: "small" })
+    ))), /* @__PURE__ */ React60.createElement(
+      TextField,
+      {
+        label: "Description",
+        size: "small",
+        fullWidth: true,
+        value: (_a2 = v.description) != null ? _a2 : "",
+        onChange: (e) => updateAt(i, { description: e.target.value }),
+        placeholder: "Optional"
+      }
+    ));
+  })));
 }
 
 // src/app/inspector-drawer/index.tsx
@@ -3568,11 +3686,13 @@ function InspectorDrawer({
   const renderCurrentSidebarPanel = () => {
     switch (selectedSidebarTab) {
       case "block-configuration":
-        return /* @__PURE__ */ React72.createElement(ConfigurationPanel, null);
+        return /* @__PURE__ */ React60.createElement(ConfigurationPanel, null);
       case "styles":
-        return /* @__PURE__ */ React72.createElement(StylesPanel, null);
+        return /* @__PURE__ */ React60.createElement(StylesPanel, null);
+      case "variables":
+        return /* @__PURE__ */ React60.createElement(VariablesPanel, null);
       case "template-settings":
-        return /* @__PURE__ */ React72.createElement(
+        return /* @__PURE__ */ React60.createElement(
           TemplatePanel,
           {
             deleteTemplate,
@@ -3581,7 +3701,7 @@ function InspectorDrawer({
         );
     }
   };
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(
     Drawer,
     {
       variant: "persistent",
@@ -3603,30 +3723,437 @@ function InspectorDrawer({
         width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0
       }
     },
-    /* @__PURE__ */ React72.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React72.createElement(Box, { px: 2 }, /* @__PURE__ */ React72.createElement(Tabs, { value: selectedSidebarTab, onChange: (_, v) => setSidebarTab(v) }, /* @__PURE__ */ React72.createElement(Tab, { value: "styles", label: "Styles" }), /* @__PURE__ */ React72.createElement(Tab, { value: "block-configuration", label: "Inspect" }), /* @__PURE__ */ React72.createElement(Tab, { value: "template-settings", label: "Settings" })))),
-    /* @__PURE__ */ React72.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
+    /* @__PURE__ */ React60.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React60.createElement(Box, { px: 1 }, /* @__PURE__ */ React60.createElement(
+      Tabs,
+      {
+        value: selectedSidebarTab,
+        onChange: (_, v) => setSidebarTab(v),
+        variant: "fullWidth",
+        sx: { "& .MuiTab-root": { minWidth: 0, px: 1, fontSize: 13 } }
+      },
+      /* @__PURE__ */ React60.createElement(Tab, { value: "styles", label: "Styles" }),
+      /* @__PURE__ */ React60.createElement(Tab, { value: "block-configuration", label: "Inspect" }),
+      /* @__PURE__ */ React60.createElement(Tab, { value: "variables", label: "Variables" }),
+      /* @__PURE__ */ React60.createElement(Tab, { value: "template-settings", label: "Settings" })
+    ))),
+    /* @__PURE__ */ React60.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
   );
 }
-function SidebarButton({
-  templateId,
-  children,
+var SnackbarContext = createContext(null);
+function useSnackbar() {
+  const context = useContext(SnackbarContext);
+  if (!context) {
+    throw new Error("useSnackbar must be used within a SnackbarProvider");
+  }
+  return context;
+}
+function SnackbarProvider({ children }) {
+  const [message, setMessage] = useState(null);
+  const [duration, setDuration] = useState(3e3);
+  const showMessage = (text, customDuration = 3e3) => {
+    setMessage(text);
+    setDuration(customDuration);
+  };
+  const handleClose = () => {
+    setMessage(null);
+  };
+  return /* @__PURE__ */ React60.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React60.createElement(
+    Snackbar,
+    {
+      anchorOrigin: { vertical: "top", horizontal: "center" },
+      open: message !== null,
+      onClose: handleClose,
+      message,
+      autoHideDuration: duration,
+      sx: {
+        zIndex: 1e4,
+        // Very high z-index
+        position: "fixed"
+        // Make sure it's fixed positioned
+      }
+    }
+  ));
+}
+function relativeTime(iso) {
+  if (!iso) return null;
+  const date = new Date(iso).getTime();
+  if (Number.isNaN(date)) return null;
+  const diffMs = Date.now() - date;
+  const diffSec = Math.round(diffMs / 1e3);
+  if (diffSec < 60) return "just now";
+  const diffMin = Math.round(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.round(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  const diffDay = Math.round(diffHr / 24);
+  if (diffDay < 30) return `${diffDay}d ago`;
+  const diffMo = Math.round(diffDay / 30);
+  if (diffMo < 12) return `${diffMo}mo ago`;
+  const diffYr = Math.round(diffMo / 12);
+  return `${diffYr}y ago`;
+}
+function TemplateRow({
+  template,
+  isCurrent,
   templateLoader,
-  sx: sx2
+  onDuplicate,
+  onRename,
+  onDelete,
+  onPromote,
+  onDemote,
+  onDuplicateAsTemplate
 }) {
   const { setCurrentTemplate } = useEmailEditor();
-  const handleClick = (e) => __async(null, null, function* () {
-    e.preventDefault();
+  const [hover, setHover] = useState(false);
+  const handleClick = () => __async(null, null, function* () {
     try {
-      const template = yield templateLoader();
-      if (template) {
-        resetDocument(template);
-        setCurrentTemplate(templateId, null);
+      const content = yield templateLoader();
+      if (content) {
+        resetDocument(content);
+        setCurrentTemplate(template.id, template.slug, template.kind);
       }
     } catch (error) {
       console.error("Error loading template:", error);
     }
   });
-  return /* @__PURE__ */ React72.createElement(Button$1, { size: "small", onClick: handleClick, sx: sx2 }, children);
+  const stop = (e) => {
+    e.stopPropagation();
+  };
+  const updated = relativeTime(template.updatedAt);
+  const hasActions = Boolean(
+    onDuplicate || onRename || onDelete || onPromote || onDemote || onDuplicateAsTemplate
+  );
+  return /* @__PURE__ */ React60.createElement(
+    Box,
+    {
+      role: "button",
+      tabIndex: 0,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      sx: {
+        position: "relative",
+        width: "100%",
+        px: 1.5,
+        py: 1,
+        borderRadius: 1,
+        cursor: "pointer",
+        bgcolor: isCurrent ? "rgba(0, 0, 0, 0.08)" : "transparent",
+        "&:hover": { bgcolor: "rgba(0, 0, 0, 0.04)" },
+        "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main" }
+      }
+    },
+    /* @__PURE__ */ React60.createElement(Stack, { direction: "row", alignItems: "flex-start", spacing: 1 }, /* @__PURE__ */ React60.createElement(Box, { sx: { flexGrow: 1, minWidth: 0 } }, /* @__PURE__ */ React60.createElement(Stack, { direction: "row", alignItems: "baseline", spacing: 1, sx: { minWidth: 0 } }, /* @__PURE__ */ React60.createElement(
+      Typography,
+      {
+        variant: "body2",
+        sx: {
+          fontWeight: 600,
+          flexGrow: 1,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        title: template.slug
+      },
+      template.slug
+    ), updated && /* @__PURE__ */ React60.createElement(
+      Typography,
+      {
+        variant: "caption",
+        sx: { color: "text.secondary", flexShrink: 0, fontSize: "0.7rem" }
+      },
+      updated
+    )), template.description && /* @__PURE__ */ React60.createElement(
+      Typography,
+      {
+        variant: "caption",
+        sx: {
+          color: "text.secondary",
+          display: "-webkit-box",
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: "vertical",
+          overflow: "hidden",
+          lineHeight: 1.3
+        }
+      },
+      template.description
+    ), template.tags && template.tags.length > 0 && /* @__PURE__ */ React60.createElement(Stack, { direction: "row", spacing: 0.5, sx: { mt: 0.5, flexWrap: "wrap", gap: 0.5 } }, template.tags.map((tag) => /* @__PURE__ */ React60.createElement(
+      Chip,
+      {
+        key: tag,
+        label: tag,
+        size: "small",
+        sx: { height: 18, fontSize: "0.65rem", "& .MuiChip-label": { px: 0.75 } }
+      }
+    ))))),
+    hasActions && hover && /* @__PURE__ */ React60.createElement(
+      Stack,
+      {
+        direction: "row",
+        spacing: 0.25,
+        onClick: stop,
+        sx: {
+          position: "absolute",
+          top: 4,
+          right: 4,
+          bgcolor: "background.paper",
+          borderRadius: 1,
+          boxShadow: 1,
+          p: 0.25
+        }
+      },
+      onDuplicateAsTemplate && /* @__PURE__ */ React60.createElement(Tooltip, { title: "Duplicate as template" }, /* @__PURE__ */ React60.createElement(
+        IconButton,
+        {
+          size: "small",
+          onClick: (e) => {
+            stop(e);
+            onDuplicateAsTemplate();
+          }
+        },
+        /* @__PURE__ */ React60.createElement(LibraryAddOutlined, { fontSize: "small" })
+      )),
+      onDuplicate && /* @__PURE__ */ React60.createElement(Tooltip, { title: "Duplicate" }, /* @__PURE__ */ React60.createElement(
+        IconButton,
+        {
+          size: "small",
+          onClick: (e) => {
+            stop(e);
+            onDuplicate();
+          }
+        },
+        /* @__PURE__ */ React60.createElement(ContentCopyOutlined, { fontSize: "small" })
+      )),
+      onRename && /* @__PURE__ */ React60.createElement(Tooltip, { title: "Rename" }, /* @__PURE__ */ React60.createElement(
+        IconButton,
+        {
+          size: "small",
+          onClick: (e) => {
+            stop(e);
+            onRename();
+          }
+        },
+        /* @__PURE__ */ React60.createElement(DriveFileRenameOutlineOutlined, { fontSize: "small" })
+      )),
+      onPromote && /* @__PURE__ */ React60.createElement(Tooltip, { title: "Promote to sample" }, /* @__PURE__ */ React60.createElement(
+        IconButton,
+        {
+          size: "small",
+          onClick: (e) => {
+            stop(e);
+            onPromote();
+          }
+        },
+        /* @__PURE__ */ React60.createElement(FileUploadOutlined, { fontSize: "small" })
+      )),
+      onDemote && /* @__PURE__ */ React60.createElement(Tooltip, { title: "Demote to template" }, /* @__PURE__ */ React60.createElement(
+        IconButton,
+        {
+          size: "small",
+          onClick: (e) => {
+            stop(e);
+            onDemote();
+          }
+        },
+        /* @__PURE__ */ React60.createElement(FileDownloadOutlined, { fontSize: "small" })
+      )),
+      onDelete && /* @__PURE__ */ React60.createElement(Tooltip, { title: "Delete" }, /* @__PURE__ */ React60.createElement(
+        IconButton,
+        {
+          size: "small",
+          onClick: (e) => {
+            stop(e);
+            onDelete();
+          }
+        },
+        /* @__PURE__ */ React60.createElement(DeleteOutlined, { fontSize: "small" })
+      ))
+    )
+  );
+}
+function RenameDialog({
+  open,
+  currentSlug,
+  existingSlugs,
+  onClose,
+  onSubmit
+}) {
+  const [value, setValue] = useState(currentSlug);
+  const [error, setError] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+  useEffect(() => {
+    if (open) {
+      setValue(currentSlug);
+      setError(null);
+      setSubmitting(false);
+    }
+  }, [open, currentSlug]);
+  const handleChange = (e) => {
+    setValue(e.target.value);
+    setError(null);
+  };
+  const handleSubmit = () => __async(null, null, function* () {
+    const trimmed = value.trim();
+    if (!trimmed) {
+      setError("Please enter a name");
+      return;
+    }
+    if (trimmed === currentSlug) {
+      onClose();
+      return;
+    }
+    if (existingSlugs.some((s) => s.toLowerCase() === trimmed.toLowerCase())) {
+      setError("A template with this name already exists");
+      return;
+    }
+    setSubmitting(true);
+    try {
+      yield onSubmit(trimmed);
+      onClose();
+    } catch (e) {
+      console.error("Error renaming template:", e);
+      setError("Failed to rename template");
+    } finally {
+      setSubmitting(false);
+    }
+  });
+  return /* @__PURE__ */ React60.createElement(Dialog, { open, onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React60.createElement(DialogTitle, null, "Rename template"), /* @__PURE__ */ React60.createElement(DialogContent, null, /* @__PURE__ */ React60.createElement(
+    TextField,
+    {
+      autoFocus: true,
+      margin: "dense",
+      label: "Slug",
+      fullWidth: true,
+      variant: "outlined",
+      value,
+      onChange: handleChange,
+      error: !!error,
+      helperText: error,
+      disabled: submitting,
+      onKeyPress: (e) => {
+        if (e.key === "Enter" && !submitting) {
+          handleSubmit();
+        }
+      }
+    }
+  )), /* @__PURE__ */ React60.createElement(DialogActions, null, /* @__PURE__ */ React60.createElement(Button$1, { onClick: onClose, disabled: submitting }, "Cancel"), /* @__PURE__ */ React60.createElement(
+    Button$1,
+    {
+      onClick: handleSubmit,
+      variant: "contained",
+      disabled: !value.trim() || submitting
+    },
+    submitting ? "Renaming..." : "Rename"
+  )));
+}
+function SaveTemplateDialog({
+  open,
+  onClose,
+  onSave,
+  onNameChange,
+  defaultName = "",
+  error: externalError = null
+}) {
+  const [templateName, setTemplateName] = useState(defaultName);
+  const [internalError, setInternalError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  useEffect(() => {
+    if (open) {
+      setTemplateName(defaultName);
+      setInternalError("");
+      setIsSubmitting(false);
+    }
+  }, [open, defaultName]);
+  const displayError = externalError || internalError;
+  const handleNameChange = (e) => {
+    setTemplateName(e.target.value);
+    if (e.target.value.trim()) {
+      setInternalError("");
+    }
+    if (onNameChange) {
+      onNameChange();
+    }
+  };
+  const handleSave = () => __async(null, null, function* () {
+    if (!templateName.trim()) {
+      setInternalError("Please enter a template name");
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      const result = onSave(templateName);
+      if (result instanceof Promise) {
+        const success = yield result;
+        if (success) {
+          setTemplateName("");
+          setInternalError("");
+          onClose();
+        }
+      } else if (result !== false) {
+        setTemplateName("");
+        setInternalError("");
+        onClose();
+      }
+    } catch (error) {
+      console.error("Error saving template:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  });
+  const handleCancel = () => {
+    setTemplateName("");
+    setInternalError("");
+    onClose();
+  };
+  return /* @__PURE__ */ React60.createElement(
+    Dialog,
+    {
+      open,
+      onClose: handleCancel,
+      maxWidth: "sm",
+      fullWidth: true
+    },
+    /* @__PURE__ */ React60.createElement(DialogTitle, null, "Save Email Template"),
+    /* @__PURE__ */ React60.createElement(DialogContent, null, /* @__PURE__ */ React60.createElement(Box, { sx: { pt: 1 } }, /* @__PURE__ */ React60.createElement(
+      TextField,
+      {
+        autoFocus: true,
+        margin: "dense",
+        id: "template-name",
+        label: "Template Name",
+        type: "text",
+        fullWidth: true,
+        variant: "outlined",
+        value: templateName,
+        onChange: handleNameChange,
+        error: !!displayError,
+        helperText: displayError,
+        onKeyPress: (e) => {
+          if (e.key === "Enter" && templateName.trim() && !displayError && !isSubmitting) {
+            handleSave();
+          }
+        },
+        disabled: isSubmitting
+      }
+    ))),
+    /* @__PURE__ */ React60.createElement(DialogActions, null, /* @__PURE__ */ React60.createElement(Button$1, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React60.createElement(
+      Button$1,
+      {
+        onClick: handleSave,
+        variant: "contained",
+        color: "primary",
+        disabled: !templateName.trim() || !!displayError || isSubmitting
+      },
+      isSubmitting ? "Saving..." : "Save Template"
+    ))
+  );
 }
 
 // sample-templates/empty-email-message.ts
@@ -3645,12 +4172,29 @@ var EMPTY_EMAIL_MESSAGE = {
 var empty_email_message_default = EMPTY_EMAIL_MESSAGE;
 
 // src/app/templates-drawer/index.tsx
-var SAMPLES_DRAWER_WIDTH = 240;
+var SAMPLES_DRAWER_WIDTH = 320;
 var EMPTY_TEMPLATE = {
   id: "empty-email",
-  name: "Empty email",
+  slug: "Empty email",
+  kind: "sample",
   description: "A blank email template to start from scratch"
 };
+var SORT_OPTIONS = [
+  { value: "updatedAt", label: "Last updated" },
+  { value: "createdAt", label: "Recently created" },
+  { value: "slug", label: "Name (A\u2013Z)" }
+];
+function compareTemplates(a, b, key) {
+  if (key === "slug") {
+    return a.slug.localeCompare(b.slug);
+  }
+  const av = a[key];
+  const bv = b[key];
+  if (!av && !bv) return 0;
+  if (!av) return 1;
+  if (!bv) return -1;
+  return new Date(bv).getTime() - new Date(av).getTime();
+}
 function SamplesDrawer({
   enterDuration = 225,
   exitDuration = 225,
@@ -3659,13 +4203,27 @@ function SamplesDrawer({
   loadTemplates,
   loadTemplate,
   currentTemplateId,
-  deleteTemplate
+  deleteTemplate,
+  copyTemplate,
+  renameTemplate,
+  setTemplateKind,
+  saveAs
 }) {
+  var _a;
   const samplesDrawerOpen = useSamplesDrawerOpen();
+  const { setCurrentTemplate, loadTemplate: ctxLoadTemplate } = useEmailEditor();
+  const { showMessage } = useSnackbar();
   const [samples, setSamples] = useState([EMPTY_TEMPLATE]);
   const [templates, setTemplates] = useState([]);
   const [loadingSamples, setLoadingSamples] = useState(false);
   const [loadingTemplates, setLoadingTemplates] = useState(false);
+  const [templatesError, setTemplatesError] = useState(null);
+  const [search, setSearch] = useState("");
+  const [sortKey, setSortKey] = useState("updatedAt");
+  const [activeTags, setActiveTags] = useState([]);
+  const [renameTarget, setRenameTarget] = useState(null);
+  const [pendingSaveAs, setPendingSaveAs] = useState(null);
+  const [newError, setNewError] = useState(null);
   const handleLoadTemplate = (templateId) => __async(null, null, function* () {
     if (templateId === "empty-email") {
       return empty_email_message_default;
@@ -3675,149 +4233,295 @@ function SamplesDrawer({
     }
     return null;
   });
+  const withKind = (items, fallback) => items.map((item) => item.kind ? item : __spreadProps(__spreadValues({}, item), { kind: fallback }));
   useEffect(() => {
-    if (enabled && samplesDrawerOpen && loadSamples) {
-      setLoadingSamples(true);
-      loadSamples().then((results) => {
-        const existingEmptyTemplate = results.find((sample) => sample.id === "empty-email");
-        if (!existingEmptyTemplate) {
-          setSamples([EMPTY_TEMPLATE, ...results]);
-        } else {
-          setSamples(results);
-        }
-        setLoadingSamples(false);
-      }).catch((error) => {
-        console.error("Failed to load samples:", error);
-        setSamples([EMPTY_TEMPLATE]);
-        setLoadingSamples(false);
-      });
-    }
+    if (!enabled || !samplesDrawerOpen || !loadSamples) return;
+    setLoadingSamples(true);
+    loadSamples().then((results) => {
+      const normalized = withKind(results, "sample");
+      const existingEmpty = normalized.find((s) => s.id === "empty-email");
+      setSamples(existingEmpty ? normalized : [EMPTY_TEMPLATE, ...normalized]);
+    }).catch((error) => {
+      console.error("Failed to load samples:", error);
+      setSamples([EMPTY_TEMPLATE]);
+    }).finally(() => setLoadingSamples(false));
   }, [enabled, samplesDrawerOpen, loadSamples]);
-  useEffect(() => {
-    if (enabled && loadTemplates) {
-      setLoadingTemplates(true);
-      loadTemplates().then((results) => {
-        setTemplates(results);
-        setLoadingTemplates(false);
-      }).catch((error) => {
-        console.error("Failed to load templates:", error);
-        setLoadingTemplates(false);
-      });
+  const refreshTemplates = () => __async(null, null, function* () {
+    if (!loadTemplates) return;
+    setLoadingTemplates(true);
+    setTemplatesError(null);
+    try {
+      const results = yield loadTemplates();
+      setTemplates(withKind(results, "template"));
+    } catch (error) {
+      console.error("Failed to load templates:", error);
+      setTemplatesError("Could not load templates");
+    } finally {
+      setLoadingTemplates(false);
     }
+  });
+  useEffect(() => {
+    if (!enabled || !loadTemplates) return;
+    refreshTemplates();
   }, [enabled, loadTemplates]);
   useEffect(() => {
-    const handleTemplateListUpdate = (e) => {
-      setTemplates(e.detail);
+    const handler = (e) => {
+      const detail = e.detail;
+      if (Array.isArray(detail)) setTemplates(withKind(detail, "template"));
     };
-    window.addEventListener("templateListUpdated", handleTemplateListUpdate);
-    return () => window.removeEventListener("templateListUpdated", handleTemplateListUpdate);
+    window.addEventListener("templateListUpdated", handler);
+    return () => window.removeEventListener("templateListUpdated", handler);
   }, []);
+  const { templateRows, sampleRows } = useMemo(() => {
+    const byId = /* @__PURE__ */ new Map();
+    for (const s of samples) byId.set(s.id, s);
+    for (const t of templates) byId.set(t.id, t);
+    const all = Array.from(byId.values());
+    return {
+      templateRows: all.filter((t) => t.kind === "template"),
+      sampleRows: all.filter((t) => t.kind === "sample")
+    };
+  }, [samples, templates]);
+  const allTags = useMemo(() => {
+    var _a2;
+    const set = /* @__PURE__ */ new Set();
+    for (const t of templateRows) {
+      (_a2 = t.tags) == null ? void 0 : _a2.forEach((tag) => set.add(tag));
+    }
+    return Array.from(set).sort();
+  }, [templateRows]);
+  const filteredTemplates = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    const matchSearch = (t) => {
+      if (!term) return true;
+      const haystack = [t.slug, t.description, t.subject].filter(Boolean).join(" ").toLowerCase();
+      return haystack.includes(term);
+    };
+    const matchTags = (t) => {
+      if (activeTags.length === 0) return true;
+      if (!t.tags || t.tags.length === 0) return false;
+      return activeTags.every((tag) => t.tags.includes(tag));
+    };
+    return templateRows.filter((t) => matchSearch(t) && matchTags(t)).slice().sort((a, b) => compareTemplates(a, b, sortKey));
+  }, [templateRows, search, activeTags, sortKey]);
+  const toggleTag = (tag) => {
+    setActiveTags((prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]);
+  };
+  const handleDuplicate = (template) => {
+    if (!copyTemplate) return;
+    (() => __async(null, null, function* () {
+      try {
+        const full = yield handleLoadTemplate(template.id);
+        if (!full) {
+          showMessage("Could not load template to duplicate");
+          return;
+        }
+        copyTemplate(`${template.slug} (Copy)`, full);
+        showMessage("Template duplicated");
+      } catch (e) {
+        console.error("Error duplicating template:", e);
+        showMessage("Error duplicating template");
+      }
+    }))();
+  };
+  const handleDelete = (template) => {
+    if (!deleteTemplate) return;
+    if (!window.confirm(`Delete "${template.slug}"? This cannot be undone.`)) return;
+    deleteTemplate(template.id);
+    showMessage("Template deleted");
+  };
+  const handleRenameSubmit = (newSlug) => __async(null, null, function* () {
+    if (!renameTarget || !renameTemplate) return;
+    yield renameTemplate(renameTarget.id, newSlug);
+    setTemplates(
+      (prev) => prev.map((t) => t.id === renameTarget.id ? __spreadProps(__spreadValues({}, t), { slug: newSlug }) : t)
+    );
+    if (currentTemplateId === renameTarget.id) {
+      setCurrentTemplate(renameTarget.id, newSlug);
+    }
+    showMessage("Template renamed");
+  });
+  const flipKindLocally = (id, kind) => {
+    setTemplates((prev) => prev.map((t) => t.id === id ? __spreadProps(__spreadValues({}, t), { kind }) : t));
+    setSamples((prev) => prev.map((t) => t.id === id ? __spreadProps(__spreadValues({}, t), { kind }) : t));
+  };
+  const handleSetKind = (template, kind) => {
+    if (!setTemplateKind) return;
+    (() => __async(null, null, function* () {
+      try {
+        yield setTemplateKind(template.id, kind);
+        flipKindLocally(template.id, kind);
+        if (currentTemplateId === template.id) {
+          setCurrentTemplate(template.id, template.slug, kind);
+        }
+        showMessage(kind === "sample" ? "Promoted to sample" : "Demoted to template");
+      } catch (e) {
+        console.error("Error updating template kind:", e);
+        showMessage("Error updating template kind");
+      }
+    }))();
+  };
+  const handleDuplicateAsTemplate = (sample) => {
+    if (!saveAs) return;
+    (() => __async(null, null, function* () {
+      try {
+        const content = yield handleLoadTemplate(sample.id);
+        if (!content) {
+          showMessage("Could not load sample");
+          return;
+        }
+        resetDocument(content);
+        setPendingSaveAs({ content, defaultName: `${sample.slug} (Copy)` });
+      } catch (e) {
+        console.error("Error duplicating sample:", e);
+        showMessage("Error duplicating sample");
+      }
+    }))();
+  };
+  const handleSaveAsSubmit = (templateName) => __async(null, null, function* () {
+    if (!saveAs || !pendingSaveAs) return false;
+    const taken = templateRows.some((t) => t.slug.toLowerCase() === templateName.toLowerCase());
+    if (taken) {
+      setNewError("A template with this name already exists");
+      return false;
+    }
+    try {
+      const content = pendingSaveAs.content;
+      const { id, slug } = yield saveAs(templateName, buildSavePayload(content));
+      resetDocument(content);
+      setCurrentTemplate(id, slug, "template");
+      ctxLoadTemplate(content, id, slug, "template");
+      showMessage("New template created!");
+      window.location.hash = `#template/${id}`;
+      yield refreshTemplates();
+      return true;
+    } catch (e) {
+      console.error("Error creating template:", e);
+      showMessage("Error creating template");
+      return false;
+    }
+  });
+  const openNewTemplateDialog = () => {
+    setNewError(null);
+    setPendingSaveAs({ content: empty_email_message_default, defaultName: "New Template" });
+  };
   if (!enabled) {
     return null;
   }
-  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
+  const existingSlugs = templates.map((t) => t.slug);
+  return /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(
     Drawer,
     {
       variant: "persistent",
       anchor: "left",
       open: samplesDrawerOpen,
-      PaperProps: {
-        style: { position: "absolute" }
-      },
+      PaperProps: { style: { position: "absolute" } },
       ModalProps: {
         container: document.getElementById("drawer-container"),
         style: { position: "absolute" },
         keepMounted: true
       },
-      transitionDuration: {
-        enter: enterDuration,
-        exit: exitDuration
-      },
-      sx: {
-        width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0
-      }
+      transitionDuration: { enter: enterDuration, exit: exitDuration },
+      sx: { width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0 }
     },
-    /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React60.createElement(
       Stack,
       {
-        spacing: 3,
         py: 1,
         px: 2,
         width: SAMPLES_DRAWER_WIDTH,
-        justifyContent: "space-between",
-        height: "100%"
+        height: "100%",
+        spacing: 1.5,
+        sx: { overflowY: "auto" }
       },
-      /* @__PURE__ */ React72.createElement(
-        Stack,
+      /* @__PURE__ */ React60.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { pt: 1 } }, /* @__PURE__ */ React60.createElement(Typography, { variant: "h6", component: "h1" }, "Templates"), saveAs && /* @__PURE__ */ React60.createElement(Tooltip, { title: "New template" }, /* @__PURE__ */ React60.createElement(
+        IconButton,
         {
-          spacing: 2,
-          sx: {
-            "& .MuiButtonBase-root": {
-              width: "100%",
-              justifyContent: "flex-start"
-            }
+          size: "small",
+          onClick: openNewTemplateDialog,
+          "aria-label": "New template"
+        },
+        /* @__PURE__ */ React60.createElement(AddOutlined, { fontSize: "small" })
+      ))),
+      loadTemplates && /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(
+        TextField,
+        {
+          size: "small",
+          placeholder: "Search templates",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          InputProps: {
+            startAdornment: /* @__PURE__ */ React60.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React60.createElement(SearchOutlined, { fontSize: "small" }))
           }
+        }
+      ), /* @__PURE__ */ React60.createElement(
+        TextField,
+        {
+          select: true,
+          size: "small",
+          label: "Sort by",
+          value: sortKey,
+          onChange: (e) => setSortKey(e.target.value)
         },
-        /* @__PURE__ */ React72.createElement(Typography, { variant: "h6", component: "h1", sx: { p: 2 } }, "Templates"),
-        loadTemplates && /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
-          Typography,
-          {
-            variant: "subtitle2",
-            component: "h2",
-            sx: { fontWeight: "bold", mt: 2 }
-          },
-          "Your Templates"
-        ), loadingTemplates ? /* @__PURE__ */ React72.createElement(Stack, { alignItems: "center", width: "100%", py: 1 }, /* @__PURE__ */ React72.createElement(CircularProgress, { size: 24 })) : templates.length > 0 ? /* @__PURE__ */ React72.createElement(Stack, { alignItems: "flex-start", width: "100%" }, templates.map((template) => /* @__PURE__ */ React72.createElement(
-          Box,
-          {
-            key: template.id,
-            width: "100%",
-            display: "flex",
-            alignItems: "center",
-            sx: {
-              bgcolor: currentTemplateId === template.id ? "rgba(0, 0, 0, 0.08)" : "transparent",
-              borderRadius: 1,
-              "&:hover": {
-                bgcolor: "rgba(0, 0, 0, 0.04)"
-              }
-            }
-          },
-          /* @__PURE__ */ React72.createElement(
-            SidebarButton,
-            {
-              templateId: template.id,
-              templateLoader: () => handleLoadTemplate(template.id),
-              sx: { flexGrow: 1 }
-            },
-            template.name
-          )
-        ))) : /* @__PURE__ */ React72.createElement(
-          Typography,
-          {
-            variant: "body2",
-            sx: { color: "text.secondary", py: 1 }
-          },
-          "No saved templates"
-        ), /* @__PURE__ */ React72.createElement(Divider$1, null)),
-        /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
-          Typography,
-          {
-            variant: "subtitle2",
-            component: "h2",
-            sx: { fontWeight: "bold", mt: 1 }
-          },
-          "Sample Templates"
-        ), loadingSamples ? /* @__PURE__ */ React72.createElement(Stack, { alignItems: "center", width: "100%", py: 1 }, /* @__PURE__ */ React72.createElement(CircularProgress, { size: 24 })) : /* @__PURE__ */ React72.createElement(Stack, { alignItems: "flex-start" }, samples.map((sample) => /* @__PURE__ */ React72.createElement(
-          SidebarButton,
-          {
-            key: sample.id,
-            templateId: sample.id,
-            templateLoader: () => handleLoadTemplate(sample.id)
-          },
-          sample.name
-        ))))
-      )
+        SORT_OPTIONS.map((opt) => /* @__PURE__ */ React60.createElement(MenuItem, { key: opt.value, value: opt.value }, opt.label))
+      ), allTags.length > 0 && /* @__PURE__ */ React60.createElement(Stack, { direction: "row", sx: { flexWrap: "wrap", gap: 0.5 } }, allTags.map((tag) => /* @__PURE__ */ React60.createElement(
+        Chip,
+        {
+          key: tag,
+          label: tag,
+          size: "small",
+          clickable: true,
+          color: activeTags.includes(tag) ? "primary" : "default",
+          variant: activeTags.includes(tag) ? "filled" : "outlined",
+          onClick: () => toggleTag(tag)
+        }
+      ))), /* @__PURE__ */ React60.createElement(Box, null, /* @__PURE__ */ React60.createElement(Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5 } }, "Your Templates"), loadingTemplates ? /* @__PURE__ */ React60.createElement(Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React60.createElement(CircularProgress, { size: 24 })) : templatesError ? /* @__PURE__ */ React60.createElement(Alert, { severity: "error", sx: { my: 1 } }, templatesError) : filteredTemplates.length > 0 ? /* @__PURE__ */ React60.createElement(Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredTemplates.map((template) => /* @__PURE__ */ React60.createElement(
+        TemplateRow,
+        {
+          key: template.id,
+          template,
+          isCurrent: currentTemplateId === template.id,
+          templateLoader: () => handleLoadTemplate(template.id),
+          onDuplicate: copyTemplate ? () => handleDuplicate(template) : void 0,
+          onRename: renameTemplate ? () => setRenameTarget(template) : void 0,
+          onDelete: deleteTemplate ? () => handleDelete(template) : void 0,
+          onPromote: setTemplateKind ? () => handleSetKind(template, "sample") : void 0
+        }
+      ))) : /* @__PURE__ */ React60.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, templateRows.length === 0 ? "No saved templates yet" : "No templates match your filters")), /* @__PURE__ */ React60.createElement(Divider$1, null)),
+      /* @__PURE__ */ React60.createElement(Box, null, /* @__PURE__ */ React60.createElement(Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5 } }, "Sample Templates"), loadingSamples ? /* @__PURE__ */ React60.createElement(Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React60.createElement(CircularProgress, { size: 24 })) : sampleRows.length > 0 ? /* @__PURE__ */ React60.createElement(Stack, { spacing: 0.25, sx: { width: "100%" } }, sampleRows.map((sample) => /* @__PURE__ */ React60.createElement(
+        TemplateRow,
+        {
+          key: sample.id,
+          template: sample,
+          isCurrent: currentTemplateId === sample.id,
+          templateLoader: () => handleLoadTemplate(sample.id),
+          onDuplicateAsTemplate: saveAs ? () => handleDuplicateAsTemplate(sample) : void 0,
+          onDemote: setTemplateKind && sample.id !== "empty-email" ? () => handleSetKind(sample, "template") : void 0
+        }
+      ))) : /* @__PURE__ */ React60.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, "No samples available"))
     )
+  ), renameTarget && /* @__PURE__ */ React60.createElement(
+    RenameDialog,
+    {
+      open: !!renameTarget,
+      currentSlug: renameTarget.slug,
+      existingSlugs: existingSlugs.filter((s) => s !== renameTarget.slug),
+      onClose: () => setRenameTarget(null),
+      onSubmit: handleRenameSubmit
+    }
+  ), /* @__PURE__ */ React60.createElement(
+    SaveTemplateDialog,
+    {
+      open: !!pendingSaveAs,
+      onClose: () => {
+        setPendingSaveAs(null);
+        setNewError(null);
+      },
+      onSave: handleSaveAsSubmit,
+      onNameChange: () => setNewError(null),
+      defaultName: (_a = pendingSaveAs == null ? void 0 : pendingSaveAs.defaultName) != null ? _a : "New Template",
+      error: newError
+    }
   ));
 }
 var BUTTON_SX2 = { p: 1.5, display: "flex", flexDirection: "column" };
@@ -3832,7 +4536,7 @@ var ICON_SX = {
   borderColor: "cadet.300"
 };
 function BlockTypeButton({ label, icon, onClick }) {
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(
     Button$1,
     {
       sx: BUTTON_SX2,
@@ -3841,14 +4545,14 @@ function BlockTypeButton({ label, icon, onClick }) {
         onClick();
       }
     },
-    /* @__PURE__ */ React72.createElement(Box, { sx: ICON_SX }, icon),
-    /* @__PURE__ */ React72.createElement(Typography, { variant: "body2" }, label)
+    /* @__PURE__ */ React60.createElement(Box, { sx: ICON_SX }, icon),
+    /* @__PURE__ */ React60.createElement(Typography, { variant: "body2" }, label)
   );
 }
 var BUTTONS = [
   {
     label: "Heading",
-    icon: /* @__PURE__ */ React72.createElement(HMobiledataOutlined, null),
+    icon: /* @__PURE__ */ React60.createElement(HMobiledataOutlined, null),
     block: () => ({
       type: "Heading",
       data: {
@@ -3861,7 +4565,7 @@ var BUTTONS = [
   },
   {
     label: "Text",
-    icon: /* @__PURE__ */ React72.createElement(NotesOutlined, null),
+    icon: /* @__PURE__ */ React60.createElement(NotesOutlined, null),
     block: () => ({
       type: "Text",
       data: {
@@ -3875,7 +4579,7 @@ var BUTTONS = [
   },
   {
     label: "Button",
-    icon: /* @__PURE__ */ React72.createElement(SmartButtonOutlined, null),
+    icon: /* @__PURE__ */ React60.createElement(SmartButtonOutlined, null),
     block: () => ({
       type: "Button",
       data: {
@@ -3889,7 +4593,7 @@ var BUTTONS = [
   },
   {
     label: "Image",
-    icon: /* @__PURE__ */ React72.createElement(ImageOutlined, null),
+    icon: /* @__PURE__ */ React60.createElement(ImageOutlined, null),
     block: () => ({
       type: "Image",
       data: {
@@ -3905,7 +4609,7 @@ var BUTTONS = [
   },
   {
     label: "Avatar",
-    icon: /* @__PURE__ */ React72.createElement(AccountCircleOutlined, null),
+    icon: /* @__PURE__ */ React60.createElement(AccountCircleOutlined, null),
     block: () => ({
       type: "Avatar",
       data: {
@@ -3919,7 +4623,7 @@ var BUTTONS = [
   },
   {
     label: "Personal Signature",
-    icon: /* @__PURE__ */ React72.createElement(ContactMailOutlined, null),
+    icon: /* @__PURE__ */ React60.createElement(ContactMailOutlined, null),
     block: () => ({
       type: "Signature",
       data: {
@@ -3941,7 +4645,7 @@ var BUTTONS = [
   },
   {
     label: "Company Signature",
-    icon: /* @__PURE__ */ React72.createElement(BusinessOutlined, null),
+    icon: /* @__PURE__ */ React60.createElement(BusinessOutlined, null),
     block: () => ({
       type: "Signature",
       data: {
@@ -3961,7 +4665,7 @@ var BUTTONS = [
   },
   {
     label: "Divider",
-    icon: /* @__PURE__ */ React72.createElement(HorizontalRuleOutlined, null),
+    icon: /* @__PURE__ */ React60.createElement(HorizontalRuleOutlined, null),
     block: () => ({
       type: "Divider",
       data: {
@@ -3974,7 +4678,7 @@ var BUTTONS = [
   },
   {
     label: "Spacer",
-    icon: /* @__PURE__ */ React72.createElement(Crop32Outlined, null),
+    icon: /* @__PURE__ */ React60.createElement(Crop32Outlined, null),
     block: () => ({
       type: "Spacer",
       data: {}
@@ -3982,7 +4686,7 @@ var BUTTONS = [
   },
   {
     label: "Html",
-    icon: /* @__PURE__ */ React72.createElement(HtmlOutlined, null),
+    icon: /* @__PURE__ */ React60.createElement(HtmlOutlined, null),
     block: () => ({
       type: "Html",
       data: {
@@ -3997,7 +4701,7 @@ var BUTTONS = [
   },
   {
     label: "Columns",
-    icon: /* @__PURE__ */ React72.createElement(ViewColumnOutlined, null),
+    icon: /* @__PURE__ */ React60.createElement(ViewColumnOutlined, null),
     block: () => ({
       type: "ColumnsContainer",
       data: {
@@ -4012,7 +4716,7 @@ var BUTTONS = [
   },
   {
     label: "Container",
-    icon: /* @__PURE__ */ React72.createElement(LibraryAddOutlined, null),
+    icon: /* @__PURE__ */ React60.createElement(LibraryAddOutlined, null),
     block: () => ({
       type: "Container",
       data: {
@@ -4036,7 +4740,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
   if (anchorEl === null) {
     return null;
   }
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(
     Menu,
     {
       open: true,
@@ -4045,7 +4749,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
       transformOrigin: { vertical: "top", horizontal: "center" }
     },
-    /* @__PURE__ */ React72.createElement(Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React72.createElement(BlockTypeButton, { key: i, label: k.label, icon: k.icon, onClick: () => onClick(k.block()) })))
+    /* @__PURE__ */ React60.createElement(Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React60.createElement(BlockTypeButton, { key: i, label: k.label, icon: k.icon, onClick: () => onClick(k.block()) })))
   );
 }
 function DividerButton({ buttonElement, onClick }) {
@@ -4072,7 +4776,7 @@ function DividerButton({ buttonElement, onClick }) {
       window.removeEventListener("mousemove", listener);
     };
   }, [buttonElement, setVisible]);
-  return /* @__PURE__ */ React72.createElement(Fade, { in: visible }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(Fade, { in: visible }, /* @__PURE__ */ React60.createElement(
     IconButton,
     {
       size: "small",
@@ -4095,11 +4799,11 @@ function DividerButton({ buttonElement, onClick }) {
         onClick();
       }
     },
-    /* @__PURE__ */ React72.createElement(AddOutlined, { fontSize: "small" })
+    /* @__PURE__ */ React60.createElement(AddOutlined, { fontSize: "small" })
   ));
 }
 function PlaceholderButton({ onClick }) {
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(
     ButtonBase,
     {
       onClick: (ev) => {
@@ -4115,7 +4819,7 @@ function PlaceholderButton({ onClick }) {
         bgcolor: "rgba(0,0,0, 0.05)"
       }
     },
-    /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React60.createElement(
       AddOutlined,
       {
         sx: {
@@ -4139,12 +4843,12 @@ function AddBlockButton({ onSelect, placeholder }) {
   };
   const renderButton2 = () => {
     if (placeholder) {
-      return /* @__PURE__ */ React72.createElement(PlaceholderButton, { onClick: handleButtonClick });
+      return /* @__PURE__ */ React60.createElement(PlaceholderButton, { onClick: handleButtonClick });
     } else {
-      return /* @__PURE__ */ React72.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
+      return /* @__PURE__ */ React60.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
     }
   };
-  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton2()), /* @__PURE__ */ React72.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
+  return /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton2()), /* @__PURE__ */ React60.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
 }
 
 // src/editor/blocks/helpers/editor-children-ids/index.tsx
@@ -4171,9 +4875,9 @@ function EditorChildrenIds({ childrenIds, onChange }) {
     });
   };
   if (!childrenIds || childrenIds.length === 0) {
-    return /* @__PURE__ */ React72.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock });
+    return /* @__PURE__ */ React60.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock });
   }
-  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React72.createElement(Fragment, { key: childId }, /* @__PURE__ */ React72.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), /* @__PURE__ */ React72.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React72.createElement(AddBlockButton, { onSelect: appendBlock }));
+  return /* @__PURE__ */ React60.createElement(React60.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React60.createElement(Fragment, { key: childId }, /* @__PURE__ */ React60.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), /* @__PURE__ */ React60.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React60.createElement(AddBlockButton, { onSelect: appendBlock }));
 }
 
 // src/editor/blocks/columns-container/columns-container-editor.tsx
@@ -4200,15 +4904,15 @@ function ColumnsContainerEditor({ style, props }) {
     });
     setSelectedBlockId(blockId);
   };
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(
     columns_container_default,
     {
       props: restProps,
       style,
       columns: [
-        /* @__PURE__ */ React72.createElement(EditorChildrenIds, { childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds, onChange: (change) => updateColumn(0, change) }),
-        /* @__PURE__ */ React72.createElement(EditorChildrenIds, { childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds, onChange: (change) => updateColumn(1, change) }),
-        /* @__PURE__ */ React72.createElement(EditorChildrenIds, { childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds, onChange: (change) => updateColumn(2, change) })
+        /* @__PURE__ */ React60.createElement(EditorChildrenIds, { childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds, onChange: (change) => updateColumn(0, change) }),
+        /* @__PURE__ */ React60.createElement(EditorChildrenIds, { childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds, onChange: (change) => updateColumn(1, change) }),
+        /* @__PURE__ */ React60.createElement(EditorChildrenIds, { childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds, onChange: (change) => updateColumn(2, change) })
       ]
     }
   );
@@ -4218,7 +4922,7 @@ function ContainerEditor({ style, props }) {
   const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
   const document2 = useDocument();
   const currentBlockId = useCurrentBlockId();
-  return /* @__PURE__ */ React72.createElement(container_default, { style }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(container_default, { style }, /* @__PURE__ */ React60.createElement(
     EditorChildrenIds,
     {
       childrenIds,
@@ -4418,7 +5122,7 @@ function EmailLayoutEditor(props) {
     lineHeight: "1.5",
     margin: "0"
   };
-  const editorChildren = /* @__PURE__ */ React72.createElement(
+  const editorChildren = /* @__PURE__ */ React60.createElement(
     EditorChildrenIds,
     {
       childrenIds,
@@ -4437,7 +5141,7 @@ function EmailLayoutEditor(props) {
     }
   );
   if (props.backdropDisabled) {
-    return /* @__PURE__ */ React72.createElement(
+    return /* @__PURE__ */ React60.createElement(
       "div",
       {
         onClick: () => {
@@ -4450,10 +5154,10 @@ function EmailLayoutEditor(props) {
           minHeight: "100%"
         })
       },
-      /* @__PURE__ */ React72.createElement("div", { style: { maxWidth: "600px" } }, editorChildren)
+      /* @__PURE__ */ React60.createElement("div", { style: { maxWidth: "600px" } }, editorChildren)
     );
   }
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(
     "div",
     {
       onClick: () => {
@@ -4466,7 +5170,7 @@ function EmailLayoutEditor(props) {
         minHeight: "100%"
       })
     },
-    /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React60.createElement(
       "table",
       {
         align: "center",
@@ -4490,7 +5194,7 @@ function EmailLayoutEditor(props) {
         cellPadding: "0",
         border: 0
       },
-      /* @__PURE__ */ React72.createElement("tbody", null, /* @__PURE__ */ React72.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React72.createElement("td", null, editorChildren)))
+      /* @__PURE__ */ React60.createElement("tbody", null, /* @__PURE__ */ React60.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React60.createElement("td", null, editorChildren)))
     )
   );
 }
@@ -4649,7 +5353,7 @@ function TuneMenu({ blockId }) {
     resetDocument(nDocument);
     setSelectedBlockId(blockId);
   };
-  return /* @__PURE__ */ React72.createElement(Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React72.createElement(Stack, null, /* @__PURE__ */ React72.createElement(Tooltip, { title: "Move up", placement: "left-start" }, /* @__PURE__ */ React72.createElement(IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React72.createElement(ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React72.createElement(Tooltip, { title: "Move down", placement: "left-start" }, /* @__PURE__ */ React72.createElement(IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React72.createElement(ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React72.createElement(Tooltip, { title: "Copy block", placement: "left-start" }, /* @__PURE__ */ React72.createElement(IconButton, { onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React72.createElement(ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React72.createElement(Tooltip, { title: "Delete", placement: "left-start" }, /* @__PURE__ */ React72.createElement(IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React72.createElement(DeleteOutlined, { fontSize: "small" })))));
+  return /* @__PURE__ */ React60.createElement(Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React60.createElement(Stack, null, /* @__PURE__ */ React60.createElement(Tooltip, { title: "Move up", placement: "left-start" }, /* @__PURE__ */ React60.createElement(IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React60.createElement(ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React60.createElement(Tooltip, { title: "Move down", placement: "left-start" }, /* @__PURE__ */ React60.createElement(IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React60.createElement(ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React60.createElement(Tooltip, { title: "Copy block", placement: "left-start" }, /* @__PURE__ */ React60.createElement(IconButton, { onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React60.createElement(ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React60.createElement(Tooltip, { title: "Delete", placement: "left-start" }, /* @__PURE__ */ React60.createElement(IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React60.createElement(DeleteOutlined, { fontSize: "small" })))));
 }
 
 // src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
@@ -4667,9 +5371,9 @@ function EditorBlockWrapper({ children }) {
     if (selectedBlockId !== blockId) {
       return null;
     }
-    return /* @__PURE__ */ React72.createElement(TuneMenu, { blockId });
+    return /* @__PURE__ */ React60.createElement(TuneMenu, { blockId });
   };
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(
     Box,
     {
       sx: {
@@ -4799,7 +5503,7 @@ function ButtonEditor({ style, props }) {
       width: fullWidth ? "100%" : void 0,
       textAlign: "center"
     });
-    return /* @__PURE__ */ React72.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React72.createElement(
+    return /* @__PURE__ */ React60.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React60.createElement(
       "input",
       {
         type: "text",
@@ -4810,7 +5514,7 @@ function ButtonEditor({ style, props }) {
       }
     ));
   }
-  return /* @__PURE__ */ React72.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React72.createElement("span", { style: linkStyle }, /* @__PURE__ */ React72.createElement("span", null, text)));
+  return /* @__PURE__ */ React60.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React60.createElement("span", { style: linkStyle }, /* @__PURE__ */ React60.createElement("span", null, text)));
 }
 function getFontFamily9(fontFamily) {
   switch (fontFamily) {
@@ -4933,7 +5637,7 @@ function HeadingEditor({ style, props }) {
     }
   };
   if (isSelected) {
-    return /* @__PURE__ */ React72.createElement(
+    return /* @__PURE__ */ React60.createElement(
       "textarea",
       {
         value: localText,
@@ -4948,11 +5652,11 @@ function HeadingEditor({ style, props }) {
   }
   switch (level) {
     case "h1":
-      return /* @__PURE__ */ React72.createElement("h1", { style: hStyle }, textContent);
+      return /* @__PURE__ */ React60.createElement("h1", { style: hStyle }, textContent);
     case "h2":
-      return /* @__PURE__ */ React72.createElement("h2", { style: hStyle }, textContent);
+      return /* @__PURE__ */ React60.createElement("h2", { style: hStyle }, textContent);
     case "h3":
-      return /* @__PURE__ */ React72.createElement("h3", { style: hStyle }, textContent);
+      return /* @__PURE__ */ React60.createElement("h3", { style: hStyle }, textContent);
   }
 }
 function HtmlEditor({ style, props }) {
@@ -5007,7 +5711,7 @@ function HtmlEditor({ style, props }) {
       margin: 0,
       backgroundColor: "transparent"
     });
-    return /* @__PURE__ */ React72.createElement("div", { style: cssStyle }, /* @__PURE__ */ React72.createElement(
+    return /* @__PURE__ */ React60.createElement("div", { style: cssStyle }, /* @__PURE__ */ React60.createElement(
       "textarea",
       {
         value: localContents,
@@ -5021,9 +5725,9 @@ function HtmlEditor({ style, props }) {
     ));
   }
   if (!contents) {
-    return /* @__PURE__ */ React72.createElement("div", { style: cssStyle });
+    return /* @__PURE__ */ React60.createElement("div", { style: cssStyle });
   }
-  return /* @__PURE__ */ React72.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
+  return /* @__PURE__ */ React60.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
 }
 function getImageBorderRadius2(shape, size) {
   switch (shape) {
@@ -5138,7 +5842,7 @@ function SignatureEditor({ style, props }) {
     backgroundColor: (_p = style == null ? void 0 : style.backgroundColor) != null ? _p : void 0,
     padding: (style == null ? void 0 : style.padding) ? `${style.padding.top}px ${style.padding.right}px ${style.padding.bottom}px ${style.padding.left}px` : void 0
   };
-  const imageElement = imageUrl ? /* @__PURE__ */ React72.createElement(
+  const imageElement = imageUrl ? /* @__PURE__ */ React60.createElement(
     "img",
     {
       src: imageUrl,
@@ -5156,7 +5860,7 @@ function SignatureEditor({ style, props }) {
       }
     }
   ) : null;
-  const greetingElement = isSelected ? /* @__PURE__ */ React72.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React72.createElement(
+  const greetingElement = isSelected ? /* @__PURE__ */ React60.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React60.createElement(
     "input",
     {
       value: localGreeting,
@@ -5167,8 +5871,8 @@ function SignatureEditor({ style, props }) {
       placeholder: "Greeting (e.g. Best regards,)",
       style: __spreadValues(__spreadValues({}, inputBase), greetingStyle)
     }
-  )) : greeting ? /* @__PURE__ */ React72.createElement("p", { style: greetingStyle }, greeting) : null;
-  const textContent = isSelected ? /* @__PURE__ */ React72.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React72.createElement(
+  )) : greeting ? /* @__PURE__ */ React60.createElement("p", { style: greetingStyle }, greeting) : null;
+  const textContent = isSelected ? /* @__PURE__ */ React60.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React60.createElement(
     "input",
     {
       value: localName,
@@ -5179,7 +5883,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Name",
       style: __spreadValues(__spreadValues({}, inputBase), nameStyle)
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     "input",
     {
       value: localTitle,
@@ -5190,7 +5894,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Title",
       style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     "input",
     {
       value: localCompany,
@@ -5201,7 +5905,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Company",
       style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     "input",
     {
       value: localAddress,
@@ -5212,7 +5916,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Address",
       style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     "input",
     {
       value: localEmail,
@@ -5223,7 +5927,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Email",
       style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { marginTop: 4, display: "block" })
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     "input",
     {
       value: localPhone,
@@ -5234,7 +5938,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Phone",
       style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     "input",
     {
       value: localWebsite,
@@ -5245,11 +5949,11 @@ function SignatureEditor({ style, props }) {
       placeholder: "Website",
       style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
     }
-  )) : /* @__PURE__ */ React72.createElement("div", null, name && /* @__PURE__ */ React72.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React72.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React72.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React72.createElement("p", { style: detailStyle }, address), (email || phone || website) && /* @__PURE__ */ React72.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, email && /* @__PURE__ */ React72.createElement("span", { style: linkStyle }, email), email && (phone || website) && /* @__PURE__ */ React72.createElement("span", { style: detailStyle }, " \xB7 "), phone && /* @__PURE__ */ React72.createElement("span", { style: linkStyle }, phone), phone && website && /* @__PURE__ */ React72.createElement("span", { style: detailStyle }, " \xB7 "), website && /* @__PURE__ */ React72.createElement("span", { style: linkStyle }, website)), !name && !title && !company && !email && !phone && !website && /* @__PURE__ */ React72.createElement("p", { style: detailStyle }, "Click to edit signature"));
+  )) : /* @__PURE__ */ React60.createElement("div", null, name && /* @__PURE__ */ React60.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React60.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React60.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React60.createElement("p", { style: detailStyle }, address), (email || phone || website) && /* @__PURE__ */ React60.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, email && /* @__PURE__ */ React60.createElement("span", { style: linkStyle }, email), email && (phone || website) && /* @__PURE__ */ React60.createElement("span", { style: detailStyle }, " \xB7 "), phone && /* @__PURE__ */ React60.createElement("span", { style: linkStyle }, phone), phone && website && /* @__PURE__ */ React60.createElement("span", { style: detailStyle }, " \xB7 "), website && /* @__PURE__ */ React60.createElement("span", { style: linkStyle }, website)), !name && !title && !company && !email && !phone && !website && /* @__PURE__ */ React60.createElement("p", { style: detailStyle }, "Click to edit signature"));
   if (layout === "vertical") {
-    return /* @__PURE__ */ React72.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React72.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
+    return /* @__PURE__ */ React60.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React60.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
   }
-  return /* @__PURE__ */ React72.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React72.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React72.createElement("tbody", null, /* @__PURE__ */ React72.createElement("tr", null, imageElement && /* @__PURE__ */ React72.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React72.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
+  return /* @__PURE__ */ React60.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React60.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React60.createElement("tbody", null, /* @__PURE__ */ React60.createElement("tr", null, imageElement && /* @__PURE__ */ React60.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React60.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
 }
 function getFontFamily10(fontFamily) {
   switch (fontFamily) {
@@ -5364,7 +6068,7 @@ function TextEditor({ style, props }) {
     }
   };
   if (isSelected) {
-    return /* @__PURE__ */ React72.createElement(
+    return /* @__PURE__ */ React60.createElement(
       "textarea",
       {
         value: localText,
@@ -5378,36 +6082,36 @@ function TextEditor({ style, props }) {
     );
   }
   if (isMarkdown) {
-    return /* @__PURE__ */ React72.createElement(EmailMarkdown, { style: wStyle, markdown: textContent });
+    return /* @__PURE__ */ React60.createElement(EmailMarkdown, { style: wStyle, markdown: textContent });
   }
-  return /* @__PURE__ */ React72.createElement("div", { style: wStyle }, textContent);
+  return /* @__PURE__ */ React60.createElement("div", { style: wStyle }, textContent);
 }
 
 // src/editor/core.tsx
 var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
   Avatar: {
     schema: AvatarPropsSchema,
-    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(avatar_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60.createElement(avatar_default, __spreadValues({}, props)))
   },
   Button: {
     schema: ButtonPropsSchema,
-    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(ButtonEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60.createElement(ButtonEditor, __spreadValues({}, props)))
   },
   Container: {
     schema: container_props_schema_default,
-    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(ContainerEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60.createElement(ContainerEditor, __spreadValues({}, props)))
   },
   ColumnsContainer: {
     schema: columns_container_props_schema_default2,
-    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
   },
   Heading: {
     schema: HeadingPropsSchema,
-    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(HeadingEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60.createElement(HeadingEditor, __spreadValues({}, props)))
   },
   Html: {
     schema: HtmlPropsSchema,
-    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(HtmlEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60.createElement(HtmlEditor, __spreadValues({}, props)))
   },
   Image: {
     schema: ImagePropsSchema,
@@ -5419,28 +6123,28 @@ var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
           linkHref: null
         })
       });
-      return /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(image_default, __spreadValues({}, props)));
+      return /* @__PURE__ */ React60.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60.createElement(image_default, __spreadValues({}, props)));
     }
   },
   Text: {
     schema: TextPropsSchema,
-    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(TextEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60.createElement(TextEditor, __spreadValues({}, props)))
   },
   EmailLayout: {
     schema: email_layout_props_schema_default,
-    Component: (p) => /* @__PURE__ */ React72.createElement(EmailLayoutEditor, __spreadValues({}, p))
+    Component: (p) => /* @__PURE__ */ React60.createElement(EmailLayoutEditor, __spreadValues({}, p))
   },
   Spacer: {
     schema: SpacerPropsSchema,
-    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(spacer_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60.createElement(spacer_default, __spreadValues({}, props)))
   },
   Divider: {
     schema: DividerPropsSchema,
-    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(divider_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60.createElement(divider_default, __spreadValues({}, props)))
   },
   Signature: {
     schema: SignaturePropsSchema,
-    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(SignatureEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60.createElement(SignatureEditor, __spreadValues({}, props)))
   }
 });
 var EditorBlock2 = buildBlockComponent(EDITOR_DICTIONARY);
@@ -5456,7 +6160,7 @@ function EditorBlock({ id }) {
   if (!block) {
     throw new Error("Could not find block");
   }
-  return /* @__PURE__ */ React72.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React72.createElement(EditorBlock2, __spreadValues({}, block)));
+  return /* @__PURE__ */ React60.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React60.createElement(EditorBlock2, __spreadValues({}, block)));
 }
 function ToggleInspectorPanelButton() {
   const inspectorDrawerOpen = useInspectorDrawerOpen();
@@ -5464,20 +6168,20 @@ function ToggleInspectorPanelButton() {
     toggleInspectorDrawerOpen();
   };
   if (inspectorDrawerOpen) {
-    return /* @__PURE__ */ React72.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React72.createElement(LastPageOutlined, { fontSize: "small" }));
+    return /* @__PURE__ */ React60.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React60.createElement(LastPageOutlined, { fontSize: "small" }));
   }
-  return /* @__PURE__ */ React72.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React72.createElement(AppRegistrationOutlined, { fontSize: "small" }));
+  return /* @__PURE__ */ React60.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React60.createElement(AppRegistrationOutlined, { fontSize: "small" }));
 }
 function useIcon() {
   const samplesDrawerOpen = useSamplesDrawerOpen();
   if (samplesDrawerOpen) {
-    return /* @__PURE__ */ React72.createElement(FirstPageOutlined, { fontSize: "small" });
+    return /* @__PURE__ */ React60.createElement(FirstPageOutlined, { fontSize: "small" });
   }
-  return /* @__PURE__ */ React72.createElement(MenuOutlined, { fontSize: "small" });
+  return /* @__PURE__ */ React60.createElement(MenuOutlined, { fontSize: "small" });
 }
 function ToggleSamplesPanelButton() {
   const icon = useIcon();
-  return /* @__PURE__ */ React72.createElement(IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
+  return /* @__PURE__ */ React60.createElement(IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
 }
 function formatHtml(html2, spaces = 2) {
   try {
@@ -5539,7 +6243,7 @@ function HighlightedCodePanel({ type, value }) {
   if (code === null) {
     return null;
   }
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(
     "pre",
     {
       style: {
@@ -5565,17 +6269,17 @@ function HighlightedCodePanel({ type, value }) {
 function HtmlPanel() {
   const document2 = useDocument();
   const code = useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
-  return /* @__PURE__ */ React72.createElement(HighlightedCodePanel, { type: "html", value: code });
+  return /* @__PURE__ */ React60.createElement(HighlightedCodePanel, { type: "html", value: code });
 }
 function JsonPanel() {
   const document2 = useDocument();
   const code = useMemo(() => JSON.stringify(document2, null, "  "), [document2]);
-  return /* @__PURE__ */ React72.createElement(HighlightedCodePanel, { type: "json", value: code });
+  return /* @__PURE__ */ React60.createElement(HighlightedCodePanel, { type: "json", value: code });
 }
 function TextPanel() {
   const document2 = useDocument();
   const text = useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(
     "pre",
     {
       style: {
@@ -5611,185 +6315,47 @@ function MainTabsGroup() {
         setSelectedMainTab("editor");
     }
   };
-  return /* @__PURE__ */ React72.createElement(Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React60.createElement(
     Tab,
     {
       value: "editor",
-      label: /* @__PURE__ */ React72.createElement(Tooltip, { title: "Edit" }, /* @__PURE__ */ React72.createElement(EditOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React60.createElement(Tooltip, { title: "Edit" }, /* @__PURE__ */ React60.createElement(EditOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     Tab,
     {
       value: "preview",
-      label: /* @__PURE__ */ React72.createElement(Tooltip, { title: "Preview" }, /* @__PURE__ */ React72.createElement(PreviewOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React60.createElement(Tooltip, { title: "Preview" }, /* @__PURE__ */ React60.createElement(PreviewOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     Tab,
     {
       value: "html",
-      label: /* @__PURE__ */ React72.createElement(Tooltip, { title: "HTML output" }, /* @__PURE__ */ React72.createElement(CodeOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React60.createElement(Tooltip, { title: "HTML output" }, /* @__PURE__ */ React60.createElement(CodeOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     Tab,
     {
       value: "text",
-      label: /* @__PURE__ */ React72.createElement(Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React72.createElement(SubjectOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React60.createElement(Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React60.createElement(SubjectOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     Tab,
     {
       value: "json",
-      label: /* @__PURE__ */ React72.createElement(Tooltip, { title: "JSON output" }, /* @__PURE__ */ React72.createElement(DataObjectOutlined, { fontSize: "small" }))
-    }
-  ));
-}
-var SnackbarContext = createContext(null);
-function useSnackbar() {
-  const context = useContext(SnackbarContext);
-  if (!context) {
-    throw new Error("useSnackbar must be used within a SnackbarProvider");
-  }
-  return context;
-}
-function SnackbarProvider({ children }) {
-  const [message, setMessage] = useState(null);
-  const [duration, setDuration] = useState(3e3);
-  const showMessage = (text, customDuration = 3e3) => {
-    setMessage(text);
-    setDuration(customDuration);
-  };
-  const handleClose = () => {
-    setMessage(null);
-  };
-  return /* @__PURE__ */ React72.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React72.createElement(
-    Snackbar,
-    {
-      anchorOrigin: { vertical: "top", horizontal: "center" },
-      open: message !== null,
-      onClose: handleClose,
-      message,
-      autoHideDuration: duration,
-      sx: {
-        zIndex: 1e4,
-        // Very high z-index
-        position: "fixed"
-        // Make sure it's fixed positioned
-      }
+      label: /* @__PURE__ */ React60.createElement(Tooltip, { title: "JSON output" }, /* @__PURE__ */ React60.createElement(DataObjectOutlined, { fontSize: "small" }))
     }
   ));
 }
-function SaveTemplateDialog({
-  open,
-  onClose,
-  onSave,
-  onNameChange,
-  defaultName = "",
-  error: externalError = null
-}) {
-  const [templateName, setTemplateName] = useState(defaultName);
-  const [internalError, setInternalError] = useState("");
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  useEffect(() => {
-    if (open) {
-      setTemplateName(defaultName);
-      setInternalError("");
-      setIsSubmitting(false);
-    }
-  }, [open, defaultName]);
-  const displayError = externalError || internalError;
-  const handleNameChange = (e) => {
-    setTemplateName(e.target.value);
-    if (e.target.value.trim()) {
-      setInternalError("");
-    }
-    if (onNameChange) {
-      onNameChange();
-    }
-  };
-  const handleSave = () => __async(null, null, function* () {
-    if (!templateName.trim()) {
-      setInternalError("Please enter a template name");
-      return;
-    }
-    setIsSubmitting(true);
-    try {
-      const result = onSave(templateName);
-      if (result instanceof Promise) {
-        const success = yield result;
-        if (success) {
-          setTemplateName("");
-          setInternalError("");
-          onClose();
-        }
-      } else if (result !== false) {
-        setTemplateName("");
-        setInternalError("");
-        onClose();
-      }
-    } catch (error) {
-      console.error("Error saving template:", error);
-    } finally {
-      setIsSubmitting(false);
-    }
-  });
-  const handleCancel = () => {
-    setTemplateName("");
-    setInternalError("");
-    onClose();
-  };
-  return /* @__PURE__ */ React72.createElement(
-    Dialog,
-    {
-      open,
-      onClose: handleCancel,
-      maxWidth: "sm",
-      fullWidth: true
-    },
-    /* @__PURE__ */ React72.createElement(DialogTitle, null, "Save Email Template"),
-    /* @__PURE__ */ React72.createElement(DialogContent, null, /* @__PURE__ */ React72.createElement(Box, { sx: { pt: 1 } }, /* @__PURE__ */ React72.createElement(
-      TextField,
-      {
-        autoFocus: true,
-        margin: "dense",
-        id: "template-name",
-        label: "Template Name",
-        type: "text",
-        fullWidth: true,
-        variant: "outlined",
-        value: templateName,
-        onChange: handleNameChange,
-        error: !!displayError,
-        helperText: displayError,
-        onKeyPress: (e) => {
-          if (e.key === "Enter" && templateName.trim() && !displayError && !isSubmitting) {
-            handleSave();
-          }
-        },
-        disabled: isSubmitting
-      }
-    ))),
-    /* @__PURE__ */ React72.createElement(DialogActions, null, /* @__PURE__ */ React72.createElement(Button$1, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React72.createElement(
-      Button$1,
-      {
-        onClick: handleSave,
-        variant: "contained",
-        color: "primary",
-        disabled: !templateName.trim() || !!displayError || isSubmitting
-      },
-      isSubmitting ? "Saving..." : "Save Template"
-    ))
-  );
-}
-
-// src/app/email-canvas/save-button.tsx
 function SaveButton({ loadTemplates, saveAs }) {
-  const { saveTemplate, currentTemplateId, setCurrentTemplate } = useEmailEditor();
+  const { saveTemplate, currentTemplateId, currentTemplateKind, setCurrentTemplate } = useEmailEditor();
   const { showMessage } = useSnackbar();
   const [saveDialogOpen, setSaveDialogOpen] = useState(false);
   const document2 = useDocument();
+  const isSample = currentTemplateKind === "sample";
   const handleSave = () => __async(null, null, function* () {
     try {
-      if (!currentTemplateId || currentTemplateId === "welcome" || currentTemplateId.startsWith("sample/")) {
+      if (!currentTemplateId || isSample) {
         setSaveDialogOpen(true);
         return;
       }
@@ -5806,8 +6372,8 @@ function SaveButton({ loadTemplates, saveAs }) {
   const handleSaveAs = (templateName) => __async(null, null, function* () {
     try {
       if (saveAs) {
-        const { id: templateId, name } = yield saveAs(templateName, document2);
-        setCurrentTemplate(templateId, name);
+        const { id: templateId, slug } = yield saveAs(templateName, buildSavePayload(document2));
+        setCurrentTemplate(templateId, slug, "template");
         if (loadTemplates) {
           yield loadTemplates();
         }
@@ -5823,7 +6389,7 @@ function SaveButton({ loadTemplates, saveAs }) {
       return false;
     }
   });
-  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(
     IconButton,
     {
       onClick: handleSave,
@@ -5834,14 +6400,14 @@ function SaveButton({ loadTemplates, saveAs }) {
         }
       }
     },
-    /* @__PURE__ */ React72.createElement(Tooltip, { title: "Save template" }, /* @__PURE__ */ React72.createElement(SaveOutlined, { fontSize: "small" }))
-  ), /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React60.createElement(Tooltip, { title: isSample ? "Save as new template" : "Save template" }, /* @__PURE__ */ React60.createElement(SaveOutlined, { fontSize: "small" }))
+  ), /* @__PURE__ */ React60.createElement(
     SaveTemplateDialog,
     {
       open: saveDialogOpen,
       onClose: () => setSaveDialogOpen(false),
       onSave: handleSaveAs,
-      defaultName: currentTemplateId === "welcome" ? "Welcome Template" : "New Template"
+      defaultName: isSample ? "New Template" : "New Template"
     }
   ));
 }
@@ -5870,7 +6436,7 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
   });
   const validateTemplateName = (name) => {
     const nameExists = templates.some(
-      (template) => template.name.toLowerCase() === name.toLowerCase()
+      (template) => template.slug.toLowerCase() === name.toLowerCase()
     );
     if (nameExists) {
       setNameError("A template with this name already exists");
@@ -5888,10 +6454,10 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
     }
     try {
       if (saveAs) {
-        const { id: templateId, name } = yield saveAs(templateName, empty_email_message_default);
+        const { id: templateId, slug } = yield saveAs(templateName, buildSavePayload(empty_email_message_default));
         resetDocument(empty_email_message_default);
-        setCurrentTemplate(templateId, name);
-        loadTemplate(empty_email_message_default, templateId, name);
+        setCurrentTemplate(templateId, slug, "template");
+        loadTemplate(empty_email_message_default, templateId, slug, "template");
         if (loadTemplates) {
           yield loadTemplates();
         }
@@ -5905,7 +6471,7 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
     }
     return false;
   });
-  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(
     IconButton,
     {
       onClick: handleNewTemplate,
@@ -5916,8 +6482,8 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
         }
       }
     },
-    /* @__PURE__ */ React72.createElement(Tooltip, { title: "New template" }, /* @__PURE__ */ React72.createElement(Add, { fontSize: "small" }))
-  ), /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React60.createElement(Tooltip, { title: "New template" }, /* @__PURE__ */ React60.createElement(Add, { fontSize: "small" }))
+  ), /* @__PURE__ */ React60.createElement(
     SaveTemplateDialog,
     {
       open: saveDialogOpen,
@@ -5932,6 +6498,48 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
     }
   ));
 }
+function SubjectInput() {
+  var _a;
+  const document2 = useDocument();
+  const root = document2.root;
+  if (!root || root.type !== "EmailLayout") return null;
+  const data = root.data;
+  const subject = (_a = data.subject) != null ? _a : "";
+  const handleChange = (value) => {
+    setDocument({
+      root: __spreadProps(__spreadValues({}, root), { data: __spreadProps(__spreadValues({}, data), { subject: value }) })
+    });
+  };
+  return /* @__PURE__ */ React60.createElement(
+    Box,
+    {
+      sx: {
+        px: 3,
+        py: 1.25,
+        borderBottom: 1,
+        borderColor: "divider",
+        backgroundColor: "white",
+        position: "sticky",
+        top: 49,
+        zIndex: "appBar",
+        display: "flex",
+        alignItems: "center",
+        gap: 1.5
+      }
+    },
+    /* @__PURE__ */ React60.createElement(Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
+    /* @__PURE__ */ React60.createElement(
+      InputBase,
+      {
+        fullWidth: true,
+        placeholder: "Email subject \u2014 supports {{variables}}",
+        value: subject,
+        onChange: (e) => handleChange(e.target.value),
+        sx: { fontSize: 14 }
+      }
+    )
+  );
+}
 
 // src/app/email-canvas/index.tsx
 function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true }) {
@@ -5964,19 +6572,19 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
   const renderMainPanel = () => {
     switch (selectedMainTab) {
       case "editor":
-        return /* @__PURE__ */ React72.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React72.createElement(EditorBlock, { id: "root" }));
+        return /* @__PURE__ */ React60.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React60.createElement(EditorBlock, { id: "root" }));
       case "preview":
-        return /* @__PURE__ */ React72.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React72.createElement(Reader, { document: document2, rootBlockId: "root" }));
+        return /* @__PURE__ */ React60.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React60.createElement(Reader, { document: document2, rootBlockId: "root" }));
       case "html":
-        return /* @__PURE__ */ React72.createElement(HtmlPanel, null);
+        return /* @__PURE__ */ React60.createElement(HtmlPanel, null);
       case "text":
-        return /* @__PURE__ */ React72.createElement(TextPanel, null);
+        return /* @__PURE__ */ React60.createElement(TextPanel, null);
       case "json":
-        return /* @__PURE__ */ React72.createElement(JsonPanel, null);
+        return /* @__PURE__ */ React60.createElement(JsonPanel, null);
     }
   };
   const showSaveButtons = persistenceEnabled;
-  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(
     Stack,
     {
       sx: {
@@ -5993,10 +6601,10 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
       justifyContent: "space-between",
       alignItems: "center"
     },
-    samplesDrawerEnabled && /* @__PURE__ */ React72.createElement(ToggleSamplesPanelButton, null),
-    /* @__PURE__ */ React72.createElement(Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React72.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React72.createElement(MainTabsGroup, null)), /* @__PURE__ */ React72.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React72.createElement(ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React72.createElement(ToggleButton, { value: "desktop" }, /* @__PURE__ */ React72.createElement(Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React72.createElement(MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React72.createElement(ToggleButton, { value: "mobile" }, /* @__PURE__ */ React72.createElement(Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React72.createElement(PhoneIphoneOutlined, { fontSize: "small" })))), showSaveButtons && /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(NewTemplateButton, { loadTemplates, saveAs }), /* @__PURE__ */ React72.createElement(SaveButton, { loadTemplates, saveAs })))),
-    /* @__PURE__ */ React72.createElement(ToggleInspectorPanelButton, null)
-  ), /* @__PURE__ */ React72.createElement(Box, { sx: {
+    samplesDrawerEnabled && /* @__PURE__ */ React60.createElement(ToggleSamplesPanelButton, null),
+    /* @__PURE__ */ React60.createElement(Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React60.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React60.createElement(MainTabsGroup, null)), /* @__PURE__ */ React60.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React60.createElement(ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React60.createElement(ToggleButton, { value: "desktop" }, /* @__PURE__ */ React60.createElement(Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React60.createElement(MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React60.createElement(ToggleButton, { value: "mobile" }, /* @__PURE__ */ React60.createElement(Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React60.createElement(PhoneIphoneOutlined, { fontSize: "small" })))), showSaveButtons && /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(NewTemplateButton, { loadTemplates, saveAs }), /* @__PURE__ */ React60.createElement(SaveButton, { loadTemplates, saveAs })))),
+    /* @__PURE__ */ React60.createElement(ToggleInspectorPanelButton, null)
+  ), selectedMainTab === "editor" && /* @__PURE__ */ React60.createElement(SubjectInput, null), /* @__PURE__ */ React60.createElement(Box, { sx: {
     paddingBottom: "50px",
     minWidth: 370
   } }, renderMainPanel()));
@@ -6046,6 +6654,8 @@ var EmailEditorInternal = forwardRef((props, ref) => {
     loadTemplate,
     deleteTemplate,
     copyTemplate,
+    renameTemplate,
+    setTemplateKind,
     saveAs,
     onChange
   } = props;
@@ -6078,7 +6688,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
       return getDocument();
     }
   }));
-  return /* @__PURE__ */ React72.createElement(Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React60.createElement(
     InspectorDrawer,
     {
       enterDuration: drawerEnterDuration,
@@ -6086,7 +6696,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
       deleteTemplate,
       copyTemplate
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     SamplesDrawer,
     {
       enterDuration: drawerEnterDuration,
@@ -6096,9 +6706,13 @@ var EmailEditorInternal = forwardRef((props, ref) => {
       loadTemplates,
       loadTemplate,
       currentTemplateId,
-      deleteTemplate
+      deleteTemplate,
+      copyTemplate,
+      renameTemplate,
+      setTemplateKind,
+      saveAs
     }
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React60.createElement(
     Stack,
     {
       sx: {
@@ -6107,7 +6721,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
         transition: [marginLeftTransition, marginRightTransition].join(", ")
       }
     },
-    /* @__PURE__ */ React72.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
+    /* @__PURE__ */ React60.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
   ));
 });
 var EmailEditor = forwardRef((props, ref) => {
@@ -6127,6 +6741,8 @@ var EmailEditor = forwardRef((props, ref) => {
     loadTemplate,
     deleteTemplate,
     copyTemplate,
+    renameTemplate,
+    setTemplateKind,
     saveAs,
     theme
   } = props;
@@ -6142,7 +6758,7 @@ var EmailEditor = forwardRef((props, ref) => {
   useEffect(() => {
     setPersistenceEnabled(persistenceEnabled);
   }, [persistenceEnabled]);
-  return /* @__PURE__ */ React72.createElement(ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React72.createElement(CssBaseline, null), /* @__PURE__ */ React72.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React72.createElement(SnackbarProvider, null, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React60.createElement(ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React60.createElement(CssBaseline, null), /* @__PURE__ */ React60.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React60.createElement(SnackbarProvider, null, /* @__PURE__ */ React60.createElement(
     EmailEditorProvider,
     {
       initialTemplate: resolvedTemplate,
@@ -6151,7 +6767,7 @@ var EmailEditor = forwardRef((props, ref) => {
       onSave,
       onChange
     },
-    /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React60.createElement(
       EmailEditorInternal,
       {
         ref,
@@ -6164,6 +6780,8 @@ var EmailEditor = forwardRef((props, ref) => {
         loadTemplate,
         deleteTemplate,
         copyTemplate,
+        renameTemplate,
+        setTemplateKind,
         saveAs,
         onChange
       }
@@ -6173,6 +6791,6 @@ var EmailEditor = forwardRef((props, ref) => {
 EmailEditor.displayName = "EmailEditor";
 EmailEditorInternal.displayName = "EmailEditorInternal";
 
-export { avatar_default as Avatar, AvatarProps, AvatarPropsDefaults, AvatarPropsSchema, BlockConfiguration, button_default as Button, ButtonProps, ButtonPropsDefaults, ButtonPropsSchema, columns_container_default as ColumnsContainer, ColumnsContainerProps, ColumnsContainerPropsSchema, ColumnsContainerReader, container_default as Container, ContainerProps, ContainerPropsSchema, ContainerReader, divider_default as Divider, DividerProps, DividerPropsDefaults, DividerPropsSchema, DocumentBlocksDictionary, EmailEditor, EmailEditorProvider, EmailLayoutPropsSchema, EmailLayoutReader, EmailMarkdown, heading_default as Heading, HeadingProps, HeadingPropsDefaults, HeadingPropsSchema, html_default as Html, HtmlProps, HtmlPropsSchema, image_default as Image, ImageProps, ImagePropsSchema, Reader, ReaderBlock, ReaderBlockSchema, ReaderDocumentSchema, signature_default as Signature, SignatureProps, SignaturePropsDefaults, SignaturePropsSchema, spacer_default as Spacer, SpacerProps, SpacerPropsDefaults, SpacerPropsSchema, Text, TextProps, TextPropsDefaults, TextPropsSchema, buildBlockComponent, buildBlockConfigurationDictionary, buildBlockConfigurationSchema, htmlToEditorConfig, renderToStaticMarkup, renderToText, theme_default as theme, useEmailEditor };
+export { avatar_default as Avatar, AvatarProps, AvatarPropsDefaults, AvatarPropsSchema, BlockConfiguration, button_default as Button, ButtonProps, ButtonPropsDefaults, ButtonPropsSchema, columns_container_default as ColumnsContainer, ColumnsContainerProps, ColumnsContainerPropsSchema, ColumnsContainerReader, container_default as Container, ContainerProps, ContainerPropsSchema, ContainerReader, divider_default as Divider, DividerProps, DividerPropsDefaults, DividerPropsSchema, DocumentBlocksDictionary, EmailEditor, EmailEditorProvider, EmailLayoutPropsSchema, EmailLayoutReader, EmailMarkdown, heading_default as Heading, HeadingProps, HeadingPropsDefaults, HeadingPropsSchema, html_default as Html, HtmlProps, HtmlPropsSchema, image_default as Image, ImageProps, ImagePropsSchema, Reader, ReaderBlock, ReaderBlockSchema, ReaderDocumentSchema, signature_default as Signature, SignatureProps, SignaturePropsDefaults, SignaturePropsSchema, spacer_default as Spacer, SpacerProps, SpacerPropsDefaults, SpacerPropsSchema, TemplateVariableSchema, Text, TextProps, TextPropsDefaults, TextPropsSchema, buildBlockComponent, buildBlockConfigurationDictionary, buildBlockConfigurationSchema, htmlToEditorConfig, renderToStaticMarkup, renderToText, theme_default as theme, useEmailEditor };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map