@kontakto/email-template-editor 2.0.0 → 2.1.0

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var DOMPurify = require('dompurify');
 var marked = require('marked');
-var React60 = require('react');
+var React58 = require('react');
 var zod = require('zod');
 var server = require('react-dom/server');
 var styles = require('@mui/material/styles');
@@ -18,7 +18,7 @@ var htmlfy = require('htmlfy');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
-var React60__default = /*#__PURE__*/_interopDefault(React60);
+var React58__default = /*#__PURE__*/_interopDefault(React58);
 var hljs__default = /*#__PURE__*/_interopDefault(hljs);
 var jsonHighlighter__default = /*#__PURE__*/_interopDefault(jsonHighlighter);
 var xmlHighlighter__default = /*#__PURE__*/_interopDefault(xmlHighlighter);
@@ -168,8 +168,8 @@ function renderMarkdownString(str) {
 }
 function EmailMarkdown(_a) {
   var _b = _a, { markdown } = _b, props = __objRest(_b, ["markdown"]);
-  const data = React60.useMemo(() => renderMarkdownString(markdown), [markdown]);
-  return /* @__PURE__ */ React60__default.default.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
+  const data = React58.useMemo(() => renderMarkdownString(markdown), [markdown]);
+  return /* @__PURE__ */ React58__default.default.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
 }
 var FONT_FAMILY_SCHEMA = zod.z.enum([
   "MODERN_SANS",
@@ -220,6 +220,8 @@ var TextPropsSchema = zod.z.object({
     fontSize: zod.z.number().gte(0).optional().nullable(),
     fontFamily: FONT_FAMILY_SCHEMA,
     fontWeight: zod.z.enum(["bold", "normal"]).optional().nullable(),
+    lineHeight: zod.z.number().gte(0).optional().nullable(),
+    letterSpacing: zod.z.number().optional().nullable(),
     textAlign: zod.z.enum(["left", "center", "right"]).optional().nullable(),
     padding: PADDING_SCHEMA
   }).optional().nullable(),
@@ -233,21 +235,23 @@ var TextPropsDefaults = {
   text: ""
 };
 function Text({ style, props }) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g;
   const wStyle = {
     color: (_a = style == null ? void 0 : style.color) != null ? _a : void 0,
     backgroundColor: (_b = style == null ? void 0 : style.backgroundColor) != null ? _b : void 0,
     fontSize: (_c = style == null ? void 0 : style.fontSize) != null ? _c : void 0,
     fontFamily: getFontFamily(style == null ? void 0 : style.fontFamily),
     fontWeight: (_d = style == null ? void 0 : style.fontWeight) != null ? _d : void 0,
-    textAlign: (_e = style == null ? void 0 : style.textAlign) != null ? _e : void 0,
+    lineHeight: (_e = style == null ? void 0 : style.lineHeight) != null ? _e : void 0,
+    letterSpacing: (style == null ? void 0 : style.letterSpacing) != null ? `${style.letterSpacing}px` : void 0,
+    textAlign: (_f = style == null ? void 0 : style.textAlign) != null ? _f : void 0,
     padding: getPadding(style == null ? void 0 : style.padding)
   };
-  const text = (_f = props == null ? void 0 : props.text) != null ? _f : TextPropsDefaults.text;
+  const text = (_g = props == null ? void 0 : props.text) != null ? _g : TextPropsDefaults.text;
   if (props == null ? void 0 : props.markdown) {
-    return /* @__PURE__ */ React60__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: text });
+    return /* @__PURE__ */ React58__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: text });
   }
-  return /* @__PURE__ */ React60__default.default.createElement("div", { style: wStyle }, text);
+  return /* @__PURE__ */ React58__default.default.createElement("div", { style: wStyle }, text);
 }
 var PADDING_SCHEMA2 = zod.z.object({
   top: zod.z.number(),
@@ -296,7 +300,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__ */ React60__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React58__default.default.createElement(
     "img",
     {
       alt,
@@ -368,6 +372,8 @@ var ButtonPropsSchema = zod.z.object({
     fontSize: zod.z.number().min(0).optional().nullable(),
     fontFamily: FONT_FAMILY_SCHEMA2,
     fontWeight: zod.z.enum(["bold", "normal"]).optional().nullable(),
+    lineHeight: zod.z.number().gte(0).optional().nullable(),
+    letterSpacing: zod.z.number().optional().nullable(),
     textAlign: zod.z.enum(["left", "center", "right"]).optional().nullable(),
     padding: PADDING_SCHEMA3
   }).optional().nullable(),
@@ -420,7 +426,7 @@ var ButtonPropsDefaults = {
   buttonBackgroundColor: "#999999"
 };
 function Button({ style, props }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const text = (_a = props == null ? void 0 : props.text) != null ? _a : ButtonPropsDefaults.text;
   const url = (_b = props == null ? void 0 : props.url) != null ? _b : ButtonPropsDefaults.url;
   const fullWidth = (_c = props == null ? void 0 : props.fullWidth) != null ? _c : ButtonPropsDefaults.fullWidth;
@@ -438,20 +444,22 @@ function Button({ style, props }) {
     fontSize: (_h = style == null ? void 0 : style.fontSize) != null ? _h : 16,
     fontFamily: getFontFamily2(style == null ? void 0 : style.fontFamily),
     fontWeight: (_i = style == null ? void 0 : style.fontWeight) != null ? _i : "bold",
+    lineHeight: (_j = style == null ? void 0 : style.lineHeight) != null ? _j : void 0,
+    letterSpacing: (style == null ? void 0 : style.letterSpacing) != null ? `${style.letterSpacing}px` : void 0,
     backgroundColor: buttonBackgroundColor,
     borderRadius: getRoundedCorners(props),
     display: fullWidth ? "block" : "inline-block",
     padding: `${padding[0]}px ${padding[1]}px`,
     textDecoration: "none"
   };
-  return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React60__default.default.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React58__default.default.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React58__default.default.createElement(
     "span",
     {
       dangerouslySetInnerHTML: {
         __html: `<!--[if mso]><i style="letter-spacing: ${padding[1]}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`
       }
     }
-  ), /* @__PURE__ */ React60__default.default.createElement("span", null, text), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement("span", null, text), /* @__PURE__ */ React58__default.default.createElement(
     "span",
     {
       dangerouslySetInnerHTML: {
@@ -500,7 +508,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__ */ React60__default.default.createElement("div", { style: wStyle }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement("div", { style: wStyle }, /* @__PURE__ */ React58__default.default.createElement(
     "table",
     {
       align: "center",
@@ -509,7 +517,7 @@ function ColumnsContainer({ style, columns, props }) {
       border: 0,
       style: { tableLayout: "fixed", borderCollapse: "collapse" }
     },
-    /* @__PURE__ */ React60__default.default.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React60__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React60__default.default.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React60__default.default.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React60__default.default.createElement(TableCell, { index: 2, props: blockProps, columns })))
+    /* @__PURE__ */ React58__default.default.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React58__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React58__default.default.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React58__default.default.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React58__default.default.createElement(TableCell, { index: 2, props: blockProps, columns })))
   ));
 }
 function TableCell({ index, props, columns }) {
@@ -527,7 +535,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__ */ React60__default.default.createElement("td", { style }, children);
+  return /* @__PURE__ */ React58__default.default.createElement("td", { style }, children);
 }
 function getPaddingBefore(index, { columnsGap, columnsCount }) {
   if (index === 0) {
@@ -589,9 +597,9 @@ function Container({ style, children }) {
     padding: getPadding5(style == null ? void 0 : style.padding)
   };
   if (!children) {
-    return /* @__PURE__ */ React60__default.default.createElement("div", { style: wStyle });
+    return /* @__PURE__ */ React58__default.default.createElement("div", { style: wStyle });
   }
-  return /* @__PURE__ */ React60__default.default.createElement("div", { style: wStyle }, children);
+  return /* @__PURE__ */ React58__default.default.createElement("div", { style: wStyle }, children);
 }
 var container_default = Container;
 var COLOR_SCHEMA5 = zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
@@ -625,7 +633,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__ */ React60__default.default.createElement("div", { style: st }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement("div", { style: st }, /* @__PURE__ */ React58__default.default.createElement(
     "hr",
     {
       style: {
@@ -690,6 +698,8 @@ var HeadingPropsSchema = zod.z.object({
     backgroundColor: COLOR_SCHEMA6,
     fontFamily: FONT_FAMILY_SCHEMA3,
     fontWeight: zod.z.enum(["bold", "normal"]).optional().nullable(),
+    lineHeight: zod.z.number().gte(0).optional().nullable(),
+    letterSpacing: zod.z.number().optional().nullable(),
     textAlign: zod.z.enum(["left", "center", "right"]).optional().nullable(),
     padding: PADDING_SCHEMA7
   }).optional().nullable()
@@ -700,14 +710,16 @@ var HeadingPropsDefaults = {
   text: ""
 };
 function Heading({ props, style }) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g;
   const level = (_a = props == null ? void 0 : props.level) != null ? _a : HeadingPropsDefaults.level;
   const text = (_b = props == null ? void 0 : props.text) != null ? _b : HeadingPropsDefaults.text;
   const hStyle = {
     color: (_c = style == null ? void 0 : style.color) != null ? _c : void 0,
     backgroundColor: (_d = style == null ? void 0 : style.backgroundColor) != null ? _d : void 0,
     fontWeight: (_e = style == null ? void 0 : style.fontWeight) != null ? _e : "bold",
-    textAlign: (_f = style == null ? void 0 : style.textAlign) != null ? _f : void 0,
+    lineHeight: (_f = style == null ? void 0 : style.lineHeight) != null ? _f : void 0,
+    letterSpacing: (style == null ? void 0 : style.letterSpacing) != null ? `${style.letterSpacing}px` : void 0,
+    textAlign: (_g = style == null ? void 0 : style.textAlign) != null ? _g : void 0,
     margin: 0,
     fontFamily: getFontFamily3(style == null ? void 0 : style.fontFamily),
     fontSize: getFontSize(level),
@@ -715,11 +727,11 @@ function Heading({ props, style }) {
   };
   switch (level) {
     case "h1":
-      return /* @__PURE__ */ React60__default.default.createElement("h1", { style: hStyle }, text);
+      return /* @__PURE__ */ React58__default.default.createElement("h1", { style: hStyle }, text);
     case "h2":
-      return /* @__PURE__ */ React60__default.default.createElement("h2", { style: hStyle }, text);
+      return /* @__PURE__ */ React58__default.default.createElement("h2", { style: hStyle }, text);
     case "h3":
-      return /* @__PURE__ */ React60__default.default.createElement("h3", { style: hStyle }, text);
+      return /* @__PURE__ */ React58__default.default.createElement("h3", { style: hStyle }, text);
   }
 }
 function getFontSize(level) {
@@ -801,9 +813,9 @@ function Html({ style, props }) {
     padding: getPadding8(style == null ? void 0 : style.padding)
   };
   if (!children) {
-    return /* @__PURE__ */ React60__default.default.createElement("div", { style: cssStyle });
+    return /* @__PURE__ */ React58__default.default.createElement("div", { style: cssStyle });
   }
-  return /* @__PURE__ */ React60__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
+  return /* @__PURE__ */ React58__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
 }
 var html_default = Html;
 var PADDING_SCHEMA9 = zod.z.object({
@@ -839,7 +851,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__ */ React60__default.default.createElement(
+  const imageElement = /* @__PURE__ */ React58__default.default.createElement(
     "img",
     {
       alt: (_f = props == null ? void 0 : props.alt) != null ? _f : "",
@@ -859,9 +871,9 @@ function Image({ style, props }) {
     }
   );
   if (!linkHref) {
-    return /* @__PURE__ */ React60__default.default.createElement("div", { style: sectionStyle }, imageElement);
+    return /* @__PURE__ */ React58__default.default.createElement("div", { style: sectionStyle }, imageElement);
   }
-  return /* @__PURE__ */ React60__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React60__default.default.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
+  return /* @__PURE__ */ React58__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React58__default.default.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
 }
 var image_default = Image;
 var FONT_FAMILY_SCHEMA5 = zod.z.enum([
@@ -1007,7 +1019,7 @@ function Signature({ style, props }) {
     color: linkColor,
     textDecoration: "none"
   };
-  const imageElement = imageUrl ? /* @__PURE__ */ React60__default.default.createElement(
+  const imageElement = imageUrl ? /* @__PURE__ */ React58__default.default.createElement(
     "img",
     {
       src: imageUrl,
@@ -1026,18 +1038,18 @@ function Signature({ style, props }) {
     }
   ) : null;
   const contactParts = [];
-  if (email) contactParts.push(/* @__PURE__ */ React60__default.default.createElement("a", { key: "email", href: `mailto:${email}`, style: linkStyle }, email));
-  if (phone) contactParts.push(/* @__PURE__ */ React60__default.default.createElement("a", { key: "phone", href: `tel:${phone}`, style: linkStyle }, phone));
+  if (email) contactParts.push(/* @__PURE__ */ React58__default.default.createElement("a", { key: "email", href: `mailto:${email}`, style: linkStyle }, email));
+  if (phone) contactParts.push(/* @__PURE__ */ React58__default.default.createElement("a", { key: "phone", href: `tel:${phone}`, style: linkStyle }, phone));
   if (website) {
     const href = website.startsWith("http") ? website : `https://${website}`;
-    contactParts.push(/* @__PURE__ */ React60__default.default.createElement("a", { key: "website", href, style: linkStyle, target: "_blank" }, website));
+    contactParts.push(/* @__PURE__ */ React58__default.default.createElement("a", { key: "website", href, style: linkStyle, target: "_blank" }, website));
   }
-  const textContent = /* @__PURE__ */ React60__default.default.createElement("div", null, name && /* @__PURE__ */ React60__default.default.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, address), contactParts.length > 0 && /* @__PURE__ */ React60__default.default.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, contactParts.map((part, i) => /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, { key: i }, i > 0 && /* @__PURE__ */ React60__default.default.createElement("span", { style: detailStyle }, " \xB7 "), part))));
-  const greetingElement = greeting ? /* @__PURE__ */ React60__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
+  const textContent = /* @__PURE__ */ React58__default.default.createElement("div", null, name && /* @__PURE__ */ React58__default.default.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React58__default.default.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React58__default.default.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React58__default.default.createElement("p", { style: detailStyle }, address), contactParts.length > 0 && /* @__PURE__ */ React58__default.default.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, contactParts.map((part, i) => /* @__PURE__ */ React58__default.default.createElement(React58__default.default.Fragment, { key: i }, i > 0 && /* @__PURE__ */ React58__default.default.createElement("span", { style: detailStyle }, " \xB7 "), part))));
+  const greetingElement = greeting ? /* @__PURE__ */ React58__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
   if (layout === "vertical") {
-    return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React60__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
+    return /* @__PURE__ */ React58__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React58__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
   }
-  return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React60__default.default.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React60__default.default.createElement("tbody", null, /* @__PURE__ */ React60__default.default.createElement("tr", null, imageElement && /* @__PURE__ */ React60__default.default.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React60__default.default.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
+  return /* @__PURE__ */ React58__default.default.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React58__default.default.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React58__default.default.createElement("tbody", null, /* @__PURE__ */ React58__default.default.createElement("tr", null, imageElement && /* @__PURE__ */ React58__default.default.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React58__default.default.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
 }
 var signature_default = Signature;
 var SpacerPropsSchema = zod.z.object({
@@ -1054,13 +1066,13 @@ function Spacer({ props }) {
   const style = {
     height: (_a = props == null ? void 0 : props.height) != null ? _a : SpacerPropsDefaults.height
   };
-  return /* @__PURE__ */ React60__default.default.createElement("div", { style });
+  return /* @__PURE__ */ React58__default.default.createElement("div", { style });
 }
 var spacer_default = Spacer;
 function buildBlockComponent(blocks) {
   return function BlockComponent({ type, data }) {
     const Component = blocks[type].Component;
-    return /* @__PURE__ */ React60__default.default.createElement(Component, __spreadValues({}, data));
+    return /* @__PURE__ */ React58__default.default.createElement(Component, __spreadValues({}, data));
   };
 }
 function buildBlockConfigurationSchema(blocks) {
@@ -1097,9 +1109,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__ */ React60__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
+    cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ React58__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
   }
-  return /* @__PURE__ */ React60__default.default.createElement(columns_container_default, { props: restProps, columns: cols, style });
+  return /* @__PURE__ */ React58__default.default.createElement(columns_container_default, { props: restProps, columns: cols, style });
 }
 var ContainerPropsSchema2 = zod.z.object({
   style: ContainerPropsSchema.shape.style,
@@ -1110,7 +1122,7 @@ var ContainerPropsSchema2 = zod.z.object({
 function ContainerReader({ style, props }) {
   var _a;
   const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
-  return /* @__PURE__ */ React60__default.default.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React60__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
+  return /* @__PURE__ */ React58__default.default.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React58__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
 }
 var COLOR_SCHEMA9 = zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
 var FONT_FAMILY_SCHEMA6 = zod.z.enum([
@@ -1126,7 +1138,8 @@ var FONT_FAMILY_SCHEMA6 = zod.z.enum([
 ]).nullable().optional();
 var TemplateVariableSchema = zod.z.object({
   name: zod.z.string(),
-  description: zod.z.string().optional().nullable()
+  description: zod.z.string().optional().nullable(),
+  sampleValue: zod.z.string().optional().nullable()
 });
 var EmailLayoutPropsSchema = zod.z.object({
   backdropColor: COLOR_SCHEMA9,
@@ -1182,9 +1195,9 @@ function EmailLayoutReader(props) {
     margin: "0"
   };
   if (props.backdropDisabled) {
-    return /* @__PURE__ */ React60__default.default.createElement("div", { style: baseStyle }, childrenIds.map((childId) => /* @__PURE__ */ React60__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
+    return /* @__PURE__ */ React58__default.default.createElement("div", { style: baseStyle }, childrenIds.map((childId) => /* @__PURE__ */ React58__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
   }
-  return /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(
     "div",
     {
       style: __spreadProps(__spreadValues({}, baseStyle), {
@@ -1194,7 +1207,7 @@ function EmailLayoutReader(props) {
         width: "100%"
       })
     },
-    /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(
       "table",
       {
         align: "center",
@@ -1212,19 +1225,19 @@ function EmailLayoutReader(props) {
         cellPadding: "0",
         border: 0
       },
-      /* @__PURE__ */ React60__default.default.createElement("tbody", null, /* @__PURE__ */ React60__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React60__default.default.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React60__default.default.createElement(ReaderBlock, { key: childId, id: childId })))))
+      /* @__PURE__ */ React58__default.default.createElement("tbody", null, /* @__PURE__ */ React58__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React58__default.default.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React58__default.default.createElement(ReaderBlock, { key: childId, id: childId })))))
     )
   );
 }
 
 // src/email-builder/reader/core.tsx
-var ReaderContext = React60.createContext({});
+var ReaderContext = React58.createContext({});
 function useReaderDocument() {
-  return React60.useContext(ReaderContext);
+  return React58.useContext(ReaderContext);
 }
 function ReaderBlock({ id }) {
   const document2 = useReaderDocument();
-  return document2[id] ? /* @__PURE__ */ React60__default.default.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
+  return document2[id] ? /* @__PURE__ */ React58__default.default.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
 }
 var READER_DICTIONARY = buildBlockConfigurationDictionary({
   ColumnsContainer: {
@@ -1281,13 +1294,13 @@ var ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
 var ReaderDocumentSchema = zod.z.record(zod.z.string(), ReaderBlockSchema);
 var BaseReaderBlock = buildBlockComponent(READER_DICTIONARY);
 function Reader({ document: document2, rootBlockId }) {
-  return /* @__PURE__ */ React60__default.default.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React60__default.default.createElement(ReaderBlock, { id: rootBlockId }));
+  return /* @__PURE__ */ React58__default.default.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React58__default.default.createElement(ReaderBlock, { id: rootBlockId }));
 }
 
 // src/email-builder/renderers/render-to-static-markup.tsx
 function renderToStaticMarkup(document2, { rootBlockId }) {
   return "<!DOCTYPE html>" + server.renderToStaticMarkup(
-    /* @__PURE__ */ React60__default.default.createElement("html", null, /* @__PURE__ */ React60__default.default.createElement("body", null, /* @__PURE__ */ React60__default.default.createElement(Reader, { document: document2, rootBlockId })))
+    /* @__PURE__ */ React58__default.default.createElement("html", null, /* @__PURE__ */ React58__default.default.createElement("body", null, /* @__PURE__ */ React58__default.default.createElement(Reader, { document: document2, rootBlockId })))
   );
 }
 
@@ -1955,7 +1968,8 @@ var editorStateStore = zustand.create(() => ({
   selectedScreenSize: "desktop",
   inspectorDrawerOpen: true,
   samplesDrawerOpen: true,
-  persistenceEnabled: false
+  persistenceEnabled: false,
+  lastFocusedEditable: null
 }));
 function useDocument() {
   return editorStateStore((s) => s.document);
@@ -2028,6 +2042,15 @@ function setSelectedScreenSize(selectedScreenSize) {
 function setPersistenceEnabled(persistenceEnabled) {
   return editorStateStore.setState({ persistenceEnabled });
 }
+function useLastFocusedEditable() {
+  return editorStateStore((s) => s.lastFocusedEditable);
+}
+function getLastFocusedEditable() {
+  return editorStateStore.getState().lastFocusedEditable;
+}
+function setLastFocusedEditable(lastFocusedEditable) {
+  return editorStateStore.setState({ lastFocusedEditable });
+}
 
 // src/app/save-payload.ts
 var ROOT_BLOCK_ID = "root";
@@ -2045,20 +2068,20 @@ function buildSavePayload(doc) {
 }
 
 // src/app/context.tsx
-var EmailEditorContext = React60.createContext(null);
+var EmailEditorContext = React58.createContext(null);
 var EmailEditorProvider = ({
   children,
   initialTemplateId = null,
   initialTemplateName = null,
   onSave
 }) => {
-  const [currentTemplateId, setCurrentTemplateId] = React60.useState(initialTemplateId);
-  const [currentTemplateName, setCurrentTemplateName] = React60.useState(initialTemplateName);
-  const [currentTemplateKind, setCurrentTemplateKind] = React60.useState(null);
-  const saveListenersRef = React60.useRef([]);
-  const onSaveRef = React60.useRef(onSave);
+  const [currentTemplateId, setCurrentTemplateId] = React58.useState(initialTemplateId);
+  const [currentTemplateName, setCurrentTemplateName] = React58.useState(initialTemplateName);
+  const [currentTemplateKind, setCurrentTemplateKind] = React58.useState(null);
+  const saveListenersRef = React58.useRef([]);
+  const onSaveRef = React58.useRef(onSave);
   onSaveRef.current = onSave;
-  const saveTemplate = React60.useCallback(() => {
+  const saveTemplate = React58.useCallback(() => {
     const currentDoc = getDocument();
     saveListenersRef.current.forEach((listener) => listener(currentDoc));
     if (onSaveRef.current) {
@@ -2066,7 +2089,7 @@ var EmailEditorProvider = ({
     }
     return currentDoc;
   }, []);
-  const loadTemplate = React60.useCallback((newTemplate, templateId, templateName, kind) => {
+  const loadTemplate = React58.useCallback((newTemplate, templateId, templateName, kind) => {
     if (templateId !== void 0) {
       setCurrentTemplateId(templateId);
     }
@@ -2077,20 +2100,20 @@ var EmailEditorProvider = ({
       setCurrentTemplateKind(kind);
     }
   }, []);
-  const setCurrentTemplate = React60.useCallback((templateId, templateName, kind) => {
+  const setCurrentTemplate = React58.useCallback((templateId, templateName, kind) => {
     setCurrentTemplateId(templateId);
     setCurrentTemplateName(templateName);
     if (kind !== void 0) {
       setCurrentTemplateKind(kind);
     }
   }, []);
-  const registerSaveListener = React60.useCallback((callback) => {
+  const registerSaveListener = React58.useCallback((callback) => {
     saveListenersRef.current = [...saveListenersRef.current, callback];
     return () => {
       saveListenersRef.current = saveListenersRef.current.filter((listener) => listener !== callback);
     };
   }, []);
-  const value = React60.useMemo(() => ({
+  const value = React58.useMemo(() => ({
     currentTemplateId,
     currentTemplateName,
     currentTemplateKind,
@@ -2099,24 +2122,34 @@ var EmailEditorProvider = ({
     registerSaveListener,
     setCurrentTemplate
   }), [currentTemplateId, currentTemplateName, currentTemplateKind, saveTemplate, loadTemplate, registerSaveListener, setCurrentTemplate]);
-  return /* @__PURE__ */ React60__default.default.createElement(EmailEditorContext.Provider, { value }, children);
+  return /* @__PURE__ */ React58__default.default.createElement(EmailEditorContext.Provider, { value }, children);
 };
 var useEmailEditor = () => {
-  const context = React60.useContext(EmailEditorContext);
+  const context = React58.useContext(EmailEditorContext);
   if (!context) {
     throw new Error("useEmailEditor must be used within an EmailEditorProvider");
   }
   return context;
 };
+var ImageCallbacksContext = React58.createContext({});
+function ImageCallbacksProvider({
+  callbacks,
+  children
+}) {
+  return /* @__PURE__ */ React58__default.default.createElement(ImageCallbacksContext.Provider, { value: callbacks }, children);
+}
+function useImageCallbacks() {
+  return React58.useContext(ImageCallbacksContext);
+}
 function BaseSidebarPanel({ title, children }) {
-  return /* @__PURE__ */ React60__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, title), /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 5, mb: 3 }, children));
+  return /* @__PURE__ */ React58__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React58__default.default.createElement(material.Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, title), /* @__PURE__ */ React58__default.default.createElement(material.Stack, { spacing: 5, mb: 3 }, children));
 }
 function RadioGroupInput({ label, children, defaultValue, onChange }) {
-  const [value, setValue] = React60.useState(defaultValue);
-  React60.useEffect(() => {
+  const [value, setValue] = React58.useState(defaultValue);
+  React58.useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React60__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React58__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React58__default.default.createElement(
     material.ToggleButtonGroup,
     {
       exclusive: true,
@@ -2136,7 +2169,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__ */ React60__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React58__default.default.createElement(
     material.Slider,
     __spreadProps(__spreadValues({}, props), {
       value,
@@ -2147,14 +2180,14 @@ function RawSliderInput(_a) {
         setValue(value2);
       }
     })
-  ), /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1 } }, value, units)));
+  ), /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React58__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1 } }, value, units)));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/slider-input.tsx
 function SliderInput(_a) {
   var _b = _a, { label, defaultValue, onChange } = _b, props = __objRest(_b, ["label", "defaultValue", "onChange"]);
-  const [value, setValue] = React60.useState(defaultValue);
-  return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React60__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React60__default.default.createElement(
+  const [value, setValue] = React58.useState(defaultValue);
+  return /* @__PURE__ */ React58__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React58__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React58__default.default.createElement(
     RawSliderInput,
     __spreadValues({
       value,
@@ -2166,12 +2199,12 @@ function SliderInput(_a) {
   ));
 }
 function TextInput({ helperText, label, placeholder, rows, InputProps: InputProps2, defaultValue, onChange }) {
-  const [value, setValue] = React60.useState(defaultValue);
+  const [value, setValue] = React58.useState(defaultValue);
   const isMultiline = typeof rows === "number" && rows > 1;
-  React60.useEffect(() => {
+  React58.useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(
     material.TextField,
     {
       fullWidth: true,
@@ -2197,7 +2230,7 @@ var TILE_BUTTON = {
 };
 function Swatch({ paletteColors, value, onChange }) {
   const renderButton2 = (colorValue) => {
-    return /* @__PURE__ */ React60__default.default.createElement(
+    return /* @__PURE__ */ React58__default.default.createElement(
       material.Button,
       {
         key: colorValue,
@@ -2216,7 +2249,7 @@ function Swatch({ paletteColors, value, onChange }) {
       }
     );
   };
-  return /* @__PURE__ */ React60__default.default.createElement(material.Box, { width: "100%", sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr" } }, paletteColors.map((c) => renderButton2(c)));
+  return /* @__PURE__ */ React58__default.default.createElement(material.Box, { width: "100%", sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr" } }, paletteColors.map((c) => renderButton2(c)));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/picker.tsx
@@ -2283,7 +2316,7 @@ var SX = {
   }
 };
 function Picker({ value, onChange }) {
-  return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React60__default.default.createElement(reactColorful.HexColorPicker, { color: value, onChange }), /* @__PURE__ */ React60__default.default.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React60__default.default.createElement(material.Box, { pt: 1 }, /* @__PURE__ */ React60__default.default.createElement(reactColorful.HexColorInput, { prefixed: true, color: value, onChange })));
+  return /* @__PURE__ */ React58__default.default.createElement(material.Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React58__default.default.createElement(reactColorful.HexColorPicker, { color: value, onChange }), /* @__PURE__ */ React58__default.default.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React58__default.default.createElement(material.Box, { pt: 1 }, /* @__PURE__ */ React58__default.default.createElement(reactColorful.HexColorInput, { prefixed: true, color: value, onChange })));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/base-color-input.tsx
@@ -2296,8 +2329,8 @@ var BUTTON_SX = {
   bgcolor: "#FFFFFF"
 };
 function ColorInput({ label, defaultValue, onChange, nullable }) {
-  const [anchorEl, setAnchorEl] = React60.useState(null);
-  const [value, setValue] = React60.useState(defaultValue);
+  const [anchorEl, setAnchorEl] = React58.useState(null);
+  const [value, setValue] = React58.useState(defaultValue);
   const handleClickOpen = (event) => {
     setAnchorEl(event.currentTarget);
   };
@@ -2308,7 +2341,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
     if (typeof value !== "string" || value.trim().length === 0) {
       return null;
     }
-    return /* @__PURE__ */ React60__default.default.createElement(
+    return /* @__PURE__ */ React58__default.default.createElement(
       material.ButtonBase,
       {
         onClick: () => {
@@ -2316,16 +2349,16 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
           onChange(null);
         }
       },
-      /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
+      /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
     );
   };
   const renderOpenButton = () => {
     if (value) {
-      return /* @__PURE__ */ React60__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
+      return /* @__PURE__ */ React58__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
     }
-    return /* @__PURE__ */ React60__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" }));
+    return /* @__PURE__ */ React58__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" }));
   };
-  return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React60__default.default.createElement(material.InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React58__default.default.createElement(material.InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React58__default.default.createElement(
     material.Menu,
     {
       anchorEl,
@@ -2335,7 +2368,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
         sx: { height: "auto", padding: 0 }
       }
     },
-    /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(
       Picker,
       {
         value: value || "",
@@ -2350,10 +2383,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__ */ React60__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
+  return /* @__PURE__ */ React58__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
 }
 function NullableColorInput(props) {
-  return /* @__PURE__ */ React60__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
+  return /* @__PURE__ */ React58__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
 }
 
 // src/editor/blocks/helpers/font-family.ts
@@ -2406,13 +2439,13 @@ var FONT_FAMILIES = [
 ];
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/font-family.tsx
-var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React60__default.default.createElement(material.MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
+var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React58__default.default.createElement(material.MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
 function NullableFontFamily({ label, onChange, defaultValue }) {
-  const [value, setValue] = React60.useState(defaultValue != null ? defaultValue : "inherit");
-  React60.useEffect(() => {
+  const [value, setValue] = React58.useState(defaultValue != null ? defaultValue : "inherit");
+  React58.useEffect(() => {
     setValue(defaultValue != null ? defaultValue : "inherit");
   }, [defaultValue]);
-  return /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(
     material.TextField,
     {
       select: true,
@@ -2425,23 +2458,23 @@ function NullableFontFamily({ label, onChange, defaultValue }) {
         onChange(v === null ? null : v);
       }
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.MenuItem, { value: "inherit" }, "Match email settings"),
+    /* @__PURE__ */ React58__default.default.createElement(material.MenuItem, { value: "inherit" }, "Match email settings"),
     OPTIONS
   );
 }
 function FontSizeInput({ label, defaultValue, onChange }) {
-  const [value, setValue] = React60.useState(defaultValue);
-  React60.useEffect(() => {
+  const [value, setValue] = React58.useState(defaultValue);
+  React58.useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
   const handleChange = (value2) => {
     setValue(value2);
     onChange(value2);
   };
-  return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React60__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React58__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React58__default.default.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.TextFieldsOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.TextFieldsOutlined, { sx: { fontSize: 16 } }),
       value,
       setValue: handleChange,
       units: "px",
@@ -2452,11 +2485,11 @@ function FontSizeInput({ label, defaultValue, onChange }) {
   ));
 }
 function FontWeightInput({ label, defaultValue, onChange }) {
-  const [value, setValue] = React60.useState(defaultValue);
-  React60.useEffect(() => {
+  const [value, setValue] = React58.useState(defaultValue);
+  React58.useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(
     RadioGroupInput,
     {
       label,
@@ -2466,12 +2499,69 @@ function FontWeightInput({ label, defaultValue, onChange }) {
         onChange(fontWeight);
       }
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "normal" }, "Regular"),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "bold" }, "Bold")
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "normal" }, "Regular"),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "bold" }, "Bold")
   );
 }
+function LetterSpacingInput({ label, defaultValue, onChange }) {
+  const handleChange = (ev) => {
+    const raw = ev.target.value.trim();
+    if (raw === "") {
+      onChange(null);
+      return;
+    }
+    const value = parseFloat(raw);
+    onChange(isNaN(value) ? null : value);
+  };
+  return /* @__PURE__ */ React58__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React58__default.default.createElement(
+    material.TextField,
+    {
+      fullWidth: true,
+      onChange: handleChange,
+      defaultValue: defaultValue != null ? defaultValue : "",
+      label,
+      variant: "standard",
+      placeholder: "normal",
+      size: "small",
+      type: "number",
+      inputProps: { step: 0.5 },
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React58__default.default.createElement(material.InputAdornment, { position: "start" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.SpaceBarOutlined, { sx: { fontSize: 16 } })),
+        endAdornment: /* @__PURE__ */ React58__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary" }, "px")
+      }
+    }
+  ));
+}
+function LineHeightInput({ label, defaultValue, onChange }) {
+  const handleChange = (ev) => {
+    const raw = ev.target.value.trim();
+    if (raw === "") {
+      onChange(null);
+      return;
+    }
+    const value = parseFloat(raw);
+    onChange(isNaN(value) ? null : value);
+  };
+  return /* @__PURE__ */ React58__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React58__default.default.createElement(
+    material.TextField,
+    {
+      fullWidth: true,
+      onChange: handleChange,
+      defaultValue: defaultValue != null ? defaultValue : "",
+      label,
+      variant: "standard",
+      placeholder: "default",
+      size: "small",
+      type: "number",
+      inputProps: { step: 0.1 },
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React58__default.default.createElement(material.InputAdornment, { position: "start" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.FormatLineSpacingOutlined, { sx: { fontSize: 16 } }))
+      }
+    }
+  ));
+}
 function PaddingInput({ label, defaultValue, onChange }) {
-  const [value, setValue] = React60.useState(() => {
+  const [value, setValue] = React58.useState(() => {
     if (defaultValue) {
       return defaultValue;
     }
@@ -2489,10 +2579,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
     setValue(v);
     onChange(v);
   }
-  return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React60__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(material.Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React58__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React58__default.default.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
       value: value.top,
       setValue: (num) => handleChange("top", num),
       units: "px",
@@ -2501,10 +2591,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
       max: 80,
       marks: true
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
       value: value.bottom,
       setValue: (num) => handleChange("bottom", num),
       units: "px",
@@ -2513,10 +2603,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
       max: 80,
       marks: true
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
       value: value.left,
       setValue: (num) => handleChange("left", num),
       units: "px",
@@ -2525,10 +2615,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
       max: 80,
       marks: true
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
       value: value.right,
       setValue: (num) => handleChange("right", num),
       units: "px",
@@ -2540,11 +2630,11 @@ function PaddingInput({ label, defaultValue, onChange }) {
   ));
 }
 function TextAlignInput({ label, defaultValue, onChange }) {
-  const [value, setValue] = React60.useState(defaultValue != null ? defaultValue : "left");
-  React60.useEffect(() => {
+  const [value, setValue] = React58.useState(defaultValue != null ? defaultValue : "left");
+  React58.useEffect(() => {
     setValue(defaultValue != null ? defaultValue : "left");
   }, [defaultValue]);
-  return /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(
     RadioGroupInput,
     {
       label,
@@ -2554,9 +2644,9 @@ function TextAlignInput({ label, defaultValue, onChange }) {
         onChange(value2);
       }
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "left" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FormatAlignLeftOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "center" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FormatAlignCenterOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "right" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FormatAlignRightOutlined, { fontSize: "small" }))
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "left" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.FormatAlignLeftOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "center" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.FormatAlignCenterOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "right" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.FormatAlignRightOutlined, { fontSize: "small" }))
   );
 }
 
@@ -2569,14 +2659,14 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
   };
   switch (name) {
     case "backgroundColor":
-      return /* @__PURE__ */ React60__default.default.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React58__default.default.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
     case "borderColor":
-      return /* @__PURE__ */ React60__default.default.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React58__default.default.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
     case "borderRadius":
-      return /* @__PURE__ */ React60__default.default.createElement(
+      return /* @__PURE__ */ React58__default.default.createElement(
         SliderInput,
         {
-          iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
+          iconLabel: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
           units: "px",
           step: 4,
           marks: true,
@@ -2588,29 +2678,33 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
         }
       );
     case "color":
-      return /* @__PURE__ */ React60__default.default.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React58__default.default.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
     case "fontFamily":
-      return /* @__PURE__ */ React60__default.default.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React58__default.default.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
     case "fontSize":
-      return /* @__PURE__ */ React60__default.default.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React58__default.default.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
     case "fontWeight":
-      return /* @__PURE__ */ React60__default.default.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React58__default.default.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
+    case "lineHeight":
+      return /* @__PURE__ */ React58__default.default.createElement(LineHeightInput, { label: "Line height", defaultValue, onChange: handleChange });
+    case "letterSpacing":
+      return /* @__PURE__ */ React58__default.default.createElement(LetterSpacingInput, { label: "Letter spacing", defaultValue, onChange: handleChange });
     case "textAlign":
-      return /* @__PURE__ */ React60__default.default.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React58__default.default.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
     case "padding":
-      return /* @__PURE__ */ React60__default.default.createElement(PaddingInput, { label: "Padding", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React58__default.default.createElement(PaddingInput, { label: "Padding", defaultValue, onChange: handleChange });
   }
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/style-inputs/multi-style-property-panel.tsx
 function MultiStylePropertyPanel({ names, value, onChange }) {
-  return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, names.map((name) => /* @__PURE__ */ React60__default.default.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
+  return /* @__PURE__ */ React58__default.default.createElement(React58__default.default.Fragment, null, names.map((name) => /* @__PURE__ */ React58__default.default.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/avatar-sidebar-panel.tsx
 function AvatarSidebarPanel({ data, setData }) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const [, setErrors] = React60.useState(null);
+  const [, setErrors] = React58.useState(null);
   const updateData = (d) => {
     const res = AvatarPropsSchema.safeParse(d);
     if (res.success) {
@@ -2624,11 +2718,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__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React58__default.default.createElement(
     SliderInput,
     {
       label: "Size",
-      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 3,
       min: 32,
@@ -2638,7 +2732,7 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }));
       }
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     RadioGroupInput,
     {
       label: "Shape",
@@ -2647,10 +2741,10 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { shape: shape2 }) }));
       }
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "circle" }, "Circle"),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "square" }, "Square"),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded")
-  ), /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "circle" }, "Circle"),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "square" }, "Square"),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded")
+  ), /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Image URL",
@@ -2659,7 +2753,7 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }));
       }
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Alt text",
@@ -2668,7 +2762,7 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt: alt2 }) }));
       }
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     MultiStylePropertyPanel,
     {
       names: ["textAlign", "padding"],
@@ -2679,7 +2773,7 @@ function AvatarSidebarPanel({ data, setData }) {
 }
 function ButtonSidebarPanel({ data, setData }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
-  const [, setErrors] = React60.useState(null);
+  const [, setErrors] = React58.useState(null);
   const updateData = (d) => {
     const res = ButtonPropsSchema.safeParse(d);
     if (res.success) {
@@ -2696,68 +2790,77 @@ 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__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Text",
       defaultValue: text,
       onChange: (text2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text: text2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Url",
       defaultValue: url,
       onChange: (url2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: url2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     RadioGroupInput,
     {
       label: "Width",
       defaultValue: fullWidth ? "FULL_WIDTH" : "AUTO",
       onChange: (v) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fullWidth: v === "FULL_WIDTH" }) }))
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "FULL_WIDTH" }, "Full"),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "AUTO" }, "Auto")
-  ), /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "FULL_WIDTH" }, "Full"),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "AUTO" }, "Auto")
+  ), /* @__PURE__ */ React58__default.default.createElement(
     RadioGroupInput,
     {
       label: "Size",
       defaultValue: size,
       onChange: (size2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }))
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "x-small" }, "Xs"),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "small" }, "Sm"),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "medium" }, "Md"),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "large" }, "Lg")
-  ), /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "x-small" }, "Xs"),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "small" }, "Sm"),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "medium" }, "Md"),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "large" }, "Lg")
+  ), /* @__PURE__ */ React58__default.default.createElement(
     RadioGroupInput,
     {
       label: "Style",
       defaultValue: buttonStyle,
       onChange: (buttonStyle2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonStyle: buttonStyle2 }) }))
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "rectangle" }, "Rectangle"),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded"),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "pill" }, "Pill")
-  ), /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "rectangle" }, "Rectangle"),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded"),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "pill" }, "Pill")
+  ), /* @__PURE__ */ React58__default.default.createElement(
     ColorInput2,
     {
       label: "Text color",
       defaultValue: buttonTextColor,
       onChange: (buttonTextColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonTextColor: buttonTextColor2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     ColorInput2,
     {
       label: "Button color",
       defaultValue: buttonBackgroundColor,
       onChange: (buttonBackgroundColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonBackgroundColor: buttonBackgroundColor2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     MultiStylePropertyPanel,
     {
-      names: ["backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
+      names: [
+        "backgroundColor",
+        "fontFamily",
+        "fontSize",
+        "fontWeight",
+        "lineHeight",
+        "letterSpacing",
+        "textAlign",
+        "padding"
+      ],
       value: data.style,
       onChange: (style) => updateData(__spreadProps(__spreadValues({}, data), { style }))
     }
@@ -2780,7 +2883,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
     const value = parseInt(ev.target.value);
     onChange(isNaN(value) ? null : value);
   };
-  return /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(
     material.TextField,
     {
       fullWidth: true,
@@ -2791,7 +2894,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
       placeholder: "auto",
       size: "small",
       InputProps: {
-        endAdornment: /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary" }, "px")
+        endAdornment: /* @__PURE__ */ React58__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary" }, "px")
       }
     }
   );
@@ -2799,7 +2902,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/column-widths-input.tsx
 function ColumnWidthsInput({ defaultValue, onChange }) {
-  const [currentValue, setCurrentValue] = React60.useState(() => {
+  const [currentValue, setCurrentValue] = React58.useState(() => {
     if (defaultValue) {
       return defaultValue;
     }
@@ -2813,7 +2916,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
   };
   let column3 = null;
   {
-    column3 = /* @__PURE__ */ React60__default.default.createElement(
+    column3 = /* @__PURE__ */ React58__default.default.createElement(
       TextDimensionInput,
       {
         label: "Column 3",
@@ -2824,7 +2927,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
       }
     );
   }
-  return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React58__default.default.createElement(
     TextDimensionInput,
     {
       label: "Column 1",
@@ -2833,7 +2936,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
         setIndexValue(0, v);
       }
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     TextDimensionInput,
     {
       label: "Column 2",
@@ -2848,7 +2951,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
 // src/app/inspector-drawer/configuration-panel/input-panels/columns-container-sidebar-panel.tsx
 function ColumnsContainerPanel({ data, setData }) {
   var _a, _b, _c, _d, _e, _f;
-  const [, setErrors] = React60.useState(null);
+  const [, setErrors] = React58.useState(null);
   const updateData = (d) => {
     const res = columns_container_props_schema_default2.safeParse(d);
     if (res.success) {
@@ -2858,7 +2961,7 @@ function ColumnsContainerPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React58__default.default.createElement(
     RadioGroupInput,
     {
       label: "Number of columns",
@@ -2867,9 +2970,9 @@ function ColumnsContainerPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsCount: v === "2" ? 2 : 3 }) }));
       }
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "2" }, "2"),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "3" }, "3")
-  ), /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "2" }, "2"),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "3" }, "3")
+  ), /* @__PURE__ */ React58__default.default.createElement(
     ColumnWidthsInput,
     {
       defaultValue: (_b = data.props) == null ? void 0 : _b.fixedWidths,
@@ -2877,11 +2980,11 @@ function ColumnsContainerPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fixedWidths }) }));
       }
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     SliderInput,
     {
       label: "Columns gap",
-      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.SpaceBarOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.SpaceBarOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 4,
       marks: true,
@@ -2890,7 +2993,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__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     RadioGroupInput,
     {
       label: "Alignment",
@@ -2899,10 +3002,10 @@ function ColumnsContainerPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }));
       }
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
-  ), /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
+  ), /* @__PURE__ */ React58__default.default.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "padding"],
@@ -2921,7 +3024,7 @@ var container_props_schema_default = ContainerPropsSchema3;
 
 // src/app/inspector-drawer/configuration-panel/input-panels/container-sidebar-panel.tsx
 function ContainerSidebarPanel({ data, setData }) {
-  const [, setErrors] = React60.useState(null);
+  const [, setErrors] = React58.useState(null);
   const updateData = (d) => {
     const res = container_props_schema_default.safeParse(d);
     if (res.success) {
@@ -2931,7 +3034,7 @@ function ContainerSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React58__default.default.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "borderColor", "borderRadius", "padding"],
@@ -2942,7 +3045,7 @@ function ContainerSidebarPanel({ data, setData }) {
 }
 function DividerSidebarPanel({ data, setData }) {
   var _a, _b, _c, _d;
-  const [, setErrors] = React60.useState(null);
+  const [, setErrors] = React58.useState(null);
   const updateData = (d) => {
     const res = DividerPropsSchema.safeParse(d);
     if (res.success) {
@@ -2954,18 +3057,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__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React58__default.default.createElement(
     ColorInput2,
     {
       label: "Color",
       defaultValue: lineColor,
       onChange: (lineColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineColor: lineColor2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     SliderInput,
     {
       label: "Height",
-      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 1,
       min: 1,
@@ -2973,7 +3076,7 @@ function DividerSidebarPanel({ data, setData }) {
       defaultValue: lineHeight,
       onChange: (lineHeight2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineHeight: lineHeight2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "padding"],
@@ -2996,7 +3099,8 @@ var FONT_FAMILY_SCHEMA7 = zod.z.enum([
 ]).nullable().optional();
 var TemplateVariableSchema2 = zod.z.object({
   name: zod.z.string(),
-  description: zod.z.string().optional().nullable()
+  description: zod.z.string().optional().nullable(),
+  sampleValue: zod.z.string().optional().nullable()
 });
 var EmailLayoutPropsSchema2 = zod.z.object({
   backdropColor: COLOR_SCHEMA10,
@@ -3012,15 +3116,15 @@ var EmailLayoutPropsSchema2 = zod.z.object({
 });
 var email_layout_props_schema_default = EmailLayoutPropsSchema2;
 function BooleanInput({ label, defaultValue, onChange }) {
-  const [value, setValue] = React60.useState(defaultValue);
-  React60.useEffect(() => {
+  const [value, setValue] = React58.useState(defaultValue);
+  React58.useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(
     material.FormControlLabel,
     {
       label,
-      control: /* @__PURE__ */ React60__default.default.createElement(
+      control: /* @__PURE__ */ React58__default.default.createElement(
         material.Switch,
         {
           checked: value,
@@ -3037,7 +3141,7 @@ function BooleanInput({ label, defaultValue, onChange }) {
 // src/app/inspector-drawer/configuration-panel/input-panels/email-layout-sidebar-panel.tsx
 function EmailLayoutSidebarFields({ data, setData }) {
   var _a, _b, _c, _d, _e, _f;
-  const [, setErrors] = React60.useState(null);
+  const [, setErrors] = React58.useState(null);
   const updateData = (d) => {
     const res = email_layout_props_schema_default.safeParse(d);
     if (res.success) {
@@ -3048,38 +3152,38 @@ function EmailLayoutSidebarFields({ data, setData }) {
     }
   };
   const backdropDisabled = (_a = data.backdropDisabled) != null ? _a : false;
-  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React58__default.default.createElement(
     BooleanInput,
     {
       label: "Disable backdrop",
       defaultValue: backdropDisabled,
       onChange: (backdropDisabled2) => updateData(__spreadProps(__spreadValues({}, data), { backdropDisabled: backdropDisabled2 }))
     }
-  ), !backdropDisabled && /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
+  ), !backdropDisabled && /* @__PURE__ */ React58__default.default.createElement(React58__default.default.Fragment, null, /* @__PURE__ */ React58__default.default.createElement(
     ColorInput2,
     {
       label: "Backdrop color",
       defaultValue: (_b = data.backdropColor) != null ? _b : "#F5F5F5",
       onChange: (backdropColor) => updateData(__spreadProps(__spreadValues({}, data), { backdropColor }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     ColorInput2,
     {
       label: "Canvas color",
       defaultValue: (_c = data.canvasColor) != null ? _c : "#FFFFFF",
       onChange: (canvasColor) => updateData(__spreadProps(__spreadValues({}, data), { canvasColor }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     NullableColorInput,
     {
       label: "Canvas border color",
       defaultValue: (_d = data.borderColor) != null ? _d : null,
       onChange: (borderColor) => updateData(__spreadProps(__spreadValues({}, data), { borderColor }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     SliderInput,
     {
-      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
+      iconLabel: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
       units: "px",
       step: 4,
       marks: true,
@@ -3089,14 +3193,14 @@ function EmailLayoutSidebarFields({ data, setData }) {
       defaultValue: (_e = data.borderRadius) != null ? _e : 0,
       onChange: (borderRadius) => updateData(__spreadProps(__spreadValues({}, data), { borderRadius }))
     }
-  )), /* @__PURE__ */ React60__default.default.createElement(
+  )), /* @__PURE__ */ React58__default.default.createElement(
     NullableFontFamily,
     {
       label: "Font family",
       defaultValue: "MODERN_SANS",
       onChange: (fontFamily) => updateData(__spreadProps(__spreadValues({}, data), { fontFamily }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     ColorInput2,
     {
       label: "Text color",
@@ -3107,7 +3211,7 @@ function EmailLayoutSidebarFields({ data, setData }) {
 }
 function HeadingSidebarPanel({ data, setData }) {
   var _a, _b, _c, _d;
-  const [, setErrors] = React60.useState(null);
+  const [, setErrors] = React58.useState(null);
   const updateData = (d) => {
     const res = HeadingPropsSchema.safeParse(d);
     if (res.success) {
@@ -3117,7 +3221,7 @@ function HeadingSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Content",
@@ -3127,7 +3231,7 @@ function HeadingSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }));
       }
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     RadioGroupInput,
     {
       label: "Level",
@@ -3136,13 +3240,22 @@ function HeadingSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { level }) }));
       }
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "h1" }, "H1"),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "h2" }, "H2"),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "h3" }, "H3")
-  ), /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "h1" }, "H1"),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "h2" }, "H2"),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "h3" }, "H3")
+  ), /* @__PURE__ */ React58__default.default.createElement(
     MultiStylePropertyPanel,
     {
-      names: ["color", "backgroundColor", "fontFamily", "fontWeight", "textAlign", "padding"],
+      names: [
+        "color",
+        "backgroundColor",
+        "fontFamily",
+        "fontWeight",
+        "lineHeight",
+        "letterSpacing",
+        "textAlign",
+        "padding"
+      ],
       value: data.style,
       onChange: (style) => updateData(__spreadProps(__spreadValues({}, data), { style }))
     }
@@ -3150,7 +3263,7 @@ function HeadingSidebarPanel({ data, setData }) {
 }
 function HtmlSidebarPanel({ data, setData }) {
   var _a, _b;
-  const [, setErrors] = React60.useState(null);
+  const [, setErrors] = React58.useState(null);
   const updateData = (d) => {
     const res = HtmlPropsSchema.safeParse(d);
     if (res.success) {
@@ -3160,7 +3273,7 @@ function HtmlSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Content",
@@ -3168,7 +3281,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__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     MultiStylePropertyPanel,
     {
       names: ["color", "backgroundColor", "fontFamily", "fontSize", "textAlign", "padding"],
@@ -3177,9 +3290,160 @@ function HtmlSidebarPanel({ data, setData }) {
     }
   ));
 }
+function ImageLibraryDialog({ open, onClose, onPick }) {
+  const { loadImages, deleteImage } = useImageCallbacks();
+  const [images, setImages] = React58.useState(null);
+  const [error, setError] = React58.useState(null);
+  const [query, setQuery] = React58.useState("");
+  const [busy, setBusy] = React58.useState(false);
+  const refresh = () => __async(null, null, function* () {
+    if (!loadImages) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const list = yield loadImages();
+      setImages(list);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load images");
+    } finally {
+      setBusy(false);
+    }
+  });
+  React58.useEffect(() => {
+    if (open) {
+      setQuery("");
+      void refresh();
+    }
+  }, [open]);
+  const filtered = React58.useMemo(() => {
+    if (!images) return null;
+    const q = query.trim().toLowerCase();
+    if (!q) return images;
+    return images.filter((img) => {
+      var _a;
+      const haystack = `${(_a = img.alt) != null ? _a : ""} ${img.url}`.toLowerCase();
+      return haystack.includes(q);
+    });
+  }, [images, query]);
+  const handleDelete = (url) => __async(null, null, function* () {
+    if (!deleteImage) return;
+    const ok = window.confirm("Delete this image from the library?");
+    if (!ok) return;
+    setBusy(true);
+    try {
+      yield deleteImage(url);
+      yield refresh();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to delete image");
+      setBusy(false);
+    }
+  });
+  return /* @__PURE__ */ React58__default.default.createElement(material.Dialog, { open, onClose, maxWidth: "md", fullWidth: true }, /* @__PURE__ */ React58__default.default.createElement(material.DialogTitle, null, "Image library"), /* @__PURE__ */ React58__default.default.createElement(material.DialogContent, { dividers: true }, /* @__PURE__ */ React58__default.default.createElement(
+    material.TextField,
+    {
+      fullWidth: true,
+      size: "small",
+      placeholder: "Search by alt text or URL",
+      value: query,
+      onChange: (e) => setQuery(e.target.value),
+      autoFocus: true,
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React58__default.default.createElement(material.InputAdornment, { position: "start" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.SearchOutlined, { fontSize: "small" }))
+      },
+      sx: { mb: 2 }
+    }
+  ), error && /* @__PURE__ */ React58__default.default.createElement(material.Alert, { severity: "error", sx: { mb: 2 } }, error), busy && !images && /* @__PURE__ */ React58__default.default.createElement(material.Stack, { alignItems: "center", sx: { py: 4 } }, /* @__PURE__ */ React58__default.default.createElement(material.CircularProgress, { size: 28 })), filtered && filtered.length === 0 && /* @__PURE__ */ React58__default.default.createElement(material.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__default.default.createElement(
+    material.Box,
+    {
+      sx: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))",
+        gap: 1.5
+      }
+    },
+    filtered.map((img) => /* @__PURE__ */ React58__default.default.createElement(
+      ImageTile,
+      {
+        key: img.url,
+        image: img,
+        onPick: () => onPick(img),
+        onDelete: deleteImage ? () => handleDelete(img.url) : void 0
+      }
+    ))
+  )), /* @__PURE__ */ React58__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React58__default.default.createElement(material.Button, { onClick: onClose }, "Close")));
+}
+function ImageTile({
+  image,
+  onPick,
+  onDelete
+}) {
+  var _a, _b;
+  const src = (_a = image.thumbnailUrl) != null ? _a : image.url;
+  const label = image.alt || image.url.split("/").pop() || "image";
+  return /* @__PURE__ */ React58__default.default.createElement(
+    material.Box,
+    {
+      sx: {
+        position: "relative",
+        borderRadius: 1,
+        border: 1,
+        borderColor: "divider",
+        overflow: "hidden",
+        cursor: "pointer",
+        transition: "border-color 120ms",
+        "&:hover": { borderColor: "primary.main" },
+        "&:hover .delete-btn": { opacity: 1 }
+      },
+      onClick: onPick
+    },
+    /* @__PURE__ */ React58__default.default.createElement(
+      material.Box,
+      {
+        component: "img",
+        src,
+        alt: (_b = image.alt) != null ? _b : "",
+        sx: { display: "block", width: "100%", aspectRatio: "1 / 1", objectFit: "cover", backgroundColor: "#f5f5f5" }
+      }
+    ),
+    /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: { p: 0.75, fontSize: 11, color: "text.secondary", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label),
+    onDelete && /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Delete from library" }, /* @__PURE__ */ React58__default.default.createElement(
+      material.IconButton,
+      {
+        size: "small",
+        className: "delete-btn",
+        onClick: (e) => {
+          e.stopPropagation();
+          onDelete();
+        },
+        sx: {
+          position: "absolute",
+          top: 4,
+          right: 4,
+          opacity: 0,
+          backgroundColor: "rgba(255,255,255,0.85)",
+          transition: "opacity 120ms",
+          "&:hover": { backgroundColor: "rgba(255,255,255,0.95)" }
+        },
+        "aria-label": "Delete image"
+      },
+      /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.DeleteOutline, { fontSize: "small" })
+    ))
+  );
+}
+
+// src/app/inspector-drawer/configuration-panel/input-panels/image-sidebar-panel.tsx
+function isHttpUrl(value) {
+  if (!value) return false;
+  return /^http:\/\//i.test(value.trim());
+}
 function ImageSidebarPanel({ data, setData }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const [, setErrors] = React60.useState(null);
+  const [, setErrors] = React58.useState(null);
+  const { uploadImage, loadImages } = useImageCallbacks();
+  const fileInputRef = React58.useRef(null);
+  const [uploading, setUploading] = React58.useState(false);
+  const [uploadError, setUploadError] = React58.useState(null);
+  const [libraryOpen, setLibraryOpen] = React58.useState(false);
   const updateData = (d) => {
     const res = ImagePropsSchema.safeParse(d);
     if (res.success) {
@@ -3189,24 +3453,88 @@ function ImageSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Image block" }, /* @__PURE__ */ React60__default.default.createElement(
+  const applyUploadedImage = (uploaded) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
+    updateData(__spreadProps(__spreadValues({}, data), {
+      props: __spreadProps(__spreadValues({}, data.props), {
+        url: uploaded.url,
+        width: (_c2 = (_b2 = uploaded.width) != null ? _b2 : (_a2 = data.props) == null ? void 0 : _a2.width) != null ? _c2 : null,
+        height: (_f2 = (_e2 = uploaded.height) != null ? _e2 : (_d2 = data.props) == null ? void 0 : _d2.height) != null ? _f2 : null,
+        alt: (_i2 = (_h2 = uploaded.alt) != null ? _h2 : (_g2 = data.props) == null ? void 0 : _g2.alt) != null ? _i2 : ""
+      })
+    }));
+  };
+  const handleFile = (file) => __async(null, null, function* () {
+    if (!uploadImage) return;
+    setUploading(true);
+    setUploadError(null);
+    try {
+      const uploaded = yield uploadImage(file);
+      applyUploadedImage(uploaded);
+    } catch (e) {
+      setUploadError(e instanceof Error ? e.message : "Upload failed");
+    } finally {
+      setUploading(false);
+    }
+  });
+  const url = (_b = (_a = data.props) == null ? void 0 : _a.url) != null ? _b : "";
+  const showHttpWarning = isHttpUrl(url);
+  return /* @__PURE__ */ React58__default.default.createElement(BaseSidebarPanel, { title: "Image block" }, (uploadImage || loadImages) && /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, uploadImage && /* @__PURE__ */ React58__default.default.createElement(React58__default.default.Fragment, null, /* @__PURE__ */ React58__default.default.createElement(
+    material.Button,
+    {
+      fullWidth: true,
+      variant: "outlined",
+      size: "small",
+      startIcon: uploading ? /* @__PURE__ */ React58__default.default.createElement(material.CircularProgress, { size: 14 }) : /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.CloudUploadOutlined, { fontSize: "small" }),
+      disabled: uploading,
+      onClick: () => {
+        var _a2;
+        return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
+      }
+    },
+    uploading ? "Uploading\u2026" : "Upload"
+  ), /* @__PURE__ */ React58__default.default.createElement(
+    "input",
+    {
+      ref: fileInputRef,
+      type: "file",
+      accept: "image/*",
+      hidden: true,
+      onChange: (e) => __async(null, null, function* () {
+        var _a2;
+        const file = (_a2 = e.target.files) == null ? void 0 : _a2[0];
+        e.target.value = "";
+        if (file) yield handleFile(file);
+      })
+    }
+  )), loadImages && /* @__PURE__ */ React58__default.default.createElement(
+    material.Button,
+    {
+      fullWidth: true,
+      variant: "outlined",
+      size: "small",
+      startIcon: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.CollectionsOutlined, { fontSize: "small" }),
+      onClick: () => setLibraryOpen(true)
+    },
+    "Library"
+  )), uploadError && /* @__PURE__ */ React58__default.default.createElement(material.Alert, { severity: "error", onClose: () => setUploadError(null), sx: { mt: 1 } }, uploadError), /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Source URL",
-      defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.url) != null ? _b : "",
+      defaultValue: url,
       onChange: (v) => {
-        const url = v.trim().length === 0 ? null : v.trim();
-        updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url }) }));
+        const next = v.trim().length === 0 ? null : v.trim();
+        updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: next }) }));
       }
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), showHttpWarning && /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: { mt: -1, mb: 1, display: "flex", alignItems: "flex-start", gap: 0.75 } }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.ErrorOutlineOutlined, { fontSize: "small", sx: { color: "warning.main", mt: "2px" } }), /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: { fontSize: 12, color: "warning.dark" } }, "Non-HTTPS URL: Gmail and other clients strip mixed content. Use https:// for reliable delivery.")), /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Alt text",
       defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.alt) != null ? _d : "",
       onChange: (alt) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Click through URL",
@@ -3216,42 +3544,52 @@ function ImageSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkHref }) }));
       }
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React58__default.default.createElement(
     TextDimensionInput,
     {
       label: "Width",
       defaultValue: (_g = data.props) == null ? void 0 : _g.width,
       onChange: (width) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { width }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     TextDimensionInput,
     {
       label: "Height",
       defaultValue: (_h = data.props) == null ? void 0 : _h.height,
       onChange: (height) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { height }) }))
     }
-  )), /* @__PURE__ */ React60__default.default.createElement(
+  )), /* @__PURE__ */ React58__default.default.createElement(
     RadioGroupInput,
     {
       label: "Alignment",
       defaultValue: (_j = (_i = data.props) == null ? void 0 : _i.contentAlignment) != null ? _j : "middle",
       onChange: (contentAlignment) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }))
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
-  ), /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
+  ), /* @__PURE__ */ React58__default.default.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "textAlign", "padding"],
       value: data.style,
       onChange: (style) => updateData(__spreadProps(__spreadValues({}, data), { style }))
     }
+  ), loadImages && /* @__PURE__ */ React58__default.default.createElement(
+    ImageLibraryDialog,
+    {
+      open: libraryOpen,
+      onClose: () => setLibraryOpen(false),
+      onPick: (image) => {
+        applyUploadedImage(image);
+        setLibraryOpen(false);
+      }
+    }
   ));
 }
 function SignatureSidebarPanel({ data, setData }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D;
-  const [, setErrors] = React60.useState(null);
+  const [, setErrors] = React58.useState(null);
   const updateData = (d) => {
     const res = SignaturePropsSchema.safeParse(d);
     if (res.success) {
@@ -3276,74 +3614,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__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Signature block" }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(BaseSidebarPanel, { title: "Signature block" }, /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Greeting",
       defaultValue: greeting,
       onChange: (greeting2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { greeting: greeting2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Name",
       defaultValue: name,
       onChange: (name2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { name: name2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Title",
       defaultValue: title,
       onChange: (title2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { title: title2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Company",
       defaultValue: company,
       onChange: (company2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { company: company2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Address",
       defaultValue: address,
       onChange: (address2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { address: address2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Email",
       defaultValue: email,
       onChange: (email2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { email: email2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Phone",
       defaultValue: phone,
       onChange: (phone2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { phone: phone2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Website",
       defaultValue: website,
       onChange: (website2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { website: website2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Image URL",
       defaultValue: imageUrl,
       onChange: (imageUrl2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     SliderInput,
     {
       label: "Image size",
-      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 4,
       min: 32,
@@ -3351,47 +3689,47 @@ function SignatureSidebarPanel({ data, setData }) {
       defaultValue: imageSize,
       onChange: (imageSize2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageSize: imageSize2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     RadioGroupInput,
     {
       label: "Image shape",
       defaultValue: imageShape,
       onChange: (imageShape2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageShape: imageShape2 }) }))
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "circle" }, "Circle"),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "square" }, "Square"),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded")
-  ), /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "circle" }, "Circle"),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "square" }, "Square"),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded")
+  ), /* @__PURE__ */ React58__default.default.createElement(
     RadioGroupInput,
     {
       label: "Layout",
       defaultValue: layout,
       onChange: (layout2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { layout: layout2 }) }))
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "horizontal" }, "Horizontal"),
-    /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "vertical" }, "Vertical")
-  ), /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "horizontal" }, "Horizontal"),
+    /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "vertical" }, "Vertical")
+  ), /* @__PURE__ */ React58__default.default.createElement(
     ColorInput2,
     {
       label: "Name color",
       defaultValue: nameColor,
       onChange: (nameColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { nameColor: nameColor2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     ColorInput2,
     {
       label: "Text color",
       defaultValue: textColor,
       onChange: (textColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { textColor: textColor2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     ColorInput2,
     {
       label: "Link color",
       defaultValue: linkColor,
       onChange: (linkColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkColor: linkColor2 }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "fontFamily", "padding"],
@@ -3402,7 +3740,7 @@ function SignatureSidebarPanel({ data, setData }) {
 }
 function SpacerSidebarPanel({ data, setData }) {
   var _a, _b;
-  const [, setErrors] = React60.useState(null);
+  const [, setErrors] = React58.useState(null);
   const updateData = (d) => {
     const res = SpacerPropsSchema.safeParse(d);
     if (res.success) {
@@ -3412,11 +3750,11 @@ function SpacerSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React58__default.default.createElement(
     SliderInput,
     {
       label: "Height",
-      iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 4,
       min: 4,
@@ -3428,7 +3766,7 @@ function SpacerSidebarPanel({ data, setData }) {
 }
 function TextSidebarPanel({ data, setData }) {
   var _a, _b, _c, _d;
-  const [, setErrors] = React60.useState(null);
+  const [, setErrors] = React58.useState(null);
   const updateData = (d) => {
     const res = TextPropsSchema.safeParse(d);
     if (res.success) {
@@ -3438,7 +3776,7 @@ function TextSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React58__default.default.createElement(
     TextInput,
     {
       label: "Content",
@@ -3446,17 +3784,27 @@ 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__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     BooleanInput,
     {
       label: "Markdown",
       defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.markdown) != null ? _d : false,
       onChange: (markdown) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { markdown }) }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     MultiStylePropertyPanel,
     {
-      names: ["color", "backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
+      names: [
+        "color",
+        "backgroundColor",
+        "fontFamily",
+        "fontSize",
+        "fontWeight",
+        "lineHeight",
+        "letterSpacing",
+        "textAlign",
+        "padding"
+      ],
       value: data.style,
       onChange: (style) => updateData(__spreadProps(__spreadValues({}, data), { style }))
     }
@@ -3465,7 +3813,7 @@ function TextSidebarPanel({ data, setData }) {
 
 // src/app/inspector-drawer/configuration-panel/index.tsx
 function renderMessage(val) {
-  return /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { color: "text.secondary" }, val));
+  return /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React58__default.default.createElement(material.Typography, { color: "text.secondary" }, val));
 }
 function ConfigurationPanel() {
   const document2 = useDocument();
@@ -3481,55 +3829,55 @@ function ConfigurationPanel() {
   const { data, type } = block;
   switch (type) {
     case "Avatar":
-      return /* @__PURE__ */ React60__default.default.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React58__default.default.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Button":
-      return /* @__PURE__ */ React60__default.default.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React58__default.default.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "ColumnsContainer":
-      return /* @__PURE__ */ React60__default.default.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React58__default.default.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Container":
-      return /* @__PURE__ */ React60__default.default.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React58__default.default.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Divider":
-      return /* @__PURE__ */ React60__default.default.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React58__default.default.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Heading":
-      return /* @__PURE__ */ React60__default.default.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React58__default.default.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Html":
-      return /* @__PURE__ */ React60__default.default.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React58__default.default.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Image":
-      return /* @__PURE__ */ React60__default.default.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React58__default.default.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "EmailLayout":
-      return /* @__PURE__ */ React60__default.default.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React58__default.default.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Spacer":
-      return /* @__PURE__ */ React60__default.default.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React58__default.default.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Signature":
-      return /* @__PURE__ */ React60__default.default.createElement(SignatureSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React58__default.default.createElement(SignatureSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Text":
-      return /* @__PURE__ */ React60__default.default.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React58__default.default.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     default:
-      return /* @__PURE__ */ React60__default.default.createElement("pre", null, JSON.stringify(block, null, "  "));
+      return /* @__PURE__ */ React58__default.default.createElement("pre", null, JSON.stringify(block, null, "  "));
   }
 }
 function StylesPanel() {
   const block = useDocument().root;
   if (!block) {
-    return /* @__PURE__ */ React60__default.default.createElement("p", null, "Block not found");
+    return /* @__PURE__ */ React58__default.default.createElement("p", null, "Block not found");
   }
   const { data, type } = block;
   if (type !== "EmailLayout") {
     throw new Error('Expected "root" element to be of type EmailLayout');
   }
-  return /* @__PURE__ */ React60__default.default.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
+  return /* @__PURE__ */ React58__default.default.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
 }
 function TemplateDownloadButton() {
   const doc = useDocument();
-  const href = React60.useMemo(() => {
+  const href = React58.useMemo(() => {
     return `data:text/plain,${encodeURIComponent(JSON.stringify(doc, null, "  "))}`;
   }, [doc]);
-  return /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(
     material.Button,
     {
       variant: "outlined",
       color: "primary",
-      startIcon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FileDownloadOutlined, null),
+      startIcon: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.FileDownloadOutlined, null),
       href,
       download: "emailTemplate.json",
       fullWidth: true
@@ -3561,9 +3909,9 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
     }
   };
   if (!currentTemplateId) {
-    return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected");
+    return /* @__PURE__ */ React58__default.default.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected");
   }
-  return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(React58__default.default.Fragment, null, /* @__PURE__ */ React58__default.default.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React58__default.default.createElement(material.Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React58__default.default.createElement(
     material.Typography,
     {
       variant: "body2",
@@ -3576,110 +3924,449 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
       }
     },
     "Save functionality is disabled. To enable saving, provide the necessary callback functions."
-  ), persistenceEnabled && /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
+  ), persistenceEnabled && /* @__PURE__ */ React58__default.default.createElement(React58__default.default.Fragment, null, /* @__PURE__ */ React58__default.default.createElement(
     material.Button,
     {
       variant: "outlined",
       color: "primary",
-      startIcon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ContentCopyOutlined, null),
+      startIcon: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.ContentCopyOutlined, null),
       onClick: handleCopyToSamples,
       fullWidth: true,
       disabled: !copyTemplate
     },
     "Save as Sample Template"
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     material.Button,
     {
       variant: "outlined",
       color: "error",
-      startIcon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.DeleteOutlined, null),
+      startIcon: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.DeleteOutlined, null),
       onClick: handleDelete,
       fullWidth: true,
       disabled: !deleteTemplate
     },
     "Delete Template"
-  )))), persistenceEnabled && /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 2 }, /* @__PURE__ */ React60__default.default.createElement(TemplateDownloadButton, null))));
+  )))), persistenceEnabled && /* @__PURE__ */ React58__default.default.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React58__default.default.createElement(material.Stack, { spacing: 2 }, /* @__PURE__ */ React58__default.default.createElement(TemplateDownloadButton, null))));
 }
+
+// src/app/variables/variable-utils.ts
 var VARIABLE_NAME_RE = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
-function validateName(name, index, all) {
-  if (!name.trim()) return "Name is required";
-  if (!VARIABLE_NAME_RE.test(name)) return "Use letters, digits, underscore; start with a letter or underscore";
-  const duplicate = all.some((v, i) => i !== index && v.name === name);
+var MAX_VARIABLE_NAME_LENGTH = 64;
+var RESERVED_VARIABLE_NAMES = /* @__PURE__ */ new Set(["this", "true", "false", "null", "undefined"]);
+var HANDLEBARS_KEYWORDS = /* @__PURE__ */ new Set(["if", "each", "unless", "else", "with"]);
+function validateVariableName(name, siblings, indexBeingEdited) {
+  const trimmed = name.trim();
+  if (!trimmed) return "Name is required";
+  if (trimmed.length > MAX_VARIABLE_NAME_LENGTH) return `Max ${MAX_VARIABLE_NAME_LENGTH} characters`;
+  if (!VARIABLE_NAME_RE.test(trimmed)) return "Use letters, digits, underscore; start with a letter or underscore";
+  if (RESERVED_VARIABLE_NAMES.has(trimmed)) return "Reserved word; pick another name";
+  const duplicate = siblings.some((v, i) => i !== indexBeingEdited && v.name === trimmed);
   if (duplicate) return "Already declared";
   return null;
 }
+var TOKEN_ROOT_RE = /\{\{\s*(?:#(?:if|each|unless|with)\s+)?([a-zA-Z_][a-zA-Z0-9_]*)(?:\.[\w.]+)?\s*\}\}/g;
+function extractTokenRoots(text) {
+  if (!text) return [];
+  const roots = /* @__PURE__ */ new Set();
+  for (const m of text.matchAll(TOKEN_ROOT_RE)) {
+    const name = m[1];
+    if (RESERVED_VARIABLE_NAMES.has(name) || HANDLEBARS_KEYWORDS.has(name)) continue;
+    roots.add(name);
+  }
+  return [...roots];
+}
+function forEachTextFieldInDocument(doc, visit) {
+  var _a, _b;
+  const root = doc.root;
+  if (root && root.type === "EmailLayout" && typeof ((_a = root.data) == null ? void 0 : _a.subject) === "string") {
+    visit(root.data.subject);
+  }
+  for (const [id, block] of Object.entries(doc)) {
+    if (id === "root" || !block || typeof block !== "object") continue;
+    const type = block.type;
+    const props = (_b = block.data) == null ? void 0 : _b.props;
+    if (!props) continue;
+    if ((type === "Text" || type === "Heading" || type === "Button") && typeof props.text === "string") {
+      visit(props.text);
+    } else if (type === "Html" && typeof props.contents === "string") {
+      visit(props.contents);
+    }
+  }
+}
+function collectTokenUsage(doc) {
+  const usage = /* @__PURE__ */ new Map();
+  forEachTextFieldInDocument(doc, (value) => {
+    var _a;
+    for (const root of extractTokenRoots(value)) {
+      usage.set(root, ((_a = usage.get(root)) != null ? _a : 0) + 1);
+    }
+  });
+  return usage;
+}
+function escapeRegex(name) {
+  return name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function buildRenameReplacers(oldName, newName) {
+  const esc = escapeRegex(oldName);
+  const simple = new RegExp(`\\{\\{\\s*${esc}(\\.[\\w.]+)?\\s*\\}\\}`, "g");
+  const helper = new RegExp(`(\\{\\{\\s*#(?:if|each|unless|with)\\s+)${esc}(\\.[\\w.]+)?(\\s*\\}\\})`, "g");
+  return (text) => text.replace(helper, `$1${newName}$2$3`).replace(simple, `{{${newName}$1}}`);
+}
+function buildRenamePatch(doc, oldName, newName) {
+  var _a;
+  if (oldName === newName) return {};
+  const rewrite = buildRenameReplacers(oldName, newName);
+  const patch = {};
+  const root = doc.root;
+  if (root && root.type === "EmailLayout") {
+    const layoutData = root.data;
+    const oldSubject = (_a = layoutData.subject) != null ? _a : "";
+    const newSubject = rewrite(oldSubject);
+    if (newSubject !== oldSubject) {
+      patch.root = __spreadProps(__spreadValues({}, root), { data: __spreadProps(__spreadValues({}, layoutData), { subject: newSubject }) });
+    }
+  }
+  for (const [id, block] of Object.entries(doc)) {
+    if (id === "root" || !block || typeof block !== "object") continue;
+    const type = block.type;
+    const data = block.data;
+    const props = data == null ? void 0 : data.props;
+    if (!props) continue;
+    if ((type === "Text" || type === "Heading" || type === "Button") && typeof props.text === "string") {
+      const nextText = rewrite(props.text);
+      if (nextText !== props.text) {
+        patch[id] = __spreadProps(__spreadValues({}, block), { data: __spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, props), { text: nextText }) }) });
+      }
+    } else if (type === "Html" && typeof props.contents === "string") {
+      const nextContents = rewrite(props.contents);
+      if (nextContents !== props.contents) {
+        patch[id] = __spreadProps(__spreadValues({}, block), { data: __spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, props), { contents: nextContents }) }) });
+      }
+    }
+  }
+  return patch;
+}
+function substituteSampleValues(text, samples) {
+  if (!text) return text;
+  let out = text;
+  out = out.replace(
+    /\{\{\s*#(?:if|each|unless|with)\s+[^}]*\}\}/g,
+    ""
+  );
+  out = out.replace(/\{\{\s*\/(?:if|each|unless|with)\s*\}\}/g, "");
+  out = out.replace(/\{\{\s*else\s*\}\}/g, "");
+  out = out.replace(TOKEN_ROOT_RE, (match, root) => {
+    var _a;
+    if (!samples.has(root)) return match;
+    return (_a = samples.get(root)) != null ? _a : "";
+  });
+  return out;
+}
+function buildSampleValueMap(variables) {
+  const m = /* @__PURE__ */ new Map();
+  if (!variables) return m;
+  for (const v of variables) {
+    if (v.name && typeof v.sampleValue === "string" && v.sampleValue.length > 0) {
+      m.set(v.name, v.sampleValue);
+    }
+  }
+  return m;
+}
+function applySampleValuesToDocument(doc, samples) {
+  if (samples.size === 0) return doc;
+  const next = __spreadValues({}, doc);
+  const root = doc.root;
+  if (root && root.type === "EmailLayout") {
+    const layoutData = root.data;
+    if (typeof layoutData.subject === "string") {
+      const newSubject = substituteSampleValues(layoutData.subject, samples);
+      if (newSubject !== layoutData.subject) {
+        next.root = __spreadProps(__spreadValues({}, root), { data: __spreadProps(__spreadValues({}, layoutData), { subject: newSubject }) });
+      }
+    }
+  }
+  for (const [id, block] of Object.entries(doc)) {
+    if (id === "root" || !block || typeof block !== "object") continue;
+    const type = block.type;
+    const data = block.data;
+    const props = data == null ? void 0 : data.props;
+    if (!props) continue;
+    if ((type === "Text" || type === "Heading" || type === "Button") && typeof props.text === "string") {
+      const newText = substituteSampleValues(props.text, samples);
+      if (newText !== props.text) {
+        next[id] = __spreadProps(__spreadValues({}, block), { data: __spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, props), { text: newText }) }) });
+      }
+    } else if (type === "Html" && typeof props.contents === "string") {
+      const newContents = substituteSampleValues(props.contents, samples);
+      if (newContents !== props.contents) {
+        next[id] = __spreadProps(__spreadValues({}, block), { data: __spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, props), { contents: newContents }) }) });
+      }
+    }
+  }
+  return next;
+}
+
+// src/app/inspector-drawer/variables-panel.tsx
+function toPersistShape(v) {
+  return {
+    name: v.name,
+    description: v.description ? v.description : void 0,
+    sampleValue: v.sampleValue ? v.sampleValue : void 0
+  };
+}
 function VariablesPanel() {
   var _a;
   const document2 = useDocument();
+  const lastFocused = useLastFocusedEditable();
   const root = document2.root;
   if (!root || root.type !== "EmailLayout") {
-    return /* @__PURE__ */ React60__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React60__default.default.createElement(material.Alert, { severity: "info" }, "Open a template to manage variables."));
+    return /* @__PURE__ */ React58__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React58__default.default.createElement(material.Alert, { severity: "info" }, "Open a template to manage variables."));
   }
   const data = root.data;
   const variables = ((_a = data.variables) != null ? _a : []).map((v) => {
-    var _a2;
+    var _a2, _b;
     return {
       name: v.name,
-      description: (_a2 = v.description) != null ? _a2 : ""
+      description: (_a2 = v.description) != null ? _a2 : "",
+      sampleValue: (_b = v.sampleValue) != null ? _b : ""
     };
   });
-  const commit = (next) => {
-    setDocument({
-      root: __spreadProps(__spreadValues({}, root), {
-        data: __spreadProps(__spreadValues({}, data), {
-          variables: next.map((v) => ({
-            name: v.name,
-            description: v.description ? v.description : void 0
-          }))
-        })
+  const usage = React58.useMemo(() => collectTokenUsage(document2), [document2]);
+  const declaredNames = React58.useMemo(() => new Set(variables.map((v) => v.name)), [variables]);
+  const undeclared = React58.useMemo(
+    () => [...usage.keys()].filter((n) => n && !declaredNames.has(n)),
+    [usage, declaredNames]
+  );
+  const writeVariables = (next, extraPatch = {}) => {
+    var _a2;
+    const baseRoot = (_a2 = extraPatch.root) != null ? _a2 : root;
+    const newRoot = __spreadProps(__spreadValues({}, baseRoot), {
+      data: __spreadProps(__spreadValues({}, baseRoot.data), {
+        variables: next.map(toPersistShape)
       })
     });
+    setDocument(__spreadProps(__spreadValues({}, extraPatch), { root: newRoot }));
   };
   const updateAt = (index, patch) => {
     const next = variables.map((v, i) => i === index ? __spreadValues(__spreadValues({}, v), patch) : v);
-    commit(next);
+    writeVariables(next);
   };
   const add = () => {
-    commit([...variables, { name: "", description: "" }]);
+    writeVariables([...variables, { name: "", description: "", sampleValue: "" }]);
+  };
+  const addFromToken = (name) => {
+    writeVariables([...variables, { name, description: "", sampleValue: "" }]);
   };
   const removeAt = (index) => {
-    commit(variables.filter((_, i) => i !== index));
+    var _a2;
+    const v = variables[index];
+    const usageCount = v.name ? (_a2 = usage.get(v.name)) != null ? _a2 : 0 : 0;
+    if (usageCount > 0) {
+      const ok = window.confirm(
+        `"${v.name}" is still referenced in the body (${usageCount} occurrence${usageCount === 1 ? "" : "s"}). Delete anyway?`
+      );
+      if (!ok) return;
+    }
+    writeVariables(variables.filter((_, i) => i !== index));
+  };
+  const commitRename = (index, newName) => {
+    const oldName = variables[index].name;
+    const trimmed = newName.trim();
+    if (trimmed === oldName) return;
+    const error = validateVariableName(trimmed, variables, index);
+    if (error) return;
+    const patch = oldName ? buildRenamePatch(document2, oldName, trimmed) : {};
+    const next = variables.map((v, i) => i === index ? __spreadProps(__spreadValues({}, v), { name: trimmed }) : v);
+    writeVariables(next, patch);
   };
-  return /* @__PURE__ */ React60__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { mb: 1 } }, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600 } }, "Variables"), /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Add variable" }, /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { size: "small", onClick: add, "aria-label": "Add variable" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })))), /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mb: 2 } }, "Declared variables travel with the template. Reference them in subject and body as", " ", /* @__PURE__ */ React60__default.default.createElement(material.Box, { component: "code", sx: { fontFamily: "monospace" } }, "{{name}}"), "."), variables.length === 0 ? /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary" } }, "No variables declared. Click + to add one.") : /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 2 }, variables.map((v, i) => {
+  const canInsert = Boolean(
+    lastFocused && (lastFocused.field === "subject" || lastFocused.blockId && document2[lastFocused.blockId])
+  );
+  const insertIntoFocused = (name) => {
+    var _a2, _b, _c;
+    const focused = getLastFocusedEditable();
+    if (!focused) return;
+    const token = `{{${name}}}`;
+    if (focused.field === "subject") {
+      const layoutData = root.data;
+      const current2 = (_a2 = layoutData.subject) != null ? _a2 : "";
+      const next2 = current2.slice(0, focused.selectionStart) + token + current2.slice(focused.selectionEnd);
+      setDocument({
+        root: __spreadProps(__spreadValues({}, root), { data: __spreadProps(__spreadValues({}, layoutData), { subject: next2 }) })
+      });
+      return;
+    }
+    const block = document2[focused.blockId];
+    if (!block) return;
+    const blockData = block.data;
+    const props = (_b = blockData == null ? void 0 : blockData.props) != null ? _b : {};
+    const field = focused.field;
+    const current = (_c = props[field]) != null ? _c : "";
+    const next = current.slice(0, focused.selectionStart) + token + current.slice(focused.selectionEnd);
+    setDocument({
+      [focused.blockId]: __spreadProps(__spreadValues({}, block), {
+        data: __spreadProps(__spreadValues({}, blockData), { props: __spreadProps(__spreadValues({}, props), { [field]: next }) })
+      })
+    });
+  };
+  const copy = (name) => __async(null, null, function* () {
+    try {
+      yield navigator.clipboard.writeText(`{{${name}}}`);
+    } catch (e) {
+    }
+  });
+  return /* @__PURE__ */ React58__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { mb: 1 } }, /* @__PURE__ */ React58__default.default.createElement(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600 } }, "Variables"), /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Add variable" }, /* @__PURE__ */ React58__default.default.createElement(material.IconButton, { size: "small", onClick: add, "aria-label": "Add variable" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })))), /* @__PURE__ */ React58__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mb: 2 } }, "Declared variables travel with the template. Reference them in subject and body as", " ", /* @__PURE__ */ React58__default.default.createElement(material.Box, { component: "code", sx: { fontFamily: "monospace" } }, "{{name}}"), ". In Preview mode, tokens render with the sample values below."), undeclared.length > 0 && /* @__PURE__ */ React58__default.default.createElement(material.Alert, { severity: "warning", sx: { mb: 2 } }, /* @__PURE__ */ React58__default.default.createElement(material.AlertTitle, { sx: { fontSize: 13 } }, "Undeclared in body"), /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, useFlexGap: true, flexWrap: "wrap" }, undeclared.map((name) => /* @__PURE__ */ React58__default.default.createElement(
+    material.Chip,
+    {
+      key: name,
+      size: "small",
+      label: name,
+      onClick: () => addFromToken(name),
+      onDelete: () => addFromToken(name),
+      deleteIcon: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.AddOutlined, null),
+      sx: { fontFamily: "monospace" }
+    }
+  ))), /* @__PURE__ */ React58__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 0.5 } }, "Click a token to declare it.")), variables.length === 0 ? /* @__PURE__ */ React58__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary" } }, "No variables declared. Click + to add one.") : /* @__PURE__ */ React58__default.default.createElement(material.Stack, { spacing: 2 }, variables.map((v, i) => {
     var _a2;
-    const nameError = validateName(v.name, i, variables);
-    return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { key: i, spacing: 0.75, sx: { pb: 1, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React60__default.default.createElement(
-      material.TextField,
+    return /* @__PURE__ */ React58__default.default.createElement(
+      VariableRow,
       {
-        label: "Name",
-        size: "small",
-        fullWidth: true,
-        value: v.name,
-        onChange: (e) => updateAt(i, { name: e.target.value }),
-        error: Boolean(nameError),
-        helperText: nameError != null ? nameError : " "
+        key: i,
+        index: i,
+        variable: v,
+        siblings: variables,
+        usageCount: v.name ? (_a2 = usage.get(v.name)) != null ? _a2 : 0 : 0,
+        canInsert,
+        onCommitRename: (name) => commitRename(i, name),
+        onChangeDescription: (description) => updateAt(i, { description }),
+        onChangeSampleValue: (sampleValue) => updateAt(i, { sampleValue }),
+        onRemove: () => removeAt(i),
+        onInsert: () => v.name && insertIntoFocused(v.name),
+        onCopy: () => v.name && copy(v.name)
       }
-    ), /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Remove" }, /* @__PURE__ */ React60__default.default.createElement(
-      material.IconButton,
-      {
-        size: "small",
-        onClick: () => removeAt(i),
-        "aria-label": `Remove ${v.name || "variable"}`,
-        sx: { mt: 0.5 }
+    );
+  })));
+}
+function VariableRow({
+  index,
+  variable,
+  siblings,
+  usageCount,
+  canInsert,
+  onCommitRename,
+  onChangeDescription,
+  onChangeSampleValue,
+  onRemove,
+  onInsert,
+  onCopy
+}) {
+  var _a, _b;
+  const [draftName, setDraftName] = React58.useState(variable.name);
+  const [isEditing, setIsEditing] = React58.useState(false);
+  React58.useEffect(() => {
+    if (!isEditing) setDraftName(variable.name);
+  }, [variable.name, isEditing]);
+  const nameError = validateVariableName(draftName, siblings, index);
+  const unused = Boolean(variable.name) && usageCount === 0;
+  const hasName = Boolean(variable.name);
+  const commit = () => {
+    setIsEditing(false);
+    if (nameError) {
+      setDraftName(variable.name);
+      return;
+    }
+    if (draftName.trim() !== variable.name) {
+      onCommitRename(draftName.trim());
+    }
+  };
+  return /* @__PURE__ */ React58__default.default.createElement(material.Stack, { spacing: 0.75, sx: { pb: 1, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React58__default.default.createElement(
+    material.TextField,
+    {
+      label: "Name",
+      size: "small",
+      fullWidth: true,
+      value: draftName,
+      onChange: (e) => {
+        setDraftName(e.target.value);
+        setIsEditing(true);
       },
-      /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.DeleteOutline, { fontSize: "small" })
-    ))), /* @__PURE__ */ React60__default.default.createElement(
-      material.TextField,
-      {
-        label: "Description",
-        size: "small",
-        fullWidth: true,
-        value: (_a2 = v.description) != null ? _a2 : "",
-        onChange: (e) => updateAt(i, { description: e.target.value }),
-        placeholder: "Optional"
+      onFocus: () => setIsEditing(true),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.target.blur();
+        } else if (e.key === "Escape") {
+          setDraftName(variable.name);
+          setIsEditing(false);
+          e.target.blur();
+        }
+      },
+      error: Boolean(nameError),
+      helperText: nameError != null ? nameError : " "
+    }
+  ), /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", spacing: 0.25, sx: { mt: 0.5 } }, /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Copy {{name}}" }, /* @__PURE__ */ React58__default.default.createElement("span", null, /* @__PURE__ */ React58__default.default.createElement(
+    material.IconButton,
+    {
+      size: "small",
+      onClick: onCopy,
+      disabled: !hasName,
+      "aria-label": `Copy ${variable.name || "variable"} token`
+    },
+    /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" })
+  ))), /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: canInsert ? "Insert at cursor" : "Focus a text field first" }, /* @__PURE__ */ React58__default.default.createElement("span", null, /* @__PURE__ */ React58__default.default.createElement(
+    material.IconButton,
+    {
+      size: "small",
+      onClick: onInsert,
+      disabled: !hasName || !canInsert,
+      "aria-label": `Insert ${variable.name || "variable"} at cursor`
+    },
+    /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.InputOutlined, { fontSize: "small" })
+  ))), /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Remove" }, /* @__PURE__ */ React58__default.default.createElement(
+    material.IconButton,
+    {
+      size: "small",
+      onClick: onRemove,
+      "aria-label": `Remove ${variable.name || "variable"}`
+    },
+    /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.DeleteOutline, { fontSize: "small" })
+  )))), /* @__PURE__ */ React58__default.default.createElement(
+    material.TextField,
+    {
+      label: "Description",
+      size: "small",
+      fullWidth: true,
+      value: (_a = variable.description) != null ? _a : "",
+      onChange: (e) => onChangeDescription(e.target.value),
+      placeholder: "Optional"
+    }
+  ), /* @__PURE__ */ React58__default.default.createElement(
+    material.TextField,
+    {
+      label: "Sample value",
+      size: "small",
+      fullWidth: true,
+      value: (_b = variable.sampleValue) != null ? _b : "",
+      onChange: (e) => onChangeSampleValue(e.target.value),
+      placeholder: "Shown in Preview mode",
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React58__default.default.createElement(
+          iconsMaterial.DataObjectOutlined,
+          {
+            fontSize: "small",
+            sx: { color: "text.secondary", mr: 0.75 }
+          }
+        )
       }
-    ));
-  })));
+    }
+  ), /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, sx: { pt: 0.25 } }, hasName && (unused ? /* @__PURE__ */ React58__default.default.createElement(material.Chip, { size: "small", color: "warning", variant: "outlined", label: "Unused in body" }) : /* @__PURE__ */ React58__default.default.createElement(
+    material.Chip,
+    {
+      size: "small",
+      variant: "outlined",
+      label: `${usageCount} ref${usageCount === 1 ? "" : "s"}`
+    }
+  ))));
 }
 
 // src/app/inspector-drawer/index.tsx
@@ -3696,13 +4383,13 @@ function InspectorDrawer({
   const renderCurrentSidebarPanel = () => {
     switch (selectedSidebarTab) {
       case "block-configuration":
-        return /* @__PURE__ */ React60__default.default.createElement(ConfigurationPanel, null);
+        return /* @__PURE__ */ React58__default.default.createElement(ConfigurationPanel, null);
       case "styles":
-        return /* @__PURE__ */ React60__default.default.createElement(StylesPanel, null);
+        return /* @__PURE__ */ React58__default.default.createElement(StylesPanel, null);
       case "variables":
-        return /* @__PURE__ */ React60__default.default.createElement(VariablesPanel, null);
+        return /* @__PURE__ */ React58__default.default.createElement(VariablesPanel, null);
       case "template-settings":
-        return /* @__PURE__ */ React60__default.default.createElement(
+        return /* @__PURE__ */ React58__default.default.createElement(
           TemplatePanel,
           {
             deleteTemplate,
@@ -3711,7 +4398,7 @@ function InspectorDrawer({
         );
     }
   };
-  return /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(
     material.Drawer,
     {
       variant: "persistent",
@@ -3733,7 +4420,7 @@ function InspectorDrawer({
         width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0
       }
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React60__default.default.createElement(material.Box, { px: 1 }, /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React58__default.default.createElement(material.Box, { px: 1 }, /* @__PURE__ */ React58__default.default.createElement(
       material.Tabs,
       {
         value: selectedSidebarTab,
@@ -3741,25 +4428,25 @@ function InspectorDrawer({
         variant: "fullWidth",
         sx: { "& .MuiTab-root": { minWidth: 0, px: 1, fontSize: 13 } }
       },
-      /* @__PURE__ */ React60__default.default.createElement(material.Tab, { value: "styles", label: "Styles" }),
-      /* @__PURE__ */ React60__default.default.createElement(material.Tab, { value: "block-configuration", label: "Inspect" }),
-      /* @__PURE__ */ React60__default.default.createElement(material.Tab, { value: "variables", label: "Variables" }),
-      /* @__PURE__ */ React60__default.default.createElement(material.Tab, { value: "template-settings", label: "Settings" })
+      /* @__PURE__ */ React58__default.default.createElement(material.Tab, { value: "styles", label: "Styles" }),
+      /* @__PURE__ */ React58__default.default.createElement(material.Tab, { value: "block-configuration", label: "Inspect" }),
+      /* @__PURE__ */ React58__default.default.createElement(material.Tab, { value: "variables", label: "Variables" }),
+      /* @__PURE__ */ React58__default.default.createElement(material.Tab, { value: "template-settings", label: "Settings" })
     ))),
-    /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
+    /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
   );
 }
-var SnackbarContext = React60.createContext(null);
+var SnackbarContext = React58.createContext(null);
 function useSnackbar() {
-  const context = React60.useContext(SnackbarContext);
+  const context = React58.useContext(SnackbarContext);
   if (!context) {
     throw new Error("useSnackbar must be used within a SnackbarProvider");
   }
   return context;
 }
 function SnackbarProvider({ children }) {
-  const [message, setMessage] = React60.useState(null);
-  const [duration, setDuration] = React60.useState(3e3);
+  const [message, setMessage] = React58.useState(null);
+  const [duration, setDuration] = React58.useState(3e3);
   const showMessage = (text, customDuration = 3e3) => {
     setMessage(text);
     setDuration(customDuration);
@@ -3767,7 +4454,7 @@ function SnackbarProvider({ children }) {
   const handleClose = () => {
     setMessage(null);
   };
-  return /* @__PURE__ */ React60__default.default.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React58__default.default.createElement(
     material.Snackbar,
     {
       anchorOrigin: { vertical: "top", horizontal: "center" },
@@ -3814,7 +4501,7 @@ function TemplateRow({
   onDuplicateAsTemplate
 }) {
   const { setCurrentTemplate } = useEmailEditor();
-  const [hover, setHover] = React60.useState(false);
+  const [hover, setHover] = React58.useState(false);
   const handleClick = () => __async(null, null, function* () {
     try {
       const content = yield templateLoader();
@@ -3833,7 +4520,7 @@ function TemplateRow({
   const hasActions = Boolean(
     onDuplicate || onRename || onDelete || onPromote || onDemote || onDuplicateAsTemplate
   );
-  return /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(
     material.Box,
     {
       role: "button",
@@ -3859,7 +4546,7 @@ function TemplateRow({
         "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main" }
       }
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", alignItems: "flex-start", spacing: 1 }, /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { flexGrow: 1, minWidth: 0 } }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", alignItems: "baseline", spacing: 1, sx: { minWidth: 0 } }, /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", alignItems: "flex-start", spacing: 1 }, /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: { flexGrow: 1, minWidth: 0 } }, /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", alignItems: "baseline", spacing: 1, sx: { minWidth: 0 } }, /* @__PURE__ */ React58__default.default.createElement(
       material.Typography,
       {
         variant: "body2",
@@ -3873,14 +4560,14 @@ function TemplateRow({
         title: template.slug
       },
       template.slug
-    ), updated && /* @__PURE__ */ React60__default.default.createElement(
+    ), updated && /* @__PURE__ */ React58__default.default.createElement(
       material.Typography,
       {
         variant: "caption",
         sx: { color: "text.secondary", flexShrink: 0, fontSize: "0.7rem" }
       },
       updated
-    )), template.description && /* @__PURE__ */ React60__default.default.createElement(
+    )), template.description && /* @__PURE__ */ React58__default.default.createElement(
       material.Typography,
       {
         variant: "caption",
@@ -3894,7 +4581,7 @@ function TemplateRow({
         }
       },
       template.description
-    ), template.tags && template.tags.length > 0 && /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, sx: { mt: 0.5, flexWrap: "wrap", gap: 0.5 } }, template.tags.map((tag) => /* @__PURE__ */ React60__default.default.createElement(
+    ), template.tags && template.tags.length > 0 && /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, sx: { mt: 0.5, flexWrap: "wrap", gap: 0.5 } }, template.tags.map((tag) => /* @__PURE__ */ React58__default.default.createElement(
       material.Chip,
       {
         key: tag,
@@ -3903,7 +4590,7 @@ function TemplateRow({
         sx: { height: 18, fontSize: "0.65rem", "& .MuiChip-label": { px: 0.75 } }
       }
     ))))),
-    hasActions && hover && /* @__PURE__ */ React60__default.default.createElement(
+    hasActions && hover && /* @__PURE__ */ React58__default.default.createElement(
       material.Stack,
       {
         direction: "row",
@@ -3919,7 +4606,7 @@ function TemplateRow({
           p: 0.25
         }
       },
-      onDuplicateAsTemplate && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Duplicate as template" }, /* @__PURE__ */ React60__default.default.createElement(
+      onDuplicateAsTemplate && /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Duplicate as template" }, /* @__PURE__ */ React58__default.default.createElement(
         material.IconButton,
         {
           size: "small",
@@ -3928,9 +4615,9 @@ function TemplateRow({
             onDuplicateAsTemplate();
           }
         },
-        /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.LibraryAddOutlined, { fontSize: "small" })
+        /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.LibraryAddOutlined, { fontSize: "small" })
       )),
-      onDuplicate && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Duplicate" }, /* @__PURE__ */ React60__default.default.createElement(
+      onDuplicate && /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Duplicate" }, /* @__PURE__ */ React58__default.default.createElement(
         material.IconButton,
         {
           size: "small",
@@ -3939,9 +4626,9 @@ function TemplateRow({
             onDuplicate();
           }
         },
-        /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" })
+        /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" })
       )),
-      onRename && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Rename" }, /* @__PURE__ */ React60__default.default.createElement(
+      onRename && /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Rename" }, /* @__PURE__ */ React58__default.default.createElement(
         material.IconButton,
         {
           size: "small",
@@ -3950,9 +4637,9 @@ function TemplateRow({
             onRename();
           }
         },
-        /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.DriveFileRenameOutlineOutlined, { fontSize: "small" })
+        /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.DriveFileRenameOutlineOutlined, { fontSize: "small" })
       )),
-      onPromote && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Promote to sample" }, /* @__PURE__ */ React60__default.default.createElement(
+      onPromote && /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Promote to sample" }, /* @__PURE__ */ React58__default.default.createElement(
         material.IconButton,
         {
           size: "small",
@@ -3961,9 +4648,9 @@ function TemplateRow({
             onPromote();
           }
         },
-        /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FileUploadOutlined, { fontSize: "small" })
+        /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.FileUploadOutlined, { fontSize: "small" })
       )),
-      onDemote && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Demote to template" }, /* @__PURE__ */ React60__default.default.createElement(
+      onDemote && /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Demote to template" }, /* @__PURE__ */ React58__default.default.createElement(
         material.IconButton,
         {
           size: "small",
@@ -3972,9 +4659,9 @@ function TemplateRow({
             onDemote();
           }
         },
-        /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FileDownloadOutlined, { fontSize: "small" })
+        /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.FileDownloadOutlined, { fontSize: "small" })
       )),
-      onDelete && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Delete" }, /* @__PURE__ */ React60__default.default.createElement(
+      onDelete && /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Delete" }, /* @__PURE__ */ React58__default.default.createElement(
         material.IconButton,
         {
           size: "small",
@@ -3983,7 +4670,7 @@ function TemplateRow({
             onDelete();
           }
         },
-        /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.DeleteOutlined, { fontSize: "small" })
+        /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.DeleteOutlined, { fontSize: "small" })
       ))
     )
   );
@@ -3995,10 +4682,10 @@ function RenameDialog({
   onClose,
   onSubmit
 }) {
-  const [value, setValue] = React60.useState(currentSlug);
-  const [error, setError] = React60.useState(null);
-  const [submitting, setSubmitting] = React60.useState(false);
-  React60.useEffect(() => {
+  const [value, setValue] = React58.useState(currentSlug);
+  const [error, setError] = React58.useState(null);
+  const [submitting, setSubmitting] = React58.useState(false);
+  React58.useEffect(() => {
     if (open) {
       setValue(currentSlug);
       setError(null);
@@ -4034,7 +4721,7 @@ function RenameDialog({
       setSubmitting(false);
     }
   });
-  return /* @__PURE__ */ React60__default.default.createElement(material.Dialog, { open, onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React60__default.default.createElement(material.DialogTitle, null, "Rename template"), /* @__PURE__ */ React60__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(material.Dialog, { open, onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React58__default.default.createElement(material.DialogTitle, null, "Rename template"), /* @__PURE__ */ React58__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React58__default.default.createElement(
     material.TextField,
     {
       autoFocus: true,
@@ -4053,7 +4740,7 @@ function RenameDialog({
         }
       }
     }
-  )), /* @__PURE__ */ React60__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React60__default.default.createElement(material.Button, { onClick: onClose, disabled: submitting }, "Cancel"), /* @__PURE__ */ React60__default.default.createElement(
+  )), /* @__PURE__ */ React58__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React58__default.default.createElement(material.Button, { onClick: onClose, disabled: submitting }, "Cancel"), /* @__PURE__ */ React58__default.default.createElement(
     material.Button,
     {
       onClick: handleSubmit,
@@ -4071,10 +4758,10 @@ function SaveTemplateDialog({
   defaultName = "",
   error: externalError = null
 }) {
-  const [templateName, setTemplateName] = React60.useState(defaultName);
-  const [internalError, setInternalError] = React60.useState("");
-  const [isSubmitting, setIsSubmitting] = React60.useState(false);
-  React60.useEffect(() => {
+  const [templateName, setTemplateName] = React58.useState(defaultName);
+  const [internalError, setInternalError] = React58.useState("");
+  const [isSubmitting, setIsSubmitting] = React58.useState(false);
+  React58.useEffect(() => {
     if (open) {
       setTemplateName(defaultName);
       setInternalError("");
@@ -4122,7 +4809,7 @@ function SaveTemplateDialog({
     setInternalError("");
     onClose();
   };
-  return /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(
     material.Dialog,
     {
       open,
@@ -4130,8 +4817,8 @@ function SaveTemplateDialog({
       maxWidth: "sm",
       fullWidth: true
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.DialogTitle, null, "Save Email Template"),
-    /* @__PURE__ */ React60__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { pt: 1 } }, /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(material.DialogTitle, null, "Save Email Template"),
+    /* @__PURE__ */ React58__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: { pt: 1 } }, /* @__PURE__ */ React58__default.default.createElement(
       material.TextField,
       {
         autoFocus: true,
@@ -4153,7 +4840,7 @@ function SaveTemplateDialog({
         disabled: isSubmitting
       }
     ))),
-    /* @__PURE__ */ React60__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React60__default.default.createElement(material.Button, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React58__default.default.createElement(material.Button, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React58__default.default.createElement(
       material.Button,
       {
         onClick: handleSave,
@@ -4223,17 +4910,17 @@ function SamplesDrawer({
   const samplesDrawerOpen = useSamplesDrawerOpen();
   const { setCurrentTemplate, loadTemplate: ctxLoadTemplate } = useEmailEditor();
   const { showMessage } = useSnackbar();
-  const [samples, setSamples] = React60.useState([EMPTY_TEMPLATE]);
-  const [templates, setTemplates] = React60.useState([]);
-  const [loadingSamples, setLoadingSamples] = React60.useState(false);
-  const [loadingTemplates, setLoadingTemplates] = React60.useState(false);
-  const [templatesError, setTemplatesError] = React60.useState(null);
-  const [search, setSearch] = React60.useState("");
-  const [sortKey, setSortKey] = React60.useState("updatedAt");
-  const [activeTags, setActiveTags] = React60.useState([]);
-  const [renameTarget, setRenameTarget] = React60.useState(null);
-  const [pendingSaveAs, setPendingSaveAs] = React60.useState(null);
-  const [newError, setNewError] = React60.useState(null);
+  const [samples, setSamples] = React58.useState([EMPTY_TEMPLATE]);
+  const [templates, setTemplates] = React58.useState([]);
+  const [loadingSamples, setLoadingSamples] = React58.useState(false);
+  const [loadingTemplates, setLoadingTemplates] = React58.useState(false);
+  const [templatesError, setTemplatesError] = React58.useState(null);
+  const [search, setSearch] = React58.useState("");
+  const [sortKey, setSortKey] = React58.useState("updatedAt");
+  const [activeTags, setActiveTags] = React58.useState([]);
+  const [renameTarget, setRenameTarget] = React58.useState(null);
+  const [pendingSaveAs, setPendingSaveAs] = React58.useState(null);
+  const [newError, setNewError] = React58.useState(null);
   const handleLoadTemplate = (templateId) => __async(null, null, function* () {
     if (templateId === "empty-email") {
       return empty_email_message_default;
@@ -4244,7 +4931,7 @@ function SamplesDrawer({
     return null;
   });
   const withKind = (items, fallback) => items.map((item) => item.kind ? item : __spreadProps(__spreadValues({}, item), { kind: fallback }));
-  React60.useEffect(() => {
+  React58.useEffect(() => {
     if (!enabled || !samplesDrawerOpen || !loadSamples) return;
     setLoadingSamples(true);
     loadSamples().then((results) => {
@@ -4270,11 +4957,11 @@ function SamplesDrawer({
       setLoadingTemplates(false);
     }
   });
-  React60.useEffect(() => {
+  React58.useEffect(() => {
     if (!enabled || !loadTemplates) return;
     refreshTemplates();
   }, [enabled, loadTemplates]);
-  React60.useEffect(() => {
+  React58.useEffect(() => {
     const handler = (e) => {
       const detail = e.detail;
       if (Array.isArray(detail)) setTemplates(withKind(detail, "template"));
@@ -4282,7 +4969,7 @@ function SamplesDrawer({
     window.addEventListener("templateListUpdated", handler);
     return () => window.removeEventListener("templateListUpdated", handler);
   }, []);
-  const { templateRows, sampleRows } = React60.useMemo(() => {
+  const { templateRows, sampleRows } = React58.useMemo(() => {
     const byId = /* @__PURE__ */ new Map();
     for (const s of samples) byId.set(s.id, s);
     for (const t of templates) byId.set(t.id, t);
@@ -4292,7 +4979,7 @@ function SamplesDrawer({
       sampleRows: all.filter((t) => t.kind === "sample")
     };
   }, [samples, templates]);
-  const allTags = React60.useMemo(() => {
+  const allTags = React58.useMemo(() => {
     var _a2;
     const set = /* @__PURE__ */ new Set();
     for (const t of templateRows) {
@@ -4300,7 +4987,7 @@ function SamplesDrawer({
     }
     return Array.from(set).sort();
   }, [templateRows]);
-  const filteredTemplates = React60.useMemo(() => {
+  const filteredTemplates = React58.useMemo(() => {
     const term = search.trim().toLowerCase();
     const matchSearch = (t) => {
       if (!term) return true;
@@ -4419,7 +5106,7 @@ function SamplesDrawer({
     return null;
   }
   const existingSlugs = templates.map((t) => t.slug);
-  return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(React58__default.default.Fragment, null, /* @__PURE__ */ React58__default.default.createElement(
     material.Drawer,
     {
       variant: "persistent",
@@ -4434,7 +5121,7 @@ function SamplesDrawer({
       transitionDuration: { enter: enterDuration, exit: exitDuration },
       sx: { width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0 }
     },
-    /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(
       material.Stack,
       {
         py: 1,
@@ -4444,16 +5131,16 @@ function SamplesDrawer({
         spacing: 1.5,
         sx: { overflowY: "auto" }
       },
-      /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { pt: 1 } }, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "h6", component: "h1" }, "Templates"), saveAs && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "New template" }, /* @__PURE__ */ React60__default.default.createElement(
+      /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { pt: 1 } }, /* @__PURE__ */ React58__default.default.createElement(material.Typography, { variant: "h6", component: "h1" }, "Templates"), saveAs && /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "New template" }, /* @__PURE__ */ React58__default.default.createElement(
         material.IconButton,
         {
           size: "small",
           onClick: openNewTemplateDialog,
           "aria-label": "New template"
         },
-        /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
+        /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
       ))),
-      loadTemplates && /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
+      loadTemplates && /* @__PURE__ */ React58__default.default.createElement(React58__default.default.Fragment, null, /* @__PURE__ */ React58__default.default.createElement(
         material.TextField,
         {
           size: "small",
@@ -4461,10 +5148,10 @@ function SamplesDrawer({
           value: search,
           onChange: (e) => setSearch(e.target.value),
           InputProps: {
-            startAdornment: /* @__PURE__ */ React60__default.default.createElement(material.InputAdornment, { position: "start" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.SearchOutlined, { fontSize: "small" }))
+            startAdornment: /* @__PURE__ */ React58__default.default.createElement(material.InputAdornment, { position: "start" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.SearchOutlined, { fontSize: "small" }))
           }
         }
-      ), /* @__PURE__ */ React60__default.default.createElement(
+      ), /* @__PURE__ */ React58__default.default.createElement(
         material.TextField,
         {
           select: true,
@@ -4473,8 +5160,8 @@ function SamplesDrawer({
           value: sortKey,
           onChange: (e) => setSortKey(e.target.value)
         },
-        SORT_OPTIONS.map((opt) => /* @__PURE__ */ React60__default.default.createElement(material.MenuItem, { key: opt.value, value: opt.value }, opt.label))
-      ), allTags.length > 0 && /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", sx: { flexWrap: "wrap", gap: 0.5 } }, allTags.map((tag) => /* @__PURE__ */ React60__default.default.createElement(
+        SORT_OPTIONS.map((opt) => /* @__PURE__ */ React58__default.default.createElement(material.MenuItem, { key: opt.value, value: opt.value }, opt.label))
+      ), allTags.length > 0 && /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", sx: { flexWrap: "wrap", gap: 0.5 } }, allTags.map((tag) => /* @__PURE__ */ React58__default.default.createElement(
         material.Chip,
         {
           key: tag,
@@ -4485,7 +5172,7 @@ function SamplesDrawer({
           variant: activeTags.includes(tag) ? "filled" : "outlined",
           onClick: () => toggleTag(tag)
         }
-      ))), /* @__PURE__ */ React60__default.default.createElement(material.Box, null, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5 } }, "Your Templates"), loadingTemplates ? /* @__PURE__ */ React60__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React60__default.default.createElement(material.CircularProgress, { size: 24 })) : templatesError ? /* @__PURE__ */ React60__default.default.createElement(material.Alert, { severity: "error", sx: { my: 1 } }, templatesError) : filteredTemplates.length > 0 ? /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredTemplates.map((template) => /* @__PURE__ */ React60__default.default.createElement(
+      ))), /* @__PURE__ */ React58__default.default.createElement(material.Box, null, /* @__PURE__ */ React58__default.default.createElement(material.Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5 } }, "Your Templates"), loadingTemplates ? /* @__PURE__ */ React58__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React58__default.default.createElement(material.CircularProgress, { size: 24 })) : templatesError ? /* @__PURE__ */ React58__default.default.createElement(material.Alert, { severity: "error", sx: { my: 1 } }, templatesError) : filteredTemplates.length > 0 ? /* @__PURE__ */ React58__default.default.createElement(material.Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredTemplates.map((template) => /* @__PURE__ */ React58__default.default.createElement(
         TemplateRow,
         {
           key: template.id,
@@ -4497,8 +5184,8 @@ function SamplesDrawer({
           onDelete: deleteTemplate ? () => handleDelete(template) : void 0,
           onPromote: setTemplateKind ? () => handleSetKind(template, "sample") : void 0
         }
-      ))) : /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, templateRows.length === 0 ? "No saved templates yet" : "No templates match your filters")), /* @__PURE__ */ React60__default.default.createElement(material.Divider, null)),
-      /* @__PURE__ */ React60__default.default.createElement(material.Box, null, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5 } }, "Sample Templates"), loadingSamples ? /* @__PURE__ */ React60__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React60__default.default.createElement(material.CircularProgress, { size: 24 })) : sampleRows.length > 0 ? /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 0.25, sx: { width: "100%" } }, sampleRows.map((sample) => /* @__PURE__ */ React60__default.default.createElement(
+      ))) : /* @__PURE__ */ React58__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, templateRows.length === 0 ? "No saved templates yet" : "No templates match your filters")), /* @__PURE__ */ React58__default.default.createElement(material.Divider, null)),
+      /* @__PURE__ */ React58__default.default.createElement(material.Box, null, /* @__PURE__ */ React58__default.default.createElement(material.Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5 } }, "Sample Templates"), loadingSamples ? /* @__PURE__ */ React58__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React58__default.default.createElement(material.CircularProgress, { size: 24 })) : sampleRows.length > 0 ? /* @__PURE__ */ React58__default.default.createElement(material.Stack, { spacing: 0.25, sx: { width: "100%" } }, sampleRows.map((sample) => /* @__PURE__ */ React58__default.default.createElement(
         TemplateRow,
         {
           key: sample.id,
@@ -4508,9 +5195,9 @@ function SamplesDrawer({
           onDuplicateAsTemplate: saveAs ? () => handleDuplicateAsTemplate(sample) : void 0,
           onDemote: setTemplateKind && sample.id !== "empty-email" ? () => handleSetKind(sample, "template") : void 0
         }
-      ))) : /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, "No samples available"))
+      ))) : /* @__PURE__ */ React58__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, "No samples available"))
     )
-  ), renameTarget && /* @__PURE__ */ React60__default.default.createElement(
+  ), renameTarget && /* @__PURE__ */ React58__default.default.createElement(
     RenameDialog,
     {
       open: !!renameTarget,
@@ -4519,7 +5206,7 @@ function SamplesDrawer({
       onClose: () => setRenameTarget(null),
       onSubmit: handleRenameSubmit
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     SaveTemplateDialog,
     {
       open: !!pendingSaveAs,
@@ -4546,7 +5233,7 @@ var ICON_SX = {
   borderColor: "cadet.300"
 };
 function BlockTypeButton({ label, icon, onClick }) {
-  return /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(
     material.Button,
     {
       sx: BUTTON_SX2,
@@ -4555,14 +5242,14 @@ function BlockTypeButton({ label, icon, onClick }) {
         onClick();
       }
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: ICON_SX }, icon),
-    /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "body2" }, label)
+    /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: ICON_SX }, icon),
+    /* @__PURE__ */ React58__default.default.createElement(material.Typography, { variant: "body2" }, label)
   );
 }
 var BUTTONS = [
   {
     label: "Heading",
-    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.HMobiledataOutlined, null),
+    icon: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.HMobiledataOutlined, null),
     block: () => ({
       type: "Heading",
       data: {
@@ -4575,7 +5262,7 @@ var BUTTONS = [
   },
   {
     label: "Text",
-    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.NotesOutlined, null),
+    icon: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.NotesOutlined, null),
     block: () => ({
       type: "Text",
       data: {
@@ -4589,7 +5276,7 @@ var BUTTONS = [
   },
   {
     label: "Button",
-    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.SmartButtonOutlined, null),
+    icon: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.SmartButtonOutlined, null),
     block: () => ({
       type: "Button",
       data: {
@@ -4603,7 +5290,7 @@ var BUTTONS = [
   },
   {
     label: "Image",
-    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ImageOutlined, null),
+    icon: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.ImageOutlined, null),
     block: () => ({
       type: "Image",
       data: {
@@ -4619,7 +5306,7 @@ var BUTTONS = [
   },
   {
     label: "Avatar",
-    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AccountCircleOutlined, null),
+    icon: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.AccountCircleOutlined, null),
     block: () => ({
       type: "Avatar",
       data: {
@@ -4633,7 +5320,7 @@ var BUTTONS = [
   },
   {
     label: "Personal Signature",
-    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ContactMailOutlined, null),
+    icon: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.ContactMailOutlined, null),
     block: () => ({
       type: "Signature",
       data: {
@@ -4655,7 +5342,7 @@ var BUTTONS = [
   },
   {
     label: "Company Signature",
-    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.BusinessOutlined, null),
+    icon: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.BusinessOutlined, null),
     block: () => ({
       type: "Signature",
       data: {
@@ -4675,7 +5362,7 @@ var BUTTONS = [
   },
   {
     label: "Divider",
-    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.HorizontalRuleOutlined, null),
+    icon: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.HorizontalRuleOutlined, null),
     block: () => ({
       type: "Divider",
       data: {
@@ -4688,7 +5375,7 @@ var BUTTONS = [
   },
   {
     label: "Spacer",
-    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.Crop32Outlined, null),
+    icon: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.Crop32Outlined, null),
     block: () => ({
       type: "Spacer",
       data: {}
@@ -4696,7 +5383,7 @@ var BUTTONS = [
   },
   {
     label: "Html",
-    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.HtmlOutlined, null),
+    icon: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.HtmlOutlined, null),
     block: () => ({
       type: "Html",
       data: {
@@ -4711,7 +5398,7 @@ var BUTTONS = [
   },
   {
     label: "Columns",
-    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ViewColumnOutlined, null),
+    icon: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.ViewColumnOutlined, null),
     block: () => ({
       type: "ColumnsContainer",
       data: {
@@ -4726,7 +5413,7 @@ var BUTTONS = [
   },
   {
     label: "Container",
-    icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.LibraryAddOutlined, null),
+    icon: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.LibraryAddOutlined, null),
     block: () => ({
       type: "Container",
       data: {
@@ -4750,7 +5437,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
   if (anchorEl === null) {
     return null;
   }
-  return /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(
     material.Menu,
     {
       open: true,
@@ -4759,12 +5446,12 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
       transformOrigin: { vertical: "top", horizontal: "center" }
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React60__default.default.createElement(BlockTypeButton, { key: i, label: k.label, icon: k.icon, onClick: () => onClick(k.block()) })))
+    /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React58__default.default.createElement(BlockTypeButton, { key: i, label: k.label, icon: k.icon, onClick: () => onClick(k.block()) })))
   );
 }
 function DividerButton({ buttonElement, onClick }) {
-  const [visible, setVisible] = React60.useState(false);
-  React60.useEffect(() => {
+  const [visible, setVisible] = React58.useState(false);
+  React58.useEffect(() => {
     function listener({ clientX, clientY }) {
       if (!buttonElement) {
         return;
@@ -4786,7 +5473,7 @@ function DividerButton({ buttonElement, onClick }) {
       window.removeEventListener("mousemove", listener);
     };
   }, [buttonElement, setVisible]);
-  return /* @__PURE__ */ React60__default.default.createElement(material.Fade, { in: visible }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(material.Fade, { in: visible }, /* @__PURE__ */ React58__default.default.createElement(
     material.IconButton,
     {
       size: "small",
@@ -4809,11 +5496,11 @@ function DividerButton({ buttonElement, onClick }) {
         onClick();
       }
     },
-    /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
+    /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
   ));
 }
 function PlaceholderButton({ onClick }) {
-  return /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(
     material.ButtonBase,
     {
       onClick: (ev) => {
@@ -4829,7 +5516,7 @@ function PlaceholderButton({ onClick }) {
         bgcolor: "rgba(0,0,0, 0.05)"
       }
     },
-    /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(
       iconsMaterial.AddOutlined,
       {
         sx: {
@@ -4846,19 +5533,19 @@ function PlaceholderButton({ onClick }) {
 
 // src/editor/blocks/helpers/editor-children-ids/add-block-menu/index.tsx
 function AddBlockButton({ onSelect, placeholder }) {
-  const [menuAnchorEl, setMenuAnchorEl] = React60.useState(null);
-  const [buttonElement, setButtonElement] = React60.useState(null);
+  const [menuAnchorEl, setMenuAnchorEl] = React58.useState(null);
+  const [buttonElement, setButtonElement] = React58.useState(null);
   const handleButtonClick = () => {
     setMenuAnchorEl(buttonElement);
   };
   const renderButton2 = () => {
     if (placeholder) {
-      return /* @__PURE__ */ React60__default.default.createElement(PlaceholderButton, { onClick: handleButtonClick });
+      return /* @__PURE__ */ React58__default.default.createElement(PlaceholderButton, { onClick: handleButtonClick });
     } else {
-      return /* @__PURE__ */ React60__default.default.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
+      return /* @__PURE__ */ React58__default.default.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
     }
   };
-  return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton2()), /* @__PURE__ */ React60__default.default.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
+  return /* @__PURE__ */ React58__default.default.createElement(React58__default.default.Fragment, null, /* @__PURE__ */ React58__default.default.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton2()), /* @__PURE__ */ React58__default.default.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
 }
 
 // src/editor/blocks/helpers/editor-children-ids/index.tsx
@@ -4885,9 +5572,9 @@ function EditorChildrenIds({ childrenIds, onChange }) {
     });
   };
   if (!childrenIds || childrenIds.length === 0) {
-    return /* @__PURE__ */ React60__default.default.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock });
+    return /* @__PURE__ */ React58__default.default.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock });
   }
-  return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React60__default.default.createElement(React60.Fragment, { key: childId }, /* @__PURE__ */ React60__default.default.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), /* @__PURE__ */ React60__default.default.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React60__default.default.createElement(AddBlockButton, { onSelect: appendBlock }));
+  return /* @__PURE__ */ React58__default.default.createElement(React58__default.default.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React58__default.default.createElement(React58.Fragment, { key: childId }, /* @__PURE__ */ React58__default.default.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), /* @__PURE__ */ React58__default.default.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React58__default.default.createElement(AddBlockButton, { onSelect: appendBlock }));
 }
 
 // src/editor/blocks/columns-container/columns-container-editor.tsx
@@ -4914,15 +5601,15 @@ function ColumnsContainerEditor({ style, props }) {
     });
     setSelectedBlockId(blockId);
   };
-  return /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(
     columns_container_default,
     {
       props: restProps,
       style,
       columns: [
-        /* @__PURE__ */ React60__default.default.createElement(EditorChildrenIds, { childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds, onChange: (change) => updateColumn(0, change) }),
-        /* @__PURE__ */ React60__default.default.createElement(EditorChildrenIds, { childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds, onChange: (change) => updateColumn(1, change) }),
-        /* @__PURE__ */ React60__default.default.createElement(EditorChildrenIds, { childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds, onChange: (change) => updateColumn(2, change) })
+        /* @__PURE__ */ React58__default.default.createElement(EditorChildrenIds, { childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds, onChange: (change) => updateColumn(0, change) }),
+        /* @__PURE__ */ React58__default.default.createElement(EditorChildrenIds, { childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds, onChange: (change) => updateColumn(1, change) }),
+        /* @__PURE__ */ React58__default.default.createElement(EditorChildrenIds, { childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds, onChange: (change) => updateColumn(2, change) })
       ]
     }
   );
@@ -4932,7 +5619,7 @@ function ContainerEditor({ style, props }) {
   const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
   const document2 = useDocument();
   const currentBlockId = useCurrentBlockId();
-  return /* @__PURE__ */ React60__default.default.createElement(container_default, { style }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(container_default, { style }, /* @__PURE__ */ React58__default.default.createElement(
     EditorChildrenIds,
     {
       childrenIds,
@@ -5038,7 +5725,7 @@ function EmailLayoutEditor(props) {
   const document2 = useDocument();
   const currentBlockId = useCurrentBlockId();
   const selectedBlockId = useSelectedBlockId();
-  const handleDelete = React60.useCallback((e) => {
+  const handleDelete = React58.useCallback((e) => {
     var _a2, _b2, _c2;
     if (e.key !== "Delete" && e.key !== "Backspace") return;
     if (!selectedBlockId) return;
@@ -5069,7 +5756,7 @@ function EmailLayoutEditor(props) {
     delete nDocument[selectedBlockId];
     resetDocument(nDocument);
   }, [selectedBlockId, document2]);
-  const handleCopy = React60.useCallback((e) => {
+  const handleCopy = React58.useCallback((e) => {
     if (!(e.metaKey || e.ctrlKey) || e.key !== "c") return;
     if (!selectedBlockId) return;
     const target = e.target;
@@ -5082,7 +5769,7 @@ function EmailLayoutEditor(props) {
     const payload = JSON.stringify({ __emailEditorBlocks: true, rootBlockId: selectedBlockId, blocks });
     navigator.clipboard.writeText(payload);
   }, [selectedBlockId, document2]);
-  const handlePaste = React60.useCallback((e) => __async(null, null, function* () {
+  const handlePaste = React58.useCallback((e) => __async(null, null, function* () {
     var _a2;
     const target = e.target;
     if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
@@ -5113,7 +5800,7 @@ function EmailLayoutEditor(props) {
     resetDocument(doc);
     setSelectedBlockId(newRootId);
   }), [document2, childrenIds, selectedBlockId, currentBlockId]);
-  React60.useEffect(() => {
+  React58.useEffect(() => {
     window.addEventListener("keydown", handleDelete);
     window.addEventListener("keydown", handleCopy);
     window.addEventListener("paste", handlePaste);
@@ -5132,7 +5819,7 @@ function EmailLayoutEditor(props) {
     lineHeight: "1.5",
     margin: "0"
   };
-  const editorChildren = /* @__PURE__ */ React60__default.default.createElement(
+  const editorChildren = /* @__PURE__ */ React58__default.default.createElement(
     EditorChildrenIds,
     {
       childrenIds,
@@ -5151,7 +5838,7 @@ function EmailLayoutEditor(props) {
     }
   );
   if (props.backdropDisabled) {
-    return /* @__PURE__ */ React60__default.default.createElement(
+    return /* @__PURE__ */ React58__default.default.createElement(
       "div",
       {
         onClick: () => {
@@ -5164,10 +5851,10 @@ function EmailLayoutEditor(props) {
           minHeight: "100%"
         })
       },
-      /* @__PURE__ */ React60__default.default.createElement("div", { style: { maxWidth: "600px" } }, editorChildren)
+      /* @__PURE__ */ React58__default.default.createElement("div", { style: { maxWidth: "600px" } }, editorChildren)
     );
   }
-  return /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(
     "div",
     {
       onClick: () => {
@@ -5180,7 +5867,7 @@ function EmailLayoutEditor(props) {
         minHeight: "100%"
       })
     },
-    /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(
       "table",
       {
         align: "center",
@@ -5204,7 +5891,7 @@ function EmailLayoutEditor(props) {
         cellPadding: "0",
         border: 0
       },
-      /* @__PURE__ */ React60__default.default.createElement("tbody", null, /* @__PURE__ */ React60__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React60__default.default.createElement("td", null, editorChildren)))
+      /* @__PURE__ */ React58__default.default.createElement("tbody", null, /* @__PURE__ */ React58__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React58__default.default.createElement("td", null, editorChildren)))
     )
   );
 }
@@ -5363,13 +6050,13 @@ function TuneMenu({ blockId }) {
     resetDocument(nDocument);
     setSelectedBlockId(blockId);
   };
-  return /* @__PURE__ */ React60__default.default.createElement(material.Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, null, /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Move up", placement: "left-start" }, /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Move down", placement: "left-start" }, /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Copy block", placement: "left-start" }, /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Delete", placement: "left-start" }, /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.DeleteOutlined, { fontSize: "small" })))));
+  return /* @__PURE__ */ React58__default.default.createElement(material.Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React58__default.default.createElement(material.Stack, null, /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Move up", placement: "left-start" }, /* @__PURE__ */ React58__default.default.createElement(material.IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Move down", placement: "left-start" }, /* @__PURE__ */ React58__default.default.createElement(material.IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Copy block", placement: "left-start" }, /* @__PURE__ */ React58__default.default.createElement(material.IconButton, { onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Delete", placement: "left-start" }, /* @__PURE__ */ React58__default.default.createElement(material.IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.DeleteOutlined, { fontSize: "small" })))));
 }
 
 // src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
 function EditorBlockWrapper({ children }) {
   const selectedBlockId = useSelectedBlockId();
-  const [mouseInside, setMouseInside] = React60.useState(false);
+  const [mouseInside, setMouseInside] = React58.useState(false);
   const blockId = useCurrentBlockId();
   let outline;
   if (selectedBlockId === blockId) {
@@ -5381,9 +6068,9 @@ function EditorBlockWrapper({ children }) {
     if (selectedBlockId !== blockId) {
       return null;
     }
-    return /* @__PURE__ */ React60__default.default.createElement(TuneMenu, { blockId });
+    return /* @__PURE__ */ React58__default.default.createElement(TuneMenu, { blockId });
   };
-  return /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(
     material.Box,
     {
       sx: {
@@ -5469,8 +6156,8 @@ function ButtonEditor({ style, props }) {
   const fullWidth = (_b = props == null ? void 0 : props.fullWidth) != null ? _b : ButtonPropsDefaults.fullWidth;
   const buttonTextColor = (_c = props == null ? void 0 : props.buttonTextColor) != null ? _c : ButtonPropsDefaults.buttonTextColor;
   const buttonBackgroundColor = (_d = props == null ? void 0 : props.buttonBackgroundColor) != null ? _d : ButtonPropsDefaults.buttonBackgroundColor;
-  const [localText, setLocalText] = React60.useState(text);
-  React60.useEffect(() => {
+  const [localText, setLocalText] = React58.useState(text);
+  React58.useEffect(() => {
     setLocalText(text);
   }, [text]);
   const padding = getButtonSizePadding2(props);
@@ -5513,18 +6200,34 @@ function ButtonEditor({ style, props }) {
       width: fullWidth ? "100%" : void 0,
       textAlign: "center"
     });
-    return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React60__default.default.createElement(
+    const trackFocus = (e) => {
+      var _a2, _b2;
+      const el = e.currentTarget;
+      setLastFocusedEditable({
+        blockId,
+        field: "text",
+        selectionStart: (_a2 = el.selectionStart) != null ? _a2 : el.value.length,
+        selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
+      });
+    };
+    return /* @__PURE__ */ React58__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React58__default.default.createElement(
       "input",
       {
         type: "text",
         value: localText,
         onChange: handleTextChange,
-        style: inputStyle,
-        onClick: (e) => e.stopPropagation()
+        onFocus: trackFocus,
+        onSelect: trackFocus,
+        onKeyUp: trackFocus,
+        onClick: (e) => {
+          e.stopPropagation();
+          trackFocus(e);
+        },
+        style: inputStyle
       }
     ));
   }
-  return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React60__default.default.createElement("span", { style: linkStyle }, /* @__PURE__ */ React60__default.default.createElement("span", null, text)));
+  return /* @__PURE__ */ React58__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React58__default.default.createElement("span", { style: linkStyle }, /* @__PURE__ */ React58__default.default.createElement("span", null, text)));
 }
 function getFontFamily9(fontFamily) {
   switch (fontFamily) {
@@ -5588,17 +6291,17 @@ function getFontSize2(level) {
   }
 }
 function HeadingEditor({ style, props }) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const blockId = useCurrentBlockId();
   const selectedBlockId = useSelectedBlockId();
   const document2 = useDocument();
   const isSelected = selectedBlockId === blockId;
   const level = (_a = props == null ? void 0 : props.level) != null ? _a : HeadingPropsDefaults.level;
   const textContent = (_b = props == null ? void 0 : props.text) != null ? _b : HeadingPropsDefaults.text;
-  const [localText, setLocalText] = React60.useState(textContent);
+  const [localText, setLocalText] = React58.useState(textContent);
   const rootBlock = document2.root;
   const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily9(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
-  React60.useEffect(() => {
+  React58.useEffect(() => {
     setLocalText(textContent);
   }, [textContent]);
   const fontFamily = getFontFamily9(style == null ? void 0 : style.fontFamily) || rootFontFamily;
@@ -5606,7 +6309,9 @@ function HeadingEditor({ style, props }) {
     color: (_c = style == null ? void 0 : style.color) != null ? _c : void 0,
     backgroundColor: (_d = style == null ? void 0 : style.backgroundColor) != null ? _d : void 0,
     fontWeight: (_e = style == null ? void 0 : style.fontWeight) != null ? _e : "bold",
-    textAlign: (_f = style == null ? void 0 : style.textAlign) != null ? _f : void 0,
+    lineHeight: (_f = style == null ? void 0 : style.lineHeight) != null ? _f : void 0,
+    letterSpacing: (style == null ? void 0 : style.letterSpacing) != null ? `${style.letterSpacing}px` : void 0,
+    textAlign: (_g = style == null ? void 0 : style.textAlign) != null ? _g : void 0,
     margin: 0,
     fontFamily,
     fontSize: getFontSize2(level),
@@ -5620,7 +6325,7 @@ function HeadingEditor({ style, props }) {
     resize: "none",
     backgroundColor: "transparent",
     overflow: "hidden",
-    lineHeight: "inherit",
+    lineHeight: (_h = hStyle.lineHeight) != null ? _h : "inherit",
     margin: 0,
     display: "block",
     width: "100%"
@@ -5646,27 +6351,43 @@ function HeadingEditor({ style, props }) {
       element.style.height = `${element.scrollHeight}px`;
     }
   };
+  const trackFocus = (e) => {
+    var _a2, _b2;
+    const el = e.currentTarget;
+    setLastFocusedEditable({
+      blockId,
+      field: "text",
+      selectionStart: (_a2 = el.selectionStart) != null ? _a2 : el.value.length,
+      selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
+    });
+  };
   if (isSelected) {
-    return /* @__PURE__ */ React60__default.default.createElement(
+    return /* @__PURE__ */ React58__default.default.createElement(
       "textarea",
       {
         value: localText,
         onChange: handleTextChange,
+        onFocus: trackFocus,
+        onSelect: trackFocus,
+        onKeyUp: trackFocus,
+        onClick: (e) => {
+          e.stopPropagation();
+          trackFocus(e);
+        },
         style: textareaStyle,
         rows: 1,
         onInput: (e) => adjustTextareaHeight(e.target),
-        ref: (el) => el && adjustTextareaHeight(el),
-        onClick: (e) => e.stopPropagation()
+        ref: (el) => el && adjustTextareaHeight(el)
       }
     );
   }
   switch (level) {
     case "h1":
-      return /* @__PURE__ */ React60__default.default.createElement("h1", { style: hStyle }, textContent);
+      return /* @__PURE__ */ React58__default.default.createElement("h1", { style: hStyle }, textContent);
     case "h2":
-      return /* @__PURE__ */ React60__default.default.createElement("h2", { style: hStyle }, textContent);
+      return /* @__PURE__ */ React58__default.default.createElement("h2", { style: hStyle }, textContent);
     case "h3":
-      return /* @__PURE__ */ React60__default.default.createElement("h3", { style: hStyle }, textContent);
+      return /* @__PURE__ */ React58__default.default.createElement("h3", { style: hStyle }, textContent);
   }
 }
 function HtmlEditor({ style, props }) {
@@ -5675,8 +6396,8 @@ function HtmlEditor({ style, props }) {
   const selectedBlockId = useSelectedBlockId();
   const isSelected = selectedBlockId === blockId;
   const contents = (_a = props == null ? void 0 : props.contents) != null ? _a : "";
-  const [localContents, setLocalContents] = React60.useState(contents);
-  React60.useEffect(() => {
+  const [localContents, setLocalContents] = React58.useState(contents);
+  React58.useEffect(() => {
     setLocalContents(contents);
   }, [contents]);
   const cssStyle = {
@@ -5721,23 +6442,39 @@ function HtmlEditor({ style, props }) {
       margin: 0,
       backgroundColor: "transparent"
     });
-    return /* @__PURE__ */ React60__default.default.createElement("div", { style: cssStyle }, /* @__PURE__ */ React60__default.default.createElement(
+    const trackFocus = (e) => {
+      var _a2, _b2;
+      const el = e.currentTarget;
+      setLastFocusedEditable({
+        blockId,
+        field: "contents",
+        selectionStart: (_a2 = el.selectionStart) != null ? _a2 : el.value.length,
+        selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
+      });
+    };
+    return /* @__PURE__ */ React58__default.default.createElement("div", { style: cssStyle }, /* @__PURE__ */ React58__default.default.createElement(
       "textarea",
       {
         value: localContents,
         onChange: handleChange,
+        onFocus: trackFocus,
+        onSelect: trackFocus,
+        onKeyUp: trackFocus,
+        onClick: (e) => {
+          e.stopPropagation();
+          trackFocus(e);
+        },
         style: textareaStyle,
         rows: 3,
         onInput: (e) => adjustTextareaHeight(e.target),
-        ref: (el) => el && adjustTextareaHeight(el),
-        onClick: (e) => e.stopPropagation()
+        ref: (el) => el && adjustTextareaHeight(el)
       }
     ));
   }
   if (!contents) {
-    return /* @__PURE__ */ React60__default.default.createElement("div", { style: cssStyle });
+    return /* @__PURE__ */ React58__default.default.createElement("div", { style: cssStyle });
   }
-  return /* @__PURE__ */ React60__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
+  return /* @__PURE__ */ React58__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
 }
 function getImageBorderRadius2(shape, size) {
   switch (shape) {
@@ -5770,36 +6507,36 @@ function SignatureEditor({ style, props }) {
   const nameColor = (_m = props == null ? void 0 : props.nameColor) != null ? _m : SignaturePropsDefaults.nameColor;
   const textColor = (_n = props == null ? void 0 : props.textColor) != null ? _n : SignaturePropsDefaults.textColor;
   const linkColor = (_o = props == null ? void 0 : props.linkColor) != null ? _o : SignaturePropsDefaults.linkColor;
-  const [localGreeting, setLocalGreeting] = React60.useState(greeting);
-  const [localName, setLocalName] = React60.useState(name);
-  const [localTitle, setLocalTitle] = React60.useState(title);
-  const [localCompany, setLocalCompany] = React60.useState(company);
-  const [localAddress, setLocalAddress] = React60.useState(address);
-  const [localEmail, setLocalEmail] = React60.useState(email);
-  const [localPhone, setLocalPhone] = React60.useState(phone);
-  const [localWebsite, setLocalWebsite] = React60.useState(website);
-  React60.useEffect(() => {
+  const [localGreeting, setLocalGreeting] = React58.useState(greeting);
+  const [localName, setLocalName] = React58.useState(name);
+  const [localTitle, setLocalTitle] = React58.useState(title);
+  const [localCompany, setLocalCompany] = React58.useState(company);
+  const [localAddress, setLocalAddress] = React58.useState(address);
+  const [localEmail, setLocalEmail] = React58.useState(email);
+  const [localPhone, setLocalPhone] = React58.useState(phone);
+  const [localWebsite, setLocalWebsite] = React58.useState(website);
+  React58.useEffect(() => {
     setLocalGreeting(greeting);
   }, [greeting]);
-  React60.useEffect(() => {
+  React58.useEffect(() => {
     setLocalName(name);
   }, [name]);
-  React60.useEffect(() => {
+  React58.useEffect(() => {
     setLocalTitle(title);
   }, [title]);
-  React60.useEffect(() => {
+  React58.useEffect(() => {
     setLocalCompany(company);
   }, [company]);
-  React60.useEffect(() => {
+  React58.useEffect(() => {
     setLocalAddress(address);
   }, [address]);
-  React60.useEffect(() => {
+  React58.useEffect(() => {
     setLocalEmail(email);
   }, [email]);
-  React60.useEffect(() => {
+  React58.useEffect(() => {
     setLocalPhone(phone);
   }, [phone]);
-  React60.useEffect(() => {
+  React58.useEffect(() => {
     setLocalWebsite(website);
   }, [website]);
   const updateProps = (updates) => {
@@ -5852,7 +6589,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__ */ React60__default.default.createElement(
+  const imageElement = imageUrl ? /* @__PURE__ */ React58__default.default.createElement(
     "img",
     {
       src: imageUrl,
@@ -5870,7 +6607,7 @@ function SignatureEditor({ style, props }) {
       }
     }
   ) : null;
-  const greetingElement = isSelected ? /* @__PURE__ */ React60__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React60__default.default.createElement(
+  const greetingElement = isSelected ? /* @__PURE__ */ React58__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React58__default.default.createElement(
     "input",
     {
       value: localGreeting,
@@ -5881,8 +6618,8 @@ function SignatureEditor({ style, props }) {
       placeholder: "Greeting (e.g. Best regards,)",
       style: __spreadValues(__spreadValues({}, inputBase), greetingStyle)
     }
-  )) : greeting ? /* @__PURE__ */ React60__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
-  const textContent = isSelected ? /* @__PURE__ */ React60__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React60__default.default.createElement(
+  )) : greeting ? /* @__PURE__ */ React58__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
+  const textContent = isSelected ? /* @__PURE__ */ React58__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React58__default.default.createElement(
     "input",
     {
       value: localName,
@@ -5893,7 +6630,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Name",
       style: __spreadValues(__spreadValues({}, inputBase), nameStyle)
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     "input",
     {
       value: localTitle,
@@ -5904,7 +6641,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Title",
       style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     "input",
     {
       value: localCompany,
@@ -5915,7 +6652,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Company",
       style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     "input",
     {
       value: localAddress,
@@ -5926,7 +6663,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Address",
       style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     "input",
     {
       value: localEmail,
@@ -5937,7 +6674,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Email",
       style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { marginTop: 4, display: "block" })
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     "input",
     {
       value: localPhone,
@@ -5948,7 +6685,7 @@ function SignatureEditor({ style, props }) {
       placeholder: "Phone",
       style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     "input",
     {
       value: localWebsite,
@@ -5959,11 +6696,11 @@ function SignatureEditor({ style, props }) {
       placeholder: "Website",
       style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
     }
-  )) : /* @__PURE__ */ React60__default.default.createElement("div", null, name && /* @__PURE__ */ React60__default.default.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, address), (email || phone || website) && /* @__PURE__ */ React60__default.default.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, email && /* @__PURE__ */ React60__default.default.createElement("span", { style: linkStyle }, email), email && (phone || website) && /* @__PURE__ */ React60__default.default.createElement("span", { style: detailStyle }, " \xB7 "), phone && /* @__PURE__ */ React60__default.default.createElement("span", { style: linkStyle }, phone), phone && website && /* @__PURE__ */ React60__default.default.createElement("span", { style: detailStyle }, " \xB7 "), website && /* @__PURE__ */ React60__default.default.createElement("span", { style: linkStyle }, website)), !name && !title && !company && !email && !phone && !website && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, "Click to edit signature"));
+  )) : /* @__PURE__ */ React58__default.default.createElement("div", null, name && /* @__PURE__ */ React58__default.default.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React58__default.default.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React58__default.default.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React58__default.default.createElement("p", { style: detailStyle }, address), (email || phone || website) && /* @__PURE__ */ React58__default.default.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, email && /* @__PURE__ */ React58__default.default.createElement("span", { style: linkStyle }, email), email && (phone || website) && /* @__PURE__ */ React58__default.default.createElement("span", { style: detailStyle }, " \xB7 "), phone && /* @__PURE__ */ React58__default.default.createElement("span", { style: linkStyle }, phone), phone && website && /* @__PURE__ */ React58__default.default.createElement("span", { style: detailStyle }, " \xB7 "), website && /* @__PURE__ */ React58__default.default.createElement("span", { style: linkStyle }, website)), !name && !title && !company && !email && !phone && !website && /* @__PURE__ */ React58__default.default.createElement("p", { style: detailStyle }, "Click to edit signature"));
   if (layout === "vertical") {
-    return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React60__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
+    return /* @__PURE__ */ React58__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React58__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
   }
-  return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React60__default.default.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React60__default.default.createElement("tbody", null, /* @__PURE__ */ React60__default.default.createElement("tr", null, imageElement && /* @__PURE__ */ React60__default.default.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React60__default.default.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
+  return /* @__PURE__ */ React58__default.default.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React58__default.default.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React58__default.default.createElement("tbody", null, /* @__PURE__ */ React58__default.default.createElement("tr", null, imageElement && /* @__PURE__ */ React58__default.default.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React58__default.default.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
 }
 function getFontFamily10(fontFamily) {
   switch (fontFamily) {
@@ -6017,17 +6754,17 @@ function getPadding13(padding) {
   return void 0;
 }
 function TextEditor({ style, props }) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const blockId = useCurrentBlockId();
   const selectedBlockId = useSelectedBlockId();
   const document2 = useDocument();
   const isSelected = selectedBlockId === blockId;
   const textContent = (_a = props == null ? void 0 : props.text) != null ? _a : TextPropsDefaults.text;
-  const [localText, setLocalText] = React60.useState(textContent);
+  const [localText, setLocalText] = React58.useState(textContent);
   const isMarkdown = (_b = props == null ? void 0 : props.markdown) != null ? _b : false;
   const rootBlock = document2.root;
   const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily10(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
-  React60.useEffect(() => {
+  React58.useEffect(() => {
     setLocalText(textContent);
   }, [textContent]);
   const fontFamily = getFontFamily10(style == null ? void 0 : style.fontFamily) || rootFontFamily;
@@ -6037,7 +6774,9 @@ function TextEditor({ style, props }) {
     fontSize: (_e = style == null ? void 0 : style.fontSize) != null ? _e : void 0,
     fontFamily,
     fontWeight: (_f = style == null ? void 0 : style.fontWeight) != null ? _f : void 0,
-    textAlign: (_g = style == null ? void 0 : style.textAlign) != null ? _g : void 0,
+    lineHeight: (_g = style == null ? void 0 : style.lineHeight) != null ? _g : void 0,
+    letterSpacing: (style == null ? void 0 : style.letterSpacing) != null ? `${style.letterSpacing}px` : void 0,
+    textAlign: (_h = style == null ? void 0 : style.textAlign) != null ? _h : void 0,
     padding: getPadding13(style == null ? void 0 : style.padding),
     width: "100%",
     minHeight: "1em"
@@ -6048,7 +6787,7 @@ function TextEditor({ style, props }) {
     resize: "none",
     backgroundColor: "transparent",
     overflow: "hidden",
-    lineHeight: "inherit",
+    lineHeight: (_i = wStyle.lineHeight) != null ? _i : "inherit",
     margin: 0,
     display: "block",
     width: "100%",
@@ -6077,51 +6816,67 @@ function TextEditor({ style, props }) {
       element.style.height = `${element.scrollHeight}px`;
     }
   };
+  const trackFocus = (e) => {
+    var _a2, _b2;
+    const el = e.currentTarget;
+    setLastFocusedEditable({
+      blockId,
+      field: "text",
+      selectionStart: (_a2 = el.selectionStart) != null ? _a2 : el.value.length,
+      selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
+    });
+  };
   if (isSelected) {
-    return /* @__PURE__ */ React60__default.default.createElement(
+    return /* @__PURE__ */ React58__default.default.createElement(
       "textarea",
       {
         value: localText,
         onChange: handleTextChange,
+        onFocus: trackFocus,
+        onSelect: trackFocus,
+        onKeyUp: trackFocus,
+        onClick: (e) => {
+          e.stopPropagation();
+          trackFocus(e);
+        },
         style: textareaStyle,
         rows: 1,
         onInput: (e) => adjustTextareaHeight(e.target),
-        ref: (el) => el && adjustTextareaHeight(el),
-        onClick: (e) => e.stopPropagation()
+        ref: (el) => el && adjustTextareaHeight(el)
       }
     );
   }
   if (isMarkdown) {
-    return /* @__PURE__ */ React60__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: textContent });
+    return /* @__PURE__ */ React58__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: textContent });
   }
-  return /* @__PURE__ */ React60__default.default.createElement("div", { style: wStyle }, textContent);
+  return /* @__PURE__ */ React58__default.default.createElement("div", { style: wStyle }, textContent);
 }
 
 // src/editor/core.tsx
 var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
   Avatar: {
     schema: AvatarPropsSchema,
-    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(avatar_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React58__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58__default.default.createElement(avatar_default, __spreadValues({}, props)))
   },
   Button: {
     schema: ButtonPropsSchema,
-    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(ButtonEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React58__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58__default.default.createElement(ButtonEditor, __spreadValues({}, props)))
   },
   Container: {
     schema: container_props_schema_default,
-    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(ContainerEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React58__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58__default.default.createElement(ContainerEditor, __spreadValues({}, props)))
   },
   ColumnsContainer: {
     schema: columns_container_props_schema_default2,
-    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React58__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58__default.default.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
   },
   Heading: {
     schema: HeadingPropsSchema,
-    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(HeadingEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React58__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58__default.default.createElement(HeadingEditor, __spreadValues({}, props)))
   },
   Html: {
     schema: HtmlPropsSchema,
-    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(HtmlEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React58__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58__default.default.createElement(HtmlEditor, __spreadValues({}, props)))
   },
   Image: {
     schema: ImagePropsSchema,
@@ -6133,28 +6888,28 @@ var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
           linkHref: null
         })
       });
-      return /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(image_default, __spreadValues({}, props)));
+      return /* @__PURE__ */ React58__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58__default.default.createElement(image_default, __spreadValues({}, props)));
     }
   },
   Text: {
     schema: TextPropsSchema,
-    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(TextEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React58__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58__default.default.createElement(TextEditor, __spreadValues({}, props)))
   },
   EmailLayout: {
     schema: email_layout_props_schema_default,
-    Component: (p) => /* @__PURE__ */ React60__default.default.createElement(EmailLayoutEditor, __spreadValues({}, p))
+    Component: (p) => /* @__PURE__ */ React58__default.default.createElement(EmailLayoutEditor, __spreadValues({}, p))
   },
   Spacer: {
     schema: SpacerPropsSchema,
-    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(spacer_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React58__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58__default.default.createElement(spacer_default, __spreadValues({}, props)))
   },
   Divider: {
     schema: DividerPropsSchema,
-    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(divider_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React58__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58__default.default.createElement(divider_default, __spreadValues({}, props)))
   },
   Signature: {
     schema: SignaturePropsSchema,
-    Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(SignatureEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React58__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React58__default.default.createElement(SignatureEditor, __spreadValues({}, props)))
   }
 });
 var EditorBlock2 = buildBlockComponent(EDITOR_DICTIONARY);
@@ -6162,15 +6917,15 @@ var EditorBlockSchema = buildBlockConfigurationSchema(EDITOR_DICTIONARY);
 zod.z.record(zod.z.string(), EditorBlockSchema);
 
 // src/editor/editor-block.tsx
-var EditorBlockContext = React60.createContext(null);
-var useCurrentBlockId = () => React60.useContext(EditorBlockContext);
+var EditorBlockContext = React58.createContext(null);
+var useCurrentBlockId = () => React58.useContext(EditorBlockContext);
 function EditorBlock({ id }) {
   const document2 = useDocument();
   const block = document2[id];
   if (!block) {
     throw new Error("Could not find block");
   }
-  return /* @__PURE__ */ React60__default.default.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React60__default.default.createElement(EditorBlock2, __spreadValues({}, block)));
+  return /* @__PURE__ */ React58__default.default.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React58__default.default.createElement(EditorBlock2, __spreadValues({}, block)));
 }
 function ToggleInspectorPanelButton() {
   const inspectorDrawerOpen = useInspectorDrawerOpen();
@@ -6178,20 +6933,20 @@ function ToggleInspectorPanelButton() {
     toggleInspectorDrawerOpen();
   };
   if (inspectorDrawerOpen) {
-    return /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.LastPageOutlined, { fontSize: "small" }));
+    return /* @__PURE__ */ React58__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.LastPageOutlined, { fontSize: "small" }));
   }
-  return /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AppRegistrationOutlined, { fontSize: "small" }));
+  return /* @__PURE__ */ React58__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.AppRegistrationOutlined, { fontSize: "small" }));
 }
 function useIcon() {
   const samplesDrawerOpen = useSamplesDrawerOpen();
   if (samplesDrawerOpen) {
-    return /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FirstPageOutlined, { fontSize: "small" });
+    return /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.FirstPageOutlined, { fontSize: "small" });
   }
-  return /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.MenuOutlined, { fontSize: "small" });
+  return /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.MenuOutlined, { fontSize: "small" });
 }
 function ToggleSamplesPanelButton() {
   const icon = useIcon();
-  return /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
+  return /* @__PURE__ */ React58__default.default.createElement(material.IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
 }
 function formatHtml(html2, spaces = 2) {
   try {
@@ -6239,8 +6994,8 @@ function json(value) {
 
 // src/app/email-canvas/helper/highlighted-code-panel.tsx
 function HighlightedCodePanel({ type, value }) {
-  const [code, setCode] = React60.useState(null);
-  React60.useEffect(() => {
+  const [code, setCode] = React58.useState(null);
+  React58.useEffect(() => {
     switch (type) {
       case "html":
         html(value).then(setCode);
@@ -6253,7 +7008,7 @@ function HighlightedCodePanel({ type, value }) {
   if (code === null) {
     return null;
   }
-  return /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(
     "pre",
     {
       style: {
@@ -6278,18 +7033,18 @@ function HighlightedCodePanel({ type, value }) {
 // src/app/email-canvas/html-panel.tsx
 function HtmlPanel() {
   const document2 = useDocument();
-  const code = React60.useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
-  return /* @__PURE__ */ React60__default.default.createElement(HighlightedCodePanel, { type: "html", value: code });
+  const code = React58.useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
+  return /* @__PURE__ */ React58__default.default.createElement(HighlightedCodePanel, { type: "html", value: code });
 }
 function JsonPanel() {
   const document2 = useDocument();
-  const code = React60.useMemo(() => JSON.stringify(document2, null, "  "), [document2]);
-  return /* @__PURE__ */ React60__default.default.createElement(HighlightedCodePanel, { type: "json", value: code });
+  const code = React58.useMemo(() => JSON.stringify(document2, null, "  "), [document2]);
+  return /* @__PURE__ */ React58__default.default.createElement(HighlightedCodePanel, { type: "json", value: code });
 }
 function TextPanel() {
   const document2 = useDocument();
-  const text = React60.useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
-  return /* @__PURE__ */ React60__default.default.createElement(
+  const text = React58.useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
+  return /* @__PURE__ */ React58__default.default.createElement(
     "pre",
     {
       style: {
@@ -6325,42 +7080,42 @@ function MainTabsGroup() {
         setSelectedMainTab("editor");
     }
   };
-  return /* @__PURE__ */ React60__default.default.createElement(material.Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(material.Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React58__default.default.createElement(
     material.Tab,
     {
       value: "editor",
-      label: /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Edit" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.EditOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Edit" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.EditOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     material.Tab,
     {
       value: "preview",
-      label: /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Preview" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.PreviewOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Preview" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.PreviewOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     material.Tab,
     {
       value: "html",
-      label: /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "HTML output" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.CodeOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "HTML output" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.CodeOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     material.Tab,
     {
       value: "text",
-      label: /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.SubjectOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.SubjectOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     material.Tab,
     {
       value: "json",
-      label: /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "JSON output" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.DataObjectOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "JSON output" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.DataObjectOutlined, { fontSize: "small" }))
     }
   ));
 }
 function SaveButton({ loadTemplates, saveAs }) {
   const { saveTemplate, currentTemplateId, currentTemplateKind, setCurrentTemplate } = useEmailEditor();
   const { showMessage } = useSnackbar();
-  const [saveDialogOpen, setSaveDialogOpen] = React60.useState(false);
+  const [saveDialogOpen, setSaveDialogOpen] = React58.useState(false);
   const document2 = useDocument();
   const isSample = currentTemplateKind === "sample";
   const handleSave = () => __async(null, null, function* () {
@@ -6399,7 +7154,7 @@ function SaveButton({ loadTemplates, saveAs }) {
       return false;
     }
   });
-  return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(React58__default.default.Fragment, null, /* @__PURE__ */ React58__default.default.createElement(
     material.IconButton,
     {
       onClick: handleSave,
@@ -6410,8 +7165,8 @@ function SaveButton({ loadTemplates, saveAs }) {
         }
       }
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: isSample ? "Save as new template" : "Save template" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.SaveOutlined, { fontSize: "small" }))
-  ), /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: isSample ? "Save as new template" : "Save template" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.SaveOutlined, { fontSize: "small" }))
+  ), /* @__PURE__ */ React58__default.default.createElement(
     SaveTemplateDialog,
     {
       open: saveDialogOpen,
@@ -6424,9 +7179,9 @@ function SaveButton({ loadTemplates, saveAs }) {
 function NewTemplateButton({ loadTemplates, saveAs }) {
   const { setCurrentTemplate, loadTemplate } = useEmailEditor();
   const { showMessage } = useSnackbar();
-  const [saveDialogOpen, setSaveDialogOpen] = React60.useState(false);
-  const [templates, setTemplates] = React60.useState([]);
-  const [nameError, setNameError] = React60.useState(null);
+  const [saveDialogOpen, setSaveDialogOpen] = React58.useState(false);
+  const [templates, setTemplates] = React58.useState([]);
+  const [nameError, setNameError] = React58.useState(null);
   const fetchTemplates = () => __async(null, null, function* () {
     if (loadTemplates) {
       try {
@@ -6481,7 +7236,7 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
     }
     return false;
   });
-  return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(React58__default.default.Fragment, null, /* @__PURE__ */ React58__default.default.createElement(
     material.IconButton,
     {
       onClick: handleNewTemplate,
@@ -6492,8 +7247,8 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
         }
       }
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "New template" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.Add, { fontSize: "small" }))
-  ), /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "New template" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.Add, { fontSize: "small" }))
+  ), /* @__PURE__ */ React58__default.default.createElement(
     SaveTemplateDialog,
     {
       open: saveDialogOpen,
@@ -6520,7 +7275,18 @@ function SubjectInput() {
       root: __spreadProps(__spreadValues({}, root), { data: __spreadProps(__spreadValues({}, data), { subject: value }) })
     });
   };
-  return /* @__PURE__ */ React60__default.default.createElement(
+  const trackFocus = (e) => {
+    var _a2, _b;
+    const target = e.target;
+    if (!target || typeof target.value !== "string") return;
+    setLastFocusedEditable({
+      blockId: "subject",
+      field: "subject",
+      selectionStart: (_a2 = target.selectionStart) != null ? _a2 : target.value.length,
+      selectionEnd: (_b = target.selectionEnd) != null ? _b : target.value.length
+    });
+  };
+  return /* @__PURE__ */ React58__default.default.createElement(
     material.Box,
     {
       sx: {
@@ -6537,19 +7303,191 @@ function SubjectInput() {
         gap: 1.5
       }
     },
-    /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
-    /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
+    /* @__PURE__ */ React58__default.default.createElement(
       material.InputBase,
       {
         fullWidth: true,
         placeholder: "Email subject \u2014 supports {{variables}}",
         value: subject,
         onChange: (e) => handleChange(e.target.value),
+        onFocus: trackFocus,
+        onSelect: trackFocus,
+        onKeyUp: trackFocus,
+        onClick: trackFocus,
         sx: { fontSize: 14 }
       }
     )
   );
 }
+function SubjectPreview() {
+  var _a, _b;
+  const document2 = useDocument();
+  const root = document2.root;
+  if (!root || root.type !== "EmailLayout") return null;
+  const data = root.data;
+  const subject = (_a = data.subject) != null ? _a : "";
+  if (!subject) return null;
+  const samples = buildSampleValueMap((_b = data.variables) != null ? _b : []);
+  const rendered = substituteSampleValues(subject, samples);
+  return /* @__PURE__ */ React58__default.default.createElement(
+    material.Box,
+    {
+      sx: {
+        px: 3,
+        py: 1.25,
+        borderBottom: 1,
+        borderColor: "divider",
+        backgroundColor: "white",
+        position: "sticky",
+        top: 49,
+        zIndex: "appBar",
+        display: "flex",
+        alignItems: "center",
+        gap: 1.5
+      }
+    },
+    /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
+    /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: { fontSize: 14 } }, rendered)
+  );
+}
+function generateId3() {
+  return `block-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+}
+function buildImageBlock(uploaded) {
+  var _a, _b, _c;
+  return {
+    type: "Image",
+    data: {
+      props: {
+        url: uploaded.url,
+        width: (_a = uploaded.width) != null ? _a : null,
+        height: (_b = uploaded.height) != null ? _b : null,
+        alt: (_c = uploaded.alt) != null ? _c : "",
+        contentAlignment: "middle"
+      },
+      style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } }
+    }
+  };
+}
+function appendImageBlock(uploaded) {
+  var _a;
+  const doc = getDocument();
+  const root = doc.root;
+  if (!root || root.type !== "EmailLayout") return;
+  const id = generateId3();
+  const childrenIds = [...(_a = root.data.childrenIds) != null ? _a : [], id];
+  setDocument({
+    [id]: buildImageBlock(uploaded),
+    root: __spreadProps(__spreadValues({}, root), { data: __spreadProps(__spreadValues({}, root.data), { childrenIds }) })
+  });
+  setSelectedBlockId(id);
+}
+function findImageFile(items) {
+  var _a;
+  if (!items) return null;
+  const fileList = items instanceof FileList ? Array.from(items) : Array.from(items);
+  for (const item of fileList) {
+    const file = item instanceof File ? item : (_a = item.getAsFile) == null ? void 0 : _a.call(item);
+    if (file && file.type.startsWith("image/")) return file;
+  }
+  return null;
+}
+function ImageDropPasteHandler({ enabled, children }) {
+  const { uploadImage } = useImageCallbacks();
+  const wrapperRef = React58.useRef(null);
+  const dragDepth = React58.useRef(0);
+  const [dragging, setDragging] = React58.useState(false);
+  const [uploading, setUploading] = React58.useState(false);
+  const active = enabled && Boolean(uploadImage);
+  React58.useEffect(() => {
+    if (!active || !uploadImage) return;
+    const handlePaste = (e) => __async(null, null, function* () {
+      var _a;
+      const target = e.target;
+      if ((target == null ? void 0 : target.tagName) === "INPUT" || (target == null ? void 0 : target.tagName) === "TEXTAREA" || (target == null ? void 0 : target.isContentEditable)) return;
+      const file = findImageFile((_a = e.clipboardData) == null ? void 0 : _a.files);
+      if (!file) return;
+      e.preventDefault();
+      setUploading(true);
+      try {
+        const uploaded = yield uploadImage(file);
+        appendImageBlock(uploaded);
+      } catch (e2) {
+      } finally {
+        setUploading(false);
+      }
+    });
+    window.addEventListener("paste", handlePaste);
+    return () => window.removeEventListener("paste", handlePaste);
+  }, [active, uploadImage]);
+  if (!active) return /* @__PURE__ */ React58__default.default.createElement(React58__default.default.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;
+    dragDepth.current += 1;
+    setDragging(true);
+  };
+  const onDragLeave = () => {
+    dragDepth.current = Math.max(0, dragDepth.current - 1);
+    if (dragDepth.current === 0) setDragging(false);
+  };
+  const onDragOver = (e) => {
+    var _a, _b;
+    if (!Array.from((_b = (_a = e.dataTransfer) == null ? void 0 : _a.items) != null ? _b : []).some((i) => i.kind === "file")) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+  };
+  const onDrop = (e) => __async(null, null, function* () {
+    var _a;
+    dragDepth.current = 0;
+    setDragging(false);
+    const file = findImageFile((_a = e.dataTransfer) == null ? void 0 : _a.files);
+    if (!file || !uploadImage) return;
+    e.preventDefault();
+    setUploading(true);
+    try {
+      const uploaded = yield uploadImage(file);
+      appendImageBlock(uploaded);
+    } catch (e2) {
+    } finally {
+      setUploading(false);
+    }
+  });
+  return /* @__PURE__ */ React58__default.default.createElement(
+    material.Box,
+    {
+      ref: wrapperRef,
+      onDragEnter,
+      onDragLeave,
+      onDragOver,
+      onDrop,
+      sx: { position: "relative" }
+    },
+    children,
+    (dragging || uploading) && /* @__PURE__ */ React58__default.default.createElement(
+      material.Box,
+      {
+        sx: {
+          position: "absolute",
+          inset: 0,
+          backgroundColor: "rgba(33, 150, 243, 0.06)",
+          border: "2px dashed",
+          borderColor: "primary.main",
+          borderRadius: 1,
+          display: "flex",
+          alignItems: "flex-start",
+          justifyContent: "center",
+          paddingTop: 12,
+          color: "primary.dark",
+          pointerEvents: "none",
+          zIndex: 10
+        }
+      },
+      /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontWeight: 600, fontSize: 14 } }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.CloudUploadOutlined, null), uploading ? "Uploading\u2026" : "Drop image to insert")
+    )
+  );
+}
 
 // src/app/email-canvas/index.tsx
 function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true }) {
@@ -6580,21 +7518,29 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
     }
   };
   const renderMainPanel = () => {
+    var _a;
     switch (selectedMainTab) {
       case "editor":
-        return /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React60__default.default.createElement(EditorBlock, { id: "root" }));
-      case "preview":
-        return /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React60__default.default.createElement(Reader, { document: document2, rootBlockId: "root" }));
+        return /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React58__default.default.createElement(EditorBlock, { id: "root" }));
+      case "preview": {
+        const rootBlock = document2.root;
+        const layoutData = rootBlock && rootBlock.type === "EmailLayout" ? rootBlock.data : void 0;
+        const samples = buildSampleValueMap(
+          (_a = layoutData == null ? void 0 : layoutData.variables) != null ? _a : []
+        );
+        const previewDoc = applySampleValuesToDocument(document2, samples);
+        return /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React58__default.default.createElement(Reader, { document: previewDoc, rootBlockId: "root" }));
+      }
       case "html":
-        return /* @__PURE__ */ React60__default.default.createElement(HtmlPanel, null);
+        return /* @__PURE__ */ React58__default.default.createElement(HtmlPanel, null);
       case "text":
-        return /* @__PURE__ */ React60__default.default.createElement(TextPanel, null);
+        return /* @__PURE__ */ React58__default.default.createElement(TextPanel, null);
       case "json":
-        return /* @__PURE__ */ React60__default.default.createElement(JsonPanel, null);
+        return /* @__PURE__ */ React58__default.default.createElement(JsonPanel, null);
     }
   };
   const showSaveButtons = persistenceEnabled;
-  return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(React58__default.default.Fragment, null, /* @__PURE__ */ React58__default.default.createElement(
     material.Stack,
     {
       sx: {
@@ -6611,13 +7557,13 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
       justifyContent: "space-between",
       alignItems: "center"
     },
-    samplesDrawerEnabled && /* @__PURE__ */ React60__default.default.createElement(ToggleSamplesPanelButton, null),
-    /* @__PURE__ */ React60__default.default.createElement(material.Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React60__default.default.createElement(MainTabsGroup, null)), /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React60__default.default.createElement(material.ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "desktop" }, /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "mobile" }, /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.PhoneIphoneOutlined, { fontSize: "small" })))), showSaveButtons && /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(NewTemplateButton, { loadTemplates, saveAs }), /* @__PURE__ */ React60__default.default.createElement(SaveButton, { loadTemplates, saveAs })))),
-    /* @__PURE__ */ React60__default.default.createElement(ToggleInspectorPanelButton, null)
-  ), selectedMainTab === "editor" && /* @__PURE__ */ React60__default.default.createElement(SubjectInput, null), /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: {
+    samplesDrawerEnabled && /* @__PURE__ */ React58__default.default.createElement(ToggleSamplesPanelButton, null),
+    /* @__PURE__ */ React58__default.default.createElement(material.Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React58__default.default.createElement(MainTabsGroup, null)), /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React58__default.default.createElement(material.ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "desktop" }, /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React58__default.default.createElement(material.ToggleButton, { value: "mobile" }, /* @__PURE__ */ React58__default.default.createElement(material.Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.PhoneIphoneOutlined, { fontSize: "small" })))), showSaveButtons && /* @__PURE__ */ React58__default.default.createElement(React58__default.default.Fragment, null, /* @__PURE__ */ React58__default.default.createElement(NewTemplateButton, { loadTemplates, saveAs }), /* @__PURE__ */ React58__default.default.createElement(SaveButton, { loadTemplates, saveAs })))),
+    /* @__PURE__ */ React58__default.default.createElement(ToggleInspectorPanelButton, null)
+  ), selectedMainTab === "editor" && /* @__PURE__ */ React58__default.default.createElement(SubjectInput, null), selectedMainTab === "preview" && /* @__PURE__ */ React58__default.default.createElement(SubjectPreview, null), /* @__PURE__ */ React58__default.default.createElement(ImageDropPasteHandler, { enabled: selectedMainTab === "editor" }, /* @__PURE__ */ React58__default.default.createElement(material.Box, { sx: {
     paddingBottom: "50px",
     minWidth: 370
-  } }, renderMainPanel()));
+  } }, renderMainPanel())));
 }
 
 // src/app/index.tsx
@@ -6653,7 +7599,7 @@ function useDrawerTransition(cssProperty, open) {
     duration: !open ? transitions.duration.leavingScreen : transitions.duration.enteringScreen
   });
 }
-var EmailEditorInternal = React60.forwardRef((props, ref) => {
+var EmailEditorInternal = React58.forwardRef((props, ref) => {
   const {
     drawerEnterDuration = 225,
     drawerExitDuration = 225,
@@ -6675,10 +7621,10 @@ var EmailEditorInternal = React60.forwardRef((props, ref) => {
   const samplesDrawerOpen = useSamplesDrawerOpen();
   const marginLeftTransition = useDrawerTransition("margin-left", samplesDrawerOpen);
   const marginRightTransition = useDrawerTransition("margin-right", inspectorDrawerOpen);
-  const onChangeRef = React60.useRef(onChange);
+  const onChangeRef = React58.useRef(onChange);
   onChangeRef.current = onChange;
-  const prevDocJsonRef = React60.useRef("");
-  React60.useEffect(() => {
+  const prevDocJsonRef = React58.useRef("");
+  React58.useEffect(() => {
     var _a;
     const docJson = JSON.stringify(currentDocument);
     if (docJson !== prevDocJsonRef.current) {
@@ -6686,7 +7632,7 @@ var EmailEditorInternal = React60.forwardRef((props, ref) => {
       (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, currentDocument);
     }
   }, [currentDocument]);
-  React60.useImperativeHandle(ref, () => ({
+  React58.useImperativeHandle(ref, () => ({
     saveTemplate: () => {
       return saveTemplate();
     },
@@ -6698,7 +7644,7 @@ var EmailEditorInternal = React60.forwardRef((props, ref) => {
       return getDocument();
     }
   }));
-  return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React60__default.default.createElement(
+  return /* @__PURE__ */ React58__default.default.createElement(material.Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React58__default.default.createElement(
     InspectorDrawer,
     {
       enterDuration: drawerEnterDuration,
@@ -6706,7 +7652,7 @@ var EmailEditorInternal = React60.forwardRef((props, ref) => {
       deleteTemplate,
       copyTemplate
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     SamplesDrawer,
     {
       enterDuration: drawerEnterDuration,
@@ -6722,7 +7668,7 @@ var EmailEditorInternal = React60.forwardRef((props, ref) => {
       setTemplateKind,
       saveAs
     }
-  ), /* @__PURE__ */ React60__default.default.createElement(
+  ), /* @__PURE__ */ React58__default.default.createElement(
     material.Stack,
     {
       sx: {
@@ -6731,10 +7677,10 @@ var EmailEditorInternal = React60.forwardRef((props, ref) => {
         transition: [marginLeftTransition, marginRightTransition].join(", ")
       }
     },
-    /* @__PURE__ */ React60__default.default.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
+    /* @__PURE__ */ React58__default.default.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
   ));
 });
-var EmailEditor = React60.forwardRef((props, ref) => {
+var EmailEditor = React58.forwardRef((props, ref) => {
   const {
     initialTemplate: initialTemplateProp,
     initialTemplateId,
@@ -6754,21 +7700,28 @@ var EmailEditor = React60.forwardRef((props, ref) => {
     renameTemplate,
     setTemplateKind,
     saveAs,
+    uploadImage,
+    loadImages,
+    deleteImage,
     theme
   } = props;
-  const resolvedTemplate = React60.useMemo(
+  const resolvedTemplate = React58.useMemo(
     () => typeof initialTemplateProp === "string" ? htmlToEditorConfig(initialTemplateProp) : initialTemplateProp,
     [initialTemplateProp]
   );
-  const prevTemplateRef = React60.useRef(void 0);
+  const prevTemplateRef = React58.useRef(void 0);
   if (resolvedTemplate && resolvedTemplate !== prevTemplateRef.current) {
     prevTemplateRef.current = resolvedTemplate;
     resetDocument(resolvedTemplate);
   }
-  React60.useEffect(() => {
+  React58.useEffect(() => {
     setPersistenceEnabled(persistenceEnabled);
   }, [persistenceEnabled]);
-  return /* @__PURE__ */ React60__default.default.createElement(material.ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React60__default.default.createElement(material.CssBaseline, null), /* @__PURE__ */ React60__default.default.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React60__default.default.createElement(SnackbarProvider, null, /* @__PURE__ */ React60__default.default.createElement(
+  const imageCallbacks = React58.useMemo(
+    () => ({ uploadImage, loadImages, deleteImage }),
+    [uploadImage, loadImages, deleteImage]
+  );
+  return /* @__PURE__ */ React58__default.default.createElement(material.ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React58__default.default.createElement(material.CssBaseline, null), /* @__PURE__ */ React58__default.default.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React58__default.default.createElement(SnackbarProvider, null, /* @__PURE__ */ React58__default.default.createElement(ImageCallbacksProvider, { callbacks: imageCallbacks }, /* @__PURE__ */ React58__default.default.createElement(
     EmailEditorProvider,
     {
       initialTemplate: resolvedTemplate,
@@ -6777,7 +7730,7 @@ var EmailEditor = React60.forwardRef((props, ref) => {
       onSave,
       onChange
     },
-    /* @__PURE__ */ React60__default.default.createElement(
+    /* @__PURE__ */ React58__default.default.createElement(
       EmailEditorInternal,
       {
         ref,
@@ -6796,7 +7749,7 @@ var EmailEditor = React60.forwardRef((props, ref) => {
         onChange
       }
     )
-  ))));
+  )))));
 });
 EmailEditor.displayName = "EmailEditor";
 EmailEditorInternal.displayName = "EmailEditorInternal";