@seliseblocks/mailcraft 0.1.0

package/src/render/focus-preserve.js

@@ -0,0 +1,158 @@
+/**
+ * The original relies on React's reconciliation to keep a focused `<input>`'s
+ * DOM node alive across a per-keystroke re-render (Design-tab fields, the
+ * campaign title, AI brief/goal/tone, search boxes, the code textarea all
+ * commit on every `input` event, not just on blur). This renderer has no
+ * VDOM -- it rebuilds DOM from scratch -- so without this, typing a single
+ * character into any of those fields would lose focus immediately after.
+ *
+ * The fix: every such input (and every RTE-edited block: text, heading, box,
+ * html) carries a stable `data-focus-key`. Before a rebuild, capture the
+ * focused element's key + selection range; after, find the new element with
+ * the same key and restore focus and the caret position, so the net effect
+ * matches React's outcome even though the DOM node identity changed.
+ *
+ * Contenteditable blocks need this just as much as plain inputs: focusing
+ * one sets `core.state.editing`, and `EditorCore.mountKeyboard`'s
+ * `selectionchange` listener refreshes the toolbar's active states on every
+ * caret move. Without
+ * caret-position restoration here, that would blow away and recreate the
+ * focused div each time, so the very first keystroke would silently drop
+ * focus and the RTE toolbar would appear to do nothing.
+ */
+export function withFocusPreserved(root, rebuild) {
+  const active = root.activeElement;
+  const key = active && active.dataset ? active.dataset.focusKey : null;
+  let selStart = null; let selEnd = null; let scrollTop = null; let editable = false;
+  // A range slider mid-drag is the one focus-preservation case where
+  // restoring focus on a rebuilt node isn't enough: dragging its thumb is a
+  // native, implicit mouse capture tied to that exact element, and replacing
+  // the element (as every other rebuilt input does here) silently drops that
+  // capture -- the thumb stops tracking the mouse and the slider feels like
+  // it's snapping/jumping instead of gliding. So this one case skips
+  // rebuilding the node entirely: the live element is pulled out before
+  // `rebuild()` and spliced back into the freshly-built tree afterward.
+  const rangeNode = key && active.tagName === 'INPUT' && active.type === 'range' ? active : null;
+  if (rangeNode) {
+    // nothing to capture -- the node itself is preserved below, after rebuild()
+  } else if (key && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA')) {
+    try { selStart = active.selectionStart; selEnd = active.selectionEnd; } catch { /* some input types don't support selection */ }
+    scrollTop = active.scrollTop;
+  } else if (key && active.isContentEditable) {
+    editable = true;
+    const sel = shadowSelection(root);
+    if (sel && sel.rangeCount && active.contains(sel.anchorNode)) {
+      const range = sel.getRangeAt(0);
+      selStart = textOffset(active, range.startContainer, range.startOffset);
+      selEnd = textOffset(active, range.endContainer, range.endOffset);
+    }
+    scrollTop = active.scrollTop;
+  }
+
+  rebuild();
+
+  if (!key) return;
+  const next = root.querySelector(`[data-focus-key="${cssEscape(key)}"]`);
+  if (!next) return;
+  if (rangeNode) {
+    for (const attr of ['min', 'max', 'step']) {
+      const v = next.getAttribute(attr);
+      if (v === null) rangeNode.removeAttribute(attr); else rangeNode.setAttribute(attr, v);
+    }
+    next.replaceWith(rangeNode);
+    return;
+  }
+  if (editable) {
+    // Set the Range *before* focusing: focusing a contenteditable establishes
+    // its own default collapsed selection as a side effect, and doing that
+    // after we've placed the real caret fires a second, out-of-order
+    // `selectionchange` notification for that now-stale default -- which
+    // arrives *after* the one for our real restore, so it looks like a fresh,
+    // later selection change and clobbers the correct caret right back to
+    // collapsed. Setting the range first means `.focus()` adopts the
+    // selection that's already there instead of replacing it.
+    if (selStart != null) {
+      try {
+        const range = document.createRange();
+        setPointAtOffset(range, next, selStart, true);
+        setPointAtOffset(range, next, selEnd, false);
+        const sel = shadowSelection(root);
+        sel.removeAllRanges();
+        sel.addRange(range);
+      } catch { /* ignore -- element structure changed under the caret */ }
+    }
+    // `preventScroll` matters a lot here: this `.focus()` fires on every
+    // re-render of a block mid-edit (every keystroke), not just once. Without
+    // it, the browser's default focus-scroll-into-view runs every time --
+    // harmless on a short template, but on a long one it yanks the canvas
+    // back toward the focused block on every keystroke, fighting whatever
+    // scroll position the user actually had.
+    next.focus({ preventScroll: true });
+  } else {
+    next.focus({ preventScroll: true });
+    if (selStart != null) {
+      try { next.setSelectionRange(selStart, selEnd); } catch { /* ignore */ }
+    }
+  }
+  if (scrollTop != null) next.scrollTop = scrollTop;
+}
+
+/**
+ * `document.getSelection()`/`window.getSelection()` is redacted to the host
+ * document when the real selection lives inside an open shadow root -- in
+ * Chrome its `anchorNode` reports as `<body>` rather than the actual text
+ * node being edited, even though the visible caret and `execCommand` both
+ * still operate on the real position. Reading through that redacted object
+ * (as this file needs to, to compute/restore a caret offset) silently gives
+ * back garbage -- not an error, just always "position 0" -- which is what
+ * made every re-render-while-typing reset the caret to the start and type
+ * new characters in reverse. `ShadowRoot.getSelection()` (Chromium-only; no
+ * standard equivalent yet) reports the real node/offset.
+ */
+function shadowSelection(root) {
+  return typeof root.getSelection === 'function' ? root.getSelection() : window.getSelection();
+}
+
+/** Character offset of (node, offset) counting only text within `root`, walking in document order. */
+export function textOffset(root, node, offset) {
+  if (node.nodeType !== Node.TEXT_NODE) {
+    // A range boundary can land on an element (e.g. offset counts child nodes) --
+    // resolve it to the text position right before its `offset`-th child.
+    let n = 0;
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    let cur; let target = node.childNodes[offset];
+    if (!target) { while (walker.nextNode()) n += walker.currentNode.nodeValue.length; return n; }
+    while ((cur = walker.nextNode())) { if (cur === target || target.contains(cur)) return n; n += cur.nodeValue.length; }
+    return n;
+  }
+  let n = 0;
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let cur;
+  while ((cur = walker.nextNode())) {
+    if (cur === node) return n + offset;
+    n += cur.nodeValue.length;
+  }
+  return n;
+}
+
+/** Sets the start or end point of `range` to the text-offset position inside `root`. */
+function setPointAtOffset(range, root, targetOffset, isStart) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let n = 0; let cur; let last = null;
+  while ((cur = walker.nextNode())) {
+    last = cur;
+    const len = cur.nodeValue.length;
+    if (n + len >= targetOffset) {
+      const point = targetOffset - n;
+      if (isStart) range.setStart(cur, point); else range.setEnd(cur, point);
+      return;
+    }
+    n += len;
+  }
+  if (last) { if (isStart) range.setStart(last, last.nodeValue.length); else range.setEnd(last, last.nodeValue.length); }
+  else { if (isStart) range.setStart(root, 0); else range.setEnd(root, 0); }
+}
+
+function cssEscape(s) {
+  return String(s).replace(/["\\]/g, '\\$&');
+}

package/src/render/rte.js

@@ -0,0 +1,212 @@
+import { icon } from '../core/icons.js';
+import { TOKEN } from '../core/variables.js';
+import { typeCommit } from './fields.js';
+
+function el(tag, style, attrs) {
+  const node = document.createElement(tag);
+  if (style) Object.assign(node.style, style);
+  if (attrs) for (const [k, v] of Object.entries(attrs)) {
+    if (k === 'text') node.textContent = v;
+    else if (v !== undefined) node.setAttribute(k, v);
+  }
+  return node;
+}
+
+function st(cmd) { try { return document.queryCommandState(cmd); } catch { return false; } }
+
+/** Local equivalent of `mailcraft-editor.js`'s `tip()` -- this module doesn't import `elS`, so it builds the same `.mc-tooltip` markup directly. Every RTE control renders its tooltip above itself (`dir: 'up'`), since the toolbar already floats above the block it's editing. */
+function tipRte(node, label) {
+  node.style.position = 'relative';
+  if (!node.hasAttribute('aria-label')) node.setAttribute('aria-label', label);
+  node.appendChild(el('span', {}, { class: 'mc-rte-tooltip', text: label }));
+  return node;
+}
+
+/** Humanizes a variable name for display (`first_name` -> `First name`) while the inserted/appended value always stays the exact `{{ token }}` -- display and data are kept deliberately separate. */
+function humanize(v) {
+  const s = String(v || '').replace(/[_.]+/g, ' ').trim();
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+/** Ported from the original `rte(b)` -- the floating formatting toolbar shown above a focused rich-text block. */
+export function renderRte(core, b) {
+  const t = core.t;
+  const btn = (name, title, fn, active) => {
+    const node = el('button', {
+      border: '0', borderRadius: '7px', background: active ? 'var(--ed-accent)' : 'transparent', color: active ? 'var(--ed-accent-ink)' : 'var(--rte-muted)',
+      cursor: 'pointer', width: '28px', height: '28px', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none',
+    }, { type: 'button', title, 'data-rte-control': '1', 'data-active': active ? 'true' : 'false' });
+    node.appendChild(icon(name, 14));
+    node.addEventListener('mousedown', (e) => { e.preventDefault(); e.stopPropagation(); });
+    node.addEventListener('click', (e) => {
+      e.preventDefault(); e.stopPropagation(); fn();
+      if (core.onFormatChange) core.onFormatChange();
+    });
+    tipRte(node, title);
+    return node;
+  };
+  const sep = () => el('span', { width: '1px', height: '18px', background: 'var(--rte-border)', margin: '0 4px', flex: 'none' });
+  /** A native `<input type="color">` behind an icon + a thin current-color swatch bar -- `mousedown`'s `preventDefault` keeps the live text selection from collapsing before the picker opens, the same guard every other control here uses; `core.exec()`'s `savedRange` fallback (editor-core.js) covers the rest, since opening the OS color panel unavoidably moves focus away from the block regardless. */
+  const colorPicker = (iconName, cmd, initial, title) => {
+    const label = el('label', {
+      position: 'relative', width: '30px', height: '28px', borderRadius: '7px', background: 'var(--rte-input)',
+      boxShadow: 'inset 0 0 0 1px var(--rte-border)', color: 'var(--rte-text)', cursor: 'pointer',
+      display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none', overflow: 'hidden',
+    }, { 'data-rte-picker': '1', title });
+    label.appendChild(icon(iconName, 14));
+    const swatch = el('span', { position: 'absolute', left: '6px', right: '6px', bottom: '4px', height: '3px', borderRadius: '99px', background: initial, pointerEvents: 'none' });
+    label.appendChild(swatch);
+    const input = el('input', { position: 'absolute', inset: '0', width: '100%', height: '100%', opacity: '0', margin: '0', cursor: 'pointer' }, { type: 'color', value: initial.startsWith('#') ? initial : '#1d1f20' });
+    input.addEventListener('mousedown', (e) => e.stopPropagation());
+    input.addEventListener('click', (e) => e.stopPropagation());
+    input.addEventListener('input', (e) => { swatch.style.background = e.target.value; core.exec(cmd, e.target.value); });
+    label.appendChild(input);
+    tipRte(label, title);
+    return label;
+  };
+  const rowStyle = { display: 'flex', alignItems: 'center', gap: '2px', whiteSpace: 'nowrap' };
+  const selectStyle = {
+    background: 'var(--rte-input)', color: 'var(--rte-text)', border: '1px solid var(--rte-border)', borderRadius: '7px',
+    fontFamily: 'var(--ed-font)', fontSize: '10.5px', fontWeight: '500', letterSpacing: '0', padding: '5px 24px 5px 27px', height: '28px', cursor: 'pointer', maxWidth: '150px', appearance: 'none', WebkitAppearance: 'none', outline: 'none',
+  };
+  const selectControl = (label, value, width, iconName, options, onChange) => {
+    const wrap = el('label', { position: 'relative', display: 'inline-flex', alignItems: 'center', color: 'var(--rte-muted)' }, { 'data-rte-select': '1', 'aria-label': label });
+    const lead = el('span', { position: 'absolute', left: '8px', zIndex: '2', pointerEvents: 'none', display: 'flex' });
+    lead.appendChild(icon(iconName, 13));
+    const select = el('select', Object.assign({}, selectStyle, { width }), { title: label });
+    options.forEach(([v, l]) => { const o = document.createElement('option'); o.value = v; o.textContent = l; select.appendChild(o); });
+    select.value = value;
+    select.addEventListener('mousedown', (e) => e.stopPropagation());
+    select.addEventListener('change', onChange);
+    const tail = el('span', { position: 'absolute', right: '7px', pointerEvents: 'none', display: 'flex' });
+    tail.appendChild(icon('chevronDown', 12));
+    wrap.append(lead, select, tail);
+    return wrap;
+  };
+
+  const vars = core.vars();
+  const root = el('div', {
+    position: 'absolute', top: '-82px', left: '0', zIndex: '9', display: 'grid', gap: '5px',
+    background: 'var(--rte-bg)', border: '1px solid var(--rte-border)', borderRadius: '8px', padding: '7px 8px', boxShadow: 'var(--rte-shadow)',
+  }, { class: 'mc-rte', 'data-mc-rte': '1', 'data-rte-root': '1' });
+  root.addEventListener('pointerdown', () => { core.rteActive = true; }, true);
+  root.addEventListener('mousedown', (e) => e.stopPropagation());
+  root.addEventListener('click', (e) => e.stopPropagation());
+
+  const r1 = el('div', rowStyle);
+  const fmt = selectControl(t('rte.textStyle'), core.currentTag(), '118px', 'typeColor',
+    [['', t('rte.textStyle')], ['p', 'Paragraph'], ['h1', 'Heading 1'], ['h2', 'Heading 2'], ['h3', 'Heading 3'], ['h4', 'Heading 4'], ['h5', 'Heading 5'], ['h6', 'Small heading'], ['blockquote', 'Block quote']], (e) => {
+    if (e.target.value) {
+      core.exec('formatBlock', e.target.value);
+      if (core.onFormatChange) core.onFormatChange();
+    }
+  });
+  r1.append(
+    fmt, sep(),
+    btn('bold', 'Bold', () => core.exec('bold'), st('bold')),
+    btn('italic', 'Italic', () => core.exec('italic'), st('italic')),
+    btn('underline', 'Underline', () => core.exec('underline'), st('underline')),
+    btn('strike', 'Strikethrough', () => core.exec('strikeThrough'), st('strikeThrough')),
+    btn('inlineCode', 'Inline code', () => core.exec('insertHTML', '<code style="font-family:ui-monospace,monospace;font-size:0.92em;background:var(--ed-soft);padding:1px 4px">' + (core.getSelection().toString() || 'code') + '</code>')),
+    btn('superscript', 'Superscript', () => core.exec('superscript'), st('superscript')),
+    btn('subscript', 'Subscript', () => core.exec('subscript'), st('subscript')),
+    sep(),
+    btn('minus', 'Smaller text', () => core.size(b, -1)),
+    el('span', { fontFamily: 'var(--ed-font)', fontSize: '9.5px', color: 'var(--rte-muted)', minWidth: '32px', textAlign: 'center' }, { text: (b.props.size || 16) + 'px' }),
+    btn('plus', 'Larger text', () => core.size(b, 1)),
+  );
+
+  const r2 = el('div', rowStyle);
+  r2.append(
+    btn('alignLeft', 'Align left', () => core.exec('justifyLeft'), st('justifyLeft')),
+    btn('alignCenter', 'Align center', () => core.exec('justifyCenter'), st('justifyCenter')),
+    btn('alignRight', 'Align right', () => core.exec('justifyRight'), st('justifyRight')),
+    btn('alignJustify', 'Justify', () => core.exec('justifyFull'), st('justifyFull')),
+    sep(),
+    btn('list', 'Bullet list', () => core.exec('insertUnorderedList'), st('insertUnorderedList')),
+    btn('listOrdered', 'Numbered list', () => core.exec('insertOrderedList'), st('insertOrderedList')),
+    btn('outdent', 'Outdent', () => core.exec('outdent')),
+    btn('indent', 'Indent', () => core.exec('indent')),
+    sep(),
+    btn('link', 'Link — ⌘K', () => core.openLink(), !!core.state.linkDraft),
+    btn('unlink', 'Remove link', () => core.removeLink(b)),
+    btn('formatClear', t('rte.clearFormatting'), () => core.exec('removeFormat')),
+    sep(),
+    colorPicker('typeColor', 'foreColor', '#172033', t('rte.textColor')),
+    colorPicker('highlighter', 'hiliteColor', '#fef08a', t('rte.highlightColor')),
+    btn('eraser', t('rte.removeHighlight'), () => core.exec('hiliteColor', 'transparent')),
+    sep(),
+  );
+  const varOptions = [['', vars.length ? t('rte.mergeTags') : t('rte.noMergeTags')]].concat(vars.map((v) => [TOKEN(v), humanize(v)]));
+  r2.appendChild(selectControl(t('rte.mergeTags'), '', '132px', 'data', varOptions, (e) => {
+    if (e.target.value) { core.exec('insertText', e.target.value); e.target.value = ''; }
+  }));
+
+  root.appendChild(r1);
+  root.appendChild(r2);
+  if (core.state.linkDraft) root.appendChild(linkPopover(core, b, vars));
+  return root;
+}
+
+/** Ported from the original `linkPopover(b, vars)`. */
+function linkPopover(core, b, vars) {
+  const t = core.t;
+  const d = core.state.linkDraft;
+  const set = (patch) => core.setState({ linkDraft: Object.assign({}, core.state.linkDraft, patch) });
+  const inputStyle = {
+    flex: '1', minWidth: '0', background: 'var(--rte-input)', color: 'var(--rte-text)', border: '1px solid var(--rte-border)', borderRadius: '5px',
+    font: 'inherit', fontFamily: 'ui-monospace, monospace', fontSize: '11px', padding: '5px 7px',
+  };
+  const act = (label, primary, onClick) => {
+    const node = el('button', {
+      border: primary ? '0' : '1px solid var(--rte-border)', borderRadius: '5px', background: primary ? 'var(--ed-accent)' : 'transparent',
+      color: primary ? 'var(--ed-accent-ink)' : 'var(--rte-text)', cursor: 'pointer', padding: '5px 10px',
+      fontFamily: 'var(--ed-font)', fontSize: '10.5px', fontWeight: '600',
+    }, { type: 'button', text: label });
+    node.addEventListener('mousedown', (e) => e.preventDefault());
+    node.addEventListener('click', (e) => { e.preventDefault(); onClick(); });
+    return node;
+  };
+
+  const root = el('div', { display: 'flex', flexDirection: 'column', gap: '6px', borderTop: '1px solid var(--rte-border)', paddingTop: '6px', marginTop: '2px', minWidth: '380px' });
+
+  const r = el('div', { display: 'flex', alignItems: 'center', gap: '5px' });
+  const input = el('input', inputStyle, { placeholder: 'https://example.com' });
+  input.value = d.href;
+  setTimeout(() => input.focus(), 0);
+  // Debounced (typeCommit): each draft update re-renders everything. Flushed
+  // explicitly before applyLink -- both Enter and the Apply button (which
+  // suppresses blur on mousedown to keep the text selection) read the draft
+  // from state, so a pending keystroke commit must land first.
+  const hrefCommit = typeCommit((v) => set({ href: v }));
+  input.addEventListener('input', (e) => hrefCommit.call(e.target.value));
+  input.addEventListener('blur', () => hrefCommit.flush());
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') { e.preventDefault(); hrefCommit.flush(); core.applyLink(b); }
+    if (e.key === 'Escape') core.setState({ linkDraft: null });
+  });
+  r.appendChild(input);
+  if (vars.length) {
+    const sel = el('select', { background: 'var(--rte-input)', color: 'var(--rte-text)', border: '1px solid var(--rte-border)', borderRadius: '5px', fontFamily: 'var(--ed-font)', fontSize: '10.5px', padding: '4px', cursor: 'pointer', maxWidth: '110px' }, { title: t('rte.mergeTags') });
+    const ph = document.createElement('option'); ph.value = ''; ph.textContent = t('rte.mergeTags'); sel.appendChild(ph);
+    vars.forEach((v) => { const o = document.createElement('option'); o.value = TOKEN(v); o.textContent = humanize(v); sel.appendChild(o); });
+    sel.addEventListener('change', (e) => { if (e.target.value) { set({ href: (d.href || '') + e.target.value }); e.target.value = ''; } });
+    r.appendChild(sel);
+  }
+  root.appendChild(r);
+
+  const r2 = el('div', { display: 'flex', alignItems: 'center', gap: '8px' });
+  const label = el('label', { display: 'flex', alignItems: 'center', gap: '5px', color: 'var(--rte-muted)', fontFamily: 'var(--ed-font)', fontSize: '10.5px', fontWeight: '500', cursor: 'pointer' });
+  const cb = el('input', { accentColor: 'var(--ed-accent)', cursor: 'pointer' }, { type: 'checkbox' });
+  cb.checked = !!d.blank;
+  cb.addEventListener('change', (e) => set({ blank: e.target.checked }));
+  label.append(cb, 'Open in new tab');
+  r2.appendChild(label);
+  r2.appendChild(el('span', { flex: '1' }));
+  if (d.editing) r2.appendChild(act('Remove', false, () => core.removeLink(b)));
+  r2.appendChild(act('Cancel', false, () => core.setState({ linkDraft: null })));
+  r2.appendChild(act(d.editing ? 'Update' : 'Apply', true, () => { hrefCommit.flush(); core.applyLink(b); }));
+  root.appendChild(r2);
+
+  return root;
+}

package/src/render/screenshot.js

@@ -0,0 +1,132 @@
+import { renderDoc } from './canvas.js';
+
+/**
+ * Full-template screenshot, zero dependencies: render the same static tree
+ * the preview modal uses (inline styles only), wrap it in an SVG
+ * `<foreignObject>`, rasterize that through an `<img>` onto a canvas, and
+ * hand back a PNG Blob.
+ *
+ * Two hard rules of SVG-loaded-as-image. The first is that the SVG has to
+ * reach the `<img>` as a `data:` URI, never a `blob:` one: Chromium treats a
+ * blob-loaded SVG that contains a `<foreignObject>` as cross-origin content,
+ * so the canvas comes out tainted and `toBlob()` throws
+ * ("Tainted canvases may not be exported") -- i.e. every capture fails, with
+ * nothing in the console to say why. A `data:` URI of the same bytes is
+ * origin-clean and rasterizes identically.
+ *
+ * The second is that it may not fetch ANY
+ * external resource -- not "CORS applies", but a total network ban -- so
+ * every image has to already be a data: URI when the SVG is built. Uploads
+ * and the seeded placeholders are data: URIs by construction
+ * (core/assets.js, core/placeholder.js); anything else (a hand-typed image
+ * URL) is inlined here via a best-effort fetch, and a fetch the remote
+ * server refuses (no CORS header) degrades to a blank pixel instead of
+ * silently producing a tainted, unexportable canvas.
+ *
+ * Known limits, accepted: `<iframe>` embeds never paint inside foreignObject
+ * (they render as their reserved box), and web fonts are unavailable, so
+ * text falls back through the theme's system font stack -- which is what an
+ * email client would show anyway.
+ */
+
+const BLANK_PIXEL = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+
+function toDataUri(url) {
+  return fetch(url, { mode: 'cors' }).then((res) => {
+    if (!res.ok) throw new Error('fetch failed: ' + res.status);
+    return res.blob();
+  }).then((blob) => new Promise((resolve, reject) => {
+    const fr = new FileReader();
+    fr.onload = () => resolve(fr.result);
+    fr.onerror = reject;
+    fr.readAsDataURL(blob);
+  }));
+}
+
+async function inlineExternalImages(root) {
+  const jobs = [];
+  root.querySelectorAll('img').forEach((img) => {
+    const src = img.getAttribute('src') || '';
+    if (!src || src.startsWith('data:')) return;
+    jobs.push(toDataUri(src).then(
+      (uri) => { img.setAttribute('src', uri); },
+      () => { img.setAttribute('src', BLANK_PIXEL); },
+    ));
+  });
+  root.querySelectorAll('[style]').forEach((el) => {
+    const m = (el.style.backgroundImage || '').match(/url\(["']?(?!data:)([^"')]+)["']?\)/);
+    if (!m) return;
+    jobs.push(toDataUri(m[1]).then(
+      (uri) => { el.style.backgroundImage = 'url("' + uri + '")'; },
+      () => { el.style.backgroundImage = 'none'; },
+    ));
+  });
+  await Promise.all(jobs);
+}
+
+/**
+ * Renders the current document full-length (desktop width, independent of
+ * the device toggle and zoom) and returns a PNG Blob at `scale`x resolution.
+ * `mountInto` is any attached container inside the editor's shadow root --
+ * the tree must live in the live document briefly, off-screen, to lay out
+ * and be measured before serialization.
+ *
+ * (`export const` + async function expression, not `export async function`:
+ * build.js's transform only recognizes `export (const|function|class)`.)
+ */
+export const captureTemplatePng = async function (core, mountInto, scale = 2) {
+  const theme = core.state.doc.theme;
+  const pad = 32;
+  const wrapper = document.createElement('div');
+  // Off-screen but attached (fixed keeps it out of any scroll container's
+  // scrollHeight, so capturing never moves the user's canvas position).
+  wrapper.style.cssText = `position: fixed; left: -100000px; top: 0; width: ${theme.width + pad * 2}px; background: ${theme.bg}; padding: ${pad}px; box-sizing: border-box; display: flex; justify-content: center;`;
+  wrapper.setAttribute('aria-hidden', 'true');
+  // renderDoc sizes the sheet from `state.device`, so with the mobile toggle
+  // on it would return a 375px sheet floating inside this desktop-width
+  // wrapper. Borrow the state for the length of one synchronous render --
+  // nothing observes it in between, and no re-render is triggered.
+  const device = core.state.device;
+  core.state.device = 'desktop';
+  try {
+    wrapper.appendChild(renderDoc(core, false));
+  } finally {
+    core.state.device = device;
+  }
+  mountInto.appendChild(wrapper);
+  try {
+    await inlineExternalImages(wrapper);
+    // Heights depend on images' intrinsic ratios (blocks set width, not
+    // height) -- decode everything before measuring or tall images collapse.
+    await Promise.all(Array.from(wrapper.querySelectorAll('img')).map(
+      (img) => (img.decode ? img.decode().catch(() => {}) : Promise.resolve()),
+    ));
+    const w = wrapper.offsetWidth;
+    const h = wrapper.offsetHeight;
+    // Serialize a *clone* with the off-screen positioning stripped -- the
+    // wrapper's own `fixed; left: -100000px` would carry into the SVG and
+    // place the content outside the drawable area.
+    const copy = wrapper.cloneNode(true);
+    copy.style.position = 'static';
+    copy.style.left = 'auto';
+    const xml = new XMLSerializer().serializeToString(copy);
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}"><foreignObject width="100%" height="100%">${xml}</foreignObject></svg>`;
+
+    const img = new Image();
+    await new Promise((resolve, reject) => {
+      img.onload = resolve;
+      img.onerror = () => reject(new Error('SVG rasterization failed'));
+      img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+    });
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.max(1, Math.round(w * scale));
+    canvas.height = Math.max(1, Math.round(h * scale));
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    return await new Promise((resolve, reject) => {
+      canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('PNG encoding failed'))), 'image/png');
+    });
+  } finally {
+    wrapper.remove();
+  }
+};