@seliseblocks/mailcraft 0.2.6 → 0.2.8

package/src/render/block-body.js

@@ -1,6 +1,7 @@
 import { icon, brandIcon, socialKey, SOCIAL_BRAND, contrastInk } from '../core/icons.js';
 import { pad } from '../core/layout-style.js';
 import { parseItems, cellsOf } from '../core/parse.js';
+import { linkHref } from '../core/sanitize.js';
 
 function el(tag, style, attrs) {
   const node = document.createElement(tag);
@@ -39,6 +40,31 @@ function editableAttrs(on) {
   return on ? { contenteditable: 'true', spellcheck: 'false', ...NO_ASSIST } : { spellcheck: 'false' };
 }
 
+/**
+ * What keeps a text-bearing block inside the column it was dropped in.
+ *
+ * A long unbroken token -- a tracking URL, a concatenated word -- has a
+ * min-content width of the whole token, and nothing above clips it: the block
+ * wrapper (render/canvas.js) and the exported `<td>` both let it through, so
+ * the run either paints across the next column on the canvas or, in the sent
+ * email, widens its own cell and steals the width from its siblings (a 25%
+ * column measured 511px against its neighbours' 24px).
+ *
+ * `anywhere` rather than the more familiar `break-word` on purpose: only
+ * `anywhere` lowers the min-content contribution, which is the number table
+ * and flex layout actually size against -- `break-word` wraps the glyphs but
+ * leaves the box's intrinsic width at the full token, so the column blows out
+ * exactly as before. `word-break` carries the same meaning for engines that
+ * predate `anywhere`. Neither breaks a token that already fits.
+ *
+ * It has to live here, in the inline style, rather than in the editor's
+ * stylesheet: this is the DOM `core/export.js` reads back and sends. The
+ * canvas *looked* fine without it only because Chrome's UA sheet gives
+ * `[contenteditable]` an `overflow-wrap: break-word` -- and export strips
+ * `contenteditable`, so the editor was hiding the defect that shipped.
+ */
+const FIT = { overflowWrap: 'anywhere', wordBreak: 'break-word' };
+
 /** An explicit block font owns every rich descendant; an empty value deliberately leaves imported inline typography untouched. */
 function overrideRichFont(root, fontFamily) {
   if (!fontFamily) return;
@@ -61,7 +87,7 @@ export function blockBody(b, theme, live, ctx) {
     case 'text': {
       const edit = live;
       const content = el('div', {
-        padding: pad(p), fontSize: p.size + 'px', lineHeight: p.lh, textAlign: p.align, fontWeight: p.weight, color: p.color || t.text, outline: 'none', fontFamily: p.fontFamily || t.font,
+        padding: pad(p), fontSize: p.size + 'px', lineHeight: p.lh, textAlign: p.align, fontWeight: p.weight, color: p.color || t.text, outline: 'none', fontFamily: p.fontFamily || t.font, ...FIT,
       }, { ...attr, ...editableAttrs(edit), html: m(p.html), 'data-focus-key': edit ? 'block:' + b.id : undefined });
       // Imported email HTML keeps inline font-family declarations so an
       // untouched block retains its source typography. Once the user chooses
@@ -77,12 +103,17 @@ export function blockBody(b, theme, live, ctx) {
     }
     case 'image': {
       const wrap = el('div', { padding: pad(p), textAlign: p.align, fontSize: '0' }, attr);
-      if (p.href) {
+      const imgHref = linkHref(p.href);
+      if (imgHref) {
         // The % width must live on the anchor, not the img: a percentage on a
         // child of a shrink-to-fit inline-block resolves against the image's
         // own intrinsic size (i.e. not at all), which rendered every linked
         // logo/icon at full intrinsic width no matter what `width` said.
-        const a = el('a', { display: 'inline-block', width: p.width + '%' }, { href: p.href });
+        const a = el('a', { display: 'inline-block', width: p.width + '%' }, { href: imgHref });
+        // Same guard as every other anchor the canvas draws: without it a
+        // click on a linked logo navigates the host application away from the
+        // editor, taking the uncommitted document with it.
+        a.addEventListener('click', (e) => e.preventDefault());
         a.appendChild(el('img', { width: '100%', borderRadius: p.radius + 'px', display: 'block', border: '0' }, { src: p.src, alt: p.alt }));
         wrap.appendChild(a);
       } else {
@@ -90,22 +121,57 @@ export function blockBody(b, theme, live, ctx) {
       }
       return wrap;
     }
+    /*
+     * A one-cell table, not a bare padded anchor.
+     *
+     * Classic Outlook's Word engine does not lay out `display:inline-block`
+     * and treats padding on an inline `<a>` inconsistently, so the pill drawn
+     * by an anchor alone collapses to bare coloured text there -- the single
+     * most-reported defect in hand-written email. A `<td>` is the one box
+     * Word sizes and paints reliably, so the background, the padding and the
+     * corner live on the cell and the anchor becomes the label inside it.
+     * Every other client renders the two identically.
+     *
+     * VML `<v:roundrect>` is the usual alternative and is deliberately not
+     * used: it needs an explicit pixel width and height, which an auto-width
+     * button sized by its own label does not have. The only thing this gives
+     * up against VML is the rounded corner in Classic Outlook, which squares
+     * off there and is correct everywhere else.
+     */
     case 'button': {
       const wrap = el('div', { textAlign: p.align, padding: '4px 0' }, attr);
-      const a = el('a', {
-        display: p.full ? 'block' : 'inline-block', background: p.bg, color: p.color, textDecoration: 'none',
-        padding: p.py + 'px ' + p.px + 'px', borderRadius: p.radius + 'px', fontFamily: p.fontFamily || t.font, fontSize: p.size + 'px',
-        fontWeight: '600', letterSpacing: '0.02em', outline: 'none',
+      // `inline-table` so the wrapper's text-align still positions it; the
+      // `align` attribute is the same instruction for Word, which ignores the
+      // display value. A full-width button is a plain 100% table instead.
+      const table = el('table', {
+        display: p.full ? 'table' : 'inline-table', width: p.full ? '100%' : 'auto', borderCollapse: 'separate',
+      }, { role: 'presentation', cellpadding: '0', cellspacing: '0', border: '0', align: p.full ? undefined : p.align });
+      const td = el('td', {
+        background: p.bg, borderRadius: p.radius + 'px', padding: p.py + 'px ' + p.px + 'px', textAlign: 'center',
         // Outline-style buttons (transparent fill + border) are a standard
         // email pattern; the color falls back to the label color so a bare
         // "outline thickness" bump looks right without a second step.
         border: p.borderW ? p.borderW + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.borderColor || p.color) : '0',
-      }, { href: p.href, ...editableAttrs(live), text: p.label });
+      }, { align: 'center', bgcolor: p.bg || undefined });
+      const a = el('a', {
+        display: 'block', color: p.color, textDecoration: 'none',
+        // Kept on the anchor as well as the cell: `classifyButton` reads the
+        // element carrying the background to decide something is a button at
+        // all, and a foreign client that drops the cell's paint still shows
+        // the pill. It costs one declaration.
+        background: p.bg, borderRadius: p.radius + 'px',
+        fontFamily: p.fontFamily || t.font, fontSize: p.size + 'px',
+        fontWeight: '600', letterSpacing: '0.02em', outline: 'none', ...FIT,
+      }, { href: linkHref(p.href), ...editableAttrs(live), text: p.label });
       a.addEventListener('click', (e) => e.preventDefault());
       // Button editing is deliberately plain: no focus-tracked `editing` state, no
       // paste handling, no floating RTE toolbar -- only its label commits on blur.
       if (live) a.addEventListener('blur', (e) => { if (e.target.textContent !== p.label) ctx.onBlur(b, 'label', e.target.textContent); });
-      wrap.appendChild(a);
+      td.appendChild(a);
+      const tr = el('tr'); tr.appendChild(td);
+      const tbody = el('tbody'); tbody.appendChild(tr);
+      table.appendChild(tbody);
+      wrap.appendChild(table);
       return wrap;
     }
     case 'divider': {
@@ -139,7 +205,7 @@ export function blockBody(b, theme, live, ctx) {
           borderRadius: shape === 'circle' ? '50%' : shape === 'square' ? Math.round(box * 0.28) + 'px' : '0',
           color: iconColor, background: badge ? source : 'transparent',
           border: shape === 'outline' ? '1px solid ' + source : '0',
-        }, { href: it.href, title: it.label });
+        }, { href: linkHref(it.href), title: it.label });
         a.addEventListener('click', (e) => e.preventDefault());
         let provided = null;
         if (ctx && ctx.iconProvider) { try { provided = ctx.iconProvider(key, { label: it.label, size: p.size, color: iconColor }); } catch { provided = null; } }
@@ -154,7 +220,7 @@ export function blockBody(b, theme, live, ctx) {
     }
     case 'video': {
       const wrap = el('div', { padding: '4px 0', textAlign: 'center' }, attr);
-      const a = el('a', { display: 'block', position: 'relative' }, { href: p.href });
+      const a = el('a', { display: 'block', position: 'relative' }, { href: linkHref(p.href) });
       a.addEventListener('click', (e) => e.preventDefault());
       a.appendChild(el('img', { width: '100%', display: 'block', border: '0' }, { src: p.src, alt: p.caption }));
       const badge = el('span', { position: 'absolute', inset: '0', display: 'flex', alignItems: 'center', justifyContent: 'center' });
@@ -184,7 +250,13 @@ export function blockBody(b, theme, live, ctx) {
       // instead of re-rendering the editor (see the tick in editor-core.js).
       const wrap = el('div', { padding: '10px 0', textAlign: 'center', fontFamily: p.fontFamily || t.font, color: p.color }, live ? Object.assign({ 'data-mc-countdown': p.target }, attr) : attr);
       wrap.appendChild(el('div', { fontSize: '12px', letterSpacing: '0.14em', textTransform: 'uppercase', opacity: '0.6', marginBottom: '10px' }, { text: p.label }));
-      const row = el('div', { display: 'flex', justifyContent: 'center', gap: '10px' });
+      // Wraps rather than overhangs. Four 84px boxes plus their gaps need
+      // 366px, so in any column narrower than that -- a 50/50 split of a
+      // 620px sheet is 296px -- the unwrapped row used to run out over the
+      // next column, and in the sent email it dragged its own cell open to
+      // 386px against its neighbours' 94px. Wrapping keeps the digits legible
+      // at any width; a row with the space for one line still gets one line.
+      const row = el('div', { display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '10px' });
       parts.forEach(([lab, v]) => {
         const box = el('div', { border: '1px solid ' + p.color + '33', padding: '9px 12px', minWidth: '58px' });
         box.appendChild(el('div', { fontSize: '25px', fontFamily: p.fontFamily || t.font, fontWeight: '700', lineHeight: '1' }, live ? { text: String(v).padStart(2, '0'), 'data-mc-count': lab } : { text: String(v).padStart(2, '0') }));
@@ -197,7 +269,14 @@ export function blockBody(b, theme, live, ctx) {
     case 'menu': {
       const wrap = el('div', { textAlign: p.align, padding: '10px 0' }, attr);
       parseItems(p.items).forEach((it) => {
-        const a = el('a', { color: p.color, fontSize: p.size + 'px', fontFamily: p.fontFamily || t.font, textDecoration: 'none', margin: '0 ' + p.gap / 2 + 'px', letterSpacing: '0.12em', textTransform: 'uppercase' }, { href: it.href, text: it.label });
+        // `inline-block`, not the default inline: adjacent inline *text* runs
+        // offer no soft-wrap opportunity between them, and these anchors are
+        // appended with no whitespace in between -- so a menu too wide for its
+        // column ran straight off the edge instead of wrapping onto a second
+        // line (item 3 of a 3-item menu started 18px past a 148px column). An
+        // inline-block is an atomic inline, which does get a break opportunity
+        // either side of it, exactly as the social row already relied on.
+        const a = el('a', { display: 'inline-block', color: p.color, fontSize: p.size + 'px', fontFamily: p.fontFamily || t.font, textDecoration: 'none', margin: '0 ' + p.gap / 2 + 'px', letterSpacing: '0.12em', textTransform: 'uppercase' }, { href: linkHref(it.href), text: it.label });
         a.addEventListener('click', (e) => e.preventDefault());
         wrap.appendChild(a);
       });
@@ -208,7 +287,7 @@ export function blockBody(b, theme, live, ctx) {
       const head = el(p.level || 'h2', {
         margin: '0', padding: pad(p), fontSize: p.size + 'px', lineHeight: p.lh, textAlign: p.align,
         fontWeight: p.weight, letterSpacing: p.font === 'condensed' ? '0.005em' : '-0.01em',
-        color: p.color || t.text, outline: 'none',
+        color: p.color || t.text, outline: 'none', ...FIT,
         // An explicit per-block font beats the Condensed/Body style toggle.
         fontFamily: p.fontFamily || (p.font === 'condensed' ? "'Arial Narrow', 'Helvetica Neue Condensed', Helvetica, Arial, sans-serif" : t.font),
       }, { ...attr, ...editableAttrs(edit), text: m(p.text), 'data-focus-key': edit ? 'block:' + b.id : undefined });
@@ -218,7 +297,7 @@ export function blockBody(b, theme, live, ctx) {
     }
     case 'list': {
       const items = String(p.items || '').split('\n').filter((l) => l.trim());
-      const list = el(p.ordered ? 'ol' : 'ul', { margin: '0', padding: (p.py || 0) + 'px 0 ' + (p.py || 0) + 'px 22px', fontFamily: p.fontFamily || t.font, fontSize: p.size + 'px', lineHeight: p.lh, color: p.color || t.text }, attr);
+      const list = el(p.ordered ? 'ol' : 'ul', { margin: '0', padding: (p.py || 0) + 'px 0 ' + (p.py || 0) + 'px 22px', fontFamily: p.fontFamily || t.font, fontSize: p.size + 'px', lineHeight: p.lh, color: p.color || t.text, ...FIT }, attr);
       items.forEach((it) => {
         const li = el('li', { marginBottom: p.gap + 'px' }, { html: m(it) });
         list.appendChild(li);
@@ -241,6 +320,17 @@ export function blockBody(b, theme, live, ctx) {
             fontWeight: isHead ? '600' : '400', outline: 'none',
             fontFamily: p.fontFamily || t.font,
             letterSpacing: isHead ? '0.06em' : 'normal', textTransform: isHead ? 'uppercase' : 'none', fontSize: isHead ? p.size + 1 + 'px' : p.size + 'px',
+            // See FIT: a `<table>` cannot be laid out narrower than its
+            // min-content width, so `width:100%` alone never made it fit a
+            // column smaller than the sum of its longest cells (224px for the
+            // stock three-column table -- wider than a 3- or 4-way split).
+            // Letting the cells break brings that floor down to the column.
+            // Deliberately *not* `table-layout:fixed`, the usual reflex here:
+            // fixed would also fit, but it divides the width evenly and would
+            // silently re-proportion every table already in a saved document.
+            // Breaking keeps the content-proportional columns (measured
+            // 53/42/39 against fixed's 45/45/45).
+            ...FIT,
           }, { ...editableAttrs(edit), text: m(cell), 'data-focus-key': edit ? 'block:' + b.id + ':c' + ri + '-' + ci : undefined });
           if (edit) {
             // stopPropagation is load-bearing (a bubbled click would select
@@ -283,9 +373,15 @@ export function blockBody(b, theme, live, ctx) {
         borderTop: borderSide(p.topBorder), borderRight: borderSide(p.rightBorder),
         borderBottom: borderSide(p.bottomBorder), borderLeft: borderSide(p.leftBorder),
         borderRadius: p.radius + 'px', padding: p.pad + 'px', textAlign: p.align,
+        // `maxWidth` has to cap the box the reader sees, not its text area:
+        // under the default content-box sizing the padding and border were
+        // added *outside* the cap, so a box set to 60% of a 296px column
+        // painted 212px wide instead of 178. The default 100% is unaffected
+        // either way -- an auto-width block already stops at the column edge.
+        boxSizing: 'border-box',
         minHeight: p.minH ? p.minH + 'px' : 'auto', maxWidth: p.maxW + '%', margin: p.align === 'center' ? '0 auto' : '0',
         boxShadow: p.shadow ? '0 10px 30px rgba(29,31,32,0.12)' : 'none',
-        fontFamily: t.font, color: t.text, fontSize: '15px', lineHeight: '1.6',
+        fontFamily: t.font, color: t.text, fontSize: '15px', lineHeight: '1.6', ...FIT,
       }, { ...attr, ...editableAttrs(edit), html: m(p.html), 'data-focus-key': edit ? 'block:' + b.id : undefined });
       if (edit) wireEditable(box, b, 'html', ctx, false);
       if (!live) return box;
@@ -312,8 +408,15 @@ export function blockBody(b, theme, live, ctx) {
       if (!p.end) band.appendChild(el('span', { fontFamily: 'ui-monospace,monospace', fontSize: '11.5px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, { text: '{{ ' + (p.expr || '…') + ' }}' }));
       return band;
     }
+    // `pre-wrap`, not `pre`: `overflow-x:auto` gives the canvas a scrollbar
+    // and so looked contained here, but a mail client has no scrollbar to
+    // offer and sizes the cell to the longest line anyway -- a 33% column
+    // measured 371px against its neighbours' ~100px. Wrapping the long lines
+    // is the one option that keeps the sample readable and the row intact;
+    // `anywhere` covers a single unbroken line with no spaces to break at.
+    // The horizontal scroll stays for the canvas, where it still helps.
     case 'codeblock':
-      return el('pre', { margin: '0', padding: p.pad + 'px', background: p.bg, color: p.color, fontFamily: 'ui-monospace, Menlo, monospace', fontSize: p.size + 'px', lineHeight: '1.6', overflowX: 'auto', whiteSpace: 'pre' }, { ...attr, text: m(p.code) });
+      return el('pre', { margin: '0', padding: p.pad + 'px', background: p.bg, color: p.color, fontFamily: 'ui-monospace, Menlo, monospace', fontSize: p.size + 'px', lineHeight: '1.6', overflowX: 'auto', whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }, { ...attr, text: m(p.code) });
     default:
       return el('div');
   }

package/src/render/canvas.js

@@ -231,7 +231,11 @@ export function renderDoc(core, live) {
       showLine(rowDropTracker, rowLines[index]);
     });
     page.addEventListener('dragleave', (e) => { if (e.target === root || e.target === page) hideActive(rowDropTracker); });
-    page.addEventListener('drop', (e) => { hideActive(rowDropTracker); core.canvasDrop(e); });
+    // Measured against `root`, exactly as the line above it was: the slots are
+    // the sheet's children, not the page's, and deriving the index a second
+    // time from the event's own target is what used to send every dropped
+    // section to index 0 while the line sat where the pointer actually was.
+    page.addEventListener('drop', (e) => { hideActive(rowDropTracker); core.canvasDrop(e, core.indexFromPoint(root, e.clientY)); });
   }
 
   d.rows.forEach((r, ri) => {
@@ -265,14 +269,50 @@ export function renderDoc(core, live) {
       rowEl.appendChild(grip);
     }
 
-    const colsEl = el('div', colsWrap(r.props));
+    /*
+     * The mobile preview lays out exactly the way the sent email does. The
+     * device switch used to do nothing but narrow the sheet to 375px, so a
+     * 4-column row previewed as four 60px slivers -- a layout no recipient
+     * would ever see, since the exported stylesheet collapses that row below
+     * the content width. Previewing the wide layout at a narrow width was
+     * showing a page that does not exist.
+     *
+     * The three modes mirror `mobilePlan` in core/export.js: one-up stack,
+     * two-up grid, or the desktop layout kept as-is. Reverse flips the order,
+     * which is why this uses flex here too -- the same mechanism the media
+     * query uses, so the preview cannot drift from the output.
+     */
+    const mobile = core.state.device === 'mobile' && r.cols.length > 1;
+    const mMode = r.props.mobileCols === undefined ? 1 : r.props.mobileCols;
+    const stacked = mobile && mMode !== 'keep';
+    const twoUp = stacked && String(mMode) === '2';
+    const reversed = stacked && r.props.mobileOrder === 'reverse';
+    const colsEl = el('div', stacked
+      ? (twoUp || reversed
+        ? {
+          display: 'flex',
+          flexWrap: twoUp && reversed ? 'wrap-reverse' : 'wrap',
+          flexDirection: twoUp ? (reversed ? 'row-reverse' : 'row') : (reversed ? 'column-reverse' : 'column'),
+        }
+        : { display: 'block' })
+      : colsWrap(r.props));
     r.cols.forEach((c, ci) => {
       const colLines = [];
       const items = [];
       c.blocks.forEach((b, bi) => {
+        /*
+         * Device visibility. In the static preview -- the honest picture of
+         * what is sent -- a block the current device would not receive is not
+         * drawn at all, matching the exported `.mc-only-d` / `.mc-only-m`
+         * rules. On the editable canvas it is drawn faded instead: hiding it
+         * outright would leave the user with a block they cannot select,
+         * move or set back to "all devices".
+         */
+        const hiddenHere = b.props.vis === (core.state.device === 'mobile' ? 'desktop' : 'mobile');
+        if (!live && hiddenHere) return;
         if (live) { const line = dropLine(); colLines.push(line); items.push(line); }
         const bSel = live && sel && sel.id === b.id;
-        const bWrap = el('div', Object.assign({ position: 'relative' }, boxStyle(b.props)), { 'data-mc-slot': '1', draggable: live ? 'true' : undefined, class: live ? `mc-block-el${bSel ? ' is-selected' : ''}` : undefined });
+        const bWrap = el('div', Object.assign({ position: 'relative', opacity: hiddenHere ? '0.4' : '' }, boxStyle(b.props)), { 'data-mc-slot': '1', draggable: live ? 'true' : undefined, class: live ? `mc-block-el${bSel ? ' is-selected' : ''}` : undefined });
         if (live) {
           bWrap.addEventListener('dragstart', core.startDrag({ kind: 'move-block', id: b.id }));
           bWrap.addEventListener('dragend', () => { core.drag = null; hideActive(rowDropTracker); hideActive(colTracker); });
@@ -313,7 +353,13 @@ export function renderDoc(core, live) {
       if (live && !c.blocks.length) {
         items.push(el('div', { border: '1px dashed var(--ed-accent-sheet-line)', borderRadius: 'var(--ed-radius-sm)', color: 'var(--ed-faint)', fontFamily: 'ui-monospace,monospace', fontSize: '9.5px', letterSpacing: '0.14em', textTransform: 'uppercase', padding: '24px 8px', textAlign: 'center' }, { text: 'drop block' }));
       }
-      const colEl = el('div', colStyle(r.props, c));
+      // Stacked, a column is simply a full-width block -- the flex sizing and
+      // the horizontal gutter both belong to the side-by-side layout only.
+      // Two-up takes half, box-sized so its own padding cannot push it over
+      // the line and wrap every cell onto a row of its own.
+      const colEl = el('div', stacked
+        ? (twoUp ? { flex: '0 0 50%', maxWidth: '50%', boxSizing: 'border-box' } : { width: '100%' })
+        : colStyle(r.props, c));
       // Column-level styling lives on an inner wrapper, not on colEl itself:
       // colEl's padding is the inter-column gutter (colStyle), and a painted
       // background must stop at the column's visual edge, not bleed across

package/src/render/fields.js

@@ -1,5 +1,6 @@
 import { icon, brandIcon, socialKey, SOCIAL_BRAND, contrastInk } from '../core/icons.js';
 import { parseItems } from '../core/parse.js';
+import { linkHref } from '../core/sanitize.js';
 
 function el(tag, style, attrs) {
   const node = document.createElement(tag);
@@ -226,7 +227,14 @@ function renderRichLinks(f) {
     const urlCommit = typeCommit((v) => change(i, (a) => a.setAttribute('href', v)));
     url.addEventListener('input', (e) => urlCommit.call(e.target.value));
     url.addEventListener('focus', () => { url.style.borderColor = 'var(--ed-accent)'; url.style.outline = 'none'; });
-    url.addEventListener('blur', () => { url.style.borderColor = 'var(--ed-line)'; urlCommit.flush(); });
+    url.addEventListener('blur', () => {
+      url.style.borderColor = 'var(--ed-line)';
+      // Scheme normalization happens on the way out, never per keystroke: a
+      // half-typed "h" rewritten to "https://h" under the caret is unusable.
+      url.value = linkHref(url.value);
+      urlCommit.call(url.value);
+      urlCommit.flush();
+    });
 
     const targetLabel = el('label', { display: 'flex', alignItems: 'center', gap: '6px', marginTop: '7px', width: 'fit-content', color: 'var(--ed-muted)', cursor: 'pointer', fontFamily: 'var(--ed-font)', fontSize: '10.5px', fontWeight: '500' });
     const target = el('input', { accentColor: 'var(--ed-accent)', cursor: 'pointer' }, { type: 'checkbox', 'data-focus-key': `f${f.key}-link-target-${i}` });

package/src/render/screenshot.js

@@ -124,9 +124,20 @@ export const captureTemplatePng = async function (core, mountInto, scale = 2) {
       img.onerror = () => reject(new Error('SVG rasterization failed'));
       img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
     });
+    // WebKit fires `load` on an SVG-as-image before it is reliably
+    // drawable, and drawing on that tick yields a blank or half-laid-out
+    // frame. Same `decode()` guard the inner images get above.
+    if (img.decode) await img.decode().catch(() => {});
+    // Safari caps total canvas area, and past the cap it hands back a
+    // *blank* canvas that still encodes successfully -- a silently empty
+    // PNG with nothing thrown to catch. Long newsletters reach it easily
+    // at 2x (a 680x4000 template is 10.9M device pixels). Scale the
+    // capture down to fit instead of returning an empty image.
+    const MAX_CANVAS_AREA = 16e6;
+    const fit = Math.min(scale, Math.sqrt(MAX_CANVAS_AREA / Math.max(1, w * h)));
     const canvas = document.createElement('canvas');
-    canvas.width = Math.max(1, Math.round(w * scale));
-    canvas.height = Math.max(1, Math.round(h * scale));
+    canvas.width = Math.max(1, Math.round(w * fit));
+    canvas.height = Math.max(1, Math.round(h * fit));
     const ctx = canvas.getContext('2d');
     ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
     return await new Promise((resolve, reject) => {

package/src/render/style.js

@@ -23,6 +23,10 @@ export const STYLE = `
   /* The accent as it must read on the email sheet, which is a white page in
      both themes -- so this family does NOT flip with the chrome (see the dark
      palette below, where it is deliberately not overridden). */
+  /* Logo ink. Deliberately literal rather than accent-derived: the host can
+     repaint the chrome through the brand attribute, and a logo that follows
+     it stops being the logo. Values are the official light artwork. */
+  --ed-logo-mark: #2D86C7; --ed-logo-text: #3C3939;
   --ed-accent-sheet: #0065b3; --ed-accent-sheet-strong: #004f8c; --ed-accent-sheet-ink: #ffffff;
   --ed-accent-sheet-line: rgba(0,101,179,0.5);
   --ed-grid: rgba(71,85,105,0.10);
@@ -43,6 +47,8 @@ export const STYLE = `
   --ed-panel-label: #e2e8f0; --ed-panel-value: #c0cad8; --ed-panel-meta: #8d9aae;
   --ed-accent: #58a8e3; --ed-accent-strong: #8fc4ec; --ed-accent-ink: #08111f; --ed-soft: rgba(88,168,227,0.13);
   --ed-accent-tint: #8fcdf2; --ed-glow: rgba(88,168,227,0.28); --ed-select: rgba(88,168,227,0.3);
+  /* The official dark-mode logo artwork: mark and wordmark both go light. */
+  --ed-logo-mark: #F2F2F2; --ed-logo-text: #EEEEEE;
   --ed-grid: rgba(148,163,184,0.08);
   --ed-danger: #f2777c; --ed-danger-soft: rgba(242,119,124,0.14);
   --ed-success: #4ade95; --ed-success-soft: rgba(74,222,149,0.14);
@@ -151,14 +157,9 @@ export const STYLE = `
 .mc-footer-link { cursor: pointer; transition: color 0.14s ease; }
 .mc-footer-link:hover { color: var(--ed-accent); text-decoration: underline; }
 
-/* Brand mark -- the small gradient envelope glyph in the header. */
-.mc-brand-mark {
-  display: flex; align-items: center; justify-content: center; flex: none;
-  width: 26px; height: 26px; border-radius: 8px;
-  background: linear-gradient(145deg, var(--ed-accent-tint), var(--ed-accent) 55%, var(--ed-accent-strong));
-  box-shadow: 0 5px 14px var(--ed-glow);
-  color: #ffffff;
-}
+/* The header logo. It is the official lockup artwork, so it gets no chip, no
+   gradient and no recolouring -- only a height. */
+.mc-brand { display: flex; align-items: center; flex: none; }
 
 /*
  * Shared segmented-control shell -- one bordered/backed track that owns the
@@ -269,9 +270,7 @@ export const STYLE = `
 /* Opaque, no backdrop-filter: the header sits over the scrolling canvas, so a
    backdrop blur re-composites every scroll frame -- visible scroll jank. */
 #mc .mc-header { padding: 0 18px !important; background: var(--ed-panel) !important; }
-#mc .mc-brand-mark { width: 30px !important; height: 30px !important; border-radius: 9px; background: linear-gradient(145deg, var(--ed-accent-tint), var(--ed-accent) 56%, var(--ed-accent-strong)) !important; box-shadow: 0 7px 18px var(--ed-glow); }
-#mc .mc-brand-mark svg { width: 20px; height: 20px; display: block; color: #fff; }
-#mc .mc-brand-name { font-family: var(--ed-font) !important; font-size: 17px !important; letter-spacing: -.03em !important; }
+#mc .mc-brand svg { height: 34px; width: auto; display: block; }
 #mc .mc-header button { font-family: var(--ed-font) !important; font-size: 10.5px !important; font-weight: 600; letter-spacing: .015em !important; text-transform: none !important; }
 #mc .mc-header > div { border-radius: 10px; }
 #mc .mc-segment { gap: 3px !important; padding: 3px !important; border: 0 !important; border-radius: 10px; background: var(--ed-panel-2) !important; }