@seliseblocks/mailcraft 0.1.0

package/src/render/block-body.js

@@ -0,0 +1,295 @@
+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';
+
+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 === 'html') node.innerHTML = v;
+    else if (k === 'text') node.textContent = v;
+    else if (v !== undefined) node.setAttribute(k, v);
+  }
+  return node;
+}
+
+function m(v) { return String(v == null ? '' : v); }
+
+/** An explicit block font owns every rich descendant; an empty value deliberately leaves imported inline typography untouched. */
+function overrideRichFont(root, fontFamily) {
+  if (!fontFamily) return;
+  root.querySelectorAll('[style]').forEach((node) => node.style.removeProperty('font-family'));
+}
+
+/**
+ * Ported from the original `blockBody(b, theme, live)`. `ctx` supplies the
+ * editing wiring that in the original lived on `this` (Component instance):
+ * `ctx.editingId`, `ctx.onFocus(block, el, key)`, `ctx.onBlur(block, key, value)`,
+ * `ctx.onPaste(block, plainOnly)`, `ctx.renderRte(block)` (returns the floating
+ * toolbar node or null), `ctx.onTableCellBlur(block, ri, ci, value)`, `ctx.now`
+ * (for the countdown), `ctx.vars` and `ctx.onInsertVariable` for the code-view escape hatch.
+ */
+export function blockBody(b, theme, live, ctx) {
+  const p = b.props; const t = theme;
+  const attr = live ? { 'data-mc-content': b.id } : {};
+
+  switch (b.type) {
+    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,
+      }, { ...attr, contenteditable: edit ? 'true' : undefined, spellcheck: 'false', 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
+      // a block font, however, those nested declarations outrank inheritance
+      // from this wrapper and made the Font control appear broken. Remove only
+      // that imported property from descendants; their size, color, spacing
+      // and other inline formatting remain intact, while the selected family
+      // now applies consistently in the canvas and exported read-back DOM.
+      overrideRichFont(content, p.fontFamily);
+      if (edit) wireEditable(content, b, 'html', ctx, false);
+      if (!live) return content;
+      return wrapWithRte(b, ctx, edit && ctx.editingId === b.id, content);
+    }
+    case 'image': {
+      const wrap = el('div', { padding: pad(p), textAlign: p.align, fontSize: '0' }, attr);
+      if (p.href) {
+        // 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 });
+        a.appendChild(el('img', { width: '100%', borderRadius: p.radius + 'px', display: 'block', border: '0' }, { src: p.src, alt: p.alt }));
+        wrap.appendChild(a);
+      } else {
+        wrap.appendChild(el('img', { width: p.width + '%', maxWidth: '100%', borderRadius: p.radius + 'px', display: 'inline-block', border: '0' }, { src: p.src, alt: p.alt }));
+      }
+      return wrap;
+    }
+    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',
+        // 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, contenteditable: live ? 'true' : undefined, spellcheck: 'false', 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);
+      return wrap;
+    }
+    case 'divider': {
+      const wrap = el('div', { padding: p.py + 'px 0' }, attr);
+      wrap.appendChild(el('div', { height: '0', width: p.width + '%', margin: '0 auto', borderTop: p.thickness + 'px ' + (p.lineStyle || 'solid') + ' ' + p.color }));
+      return wrap;
+    }
+    case 'spacer':
+      return el('div', { height: p.height + 'px' }, attr);
+    case 'social': {
+      // Two independent axes cover every style the block offers without a
+      // second hand-drawn icon set per platform: `palette` picks the source
+      // color (the block's one `color` prop, or each platform's own brand
+      // hex), `shape` picks the container -- bordered tap-target, bare icon,
+      // or a filled circle/square badge (the badge's icon color auto-flips
+      // black/white via `contrastInk` so light brand colors like Snapchat
+      // yellow stay legible).
+      const shape = p.shape || 'outline';
+      const palette = p.palette || 'custom';
+      const badge = shape === 'circle' || shape === 'square';
+      const box = Math.round((p.size || 20) * 1.9);
+      const wrap = el('div', { textAlign: p.align, padding: '8px 0' }, attr);
+      parseItems(p.items).forEach((it) => {
+        const key = socialKey(it.label);
+        const source = palette === 'brand' ? (SOCIAL_BRAND[key] || p.color) : p.color;
+        const iconColor = badge ? contrastInk(source) : source;
+        const a = el('a', {
+          display: 'inline-flex', flexDirection: p.showLabel ? 'column' : 'row', alignItems: 'center', justifyContent: 'center', gap: '5px',
+          width: p.showLabel ? 'auto' : box + 'px', height: p.showLabel ? 'auto' : box + 'px', padding: p.showLabel ? '7px 9px' : '0',
+          margin: '0 ' + (p.gap || 12) / 2 + 'px', verticalAlign: 'middle', textDecoration: 'none',
+          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 });
+        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; } }
+        a.appendChild(provided instanceof Node ? provided : brandIcon(key, p.size));
+        if (p.showLabel) {
+          const span = el('span', { fontFamily: p.fontFamily || t.font, fontSize: '10px', letterSpacing: '0.12em', textTransform: 'uppercase' }, { text: it.label });
+          a.appendChild(span);
+        }
+        wrap.appendChild(a);
+      });
+      return wrap;
+    }
+    case 'video': {
+      const wrap = el('div', { padding: '4px 0', textAlign: 'center' }, attr);
+      const a = el('a', { display: 'block', position: 'relative' }, { href: 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' });
+      const circle = el('span', { width: '54px', height: '54px', borderRadius: '50%', background: p.badge, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '18px', paddingLeft: '4px' }, { text: '▶' });
+      badge.appendChild(circle);
+      a.appendChild(badge);
+      wrap.appendChild(a);
+      wrap.appendChild(el('div', { fontFamily: t.font, fontSize: '12.5px', color: p.badge, opacity: '0.7', marginTop: '8px' }, { text: p.caption }));
+      return wrap;
+    }
+    case 'html': {
+      const raw = String(p.code || '');
+      const edit = live && !/<style|<scr/i.test(raw);
+      const safe = live
+        ? raw.replace(/<style([^>]*)>([\s\S]*?)<\/style>/gi, (mm, at, css) => '<style' + at + '>' + ctx.scopeCss(css, '[data-mc-sheet]') + '</style>')
+        : raw;
+      const content = el('div', { padding: '6px 0', fontFamily: t.font, color: t.text, outline: 'none' }, { ...attr, contenteditable: edit ? 'true' : undefined, spellcheck: 'false', html: m(safe), 'data-focus-key': edit ? 'block:' + b.id : undefined });
+      if (edit) wireEditable(content, b, 'code', ctx, false);
+      if (!live) return content;
+      return wrapWithRte(b, ctx, edit && ctx.editingId === b.id, content);
+    }
+    case 'countdown': {
+      const ms = Math.max(0, new Date(p.target).getTime() - ctx.now);
+      const parts = [['days', Math.floor(ms / 86400000)], ['hrs', Math.floor(ms / 3600000) % 24], ['min', Math.floor(ms / 60000) % 60], ['sec', Math.floor(ms / 1000) % 60]];
+      // The data-mc-countdown/data-mc-count hooks (live canvas only -- export
+      // reads this DOM back) let the 1s tick repaint just these digits
+      // 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' });
+      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') }));
+        box.appendChild(el('div', { fontSize: '9.5px', letterSpacing: '0.16em', textTransform: 'uppercase', opacity: '0.55', marginTop: '4px' }, { text: lab }));
+        row.appendChild(box);
+      });
+      wrap.appendChild(row);
+      return wrap;
+    }
+    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 });
+        a.addEventListener('click', (e) => e.preventDefault());
+        wrap.appendChild(a);
+      });
+      return wrap;
+    }
+    case 'heading': {
+      const edit = live;
+      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',
+        // 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, contenteditable: edit ? 'true' : undefined, spellcheck: 'false', text: m(p.text), 'data-focus-key': edit ? 'block:' + b.id : undefined });
+      if (edit) wireEditable(head, b, 'text', ctx, true);
+      if (!live) return head;
+      return wrapWithRte(b, ctx, ctx.editingId === b.id, head);
+    }
+    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);
+      items.forEach((it) => {
+        const li = el('li', { marginBottom: p.gap + 'px' }, { html: m(it) });
+        list.appendChild(li);
+      });
+      overrideRichFont(list, p.fontFamily);
+      return list;
+    }
+    case 'table': {
+      const rows = cellsOf(p);
+      const edit = live;
+      const line = p.borders ? (p.borderWidth || 1) + 'px ' + (p.borderStyle || 'solid') + ' ' + p.lineColor : '0';
+      const table = el('table', { width: p.width + '%', borderCollapse: 'collapse', fontFamily: p.fontFamily || t.font, fontSize: p.size + 'px', color: t.text, border: line }, { ...attr, cellpadding: '0', cellspacing: '0' });
+      const tbody = el('tbody');
+      rows.forEach((row, ri) => {
+        const isHead = p.header && ri === 0;
+        const tr = el('tr', { background: isHead ? p.headBg : (p.striped && ri % 2 === 0 ? 'rgba(29,31,32,0.028)' : 'transparent') });
+        row.forEach((cell, ci) => {
+          const td = el(isHead ? 'th' : 'td', {
+            border: line, padding: p.pad + 'px ' + Math.round(p.pad * 1.2) + 'px', textAlign: ci === 0 ? p.align : (isHead ? p.align : 'left'),
+            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',
+          }, { contenteditable: edit ? 'true' : undefined, spellcheck: 'false', 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
+            // via the block wrapper AND deselect via the workspace), but it
+            // also meant clicking a cell never selected the table at all --
+            // the cells cover the whole block. Selecting on *focus* instead,
+            // with the focus key above letting focus-preserve restore the
+            // caret across the selection re-render, gives the table the same
+            // click-to-select behavior as a text block.
+            td.addEventListener('click', (e) => e.stopPropagation());
+            td.addEventListener('focus', () => { if (ctx.selectBlock) ctx.selectBlock(b); });
+            td.addEventListener('blur', () => ctx.onTableCellBlur(b, ri, ci, td.textContent));
+          }
+          tr.appendChild(td);
+        });
+        tbody.appendChild(tr);
+      });
+      table.appendChild(tbody);
+      return table;
+    }
+    case 'embed': {
+      const wrap = el('div', { padding: p.py + 'px 0' }, attr);
+      wrap.appendChild(el('iframe', { width: '100%', height: p.height + 'px', border: '1px solid rgba(29,31,32,0.14)', background: '#fff', display: 'block' }, { src: p.src, title: p.label }));
+      return wrap;
+    }
+    case 'css': {
+      const wrap = el('div', { fontSize: '0', lineHeight: '0' }, attr);
+      wrap.appendChild(el('style', {}, { html: live ? ctx.scopeCss(p.code, '[data-mc-sheet]') : p.code }));
+      if (live) {
+        wrap.appendChild(el('div', { fontFamily: 'ui-monospace, monospace', fontSize: '10px', lineHeight: '1.5', letterSpacing: '0.06em', textTransform: 'uppercase', color: '#7d8791', border: '1px dashed rgba(89,128,166,0.5)', padding: '8px 10px' }, { text: 'style block — ' + (p.code || '').length + ' chars, hidden when sent' }));
+      }
+      return wrap;
+    }
+    case 'box': {
+      const edit = live;
+      const borderSide = (on) => (p.border && on !== false ? p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + p.lineColor : '0');
+      const box = el('div', {
+        background: p.bgImage ? 'linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url("' + p.bgImage + '")' : p.bg,
+        backgroundSize: 'cover', backgroundPosition: 'center',
+        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,
+        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',
+      }, { ...attr, contenteditable: edit ? 'true' : undefined, spellcheck: 'false', html: m(p.html), 'data-focus-key': edit ? 'block:' + b.id : undefined });
+      if (edit) wireEditable(box, b, 'html', ctx, false);
+      if (!live) return box;
+      return wrapWithRte(b, ctx, ctx.editingId === b.id, box);
+    }
+    case 'svg':
+      return el('div', { padding: p.py + 'px 0', textAlign: p.align }, { ...attr, html: '<span style="display:inline-block;width:' + p.width + '%">' + p.code + '</span>' });
+    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) });
+    default:
+      return el('div');
+  }
+}
+
+function wireEditable(node, block, key, ctx, isPlainText) {
+  node.addEventListener('paste', (e) => ctx.onPaste(e, isPlainText));
+  node.addEventListener('focus', (e) => ctx.onFocus(block, e.currentTarget, key, isPlainText));
+  node.addEventListener('blur', (e) => {
+    if (ctx.rteActiveRef && ctx.rteActiveRef.current) return;
+    const val = isPlainText ? e.target.textContent : e.target.innerHTML;
+    ctx.onBlur(block, key, val);
+  });
+}
+
+/** `h('div',{style:{position:'relative'}}, editing===b.id ? this.rte(b) : null, content)` */
+function wrapWithRte(block, ctx, showRte, content) {
+  const wrap = el('div', { position: 'relative' });
+  if (showRte) wrap.appendChild(ctx.renderRte(block));
+  wrap.appendChild(content);
+  return wrap;
+}

package/src/render/canvas.js

@@ -0,0 +1,284 @@
+import { DEF } from '../core/blocks.js';
+import { boxStyle, rowBg, rowPad, colsWrap, colStyle } from '../core/layout-style.js';
+import { scopeCss } from '../core/sanitize.js';
+import { cellsOf } from '../core/parse.js';
+import { icon } from '../core/icons.js';
+import { blockBody } from './block-body.js';
+import { renderRte } from './rte.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;
+}
+
+/**
+ * Ported from `dropLine(active, key)`, but decoupled from React/state: the
+ * original re-rendered the whole tree on every `dragover` (cheap for React,
+ * since its reconciler patches only the one changed node); this renderer has
+ * no diffing, so doing the same would rebuild the entire canvas on every
+ * pixel of mouse movement while dragging -- exactly what made drag-and-drop
+ * (and hover, below) feel un-smooth. Instead, drop lines are built once per
+ * render and toggled directly via `showLine`/`hideActive`, with no state
+ * change and no re-render involved.
+ */
+function dropLine() {
+  return el('div', { height: '0', background: 'var(--ed-accent-sheet)', margin: '0', transition: 'height 0.1s', boxShadow: 'none' });
+}
+
+function showLine(tracker, line) {
+  if (tracker.active && tracker.active !== line) hideLine(tracker.active);
+  line.style.height = '3px'; line.style.margin = '3px 0'; line.style.boxShadow = '0 0 0 1px var(--ed-accent-sheet)';
+  tracker.active = line;
+}
+
+function hideLine(line) {
+  line.style.height = '0'; line.style.margin = '0'; line.style.boxShadow = 'none';
+}
+
+function hideActive(tracker) {
+  if (tracker.active) { hideLine(tracker.active); tracker.active = null; }
+}
+
+/** Ported from `toolbar(id, kind, code)` -- the small floating control shown on the selected row/block. */
+function toolbar(core, id, kind, code) {
+  const btn = (name, title, fn, danger) => {
+    const node = el('button', { position: 'relative', border: '0', background: 'transparent', color: danger ? '#ffdad8' : '#fff', cursor: 'pointer', width: '23px', height: '22px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, { type: 'button', title, 'aria-label': title, 'data-tip': '1' });
+    node.appendChild(icon(name, 13));
+    node.appendChild(el('span', {}, { class: 'mc-tooltip mc-tooltip-up', text: title }));
+    node.addEventListener('mousedown', (e) => e.stopPropagation());
+    node.addEventListener('click', (e) => { e.stopPropagation(); fn(); });
+    return node;
+  };
+  // --ed-accent-sheet, not --ed-accent, on purpose: this pill sits on the
+  // canvas/email sheet, which stays the document's own light page regardless
+  // of editor chrome dark mode. The sheet family is the brand accent fitted
+  // against white (core/accent.js), so it keeps its contrast in both chrome
+  // themes -- while still following a host's `accent`.
+  const root = el('div', { position: 'absolute', top: '-12px', right: '6px', display: 'flex', alignItems: 'center', gap: '1px', background: kind === 'row' ? '#172033' : 'var(--ed-accent-sheet)', borderRadius: '6px', padding: '2px 3px', zIndex: '6', boxShadow: '0 3px 10px rgba(15,23,42,0.28)' });
+  root.appendChild(el('span', { fontFamily: 'ui-monospace,monospace', fontSize: '8.5px', letterSpacing: '0.14em', color: kind === 'row' ? '#fff' : 'var(--ed-accent-sheet-ink)', opacity: '0.7', padding: '0 5px' }, { text: code }));
+  root.appendChild(btn('up', 'Move up', () => core.nudge(id, -1)));
+  root.appendChild(btn('down', 'Move down', () => core.nudge(id, 1)));
+  root.appendChild(btn('copy', 'Duplicate', () => { core.setState({ sel: { type: kind, id } }, () => core.dupSel()); }));
+  root.appendChild(btn('trash', 'Delete', () => { core.setState({ sel: { type: kind, id } }, () => core.delSel()); }, true));
+  return root;
+}
+
+/**
+ * Selected-row controls: square accent buttons pinned inside the row's
+ * top-right corner (delete + duplicate; reordering is the left drag badge).
+ * On --ed-accent-sheet like `toolbar` above and for the same reason: the
+ * email sheet stays a light page in both chrome themes, and a dark-chrome
+ * `--ed-accent` -- light enough to read on the dark panels -- would wash out
+ * against it.
+ */
+function rowActions(core, id) {
+  const btn = (name, title, fn) => {
+    const node = el('button', { position: 'relative', border: '0', background: 'var(--ed-accent-sheet)', color: 'var(--ed-accent-sheet-ink)', cursor: 'pointer', width: '26px', height: '26px', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '4px', boxShadow: '0 2px 6px rgba(15,23,42,0.3)' }, { type: 'button', title, 'aria-label': title, 'data-tip': '1' });
+    node.appendChild(icon(name, 14));
+    node.appendChild(el('span', {}, { class: 'mc-tooltip mc-tooltip-up', text: title }));
+    node.addEventListener('mousedown', (e) => e.stopPropagation());
+    node.addEventListener('click', (e) => { e.stopPropagation(); fn(); });
+    return node;
+  };
+  const root = el('div', { position: 'absolute', top: '6px', right: '6px', display: 'flex', gap: '4px', zIndex: '6' });
+  root.appendChild(btn('trash', 'Delete', () => { core.setState({ sel: { type: 'row', id } }, () => core.delSel()); }));
+  root.appendChild(btn('copy', 'Duplicate', () => { core.setState({ sel: { type: 'row', id } }, () => core.dupSel()); }));
+  return root;
+}
+
+function blockCtx(core, editingBlockId) {
+  return {
+    editingId: editingBlockId,
+    now: core.state.now,
+    scopeCss,
+    iconProvider: core.iconProvider,
+    rteActiveRef: { get current() { return core.rteActive; } },
+    // Also sets `sel` (not just `editing`): a real click both focuses the
+    // contenteditable and fires a `click` on the wrapping block that would
+    // normally call `core.select`. But focus's own setState already forces a
+    // full canvas re-render (see focus-preserve.js), which replaces every
+    // block's DOM node -- including the one mousedown/mouseup/click are
+    // mid-gesture on -- so the browser drops that click (its target vanished
+    // between mousedown and mouseup) and `core.select` never runs. Setting
+    // `sel` here directly is what used to happen implicitly once the click
+    // landed; without it, the block never shows selected (no border, no
+    // duplicate/delete/move corner toolbar) even though the RTE toolbar,
+    // which only depends on `editing`, still appears.
+    // Guarded to a no-op once state already matches: restoring focus after a
+    // rebuild (focus-preserve.js) calls `.focus()` on the freshly-created
+    // node, which fires this same `focus` listener again. Without the guard
+    // that re-fires `setState` -> re-render -> `.focus()` -> `setState` -> ...
+    // forever (an infinite, stack-overflowing loop).
+    onFocus: (block, node, key, isPlainText) => {
+      core.editEl = node;
+      core.editKey = key;
+      core.editPlain = !!isPlainText;
+      if (core.state.editing === block.id && core.state.sel && core.state.sel.type === 'block' && core.state.sel.id === block.id) return;
+      // Snapshotted only on a genuine new focus (not the guarded no-op above,
+      // which also covers every re-render-triggered refocus while typing --
+      // see `syncLiveEdit`, mailcraft-editor.js). That sync keeps
+      // `block.props[key]` continuously equal to the live DOM so re-renders
+      // stop reverting what's mid-typing, which means by the time a real
+      // blur fires, `value !== block.props[key]` is always false and the
+      // edit would never commit (no undo entry, no autosave). Comparing
+      // against the true pre-edit value captured here instead of the
+      // continuously-synced prop is what makes onBlur's change check correct.
+      core.editOriginal = block.props[key];
+      core.setState({ editing: block.id, sel: { type: 'block', id: block.id }, tab: 'design' });
+    },
+    onBlur: (block, key, value) => {
+      // A render tears down and rebuilds the whole canvas subtree (no diffing --
+      // see the `dropLine` comment above); removing the still-focused node as
+      // part of that forces a synchronous, spurious `blur` before the rebuilt
+      // replacement can be focused. Committing on that blur (and worse, its
+      // `editing: null` racing the render that's still in progress) is what
+      // produced the onFocus <-> render infinite loop above -- `core.rendering`
+      // (set for the render()'s duration, see mailcraft-editor.js) tells a real
+      // blur apart from that artifact.
+      if (core.rendering) return;
+      if (core.rteActive) return;
+      if (value !== core.editOriginal) core.setProp(block.id, key, value);
+      if (core.state.editing === block.id) core.setState({ editing: null, linkDraft: null });
+    },
+    onPaste: (e, plainOnly) => core.pasteClean(plainOnly)(e),
+    // Guarded to a no-op when already selected -- the selection re-render
+    // refocuses the cell (focus-preserve), which fires `focus` again.
+    selectBlock: (block) => {
+      if (core.state.sel && core.state.sel.type === 'block' && core.state.sel.id === block.id) return;
+      core.select('block', block.id);
+    },
+    onTableCellBlur: (block, ri, ci, val) => {
+      const next = cellsOf(core.find(core.state.doc, block.id).block.props);
+      if (next[ri] && next[ri][ci] !== val) { next[ri][ci] = val; core.setProp(block.id, 'data', next.map((r) => r.join('|')).join('\n')); }
+    },
+    renderRte: (block) => renderRte(core, block),
+  };
+}
+
+/** Ported from `renderDoc(live)`. `live=true` is the editable canvas, `live=false` is the static preview/export tree. */
+export function renderDoc(core, live) {
+  const d = core.state.doc; const theme = d.theme;
+  const width = core.state.device === 'mobile' ? 375 : theme.width;
+  const sel = core.state.sel;
+  const ctx = blockCtx(core, core.state.editing);
+  // Lives only for this render's drag gesture(s) -- no core state, no re-render.
+  const rowDropTracker = { active: null };
+
+  const root = el('div', {
+    width: width + 'px', maxWidth: '100%', background: theme.contentBg, color: theme.text, fontFamily: theme.font,
+    transition: 'width 0.28s cubic-bezier(0.22,0.61,0.36,1), background 0.2s',
+  }, { 'data-mc-sheet': '1' });
+
+  const rowLines = [];
+  if (live) {
+    root.addEventListener('dragover', (e) => {
+      const dr = core.drag; if (!dr) return;
+      e.preventDefault();
+      const index = core.indexFromPoint(root, e.clientY);
+      showLine(rowDropTracker, rowLines[index]);
+    });
+    root.addEventListener('dragleave', (e) => { if (e.target === root) hideActive(rowDropTracker); });
+    root.addEventListener('drop', (e) => { hideActive(rowDropTracker); core.canvasDrop(e); });
+  }
+
+  d.rows.forEach((r, ri) => {
+    if (live) { const line = dropLine(); rowLines.push(line); root.appendChild(line); }
+    const isSel = live && sel && sel.id === r.id;
+
+    const rowEl = el('div', Object.assign({ position: 'relative', padding: rowPad(r.props) }, rowBg(r.props)), { 'data-mc-slot': '1', class: live ? `mc-row-el${isSel ? ' is-selected' : ''}` : undefined });
+    if (live) {
+      rowEl.addEventListener('click', (e) => { e.stopPropagation(); core.select('row', r.id); });
+    }
+    if (isSel) rowEl.appendChild(rowActions(core, r.id));
+    if (live) {
+      // The grab target is the row's whole left edge, not just the visible
+      // badge. Two reasons, both about `:hover`: the strip overlaps the row's
+      // own left edge (it straddles the border so the round badge can sit
+      // centered on it), because a gap there would be dead space between the
+      // row's hover box and the grip's -- crossing it drops `:hover` on
+      // `.mc-row-el` and hides the grip (display:none, see style.js) right as
+      // the cursor arrives. And it spans the row's full height, because a
+      // short handle pinned to the top has the same failure one axis over: on
+      // a tall row, moving left from anywhere below the handle exits the row
+      // before reaching it, so the grip blinks out and the section simply
+      // cannot be picked up. The badge stays small; only the hit area grew.
+      const grip = el('div', { position: 'absolute', left: '-14px', top: '0', bottom: '0', width: '28px', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', cursor: 'grab', zIndex: '6' }, { draggable: 'true', title: 'Drag to reorder section', 'aria-label': 'Drag to reorder section', class: 'mc-row-grip' });
+      const gripHandle = el('div', { display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none', width: '28px', height: '28px', borderRadius: '50%' }, { class: 'mc-row-grip-handle' });
+      gripHandle.appendChild(icon('move', 15));
+      grip.appendChild(gripHandle);
+      grip.addEventListener('dragstart', core.startDrag({ kind: 'move-row', id: r.id }));
+      grip.addEventListener('dragend', () => { core.drag = null; hideActive(rowDropTracker); });
+      grip.addEventListener('click', (e) => { e.stopPropagation(); core.select('row', r.id); });
+      rowEl.appendChild(grip);
+    }
+
+    const colsEl = el('div', colsWrap(r.props));
+    r.cols.forEach((c, ci) => {
+      const colLines = [];
+      const items = [];
+      c.blocks.forEach((b, bi) => {
+        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 });
+        if (live) {
+          bWrap.addEventListener('dragstart', core.startDrag({ kind: 'move-block', id: b.id }));
+          bWrap.addEventListener('dragend', () => { core.drag = null; hideActive(rowDropTracker); hideActive(colTracker); });
+          bWrap.addEventListener('click', (e) => { e.stopPropagation(); core.select('block', b.id); });
+        }
+        if (bSel) bWrap.appendChild(toolbar(core, b.id, 'block', DEF(b.type).code));
+        bWrap.appendChild(blockBody(b, theme, live, ctx));
+        items.push(bWrap);
+      });
+      let colTracker;
+      if (live) {
+        const endLine = dropLine(); colLines.push(endLine); items.push(endLine);
+        colTracker = { active: null };
+      }
+      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));
+      // 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
+      // the gutter. `host` is also what the drag listeners and
+      // `indexFromPoint` must use -- the block slots are its children.
+      const styled = c.bg || c.border || c.radius || c.padY || c.padX;
+      const host = styled
+        ? el('div', { background: c.bg || 'transparent', border: c.border ? c.border + 'px ' + (c.borderStyle || 'solid') + ' ' + (c.lineColor || '#e2e2e5') : '0', borderRadius: (c.radius || 0) + 'px', padding: (c.padY || 0) + 'px ' + (c.padX || 0) + 'px', height: '100%', boxSizing: 'border-box' })
+        : colEl;
+      if (live) {
+        host.addEventListener('dragover', (e) => {
+          const dr = core.drag; if (!dr) return;
+          e.preventDefault(); e.stopPropagation();
+          if (dr.kind === 'row' || dr.kind === 'move-row') return;
+          const index = core.indexFromPoint(host, e.clientY);
+          showLine(colTracker, colLines[index]);
+        });
+        host.addEventListener('dragleave', (e) => { if (e.target === host) hideActive(colTracker); });
+        host.addEventListener('drop', (e) => {
+          e.stopPropagation();
+          hideActive(colTracker);
+          core.colDrop(r.id, ci)(e);
+        });
+      }
+      items.forEach((it) => host.appendChild(it));
+      if (host !== colEl) colEl.appendChild(host);
+      colsEl.appendChild(colEl);
+    });
+    rowEl.appendChild(colsEl);
+    root.appendChild(rowEl);
+  });
+
+  if (live) { const line = dropLine(); rowLines.push(line); root.appendChild(line); }
+  if (live && !d.rows.length) {
+    root.appendChild(el('div', { border: '1px dashed var(--ed-accent-sheet-line)', padding: '90px 20px', textAlign: 'center', fontFamily: 'ui-monospace,monospace', fontSize: '10.5px', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ed-faint)' }, { text: 'drag a row or block here' }));
+  }
+
+  return root;
+}