react-email-studio 3.4.0 → 3.8.0

package/dist/index.cjs

@@ -33,9 +33,12 @@ __export(index_exports, {
   EmailPreviewModal: () => PreviewModal,
   ReactEmailEditor: () => ReactEmailEditor2,
   base64ToUtf8: () => base64ToUtf8,
+  canonicalizeEmailDocument: () => canonicalizeEmailDocument,
+  coerceEmailDocumentInput: () => coerceEmailDocumentInput,
   emailPreviewDevices: () => DEVICES,
   extractHtmlForDesign: () => extractHtmlForDesign,
   htmlToEmailDesignTemplate: () => htmlToEmailDesignTemplate,
+  htmlToJson: () => htmlToJson,
   jsonToHtml: () => jsonToHtml,
   utf8ToBase64: () => utf8ToBase64
 });
@@ -498,9 +501,9 @@ var DEFAULT_BLOCK_PROPS = {
     fontFamily: "Georgia,serif",
     margin: { ...BOX0 }
   },
+  /** Rich HTML body lives on the block root as `content` (string), not in `props`. */
   html: {
     ...BLOCK_BG,
-    content: "<p>Rich HTML content. Edit with the rich editor.</p>",
     fontSize: 15,
     color: "#1e293b",
     align: "left",
@@ -520,6 +523,7 @@ var DEFAULT_BLOCK_PROPS = {
     align: "center",
     padding: boxAll(8),
     link: "",
+    linkEnabled: false,
     linkTarget: "_blank",
     borderRadius: { tl: 0, tr: 0, br: 0, bl: 0 },
     margin: { top: 0, right: 0, bottom: 0, left: 0 }
@@ -641,10 +645,82 @@ var DEFAULT_BLOCK_PROPS = {
     margin: { ...BOX0 }
   }
 };
+var DEFAULT_HTML_BLOCK_MARKUP = "<p>Rich HTML content. Edit with the rich editor.</p>";
+function imageLinkActive(p) {
+  const url = typeof p.link === "string" ? p.link.trim() : "";
+  const enabled = p.linkEnabled ?? !!url;
+  return enabled && !!url;
+}
 function isKnownBlockType(type) {
   return typeof type === "string" && type in DEFAULT_BLOCK_PROPS;
 }
 
+// src/lib/columnProps.ts
+var BOX02 = { top: 0, right: 0, bottom: 0, left: 0 };
+var DEFAULT_COLUMN_PROPS = {
+  bgColor: "",
+  bgImage: "",
+  bgGradient: null,
+  bgSize: "cover",
+  bgRepeat: "no-repeat",
+  bgPosition: "center",
+  padding: { ...BOX02 },
+  borderRadius: 0
+};
+function isObj(x) {
+  return x !== null && typeof x === "object" && !Array.isArray(x);
+}
+function colCountFromContainer(c) {
+  const cells = Array.isArray(c.cells) ? c.cells.length : 0;
+  const ratios = Array.isArray(c.ratios) ? c.ratios.length : 0;
+  const cols = typeof c.cols === "number" && c.cols > 0 ? c.cols : 0;
+  return Math.max(1, cells, ratios, cols);
+}
+function columnsFromLegacyMap(map, count) {
+  const n = Math.max(1, count);
+  const src = isObj(map) ? map : {};
+  return Array.from({ length: n }, (_, i) => {
+    const raw = src[i] ?? src[String(i)];
+    return { props: { ...DEFAULT_COLUMN_PROPS, ...isObj(raw) ? raw : {} } };
+  });
+}
+function getColumns(container) {
+  const count = colCountFromContainer(container);
+  if (Array.isArray(container.columns)) {
+    const cols = container.columns;
+    return Array.from({ length: count }, (_, i) => {
+      const entry = cols[i];
+      if (isObj(entry) && isObj(entry.props)) {
+        return { props: { ...DEFAULT_COLUMN_PROPS, ...entry.props } };
+      }
+      if (isObj(entry)) {
+        return { props: { ...DEFAULT_COLUMN_PROPS, ...entry } };
+      }
+      return { props: { ...DEFAULT_COLUMN_PROPS } };
+    });
+  }
+  if (container.columnStyles) {
+    return columnsFromLegacyMap(container.columnStyles, count);
+  }
+  return columnsFromLegacyMap({}, count);
+}
+function getColumnPropsAt(container, index) {
+  const cols = getColumns(container);
+  const i = Math.max(0, Math.min(index, cols.length - 1));
+  return cols[i]?.props ?? { ...DEFAULT_COLUMN_PROPS };
+}
+function patchColumnPropsAt(container, index, patch) {
+  const cols = getColumns(container);
+  const i = Math.max(0, index);
+  while (cols.length <= i) cols.push({ props: { ...DEFAULT_COLUMN_PROPS } });
+  cols[i] = { props: { ...cols[i].props, ...patch } };
+  return cols;
+}
+function withColumnsOnly(row, columns) {
+  const { columnStyles: _drop, ...rest } = row;
+  return { ...rest, columns };
+}
+
 // src/lib/factories.ts
 function uid() {
   return Math.random().toString(36).slice(2, 10);
@@ -684,14 +760,30 @@ function makeNestedRowBlock(preset) {
       bgRepeat: row.bgRepeat ?? "no-repeat",
       bgPosition: row.bgPosition ?? "center",
       bgGradient: row.bgGradient ?? null,
-      columnStyles: row.columnStyles,
+      columns: row.columns ?? row.cells?.map(() => ({ props: { ...DEFAULT_COLUMN_PROPS } })),
       cells: row.cells
     }
   };
 }
 function makeContentBlock(type) {
+  if (type === "html") {
+    return {
+      id: uid(),
+      type,
+      content: DEFAULT_HTML_BLOCK_MARKUP,
+      props: { ...DEFAULT_BLOCK_PROPS.html, content: DEFAULT_HTML_BLOCK_MARKUP }
+    };
+  }
   return { id: uid(), type, props: { ...DEFAULT_BLOCK_PROPS[type] } };
 }
+function makeRootContentRow(contentType, preset) {
+  const row = makeLayoutRow(preset);
+  row.gap = 0;
+  row.padding = 0;
+  const block = makeContentBlock(contentType);
+  row.cells[0] = [block];
+  return { row, block };
+}
 
 // src/lib/columnPath.ts
 var MAX_NESTED_LAYOUT_DEPTH = 1;
@@ -701,6 +793,13 @@ function nestedLayoutDepth(nested) {
 function isSplitLayoutBlock(b) {
   return b && b.type === "layout" && b.props && Array.isArray(b.props.cells);
 }
+function isRootContentRow(row) {
+  if (!row?.cells || row.cells.length !== 1) return false;
+  const col = row.cells[0];
+  if (!Array.isArray(col) || col.length !== 1) return false;
+  const b = col[0];
+  return !!b && typeof b.type === "string" && b.type !== "layout" && b.type !== "nestedRow";
+}
 function getColumnBlocks(rows, loc) {
   const r = rows.find((x) => x.id === loc.rowId);
   if (!r) return [];
@@ -766,56 +865,6 @@ function countBlocksInDesign(rows) {
   return rows.reduce((sum, r) => sum + r.cells.reduce((s, c) => s + colBlocks(c), 0), 0);
 }
 
-// src/socialIcons.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var GLYPHS = {
-  facebook: "M24 12.073C24 5.446 18.627 0 12 0S0 5.446 0 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",
-  /** X (formerly Twitter) — Simple Icons “X” */
-  twitter: "M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z",
-  instagram: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.98-6.98.072-1.28.07-1.689.07-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z",
-  linkedin: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
-  youtube: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z",
-  pinterest: "M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.966-2.901 2.165-2.901 1.021 0 1.512.765 1.512 1.682 0 1.025-.653 2.555-.99 3.978-.281 1.189.597 2.159 1.775 2.159 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.698-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026z",
-  tiktok: "M19.59 6.69a4.83 4.83 0 01-3.77-4.245V2h-3.45v13.672a2.896 2.896 0 01-5.201 1.743 2.895 2.895 0 012.31-4.629 2.89 2.89 0 01.878.14V9.4a6.84 6.84 0 00-1-.05A6.33 6.33 0 005 20.1a6.34 6.34 0 0010.86-4.43v-7.36a8.16 8.16 0 004.77 1.52v-3.4a4.85 4.85 0 01-1-.1z",
-  snapchat: "M12 0C5.373 0 0 5.372 0 12c0 4.991 3.657 9.128 8.438 9.879-.118-.949-.227-2.422.045-3.461.222-.95 1.444-6.037 1.444-6.037s-.367-.744-.367-1.844c0-1.726.999-3.012 2.243-3.012 1.058 0 1.569.795 1.569 1.748 0 1.065-.679 2.653-1.029 4.13-.292 1.237.618 2.246 1.835 2.246 2.203 0 3.895-2.323 3.895-5.67 0-2.965-2.129-5.038-5.167-5.038-3.52 0-5.585 2.643-5.585 5.589 0 1.106.425 2.295.956 2.943a.77.77 0 01.194.569c-.21.997-.679 3.135-.769 3.568-.121.588-.402.712-.929.431-3.485-1.624-5.667-6.731-5.667-10.839C2.5 6.506 6.847 2.344 12.001 2.344c4.391 0 7.809 2.776 7.809 6.586 0 4.308-2.694 7.635-6.369 7.635-1.271 0-2.464-.677-2.871-1.475 0 0-.669 2.562-.828 3.193-.301 1.301-1.12 2.929-1.668 3.922.125.047.256.07.395.07 1 0 1.826-.827 2.13-1.856.169-.617.982-3.857.982-3.857z",
-  github: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12",
-  discord: "M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
-};
-function iconFillForNetwork(network) {
-  return network === "snapchat" ? "#000000" : "#ffffff";
-}
-function glyphPath(network) {
-  return GLYPHS[network] || null;
-}
-function socialIconSvgString(network, pixelSize) {
-  const d = glyphPath(network);
-  const fill = iconFillForNetwork(network);
-  const s = Math.max(8, Math.round(pixelSize));
-  if (!d) {
-    const letter = (network && network[0] ? network[0] : "?").toUpperCase();
-    return `<span style="font-size:${Math.floor(s * 0.44)}px;font-weight:800;line-height:1;">${letter}</span>`;
-  }
-  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${s}" height="${s}" style="display:block;flex-shrink:0;" aria-hidden="true"><path fill="${fill}" d="${d}"/></svg>`;
-}
-function SocialGlyph({ network, size }) {
-  const d = glyphPath(network);
-  const s = Math.max(8, Math.round(size));
-  if (!d) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: Math.floor(s * 0.44), fontWeight: 800, lineHeight: 1 }, children: (network && network[0] ? network[0] : "?").toUpperCase() });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "svg",
-    {
-      width: s,
-      height: s,
-      viewBox: "0 0 24 24",
-      style: { display: "block", flexShrink: 0 },
-      "aria-hidden": true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "currentColor", d })
-    }
-  );
-}
-
 // src/lib/htmlUtils.ts
 function escHtmlAttr(s) {
   return String(s ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -884,6 +933,161 @@ function normalizeRichHtmlForStorage(html) {
 function isEffectivelyEmptyRichHtml(html) {
   return normalizeRichHtmlForStorage(html) === EMPTY_RICH_HTML;
 }
+var RICH_HTML_CONTENT_CSS = `
+.email-rich-html-content ul,
+.email-rich-html-content ol {
+  margin: 0.35em 0;
+  padding-left: 1.35rem;
+  list-style-position: outside;
+}
+.email-rich-html-content ul { list-style-type: disc; }
+.email-rich-html-content ol { list-style-type: decimal; }
+.email-rich-html-content li { margin: 0.2em 0; }
+.email-rich-html-content li > p { margin: 0; }
+.email-rich-html-content p { margin: 0.35em 0; }
+.email-rich-html-content h2,
+.email-rich-html-content h3,
+.email-rich-html-content h4 {
+  margin: 0.5em 0 0.25em;
+  line-height: 1.25;
+  font-weight: 700;
+}
+.email-rich-html-content blockquote {
+  margin: 0.35em 0;
+  padding-left: 0.75rem;
+  border-left: 3px solid #cbd5e1;
+}
+.email-rich-html-content hr {
+  border: none;
+  border-top: 1px solid #e2e8f0;
+  margin: 0.75em 0;
+}
+.email-rich-html-content code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.92em;
+  background: rgba(0, 0, 0, 0.06);
+  padding: 0.1em 0.35em;
+  border-radius: 3px;
+}
+.email-rich-html-inner ul,
+.email-rich-html-inner ol {
+  margin: 0.35em 0;
+  padding-left: 1.35rem;
+  list-style-position: outside;
+}
+.email-rich-html-inner ul { list-style-type: disc; }
+.email-rich-html-inner ol { list-style-type: decimal; }
+.email-rich-html-inner li { margin: 0.2em 0; }
+.email-rich-html-inner li > p { margin: 0; }
+.email-rich-html-inner p { margin: 0.35em 0; }
+.email-rich-html-inner h2,
+.email-rich-html-inner h3,
+.email-rich-html-inner h4 {
+  margin: 0.5em 0 0.25em;
+  line-height: 1.25;
+  font-weight: 700;
+}
+.email-rich-html-inner blockquote {
+  margin: 0.35em 0;
+  padding-left: 0.75rem;
+  border-left: 3px solid #cbd5e1;
+}
+.email-rich-html-inner hr {
+  border: none;
+  border-top: 1px solid #e2e8f0;
+  margin: 0.75em 0;
+}
+`.trim();
+function applyInlineListStyles(root) {
+  root.querySelectorAll("ul").forEach((ul) => {
+    const el = ul;
+    el.style.margin = el.style.margin || "0.35em 0";
+    el.style.paddingLeft = el.style.paddingLeft || "1.35rem";
+    el.style.listStyleType = el.style.listStyleType || "disc";
+    el.style.listStylePosition = el.style.listStylePosition || "outside";
+  });
+  root.querySelectorAll("ol").forEach((ol) => {
+    const el = ol;
+    el.style.margin = el.style.margin || "0.35em 0";
+    el.style.paddingLeft = el.style.paddingLeft || "1.35rem";
+    el.style.listStyleType = el.style.listStyleType || "decimal";
+    el.style.listStylePosition = el.style.listStylePosition || "outside";
+  });
+  root.querySelectorAll("li").forEach((li) => {
+    const el = li;
+    if (!el.style.margin) el.style.margin = "0.2em 0";
+  });
+  root.querySelectorAll("li > p").forEach((p) => {
+    const el = p;
+    if (!el.style.margin) el.style.margin = "0";
+  });
+}
+function enhanceRichHtmlForEmail(html) {
+  const raw = String(html ?? "").trim();
+  if (!raw || raw === EMPTY_RICH_HTML) return raw || EMPTY_RICH_HTML;
+  if (typeof document === "undefined") return raw;
+  const tmp = document.createElement("div");
+  tmp.innerHTML = raw;
+  if (!tmp.querySelector("ul,ol,blockquote,h2,h3,h4,hr")) return raw;
+  applyInlineListStyles(tmp);
+  tmp.querySelectorAll("blockquote").forEach((bq) => {
+    const el = bq;
+    if (!el.style.margin) el.style.margin = "0.35em 0";
+    if (!el.style.paddingLeft) el.style.paddingLeft = "0.75rem";
+    if (!el.style.borderLeft) el.style.borderLeft = "3px solid #cbd5e1";
+  });
+  return tmp.innerHTML.trim();
+}
+
+// src/socialIcons.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var GLYPHS = {
+  facebook: "M24 12.073C24 5.446 18.627 0 12 0S0 5.446 0 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",
+  /** X (formerly Twitter) — Simple Icons “X” */
+  twitter: "M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z",
+  instagram: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.98-6.98.072-1.28.07-1.689.07-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z",
+  linkedin: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
+  youtube: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z",
+  pinterest: "M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.966-2.901 2.165-2.901 1.021 0 1.512.765 1.512 1.682 0 1.025-.653 2.555-.99 3.978-.281 1.189.597 2.159 1.775 2.159 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.698-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026z",
+  tiktok: "M19.59 6.69a4.83 4.83 0 01-3.77-4.245V2h-3.45v13.672a2.896 2.896 0 01-5.201 1.743 2.895 2.895 0 012.31-4.629 2.89 2.89 0 01.878.14V9.4a6.84 6.84 0 00-1-.05A6.33 6.33 0 005 20.1a6.34 6.34 0 0010.86-4.43v-7.36a8.16 8.16 0 004.77 1.52v-3.4a4.85 4.85 0 01-1-.1z",
+  snapchat: "M12 0C5.373 0 0 5.372 0 12c0 4.991 3.657 9.128 8.438 9.879-.118-.949-.227-2.422.045-3.461.222-.95 1.444-6.037 1.444-6.037s-.367-.744-.367-1.844c0-1.726.999-3.012 2.243-3.012 1.058 0 1.569.795 1.569 1.748 0 1.065-.679 2.653-1.029 4.13-.292 1.237.618 2.246 1.835 2.246 2.203 0 3.895-2.323 3.895-5.67 0-2.965-2.129-5.038-5.167-5.038-3.52 0-5.585 2.643-5.585 5.589 0 1.106.425 2.295.956 2.943a.77.77 0 01.194.569c-.21.997-.679 3.135-.769 3.568-.121.588-.402.712-.929.431-3.485-1.624-5.667-6.731-5.667-10.839C2.5 6.506 6.847 2.344 12.001 2.344c4.391 0 7.809 2.776 7.809 6.586 0 4.308-2.694 7.635-6.369 7.635-1.271 0-2.464-.677-2.871-1.475 0 0-.669 2.562-.828 3.193-.301 1.301-1.12 2.929-1.668 3.922.125.047.256.07.395.07 1 0 1.826-.827 2.13-1.856.169-.617.982-3.857.982-3.857z",
+  github: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12",
+  discord: "M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
+};
+function iconFillForNetwork(network) {
+  return network === "snapchat" ? "#000000" : "#ffffff";
+}
+function glyphPath(network) {
+  return GLYPHS[network] || null;
+}
+function socialIconSvgString(network, pixelSize) {
+  const d = glyphPath(network);
+  const fill = iconFillForNetwork(network);
+  const s = Math.max(8, Math.round(pixelSize));
+  if (!d) {
+    const letter = (network && network[0] ? network[0] : "?").toUpperCase();
+    return `<span style="font-size:${Math.floor(s * 0.44)}px;font-weight:800;line-height:1;">${letter}</span>`;
+  }
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${s}" height="${s}" style="display:block;flex-shrink:0;" aria-hidden="true"><path fill="${fill}" d="${d}"/></svg>`;
+}
+function SocialGlyph({ network, size }) {
+  const d = glyphPath(network);
+  const s = Math.max(8, Math.round(size));
+  if (!d) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: Math.floor(s * 0.44), fontWeight: 800, lineHeight: 1 }, children: (network && network[0] ? network[0] : "?").toUpperCase() });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      width: s,
+      height: s,
+      viewBox: "0 0 24 24",
+      style: { display: "block", flexShrink: 0 },
+      "aria-hidden": true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "currentColor", d })
+    }
+  );
+}
 
 // src/lib/blockBackground.ts
 function linearGradientCssInner(g) {
@@ -1013,14 +1217,16 @@ function blockToHtml(cb) {
     case "html": {
       const shell = emailSurfaceBgCss(p);
       const inner = `font-size:${lenPx(p.fontSize)};color:${p.color};text-align:${p.align};line-height:${lh(p.lineHeight)};letter-spacing:${lenPx(p.letterSpacing)};font-family:${p.fontFamily || "Georgia,serif"}`;
-      return `<div style="${pd(p.padding)};${marginCss()}${shell}"><div style="${inner}">${p.content || "<p></p>"}</div></div>`;
+      const bodyRaw = typeof cb.content === "string" ? cb.content : typeof p.content === "string" ? p.content : "";
+      const body = enhanceRichHtmlForEmail(bodyRaw || "<p></p>");
+      return `<div style="${pd(p.padding)};${marginCss()}${shell}"><div class="email-rich-html-inner" style="${inner}">${body}</div></div>`;
     }
     case "image": {
       const of = typeof p.objectFit === "string" && p.objectFit.trim() ? p.objectFit.trim() : "cover";
       const op = typeof p.objectPosition === "string" && p.objectPosition.trim() ? p.objectPosition.trim() : "center";
       const img = `<img src="${p.src}" alt="${p.alt || ""}" style="max-width:${p.width};width:${p.width || "100%"};display:inline-block;border-radius:${radiusPx(p.borderRadius)};object-fit:${of};object-position:${op};"/>`;
       const shell = emailSurfaceBgCss(p);
-      return `<div style="${pd(p.padding)};text-align:${p.align};${marginCss()}${shell}">${p.link ? `<a href="${p.link}" target="${p.linkTarget || "_blank"}">${img}</a>` : img}</div>`;
+      return `<div style="${pd(p.padding)};text-align:${p.align};${marginCss()}${shell}">${imageLinkActive(p) ? `<a href="${escHtmlAttr(p.link)}" target="${escHtmlAttr(p.linkTarget || "_blank")}">${img}</a>` : img}</div>`;
     }
     case "button": {
       const bd = emailBackdropBgCss(p);
@@ -1109,7 +1315,7 @@ function blockToHtml(cb) {
         bgRepeat: p.bgRepeat || "no-repeat",
         bgPosition: typeof p.bgPosition === "string" ? p.bgPosition : "center",
         bgGradient: p.bgGradient ?? null,
-        columnStyles: p.columnStyles,
+        columns: getColumns(p),
         cells: p.cells || []
       };
       return rowToHtml(pseudo);
@@ -1123,7 +1329,7 @@ function rowToHtml(row) {
   const shellBg = emailSurfaceBgCss(row);
   const inner = row.cells.length === 1 ? row.cells[0].map(blockToHtml).join("") : `<div class="email-row-flex" style="display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:${row.gap ?? 12}px;width:100%;max-width:100%;box-sizing:border-box;">${row.cells.map((cell, i) => {
     const r = row.ratios[i] ?? 1;
-    const cs = row.columnStyles && row.columnStyles[i] ? row.columnStyles[i] : {};
+    const cs = getColumnPropsAt(row, i);
     const colShell = emailSurfaceBgCss(cs);
     const pad3 = cs.padding && typeof cs.padding === "object" && !Array.isArray(cs.padding) ? `padding:${(() => {
       const o = cs.padding;
@@ -1171,6 +1377,7 @@ table[role="presentation"] td{min-width:0!important;word-break:break-word;}
 @media screen and (max-width:480px){
   .email-content-td{padding-left:max(10px,env(safe-area-inset-left))!important;padding-right:max(10px,env(safe-area-inset-right))!important;}
 }
+${RICH_HTML_CONTENT_CSS}
 </style>`;
 function previewEmailSrcDoc(html, viewportWidthPx) {
   const viewportTag = `<meta name="viewport" content="width=${viewportWidthPx},initial-scale=1"/>`;
@@ -1222,6 +1429,8 @@ function designToHtml(rows, settings, opts = {}) {
     return `background-image:linear-gradient(${angle}deg, ${pairs.join(", ")});background-repeat:no-repeat;background-position:${pagePos};background-size:cover;`;
   })();
   const pageBgImgRaw = typeof settings.bgImage === "string" ? String(settings.bgImage).trim() : "";
+  const pageBgColorRaw = typeof settings.bgColor === "string" ? String(settings.bgColor).trim() : "";
+  const pageBgColor = pageBgColorRaw ? pageBgColorRaw : "transparent";
   const pageBgImgCss = !pageGradCss && pageBgImgRaw ? `background-image:url('${pageBgImgRaw.replace(/'/g, "%27")}');background-size:${settings.bgSize || "cover"};background-repeat:${settings.bgRepeat || "no-repeat"};background-position:${pagePos};` : "";
   const contentPos = typeof settings.contentBgPosition === "string" && settings.contentBgPosition.trim() ? settings.contentBgPosition.trim() : "center";
   const contentGrad = settings.contentBgGradient && typeof settings.contentBgGradient === "object" ? settings.contentBgGradient : null;
@@ -1244,8 +1453,8 @@ function designToHtml(rows, settings, opts = {}) {
 <head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/>
 <title>Email</title>${RESPONSIVE_EMAIL_CSS}${css}
 </head>
-<body style="margin:0;padding:0;background:${settings.bgColor || "#f1f5f9"};${pageGradCss || pageBgImgCss}">
-<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100%;max-width:100%;background-color:${settings.bgColor || "#f1f5f9"};${pageGradCss || pageBgImgCss}">
+<body style="margin:0;padding:0;background:${pageBgColor};${pageGradCss || pageBgImgCss}">
+<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width:100%;max-width:100%;background-color:${pageBgColor};${pageGradCss || pageBgImgCss}">
 <tr><td align="center" style="padding:0;max-width:100%;">
 <table class="email-shell-table" role="presentation" width="100%" cellpadding="0" cellspacing="0"
   style="${contentShellStyle.join(";")}">
@@ -1279,14 +1488,49 @@ function paddingToUniform(p, fallback = 0) {
 function ensureId(id, prefix) {
   return typeof id === "string" && id.trim() ? id : `${prefix}_${uid()}`;
 }
+function normalizeDocBlock(b, prefix) {
+  const raw = b && typeof b === "object" && !Array.isArray(b) ? b : {};
+  const base = {
+    id: ensureId(raw.id, prefix),
+    type: typeof raw.type === "string" ? raw.type : "text",
+    content: typeof raw.content === "string" ? raw.content : raw.content && typeof raw.content === "object" && !Array.isArray(raw.content) ? raw.content : {},
+    ...raw.behavior && typeof raw.behavior === "object" && !Array.isArray(raw.behavior) ? { behavior: raw.behavior } : {},
+    ...raw.responsive && typeof raw.responsive === "object" && !Array.isArray(raw.responsive) ? { responsive: raw.responsive } : {}
+  };
+  if (raw.props && typeof raw.props === "object" && !Array.isArray(raw.props)) {
+    base.props = { ...raw.props };
+  } else if (raw.styles && typeof raw.styles === "object" && !Array.isArray(raw.styles)) {
+    base.styles = { ...raw.styles };
+  }
+  return base;
+}
+function normalizeDocSettings(settings) {
+  if (!settings || typeof settings !== "object" || Array.isArray(settings)) return {};
+  const s = { ...settings };
+  delete s._reactEmailStudio;
+  return s;
+}
 function normalizeEmailDocument(input) {
   if (input == null || typeof input !== "object" || Array.isArray(input)) return null;
   const doc = input;
   if (doc.type !== "email_document") return null;
+  const rawBlocks = Array.isArray(doc.blocks) ? doc.blocks : [];
+  const useBlocks = rawBlocks.length > 0;
   const rows = Array.isArray(doc.rows) ? doc.rows : [];
-  return {
+  const base = {
     type: "email_document",
-    settings: doc.settings && typeof doc.settings === "object" && !Array.isArray(doc.settings) ? doc.settings : {},
+    settings: normalizeDocSettings(doc.settings),
+    globalStyles: doc.globalStyles && typeof doc.globalStyles === "object" && !Array.isArray(doc.globalStyles) ? doc.globalStyles : void 0,
+    responsive: doc.responsive && typeof doc.responsive === "object" && !Array.isArray(doc.responsive) ? doc.responsive : void 0
+  };
+  if (useBlocks) {
+    return {
+      ...base,
+      blocks: rawBlocks.map((b, bi) => normalizeDocBlock(b, `block${bi + 1}`))
+    };
+  }
+  return {
+    ...base,
     rows: rows.map((r, ri) => {
       const columns = Array.isArray(r.columns) ? r.columns : [];
       const layoutColCount = typeof r.layout?.columns === "number" && r.layout.columns > 0 ? Math.floor(r.layout.columns) : 0;
@@ -1308,28 +1552,76 @@ function normalizeEmailDocument(input) {
           columns: colCount,
           gap: typeof r.layout?.gap === "number" ? r.layout.gap : 0,
           stackOnMobile: r.layout?.stackOnMobile !== false,
-          align: r.layout?.align || "center"
+          align: r.layout?.align || "center",
+          ...typeof r.layout?.preset === "string" && r.layout.preset.trim() ? { preset: r.layout.preset.trim() } : {},
+          ...Array.isArray(r.layout?.ratios) && r.layout.ratios.length ? {
+            ratios: r.layout.ratios.filter(
+              (x) => typeof x === "number" && Number.isFinite(x)
+            )
+          } : {}
         },
-        styles: r.styles && typeof r.styles === "object" && !Array.isArray(r.styles) ? r.styles : {},
-        ...typeof r._reactEmailStudio === "object" && r._reactEmailStudio !== null && !Array.isArray(r._reactEmailStudio) ? { _reactEmailStudio: r._reactEmailStudio } : {},
+        props: (() => {
+          const p = r.props;
+          if (p && typeof p === "object" && !Array.isArray(p)) return { ...p };
+          const s = r.styles;
+          if (s && typeof s === "object" && !Array.isArray(s)) {
+            return {
+              bgColor: typeof s.backgroundColor === "string" ? s.backgroundColor : "",
+              bgImage: typeof s.backgroundImage === "string" ? s.backgroundImage : "",
+              bgRepeat: s.backgroundRepeat || "no-repeat",
+              bgSize: s.backgroundSize || "cover",
+              bgPosition: s.backgroundPosition || "center",
+              bgGradient: s.backgroundGradient ?? null,
+              padding: s.padding,
+              borderRadius: s.borderRadius,
+              borderWidth: s.borderWidth,
+              borderColor: s.borderColor,
+              textAlign: s.textAlign
+            };
+          }
+          return {};
+        })(),
         columns: colsNormalized.map((c, ci) => ({
           id: ensureId(c.id, `col${ri + 1}_${ci + 1}`),
           layout: c.layout && typeof c.layout === "object" && !Array.isArray(c.layout) ? c.layout : {},
-          styles: c.styles && typeof c.styles === "object" && !Array.isArray(c.styles) ? c.styles : {},
-          blocks: Array.isArray(c.blocks) ? c.blocks.map((b, bi) => ({
-            ...b,
-            id: ensureId(b?.id, `b${ri + 1}_${ci + 1}_${bi + 1}`),
-            content: b?.content && typeof b.content === "object" && !Array.isArray(b.content) ? b.content : {},
-            styles: b?.styles && typeof b.styles === "object" && !Array.isArray(b.styles) ? b.styles : {},
-            behavior: b?.behavior && typeof b.behavior === "object" && !Array.isArray(b.behavior) ? b.behavior : {},
-            responsive: b?.responsive && typeof b.responsive === "object" && !Array.isArray(b.responsive) ? b.responsive : {},
-            ...b?.props && typeof b.props === "object" && !Array.isArray(b.props) ? { props: b.props } : {}
-          })) : []
+          ...(() => {
+            const p = c.props;
+            if (p && typeof p === "object" && !Array.isArray(p)) return { props: { ...p } };
+            const s = c.styles;
+            if (s && typeof s === "object" && !Array.isArray(s)) {
+              return {
+                props: {
+                  bgColor: typeof s.backgroundColor === "string" ? s.backgroundColor : "",
+                  bgImage: typeof s.backgroundImage === "string" ? s.backgroundImage : "",
+                  bgRepeat: s.backgroundRepeat || "no-repeat",
+                  bgSize: s.backgroundSize || "cover",
+                  bgPosition: s.backgroundPosition || "center",
+                  bgGradient: s.backgroundGradient ?? null,
+                  padding: s.padding,
+                  borderRadius: s.borderRadius
+                }
+              };
+            }
+            return {};
+          })(),
+          blocks: Array.isArray(c.blocks) ? c.blocks.map((b, bi) => {
+            const base2 = {
+              id: ensureId(b?.id, `b${ri + 1}_${ci + 1}_${bi + 1}`),
+              type: typeof b?.type === "string" ? b.type : "text",
+              content: typeof b?.content === "string" ? b.content : b?.content && typeof b.content === "object" && !Array.isArray(b.content) ? b.content : {},
+              ...b?.behavior && typeof b.behavior === "object" && !Array.isArray(b.behavior) ? { behavior: b.behavior } : {},
+              ...b?.responsive && typeof b.responsive === "object" && !Array.isArray(b.responsive) ? { responsive: b.responsive } : {}
+            };
+            if (b?.props && typeof b.props === "object" && !Array.isArray(b.props)) {
+              base2.props = { ...b.props };
+            } else if (b?.styles && typeof b.styles === "object" && !Array.isArray(b.styles)) {
+              base2.styles = { ...b.styles };
+            }
+            return base2;
+          }) : []
         }))
       };
-    }),
-    globalStyles: doc.globalStyles && typeof doc.globalStyles === "object" && !Array.isArray(doc.globalStyles) ? doc.globalStyles : void 0,
-    responsive: doc.responsive && typeof doc.responsive === "object" && !Array.isArray(doc.responsive) ? doc.responsive : void 0
+    })
   };
 }
 
@@ -1342,6 +1634,60 @@ function cloneJson(v) {
     return v;
   }
 }
+function legacyRowStylesToProps(s) {
+  if (!s || typeof s !== "object" || Array.isArray(s)) return {};
+  return {
+    bgColor: typeof s.backgroundColor === "string" ? s.backgroundColor : "",
+    bgImage: typeof s.backgroundImage === "string" ? s.backgroundImage : "",
+    bgRepeat: s.backgroundRepeat || "no-repeat",
+    bgSize: s.backgroundSize || "cover",
+    bgPosition: s.backgroundPosition || "center",
+    bgGradient: s.backgroundGradient ?? null,
+    padding: s.padding,
+    borderRadius: s.borderRadius,
+    borderWidth: s.borderWidth,
+    borderColor: s.borderColor,
+    textAlign: s.textAlign
+  };
+}
+function rowPropsFromDocRow(r) {
+  const p = r.props;
+  if (p && typeof p === "object" && !Array.isArray(p)) {
+    return { ...p };
+  }
+  return legacyRowStylesToProps(r.styles);
+}
+function applyRowPropsToEditorRow(row, r) {
+  const p = rowPropsFromDocRow(r);
+  if (p.padding !== void 0 && p.padding !== null) {
+    row.padding = paddingToUniform(p.padding, row.padding);
+  }
+  if (typeof p.bgColor === "string") row.bgColor = p.bgColor.trim();
+  if (typeof p.bgImage === "string") row.bgImage = p.bgImage.trim();
+  if (typeof p.bgRepeat === "string") row.bgRepeat = p.bgRepeat;
+  if (typeof p.bgSize === "string") row.bgSize = p.bgSize;
+  if (typeof p.bgPosition === "string") row.bgPosition = p.bgPosition;
+  if (p.bgGradient !== void 0) row.bgGradient = p.bgGradient;
+}
+function editorRowToDocProps(r) {
+  const rowPad = r.padding && typeof r.padding === "object" && !Array.isArray(r.padding) ? layoutColumnPaddingForDoc(r.padding) : (() => {
+    const n = typeof r.padding === "number" && Number.isFinite(r.padding) ? r.padding : 0;
+    return { top: n, right: n, bottom: n, left: n };
+  })();
+  return {
+    bgColor: typeof r.bgColor === "string" ? r.bgColor : "",
+    bgImage: typeof r.bgImage === "string" ? r.bgImage : "",
+    bgRepeat: r.bgRepeat || "no-repeat",
+    bgSize: r.bgSize || "cover",
+    bgPosition: r.bgPosition || "center",
+    bgGradient: r.bgGradient ?? null,
+    padding: rowPad,
+    borderRadius: 0,
+    borderWidth: 0,
+    borderColor: "#e5e7eb",
+    textAlign: "left"
+  };
+}
 function layoutColumnPaddingForDoc(p) {
   if (typeof p === "number" && Number.isFinite(p)) {
     const n = Math.max(0, p);
@@ -1361,16 +1707,58 @@ function layoutColumnBorderRadiusForDoc(r) {
   }
   return 0;
 }
-function columnPaddingNonZero(pad3) {
-  return pad3.top !== 0 || pad3.right !== 0 || pad3.bottom !== 0 || pad3.left !== 0;
+function normalizeLayoutContainerProps(props) {
+  const columns = getColumns(props);
+  const { columnStyles: _drop, ...rest } = props;
+  return { ...rest, columns };
+}
+function mergeLayoutColumns(fromContent, fromHydrated) {
+  const norm = (x) => {
+    if (Array.isArray(x)) {
+      return x.map((entry) => {
+        const e = entry;
+        const raw = e?.props && typeof e.props === "object" ? e.props : entry;
+        return { props: { ...DEFAULT_COLUMN_PROPS, ...raw } };
+      });
+    }
+    if (x && typeof x === "object" && !Array.isArray(x)) {
+      return columnsFromLegacyMap(x, Object.keys(x).length);
+    }
+    return [];
+  };
+  const a = norm(fromContent);
+  const b = norm(fromHydrated);
+  const len = Math.max(a.length, b.length, 1);
+  const out = [];
+  for (let i = 0; i < len; i++) {
+    out.push({
+      props: { ...DEFAULT_COLUMN_PROPS, ...a[i]?.props ?? {}, ...b[i]?.props ?? {} }
+    });
+  }
+  return out.length ? out : void 0;
 }
-function columnRadiusNonZero(r) {
-  if (typeof r === "number") return r !== 0;
-  if (r && typeof r === "object" && !Array.isArray(r)) {
-    const o = r;
-    return !!(o.tl || o.tr || o.br || o.bl);
+function columnPropsFromDocColumn(c) {
+  const p = c?.props;
+  if (p && typeof p === "object" && !Array.isArray(p)) {
+    return { ...DEFAULT_COLUMN_PROPS, ...p };
   }
-  return false;
+  const s = c?.styles;
+  if (!s || typeof s !== "object" || Array.isArray(s)) {
+    return { ...DEFAULT_COLUMN_PROPS };
+  }
+  const padding = layoutColumnPaddingForDoc(s.padding);
+  const borderRadius = layoutColumnBorderRadiusForDoc(s.borderRadius);
+  return {
+    ...DEFAULT_COLUMN_PROPS,
+    bgColor: typeof s.backgroundColor === "string" ? s.backgroundColor : "",
+    bgImage: typeof s.backgroundImage === "string" ? String(s.backgroundImage).trim() : "",
+    bgRepeat: s.backgroundRepeat || "no-repeat",
+    bgSize: s.backgroundSize || "cover",
+    bgPosition: s.backgroundPosition || "center",
+    bgGradient: s.backgroundGradient ?? null,
+    padding,
+    borderRadius
+  };
 }
 function asNum(v) {
   return typeof v === "number" && Number.isFinite(v) ? v : void 0;
@@ -1467,13 +1855,15 @@ function internalBlockToEmailDoc(b, depth = 0) {
           ...p.padding && typeof p.padding === "object" && !Array.isArray(p.padding) ? { padding: layoutColumnPaddingForDoc(p.padding) } : {}
         }
       };
-    case "html":
+    case "html": {
+      const body = typeof b.content === "string" ? b.content : typeof p.content === "string" ? p.content : "";
       return {
         id,
         type,
-        content: { html: typeof p.content === "string" ? p.content : "" },
+        content: { html: normalizeRichHtmlForStorage(body) },
         styles: p.padding && typeof p.padding === "object" && !Array.isArray(p.padding) ? { padding: layoutColumnPaddingForDoc(p.padding) } : {}
       };
+    }
     case "image": {
       const br = p.borderRadius;
       const borderRadius = typeof br === "number" && Number.isFinite(br) ? br : br && typeof br === "object" && !Array.isArray(br) ? Math.round(
@@ -1653,7 +2043,7 @@ function internalBlockToEmailDoc(b, depth = 0) {
           bgRepeat: p.bgRepeat,
           bgPosition: p.bgPosition,
           bgGradient: p.bgGradient ?? null,
-          columnStyles: p.columnStyles,
+          columns: getColumns(p).map((col) => ({ props: cloneJson(col.props) })),
           cells: cellsOut
         },
         styles: {}
@@ -1693,17 +2083,26 @@ function mapBlockToInternal(b, layoutDepth = 0) {
         block.props.padding = paddingToUniform(s.padding, block.props.padding);
       }
       break;
-    case "html":
-      block.props.content = asStr(c.html) ?? block.props.content;
-      block.props.content = normalizeRichHtmlForStorage(block.props.content);
+    case "html": {
+      const br = b;
+      const fromDoc = asStr(c.html);
+      const fromRoot = typeof br.content === "string" ? String(br.content) : void 0;
+      const fromLegacyProps = br.props && typeof br.props.content === "string" ? String(br.props.content) : void 0;
+      const htmlNorm = normalizeRichHtmlForStorage(fromDoc ?? fromRoot ?? fromLegacyProps ?? "");
+      block.content = htmlNorm;
+      block.props.content = htmlNorm;
       if (s.padding && typeof s.padding === "object") {
         block.props.padding = paddingToUniform(s.padding, block.props.padding);
       }
       break;
+    }
     case "image":
       block.props.src = asStr(c.src) ?? block.props.src;
       if (asStr(c.alt)) block.props.alt = c.alt;
-      if (asStr(c.link)) block.props.link = c.link;
+      if (asStr(c.link)) {
+        block.props.link = c.link;
+        block.props.linkEnabled = true;
+      }
       if (beh.openInNewTab === true) block.props.linkTarget = "_blank";
       if (asStr(s.width)) block.props.width = s.width;
       if (asStr(s.align)) block.props.align = s.align;
@@ -1825,8 +2224,17 @@ function mapBlockToInternal(b, layoutDepth = 0) {
         if (typeof c.bgRepeat === "string") block.props.bgRepeat = c.bgRepeat;
         if (typeof c.bgPosition === "string") block.props.bgPosition = c.bgPosition;
         if (c.bgGradient !== void 0) block.props.bgGradient = c.bgGradient;
-        if (c.columnStyles && typeof c.columnStyles === "object" && !Array.isArray(c.columnStyles)) {
-          block.props.columnStyles = c.columnStyles;
+        if (c.bgGradient !== void 0) block.props.bgGradient = c.bgGradient;
+        if (Array.isArray(c.columns)) {
+          block.props.columns = c.columns.map((col) => ({
+            props: {
+              ...DEFAULT_COLUMN_PROPS,
+              ...col?.props && typeof col.props === "object" ? col.props : {}
+            }
+          }));
+        } else if (c.columnStyles && typeof c.columnStyles === "object" && !Array.isArray(c.columnStyles)) {
+          const ratios = Array.isArray(c.ratios) ? c.ratios : [1];
+          block.props.columns = columnsFromLegacyMap(c.columnStyles, ratios.length);
         }
         block.props.cells = c.cells.map(
           (col) => Array.isArray(col) ? col.map((raw) => mapEmbeddedLayoutCellBlock(raw, layoutDepth + 1)).filter((x) => x != null) : []
@@ -1870,6 +2278,10 @@ function mapBlockToInternal(b, layoutDepth = 0) {
     }
   }
   applyImportedEditorPropsFromDoc(block, t, b, layoutDepth);
+  if (t === "image") {
+    const link = asStr(block.props.link);
+    if (link && block.props.linkEnabled == null) block.props.linkEnabled = true;
+  }
   return block;
 }
 function rowToInternal(r) {
@@ -1891,55 +2303,315 @@ function rowToInternal(r) {
   row.id = typeof r.id === "string" ? r.id : uid();
   row.cols = cols;
   row.gap = typeof r.layout?.gap === "number" ? r.layout.gap : row.gap;
-  row.padding = paddingToUniform(r.styles?.padding, row.padding);
-  row.bgColor = (r.styles?.backgroundColor || "").trim();
-  row.bgImage = (r.styles?.backgroundImage || "").trim();
-  row.bgRepeat = r.styles?.backgroundRepeat || row.bgRepeat;
-  row.bgSize = r.styles?.backgroundSize || row.bgSize;
-  row.bgPosition = r.styles?.backgroundPosition || row.bgPosition || "center";
-  row.bgGradient = r.styles?.backgroundGradient || row.bgGradient || null;
+  applyRowPropsToEditorRow(row, r);
+  const lay = r.layout;
+  if (lay && typeof lay === "object" && !Array.isArray(lay)) {
+    if (typeof lay.preset === "string" && lay.preset.trim()) row.preset = lay.preset.trim();
+    if (Array.isArray(lay.ratios) && lay.ratios.length) {
+      const rr = lay.ratios.filter((x) => typeof x === "number" && Number.isFinite(x));
+      if (rr.length) row.ratios = rr;
+    }
+  }
   row.cells = colList.map((c) => {
     const blocks = Array.isArray(c.blocks) ? c.blocks : [];
     return blocks.map((blk) => mapBlockToInternal(blk, 0)).filter((x) => x != null);
   });
   const studio = r._reactEmailStudio;
   const snap = studio?.row;
-  const columnStylesFromDoc = {};
-  colList.forEach((c, i) => {
-    const bgColor = typeof c.styles?.backgroundColor === "string" ? c.styles.backgroundColor : "";
-    const padding = layoutColumnPaddingForDoc(c.styles?.padding);
-    const borderRadius = layoutColumnBorderRadiusForDoc(c.styles?.borderRadius);
-    const bgImage = typeof c.styles?.backgroundImage === "string" ? String(c.styles.backgroundImage).trim() : "";
-    const bgRepeat = typeof c.styles?.backgroundRepeat === "string" ? c.styles.backgroundRepeat : void 0;
-    const bgSize = typeof c.styles?.backgroundSize === "string" ? c.styles.backgroundSize : void 0;
-    const bgPosition = typeof c.styles?.backgroundPosition === "string" ? c.styles.backgroundPosition : void 0;
-    const bgGradient = c.styles?.backgroundGradient || null;
-    const hasPad = columnPaddingNonZero(padding);
-    const hasBr = columnRadiusNonZero(borderRadius);
-    if (bgColor || hasPad || hasBr || bgImage || bgRepeat || bgSize || bgPosition || bgGradient) {
-      columnStylesFromDoc[i] = { bgColor, padding, borderRadius, bgImage, bgRepeat, bgSize, bgPosition, bgGradient };
-    }
-  });
+  const columnsFromDoc = colList.map((c) => ({
+    props: columnPropsFromDocColumn(c)
+  }));
   if (snap && typeof snap === "object" && !Array.isArray(snap)) {
-    const { cells: _omitCells, columnStyles: snapCs, ...rest } = snap;
+    const {
+      cells: _omitCells,
+      columnStyles: legacyCs,
+      columns: snapCols,
+      ...rest
+    } = snap;
     Object.assign(row, rest);
-    const snapColumn = snapCs && typeof snapCs === "object" && !Array.isArray(snapCs) ? snapCs : {};
-    row.columnStyles = { ...snapColumn, ...columnStylesFromDoc };
-    if (!Object.keys(row.columnStyles).length) delete row.columnStyles;
-  } else if (Object.keys(columnStylesFromDoc).length) {
-    row.columnStyles = columnStylesFromDoc;
+    const fromSnap = Array.isArray(snapCols) ? snapCols.map((col) => ({
+      props: {
+        ...DEFAULT_COLUMN_PROPS,
+        ...col?.props && typeof col.props === "object" ? col.props : {}
+      }
+    })) : columnsFromLegacyMap(legacyCs, cols);
+    row.columns = mergeLayoutColumns(fromSnap, columnsFromDoc) ?? columnsFromDoc;
+    delete row.columnStyles;
+  } else {
+    row.columns = columnsFromDoc;
   }
   return row;
 }
-function normalizeEmailDesignInput(input) {
-  const doc = normalizeEmailDocument(input);
-  if (!doc) return null;
-  const s = doc.settings || {};
-  const studioSettings = s._reactEmailStudio;
+function coerceEmailDocumentInput(input) {
+  if (input == null) return input;
+  if (Array.isArray(input)) {
+    if (input.length === 0) return input;
+    return { type: "email_document", settings: {}, blocks: input };
+  }
+  if (typeof input !== "object") return input;
+  const o = input;
+  if (o.type === "email_document") return input;
+  if (Array.isArray(o.blocks)) {
+    return {
+      type: "email_document",
+      settings: o.settings && typeof o.settings === "object" ? o.settings : {},
+      blocks: o.blocks
+    };
+  }
+  return input;
+}
+function rootLayoutBlockToDocRow(block) {
+  const p = block.props && typeof block.props === "object" ? block.props : {};
+  const c = block.content && typeof block.content === "object" && !Array.isArray(block.content) ? block.content : {};
+  const cols = Math.max(
+    1,
+    typeof p.cols === "number" && p.cols > 0 ? Math.floor(p.cols) : 0,
+    typeof c.cols === "number" && c.cols > 0 ? Math.floor(c.cols) : 0,
+    Array.isArray(p.cells) ? p.cells.length : 0,
+    Array.isArray(c.cells) ? c.cells.length : 0
+  );
+  const rawCells = Array.isArray(c.cells) ? c.cells : Array.isArray(p.cells) ? p.cells : [];
+  const contentColumns = Array.isArray(c.columns) ? c.columns : [];
+  const propsColumns = getColumns(p);
+  const columns = Array.from({ length: cols }, (_, ci) => {
+    const cellRaw = rawCells[ci];
+    const blocks = Array.isArray(cellRaw) ? cellRaw.filter((x) => x && typeof x === "object").map((x, bi) => {
+      const blk = x;
+      return {
+        id: ensureBlockId(blk.id, `b_${ci}_${bi}`),
+        type: typeof blk.type === "string" ? blk.type : "text",
+        content: blk.content,
+        ...blk.props ? { props: blk.props } : {},
+        ...blk.styles ? { styles: blk.styles } : {},
+        ...blk.behavior ? { behavior: blk.behavior } : {}
+      };
+    }) : [];
+    const colProps = {
+      ...DEFAULT_COLUMN_PROPS,
+      ...propsColumns[ci]?.props ?? contentColumns[ci]?.props ?? {}
+    };
+    return {
+      id: `col_${ci + 1}`,
+      layout: { width: "100%", verticalAlign: "top", mobileWidth: "100%" },
+      props: cloneJson(colProps),
+      blocks
+    };
+  });
+  const rowProps = {
+    bgColor: typeof p.bgColor === "string" ? p.bgColor : "",
+    bgImage: typeof p.bgImage === "string" ? p.bgImage : "",
+    bgRepeat: p.bgRepeat || "no-repeat",
+    bgSize: p.bgSize || "cover",
+    bgPosition: p.bgPosition || "center",
+    bgGradient: p.bgGradient ?? null,
+    padding: typeof p.padding === "number" ? { top: p.padding, right: p.padding, bottom: p.padding, left: p.padding } : normalizePadding(p.padding)
+  };
+  const ratios = Array.isArray(p.ratios) ? p.ratios : Array.isArray(c.ratios) ? c.ratios : void 0;
+  return {
+    id: typeof block.id === "string" ? block.id : uid(),
+    type: "row",
+    layout: {
+      columns: cols,
+      gap: typeof p.gap === "number" ? p.gap : typeof c.gap === "number" ? c.gap : 0,
+      stackOnMobile: true,
+      align: "center",
+      ...typeof p.preset === "string" && p.preset.trim() ? { preset: p.preset.trim() } : typeof c.preset === "string" && c.preset.trim() ? { preset: c.preset.trim() } : {},
+      ...ratios?.length ? { ratios: [...ratios] } : {}
+    },
+    props: rowProps,
+    columns
+  };
+}
+function ensureBlockId(id, prefix) {
+  return typeof id === "string" && id.trim() ? id : `${prefix}_${uid()}`;
+}
+function wrapRootContentBlock(block) {
+  const row = makeLayoutRow(pickPresetByColCount(1));
+  const internal = mapBlockToInternal(block, 0);
+  if (internal) row.cells[0] = [internal];
+  return row;
+}
+function rootBlockToEditorRow(block) {
+  const t = block.type === "nestedRow" ? "layout" : block.type;
+  if (t === "layout") {
+    return rowToInternal(rootLayoutBlockToDocRow(block));
+  }
+  return wrapRootContentBlock(block);
+}
+function blocksToEditorRows(blocks) {
+  return blocks.map(rootBlockToEditorRow);
+}
+function rowPropsToLegacyStyles(p) {
+  return {
+    backgroundColor: p.bgColor ?? "",
+    backgroundImage: p.bgImage ?? "",
+    backgroundRepeat: p.bgRepeat ?? "no-repeat",
+    backgroundSize: p.bgSize ?? "cover",
+    backgroundPosition: p.bgPosition ?? "center",
+    backgroundGradient: p.bgGradient ?? null,
+    padding: p.padding,
+    borderRadius: p.borderRadius ?? 0,
+    borderWidth: p.borderWidth ?? 0,
+    borderColor: p.borderColor ?? "#e5e7eb",
+    textAlign: p.textAlign ?? "left"
+  };
+}
+function columnPropsToLegacyStyles(cp) {
+  return {
+    padding: layoutColumnPaddingForDoc(cp.padding),
+    backgroundColor: cp.bgColor ?? "",
+    backgroundImage: cp.bgImage ?? "",
+    backgroundRepeat: cp.bgRepeat ?? "no-repeat",
+    backgroundSize: cp.bgSize ?? "cover",
+    backgroundPosition: cp.bgPosition ?? "center",
+    backgroundGradient: cp.bgGradient ?? null,
+    borderRadius: layoutColumnBorderRadiusForDoc(cp.borderRadius)
+  };
+}
+function editorRowStudioSnapshot(r) {
+  const p = editorRowToDocProps(r);
+  const columns = getColumns(r).map((col) => ({
+    props: cloneJson(col.props ?? DEFAULT_COLUMN_PROPS)
+  }));
+  return {
+    id: r.id,
+    type: "layout",
+    preset: r.preset,
+    cols: r.cols,
+    ratios: Array.isArray(r.ratios) ? [...r.ratios] : [1],
+    gap: typeof r.gap === "number" ? r.gap : 0,
+    padding: p.padding,
+    bgColor: p.bgColor ?? "",
+    bgImage: p.bgImage ?? "",
+    bgSize: p.bgSize ?? "cover",
+    bgRepeat: p.bgRepeat ?? "no-repeat",
+    bgPosition: p.bgPosition ?? "center",
+    bgGradient: p.bgGradient ?? null,
+    columns
+  };
+}
+function exportBlockForLegacyRow(b, depth = 0) {
+  if (!b || typeof b !== "object") {
+    return { id: uid(), type: "text", content: {}, props: {} };
+  }
+  const rawProps = b.props && typeof b.props === "object" && !Array.isArray(b.props) ? cloneJson(b.props) : {};
+  if (b.type === "layout" && Array.isArray(b.props?.cells)) {
+    rawProps.cells = b.props.cells.map(
+      (col) => Array.isArray(col) ? col.map((child) => exportBlockForLegacyRow(child, depth + 1)) : []
+    );
+  }
+  if (b.type === "html") {
+    const body = typeof b.content === "string" ? b.content : typeof rawProps.content === "string" ? rawProps.content : "";
+    const html = normalizeRichHtmlForStorage(body);
+    rawProps.content = html;
+    return {
+      id: typeof b.id === "string" ? b.id : uid(),
+      type: "html",
+      content: { html },
+      props: rawProps
+    };
+  }
+  const doc = internalBlockToEmailDoc(b, depth);
+  const out = {
+    id: doc.id,
+    type: doc.type,
+    content: doc.content ?? {},
+    props: rawProps
+  };
+  if (doc.behavior) out.behavior = doc.behavior;
+  return out;
+}
+function editorRowToEmailDocumentRow(r, rowIndex) {
+  const rowProps = editorRowToDocProps(r);
+  const cellArrays = Array.isArray(r.cells) ? r.cells : [];
+  const declaredCols = typeof r.cols === "number" && r.cols > 0 ? Math.floor(r.cols) : 0;
+  const colCount = Math.max(1, cellArrays.length, declaredCols);
+  const rowColumns = getColumns(r);
+  const columns = Array.from({ length: colCount }, (_, ci) => {
+    const cp = {
+      ...DEFAULT_COLUMN_PROPS,
+      ...rowColumns[ci]?.props ?? {}
+    };
+    const cellBlocks = cellArrays[ci];
+    const blocks = Array.isArray(cellBlocks) ? cellBlocks.map((blk) => exportBlockForLegacyRow(blk)).filter((x) => x != null) : [];
+    return {
+      id: `col_${rowIndex + 1}_${ci + 1}`,
+      layout: { width: "100%", verticalAlign: "top", mobileWidth: "100%" },
+      styles: columnPropsToLegacyStyles(cp),
+      props: cloneJson(cp),
+      blocks
+    };
+  });
+  const ratios = Array.isArray(r.ratios) ? [...r.ratios] : void 0;
+  return {
+    id: typeof r.id === "string" ? r.id : uid(),
+    type: "row",
+    _reactEmailStudio: { row: editorRowStudioSnapshot(r) },
+    layout: {
+      columns: colCount,
+      gap: typeof r.gap === "number" ? r.gap : 0,
+      stackOnMobile: true,
+      align: "center",
+      ...typeof r.preset === "string" && r.preset.trim() ? { preset: r.preset.trim() } : {},
+      ...ratios?.length ? { ratios } : {}
+    },
+    props: rowProps,
+    styles: rowPropsToLegacyStyles(rowProps),
+    columns
+  };
+}
+function buildExportSettingsWithStudio(settings) {
+  const base = buildExportSettings(settings) ?? {};
+  const editorSettings = cloneJson(settings);
+  return {
+    ...base,
+    _reactEmailStudio: {
+      contentPadding: base.contentPadding ?? 24,
+      contentBorderRadius: base.contentBorderRadius ?? 8,
+      editorSettings
+    }
+  };
+}
+function editorSettingStr(settings, key, fallback = "") {
+  const v = settings[key];
+  return typeof v === "string" ? v : fallback;
+}
+function buildExportSettings(settings) {
+  const contentWidth = typeof settings.contentWidth === "number" ? settings.contentWidth : 600;
+  const bgGradient = settings.bgGradient;
+  const contentBgGradient = settings.contentBgGradient;
+  return {
+    width: contentWidth,
+    backgroundColor: editorSettingStr(settings, "bgColor", "#f1f5f9"),
+    backgroundImage: editorSettingStr(settings, "bgImage"),
+    backgroundRepeat: editorSettingStr(settings, "bgRepeat", "no-repeat"),
+    backgroundSize: editorSettingStr(settings, "bgSize", "cover"),
+    backgroundPosition: editorSettingStr(settings, "bgPosition", "center"),
+    backgroundGradient: bgGradient && typeof bgGradient === "object" && !Array.isArray(bgGradient) ? bgGradient : void 0,
+    contentBackgroundColor: editorSettingStr(settings, "contentBg", "#ffffff"),
+    contentBackgroundImage: editorSettingStr(settings, "contentBgImage"),
+    contentBackgroundRepeat: editorSettingStr(settings, "contentBgRepeat", "no-repeat"),
+    contentBackgroundSize: editorSettingStr(settings, "contentBgSize", "cover"),
+    contentBackgroundPosition: editorSettingStr(settings, "contentBgPosition", "center"),
+    contentBackgroundGradient: contentBgGradient && typeof contentBgGradient === "object" && !Array.isArray(contentBgGradient) ? contentBgGradient : void 0,
+    fontFamily: editorSettingStr(settings, "fontFamily") || editorSettingStr(settings, "pageFontFamily", "Arial, Helvetica, sans-serif"),
+    lineHeightBase: settings.pageLineHeight != null && settings.pageLineHeight !== "" ? Number(settings.pageLineHeight) : 1.6,
+    color: editorSettingStr(settings, "pageTextColor", "#111827"),
+    responsive: typeof settings.pageResponsive === "boolean" ? settings.pageResponsive : true,
+    rtl: !!settings.pageRtl,
+    contentPadding: typeof settings.padding === "number" ? settings.padding : 24,
+    contentBorderRadius: typeof settings.borderRadius === "number" ? settings.borderRadius : 8
+  };
+}
+function editorSettingsFromDoc(s, rawSettings) {
+  const studioSettings = rawSettings?._reactEmailStudio;
   const settings = {};
   if (studioSettings?.editorSettings && typeof studioSettings.editorSettings === "object" && !Array.isArray(studioSettings.editorSettings)) {
     Object.assign(settings, cloneJson(studioSettings.editorSettings));
   }
+  const pageRtlFromEditor = settings.pageRtl;
+  const contentPadding = typeof s.contentPadding === "number" ? s.contentPadding : typeof studioSettings?.contentPadding === "number" ? studioSettings.contentPadding : void 0;
+  const contentBorderRadius = typeof s.contentBorderRadius === "number" ? s.contentBorderRadius : typeof studioSettings?.contentBorderRadius === "number" ? studioSettings.contentBorderRadius : void 0;
   Object.assign(settings, {
     bgColor: s.backgroundColor || "#f1f5f9",
     bgImage: s.backgroundImage || "",
@@ -1954,103 +2626,67 @@ function normalizeEmailDesignInput(input) {
     contentBgPosition: s.contentBackgroundPosition || "center",
     contentBgGradient: s.contentBackgroundGradient || null,
     contentWidth: typeof s.width === "number" ? s.width : 600,
-    padding: typeof studioSettings?.contentPadding === "number" ? studioSettings.contentPadding : typeof settings.padding === "number" ? settings.padding : 24,
-    borderRadius: typeof studioSettings?.contentBorderRadius === "number" ? studioSettings.contentBorderRadius : typeof settings.borderRadius === "number" ? settings.borderRadius : 8,
+    padding: contentPadding ?? (typeof settings.padding === "number" ? settings.padding : 24),
+    borderRadius: contentBorderRadius ?? (typeof settings.borderRadius === "number" ? settings.borderRadius : 8),
     pageFontFamily: s.fontFamily,
     pageTextColor: s.color,
     pageLineHeight: s.lineHeightBase != null ? String(s.lineHeightBase) : void 0,
     pageResponsive: s.responsive,
-    pageRtl: s.rtl,
+    pageRtl: typeof s.rtl === "boolean" ? s.rtl : pageRtlFromEditor,
     fontFamily: s.fontFamily
   });
-  const rows = (doc.rows || []).map(rowToInternal);
+  return settings;
+}
+function normalizeEmailDesignInput(input) {
+  const coerced = coerceEmailDocumentInput(input);
+  const doc = normalizeEmailDocument(coerced);
+  if (!doc) return null;
+  const rawDoc = input && typeof input === "object" && !Array.isArray(input) ? input : null;
+  const rawSettings = rawDoc?.settings && typeof rawDoc.settings === "object" && !Array.isArray(rawDoc.settings) ? rawDoc.settings : null;
+  const settings = editorSettingsFromDoc(doc.settings || {}, rawSettings);
+  let rows;
+  if (doc.blocks?.length) {
+    rows = blocksToEditorRows(doc.blocks);
+  } else {
+    const rawRows = rawDoc && Array.isArray(rawDoc.rows) ? rawDoc.rows : [];
+    rows = (doc.rows || []).map((r, i) => {
+      const legacy = rawRows[i]?._reactEmailStudio;
+      if (legacy) {
+        return rowToInternal({ ...r, _reactEmailStudio: legacy });
+      }
+      return rowToInternal(r);
+    });
+  }
   return withHydratedRows({ rows, settings, __emailDocument: doc });
 }
+function emailDocumentToEditorRows(input) {
+  const coerced = coerceEmailDocumentInput(input);
+  const doc = normalizeEmailDocument(coerced);
+  if (!doc) return null;
+  const rawDoc = input && typeof input === "object" && !Array.isArray(input) ? input : null;
+  if (doc.blocks?.length) {
+    return blocksToEditorRows(doc.blocks);
+  }
+  const rawRows = rawDoc && Array.isArray(rawDoc.rows) ? rawDoc.rows : [];
+  return (doc.rows || []).map((r, i) => {
+    const legacy = rawRows[i]?._reactEmailStudio;
+    if (legacy) {
+      return rowToInternal({ ...r, _reactEmailStudio: legacy });
+    }
+    return rowToInternal(r);
+  });
+}
 function designToEmailDocument(rows, settings) {
-  const doc = {
+  return {
     type: "email_document",
-    settings: {
-      width: settings.contentWidth || 600,
-      backgroundColor: settings.bgColor || "#f1f5f9",
-      backgroundImage: settings.bgImage || "",
-      backgroundRepeat: settings.bgRepeat || "no-repeat",
-      backgroundSize: settings.bgSize || "cover",
-      backgroundPosition: settings.bgPosition || "center",
-      backgroundGradient: settings.bgGradient || null,
-      contentBackgroundColor: settings.contentBg || "#ffffff",
-      contentBackgroundImage: settings.contentBgImage || "",
-      contentBackgroundRepeat: settings.contentBgRepeat || "no-repeat",
-      contentBackgroundSize: settings.contentBgSize || "cover",
-      contentBackgroundPosition: settings.contentBgPosition || "center",
-      contentBackgroundGradient: settings.contentBgGradient || null,
-      fontFamily: settings.fontFamily || settings.pageFontFamily || "Arial, Helvetica, sans-serif",
-      lineHeightBase: settings.pageLineHeight ? Number(settings.pageLineHeight) : 1.6,
-      color: settings.pageTextColor || "#111827",
-      responsive: typeof settings.pageResponsive === "boolean" ? settings.pageResponsive : true,
-      rtl: !!settings.pageRtl,
-      _reactEmailStudio: {
-        contentPadding: settings.padding ?? 24,
-        contentBorderRadius: settings.borderRadius ?? 8,
-        editorSettings: cloneJson(settings)
-      }
-    },
-    rows: rows.map((r, ri) => {
-      const cellArrays = Array.isArray(r.cells) ? r.cells : [];
-      const declaredCols = typeof r.cols === "number" && r.cols > 0 ? r.cols : 0;
-      const cols = Math.max(1, cellArrays.length, declaredCols);
-      const rowPad = r.padding && typeof r.padding === "object" && !Array.isArray(r.padding) ? layoutColumnPaddingForDoc(r.padding) : (() => {
-        const n = typeof r.padding === "number" && Number.isFinite(r.padding) ? r.padding : 0;
-        return { top: n, right: n, bottom: n, left: n };
-      })();
-      const { cells: _rowCells, ...rowEditorSnap } = r;
-      return {
-        id: r.id || `row_${ri + 1}`,
-        type: "row",
-        _reactEmailStudio: {
-          row: cloneJson(rowEditorSnap)
-        },
-        layout: {
-          columns: cols,
-          gap: r.gap ?? 0,
-          stackOnMobile: true,
-          align: "center"
-        },
-        styles: {
-          backgroundColor: r.bgColor || "",
-          backgroundImage: r.bgImage || "",
-          backgroundRepeat: r.bgRepeat || "no-repeat",
-          backgroundSize: r.bgSize || "cover",
-          backgroundPosition: r.bgPosition || "center",
-          backgroundGradient: r.bgGradient || null,
-          padding: rowPad,
-          borderRadius: 0,
-          borderWidth: 0,
-          borderColor: "#e5e7eb",
-          textAlign: "left"
-        },
-        columns: Array.from({ length: cols }, (_, ci) => {
-          const cellBlocks = cellArrays[ci] ?? [];
-          const cs = r.columnStyles && r.columnStyles[ci] || {};
-          return {
-            id: `col_${ri + 1}_${ci + 1}`,
-            layout: { width: "100%", verticalAlign: "top", mobileWidth: "100%" },
-            styles: {
-              padding: layoutColumnPaddingForDoc(cs.padding),
-              backgroundColor: cs.bgColor || "",
-              backgroundImage: cs.bgImage || "",
-              backgroundRepeat: cs.bgRepeat || "no-repeat",
-              backgroundSize: cs.bgSize || "cover",
-              backgroundPosition: cs.bgPosition || "center",
-              backgroundGradient: cs.bgGradient || null,
-              borderRadius: layoutColumnBorderRadiusForDoc(cs.borderRadius)
-            },
-            blocks: (cellBlocks || []).map((b) => exportEmailDocBlock(b))
-          };
-        })
-      };
-    })
+    settings: buildExportSettingsWithStudio(settings),
+    rows: rows.map((r, i) => editorRowToEmailDocumentRow(r, i))
   };
-  return doc;
+}
+function canonicalizeEmailDocument(input) {
+  const loaded = normalizeEmailDesignInput(coerceEmailDocumentInput(input) ?? input);
+  if (!loaded?.rows) return null;
+  return designToEmailDocument(loaded.rows, loaded.settings);
 }
 function hydrateBlock(b, depth = 0) {
   if (!b || typeof b !== "object") return null;
@@ -2064,13 +2700,13 @@ function hydrateBlock(b, depth = 0) {
         ...b,
         type: "layout",
         id: typeof b.id === "string" && b.id ? b.id : uid(),
-        props: {
+        props: normalizeLayoutContainerProps({
           ...defaults2,
           ...b.props,
           bgSize: b.props.bgSize ?? defaults2.bgSize,
           bgRepeat: b.props.bgRepeat ?? defaults2.bgRepeat,
           cells: ratios.map(() => [])
-        }
+        })
       };
     }
     const cells = b.props.cells.map(
@@ -2080,24 +2716,33 @@ function hydrateBlock(b, depth = 0) {
       ...b,
       type: "layout",
       id: typeof b.id === "string" && b.id ? b.id : uid(),
-      props: {
+      props: normalizeLayoutContainerProps({
         ...defaults2,
         ...b.props,
         bgSize: b.props.bgSize ?? defaults2.bgSize,
         bgRepeat: b.props.bgRepeat ?? defaults2.bgRepeat,
         cells
-      }
+      })
     };
   }
   const defaults = DEFAULT_BLOCK_PROPS[t];
   if (typeof defaults !== "object" || defaults == null || Array.isArray(defaults)) return null;
-  const merged = t === "html" ? {
-    ...defaults,
-    ...b.props && typeof b.props === "object" ? b.props : {},
-    content: normalizeRichHtmlForStorage(
-      b.props && typeof b.props === "object" ? b.props.content : void 0
-    )
-  } : { ...defaults, ...b.props && typeof b.props === "object" ? b.props : {} };
+  if (t === "html") {
+    const rawProps = b.props && typeof b.props === "object" && !Array.isArray(b.props) ? b.props : {};
+    const { content: legacyPropContent, ...restProps } = rawProps;
+    const merged2 = { ...defaults, ...restProps };
+    normalizeBoxStyles(merged2, t);
+    const src = typeof b.content === "string" ? String(b.content) : typeof legacyPropContent === "string" ? legacyPropContent : "";
+    const htmlNorm = normalizeRichHtmlForStorage(src);
+    merged2.content = htmlNorm;
+    return {
+      ...b,
+      id: typeof b.id === "string" && b.id ? b.id : uid(),
+      content: htmlNorm,
+      props: merged2
+    };
+  }
+  const merged = { ...defaults, ...b.props && typeof b.props === "object" ? b.props : {} };
   normalizeBoxStyles(merged, t);
   return {
     ...b,
@@ -2113,70 +2758,50 @@ function mapEmbeddedLayoutCellBlock(raw, layoutDepth = 0) {
   }
   return mapBlockToInternal(r, layoutDepth);
 }
-function mergeLayoutColumnStylesMaps(fromContent, fromHydrated) {
-  const isObj = (x) => x !== null && typeof x === "object" && !Array.isArray(x);
-  if (!isObj(fromContent) && !isObj(fromHydrated)) return void 0;
-  const a = isObj(fromContent) ? fromContent : {};
-  const b = isObj(fromHydrated) ? fromHydrated : {};
-  const keys = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]);
-  const out = {};
-  for (const k of keys) {
-    const va = a[k];
-    const vb = b[k];
-    if (isObj(va) && isObj(vb)) {
-      out[k] = { ...va, ...vb };
-    } else if (vb !== void 0) {
-      out[k] = vb;
-    } else {
-      out[k] = va;
-    }
-  }
-  return Object.keys(out).length ? out : void 0;
-}
 function applyImportedEditorPropsFromDoc(block, t, b, layoutDepth = 0) {
   const exp = b.props;
-  if (!exp || typeof exp !== "object" || Array.isArray(exp)) return;
+  if (!exp || typeof exp !== "object" || Array.isArray(exp)) {
+    if (t === "html" && typeof block.content === "string") {
+      block.content = normalizeRichHtmlForStorage(block.content);
+      block.props.content = block.content;
+    }
+    return;
+  }
   if (t === "layout" && Array.isArray(exp.cells)) {
-    const columnStylesFromContent = block.props.columnStyles;
+    const columnsFromContent = block.props.columns ?? block.props.columnStyles;
+    const expHasColumns = Array.isArray(exp.columns) || exp.columnStyles && typeof exp.columnStyles === "object" && !Array.isArray(exp.columnStyles);
     const hb = hydrateBlock({ type: "layout", id: block.id, props: exp }, layoutDepth);
     if (hb) {
       block.props = hb.props;
-      const merged = mergeLayoutColumnStylesMaps(columnStylesFromContent, block.props.columnStyles);
-      if (merged) block.props.columnStyles = merged;
-      else delete block.props.columnStyles;
+      const merged = mergeLayoutColumns(
+        columnsFromContent,
+        expHasColumns ? block.props.columns : void 0
+      );
+      if (merged) block.props.columns = merged;
+      else delete block.props.columns;
+      delete block.props.columnStyles;
       if (typeof hb.id === "string" && hb.id) block.id = hb.id;
     }
     return;
   }
+  if (t === "html") {
+    const { content: expContent, ...expRest } = exp;
+    Object.assign(block.props, expRest);
+    normalizeBoxStyles(block.props, t);
+    if (typeof expContent === "string") {
+      block.content = normalizeRichHtmlForStorage(expContent);
+    } else if (typeof block.content === "string") {
+      block.content = normalizeRichHtmlForStorage(block.content);
+    }
+    block.props.content = typeof block.content === "string" ? block.content : "";
+    return;
+  }
   Object.assign(block.props, exp);
   normalizeBoxStyles(block.props, t);
-  if (t === "html" || t === "text") {
+  if (t === "text") {
     block.props.content = normalizeRichHtmlForStorage(String(block.props.content ?? ""));
   }
 }
-function exportEmailDocBlock(b, depth = 0) {
-  if (!b || typeof b !== "object") return { id: uid(), type: "text", content: {}, styles: {} };
-  const doc = internalBlockToEmailDoc(b, depth);
-  const out = { ...doc };
-  if (b.props && typeof b.props === "object" && !Array.isArray(b.props)) {
-    out.props = cloneJson(b.props);
-  }
-  if (b.type === "layout" && Array.isArray(b.props?.cells)) {
-    const baseContent = typeof doc.content === "object" && doc.content ? doc.content : {};
-    if (depth >= MAX_LAYOUT_TREE_DEPTH) {
-      const ratios = Array.isArray(b.props.ratios) && b.props.ratios.length ? b.props.ratios : [1];
-      out.content = { ...baseContent, cells: ratios.map(() => []) };
-    } else {
-      out.content = {
-        ...baseContent,
-        cells: b.props.cells.map(
-          (col) => Array.isArray(col) ? col.map((child) => exportEmailDocBlock(child, depth + 1)) : []
-        )
-      };
-    }
-  }
-  return out;
-}
 function hydrateLayoutRow(row) {
   if (!row || typeof row !== "object") return row;
   const cells = (row.cells || []).map(
@@ -2219,6 +2844,77 @@ function jsonToHtml(designInput, opts = {}) {
   return designToHtml(d.rows, d.settings, opts);
 }
 
+// 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: inner,
+                props: { ...DEFAULT_BLOCK_PROPS.html }
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  };
+  return doc;
+}
+function htmlToJson(html, pretty = false) {
+  const doc = htmlToEmailDesignTemplate(html);
+  if (!doc) return "";
+  return pretty ? JSON.stringify(doc, null, 2) : JSON.stringify(doc);
+}
+
 // src/editor/canvas/DesignCanvas.tsx
 var import_react = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -2359,13 +3055,15 @@ function ContentBlock({ block, selected, onClick, preview, C }) {
     )
   );
   if (type === "html") {
-    const emptyRich = isEffectivelyEmptyRichHtml(p.content);
+    const richHtml = typeof block.content === "string" ? block.content : p.content;
+    const emptyRich = isEffectivelyEmptyRichHtml(richHtml);
     return wrap(
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { position: "relative", minHeight: emptyRich && !preview ? "2.75em" : void 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: RICH_HTML_CONTENT_CSS }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "div",
           {
-            className: "email-editor-rich-canvas",
+            className: "email-editor-rich-canvas email-rich-html-content",
             style: {
               fontSize: p.fontSize,
               color: p.color,
@@ -2376,7 +3074,7 @@ function ContentBlock({ block, selected, onClick, preview, C }) {
               wordBreak: "break-word",
               minHeight: emptyRich && !preview ? "2.75em" : void 0
             },
-            dangerouslySetInnerHTML: { __html: p.content || "<p></p>" }
+            dangerouslySetInnerHTML: { __html: richHtml || "<p></p>" }
           }
         ),
         emptyRich && !preview ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -2424,7 +3122,7 @@ function ContentBlock({ block, selected, onClick, preview, C }) {
         }
       }
     );
-    return wrap(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { textAlign: p.align }, children: p.link ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: p.link, target: p.linkTarget || "_blank", rel: "noopener", children: img }) : img }));
+    return wrap(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { textAlign: p.align }, children: imageLinkActive(p) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: p.link, target: p.linkTarget || "_blank", rel: "noopener", children: img }) : img }));
   }
   if (type === "button") return wrap(
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { textAlign: p.fullWidth ? "center" : p.align }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -2597,7 +3295,7 @@ function NestedRowBlock({
         );
       },
       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] || {};
+        const cS = getColumnPropsAt(p, ici);
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "div",
           {
@@ -2655,7 +3353,9 @@ function BlockItem({
   onContextMenu,
   preview,
   C,
-  Line
+  Line,
+  dragAsRow = false,
+  beginRowDrag
 }) {
   const wrapperRef = (0, import_react.useRef)(null);
   const bid = editorId ? `${editorId}-block-${cb.id}` : void 0;
@@ -2703,7 +3403,7 @@ function BlockItem({
           {
             "data-bidx": ci,
             draggable: !preview,
-            title: preview ? void 0 : "Click to select \xB7 drag to reorder or move",
+            title: preview ? void 0 : dragAsRow ? "Click to select \xB7 drag to reorder section" : "Click to select \xB7 drag to reorder or move",
             onPointerDown: (e) => {
               if (preview || e.button !== 0) return;
               selectThisBlock(e);
@@ -2711,6 +3411,10 @@ function BlockItem({
             onDragStart: (e) => {
               if (preview) return;
               e.stopPropagation();
+              if (dragAsRow && beginRowDrag) {
+                beginRowDrag(e);
+                return;
+              }
               e.dataTransfer.effectAllowed = "move";
               e.dataTransfer.setData(
                 "application/json",
@@ -2782,7 +3486,9 @@ function Cell({
   onDeleteContent,
   onContextMenu,
   preview,
-  C
+  C,
+  dragAsRow = false,
+  beginRowDrag
 }) {
   const [insertAt, setInsertAt] = (0, import_react.useState)(null);
   const cellRef = (0, import_react.useRef)(null);
@@ -2797,6 +3503,14 @@ function Cell({
     return els.length;
   }, [blocks.length]);
   const handleDragOver = (e) => {
+    try {
+      const raw = e.dataTransfer.getData("application/json");
+      if (raw) {
+        const data = JSON.parse(raw);
+        if (data.moveRowId) return;
+      }
+    } catch {
+    }
     e.preventDefault();
     e.stopPropagation();
     setInsertAt(calcIdx(e.clientY));
@@ -2812,6 +3526,7 @@ function Cell({
     setInsertAt(null);
     try {
       const data = JSON.parse(e.dataTransfer.getData("application/json") || "{}");
+      if (data.moveRowId) return;
       if (data.contentType) {
         onDropContent(rowId, cellIdx, { kind: "new", contentType: data.contentType, insertAt: idx, nested: nestedPayload });
       } else if (data.moveContent) {
@@ -2891,7 +3606,9 @@ function Cell({
             onContextMenu,
             preview,
             C,
-            Line
+            Line,
+            dragAsRow: dragAsRow && blocks.length === 1 && ci === 0,
+            beginRowDrag
           }
         ) }, cb.id))
       ]
@@ -2912,7 +3629,8 @@ function LayoutRow({
   onLayoutContextMenu,
   setSelectedRowId,
   preview = false,
-  rowDrag,
+  rootContentRow = false,
+  beginRowDrag,
   C
 }) {
   const rowStyle = {
@@ -2944,16 +3662,9 @@ function LayoutRow({
       onContextMenu: preview || !onLayoutContextMenu ? void 0 : (e) => {
         onLayoutContextMenu(e, row.id);
       },
-      draggable: rowDrag?.draggable === true,
-      onDragStart: rowDrag?.onDragStart,
-      onDragEnd: rowDrag?.onDragEnd,
-      title: rowDrag?.draggable ? "Click row \xB7 drag to reorder" : void 0,
-      style: {
-        ...rowStyle,
-        ...rowDrag?.draggable ? { cursor: "grab" } : {}
-      },
+      style: rowStyle,
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", gap: row.gap }, children: row.cells.map((cellBlocks, ci) => {
-        const cS = row.columnStyles && row.columnStyles[ci] || {};
+        const cS = getColumnPropsAt(row, ci);
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "div",
           {
@@ -2989,7 +3700,9 @@ function LayoutRow({
                 onDeleteContent,
                 onContextMenu,
                 preview,
-                C
+                C,
+                dragAsRow: rootContentRow && ci === 0,
+                beginRowDrag
               }
             )
           },
@@ -3006,10 +3719,11 @@ var CanvasRow = ({
   selectedRowId,
   selContentMeta: rowSelContentMeta,
   dragOver,
+  draggingRowId,
   C,
   setDragOver,
   handleRowDrop,
-  setDraggingRowId,
+  setRowDrag,
   setSelectedRowId,
   setSelContentId,
   setSelMeta,
@@ -3022,54 +3736,161 @@ var CanvasRow = ({
 }) => {
   const rowSelected = selectedRowId === row.id;
   const rid = (s) => editorId ? `${editorId}-${s}` : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { id: rid(`canvas-row-${row.id}`), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "div",
-      {
-        id: rid(`row-drop-before-${ri}`),
-        onDragOver: (e) => {
-          e.preventDefault();
-          setDragOver(ri);
-        },
-        onDragLeave: () => setDragOver(null),
-        onDrop: (e) => {
-          e.preventDefault();
-          handleRowDrop(ri, e);
-        },
-        style: { height: dragOver === ri ? 24 : 3, background: dragOver === ri ? `${C.accent}25` : "transparent", border: dragOver === ri ? `2px dashed ${C.accent}` : "2px solid transparent", borderRadius: 4, transition: "all .12s", margin: "2px 0" }
+  const dropH = dragOver === ri || dragOver === ri + 1 ? 28 : 10;
+  const rowBodyRef = (0, import_react.useRef)(null);
+  const rootContentRow = isRootContentRow(row);
+  const beginRowDrag = (0, import_react.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData(
+        "application/json",
+        JSON.stringify({ moveRowId: row.id })
+      );
+      setRowDrag(row.id);
+    },
+    [row.id, setRowDrag]
+  );
+  const rowDragOver = (0, import_react.useCallback)(
+    (e) => {
+      if (!draggingRowId || draggingRowId === row.id) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const el = rowBodyRef.current;
+      if (!el) {
+        setDragOver(ri);
+        return;
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: rid(`row-body-${row.id}`), style: { position: "relative", width: "100%", minWidth: 0, paddingLeft: 0, boxSizing: "border-box" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: rid(`row-layout-wrap-${row.id}`), style: { width: "100%", minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      LayoutRow,
-      {
-        editorId,
-        row,
-        selected: rowSelected,
-        setSelectedRowId,
-        onClick: () => {
-          setSelectedRowId(row.id);
-          setSelContentId(null);
-          setSelMeta(null);
-        },
-        selectedContentKey: selContentId,
-        selContentMeta: rowSelContentMeta,
-        onSelectContent: selectContent,
-        onDropContent: dropContent,
-        onDeleteContent: deleteContent,
-        onContextMenu: handleContextMenu,
-        onLayoutContextMenu: handleLayoutContextMenu,
-        rowDrag: {
-          draggable: true,
-          onDragStart: (e) => {
-            e.stopPropagation();
-            setDraggingRowId(row.id);
-          },
-          onDragEnd: () => setDraggingRowId(null)
-        },
-        C
+      const rect = el.getBoundingClientRect();
+      setDragOver(e.clientY < rect.top + rect.height / 2 ? ri : ri + 1);
+    },
+    [draggingRowId, row.id, ri, setDragOver]
+  );
+  const rowDrop = (0, import_react.useCallback)(
+    (e) => {
+      if (!draggingRowId) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const el = rowBodyRef.current;
+      let targetIdx = ri;
+      if (el) {
+        const rect = el.getBoundingClientRect();
+        targetIdx = e.clientY < rect.top + rect.height / 2 ? ri : ri + 1;
       }
-    ) }) })
-  ] });
+      handleRowDrop(targetIdx, e);
+    },
+    [draggingRowId, ri, handleRowDrop]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      id: rid(`canvas-row-${row.id}`),
+      style: { display: "flex", alignItems: "stretch", gap: 0, margin: "2px 0" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            draggable: true,
+            title: "Drag to reorder section",
+            onDragStart: beginRowDrag,
+            onDragEnd: () => setRowDrag(null),
+            onPointerDown: (e) => e.stopPropagation(),
+            onClick: (e) => {
+              e.stopPropagation();
+              setSelectedRowId(row.id);
+              setSelContentId(null);
+              setSelMeta(null);
+            },
+            onContextMenu: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleLayoutContextMenu(e, row.id);
+            },
+            style: {
+              width: 20,
+              flexShrink: 0,
+              cursor: "grab",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: rowSelected ? C.accent : C.muted,
+              fontSize: 12,
+              fontWeight: 700,
+              letterSpacing: -3,
+              userSelect: "none",
+              opacity: rowSelected ? 1 : 0.5
+            },
+            children: "\u22EE\u22EE"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              id: rid(`row-drop-before-${ri}`),
+              onDragOver: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setDragOver(ri);
+              },
+              onDragLeave: () => setDragOver(null),
+              onDrop: (e) => handleRowDrop(ri, e),
+              style: {
+                height: dropH,
+                background: dragOver === ri ? `${C.accent}25` : "transparent",
+                border: dragOver === ri ? `2px dashed ${C.accent}` : "2px solid transparent",
+                borderRadius: 4,
+                transition: "all .12s",
+                boxSizing: "border-box"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              ref: rowBodyRef,
+              id: rid(`row-body-${row.id}`),
+              onDragOver: rowDragOver,
+              onDrop: rowDrop,
+              style: {
+                position: "relative",
+                width: "100%",
+                minWidth: 0,
+                boxSizing: "border-box",
+                outline: draggingRowId && draggingRowId !== row.id && (dragOver === ri || dragOver === ri + 1) ? `2px dashed ${C.accent}` : void 0,
+                outlineOffset: 2,
+                borderRadius: 6
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: rid(`row-layout-wrap-${row.id}`), style: { width: "100%", minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                LayoutRow,
+                {
+                  editorId,
+                  row,
+                  selected: rowSelected,
+                  setSelectedRowId,
+                  onClick: () => {
+                    setSelectedRowId(row.id);
+                    setSelContentId(null);
+                    setSelMeta(null);
+                  },
+                  selectedContentKey: selContentId,
+                  selContentMeta: rowSelContentMeta,
+                  onSelectContent: selectContent,
+                  onDropContent: dropContent,
+                  onDeleteContent: deleteContent,
+                  onContextMenu: handleContextMenu,
+                  onLayoutContextMenu: handleLayoutContextMenu,
+                  rootContentRow,
+                  beginRowDrag,
+                  C
+                }
+              ) })
+            }
+          )
+        ] })
+      ]
+    }
+  );
 };
 
 // src/ReactEmailEditor.tsx
@@ -3150,6 +3971,10 @@ function paddingToCss(pad3, fallback) {
 var FONT_SIZE_PX = [10, 11, 12, 13, 14, 15, 16, 18, 20, 24, 28, 32, 36, 42, 48, 56, 64, 72];
 var LINE_HEIGHT_OPTS = ["1", "1.15", "1.25", "1.5", "1.65", "1.75", "2", "2.5"];
 var LETTER_SPACING_OPTS = ["-0.5px", "0px", "0.5px", "1px", "1.5px", "2px", "3px", "4px"];
+function rgbChannelToHex(n) {
+  const v = Math.max(0, Math.min(255, Math.round(n)));
+  return v.toString(16).padStart(2, "0");
+}
 function hexForColorInput(color) {
   if (!color || typeof color !== "string") return "#000000";
   const c = color.trim();
@@ -3162,8 +3987,34 @@ function hexForColorInput(color) {
     }
     return c.slice(0, 7);
   }
+  const rgb = c.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i);
+  if (rgb) {
+    return `#${rgbChannelToHex(+rgb[1])}${rgbChannelToHex(+rgb[2])}${rgbChannelToHex(+rgb[3])}`;
+  }
   return "#000000";
 }
+function textStyleColorFromEditor(editor) {
+  const ts = editor.getAttributes("textStyle");
+  if (ts.color && String(ts.color).trim()) return String(ts.color).trim();
+  const stored = editor.state.storedMarks;
+  if (stored) {
+    for (const m of stored) {
+      if (m.type.name === "textStyle" && m.attrs.color) {
+        return String(m.attrs.color).trim();
+      }
+    }
+  }
+  const { from, to } = editor.state.selection;
+  if (from === to) return null;
+  const domAt = editor.view.domAtPos(from);
+  let el = domAt.node.nodeType === Node.TEXT_NODE ? domAt.node.parentElement : domAt.node;
+  while (el && el !== editor.view.dom) {
+    const inline = el.style?.color?.trim();
+    if (inline) return inline;
+    el = el.parentElement;
+  }
+  return null;
+}
 function parsePxSize(raw) {
   if (!raw) return "";
   const s = String(raw).trim();
@@ -3230,13 +4081,22 @@ function toolbarIconBtn(C, active) {
 }
 function ToolbarTypographyControls({ editor, C }) {
   const sel = toolbarSelect(C);
-  const ts = editor.getAttributes("textStyle");
+  const { ts, align, textColor } = (0, import_react3.useEditorState)({
+    editor,
+    selector: ({ editor: ed }) => {
+      const attrs = ed.getAttributes("textStyle");
+      return {
+        ts: attrs,
+        align: currentBlockTextAlign(ed),
+        textColor: textStyleColorFromEditor(ed)
+      };
+    }
+  });
   const fontFamily = ts.fontFamily || "";
   const sizeVal = parsePxSize(ts.fontSize);
   const lhVal = normalizeLineHeightAttr(ts.lineHeight);
   const lsVal = normalizeLetterSpacingAttr(ts.letterSpacing);
   const lsSelectValue = LETTER_SPACING_OPTS.includes(lsVal) ? lsVal : lsVal || "";
-  const align = currentBlockTextAlign(editor);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "select",
@@ -3319,9 +4179,10 @@ function ToolbarTypographyControls({ editor, C }) {
       {
         type: "color",
         title: "Text color",
-        value: hexForColorInput(ts.color),
+        value: hexForColorInput(textColor ?? ts.color),
         onChange: (e) => {
-          void editor.chain().focus().setColor(e.target.value).run();
+          const hex = e.target.value;
+          void editor.chain().focus().setColor(hex).run();
         },
         style: {
           width: 28,
@@ -3694,7 +4555,7 @@ function TextRichEditor({
         }
       }),
       import_extension_text_style.TextStyle,
-      import_extension_text_style.Color,
+      import_extension_text_style.Color.configure({ types: ["textStyle"] }),
       import_extension_text_style.FontFamily,
       import_extension_text_style.FontSize,
       import_extension_text_style.LineHeight,
@@ -4871,11 +5732,141 @@ function BlockSurfaceBgInspector({
     ] }) : null
   ] });
 }
+function HtmlBlockRichPanel({
+  block,
+  onChange,
+  C
+}) {
+  const p = block.props;
+  const { IS } = useIS(C);
+  const [mode, setMode] = (0, import_react4.useState)("visual");
+  const [htmlDraft, setHtmlDraft] = (0, import_react4.useState)("");
+  (0, import_react4.useEffect)(() => {
+    setMode("visual");
+  }, [block.id]);
+  const body = normalizeRichHtmlForStorage(typeof block.content === "string" ? block.content : "");
+  const applyHtml = (html) => {
+    const norm = normalizeRichHtmlForStorage(html);
+    onChange({ ...block, content: norm, props: { ...p, content: norm } });
+  };
+  const tabBtn = (active) => ({
+    flex: 1,
+    padding: "7px 10px",
+    borderRadius: 6,
+    border: `1px solid ${C.border}`,
+    background: active ? C.accent : C.surface,
+    color: active ? "#ffffff" : C.text,
+    fontSize: 12,
+    fontWeight: 700,
+    cursor: "pointer"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: "Content", C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          style: tabBtn(mode === "visual"),
+          onClick: () => {
+            if (mode === "html") applyHtml(htmlDraft);
+            setMode("visual");
+          },
+          children: "Rich text"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          style: tabBtn(mode === "html"),
+          onClick: () => {
+            setHtmlDraft(body);
+            setMode("html");
+          },
+          children: "HTML"
+        }
+      )
+    ] }),
+    mode === "visual" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      TextRichEditor,
+      {
+        value: body,
+        onChange: applyHtml,
+        typography: {
+          fontSize: p.fontSize,
+          color: p.color,
+          align: p.align,
+          fontFamily: p.fontFamily,
+          lineHeight: p.lineHeight,
+          letterSpacing: p.letterSpacing,
+          padding: p.padding
+        },
+        placeholder: "Write your rich content\u2026",
+        headerTitle: "Rich editor",
+        C
+      },
+      block.id
+    ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "textarea",
+        {
+          spellCheck: false,
+          value: htmlDraft,
+          onChange: (e) => setHtmlDraft(e.target.value),
+          placeholder: "<p>Your HTML\u2026</p>",
+          style: {
+            ...IS,
+            minHeight: 220,
+            resize: "vertical",
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+            fontSize: 12,
+            lineHeight: 1.45
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { fontSize: 10, color: C.muted, lineHeight: 1.45 }, children: [
+        "Raw HTML. Switch to ",
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: "Rich text" }),
+        " to apply and preview in the visual editor."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => applyHtml(htmlDraft),
+          style: {
+            alignSelf: "flex-start",
+            background: C.surface,
+            border: `1px solid ${C.border}`,
+            color: C.accent,
+            borderRadius: 5,
+            cursor: "pointer",
+            fontSize: 11,
+            padding: "6px 12px",
+            fontWeight: 600
+          },
+          children: "Apply (normalize)"
+        }
+      )
+    ] })
+  ] }) });
+}
 function ContentBlockEditor({ block, onChange, onClose, onUpload, C }) {
   const { IS, CI } = useIS(C);
   const imageFileRef = (0, import_react4.useRef)(null);
   const p = block.props;
-  const set = (k, v) => onChange({ ...block, props: { ...p, [k]: v } });
+  const set = (k, v) => {
+    if (block.type === "html" && k === "content") {
+      onChange({ ...block, content: v, props: { ...p, content: v } });
+      return;
+    }
+    if (block.type === "html") {
+      const body = typeof block.content === "string" ? block.content : typeof p.content === "string" ? p.content : "";
+      onChange({ ...block, props: { ...p, [k]: v, content: body } });
+      return;
+    }
+    onChange({ ...block, props: { ...p, [k]: v } });
+  };
   const Num = (k, lbl, mn = 0, mx = 300) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: lbl, C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "number", style: IS, value: p[k] ?? 0, min: mn, max: mx, onChange: (e) => set(k, +e.target.value) }) });
   const Txt = (k, lbl, multi = false) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: lbl, C, children: multi ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("textarea", { style: { ...IS, minHeight: 68, resize: "vertical" }, value: p[k] || "", onChange: (e) => set(k, e.target.value) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "text", style: IS, value: p[k] || "", onChange: (e) => set(k, e.target.value) }) });
   const Col = (k, lbl) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: lbl, C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
@@ -4969,25 +5960,7 @@ function ContentBlockEditor({ block, onChange, onClose, onUpload, C }) {
       ] });
     case "html":
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          TextRichEditor,
-          {
-            value: normalizeRichHtmlForStorage(p.content),
-            onChange: (html) => set("content", html),
-            typography: {
-              fontSize: p.fontSize,
-              color: p.color,
-              align: p.align,
-              fontFamily: p.fontFamily,
-              lineHeight: p.lineHeight,
-              letterSpacing: p.letterSpacing,
-              padding: p.padding
-            },
-            placeholder: "Write your rich content\u2026",
-            headerTitle: "Rich editor",
-            C
-          }
-        ) }, block.id),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HtmlBlockRichPanel, { block, onChange, 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: (pad3) => set("padding", pad3), C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarginEditor, { value: p.margin, onChange: (m) => set("margin", m), C })
@@ -5007,8 +5980,25 @@ function ContentBlockEditor({ block, onChange, onClose, onUpload, C }) {
           "Object position"
         ] }), C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("select", { style: IS, value: p.objectPosition || "center", onChange: (e) => set("objectPosition", e.target.value), children: ["center", "top", "bottom", "left", "right", "top left", "top right", "bottom left", "bottom right"].map((v) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: v, children: v }, v)) }) }),
         Txt("alt", "Alt Text"),
-        Txt("link", "Link URL"),
-        Sel("linkTarget", "Open In", ["_blank", "_self"]),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: "Link image", C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: 7, cursor: "pointer" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              checked: !!(p.linkEnabled ?? (p.link && String(p.link).trim())),
+              onChange: (e) => {
+                if (e.target.checked) set("linkEnabled", true);
+                else onChange({ ...block, props: { ...p, linkEnabled: false, link: "" } });
+              },
+              style: { width: 15, height: 15, accentColor: C.accent }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: C.muted, fontSize: 12 }, children: p.linkEnabled ?? (p.link && String(p.link).trim()) ? "On" : "Off" })
+        ] }) }),
+        p.linkEnabled ?? (p.link && String(p.link).trim()) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          Txt("link", "Link URL"),
+          Sel("linkTarget", "Open In", ["_blank", "_self"])
+        ] }) : null,
         /* @__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 }),
@@ -5358,7 +6348,7 @@ function ContentBlockEditor({ block, onChange, onClose, onUpload, C }) {
             bgPosition: p.bgPosition ?? "center",
             bgGradient: p.bgGradient ?? null,
             cells: p.cells || [],
-            columnStyles: p.columnStyles
+            columns: getColumns(p)
           },
           onChange: (row) => onChange({
             ...block,
@@ -5376,7 +6366,7 @@ function ContentBlockEditor({ block, onChange, onClose, onUpload, C }) {
               bgGradient: row.bgGradient,
               ratios: [...row.ratios || [1]],
               cells: row.cells || [],
-              columnStyles: row.columnStyles
+              columns: row.columns ?? getColumns(row)
             }
           }),
           onClose,
@@ -5395,8 +6385,8 @@ function inferLayoutRowBgStep(r) {
   if (String(r.bgColor || "").trim()) return "solid";
   return null;
 }
-function inferColumnBgStep(columnStyles, selCol) {
-  const cs = (columnStyles || {})[selCol] || {};
+function inferColumnBgStep(container, selCol) {
+  const cs = getColumnPropsAt(container, selCol);
   if (cs.bgGradient) return "gradient";
   if (String(cs.bgImage || "").trim()) return "image";
   if (String(cs.bgColor || "").trim()) return "solid";
@@ -5408,6 +6398,10 @@ function LayoutRowEditor({
   onClose,
   onUpload,
   initialCol = null,
+  rowIndex = -1,
+  rowCount = 1,
+  onMoveUp,
+  onMoveDown,
   C,
   /** Shown under the inspector header when editing a Layout block */
   customizationHint
@@ -5420,8 +6414,8 @@ function LayoutRowEditor({
   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]
+    () => inferColumnBgStep(row, selCol),
+    [row.columns, row.columnStyles, selCol]
   );
   const rowBgUiStep = inferredRowBg ?? rowBgPickerMode;
   const colBgUiStep = inferredColBg ?? colBgPickerMode;
@@ -5460,13 +6454,12 @@ function LayoutRowEditor({
     onChange({ ...row, cols: n, preset: "custom", cells, ratios });
   };
   const updCol = (i, upd) => {
-    const styles = { ...row.columnStyles || {} };
-    styles[i] = { ...styles[i] || {}, ...upd };
-    set("columnStyles", styles);
+    const columns = patchColumnPropsAt(row, i, upd);
+    onChange(withColumnsOnly(row, columns));
   };
   const setColBgMode = (mode) => {
     setColBgPickerMode(mode);
-    const cs = (row.columnStyles || {})[selCol] || {};
+    const cs = getColumnPropsAt(row, selCol);
     if (mode === "solid") {
       updCol(selCol, { bgGradient: null, bgImage: "" });
       return;
@@ -5498,7 +6491,51 @@ function LayoutRowEditor({
       set("bgGradient", { angle: 135, colors: ["#0ea5e9", "#6366f1", "#ec4899"], stops: [0, 50, 100] });
     }
   };
+  const canMoveUp = rowIndex > 0;
+  const canMoveDown = rowIndex >= 0 && rowIndex < rowCount - 1;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    onMoveUp && onMoveDown ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: 6, marginBottom: 12 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          disabled: !canMoveUp,
+          onClick: onMoveUp,
+          style: {
+            flex: 1,
+            padding: "8px 10px",
+            fontSize: 12,
+            fontWeight: 600,
+            borderRadius: 8,
+            border: `1px solid ${C.border}`,
+            background: canMoveUp ? C.surface : C.canvas,
+            color: canMoveUp ? C.text : C.muted,
+            cursor: canMoveUp ? "pointer" : "not-allowed"
+          },
+          children: "\u2191 Move section up"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          disabled: !canMoveDown,
+          onClick: onMoveDown,
+          style: {
+            flex: 1,
+            padding: "8px 10px",
+            fontSize: 12,
+            fontWeight: 600,
+            borderRadius: 8,
+            border: `1px solid ${C.border}`,
+            background: canMoveDown ? C.surface : C.canvas,
+            color: canMoveDown ? C.text : C.muted,
+            cursor: canMoveDown ? "pointer" : "not-allowed"
+          },
+          children: "\u2193 Move section down"
+        }
+      )
+    ] }) : null,
     customizationHint ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
@@ -5648,15 +6685,15 @@ function LayoutRowEditor({
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             ColorSwatchGrid,
             {
-              value: (row.columnStyles || {})[selCol]?.bgColor || "",
+              value: getColumnPropsAt(row, selCol)?.bgColor || "",
               C,
               compact: true,
               onPick: (hex) => updCol(selCol, { bgColor: hex === "#ffffff" ? "" : hex })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: 5, alignItems: "center" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "color", style: CI, value: (row.columnStyles || {})[selCol]?.bgColor || "#ffffff", onChange: (e) => updCol(selCol, { bgColor: e.target.value === "#ffffff" ? "" : e.target.value }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "text", style: { ...IS, width: 120 }, placeholder: "transparent", value: (row.columnStyles || {})[selCol]?.bgColor || "", onChange: (e) => updCol(selCol, { bgColor: e.target.value }) })
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "color", style: CI, value: getColumnPropsAt(row, selCol)?.bgColor || "#ffffff", onChange: (e) => updCol(selCol, { bgColor: e.target.value === "#ffffff" ? "" : e.target.value }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "text", style: { ...IS, width: 120 }, placeholder: "transparent", value: getColumnPropsAt(row, selCol)?.bgColor || "", onChange: (e) => updCol(selCol, { bgColor: e.target.value }) })
           ] })
         ] }) }) : null,
         colBgUiStep === "image" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
@@ -5664,7 +6701,7 @@ function LayoutRowEditor({
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.Image, { size: 13, strokeWidth: 2.25, "aria-hidden": true }),
             "bg image"
           ] }), C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "text", style: IS, placeholder: "https://\u2026", value: (row.columnStyles || {})[selCol]?.bgImage || "", onChange: (e) => updCol(selCol, { bgImage: e.target.value }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "text", style: IS, placeholder: "https://\u2026", value: getColumnPropsAt(row, selCol)?.bgImage || "", onChange: (e) => updCol(selCol, { bgImage: e.target.value }) }),
             onUpload && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { marginTop: 0 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "input",
@@ -5702,18 +6739,18 @@ function LayoutRowEditor({
             ] })
           ] }) }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: 8, marginBottom: 12 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: "fit", C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("select", { style: IS, value: (row.columnStyles || {})[selCol]?.bgSize || "cover", onChange: (e) => updCol(selCol, { bgSize: e.target.value }), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: "fit", C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("select", { style: IS, value: getColumnPropsAt(row, selCol)?.bgSize || "cover", onChange: (e) => updCol(selCol, { bgSize: e.target.value }), children: [
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "auto", children: "Auto" }),
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "cover", children: "Cover" }),
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "contain", children: "Contain" })
             ] }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: "repeat", C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("select", { style: IS, value: (row.columnStyles || {})[selCol]?.bgRepeat || "no-repeat", onChange: (e) => updCol(selCol, { bgRepeat: e.target.value }), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: "repeat", C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("select", { style: IS, value: getColumnPropsAt(row, selCol)?.bgRepeat || "no-repeat", onChange: (e) => updCol(selCol, { bgRepeat: e.target.value }), children: [
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "no-repeat", children: "No repeat" }),
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "repeat", children: "Repeat" }),
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "repeat-x", children: "Repeat X" }),
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "repeat-y", children: "Repeat Y" })
             ] }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: "align", C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("select", { style: IS, value: (row.columnStyles || {})[selCol]?.bgPosition || "center", onChange: (e) => updCol(selCol, { bgPosition: e.target.value }), children: POS_OPTS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: p, children: p }, p)) }) }) })
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: "align", C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("select", { style: IS, value: getColumnPropsAt(row, selCol)?.bgPosition || "center", onChange: (e) => updCol(selCol, { bgPosition: e.target.value }), children: POS_OPTS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: p, children: p }, p)) }) }) })
           ] })
         ] }) : null,
         colBgUiStep === "gradient" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("details", { open: true, style: { marginBottom: 12 }, children: [
@@ -5722,15 +6759,15 @@ function LayoutRowEditor({
             DynamicGradientField,
             {
               label: "gradient",
-              value: (row.columnStyles || {})[selCol]?.bgGradient,
+              value: getColumnPropsAt(row, selCol)?.bgGradient,
               onChange: (g) => updCol(selCol, { bgGradient: g }),
               defaults: { colors: ["#0ea5e9", "#6366f1", "#ec4899"] },
               C
             }
           ) })
         ] }) : null,
-        /* @__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 })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaddingEditor, { label: "Column padding", value: getColumnPropsAt(row, selCol).padding, onChange: (pad3) => updCol(selCol, { padding: pad3 }), C }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BorderRadiusEditor, { label: "Column radius", value: getColumnPropsAt(row, selCol).borderRadius, onChange: (br) => updCol(selCol, { borderRadius: br }), C })
       ] })
     ] })
   ] });
@@ -6521,6 +7558,11 @@ var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
     const [selContentMeta, setSelMeta] = (0, import_react8.useState)(null);
     const [dragOver, setDragOver] = (0, import_react8.useState)(null);
     const [draggingRowId, setDraggingRowId] = (0, import_react8.useState)(null);
+    const draggingRowIdRef = (0, import_react8.useRef)(null);
+    const setRowDrag = (0, import_react8.useCallback)((id) => {
+      draggingRowIdRef.current = id;
+      setDraggingRowId(id);
+    }, []);
     const [history, setHistory] = (0, import_react8.useState)([]);
     const [future, setFuture] = (0, import_react8.useState)([]);
     const [showPreviewModal, setShowPreview] = (0, import_react8.useState)(false);
@@ -6555,10 +7597,17 @@ var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
     });
     const [pageBgUiStep, setPageBgUiStep] = (0, import_react8.useState)(null);
     const [contentBgUiStep, setContentBgUiStep] = (0, import_react8.useState)(null);
+    const pageBgLastSolidRef = (0, import_react8.useRef)("#f1f5f9");
+    const pageBgIsOff = !String(settings.bgColor ?? "").trim() && !String(settings.bgImage ?? "").trim() && !settings.bgGradient;
     const applyPageBgMode = (mode) => {
       setPageBgUiStep(mode);
       if (mode === "solid") {
-        setSettings((s) => ({ ...s, bgGradient: null, bgImage: "" }));
+        setSettings((s) => {
+          const next = { ...s, bgGradient: null, bgImage: "" };
+          const raw = typeof next.bgColor === "string" ? next.bgColor.trim() : "";
+          if (!raw) next.bgColor = pageBgLastSolidRef.current || "#f1f5f9";
+          return next;
+        });
         return;
       }
       if (mode === "image") {
@@ -6668,7 +7717,7 @@ var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
       return () => window.removeEventListener("keydown", handler);
     }, [rows, history, future, selContentMeta]);
     const buildApi = (0, import_react8.useCallback)(() => ({
-      loadJson(input) {
+      loadJson(input, options2) {
         setJsonLoading(true);
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
@@ -6681,7 +7730,14 @@ var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
                   return;
                 }
               }
-              const norm = normalizeEmailDesignInput(parsed);
+              const coerced = coerceEmailDocumentInput(parsed);
+              if (options2?.mode === "append") {
+                const extra = emailDocumentToEditorRows(coerced ?? parsed);
+                if (!extra?.length) return;
+                setRows((prev) => [...prev, ...extra]);
+                return;
+              }
+              const norm = normalizeEmailDesignInput(coerced ?? parsed);
               if (!norm) return;
               setRows(norm.rows);
               const ns = norm.settings;
@@ -6718,6 +7774,8 @@ var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
     }, []);
     const handleRowDrop = (targetIdx, e) => {
       if (e) {
+        e.preventDefault();
+        e.stopPropagation();
         try {
           const data = JSON.parse(e.dataTransfer.getData("application/json") || "{}");
           if (data.layoutPresetKey) {
@@ -6736,18 +7794,28 @@ var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
         } catch {
         }
       }
-      if (draggingRowId) {
+      const moveId = draggingRowIdRef.current ?? draggingRowId ?? (() => {
+        if (!e) return null;
+        try {
+          const data = JSON.parse(e.dataTransfer.getData("application/json") || "{}");
+          return typeof data.moveRowId === "string" ? data.moveRowId : null;
+        } catch {
+          return null;
+        }
+      })();
+      if (moveId) {
         mutate((prev) => {
-          const fi = prev.findIndex((r) => r.id === draggingRowId);
+          const fi = prev.findIndex((r) => r.id === moveId);
           if (fi === -1) return prev;
           const next = [...prev];
           const [m] = next.splice(fi, 1);
-          next.splice(targetIdx > fi ? targetIdx - 1 : targetIdx, 0, m);
+          const insertAt = targetIdx > fi ? targetIdx - 1 : targetIdx;
+          next.splice(Math.max(0, Math.min(insertAt, next.length)), 0, m);
           return next;
         });
       }
       setDragOver(null);
-      setDraggingRowId(null);
+      setRowDrag(null);
     };
     const addRow = (preset) => mutate((prev) => [...prev, makeLayoutRow(preset)]);
     const deleteRow = (id) => {
@@ -6877,8 +7945,27 @@ var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
         }
       }
     };
+    const rootContentPreset = LAYOUT_PRESETS.find((p) => p.cols === 1) ?? LAYOUT_PRESETS[0];
+    const insertRootContentBlock = (contentType) => {
+      const { row: newRow, block: nb } = makeRootContentRow(contentType, rootContentPreset);
+      const anchorRowId = selContentMeta?.rowId ?? selectedRowId ?? null;
+      mutate((prev) => {
+        if (anchorRowId) {
+          const i = prev.findIndex((r) => r.id === anchorRowId);
+          if (i >= 0) {
+            const next = [...prev];
+            next.splice(i + 1, 0, newRow);
+            return next;
+          }
+        }
+        return [...prev, newRow];
+      });
+      setSelectedRowId(null);
+      setSelContentId(nb.id);
+      setSelMeta({ rowId: newRow.id, cellIdx: 0, contentIdx: 0 });
+    };
     const insertBlockFromLibrary = (contentType) => {
-      if (!rows.length) return;
+      const isLayoutType = contentType === "layout" || contentType === "nestedRow";
       if (selContentMeta?.inner) {
         const { rowId, cellIdx, contentIdx, inner } = selContentMeta;
         dropContent(rowId, cellIdx, {
@@ -6889,30 +7976,26 @@ var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
         });
         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 (isLayoutType) {
+        if (selContentMeta?.rowId && typeof selContentMeta.cellIdx === "number" && selContentMeta.cellIdx >= 0 && typeof selContentMeta.contentIdx === "number" && selContentMeta.contentIdx >= 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;
+          }
         }
+        addRow(rootContentPreset);
+        return;
       }
-      if (selectedRowId) {
-        const targetRow = rows.find((r) => r.id === selectedRowId);
-        if (targetRow) {
-          dropContent(targetRow.id, 0, {
-            kind: "new",
-            contentType,
-            insertAt: null
-          });
-          return;
-        }
+      if (!rows.length) {
+        insertRootContentBlock(contentType);
+        return;
       }
-      const main = rows[0];
-      dropContent(main.id, 0, { kind: "new", contentType, insertAt: null });
+      insertRootContentBlock(contentType);
     };
     const deleteContent = (rowId, cellIdx, ci, inner = null) => {
       if (!inner) {
@@ -7507,6 +8590,7 @@ var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
                         e.preventDefault();
                         try {
                           const data = JSON.parse(e.dataTransfer.getData("application/json") || "{}");
+                          if (data.moveRowId) return;
                           if (data.layoutPresetKey) {
                             const preset = LAYOUT_PRESETS.find((p) => p.key === data.layoutPresetKey);
                             if (preset) mutate((prev) => [...prev, makeLayoutRow(preset)]);
@@ -7561,6 +8645,7 @@ var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
                                 e.stopPropagation();
                                 try {
                                   const data = JSON.parse(e.dataTransfer.getData("application/json") || "{}");
+                                  if (data.moveRowId) return;
                                   if (data.contentType && typeof data.contentType === "string") {
                                     insertBlockFromLibrary(data.contentType);
                                   }
@@ -7582,10 +8667,11 @@ var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
                                     selectedRowId,
                                     selContentMeta,
                                     dragOver,
+                                    draggingRowId,
                                     C,
                                     setDragOver,
                                     handleRowDrop,
-                                    setDraggingRowId,
+                                    setRowDrag,
                                     setSelectedRowId,
                                     setSelContentId,
                                     setSelMeta,
@@ -7603,14 +8689,20 @@ var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
                                     id: eid("canvas-row-drop-end"),
                                     onDragOver: (e) => {
                                       e.preventDefault();
+                                      e.stopPropagation();
                                       setDragOver(rows.length);
                                     },
                                     onDragLeave: () => setDragOver(null),
-                                    onDrop: (e) => {
-                                      e.preventDefault();
-                                      handleRowDrop(rows.length, e);
-                                    },
-                                    style: { height: dragOver === rows.length ? 24 : 3, background: dragOver === rows.length ? `${C.accent}25` : "transparent", border: dragOver === rows.length ? `2px dashed ${C.accent}` : "2px solid transparent", borderRadius: 4, transition: "all .12s", margin: "2px 0" }
+                                    onDrop: (e) => handleRowDrop(rows.length, e),
+                                    style: {
+                                      height: dragOver === rows.length ? 28 : 10,
+                                      background: dragOver === rows.length ? `${C.accent}25` : "transparent",
+                                      border: dragOver === rows.length ? `2px dashed ${C.accent}` : "2px solid transparent",
+                                      borderRadius: 4,
+                                      transition: "all .12s",
+                                      margin: "2px 0",
+                                      boxSizing: "border-box"
+                                    }
                                   }
                                 )
                               ]
@@ -7722,6 +8814,10 @@ var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
                           onClose: () => setSelectedRowId(null),
                           onUpload,
                           initialCol: selContentMeta?.rowId === selectedRowId ? selContentMeta.cellIdx : null,
+                          rowIndex: rows.findIndex((r) => r.id === selectedRowId),
+                          rowCount: rows.length,
+                          onMoveUp: () => selectedRow && moveRow(selectedRow.id, -1),
+                          onMoveDown: () => selectedRow && moveRow(selectedRow.id, 1),
                           C
                         }
                       ) })
@@ -7898,7 +8994,40 @@ var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
                             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("summary", { style: railSectionSummary, children: "Background" }),
                             /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: railSectionBody, children: [
                               /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize: 10, color: C.muted, fontWeight: 800, textTransform: "uppercase", letterSpacing: ".06em", marginBottom: 6 }, children: "Page background" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BgModeButtons, { value: pageBgUiStep, onChange: applyPageBgMode, C }),
+                              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer", userSelect: "none" }, children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                                  "input",
+                                  {
+                                    type: "checkbox",
+                                    checked: pageBgIsOff,
+                                    onChange: (e) => {
+                                      const off = e.target.checked;
+                                      if (off) {
+                                        const cur = String(settings.bgColor ?? "").trim();
+                                        if (cur) pageBgLastSolidRef.current = cur;
+                                        setPageBgUiStep(null);
+                                        setSettings((s) => ({ ...s, bgColor: "", bgImage: "", bgGradient: null }));
+                                      } else {
+                                        setPageBgUiStep("solid");
+                                        setSettings((s) => ({
+                                          ...s,
+                                          bgColor: pageBgLastSolidRef.current || "#f1f5f9"
+                                        }));
+                                      }
+                                    },
+                                    style: { width: 15, height: 15, accentColor: C.accent, cursor: "pointer" }
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { color: C.muted, fontSize: 12 }, children: "No page background" })
+                              ] }) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                                BgModeButtons,
+                                {
+                                  value: pageBgIsOff ? null : pageBgUiStep,
+                                  onChange: applyPageBgMode,
+                                  C
+                                }
+                              ),
                               pageBgUiStep === null ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize: 11, color: C.muted, marginBottom: 12, lineHeight: 1.45 }, children: "Choose Color, Gradient, or Image \u2014 then the matching settings appear below." }) : null,
                               pageBgUiStep === "solid" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                                 ColorField,
@@ -7908,7 +9037,10 @@ var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
                                     "bg color"
                                   ] }),
                                   value: settings.bgColor,
-                                  onChange: (v) => setSettings((s) => ({ ...s, bgColor: v })),
+                                  onChange: (v) => {
+                                    pageBgLastSolidRef.current = v;
+                                    setSettings((s) => ({ ...s, bgColor: v }));
+                                  },
                                   placeholder: "#f1f5f9",
                                   C
                                 }
@@ -8149,81 +9281,18 @@ var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
     );
   }
 );
-var ReactEmailEditor2 = Object.assign(ReactEmailEditorComponent, { jsonToHtml });
-
-// 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;
-}
+var ReactEmailEditor2 = Object.assign(ReactEmailEditorComponent, { jsonToHtml, htmlToJson });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   EmailPreviewModal,
   ReactEmailEditor,
   base64ToUtf8,
+  canonicalizeEmailDocument,
+  coerceEmailDocumentInput,
   emailPreviewDevices,
   extractHtmlForDesign,
   htmlToEmailDesignTemplate,
+  htmlToJson,
   jsonToHtml,
   utf8ToBase64
 });