react-email-studio 3.1.1 → 3.3.0

package/dist/index.cjs

@@ -34,6 +34,8 @@ __export(index_exports, {
   ReactEmailEditor: () => ReactEmailEditor,
   base64ToUtf8: () => base64ToUtf8,
   emailPreviewDevices: () => DEVICES,
+  extractHtmlForDesign: () => extractHtmlForDesign,
+  htmlToEmailDesignTemplate: () => htmlToEmailDesignTemplate,
   jsonToHtml: () => jsonToHtml,
   utf8ToBase64: () => utf8ToBase64
 });
@@ -152,7 +154,6 @@ var I18N = {
     delete: "Delete",
     moveUp: "Move Up",
     moveDown: "Move Down",
-    mergeTags: "Merge Tags",
     autoSaved: "Auto-saved",
     search: "Search blocks\u2026",
     zoomIn: "Zoom In",
@@ -169,7 +170,7 @@ var I18N = {
     blockPaletteGroupActions: "Buttons & links",
     blockPaletteGroupWidgets: "Widgets",
     closePanel: "Close",
-    canvasEmptyHint: "Drag blocks from the library into the column, or add a Layout block for multi-column sections.",
+    canvasEmptyHint: "Drag row layouts or blocks from the library. Drop blocks into a column or onto the mail preview area.",
     emailContentSettings: "Email content",
     loadingDesign: "Loading design\u2026"
   },
@@ -211,7 +212,6 @@ var I18N = {
     delete: "Supprimer",
     moveUp: "Monter",
     moveDown: "Descendre",
-    mergeTags: "Balises fusion",
     autoSaved: "Auto-sauvegard\xE9",
     search: "Rechercher\u2026",
     colorScheme: "Sch\xE9ma de couleurs",
@@ -271,7 +271,6 @@ var I18N = {
     delete: "L\xF6schen",
     moveUp: "Nach oben",
     moveDown: "Nach unten",
-    mergeTags: "Merge-Tags",
     autoSaved: "Auto-gespeichert",
     search: "Bl\xF6cke suchen\u2026",
     colorScheme: "Farbschema",
@@ -329,7 +328,6 @@ var I18N = {
     delete: "Eliminar",
     moveUp: "Subir",
     moveDown: "Bajar",
-    mergeTags: "Etiquetas de fusi\xF3n",
     autoSaved: "Auto-guardado",
     search: "Buscar bloques\u2026",
     zoomIn: "Zoom +",
@@ -1127,7 +1125,7 @@ function rowToHtml(row) {
     const r = row.ratios[i] ?? 1;
     const cs = row.columnStyles && row.columnStyles[i] ? row.columnStyles[i] : {};
     const colShell = emailSurfaceBgCss(cs);
-    const pad = cs.padding && typeof cs.padding === "object" && !Array.isArray(cs.padding) ? `padding:${(() => {
+    const pad3 = cs.padding && typeof cs.padding === "object" && !Array.isArray(cs.padding) ? `padding:${(() => {
       const o = cs.padding;
       const t = numOr2(o.top, 0);
       const rgt = numOr2(o.right, t);
@@ -1143,7 +1141,7 @@ function rowToHtml(row) {
       const bl = numOr2(x.bl, tr2);
       return `border-radius:${tl}px ${tr2}px ${br}px ${bl}px;`;
     })() : typeof cs.borderRadius === "number" && Number.isFinite(cs.borderRadius) ? `border-radius:${cs.borderRadius}px;` : "";
-    return `<div style="flex:${r} 1 0;min-width:0;box-sizing:border-box;${pad}${rad}${colShell}">${cell.map(blockToHtml).join("")}</div>`;
+    return `<div style="flex:${r} 1 0;min-width:0;box-sizing:border-box;${pad3}${rad}${colShell}">${cell.map(blockToHtml).join("")}</div>`;
   }).join("")}</div>`;
   const innerTrim = inner.replace(/>\s+</g, "><").trim();
   const body = innerTrim || "&nbsp;";
@@ -1363,8 +1361,8 @@ function layoutColumnBorderRadiusForDoc(r) {
   }
   return 0;
 }
-function columnPaddingNonZero(pad) {
-  return pad.top !== 0 || pad.right !== 0 || pad.bottom !== 0 || pad.left !== 0;
+function columnPaddingNonZero(pad3) {
+  return pad3.top !== 0 || pad3.right !== 0 || pad3.bottom !== 0 || pad3.left !== 0;
 }
 function columnRadiusNonZero(r) {
   if (typeof r === "number") return r !== 0;
@@ -1721,9 +1719,9 @@ function mapBlockToInternal(b, layoutDepth = 0) {
       if (asNum(s.fontWeight) != null) block.props.fontWeight = s.fontWeight;
       if (asNum(s.borderRadius) != null) block.props.borderRadius = s.borderRadius;
       if (s.padding && typeof s.padding === "object") {
-        const pad = s.padding;
-        block.props.paddingV = asNum(pad.top) ?? block.props.paddingV;
-        block.props.paddingH = asNum(pad.right) ?? block.props.paddingH;
+        const pad3 = s.padding;
+        block.props.paddingV = asNum(pad3.top) ?? block.props.paddingV;
+        block.props.paddingH = asNum(pad3.right) ?? block.props.paddingH;
       }
       if (asStr(s.textAlign)) block.props.align = s.textAlign;
       break;
@@ -2238,10 +2236,15 @@ function useLiveCountdown(endDate) {
   const s = Math.floor(diff % 6e4 / 1e3);
   return [d, h, m, s];
 }
-function editChromeBorder(C, preview) {
+function layoutSplitChromeBorder(_C, preview) {
   if (preview) return {};
-  return { border: `1px dotted ${C.border}`, boxSizing: "border-box" };
+  return {
+    border: "1px dotted rgba(148, 163, 184, 0.5)",
+    boxSizing: "border-box"
+  };
 }
+var CONTENT_BLOCK_HOVER_BORDER = "1px dotted rgba(148, 163, 184, 0.5)";
+var EMPTY_CELL_COLUMN_MIN_H = "min(320px, 42vh)";
 function blockLinkCaptureHandler(preview, e) {
   if (preview) return;
   const t = e.target;
@@ -2273,6 +2276,7 @@ function radiusCssLayout(v) {
   return "0px";
 }
 function ContentBlock({ block, selected, onClick, preview, C }) {
+  const [hover, setHover] = (0, import_react.useState)(false);
   const { type, props: p } = block;
   const numOr2 = (v, fb) => typeof v === "number" && Number.isFinite(v) ? v : fb;
   const boxPx = (v) => {
@@ -2316,14 +2320,19 @@ function ContentBlock({ block, selected, onClick, preview, C }) {
       onClick: preview ? void 0 : onClick || void 0,
       onClickCapture: (e) => blockLinkCaptureHandler(preview, e),
       onAuxClickCapture: (e) => blockLinkCaptureHandler(preview, e),
+      onMouseEnter: preview ? void 0 : () => setHover(true),
+      onMouseLeave: preview ? void 0 : () => setHover(false),
       style: {
         cursor: preview ? "default" : onClick ? "pointer" : "default",
         outline: selected && !preview ? `2px solid ${C.accent}` : "2px solid transparent",
         outlineOffset: 1,
         borderRadius: 3,
-        transition: "outline .12s",
+        transition: "outline .12s, border-color .12s",
         position: "relative",
-        ...editChromeBorder(C, preview),
+        ...preview ? {} : {
+          border: hover ? CONTENT_BLOCK_HOVER_BORDER : "1px solid transparent",
+          boxSizing: "border-box"
+        },
         ...shellBg,
         padding: paddingCss(p.padding),
         margin: marginCss(p.margin)
@@ -2542,6 +2551,8 @@ function NestedRowBlock({
   rowId,
   cellIdx,
   parentBlockIdx,
+  /** When this layout sits inside another layout column, meta uses `contentIdx` + `inner` like other nested blocks. */
+  selectionInner,
   editorId,
   selectedKey,
   selContentMeta,
@@ -2553,7 +2564,7 @@ function NestedRowBlock({
   C
 }) {
   const p = block.props;
-  const rowSelected = !preview && selContentMeta && selContentMeta.rowId === rowId && selContentMeta.cellIdx === cellIdx && selContentMeta.contentIdx === parentBlockIdx && !selContentMeta.inner && selectedKey === block.id;
+  const rowSelected = !preview && selContentMeta && selContentMeta.rowId === rowId && selContentMeta.cellIdx === cellIdx && selectedKey === block.id && (selectionInner == null ? selContentMeta.contentIdx === parentBlockIdx && !selContentMeta.inner : selContentMeta.contentIdx === parentBlockIdx && selContentMeta.inner && selContentMeta.inner.cellIdx === selectionInner.cellIdx && selContentMeta.inner.contentIdx === selectionInner.contentIdx);
   const rowStyle = {
     padding: p.padding ?? 8,
     position: "relative",
@@ -2561,7 +2572,7 @@ function NestedRowBlock({
     outline: rowSelected ? `2px solid ${C.accent}` : "2px solid transparent",
     outlineOffset: 1,
     transition: "outline .12s",
-    ...editChromeBorder(C, preview),
+    ...layoutSplitChromeBorder(C, preview),
     ...backgroundLayerStyle({
       bgColor: p.bgColor,
       bgImage: p.bgImage,
@@ -2577,7 +2588,13 @@ function NestedRowBlock({
       style: rowStyle,
       onClick: preview ? void 0 : (e) => {
         e.stopPropagation();
-        onSelectContent(block.id, rowId, cellIdx, parentBlockIdx, null);
+        onSelectContent(
+          block.id,
+          rowId,
+          cellIdx,
+          parentBlockIdx,
+          selectionInner ?? null
+        );
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", gap: p.gap ?? 12 }, children: (p.cells || []).map((innerBlocks, ici) => {
         const cS = p.columnStyles && p.columnStyles[ici] || {};
@@ -2587,7 +2604,10 @@ function NestedRowBlock({
             style: {
               flex: p.ratios?.[ici] ?? 1,
               minWidth: 0,
-              ...editChromeBorder(C, preview),
+              minHeight: preview ? void 0 : EMPTY_CELL_COLUMN_MIN_H,
+              display: "flex",
+              flexDirection: "column",
+              ...layoutSplitChromeBorder(C, preview),
               ...backgroundLayerStyle(cS),
               padding: paddingCssLayout(cS.padding),
               borderRadius: radiusCssLayout(cS.borderRadius),
@@ -2643,7 +2663,13 @@ function BlockItem({
     if (!onSelectContent) return;
     e.stopPropagation();
     if (isSplitLayoutBlock(cb)) {
-      onSelectContent(cb.id, rowId, cellIdx, nest ? nest.parentBlockIdx : ci, null);
+      onSelectContent(
+        cb.id,
+        rowId,
+        cellIdx,
+        nest ? nest.parentBlockIdx : ci,
+        nest ? { cellIdx: innerCellIdx, contentIdx: ci } : null
+      );
     } else {
       onSelectContent(
         cb.id,
@@ -2714,6 +2740,7 @@ function BlockItem({
                 rowId,
                 cellIdx,
                 parentBlockIdx: nest ? nest.parentBlockIdx : ci,
+                selectionInner: nest ? { cellIdx: innerCellIdx, contentIdx: ci } : null,
                 editorId,
                 selectedKey,
                 selContentMeta,
@@ -2797,6 +2824,7 @@ function Cell({
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { position: "absolute", left: -4, top: "50%", transform: "translateY(-50%)", width: 8, height: 8, borderRadius: "50%", background: C.accent } }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { position: "absolute", right: -4, top: "50%", transform: "translateY(-50%)", width: 8, height: 8, borderRadius: "50%", background: C.accent } })
   ] }) : null;
+  const cellEmpty = !preview && blocks.length === 0;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
@@ -2806,17 +2834,43 @@ function Cell({
       onDragLeave: handleDragLeave,
       onDrop: handleDrop,
       style: {
-        flex: 1,
-        minHeight: preview ? void 0 : 44,
+        flex: cellEmpty ? 1 : void 0,
+        display: "flex",
+        flexDirection: "column",
+        minHeight: preview ? void 0 : cellEmpty ? 0 : 44,
         borderRadius: 4,
-        ...preview ? {} : insertAt !== null ? { border: `1px dotted ${C.accent}`, background: `${C.accent}0a` } : editChromeBorder(C, false),
-        background: insertAt !== null ? `${C.accent}0a` : "transparent",
+        ...preview ? {} : insertAt !== null && !cellEmpty ? { border: `1px dotted ${C.accent}`, background: `${C.accent}0a` } : {},
+        background: insertAt !== null && !cellEmpty ? `${C.accent}0a` : "transparent",
         transition: "border-color .15s,background .15s",
         padding: preview ? 0 : 0,
         position: "relative"
       },
       children: [
-        !preview && blocks.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: "10px 4px", textAlign: "center", color: insertAt !== null ? C.accent2 : C.muted, fontSize: 10, userSelect: "none", fontWeight: insertAt !== null ? 700 : 400, transition: "color .15s" }, children: insertAt !== null ? "Release to drop" : "Drop here" }),
+        cellEmpty && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              margin: 4,
+              borderRadius: 8,
+              boxSizing: "border-box",
+              textAlign: "center",
+              userSelect: "none",
+              transition: "color .15s, border-color .15s, background .15s, box-shadow .15s",
+              border: insertAt !== null ? `2px dashed ${C.accent}` : `2px dashed ${C.border}`,
+              background: insertAt !== null ? `${C.accent}14` : `${C.canvas}`,
+              boxShadow: insertAt !== null ? `inset 0 0 0 1px ${C.accent}22` : `inset 0 0 0 1px ${C.border}99`,
+              color: insertAt !== null ? C.accent2 : C.muted,
+              fontSize: 11,
+              fontWeight: insertAt !== null ? 700 : 500,
+              letterSpacing: "0.02em"
+            },
+            children: insertAt !== null ? "Release to drop" : "Drop here"
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Line, { idx: 0 }),
         blocks.map((cb, ci) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           BlockItem,
@@ -2867,7 +2921,6 @@ function LayoutRow({
     transition: "outline .12s",
     padding: row.padding,
     position: "relative",
-    ...editChromeBorder(C, preview),
     ...backgroundLayerStyle({
       bgColor: row.bgColor,
       bgImage: row.bgImage,
@@ -2906,8 +2959,9 @@ function LayoutRow({
             id: editorId ? `${editorId}-col-${row.id}-${ci}` : void 0,
             style: {
               flex: row.ratios[ci] ?? 1,
-              minHeight: 50,
-              ...editChromeBorder(C, preview),
+              minHeight: preview ? 50 : EMPTY_CELL_COLUMN_MIN_H,
+              display: "flex",
+              flexDirection: "column",
               ...backgroundLayerStyle(cS),
               padding: paddingCssLayout(cS.padding),
               borderRadius: radiusCssLayout(cS.borderRadius),
@@ -3081,13 +3135,13 @@ var FONTS = [
   "Trebuchet MS,sans-serif",
   "Impact,sans-serif"
 ];
-function paddingToCss(pad, fallback) {
-  if (typeof pad === "number" && Number.isFinite(pad)) return `${Math.max(0, pad)}px`;
-  if (pad && typeof pad === "object" && !Array.isArray(pad)) {
-    const t = typeof pad.top === "number" && Number.isFinite(pad.top) ? pad.top : fallback;
-    const r = typeof pad.right === "number" && Number.isFinite(pad.right) ? pad.right : t;
-    const b = typeof pad.bottom === "number" && Number.isFinite(pad.bottom) ? pad.bottom : t;
-    const l = typeof pad.left === "number" && Number.isFinite(pad.left) ? pad.left : r;
+function paddingToCss(pad3, fallback) {
+  if (typeof pad3 === "number" && Number.isFinite(pad3)) return `${Math.max(0, pad3)}px`;
+  if (pad3 && typeof pad3 === "object" && !Array.isArray(pad3)) {
+    const t = typeof pad3.top === "number" && Number.isFinite(pad3.top) ? pad3.top : fallback;
+    const r = typeof pad3.right === "number" && Number.isFinite(pad3.right) ? pad3.right : t;
+    const b = typeof pad3.bottom === "number" && Number.isFinite(pad3.bottom) ? pad3.bottom : t;
+    const l = typeof pad3.left === "number" && Number.isFinite(pad3.left) ? pad3.left : r;
     return `${t}px ${r}px ${b}px ${l}px`;
   }
   return `${fallback}px`;
@@ -3301,11 +3355,8 @@ function ToolbarTypographyControls({ editor, C }) {
 }
 function FormattingToolbar({
   editor,
-  C,
-  mergeTags,
-  onMergeTagInsert
+  C
 }) {
-  const [mergeSel, setMergeSel] = (0, import_react2.useState)("");
   const [linkPanelOpen, setLinkPanelOpen] = (0, import_react2.useState)(false);
   const [linkUrlValue, setLinkUrlValue] = (0, import_react2.useState)("");
   const ibtn = (active) => toolbarIconBtn(C, active);
@@ -3625,8 +3676,6 @@ function TextRichEditor({
   value,
   onChange,
   typography,
-  mergeTags,
-  onMergeTagInsert,
   placeholder = "Write your message\u2026",
   headerTitle = "Rich editor",
   C
@@ -3770,15 +3819,7 @@ function TextRichEditor({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          FormattingToolbar,
-          {
-            editor,
-            C,
-            mergeTags,
-            onMergeTagInsert
-          }
-        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormattingToolbar, { editor, C }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: proseStyle }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
@@ -3829,15 +3870,7 @@ function TextRichEditor({
         background: C.inputBg
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          FormattingToolbar,
-          {
-            editor,
-            C,
-            mergeTags,
-            onMergeTagInsert
-          }
-        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormattingToolbar, { editor, C }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: proseStyle }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
@@ -4837,7 +4870,7 @@ function BlockSurfaceBgInspector({
     ] }) : null
   ] });
 }
-function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }) {
+function ContentBlockEditor({ block, onChange, onClose, onUpload, C }) {
   const { IS, CI } = useIS(C);
   const imageFileRef = (0, import_react4.useRef)(null);
   const p = block.props;
@@ -4856,7 +4889,6 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "checkbox", checked: !!p[k], onChange: (e) => set(k, e.target.checked), style: { width: 15, height: 15, accentColor: C.accent } }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: C.muted, fontSize: 12 }, children: p[k] ? "On" : "Off" })
   ] }) });
-  const TagPicker = (_field) => null;
   const FONTS2 = ["Georgia,serif", "Arial,sans-serif", "Verdana,sans-serif", "'Courier New',monospace", "Trebuchet MS,sans-serif", "Impact,sans-serif"];
   const ImgUpload = (key) => {
     if (!onUpload) return null;
@@ -4905,12 +4937,12 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NumRangePx, { label: "Letter spacing", value: p.letterSpacing ?? 0, onChange: (n) => set("letterSpacing", n), min: 0, max: 30, step: 0.5, C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: "Line height", C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "number", style: useIS(C).IS, min: 0.8, max: 4, step: 0.05, value: p.lineHeight ?? 1.2, onChange: (e) => set("lineHeight", +e.target.value) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlockSurfaceBgInspector, { variant: "surface", p, set, C, onUpload, syncKey: block.id }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad) => set("padding", pad), C }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad3) => set("padding", pad3), C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarginEditor, { value: p.margin, onChange: (m) => set("margin", m), C })
       ] });
     case "text":
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: "Content (HTML)", C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: "Content", C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "textarea",
           {
             style: { ...IS, minHeight: 200, resize: "vertical", fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace", fontSize: 12, lineHeight: 1.45 },
@@ -4921,24 +4953,6 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
           },
           block.id
         ) }),
-        mergeTags && mergeTags.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: "Insert merge tag", C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-          "select",
-          {
-            style: IS,
-            defaultValue: "",
-            onChange: (e) => {
-              const v = e.target.value;
-              if (v) {
-                set("content", normalizeRichHtmlForStorage((p.content || "") + " " + v));
-                e.target.value = "";
-              }
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: "Choose\u2026" }),
-              mergeTags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: t.value, children: t.name }, t.name))
-            ]
-          }
-        ) }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NumRangePx, { label: "Font size", value: p.fontSize ?? 15, onChange: (n) => set("fontSize", n), min: 8, max: 96, step: 1, C }),
         Col("color", "Color"),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AlignButtons, { value: p.align, onChange: (v) => set("align", v), options: ["left", "center", "right", "justify"], C }),
@@ -4949,7 +4963,7 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: "Line height", C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "number", style: useIS(C).IS, min: 1, max: 4, step: 0.05, value: p.lineHeight ?? 1.65, onChange: (e) => set("lineHeight", +e.target.value) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NumRangePx, { label: "Letter spacing", value: p.letterSpacing ?? 0, onChange: (n) => set("letterSpacing", n), min: 0, max: 30, step: 0.5, C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlockSurfaceBgInspector, { variant: "surface", p, set, C, onUpload, syncKey: block.id }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad) => set("padding", pad), C }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad3) => set("padding", pad3), C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarginEditor, { value: p.margin, onChange: (m) => set("margin", m), C })
       ] });
     case "html":
@@ -4968,15 +4982,13 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
               letterSpacing: p.letterSpacing,
               padding: p.padding
             },
-            mergeTags,
-            onMergeTagInsert: (tag) => set("content", (p.content || "") + " " + tag),
             placeholder: "Write your rich content\u2026",
             headerTitle: "Rich editor",
             C
           }
         ) }, block.id),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlockSurfaceBgInspector, { variant: "surface", p, set, C, onUpload, syncKey: block.id }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad) => set("padding", pad), C }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad3) => set("padding", pad3), C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarginEditor, { value: p.margin, onChange: (m) => set("margin", m), C })
       ] });
     case "image":
@@ -4999,7 +5011,7 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AlignButtons, { value: p.align, onChange: (v) => set("align", v), options: ["left", "center", "right"], C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BorderRadiusEditor, { value: p.borderRadius, onChange: (br) => set("borderRadius", br), C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlockSurfaceBgInspector, { variant: "surface", p, set, C, onUpload, syncKey: block.id }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad) => set("padding", pad), C }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad3) => set("padding", pad3), C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarginEditor, { value: p.margin, onChange: (m) => set("margin", m), C })
       ] });
     case "button":
@@ -5019,7 +5031,7 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
         Sel("fontWeight", "Weight", ["400", "500", "600", "700", "800"]),
         Tog("fullWidth", "Full Width"),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlockSurfaceBgInspector, { variant: "backdrop", p, set, C, onUpload, syncKey: block.id }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad) => set("padding", pad), C }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad3) => set("padding", pad3), C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarginEditor, { value: p.margin, onChange: (m) => set("margin", m), C })
       ] });
     case "link":
@@ -5034,7 +5046,7 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
         Sel("fontFamily", "Font", FONTS2),
         Tog("underline", "Underline"),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlockSurfaceBgInspector, { variant: "surface", p, set, C, onUpload, syncKey: block.id }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad) => set("padding", pad), C }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad3) => set("padding", pad3), C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarginEditor, { value: p.margin, onChange: (m) => set("margin", m), C })
       ] });
     case "divider":
@@ -5043,14 +5055,14 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NumRangePx, { label: "Thickness", value: p.thickness ?? 1, onChange: (n) => set("thickness", n), min: 1, max: 20, step: 1, C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DividerStyleButtons, { value: p.style, onChange: (s) => set("style", s), C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlockSurfaceBgInspector, { variant: "surface", p, set, C, onUpload, syncKey: block.id }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad) => set("padding", pad), C }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad3) => set("padding", pad3), C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarginEditor, { value: p.margin, onChange: (m) => set("margin", m), C })
       ] });
     case "spacer":
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NumRangePx, { label: "Height", value: p.height ?? 24, onChange: (n) => set("height", n), min: 4, max: 300, step: 1, C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlockSurfaceBgInspector, { variant: "surface", p, set, C, onUpload, syncKey: block.id }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad) => set("padding", pad), C }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad3) => set("padding", pad3), C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarginEditor, { value: p.margin, onChange: (m) => set("margin", m), C })
       ] });
     case "social":
@@ -5099,7 +5111,7 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
         Sel("shape", "Shape", ["circle", "square"]),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NumRangePx, { label: "Gap", value: p.gap ?? 6, onChange: (n) => set("gap", n), min: 0, max: 40, step: 1, C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlockSurfaceBgInspector, { variant: "surface", p, set, C, onUpload, syncKey: block.id }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad) => set("padding", pad), C }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad3) => set("padding", pad3), C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarginEditor, { value: p.margin, onChange: (m) => set("margin", m), C })
       ] });
     case "video":
@@ -5159,7 +5171,7 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NumRangePx, { label: "Height", value: p.height ?? 280, onChange: (n) => set("height", n), min: 80, max: 720, step: 1, C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlockSurfaceBgInspector, { variant: "surface", p, set, C, onUpload, syncKey: block.id }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad) => set("padding", pad), C }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad3) => set("padding", pad3), C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarginEditor, { value: p.margin, onChange: (m) => set("margin", m), C })
       ] });
     case "menu":
@@ -5185,7 +5197,7 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NumRangePx, { label: "Font size", value: p.fontSize ?? 14, onChange: (n) => set("fontSize", n), min: 8, max: 48, step: 1, C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NumRangePx, { label: "Item gap", value: p.gap ?? 20, onChange: (n) => set("gap", n), min: 0, max: 80, step: 1, C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlockSurfaceBgInspector, { variant: "surface", p, set, C, onUpload, syncKey: block.id }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad) => set("padding", pad), C }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad3) => set("padding", pad3), C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarginEditor, { value: p.margin, onChange: (m) => set("margin", m), C })
       ] });
     case "timer": {
@@ -5225,7 +5237,7 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AlignButtons, { value: p.align, onChange: (v) => set("align", v), options: ["left", "center", "right"], C }),
         Tog("showLabels", "Show Labels"),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlockSurfaceBgInspector, { variant: "backdrop", p, set, C, onUpload, syncKey: block.id }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad) => set("padding", pad), C }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad3) => set("padding", pad3), C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarginEditor, { value: p.margin, onChange: (m) => set("margin", m), C })
       ] });
     }
@@ -5322,8 +5334,8 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
         Tog("striped", "Striped rows"),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NumRangePx, { label: "Font size", value: p.fontSize ?? 13, onChange: (n) => set("fontSize", n), min: 10, max: 24, step: 1, C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlockSurfaceBgInspector, { variant: "surface", p, set, C, onUpload, syncKey: block.id }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad) => set("padding", pad), C }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { label: "Cell padding", value: p.cellPadding, onChange: (pad) => set("cellPadding", pad), C }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { value: p.padding, onChange: (pad3) => set("padding", pad3), C }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { label: "Cell padding", value: p.cellPadding, onChange: (pad3) => set("cellPadding", pad3), C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarginEditor, { value: p.margin, onChange: (m) => set("margin", m), C })
       ] });
     case "layout":
@@ -5376,6 +5388,19 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
       return null;
   }
 }
+function inferLayoutRowBgStep(r) {
+  if (r.bgGradient) return "gradient";
+  if (String(r.bgImage || "").trim()) return "image";
+  if (String(r.bgColor || "").trim()) return "solid";
+  return null;
+}
+function inferColumnBgStep(columnStyles, selCol) {
+  const cs = (columnStyles || {})[selCol] || {};
+  if (cs.bgGradient) return "gradient";
+  if (String(cs.bgImage || "").trim()) return "image";
+  if (String(cs.bgColor || "").trim()) return "solid";
+  return null;
+}
 function LayoutRowEditor({
   row,
   onChange,
@@ -5387,49 +5412,37 @@ function LayoutRowEditor({
   customizationHint
 }) {
   const { IS, CI } = useIS(C);
-  const [selCol, setSelCol] = (0, import_react4.useState)(initialCol);
-  const [rowBgUiStep, setRowBgUiStep] = (0, import_react4.useState)(null);
-  const [colBgUiStep, setColBgUiStep] = (0, import_react4.useState)(null);
+  const colCount = Math.max(1, row.ratios?.length || row.cells?.length || 1);
+  const ratioList = row.ratios?.length ? row.ratios : [1];
+  const [selCol, setSelCol] = (0, import_react4.useState)(0);
+  const [rowBgPickerMode, setRowBgPickerMode] = (0, import_react4.useState)(null);
+  const [colBgPickerMode, setColBgPickerMode] = (0, import_react4.useState)(null);
+  const inferredRowBg = (0, import_react4.useMemo)(() => inferLayoutRowBgStep(row), [row.bgGradient, row.bgImage, row.bgColor]);
+  const inferredColBg = (0, import_react4.useMemo)(
+    () => inferColumnBgStep(row.columnStyles, selCol),
+    [row.columnStyles, selCol]
+  );
+  const rowBgUiStep = inferredRowBg ?? rowBgPickerMode;
+  const colBgUiStep = inferredColBg ?? colBgPickerMode;
   (0, import_react4.useEffect)(() => {
-    if (initialCol !== null && initialCol !== void 0) {
-      setSelCol(initialCol);
+    if (initialCol !== null && initialCol !== void 0 && initialCol >= 0) {
+      setSelCol(Math.min(initialCol, colCount - 1));
+    } else {
+      setSelCol((c) => Math.min(Math.max(0, c), colCount - 1));
     }
-  }, [initialCol]);
+  }, [initialCol, row.id, colCount]);
   (0, import_react4.useEffect)(() => {
-    if (row.bgGradient) {
-      setRowBgUiStep("gradient");
-      return;
-    }
-    if (String(row.bgImage || "").trim()) {
-      setRowBgUiStep("image");
-      return;
-    }
-    if (String(row.bgColor || "").trim()) {
-      setRowBgUiStep("solid");
-      return;
-    }
-    setRowBgUiStep(null);
+    setRowBgPickerMode(null);
   }, [row.id]);
   (0, import_react4.useEffect)(() => {
-    if (selCol === null) {
-      setColBgUiStep(null);
-      return;
-    }
-    const cs = (row.columnStyles || {})[selCol] || {};
-    if (cs.bgGradient) {
-      setColBgUiStep("gradient");
-      return;
-    }
-    if (String(cs.bgImage || "").trim()) {
-      setColBgUiStep("image");
-      return;
-    }
-    if (String(cs.bgColor || "").trim()) {
-      setColBgUiStep("solid");
-      return;
-    }
-    setColBgUiStep(null);
+    setColBgPickerMode(null);
   }, [selCol, row.id]);
+  (0, import_react4.useEffect)(() => {
+    if (inferredRowBg) setRowBgPickerMode(null);
+  }, [inferredRowBg]);
+  (0, import_react4.useEffect)(() => {
+    if (inferredColBg) setColBgPickerMode(null);
+  }, [inferredColBg]);
   const set = (k, v) => onChange({ ...row, [k]: v });
   const applyColumnCount = (n) => {
     const prevCells = [...row.cells || []];
@@ -5445,16 +5458,13 @@ function LayoutRowEditor({
     }
     onChange({ ...row, cols: n, preset: "custom", cells, ratios });
   };
-  const colCount = Math.max(1, row.ratios?.length || row.cells?.length || 1);
-  const ratioList = row.ratios?.length ? row.ratios : [1];
   const updCol = (i, upd) => {
     const styles = { ...row.columnStyles || {} };
     styles[i] = { ...styles[i] || {}, ...upd };
     set("columnStyles", styles);
   };
   const setColBgMode = (mode) => {
-    if (selCol === null) return;
-    setColBgUiStep(mode);
+    setColBgPickerMode(mode);
     const cs = (row.columnStyles || {})[selCol] || {};
     if (mode === "solid") {
       updCol(selCol, { bgGradient: null, bgImage: "" });
@@ -5472,7 +5482,7 @@ function LayoutRowEditor({
   const total = ratioList.reduce((a, b) => a + b, 0) || 1;
   const POS_OPTS = ["center", "top", "bottom", "left", "right", "top left", "top right", "bottom left", "bottom right"];
   const setRowBgMode = (mode) => {
-    setRowBgUiStep(mode);
+    setRowBgPickerMode(mode);
     if (mode === "solid") {
       set("bgGradient", null);
       set("bgImage", "");
@@ -5630,7 +5640,7 @@ function LayoutRowEditor({
         },
         i
       )) }),
-      selCol !== null && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { background: C.surface, padding: 10, borderRadius: 8, border: `1px solid ${C.border}` }, children: [
+      colCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { background: C.surface, padding: 10, borderRadius: 8, border: `1px solid ${C.border}` }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BgModeButtons, { value: colBgUiStep, onChange: setColBgMode, C }),
         colBgUiStep === null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 11, color: C.muted, marginBottom: 10, lineHeight: 1.45 }, children: "Choose Color, Gradient, or Image \u2014 then edit column background details." }) : null,
         colBgUiStep === "solid" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: `col ${selCol + 1} bg`, C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
@@ -5718,7 +5728,7 @@ function LayoutRowEditor({
             }
           ) })
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { label: "Column padding", value: (row.columnStyles || {})[selCol]?.padding, onChange: (pad) => updCol(selCol, { padding: pad }), C }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { label: "Column padding", value: (row.columnStyles || {})[selCol]?.padding, onChange: (pad3) => updCol(selCol, { padding: pad3 }), C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BorderRadiusEditor, { label: "Column radius", value: (row.columnStyles || {})[selCol]?.borderRadius, onChange: (br) => updCol(selCol, { borderRadius: br }), C })
       ] })
     ] })
@@ -5995,8 +6005,8 @@ function MobilePhoneScaleSlot({ variantKey, children }) {
       const pw = phone.offsetWidth;
       const ph = phone.offsetHeight;
       if (cw < 12 || ch < 12 || pw < 12 || ph < 12) return;
-      const pad = 20;
-      const raw = Math.min(1, (cw - pad) / pw, (ch - pad) / ph);
+      const pad3 = 20;
+      const raw = Math.min(1, (cw - pad3) / pw, (ch - pad3) / ph);
       const s = Number.isFinite(raw) ? Math.max(0.2, raw) : 1;
       setFit({ s, w: pw * s, h: ph * s });
     };
@@ -6521,7 +6531,6 @@ var ReactEmailEditor = (0, import_react8.forwardRef)(
     const [locale, setLocale] = (0, import_react8.useState)(
       typeof opt.locale === "string" ? opt.locale : "en"
     );
-    const [mergeTags, setMergeTagsState] = (0, import_react8.useState)(() => opt.mergeTags ?? []);
     const [zoom, setZoom] = (0, import_react8.useState)(100);
     const [rightRailWidth, setRightRailWidth] = (0, import_react8.useState)(RIGHT_RAIL_DEFAULT_W);
     const [ctxMenu, setCtxMenu] = (0, import_react8.useState)(null);
@@ -6867,6 +6876,43 @@ var ReactEmailEditor = (0, import_react8.forwardRef)(
         }
       }
     };
+    const insertBlockFromLibrary = (contentType) => {
+      if (!rows.length) return;
+      if (selContentMeta?.inner) {
+        const { rowId, cellIdx, contentIdx, inner } = selContentMeta;
+        dropContent(rowId, cellIdx, {
+          kind: "new",
+          contentType,
+          insertAt: null,
+          nested: { parentBlockIdx: contentIdx, innerCellIdx: inner.cellIdx }
+        });
+        return;
+      }
+      if (selContentMeta?.rowId && typeof selContentMeta.cellIdx === "number" && selContentMeta.cellIdx >= 0) {
+        const r = rows.find((x) => x.id === selContentMeta.rowId);
+        if (r && selContentMeta.cellIdx < r.cells.length) {
+          dropContent(selContentMeta.rowId, selContentMeta.cellIdx, {
+            kind: "new",
+            contentType,
+            insertAt: null
+          });
+          return;
+        }
+      }
+      if (selectedRowId) {
+        const targetRow = rows.find((r) => r.id === selectedRowId);
+        if (targetRow) {
+          dropContent(targetRow.id, 0, {
+            kind: "new",
+            contentType,
+            insertAt: null
+          });
+          return;
+        }
+      }
+      const main = rows[0];
+      dropContent(main.id, 0, { kind: "new", contentType, insertAt: null });
+    };
     const deleteContent = (rowId, cellIdx, ci, inner = null) => {
       if (!inner) {
         mutate((prev) => prev.map((r) => {
@@ -6916,7 +6962,7 @@ var ReactEmailEditor = (0, import_react8.forwardRef)(
         }));
         return;
       }
-      const loc = { type: "nested", rowId, outerCellIdx: cellIdx, blockIdx: inner.parentBlockIdx, innerCellIdx: inner.cellIdx };
+      const loc = { type: "nested", rowId, outerCellIdx: cellIdx, blockIdx: ci, innerCellIdx: inner.cellIdx };
       mutate((prev) => updateColumnAt(prev, loc, (c) => c.map((b, j) => j === inner.contentIdx ? upd : b)));
     };
     const selectContent = (contentId, rowId, cellIdx, parentBlockIdx, inner = null) => {
@@ -7463,6 +7509,8 @@ var ReactEmailEditor = (0, import_react8.forwardRef)(
                           if (data.layoutPresetKey) {
                             const preset = LAYOUT_PRESETS.find((p) => p.key === data.layoutPresetKey);
                             if (preset) mutate((prev) => [...prev, makeLayoutRow(preset)]);
+                          } else if (data.contentType && typeof data.contentType === "string") {
+                            insertBlockFromLibrary(data.contentType);
                           }
                         } catch {
                         }
@@ -7503,6 +7551,21 @@ var ReactEmailEditor = (0, import_react8.forwardRef)(
                                 }
                                 return base;
                               })(),
+                              onDragOver: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                              },
+                              onDrop: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                try {
+                                  const data = JSON.parse(e.dataTransfer.getData("application/json") || "{}");
+                                  if (data.contentType && typeof data.contentType === "string") {
+                                    insertBlockFromLibrary(data.contentType);
+                                  }
+                                } catch {
+                                }
+                              },
                               children: [
                                 rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { id: eid("canvas-empty"), style: { padding: "56px 20px", textAlign: "center", color: C.muted, border: `2px dashed ${C.border}`, borderRadius: 7 }, children: [
                                   /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize: 30, marginBottom: 10 }, children: "\u2709" }),
@@ -7647,7 +7710,6 @@ var ReactEmailEditor = (0, import_react8.forwardRef)(
                             setSelMeta(null);
                             setSelectedRowId(null);
                           },
-                          mergeTags,
                           onUpload,
                           C
                         }
@@ -7715,12 +7777,8 @@ var ReactEmailEditor = (0, import_react8.forwardRef)(
                                 onDragStart: (e) => {
                                   e.dataTransfer.setData("application/json", JSON.stringify({ contentType: bt.type }));
                                 },
-                                onClick: () => {
-                                  const targetRow = selectedRowId ? rows.find((r) => r.id === selectedRowId) : rows[rows.length - 1];
-                                  if (!targetRow) return;
-                                  dropContent(targetRow.id, 0, { kind: "new", contentType: bt.type, insertAt: null });
-                                },
-                                title: `Drag into a cell or click to add to ${selectedRowId ? "selected row" : "last row"}`,
+                                onClick: () => insertBlockFromLibrary(bt.type),
+                                title: selContentMeta?.inner ? "Click to add inside the selected nested column" : selContentMeta?.rowId ? "Click to add in the selected column" : selectedRowId ? "Click to add to column 1 of the selected row" : "Click to add to the first row, first column",
                                 style: {
                                   display: "flex",
                                   flexDirection: "row",
@@ -8090,12 +8148,80 @@ var ReactEmailEditor = (0, import_react8.forwardRef)(
     );
   }
 );
+
+// src/lib/htmlToEmailDesign.ts
+var pad = (n) => ({ top: n, right: n, bottom: n, left: n });
+function extractHtmlForDesign(html) {
+  const t = String(html ?? "").trim();
+  if (!t) return "";
+  const head = t.slice(0, 800).toLowerCase();
+  if (!head.includes("<html") && !head.includes("<!doctype")) {
+    return normalizeRichHtmlForStorage(t);
+  }
+  try {
+    const doc = new DOMParser().parseFromString(t, "text/html");
+    const body = doc.body;
+    if (!body) return normalizeRichHtmlForStorage(t);
+    return normalizeRichHtmlForStorage(body.innerHTML);
+  } catch {
+    return normalizeRichHtmlForStorage(t);
+  }
+}
+function htmlToEmailDesignTemplate(html) {
+  const inner = extractHtmlForDesign(html);
+  if (!inner) return null;
+  const doc = {
+    type: "email_document",
+    settings: {
+      width: 600,
+      backgroundColor: "#f1f5f9",
+      contentBackgroundColor: "#ffffff",
+      fontFamily: "Arial, Helvetica, sans-serif",
+      lineHeightBase: 1.6,
+      color: "#111827",
+      responsive: true,
+      rtl: false
+    },
+    rows: [
+      {
+        id: "row_html_import",
+        type: "row",
+        layout: { columns: 1, gap: 0, stackOnMobile: true, align: "center" },
+        styles: {
+          backgroundColor: "#ffffff",
+          backgroundRepeat: "no-repeat",
+          backgroundSize: "cover",
+          padding: pad(24),
+          textAlign: "left"
+        },
+        columns: [
+          {
+            id: "col_html_import",
+            layout: { width: "100%", verticalAlign: "top", mobileWidth: "100%" },
+            styles: { padding: pad(0), backgroundColor: "" },
+            blocks: [
+              {
+                id: "block_html_import",
+                type: "html",
+                content: { html: inner },
+                styles: {}
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  };
+  return doc;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   EmailPreviewModal,
   ReactEmailEditor,
   base64ToUtf8,
   emailPreviewDevices,
+  extractHtmlForDesign,
+  htmlToEmailDesignTemplate,
   jsonToHtml,
   utf8ToBase64
 });