@seliseblocks/mailcraft 0.2.6 → 0.2.8

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;
@@ -209,10 +235,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 +262,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 +281,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 +291,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);
 }
 
@@ -397,7 +453,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 +476,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;
@@ -557,10 +635,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 +658,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 +837,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 +982,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
@@ -889,6 +1142,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,6 +1188,18 @@ 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));
@@ -974,6 +1269,26 @@ 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;
+}
+
 function themeFromParsedDoc(doc) {
   const theme = {};
   const body = doc.body;
@@ -985,9 +1300,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,10 +1311,7 @@ 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) {
       // The content column's own background -- including the literal
       // `transparent` the exporter always writes for a see-through column.

package/src/core/sanitize.js

@@ -131,6 +131,47 @@ export const cssUrl = (u) => {
   return raw.replace(/["'()\\]|\s/g, (c) => CSS_URL_ESCAPE[c] || '%20');
 };
 
+/**
+ * A link target on its way into an anchor. Two jobs, and both of them showed
+ * up as "the link does not work" rather than as anything that errors:
+ *
+ *   - A bare host (`selise.ch`, `www.selise.ch/pricing`) gets `https://`.
+ *     Typed with no scheme it is a *relative* URL, so the mail client
+ *     resolves it against its own origin and the click lands nowhere -- the
+ *     single most common way an authored link ships broken, and invisible in
+ *     the editor because the canvas never follows it.
+ *   - Schemes are allowlisted the way `cssUrl` allowlists image sources, so
+ *     `javascript:` resolves to nothing instead of becoming a click target.
+ *
+ * Left exactly as typed: anything already carrying an allowed scheme, an
+ * in-page `#anchor`, a rooted `/path`, and anything opening with a merge tag
+ * -- `{{ResetUrl}}` is a whole URL the host substitutes later, so prefixing
+ * it would corrupt what reaches the template engine. A bare `name@host.tld`
+ * becomes `mailto:`, which is the only thing it could have meant.
+ */
+export const linkHref = (u) => {
+  const raw = String(u == null ? '' : u).trim();
+  if (!raw) return '';
+  const scheme = raw.match(/^([a-z][a-z0-9+.-]*):/i);
+  if (scheme) {
+    if (/^(https?|mailto|tel)$/i.test(scheme[1])) return raw;
+    // `selise.ch:8080/x` matches the scheme shape but is a host and a port;
+    // it falls through to be prefixed rather than dropped.
+    if (!/^[a-z][a-z0-9+.-]*:\d/i.test(raw)) return '';
+  }
+  if (raw.startsWith('//')) return 'https:' + raw;
+  // A href that *is* a merge placeholder is handed back untouched. Only
+  // `{{ }}` used to be, so `[Survey URL]` -- and Mailchimp's `*|URL|*`, and
+  // `%%url%%`, and `${url}` -- came back as `https://[Survey URL]`, which the
+  // sending engine then expands into `https://https://...` and the link is
+  // dead. Anchored to the start on purpose: `example.com/{{id}}` is a real
+  // relative URL and still needs its scheme.
+  if (/^(?:\{\{|\[|%%|\*\||\$\{)/.test(raw)) return raw;
+  if (/^[#/]/.test(raw)) return raw;
+  if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(raw)) return 'mailto:' + raw;
+  return 'https://' + raw;
+};
+
 export const escHtml = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
 /** Minimal HTML syntax highlighter for the code view. */

package/src/mailcraft-editor.js

@@ -6,6 +6,7 @@ import { renderDoc } from './render/canvas.js';
 import { renderRte } from './render/rte.js';
 import { renderField, renderFieldCards, typeCommit } from './render/fields.js';
 import { icon } from './core/icons.js';
+import { brandLockup } from './core/brand.js';
 import { TOKEN } from './core/variables.js';
 import { hl, cssUrl } from './core/sanitize.js';
 import { decorateLogicTags } from './core/export.js';
@@ -494,7 +495,15 @@ export class MailCraftEditor extends ElementBase {
   async copyScreenshot(blob) {
     const t = this.core.t;
     try {
-      const png = blob || await this.screenshotPng();
+      // Safari only honours `clipboard.write()` while the user gesture is
+      // still live, and awaiting the capture first (per-image fetch +
+      // inline, decode, rasterize, PNG encode) always outlives it --
+      // NotAllowedError on every attempt, where Chromium is lenient and
+      // lets it through. Handing ClipboardItem the *promise* is the
+      // supported shape for exactly this: the write is issued
+      // synchronously with the gesture and the capture resolves inside
+      // it. Chromium accepts the same form, so there is no branch here.
+      const png = blob ? Promise.resolve(blob) : this.screenshotPng();
       await navigator.clipboard.write([new ClipboardItem({ 'image/png': png })]);
       this.core.flash(t('toast.pngCopied'));
     } catch {
@@ -569,15 +578,11 @@ export class MailCraftEditor extends ElementBase {
     const t = this.core.t;
     const header = elS('header', "display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--ed-line); background: linear-gradient(to bottom, var(--ed-panel), var(--ed-panel-2)); position: relative; z-index: 30;", { class: 'mc-header' });
 
-    const brandMark = elS('span', '', { class: 'mc-brand-mark' });
-    const markSvg = icon('mailSpark', 20);
-    markSvg.setAttribute('stroke-width', '1.8');
-    brandMark.appendChild(markSvg);
-    const brand = elS('div', 'display: flex; align-items: center; gap: 9px;');
-    brand.append(
-      brandMark,
-      elS('span', 'font-family: var(--ed-font); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; line-height: 1;', { text: 'MailCraft', class: 'mc-brand-name' }),
-    );
+    // The logo itself, not a mark beside a typeset word: the wordmark is part
+    // of the artwork, so it keeps the brand's own typeface whatever font the
+    // host pushes into --ed-font.
+    const brand = elS('div', 'display: flex; align-items: center;', { class: 'mc-brand' });
+    brand.appendChild(brandLockup(30));
     if (on.logo) header.append(brand, elS('div', 'width: 1px; height: 22px; background: var(--ed-line);'));
 
     this.savedLabel = elS('span', 'display: flex; align-items: center; gap: 6px; font-family: ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ed-faint); white-space: nowrap;');
@@ -1224,6 +1229,11 @@ export class MailCraftEditor extends ElementBase {
       tile.addEventListener('mouseleave', () => { tile.style.borderColor = 'var(--ed-line)'; });
       tile.addEventListener('dragstart', this.core.startDrag({ kind: 'asset', assetId: a.id }));
       tile.addEventListener('dragend', () => { this.core.drag = null; this.core.setState({ drop: null, rowDrop: null }); });
+      // Touch Safari never fires HTML5 drag events, so drag alone left
+      // these tiles unusable on iOS. Click is the same fallback the
+      // library modal's tiles already carry; a completed drag ends in
+      // `dragend`, not `click`, so the two do not both fire.
+      tile.addEventListener('click', () => this.core.useAsset(a));
       tile.appendChild(elS('div', `width: 100%; height: 64px; background-image: url("${a.url}"); background-size: cover; background-position: center; background-color: var(--ed-work);`, { role: 'img', 'aria-label': a.name }));
       tile.appendChild(elS('div', 'font-family: ui-monospace, monospace; font-size: 9px; color: var(--ed-muted); padding: 4px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;', { text: a.name }));
       grid.appendChild(tile);