@seliseblocks/mailcraft 0.2.8 → 0.2.9

package/src/core/import-html.js

@@ -150,6 +150,43 @@ function applyBgImage(rows, el) {
   return rows;
 }
 
+/**
+ * A wrapper that paints one background image is one visual band: builders
+ * (Beefree, Stripo) write a hero section as `table.row[background-image]`
+ * holding a single-column stack of per-block tables, and letting the generic
+ * walk turn each block into its own row stamped the image onto every one --
+ * so the export re-drew the hero's top slice once per block instead of one
+ * image flowing behind the section. Folds those rows back into a single row,
+ * moving each row's padding onto its blocks (same convention as the
+ * block-table unwrap in `blocksFromNodes`). Deliberately conservative: only
+ * single-column rows with no styling of their own (a differing background,
+ * frame or image on a row is a real band boundary) are merged, so everything
+ * that isn't the hero shape walks exactly as before.
+ */
+function mergeBandRows(rows, el) {
+  if (rows.length < 2 || !bgImageOf(el)) return rows;
+  const bg0 = rows[0].props.bg || '';
+  const plain = rows.every((r) => r.cols.length === 1
+    && !r.props.bgImage && !r.props.border && !r.props.radius && !r.props.shadow
+    && (r.props.bg || '') === bg0);
+  if (!plain) return rows;
+  const merged = mkRow([100]);
+  merged.props.py = 0; merged.props.px = 0; merged.props.gap = 0;
+  if (bg0) merged.props.bg = bg0;
+  merged.cols[0].blocks = rows.reduce((acc, r) => {
+    const padded = r.props.py || r.props.px || r.props.pt !== undefined;
+    r.cols[0].blocks.forEach((b) => {
+      if (padded && b.type !== 'button' && 'py' in b.props) {
+        b.props.py = r.props.py;
+        if ('px' in b.props) b.props.px = r.props.px;
+      }
+      acc.push(b);
+    });
+    return acc;
+  }, []);
+  return merged.cols[0].blocks.length ? [merged] : rows;
+}
+
 /** Padding read from the longhands, which are populated by the `padding` shorthand too -- but not vice versa: builders that write `padding-top/-left/...` individually (Beefree et al.) read back an empty `style.padding`, which is how every one of their cells imported with zero padding. Carries the exact per-side values plus the averaged py/px pair for consumers that only have a pair to store. */
 function paddingOf(st) {
   if (!st) return null;
@@ -415,15 +452,29 @@ function classifyHeading(el) {
   const st = el.style;
   const over = { text: (el.textContent || '').trim(), level: el.tagName.toLowerCase() };
   const size = fontPx(st.fontSize); if (size) over.size = size;
-  if (st.textAlign) over.align = st.textAlign;
-  if (st.color) over.color = st.color;
+  // Color and alignment inherit in CSS, and hero sections declare them on
+  // the section `<td>` -- a white heading over a dark photo whose color
+  // lived on the cell imported in the default dark ink and vanished into
+  // the image. Own values still win; the walk up only fills the gaps,
+  // exactly like the text-run path.
+  const align = st.textAlign || inheritedStyle(el.parentElement, 'textAlign');
+  if (align) over.align = align;
+  const color = st.color || inheritedStyle(el.parentElement, 'color');
+  if (color) over.color = hexOf(color);
   if (st.fontWeight) over.weight = st.fontWeight;
   return blk('heading', over);
 }
 
 function classifyList(el) {
   if (el.tagName !== 'UL' && el.tagName !== 'OL') return null;
-  const items = Array.from(el.children).filter((c) => c.tagName === 'LI').map((li) => li.innerHTML.trim());
+  // Through the same whitelist as a text run: this was the one classifier
+  // that carried raw source innerHTML into props, so classes, ids and event
+  // handlers (`onerror` on an <img> in a list item) rode into the canvas DOM
+  // and the export while every other path stripped them. The newline swap is
+  // because `items` is a one-fragment-per-line string -- a linebreak inside a
+  // source <li> would otherwise split it into two items on render.
+  const items = Array.from(el.children).filter((c) => c.tagName === 'LI')
+    .map((li) => cleanImportHtml(li.innerHTML).replace(/\n/g, ' '));
   if (!items.length) return null;
   return blk('list', { items: items.join('\n'), ordered: el.tagName === 'OL' });
 }
@@ -539,10 +590,30 @@ function blocksFromNodes(nodes) {
   const out = [];
   let buf = [];
   let bufFirstEl = null;
+  // The parent of a leading bare text node. A run with no element of its own
+  // (`<td style="font-size:30px;...">{{Code}}</td>`) still has real
+  // typography -- it lives on the ancestors, and with no bufFirstEl the
+  // inheritedStyle reads below were skipped wholesale, so the run imported
+  // at the theme default (a 30px/800 verification code became 16px plain).
+  let bufTextEl = null;
   const flush = () => {
     const html = cleanImportHtml(buf.join(''));
-    if (html) {
+    // A run with nothing visible in it -- no text beyond whitespace/hair
+    // spaces, no image or line break (an `<nbsp;>` still counts as a blank
+    // line someone wrote) -- is markup residue (`<p style="margin:0"></p>`),
+    // not content; as a block it rendered as a phantom padded row.
+    const visible = html && (/<(img|br|hr)\b/i.test(html)
+      || html.replace(/<[^>]*>/g, '').replace(/[ \t\r\n\u2009\u200a\u200b]/g, '') !== '');
+    if (visible) {
       const over = { html };
+      if (!bufFirstEl && bufTextEl) {
+        const size = fontPx(inheritedStyle(bufTextEl, 'fontSize')); if (size) over.size = size;
+        const color = inheritedStyle(bufTextEl, 'color'); if (color) over.color = hexOf(color);
+        over.align = textAlignOf(bufTextEl);
+        const weight = inheritedStyle(bufTextEl, 'fontWeight'); if (weight) over.weight = weight;
+        const lh = lineHeightRatio(inheritedStyle(bufTextEl, 'lineHeight'), size);
+        if (lh) over.lh = lh;
+      }
       if (bufFirstEl) {
         // The block's *base* style: the first buffered element when it's a
         // block-level thing (a styled <p>/<div> speaks for the run), else its
@@ -568,7 +639,7 @@ function blocksFromNodes(nodes) {
         ) { baseEl = baseEl.firstElementChild; if (!runPad) runPad = paddingOf(baseEl.style); }
         if (runPad) { over.py = runPad.py; over.px = runPad.px; }
         const size = fontPx(inheritedStyle(baseEl, 'fontSize')); if (size) over.size = size;
-        const color = inheritedStyle(baseEl, 'color'); if (color) over.color = color;
+        const color = inheritedStyle(baseEl, 'color'); if (color) over.color = hexOf(color);
         over.align = textAlignOf(baseEl);
         const weight = inheritedStyle(baseEl, 'fontWeight'); if (weight) over.weight = weight;
         const lh = lineHeightRatio(inheritedStyle(baseEl, 'lineHeight'), size);
@@ -576,13 +647,16 @@ function blocksFromNodes(nodes) {
       }
       out.push(blk('text', over));
     }
-    buf = []; bufFirstEl = null;
+    buf = []; bufFirstEl = null; bufTextEl = null;
   };
   nodes.forEach((n) => {
     if (n.nodeType === 3) {
       const markers = logicMarkersOf(n.textContent);
       if (markers) { flush(); markers.forEach((mb) => out.push(mb)); return; }
-      if (n.textContent && n.textContent.trim()) buf.push(escapeText(n.textContent));
+      if (n.textContent && n.textContent.trim()) {
+        if (!bufFirstEl && !bufTextEl) bufTextEl = n.parentElement;
+        buf.push(escapeText(n.textContent));
+      }
       return;
     }
     if (n.nodeType !== 1) return;
@@ -1045,7 +1119,10 @@ function rowsFromContentTable(table) {
     // outer wrapper around all columns. When bgSource IS cells[0] (flat rows),
     // falling back to it would re-promote the first card's color to the row.
     const outerBg = cells.indexOf(bgSource) > -1 ? '' : bgOf(bgSource);
-    const bg = (cellsUniform && cellBg) || outerBg || bgOf(table);
+    // The tr between the cells and the table carries the legacy per-row
+    // `bgcolor` old-school templates still set; it sits between the two in
+    // specificity.
+    const bg = (cellsUniform && cellBg) || bgOf(tr) || outerBg || bgOf(table);
     if (bg) row.props.bg = bg;
     // Differently-styled cells become per-column styling: each column keeps
     // its own background/radius/padding (the pastel-cards pattern).
@@ -1202,7 +1279,7 @@ function collectRows(nodes) {
     }
     if (n.nodeType === 1 && (n.tagName === 'DIV' || n.tagName === 'CENTER') && looksLikeContainer(n) && !classifyNode(unwrapBoxDiv(n))) {
       flushBuf();
-      const inner = collectRows(Array.from(n.childNodes));
+      const inner = mergeBandRows(collectRows(Array.from(n.childNodes)), n);
       rows.push(...applyBgImage(applyFrame(applyPad(applyBg(inner, bgOf(n)), padOf(n)), n), n));
       return;
     }
@@ -1243,11 +1320,37 @@ function collectRows(nodes) {
           rows.push(row);
           return;
         }
-        const inner = collectRows(Array.from(td.childNodes));
+        // The other table-email rule idiom: a content-free cell whose only
+        // drawing is a `border-top` (Beefree's `td.divider_inner`, usually in
+        // a width="20%" inner table). As a text run it imported as a junk row
+        // holding one hair space; recognized, it is the divider it draws.
+        const dSides = borderSidesOf(td.style);
+        if (dSides.sides.top > 0 && dSides.sides.top <= 10
+          && !dSides.sides.right && !dSides.sides.bottom && !dSides.sides.left
+          && !bgOf(td) && !bgImageOf(td)
+          && !Array.from(td.children).some((c) => c.tagName !== 'SPAN' && c.tagName !== 'BR')
+          && !(td.textContent || '').replace(/\s/g, '')) {
+          const dw = String(n.getAttribute('width') || n.style.width || '');
+          const row = mkRow([100]);
+          row.props.py = 0; row.props.px = 0; row.props.gap = 0;
+          row.cols[0].blocks = [blk('divider', {
+            thickness: dSides.sides.top,
+            lineStyle: borderStyleOf(td.style),
+            color: borderColorOf(td.style) || '#d9dade',
+            width: dw.endsWith('%') ? PX(dw) : 100,
+          })];
+          rows.push(row);
+          return;
+        }
+        const inner = mergeBandRows(mergeBandRows(collectRows(Array.from(td.childNodes)), td), n);
         // Frame styles live on the td for some builders and on the table
         // itself for others (`table.row-content` carries the card border) --
         // applyFrame fills only what's still unset, so trying both is safe.
-        rows.push(...applyBgImage(applyBgImage(applyFrame(applyFrame(applyPad(applyBg(inner, bgOf(n) || bgOf(td)), padOf(td) || padOf(n) || cellPadOf(n)), td), n), td), n));
+        // The td is the more specific background-color source -- a dark hero
+        // cell inside a white content table keeps its own color, not the
+        // wrapper's (the image already reads td-first via the applyBgImage
+        // order). The tr between them carries the legacy per-row bgcolor.
+        rows.push(...applyBgImage(applyBgImage(applyFrame(applyFrame(applyPad(applyBg(inner, bgOf(td) || bgOf(tr) || bgOf(n)), padOf(td) || padOf(n) || cellPadOf(n)), td), n), td), n));
         return;
       }
       flushBuf();
@@ -1289,6 +1392,16 @@ function fixedWidthOf(tb) {
   return 0;
 }
 
+/** A border present on some sides but not all, or a radius rounding some corners but not all -- the signature of one piece of a card that was drawn across several stacked tables, never of a standalone card. */
+function partialFrame(st) {
+  if (!st) return false;
+  const { sides } = borderSidesOf(st);
+  const on = ['top', 'right', 'bottom', 'left'].filter((k) => sides[k] > 0).length;
+  const corners = String(st.borderRadius || '').split(/\s+/).map(PX);
+  const uneven = corners.length > 1 && corners.some((v) => v > 0) && corners.some((v) => !v);
+  return (on > 0 && on < 4) || uneven;
+}
+
 function themeFromParsedDoc(doc) {
   const theme = {};
   const body = doc.body;
@@ -1313,6 +1426,10 @@ function themeFromParsedDoc(doc) {
   if (bestWidth) {
     const content = Array.from(body.querySelectorAll('table')).find((tb) => fixedWidthOf(tb) === Number(bestWidth));
     if (content) {
+      // Read before the frame is consumed below -- a fragment here means the
+      // sibling tables hold the rest of the same card (see the pass further
+      // down).
+      const contentPartial = partialFrame(content.style);
       // The content column's own background -- including the literal
       // `transparent` the exporter always writes for a see-through column.
       // Without this the round trip lost it: export wrote
@@ -1354,6 +1471,30 @@ function themeFromParsedDoc(doc) {
         if (padX > 0) theme.padX = padX;
         cell.style.padding = '';
       }
+      // A card drawn across several sibling content-width tables (top piece:
+      // `border-radius:16px 16px 0 0; border-bottom:none`, middle pieces:
+      // side borders only, bottom piece: `border-radius:0 0 16px 16px`) is
+      // ONE visual frame -- the one just claimed. Left in place, the sibling
+      // fragments imported as row borders inside the already-framed canvas:
+      // doubled verticals down every row and a second rounded, shadowed box
+      // around the last section. Only the split-card idiom trips this: the
+      // claimed table must itself be a fragment (partial border or uneven
+      // corners), and only fragments are stripped -- a template of genuinely
+      // separate full cards has neither and is untouched. Horizontal edges
+      // stay, since between two sections they read as a real separator; the
+      // last fragment's bottom edge coincides with the frame's and goes.
+      if (contentPartial) {
+        const same = Array.from(body.querySelectorAll('table'))
+          .filter((tb) => tb !== content && tb.style && fixedWidthOf(tb) === Number(bestWidth));
+        same.forEach((tb, k) => {
+          if (!partialFrame(tb.style)) return;
+          tb.style.borderLeft = '';
+          tb.style.borderRight = '';
+          tb.style.borderRadius = '';
+          tb.style.boxShadow = '';
+          if (k === same.length - 1) tb.style.borderBottom = '';
+        });
+      }
     }
   }
   // Prefer the first *real* stack (has a comma or quotes) over a lone generic

package/src/core/layout-style.js

@@ -1,46 +1,46 @@
-/**
- * Pure style-computation functions shared by the live renderer and the export
- * builder, ported verbatim. Objects use camelCase keys so they can be applied
- * directly via `Object.assign(el.style, obj)`.
- */
-
-import { cssUrl } from './sanitize.js';
-export function pad(p) {
-  return (p.py || 0) + 'px ' + (p.px || 0) + 'px';
-}
-
-export function boxStyle(p) {
-  const on = (key) => p[key] !== false;
-  const side = (key) => (p.bBorder && on(key) ? p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5') : '0');
-  return {
-    background: p.bBg || 'transparent',
-    borderTop: side('bTop'), borderRight: side('bRight'), borderBottom: side('bBottom'), borderLeft: side('bLeft'),
-    borderRadius: (p.bRadius || 0) + 'px',
-    padding: (p.bPad || 0) + 'px',
-  };
-}
-
-export function boxCss(p) {
-  const bits = [];
-  if (p.bBg) bits.push('background:' + p.bBg);
-  if (p.bBorder) {
-    const value = p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5');
-    const sides = { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
-    if (sides.top && sides.right && sides.bottom && sides.left) bits.push('border:' + value);
-    else Object.keys(sides).filter((key) => sides[key]).forEach((key) => bits.push('border-' + key + ':' + value));
-  }
-  if (p.bRadius) bits.push('border-radius:' + p.bRadius + 'px');
-  if (p.bPad) bits.push('padding:' + p.bPad + 'px');
-  return bits.length ? bits.join(';') + ';' : 'margin:0';
-}
-
-/** A row's effective padding as a four-value CSS shorthand. `pt/pb/pl/pr` are optional per-side overrides (set by the inspector's "Per-side padding" split, or by the importer for asymmetric source padding); wherever a side is absent it follows the linked `py`/`px` pair, so documents that never split keep behaving exactly as before. */
+/**
+ * Pure style-computation functions shared by the live renderer and the export
+ * builder, ported verbatim. Objects use camelCase keys so they can be applied
+ * directly via `Object.assign(el.style, obj)`.
+ */
+
+import { cssUrl } from './sanitize.js';
+export function pad(p) {
+  return (p.py || 0) + 'px ' + (p.px || 0) + 'px';
+}
+
+export function boxStyle(p) {
+  const on = (key) => p[key] !== false;
+  const side = (key) => (p.bBorder && on(key) ? p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5') : '0');
+  return {
+    background: p.bBg || 'transparent',
+    borderTop: side('bTop'), borderRight: side('bRight'), borderBottom: side('bBottom'), borderLeft: side('bLeft'),
+    borderRadius: (p.bRadius || 0) + 'px',
+    padding: (p.bPad || 0) + 'px',
+  };
+}
+
+export function boxCss(p) {
+  const bits = [];
+  if (p.bBg) bits.push('background:' + p.bBg);
+  if (p.bBorder) {
+    const value = p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5');
+    const sides = { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
+    if (sides.top && sides.right && sides.bottom && sides.left) bits.push('border:' + value);
+    else Object.keys(sides).filter((key) => sides[key]).forEach((key) => bits.push('border-' + key + ':' + value));
+  }
+  if (p.bRadius) bits.push('border-radius:' + p.bRadius + 'px');
+  if (p.bPad) bits.push('padding:' + p.bPad + 'px');
+  return bits.length ? bits.join(';') + ';' : 'margin:0';
+}
+
+/** A row's effective padding as a four-value CSS shorthand. `pt/pb/pl/pr` are optional per-side overrides (set by the inspector's "Per-side padding" split, or by the importer for asymmetric source padding); wherever a side is absent it follows the linked `py`/`px` pair, so documents that never split keep behaving exactly as before. */
 export function rowPad(p) {
-  const t = p.pt ?? p.py ?? 0;
-  const b = p.pb ?? p.py ?? 0;
-  const l = p.pl ?? p.px ?? 0;
-  const r = p.pr ?? p.px ?? 0;
-  return t + 'px ' + r + 'px ' + b + 'px ' + l + 'px';
+  const t = p.pt ?? p.py ?? 0;
+  const b = p.pb ?? p.py ?? 0;
+  const l = p.pl ?? p.px ?? 0;
+  const r = p.pr ?? p.px ?? 0;
+  return t + 'px ' + r + 'px ' + b + 'px ' + l + 'px';
 }
 
 /** A row's outside spacing in CSS clockwise order, with the old vertical `my` value as a saved-document fallback. Empty horizontal margins can remain `auto` in the live canvas so the advanced max-width control stays centered. */
@@ -52,64 +52,64 @@ export function rowMargin(p, centerEmpty) {
   const emptyHorizontal = centerEmpty && !r && !l;
   return t + 'px ' + (emptyHorizontal ? 'auto' : r + 'px') + ' ' + b + 'px ' + (emptyHorizontal ? 'auto' : l + 'px');
 }
-
-/** Which sides a row's border draws on. Sides default ON (`!== false`) so documents saved before per-side toggles existed keep their full border. */
-export function rowBorderSides(p) {
-  return { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
-}
-
-/** The row border as an inline-CSS string (export path). Empty when the width is 0 or every side is toggled off. */
-export function rowBorderCss(p) {
-  if (!p.border) return '';
-  const s = rowBorderSides(p);
-  const value = p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5');
-  if (s.top && s.right && s.bottom && s.left) return 'border:' + value + ';';
-  return ['top', 'right', 'bottom', 'left'].filter((k) => s[k]).map((k) => 'border-' + k + ':' + value + ';').join('');
-}
-
-export function rowBg(p) {
-  const ov = (p.overlay || 0) / 100;
-  const layers = [];
-  if (p.bgImage && ov) layers.push('linear-gradient(rgba(20,22,24,' + ov + '),rgba(20,22,24,' + ov + '))');
-  if (p.bgImage) layers.push('url("' + cssUrl(p.bgImage) + '")');
-  const s = rowBorderSides(p);
-  const side = (on) => (p.border && on ? p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5') : '0');
-  return {
-    backgroundColor: p.bg || 'transparent',
-    backgroundImage: layers.length ? layers.join(',') : 'none',
-    backgroundSize: p.bgSize || 'cover',
-    backgroundPosition: p.bgPos || 'center',
-    backgroundRepeat: p.bgRepeat || 'no-repeat',
-    borderTop: side(s.top),
-    borderRight: side(s.right),
-    borderBottom: side(s.bottom),
-    borderLeft: side(s.left),
-    borderRadius: (p.radius || 0) + 'px',
-    // A raw CSS string, not a boolean: imports keep the source's exact
-    // shadow; the inspector toggle writes/clears a standard one.
-    boxShadow: p.shadow || 'none',
-    maxWidth: (p.maxW || 100) + '%',
+
+/** Which sides a row's border draws on. Sides default ON (`!== false`) so documents saved before per-side toggles existed keep their full border. */
+export function rowBorderSides(p) {
+  return { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
+}
+
+/** The row border as an inline-CSS string (export path). Empty when the width is 0 or every side is toggled off. */
+export function rowBorderCss(p) {
+  if (!p.border) return '';
+  const s = rowBorderSides(p);
+  const value = p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5');
+  if (s.top && s.right && s.bottom && s.left) return 'border:' + value + ';';
+  return ['top', 'right', 'bottom', 'left'].filter((k) => s[k]).map((k) => 'border-' + k + ':' + value + ';').join('');
+}
+
+export function rowBg(p) {
+  const ov = (p.overlay || 0) / 100;
+  const layers = [];
+  if (p.bgImage && ov) layers.push('linear-gradient(rgba(20,22,24,' + ov + '),rgba(20,22,24,' + ov + '))');
+  if (p.bgImage) layers.push('url("' + cssUrl(p.bgImage) + '")');
+  const s = rowBorderSides(p);
+  const side = (on) => (p.border && on ? p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5') : '0');
+  return {
+    backgroundColor: p.bg || 'transparent',
+    backgroundImage: layers.length ? layers.join(',') : 'none',
+    backgroundSize: p.bgSize || 'cover',
+    backgroundPosition: p.bgPos || 'center',
+    backgroundRepeat: p.bgRepeat || 'no-repeat',
+    borderTop: side(s.top),
+    borderRight: side(s.right),
+    borderBottom: side(s.bottom),
+    borderLeft: side(s.left),
+    borderRadius: (p.radius || 0) + 'px',
+    // A raw CSS string, not a boolean: imports keep the source's exact
+    // shadow; the inspector toggle writes/clears a standard one.
+    boxShadow: p.shadow || 'none',
+    maxWidth: (p.maxW || 100) + '%',
     margin: rowMargin(p, true),
   };
 }
-
-export function colsWrap(p) {
-  const gap = p.gap || 0;
-  if (p.layout === 'grid') return { display: 'grid', gridTemplateColumns: 'repeat(' + (p.gridCols || 2) + ', minmax(0, 1fr))', gap: gap + 'px' };
-  if (p.layout === 'flex') {
-    return {
-      display: 'flex', flexDirection: p.flexDir || 'row', justifyContent: p.justify || 'flex-start',
-      alignItems: p.alignItems || 'stretch', flexWrap: p.wrap ? 'wrap' : 'nowrap', gap: gap + 'px',
-    };
-  }
-  return { display: 'flex', alignItems: 'stretch', margin: '0 ' + (-gap / 2) + 'px' };
-}
-
-export function colStyle(p, c) {
-  if (p.layout === 'grid') return { minWidth: 0 };
-  if (p.layout === 'flex') return { flex: (p.flexDir || 'row').indexOf('column') === 0 ? '0 0 auto' : c.span + ' 1 auto', minWidth: 0 };
-  return {
-    flex: c.span + ' 1 0%', minWidth: 0, padding: '0 ' + (p.gap || 0) / 2 + 'px',
-    alignSelf: p.valign === 'middle' ? 'center' : (p.valign === 'bottom' ? 'flex-end' : 'flex-start'),
-  };
-}
+
+export function colsWrap(p) {
+  const gap = p.gap || 0;
+  if (p.layout === 'grid') return { display: 'grid', gridTemplateColumns: 'repeat(' + (p.gridCols || 2) + ', minmax(0, 1fr))', gap: gap + 'px' };
+  if (p.layout === 'flex') {
+    return {
+      display: 'flex', flexDirection: p.flexDir || 'row', justifyContent: p.justify || 'flex-start',
+      alignItems: p.alignItems || 'stretch', flexWrap: p.wrap ? 'wrap' : 'nowrap', gap: gap + 'px',
+    };
+  }
+  return { display: 'flex', alignItems: 'stretch', margin: '0 ' + (-gap / 2) + 'px' };
+}
+
+export function colStyle(p, c) {
+  if (p.layout === 'grid') return { minWidth: 0 };
+  if (p.layout === 'flex') return { flex: (p.flexDir || 'row').indexOf('column') === 0 ? '0 0 auto' : c.span + ' 1 auto', minWidth: 0 };
+  return {
+    flex: c.span + ' 1 0%', minWidth: 0, padding: '0 ' + (p.gap || 0) / 2 + 'px',
+    alignSelf: p.valign === 'middle' ? 'center' : (p.valign === 'bottom' ? 'flex-end' : 'flex-start'),
+  };
+}

package/src/core/parse.js

@@ -1,10 +1,10 @@
-export function parseItems(s) {
-  return String(s || '').split('\n').map((l) => l.trim()).filter(Boolean).map((l) => {
-    const i = l.indexOf('|');
-    return i < 0 ? { label: l, href: '#' } : { label: l.slice(0, i).trim(), href: l.slice(i + 1).trim() };
-  });
-}
-
-export function cellsOf(p) {
-  return String(p.data || '').split('\n').filter((l) => l.trim()).map((l) => l.split('|').map((c) => c.trim()));
-}
+export function parseItems(s) {
+  return String(s || '').split('\n').map((l) => l.trim()).filter(Boolean).map((l) => {
+    const i = l.indexOf('|');
+    return i < 0 ? { label: l, href: '#' } : { label: l.slice(0, i).trim(), href: l.slice(i + 1).trim() };
+  });
+}
+
+export function cellsOf(p) {
+  return String(p.data || '').split('\n').filter((l) => l.trim()).map((l) => l.split('|').map((c) => c.trim()));
+}

package/src/core/placeholder.js

@@ -1,15 +1,15 @@
-/** Data-URI placeholder image generator, ported verbatim from the original. */
-function enc(s) {
-  return encodeURIComponent(s).replace(/\(/g, '%28').replace(/\)/g, '%29');
-}
-
-export function PH(label, w, ht) {
-  return 'data:image/svg+xml;utf8,' + enc(
-    '<svg xmlns="http://www.w3.org/2000/svg" width="' + w + '" height="' + ht + '">' +
-    '<defs><pattern id="s" width="9" height="9" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">' +
-    '<rect width="9" height="9" fill="#ececed"/><line x1="0" y1="0" x2="0" y2="9" stroke="#cfd3d8" stroke-width="3"/></pattern></defs>' +
-    '<rect width="100%" height="100%" fill="url(#s)"/>' +
-    '<rect x="0.5" y="0.5" width="' + (w - 1) + '" height="' + (ht - 1) + '" fill="none" stroke="#9aa2ab"/>' +
-    '<text x="50%" y="50%" dy="4" text-anchor="middle" font-family="ui-monospace,monospace" font-size="' + Math.max(11, Math.round(w / 40)) + '" fill="#5b6672">' + label + '</text></svg>',
-  );
-}
+/** Data-URI placeholder image generator, ported verbatim from the original. */
+function enc(s) {
+  return encodeURIComponent(s).replace(/\(/g, '%28').replace(/\)/g, '%29');
+}
+
+export function PH(label, w, ht) {
+  return 'data:image/svg+xml;utf8,' + enc(
+    '<svg xmlns="http://www.w3.org/2000/svg" width="' + w + '" height="' + ht + '">' +
+    '<defs><pattern id="s" width="9" height="9" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">' +
+    '<rect width="9" height="9" fill="#ececed"/><line x1="0" y1="0" x2="0" y2="9" stroke="#cfd3d8" stroke-width="3"/></pattern></defs>' +
+    '<rect width="100%" height="100%" fill="url(#s)"/>' +
+    '<rect x="0.5" y="0.5" width="' + (w - 1) + '" height="' + (ht - 1) + '" fill="none" stroke="#9aa2ab"/>' +
+    '<text x="50%" y="50%" dy="4" text-anchor="middle" font-family="ui-monospace,monospace" font-size="' + Math.max(11, Math.round(w / 40)) + '" fill="#5b6672">' + label + '</text></svg>',
+  );
+}

package/src/core/sanitize.js

@@ -102,6 +102,67 @@ export const cleanImportHtml = (html) => {
   return doc.body.innerHTML.replace(/<!--[\s\S]*?-->/g, '').replace(/\s{2,}/g, ' ').trim();
 };
 
+/**
+ * Mutation-time repairs for rich block HTML. Imported content keeps its
+ * per-element inline typography on purpose (`cleanImportHtml` above), but a
+ * descendant's own `font-size`/`color`/`line-height` always outranks the
+ * inherited value from the block wrapper -- so the inspector's Text size,
+ * Text color, Line spacing and Text weight controls were dead on any block
+ * whose paragraphs carried their own styles. The render-time strip that fixed
+ * the Font control (`overrideRichFont`, render/block-body.js) can't be reused
+ * here: `fontFamily` defaults to empty so "unset" means "leave the import
+ * alone", while `size`/`color`/`lh`/`weight` always hold a value -- stripping
+ * at render time would flatten every imported design on first paint. These
+ * run once, at the moment the user moves the control (core `setProp`), so an
+ * untouched document renders byte-identical and the rewrite lands in the same
+ * undo step as the prop change.
+ *
+ * Both return the input string untouched (same reference, no reparse churn)
+ * when there is nothing to rewrite.
+ */
+
+/** Drops trailing float noise without inventing integers: 60.75 stays, 78.00 becomes 78. */
+const trimNum = (n) => String(Number(n.toFixed(2)));
+
+/**
+ * Multiplies every absolute inline font-size by `ratio`, so the block's Text
+ * size acts as a master scale and a 15/26/15px imported hierarchy survives a
+ * base change instead of being flattened. Only px/pt scale -- em/% are
+ * relative and already follow the wrapper. A px line-height sitting beside a
+ * scaled font-size scales with it, or the imported `line-height:22px` would
+ * strangle 45px glyphs.
+ */
+export const scaleInlineSizes = (html, ratio) => {
+  const src = String(html == null ? '' : html);
+  if (!src || !Number.isFinite(ratio) || ratio <= 0 || ratio === 1 || !/font-size/i.test(src)) return src;
+  const doc = new DOMParser().parseFromString(src, 'text/html');
+  let changed = false;
+  doc.body.querySelectorAll('[style]').forEach((node) => {
+    const size = /^([\d.]+)(px|pt)$/.exec(node.style.fontSize || '');
+    if (!size) return;
+    node.style.fontSize = trimNum(parseFloat(size[1]) * ratio) + size[2];
+    const lh = /^([\d.]+)px$/.exec(node.style.lineHeight || '');
+    if (lh) node.style.lineHeight = trimNum(parseFloat(lh[1]) * ratio) + 'px';
+    changed = true;
+  });
+  return changed ? doc.body.innerHTML : src;
+};
+
+/** Removes one CSS property from every descendant's inline style -- the block-level control now owns it. The property name is exact (`color` never touches `background-color`). */
+export const stripInlineStyle = (html, prop) => {
+  const src = String(html == null ? '' : html);
+  if (!src || src.indexOf(prop) === -1) return src;
+  const doc = new DOMParser().parseFromString(src, 'text/html');
+  let changed = false;
+  doc.body.querySelectorAll('[style]').forEach((node) => {
+    if (!node.style.getPropertyValue(prop)) return;
+    node.style.removeProperty(prop);
+    if (!node.getAttribute('style')) node.removeAttribute('style');
+    changed = true;
+  });
+  return changed ? doc.body.innerHTML : src;
+};
+
 /**
  * Makes an image URL safe to drop inside `url("...")`.
  *

package/src/core/variables.js

@@ -1,11 +1,11 @@
-export const DEFAULT_VARS = 'first_name\nlast_name\nemail\ncompany\ncity\norder_id\nplan\ndiscount\nunsubscribe_url';
-export const TOKEN = (t) => '{' + '{ ' + t + ' }' + '}';
-
-/** Variables are supplied by the host application -- the editor only ever shows the tokens, never a substituted value. */
-export function vars(raw) {
-  const list = Array.isArray(raw) ? raw : String(raw == null ? DEFAULT_VARS : raw).split(/[\n,]/);
-  return list.map((v) => String(v).trim().replace(/^\{\{\s*|\s*\}\}$/g, '')).filter(Boolean);
-}
-
-/** Which prop field a merge tag lands in when inserted from the Data tab, keyed by the selected block's type. */
-export const INSERT_KEYS = { text: 'html', heading: 'text', button: 'label', html: 'code', codeblock: 'code', quote: 'text', list: 'items', table: 'data' };
+export const DEFAULT_VARS = 'first_name\nlast_name\nemail\ncompany\ncity\norder_id\nplan\ndiscount\nunsubscribe_url';
+export const TOKEN = (t) => '{' + '{ ' + t + ' }' + '}';
+
+/** Variables are supplied by the host application -- the editor only ever shows the tokens, never a substituted value. */
+export function vars(raw) {
+  const list = Array.isArray(raw) ? raw : String(raw == null ? DEFAULT_VARS : raw).split(/[\n,]/);
+  return list.map((v) => String(v).trim().replace(/^\{\{\s*|\s*\}\}$/g, '')).filter(Boolean);
+}
+
+/** Which prop field a merge tag lands in when inserted from the Data tab, keyed by the selected block's type. */
+export const INSERT_KEYS = { text: 'html', heading: 'text', button: 'label', html: 'code', codeblock: 'code', quote: 'text', list: 'items', table: 'data' };