@kontakto/email-template-editor 1.5.1 → 2.0.0

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var DOMPurify = require('dompurify');
 var marked = require('marked');
-var React72 = require('react');
+var React60 = require('react');
 var zod = require('zod');
 var server = require('react-dom/server');
 var styles = require('@mui/material/styles');
@@ -18,7 +18,7 @@ var htmlfy = require('htmlfy');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
-var React72__default = /*#__PURE__*/_interopDefault(React72);
+var React60__default = /*#__PURE__*/_interopDefault(React60);
 var hljs__default = /*#__PURE__*/_interopDefault(hljs);
 var jsonHighlighter__default = /*#__PURE__*/_interopDefault(jsonHighlighter);
 var xmlHighlighter__default = /*#__PURE__*/_interopDefault(xmlHighlighter);
@@ -168,8 +168,8 @@ function renderMarkdownString(str) {
 }
 function EmailMarkdown(_a) {
   var _b = _a, { markdown } = _b, props = __objRest(_b, ["markdown"]);
-  const data = React72.useMemo(() => renderMarkdownString(markdown), [markdown]);
-  return /* @__PURE__ */ React72__default.default.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
+  const data = React60.useMemo(() => renderMarkdownString(markdown), [markdown]);
+  return /* @__PURE__ */ React60__default.default.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
 }
 var FONT_FAMILY_SCHEMA = zod.z.enum([
   "MODERN_SANS",
@@ -245,9 +245,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__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: text });
+    return /* @__PURE__ */ React60__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: text });
   }
-  return /* @__PURE__ */ React72__default.default.createElement("div", { style: wStyle }, text);
+  return /* @__PURE__ */ React60__default.default.createElement("div", { style: wStyle }, text);
 }
 var PADDING_SCHEMA2 = zod.z.object({
   top: zod.z.number(),
@@ -296,7 +296,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__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React60__default.default.createElement(
     "img",
     {
       alt,
@@ -444,14 +444,14 @@ function Button({ style, props }) {
     padding: `${padding[0]}px ${padding[1]}px`,
     textDecoration: "none"
   };
-  return /* @__PURE__ */ React72__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React72__default.default.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React60__default.default.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React60__default.default.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__default.default.createElement("span", null, text), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement("span", null, text), /* @__PURE__ */ React60__default.default.createElement(
     "span",
     {
       dangerouslySetInnerHTML: {
@@ -500,7 +500,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__default.default.createElement("div", { style: wStyle }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement("div", { style: wStyle }, /* @__PURE__ */ React60__default.default.createElement(
     "table",
     {
       align: "center",
@@ -509,7 +509,7 @@ function ColumnsContainer({ style, columns, props }) {
       border: 0,
       style: { tableLayout: "fixed", borderCollapse: "collapse" }
     },
-    /* @__PURE__ */ React72__default.default.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React72__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React72__default.default.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React72__default.default.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React72__default.default.createElement(TableCell, { index: 2, props: blockProps, columns })))
+    /* @__PURE__ */ React60__default.default.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React60__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React60__default.default.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React60__default.default.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React60__default.default.createElement(TableCell, { index: 2, props: blockProps, columns })))
   ));
 }
 function TableCell({ index, props, columns }) {
@@ -527,7 +527,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__default.default.createElement("td", { style }, children);
+  return /* @__PURE__ */ React60__default.default.createElement("td", { style }, children);
 }
 function getPaddingBefore(index, { columnsGap, columnsCount }) {
   if (index === 0) {
@@ -589,9 +589,9 @@ function Container({ style, children }) {
     padding: getPadding5(style == null ? void 0 : style.padding)
   };
   if (!children) {
-    return /* @__PURE__ */ React72__default.default.createElement("div", { style: wStyle });
+    return /* @__PURE__ */ React60__default.default.createElement("div", { style: wStyle });
   }
-  return /* @__PURE__ */ React72__default.default.createElement("div", { style: wStyle }, children);
+  return /* @__PURE__ */ React60__default.default.createElement("div", { style: wStyle }, children);
 }
 var container_default = Container;
 var COLOR_SCHEMA5 = zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
@@ -625,7 +625,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__default.default.createElement("div", { style: st }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement("div", { style: st }, /* @__PURE__ */ React60__default.default.createElement(
     "hr",
     {
       style: {
@@ -715,11 +715,11 @@ function Heading({ props, style }) {
   };
   switch (level) {
     case "h1":
-      return /* @__PURE__ */ React72__default.default.createElement("h1", { style: hStyle }, text);
+      return /* @__PURE__ */ React60__default.default.createElement("h1", { style: hStyle }, text);
     case "h2":
-      return /* @__PURE__ */ React72__default.default.createElement("h2", { style: hStyle }, text);
+      return /* @__PURE__ */ React60__default.default.createElement("h2", { style: hStyle }, text);
     case "h3":
-      return /* @__PURE__ */ React72__default.default.createElement("h3", { style: hStyle }, text);
+      return /* @__PURE__ */ React60__default.default.createElement("h3", { style: hStyle }, text);
   }
 }
 function getFontSize(level) {
@@ -801,9 +801,9 @@ function Html({ style, props }) {
     padding: getPadding8(style == null ? void 0 : style.padding)
   };
   if (!children) {
-    return /* @__PURE__ */ React72__default.default.createElement("div", { style: cssStyle });
+    return /* @__PURE__ */ React60__default.default.createElement("div", { style: cssStyle });
   }
-  return /* @__PURE__ */ React72__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
+  return /* @__PURE__ */ React60__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
 }
 var html_default = Html;
 var PADDING_SCHEMA9 = zod.z.object({
@@ -839,7 +839,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__default.default.createElement(
+  const imageElement = /* @__PURE__ */ React60__default.default.createElement(
     "img",
     {
       alt: (_f = props == null ? void 0 : props.alt) != null ? _f : "",
@@ -859,9 +859,9 @@ function Image({ style, props }) {
     }
   );
   if (!linkHref) {
-    return /* @__PURE__ */ React72__default.default.createElement("div", { style: sectionStyle }, imageElement);
+    return /* @__PURE__ */ React60__default.default.createElement("div", { style: sectionStyle }, imageElement);
   }
-  return /* @__PURE__ */ React72__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React72__default.default.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
+  return /* @__PURE__ */ React60__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React60__default.default.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
 }
 var image_default = Image;
 var FONT_FAMILY_SCHEMA5 = zod.z.enum([
@@ -1007,7 +1007,7 @@ function Signature({ style, props }) {
     color: linkColor,
     textDecoration: "none"
   };
-  const imageElement = imageUrl ? /* @__PURE__ */ React72__default.default.createElement(
+  const imageElement = imageUrl ? /* @__PURE__ */ React60__default.default.createElement(
     "img",
     {
       src: imageUrl,
@@ -1026,18 +1026,18 @@ function Signature({ style, props }) {
     }
   ) : null;
   const contactParts = [];
-  if (email) contactParts.push(/* @__PURE__ */ React72__default.default.createElement("a", { key: "email", href: `mailto:${email}`, style: linkStyle }, email));
-  if (phone) contactParts.push(/* @__PURE__ */ React72__default.default.createElement("a", { key: "phone", href: `tel:${phone}`, style: linkStyle }, phone));
+  if (email) contactParts.push(/* @__PURE__ */ React60__default.default.createElement("a", { key: "email", href: `mailto:${email}`, style: linkStyle }, email));
+  if (phone) contactParts.push(/* @__PURE__ */ React60__default.default.createElement("a", { key: "phone", href: `tel:${phone}`, style: linkStyle }, phone));
   if (website) {
     const href = website.startsWith("http") ? website : `https://${website}`;
-    contactParts.push(/* @__PURE__ */ React72__default.default.createElement("a", { key: "website", href, style: linkStyle, target: "_blank" }, website));
+    contactParts.push(/* @__PURE__ */ React60__default.default.createElement("a", { key: "website", href, style: linkStyle, target: "_blank" }, website));
   }
-  const textContent = /* @__PURE__ */ React72__default.default.createElement("div", null, name && /* @__PURE__ */ React72__default.default.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React72__default.default.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React72__default.default.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React72__default.default.createElement("p", { style: detailStyle }, address), contactParts.length > 0 && /* @__PURE__ */ React72__default.default.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, contactParts.map((part, i) => /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, { key: i }, i > 0 && /* @__PURE__ */ React72__default.default.createElement("span", { style: detailStyle }, " \xB7 "), part))));
-  const greetingElement = greeting ? /* @__PURE__ */ React72__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
+  const textContent = /* @__PURE__ */ React60__default.default.createElement("div", null, name && /* @__PURE__ */ React60__default.default.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, address), contactParts.length > 0 && /* @__PURE__ */ React60__default.default.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, contactParts.map((part, i) => /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, { key: i }, i > 0 && /* @__PURE__ */ React60__default.default.createElement("span", { style: detailStyle }, " \xB7 "), part))));
+  const greetingElement = greeting ? /* @__PURE__ */ React60__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
   if (layout === "vertical") {
-    return /* @__PURE__ */ React72__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React72__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
+    return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React60__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
   }
-  return /* @__PURE__ */ React72__default.default.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React72__default.default.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React72__default.default.createElement("tbody", null, /* @__PURE__ */ React72__default.default.createElement("tr", null, imageElement && /* @__PURE__ */ React72__default.default.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React72__default.default.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
+  return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React60__default.default.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React60__default.default.createElement("tbody", null, /* @__PURE__ */ React60__default.default.createElement("tr", null, imageElement && /* @__PURE__ */ React60__default.default.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React60__default.default.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
 }
 var signature_default = Signature;
 var SpacerPropsSchema = zod.z.object({
@@ -1054,13 +1054,13 @@ function Spacer({ props }) {
   const style = {
     height: (_a = props == null ? void 0 : props.height) != null ? _a : SpacerPropsDefaults.height
   };
-  return /* @__PURE__ */ React72__default.default.createElement("div", { style });
+  return /* @__PURE__ */ React60__default.default.createElement("div", { style });
 }
 var spacer_default = Spacer;
 function buildBlockComponent(blocks) {
   return function BlockComponent({ type, data }) {
     const Component = blocks[type].Component;
-    return /* @__PURE__ */ React72__default.default.createElement(Component, __spreadValues({}, data));
+    return /* @__PURE__ */ React60__default.default.createElement(Component, __spreadValues({}, data));
   };
 }
 function buildBlockConfigurationSchema(blocks) {
@@ -1097,9 +1097,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__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
+    cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ React60__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
   }
-  return /* @__PURE__ */ React72__default.default.createElement(columns_container_default, { props: restProps, columns: cols, style });
+  return /* @__PURE__ */ React60__default.default.createElement(columns_container_default, { props: restProps, columns: cols, style });
 }
 var ContainerPropsSchema2 = zod.z.object({
   style: ContainerPropsSchema.shape.style,
@@ -1110,7 +1110,7 @@ var ContainerPropsSchema2 = zod.z.object({
 function ContainerReader({ style, props }) {
   var _a;
   const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
-  return /* @__PURE__ */ React72__default.default.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React72__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
+  return /* @__PURE__ */ React60__default.default.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React60__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
 }
 var COLOR_SCHEMA9 = zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
 var FONT_FAMILY_SCHEMA6 = zod.z.enum([
@@ -1124,14 +1124,21 @@ var FONT_FAMILY_SCHEMA6 = zod.z.enum([
   "BOOK_SERIF",
   "MONOSPACE"
 ]).nullable().optional();
+var TemplateVariableSchema = zod.z.object({
+  name: zod.z.string(),
+  description: zod.z.string().optional().nullable()
+});
 var EmailLayoutPropsSchema = zod.z.object({
   backdropColor: COLOR_SCHEMA9,
+  backdropDisabled: zod.z.boolean().optional().nullable(),
   borderColor: COLOR_SCHEMA9,
   borderRadius: zod.z.number().optional().nullable(),
   canvasColor: COLOR_SCHEMA9,
   textColor: COLOR_SCHEMA9,
   fontFamily: FONT_FAMILY_SCHEMA6,
-  childrenIds: zod.z.array(zod.z.string()).optional().nullable()
+  childrenIds: zod.z.array(zod.z.string()).optional().nullable(),
+  subject: zod.z.string().optional().nullable(),
+  variables: zod.z.array(TemplateVariableSchema).optional().nullable()
 });
 function getFontFamily6(fontFamily) {
   const f = fontFamily != null ? fontFamily : "MODERN_SANS";
@@ -1165,24 +1172,29 @@ function getBorder2({ borderColor }) {
 function EmailLayoutReader(props) {
   var _a, _b, _c, _d, _e;
   const childrenIds = (_a = props.childrenIds) != null ? _a : [];
-  return /* @__PURE__ */ React72__default.default.createElement(
+  const baseStyle = {
+    color: (_b = props.textColor) != null ? _b : "#262626",
+    fontFamily: getFontFamily6(props.fontFamily),
+    fontSize: "16px",
+    fontWeight: "400",
+    letterSpacing: "0.15008px",
+    lineHeight: "1.5",
+    margin: "0"
+  };
+  if (props.backdropDisabled) {
+    return /* @__PURE__ */ React60__default.default.createElement("div", { style: baseStyle }, childrenIds.map((childId) => /* @__PURE__ */ React60__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
+  }
+  return /* @__PURE__ */ React60__default.default.createElement(
     "div",
     {
-      style: {
-        backgroundColor: (_b = props.backdropColor) != null ? _b : "#F5F5F5",
-        color: (_c = props.textColor) != null ? _c : "#262626",
-        fontFamily: getFontFamily6(props.fontFamily),
-        fontSize: "16px",
-        fontWeight: "400",
-        letterSpacing: "0.15008px",
-        lineHeight: "1.5",
-        margin: "0",
+      style: __spreadProps(__spreadValues({}, baseStyle), {
+        backgroundColor: (_c = props.backdropColor) != null ? _c : "#F5F5F5",
         padding: "32px 0",
         minHeight: "100%",
         width: "100%"
-      }
+      })
     },
-    /* @__PURE__ */ React72__default.default.createElement(
+    /* @__PURE__ */ React60__default.default.createElement(
       "table",
       {
         align: "center",
@@ -1192,6 +1204,7 @@ function EmailLayoutReader(props) {
           maxWidth: "600px",
           backgroundColor: (_d = props.canvasColor) != null ? _d : "#FFFFFF",
           borderRadius: (_e = props.borderRadius) != null ? _e : void 0,
+          overflow: props.borderRadius ? "hidden" : void 0,
           border: getBorder2(props)
         },
         role: "presentation",
@@ -1199,19 +1212,19 @@ function EmailLayoutReader(props) {
         cellPadding: "0",
         border: 0
       },
-      /* @__PURE__ */ React72__default.default.createElement("tbody", null, /* @__PURE__ */ React72__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React72__default.default.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React72__default.default.createElement(ReaderBlock, { key: childId, id: childId })))))
+      /* @__PURE__ */ React60__default.default.createElement("tbody", null, /* @__PURE__ */ React60__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React60__default.default.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React60__default.default.createElement(ReaderBlock, { key: childId, id: childId })))))
     )
   );
 }
 
 // src/email-builder/reader/core.tsx
-var ReaderContext = React72.createContext({});
+var ReaderContext = React60.createContext({});
 function useReaderDocument() {
-  return React72.useContext(ReaderContext);
+  return React60.useContext(ReaderContext);
 }
 function ReaderBlock({ id }) {
   const document2 = useReaderDocument();
-  return document2[id] ? /* @__PURE__ */ React72__default.default.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
+  return document2[id] ? /* @__PURE__ */ React60__default.default.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
 }
 var READER_DICTIONARY = buildBlockConfigurationDictionary({
   ColumnsContainer: {
@@ -1268,13 +1281,13 @@ var ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
 var ReaderDocumentSchema = zod.z.record(zod.z.string(), ReaderBlockSchema);
 var BaseReaderBlock = buildBlockComponent(READER_DICTIONARY);
 function Reader({ document: document2, rootBlockId }) {
-  return /* @__PURE__ */ React72__default.default.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React72__default.default.createElement(ReaderBlock, { id: rootBlockId }));
+  return /* @__PURE__ */ React60__default.default.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React60__default.default.createElement(ReaderBlock, { id: rootBlockId }));
 }
 
 // src/email-builder/renderers/render-to-static-markup.tsx
 function renderToStaticMarkup(document2, { rootBlockId }) {
   return "<!DOCTYPE html>" + server.renderToStaticMarkup(
-    /* @__PURE__ */ React72__default.default.createElement("html", null, /* @__PURE__ */ React72__default.default.createElement("body", null, /* @__PURE__ */ React72__default.default.createElement(Reader, { document: document2, rootBlockId })))
+    /* @__PURE__ */ React60__default.default.createElement("html", null, /* @__PURE__ */ React60__default.default.createElement("body", null, /* @__PURE__ */ React60__default.default.createElement(Reader, { document: document2, rootBlockId })))
   );
 }
 
@@ -2015,70 +2028,95 @@ function setSelectedScreenSize(selectedScreenSize) {
 function setPersistenceEnabled(persistenceEnabled) {
   return editorStateStore.setState({ persistenceEnabled });
 }
-var EmailEditorContext = React72.createContext(null);
+
+// 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 = React60.createContext(null);
 var EmailEditorProvider = ({
   children,
   initialTemplateId = null,
   initialTemplateName = null,
   onSave
 }) => {
-  const [currentTemplateId, setCurrentTemplateId] = React72.useState(initialTemplateId);
-  const [currentTemplateName, setCurrentTemplateName] = React72.useState(initialTemplateName);
-  const saveListenersRef = React72.useRef([]);
-  const onSaveRef = React72.useRef(onSave);
+  const [currentTemplateId, setCurrentTemplateId] = React60.useState(initialTemplateId);
+  const [currentTemplateName, setCurrentTemplateName] = React60.useState(initialTemplateName);
+  const [currentTemplateKind, setCurrentTemplateKind] = React60.useState(null);
+  const saveListenersRef = React60.useRef([]);
+  const onSaveRef = React60.useRef(onSave);
   onSaveRef.current = onSave;
-  const saveTemplate = React72.useCallback(() => {
+  const saveTemplate = React60.useCallback(() => {
     const currentDoc = getDocument();
     saveListenersRef.current.forEach((listener) => listener(currentDoc));
     if (onSaveRef.current) {
-      onSaveRef.current(currentDoc);
+      onSaveRef.current(buildSavePayload(currentDoc));
     }
     return currentDoc;
   }, []);
-  const loadTemplate = React72.useCallback((newTemplate, templateId, templateName) => {
+  const loadTemplate = React60.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 = React72.useCallback((templateId, templateName) => {
+  const setCurrentTemplate = React60.useCallback((templateId, templateName, kind) => {
     setCurrentTemplateId(templateId);
     setCurrentTemplateName(templateName);
+    if (kind !== void 0) {
+      setCurrentTemplateKind(kind);
+    }
   }, []);
-  const registerSaveListener = React72.useCallback((callback) => {
+  const registerSaveListener = React60.useCallback((callback) => {
     saveListenersRef.current = [...saveListenersRef.current, callback];
     return () => {
       saveListenersRef.current = saveListenersRef.current.filter((listener) => listener !== callback);
     };
   }, []);
-  const value = React72.useMemo(() => ({
+  const value = React60.useMemo(() => ({
     currentTemplateId,
     currentTemplateName,
+    currentTemplateKind,
     saveTemplate,
     loadTemplate,
     registerSaveListener,
     setCurrentTemplate
-  }), [currentTemplateId, currentTemplateName, saveTemplate, loadTemplate, registerSaveListener, setCurrentTemplate]);
-  return /* @__PURE__ */ React72__default.default.createElement(EmailEditorContext.Provider, { value }, children);
+  }), [currentTemplateId, currentTemplateName, currentTemplateKind, saveTemplate, loadTemplate, registerSaveListener, setCurrentTemplate]);
+  return /* @__PURE__ */ React60__default.default.createElement(EmailEditorContext.Provider, { value }, children);
 };
 var useEmailEditor = () => {
-  const context = React72.useContext(EmailEditorContext);
+  const context = React60.useContext(EmailEditorContext);
   if (!context) {
     throw new Error("useEmailEditor must be used within an EmailEditorProvider");
   }
   return context;
 };
 function BaseSidebarPanel({ title, children }) {
-  return /* @__PURE__ */ React72__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React72__default.default.createElement(material.Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, title), /* @__PURE__ */ React72__default.default.createElement(material.Stack, { spacing: 5, mb: 3 }, children));
+  return /* @__PURE__ */ React60__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, title), /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 5, mb: 3 }, children));
 }
 function RadioGroupInput({ label, children, defaultValue, onChange }) {
-  const [value, setValue] = React72.useState(defaultValue);
-  React72.useEffect(() => {
+  const [value, setValue] = React60.useState(defaultValue);
+  React60.useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React72__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React60__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React60__default.default.createElement(
     material.ToggleButtonGroup,
     {
       exclusive: true,
@@ -2098,7 +2136,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__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React60__default.default.createElement(
     material.Slider,
     __spreadProps(__spreadValues({}, props), {
       value,
@@ -2109,14 +2147,14 @@ function RawSliderInput(_a) {
         setValue(value2);
       }
     })
-  ), /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React72__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1 } }, value, units)));
+  ), /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React60__default.default.createElement(material.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] = React72.useState(defaultValue);
-  return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React72__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React72__default.default.createElement(
+  const [value, setValue] = React60.useState(defaultValue);
+  return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React60__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React60__default.default.createElement(
     RawSliderInput,
     __spreadValues({
       value,
@@ -2128,12 +2166,12 @@ function SliderInput(_a) {
   ));
 }
 function TextInput({ helperText, label, placeholder, rows, InputProps: InputProps2, defaultValue, onChange }) {
-  const [value, setValue] = React72.useState(defaultValue);
+  const [value, setValue] = React60.useState(defaultValue);
   const isMultiline = typeof rows === "number" && rows > 1;
-  React72.useEffect(() => {
+  React60.useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(
     material.TextField,
     {
       fullWidth: true,
@@ -2159,7 +2197,7 @@ var TILE_BUTTON = {
 };
 function Swatch({ paletteColors, value, onChange }) {
   const renderButton2 = (colorValue) => {
-    return /* @__PURE__ */ React72__default.default.createElement(
+    return /* @__PURE__ */ React60__default.default.createElement(
       material.Button,
       {
         key: colorValue,
@@ -2178,7 +2216,7 @@ function Swatch({ paletteColors, value, onChange }) {
       }
     );
   };
-  return /* @__PURE__ */ React72__default.default.createElement(material.Box, { width: "100%", sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr" } }, paletteColors.map((c) => renderButton2(c)));
+  return /* @__PURE__ */ React60__default.default.createElement(material.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
@@ -2245,7 +2283,7 @@ var SX = {
   }
 };
 function Picker({ value, onChange }) {
-  return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React72__default.default.createElement(reactColorful.HexColorPicker, { color: value, onChange }), /* @__PURE__ */ React72__default.default.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React72__default.default.createElement(material.Box, { pt: 1 }, /* @__PURE__ */ React72__default.default.createElement(reactColorful.HexColorInput, { prefixed: true, color: value, onChange })));
+  return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React60__default.default.createElement(reactColorful.HexColorPicker, { color: value, onChange }), /* @__PURE__ */ React60__default.default.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React60__default.default.createElement(material.Box, { pt: 1 }, /* @__PURE__ */ React60__default.default.createElement(reactColorful.HexColorInput, { prefixed: true, color: value, onChange })));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/base-color-input.tsx
@@ -2258,8 +2296,8 @@ var BUTTON_SX = {
   bgcolor: "#FFFFFF"
 };
 function ColorInput({ label, defaultValue, onChange, nullable }) {
-  const [anchorEl, setAnchorEl] = React72.useState(null);
-  const [value, setValue] = React72.useState(defaultValue);
+  const [anchorEl, setAnchorEl] = React60.useState(null);
+  const [value, setValue] = React60.useState(defaultValue);
   const handleClickOpen = (event) => {
     setAnchorEl(event.currentTarget);
   };
@@ -2270,7 +2308,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
     if (typeof value !== "string" || value.trim().length === 0) {
       return null;
     }
-    return /* @__PURE__ */ React72__default.default.createElement(
+    return /* @__PURE__ */ React60__default.default.createElement(
       material.ButtonBase,
       {
         onClick: () => {
@@ -2278,16 +2316,16 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
           onChange(null);
         }
       },
-      /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
+      /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
     );
   };
   const renderOpenButton = () => {
     if (value) {
-      return /* @__PURE__ */ React72__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
+      return /* @__PURE__ */ React60__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
     }
-    return /* @__PURE__ */ React72__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" }));
+    return /* @__PURE__ */ React60__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" }));
   };
-  return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React72__default.default.createElement(material.InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React72__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React60__default.default.createElement(material.InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React60__default.default.createElement(
     material.Menu,
     {
       anchorEl,
@@ -2297,7 +2335,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
         sx: { height: "auto", padding: 0 }
       }
     },
-    /* @__PURE__ */ React72__default.default.createElement(
+    /* @__PURE__ */ React60__default.default.createElement(
       Picker,
       {
         value: value || "",
@@ -2312,10 +2350,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__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
+  return /* @__PURE__ */ React60__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
 }
 function NullableColorInput(props) {
-  return /* @__PURE__ */ React72__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
+  return /* @__PURE__ */ React60__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
 }
 
 // src/editor/blocks/helpers/font-family.ts
@@ -2368,13 +2406,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__default.default.createElement(material.MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
+var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React60__default.default.createElement(material.MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
 function NullableFontFamily({ label, onChange, defaultValue }) {
-  const [value, setValue] = React72.useState(defaultValue != null ? defaultValue : "inherit");
-  React72.useEffect(() => {
+  const [value, setValue] = React60.useState(defaultValue != null ? defaultValue : "inherit");
+  React60.useEffect(() => {
     setValue(defaultValue != null ? defaultValue : "inherit");
   }, [defaultValue]);
-  return /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(
     material.TextField,
     {
       select: true,
@@ -2387,23 +2425,23 @@ function NullableFontFamily({ label, onChange, defaultValue }) {
         onChange(v === null ? null : v);
       }
     },
-    /* @__PURE__ */ React72__default.default.createElement(material.MenuItem, { value: "inherit" }, "Match email settings"),
+    /* @__PURE__ */ React60__default.default.createElement(material.MenuItem, { value: "inherit" }, "Match email settings"),
     OPTIONS
   );
 }
 function FontSizeInput({ label, defaultValue, onChange }) {
-  const [value, setValue] = React72.useState(defaultValue);
-  React72.useEffect(() => {
+  const [value, setValue] = React60.useState(defaultValue);
+  React60.useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
   const handleChange = (value2) => {
     setValue(value2);
     onChange(value2);
   };
-  return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React72__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React60__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React60__default.default.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.TextFieldsOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.TextFieldsOutlined, { sx: { fontSize: 16 } }),
       value,
       setValue: handleChange,
       units: "px",
@@ -2414,11 +2452,11 @@ function FontSizeInput({ label, defaultValue, onChange }) {
   ));
 }
 function FontWeightInput({ label, defaultValue, onChange }) {
-  const [value, setValue] = React72.useState(defaultValue);
-  React72.useEffect(() => {
+  const [value, setValue] = React60.useState(defaultValue);
+  React60.useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(
     RadioGroupInput,
     {
       label,
@@ -2428,12 +2466,12 @@ function FontWeightInput({ label, defaultValue, onChange }) {
         onChange(fontWeight);
       }
     },
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "normal" }, "Regular"),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "bold" }, "Bold")
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "normal" }, "Regular"),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "bold" }, "Bold")
   );
 }
 function PaddingInput({ label, defaultValue, onChange }) {
-  const [value, setValue] = React72.useState(() => {
+  const [value, setValue] = React60.useState(() => {
     if (defaultValue) {
       return defaultValue;
     }
@@ -2451,10 +2489,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
     setValue(v);
     onChange(v);
   }
-  return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React72__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React60__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React60__default.default.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
       value: value.top,
       setValue: (num) => handleChange("top", num),
       units: "px",
@@ -2463,10 +2501,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
       max: 80,
       marks: true
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
       value: value.bottom,
       setValue: (num) => handleChange("bottom", num),
       units: "px",
@@ -2475,10 +2513,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
       max: 80,
       marks: true
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
       value: value.left,
       setValue: (num) => handleChange("left", num),
       units: "px",
@@ -2487,10 +2525,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
       max: 80,
       marks: true
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
       value: value.right,
       setValue: (num) => handleChange("right", num),
       units: "px",
@@ -2502,11 +2540,11 @@ function PaddingInput({ label, defaultValue, onChange }) {
   ));
 }
 function TextAlignInput({ label, defaultValue, onChange }) {
-  const [value, setValue] = React72.useState(defaultValue != null ? defaultValue : "left");
-  React72.useEffect(() => {
+  const [value, setValue] = React60.useState(defaultValue != null ? defaultValue : "left");
+  React60.useEffect(() => {
     setValue(defaultValue != null ? defaultValue : "left");
   }, [defaultValue]);
-  return /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(
     RadioGroupInput,
     {
       label,
@@ -2516,9 +2554,9 @@ function TextAlignInput({ label, defaultValue, onChange }) {
         onChange(value2);
       }
     },
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "left" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.FormatAlignLeftOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "center" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.FormatAlignCenterOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "right" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.FormatAlignRightOutlined, { fontSize: "small" }))
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "left" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FormatAlignLeftOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "center" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FormatAlignCenterOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "right" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FormatAlignRightOutlined, { fontSize: "small" }))
   );
 }
 
@@ -2531,14 +2569,14 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
   };
   switch (name) {
     case "backgroundColor":
-      return /* @__PURE__ */ React72__default.default.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React60__default.default.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
     case "borderColor":
-      return /* @__PURE__ */ React72__default.default.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React60__default.default.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
     case "borderRadius":
-      return /* @__PURE__ */ React72__default.default.createElement(
+      return /* @__PURE__ */ React60__default.default.createElement(
         SliderInput,
         {
-          iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
+          iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
           units: "px",
           step: 4,
           marks: true,
@@ -2550,29 +2588,29 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
         }
       );
     case "color":
-      return /* @__PURE__ */ React72__default.default.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React60__default.default.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
     case "fontFamily":
-      return /* @__PURE__ */ React72__default.default.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React60__default.default.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
     case "fontSize":
-      return /* @__PURE__ */ React72__default.default.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React60__default.default.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
     case "fontWeight":
-      return /* @__PURE__ */ React72__default.default.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React60__default.default.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
     case "textAlign":
-      return /* @__PURE__ */ React72__default.default.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React60__default.default.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
     case "padding":
-      return /* @__PURE__ */ React72__default.default.createElement(PaddingInput, { label: "Padding", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React60__default.default.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__default.default.createElement(React72__default.default.Fragment, null, names.map((name) => /* @__PURE__ */ React72__default.default.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
+  return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, names.map((name) => /* @__PURE__ */ React60__default.default.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/avatar-sidebar-panel.tsx
 function AvatarSidebarPanel({ data, setData }) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const [, setErrors] = React72.useState(null);
+  const [, setErrors] = React60.useState(null);
   const updateData = (d) => {
     const res = AvatarPropsSchema.safeParse(d);
     if (res.success) {
@@ -2586,11 +2624,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__default.default.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React60__default.default.createElement(
     SliderInput,
     {
       label: "Size",
-      iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 3,
       min: 32,
@@ -2600,7 +2638,7 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }));
       }
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     RadioGroupInput,
     {
       label: "Shape",
@@ -2609,10 +2647,10 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { shape: shape2 }) }));
       }
     },
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "circle" }, "Circle"),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "square" }, "Square"),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded")
-  ), /* @__PURE__ */ React72__default.default.createElement(
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "circle" }, "Circle"),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "square" }, "Square"),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded")
+  ), /* @__PURE__ */ React60__default.default.createElement(
     TextInput,
     {
       label: "Image URL",
@@ -2621,7 +2659,7 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }));
       }
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     TextInput,
     {
       label: "Alt text",
@@ -2630,7 +2668,7 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt: alt2 }) }));
       }
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     MultiStylePropertyPanel,
     {
       names: ["textAlign", "padding"],
@@ -2641,7 +2679,7 @@ function AvatarSidebarPanel({ data, setData }) {
 }
 function ButtonSidebarPanel({ data, setData }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
-  const [, setErrors] = React72.useState(null);
+  const [, setErrors] = React60.useState(null);
   const updateData = (d) => {
     const res = ButtonPropsSchema.safeParse(d);
     if (res.success) {
@@ -2658,65 +2696,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__default.default.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React60__default.default.createElement(
     TextInput,
     {
       label: "Text",
       defaultValue: text,
       onChange: (text2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text: text2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     TextInput,
     {
       label: "Url",
       defaultValue: url,
       onChange: (url2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: url2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.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__default.default.createElement(material.ToggleButton, { value: "FULL_WIDTH" }, "Full"),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "AUTO" }, "Auto")
-  ), /* @__PURE__ */ React72__default.default.createElement(
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "FULL_WIDTH" }, "Full"),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "AUTO" }, "Auto")
+  ), /* @__PURE__ */ React60__default.default.createElement(
     RadioGroupInput,
     {
       label: "Size",
       defaultValue: size,
       onChange: (size2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }))
     },
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "x-small" }, "Xs"),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "small" }, "Sm"),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "medium" }, "Md"),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "large" }, "Lg")
-  ), /* @__PURE__ */ React72__default.default.createElement(
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "x-small" }, "Xs"),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "small" }, "Sm"),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "medium" }, "Md"),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "large" }, "Lg")
+  ), /* @__PURE__ */ React60__default.default.createElement(
     RadioGroupInput,
     {
       label: "Style",
       defaultValue: buttonStyle,
       onChange: (buttonStyle2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonStyle: buttonStyle2 }) }))
     },
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "rectangle" }, "Rectangle"),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded"),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "pill" }, "Pill")
-  ), /* @__PURE__ */ React72__default.default.createElement(
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "rectangle" }, "Rectangle"),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded"),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "pill" }, "Pill")
+  ), /* @__PURE__ */ React60__default.default.createElement(
     ColorInput2,
     {
       label: "Text color",
       defaultValue: buttonTextColor,
       onChange: (buttonTextColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonTextColor: buttonTextColor2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     ColorInput2,
     {
       label: "Button color",
       defaultValue: buttonBackgroundColor,
       onChange: (buttonBackgroundColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonBackgroundColor: buttonBackgroundColor2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
@@ -2742,7 +2780,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
     const value = parseInt(ev.target.value);
     onChange(isNaN(value) ? null : value);
   };
-  return /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(
     material.TextField,
     {
       fullWidth: true,
@@ -2753,7 +2791,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
       placeholder: "auto",
       size: "small",
       InputProps: {
-        endAdornment: /* @__PURE__ */ React72__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary" }, "px")
+        endAdornment: /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary" }, "px")
       }
     }
   );
@@ -2761,7 +2799,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/column-widths-input.tsx
 function ColumnWidthsInput({ defaultValue, onChange }) {
-  const [currentValue, setCurrentValue] = React72.useState(() => {
+  const [currentValue, setCurrentValue] = React60.useState(() => {
     if (defaultValue) {
       return defaultValue;
     }
@@ -2775,7 +2813,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
   };
   let column3 = null;
   {
-    column3 = /* @__PURE__ */ React72__default.default.createElement(
+    column3 = /* @__PURE__ */ React60__default.default.createElement(
       TextDimensionInput,
       {
         label: "Column 3",
@@ -2786,7 +2824,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
       }
     );
   }
-  return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React60__default.default.createElement(
     TextDimensionInput,
     {
       label: "Column 1",
@@ -2795,7 +2833,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
         setIndexValue(0, v);
       }
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     TextDimensionInput,
     {
       label: "Column 2",
@@ -2810,7 +2848,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
 // src/app/inspector-drawer/configuration-panel/input-panels/columns-container-sidebar-panel.tsx
 function ColumnsContainerPanel({ data, setData }) {
   var _a, _b, _c, _d, _e, _f;
-  const [, setErrors] = React72.useState(null);
+  const [, setErrors] = React60.useState(null);
   const updateData = (d) => {
     const res = columns_container_props_schema_default2.safeParse(d);
     if (res.success) {
@@ -2820,7 +2858,7 @@ function ColumnsContainerPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React60__default.default.createElement(
     RadioGroupInput,
     {
       label: "Number of columns",
@@ -2829,9 +2867,9 @@ function ColumnsContainerPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsCount: v === "2" ? 2 : 3 }) }));
       }
     },
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "2" }, "2"),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "3" }, "3")
-  ), /* @__PURE__ */ React72__default.default.createElement(
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "2" }, "2"),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "3" }, "3")
+  ), /* @__PURE__ */ React60__default.default.createElement(
     ColumnWidthsInput,
     {
       defaultValue: (_b = data.props) == null ? void 0 : _b.fixedWidths,
@@ -2839,11 +2877,11 @@ function ColumnsContainerPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fixedWidths }) }));
       }
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     SliderInput,
     {
       label: "Columns gap",
-      iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.SpaceBarOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.SpaceBarOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 4,
       marks: true,
@@ -2852,7 +2890,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__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     RadioGroupInput,
     {
       label: "Alignment",
@@ -2861,10 +2899,10 @@ function ColumnsContainerPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }));
       }
     },
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
-  ), /* @__PURE__ */ React72__default.default.createElement(
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
+  ), /* @__PURE__ */ React60__default.default.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "padding"],
@@ -2883,7 +2921,7 @@ var container_props_schema_default = ContainerPropsSchema3;
 
 // src/app/inspector-drawer/configuration-panel/input-panels/container-sidebar-panel.tsx
 function ContainerSidebarPanel({ data, setData }) {
-  const [, setErrors] = React72.useState(null);
+  const [, setErrors] = React60.useState(null);
   const updateData = (d) => {
     const res = container_props_schema_default.safeParse(d);
     if (res.success) {
@@ -2893,7 +2931,7 @@ function ContainerSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React60__default.default.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "borderColor", "borderRadius", "padding"],
@@ -2904,7 +2942,7 @@ function ContainerSidebarPanel({ data, setData }) {
 }
 function DividerSidebarPanel({ data, setData }) {
   var _a, _b, _c, _d;
-  const [, setErrors] = React72.useState(null);
+  const [, setErrors] = React60.useState(null);
   const updateData = (d) => {
     const res = DividerPropsSchema.safeParse(d);
     if (res.success) {
@@ -2916,18 +2954,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__default.default.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React60__default.default.createElement(
     ColorInput2,
     {
       label: "Color",
       defaultValue: lineColor,
       onChange: (lineColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineColor: lineColor2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     SliderInput,
     {
       label: "Height",
-      iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 1,
       min: 1,
@@ -2935,7 +2973,7 @@ function DividerSidebarPanel({ data, setData }) {
       defaultValue: lineHeight,
       onChange: (lineHeight2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineHeight: lineHeight2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "padding"],
@@ -2956,21 +2994,50 @@ var FONT_FAMILY_SCHEMA7 = zod.z.enum([
   "BOOK_SERIF",
   "MONOSPACE"
 ]).nullable().optional();
+var TemplateVariableSchema2 = zod.z.object({
+  name: zod.z.string(),
+  description: zod.z.string().optional().nullable()
+});
 var EmailLayoutPropsSchema2 = zod.z.object({
   backdropColor: COLOR_SCHEMA10,
+  backdropDisabled: zod.z.boolean().optional().nullable(),
   borderColor: COLOR_SCHEMA10,
   borderRadius: zod.z.number().optional().nullable(),
   canvasColor: COLOR_SCHEMA10,
   textColor: COLOR_SCHEMA10,
   fontFamily: FONT_FAMILY_SCHEMA7,
-  childrenIds: zod.z.array(zod.z.string()).optional().nullable()
+  childrenIds: zod.z.array(zod.z.string()).optional().nullable(),
+  subject: zod.z.string().optional().nullable(),
+  variables: zod.z.array(TemplateVariableSchema2).optional().nullable()
 });
 var email_layout_props_schema_default = EmailLayoutPropsSchema2;
+function BooleanInput({ label, defaultValue, onChange }) {
+  const [value, setValue] = React60.useState(defaultValue);
+  React60.useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+  return /* @__PURE__ */ React60__default.default.createElement(
+    material.FormControlLabel,
+    {
+      label,
+      control: /* @__PURE__ */ React60__default.default.createElement(
+        material.Switch,
+        {
+          checked: value,
+          onChange: (_, checked) => {
+            setValue(checked);
+            onChange(checked);
+          }
+        }
+      )
+    }
+  );
+}
 
 // src/app/inspector-drawer/configuration-panel/input-panels/email-layout-sidebar-panel.tsx
 function EmailLayoutSidebarFields({ data, setData }) {
-  var _a, _b, _c, _d, _e;
-  const [, setErrors] = React72.useState(null);
+  var _a, _b, _c, _d, _e, _f;
+  const [, setErrors] = React60.useState(null);
   const updateData = (d) => {
     const res = email_layout_props_schema_default.safeParse(d);
     if (res.success) {
@@ -2980,59 +3047,67 @@ function EmailLayoutSidebarFields({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React72__default.default.createElement(
+  const backdropDisabled = (_a = data.backdropDisabled) != null ? _a : false;
+  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React60__default.default.createElement(
+    BooleanInput,
+    {
+      label: "Disable backdrop",
+      defaultValue: backdropDisabled,
+      onChange: (backdropDisabled2) => updateData(__spreadProps(__spreadValues({}, data), { backdropDisabled: backdropDisabled2 }))
+    }
+  ), !backdropDisabled && /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
     ColorInput2,
     {
       label: "Backdrop color",
-      defaultValue: (_a = data.backdropColor) != null ? _a : "#F5F5F5",
+      defaultValue: (_b = data.backdropColor) != null ? _b : "#F5F5F5",
       onChange: (backdropColor) => updateData(__spreadProps(__spreadValues({}, data), { backdropColor }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     ColorInput2,
     {
       label: "Canvas color",
-      defaultValue: (_b = data.canvasColor) != null ? _b : "#FFFFFF",
+      defaultValue: (_c = data.canvasColor) != null ? _c : "#FFFFFF",
       onChange: (canvasColor) => updateData(__spreadProps(__spreadValues({}, data), { canvasColor }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     NullableColorInput,
     {
       label: "Canvas border color",
-      defaultValue: (_c = data.borderColor) != null ? _c : null,
+      defaultValue: (_d = data.borderColor) != null ? _d : null,
       onChange: (borderColor) => updateData(__spreadProps(__spreadValues({}, data), { borderColor }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     SliderInput,
     {
-      iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
+      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
       units: "px",
       step: 4,
       marks: true,
       min: 0,
       max: 48,
       label: "Canvas border radius",
-      defaultValue: (_d = data.borderRadius) != null ? _d : 0,
+      defaultValue: (_e = data.borderRadius) != null ? _e : 0,
       onChange: (borderRadius) => updateData(__spreadProps(__spreadValues({}, data), { borderRadius }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  )), /* @__PURE__ */ React60__default.default.createElement(
     NullableFontFamily,
     {
       label: "Font family",
       defaultValue: "MODERN_SANS",
       onChange: (fontFamily) => updateData(__spreadProps(__spreadValues({}, data), { fontFamily }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     ColorInput2,
     {
       label: "Text color",
-      defaultValue: (_e = data.textColor) != null ? _e : "#262626",
+      defaultValue: (_f = data.textColor) != null ? _f : "#262626",
       onChange: (textColor) => updateData(__spreadProps(__spreadValues({}, data), { textColor }))
     }
   ));
 }
 function HeadingSidebarPanel({ data, setData }) {
   var _a, _b, _c, _d;
-  const [, setErrors] = React72.useState(null);
+  const [, setErrors] = React60.useState(null);
   const updateData = (d) => {
     const res = HeadingPropsSchema.safeParse(d);
     if (res.success) {
@@ -3042,7 +3117,7 @@ function HeadingSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React60__default.default.createElement(
     TextInput,
     {
       label: "Content",
@@ -3052,7 +3127,7 @@ function HeadingSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }));
       }
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     RadioGroupInput,
     {
       label: "Level",
@@ -3061,10 +3136,10 @@ function HeadingSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { level }) }));
       }
     },
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "h1" }, "H1"),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "h2" }, "H2"),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "h3" }, "H3")
-  ), /* @__PURE__ */ React72__default.default.createElement(
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "h1" }, "H1"),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "h2" }, "H2"),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "h3" }, "H3")
+  ), /* @__PURE__ */ React60__default.default.createElement(
     MultiStylePropertyPanel,
     {
       names: ["color", "backgroundColor", "fontFamily", "fontWeight", "textAlign", "padding"],
@@ -3075,7 +3150,7 @@ function HeadingSidebarPanel({ data, setData }) {
 }
 function HtmlSidebarPanel({ data, setData }) {
   var _a, _b;
-  const [, setErrors] = React72.useState(null);
+  const [, setErrors] = React60.useState(null);
   const updateData = (d) => {
     const res = HtmlPropsSchema.safeParse(d);
     if (res.success) {
@@ -3085,7 +3160,7 @@ function HtmlSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React60__default.default.createElement(
     TextInput,
     {
       label: "Content",
@@ -3093,7 +3168,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__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     MultiStylePropertyPanel,
     {
       names: ["color", "backgroundColor", "fontFamily", "fontSize", "textAlign", "padding"],
@@ -3104,7 +3179,7 @@ function HtmlSidebarPanel({ data, setData }) {
 }
 function ImageSidebarPanel({ data, setData }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const [, setErrors] = React72.useState(null);
+  const [, setErrors] = React60.useState(null);
   const updateData = (d) => {
     const res = ImagePropsSchema.safeParse(d);
     if (res.success) {
@@ -3114,7 +3189,7 @@ function ImageSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Image block" }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Image block" }, /* @__PURE__ */ React60__default.default.createElement(
     TextInput,
     {
       label: "Source URL",
@@ -3124,14 +3199,14 @@ function ImageSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url }) }));
       }
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.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__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     TextInput,
     {
       label: "Click through URL",
@@ -3141,31 +3216,31 @@ function ImageSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkHref }) }));
       }
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React60__default.default.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__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.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__default.default.createElement(
+  )), /* @__PURE__ */ React60__default.default.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__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
-  ), /* @__PURE__ */ React72__default.default.createElement(
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
+  ), /* @__PURE__ */ React60__default.default.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "textAlign", "padding"],
@@ -3176,7 +3251,7 @@ function ImageSidebarPanel({ data, setData }) {
 }
 function SignatureSidebarPanel({ data, setData }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D;
-  const [, setErrors] = React72.useState(null);
+  const [, setErrors] = React60.useState(null);
   const updateData = (d) => {
     const res = SignaturePropsSchema.safeParse(d);
     if (res.success) {
@@ -3201,74 +3276,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__default.default.createElement(BaseSidebarPanel, { title: "Signature block" }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Signature block" }, /* @__PURE__ */ React60__default.default.createElement(
     TextInput,
     {
       label: "Greeting",
       defaultValue: greeting,
       onChange: (greeting2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { greeting: greeting2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     TextInput,
     {
       label: "Name",
       defaultValue: name,
       onChange: (name2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { name: name2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     TextInput,
     {
       label: "Title",
       defaultValue: title,
       onChange: (title2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { title: title2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     TextInput,
     {
       label: "Company",
       defaultValue: company,
       onChange: (company2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { company: company2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     TextInput,
     {
       label: "Address",
       defaultValue: address,
       onChange: (address2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { address: address2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     TextInput,
     {
       label: "Email",
       defaultValue: email,
       onChange: (email2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { email: email2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     TextInput,
     {
       label: "Phone",
       defaultValue: phone,
       onChange: (phone2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { phone: phone2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     TextInput,
     {
       label: "Website",
       defaultValue: website,
       onChange: (website2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { website: website2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     TextInput,
     {
       label: "Image URL",
       defaultValue: imageUrl,
       onChange: (imageUrl2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     SliderInput,
     {
       label: "Image size",
-      iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 4,
       min: 32,
@@ -3276,47 +3351,47 @@ function SignatureSidebarPanel({ data, setData }) {
       defaultValue: imageSize,
       onChange: (imageSize2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageSize: imageSize2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     RadioGroupInput,
     {
       label: "Image shape",
       defaultValue: imageShape,
       onChange: (imageShape2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageShape: imageShape2 }) }))
     },
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "circle" }, "Circle"),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "square" }, "Square"),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded")
-  ), /* @__PURE__ */ React72__default.default.createElement(
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "circle" }, "Circle"),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "square" }, "Square"),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded")
+  ), /* @__PURE__ */ React60__default.default.createElement(
     RadioGroupInput,
     {
       label: "Layout",
       defaultValue: layout,
       onChange: (layout2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { layout: layout2 }) }))
     },
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "horizontal" }, "Horizontal"),
-    /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "vertical" }, "Vertical")
-  ), /* @__PURE__ */ React72__default.default.createElement(
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "horizontal" }, "Horizontal"),
+    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "vertical" }, "Vertical")
+  ), /* @__PURE__ */ React60__default.default.createElement(
     ColorInput2,
     {
       label: "Name color",
       defaultValue: nameColor,
       onChange: (nameColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { nameColor: nameColor2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     ColorInput2,
     {
       label: "Text color",
       defaultValue: textColor,
       onChange: (textColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { textColor: textColor2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     ColorInput2,
     {
       label: "Link color",
       defaultValue: linkColor,
       onChange: (linkColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkColor: linkColor2 }) }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "fontFamily", "padding"],
@@ -3327,7 +3402,7 @@ function SignatureSidebarPanel({ data, setData }) {
 }
 function SpacerSidebarPanel({ data, setData }) {
   var _a, _b;
-  const [, setErrors] = React72.useState(null);
+  const [, setErrors] = React60.useState(null);
   const updateData = (d) => {
     const res = SpacerPropsSchema.safeParse(d);
     if (res.success) {
@@ -3337,11 +3412,11 @@ function SpacerSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React60__default.default.createElement(
     SliderInput,
     {
       label: "Height",
-      iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 4,
       min: 4,
@@ -3351,33 +3426,9 @@ function SpacerSidebarPanel({ data, setData }) {
     }
   ));
 }
-function BooleanInput({ label, defaultValue, onChange }) {
-  const [value, setValue] = React72.useState(defaultValue);
-  React72.useEffect(() => {
-    setValue(defaultValue);
-  }, [defaultValue]);
-  return /* @__PURE__ */ React72__default.default.createElement(
-    material.FormControlLabel,
-    {
-      label,
-      control: /* @__PURE__ */ React72__default.default.createElement(
-        material.Switch,
-        {
-          checked: value,
-          onChange: (_, checked) => {
-            setValue(checked);
-            onChange(checked);
-          }
-        }
-      )
-    }
-  );
-}
-
-// src/app/inspector-drawer/configuration-panel/input-panels/text-sidebar-panel.tsx
 function TextSidebarPanel({ data, setData }) {
   var _a, _b, _c, _d;
-  const [, setErrors] = React72.useState(null);
+  const [, setErrors] = React60.useState(null);
   const updateData = (d) => {
     const res = TextPropsSchema.safeParse(d);
     if (res.success) {
@@ -3387,7 +3438,7 @@ function TextSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React60__default.default.createElement(
     TextInput,
     {
       label: "Content",
@@ -3395,14 +3446,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__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.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__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     MultiStylePropertyPanel,
     {
       names: ["color", "backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
@@ -3414,7 +3465,7 @@ function TextSidebarPanel({ data, setData }) {
 
 // src/app/inspector-drawer/configuration-panel/index.tsx
 function renderMessage(val) {
-  return /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React72__default.default.createElement(material.Typography, { color: "text.secondary" }, val));
+  return /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { color: "text.secondary" }, val));
 }
 function ConfigurationPanel() {
   const document2 = useDocument();
@@ -3430,55 +3481,55 @@ function ConfigurationPanel() {
   const { data, type } = block;
   switch (type) {
     case "Avatar":
-      return /* @__PURE__ */ React72__default.default.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60__default.default.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Button":
-      return /* @__PURE__ */ React72__default.default.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60__default.default.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "ColumnsContainer":
-      return /* @__PURE__ */ React72__default.default.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60__default.default.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Container":
-      return /* @__PURE__ */ React72__default.default.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60__default.default.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Divider":
-      return /* @__PURE__ */ React72__default.default.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60__default.default.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Heading":
-      return /* @__PURE__ */ React72__default.default.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60__default.default.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Html":
-      return /* @__PURE__ */ React72__default.default.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60__default.default.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Image":
-      return /* @__PURE__ */ React72__default.default.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60__default.default.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "EmailLayout":
-      return /* @__PURE__ */ React72__default.default.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60__default.default.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Spacer":
-      return /* @__PURE__ */ React72__default.default.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60__default.default.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Signature":
-      return /* @__PURE__ */ React72__default.default.createElement(SignatureSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60__default.default.createElement(SignatureSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Text":
-      return /* @__PURE__ */ React72__default.default.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React60__default.default.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     default:
-      return /* @__PURE__ */ React72__default.default.createElement("pre", null, JSON.stringify(block, null, "  "));
+      return /* @__PURE__ */ React60__default.default.createElement("pre", null, JSON.stringify(block, null, "  "));
   }
 }
 function StylesPanel() {
   const block = useDocument().root;
   if (!block) {
-    return /* @__PURE__ */ React72__default.default.createElement("p", null, "Block not found");
+    return /* @__PURE__ */ React60__default.default.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__default.default.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
+  return /* @__PURE__ */ React60__default.default.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
 }
 function TemplateDownloadButton() {
   const doc = useDocument();
-  const href = React72.useMemo(() => {
+  const href = React60.useMemo(() => {
     return `data:text/plain,${encodeURIComponent(JSON.stringify(doc, null, "  "))}`;
   }, [doc]);
-  return /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(
     material.Button,
     {
       variant: "outlined",
       color: "primary",
-      startIcon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.FileDownloadOutlined, null),
+      startIcon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FileDownloadOutlined, null),
       href,
       download: "emailTemplate.json",
       fullWidth: true
@@ -3510,9 +3561,9 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
     }
   };
   if (!currentTemplateId) {
-    return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected");
+    return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected");
   }
-  return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React72__default.default.createElement(material.Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React60__default.default.createElement(
     material.Typography,
     {
       variant: "body2",
@@ -3525,29 +3576,110 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
       }
     },
     "Save functionality is disabled. To enable saving, provide the necessary callback functions."
-  ), persistenceEnabled && /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
+  ), persistenceEnabled && /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
     material.Button,
     {
       variant: "outlined",
       color: "primary",
-      startIcon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.ContentCopyOutlined, null),
+      startIcon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ContentCopyOutlined, null),
       onClick: handleCopyToSamples,
       fullWidth: true,
       disabled: !copyTemplate
     },
     "Save as Sample Template"
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     material.Button,
     {
       variant: "outlined",
       color: "error",
-      startIcon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.DeleteOutlined, null),
+      startIcon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.DeleteOutlined, null),
       onClick: handleDelete,
       fullWidth: true,
       disabled: !deleteTemplate
     },
     "Delete Template"
-  )))), persistenceEnabled && /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React72__default.default.createElement(material.Stack, { spacing: 2 }, /* @__PURE__ */ React72__default.default.createElement(TemplateDownloadButton, null))));
+  )))), persistenceEnabled && /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 2 }, /* @__PURE__ */ React60__default.default.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__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React60__default.default.createElement(material.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__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { mb: 1 } }, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600 } }, "Variables"), /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Add variable" }, /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { size: "small", onClick: add, "aria-label": "Add variable" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })))), /* @__PURE__ */ React60__default.default.createElement(material.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__default.default.createElement(material.Box, { component: "code", sx: { fontFamily: "monospace" } }, "{{name}}"), "."), variables.length === 0 ? /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary" } }, "No variables declared. Click + to add one.") : /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 2 }, variables.map((v, i) => {
+    var _a2;
+    const nameError = validateName(v.name, i, variables);
+    return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { key: i, spacing: 0.75, sx: { pb: 1, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React60__default.default.createElement(
+      material.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__default.default.createElement(material.Tooltip, { title: "Remove" }, /* @__PURE__ */ React60__default.default.createElement(
+      material.IconButton,
+      {
+        size: "small",
+        onClick: () => removeAt(i),
+        "aria-label": `Remove ${v.name || "variable"}`,
+        sx: { mt: 0.5 }
+      },
+      /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.DeleteOutline, { fontSize: "small" })
+    ))), /* @__PURE__ */ React60__default.default.createElement(
+      material.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
@@ -3564,11 +3696,13 @@ function InspectorDrawer({
   const renderCurrentSidebarPanel = () => {
     switch (selectedSidebarTab) {
       case "block-configuration":
-        return /* @__PURE__ */ React72__default.default.createElement(ConfigurationPanel, null);
+        return /* @__PURE__ */ React60__default.default.createElement(ConfigurationPanel, null);
       case "styles":
-        return /* @__PURE__ */ React72__default.default.createElement(StylesPanel, null);
+        return /* @__PURE__ */ React60__default.default.createElement(StylesPanel, null);
+      case "variables":
+        return /* @__PURE__ */ React60__default.default.createElement(VariablesPanel, null);
       case "template-settings":
-        return /* @__PURE__ */ React72__default.default.createElement(
+        return /* @__PURE__ */ React60__default.default.createElement(
           TemplatePanel,
           {
             deleteTemplate,
@@ -3577,7 +3711,7 @@ function InspectorDrawer({
         );
     }
   };
-  return /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(
     material.Drawer,
     {
       variant: "persistent",
@@ -3599,236 +3733,820 @@ function InspectorDrawer({
         width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0
       }
     },
-    /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React72__default.default.createElement(material.Box, { px: 2 }, /* @__PURE__ */ React72__default.default.createElement(material.Tabs, { value: selectedSidebarTab, onChange: (_, v) => setSidebarTab(v) }, /* @__PURE__ */ React72__default.default.createElement(material.Tab, { value: "styles", label: "Styles" }), /* @__PURE__ */ React72__default.default.createElement(material.Tab, { value: "block-configuration", label: "Inspect" }), /* @__PURE__ */ React72__default.default.createElement(material.Tab, { value: "template-settings", label: "Settings" })))),
-    /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
+    /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React60__default.default.createElement(material.Box, { px: 1 }, /* @__PURE__ */ React60__default.default.createElement(
+      material.Tabs,
+      {
+        value: selectedSidebarTab,
+        onChange: (_, v) => setSidebarTab(v),
+        variant: "fullWidth",
+        sx: { "& .MuiTab-root": { minWidth: 0, px: 1, fontSize: 13 } }
+      },
+      /* @__PURE__ */ React60__default.default.createElement(material.Tab, { value: "styles", label: "Styles" }),
+      /* @__PURE__ */ React60__default.default.createElement(material.Tab, { value: "block-configuration", label: "Inspect" }),
+      /* @__PURE__ */ React60__default.default.createElement(material.Tab, { value: "variables", label: "Variables" }),
+      /* @__PURE__ */ React60__default.default.createElement(material.Tab, { value: "template-settings", label: "Settings" })
+    ))),
+    /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
   );
 }
-function SidebarButton({
-  templateId,
-  children,
+var SnackbarContext = React60.createContext(null);
+function useSnackbar() {
+  const context = React60.useContext(SnackbarContext);
+  if (!context) {
+    throw new Error("useSnackbar must be used within a SnackbarProvider");
+  }
+  return context;
+}
+function SnackbarProvider({ children }) {
+  const [message, setMessage] = React60.useState(null);
+  const [duration, setDuration] = React60.useState(3e3);
+  const showMessage = (text, customDuration = 3e3) => {
+    setMessage(text);
+    setDuration(customDuration);
+  };
+  const handleClose = () => {
+    setMessage(null);
+  };
+  return /* @__PURE__ */ React60__default.default.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React60__default.default.createElement(
+    material.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] = React60.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__default.default.createElement(material.Button, { size: "small", onClick: handleClick, sx: sx2 }, children);
-}
-
-// sample-templates/empty-email-message.ts
-var EMPTY_EMAIL_MESSAGE = {
-  root: {
-    type: "EmailLayout",
-    data: {
-      backdropColor: "#F5F5F5",
-      canvasColor: "#FFFFFF",
-      textColor: "#262626",
-      fontFamily: "MODERN_SANS",
-      childrenIds: []
-    }
-  }
-};
-var empty_email_message_default = EMPTY_EMAIL_MESSAGE;
-
-// src/app/templates-drawer/index.tsx
-var SAMPLES_DRAWER_WIDTH = 240;
-var EMPTY_TEMPLATE = {
-  id: "empty-email",
-  name: "Empty email",
-  description: "A blank email template to start from scratch"
-};
-function SamplesDrawer({
-  enterDuration = 225,
-  exitDuration = 225,
-  enabled = true,
-  loadSamples,
-  loadTemplates,
-  loadTemplate,
-  currentTemplateId,
-  deleteTemplate
-}) {
-  const samplesDrawerOpen = useSamplesDrawerOpen();
-  const [samples, setSamples] = React72.useState([EMPTY_TEMPLATE]);
-  const [templates, setTemplates] = React72.useState([]);
-  const [loadingSamples, setLoadingSamples] = React72.useState(false);
-  const [loadingTemplates, setLoadingTemplates] = React72.useState(false);
-  const handleLoadTemplate = (templateId) => __async(null, null, function* () {
-    if (templateId === "empty-email") {
-      return empty_email_message_default;
-    }
-    if (loadTemplate) {
-      return loadTemplate(templateId);
-    }
-    return null;
-  });
-  React72.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);
-      });
-    }
-  }, [enabled, samplesDrawerOpen, loadSamples]);
-  React72.useEffect(() => {
-    if (enabled && loadTemplates) {
-      setLoadingTemplates(true);
-      loadTemplates().then((results) => {
-        setTemplates(results);
-        setLoadingTemplates(false);
-      }).catch((error) => {
-        console.error("Failed to load templates:", error);
-        setLoadingTemplates(false);
-      });
-    }
-  }, [enabled, loadTemplates]);
-  React72.useEffect(() => {
-    const handleTemplateListUpdate = (e) => {
-      setTemplates(e.detail);
-    };
-    window.addEventListener("templateListUpdated", handleTemplateListUpdate);
-    return () => window.removeEventListener("templateListUpdated", handleTemplateListUpdate);
-  }, []);
-  if (!enabled) {
-    return null;
-  }
-  return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
-    material.Drawer,
+  const stop = (e) => {
+    e.stopPropagation();
+  };
+  const updated = relativeTime(template.updatedAt);
+  const hasActions = Boolean(
+    onDuplicate || onRename || onDelete || onPromote || onDemote || onDuplicateAsTemplate
+  );
+  return /* @__PURE__ */ React60__default.default.createElement(
+    material.Box,
     {
-      variant: "persistent",
-      anchor: "left",
-      open: samplesDrawerOpen,
-      PaperProps: {
-        style: { position: "absolute" }
-      },
-      ModalProps: {
-        container: document.getElementById("drawer-container"),
-        style: { position: "absolute" },
-        keepMounted: true
-      },
-      transitionDuration: {
-        enter: enterDuration,
-        exit: exitDuration
+      role: "button",
+      tabIndex: 0,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
       },
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
       sx: {
-        width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0
+        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__ */ React72__default.default.createElement(
+    /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", alignItems: "flex-start", spacing: 1 }, /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { flexGrow: 1, minWidth: 0 } }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", alignItems: "baseline", spacing: 1, sx: { minWidth: 0 } }, /* @__PURE__ */ React60__default.default.createElement(
+      material.Typography,
+      {
+        variant: "body2",
+        sx: {
+          fontWeight: 600,
+          flexGrow: 1,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        title: template.slug
+      },
+      template.slug
+    ), updated && /* @__PURE__ */ React60__default.default.createElement(
+      material.Typography,
+      {
+        variant: "caption",
+        sx: { color: "text.secondary", flexShrink: 0, fontSize: "0.7rem" }
+      },
+      updated
+    )), template.description && /* @__PURE__ */ React60__default.default.createElement(
+      material.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__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, sx: { mt: 0.5, flexWrap: "wrap", gap: 0.5 } }, template.tags.map((tag) => /* @__PURE__ */ React60__default.default.createElement(
+      material.Chip,
+      {
+        key: tag,
+        label: tag,
+        size: "small",
+        sx: { height: 18, fontSize: "0.65rem", "& .MuiChip-label": { px: 0.75 } }
+      }
+    ))))),
+    hasActions && hover && /* @__PURE__ */ React60__default.default.createElement(
       material.Stack,
       {
-        spacing: 3,
-        py: 1,
-        px: 2,
-        width: SAMPLES_DRAWER_WIDTH,
-        justifyContent: "space-between",
-        height: "100%"
+        direction: "row",
+        spacing: 0.25,
+        onClick: stop,
+        sx: {
+          position: "absolute",
+          top: 4,
+          right: 4,
+          bgcolor: "background.paper",
+          borderRadius: 1,
+          boxShadow: 1,
+          p: 0.25
+        }
       },
-      /* @__PURE__ */ React72__default.default.createElement(
-        material.Stack,
+      onDuplicateAsTemplate && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Duplicate as template" }, /* @__PURE__ */ React60__default.default.createElement(
+        material.IconButton,
         {
-          spacing: 2,
-          sx: {
-            "& .MuiButtonBase-root": {
-              width: "100%",
-              justifyContent: "flex-start"
-            }
+          size: "small",
+          onClick: (e) => {
+            stop(e);
+            onDuplicateAsTemplate();
           }
         },
-        /* @__PURE__ */ React72__default.default.createElement(material.Typography, { variant: "h6", component: "h1", sx: { p: 2 } }, "Templates"),
-        loadTemplates && /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
-          material.Typography,
-          {
-            variant: "subtitle2",
-            component: "h2",
-            sx: { fontWeight: "bold", mt: 2 }
-          },
-          "Your Templates"
-        ), loadingTemplates ? /* @__PURE__ */ React72__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 1 }, /* @__PURE__ */ React72__default.default.createElement(material.CircularProgress, { size: 24 })) : templates.length > 0 ? /* @__PURE__ */ React72__default.default.createElement(material.Stack, { alignItems: "flex-start", width: "100%" }, templates.map((template) => /* @__PURE__ */ React72__default.default.createElement(
-          material.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__default.default.createElement(
-            SidebarButton,
-            {
-              templateId: template.id,
-              templateLoader: () => handleLoadTemplate(template.id),
-              sx: { flexGrow: 1 }
-            },
-            template.name
-          )
-        ))) : /* @__PURE__ */ React72__default.default.createElement(
-          material.Typography,
-          {
-            variant: "body2",
-            sx: { color: "text.secondary", py: 1 }
-          },
-          "No saved templates"
-        ), /* @__PURE__ */ React72__default.default.createElement(material.Divider, null)),
-        /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
-          material.Typography,
-          {
-            variant: "subtitle2",
-            component: "h2",
-            sx: { fontWeight: "bold", mt: 1 }
-          },
-          "Sample Templates"
-        ), loadingSamples ? /* @__PURE__ */ React72__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 1 }, /* @__PURE__ */ React72__default.default.createElement(material.CircularProgress, { size: 24 })) : /* @__PURE__ */ React72__default.default.createElement(material.Stack, { alignItems: "flex-start" }, samples.map((sample) => /* @__PURE__ */ React72__default.default.createElement(
-          SidebarButton,
-          {
-            key: sample.id,
-            templateId: sample.id,
-            templateLoader: () => handleLoadTemplate(sample.id)
-          },
-          sample.name
-        ))))
-      )
+        /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.LibraryAddOutlined, { fontSize: "small" })
+      )),
+      onDuplicate && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Duplicate" }, /* @__PURE__ */ React60__default.default.createElement(
+        material.IconButton,
+        {
+          size: "small",
+          onClick: (e) => {
+            stop(e);
+            onDuplicate();
+          }
+        },
+        /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" })
+      )),
+      onRename && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Rename" }, /* @__PURE__ */ React60__default.default.createElement(
+        material.IconButton,
+        {
+          size: "small",
+          onClick: (e) => {
+            stop(e);
+            onRename();
+          }
+        },
+        /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.DriveFileRenameOutlineOutlined, { fontSize: "small" })
+      )),
+      onPromote && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Promote to sample" }, /* @__PURE__ */ React60__default.default.createElement(
+        material.IconButton,
+        {
+          size: "small",
+          onClick: (e) => {
+            stop(e);
+            onPromote();
+          }
+        },
+        /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FileUploadOutlined, { fontSize: "small" })
+      )),
+      onDemote && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Demote to template" }, /* @__PURE__ */ React60__default.default.createElement(
+        material.IconButton,
+        {
+          size: "small",
+          onClick: (e) => {
+            stop(e);
+            onDemote();
+          }
+        },
+        /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FileDownloadOutlined, { fontSize: "small" })
+      )),
+      onDelete && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Delete" }, /* @__PURE__ */ React60__default.default.createElement(
+        material.IconButton,
+        {
+          size: "small",
+          onClick: (e) => {
+            stop(e);
+            onDelete();
+          }
+        },
+        /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.DeleteOutlined, { fontSize: "small" })
+      ))
     )
-  ));
+  );
 }
-var BUTTON_SX2 = { p: 1.5, display: "flex", flexDirection: "column" };
-var ICON_SX = {
-  mb: 0.75,
-  width: "100%",
-  bgcolor: "cadet.200",
-  display: "flex",
-  justifyContent: "center",
-  p: 1,
-  border: "1px solid",
-  borderColor: "cadet.300"
-};
+function RenameDialog({
+  open,
+  currentSlug,
+  existingSlugs,
+  onClose,
+  onSubmit
+}) {
+  const [value, setValue] = React60.useState(currentSlug);
+  const [error, setError] = React60.useState(null);
+  const [submitting, setSubmitting] = React60.useState(false);
+  React60.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__default.default.createElement(material.Dialog, { open, onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React60__default.default.createElement(material.DialogTitle, null, "Rename template"), /* @__PURE__ */ React60__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React60__default.default.createElement(
+    material.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__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React60__default.default.createElement(material.Button, { onClick: onClose, disabled: submitting }, "Cancel"), /* @__PURE__ */ React60__default.default.createElement(
+    material.Button,
+    {
+      onClick: handleSubmit,
+      variant: "contained",
+      disabled: !value.trim() || submitting
+    },
+    submitting ? "Renaming..." : "Rename"
+  )));
+}
+function SaveTemplateDialog({
+  open,
+  onClose,
+  onSave,
+  onNameChange,
+  defaultName = "",
+  error: externalError = null
+}) {
+  const [templateName, setTemplateName] = React60.useState(defaultName);
+  const [internalError, setInternalError] = React60.useState("");
+  const [isSubmitting, setIsSubmitting] = React60.useState(false);
+  React60.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__default.default.createElement(
+    material.Dialog,
+    {
+      open,
+      onClose: handleCancel,
+      maxWidth: "sm",
+      fullWidth: true
+    },
+    /* @__PURE__ */ React60__default.default.createElement(material.DialogTitle, null, "Save Email Template"),
+    /* @__PURE__ */ React60__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { pt: 1 } }, /* @__PURE__ */ React60__default.default.createElement(
+      material.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__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React60__default.default.createElement(material.Button, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React60__default.default.createElement(
+      material.Button,
+      {
+        onClick: handleSave,
+        variant: "contained",
+        color: "primary",
+        disabled: !templateName.trim() || !!displayError || isSubmitting
+      },
+      isSubmitting ? "Saving..." : "Save Template"
+    ))
+  );
+}
+
+// sample-templates/empty-email-message.ts
+var EMPTY_EMAIL_MESSAGE = {
+  root: {
+    type: "EmailLayout",
+    data: {
+      backdropColor: "#F5F5F5",
+      canvasColor: "#FFFFFF",
+      textColor: "#262626",
+      fontFamily: "MODERN_SANS",
+      childrenIds: []
+    }
+  }
+};
+var empty_email_message_default = EMPTY_EMAIL_MESSAGE;
+
+// src/app/templates-drawer/index.tsx
+var SAMPLES_DRAWER_WIDTH = 320;
+var EMPTY_TEMPLATE = {
+  id: "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,
+  enabled = true,
+  loadSamples,
+  loadTemplates,
+  loadTemplate,
+  currentTemplateId,
+  deleteTemplate,
+  copyTemplate,
+  renameTemplate,
+  setTemplateKind,
+  saveAs
+}) {
+  var _a;
+  const samplesDrawerOpen = useSamplesDrawerOpen();
+  const { setCurrentTemplate, loadTemplate: ctxLoadTemplate } = useEmailEditor();
+  const { showMessage } = useSnackbar();
+  const [samples, setSamples] = React60.useState([EMPTY_TEMPLATE]);
+  const [templates, setTemplates] = React60.useState([]);
+  const [loadingSamples, setLoadingSamples] = React60.useState(false);
+  const [loadingTemplates, setLoadingTemplates] = React60.useState(false);
+  const [templatesError, setTemplatesError] = React60.useState(null);
+  const [search, setSearch] = React60.useState("");
+  const [sortKey, setSortKey] = React60.useState("updatedAt");
+  const [activeTags, setActiveTags] = React60.useState([]);
+  const [renameTarget, setRenameTarget] = React60.useState(null);
+  const [pendingSaveAs, setPendingSaveAs] = React60.useState(null);
+  const [newError, setNewError] = React60.useState(null);
+  const handleLoadTemplate = (templateId) => __async(null, null, function* () {
+    if (templateId === "empty-email") {
+      return empty_email_message_default;
+    }
+    if (loadTemplate) {
+      return loadTemplate(templateId);
+    }
+    return null;
+  });
+  const withKind = (items, fallback) => items.map((item) => item.kind ? item : __spreadProps(__spreadValues({}, item), { kind: fallback }));
+  React60.useEffect(() => {
+    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]);
+  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);
+    }
+  });
+  React60.useEffect(() => {
+    if (!enabled || !loadTemplates) return;
+    refreshTemplates();
+  }, [enabled, loadTemplates]);
+  React60.useEffect(() => {
+    const handler = (e) => {
+      const detail = e.detail;
+      if (Array.isArray(detail)) setTemplates(withKind(detail, "template"));
+    };
+    window.addEventListener("templateListUpdated", handler);
+    return () => window.removeEventListener("templateListUpdated", handler);
+  }, []);
+  const { templateRows, sampleRows } = React60.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 = React60.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 = React60.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;
+  }
+  const existingSlugs = templates.map((t) => t.slug);
+  return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
+    material.Drawer,
+    {
+      variant: "persistent",
+      anchor: "left",
+      open: samplesDrawerOpen,
+      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 }
+    },
+    /* @__PURE__ */ React60__default.default.createElement(
+      material.Stack,
+      {
+        py: 1,
+        px: 2,
+        width: SAMPLES_DRAWER_WIDTH,
+        height: "100%",
+        spacing: 1.5,
+        sx: { overflowY: "auto" }
+      },
+      /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { pt: 1 } }, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "h6", component: "h1" }, "Templates"), saveAs && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "New template" }, /* @__PURE__ */ React60__default.default.createElement(
+        material.IconButton,
+        {
+          size: "small",
+          onClick: openNewTemplateDialog,
+          "aria-label": "New template"
+        },
+        /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
+      ))),
+      loadTemplates && /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
+        material.TextField,
+        {
+          size: "small",
+          placeholder: "Search templates",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          InputProps: {
+            startAdornment: /* @__PURE__ */ React60__default.default.createElement(material.InputAdornment, { position: "start" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.SearchOutlined, { fontSize: "small" }))
+          }
+        }
+      ), /* @__PURE__ */ React60__default.default.createElement(
+        material.TextField,
+        {
+          select: true,
+          size: "small",
+          label: "Sort by",
+          value: sortKey,
+          onChange: (e) => setSortKey(e.target.value)
+        },
+        SORT_OPTIONS.map((opt) => /* @__PURE__ */ React60__default.default.createElement(material.MenuItem, { key: opt.value, value: opt.value }, opt.label))
+      ), allTags.length > 0 && /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", sx: { flexWrap: "wrap", gap: 0.5 } }, allTags.map((tag) => /* @__PURE__ */ React60__default.default.createElement(
+        material.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__default.default.createElement(material.Box, null, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5 } }, "Your Templates"), loadingTemplates ? /* @__PURE__ */ React60__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React60__default.default.createElement(material.CircularProgress, { size: 24 })) : templatesError ? /* @__PURE__ */ React60__default.default.createElement(material.Alert, { severity: "error", sx: { my: 1 } }, templatesError) : filteredTemplates.length > 0 ? /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredTemplates.map((template) => /* @__PURE__ */ React60__default.default.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__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, templateRows.length === 0 ? "No saved templates yet" : "No templates match your filters")), /* @__PURE__ */ React60__default.default.createElement(material.Divider, null)),
+      /* @__PURE__ */ React60__default.default.createElement(material.Box, null, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5 } }, "Sample Templates"), loadingSamples ? /* @__PURE__ */ React60__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React60__default.default.createElement(material.CircularProgress, { size: 24 })) : sampleRows.length > 0 ? /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 0.25, sx: { width: "100%" } }, sampleRows.map((sample) => /* @__PURE__ */ React60__default.default.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__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, "No samples available"))
+    )
+  ), renameTarget && /* @__PURE__ */ React60__default.default.createElement(
+    RenameDialog,
+    {
+      open: !!renameTarget,
+      currentSlug: renameTarget.slug,
+      existingSlugs: existingSlugs.filter((s) => s !== renameTarget.slug),
+      onClose: () => setRenameTarget(null),
+      onSubmit: handleRenameSubmit
+    }
+  ), /* @__PURE__ */ React60__default.default.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" };
+var ICON_SX = {
+  mb: 0.75,
+  width: "100%",
+  bgcolor: "cadet.200",
+  display: "flex",
+  justifyContent: "center",
+  p: 1,
+  border: "1px solid",
+  borderColor: "cadet.300"
+};
 function BlockTypeButton({ label, icon, onClick }) {
-  return /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(
     material.Button,
     {
       sx: BUTTON_SX2,
@@ -3837,14 +4555,14 @@ function BlockTypeButton({ label, icon, onClick }) {
         onClick();
       }
     },
-    /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: ICON_SX }, icon),
-    /* @__PURE__ */ React72__default.default.createElement(material.Typography, { variant: "body2" }, label)
+    /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: ICON_SX }, icon),
+    /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "body2" }, label)
   );
 }
 var BUTTONS = [
   {
     label: "Heading",
-    icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.HMobiledataOutlined, null),
+    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.HMobiledataOutlined, null),
     block: () => ({
       type: "Heading",
       data: {
@@ -3857,11 +4575,11 @@ var BUTTONS = [
   },
   {
     label: "Text",
-    icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.NotesOutlined, null),
+    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.NotesOutlined, null),
     block: () => ({
       type: "Text",
       data: {
-        props: { text: "My new text block" },
+        props: { text: "My new text block", markdown: true },
         style: {
           padding: { top: 16, bottom: 16, left: 24, right: 24 },
           fontWeight: "normal"
@@ -3871,13 +4589,13 @@ var BUTTONS = [
   },
   {
     label: "Button",
-    icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.SmartButtonOutlined, null),
+    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.SmartButtonOutlined, null),
     block: () => ({
       type: "Button",
       data: {
         props: {
           text: "Button",
-          url: "https://www.usewaypoint.com"
+          url: "https://example.com"
         },
         style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } }
       }
@@ -3885,12 +4603,12 @@ var BUTTONS = [
   },
   {
     label: "Image",
-    icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.ImageOutlined, null),
+    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ImageOutlined, null),
     block: () => ({
       type: "Image",
       data: {
         props: {
-          url: "https://assets.usewaypoint.com/sample-image.jpg",
+          url: "https://placehold.co/600x400/EEE/999?text=Sample+Image",
           alt: "Sample product",
           contentAlignment: "middle",
           linkHref: null
@@ -3901,7 +4619,7 @@ var BUTTONS = [
   },
   {
     label: "Avatar",
-    icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AccountCircleOutlined, null),
+    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AccountCircleOutlined, null),
     block: () => ({
       type: "Avatar",
       data: {
@@ -3915,7 +4633,7 @@ var BUTTONS = [
   },
   {
     label: "Personal Signature",
-    icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.ContactMailOutlined, null),
+    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ContactMailOutlined, null),
     block: () => ({
       type: "Signature",
       data: {
@@ -3937,7 +4655,7 @@ var BUTTONS = [
   },
   {
     label: "Company Signature",
-    icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.BusinessOutlined, null),
+    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.BusinessOutlined, null),
     block: () => ({
       type: "Signature",
       data: {
@@ -3957,7 +4675,7 @@ var BUTTONS = [
   },
   {
     label: "Divider",
-    icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.HorizontalRuleOutlined, null),
+    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.HorizontalRuleOutlined, null),
     block: () => ({
       type: "Divider",
       data: {
@@ -3970,7 +4688,7 @@ var BUTTONS = [
   },
   {
     label: "Spacer",
-    icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.Crop32Outlined, null),
+    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.Crop32Outlined, null),
     block: () => ({
       type: "Spacer",
       data: {}
@@ -3978,7 +4696,7 @@ var BUTTONS = [
   },
   {
     label: "Html",
-    icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.HtmlOutlined, null),
+    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.HtmlOutlined, null),
     block: () => ({
       type: "Html",
       data: {
@@ -3993,7 +4711,7 @@ var BUTTONS = [
   },
   {
     label: "Columns",
-    icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.ViewColumnOutlined, null),
+    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ViewColumnOutlined, null),
     block: () => ({
       type: "ColumnsContainer",
       data: {
@@ -4008,7 +4726,7 @@ var BUTTONS = [
   },
   {
     label: "Container",
-    icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.LibraryAddOutlined, null),
+    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.LibraryAddOutlined, null),
     block: () => ({
       type: "Container",
       data: {
@@ -4032,7 +4750,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
   if (anchorEl === null) {
     return null;
   }
-  return /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(
     material.Menu,
     {
       open: true,
@@ -4041,12 +4759,12 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
       transformOrigin: { vertical: "top", horizontal: "center" }
     },
-    /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React72__default.default.createElement(BlockTypeButton, { key: i, label: k.label, icon: k.icon, onClick: () => onClick(k.block()) })))
+    /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React60__default.default.createElement(BlockTypeButton, { key: i, label: k.label, icon: k.icon, onClick: () => onClick(k.block()) })))
   );
 }
 function DividerButton({ buttonElement, onClick }) {
-  const [visible, setVisible] = React72.useState(false);
-  React72.useEffect(() => {
+  const [visible, setVisible] = React60.useState(false);
+  React60.useEffect(() => {
     function listener({ clientX, clientY }) {
       if (!buttonElement) {
         return;
@@ -4068,7 +4786,7 @@ function DividerButton({ buttonElement, onClick }) {
       window.removeEventListener("mousemove", listener);
     };
   }, [buttonElement, setVisible]);
-  return /* @__PURE__ */ React72__default.default.createElement(material.Fade, { in: visible }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(material.Fade, { in: visible }, /* @__PURE__ */ React60__default.default.createElement(
     material.IconButton,
     {
       size: "small",
@@ -4091,11 +4809,11 @@ function DividerButton({ buttonElement, onClick }) {
         onClick();
       }
     },
-    /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
+    /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
   ));
 }
 function PlaceholderButton({ onClick }) {
-  return /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(
     material.ButtonBase,
     {
       onClick: (ev) => {
@@ -4111,7 +4829,7 @@ function PlaceholderButton({ onClick }) {
         bgcolor: "rgba(0,0,0, 0.05)"
       }
     },
-    /* @__PURE__ */ React72__default.default.createElement(
+    /* @__PURE__ */ React60__default.default.createElement(
       iconsMaterial.AddOutlined,
       {
         sx: {
@@ -4128,19 +4846,19 @@ function PlaceholderButton({ onClick }) {
 
 // src/editor/blocks/helpers/editor-children-ids/add-block-menu/index.tsx
 function AddBlockButton({ onSelect, placeholder }) {
-  const [menuAnchorEl, setMenuAnchorEl] = React72.useState(null);
-  const [buttonElement, setButtonElement] = React72.useState(null);
+  const [menuAnchorEl, setMenuAnchorEl] = React60.useState(null);
+  const [buttonElement, setButtonElement] = React60.useState(null);
   const handleButtonClick = () => {
     setMenuAnchorEl(buttonElement);
   };
   const renderButton2 = () => {
     if (placeholder) {
-      return /* @__PURE__ */ React72__default.default.createElement(PlaceholderButton, { onClick: handleButtonClick });
+      return /* @__PURE__ */ React60__default.default.createElement(PlaceholderButton, { onClick: handleButtonClick });
     } else {
-      return /* @__PURE__ */ React72__default.default.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
+      return /* @__PURE__ */ React60__default.default.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
     }
   };
-  return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton2()), /* @__PURE__ */ React72__default.default.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
+  return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton2()), /* @__PURE__ */ React60__default.default.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
 }
 
 // src/editor/blocks/helpers/editor-children-ids/index.tsx
@@ -4167,9 +4885,9 @@ function EditorChildrenIds({ childrenIds, onChange }) {
     });
   };
   if (!childrenIds || childrenIds.length === 0) {
-    return /* @__PURE__ */ React72__default.default.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock });
+    return /* @__PURE__ */ React60__default.default.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock });
   }
-  return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React72__default.default.createElement(React72.Fragment, { key: childId }, /* @__PURE__ */ React72__default.default.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), /* @__PURE__ */ React72__default.default.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React72__default.default.createElement(AddBlockButton, { onSelect: appendBlock }));
+  return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React60__default.default.createElement(React60.Fragment, { key: childId }, /* @__PURE__ */ React60__default.default.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), /* @__PURE__ */ React60__default.default.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React60__default.default.createElement(AddBlockButton, { onSelect: appendBlock }));
 }
 
 // src/editor/blocks/columns-container/columns-container-editor.tsx
@@ -4196,15 +4914,15 @@ function ColumnsContainerEditor({ style, props }) {
     });
     setSelectedBlockId(blockId);
   };
-  return /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(
     columns_container_default,
     {
       props: restProps,
       style,
       columns: [
-        /* @__PURE__ */ React72__default.default.createElement(EditorChildrenIds, { childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds, onChange: (change) => updateColumn(0, change) }),
-        /* @__PURE__ */ React72__default.default.createElement(EditorChildrenIds, { childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds, onChange: (change) => updateColumn(1, change) }),
-        /* @__PURE__ */ React72__default.default.createElement(EditorChildrenIds, { childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds, onChange: (change) => updateColumn(2, change) })
+        /* @__PURE__ */ React60__default.default.createElement(EditorChildrenIds, { childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds, onChange: (change) => updateColumn(0, change) }),
+        /* @__PURE__ */ React60__default.default.createElement(EditorChildrenIds, { childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds, onChange: (change) => updateColumn(1, change) }),
+        /* @__PURE__ */ React60__default.default.createElement(EditorChildrenIds, { childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds, onChange: (change) => updateColumn(2, change) })
       ]
     }
   );
@@ -4214,7 +4932,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__default.default.createElement(container_default, { style }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(container_default, { style }, /* @__PURE__ */ React60__default.default.createElement(
     EditorChildrenIds,
     {
       childrenIds,
@@ -4320,7 +5038,7 @@ function EmailLayoutEditor(props) {
   const document2 = useDocument();
   const currentBlockId = useCurrentBlockId();
   const selectedBlockId = useSelectedBlockId();
-  const handleDelete = React72.useCallback((e) => {
+  const handleDelete = React60.useCallback((e) => {
     var _a2, _b2, _c2;
     if (e.key !== "Delete" && e.key !== "Backspace") return;
     if (!selectedBlockId) return;
@@ -4351,7 +5069,7 @@ function EmailLayoutEditor(props) {
     delete nDocument[selectedBlockId];
     resetDocument(nDocument);
   }, [selectedBlockId, document2]);
-  const handleCopy = React72.useCallback((e) => {
+  const handleCopy = React60.useCallback((e) => {
     if (!(e.metaKey || e.ctrlKey) || e.key !== "c") return;
     if (!selectedBlockId) return;
     const target = e.target;
@@ -4364,7 +5082,7 @@ function EmailLayoutEditor(props) {
     const payload = JSON.stringify({ __emailEditorBlocks: true, rootBlockId: selectedBlockId, blocks });
     navigator.clipboard.writeText(payload);
   }, [selectedBlockId, document2]);
-  const handlePaste = React72.useCallback((e) => __async(null, null, function* () {
+  const handlePaste = React60.useCallback((e) => __async(null, null, function* () {
     var _a2;
     const target = e.target;
     if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
@@ -4395,7 +5113,7 @@ function EmailLayoutEditor(props) {
     resetDocument(doc);
     setSelectedBlockId(newRootId);
   }), [document2, childrenIds, selectedBlockId, currentBlockId]);
-  React72.useEffect(() => {
+  React60.useEffect(() => {
     window.addEventListener("keydown", handleDelete);
     window.addEventListener("keydown", handleCopy);
     window.addEventListener("paste", handlePaste);
@@ -4405,27 +5123,64 @@ function EmailLayoutEditor(props) {
       window.removeEventListener("paste", handlePaste);
     };
   }, [handleDelete, handleCopy, handlePaste]);
-  return /* @__PURE__ */ React72__default.default.createElement(
+  const baseStyle = {
+    color: (_b = props.textColor) != null ? _b : "#262626",
+    fontFamily: getFontFamily7(props.fontFamily),
+    fontSize: "16px",
+    fontWeight: "400",
+    letterSpacing: "0.15008px",
+    lineHeight: "1.5",
+    margin: "0"
+  };
+  const editorChildren = /* @__PURE__ */ React60__default.default.createElement(
+    EditorChildrenIds,
+    {
+      childrenIds,
+      onChange: ({ block, blockId, childrenIds: childrenIds2 }) => {
+        setDocument({
+          [blockId]: block,
+          [currentBlockId]: {
+            type: "EmailLayout",
+            data: __spreadProps(__spreadValues({}, document2[currentBlockId].data), {
+              childrenIds: childrenIds2
+            })
+          }
+        });
+        setSelectedBlockId(blockId);
+      }
+    }
+  );
+  if (props.backdropDisabled) {
+    return /* @__PURE__ */ React60__default.default.createElement(
+      "div",
+      {
+        onClick: () => {
+          setSelectedBlockId(null);
+        },
+        style: __spreadProps(__spreadValues({}, baseStyle), {
+          backgroundColor: "#F5F5F5",
+          padding: "32px",
+          width: "100%",
+          minHeight: "100%"
+        })
+      },
+      /* @__PURE__ */ React60__default.default.createElement("div", { style: { maxWidth: "600px" } }, editorChildren)
+    );
+  }
+  return /* @__PURE__ */ React60__default.default.createElement(
     "div",
     {
       onClick: () => {
         setSelectedBlockId(null);
       },
-      style: {
-        backgroundColor: (_b = props.backdropColor) != null ? _b : "#F5F5F5",
-        color: (_c = props.textColor) != null ? _c : "#262626",
-        fontFamily: getFontFamily7(props.fontFamily),
-        fontSize: "16px",
-        fontWeight: "400",
-        letterSpacing: "0.15008px",
-        lineHeight: "1.5",
-        margin: "0",
+      style: __spreadProps(__spreadValues({}, baseStyle), {
+        backgroundColor: (_c = props.backdropColor) != null ? _c : "#F5F5F5",
         padding: "32px 0",
         width: "100%",
         minHeight: "100%"
-      }
+      })
     },
-    /* @__PURE__ */ React72__default.default.createElement(
+    /* @__PURE__ */ React60__default.default.createElement(
       "table",
       {
         align: "center",
@@ -4435,6 +5190,7 @@ function EmailLayoutEditor(props) {
           maxWidth: "600px",
           backgroundColor: (_d = props.canvasColor) != null ? _d : "#FFFFFF",
           borderRadius: (_e = props.borderRadius) != null ? _e : void 0,
+          overflow: props.borderRadius ? "hidden" : void 0,
           border: (() => {
             const v = props.borderColor;
             if (!v) {
@@ -4448,24 +5204,7 @@ function EmailLayoutEditor(props) {
         cellPadding: "0",
         border: 0
       },
-      /* @__PURE__ */ React72__default.default.createElement("tbody", null, /* @__PURE__ */ React72__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React72__default.default.createElement("td", null, /* @__PURE__ */ React72__default.default.createElement(
-        EditorChildrenIds,
-        {
-          childrenIds,
-          onChange: ({ block, blockId, childrenIds: childrenIds2 }) => {
-            setDocument({
-              [blockId]: block,
-              [currentBlockId]: {
-                type: "EmailLayout",
-                data: __spreadProps(__spreadValues({}, document2[currentBlockId].data), {
-                  childrenIds: childrenIds2
-                })
-              }
-            });
-            setSelectedBlockId(blockId);
-          }
-        }
-      ))))
+      /* @__PURE__ */ React60__default.default.createElement("tbody", null, /* @__PURE__ */ React60__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React60__default.default.createElement("td", null, editorChildren)))
     )
   );
 }
@@ -4624,13 +5363,13 @@ function TuneMenu({ blockId }) {
     resetDocument(nDocument);
     setSelectedBlockId(blockId);
   };
-  return /* @__PURE__ */ React72__default.default.createElement(material.Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React72__default.default.createElement(material.Stack, null, /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Move up", placement: "left-start" }, /* @__PURE__ */ React72__default.default.createElement(material.IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Move down", placement: "left-start" }, /* @__PURE__ */ React72__default.default.createElement(material.IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Copy block", placement: "left-start" }, /* @__PURE__ */ React72__default.default.createElement(material.IconButton, { onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Delete", placement: "left-start" }, /* @__PURE__ */ React72__default.default.createElement(material.IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.DeleteOutlined, { fontSize: "small" })))));
+  return /* @__PURE__ */ React60__default.default.createElement(material.Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, null, /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Move up", placement: "left-start" }, /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Move down", placement: "left-start" }, /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Copy block", placement: "left-start" }, /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Delete", placement: "left-start" }, /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.DeleteOutlined, { fontSize: "small" })))));
 }
 
 // src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
 function EditorBlockWrapper({ children }) {
   const selectedBlockId = useSelectedBlockId();
-  const [mouseInside, setMouseInside] = React72.useState(false);
+  const [mouseInside, setMouseInside] = React60.useState(false);
   const blockId = useCurrentBlockId();
   let outline;
   if (selectedBlockId === blockId) {
@@ -4642,9 +5381,9 @@ function EditorBlockWrapper({ children }) {
     if (selectedBlockId !== blockId) {
       return null;
     }
-    return /* @__PURE__ */ React72__default.default.createElement(TuneMenu, { blockId });
+    return /* @__PURE__ */ React60__default.default.createElement(TuneMenu, { blockId });
   };
-  return /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(
     material.Box,
     {
       sx: {
@@ -4730,8 +5469,8 @@ function ButtonEditor({ style, props }) {
   const fullWidth = (_b = props == null ? void 0 : props.fullWidth) != null ? _b : ButtonPropsDefaults.fullWidth;
   const buttonTextColor = (_c = props == null ? void 0 : props.buttonTextColor) != null ? _c : ButtonPropsDefaults.buttonTextColor;
   const buttonBackgroundColor = (_d = props == null ? void 0 : props.buttonBackgroundColor) != null ? _d : ButtonPropsDefaults.buttonBackgroundColor;
-  const [localText, setLocalText] = React72.useState(text);
-  React72.useEffect(() => {
+  const [localText, setLocalText] = React60.useState(text);
+  React60.useEffect(() => {
     setLocalText(text);
   }, [text]);
   const padding = getButtonSizePadding2(props);
@@ -4774,7 +5513,7 @@ function ButtonEditor({ style, props }) {
       width: fullWidth ? "100%" : void 0,
       textAlign: "center"
     });
-    return /* @__PURE__ */ React72__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React72__default.default.createElement(
+    return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React60__default.default.createElement(
       "input",
       {
         type: "text",
@@ -4785,7 +5524,7 @@ function ButtonEditor({ style, props }) {
       }
     ));
   }
-  return /* @__PURE__ */ React72__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React72__default.default.createElement("span", { style: linkStyle }, /* @__PURE__ */ React72__default.default.createElement("span", null, text)));
+  return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React60__default.default.createElement("span", { style: linkStyle }, /* @__PURE__ */ React60__default.default.createElement("span", null, text)));
 }
 function getFontFamily9(fontFamily) {
   switch (fontFamily) {
@@ -4856,10 +5595,10 @@ function HeadingEditor({ style, props }) {
   const isSelected = selectedBlockId === blockId;
   const level = (_a = props == null ? void 0 : props.level) != null ? _a : HeadingPropsDefaults.level;
   const textContent = (_b = props == null ? void 0 : props.text) != null ? _b : HeadingPropsDefaults.text;
-  const [localText, setLocalText] = React72.useState(textContent);
+  const [localText, setLocalText] = React60.useState(textContent);
   const rootBlock = document2.root;
   const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily9(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
-  React72.useEffect(() => {
+  React60.useEffect(() => {
     setLocalText(textContent);
   }, [textContent]);
   const fontFamily = getFontFamily9(style == null ? void 0 : style.fontFamily) || rootFontFamily;
@@ -4908,7 +5647,7 @@ function HeadingEditor({ style, props }) {
     }
   };
   if (isSelected) {
-    return /* @__PURE__ */ React72__default.default.createElement(
+    return /* @__PURE__ */ React60__default.default.createElement(
       "textarea",
       {
         value: localText,
@@ -4923,11 +5662,11 @@ function HeadingEditor({ style, props }) {
   }
   switch (level) {
     case "h1":
-      return /* @__PURE__ */ React72__default.default.createElement("h1", { style: hStyle }, textContent);
+      return /* @__PURE__ */ React60__default.default.createElement("h1", { style: hStyle }, textContent);
     case "h2":
-      return /* @__PURE__ */ React72__default.default.createElement("h2", { style: hStyle }, textContent);
+      return /* @__PURE__ */ React60__default.default.createElement("h2", { style: hStyle }, textContent);
     case "h3":
-      return /* @__PURE__ */ React72__default.default.createElement("h3", { style: hStyle }, textContent);
+      return /* @__PURE__ */ React60__default.default.createElement("h3", { style: hStyle }, textContent);
   }
 }
 function HtmlEditor({ style, props }) {
@@ -4936,8 +5675,8 @@ function HtmlEditor({ style, props }) {
   const selectedBlockId = useSelectedBlockId();
   const isSelected = selectedBlockId === blockId;
   const contents = (_a = props == null ? void 0 : props.contents) != null ? _a : "";
-  const [localContents, setLocalContents] = React72.useState(contents);
-  React72.useEffect(() => {
+  const [localContents, setLocalContents] = React60.useState(contents);
+  React60.useEffect(() => {
     setLocalContents(contents);
   }, [contents]);
   const cssStyle = {
@@ -4982,7 +5721,7 @@ function HtmlEditor({ style, props }) {
       margin: 0,
       backgroundColor: "transparent"
     });
-    return /* @__PURE__ */ React72__default.default.createElement("div", { style: cssStyle }, /* @__PURE__ */ React72__default.default.createElement(
+    return /* @__PURE__ */ React60__default.default.createElement("div", { style: cssStyle }, /* @__PURE__ */ React60__default.default.createElement(
       "textarea",
       {
         value: localContents,
@@ -4996,9 +5735,9 @@ function HtmlEditor({ style, props }) {
     ));
   }
   if (!contents) {
-    return /* @__PURE__ */ React72__default.default.createElement("div", { style: cssStyle });
+    return /* @__PURE__ */ React60__default.default.createElement("div", { style: cssStyle });
   }
-  return /* @__PURE__ */ React72__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
+  return /* @__PURE__ */ React60__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
 }
 function getImageBorderRadius2(shape, size) {
   switch (shape) {
@@ -5031,36 +5770,36 @@ function SignatureEditor({ style, props }) {
   const nameColor = (_m = props == null ? void 0 : props.nameColor) != null ? _m : SignaturePropsDefaults.nameColor;
   const textColor = (_n = props == null ? void 0 : props.textColor) != null ? _n : SignaturePropsDefaults.textColor;
   const linkColor = (_o = props == null ? void 0 : props.linkColor) != null ? _o : SignaturePropsDefaults.linkColor;
-  const [localGreeting, setLocalGreeting] = React72.useState(greeting);
-  const [localName, setLocalName] = React72.useState(name);
-  const [localTitle, setLocalTitle] = React72.useState(title);
-  const [localCompany, setLocalCompany] = React72.useState(company);
-  const [localAddress, setLocalAddress] = React72.useState(address);
-  const [localEmail, setLocalEmail] = React72.useState(email);
-  const [localPhone, setLocalPhone] = React72.useState(phone);
-  const [localWebsite, setLocalWebsite] = React72.useState(website);
-  React72.useEffect(() => {
+  const [localGreeting, setLocalGreeting] = React60.useState(greeting);
+  const [localName, setLocalName] = React60.useState(name);
+  const [localTitle, setLocalTitle] = React60.useState(title);
+  const [localCompany, setLocalCompany] = React60.useState(company);
+  const [localAddress, setLocalAddress] = React60.useState(address);
+  const [localEmail, setLocalEmail] = React60.useState(email);
+  const [localPhone, setLocalPhone] = React60.useState(phone);
+  const [localWebsite, setLocalWebsite] = React60.useState(website);
+  React60.useEffect(() => {
     setLocalGreeting(greeting);
   }, [greeting]);
-  React72.useEffect(() => {
+  React60.useEffect(() => {
     setLocalName(name);
   }, [name]);
-  React72.useEffect(() => {
+  React60.useEffect(() => {
     setLocalTitle(title);
   }, [title]);
-  React72.useEffect(() => {
+  React60.useEffect(() => {
     setLocalCompany(company);
   }, [company]);
-  React72.useEffect(() => {
+  React60.useEffect(() => {
     setLocalAddress(address);
   }, [address]);
-  React72.useEffect(() => {
+  React60.useEffect(() => {
     setLocalEmail(email);
   }, [email]);
-  React72.useEffect(() => {
+  React60.useEffect(() => {
     setLocalPhone(phone);
   }, [phone]);
-  React72.useEffect(() => {
+  React60.useEffect(() => {
     setLocalWebsite(website);
   }, [website]);
   const updateProps = (updates) => {
@@ -5113,7 +5852,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__default.default.createElement(
+  const imageElement = imageUrl ? /* @__PURE__ */ React60__default.default.createElement(
     "img",
     {
       src: imageUrl,
@@ -5131,7 +5870,7 @@ function SignatureEditor({ style, props }) {
       }
     }
   ) : null;
-  const greetingElement = isSelected ? /* @__PURE__ */ React72__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React72__default.default.createElement(
+  const greetingElement = isSelected ? /* @__PURE__ */ React60__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React60__default.default.createElement(
     "input",
     {
       value: localGreeting,
@@ -5142,8 +5881,8 @@ function SignatureEditor({ style, props }) {
       placeholder: "Greeting (e.g. Best regards,)",
       style: __spreadValues(__spreadValues({}, inputBase), greetingStyle)
     }
-  )) : greeting ? /* @__PURE__ */ React72__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
-  const textContent = isSelected ? /* @__PURE__ */ React72__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React72__default.default.createElement(
+  )) : greeting ? /* @__PURE__ */ React60__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
+  const textContent = isSelected ? /* @__PURE__ */ React60__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React60__default.default.createElement(
     "input",
     {
       value: localName,
@@ -5154,7 +5893,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Name",
       style: __spreadValues(__spreadValues({}, inputBase), nameStyle)
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     "input",
     {
       value: localTitle,
@@ -5165,7 +5904,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Title",
       style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     "input",
     {
       value: localCompany,
@@ -5176,7 +5915,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Company",
       style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     "input",
     {
       value: localAddress,
@@ -5187,7 +5926,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Address",
       style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     "input",
     {
       value: localEmail,
@@ -5198,7 +5937,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Email",
       style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { marginTop: 4, display: "block" })
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     "input",
     {
       value: localPhone,
@@ -5209,7 +5948,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Phone",
       style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     "input",
     {
       value: localWebsite,
@@ -5220,11 +5959,11 @@ function SignatureEditor({ style, props }) {
       placeholder: "Website",
       style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
     }
-  )) : /* @__PURE__ */ React72__default.default.createElement("div", null, name && /* @__PURE__ */ React72__default.default.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React72__default.default.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React72__default.default.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React72__default.default.createElement("p", { style: detailStyle }, address), (email || phone || website) && /* @__PURE__ */ React72__default.default.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, email && /* @__PURE__ */ React72__default.default.createElement("span", { style: linkStyle }, email), email && (phone || website) && /* @__PURE__ */ React72__default.default.createElement("span", { style: detailStyle }, " \xB7 "), phone && /* @__PURE__ */ React72__default.default.createElement("span", { style: linkStyle }, phone), phone && website && /* @__PURE__ */ React72__default.default.createElement("span", { style: detailStyle }, " \xB7 "), website && /* @__PURE__ */ React72__default.default.createElement("span", { style: linkStyle }, website)), !name && !title && !company && !email && !phone && !website && /* @__PURE__ */ React72__default.default.createElement("p", { style: detailStyle }, "Click to edit signature"));
+  )) : /* @__PURE__ */ React60__default.default.createElement("div", null, name && /* @__PURE__ */ React60__default.default.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, address), (email || phone || website) && /* @__PURE__ */ React60__default.default.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, email && /* @__PURE__ */ React60__default.default.createElement("span", { style: linkStyle }, email), email && (phone || website) && /* @__PURE__ */ React60__default.default.createElement("span", { style: detailStyle }, " \xB7 "), phone && /* @__PURE__ */ React60__default.default.createElement("span", { style: linkStyle }, phone), phone && website && /* @__PURE__ */ React60__default.default.createElement("span", { style: detailStyle }, " \xB7 "), website && /* @__PURE__ */ React60__default.default.createElement("span", { style: linkStyle }, website)), !name && !title && !company && !email && !phone && !website && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, "Click to edit signature"));
   if (layout === "vertical") {
-    return /* @__PURE__ */ React72__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React72__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
+    return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React60__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
   }
-  return /* @__PURE__ */ React72__default.default.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React72__default.default.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React72__default.default.createElement("tbody", null, /* @__PURE__ */ React72__default.default.createElement("tr", null, imageElement && /* @__PURE__ */ React72__default.default.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React72__default.default.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
+  return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React60__default.default.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React60__default.default.createElement("tbody", null, /* @__PURE__ */ React60__default.default.createElement("tr", null, imageElement && /* @__PURE__ */ React60__default.default.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React60__default.default.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
 }
 function getFontFamily10(fontFamily) {
   switch (fontFamily) {
@@ -5284,11 +6023,11 @@ function TextEditor({ style, props }) {
   const document2 = useDocument();
   const isSelected = selectedBlockId === blockId;
   const textContent = (_a = props == null ? void 0 : props.text) != null ? _a : TextPropsDefaults.text;
-  const [localText, setLocalText] = React72.useState(textContent);
+  const [localText, setLocalText] = React60.useState(textContent);
   const isMarkdown = (_b = props == null ? void 0 : props.markdown) != null ? _b : false;
   const rootBlock = document2.root;
   const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily10(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
-  React72.useEffect(() => {
+  React60.useEffect(() => {
     setLocalText(textContent);
   }, [textContent]);
   const fontFamily = getFontFamily10(style == null ? void 0 : style.fontFamily) || rootFontFamily;
@@ -5338,8 +6077,8 @@ function TextEditor({ style, props }) {
       element.style.height = `${element.scrollHeight}px`;
     }
   };
-  if (isSelected && !isMarkdown) {
-    return /* @__PURE__ */ React72__default.default.createElement(
+  if (isSelected) {
+    return /* @__PURE__ */ React60__default.default.createElement(
       "textarea",
       {
         value: localText,
@@ -5353,36 +6092,36 @@ function TextEditor({ style, props }) {
     );
   }
   if (isMarkdown) {
-    return /* @__PURE__ */ React72__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: textContent });
+    return /* @__PURE__ */ React60__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: textContent });
   }
-  return /* @__PURE__ */ React72__default.default.createElement("div", { style: wStyle }, textContent);
+  return /* @__PURE__ */ React60__default.default.createElement("div", { style: wStyle }, textContent);
 }
 
 // src/editor/core.tsx
 var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
   Avatar: {
     schema: AvatarPropsSchema,
-    Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(avatar_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(avatar_default, __spreadValues({}, props)))
   },
   Button: {
     schema: ButtonPropsSchema,
-    Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(ButtonEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(ButtonEditor, __spreadValues({}, props)))
   },
   Container: {
     schema: container_props_schema_default,
-    Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(ContainerEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(ContainerEditor, __spreadValues({}, props)))
   },
   ColumnsContainer: {
     schema: columns_container_props_schema_default2,
-    Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
   },
   Heading: {
     schema: HeadingPropsSchema,
-    Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(HeadingEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(HeadingEditor, __spreadValues({}, props)))
   },
   Html: {
     schema: HtmlPropsSchema,
-    Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(HtmlEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(HtmlEditor, __spreadValues({}, props)))
   },
   Image: {
     schema: ImagePropsSchema,
@@ -5394,28 +6133,28 @@ var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
           linkHref: null
         })
       });
-      return /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(image_default, __spreadValues({}, props)));
+      return /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(image_default, __spreadValues({}, props)));
     }
   },
   Text: {
     schema: TextPropsSchema,
-    Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(TextEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(TextEditor, __spreadValues({}, props)))
   },
   EmailLayout: {
     schema: email_layout_props_schema_default,
-    Component: (p) => /* @__PURE__ */ React72__default.default.createElement(EmailLayoutEditor, __spreadValues({}, p))
+    Component: (p) => /* @__PURE__ */ React60__default.default.createElement(EmailLayoutEditor, __spreadValues({}, p))
   },
   Spacer: {
     schema: SpacerPropsSchema,
-    Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(spacer_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(spacer_default, __spreadValues({}, props)))
   },
   Divider: {
     schema: DividerPropsSchema,
-    Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(divider_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(divider_default, __spreadValues({}, props)))
   },
   Signature: {
     schema: SignaturePropsSchema,
-    Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(SignatureEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(SignatureEditor, __spreadValues({}, props)))
   }
 });
 var EditorBlock2 = buildBlockComponent(EDITOR_DICTIONARY);
@@ -5423,15 +6162,15 @@ var EditorBlockSchema = buildBlockConfigurationSchema(EDITOR_DICTIONARY);
 zod.z.record(zod.z.string(), EditorBlockSchema);
 
 // src/editor/editor-block.tsx
-var EditorBlockContext = React72.createContext(null);
-var useCurrentBlockId = () => React72.useContext(EditorBlockContext);
+var EditorBlockContext = React60.createContext(null);
+var useCurrentBlockId = () => React60.useContext(EditorBlockContext);
 function EditorBlock({ id }) {
   const document2 = useDocument();
   const block = document2[id];
   if (!block) {
     throw new Error("Could not find block");
   }
-  return /* @__PURE__ */ React72__default.default.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React72__default.default.createElement(EditorBlock2, __spreadValues({}, block)));
+  return /* @__PURE__ */ React60__default.default.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React60__default.default.createElement(EditorBlock2, __spreadValues({}, block)));
 }
 function ToggleInspectorPanelButton() {
   const inspectorDrawerOpen = useInspectorDrawerOpen();
@@ -5439,20 +6178,20 @@ function ToggleInspectorPanelButton() {
     toggleInspectorDrawerOpen();
   };
   if (inspectorDrawerOpen) {
-    return /* @__PURE__ */ React72__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.LastPageOutlined, { fontSize: "small" }));
+    return /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.LastPageOutlined, { fontSize: "small" }));
   }
-  return /* @__PURE__ */ React72__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AppRegistrationOutlined, { fontSize: "small" }));
+  return /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AppRegistrationOutlined, { fontSize: "small" }));
 }
 function useIcon() {
   const samplesDrawerOpen = useSamplesDrawerOpen();
   if (samplesDrawerOpen) {
-    return /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.FirstPageOutlined, { fontSize: "small" });
+    return /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FirstPageOutlined, { fontSize: "small" });
   }
-  return /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.MenuOutlined, { fontSize: "small" });
+  return /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.MenuOutlined, { fontSize: "small" });
 }
 function ToggleSamplesPanelButton() {
   const icon = useIcon();
-  return /* @__PURE__ */ React72__default.default.createElement(material.IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
+  return /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
 }
 function formatHtml(html2, spaces = 2) {
   try {
@@ -5500,8 +6239,8 @@ function json(value) {
 
 // src/app/email-canvas/helper/highlighted-code-panel.tsx
 function HighlightedCodePanel({ type, value }) {
-  const [code, setCode] = React72.useState(null);
-  React72.useEffect(() => {
+  const [code, setCode] = React60.useState(null);
+  React60.useEffect(() => {
     switch (type) {
       case "html":
         html(value).then(setCode);
@@ -5514,7 +6253,7 @@ function HighlightedCodePanel({ type, value }) {
   if (code === null) {
     return null;
   }
-  return /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(
     "pre",
     {
       style: {
@@ -5539,18 +6278,18 @@ function HighlightedCodePanel({ type, value }) {
 // src/app/email-canvas/html-panel.tsx
 function HtmlPanel() {
   const document2 = useDocument();
-  const code = React72.useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
-  return /* @__PURE__ */ React72__default.default.createElement(HighlightedCodePanel, { type: "html", value: code });
+  const code = React60.useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
+  return /* @__PURE__ */ React60__default.default.createElement(HighlightedCodePanel, { type: "html", value: code });
 }
 function JsonPanel() {
   const document2 = useDocument();
-  const code = React72.useMemo(() => JSON.stringify(document2, null, "  "), [document2]);
-  return /* @__PURE__ */ React72__default.default.createElement(HighlightedCodePanel, { type: "json", value: code });
+  const code = React60.useMemo(() => JSON.stringify(document2, null, "  "), [document2]);
+  return /* @__PURE__ */ React60__default.default.createElement(HighlightedCodePanel, { type: "json", value: code });
 }
 function TextPanel() {
   const document2 = useDocument();
-  const text = React72.useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
-  return /* @__PURE__ */ React72__default.default.createElement(
+  const text = React60.useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
+  return /* @__PURE__ */ React60__default.default.createElement(
     "pre",
     {
       style: {
@@ -5586,185 +6325,47 @@ function MainTabsGroup() {
         setSelectedMainTab("editor");
     }
   };
-  return /* @__PURE__ */ React72__default.default.createElement(material.Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(material.Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React60__default.default.createElement(
     material.Tab,
     {
       value: "editor",
-      label: /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Edit" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.EditOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Edit" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.EditOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     material.Tab,
     {
       value: "preview",
-      label: /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Preview" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.PreviewOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Preview" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.PreviewOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     material.Tab,
     {
       value: "html",
-      label: /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "HTML output" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.CodeOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "HTML output" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.CodeOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     material.Tab,
     {
       value: "text",
-      label: /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.SubjectOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.SubjectOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     material.Tab,
     {
       value: "json",
-      label: /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "JSON output" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.DataObjectOutlined, { fontSize: "small" }))
-    }
-  ));
-}
-var SnackbarContext = React72.createContext(null);
-function useSnackbar() {
-  const context = React72.useContext(SnackbarContext);
-  if (!context) {
-    throw new Error("useSnackbar must be used within a SnackbarProvider");
-  }
-  return context;
-}
-function SnackbarProvider({ children }) {
-  const [message, setMessage] = React72.useState(null);
-  const [duration, setDuration] = React72.useState(3e3);
-  const showMessage = (text, customDuration = 3e3) => {
-    setMessage(text);
-    setDuration(customDuration);
-  };
-  const handleClose = () => {
-    setMessage(null);
-  };
-  return /* @__PURE__ */ React72__default.default.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React72__default.default.createElement(
-    material.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__default.default.createElement(material.Tooltip, { title: "JSON output" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.DataObjectOutlined, { fontSize: "small" }))
     }
   ));
 }
-function SaveTemplateDialog({
-  open,
-  onClose,
-  onSave,
-  onNameChange,
-  defaultName = "",
-  error: externalError = null
-}) {
-  const [templateName, setTemplateName] = React72.useState(defaultName);
-  const [internalError, setInternalError] = React72.useState("");
-  const [isSubmitting, setIsSubmitting] = React72.useState(false);
-  React72.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__default.default.createElement(
-    material.Dialog,
-    {
-      open,
-      onClose: handleCancel,
-      maxWidth: "sm",
-      fullWidth: true
-    },
-    /* @__PURE__ */ React72__default.default.createElement(material.DialogTitle, null, "Save Email Template"),
-    /* @__PURE__ */ React72__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: { pt: 1 } }, /* @__PURE__ */ React72__default.default.createElement(
-      material.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__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React72__default.default.createElement(material.Button, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React72__default.default.createElement(
-      material.Button,
-      {
-        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] = React72.useState(false);
+  const [saveDialogOpen, setSaveDialogOpen] = React60.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;
       }
@@ -5781,8 +6382,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();
         }
@@ -5798,7 +6399,7 @@ function SaveButton({ loadTemplates, saveAs }) {
       return false;
     }
   });
-  return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
     material.IconButton,
     {
       onClick: handleSave,
@@ -5809,23 +6410,23 @@ function SaveButton({ loadTemplates, saveAs }) {
         }
       }
     },
-    /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Save template" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.SaveOutlined, { fontSize: "small" }))
-  ), /* @__PURE__ */ React72__default.default.createElement(
+    /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: isSample ? "Save as new template" : "Save template" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.SaveOutlined, { fontSize: "small" }))
+  ), /* @__PURE__ */ React60__default.default.createElement(
     SaveTemplateDialog,
     {
       open: saveDialogOpen,
       onClose: () => setSaveDialogOpen(false),
       onSave: handleSaveAs,
-      defaultName: currentTemplateId === "welcome" ? "Welcome Template" : "New Template"
+      defaultName: isSample ? "New Template" : "New Template"
     }
   ));
 }
 function NewTemplateButton({ loadTemplates, saveAs }) {
   const { setCurrentTemplate, loadTemplate } = useEmailEditor();
   const { showMessage } = useSnackbar();
-  const [saveDialogOpen, setSaveDialogOpen] = React72.useState(false);
-  const [templates, setTemplates] = React72.useState([]);
-  const [nameError, setNameError] = React72.useState(null);
+  const [saveDialogOpen, setSaveDialogOpen] = React60.useState(false);
+  const [templates, setTemplates] = React60.useState([]);
+  const [nameError, setNameError] = React60.useState(null);
   const fetchTemplates = () => __async(null, null, function* () {
     if (loadTemplates) {
       try {
@@ -5845,7 +6446,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");
@@ -5863,10 +6464,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();
         }
@@ -5880,7 +6481,7 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
     }
     return false;
   });
-  return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
     material.IconButton,
     {
       onClick: handleNewTemplate,
@@ -5891,8 +6492,8 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
         }
       }
     },
-    /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "New template" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.Add, { fontSize: "small" }))
-  ), /* @__PURE__ */ React72__default.default.createElement(
+    /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "New template" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.Add, { fontSize: "small" }))
+  ), /* @__PURE__ */ React60__default.default.createElement(
     SaveTemplateDialog,
     {
       open: saveDialogOpen,
@@ -5907,6 +6508,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__default.default.createElement(
+    material.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__default.default.createElement(material.Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
+    /* @__PURE__ */ React60__default.default.createElement(
+      material.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 }) {
@@ -5939,19 +6582,19 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
   const renderMainPanel = () => {
     switch (selectedMainTab) {
       case "editor":
-        return /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React72__default.default.createElement(EditorBlock, { id: "root" }));
+        return /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React60__default.default.createElement(EditorBlock, { id: "root" }));
       case "preview":
-        return /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React72__default.default.createElement(Reader, { document: document2, rootBlockId: "root" }));
+        return /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React60__default.default.createElement(Reader, { document: document2, rootBlockId: "root" }));
       case "html":
-        return /* @__PURE__ */ React72__default.default.createElement(HtmlPanel, null);
+        return /* @__PURE__ */ React60__default.default.createElement(HtmlPanel, null);
       case "text":
-        return /* @__PURE__ */ React72__default.default.createElement(TextPanel, null);
+        return /* @__PURE__ */ React60__default.default.createElement(TextPanel, null);
       case "json":
-        return /* @__PURE__ */ React72__default.default.createElement(JsonPanel, null);
+        return /* @__PURE__ */ React60__default.default.createElement(JsonPanel, null);
     }
   };
   const showSaveButtons = persistenceEnabled;
-  return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
     material.Stack,
     {
       sx: {
@@ -5968,10 +6611,10 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
       justifyContent: "space-between",
       alignItems: "center"
     },
-    samplesDrawerEnabled && /* @__PURE__ */ React72__default.default.createElement(ToggleSamplesPanelButton, null),
-    /* @__PURE__ */ React72__default.default.createElement(material.Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React72__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React72__default.default.createElement(MainTabsGroup, null)), /* @__PURE__ */ React72__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React72__default.default.createElement(material.ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "desktop" }, /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "mobile" }, /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.PhoneIphoneOutlined, { fontSize: "small" })))), showSaveButtons && /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(NewTemplateButton, { loadTemplates, saveAs }), /* @__PURE__ */ React72__default.default.createElement(SaveButton, { loadTemplates, saveAs })))),
-    /* @__PURE__ */ React72__default.default.createElement(ToggleInspectorPanelButton, null)
-  ), /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: {
+    samplesDrawerEnabled && /* @__PURE__ */ React60__default.default.createElement(ToggleSamplesPanelButton, null),
+    /* @__PURE__ */ React60__default.default.createElement(material.Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React60__default.default.createElement(MainTabsGroup, null)), /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React60__default.default.createElement(material.ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "desktop" }, /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "mobile" }, /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.PhoneIphoneOutlined, { fontSize: "small" })))), showSaveButtons && /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(NewTemplateButton, { loadTemplates, saveAs }), /* @__PURE__ */ React60__default.default.createElement(SaveButton, { loadTemplates, saveAs })))),
+    /* @__PURE__ */ React60__default.default.createElement(ToggleInspectorPanelButton, null)
+  ), selectedMainTab === "editor" && /* @__PURE__ */ React60__default.default.createElement(SubjectInput, null), /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: {
     paddingBottom: "50px",
     minWidth: 370
   } }, renderMainPanel()));
@@ -6010,7 +6653,7 @@ function useDrawerTransition(cssProperty, open) {
     duration: !open ? transitions.duration.leavingScreen : transitions.duration.enteringScreen
   });
 }
-var EmailEditorInternal = React72.forwardRef((props, ref) => {
+var EmailEditorInternal = React60.forwardRef((props, ref) => {
   const {
     drawerEnterDuration = 225,
     drawerExitDuration = 225,
@@ -6021,6 +6664,8 @@ var EmailEditorInternal = React72.forwardRef((props, ref) => {
     loadTemplate,
     deleteTemplate,
     copyTemplate,
+    renameTemplate,
+    setTemplateKind,
     saveAs,
     onChange
   } = props;
@@ -6030,10 +6675,10 @@ var EmailEditorInternal = React72.forwardRef((props, ref) => {
   const samplesDrawerOpen = useSamplesDrawerOpen();
   const marginLeftTransition = useDrawerTransition("margin-left", samplesDrawerOpen);
   const marginRightTransition = useDrawerTransition("margin-right", inspectorDrawerOpen);
-  const onChangeRef = React72.useRef(onChange);
+  const onChangeRef = React60.useRef(onChange);
   onChangeRef.current = onChange;
-  const prevDocJsonRef = React72.useRef("");
-  React72.useEffect(() => {
+  const prevDocJsonRef = React60.useRef("");
+  React60.useEffect(() => {
     var _a;
     const docJson = JSON.stringify(currentDocument);
     if (docJson !== prevDocJsonRef.current) {
@@ -6041,7 +6686,7 @@ var EmailEditorInternal = React72.forwardRef((props, ref) => {
       (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, currentDocument);
     }
   }, [currentDocument]);
-  React72.useImperativeHandle(ref, () => ({
+  React60.useImperativeHandle(ref, () => ({
     saveTemplate: () => {
       return saveTemplate();
     },
@@ -6053,7 +6698,7 @@ var EmailEditorInternal = React72.forwardRef((props, ref) => {
       return getDocument();
     }
   }));
-  return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React60__default.default.createElement(
     InspectorDrawer,
     {
       enterDuration: drawerEnterDuration,
@@ -6061,7 +6706,7 @@ var EmailEditorInternal = React72.forwardRef((props, ref) => {
       deleteTemplate,
       copyTemplate
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     SamplesDrawer,
     {
       enterDuration: drawerEnterDuration,
@@ -6071,9 +6716,13 @@ var EmailEditorInternal = React72.forwardRef((props, ref) => {
       loadTemplates,
       loadTemplate,
       currentTemplateId,
-      deleteTemplate
+      deleteTemplate,
+      copyTemplate,
+      renameTemplate,
+      setTemplateKind,
+      saveAs
     }
-  ), /* @__PURE__ */ React72__default.default.createElement(
+  ), /* @__PURE__ */ React60__default.default.createElement(
     material.Stack,
     {
       sx: {
@@ -6082,10 +6731,10 @@ var EmailEditorInternal = React72.forwardRef((props, ref) => {
         transition: [marginLeftTransition, marginRightTransition].join(", ")
       }
     },
-    /* @__PURE__ */ React72__default.default.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
+    /* @__PURE__ */ React60__default.default.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
   ));
 });
-var EmailEditor = React72.forwardRef((props, ref) => {
+var EmailEditor = React60.forwardRef((props, ref) => {
   const {
     initialTemplate: initialTemplateProp,
     initialTemplateId,
@@ -6102,22 +6751,24 @@ var EmailEditor = React72.forwardRef((props, ref) => {
     loadTemplate,
     deleteTemplate,
     copyTemplate,
+    renameTemplate,
+    setTemplateKind,
     saveAs,
     theme
   } = props;
-  const resolvedTemplate = React72.useMemo(
+  const resolvedTemplate = React60.useMemo(
     () => typeof initialTemplateProp === "string" ? htmlToEditorConfig(initialTemplateProp) : initialTemplateProp,
     [initialTemplateProp]
   );
-  const prevTemplateRef = React72.useRef(void 0);
+  const prevTemplateRef = React60.useRef(void 0);
   if (resolvedTemplate && resolvedTemplate !== prevTemplateRef.current) {
     prevTemplateRef.current = resolvedTemplate;
     resetDocument(resolvedTemplate);
   }
-  React72.useEffect(() => {
+  React60.useEffect(() => {
     setPersistenceEnabled(persistenceEnabled);
   }, [persistenceEnabled]);
-  return /* @__PURE__ */ React72__default.default.createElement(material.ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React72__default.default.createElement(material.CssBaseline, null), /* @__PURE__ */ React72__default.default.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React72__default.default.createElement(SnackbarProvider, null, /* @__PURE__ */ React72__default.default.createElement(
+  return /* @__PURE__ */ React60__default.default.createElement(material.ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React60__default.default.createElement(material.CssBaseline, null), /* @__PURE__ */ React60__default.default.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React60__default.default.createElement(SnackbarProvider, null, /* @__PURE__ */ React60__default.default.createElement(
     EmailEditorProvider,
     {
       initialTemplate: resolvedTemplate,
@@ -6126,7 +6777,7 @@ var EmailEditor = React72.forwardRef((props, ref) => {
       onSave,
       onChange
     },
-    /* @__PURE__ */ React72__default.default.createElement(
+    /* @__PURE__ */ React60__default.default.createElement(
       EmailEditorInternal,
       {
         ref,
@@ -6139,6 +6790,8 @@ var EmailEditor = React72.forwardRef((props, ref) => {
         loadTemplate,
         deleteTemplate,
         copyTemplate,
+        renameTemplate,
+        setTemplateKind,
         saveAs,
         onChange
       }
@@ -6197,6 +6850,7 @@ exports.Spacer = spacer_default;
 exports.SpacerProps = SpacerProps;
 exports.SpacerPropsDefaults = SpacerPropsDefaults;
 exports.SpacerPropsSchema = SpacerPropsSchema;
+exports.TemplateVariableSchema = TemplateVariableSchema;
 exports.Text = Text;
 exports.TextProps = TextProps;
 exports.TextPropsDefaults = TextPropsDefaults;