@seliseblocks/mailcraft 0.2.7 → 0.2.9

package/src/core/import-html.js

@@ -88,7 +88,33 @@ function cellPadOf(tb) {
  * zero font. A zero font-size ALONE is not hidden: emails set it on
  * whitespace-collapsing wrappers around buttons and menus.
  */
+/**
+ * A device-visibility wrapper, as a `vis` value -- or '' for ordinary content.
+ *
+ * Both this exporter's `mc-only-d`/`mc-only-m` and the `desktop_hide`/
+ * `mobile_hide` convention every other builder uses (BEE, Stripo, Mailchimp)
+ * are recognised, so a foreign template's device variants import as an
+ * editable property instead of being silently thrown away.
+ *
+ * This has to be consulted *before* `isHidden`, and that is the whole point:
+ * a mobile-only block is deliberately `display:none` in the base stylesheet
+ * so Classic Outlook -- which never reads a media query -- does not show it.
+ * The importer folds those base rules inline (core/css-cascade.js drops the
+ * `@media` block that would have un-hidden it), so without this the block
+ * looked exactly like a hidden preheader and was dropped on re-import,
+ * losing content the user had authored.
+ */
+function visibilityOf(el) {
+  const cls = (el && el.getAttribute && el.getAttribute('class')) || '';
+  if (!cls) return '';
+  if (/\b(?:mc-only-m|mobile_hide|mobile-hide)\b/.test(cls)) return 'mobile';
+  if (/\b(?:mc-only-d|desktop_hide|desktop-hide)\b/.test(cls)) return 'desktop';
+  return '';
+}
+
 function isHidden(el) {
+  // Hidden *on this device* is not hidden: see visibilityOf.
+  if (visibilityOf(el)) return false;
   const st = el.style;
   if (!st) return false;
   if (st.display === 'none' || st.visibility === 'hidden') return true;
@@ -124,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;
@@ -209,10 +272,25 @@ function classifyImage(el) {
 }
 
 function classifyButton(el) {
-  let a = null; let outerAlign = '';
+  let a = null; let outerAlign = ''; let pillTable = null;
   if (el.tagName === 'A') a = el;
   else if (el.tagName === 'DIV' || el.tagName === 'TD') {
     a = onlyChild(el, 'A');
+    // The bulletproof shape: the anchor is wrapped in a one-cell table so
+    // Word has a `<td>` to paint and pad (this exporter emits that, and so
+    // does every hand-written bulletproof button). Reached through the
+    // wrapper rather than the cell because that is the node the row walker
+    // offers, and the wrapper is also what carries the alignment.
+    if (!a) {
+      pillTable = onlyChild(el, 'TABLE');
+      // Direct row cells only. A descendant search would count the `<td>`s
+      // inside whatever the cell contains, so a layout row holding one block
+      // could look like a one-cell button table -- or stop looking like one
+      // the moment the block itself contained a table.
+      const cells = pillTable ? pillTable.querySelectorAll(':scope > tbody > tr > td, :scope > tr > td') : [];
+      if (cells.length === 1) a = onlyChild(cells[0], 'A');
+      if (!a) pillTable = null;
+    }
     if (a) outerAlign = el.style.textAlign || el.getAttribute('align') || '';
   }
   if (!a) return null;
@@ -221,11 +299,16 @@ function classifyButton(el) {
   // generators (Beefree et al.) leave the `<a>` bare and hang the background,
   // radius and padding on nested `<span>`s inside it. Whichever element
   // carries the background is the pill; padding may sit a level deeper still.
-  const hasBg = (e) => !!(e.style && (e.style.backgroundColor || e.style.background));
-  const pill = hasBg(a) ? a : Array.from(a.querySelectorAll('span')).find(hasBg);
+  const hasBg = (e) => !!(e.style && (e.style.backgroundColor || e.style.background)) || !!(e.getAttribute && e.getAttribute('bgcolor'));
+  // The cell is checked last and only as a fallback: an anchor that paints
+  // its own pill still describes the button best (that is where the radius
+  // and the label colour sit), and the cell is what carries them when the
+  // source put the paint and the padding on the `<td>` instead.
+  const cell = a.closest ? a.closest('td') : null;
+  const pill = hasBg(a) ? a : (Array.from(a.querySelectorAll('span')).find(hasBg) || (cell && hasBg(cell) ? cell : null));
   if (!pill) return null;
   const st = pill.style;
-  let pad = paddingOf(a.style) || paddingOf(st);
+  let pad = paddingOf(a.style) || paddingOf(st) || (cell ? paddingOf(cell.style) : null);
   if (!pad) {
     const padded = Array.from(pill.querySelectorAll('span')).find((s) => paddingOf(s.style));
     if (padded) pad = paddingOf(padded.style);
@@ -235,8 +318,8 @@ function classifyButton(el) {
   const over = {
     label: (a.textContent || '').trim() || 'Button',
     href: a.getAttribute('href') || '#',
-    bg: st.backgroundColor || st.background,
-    color: st.color || a.style.color || '#ffffff',
+    bg: st.backgroundColor || st.background || (pill.getAttribute && pill.getAttribute('bgcolor')) || '',
+    color: a.style.color || st.color || '#ffffff',
     radius: radiusOf(st),
     py: (pad && pad.py) || 13,
     px: (pad && pad.px) || 26,
@@ -245,13 +328,23 @@ function classifyButton(el) {
     // about where the pill sits in the row -- that's the container's call,
     // so alignment is read starting at the parent, never at the anchor.
     align: outerAlign || textAlignOf(a.parentElement || a),
-    full: a.style.display === 'block',
+    // In the one-cell shape the anchor is always `display:block` (it fills
+    // the padded cell), so full-width has to be read off the table instead --
+    // otherwise every bulletproof button imports as a full-width one.
+    full: pillTable
+      ? /100%/.test((pillTable.style && pillTable.style.width) || pillTable.getAttribute('width') || '')
+      : a.style.display === 'block',
   };
   const size = fontPx(st.fontSize) || fontPx(a.style.fontSize);
   if (size) over.size = size;
-  // Outline buttons: transparent fill, the pill drawn by its border.
-  const bw = borderSidesOf(st).width;
-  if (bw) { over.borderW = bw; over.borderStyle = borderStyleOf(st); over.borderColor = borderColorOf(st) || over.color; }
+  // Outline buttons: transparent fill, the pill drawn by its border. The
+  // border is looked for on the cell as well as the pill, because in the
+  // one-cell shape the paint and the frame are on different elements -- the
+  // anchor is the pill (it carries the background) while the `<td>` draws the
+  // outline. Reading only the pill dropped `borderW` on every round trip.
+  const frame = borderSidesOf(st).width ? st : (cell && cell.style && borderSidesOf(cell.style).width ? cell.style : st);
+  const bw = borderSidesOf(frame).width;
+  if (bw) { over.borderW = bw; over.borderStyle = borderStyleOf(frame); over.borderColor = borderColorOf(frame) || over.color; }
   return blk('button', over);
 }
 
@@ -359,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' });
 }
@@ -397,7 +504,18 @@ const CLASSIFIERS = [classifyImage, classifyButton, classifySocial, classifyMenu
 function classifyNode(el) {
   for (const fn of CLASSIFIERS) {
     const b = fn(el);
-    if (b) return b;
+    if (!b) continue;
+    // The class sits on the wrapper the exporter puts around each block, and
+    // on a foreign template it can be a level or two further out, so a short
+    // walk up finds it. Only ever set when a wrapper actually says so --
+    // absent means "all devices", which is what every ordinary block wants.
+    let n = el;
+    for (let i = 0; n && i < 4; i += 1) {
+      const v = visibilityOf(n);
+      if (v) { b.props.vis = v; break; }
+      n = n.parentElement;
+    }
+    return b;
   }
   return null;
 }
@@ -409,7 +527,18 @@ function isStructural(el) {
 /** `core/export.js` wraps every block in a column with `<div style="{boxCss(b.props)}">`, which for every block type shipped today (none define the `bBg/bBorder/bLine/bRadius/bPad` props `boxCss` reads) always resolves to a bare `<div style="margin:0">` -- a see-through spacing wrapper, not real content. Unwraps that one level so the classifiers see the block's own signature div directly; leaves any div that carries other styling (an intentionally-styled container someone pasted in) alone, since that's real content, not framework wrapper. */
 function unwrapBoxDiv(el) {
   if (el.tagName !== 'DIV' || el.children.length !== 1) return el;
-  const extra = Array.from(el.style).filter((prop) => prop.indexOf('margin') !== 0);
+  // A device-visibility wrapper is framework too, and the declarations that
+  // hide it are the framework's, not the author's: a mobile-only block is
+  // `display:none` in the base stylesheet so Classic Outlook never shows it,
+  // and css-cascade folds that inline on import. Without this exemption the
+  // wrapper looked like a deliberately styled container, never unwrapped, and
+  // the heading inside it came back as an untyped run of text. `classifyNode`
+  // reads the visibility off this same wrapper by walking back up, so the
+  // property survives the unwrap.
+  const framework = visibilityOf(el)
+    ? /^(?:margin|display|max-height|overflow|mso-)/
+    : /^margin/;
+  const extra = Array.from(el.style).filter((prop) => !framework.test(prop));
   if (extra.length) return el;
   const child = el.firstElementChild;
   if ((el.textContent || '') !== (child.textContent || '')) return el;
@@ -461,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
@@ -490,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);
@@ -498,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;
@@ -557,10 +709,16 @@ function normalizeSpans(spans) {
 function spansFromCells(cells, tableWidthPx) {
   const parsed = cells.map((td) => {
     const sw = td.style.width || '';
+    // `max-width` before `width`, but only where `width` says nothing useful.
+    // A CSS-layout column is written `width:100%;max-width:50%` -- the 100%
+    // is the fluid instruction and the cap is the actual share of the row, so
+    // reading `width` first would score every column at 100.
+    const mw = td.style.maxWidth || '';
+    if (mw.endsWith('%') && (!sw || PX(sw) >= 100)) return { pct: PX(mw) };
     if (sw.endsWith('%')) return { pct: PX(sw) };
     const aw = td.getAttribute('width') || '';
     if (aw.endsWith('%')) return { pct: PX(aw) };
-    const px = PX(sw) || PX(aw);
+    const px = PX(sw) || PX(aw) || (mw.endsWith('px') ? PX(mw) : 0);
     return px ? { px } : null;
   });
   if (parsed.every((p) => p && p.pct != null)) {
@@ -574,10 +732,140 @@ function spansFromCells(cells, tableWidthPx) {
   return spans;
 }
 
+/*
+ * Columns that are not table cells.
+ *
+ * A row's columns do not have to be `<td>`s. MJML, and to a degree Unlayer and
+ * Stripo, emit them as sibling `<div>`s that sit side by side through
+ * `display:inline-block` and a percentage cap, with the table version hidden
+ * inside `<!--[if mso]>` conditionals for Outlook. Those comments are comments
+ * to a DOM parser, so all the walker ever saw was one `<td>` holding two
+ * divs -- and a real 50/50 row imported as two stacked full-width rows. The
+ * blocks all survived; the layout relationship did not.
+ *
+ * Returning the divs here hands them to exactly the same machinery the table
+ * path already uses -- `spansFromCells` for the widths, gap and gutter
+ * detection, per-column background and padding -- so there is no second
+ * column model, only a second way of recognising one.
+ *
+ * Deliberately conservative, because a wrong grouping is worse than none: a
+ * false positive welds unrelated sections into one row, which the user then
+ * has to take apart by hand. Every one of these has to hold.
+ */
+/*
+ * A column's share of its row is not always in its inline style.
+ *
+ * MJML writes the column as `width:100%` inline and puts the real share in a
+ * class rule inside `@media only screen and (min-width:480px)` -- a *desktop*
+ * query, so it carries the layout rather than overriding it. `css-cascade.js`
+ * strips every at-rule before folding, by design (a mobile override cannot be
+ * represented in the model), which means that share never reaches the element
+ * and three columns looked like three widthless divs.
+ *
+ * So the stylesheets are read once per document for `.class { width: N% }`,
+ * from top-level rules and from `min-width` blocks -- never from `max-width`
+ * blocks, which are the mobile overrides the cascade is right to drop.
+ */
+const CLASS_WIDTHS = new WeakMap();
+
+function scanWidthRules(css, map) {
+  let i = 0;
+  while (i < css.length) {
+    const at = css.indexOf('@', i);
+    const plain = css.slice(i, at < 0 ? css.length : at);
+    plain.replace(/([^{}]+)\{([^{}]*)\}/g, (m0, sel, decl) => {
+      const w = decl.match(/(?:^|;)\s*width\s*:\s*([\d.]+)%/i);
+      if (w) {
+        sel.split(',').forEach((one) => {
+          const cm = one.trim().match(/^\.([-\w]+)$/);
+          if (cm && !map[cm[1]]) map[cm[1]] = parseFloat(w[1]);
+        });
+      }
+      return m0;
+    });
+    if (at < 0) break;
+    const brace = css.indexOf('{', at);
+    if (brace < 0) break;
+    const prelude = css.slice(at, brace);
+    let depth = 0;
+    let j = brace;
+    for (; j < css.length; j += 1) {
+      if (css[j] === '{') depth += 1;
+      else if (css[j] === '}') { depth -= 1; if (!depth) break; }
+    }
+    // `max-width` is a narrow-screen override, which says nothing about the
+    // desktop layout this is trying to recover.
+    if (!/max-width/i.test(prelude)) scanWidthRules(css.slice(brace + 1, j), map);
+    i = j + 1;
+  }
+}
+
+function classWidths(doc) {
+  if (!doc || !doc.querySelectorAll) return {};
+  const hit = CLASS_WIDTHS.get(doc);
+  if (hit) return hit;
+  const map = {};
+  Array.from(doc.querySelectorAll('style')).forEach((st) => {
+    scanWidthRules(String(st.textContent || '').replace(/\/\*[\s\S]*?\*\//g, ''), map);
+  });
+  CLASS_WIDTHS.set(doc, map);
+  return map;
+}
+
+function inlineColumnGroup(nodes) {
+  const kids = Array.from(nodes).filter((n) => {
+    if (n.nodeType === 8) return false;                                  // the MSO conditionals themselves
+    if (n.nodeType === 3) return !!String(n.textContent || '').trim();   // layout whitespace between the divs
+    return n.nodeType === 1 && !/^(STYLE|SCRIPT)$/.test(n.tagName);
+  });
+  // Two to six siblings, all plain containers. A run of one is not a row, and
+  // a run of many is far more likely to be stacked content than columns.
+  if (kids.length < 2 || kids.length > 6) return null;
+  if (!kids.every((k) => k.nodeType === 1 && k.tagName === 'DIV')) return null;
+  // Side-by-side has to be stated, not guessed. `inline-block` is the email
+  // idiom; floats are the older one. A plain block div is stacked content and
+  // must not be swept up.
+  const sideBySide = (k) => {
+    const s = k.style || {};
+    return /inline-block|inline-flex/.test(s.display || '') || /^(left|right)$/.test(s.cssFloat || s.float || '');
+  };
+  if (!kids.every(sideBySide)) return null;
+  // Every sibling must declare a share of the row, and the shares must add up
+  // to one row. Anything else is a layout this cannot claim to understand.
+  const shareOf = (k) => {
+    const s = k.style || {};
+    const mw = s.maxWidth || '';
+    if (mw.endsWith('%')) return PX(mw);
+    const w = s.width || '';
+    if (w.endsWith('%') && PX(w) < 100) return PX(w);
+    // Nothing inline: the share may be carried by one of the element's
+    // classes (see classWidths).
+    const byClass = classWidths(k.ownerDocument);
+    const named = ((k.getAttribute && k.getAttribute('class')) || '').split(/\s+/);
+    for (let i = 0; i < named.length; i += 1) {
+      const v = byClass[named[i]];
+      if (v && v < 100) return v;
+    }
+    return 0;
+  };
+  const shares = kids.map(shareOf);
+  if (!shares.every((w) => w > 0)) return null;
+  const total = shares.reduce((a, b) => a + b, 0);
+  if (total < 90 || total > 110) return null;
+  kids.shares = shares;
+  return kids;
+}
+
 /** Detects MailCraft's own two-table row shape -- an outer `<td>` (row padding/bg/border) wrapping a single-row `role="presentation"` table that holds the actual column(s), per `core/export.js` -- and widens to its cells (one or many) so rows round-trip back into real columns instead of one opaque `html` block. */
 function unwrapNestedLayout(td) {
   const only = onlyChild(td, 'TABLE');
   if (!only) return null;
+  // Not every single-row table is layout. A bulletproof button is a one-cell
+  // table too, and reading it as a row made its cell the row's `bgSource` --
+  // so a pink button in a white section repainted the whole band pink and
+  // the section's own background was lost. A component table is one block,
+  // never a row; the same guard covers a social strip built the same way.
+  if (classifyButton(td) || classifySocial(only)) return null;
   const trs = only.querySelectorAll(':scope > tbody > tr, :scope > tr');
   if (trs.length !== 1) return null;
   if (only.querySelector('th')) return null;
@@ -623,6 +911,39 @@ function padOf(el) {
   return el.style ? paddingOf(el.style) : null;
 }
 
+/*
+ * One column of a row, on its own.
+ *
+ * The same container the multi-column detector groups, but appearing singly --
+ * a full-width MJML section is one of these. It matters because of what is
+ * *inside* it: a table whose every `<tr>` is one block. The generic walk turns
+ * every `<tr>` into a MailCraft row, so a section holding a heading and a
+ * subheading came back as two rows, each repainted with the section's
+ * background and each carrying the inner cell's padding while the section's
+ * own padding was dropped. A source `<tr>` inside a column is a block slot,
+ * not a row.
+ *
+ * Recognising the boundary keeps the column's blocks together in one row, and
+ * lets the section's `<td>` supply that row's padding, which is where it
+ * belonged all along. `tr -> row` is untouched everywhere else, which is what
+ * keeps MailCraft's own export round-tripping.
+ */
+function isColumnContainer(el) {
+  if (!el || el.nodeType !== 1 || el.tagName !== 'DIV') return false;
+  const s = el.style || {};
+  const sideBySide = /inline-block|inline-flex/.test(s.display || '') || /^(left|right)$/.test(s.cssFloat || s.float || '');
+  if (!sideBySide) return false;
+  if (!(s.width || s.maxWidth)) return false;
+  // A column holds its blocks in a table; a lone inline-block div with no
+  // table is a badge or a pill, and is content in its own right.
+  return Array.from(el.children).some((c) => c.tagName === 'TABLE');
+}
+
+/** Every block a set of rows holds, in order -- a MailCraft column is a flat list. */
+function blocksOfRows(rows) {
+  return rows.reduce((acc, r) => acc.concat(r.cols.reduce((a, c) => a.concat(c.blocks), [])), []);
+}
+
 /** A div/center that itself nests a div/table/center is acting as a structural container (a section wrapper, an outer page wrapper holding several sections) rather than as one piece of content -- its children need to be walked in their own right, not folded into one block. A div holding only inline content (text, spans, an image not otherwise recognized) is real content and is left to `blocksFromNodes`. */
 function looksLikeContainer(el) {
   return Array.from(el.children).some((c) => c.tagName === 'TABLE' || c.tagName === 'DIV' || c.tagName === 'CENTER');
@@ -735,8 +1056,14 @@ function rowsFromContentTable(table) {
     const bgSource = outerCells[0];
     let cells = outerCells;
     if (outerCells.length === 1) {
+      // The table shape first, since it is unambiguous; the CSS-layout shape
+      // only when there is no table row to read.
       const nested = unwrapNestedLayout(outerCells[0]);
       if (nested) cells = nested;
+      else {
+        const inline = inlineColumnGroup(outerCells[0].childNodes);
+        if (inline) cells = inline;
+      }
     }
     // Spacer columns: a content-free `<td>` (often `class="column gap"`,
     // holding only an empty fixed-width table) between real columns exists
@@ -792,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).
@@ -889,6 +1219,36 @@ function rowsFromContentTable(table) {
  * its ancestor's.
  */
 function collectRows(nodes) {
+  /*
+   * Before anything else: are these siblings one row's columns rather than a
+   * sequence of sections? This has to be asked here, of the whole list, and
+   * not inside the loop below -- that loop's job is to walk each structural
+   * container in its own right, which is exactly what flattened a real 50/50
+   * row into two stacked full-width ones. The relationship between the
+   * siblings is only visible while they are still siblings.
+   */
+  const columns = inlineColumnGroup(nodes);
+  if (columns) {
+    // The resolved shares win over the inline widths: a CSS-layout column is
+    // `width:100%` inline, so reading the elements again would score every
+    // column at 100 and fall back to an even split -- right for 33/33/34,
+    // wrong for 40/60.
+    const row = mkRow(columns.shares ? normalizeSpans(columns.shares) : spansFromCells(columns, 0));
+    row.props.py = 0; row.props.px = 0; row.props.gap = 0;
+    columns.forEach((k, i) => {
+      // A MailCraft column holds a flat list of blocks, so whatever the
+      // column div decomposes into is flattened into it. Recursing through
+      // collectRows rather than blocksFromNodes is what lets a column hold a
+      // content table (the usual MJML shape) instead of one opaque blob.
+      row.cols[i].blocks = blocksOfRows(collectRows(Array.from(k.childNodes)));
+      const cbg = bgOf(k); if (cbg) row.cols[i].bg = cbg;
+      const crad = radiusOf(k.style); if (crad) row.cols[i].radius = crad;
+      const cpd = padOf(k); if (cpd) { row.cols[i].padY = cpd.py; row.cols[i].padX = cpd.px; }
+    });
+    // If nothing recognisable came out of it, it was not a row after all --
+    // fall through and let the ordinary walk have it.
+    if (row.cols.some((c) => c.blocks.length)) return [row];
+  }
   const rows = [];
   let buf = [];
   const flushBuf = () => {
@@ -905,9 +1265,21 @@ function collectRows(nodes) {
     if (n.nodeType === 8) return; // HTML comments (Outlook/MSO conditionals) -- inert
     if (n.nodeType === 1 && /^(SCRIPT|STYLE)$/.test(n.tagName)) return;
     if (n.nodeType === 1 && isHidden(n)) return;
+    // A lone column: its blocks belong to one row, not one row each.
+    if (n.nodeType === 1 && isColumnContainer(n) && !classifyNode(unwrapBoxDiv(n))) {
+      flushBuf();
+      const blocks = blocksOfRows(collectRows(Array.from(n.childNodes)));
+      if (blocks.length) {
+        const row = mkRow([100]);
+        row.props.py = 0; row.props.px = 0; row.props.gap = 0;
+        row.cols[0].blocks = blocks;
+        rows.push(...applyBgImage(applyFrame(applyPad(applyBg([row], bgOf(n)), padOf(n)), n), n));
+        return;
+      }
+    }
     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;
     }
@@ -948,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();
@@ -974,6 +1372,36 @@ function collectRows(nodes) {
  * document's theme -- a DM Sans email on #F1F5F9 came back in the default
  * Georgia on the default parchment, which read as "the import broke".
  */
+/**
+ * A layout table's committed pixel width, however it declares one: the
+ * `width` attribute, a `width` style, or -- for a responsive template -- the
+ * `max-width` that caps a fluid `width:100%`.
+ *
+ * `max-width` is not a nicety. It is how this exporter now writes the content
+ * column (`width:100%;max-width:620px`, so the email can narrow to a phone),
+ * and it is the shape every other modern email builder emits too. Reading
+ * only the fixed forms meant an export -> import round trip came back with no
+ * `theme.width` at all and silently fell to the default. Returns 0 for a
+ * purely proportional table, which the callers already skip.
+ */
+function fixedWidthOf(tb) {
+  const w = tb.getAttribute('width') || (tb.style && tb.style.width) || '';
+  if (w && !String(w).endsWith('%')) return PX(w);
+  const cap = tb.style && tb.style.maxWidth;
+  if (cap && !String(cap).endsWith('%')) return PX(cap);
+  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;
@@ -985,9 +1413,7 @@ function themeFromParsedDoc(doc) {
   if (bg) theme.bg = bg;
   const widthCounts = {};
   body.querySelectorAll('table').forEach((tb) => {
-    const w = tb.getAttribute('width') || (tb.style && tb.style.width) || '';
-    if (!w || String(w).endsWith('%')) return;
-    const px = PX(w);
+    const px = fixedWidthOf(tb);
     if (px >= 320 && px <= 900) widthCounts[px] = (widthCounts[px] || 0) + 1;
   });
   const bestWidth = Object.keys(widthCounts).sort((a, b) => widthCounts[b] - widthCounts[a])[0];
@@ -998,11 +1424,12 @@ function themeFromParsedDoc(doc) {
   // column's corner. Without this an import flattened both, and the next
   // export silently squared the template off and closed the gap around it.
   if (bestWidth) {
-    const content = Array.from(body.querySelectorAll('table')).find((tb) => {
-      const w = tb.getAttribute('width') || (tb.style && tb.style.width) || '';
-      return w && !String(w).endsWith('%') && PX(w) === Number(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
@@ -1044,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