@kontakto/email-template-editor 2.2.2 → 2.3.1

package/dist/index.js

@@ -1,12 +1,13 @@
 import DOMPurify from 'dompurify';
 import { marked, Renderer } from 'marked';
-import React58, { createContext, forwardRef, useRef, useEffect, useImperativeHandle, useMemo, useContext, useState, useCallback, useLayoutEffect, Fragment } from 'react';
+import React62, { createContext, forwardRef, useRef, useEffect, useImperativeHandle, useMemo, useContext, useState, useCallback, useLayoutEffect, Fragment } from 'react';
 import { z } from 'zod';
 import { renderToStaticMarkup as renderToStaticMarkup$1 } from 'react-dom/server';
+import Handlebars from 'handlebars';
 import { createTheme, alpha, lighten, darken } from '@mui/material/styles';
-import { MenuItem, Stack, ThemeProvider, CssBaseline, useTheme, Drawer, Box, Tabs, Tab, Typography, Tooltip, IconButton, TextField, InputAdornment, Chip, CircularProgress, Alert, Divider as Divider$1, ToggleButtonGroup, ToggleButton, Snackbar, Dialog, DialogTitle, DialogContent, DialogActions, Button as Button$1, InputBase, AlertTitle, FormControlLabel, Switch, InputLabel, Menu, Slider, ButtonBase, Popper, Paper, Fade } from '@mui/material';
+import { MenuItem, Stack, ThemeProvider, CssBaseline, useTheme, Drawer, Box, Tabs, Tab, Typography, Tooltip, IconButton, TextField, InputAdornment, Chip, CircularProgress, Alert, ToggleButtonGroup, ToggleButton, Snackbar, Menu, ListItemIcon, ListItemText, Divider as Divider$1, Dialog, DialogTitle, DialogContent, Button as Button$1, DialogActions, List, ListItemButton, InputBase, AlertTitle, FormControlLabel, Switch, InputLabel, Slider, ButtonBase, Popper, Paper, Fade } from '@mui/material';
 import { create } from 'zustand';
-import { AddOutlined, SearchOutlined, MonitorOutlined, PhoneIphoneOutlined, LibraryAddOutlined, ContentCopyOutlined, DriveFileRenameOutlineOutlined, FileUploadOutlined, FileDownloadOutlined, DeleteOutlined, EditOutlined, PreviewOutlined, CodeOutlined, SubjectOutlined, DataObjectOutlined, Add, SaveOutlined, LastPageOutlined, AppRegistrationOutlined, CloudUploadOutlined, FirstPageOutlined, MenuOutlined, InputOutlined, DeleteOutline, RoundedCornerOutlined, AspectRatioOutlined, HeightOutlined, CollectionsOutlined, ErrorOutlineOutlined, VerticalAlignTopOutlined, VerticalAlignCenterOutlined, VerticalAlignBottomOutlined, SpaceBarOutlined, CloseOutlined, AlignVerticalTopOutlined, AlignVerticalBottomOutlined, AlignHorizontalLeftOutlined, AlignHorizontalRightOutlined, FormatAlignLeftOutlined, FormatAlignCenterOutlined, FormatAlignRightOutlined, FormatLineSpacingOutlined, TextFieldsOutlined, FormatBoldOutlined, FormatItalicOutlined, LinkOutlined, ArrowUpwardOutlined, ArrowDownwardOutlined, HMobiledataOutlined, NotesOutlined, SmartButtonOutlined, ImageOutlined, AccountCircleOutlined, ContactMailOutlined, BusinessOutlined, HorizontalRuleOutlined, Crop32Outlined, HtmlOutlined, ViewColumnOutlined } from '@mui/icons-material';
+import { AddOutlined, SearchOutlined, MonitorOutlined, PhoneIphoneOutlined, MoreVertOutlined, DriveFileRenameOutlineOutlined, ContentCopyOutlined, LibraryAddOutlined, FileUploadOutlined, FileDownloadOutlined, DeleteOutlined, InsertDriveFileOutlined, DescriptionOutlined, EditOutlined, PreviewOutlined, CodeOutlined, SubjectOutlined, DataObjectOutlined, LastPageOutlined, AppRegistrationOutlined, CloudUploadOutlined, SaveOutlined, SaveAsOutlined, ViewColumnSharp, ExpandMore, ChevronRight, KeyboardArrowUp, KeyboardArrowDown, FirstPageOutlined, MenuOutlined, GridOnOutlined, SquareOutlined, InputOutlined, DeleteOutline, RoundedCornerOutlined, AspectRatioOutlined, HeightOutlined, CollectionsOutlined, ErrorOutlineOutlined, VerticalAlignTopOutlined, VerticalAlignCenterOutlined, VerticalAlignBottomOutlined, SpaceBarOutlined, BusinessOutlined, ViewColumnOutlined, HtmlOutlined, Crop32Outlined, HorizontalRuleOutlined, ContactMailOutlined, AccountCircleOutlined, ImageOutlined, SmartButtonOutlined, NotesOutlined, HMobiledataOutlined, DashboardOutlined, CloseOutlined, AlignVerticalTopOutlined, AlignVerticalBottomOutlined, AlignHorizontalLeftOutlined, AlignHorizontalRightOutlined, FormatAlignLeftOutlined, FormatAlignCenterOutlined, FormatAlignRightOutlined, FormatLineSpacingOutlined, TextFieldsOutlined, FormatBoldOutlined, FormatItalicOutlined, LinkOutlined, ArrowUpwardOutlined, ArrowDownwardOutlined } from '@mui/icons-material';
 import { HexColorPicker, HexColorInput } from 'react-colorful';
 import hljs from 'highlight.js';
 import jsonHighlighter from 'highlight.js/lib/languages/json';
@@ -180,7 +181,7 @@ function renderInlineMarkdownString(str) {
 function EmailMarkdown(_a) {
   var _b = _a, { markdown } = _b, props = __objRest(_b, ["markdown"]);
   const data = useMemo(() => renderMarkdownString(markdown), [markdown]);
-  return /* @__PURE__ */ React58.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
+  return /* @__PURE__ */ React62.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
 }
 var FONT_FAMILY_SCHEMA = z.enum([
   "MODERN_SANS",
@@ -260,9 +261,9 @@ function Text({ style, props }) {
   };
   const text = (_g = props == null ? void 0 : props.text) != null ? _g : TextPropsDefaults.text;
   if (props == null ? void 0 : props.markdown) {
-    return /* @__PURE__ */ React58.createElement(EmailMarkdown, { style: wStyle, markdown: text });
+    return /* @__PURE__ */ React62.createElement(EmailMarkdown, { style: wStyle, markdown: text });
   }
-  return /* @__PURE__ */ React58.createElement("div", { style: wStyle }, text);
+  return /* @__PURE__ */ React62.createElement("div", { style: wStyle }, text);
 }
 var PADDING_SCHEMA2 = z.object({
   top: z.number(),
@@ -311,7 +312,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__ */ React58.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React62.createElement(
     "img",
     {
       alt,
@@ -463,14 +464,14 @@ function Button({ style, props }) {
     padding: `${padding[0]}px ${padding[1]}px`,
     textDecoration: "none"
   };
-  return /* @__PURE__ */ React58.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React58.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React62.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React62.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__ */ React58.createElement("span", null, text), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement("span", null, text), /* @__PURE__ */ React62.createElement(
     "span",
     {
       dangerouslySetInnerHTML: {
@@ -519,7 +520,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__ */ React58.createElement("div", { style: wStyle }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement("div", { style: wStyle }, /* @__PURE__ */ React62.createElement(
     "table",
     {
       align: "center",
@@ -528,7 +529,7 @@ function ColumnsContainer({ style, columns, props }) {
       border: 0,
       style: { tableLayout: "fixed", borderCollapse: "collapse" }
     },
-    /* @__PURE__ */ React58.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React58.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React58.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React58.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React58.createElement(TableCell, { index: 2, props: blockProps, columns })))
+    /* @__PURE__ */ React62.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React62.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React62.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React62.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React62.createElement(TableCell, { index: 2, props: blockProps, columns })))
   ));
 }
 function TableCell({ index, props, columns }) {
@@ -546,7 +547,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__ */ React58.createElement("td", { style }, children);
+  return /* @__PURE__ */ React62.createElement("td", { style }, children);
 }
 function getPaddingBefore(index, { columnsGap, columnsCount }) {
   if (index === 0) {
@@ -608,9 +609,9 @@ function Container({ style, children }) {
     padding: getPadding5(style == null ? void 0 : style.padding)
   };
   if (!children) {
-    return /* @__PURE__ */ React58.createElement("div", { style: wStyle });
+    return /* @__PURE__ */ React62.createElement("div", { style: wStyle });
   }
-  return /* @__PURE__ */ React58.createElement("div", { style: wStyle }, children);
+  return /* @__PURE__ */ React62.createElement("div", { style: wStyle }, children);
 }
 var container_default = Container;
 var COLOR_SCHEMA5 = z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
@@ -644,7 +645,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__ */ React58.createElement("div", { style: st }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement("div", { style: st }, /* @__PURE__ */ React62.createElement(
     "hr",
     {
       style: {
@@ -742,11 +743,11 @@ function Heading({ props, style }) {
   const renderProps = isMarkdown ? { style: hStyle, dangerouslySetInnerHTML: { __html: html2 != null ? html2 : "" } } : { style: hStyle, children: text };
   switch (level) {
     case "h1":
-      return /* @__PURE__ */ React58.createElement("h1", __spreadValues({}, renderProps));
+      return /* @__PURE__ */ React62.createElement("h1", __spreadValues({}, renderProps));
     case "h2":
-      return /* @__PURE__ */ React58.createElement("h2", __spreadValues({}, renderProps));
+      return /* @__PURE__ */ React62.createElement("h2", __spreadValues({}, renderProps));
     case "h3":
-      return /* @__PURE__ */ React58.createElement("h3", __spreadValues({}, renderProps));
+      return /* @__PURE__ */ React62.createElement("h3", __spreadValues({}, renderProps));
   }
 }
 function getFontSize(level) {
@@ -828,9 +829,9 @@ function Html({ style, props }) {
     padding: getPadding8(style == null ? void 0 : style.padding)
   };
   if (!children) {
-    return /* @__PURE__ */ React58.createElement("div", { style: cssStyle });
+    return /* @__PURE__ */ React62.createElement("div", { style: cssStyle });
   }
-  return /* @__PURE__ */ React58.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
+  return /* @__PURE__ */ React62.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
 }
 var html_default = Html;
 var PADDING_SCHEMA9 = z.object({
@@ -866,7 +867,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__ */ React58.createElement(
+  const imageElement = /* @__PURE__ */ React62.createElement(
     "img",
     {
       alt: (_f = props == null ? void 0 : props.alt) != null ? _f : "",
@@ -886,9 +887,9 @@ function Image({ style, props }) {
     }
   );
   if (!linkHref) {
-    return /* @__PURE__ */ React58.createElement("div", { style: sectionStyle }, imageElement);
+    return /* @__PURE__ */ React62.createElement("div", { style: sectionStyle }, imageElement);
   }
-  return /* @__PURE__ */ React58.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React58.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
+  return /* @__PURE__ */ React62.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React62.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
 }
 var image_default = Image;
 var FONT_FAMILY_SCHEMA5 = z.enum([
@@ -1034,7 +1035,7 @@ function Signature({ style, props }) {
     color: linkColor,
     textDecoration: "none"
   };
-  const imageElement = imageUrl ? /* @__PURE__ */ React58.createElement(
+  const imageElement = imageUrl ? /* @__PURE__ */ React62.createElement(
     "img",
     {
       src: imageUrl,
@@ -1053,18 +1054,18 @@ function Signature({ style, props }) {
     }
   ) : null;
   const contactParts = [];
-  if (email) contactParts.push(/* @__PURE__ */ React58.createElement("a", { key: "email", href: `mailto:${email}`, style: linkStyle }, email));
-  if (phone) contactParts.push(/* @__PURE__ */ React58.createElement("a", { key: "phone", href: `tel:${phone}`, style: linkStyle }, phone));
+  if (email) contactParts.push(/* @__PURE__ */ React62.createElement("a", { key: "email", href: `mailto:${email}`, style: linkStyle }, email));
+  if (phone) contactParts.push(/* @__PURE__ */ React62.createElement("a", { key: "phone", href: `tel:${phone}`, style: linkStyle }, phone));
   if (website) {
     const href = website.startsWith("http") ? website : `https://${website}`;
-    contactParts.push(/* @__PURE__ */ React58.createElement("a", { key: "website", href, style: linkStyle, target: "_blank" }, website));
+    contactParts.push(/* @__PURE__ */ React62.createElement("a", { key: "website", href, style: linkStyle, target: "_blank" }, website));
   }
-  const textContent = /* @__PURE__ */ React58.createElement("div", null, name && /* @__PURE__ */ React58.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React58.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React58.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React58.createElement("p", { style: detailStyle }, address), contactParts.length > 0 && /* @__PURE__ */ React58.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, contactParts.map((part, i) => /* @__PURE__ */ React58.createElement(React58.Fragment, { key: i }, i > 0 && /* @__PURE__ */ React58.createElement("span", { style: detailStyle }, " \xB7 "), part))));
-  const greetingElement = greeting ? /* @__PURE__ */ React58.createElement("p", { style: greetingStyle }, greeting) : null;
+  const textContent = /* @__PURE__ */ React62.createElement("div", null, name && /* @__PURE__ */ React62.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React62.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React62.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React62.createElement("p", { style: detailStyle }, address), contactParts.length > 0 && /* @__PURE__ */ React62.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, contactParts.map((part, i) => /* @__PURE__ */ React62.createElement(React62.Fragment, { key: i }, i > 0 && /* @__PURE__ */ React62.createElement("span", { style: detailStyle }, " \xB7 "), part))));
+  const greetingElement = greeting ? /* @__PURE__ */ React62.createElement("p", { style: greetingStyle }, greeting) : null;
   if (layout === "vertical") {
-    return /* @__PURE__ */ React58.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React58.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
+    return /* @__PURE__ */ React62.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React62.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
   }
-  return /* @__PURE__ */ React58.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React58.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React58.createElement("tbody", null, /* @__PURE__ */ React58.createElement("tr", null, imageElement && /* @__PURE__ */ React58.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React58.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
+  return /* @__PURE__ */ React62.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React62.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React62.createElement("tbody", null, /* @__PURE__ */ React62.createElement("tr", null, imageElement && /* @__PURE__ */ React62.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React62.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
 }
 var signature_default = Signature;
 var SpacerPropsSchema = z.object({
@@ -1081,13 +1082,13 @@ function Spacer({ props }) {
   const style = {
     height: (_a = props == null ? void 0 : props.height) != null ? _a : SpacerPropsDefaults.height
   };
-  return /* @__PURE__ */ React58.createElement("div", { style });
+  return /* @__PURE__ */ React62.createElement("div", { style });
 }
 var spacer_default = Spacer;
 function buildBlockComponent(blocks) {
   return function BlockComponent({ type, data }) {
     const Component = blocks[type].Component;
-    return /* @__PURE__ */ React58.createElement(Component, __spreadValues({}, data));
+    return /* @__PURE__ */ React62.createElement(Component, __spreadValues({}, data));
   };
 }
 function buildBlockConfigurationSchema(blocks) {
@@ -1108,6 +1109,38 @@ function buildBlockConfigurationDictionary(blocks) {
 // src/core/utils.ts
 var DocumentBlocksDictionary = "DocumentBlocksDictionary";
 var BlockConfiguration = "BlockConfiguration";
+var editorHandlebars = Handlebars.create();
+editorHandlebars.registerHelper("formatDate", function(value, format) {
+  if (value === null || value === void 0 || value === "") return "";
+  const date = value instanceof Date ? value : new Date(String(value));
+  if (Number.isNaN(date.getTime())) return String(value);
+  const spec = typeof format === "string" ? format : void 0;
+  if (!spec || spec === "iso") return date.toISOString();
+  if (spec === "date") return date.toLocaleDateString();
+  if (spec === "time") return date.toLocaleTimeString();
+  if (spec === "datetime") return date.toLocaleString();
+  return date.toLocaleDateString(void 0, { dateStyle: spec });
+});
+editorHandlebars.registerHelper("formatNumber", function(value, options) {
+  if (value === null || value === void 0 || value === "") return "";
+  const num = typeof value === "number" ? value : Number(value);
+  if (Number.isNaN(num)) return String(value);
+  const hashOpts = options && typeof options === "object" && "hash" in options ? options.hash : {};
+  try {
+    return new Intl.NumberFormat(void 0, {
+      style: hashOpts.style,
+      currency: hashOpts.currency,
+      minimumFractionDigits: hashOpts.minimumFractionDigits,
+      maximumFractionDigits: hashOpts.maximumFractionDigits
+    }).format(num);
+  } catch (e) {
+    return String(num);
+  }
+});
+function evaluateHandlebars(source, context) {
+  const template = editorHandlebars.compile(source, { strict: false, noEscape: false });
+  return template(context);
+}
 var BasePropsShape = ColumnsContainerPropsSchema.shape.props.unwrap().unwrap().shape;
 var ColumnsContainerPropsSchema2 = z.object({
   style: ColumnsContainerPropsSchema.shape.style,
@@ -1124,9 +1157,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__ */ React58.createElement(ReaderBlock, { key: childId, id: childId })));
+    cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ React62.createElement(ReaderBlock, { key: childId, id: childId })));
   }
-  return /* @__PURE__ */ React58.createElement(columns_container_default, { props: restProps, columns: cols, style });
+  return /* @__PURE__ */ React62.createElement(columns_container_default, { props: restProps, columns: cols, style });
 }
 var ContainerPropsSchema2 = z.object({
   style: ContainerPropsSchema.shape.style,
@@ -1137,7 +1170,7 @@ var ContainerPropsSchema2 = z.object({
 function ContainerReader({ style, props }) {
   var _a;
   const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
-  return /* @__PURE__ */ React58.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React58.createElement(ReaderBlock, { key: childId, id: childId })));
+  return /* @__PURE__ */ React62.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React62.createElement(ReaderBlock, { key: childId, id: childId })));
 }
 var COLOR_SCHEMA9 = z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
 var FONT_FAMILY_SCHEMA6 = z.enum([
@@ -1210,9 +1243,9 @@ function EmailLayoutReader(props) {
     margin: "0"
   };
   if (props.backdropDisabled) {
-    return /* @__PURE__ */ React58.createElement("div", { style: baseStyle }, childrenIds.map((childId) => /* @__PURE__ */ React58.createElement(ReaderBlock, { key: childId, id: childId })));
+    return /* @__PURE__ */ React62.createElement("div", { style: baseStyle }, childrenIds.map((childId) => /* @__PURE__ */ React62.createElement(ReaderBlock, { key: childId, id: childId })));
   }
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     "div",
     {
       style: __spreadProps(__spreadValues({}, baseStyle), {
@@ -1222,7 +1255,7 @@ function EmailLayoutReader(props) {
         width: "100%"
       })
     },
-    /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(
       "table",
       {
         align: "center",
@@ -1240,7 +1273,7 @@ function EmailLayoutReader(props) {
         cellPadding: "0",
         border: 0
       },
-      /* @__PURE__ */ React58.createElement("tbody", null, /* @__PURE__ */ React58.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React58.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React58.createElement(ReaderBlock, { key: childId, id: childId })))))
+      /* @__PURE__ */ React62.createElement("tbody", null, /* @__PURE__ */ React62.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React62.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React62.createElement(ReaderBlock, { key: childId, id: childId })))))
     )
   );
 }
@@ -1252,7 +1285,7 @@ function useReaderDocument() {
 }
 function ReaderBlock({ id }) {
   const document2 = useReaderDocument();
-  return document2[id] ? /* @__PURE__ */ React58.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
+  return document2[id] ? /* @__PURE__ */ React62.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
 }
 var READER_DICTIONARY = buildBlockConfigurationDictionary({
   ColumnsContainer: {
@@ -1309,21 +1342,25 @@ var ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
 var ReaderDocumentSchema = z.record(z.string(), ReaderBlockSchema);
 var BaseReaderBlock = buildBlockComponent(READER_DICTIONARY);
 function Reader({ document: document2, rootBlockId }) {
-  return /* @__PURE__ */ React58.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React58.createElement(ReaderBlock, { id: rootBlockId }));
+  return /* @__PURE__ */ React62.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React62.createElement(ReaderBlock, { id: rootBlockId }));
 }
 
 // src/email-builder/renderers/render-to-static-markup.tsx
-function renderToStaticMarkup(document2, { rootBlockId }) {
-  return "<!DOCTYPE html>" + renderToStaticMarkup$1(
-    /* @__PURE__ */ React58.createElement("html", null, /* @__PURE__ */ React58.createElement("body", null, /* @__PURE__ */ React58.createElement(Reader, { document: document2, rootBlockId })))
+function renderToStaticMarkup(document2, { rootBlockId, variables }) {
+  const html2 = "<!DOCTYPE html>" + renderToStaticMarkup$1(
+    /* @__PURE__ */ React62.createElement("html", null, /* @__PURE__ */ React62.createElement("body", null, /* @__PURE__ */ React62.createElement(Reader, { document: document2, rootBlockId })))
   );
+  if (!variables) return html2;
+  return evaluateHandlebars(html2, variables);
 }
 
 // src/email-builder/renderers/render-to-text.ts
-function renderToText(document2, { rootBlockId }) {
+function renderToText(document2, { rootBlockId, variables }) {
   const lines = [];
   renderBlock(document2, rootBlockId, lines);
-  return lines.join("\n").replace(/\n{3,}/g, "\n\n").trim() + "\n";
+  const text = lines.join("\n").replace(/\n{3,}/g, "\n\n").trim() + "\n";
+  if (!variables) return text;
+  return evaluateHandlebars(text, variables);
 }
 function renderBlock(document2, blockId, lines) {
   var _a;
@@ -1984,7 +2021,10 @@ var editorStateStore = create(() => ({
   inspectorDrawerOpen: true,
   samplesDrawerOpen: true,
   persistenceEnabled: false,
-  lastFocusedEditable: null
+  lastFocusedEditable: null,
+  hoveredBlockId: null,
+  draggingBlock: null,
+  workspaceBackground: "checkerboard"
 }));
 function useDocument() {
   return editorStateStore((s) => s.document);
@@ -2063,6 +2103,27 @@ function useLastFocusedEditable() {
 function getLastFocusedEditable() {
   return editorStateStore.getState().lastFocusedEditable;
 }
+function useHoveredBlockId() {
+  return editorStateStore((s) => s.hoveredBlockId);
+}
+function setHoveredBlockId(hoveredBlockId) {
+  return editorStateStore.setState({ hoveredBlockId });
+}
+function useDraggingBlock() {
+  return editorStateStore((s) => s.draggingBlock);
+}
+function getDraggingBlock() {
+  return editorStateStore.getState().draggingBlock;
+}
+function setDraggingBlock(draggingBlock) {
+  return editorStateStore.setState({ draggingBlock });
+}
+function useWorkspaceBackground() {
+  return editorStateStore((s) => s.workspaceBackground);
+}
+function setWorkspaceBackground(workspaceBackground) {
+  return editorStateStore.setState({ workspaceBackground });
+}
 function setLastFocusedEditable(lastFocusedEditable) {
   return editorStateStore.setState({ lastFocusedEditable });
 }
@@ -2137,7 +2198,7 @@ var EmailEditorProvider = ({
     registerSaveListener,
     setCurrentTemplate
   }), [currentTemplateId, currentTemplateName, currentTemplateKind, saveTemplate, loadTemplate, registerSaveListener, setCurrentTemplate]);
-  return /* @__PURE__ */ React58.createElement(EmailEditorContext.Provider, { value }, children);
+  return /* @__PURE__ */ React62.createElement(EmailEditorContext.Provider, { value }, children);
 };
 var useEmailEditor = () => {
   const context = useContext(EmailEditorContext);
@@ -2151,20 +2212,20 @@ function ImageCallbacksProvider({
   callbacks,
   children
 }) {
-  return /* @__PURE__ */ React58.createElement(ImageCallbacksContext.Provider, { value: callbacks }, children);
+  return /* @__PURE__ */ React62.createElement(ImageCallbacksContext.Provider, { value: callbacks }, children);
 }
 function useImageCallbacks() {
   return useContext(ImageCallbacksContext);
 }
 function BaseSidebarPanel({ title, children }) {
-  return /* @__PURE__ */ React58.createElement(Box, { p: 2 }, /* @__PURE__ */ React58.createElement(Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, title), /* @__PURE__ */ React58.createElement(Stack, { spacing: 5, mb: 3 }, children));
+  return /* @__PURE__ */ React62.createElement(Box, { p: 2 }, /* @__PURE__ */ React62.createElement(Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, title), /* @__PURE__ */ React62.createElement(Stack, { spacing: 5, mb: 3 }, children));
 }
 function RadioGroupInput({ label, children, defaultValue, onChange }) {
   const [value, setValue] = useState(defaultValue);
   useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React58.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React58.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React62.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React62.createElement(
     ToggleButtonGroup,
     {
       exclusive: true,
@@ -2184,7 +2245,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__ */ React58.createElement(Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React58.createElement(Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React62.createElement(Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React62.createElement(
     Slider,
     __spreadProps(__spreadValues({}, props), {
       value,
@@ -2195,14 +2256,14 @@ function RawSliderInput(_a) {
         setValue(value2);
       }
     })
-  ), /* @__PURE__ */ React58.createElement(Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React58.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1 } }, value, units)));
+  ), /* @__PURE__ */ React62.createElement(Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React62.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1 } }, value, units)));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/slider-input.tsx
 function SliderInput(_a) {
   var _b = _a, { label, defaultValue, onChange } = _b, props = __objRest(_b, ["label", "defaultValue", "onChange"]);
   const [value, setValue] = useState(defaultValue);
-  return /* @__PURE__ */ React58.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React58.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React62.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React62.createElement(
     RawSliderInput,
     __spreadValues({
       value,
@@ -2219,7 +2280,7 @@ function TextInput({ helperText, label, placeholder, rows, InputProps: InputProp
   useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     TextField,
     {
       fullWidth: true,
@@ -2245,7 +2306,7 @@ var TILE_BUTTON = {
 };
 function Swatch({ paletteColors, value, onChange }) {
   const renderButton2 = (colorValue) => {
-    return /* @__PURE__ */ React58.createElement(
+    return /* @__PURE__ */ React62.createElement(
       Button$1,
       {
         key: colorValue,
@@ -2264,7 +2325,7 @@ function Swatch({ paletteColors, value, onChange }) {
       }
     );
   };
-  return /* @__PURE__ */ React58.createElement(Box, { width: "100%", sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr" } }, paletteColors.map((c) => renderButton2(c)));
+  return /* @__PURE__ */ React62.createElement(Box, { width: "100%", sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr" } }, paletteColors.map((c) => renderButton2(c)));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/picker.tsx
@@ -2331,7 +2392,7 @@ var SX = {
   }
 };
 function Picker({ value, onChange }) {
-  return /* @__PURE__ */ React58.createElement(Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React58.createElement(HexColorPicker, { color: value, onChange }), /* @__PURE__ */ React58.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React58.createElement(Box, { pt: 1 }, /* @__PURE__ */ React58.createElement(HexColorInput, { prefixed: true, color: value, onChange })));
+  return /* @__PURE__ */ React62.createElement(Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React62.createElement(HexColorPicker, { color: value, onChange }), /* @__PURE__ */ React62.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React62.createElement(Box, { pt: 1 }, /* @__PURE__ */ React62.createElement(HexColorInput, { prefixed: true, color: value, onChange })));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/base-color-input.tsx
@@ -2356,7 +2417,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
     if (typeof value !== "string" || value.trim().length === 0) {
       return null;
     }
-    return /* @__PURE__ */ React58.createElement(
+    return /* @__PURE__ */ React62.createElement(
       ButtonBase,
       {
         onClick: () => {
@@ -2364,16 +2425,16 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
           onChange(null);
         }
       },
-      /* @__PURE__ */ React58.createElement(CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
+      /* @__PURE__ */ React62.createElement(CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
     );
   };
   const renderOpenButton = () => {
     if (value) {
-      return /* @__PURE__ */ React58.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
+      return /* @__PURE__ */ React62.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
     }
-    return /* @__PURE__ */ React58.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React58.createElement(AddOutlined, { fontSize: "small" }));
+    return /* @__PURE__ */ React62.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React62.createElement(AddOutlined, { fontSize: "small" }));
   };
-  return /* @__PURE__ */ React58.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React58.createElement(InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React58.createElement(Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React62.createElement(InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React62.createElement(
     Menu,
     {
       anchorEl,
@@ -2383,7 +2444,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
         sx: { height: "auto", padding: 0 }
       }
     },
-    /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(
       Picker,
       {
         value: value || "",
@@ -2398,10 +2459,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__ */ React58.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
+  return /* @__PURE__ */ React62.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
 }
 function NullableColorInput(props) {
-  return /* @__PURE__ */ React58.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
+  return /* @__PURE__ */ React62.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
 }
 
 // src/editor/blocks/helpers/font-family.ts
@@ -2454,13 +2515,13 @@ var FONT_FAMILIES = [
 ];
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/font-family.tsx
-var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React58.createElement(MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
+var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React62.createElement(MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
 function NullableFontFamily({ label, onChange, defaultValue }) {
   const [value, setValue] = useState(defaultValue != null ? defaultValue : "inherit");
   useEffect(() => {
     setValue(defaultValue != null ? defaultValue : "inherit");
   }, [defaultValue]);
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     TextField,
     {
       select: true,
@@ -2473,7 +2534,7 @@ function NullableFontFamily({ label, onChange, defaultValue }) {
         onChange(v === null ? null : v);
       }
     },
-    /* @__PURE__ */ React58.createElement(MenuItem, { value: "inherit" }, "Match email settings"),
+    /* @__PURE__ */ React62.createElement(MenuItem, { value: "inherit" }, "Match email settings"),
     OPTIONS
   );
 }
@@ -2486,10 +2547,10 @@ function FontSizeInput({ label, defaultValue, onChange }) {
     setValue(value2);
     onChange(value2);
   };
-  return /* @__PURE__ */ React58.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React58.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React62.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React62.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React58.createElement(TextFieldsOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React62.createElement(TextFieldsOutlined, { sx: { fontSize: 16 } }),
       value,
       setValue: handleChange,
       units: "px",
@@ -2504,7 +2565,7 @@ function FontWeightInput({ label, defaultValue, onChange }) {
   useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     RadioGroupInput,
     {
       label,
@@ -2514,8 +2575,8 @@ function FontWeightInput({ label, defaultValue, onChange }) {
         onChange(fontWeight);
       }
     },
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "normal" }, "Regular"),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "bold" }, "Bold")
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "normal" }, "Regular"),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "bold" }, "Bold")
   );
 }
 function LetterSpacingInput({ label, defaultValue, onChange }) {
@@ -2527,10 +2588,10 @@ function LetterSpacingInput({ label, defaultValue, onChange }) {
     setValue(v);
     onChange(v === 0 ? null : v);
   };
-  return /* @__PURE__ */ React58.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React58.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React62.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React62.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React58.createElement(SpaceBarOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React62.createElement(SpaceBarOutlined, { sx: { fontSize: 16 } }),
       value,
       setValue: handleChange,
       units: "px",
@@ -2549,10 +2610,10 @@ function LineHeightInput({ label, defaultValue, onChange }) {
     setValue(v);
     onChange(v === 0 ? null : v);
   };
-  return /* @__PURE__ */ React58.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React58.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React62.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React62.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React58.createElement(FormatLineSpacingOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React62.createElement(FormatLineSpacingOutlined, { sx: { fontSize: 16 } }),
       value,
       setValue: handleChange,
       units: "",
@@ -2581,10 +2642,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
     setValue(v);
     onChange(v);
   }
-  return /* @__PURE__ */ React58.createElement(Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React58.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React62.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React62.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React58.createElement(AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React62.createElement(AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
       value: value.top,
       setValue: (num) => handleChange("top", num),
       units: "px",
@@ -2593,10 +2654,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
       max: 80,
       marks: true
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React58.createElement(AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React62.createElement(AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
       value: value.bottom,
       setValue: (num) => handleChange("bottom", num),
       units: "px",
@@ -2605,10 +2666,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
       max: 80,
       marks: true
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React58.createElement(AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React62.createElement(AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
       value: value.left,
       setValue: (num) => handleChange("left", num),
       units: "px",
@@ -2617,10 +2678,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
       max: 80,
       marks: true
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React58.createElement(AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React62.createElement(AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
       value: value.right,
       setValue: (num) => handleChange("right", num),
       units: "px",
@@ -2636,7 +2697,7 @@ function TextAlignInput({ label, defaultValue, onChange }) {
   useEffect(() => {
     setValue(defaultValue != null ? defaultValue : "left");
   }, [defaultValue]);
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     RadioGroupInput,
     {
       label,
@@ -2646,9 +2707,9 @@ function TextAlignInput({ label, defaultValue, onChange }) {
         onChange(value2);
       }
     },
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "left" }, /* @__PURE__ */ React58.createElement(FormatAlignLeftOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "center" }, /* @__PURE__ */ React58.createElement(FormatAlignCenterOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "right" }, /* @__PURE__ */ React58.createElement(FormatAlignRightOutlined, { fontSize: "small" }))
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "left" }, /* @__PURE__ */ React62.createElement(FormatAlignLeftOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "center" }, /* @__PURE__ */ React62.createElement(FormatAlignCenterOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "right" }, /* @__PURE__ */ React62.createElement(FormatAlignRightOutlined, { fontSize: "small" }))
   );
 }
 
@@ -2661,14 +2722,14 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
   };
   switch (name) {
     case "backgroundColor":
-      return /* @__PURE__ */ React58.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React62.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
     case "borderColor":
-      return /* @__PURE__ */ React58.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React62.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
     case "borderRadius":
-      return /* @__PURE__ */ React58.createElement(
+      return /* @__PURE__ */ React62.createElement(
         SliderInput,
         {
-          iconLabel: /* @__PURE__ */ React58.createElement(RoundedCornerOutlined, null),
+          iconLabel: /* @__PURE__ */ React62.createElement(RoundedCornerOutlined, null),
           units: "px",
           step: 4,
           marks: true,
@@ -2680,27 +2741,27 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
         }
       );
     case "color":
-      return /* @__PURE__ */ React58.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React62.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
     case "fontFamily":
-      return /* @__PURE__ */ React58.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React62.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
     case "fontSize":
-      return /* @__PURE__ */ React58.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React62.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
     case "fontWeight":
-      return /* @__PURE__ */ React58.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React62.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
     case "lineHeight":
-      return /* @__PURE__ */ React58.createElement(LineHeightInput, { label: "Line height", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React62.createElement(LineHeightInput, { label: "Line height", defaultValue, onChange: handleChange });
     case "letterSpacing":
-      return /* @__PURE__ */ React58.createElement(LetterSpacingInput, { label: "Letter spacing", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React62.createElement(LetterSpacingInput, { label: "Letter spacing", defaultValue, onChange: handleChange });
     case "textAlign":
-      return /* @__PURE__ */ React58.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React62.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
     case "padding":
-      return /* @__PURE__ */ React58.createElement(PaddingInput, { label: "Padding", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React62.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__ */ React58.createElement(React58.Fragment, null, names.map((name) => /* @__PURE__ */ React58.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
+  return /* @__PURE__ */ React62.createElement(React62.Fragment, null, names.map((name) => /* @__PURE__ */ React62.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/avatar-sidebar-panel.tsx
@@ -2720,11 +2781,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__ */ React58.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React62.createElement(
     SliderInput,
     {
       label: "Size",
-      iconLabel: /* @__PURE__ */ React58.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React62.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 3,
       min: 32,
@@ -2734,7 +2795,7 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }));
       }
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     RadioGroupInput,
     {
       label: "Shape",
@@ -2743,10 +2804,10 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { shape: shape2 }) }));
       }
     },
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "circle" }, "Circle"),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "square" }, "Square"),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "rounded" }, "Rounded")
-  ), /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "circle" }, "Circle"),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "square" }, "Square"),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "rounded" }, "Rounded")
+  ), /* @__PURE__ */ React62.createElement(
     TextInput,
     {
       label: "Image URL",
@@ -2755,7 +2816,7 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }));
       }
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     TextInput,
     {
       label: "Alt text",
@@ -2764,7 +2825,7 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt: alt2 }) }));
       }
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     MultiStylePropertyPanel,
     {
       names: ["textAlign", "padding"],
@@ -2792,65 +2853,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__ */ React58.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React62.createElement(
     TextInput,
     {
       label: "Text",
       defaultValue: text,
       onChange: (text2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text: text2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     TextInput,
     {
       label: "Url",
       defaultValue: url,
       onChange: (url2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: url2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.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__ */ React58.createElement(ToggleButton, { value: "FULL_WIDTH" }, "Full"),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "AUTO" }, "Auto")
-  ), /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "FULL_WIDTH" }, "Full"),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "AUTO" }, "Auto")
+  ), /* @__PURE__ */ React62.createElement(
     RadioGroupInput,
     {
       label: "Size",
       defaultValue: size,
       onChange: (size2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }))
     },
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "x-small" }, "Xs"),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "small" }, "Sm"),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "medium" }, "Md"),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "large" }, "Lg")
-  ), /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "x-small" }, "Xs"),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "small" }, "Sm"),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "medium" }, "Md"),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "large" }, "Lg")
+  ), /* @__PURE__ */ React62.createElement(
     RadioGroupInput,
     {
       label: "Style",
       defaultValue: buttonStyle,
       onChange: (buttonStyle2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonStyle: buttonStyle2 }) }))
     },
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "rectangle" }, "Rectangle"),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "rounded" }, "Rounded"),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "pill" }, "Pill")
-  ), /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "rectangle" }, "Rectangle"),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "rounded" }, "Rounded"),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "pill" }, "Pill")
+  ), /* @__PURE__ */ React62.createElement(
     ColorInput2,
     {
       label: "Text color",
       defaultValue: buttonTextColor,
       onChange: (buttonTextColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonTextColor: buttonTextColor2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     ColorInput2,
     {
       label: "Button color",
       defaultValue: buttonBackgroundColor,
       onChange: (buttonBackgroundColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonBackgroundColor: buttonBackgroundColor2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     MultiStylePropertyPanel,
     {
       names: [
@@ -2885,7 +2946,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
     const value = parseInt(ev.target.value);
     onChange(isNaN(value) ? null : value);
   };
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     TextField,
     {
       fullWidth: true,
@@ -2896,7 +2957,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
       placeholder: "auto",
       size: "small",
       InputProps: {
-        endAdornment: /* @__PURE__ */ React58.createElement(Typography, { variant: "body2", color: "text.secondary" }, "px")
+        endAdornment: /* @__PURE__ */ React62.createElement(Typography, { variant: "body2", color: "text.secondary" }, "px")
       }
     }
   );
@@ -2918,7 +2979,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
   };
   let column3 = null;
   {
-    column3 = /* @__PURE__ */ React58.createElement(
+    column3 = /* @__PURE__ */ React62.createElement(
       TextDimensionInput,
       {
         label: "Column 3",
@@ -2929,7 +2990,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
       }
     );
   }
-  return /* @__PURE__ */ React58.createElement(Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React62.createElement(
     TextDimensionInput,
     {
       label: "Column 1",
@@ -2938,7 +2999,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
         setIndexValue(0, v);
       }
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     TextDimensionInput,
     {
       label: "Column 2",
@@ -2963,7 +3024,7 @@ function ColumnsContainerPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React58.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React62.createElement(
     RadioGroupInput,
     {
       label: "Number of columns",
@@ -2972,9 +3033,9 @@ function ColumnsContainerPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsCount: v === "2" ? 2 : 3 }) }));
       }
     },
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "2" }, "2"),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "3" }, "3")
-  ), /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "2" }, "2"),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "3" }, "3")
+  ), /* @__PURE__ */ React62.createElement(
     ColumnWidthsInput,
     {
       defaultValue: (_b = data.props) == null ? void 0 : _b.fixedWidths,
@@ -2982,11 +3043,11 @@ function ColumnsContainerPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fixedWidths }) }));
       }
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     SliderInput,
     {
       label: "Columns gap",
-      iconLabel: /* @__PURE__ */ React58.createElement(SpaceBarOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React62.createElement(SpaceBarOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 4,
       marks: true,
@@ -2995,7 +3056,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__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     RadioGroupInput,
     {
       label: "Alignment",
@@ -3004,10 +3065,10 @@ function ColumnsContainerPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }));
       }
     },
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React58.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React58.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React58.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
-  ), /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React62.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React62.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React62.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
+  ), /* @__PURE__ */ React62.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "padding"],
@@ -3036,7 +3097,7 @@ function ContainerSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React58.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React62.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "borderColor", "borderRadius", "padding"],
@@ -3059,18 +3120,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__ */ React58.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React62.createElement(
     ColorInput2,
     {
       label: "Color",
       defaultValue: lineColor,
       onChange: (lineColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineColor: lineColor2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     SliderInput,
     {
       label: "Height",
-      iconLabel: /* @__PURE__ */ React58.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React62.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 1,
       min: 1,
@@ -3078,7 +3139,7 @@ function DividerSidebarPanel({ data, setData }) {
       defaultValue: lineHeight,
       onChange: (lineHeight2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineHeight: lineHeight2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "padding"],
@@ -3122,11 +3183,11 @@ function BooleanInput({ label, defaultValue, onChange }) {
   useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     FormControlLabel,
     {
       label,
-      control: /* @__PURE__ */ React58.createElement(
+      control: /* @__PURE__ */ React62.createElement(
         Switch,
         {
           checked: value,
@@ -3154,38 +3215,38 @@ function EmailLayoutSidebarFields({ data, setData }) {
     }
   };
   const backdropDisabled = (_a = data.backdropDisabled) != null ? _a : false;
-  return /* @__PURE__ */ React58.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React62.createElement(
     BooleanInput,
     {
       label: "Disable backdrop",
       defaultValue: backdropDisabled,
       onChange: (backdropDisabled2) => updateData(__spreadProps(__spreadValues({}, data), { backdropDisabled: backdropDisabled2 }))
     }
-  ), !backdropDisabled && /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(
+  ), !backdropDisabled && /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
     ColorInput2,
     {
       label: "Backdrop color",
       defaultValue: (_b = data.backdropColor) != null ? _b : "#F5F5F5",
       onChange: (backdropColor) => updateData(__spreadProps(__spreadValues({}, data), { backdropColor }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     ColorInput2,
     {
       label: "Canvas color",
       defaultValue: (_c = data.canvasColor) != null ? _c : "#FFFFFF",
       onChange: (canvasColor) => updateData(__spreadProps(__spreadValues({}, data), { canvasColor }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     NullableColorInput,
     {
       label: "Canvas border color",
       defaultValue: (_d = data.borderColor) != null ? _d : null,
       onChange: (borderColor) => updateData(__spreadProps(__spreadValues({}, data), { borderColor }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     SliderInput,
     {
-      iconLabel: /* @__PURE__ */ React58.createElement(RoundedCornerOutlined, null),
+      iconLabel: /* @__PURE__ */ React62.createElement(RoundedCornerOutlined, null),
       units: "px",
       step: 4,
       marks: true,
@@ -3195,14 +3256,14 @@ function EmailLayoutSidebarFields({ data, setData }) {
       defaultValue: (_e = data.borderRadius) != null ? _e : 0,
       onChange: (borderRadius) => updateData(__spreadProps(__spreadValues({}, data), { borderRadius }))
     }
-  )), /* @__PURE__ */ React58.createElement(
+  )), /* @__PURE__ */ React62.createElement(
     NullableFontFamily,
     {
       label: "Font family",
       defaultValue: "MODERN_SANS",
       onChange: (fontFamily) => updateData(__spreadProps(__spreadValues({}, data), { fontFamily }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     ColorInput2,
     {
       label: "Text color",
@@ -3223,7 +3284,7 @@ function HeadingSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React58.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React62.createElement(
     TextInput,
     {
       label: "Content",
@@ -3233,7 +3294,7 @@ function HeadingSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }));
       }
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     RadioGroupInput,
     {
       label: "Level",
@@ -3242,10 +3303,10 @@ function HeadingSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { level }) }));
       }
     },
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "h1" }, "H1"),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "h2" }, "H2"),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "h3" }, "H3")
-  ), /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "h1" }, "H1"),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "h2" }, "H2"),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "h3" }, "H3")
+  ), /* @__PURE__ */ React62.createElement(
     MultiStylePropertyPanel,
     {
       names: [
@@ -3275,7 +3336,7 @@ function HtmlSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React58.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React62.createElement(
     TextInput,
     {
       label: "Content",
@@ -3283,7 +3344,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__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     MultiStylePropertyPanel,
     {
       names: ["color", "backgroundColor", "fontFamily", "fontSize", "textAlign", "padding"],
@@ -3340,7 +3401,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
       setBusy(false);
     }
   });
-  return /* @__PURE__ */ React58.createElement(Dialog, { open, onClose, maxWidth: "md", fullWidth: true }, /* @__PURE__ */ React58.createElement(DialogTitle, null, "Image library"), /* @__PURE__ */ React58.createElement(DialogContent, { dividers: true }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(Dialog, { open, onClose, maxWidth: "md", fullWidth: true }, /* @__PURE__ */ React62.createElement(DialogTitle, null, "Image library"), /* @__PURE__ */ React62.createElement(DialogContent, { dividers: true }, /* @__PURE__ */ React62.createElement(
     TextField,
     {
       fullWidth: true,
@@ -3350,11 +3411,11 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
       onChange: (e) => setQuery(e.target.value),
       autoFocus: true,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React58.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React58.createElement(SearchOutlined, { fontSize: "small" }))
+        startAdornment: /* @__PURE__ */ React62.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React62.createElement(SearchOutlined, { fontSize: "small" }))
       },
       sx: { mb: 2 }
     }
-  ), error && /* @__PURE__ */ React58.createElement(Alert, { severity: "error", sx: { mb: 2 } }, error), busy && !images && /* @__PURE__ */ React58.createElement(Stack, { alignItems: "center", sx: { py: 4 } }, /* @__PURE__ */ React58.createElement(CircularProgress, { size: 28 })), filtered && filtered.length === 0 && /* @__PURE__ */ React58.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", textAlign: "center", py: 4 } }, query ? "No images match your search." : "No images in the library yet."), filtered && filtered.length > 0 && /* @__PURE__ */ React58.createElement(
+  ), error && /* @__PURE__ */ React62.createElement(Alert, { severity: "error", sx: { mb: 2 } }, error), busy && !images && /* @__PURE__ */ React62.createElement(Stack, { alignItems: "center", sx: { py: 4 } }, /* @__PURE__ */ React62.createElement(CircularProgress, { size: 28 })), filtered && filtered.length === 0 && /* @__PURE__ */ React62.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", textAlign: "center", py: 4 } }, query ? "No images match your search." : "No images in the library yet."), filtered && filtered.length > 0 && /* @__PURE__ */ React62.createElement(
     Box,
     {
       sx: {
@@ -3363,7 +3424,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
         gap: 1.5
       }
     },
-    filtered.map((img) => /* @__PURE__ */ React58.createElement(
+    filtered.map((img) => /* @__PURE__ */ React62.createElement(
       ImageTile,
       {
         key: img.url,
@@ -3372,7 +3433,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
         onDelete: deleteImage ? () => handleDelete(img.url) : void 0
       }
     ))
-  )), /* @__PURE__ */ React58.createElement(DialogActions, null, /* @__PURE__ */ React58.createElement(Button$1, { onClick: onClose }, "Close")));
+  )), /* @__PURE__ */ React62.createElement(DialogActions, null, /* @__PURE__ */ React62.createElement(Button$1, { onClick: onClose }, "Close")));
 }
 function ImageTile({
   image,
@@ -3382,7 +3443,7 @@ function ImageTile({
   var _a, _b;
   const src = (_a = image.thumbnailUrl) != null ? _a : image.url;
   const label = image.alt || image.url.split("/").pop() || "image";
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     Box,
     {
       sx: {
@@ -3398,7 +3459,7 @@ function ImageTile({
       },
       onClick: onPick
     },
-    /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(
       Box,
       {
         component: "img",
@@ -3407,8 +3468,8 @@ function ImageTile({
         sx: { display: "block", width: "100%", aspectRatio: "1 / 1", objectFit: "cover", backgroundColor: "#f5f5f5" }
       }
     ),
-    /* @__PURE__ */ React58.createElement(Box, { sx: { p: 0.75, fontSize: 11, color: "text.secondary", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label),
-    onDelete && /* @__PURE__ */ React58.createElement(Tooltip, { title: "Delete from library" }, /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(Box, { sx: { p: 0.75, fontSize: 11, color: "text.secondary", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label),
+    onDelete && /* @__PURE__ */ React62.createElement(Tooltip, { title: "Delete from library" }, /* @__PURE__ */ React62.createElement(
       IconButton,
       {
         size: "small",
@@ -3428,7 +3489,7 @@ function ImageTile({
         },
         "aria-label": "Delete image"
       },
-      /* @__PURE__ */ React58.createElement(DeleteOutline, { fontSize: "small" })
+      /* @__PURE__ */ React62.createElement(DeleteOutline, { fontSize: "small" })
     ))
   );
 }
@@ -3481,13 +3542,13 @@ function ImageSidebarPanel({ data, setData }) {
   });
   const url = (_b = (_a = data.props) == null ? void 0 : _a.url) != null ? _b : "";
   const showHttpWarning = isHttpUrl(url);
-  return /* @__PURE__ */ React58.createElement(BaseSidebarPanel, { title: "Image block" }, (uploadImage || loadImages) && /* @__PURE__ */ React58.createElement(Stack, { direction: "row", spacing: 1 }, uploadImage && /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Image block" }, (uploadImage || loadImages) && /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 1 }, uploadImage && /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
     Button$1,
     {
       fullWidth: true,
       variant: "outlined",
       size: "small",
-      startIcon: uploading ? /* @__PURE__ */ React58.createElement(CircularProgress, { size: 14 }) : /* @__PURE__ */ React58.createElement(CloudUploadOutlined, { fontSize: "small" }),
+      startIcon: uploading ? /* @__PURE__ */ React62.createElement(CircularProgress, { size: 14 }) : /* @__PURE__ */ React62.createElement(CloudUploadOutlined, { fontSize: "small" }),
       disabled: uploading,
       onClick: () => {
         var _a2;
@@ -3495,7 +3556,7 @@ function ImageSidebarPanel({ data, setData }) {
       }
     },
     uploading ? "Uploading\u2026" : "Upload"
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     "input",
     {
       ref: fileInputRef,
@@ -3509,17 +3570,17 @@ function ImageSidebarPanel({ data, setData }) {
         if (file) yield handleFile(file);
       })
     }
-  )), loadImages && /* @__PURE__ */ React58.createElement(
+  )), loadImages && /* @__PURE__ */ React62.createElement(
     Button$1,
     {
       fullWidth: true,
       variant: "outlined",
       size: "small",
-      startIcon: /* @__PURE__ */ React58.createElement(CollectionsOutlined, { fontSize: "small" }),
+      startIcon: /* @__PURE__ */ React62.createElement(CollectionsOutlined, { fontSize: "small" }),
       onClick: () => setLibraryOpen(true)
     },
     "Library"
-  )), uploadError && /* @__PURE__ */ React58.createElement(Alert, { severity: "error", onClose: () => setUploadError(null), sx: { mt: 1 } }, uploadError), /* @__PURE__ */ React58.createElement(
+  )), uploadError && /* @__PURE__ */ React62.createElement(Alert, { severity: "error", onClose: () => setUploadError(null), sx: { mt: 1 } }, uploadError), /* @__PURE__ */ React62.createElement(
     TextInput,
     {
       label: "Source URL",
@@ -3529,14 +3590,14 @@ function ImageSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: next }) }));
       }
     }
-  ), showHttpWarning && /* @__PURE__ */ React58.createElement(Box, { sx: { mt: -1, mb: 1, display: "flex", alignItems: "flex-start", gap: 0.75 } }, /* @__PURE__ */ React58.createElement(ErrorOutlineOutlined, { fontSize: "small", sx: { color: "warning.main", mt: "2px" } }), /* @__PURE__ */ React58.createElement(Box, { sx: { fontSize: 12, color: "warning.dark" } }, "Non-HTTPS URL: Gmail and other clients strip mixed content. Use https:// for reliable delivery.")), /* @__PURE__ */ React58.createElement(
+  ), showHttpWarning && /* @__PURE__ */ React62.createElement(Box, { sx: { mt: -1, mb: 1, display: "flex", alignItems: "flex-start", gap: 0.75 } }, /* @__PURE__ */ React62.createElement(ErrorOutlineOutlined, { fontSize: "small", sx: { color: "warning.main", mt: "2px" } }), /* @__PURE__ */ React62.createElement(Box, { sx: { fontSize: 12, color: "warning.dark" } }, "Non-HTTPS URL: Gmail and other clients strip mixed content. Use https:// for reliable delivery.")), /* @__PURE__ */ React62.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__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     TextInput,
     {
       label: "Click through URL",
@@ -3546,38 +3607,38 @@ function ImageSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkHref }) }));
       }
     }
-  ), /* @__PURE__ */ React58.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React62.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__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.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__ */ React58.createElement(
+  )), /* @__PURE__ */ React62.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__ */ React58.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React58.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React58.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React58.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
-  ), /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React62.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React62.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React62.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
+  ), /* @__PURE__ */ React62.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "textAlign", "padding"],
       value: data.style,
       onChange: (style) => updateData(__spreadProps(__spreadValues({}, data), { style }))
     }
-  ), loadImages && /* @__PURE__ */ React58.createElement(
+  ), loadImages && /* @__PURE__ */ React62.createElement(
     ImageLibraryDialog,
     {
       open: libraryOpen,
@@ -3616,74 +3677,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__ */ React58.createElement(BaseSidebarPanel, { title: "Signature block" }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Signature block" }, /* @__PURE__ */ React62.createElement(
     TextInput,
     {
       label: "Greeting",
       defaultValue: greeting,
       onChange: (greeting2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { greeting: greeting2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     TextInput,
     {
       label: "Name",
       defaultValue: name,
       onChange: (name2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { name: name2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     TextInput,
     {
       label: "Title",
       defaultValue: title,
       onChange: (title2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { title: title2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     TextInput,
     {
       label: "Company",
       defaultValue: company,
       onChange: (company2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { company: company2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     TextInput,
     {
       label: "Address",
       defaultValue: address,
       onChange: (address2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { address: address2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     TextInput,
     {
       label: "Email",
       defaultValue: email,
       onChange: (email2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { email: email2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     TextInput,
     {
       label: "Phone",
       defaultValue: phone,
       onChange: (phone2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { phone: phone2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     TextInput,
     {
       label: "Website",
       defaultValue: website,
       onChange: (website2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { website: website2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     TextInput,
     {
       label: "Image URL",
       defaultValue: imageUrl,
       onChange: (imageUrl2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     SliderInput,
     {
       label: "Image size",
-      iconLabel: /* @__PURE__ */ React58.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React62.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 4,
       min: 32,
@@ -3691,47 +3752,47 @@ function SignatureSidebarPanel({ data, setData }) {
       defaultValue: imageSize,
       onChange: (imageSize2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageSize: imageSize2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     RadioGroupInput,
     {
       label: "Image shape",
       defaultValue: imageShape,
       onChange: (imageShape2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageShape: imageShape2 }) }))
     },
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "circle" }, "Circle"),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "square" }, "Square"),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "rounded" }, "Rounded")
-  ), /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "circle" }, "Circle"),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "square" }, "Square"),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "rounded" }, "Rounded")
+  ), /* @__PURE__ */ React62.createElement(
     RadioGroupInput,
     {
       label: "Layout",
       defaultValue: layout,
       onChange: (layout2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { layout: layout2 }) }))
     },
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "horizontal" }, "Horizontal"),
-    /* @__PURE__ */ React58.createElement(ToggleButton, { value: "vertical" }, "Vertical")
-  ), /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "horizontal" }, "Horizontal"),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "vertical" }, "Vertical")
+  ), /* @__PURE__ */ React62.createElement(
     ColorInput2,
     {
       label: "Name color",
       defaultValue: nameColor,
       onChange: (nameColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { nameColor: nameColor2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     ColorInput2,
     {
       label: "Text color",
       defaultValue: textColor,
       onChange: (textColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { textColor: textColor2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     ColorInput2,
     {
       label: "Link color",
       defaultValue: linkColor,
       onChange: (linkColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkColor: linkColor2 }) }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "fontFamily", "padding"],
@@ -3752,11 +3813,11 @@ function SpacerSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React58.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React62.createElement(
     SliderInput,
     {
       label: "Height",
-      iconLabel: /* @__PURE__ */ React58.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React62.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 4,
       min: 4,
@@ -3778,7 +3839,7 @@ function TextSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React58.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React62.createElement(
     TextInput,
     {
       label: "Content",
@@ -3786,14 +3847,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__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.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__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     MultiStylePropertyPanel,
     {
       names: [
@@ -3815,7 +3876,7 @@ function TextSidebarPanel({ data, setData }) {
 
 // src/app/inspector-drawer/configuration-panel/index.tsx
 function renderMessage(val) {
-  return /* @__PURE__ */ React58.createElement(Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React58.createElement(Typography, { color: "text.secondary" }, val));
+  return /* @__PURE__ */ React62.createElement(Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React62.createElement(Typography, { color: "text.secondary" }, val));
 }
 function ConfigurationPanel() {
   const document2 = useDocument();
@@ -3831,55 +3892,55 @@ function ConfigurationPanel() {
   const { data, type } = block;
   switch (type) {
     case "Avatar":
-      return /* @__PURE__ */ React58.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React62.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Button":
-      return /* @__PURE__ */ React58.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React62.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "ColumnsContainer":
-      return /* @__PURE__ */ React58.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React62.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Container":
-      return /* @__PURE__ */ React58.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React62.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Divider":
-      return /* @__PURE__ */ React58.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React62.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Heading":
-      return /* @__PURE__ */ React58.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React62.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Html":
-      return /* @__PURE__ */ React58.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React62.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Image":
-      return /* @__PURE__ */ React58.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React62.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "EmailLayout":
-      return /* @__PURE__ */ React58.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React62.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Spacer":
-      return /* @__PURE__ */ React58.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React62.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Signature":
-      return /* @__PURE__ */ React58.createElement(SignatureSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React62.createElement(SignatureSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Text":
-      return /* @__PURE__ */ React58.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React62.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     default:
-      return /* @__PURE__ */ React58.createElement("pre", null, JSON.stringify(block, null, "  "));
+      return /* @__PURE__ */ React62.createElement("pre", null, JSON.stringify(block, null, "  "));
   }
 }
 function StylesPanel() {
   const block = useDocument().root;
   if (!block) {
-    return /* @__PURE__ */ React58.createElement("p", null, "Block not found");
+    return /* @__PURE__ */ React62.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__ */ React58.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
+  return /* @__PURE__ */ React62.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
 }
 function TemplateDownloadButton() {
   const doc = useDocument();
   const href = useMemo(() => {
     return `data:text/plain,${encodeURIComponent(JSON.stringify(doc, null, "  "))}`;
   }, [doc]);
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     Button$1,
     {
       variant: "outlined",
       color: "primary",
-      startIcon: /* @__PURE__ */ React58.createElement(FileDownloadOutlined, null),
+      startIcon: /* @__PURE__ */ React62.createElement(FileDownloadOutlined, null),
       href,
       download: "emailTemplate.json",
       fullWidth: true
@@ -3893,6 +3954,7 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
   const { currentTemplateId, currentTemplateName } = useEmailEditor();
   const document2 = useDocument();
   const persistenceEnabled = usePersistenceEnabled();
+  const workspaceBackground = useWorkspaceBackground();
   const handleDelete = () => {
     if (!currentTemplateId || !window.confirm("Are you sure you want to delete this template?")) {
       return;
@@ -3910,10 +3972,21 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
       window.alert("Template copied successfully!");
     }
   };
+  const workspaceToggle = /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Editor appearance" }, /* @__PURE__ */ React62.createElement(Stack, { spacing: 1 }, /* @__PURE__ */ React62.createElement(Typography, { variant: "caption", sx: { color: "text.secondary" } }, "Workspace background"), /* @__PURE__ */ React62.createElement(
+    ToggleButtonGroup,
+    {
+      value: workspaceBackground,
+      exclusive: true,
+      size: "small",
+      onChange: (_, v) => v && setWorkspaceBackground(v)
+    },
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "checkerboard", sx: { textTransform: "none", gap: 0.75 } }, /* @__PURE__ */ React62.createElement(GridOnOutlined, { fontSize: "small" }), "Checkerboard"),
+    /* @__PURE__ */ React62.createElement(ToggleButton, { value: "solid", sx: { textTransform: "none", gap: 0.75 } }, /* @__PURE__ */ React62.createElement(SquareOutlined, { fontSize: "small" }), "Solid")
+  ), /* @__PURE__ */ React62.createElement(Typography, { variant: "caption", sx: { color: "text.disabled" } }, "Editor-only \u2014 never reaches the rendered email.")));
   if (!currentTemplateId) {
-    return /* @__PURE__ */ React58.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected");
+    return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected"), workspaceToggle);
   }
-  return /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React58.createElement(Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React62.createElement(Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React62.createElement(
     Typography,
     {
       variant: "body2",
@@ -3926,29 +3999,29 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
       }
     },
     "Save functionality is disabled. To enable saving, provide the necessary callback functions."
-  ), persistenceEnabled && /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(
+  ), persistenceEnabled && /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
     Button$1,
     {
       variant: "outlined",
       color: "primary",
-      startIcon: /* @__PURE__ */ React58.createElement(ContentCopyOutlined, null),
+      startIcon: /* @__PURE__ */ React62.createElement(ContentCopyOutlined, null),
       onClick: handleCopyToSamples,
       fullWidth: true,
       disabled: !copyTemplate
     },
     "Save as Sample Template"
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     Button$1,
     {
       variant: "outlined",
       color: "error",
-      startIcon: /* @__PURE__ */ React58.createElement(DeleteOutlined, null),
+      startIcon: /* @__PURE__ */ React62.createElement(DeleteOutlined, null),
       onClick: handleDelete,
       fullWidth: true,
       disabled: !deleteTemplate
     },
     "Delete Template"
-  )))), persistenceEnabled && /* @__PURE__ */ React58.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React58.createElement(Stack, { spacing: 2 }, /* @__PURE__ */ React58.createElement(TemplateDownloadButton, null))));
+  )))), persistenceEnabled && /* @__PURE__ */ React62.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React62.createElement(Stack, { spacing: 2 }, /* @__PURE__ */ React62.createElement(TemplateDownloadButton, null))), workspaceToggle);
 }
 
 // src/app/variables/variable-utils.ts
@@ -4122,7 +4195,7 @@ function VariablesPanel() {
   const lastFocused = useLastFocusedEditable();
   const root = document2.root;
   if (!root || root.type !== "EmailLayout") {
-    return /* @__PURE__ */ React58.createElement(Box, { p: 2 }, /* @__PURE__ */ React58.createElement(Alert, { severity: "info" }, "Open a template to manage variables."));
+    return /* @__PURE__ */ React62.createElement(Box, { p: 2 }, /* @__PURE__ */ React62.createElement(Alert, { severity: "info" }, "Open a template to manage variables."));
   }
   const data = root.data;
   const variables = ((_a = data.variables) != null ? _a : []).map((v) => {
@@ -4217,7 +4290,7 @@ function VariablesPanel() {
     } catch (e) {
     }
   });
-  return /* @__PURE__ */ React58.createElement(Box, { p: 2 }, /* @__PURE__ */ React58.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { mb: 1 } }, /* @__PURE__ */ React58.createElement(Typography, { variant: "subtitle1", sx: { fontWeight: 600 } }, "Variables"), /* @__PURE__ */ React58.createElement(Tooltip, { title: "Add variable" }, /* @__PURE__ */ React58.createElement(IconButton, { size: "small", onClick: add, "aria-label": "Add variable" }, /* @__PURE__ */ React58.createElement(AddOutlined, { fontSize: "small" })))), /* @__PURE__ */ React58.createElement(Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mb: 2 } }, "Declared variables travel with the template. Reference them in subject and body as", " ", /* @__PURE__ */ React58.createElement(Box, { component: "code", sx: { fontFamily: "monospace" } }, "{{name}}"), ". In Preview mode, tokens render with the sample values below."), undeclared.length > 0 && /* @__PURE__ */ React58.createElement(Alert, { severity: "warning", sx: { mb: 2 } }, /* @__PURE__ */ React58.createElement(AlertTitle, { sx: { fontSize: 13 } }, "Undeclared in body"), /* @__PURE__ */ React58.createElement(Stack, { direction: "row", spacing: 0.5, useFlexGap: true, flexWrap: "wrap" }, undeclared.map((name) => /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(Box, { p: 2 }, /* @__PURE__ */ React62.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { mb: 1 } }, /* @__PURE__ */ React62.createElement(Typography, { variant: "subtitle1", sx: { fontWeight: 600 } }, "Variables"), /* @__PURE__ */ React62.createElement(Tooltip, { title: "Add variable" }, /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: add, "aria-label": "Add variable" }, /* @__PURE__ */ React62.createElement(AddOutlined, { fontSize: "small" })))), /* @__PURE__ */ React62.createElement(Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mb: 2 } }, "Declared variables travel with the template. Reference them in subject and body as", " ", /* @__PURE__ */ React62.createElement(Box, { component: "code", sx: { fontFamily: "monospace" } }, "{{name}}"), ". In Preview mode, tokens render with the sample values below."), undeclared.length > 0 && /* @__PURE__ */ React62.createElement(Alert, { severity: "warning", sx: { mb: 2 } }, /* @__PURE__ */ React62.createElement(AlertTitle, { sx: { fontSize: 13 } }, "Undeclared in body"), /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 0.5, useFlexGap: true, flexWrap: "wrap" }, undeclared.map((name) => /* @__PURE__ */ React62.createElement(
     Chip,
     {
       key: name,
@@ -4225,12 +4298,12 @@ function VariablesPanel() {
       label: name,
       onClick: () => addFromToken(name),
       onDelete: () => addFromToken(name),
-      deleteIcon: /* @__PURE__ */ React58.createElement(AddOutlined, null),
+      deleteIcon: /* @__PURE__ */ React62.createElement(AddOutlined, null),
       sx: { fontFamily: "monospace" }
     }
-  ))), /* @__PURE__ */ React58.createElement(Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 0.5 } }, "Click a token to declare it.")), variables.length === 0 ? /* @__PURE__ */ React58.createElement(Typography, { variant: "body2", sx: { color: "text.secondary" } }, "No variables declared. Click + to add one.") : /* @__PURE__ */ React58.createElement(Stack, { spacing: 2 }, variables.map((v, i) => {
+  ))), /* @__PURE__ */ React62.createElement(Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 0.5 } }, "Click a token to declare it.")), variables.length === 0 ? /* @__PURE__ */ React62.createElement(Typography, { variant: "body2", sx: { color: "text.secondary" } }, "No variables declared. Click + to add one.") : /* @__PURE__ */ React62.createElement(Stack, { spacing: 2 }, variables.map((v, i) => {
     var _a2;
-    return /* @__PURE__ */ React58.createElement(
+    return /* @__PURE__ */ React62.createElement(
       VariableRow,
       {
         key: i,
@@ -4281,7 +4354,7 @@ function VariableRow({
       onCommitRename(draftName.trim());
     }
   };
-  return /* @__PURE__ */ React58.createElement(Stack, { spacing: 0.75, sx: { pb: 1, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React58.createElement(Stack, { direction: "row", spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(Stack, { spacing: 0.75, sx: { pb: 1, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React62.createElement(
     TextField,
     {
       label: "Name",
@@ -4306,7 +4379,7 @@ function VariableRow({
       error: Boolean(nameError),
       helperText: nameError != null ? nameError : " "
     }
-  ), /* @__PURE__ */ React58.createElement(Stack, { direction: "row", spacing: 0.25, sx: { mt: 0.5 } }, /* @__PURE__ */ React58.createElement(Tooltip, { title: "Copy {{name}}" }, /* @__PURE__ */ React58.createElement("span", null, /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 0.25, sx: { mt: 0.5 } }, /* @__PURE__ */ React62.createElement(Tooltip, { title: "Copy {{name}}" }, /* @__PURE__ */ React62.createElement("span", null, /* @__PURE__ */ React62.createElement(
     IconButton,
     {
       size: "small",
@@ -4314,8 +4387,8 @@ function VariableRow({
       disabled: !hasName,
       "aria-label": `Copy ${variable.name || "variable"} token`
     },
-    /* @__PURE__ */ React58.createElement(ContentCopyOutlined, { fontSize: "small" })
-  ))), /* @__PURE__ */ React58.createElement(Tooltip, { title: canInsert ? "Insert at cursor" : "Focus a text field first" }, /* @__PURE__ */ React58.createElement("span", null, /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(ContentCopyOutlined, { fontSize: "small" })
+  ))), /* @__PURE__ */ React62.createElement(Tooltip, { title: canInsert ? "Insert at cursor" : "Focus a text field first" }, /* @__PURE__ */ React62.createElement("span", null, /* @__PURE__ */ React62.createElement(
     IconButton,
     {
       size: "small",
@@ -4323,16 +4396,16 @@ function VariableRow({
       disabled: !hasName || !canInsert,
       "aria-label": `Insert ${variable.name || "variable"} at cursor`
     },
-    /* @__PURE__ */ React58.createElement(InputOutlined, { fontSize: "small" })
-  ))), /* @__PURE__ */ React58.createElement(Tooltip, { title: "Remove" }, /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(InputOutlined, { fontSize: "small" })
+  ))), /* @__PURE__ */ React62.createElement(Tooltip, { title: "Remove" }, /* @__PURE__ */ React62.createElement(
     IconButton,
     {
       size: "small",
       onClick: onRemove,
       "aria-label": `Remove ${variable.name || "variable"}`
     },
-    /* @__PURE__ */ React58.createElement(DeleteOutline, { fontSize: "small" })
-  )))), /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(DeleteOutline, { fontSize: "small" })
+  )))), /* @__PURE__ */ React62.createElement(
     TextField,
     {
       label: "Description",
@@ -4342,7 +4415,7 @@ function VariableRow({
       onChange: (e) => onChangeDescription(e.target.value),
       placeholder: "Optional"
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     TextField,
     {
       label: "Sample value",
@@ -4352,7 +4425,7 @@ function VariableRow({
       onChange: (e) => onChangeSampleValue(e.target.value),
       placeholder: "Shown in Preview mode",
       InputProps: {
-        startAdornment: /* @__PURE__ */ React58.createElement(
+        startAdornment: /* @__PURE__ */ React62.createElement(
           DataObjectOutlined,
           {
             fontSize: "small",
@@ -4361,7 +4434,7 @@ function VariableRow({
         )
       }
     }
-  ), /* @__PURE__ */ React58.createElement(Stack, { direction: "row", spacing: 0.5, sx: { pt: 0.25 } }, hasName && (unused ? /* @__PURE__ */ React58.createElement(Chip, { size: "small", color: "warning", variant: "outlined", label: "Unused in body" }) : /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 0.5, sx: { pt: 0.25 } }, hasName && (unused ? /* @__PURE__ */ React62.createElement(Chip, { size: "small", color: "warning", variant: "outlined", label: "Unused in body" }) : /* @__PURE__ */ React62.createElement(
     Chip,
     {
       size: "small",
@@ -4385,13 +4458,13 @@ function InspectorDrawer({
   const renderCurrentSidebarPanel = () => {
     switch (selectedSidebarTab) {
       case "block-configuration":
-        return /* @__PURE__ */ React58.createElement(ConfigurationPanel, null);
+        return /* @__PURE__ */ React62.createElement(ConfigurationPanel, null);
       case "styles":
-        return /* @__PURE__ */ React58.createElement(StylesPanel, null);
+        return /* @__PURE__ */ React62.createElement(StylesPanel, null);
       case "variables":
-        return /* @__PURE__ */ React58.createElement(VariablesPanel, null);
+        return /* @__PURE__ */ React62.createElement(VariablesPanel, null);
       case "template-settings":
-        return /* @__PURE__ */ React58.createElement(
+        return /* @__PURE__ */ React62.createElement(
           TemplatePanel,
           {
             deleteTemplate,
@@ -4400,7 +4473,7 @@ function InspectorDrawer({
         );
     }
   };
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     Drawer,
     {
       variant: "persistent",
@@ -4422,7 +4495,7 @@ function InspectorDrawer({
         width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0
       }
     },
-    /* @__PURE__ */ React58.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React58.createElement(Box, { px: 1 }, /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React62.createElement(Box, { px: 1 }, /* @__PURE__ */ React62.createElement(
       Tabs,
       {
         value: selectedSidebarTab,
@@ -4430,12 +4503,12 @@ function InspectorDrawer({
         variant: "fullWidth",
         sx: { "& .MuiTab-root": { minWidth: 0, px: 1, fontSize: 13 } }
       },
-      /* @__PURE__ */ React58.createElement(Tab, { value: "styles", label: "Styles" }),
-      /* @__PURE__ */ React58.createElement(Tab, { value: "block-configuration", label: "Inspect" }),
-      /* @__PURE__ */ React58.createElement(Tab, { value: "variables", label: "Variables" }),
-      /* @__PURE__ */ React58.createElement(Tab, { value: "template-settings", label: "Settings" })
+      /* @__PURE__ */ React62.createElement(Tab, { value: "styles", label: "Styles" }),
+      /* @__PURE__ */ React62.createElement(Tab, { value: "block-configuration", label: "Inspect" }),
+      /* @__PURE__ */ React62.createElement(Tab, { value: "variables", label: "Variables" }),
+      /* @__PURE__ */ React62.createElement(Tab, { value: "template-settings", label: "Settings" })
     ))),
-    /* @__PURE__ */ React58.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
+    /* @__PURE__ */ React62.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
   );
 }
 var SnackbarContext = createContext(null);
@@ -4456,7 +4529,7 @@ function SnackbarProvider({ children }) {
   const handleClose = () => {
     setMessage(null);
   };
-  return /* @__PURE__ */ React58.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React62.createElement(
     Snackbar,
     {
       anchorOrigin: { vertical: "top", horizontal: "center" },
@@ -4504,6 +4577,16 @@ function TemplateRow({
 }) {
   const { setCurrentTemplate } = useEmailEditor();
   const [hover, setHover] = useState(false);
+  const [menuAnchor, setMenuAnchor] = useState(null);
+  const closeMenu = () => setMenuAnchor(null);
+  const openMenu = (e) => {
+    e.stopPropagation();
+    setMenuAnchor(e.currentTarget);
+  };
+  const runAction = (fn) => () => {
+    closeMenu();
+    fn == null ? void 0 : fn();
+  };
   const handleClick = () => __async(null, null, function* () {
     try {
       const content = yield templateLoader();
@@ -4522,7 +4605,7 @@ function TemplateRow({
   const hasActions = Boolean(
     onDuplicate || onRename || onDelete || onPromote || onDemote || onDuplicateAsTemplate
   );
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     Box,
     {
       role: "button",
@@ -4548,7 +4631,7 @@ function TemplateRow({
         "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main" }
       }
     },
-    /* @__PURE__ */ React58.createElement(Stack, { direction: "row", alignItems: "flex-start", spacing: 1 }, /* @__PURE__ */ React58.createElement(Box, { sx: { flexGrow: 1, minWidth: 0 } }, /* @__PURE__ */ React58.createElement(Stack, { direction: "row", alignItems: "baseline", spacing: 1, sx: { minWidth: 0 } }, /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(Stack, { direction: "row", alignItems: "flex-start", spacing: 1 }, /* @__PURE__ */ React62.createElement(Box, { sx: { flexGrow: 1, minWidth: 0, pr: hasActions ? 3 : 0 } }, /* @__PURE__ */ React62.createElement(Stack, { direction: "row", alignItems: "baseline", spacing: 1, sx: { minWidth: 0 } }, /* @__PURE__ */ React62.createElement(
       Typography,
       {
         variant: "body2",
@@ -4562,14 +4645,14 @@ function TemplateRow({
         title: template.slug
       },
       template.slug
-    ), updated && /* @__PURE__ */ React58.createElement(
+    ), updated && !hasActions && /* @__PURE__ */ React62.createElement(
       Typography,
       {
         variant: "caption",
         sx: { color: "text.secondary", flexShrink: 0, fontSize: "0.7rem" }
       },
       updated
-    )), template.description && /* @__PURE__ */ React58.createElement(
+    )), template.description && /* @__PURE__ */ React62.createElement(
       Typography,
       {
         variant: "caption",
@@ -4583,7 +4666,7 @@ function TemplateRow({
         }
       },
       template.description
-    ), template.tags && template.tags.length > 0 && /* @__PURE__ */ React58.createElement(Stack, { direction: "row", spacing: 0.5, sx: { mt: 0.5, flexWrap: "wrap", gap: 0.5 } }, template.tags.map((tag) => /* @__PURE__ */ React58.createElement(
+    ), template.tags && template.tags.length > 0 && /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 0.5, sx: { mt: 0.5, flexWrap: "wrap", gap: 0.5 } }, template.tags.map((tag) => /* @__PURE__ */ React62.createElement(
       Chip,
       {
         key: tag,
@@ -4592,164 +4675,807 @@ function TemplateRow({
         sx: { height: 18, fontSize: "0.65rem", "& .MuiChip-label": { px: 0.75 } }
       }
     ))))),
-    hasActions && hover && /* @__PURE__ */ React58.createElement(
-      Stack,
+    hasActions && /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(Tooltip, { title: "More" }, /* @__PURE__ */ React62.createElement(
+      IconButton,
       {
-        direction: "row",
-        spacing: 0.25,
-        onClick: stop,
+        size: "small",
+        onClick: openMenu,
+        "aria-label": "Row actions",
+        "aria-haspopup": "menu",
+        "aria-expanded": Boolean(menuAnchor) || void 0,
         sx: {
           position: "absolute",
           top: 4,
           right: 4,
-          bgcolor: "background.paper",
-          borderRadius: 1,
-          boxShadow: 1,
-          p: 0.25
+          opacity: hover || isCurrent || Boolean(menuAnchor) ? 1 : 0.45,
+          transition: "opacity 120ms"
         }
       },
-      onDuplicateAsTemplate && /* @__PURE__ */ React58.createElement(Tooltip, { title: "Duplicate as template" }, /* @__PURE__ */ React58.createElement(
-        IconButton,
-        {
-          size: "small",
-          onClick: (e) => {
-            stop(e);
-            onDuplicateAsTemplate();
-          }
-        },
-        /* @__PURE__ */ React58.createElement(LibraryAddOutlined, { fontSize: "small" })
-      )),
-      onDuplicate && /* @__PURE__ */ React58.createElement(Tooltip, { title: "Duplicate" }, /* @__PURE__ */ React58.createElement(
-        IconButton,
-        {
-          size: "small",
-          onClick: (e) => {
-            stop(e);
-            onDuplicate();
-          }
-        },
-        /* @__PURE__ */ React58.createElement(ContentCopyOutlined, { fontSize: "small" })
-      )),
-      onRename && /* @__PURE__ */ React58.createElement(Tooltip, { title: "Rename" }, /* @__PURE__ */ React58.createElement(
-        IconButton,
-        {
-          size: "small",
-          onClick: (e) => {
-            stop(e);
-            onRename();
-          }
+      /* @__PURE__ */ React62.createElement(MoreVertOutlined, { fontSize: "small" })
+    )), /* @__PURE__ */ React62.createElement(
+      Menu,
+      {
+        anchorEl: menuAnchor,
+        open: Boolean(menuAnchor),
+        onClose: closeMenu,
+        onClick: stop,
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        slotProps: { paper: { sx: { minWidth: 200 } } }
+      },
+      onRename && /* @__PURE__ */ React62.createElement(MenuItem, { onClick: runAction(onRename) }, /* @__PURE__ */ React62.createElement(ListItemIcon, null, /* @__PURE__ */ React62.createElement(DriveFileRenameOutlineOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(ListItemText, null, "Edit name & tags\u2026")),
+      onDuplicate && /* @__PURE__ */ React62.createElement(MenuItem, { onClick: runAction(onDuplicate) }, /* @__PURE__ */ React62.createElement(ListItemIcon, null, /* @__PURE__ */ React62.createElement(ContentCopyOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(ListItemText, null, "Duplicate")),
+      onDuplicateAsTemplate && /* @__PURE__ */ React62.createElement(MenuItem, { onClick: runAction(onDuplicateAsTemplate) }, /* @__PURE__ */ React62.createElement(ListItemIcon, null, /* @__PURE__ */ React62.createElement(LibraryAddOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(ListItemText, null, "Duplicate as template")),
+      onPromote && /* @__PURE__ */ React62.createElement(MenuItem, { onClick: runAction(onPromote) }, /* @__PURE__ */ React62.createElement(ListItemIcon, null, /* @__PURE__ */ React62.createElement(FileUploadOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(ListItemText, null, "Promote to sample")),
+      onDemote && /* @__PURE__ */ React62.createElement(MenuItem, { onClick: runAction(onDemote) }, /* @__PURE__ */ React62.createElement(ListItemIcon, null, /* @__PURE__ */ React62.createElement(FileDownloadOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(ListItemText, null, "Demote to template")),
+      onDelete && [
+        /* @__PURE__ */ React62.createElement(Divider$1, { key: "divider" }),
+        /* @__PURE__ */ React62.createElement(MenuItem, { key: "delete", onClick: runAction(onDelete), sx: { color: "error.main" } }, /* @__PURE__ */ React62.createElement(ListItemIcon, { sx: { color: "error.main" } }, /* @__PURE__ */ React62.createElement(DeleteOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(ListItemText, null, "Delete"))
+      ]
+    ))
+  );
+}
+
+// src/editor/blocks/helpers/move-block.ts
+function sameParent(a, b) {
+  if (a.kind !== b.kind || a.parentId !== b.parentId) return false;
+  if (a.kind === "ColumnsContainer" && b.kind === "ColumnsContainer") {
+    return a.columnIndex === b.columnIndex;
+  }
+  return true;
+}
+function getChildrenIds(doc, ref) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const block = doc[ref.parentId];
+  if (!block) return [];
+  if (ref.kind === "EmailLayout") return (_b = (_a = block.data) == null ? void 0 : _a.childrenIds) != null ? _b : [];
+  if (ref.kind === "Container") return (_e = (_d = (_c = block.data) == null ? void 0 : _c.props) == null ? void 0 : _d.childrenIds) != null ? _e : [];
+  const col = (_h = (_g = (_f = block.data) == null ? void 0 : _f.props) == null ? void 0 : _g.columns) == null ? void 0 : _h[ref.columnIndex];
+  return (_i = col == null ? void 0 : col.childrenIds) != null ? _i : [];
+}
+function patchChildrenIds(block, ref, newIds) {
+  var _a, _b, _c;
+  if (ref.kind === "EmailLayout") {
+    return __spreadProps(__spreadValues({}, block), { data: __spreadProps(__spreadValues({}, block.data), { childrenIds: newIds }) });
+  }
+  if (ref.kind === "Container") {
+    return __spreadProps(__spreadValues({}, block), {
+      data: __spreadProps(__spreadValues({}, block.data), { props: __spreadProps(__spreadValues({}, block.data.props), { childrenIds: newIds }) })
+    });
+  }
+  const columns = ((_c = (_b = (_a = block.data) == null ? void 0 : _a.props) == null ? void 0 : _b.columns) != null ? _c : []).map(
+    (c, i) => i === ref.columnIndex ? __spreadProps(__spreadValues({}, c), { childrenIds: newIds }) : c
+  );
+  return __spreadProps(__spreadValues({}, block), { data: __spreadProps(__spreadValues({}, block.data), { props: __spreadProps(__spreadValues({}, block.data.props), { columns }) }) });
+}
+function isDescendant(doc, ancestorId, candidateId) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  if (ancestorId === candidateId) return true;
+  const block = doc[ancestorId];
+  if (!block) return false;
+  const direct = [];
+  if (block.type === "EmailLayout") direct.push(...(_b = (_a = block.data) == null ? void 0 : _a.childrenIds) != null ? _b : []);
+  if (block.type === "Container") direct.push(...(_e = (_d = (_c = block.data) == null ? void 0 : _c.props) == null ? void 0 : _d.childrenIds) != null ? _e : []);
+  if (block.type === "ColumnsContainer") {
+    for (const col of (_h = (_g = (_f = block.data) == null ? void 0 : _f.props) == null ? void 0 : _g.columns) != null ? _h : []) {
+      direct.push(...(_i = col.childrenIds) != null ? _i : []);
+    }
+  }
+  for (const childId of direct) {
+    if (isDescendant(doc, childId, candidateId)) return true;
+  }
+  return false;
+}
+function buildMovePatch(doc, sourceId, sourceParent, targetParent, targetIndex) {
+  var _a, _b, _c;
+  if (isDescendant(doc, sourceId, targetParent.parentId)) return null;
+  const srcIds = getChildrenIds(doc, sourceParent);
+  const sourceIndex = srcIds.indexOf(sourceId);
+  if (sourceIndex < 0) return null;
+  if (sameParent(sourceParent, targetParent)) {
+    const arr = [...srcIds];
+    arr.splice(sourceIndex, 1);
+    let insertAt2 = targetIndex;
+    if (insertAt2 > sourceIndex) insertAt2 -= 1;
+    if (insertAt2 < 0) insertAt2 = 0;
+    if (insertAt2 > arr.length) insertAt2 = arr.length;
+    arr.splice(insertAt2, 0, sourceId);
+    if (arr.every((id, i) => id === srcIds[i])) return null;
+    const sourceBlock2 = doc[sourceParent.parentId];
+    return {
+      [sourceParent.parentId]: patchChildrenIds(sourceBlock2, sourceParent, arr)
+    };
+  }
+  const newSrcIds = [...srcIds];
+  newSrcIds.splice(sourceIndex, 1);
+  const tgtIds = getChildrenIds(doc, targetParent);
+  const newTgtIds = [...tgtIds];
+  let insertAt = targetIndex;
+  if (insertAt < 0) insertAt = 0;
+  if (insertAt > newTgtIds.length) insertAt = newTgtIds.length;
+  newTgtIds.splice(insertAt, 0, sourceId);
+  if (sourceParent.parentId === targetParent.parentId) {
+    const block = doc[sourceParent.parentId];
+    const columns = ((_c = (_b = (_a = block.data) == null ? void 0 : _a.props) == null ? void 0 : _b.columns) != null ? _c : []).map((c, i) => {
+      if (sourceParent.kind === "ColumnsContainer" && i === sourceParent.columnIndex) {
+        return __spreadProps(__spreadValues({}, c), { childrenIds: newSrcIds });
+      }
+      if (targetParent.kind === "ColumnsContainer" && i === targetParent.columnIndex) {
+        return __spreadProps(__spreadValues({}, c), { childrenIds: newTgtIds });
+      }
+      return c;
+    });
+    return {
+      [sourceParent.parentId]: __spreadProps(__spreadValues({}, block), {
+        data: __spreadProps(__spreadValues({}, block.data), { props: __spreadProps(__spreadValues({}, block.data.props), { columns }) })
+      })
+    };
+  }
+  const sourceBlock = doc[sourceParent.parentId];
+  const targetBlock = doc[targetParent.parentId];
+  return {
+    [sourceParent.parentId]: patchChildrenIds(sourceBlock, sourceParent, newSrcIds),
+    [targetParent.parentId]: patchChildrenIds(targetBlock, targetParent, newTgtIds)
+  };
+}
+
+// src/app/templates-drawer/outline-panel.tsx
+var ROOT_BLOCK_ID2 = "root";
+var PREVIEW_MAX = 36;
+function iconForType(type) {
+  switch (type) {
+    case "EmailLayout":
+      return /* @__PURE__ */ React62.createElement(DashboardOutlined, { fontSize: "small" });
+    case "Heading":
+      return /* @__PURE__ */ React62.createElement(HMobiledataOutlined, { fontSize: "small" });
+    case "Text":
+      return /* @__PURE__ */ React62.createElement(NotesOutlined, { fontSize: "small" });
+    case "Button":
+      return /* @__PURE__ */ React62.createElement(SmartButtonOutlined, { fontSize: "small" });
+    case "Image":
+      return /* @__PURE__ */ React62.createElement(ImageOutlined, { fontSize: "small" });
+    case "Avatar":
+      return /* @__PURE__ */ React62.createElement(AccountCircleOutlined, { fontSize: "small" });
+    case "Signature":
+      return /* @__PURE__ */ React62.createElement(ContactMailOutlined, { fontSize: "small" });
+    case "Divider":
+      return /* @__PURE__ */ React62.createElement(HorizontalRuleOutlined, { fontSize: "small" });
+    case "Spacer":
+      return /* @__PURE__ */ React62.createElement(Crop32Outlined, { fontSize: "small" });
+    case "Html":
+      return /* @__PURE__ */ React62.createElement(HtmlOutlined, { fontSize: "small" });
+    case "Container":
+      return /* @__PURE__ */ React62.createElement(LibraryAddOutlined, { fontSize: "small" });
+    case "ColumnsContainer":
+      return /* @__PURE__ */ React62.createElement(ViewColumnOutlined, { fontSize: "small" });
+    default:
+      return /* @__PURE__ */ React62.createElement(BusinessOutlined, { fontSize: "small" });
+  }
+}
+function previewText(text) {
+  if (!text) return void 0;
+  const trimmed = text.trim().replace(/\s+/g, " ");
+  if (!trimmed) return void 0;
+  return trimmed.length > PREVIEW_MAX ? trimmed.slice(0, PREVIEW_MAX - 1) + "\u2026" : trimmed;
+}
+function buildNode(id, doc, ctx) {
+  var _a, _b, _c, _d, _e, _f;
+  const block = doc[id];
+  if (!block) return null;
+  const type = block.type;
+  const data = (_a = block.data) != null ? _a : {};
+  const props = (_b = data.props) != null ? _b : {};
+  const baseMeta = ctx ? { parent: ctx.parent, indexInParent: ctx.indexInParent, siblingsCount: ctx.siblingsCount } : {};
+  switch (type) {
+    case "EmailLayout": {
+      const ids = (_c = data.childrenIds) != null ? _c : [];
+      const parentForChildren = { kind: "EmailLayout", parentId: "root" };
+      const children = ids.map(
+        (childId, i) => buildNode(childId, doc, {
+          parent: parentForChildren,
+          indexInParent: i,
+          siblingsCount: ids.length
+        })
+      ).filter((n) => n !== null);
+      return {
+        id,
+        label: "Canvas",
+        icon: iconForType("EmailLayout"),
+        children,
+        containerChildrenRef: parentForChildren
+      };
+    }
+    case "Container": {
+      const ids = (_d = props.childrenIds) != null ? _d : [];
+      const parentForChildren = { kind: "Container", parentId: id };
+      const children = ids.map(
+        (childId, i) => buildNode(childId, doc, {
+          parent: parentForChildren,
+          indexInParent: i,
+          siblingsCount: ids.length
+        })
+      ).filter((n) => n !== null);
+      const count = children.length;
+      return __spreadValues({
+        id,
+        label: "Container",
+        preview: count === 1 ? "1 child" : `${count} children`,
+        icon: iconForType("Container"),
+        children,
+        containerChildrenRef: parentForChildren
+      }, baseMeta);
+    }
+    case "ColumnsContainer": {
+      const columns = (_e = props.columns) != null ? _e : [];
+      const children = [];
+      columns.forEach((col, colIdx) => {
+        var _a2;
+        const colIds = (_a2 = col.childrenIds) != null ? _a2 : [];
+        const parentForCol = {
+          kind: "ColumnsContainer",
+          parentId: id,
+          columnIndex: colIdx
+        };
+        const colChildren = colIds.map(
+          (childId, i) => buildNode(childId, doc, {
+            parent: parentForCol,
+            indexInParent: i,
+            siblingsCount: colIds.length
+          })
+        ).filter((n) => n !== null);
+        children.push({
+          id: `${id}::col${colIdx}`,
+          label: `Column ${colIdx + 1}`,
+          preview: colChildren.length === 1 ? "1 child" : `${colChildren.length} children`,
+          icon: /* @__PURE__ */ React62.createElement(ViewColumnSharp, { fontSize: "small", sx: { opacity: 0.6 } }),
+          children: colChildren,
+          containerChildrenRef: parentForCol
+        });
+      });
+      return __spreadValues({
+        id,
+        label: "Columns",
+        preview: `${columns.length} columns`,
+        icon: iconForType("ColumnsContainer"),
+        children
+      }, baseMeta);
+    }
+    case "Text":
+    case "Heading":
+    case "Button":
+      return __spreadValues({ id, label: type, preview: previewText(props.text), icon: iconForType(type) }, baseMeta);
+    case "Html":
+      return __spreadValues({ id, label: "Html", preview: previewText(props.contents), icon: iconForType("Html") }, baseMeta);
+    case "Image":
+      return __spreadValues({
+        id,
+        label: "Image",
+        preview: (_f = previewText(props.alt)) != null ? _f : previewText(props.url),
+        icon: iconForType("Image")
+      }, baseMeta);
+    case "Avatar":
+      return __spreadValues({ id, label: "Avatar", preview: previewText(props.imageUrl), icon: iconForType("Avatar") }, baseMeta);
+    case "Divider":
+      return __spreadValues({ id, label: "Divider", icon: iconForType("Divider") }, baseMeta);
+    case "Spacer":
+      return __spreadValues({
+        id,
+        label: "Spacer",
+        preview: props.height ? `${props.height}px` : void 0,
+        icon: iconForType("Spacer")
+      }, baseMeta);
+    case "Signature":
+      return __spreadValues({ id, label: "Signature", preview: previewText(props.name), icon: iconForType("Signature") }, baseMeta);
+    default:
+      return __spreadValues({ id, label: type, icon: iconForType(type) }, baseMeta);
+  }
+}
+var DRAG_MIME = "application/x-email-editor-block";
+function OutlinePanel() {
+  const document2 = useDocument();
+  const selectedBlockId = useSelectedBlockId();
+  const [dragging, setDragging] = useState(null);
+  const tree = buildNode(ROOT_BLOCK_ID2, document2);
+  const performMove = (payload, targetParent, targetIndex) => {
+    const patch = buildMovePatch(
+      document2,
+      payload.sourceId,
+      payload.sourceParent,
+      targetParent,
+      targetIndex
+    );
+    if (patch) {
+      setDocument(patch);
+      setSelectedBlockId(payload.sourceId);
+    }
+  };
+  return /* @__PURE__ */ React62.createElement(Box, null, /* @__PURE__ */ React62.createElement(Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5, px: 0.5 } }, "Outline"), /* @__PURE__ */ React62.createElement(Typography, { variant: "caption", sx: { display: "block", color: "text.secondary", px: 0.5, mb: 1 } }, "Click a row to select. Drag a row to reorder or move it into a container."), tree ? /* @__PURE__ */ React62.createElement(
+    OutlineRow,
+    {
+      node: tree,
+      depth: 0,
+      selectedBlockId,
+      document: document2,
+      dragging,
+      setDragging,
+      performMove
+    }
+  ) : /* @__PURE__ */ React62.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", px: 0.5 } }, "Nothing to outline."));
+}
+function OutlineRow({
+  node,
+  depth,
+  selectedBlockId,
+  document: document2,
+  dragging,
+  setDragging,
+  performMove
+}) {
+  const [expanded, setExpanded] = useState(true);
+  const [dropPos, setDropPos] = useState(null);
+  const hasChildren = Boolean(node.children && node.children.length > 0);
+  const isSelectable = !node.id.includes("::");
+  const isSelected = isSelectable && selectedBlockId === node.id;
+  const canMove = isSelectable && node.parent !== void 0 && node.indexInParent !== void 0 && node.siblingsCount !== void 0;
+  const canMoveUp = canMove && node.indexInParent > 0;
+  const canMoveDown = canMove && node.indexInParent < node.siblingsCount - 1;
+  const isDragSource = (dragging == null ? void 0 : dragging.sourceId) === node.id;
+  const draggable = canMove;
+  const handleDragStart = (e) => {
+    if (!draggable || !node.parent) return;
+    const payload = { sourceId: node.id, sourceParent: node.parent };
+    e.dataTransfer.setData(DRAG_MIME, JSON.stringify(payload));
+    e.dataTransfer.setData("text/plain", node.label);
+    e.dataTransfer.effectAllowed = "move";
+    setDragging(payload);
+  };
+  const handleDragEnd = () => setDragging(null);
+  const computeDropPos = (e) => {
+    if (!dragging) return null;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const y = e.clientY - rect.top;
+    const h = rect.height || 28;
+    const canDropInside = Boolean(node.containerChildrenRef);
+    if (canDropInside && y > h * 0.25 && y < h * 0.75) return "inside";
+    if (y < h * 0.5) return "before";
+    return "after";
+  };
+  const handleDragOver = (e) => {
+    if (!dragging) return;
+    if (dragging.sourceId === node.id) {
+      setDropPos(null);
+      return;
+    }
+    if (node.containerChildrenRef && isDescendant(document2, dragging.sourceId, node.id)) {
+      setDropPos(null);
+      return;
+    }
+    const pos = computeDropPos(e);
+    if (!pos) {
+      setDropPos(null);
+      return;
+    }
+    if ((pos === "before" || pos === "after") && !node.parent) {
+      setDropPos(null);
+      return;
+    }
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    setDropPos(pos);
+  };
+  const handleDragLeave = () => setDropPos(null);
+  const handleDrop = (e) => {
+    if (!dragging || !dropPos) return;
+    e.preventDefault();
+    let targetParent;
+    let targetIndex = 0;
+    if (dropPos === "inside" && node.containerChildrenRef) {
+      targetParent = node.containerChildrenRef;
+      targetIndex = Number.MAX_SAFE_INTEGER;
+    } else if ((dropPos === "before" || dropPos === "after") && node.parent) {
+      targetParent = node.parent;
+      targetIndex = node.indexInParent + (dropPos === "after" ? 1 : 0);
+    }
+    if (targetParent) performMove(dragging, targetParent, targetIndex);
+    setDropPos(null);
+    setDragging(null);
+  };
+  const handleMove = (delta) => {
+    if (!canMove || !node.parent) return;
+    const nextIndex = node.indexInParent + delta;
+    const patch = buildMovePatch(document2, node.id, node.parent, node.parent, nextIndex + (delta > 0 ? 1 : 0));
+    if (patch) setDocument(patch);
+  };
+  return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(Box, { sx: { position: "relative" } }, dropPos === "before" && /* @__PURE__ */ React62.createElement(DropLine, { depth }), /* @__PURE__ */ React62.createElement(
+    Stack,
+    {
+      direction: "row",
+      alignItems: "center",
+      spacing: 0.5,
+      draggable,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      onClick: () => isSelectable && setSelectedBlockId(node.id),
+      onMouseEnter: () => isSelectable && !dragging && setHoveredBlockId(node.id),
+      onMouseLeave: () => isSelectable && setHoveredBlockId(null),
+      sx: {
+        pl: `${depth * 12 + 4}px`,
+        pr: 0.5,
+        py: 0.25,
+        minHeight: 28,
+        borderRadius: 0.75,
+        cursor: isSelectable ? draggable ? "grab" : "pointer" : "default",
+        backgroundColor: isSelected ? "action.selected" : dropPos === "inside" ? "rgba(25, 118, 210, 0.12)" : "transparent",
+        opacity: isDragSource ? 0.5 : 1,
+        outline: dropPos === "inside" ? "1.5px solid rgba(25, 118, 210, 0.7)" : void 0,
+        transition: "background-color 80ms, outline-color 80ms",
+        "&:hover": {
+          backgroundColor: isSelected ? "action.selected" : "action.hover"
         },
-        /* @__PURE__ */ React58.createElement(DriveFileRenameOutlineOutlined, { fontSize: "small" })
-      )),
-      onPromote && /* @__PURE__ */ React58.createElement(Tooltip, { title: "Promote to sample" }, /* @__PURE__ */ React58.createElement(
-        IconButton,
-        {
-          size: "small",
-          onClick: (e) => {
-            stop(e);
-            onPromote();
-          }
+        "&:hover .outline-move-btns": { opacity: 1 },
+        userSelect: "none"
+      }
+    },
+    hasChildren ? /* @__PURE__ */ React62.createElement(
+      Box,
+      {
+        role: "button",
+        "aria-label": expanded ? "Collapse" : "Expand",
+        onClick: (e) => {
+          e.stopPropagation();
+          setExpanded((v) => !v);
         },
-        /* @__PURE__ */ React58.createElement(FileUploadOutlined, { fontSize: "small" })
-      )),
-      onDemote && /* @__PURE__ */ React58.createElement(Tooltip, { title: "Demote to template" }, /* @__PURE__ */ React58.createElement(
+        sx: { display: "flex", alignItems: "center", cursor: "pointer" }
+      },
+      expanded ? /* @__PURE__ */ React62.createElement(ExpandMore, { fontSize: "small" }) : /* @__PURE__ */ React62.createElement(ChevronRight, { fontSize: "small" })
+    ) : /* @__PURE__ */ React62.createElement(Box, { sx: { width: 20 } }),
+    /* @__PURE__ */ React62.createElement(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          color: isSelected ? "primary.main" : "text.secondary",
+          flexShrink: 0
+        }
+      },
+      node.icon
+    ),
+    /* @__PURE__ */ React62.createElement(
+      Typography,
+      {
+        variant: "body2",
+        sx: {
+          fontWeight: 600,
+          color: isSelected ? "primary.main" : "text.primary",
+          flexShrink: 0
+        }
+      },
+      node.label
+    ),
+    node.preview && /* @__PURE__ */ React62.createElement(
+      Typography,
+      {
+        variant: "body2",
+        sx: {
+          color: "text.secondary",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          flex: 1,
+          minWidth: 0
+        }
+      },
+      "\u2014 ",
+      node.preview
+    ),
+    canMove && /* @__PURE__ */ React62.createElement(
+      Box,
+      {
+        className: "outline-move-btns",
+        sx: {
+          display: "flex",
+          ml: "auto",
+          opacity: isSelected ? 1 : 0,
+          transition: "opacity 120ms"
+        }
+      },
+      /* @__PURE__ */ React62.createElement(Tooltip, { title: "Move up" }, /* @__PURE__ */ React62.createElement("span", null, /* @__PURE__ */ React62.createElement(
         IconButton,
         {
           size: "small",
+          disabled: !canMoveUp,
           onClick: (e) => {
-            stop(e);
-            onDemote();
-          }
+            e.stopPropagation();
+            handleMove(-1);
+          },
+          "aria-label": `Move ${node.label} up`,
+          sx: { p: 0.25 }
         },
-        /* @__PURE__ */ React58.createElement(FileDownloadOutlined, { fontSize: "small" })
-      )),
-      onDelete && /* @__PURE__ */ React58.createElement(Tooltip, { title: "Delete" }, /* @__PURE__ */ React58.createElement(
+        /* @__PURE__ */ React62.createElement(KeyboardArrowUp, { fontSize: "small" })
+      ))),
+      /* @__PURE__ */ React62.createElement(Tooltip, { title: "Move down" }, /* @__PURE__ */ React62.createElement("span", null, /* @__PURE__ */ React62.createElement(
         IconButton,
         {
           size: "small",
+          disabled: !canMoveDown,
           onClick: (e) => {
-            stop(e);
-            onDelete();
-          }
+            e.stopPropagation();
+            handleMove(1);
+          },
+          "aria-label": `Move ${node.label} down`,
+          sx: { p: 0.25 }
         },
-        /* @__PURE__ */ React58.createElement(DeleteOutlined, { fontSize: "small" })
-      ))
+        /* @__PURE__ */ React62.createElement(KeyboardArrowDown, { fontSize: "small" })
+      )))
+    )
+  ), dropPos === "after" && /* @__PURE__ */ React62.createElement(DropLine, { depth })), hasChildren && expanded && /* @__PURE__ */ React62.createElement(Box, null, node.children.map((child) => /* @__PURE__ */ React62.createElement(
+    OutlineRow,
+    {
+      key: child.id,
+      node: child,
+      depth: depth + 1,
+      selectedBlockId,
+      document: document2,
+      dragging,
+      setDragging,
+      performMove
+    }
+  ))));
+}
+function DropLine({ depth }) {
+  return /* @__PURE__ */ React62.createElement(
+    Box,
+    {
+      sx: {
+        position: "relative",
+        height: 0
+      }
+    },
+    /* @__PURE__ */ React62.createElement(
+      Box,
+      {
+        sx: {
+          position: "absolute",
+          left: `${depth * 12 + 24}px`,
+          right: 4,
+          top: -1,
+          height: 2,
+          backgroundColor: "primary.main",
+          borderRadius: 1,
+          pointerEvents: "none"
+        }
+      }
     )
   );
 }
+function NewTemplatePickerDialog({
+  open,
+  kind,
+  samples,
+  existingSlugs,
+  defaultName,
+  onClose,
+  onCreate
+}) {
+  const [name, setName] = useState("");
+  const [selectedStarter, setSelectedStarter] = useState(null);
+  const [error, setError] = useState(null);
+  const [busy, setBusy] = useState(false);
+  useEffect(() => {
+    if (open) {
+      setName(defaultName != null ? defaultName : kind === "sample" ? "New sample" : "New template");
+      setSelectedStarter(null);
+      setError(null);
+      setBusy(false);
+    }
+  }, [open, defaultName, kind]);
+  const validate = () => {
+    const trimmed = name.trim();
+    if (!trimmed) return "Name is required";
+    if (existingSlugs.some((s) => s.toLowerCase() === trimmed.toLowerCase())) {
+      return kind === "sample" ? "A sample with this name already exists" : "A template with this name already exists";
+    }
+    return null;
+  };
+  const handleCreate = () => __async(null, null, function* () {
+    const err = validate();
+    if (err) {
+      setError(err);
+      return;
+    }
+    setBusy(true);
+    try {
+      const ok = yield onCreate(name.trim(), selectedStarter);
+      if (ok) onClose();
+    } finally {
+      setBusy(false);
+    }
+  });
+  const pickable = samples.filter((s) => s.id !== "empty-email");
+  return /* @__PURE__ */ React62.createElement(Dialog, { open, onClose: busy ? void 0 : onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React62.createElement(DialogTitle, null, kind === "sample" ? "New sample" : "New template"), /* @__PURE__ */ React62.createElement(DialogContent, { dividers: true }, /* @__PURE__ */ React62.createElement(Typography, { variant: "subtitle2", sx: { mb: 1 } }, "Start from"), /* @__PURE__ */ React62.createElement(
+    List,
+    {
+      dense: true,
+      sx: {
+        mb: 2,
+        border: 1,
+        borderColor: "divider",
+        borderRadius: 1,
+        py: 0,
+        maxHeight: 260,
+        overflowY: "auto"
+      }
+    },
+    /* @__PURE__ */ React62.createElement(
+      ListItemButton,
+      {
+        selected: selectedStarter === null,
+        onClick: () => setSelectedStarter(null)
+      },
+      /* @__PURE__ */ React62.createElement(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, flex: 1 } }, /* @__PURE__ */ React62.createElement(InsertDriveFileOutlined, { fontSize: "small", sx: { color: "text.secondary" } }), /* @__PURE__ */ React62.createElement(ListItemText, { primary: "Blank", secondary: "Start from an empty email" }))
+    ),
+    pickable.map((s) => /* @__PURE__ */ React62.createElement(
+      ListItemButton,
+      {
+        key: s.id,
+        selected: selectedStarter === s.id,
+        onClick: () => setSelectedStarter(s.id)
+      },
+      /* @__PURE__ */ React62.createElement(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, flex: 1 } }, /* @__PURE__ */ React62.createElement(DescriptionOutlined, { fontSize: "small", sx: { color: "text.secondary" } }), /* @__PURE__ */ React62.createElement(ListItemText, { primary: s.slug, secondary: s.description }))
+    ))
+  ), /* @__PURE__ */ React62.createElement(
+    TextField,
+    {
+      autoFocus: true,
+      fullWidth: true,
+      size: "small",
+      label: "Name",
+      value: name,
+      onChange: (e) => {
+        setName(e.target.value);
+        if (error) setError(null);
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter" && !busy) void handleCreate();
+      },
+      error: Boolean(error),
+      helperText: error != null ? error : " ",
+      disabled: busy
+    }
+  )), /* @__PURE__ */ React62.createElement(DialogActions, null, /* @__PURE__ */ React62.createElement(Button$1, { onClick: onClose, disabled: busy }, "Cancel"), /* @__PURE__ */ React62.createElement(Button$1, { variant: "contained", onClick: handleCreate, disabled: busy }, busy ? "Creating\u2026" : `Create ${kind}`)));
+}
 function RenameDialog({
   open,
   currentSlug,
+  currentTags = [],
   existingSlugs,
   onClose,
   onSubmit
 }) {
-  const [value, setValue] = useState(currentSlug);
+  const [slug, setSlug] = useState(currentSlug);
+  const [tags, setTags] = useState(currentTags);
+  const [tagInput, setTagInput] = useState("");
   const [error, setError] = useState(null);
   const [submitting, setSubmitting] = useState(false);
   useEffect(() => {
     if (open) {
-      setValue(currentSlug);
+      setSlug(currentSlug);
+      setTags(currentTags);
+      setTagInput("");
       setError(null);
       setSubmitting(false);
     }
-  }, [open, currentSlug]);
-  const handleChange = (e) => {
-    setValue(e.target.value);
-    setError(null);
+  }, [open, currentSlug, currentTags]);
+  const addTag = () => {
+    const trimmed = tagInput.trim();
+    if (!trimmed) return;
+    if (tags.some((t) => t.toLowerCase() === trimmed.toLowerCase())) {
+      setTagInput("");
+      return;
+    }
+    setTags([...tags, trimmed]);
+    setTagInput("");
   };
+  const removeTag = (tag) => setTags(tags.filter((t) => t !== tag));
+  const tagsUnchanged = tags.length === currentTags.length && tags.every((t, i) => t === currentTags[i]);
   const handleSubmit = () => __async(null, null, function* () {
-    const trimmed = value.trim();
-    if (!trimmed) {
+    const trimmedSlug = slug.trim();
+    if (!trimmedSlug) {
       setError("Please enter a name");
       return;
     }
-    if (trimmed === currentSlug) {
-      onClose();
+    const slugChanged = trimmedSlug !== currentSlug;
+    if (slugChanged && existingSlugs.some((s) => s.toLowerCase() === trimmedSlug.toLowerCase())) {
+      setError("A template with this name already exists");
       return;
     }
-    if (existingSlugs.some((s) => s.toLowerCase() === trimmed.toLowerCase())) {
-      setError("A template with this name already exists");
+    if (!slugChanged && tagsUnchanged) {
+      onClose();
       return;
     }
     setSubmitting(true);
     try {
-      yield onSubmit(trimmed);
+      yield onSubmit(trimmedSlug, { tags });
       onClose();
     } catch (e) {
-      console.error("Error renaming template:", e);
-      setError("Failed to rename template");
+      console.error("Error updating template details:", e);
+      setError("Failed to update template details");
     } finally {
       setSubmitting(false);
     }
   });
-  return /* @__PURE__ */ React58.createElement(Dialog, { open, onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React58.createElement(DialogTitle, null, "Rename template"), /* @__PURE__ */ React58.createElement(DialogContent, null, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(Dialog, { open, onClose: submitting ? void 0 : onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React62.createElement(DialogTitle, null, "Edit details"), /* @__PURE__ */ React62.createElement(DialogContent, null, /* @__PURE__ */ React62.createElement(
     TextField,
     {
       autoFocus: true,
       margin: "dense",
-      label: "Slug",
+      label: "Name",
       fullWidth: true,
       variant: "outlined",
-      value,
-      onChange: handleChange,
+      value: slug,
+      onChange: (e) => {
+        setSlug(e.target.value);
+        setError(null);
+      },
       error: !!error,
-      helperText: error,
+      helperText: error != null ? error : " ",
       disabled: submitting,
       onKeyPress: (e) => {
-        if (e.key === "Enter" && !submitting) {
-          handleSubmit();
+        if (e.key === "Enter" && !submitting) handleSubmit();
+      }
+    }
+  ), /* @__PURE__ */ React62.createElement(Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 1, mb: 0.5 } }, "Tags"), tags.length > 0 ? /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 0.5, sx: { flexWrap: "wrap", gap: 0.5, mb: 1 } }, tags.map((tag) => /* @__PURE__ */ React62.createElement(
+    Chip,
+    {
+      key: tag,
+      label: tag,
+      size: "small",
+      onDelete: submitting ? void 0 : () => removeTag(tag)
+    }
+  ))) : /* @__PURE__ */ React62.createElement(Typography, { variant: "caption", sx: { color: "text.disabled", display: "block", mb: 1 } }, "No tags yet. Suggested: ", /* @__PURE__ */ React62.createElement("i", null, "transactional"), ", ", /* @__PURE__ */ React62.createElement("i", null, "marketing"), "."), /* @__PURE__ */ React62.createElement(
+    TextField,
+    {
+      size: "small",
+      fullWidth: true,
+      placeholder: "Add a tag and press Enter",
+      value: tagInput,
+      onChange: (e) => setTagInput(e.target.value),
+      disabled: submitting,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === ",") {
+          e.preventDefault();
+          addTag();
+        } else if (e.key === "Backspace" && !tagInput && tags.length > 0) {
+          e.preventDefault();
+          removeTag(tags[tags.length - 1]);
         }
+      },
+      InputProps: {
+        endAdornment: /* @__PURE__ */ React62.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React62.createElement(
+          Button$1,
+          {
+            size: "small",
+            onClick: addTag,
+            disabled: !tagInput.trim() || submitting,
+            startIcon: /* @__PURE__ */ React62.createElement(AddOutlined, { fontSize: "small" }),
+            sx: { textTransform: "none" }
+          },
+          "Add"
+        ))
       }
     }
-  )), /* @__PURE__ */ React58.createElement(DialogActions, null, /* @__PURE__ */ React58.createElement(Button$1, { onClick: onClose, disabled: submitting }, "Cancel"), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(Box, { sx: { minHeight: 8 } })), /* @__PURE__ */ React62.createElement(DialogActions, null, /* @__PURE__ */ React62.createElement(Button$1, { onClick: onClose, disabled: submitting }, "Cancel"), /* @__PURE__ */ React62.createElement(
     Button$1,
     {
       onClick: handleSubmit,
       variant: "contained",
-      disabled: !value.trim() || submitting
+      disabled: !slug.trim() || submitting
     },
-    submitting ? "Renaming..." : "Rename"
+    submitting ? "Saving\u2026" : "Save"
   )));
 }
 function SaveTemplateDialog({
@@ -4811,7 +5537,7 @@ function SaveTemplateDialog({
     setInternalError("");
     onClose();
   };
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     Dialog,
     {
       open,
@@ -4819,8 +5545,8 @@ function SaveTemplateDialog({
       maxWidth: "sm",
       fullWidth: true
     },
-    /* @__PURE__ */ React58.createElement(DialogTitle, null, "Save Email Template"),
-    /* @__PURE__ */ React58.createElement(DialogContent, null, /* @__PURE__ */ React58.createElement(Box, { sx: { pt: 1 } }, /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(DialogTitle, null, "Save Email Template"),
+    /* @__PURE__ */ React62.createElement(DialogContent, null, /* @__PURE__ */ React62.createElement(Box, { sx: { pt: 1 } }, /* @__PURE__ */ React62.createElement(
       TextField,
       {
         autoFocus: true,
@@ -4842,7 +5568,7 @@ function SaveTemplateDialog({
         disabled: isSubmitting
       }
     ))),
-    /* @__PURE__ */ React58.createElement(DialogActions, null, /* @__PURE__ */ React58.createElement(Button$1, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(DialogActions, null, /* @__PURE__ */ React62.createElement(Button$1, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React62.createElement(
       Button$1,
       {
         onClick: handleSave,
@@ -4908,7 +5634,7 @@ function SamplesDrawer({
   setTemplateKind,
   saveAs
 }) {
-  var _a;
+  var _a, _b;
   const samplesDrawerOpen = useSamplesDrawerOpen();
   const { setCurrentTemplate, loadTemplate: ctxLoadTemplate } = useEmailEditor();
   const { showMessage } = useSnackbar();
@@ -4917,12 +5643,14 @@ function SamplesDrawer({
   const [loadingSamples, setLoadingSamples] = useState(false);
   const [loadingTemplates, setLoadingTemplates] = useState(false);
   const [templatesError, setTemplatesError] = useState(null);
+  const [activeLeftTab, setActiveLeftTab] = useState("templates");
   const [search, setSearch] = useState("");
   const [sortKey, setSortKey] = useState("updatedAt");
   const [activeTags, setActiveTags] = useState([]);
   const [renameTarget, setRenameTarget] = useState(null);
   const [pendingSaveAs, setPendingSaveAs] = useState(null);
   const [newError, setNewError] = useState(null);
+  const [pickerKind, setPickerKind] = useState(null);
   const handleLoadTemplate = (templateId) => __async(null, null, function* () {
     if (templateId === "empty-email") {
       return empty_email_message_default;
@@ -4959,6 +5687,15 @@ function SamplesDrawer({
       setLoadingTemplates(false);
     }
   });
+  const ensureRowPresent = (id, slug, kind, tags) => {
+    const now = (/* @__PURE__ */ new Date()).toISOString();
+    const row = { id, slug, kind, tags, createdAt: now, updatedAt: now };
+    if (kind === "sample") {
+      setSamples((prev) => prev.some((t) => t.id === id) ? prev : [...prev, row]);
+    } else {
+      setTemplates((prev) => prev.some((t) => t.id === id) ? prev : [...prev, row]);
+    }
+  };
   useEffect(() => {
     if (!enabled || !loadTemplates) return;
     refreshTemplates();
@@ -4982,27 +5719,34 @@ function SamplesDrawer({
     };
   }, [samples, templates]);
   const allTags = useMemo(() => {
-    var _a2;
+    var _a2, _b2;
     const set = /* @__PURE__ */ new Set();
-    for (const t of templateRows) {
-      (_a2 = t.tags) == null ? void 0 : _a2.forEach((tag) => set.add(tag));
-    }
+    for (const t of templateRows) (_a2 = t.tags) == null ? void 0 : _a2.forEach((tag) => set.add(tag));
+    for (const s of sampleRows) (_b2 = s.tags) == null ? void 0 : _b2.forEach((tag) => set.add(tag));
     return Array.from(set).sort();
-  }, [templateRows]);
-  const filteredTemplates = useMemo(() => {
+  }, [templateRows, sampleRows]);
+  const matchesSearchAndTags = 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 (t) => {
+      if (term) {
+        const haystack = [t.slug, t.description, t.subject].filter(Boolean).join(" ").toLowerCase();
+        if (!haystack.includes(term)) return false;
+      }
+      if (activeTags.length > 0) {
+        if (!t.tags || t.tags.length === 0) return false;
+        if (!activeTags.every((tag) => t.tags.includes(tag))) return false;
+      }
+      return true;
     };
-    return templateRows.filter((t) => matchSearch(t) && matchTags(t)).slice().sort((a, b) => compareTemplates(a, b, sortKey));
-  }, [templateRows, search, activeTags, sortKey]);
+  }, [search, activeTags]);
+  const filteredTemplates = useMemo(
+    () => templateRows.filter(matchesSearchAndTags).slice().sort((a, b) => compareTemplates(a, b, sortKey)),
+    [templateRows, matchesSearchAndTags, sortKey]
+  );
+  const filteredSamples = useMemo(
+    () => sampleRows.filter(matchesSearchAndTags).slice().sort((a, b) => compareTemplates(a, b, sortKey)),
+    [sampleRows, matchesSearchAndTags, sortKey]
+  );
   const toggleTag = (tag) => {
     setActiveTags((prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]);
   };
@@ -5029,16 +5773,19 @@ function SamplesDrawer({
     deleteTemplate(template.id);
     showMessage("Template deleted");
   };
-  const handleRenameSubmit = (newSlug) => __async(null, null, function* () {
+  const handleRenameSubmit = (newSlug, opts) => __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)
-    );
+    yield renameTemplate(renameTarget.id, newSlug, opts);
+    const patch = (t) => {
+      var _a2;
+      return t.id === renameTarget.id ? __spreadProps(__spreadValues({}, t), { slug: newSlug, tags: (_a2 = opts == null ? void 0 : opts.tags) != null ? _a2 : t.tags }) : t;
+    };
+    setTemplates((prev) => prev.map(patch));
+    setSamples((prev) => prev.map(patch));
     if (currentTemplateId === renameTarget.id) {
       setCurrentTemplate(renameTarget.id, newSlug);
     }
-    showMessage("Template renamed");
+    showMessage("Details saved");
   });
   const flipKindLocally = (id, kind) => {
     setTemplates((prev) => prev.map((t) => t.id === id ? __spreadProps(__spreadValues({}, t), { kind }) : t));
@@ -5093,6 +5840,7 @@ function SamplesDrawer({
       showMessage("New template created!");
       window.location.hash = `#template/${id}`;
       yield refreshTemplates();
+      ensureRowPresent(id, slug, "template");
       return true;
     } catch (e) {
       console.error("Error creating template:", e);
@@ -5100,15 +5848,49 @@ function SamplesDrawer({
       return false;
     }
   });
-  const openNewTemplateDialog = () => {
-    setNewError(null);
-    setPendingSaveAs({ content: empty_email_message_default, defaultName: "New Template" });
+  const openNewPicker = (kind) => {
+    setPickerKind(kind);
   };
+  const handleCreateFromPicker = (name, starterId) => __async(null, null, function* () {
+    if (!saveAs) return false;
+    const kind = pickerKind != null ? pickerKind : "template";
+    try {
+      let content = empty_email_message_default;
+      if (starterId !== null) {
+        content = yield handleLoadTemplate(starterId);
+        if (!content) {
+          showMessage("Could not load the selected sample");
+          return false;
+        }
+      }
+      const { id, slug } = yield saveAs(name, buildSavePayload(content));
+      if (kind === "sample" && setTemplateKind) {
+        try {
+          yield setTemplateKind(id, "sample");
+          flipKindLocally(id, "sample");
+        } catch (e) {
+          console.error("Failed to mark new row as sample:", e);
+        }
+      }
+      resetDocument(content);
+      setCurrentTemplate(id, slug, kind);
+      ctxLoadTemplate(content, id, slug, kind);
+      showMessage(kind === "sample" ? "New sample created" : "New template created");
+      window.location.hash = `#template/${id}`;
+      yield refreshTemplates();
+      ensureRowPresent(id, slug, kind);
+      return true;
+    } catch (e) {
+      console.error("Error creating:", e);
+      showMessage("Error creating");
+      return false;
+    }
+  });
   if (!enabled) {
     return null;
   }
   const existingSlugs = templates.map((t) => t.slug);
-  return /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
     Drawer,
     {
       variant: "persistent",
@@ -5123,7 +5905,7 @@ function SamplesDrawer({
       transitionDuration: { enter: enterDuration, exit: exitDuration },
       sx: { width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0 }
     },
-    /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(
       Stack,
       {
         py: 1,
@@ -5133,27 +5915,39 @@ function SamplesDrawer({
         spacing: 1.5,
         sx: { overflowY: "auto" }
       },
-      /* @__PURE__ */ React58.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { pt: 1 } }, /* @__PURE__ */ React58.createElement(Typography, { variant: "h6", component: "h1" }, "Templates"), saveAs && /* @__PURE__ */ React58.createElement(Tooltip, { title: "New template" }, /* @__PURE__ */ React58.createElement(
+      /* @__PURE__ */ React62.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { pt: 1 } }, /* @__PURE__ */ React62.createElement(Typography, { variant: "h6", component: "h1" }, "Library"), saveAs && (activeLeftTab === "templates" || activeLeftTab === "samples") && /* @__PURE__ */ React62.createElement(Tooltip, { title: activeLeftTab === "samples" ? "New sample" : "New template" }, /* @__PURE__ */ React62.createElement(
         IconButton,
         {
           size: "small",
-          onClick: openNewTemplateDialog,
-          "aria-label": "New template"
+          onClick: () => openNewPicker(activeLeftTab === "samples" ? "sample" : "template"),
+          "aria-label": activeLeftTab === "samples" ? "New sample" : "New template"
         },
-        /* @__PURE__ */ React58.createElement(AddOutlined, { fontSize: "small" })
+        /* @__PURE__ */ React62.createElement(AddOutlined, { fontSize: "small" })
       ))),
-      loadTemplates && /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(
+      /* @__PURE__ */ React62.createElement(
+        Tabs,
+        {
+          value: activeLeftTab,
+          onChange: (_, v) => setActiveLeftTab(v),
+          variant: "fullWidth",
+          sx: { minHeight: 36, "& .MuiTab-root": { minHeight: 36, minWidth: 0, px: 1, fontSize: 13 } }
+        },
+        /* @__PURE__ */ React62.createElement(Tab, { value: "templates", label: "Templates", disabled: !loadTemplates }),
+        /* @__PURE__ */ React62.createElement(Tab, { value: "samples", label: "Samples" }),
+        /* @__PURE__ */ React62.createElement(Tab, { value: "outline", label: "Outline" })
+      ),
+      activeLeftTab === "outline" ? /* @__PURE__ */ React62.createElement(OutlinePanel, null) : /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
         TextField,
         {
           size: "small",
-          placeholder: "Search templates",
+          placeholder: activeLeftTab === "templates" ? "Search templates" : "Search samples",
           value: search,
           onChange: (e) => setSearch(e.target.value),
           InputProps: {
-            startAdornment: /* @__PURE__ */ React58.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React58.createElement(SearchOutlined, { fontSize: "small" }))
+            startAdornment: /* @__PURE__ */ React62.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React62.createElement(SearchOutlined, { fontSize: "small" }))
           }
         }
-      ), /* @__PURE__ */ React58.createElement(
+      ), /* @__PURE__ */ React62.createElement(
         TextField,
         {
           select: true,
@@ -5162,8 +5956,18 @@ function SamplesDrawer({
           value: sortKey,
           onChange: (e) => setSortKey(e.target.value)
         },
-        SORT_OPTIONS.map((opt) => /* @__PURE__ */ React58.createElement(MenuItem, { key: opt.value, value: opt.value }, opt.label))
-      ), allTags.length > 0 && /* @__PURE__ */ React58.createElement(Stack, { direction: "row", sx: { flexWrap: "wrap", gap: 0.5 } }, allTags.map((tag) => /* @__PURE__ */ React58.createElement(
+        SORT_OPTIONS.map((opt) => /* @__PURE__ */ React62.createElement(MenuItem, { key: opt.value, value: opt.value }, opt.label))
+      ), allTags.length > 0 && /* @__PURE__ */ React62.createElement(Stack, { direction: "row", sx: { flexWrap: "wrap", gap: 0.5 } }, /* @__PURE__ */ React62.createElement(
+        Chip,
+        {
+          label: "All",
+          size: "small",
+          clickable: true,
+          color: activeTags.length === 0 ? "primary" : "default",
+          variant: activeTags.length === 0 ? "filled" : "outlined",
+          onClick: () => setActiveTags([])
+        }
+      ), allTags.map((tag) => /* @__PURE__ */ React62.createElement(
         Chip,
         {
           key: tag,
@@ -5174,7 +5978,7 @@ function SamplesDrawer({
           variant: activeTags.includes(tag) ? "filled" : "outlined",
           onClick: () => toggleTag(tag)
         }
-      ))), /* @__PURE__ */ React58.createElement(Box, null, /* @__PURE__ */ React58.createElement(Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5 } }, "Your Templates"), loadingTemplates ? /* @__PURE__ */ React58.createElement(Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React58.createElement(CircularProgress, { size: 24 })) : templatesError ? /* @__PURE__ */ React58.createElement(Alert, { severity: "error", sx: { my: 1 } }, templatesError) : filteredTemplates.length > 0 ? /* @__PURE__ */ React58.createElement(Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredTemplates.map((template) => /* @__PURE__ */ React58.createElement(
+      ))), activeLeftTab === "templates" ? /* @__PURE__ */ React62.createElement(Box, null, loadingTemplates ? /* @__PURE__ */ React62.createElement(Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React62.createElement(CircularProgress, { size: 24 })) : templatesError ? /* @__PURE__ */ React62.createElement(Alert, { severity: "error", sx: { my: 1 } }, templatesError) : filteredTemplates.length > 0 ? /* @__PURE__ */ React62.createElement(Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredTemplates.map((template) => /* @__PURE__ */ React62.createElement(
         TemplateRow,
         {
           key: template.id,
@@ -5186,8 +5990,7 @@ function SamplesDrawer({
           onDelete: deleteTemplate ? () => handleDelete(template) : void 0,
           onPromote: setTemplateKind ? () => handleSetKind(template, "sample") : void 0
         }
-      ))) : /* @__PURE__ */ React58.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, templateRows.length === 0 ? "No saved templates yet" : "No templates match your filters")), /* @__PURE__ */ React58.createElement(Divider$1, null)),
-      /* @__PURE__ */ React58.createElement(Box, null, /* @__PURE__ */ React58.createElement(Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5 } }, "Sample Templates"), loadingSamples ? /* @__PURE__ */ React58.createElement(Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React58.createElement(CircularProgress, { size: 24 })) : sampleRows.length > 0 ? /* @__PURE__ */ React58.createElement(Stack, { spacing: 0.25, sx: { width: "100%" } }, sampleRows.map((sample) => /* @__PURE__ */ React58.createElement(
+      ))) : /* @__PURE__ */ React62.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, templateRows.length === 0 ? "No saved templates yet" : "No templates match your filters")) : /* @__PURE__ */ React62.createElement(Box, null, loadingSamples ? /* @__PURE__ */ React62.createElement(Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React62.createElement(CircularProgress, { size: 24 })) : filteredSamples.length > 0 ? /* @__PURE__ */ React62.createElement(Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredSamples.map((sample) => /* @__PURE__ */ React62.createElement(
         TemplateRow,
         {
           key: sample.id,
@@ -5195,20 +5998,23 @@ function SamplesDrawer({
           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
+          onRename: renameTemplate ? () => setRenameTarget(sample) : void 0,
+          onDelete: deleteTemplate ? () => handleDelete(sample) : void 0,
+          onDemote: setTemplateKind ? () => handleSetKind(sample, "template") : void 0
         }
-      ))) : /* @__PURE__ */ React58.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, "No samples available"))
+      ))) : /* @__PURE__ */ React62.createElement(Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, sampleRows.length === 0 ? "No samples available" : "No samples match your filters")))
     )
-  ), renameTarget && /* @__PURE__ */ React58.createElement(
+  ), renameTarget && /* @__PURE__ */ React62.createElement(
     RenameDialog,
     {
       open: !!renameTarget,
       currentSlug: renameTarget.slug,
+      currentTags: (_a = renameTarget.tags) != null ? _a : [],
       existingSlugs: existingSlugs.filter((s) => s !== renameTarget.slug),
       onClose: () => setRenameTarget(null),
       onSubmit: handleRenameSubmit
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     SaveTemplateDialog,
     {
       open: !!pendingSaveAs,
@@ -5218,9 +6024,19 @@ function SamplesDrawer({
       },
       onSave: handleSaveAsSubmit,
       onNameChange: () => setNewError(null),
-      defaultName: (_a = pendingSaveAs == null ? void 0 : pendingSaveAs.defaultName) != null ? _a : "New Template",
+      defaultName: (_b = pendingSaveAs == null ? void 0 : pendingSaveAs.defaultName) != null ? _b : "New Template",
       error: newError
     }
+  ), /* @__PURE__ */ React62.createElement(
+    NewTemplatePickerDialog,
+    {
+      open: pickerKind !== null,
+      kind: pickerKind != null ? pickerKind : "template",
+      samples: sampleRows,
+      existingSlugs: pickerKind === "sample" ? sampleRows.map((s) => s.slug) : templateRows.map((t) => t.slug),
+      onClose: () => setPickerKind(null),
+      onCreate: handleCreateFromPicker
+    }
   ));
 }
 var BUTTON_SX2 = { p: 1.5, display: "flex", flexDirection: "column" };
@@ -5235,7 +6051,7 @@ var ICON_SX = {
   borderColor: "cadet.300"
 };
 function BlockTypeButton({ label, icon, onClick }) {
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     Button$1,
     {
       sx: BUTTON_SX2,
@@ -5244,14 +6060,14 @@ function BlockTypeButton({ label, icon, onClick }) {
         onClick();
       }
     },
-    /* @__PURE__ */ React58.createElement(Box, { sx: ICON_SX }, icon),
-    /* @__PURE__ */ React58.createElement(Typography, { variant: "body2" }, label)
+    /* @__PURE__ */ React62.createElement(Box, { sx: ICON_SX }, icon),
+    /* @__PURE__ */ React62.createElement(Typography, { variant: "body2" }, label)
   );
 }
 var BUTTONS = [
   {
     label: "Heading",
-    icon: /* @__PURE__ */ React58.createElement(HMobiledataOutlined, null),
+    icon: /* @__PURE__ */ React62.createElement(HMobiledataOutlined, null),
     block: () => ({
       type: "Heading",
       data: {
@@ -5264,7 +6080,7 @@ var BUTTONS = [
   },
   {
     label: "Text",
-    icon: /* @__PURE__ */ React58.createElement(NotesOutlined, null),
+    icon: /* @__PURE__ */ React62.createElement(NotesOutlined, null),
     block: () => ({
       type: "Text",
       data: {
@@ -5278,7 +6094,7 @@ var BUTTONS = [
   },
   {
     label: "Button",
-    icon: /* @__PURE__ */ React58.createElement(SmartButtonOutlined, null),
+    icon: /* @__PURE__ */ React62.createElement(SmartButtonOutlined, null),
     block: () => ({
       type: "Button",
       data: {
@@ -5292,7 +6108,7 @@ var BUTTONS = [
   },
   {
     label: "Image",
-    icon: /* @__PURE__ */ React58.createElement(ImageOutlined, null),
+    icon: /* @__PURE__ */ React62.createElement(ImageOutlined, null),
     block: () => ({
       type: "Image",
       data: {
@@ -5308,7 +6124,7 @@ var BUTTONS = [
   },
   {
     label: "Avatar",
-    icon: /* @__PURE__ */ React58.createElement(AccountCircleOutlined, null),
+    icon: /* @__PURE__ */ React62.createElement(AccountCircleOutlined, null),
     block: () => ({
       type: "Avatar",
       data: {
@@ -5322,7 +6138,7 @@ var BUTTONS = [
   },
   {
     label: "Personal Signature",
-    icon: /* @__PURE__ */ React58.createElement(ContactMailOutlined, null),
+    icon: /* @__PURE__ */ React62.createElement(ContactMailOutlined, null),
     block: () => ({
       type: "Signature",
       data: {
@@ -5344,7 +6160,7 @@ var BUTTONS = [
   },
   {
     label: "Company Signature",
-    icon: /* @__PURE__ */ React58.createElement(BusinessOutlined, null),
+    icon: /* @__PURE__ */ React62.createElement(BusinessOutlined, null),
     block: () => ({
       type: "Signature",
       data: {
@@ -5364,7 +6180,7 @@ var BUTTONS = [
   },
   {
     label: "Divider",
-    icon: /* @__PURE__ */ React58.createElement(HorizontalRuleOutlined, null),
+    icon: /* @__PURE__ */ React62.createElement(HorizontalRuleOutlined, null),
     block: () => ({
       type: "Divider",
       data: {
@@ -5377,7 +6193,7 @@ var BUTTONS = [
   },
   {
     label: "Spacer",
-    icon: /* @__PURE__ */ React58.createElement(Crop32Outlined, null),
+    icon: /* @__PURE__ */ React62.createElement(Crop32Outlined, null),
     block: () => ({
       type: "Spacer",
       data: {}
@@ -5385,7 +6201,7 @@ var BUTTONS = [
   },
   {
     label: "Html",
-    icon: /* @__PURE__ */ React58.createElement(HtmlOutlined, null),
+    icon: /* @__PURE__ */ React62.createElement(HtmlOutlined, null),
     block: () => ({
       type: "Html",
       data: {
@@ -5400,7 +6216,7 @@ var BUTTONS = [
   },
   {
     label: "Columns",
-    icon: /* @__PURE__ */ React58.createElement(ViewColumnOutlined, null),
+    icon: /* @__PURE__ */ React62.createElement(ViewColumnOutlined, null),
     block: () => ({
       type: "ColumnsContainer",
       data: {
@@ -5415,7 +6231,7 @@ var BUTTONS = [
   },
   {
     label: "Container",
-    icon: /* @__PURE__ */ React58.createElement(LibraryAddOutlined, null),
+    icon: /* @__PURE__ */ React62.createElement(LibraryAddOutlined, null),
     block: () => ({
       type: "Container",
       data: {
@@ -5439,7 +6255,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
   if (anchorEl === null) {
     return null;
   }
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     Menu,
     {
       open: true,
@@ -5448,7 +6264,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
       transformOrigin: { vertical: "top", horizontal: "center" }
     },
-    /* @__PURE__ */ React58.createElement(Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React58.createElement(BlockTypeButton, { key: i, label: k.label, icon: k.icon, onClick: () => onClick(k.block()) })))
+    /* @__PURE__ */ React62.createElement(Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React62.createElement(BlockTypeButton, { key: i, label: k.label, icon: k.icon, onClick: () => onClick(k.block()) })))
   );
 }
 function DividerButton({ buttonElement, onClick }) {
@@ -5475,7 +6291,7 @@ function DividerButton({ buttonElement, onClick }) {
       window.removeEventListener("mousemove", listener);
     };
   }, [buttonElement, setVisible]);
-  return /* @__PURE__ */ React58.createElement(Fade, { in: visible }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(Fade, { in: visible }, /* @__PURE__ */ React62.createElement(
     IconButton,
     {
       size: "small",
@@ -5498,11 +6314,11 @@ function DividerButton({ buttonElement, onClick }) {
         onClick();
       }
     },
-    /* @__PURE__ */ React58.createElement(AddOutlined, { fontSize: "small" })
+    /* @__PURE__ */ React62.createElement(AddOutlined, { fontSize: "small" })
   ));
 }
 function PlaceholderButton({ onClick }) {
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     ButtonBase,
     {
       onClick: (ev) => {
@@ -5518,7 +6334,7 @@ function PlaceholderButton({ onClick }) {
         bgcolor: "rgba(0,0,0, 0.05)"
       }
     },
-    /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(
       AddOutlined,
       {
         sx: {
@@ -5542,19 +6358,29 @@ function AddBlockButton({ onSelect, placeholder }) {
   };
   const renderButton2 = () => {
     if (placeholder) {
-      return /* @__PURE__ */ React58.createElement(PlaceholderButton, { onClick: handleButtonClick });
+      return /* @__PURE__ */ React62.createElement(PlaceholderButton, { onClick: handleButtonClick });
     } else {
-      return /* @__PURE__ */ React58.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
+      return /* @__PURE__ */ React62.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
     }
   };
-  return /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton2()), /* @__PURE__ */ React58.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
+  return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton2()), /* @__PURE__ */ React62.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
+}
+var BlockParentContext = createContext(null);
+function BlockParentProvider({
+  info,
+  children
+}) {
+  return /* @__PURE__ */ React62.createElement(BlockParentContext.Provider, { value: info }, children);
+}
+function useBlockParent() {
+  return useContext(BlockParentContext);
 }
 
 // src/editor/blocks/helpers/editor-children-ids/index.tsx
 function generateId() {
   return `block-${Date.now()}`;
 }
-function EditorChildrenIds({ childrenIds, onChange }) {
+function EditorChildrenIds({ childrenIds, onChange, parentRef }) {
   const appendBlock = (block) => {
     const blockId = generateId();
     return onChange({
@@ -5574,9 +6400,62 @@ function EditorChildrenIds({ childrenIds, onChange }) {
     });
   };
   if (!childrenIds || childrenIds.length === 0) {
-    return /* @__PURE__ */ React58.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock });
+    return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock }), parentRef && /* @__PURE__ */ React62.createElement(CanvasDropZone, { parentRef, targetIndex: 0, placeholder: true }));
   }
-  return /* @__PURE__ */ React58.createElement(React58.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React58.createElement(Fragment, { key: childId }, /* @__PURE__ */ React58.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), /* @__PURE__ */ React58.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React58.createElement(AddBlockButton, { onSelect: appendBlock }));
+  return /* @__PURE__ */ React62.createElement(React62.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React62.createElement(Fragment, { key: childId }, /* @__PURE__ */ React62.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), parentRef && /* @__PURE__ */ React62.createElement(CanvasDropZone, { parentRef, targetIndex: i }), parentRef ? /* @__PURE__ */ React62.createElement(BlockParentProvider, { info: { parent: parentRef, indexInParent: i } }, /* @__PURE__ */ React62.createElement(EditorBlock, { id: childId })) : /* @__PURE__ */ React62.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React62.createElement(AddBlockButton, { onSelect: appendBlock }), parentRef && /* @__PURE__ */ React62.createElement(CanvasDropZone, { parentRef, targetIndex: childrenIds.length }));
+}
+function CanvasDropZone({
+  parentRef,
+  targetIndex,
+  placeholder = false
+}) {
+  const document2 = useDocument();
+  const dragging = useDraggingBlock();
+  const [over, setOver] = useState(false);
+  if (!dragging) return null;
+  if (isDescendant(document2, dragging.sourceId, parentRef.parentId)) return null;
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    setOver(true);
+  };
+  const handleDragLeave = () => setOver(false);
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setOver(false);
+    const payload = getDraggingBlock();
+    if (!payload) return;
+    const patch = buildMovePatch(
+      document2,
+      payload.sourceId,
+      payload.sourceParent,
+      parentRef,
+      targetIndex
+    );
+    if (patch) {
+      setDocument(patch);
+      setSelectedBlockId(payload.sourceId);
+    }
+    setDraggingBlock(null);
+  };
+  return /* @__PURE__ */ React62.createElement(
+    Box,
+    {
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      sx: {
+        height: placeholder ? 64 : over ? 16 : 8,
+        mx: placeholder ? 2 : 3,
+        my: placeholder ? 0 : over ? 0.5 : 0,
+        borderRadius: 1,
+        backgroundColor: over ? "rgba(25, 118, 210, 0.16)" : "transparent",
+        outline: over ? "1.5px dashed rgba(25, 118, 210, 0.8)" : void 0,
+        transition: "height 80ms, background-color 80ms, outline-color 80ms"
+      }
+    }
+  );
 }
 
 // src/editor/blocks/columns-container/columns-container-editor.tsx
@@ -5603,15 +6482,36 @@ function ColumnsContainerEditor({ style, props }) {
     });
     setSelectedBlockId(blockId);
   };
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     columns_container_default,
     {
       props: restProps,
       style,
       columns: [
-        /* @__PURE__ */ React58.createElement(EditorChildrenIds, { childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds, onChange: (change) => updateColumn(0, change) }),
-        /* @__PURE__ */ React58.createElement(EditorChildrenIds, { childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds, onChange: (change) => updateColumn(1, change) }),
-        /* @__PURE__ */ React58.createElement(EditorChildrenIds, { childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds, onChange: (change) => updateColumn(2, change) })
+        /* @__PURE__ */ React62.createElement(
+          EditorChildrenIds,
+          {
+            childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds,
+            parentRef: { kind: "ColumnsContainer", parentId: currentBlockId, columnIndex: 0 },
+            onChange: (change) => updateColumn(0, change)
+          }
+        ),
+        /* @__PURE__ */ React62.createElement(
+          EditorChildrenIds,
+          {
+            childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds,
+            parentRef: { kind: "ColumnsContainer", parentId: currentBlockId, columnIndex: 1 },
+            onChange: (change) => updateColumn(1, change)
+          }
+        ),
+        /* @__PURE__ */ React62.createElement(
+          EditorChildrenIds,
+          {
+            childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds,
+            parentRef: { kind: "ColumnsContainer", parentId: currentBlockId, columnIndex: 2 },
+            onChange: (change) => updateColumn(2, change)
+          }
+        )
       ]
     }
   );
@@ -5621,10 +6521,11 @@ function ContainerEditor({ style, props }) {
   const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
   const document2 = useDocument();
   const currentBlockId = useCurrentBlockId();
-  return /* @__PURE__ */ React58.createElement(container_default, { style }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(container_default, { style }, /* @__PURE__ */ React62.createElement(
     EditorChildrenIds,
     {
       childrenIds,
+      parentRef: { kind: "Container", parentId: currentBlockId },
       onChange: ({ block, blockId, childrenIds: childrenIds2 }) => {
         setDocument({
           [blockId]: block,
@@ -5821,10 +6722,11 @@ function EmailLayoutEditor(props) {
     lineHeight: "1.5",
     margin: "0"
   };
-  const editorChildren = /* @__PURE__ */ React58.createElement(
+  const editorChildren = /* @__PURE__ */ React62.createElement(
     EditorChildrenIds,
     {
       childrenIds,
+      parentRef: { kind: "EmailLayout", parentId: "root" },
       onChange: ({ block, blockId, childrenIds: childrenIds2 }) => {
         setDocument({
           [blockId]: block,
@@ -5839,61 +6741,87 @@ function EmailLayoutEditor(props) {
       }
     }
   );
+  const WORKSPACE_BG = "#e7e8ec";
+  const CARD_MAX_WIDTH = 664;
+  const cardStyle = {
+    maxWidth: CARD_MAX_WIDTH,
+    margin: "0 auto",
+    borderRadius: 12,
+    boxShadow: "0 1px 2px rgba(33, 36, 67, 0.05), 0 8px 24px rgba(33, 36, 67, 0.08)"
+  };
   if (props.backdropDisabled) {
-    return /* @__PURE__ */ React58.createElement(
+    return /* @__PURE__ */ React62.createElement(
       "div",
       {
         onClick: () => {
           setSelectedBlockId(null);
         },
         style: __spreadProps(__spreadValues({}, baseStyle), {
-          backgroundColor: "#F5F5F5",
+          backgroundColor: WORKSPACE_BG,
           padding: "32px",
           width: "100%",
           minHeight: "100%"
         })
       },
-      /* @__PURE__ */ React58.createElement("div", { style: { maxWidth: "600px" } }, editorChildren)
+      /* @__PURE__ */ React62.createElement(
+        "div",
+        {
+          style: __spreadProps(__spreadValues({}, cardStyle), {
+            backgroundColor: "#F5F5F5",
+            padding: "32px"
+          })
+        },
+        /* @__PURE__ */ React62.createElement("div", { style: { maxWidth: "600px", margin: "0 auto" } }, editorChildren)
+      )
     );
   }
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     "div",
     {
       onClick: () => {
         setSelectedBlockId(null);
       },
       style: __spreadProps(__spreadValues({}, baseStyle), {
-        backgroundColor: (_c = props.backdropColor) != null ? _c : "#F5F5F5",
-        padding: "32px 0",
+        backgroundColor: WORKSPACE_BG,
+        padding: "32px 16px",
         width: "100%",
         minHeight: "100%"
       })
     },
-    /* @__PURE__ */ React58.createElement(
-      "table",
+    /* @__PURE__ */ React62.createElement(
+      "div",
       {
-        align: "center",
-        width: "100%",
-        style: {
-          margin: "0 auto",
-          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) {
-              return void 0;
-            }
-            return `1px solid ${v}`;
-          })()
-        },
-        role: "presentation",
-        cellSpacing: "0",
-        cellPadding: "0",
-        border: 0
+        style: __spreadProps(__spreadValues({}, cardStyle), {
+          backgroundColor: (_c = props.backdropColor) != null ? _c : "#F5F5F5",
+          padding: "32px 0"
+        })
       },
-      /* @__PURE__ */ React58.createElement("tbody", null, /* @__PURE__ */ React58.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React58.createElement("td", null, editorChildren)))
+      /* @__PURE__ */ React62.createElement(
+        "table",
+        {
+          align: "center",
+          width: "100%",
+          style: {
+            margin: "0 auto",
+            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) {
+                return void 0;
+              }
+              return `1px solid ${v}`;
+            })()
+          },
+          role: "presentation",
+          cellSpacing: "0",
+          cellPadding: "0",
+          border: 0
+        },
+        /* @__PURE__ */ React62.createElement("tbody", null, /* @__PURE__ */ React62.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React62.createElement("td", null, editorChildren)))
+      )
     )
   );
 }
@@ -6052,34 +6980,54 @@ function TuneMenu({ blockId }) {
     resetDocument(nDocument);
     setSelectedBlockId(blockId);
   };
-  return /* @__PURE__ */ React58.createElement(Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React58.createElement(Stack, null, /* @__PURE__ */ React58.createElement(Tooltip, { title: "Move up", placement: "left-start" }, /* @__PURE__ */ React58.createElement(IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React58.createElement(ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React58.createElement(Tooltip, { title: "Move down", placement: "left-start" }, /* @__PURE__ */ React58.createElement(IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React58.createElement(ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React58.createElement(Tooltip, { title: "Copy block", placement: "left-start" }, /* @__PURE__ */ React58.createElement(IconButton, { onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React58.createElement(ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React58.createElement(Tooltip, { title: "Delete", placement: "left-start" }, /* @__PURE__ */ React58.createElement(IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React58.createElement(DeleteOutlined, { fontSize: "small" })))));
+  return /* @__PURE__ */ React62.createElement(Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React62.createElement(Stack, null, /* @__PURE__ */ React62.createElement(Tooltip, { title: "Move up", placement: "left-start" }, /* @__PURE__ */ React62.createElement(IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React62.createElement(ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React62.createElement(Tooltip, { title: "Move down", placement: "left-start" }, /* @__PURE__ */ React62.createElement(IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React62.createElement(ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React62.createElement(Tooltip, { title: "Copy block", placement: "left-start" }, /* @__PURE__ */ React62.createElement(IconButton, { onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React62.createElement(ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React62.createElement(Tooltip, { title: "Delete", placement: "left-start" }, /* @__PURE__ */ React62.createElement(IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React62.createElement(DeleteOutlined, { fontSize: "small" })))));
 }
 
 // src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
 function EditorBlockWrapper({ children }) {
   const selectedBlockId = useSelectedBlockId();
+  const hoveredBlockId = useHoveredBlockId();
+  const draggingBlock = useDraggingBlock();
+  const blockParent = useBlockParent();
   const [mouseInside, setMouseInside] = useState(false);
   const blockId = useCurrentBlockId();
+  const isBeingDragged = (draggingBlock == null ? void 0 : draggingBlock.sourceId) === blockId;
   let outline;
   if (selectedBlockId === blockId) {
     outline = "2px solid rgba(0,121,204, 1)";
-  } else if (mouseInside) {
+  } else if (mouseInside && !draggingBlock || hoveredBlockId === blockId) {
     outline = "2px solid rgba(0,121,204, 0.3)";
   }
   const renderMenu = () => {
     if (selectedBlockId !== blockId) {
       return null;
     }
-    return /* @__PURE__ */ React58.createElement(TuneMenu, { blockId });
+    return /* @__PURE__ */ React62.createElement(TuneMenu, { blockId });
+  };
+  const draggable = Boolean(blockParent) && selectedBlockId !== blockId;
+  const handleDragStart = (e) => {
+    if (!blockParent) return;
+    e.stopPropagation();
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", blockId);
+    setDraggingBlock({ sourceId: blockId, sourceParent: blockParent.parent });
+  };
+  const handleDragEnd = () => {
+    setDraggingBlock(null);
   };
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     Box,
     {
+      draggable,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
       sx: {
         position: "relative",
         maxWidth: "100%",
         outlineOffset: "-1px",
-        outline
+        outline,
+        opacity: isBeingDragged ? 0.4 : 1,
+        cursor: draggable ? draggingBlock ? "grabbing" : "default" : "default"
       },
       onMouseEnter: (ev) => {
         setMouseInside(true);
@@ -6212,7 +7160,7 @@ function ButtonEditor({ style, props }) {
         selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
       });
     };
-    return /* @__PURE__ */ React58.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React58.createElement(
+    return /* @__PURE__ */ React62.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React62.createElement(
       "input",
       {
         type: "text",
@@ -6229,7 +7177,7 @@ function ButtonEditor({ style, props }) {
       }
     ));
   }
-  return /* @__PURE__ */ React58.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React58.createElement("span", { style: linkStyle }, /* @__PURE__ */ React58.createElement("span", null, text)));
+  return /* @__PURE__ */ React62.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React62.createElement("span", { style: linkStyle }, /* @__PURE__ */ React62.createElement("span", null, text)));
 }
 function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
   const textareaRef = useRef(null);
@@ -6373,7 +7321,7 @@ function InlineFormattingToolbar({
     }
   }, [linkPrompt]);
   const preventBlur = (e) => e.preventDefault();
-  return /* @__PURE__ */ React58.createElement(Popper, { open: visible, anchorEl, placement: "top-start", style: { zIndex: 1300 } }, /* @__PURE__ */ React58.createElement(Paper, { elevation: 4, sx: { px: 0.5, py: 0.25, mb: 0.5 }, onMouseDown: preventBlur }, linkPrompt ? /* @__PURE__ */ React58.createElement(Stack, { direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.5 } }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(Popper, { open: visible, anchorEl, placement: "top-start", style: { zIndex: 1300 } }, /* @__PURE__ */ React62.createElement(Paper, { elevation: 4, sx: { px: 0.5, py: 0.25, mb: 0.5 }, onMouseDown: preventBlur }, linkPrompt ? /* @__PURE__ */ React62.createElement(Stack, { direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.5 } }, /* @__PURE__ */ React62.createElement(
     TextField,
     {
       inputRef,
@@ -6395,7 +7343,7 @@ function InlineFormattingToolbar({
       },
       sx: { width: 220 }
     }
-  )) : /* @__PURE__ */ React58.createElement(Stack, { direction: "row", spacing: 0.25 }, /* @__PURE__ */ React58.createElement(IconButton, { size: "small", onClick: onBold, title: "Bold (Cmd+B)", "aria-label": "Bold" }, /* @__PURE__ */ React58.createElement(FormatBoldOutlined, { fontSize: "small" })), /* @__PURE__ */ React58.createElement(IconButton, { size: "small", onClick: onItalic, title: "Italic (Cmd+I)", "aria-label": "Italic" }, /* @__PURE__ */ React58.createElement(FormatItalicOutlined, { fontSize: "small" })), /* @__PURE__ */ React58.createElement(IconButton, { size: "small", onClick: onLinkRequest, title: "Link (Cmd+K)", "aria-label": "Link" }, /* @__PURE__ */ React58.createElement(LinkOutlined, { fontSize: "small" })))));
+  )) : /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 0.25 }, /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onBold, title: "Bold (Cmd+B)", "aria-label": "Bold" }, /* @__PURE__ */ React62.createElement(FormatBoldOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onItalic, title: "Italic (Cmd+I)", "aria-label": "Italic" }, /* @__PURE__ */ React62.createElement(FormatItalicOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onLinkRequest, title: "Link (Cmd+K)", "aria-label": "Link" }, /* @__PURE__ */ React62.createElement(LinkOutlined, { fontSize: "small" })))));
 }
 
 // src/editor/blocks/heading/heading-editor.tsx
@@ -6550,7 +7498,7 @@ function HeadingEditor({ style, props }) {
     if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
   }, [localText, isSelected]);
   if (isSelected) {
-    return /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(
+    return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
       "textarea",
       {
         ref: textareaRef,
@@ -6568,7 +7516,7 @@ function HeadingEditor({ style, props }) {
         rows: 1,
         onInput: (e) => adjustTextareaHeight(e.target)
       }
-    ), /* @__PURE__ */ React58.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
+    ), /* @__PURE__ */ React62.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
   }
   const headingProps = isMarkdown ? {
     ref: displayRef,
@@ -6577,11 +7525,11 @@ function HeadingEditor({ style, props }) {
   } : { ref: displayRef, style: hStyle, children: textContent };
   switch (level) {
     case "h1":
-      return /* @__PURE__ */ React58.createElement("h1", __spreadValues({}, headingProps));
+      return /* @__PURE__ */ React62.createElement("h1", __spreadValues({}, headingProps));
     case "h2":
-      return /* @__PURE__ */ React58.createElement("h2", __spreadValues({}, headingProps));
+      return /* @__PURE__ */ React62.createElement("h2", __spreadValues({}, headingProps));
     case "h3":
-      return /* @__PURE__ */ React58.createElement("h3", __spreadValues({}, headingProps));
+      return /* @__PURE__ */ React62.createElement("h3", __spreadValues({}, headingProps));
   }
 }
 function HtmlEditor({ style, props }) {
@@ -6646,7 +7594,7 @@ function HtmlEditor({ style, props }) {
         selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
       });
     };
-    return /* @__PURE__ */ React58.createElement("div", { style: cssStyle }, /* @__PURE__ */ React58.createElement(
+    return /* @__PURE__ */ React62.createElement("div", { style: cssStyle }, /* @__PURE__ */ React62.createElement(
       "textarea",
       {
         value: localContents,
@@ -6666,9 +7614,9 @@ function HtmlEditor({ style, props }) {
     ));
   }
   if (!contents) {
-    return /* @__PURE__ */ React58.createElement("div", { style: cssStyle });
+    return /* @__PURE__ */ React62.createElement("div", { style: cssStyle });
   }
-  return /* @__PURE__ */ React58.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
+  return /* @__PURE__ */ React62.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
 }
 function getImageBorderRadius2(shape, size) {
   switch (shape) {
@@ -6783,7 +7731,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__ */ React58.createElement(
+  const imageElement = imageUrl ? /* @__PURE__ */ React62.createElement(
     "img",
     {
       src: imageUrl,
@@ -6801,7 +7749,7 @@ function SignatureEditor({ style, props }) {
       }
     }
   ) : null;
-  const greetingElement = isSelected ? /* @__PURE__ */ React58.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React58.createElement(
+  const greetingElement = isSelected ? /* @__PURE__ */ React62.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React62.createElement(
     "input",
     {
       value: localGreeting,
@@ -6812,8 +7760,8 @@ function SignatureEditor({ style, props }) {
       placeholder: "Greeting (e.g. Best regards,)",
       style: __spreadValues(__spreadValues({}, inputBase), greetingStyle)
     }
-  )) : greeting ? /* @__PURE__ */ React58.createElement("p", { style: greetingStyle }, greeting) : null;
-  const textContent = isSelected ? /* @__PURE__ */ React58.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React58.createElement(
+  )) : greeting ? /* @__PURE__ */ React62.createElement("p", { style: greetingStyle }, greeting) : null;
+  const textContent = isSelected ? /* @__PURE__ */ React62.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React62.createElement(
     "input",
     {
       value: localName,
@@ -6824,7 +7772,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Name",
       style: __spreadValues(__spreadValues({}, inputBase), nameStyle)
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     "input",
     {
       value: localTitle,
@@ -6835,7 +7783,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Title",
       style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     "input",
     {
       value: localCompany,
@@ -6846,7 +7794,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Company",
       style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     "input",
     {
       value: localAddress,
@@ -6857,7 +7805,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Address",
       style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     "input",
     {
       value: localEmail,
@@ -6868,7 +7816,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Email",
       style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { marginTop: 4, display: "block" })
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     "input",
     {
       value: localPhone,
@@ -6879,7 +7827,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Phone",
       style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     "input",
     {
       value: localWebsite,
@@ -6890,11 +7838,11 @@ function SignatureEditor({ style, props }) {
       placeholder: "Website",
       style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
     }
-  )) : /* @__PURE__ */ React58.createElement("div", null, name && /* @__PURE__ */ React58.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React58.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React58.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React58.createElement("p", { style: detailStyle }, address), (email || phone || website) && /* @__PURE__ */ React58.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, email && /* @__PURE__ */ React58.createElement("span", { style: linkStyle }, email), email && (phone || website) && /* @__PURE__ */ React58.createElement("span", { style: detailStyle }, " \xB7 "), phone && /* @__PURE__ */ React58.createElement("span", { style: linkStyle }, phone), phone && website && /* @__PURE__ */ React58.createElement("span", { style: detailStyle }, " \xB7 "), website && /* @__PURE__ */ React58.createElement("span", { style: linkStyle }, website)), !name && !title && !company && !email && !phone && !website && /* @__PURE__ */ React58.createElement("p", { style: detailStyle }, "Click to edit signature"));
+  )) : /* @__PURE__ */ React62.createElement("div", null, name && /* @__PURE__ */ React62.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React62.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React62.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React62.createElement("p", { style: detailStyle }, address), (email || phone || website) && /* @__PURE__ */ React62.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, email && /* @__PURE__ */ React62.createElement("span", { style: linkStyle }, email), email && (phone || website) && /* @__PURE__ */ React62.createElement("span", { style: detailStyle }, " \xB7 "), phone && /* @__PURE__ */ React62.createElement("span", { style: linkStyle }, phone), phone && website && /* @__PURE__ */ React62.createElement("span", { style: detailStyle }, " \xB7 "), website && /* @__PURE__ */ React62.createElement("span", { style: linkStyle }, website)), !name && !title && !company && !email && !phone && !website && /* @__PURE__ */ React62.createElement("p", { style: detailStyle }, "Click to edit signature"));
   if (layout === "vertical") {
-    return /* @__PURE__ */ React58.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React58.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
+    return /* @__PURE__ */ React62.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React62.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
   }
-  return /* @__PURE__ */ React58.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React58.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React58.createElement("tbody", null, /* @__PURE__ */ React58.createElement("tr", null, imageElement && /* @__PURE__ */ React58.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React58.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
+  return /* @__PURE__ */ React62.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React62.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React62.createElement("tbody", null, /* @__PURE__ */ React62.createElement("tr", null, imageElement && /* @__PURE__ */ React62.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React62.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
 }
 function getFontFamily10(fontFamily) {
   switch (fontFamily) {
@@ -7038,7 +7986,7 @@ function TextEditor({ style, props }) {
     if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
   }, [localText, isSelected]);
   if (isSelected) {
-    return /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(
+    return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
       "textarea",
       {
         ref: textareaRef,
@@ -7056,10 +8004,10 @@ function TextEditor({ style, props }) {
         rows: 1,
         onInput: (e) => adjustTextareaHeight(e.target)
       }
-    ), /* @__PURE__ */ React58.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
+    ), /* @__PURE__ */ React62.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
   }
   if (isMarkdown) {
-    return /* @__PURE__ */ React58.createElement(
+    return /* @__PURE__ */ React62.createElement(
       "div",
       {
         ref: displayRef,
@@ -7068,34 +8016,34 @@ function TextEditor({ style, props }) {
       }
     );
   }
-  return /* @__PURE__ */ React58.createElement("div", { ref: displayRef, style: wStyle }, textContent);
+  return /* @__PURE__ */ React62.createElement("div", { ref: displayRef, style: wStyle }, textContent);
 }
 
 // src/editor/core.tsx
 var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
   Avatar: {
     schema: AvatarPropsSchema,
-    Component: (props) => /* @__PURE__ */ React58.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58.createElement(avatar_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(avatar_default, __spreadValues({}, props)))
   },
   Button: {
     schema: ButtonPropsSchema,
-    Component: (props) => /* @__PURE__ */ React58.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58.createElement(ButtonEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(ButtonEditor, __spreadValues({}, props)))
   },
   Container: {
     schema: container_props_schema_default,
-    Component: (props) => /* @__PURE__ */ React58.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58.createElement(ContainerEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(ContainerEditor, __spreadValues({}, props)))
   },
   ColumnsContainer: {
     schema: columns_container_props_schema_default2,
-    Component: (props) => /* @__PURE__ */ React58.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
   },
   Heading: {
     schema: HeadingPropsSchema,
-    Component: (props) => /* @__PURE__ */ React58.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58.createElement(HeadingEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(HeadingEditor, __spreadValues({}, props)))
   },
   Html: {
     schema: HtmlPropsSchema,
-    Component: (props) => /* @__PURE__ */ React58.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58.createElement(HtmlEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(HtmlEditor, __spreadValues({}, props)))
   },
   Image: {
     schema: ImagePropsSchema,
@@ -7107,28 +8055,28 @@ var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
           linkHref: null
         })
       });
-      return /* @__PURE__ */ React58.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58.createElement(image_default, __spreadValues({}, props)));
+      return /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(image_default, __spreadValues({}, props)));
     }
   },
   Text: {
     schema: TextPropsSchema,
-    Component: (props) => /* @__PURE__ */ React58.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58.createElement(TextEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(TextEditor, __spreadValues({}, props)))
   },
   EmailLayout: {
     schema: email_layout_props_schema_default,
-    Component: (p) => /* @__PURE__ */ React58.createElement(EmailLayoutEditor, __spreadValues({}, p))
+    Component: (p) => /* @__PURE__ */ React62.createElement(EmailLayoutEditor, __spreadValues({}, p))
   },
   Spacer: {
     schema: SpacerPropsSchema,
-    Component: (props) => /* @__PURE__ */ React58.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58.createElement(spacer_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(spacer_default, __spreadValues({}, props)))
   },
   Divider: {
     schema: DividerPropsSchema,
-    Component: (props) => /* @__PURE__ */ React58.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58.createElement(divider_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(divider_default, __spreadValues({}, props)))
   },
   Signature: {
     schema: SignaturePropsSchema,
-    Component: (props) => /* @__PURE__ */ React58.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58.createElement(SignatureEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React62.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React62.createElement(SignatureEditor, __spreadValues({}, props)))
   }
 });
 var EditorBlock2 = buildBlockComponent(EDITOR_DICTIONARY);
@@ -7144,7 +8092,7 @@ function EditorBlock({ id }) {
   if (!block) {
     throw new Error("Could not find block");
   }
-  return /* @__PURE__ */ React58.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React58.createElement(EditorBlock2, __spreadValues({}, block)));
+  return /* @__PURE__ */ React62.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React62.createElement(EditorBlock2, __spreadValues({}, block)));
 }
 function ToggleInspectorPanelButton() {
   const inspectorDrawerOpen = useInspectorDrawerOpen();
@@ -7152,20 +8100,20 @@ function ToggleInspectorPanelButton() {
     toggleInspectorDrawerOpen();
   };
   if (inspectorDrawerOpen) {
-    return /* @__PURE__ */ React58.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React58.createElement(LastPageOutlined, { fontSize: "small" }));
+    return /* @__PURE__ */ React62.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React62.createElement(LastPageOutlined, { fontSize: "small" }));
   }
-  return /* @__PURE__ */ React58.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React58.createElement(AppRegistrationOutlined, { fontSize: "small" }));
+  return /* @__PURE__ */ React62.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React62.createElement(AppRegistrationOutlined, { fontSize: "small" }));
 }
 function useIcon() {
   const samplesDrawerOpen = useSamplesDrawerOpen();
   if (samplesDrawerOpen) {
-    return /* @__PURE__ */ React58.createElement(FirstPageOutlined, { fontSize: "small" });
+    return /* @__PURE__ */ React62.createElement(FirstPageOutlined, { fontSize: "small" });
   }
-  return /* @__PURE__ */ React58.createElement(MenuOutlined, { fontSize: "small" });
+  return /* @__PURE__ */ React62.createElement(MenuOutlined, { fontSize: "small" });
 }
 function ToggleSamplesPanelButton() {
   const icon = useIcon();
-  return /* @__PURE__ */ React58.createElement(IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
+  return /* @__PURE__ */ React62.createElement(IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
 }
 function formatHtml(html2, spaces = 2) {
   try {
@@ -7227,7 +8175,7 @@ function HighlightedCodePanel({ type, value }) {
   if (code === null) {
     return null;
   }
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     "pre",
     {
       style: {
@@ -7253,17 +8201,17 @@ function HighlightedCodePanel({ type, value }) {
 function HtmlPanel() {
   const document2 = useDocument();
   const code = useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
-  return /* @__PURE__ */ React58.createElement(HighlightedCodePanel, { type: "html", value: code });
+  return /* @__PURE__ */ React62.createElement(HighlightedCodePanel, { type: "html", value: code });
 }
 function JsonPanel() {
   const document2 = useDocument();
   const code = useMemo(() => JSON.stringify(document2, null, "  "), [document2]);
-  return /* @__PURE__ */ React58.createElement(HighlightedCodePanel, { type: "json", value: code });
+  return /* @__PURE__ */ React62.createElement(HighlightedCodePanel, { type: "json", value: code });
 }
 function TextPanel() {
   const document2 = useDocument();
   const text = useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     "pre",
     {
       style: {
@@ -7299,185 +8247,184 @@ function MainTabsGroup() {
         setSelectedMainTab("editor");
     }
   };
-  return /* @__PURE__ */ React58.createElement(Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React62.createElement(
     Tab,
     {
       value: "editor",
-      label: /* @__PURE__ */ React58.createElement(Tooltip, { title: "Edit" }, /* @__PURE__ */ React58.createElement(EditOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React62.createElement(Tooltip, { title: "Edit" }, /* @__PURE__ */ React62.createElement(EditOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     Tab,
     {
       value: "preview",
-      label: /* @__PURE__ */ React58.createElement(Tooltip, { title: "Preview" }, /* @__PURE__ */ React58.createElement(PreviewOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React62.createElement(Tooltip, { title: "Preview" }, /* @__PURE__ */ React62.createElement(PreviewOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     Tab,
     {
       value: "html",
-      label: /* @__PURE__ */ React58.createElement(Tooltip, { title: "HTML output" }, /* @__PURE__ */ React58.createElement(CodeOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React62.createElement(Tooltip, { title: "HTML output" }, /* @__PURE__ */ React62.createElement(CodeOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     Tab,
     {
       value: "text",
-      label: /* @__PURE__ */ React58.createElement(Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React58.createElement(SubjectOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React62.createElement(Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React62.createElement(SubjectOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     Tab,
     {
       value: "json",
-      label: /* @__PURE__ */ React58.createElement(Tooltip, { title: "JSON output" }, /* @__PURE__ */ React58.createElement(DataObjectOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React62.createElement(Tooltip, { title: "JSON output" }, /* @__PURE__ */ React62.createElement(DataObjectOutlined, { fontSize: "small" }))
     }
   ));
 }
-function SaveButton({ loadTemplates, saveAs }) {
-  const { saveTemplate, currentTemplateId, currentTemplateKind, setCurrentTemplate } = useEmailEditor();
+function SaveBar({ loadTemplates, saveAs }) {
+  const {
+    saveTemplate,
+    currentTemplateId,
+    currentTemplateName,
+    currentTemplateKind,
+    setCurrentTemplate,
+    loadTemplate: ctxLoadTemplate
+  } = useEmailEditor();
   const { showMessage } = useSnackbar();
-  const [saveDialogOpen, setSaveDialogOpen] = useState(false);
   const document2 = useDocument();
+  const [dialogMode, setDialogMode] = useState(null);
+  const [nameError, setNameError] = useState(null);
+  const hasOpenRow = Boolean(currentTemplateId);
   const isSample = currentTemplateKind === "sample";
-  const handleSave = () => __async(null, null, function* () {
+  const primaryLabel = hasOpenRow ? "Save" : "Save as new\u2026";
+  const handlePrimary = () => __async(null, null, function* () {
     try {
-      if (!currentTemplateId || isSample) {
-        setSaveDialogOpen(true);
+      if (!hasOpenRow) {
+        setNameError(null);
+        setDialogMode("save-as");
         return;
       }
       saveTemplate();
-      showMessage("Template saved successfully!");
-      if (loadTemplates) {
-        yield loadTemplates();
-      }
-    } catch (error) {
-      console.error("Error saving template:", error);
-      showMessage("Error saving template");
+      showMessage(isSample ? "Sample saved" : "Template saved");
+      if (loadTemplates) yield loadTemplates();
+    } catch (e) {
+      console.error("Error saving:", e);
+      showMessage("Error saving");
     }
   });
-  const handleSaveAs = (templateName) => __async(null, null, function* () {
+  const handleSaveAs = (name) => __async(null, null, function* () {
+    if (!saveAs) return false;
     try {
-      if (saveAs) {
-        const { id: templateId, slug } = yield saveAs(templateName, buildSavePayload(document2));
-        setCurrentTemplate(templateId, slug, "template");
-        if (loadTemplates) {
-          yield loadTemplates();
-        }
-        showMessage("Template saved successfully!");
-        setSaveDialogOpen(false);
-        window.location.hash = `#template/${templateId}`;
-        return true;
-      }
-      return false;
-    } catch (error) {
-      console.error("Error saving template:", error);
-      showMessage("Error saving template");
+      const starterContent = dialogMode === "new-blank" ? empty_email_message_default : document2;
+      const { id, slug } = yield saveAs(name, buildSavePayload(starterContent));
+      resetDocument(starterContent);
+      setCurrentTemplate(id, slug, "template");
+      ctxLoadTemplate(starterContent, id, slug, "template");
+      if (loadTemplates) yield loadTemplates();
+      showMessage(dialogMode === "new-blank" ? "New template created" : "Template saved");
+      window.location.hash = `#template/${id}`;
+      return true;
+    } catch (e) {
+      console.error("Error in saveAs:", e);
+      showMessage("Error saving");
       return false;
     }
   });
-  return /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(
-    IconButton,
+  return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
+    Box,
     {
-      onClick: handleSave,
       sx: {
-        backgroundColor: "grey.100",
-        "&:hover": {
-          backgroundColor: "grey.200"
-        }
+        position: "sticky",
+        bottom: 0,
+        display: "flex",
+        justifyContent: "center",
+        pointerEvents: "none",
+        zIndex: 2,
+        pb: 3
       }
     },
-    /* @__PURE__ */ React58.createElement(Tooltip, { title: isSample ? "Save as new template" : "Save template" }, /* @__PURE__ */ React58.createElement(SaveOutlined, { fontSize: "small" }))
-  ), /* @__PURE__ */ React58.createElement(
-    SaveTemplateDialog,
-    {
-      open: saveDialogOpen,
-      onClose: () => setSaveDialogOpen(false),
-      onSave: handleSaveAs,
-      defaultName: isSample ? "New Template" : "New Template"
-    }
-  ));
-}
-function NewTemplateButton({ loadTemplates, saveAs }) {
-  const { setCurrentTemplate, loadTemplate } = useEmailEditor();
-  const { showMessage } = useSnackbar();
-  const [saveDialogOpen, setSaveDialogOpen] = useState(false);
-  const [templates, setTemplates] = useState([]);
-  const [nameError, setNameError] = useState(null);
-  const fetchTemplates = () => __async(null, null, function* () {
-    if (loadTemplates) {
-      try {
-        const result = yield loadTemplates();
-        setTemplates(result);
-        return result;
-      } catch (error) {
-        console.error("Error loading templates:", error);
-      }
-    }
-    return [];
-  });
-  const handleNewTemplate = () => __async(null, null, function* () {
-    yield fetchTemplates();
-    setNameError(null);
-    setSaveDialogOpen(true);
-  });
-  const validateTemplateName = (name) => {
-    const nameExists = templates.some(
-      (template) => template.slug.toLowerCase() === name.toLowerCase()
-    );
-    if (nameExists) {
-      setNameError("A template with this name already exists");
-      return false;
-    }
-    setNameError(null);
-    return true;
-  };
-  const handleNameChange = () => {
-    setNameError(null);
-  };
-  const handleCreateTemplate = (templateName) => __async(null, null, function* () {
-    if (!validateTemplateName(templateName)) {
-      return false;
-    }
-    try {
-      if (saveAs) {
-        const { id: templateId, slug } = yield saveAs(templateName, buildSavePayload(empty_email_message_default));
-        resetDocument(empty_email_message_default);
-        setCurrentTemplate(templateId, slug, "template");
-        loadTemplate(empty_email_message_default, templateId, slug, "template");
-        if (loadTemplates) {
-          yield loadTemplates();
-        }
-        showMessage("New template created!");
-        window.location.hash = `#template/${templateId}`;
-        return true;
-      }
-    } catch (error) {
-      console.error("Error creating template:", error);
-      showMessage("Error creating template");
-    }
-    return false;
-  });
-  return /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(
-    IconButton,
-    {
-      onClick: handleNewTemplate,
-      sx: {
-        backgroundColor: "grey.100",
-        "&:hover": {
-          backgroundColor: "grey.200"
+    /* @__PURE__ */ React62.createElement(
+      Box,
+      {
+        sx: {
+          pointerEvents: "auto",
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 1.25,
+          px: 2,
+          py: 1.25,
+          backgroundColor: "background.paper",
+          borderRadius: 999,
+          boxShadow: "0 2px 6px rgba(33, 36, 67, 0.06), 0 16px 40px rgba(33, 36, 67, 0.14)"
         }
-      }
-    },
-    /* @__PURE__ */ React58.createElement(Tooltip, { title: "New template" }, /* @__PURE__ */ React58.createElement(Add, { fontSize: "small" }))
-  ), /* @__PURE__ */ React58.createElement(
+      },
+      hasOpenRow && currentTemplateName && /* @__PURE__ */ React62.createElement(
+        Box,
+        {
+          sx: {
+            pl: 1,
+            pr: 1,
+            fontSize: 14,
+            color: "text.secondary",
+            maxWidth: 220,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          },
+          title: currentTemplateName
+        },
+        isSample ? "Sample \xB7 " : "",
+        /* @__PURE__ */ React62.createElement(Box, { component: "span", sx: { color: "text.primary", fontWeight: 600 } }, currentTemplateName)
+      ),
+      /* @__PURE__ */ React62.createElement(Tooltip, { title: hasOpenRow ? `Save changes${isSample ? " to this sample" : ""}` : "Save as a new template" }, /* @__PURE__ */ React62.createElement(
+        Button$1,
+        {
+          variant: "contained",
+          size: "large",
+          startIcon: /* @__PURE__ */ React62.createElement(SaveOutlined, null),
+          onClick: handlePrimary,
+          sx: { borderRadius: 999, textTransform: "none", px: 2.5, fontSize: 15, fontWeight: 600 }
+        },
+        primaryLabel
+      )),
+      hasOpenRow && saveAs && /* @__PURE__ */ React62.createElement(Tooltip, { title: "Save as a new template" }, /* @__PURE__ */ React62.createElement(
+        Button$1,
+        {
+          variant: "outlined",
+          size: "large",
+          startIcon: /* @__PURE__ */ React62.createElement(SaveAsOutlined, null),
+          onClick: () => {
+            setNameError(null);
+            setDialogMode("save-as");
+          },
+          sx: { borderRadius: 999, textTransform: "none", px: 2, fontSize: 14 }
+        },
+        "Save as\u2026"
+      )),
+      saveAs && /* @__PURE__ */ React62.createElement(Tooltip, { title: "Start a fresh template" }, /* @__PURE__ */ React62.createElement(
+        Button$1,
+        {
+          variant: "text",
+          size: "large",
+          startIcon: /* @__PURE__ */ React62.createElement(AddOutlined, null),
+          onClick: () => {
+            setNameError(null);
+            setDialogMode("new-blank");
+          },
+          sx: { borderRadius: 999, textTransform: "none", px: 2, fontSize: 14, color: "text.secondary" }
+        },
+        "New"
+      ))
+    )
+  ), /* @__PURE__ */ React62.createElement(
     SaveTemplateDialog,
     {
-      open: saveDialogOpen,
+      open: dialogMode !== null,
       onClose: () => {
-        setSaveDialogOpen(false);
+        setDialogMode(null);
         setNameError(null);
       },
-      onSave: handleCreateTemplate,
-      onNameChange: handleNameChange,
-      defaultName: "New Template",
+      onSave: handleSaveAs,
+      onNameChange: () => setNameError(null),
+      defaultName: dialogMode === "new-blank" ? "New Template" : currentTemplateName ? `${currentTemplateName} (Copy)` : "New Template",
       error: nameError
     }
   ));
@@ -7505,7 +8452,7 @@ function SubjectInput() {
       selectionEnd: (_b = target.selectionEnd) != null ? _b : target.value.length
     });
   };
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     Box,
     {
       sx: {
@@ -7522,8 +8469,8 @@ function SubjectInput() {
         gap: 1.5
       }
     },
-    /* @__PURE__ */ React58.createElement(Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
-    /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
+    /* @__PURE__ */ React62.createElement(
       InputBase,
       {
         fullWidth: true,
@@ -7549,7 +8496,7 @@ function SubjectPreview() {
   if (!subject) return null;
   const samples = buildSampleValueMap((_b = data.variables) != null ? _b : []);
   const rendered = substituteSampleValues(subject, samples);
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     Box,
     {
       sx: {
@@ -7566,8 +8513,8 @@ function SubjectPreview() {
         gap: 1.5
       }
     },
-    /* @__PURE__ */ React58.createElement(Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
-    /* @__PURE__ */ React58.createElement(Box, { sx: { fontSize: 14 } }, rendered)
+    /* @__PURE__ */ React62.createElement(Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
+    /* @__PURE__ */ React62.createElement(Box, { sx: { fontSize: 14 } }, rendered)
   );
 }
 function generateId3() {
@@ -7640,7 +8587,7 @@ function ImageDropPasteHandler({ enabled, children }) {
     window.addEventListener("paste", handlePaste);
     return () => window.removeEventListener("paste", handlePaste);
   }, [active, uploadImage]);
-  if (!active) return /* @__PURE__ */ React58.createElement(React58.Fragment, null, children);
+  if (!active) return /* @__PURE__ */ React62.createElement(React62.Fragment, null, children);
   const onDragEnter = (e) => {
     var _a, _b;
     if (!Array.from((_b = (_a = e.dataTransfer) == null ? void 0 : _a.items) != null ? _b : []).some((i) => i.kind === "file")) return;
@@ -7673,7 +8620,7 @@ function ImageDropPasteHandler({ enabled, children }) {
       setUploading(false);
     }
   });
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(
     Box,
     {
       ref: wrapperRef,
@@ -7684,7 +8631,7 @@ function ImageDropPasteHandler({ enabled, children }) {
       sx: { position: "relative" }
     },
     children,
-    (dragging || uploading) && /* @__PURE__ */ React58.createElement(
+    (dragging || uploading) && /* @__PURE__ */ React62.createElement(
       Box,
       {
         sx: {
@@ -7703,17 +8650,20 @@ function ImageDropPasteHandler({ enabled, children }) {
           zIndex: 10
         }
       },
-      /* @__PURE__ */ React58.createElement(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontWeight: 600, fontSize: 14 } }, /* @__PURE__ */ React58.createElement(CloudUploadOutlined, null), uploading ? "Uploading\u2026" : "Drop image to insert")
+      /* @__PURE__ */ React62.createElement(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontWeight: 600, fontSize: 14 } }, /* @__PURE__ */ React62.createElement(CloudUploadOutlined, null), uploading ? "Uploading\u2026" : "Drop image to insert")
     )
   );
 }
 
 // src/app/email-canvas/index.tsx
+var WORKSPACE_SOLID = "#e7e8ec";
+var WORKSPACE_CHECKERBOARD = "repeating-conic-gradient(#eceef2 0% 25%, #dfe1e6 0% 50%) 50% / 24px 24px";
 function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true }) {
   const document2 = useDocument();
   const selectedMainTab = useSelectedMainTab();
   const selectedScreenSize = useSelectedScreenSize();
   const persistenceEnabled = usePersistenceEnabled();
+  const workspaceBackground = useWorkspaceBackground();
   let mainBoxSx = {
     height: "100%"
   };
@@ -7740,7 +8690,7 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
     var _a;
     switch (selectedMainTab) {
       case "editor":
-        return /* @__PURE__ */ React58.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React58.createElement(EditorBlock, { id: "root" }));
+        return /* @__PURE__ */ React62.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React62.createElement(EditorBlock, { id: "root" }));
       case "preview": {
         const rootBlock = document2.root;
         const layoutData = rootBlock && rootBlock.type === "EmailLayout" ? rootBlock.data : void 0;
@@ -7748,18 +8698,18 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
           (_a = layoutData == null ? void 0 : layoutData.variables) != null ? _a : []
         );
         const previewDoc = applySampleValuesToDocument(document2, samples);
-        return /* @__PURE__ */ React58.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React58.createElement(Reader, { document: previewDoc, rootBlockId: "root" }));
+        return /* @__PURE__ */ React62.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React62.createElement(Reader, { document: previewDoc, rootBlockId: "root" }));
       }
       case "html":
-        return /* @__PURE__ */ React58.createElement(HtmlPanel, null);
+        return /* @__PURE__ */ React62.createElement(HtmlPanel, null);
       case "text":
-        return /* @__PURE__ */ React58.createElement(TextPanel, null);
+        return /* @__PURE__ */ React62.createElement(TextPanel, null);
       case "json":
-        return /* @__PURE__ */ React58.createElement(JsonPanel, null);
+        return /* @__PURE__ */ React62.createElement(JsonPanel, null);
     }
   };
   const showSaveButtons = persistenceEnabled;
-  return /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(
     Stack,
     {
       sx: {
@@ -7776,13 +8726,28 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
       justifyContent: "space-between",
       alignItems: "center"
     },
-    samplesDrawerEnabled && /* @__PURE__ */ React58.createElement(ToggleSamplesPanelButton, null),
-    /* @__PURE__ */ React58.createElement(Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React58.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React58.createElement(MainTabsGroup, null)), /* @__PURE__ */ React58.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React58.createElement(ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React58.createElement(ToggleButton, { value: "desktop" }, /* @__PURE__ */ React58.createElement(Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React58.createElement(MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React58.createElement(ToggleButton, { value: "mobile" }, /* @__PURE__ */ React58.createElement(Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React58.createElement(PhoneIphoneOutlined, { fontSize: "small" })))), showSaveButtons && /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(NewTemplateButton, { loadTemplates, saveAs }), /* @__PURE__ */ React58.createElement(SaveButton, { loadTemplates, saveAs })))),
-    /* @__PURE__ */ React58.createElement(ToggleInspectorPanelButton, null)
-  ), selectedMainTab === "editor" && /* @__PURE__ */ React58.createElement(SubjectInput, null), selectedMainTab === "preview" && /* @__PURE__ */ React58.createElement(SubjectPreview, null), /* @__PURE__ */ React58.createElement(ImageDropPasteHandler, { enabled: selectedMainTab === "editor" }, /* @__PURE__ */ React58.createElement(Box, { sx: {
-    paddingBottom: "50px",
-    minWidth: 370
-  } }, renderMainPanel())));
+    samplesDrawerEnabled && /* @__PURE__ */ React62.createElement(ToggleSamplesPanelButton, null),
+    /* @__PURE__ */ React62.createElement(Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React62.createElement(MainTabsGroup, null)), /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React62.createElement(ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React62.createElement(ToggleButton, { value: "desktop" }, /* @__PURE__ */ React62.createElement(Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React62.createElement(MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React62.createElement(ToggleButton, { value: "mobile" }, /* @__PURE__ */ React62.createElement(Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React62.createElement(PhoneIphoneOutlined, { fontSize: "small" })))))),
+    /* @__PURE__ */ React62.createElement(ToggleInspectorPanelButton, null)
+  ), selectedMainTab === "editor" && /* @__PURE__ */ React62.createElement(SubjectInput, null), selectedMainTab === "preview" && /* @__PURE__ */ React62.createElement(SubjectPreview, null), /* @__PURE__ */ React62.createElement(ImageDropPasteHandler, { enabled: selectedMainTab === "editor" }, /* @__PURE__ */ React62.createElement(
+    Box,
+    {
+      sx: {
+        flexGrow: 1,
+        display: "flex",
+        flexDirection: "column",
+        paddingBottom: "16px",
+        minWidth: 370,
+        // Fills to the bottom of the viewport in editor mode so the
+        // workspace gray doesn't end midway under a short email.
+        // 49px toolbar + 49px subject bar = 98px fixed chrome above.
+        minHeight: selectedMainTab === "editor" ? "calc(100vh - 98px)" : void 0,
+        background: selectedMainTab === "editor" ? workspaceBackground === "checkerboard" ? WORKSPACE_CHECKERBOARD : WORKSPACE_SOLID : void 0
+      }
+    },
+    /* @__PURE__ */ React62.createElement(Box, { sx: { flexGrow: 1 } }, renderMainPanel()),
+    showSaveButtons && selectedMainTab === "editor" && /* @__PURE__ */ React62.createElement(SaveBar, { loadTemplates, saveAs })
+  )));
 }
 
 // src/app/index.tsx
@@ -7863,7 +8828,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
       return getDocument();
     }
   }));
-  return /* @__PURE__ */ React58.createElement(Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React62.createElement(
     InspectorDrawer,
     {
       enterDuration: drawerEnterDuration,
@@ -7871,7 +8836,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
       deleteTemplate,
       copyTemplate
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     SamplesDrawer,
     {
       enterDuration: drawerEnterDuration,
@@ -7887,7 +8852,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
       setTemplateKind,
       saveAs
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React62.createElement(
     Stack,
     {
       sx: {
@@ -7896,7 +8861,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
         transition: [marginLeftTransition, marginRightTransition].join(", ")
       }
     },
-    /* @__PURE__ */ React58.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
+    /* @__PURE__ */ React62.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
   ));
 });
 var EmailEditor = forwardRef((props, ref) => {
@@ -7940,7 +8905,7 @@ var EmailEditor = forwardRef((props, ref) => {
     () => ({ uploadImage, loadImages, deleteImage }),
     [uploadImage, loadImages, deleteImage]
   );
-  return /* @__PURE__ */ React58.createElement(ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React58.createElement(CssBaseline, null), /* @__PURE__ */ React58.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React58.createElement(SnackbarProvider, null, /* @__PURE__ */ React58.createElement(ImageCallbacksProvider, { callbacks: imageCallbacks }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React62.createElement(ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React62.createElement(CssBaseline, null), /* @__PURE__ */ React62.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React62.createElement(SnackbarProvider, null, /* @__PURE__ */ React62.createElement(ImageCallbacksProvider, { callbacks: imageCallbacks }, /* @__PURE__ */ React62.createElement(
     EmailEditorProvider,
     {
       initialTemplate: resolvedTemplate,
@@ -7949,7 +8914,7 @@ var EmailEditor = forwardRef((props, ref) => {
       onSave,
       onChange
     },
-    /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React62.createElement(
       EmailEditorInternal,
       {
         ref,
@@ -7973,6 +8938,6 @@ var EmailEditor = forwardRef((props, ref) => {
 EmailEditor.displayName = "EmailEditor";
 EmailEditorInternal.displayName = "EmailEditorInternal";
 
-export { avatar_default as Avatar, AvatarProps, AvatarPropsDefaults, AvatarPropsSchema, BlockConfiguration, button_default as Button, ButtonProps, ButtonPropsDefaults, ButtonPropsSchema, columns_container_default as ColumnsContainer, ColumnsContainerProps, ColumnsContainerPropsSchema, ColumnsContainerReader, container_default as Container, ContainerProps, ContainerPropsSchema, ContainerReader, divider_default as Divider, DividerProps, DividerPropsDefaults, DividerPropsSchema, DocumentBlocksDictionary, EmailEditor, EmailEditorProvider, EmailLayoutPropsSchema, EmailLayoutReader, EmailMarkdown, heading_default as Heading, HeadingProps, HeadingPropsDefaults, HeadingPropsSchema, html_default as Html, HtmlProps, HtmlPropsSchema, image_default as Image, ImageProps, ImagePropsSchema, Reader, ReaderBlock, ReaderBlockSchema, ReaderDocumentSchema, signature_default as Signature, SignatureProps, SignaturePropsDefaults, SignaturePropsSchema, spacer_default as Spacer, SpacerProps, SpacerPropsDefaults, SpacerPropsSchema, TemplateVariableSchema, Text, TextProps, TextPropsDefaults, TextPropsSchema, buildBlockComponent, buildBlockConfigurationDictionary, buildBlockConfigurationSchema, htmlToEditorConfig, renderToStaticMarkup, renderToText, theme_default as theme, useEmailEditor };
+export { avatar_default as Avatar, AvatarProps, AvatarPropsDefaults, AvatarPropsSchema, BlockConfiguration, button_default as Button, ButtonProps, ButtonPropsDefaults, ButtonPropsSchema, columns_container_default as ColumnsContainer, ColumnsContainerProps, ColumnsContainerPropsSchema, ColumnsContainerReader, container_default as Container, ContainerProps, ContainerPropsSchema, ContainerReader, divider_default as Divider, DividerProps, DividerPropsDefaults, DividerPropsSchema, DocumentBlocksDictionary, EmailEditor, EmailEditorProvider, EmailLayoutPropsSchema, EmailLayoutReader, EmailMarkdown, heading_default as Heading, HeadingProps, HeadingPropsDefaults, HeadingPropsSchema, html_default as Html, HtmlProps, HtmlPropsSchema, image_default as Image, ImageProps, ImagePropsSchema, Reader, ReaderBlock, ReaderBlockSchema, ReaderDocumentSchema, signature_default as Signature, SignatureProps, SignaturePropsDefaults, SignaturePropsSchema, spacer_default as Spacer, SpacerProps, SpacerPropsDefaults, SpacerPropsSchema, TemplateVariableSchema, Text, TextProps, TextPropsDefaults, TextPropsSchema, buildBlockComponent, buildBlockConfigurationDictionary, buildBlockConfigurationSchema, editorHandlebars, evaluateHandlebars, htmlToEditorConfig, renderToStaticMarkup, renderToText, theme_default as theme, useEmailEditor };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map