@seliseblocks/mailcraft 0.1.1 → 0.2.0

package/src/core/layout-style.js

@@ -1,46 +1,46 @@
-/**
- * Pure style-computation functions shared by the live renderer and the export
- * builder, ported verbatim. Objects use camelCase keys so they can be applied
- * directly via `Object.assign(el.style, obj)`.
- */
-
-import { cssUrl } from './sanitize.js';
-export function pad(p) {
-  return (p.py || 0) + 'px ' + (p.px || 0) + 'px';
-}
-
-export function boxStyle(p) {
-  const on = (key) => p[key] !== false;
-  const side = (key) => (p.bBorder && on(key) ? p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5') : '0');
-  return {
-    background: p.bBg || 'transparent',
-    borderTop: side('bTop'), borderRight: side('bRight'), borderBottom: side('bBottom'), borderLeft: side('bLeft'),
-    borderRadius: (p.bRadius || 0) + 'px',
-    padding: (p.bPad || 0) + 'px',
-  };
-}
-
-export function boxCss(p) {
-  const bits = [];
-  if (p.bBg) bits.push('background:' + p.bBg);
-  if (p.bBorder) {
-    const value = p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5');
-    const sides = { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
-    if (sides.top && sides.right && sides.bottom && sides.left) bits.push('border:' + value);
-    else Object.keys(sides).filter((key) => sides[key]).forEach((key) => bits.push('border-' + key + ':' + value));
-  }
-  if (p.bRadius) bits.push('border-radius:' + p.bRadius + 'px');
-  if (p.bPad) bits.push('padding:' + p.bPad + 'px');
-  return bits.length ? bits.join(';') + ';' : 'margin:0';
-}
-
-/** A row's effective padding as a four-value CSS shorthand. `pt/pb/pl/pr` are optional per-side overrides (set by the inspector's "Per-side padding" split, or by the importer for asymmetric source padding); wherever a side is absent it follows the linked `py`/`px` pair, so documents that never split keep behaving exactly as before. */
+/**
+ * Pure style-computation functions shared by the live renderer and the export
+ * builder, ported verbatim. Objects use camelCase keys so they can be applied
+ * directly via `Object.assign(el.style, obj)`.
+ */
+
+import { cssUrl } from './sanitize.js';
+export function pad(p) {
+  return (p.py || 0) + 'px ' + (p.px || 0) + 'px';
+}
+
+export function boxStyle(p) {
+  const on = (key) => p[key] !== false;
+  const side = (key) => (p.bBorder && on(key) ? p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5') : '0');
+  return {
+    background: p.bBg || 'transparent',
+    borderTop: side('bTop'), borderRight: side('bRight'), borderBottom: side('bBottom'), borderLeft: side('bLeft'),
+    borderRadius: (p.bRadius || 0) + 'px',
+    padding: (p.bPad || 0) + 'px',
+  };
+}
+
+export function boxCss(p) {
+  const bits = [];
+  if (p.bBg) bits.push('background:' + p.bBg);
+  if (p.bBorder) {
+    const value = p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5');
+    const sides = { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
+    if (sides.top && sides.right && sides.bottom && sides.left) bits.push('border:' + value);
+    else Object.keys(sides).filter((key) => sides[key]).forEach((key) => bits.push('border-' + key + ':' + value));
+  }
+  if (p.bRadius) bits.push('border-radius:' + p.bRadius + 'px');
+  if (p.bPad) bits.push('padding:' + p.bPad + 'px');
+  return bits.length ? bits.join(';') + ';' : 'margin:0';
+}
+
+/** A row's effective padding as a four-value CSS shorthand. `pt/pb/pl/pr` are optional per-side overrides (set by the inspector's "Per-side padding" split, or by the importer for asymmetric source padding); wherever a side is absent it follows the linked `py`/`px` pair, so documents that never split keep behaving exactly as before. */
 export function rowPad(p) {
-  const t = p.pt ?? p.py ?? 0;
-  const b = p.pb ?? p.py ?? 0;
-  const l = p.pl ?? p.px ?? 0;
-  const r = p.pr ?? p.px ?? 0;
-  return t + 'px ' + r + 'px ' + b + 'px ' + l + 'px';
+  const t = p.pt ?? p.py ?? 0;
+  const b = p.pb ?? p.py ?? 0;
+  const l = p.pl ?? p.px ?? 0;
+  const r = p.pr ?? p.px ?? 0;
+  return t + 'px ' + r + 'px ' + b + 'px ' + l + 'px';
 }
 
 /** A row's outside spacing in CSS clockwise order, with the old vertical `my` value as a saved-document fallback. Empty horizontal margins can remain `auto` in the live canvas so the advanced max-width control stays centered. */
@@ -52,64 +52,64 @@ export function rowMargin(p, centerEmpty) {
   const emptyHorizontal = centerEmpty && !r && !l;
   return t + 'px ' + (emptyHorizontal ? 'auto' : r + 'px') + ' ' + b + 'px ' + (emptyHorizontal ? 'auto' : l + 'px');
 }
-
-/** Which sides a row's border draws on. Sides default ON (`!== false`) so documents saved before per-side toggles existed keep their full border. */
-export function rowBorderSides(p) {
-  return { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
-}
-
-/** The row border as an inline-CSS string (export path). Empty when the width is 0 or every side is toggled off. */
-export function rowBorderCss(p) {
-  if (!p.border) return '';
-  const s = rowBorderSides(p);
-  const value = p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5');
-  if (s.top && s.right && s.bottom && s.left) return 'border:' + value + ';';
-  return ['top', 'right', 'bottom', 'left'].filter((k) => s[k]).map((k) => 'border-' + k + ':' + value + ';').join('');
-}
-
-export function rowBg(p) {
-  const ov = (p.overlay || 0) / 100;
-  const layers = [];
-  if (p.bgImage && ov) layers.push('linear-gradient(rgba(20,22,24,' + ov + '),rgba(20,22,24,' + ov + '))');
-  if (p.bgImage) layers.push('url("' + cssUrl(p.bgImage) + '")');
-  const s = rowBorderSides(p);
-  const side = (on) => (p.border && on ? p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5') : '0');
-  return {
-    backgroundColor: p.bg || 'transparent',
-    backgroundImage: layers.length ? layers.join(',') : 'none',
-    backgroundSize: p.bgSize || 'cover',
-    backgroundPosition: p.bgPos || 'center',
-    backgroundRepeat: p.bgRepeat || 'no-repeat',
-    borderTop: side(s.top),
-    borderRight: side(s.right),
-    borderBottom: side(s.bottom),
-    borderLeft: side(s.left),
-    borderRadius: (p.radius || 0) + 'px',
-    // A raw CSS string, not a boolean: imports keep the source's exact
-    // shadow; the inspector toggle writes/clears a standard one.
-    boxShadow: p.shadow || 'none',
-    maxWidth: (p.maxW || 100) + '%',
+
+/** Which sides a row's border draws on. Sides default ON (`!== false`) so documents saved before per-side toggles existed keep their full border. */
+export function rowBorderSides(p) {
+  return { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
+}
+
+/** The row border as an inline-CSS string (export path). Empty when the width is 0 or every side is toggled off. */
+export function rowBorderCss(p) {
+  if (!p.border) return '';
+  const s = rowBorderSides(p);
+  const value = p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5');
+  if (s.top && s.right && s.bottom && s.left) return 'border:' + value + ';';
+  return ['top', 'right', 'bottom', 'left'].filter((k) => s[k]).map((k) => 'border-' + k + ':' + value + ';').join('');
+}
+
+export function rowBg(p) {
+  const ov = (p.overlay || 0) / 100;
+  const layers = [];
+  if (p.bgImage && ov) layers.push('linear-gradient(rgba(20,22,24,' + ov + '),rgba(20,22,24,' + ov + '))');
+  if (p.bgImage) layers.push('url("' + cssUrl(p.bgImage) + '")');
+  const s = rowBorderSides(p);
+  const side = (on) => (p.border && on ? p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5') : '0');
+  return {
+    backgroundColor: p.bg || 'transparent',
+    backgroundImage: layers.length ? layers.join(',') : 'none',
+    backgroundSize: p.bgSize || 'cover',
+    backgroundPosition: p.bgPos || 'center',
+    backgroundRepeat: p.bgRepeat || 'no-repeat',
+    borderTop: side(s.top),
+    borderRight: side(s.right),
+    borderBottom: side(s.bottom),
+    borderLeft: side(s.left),
+    borderRadius: (p.radius || 0) + 'px',
+    // A raw CSS string, not a boolean: imports keep the source's exact
+    // shadow; the inspector toggle writes/clears a standard one.
+    boxShadow: p.shadow || 'none',
+    maxWidth: (p.maxW || 100) + '%',
     margin: rowMargin(p, true),
   };
 }
-
-export function colsWrap(p) {
-  const gap = p.gap || 0;
-  if (p.layout === 'grid') return { display: 'grid', gridTemplateColumns: 'repeat(' + (p.gridCols || 2) + ', minmax(0, 1fr))', gap: gap + 'px' };
-  if (p.layout === 'flex') {
-    return {
-      display: 'flex', flexDirection: p.flexDir || 'row', justifyContent: p.justify || 'flex-start',
-      alignItems: p.alignItems || 'stretch', flexWrap: p.wrap ? 'wrap' : 'nowrap', gap: gap + 'px',
-    };
-  }
-  return { display: 'flex', alignItems: 'stretch', margin: '0 ' + (-gap / 2) + 'px' };
-}
-
-export function colStyle(p, c) {
-  if (p.layout === 'grid') return { minWidth: 0 };
-  if (p.layout === 'flex') return { flex: (p.flexDir || 'row').indexOf('column') === 0 ? '0 0 auto' : c.span + ' 1 auto', minWidth: 0 };
-  return {
-    flex: c.span + ' 1 0%', minWidth: 0, padding: '0 ' + (p.gap || 0) / 2 + 'px',
-    alignSelf: p.valign === 'middle' ? 'center' : (p.valign === 'bottom' ? 'flex-end' : 'flex-start'),
-  };
-}
+
+export function colsWrap(p) {
+  const gap = p.gap || 0;
+  if (p.layout === 'grid') return { display: 'grid', gridTemplateColumns: 'repeat(' + (p.gridCols || 2) + ', minmax(0, 1fr))', gap: gap + 'px' };
+  if (p.layout === 'flex') {
+    return {
+      display: 'flex', flexDirection: p.flexDir || 'row', justifyContent: p.justify || 'flex-start',
+      alignItems: p.alignItems || 'stretch', flexWrap: p.wrap ? 'wrap' : 'nowrap', gap: gap + 'px',
+    };
+  }
+  return { display: 'flex', alignItems: 'stretch', margin: '0 ' + (-gap / 2) + 'px' };
+}
+
+export function colStyle(p, c) {
+  if (p.layout === 'grid') return { minWidth: 0 };
+  if (p.layout === 'flex') return { flex: (p.flexDir || 'row').indexOf('column') === 0 ? '0 0 auto' : c.span + ' 1 auto', minWidth: 0 };
+  return {
+    flex: c.span + ' 1 0%', minWidth: 0, padding: '0 ' + (p.gap || 0) / 2 + 'px',
+    alignSelf: p.valign === 'middle' ? 'center' : (p.valign === 'bottom' ? 'flex-end' : 'flex-start'),
+  };
+}

package/src/core/parse.js

@@ -1,10 +1,10 @@
-export function parseItems(s) {
-  return String(s || '').split('\n').map((l) => l.trim()).filter(Boolean).map((l) => {
-    const i = l.indexOf('|');
-    return i < 0 ? { label: l, href: '#' } : { label: l.slice(0, i).trim(), href: l.slice(i + 1).trim() };
-  });
-}
-
-export function cellsOf(p) {
-  return String(p.data || '').split('\n').filter((l) => l.trim()).map((l) => l.split('|').map((c) => c.trim()));
-}
+export function parseItems(s) {
+  return String(s || '').split('\n').map((l) => l.trim()).filter(Boolean).map((l) => {
+    const i = l.indexOf('|');
+    return i < 0 ? { label: l, href: '#' } : { label: l.slice(0, i).trim(), href: l.slice(i + 1).trim() };
+  });
+}
+
+export function cellsOf(p) {
+  return String(p.data || '').split('\n').filter((l) => l.trim()).map((l) => l.split('|').map((c) => c.trim()));
+}

package/src/core/placeholder.js

@@ -1,15 +1,15 @@
-/** Data-URI placeholder image generator, ported verbatim from the original. */
-function enc(s) {
-  return encodeURIComponent(s).replace(/\(/g, '%28').replace(/\)/g, '%29');
-}
-
-export function PH(label, w, ht) {
-  return 'data:image/svg+xml;utf8,' + enc(
-    '<svg xmlns="http://www.w3.org/2000/svg" width="' + w + '" height="' + ht + '">' +
-    '<defs><pattern id="s" width="9" height="9" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">' +
-    '<rect width="9" height="9" fill="#ececed"/><line x1="0" y1="0" x2="0" y2="9" stroke="#cfd3d8" stroke-width="3"/></pattern></defs>' +
-    '<rect width="100%" height="100%" fill="url(#s)"/>' +
-    '<rect x="0.5" y="0.5" width="' + (w - 1) + '" height="' + (ht - 1) + '" fill="none" stroke="#9aa2ab"/>' +
-    '<text x="50%" y="50%" dy="4" text-anchor="middle" font-family="ui-monospace,monospace" font-size="' + Math.max(11, Math.round(w / 40)) + '" fill="#5b6672">' + label + '</text></svg>',
-  );
-}
+/** Data-URI placeholder image generator, ported verbatim from the original. */
+function enc(s) {
+  return encodeURIComponent(s).replace(/\(/g, '%28').replace(/\)/g, '%29');
+}
+
+export function PH(label, w, ht) {
+  return 'data:image/svg+xml;utf8,' + enc(
+    '<svg xmlns="http://www.w3.org/2000/svg" width="' + w + '" height="' + ht + '">' +
+    '<defs><pattern id="s" width="9" height="9" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">' +
+    '<rect width="9" height="9" fill="#ececed"/><line x1="0" y1="0" x2="0" y2="9" stroke="#cfd3d8" stroke-width="3"/></pattern></defs>' +
+    '<rect width="100%" height="100%" fill="url(#s)"/>' +
+    '<rect x="0.5" y="0.5" width="' + (w - 1) + '" height="' + (ht - 1) + '" fill="none" stroke="#9aa2ab"/>' +
+    '<text x="50%" y="50%" dy="4" text-anchor="middle" font-family="ui-monospace,monospace" font-size="' + Math.max(11, Math.round(w / 40)) + '" fill="#5b6672">' + label + '</text></svg>',
+  );
+}

package/src/core/sanitize.js

@@ -1,141 +1,141 @@
-/** Scopes authored CSS to the email sheet so a raw block can never restyle the editor chrome. Ported verbatim: manual brace-matching, not the CSSOM, so arbitrary/partial CSS still scopes instead of failing to parse. */
-export const scopeCss = (css, root) => {
-  const src = String(css || '');
-  let out = ''; let i = 0;
-  const prefix = (sel) => sel.split(',').map((s) => {
-    const t = s.trim();
-    if (!t) return '';
-    if (/^(from|to|\d+%)$/i.test(t)) return t;
-    if (t.startsWith('@')) return t;
-    if (/^(html|body|:root)\b/i.test(t)) return root + t.replace(/^(html|body|:root)/i, '');
-    return root + ' ' + t;
-  }).filter(Boolean).join(', ');
-  while (i < src.length) {
-    const brace = src.indexOf('{', i);
-    if (brace < 0) { out += src.slice(i); break; }
-    const head = src.slice(i, brace).trim();
-    let depth = 1; let j = brace + 1;
-    while (j < src.length && depth > 0) { if (src[j] === '{') depth++; else if (src[j] === '}') depth--; j++; }
-    const body = src.slice(brace + 1, j - 1);
-    if (head.startsWith('@')) {
-      out += head + '{' + (/^@(media|supports|layer|container)/i.test(head) ? scopeCss(body, root) : body) + '}';
-    } else {
-      out += prefix(head) + '{' + body + '}';
-    }
-    i = j;
-  }
-  return out;
-};
-
-export const migrateTokens = (json) => String(json).replace(/\[\[\s*([\w.]+)\s*\]\]/g, '{' + '{ $1 }' + '}');
-
-/** Paste sanitizer -- Word/Docs/Notion drop class soup, mso- properties and nested spans into the document; keep a small tag whitelist and drop attributes (href/target/rel on links survive). */
-const PASTE_OK = { A: 1, B: 1, STRONG: 1, I: 1, EM: 1, U: 1, S: 1, STRIKE: 1, BR: 1, P: 1, UL: 1, OL: 1, LI: 1, H1: 1, H2: 1, H3: 1, H4: 1, H5: 1, H6: 1, BLOCKQUOTE: 1, CODE: 1, SUP: 1, SUB: 1 };
-
-export const cleanHtml = (html) => {
-  const doc = new DOMParser().parseFromString(String(html || ''), 'text/html');
-  doc.querySelectorAll('style,script,meta,link,title,head').forEach((n) => n.remove());
-  const walk = (node) => {
-    Array.from(node.children).forEach((el) => {
-      walk(el);
-      if (!PASTE_OK[el.tagName]) {
-        const parent = el.parentNode;
-        while (el.firstChild) parent.insertBefore(el.firstChild, el);
-        parent.removeChild(el);
-        return;
-      }
-      Array.from(el.attributes).forEach((at) => {
-        const keep = el.tagName === 'A' && ['href', 'target', 'rel'].indexOf(at.name) > -1;
-        if (!keep) el.removeAttribute(at.name);
-      });
-    });
-  };
-  walk(doc.body);
-  return doc.body.innerHTML.replace(/<!--[\s\S]*?-->/g, '').replace(/\s{2,}/g, ' ').trim();
-};
-
-/**
- * Import sanitizer. Pasting wants `cleanHtml`'s scorched-earth policy (Word/
- * Docs class soup adds nothing), but an HTML *import* is the opposite case:
- * a hand-built email's inline styles ARE the design. Running imports through
- * the paste path collapsed every distinctly-styled paragraph -- a 26px/800
- * headline, an italic footnote, a 12px footer -- into one uniform block in
- * the theme's default face. This variant keeps the same structural whitelist
- * (plus `SPAN`/`IMG`, which carry real content in emails) and preserves a
- * whitelist of typographic/spacing style properties per element; everything
- * else (mso-*, classes, ids, event handlers) is still stripped.
- */
-const IMPORT_OK = Object.assign({ SPAN: 1, IMG: 1 }, PASTE_OK);
-const IMPORT_STYLES = [
-  'font-size', 'font-weight', 'font-style', 'font-family', 'color', 'line-height',
-  'letter-spacing', 'text-align', 'text-decoration', 'text-transform',
-  'background-color', 'border-radius', 'padding', 'margin', 'word-break',
-  'width', 'max-width', 'height',
-];
-
-export const cleanImportHtml = (html) => {
-  const doc = new DOMParser().parseFromString(String(html || ''), 'text/html');
-  doc.querySelectorAll('style,script,meta,link,title,head').forEach((n) => n.remove());
-  const walk = (node) => {
-    Array.from(node.children).forEach((el) => {
-      walk(el);
-      if (!IMPORT_OK[el.tagName]) {
-        const parent = el.parentNode;
-        while (el.firstChild) parent.insertBefore(el.firstChild, el);
-        parent.removeChild(el);
-        return;
-      }
-      const kept = [];
-      IMPORT_STYLES.forEach((p) => {
-        const v = el.style.getPropertyValue(p);
-        if (v) kept.push(p + ':' + v);
-      });
-      Array.from(el.attributes).forEach((at) => {
-        const keep = (el.tagName === 'A' && ['href', 'target', 'rel'].indexOf(at.name) > -1)
-          || (el.tagName === 'IMG' && ['src', 'alt', 'width', 'height'].indexOf(at.name) > -1);
-        if (!keep) el.removeAttribute(at.name);
-      });
-      if (kept.length) el.setAttribute('style', kept.join(';'));
-    });
-  };
-  walk(doc.body);
-  return doc.body.innerHTML.replace(/<!--[\s\S]*?-->/g, '').replace(/\s{2,}/g, ' ').trim();
-};
-
-/**
- * Makes an image URL safe to drop inside `url("...")`.
- *
- * These URLs are not ours: they come from a storage provider's backend, or from
- * a user typing into the "Background image URL" field. They are then
- * interpolated into CSS -- in the library tiles, in the canvas, and (worst) into
- * a `style="..."` attribute in the exported email, where an unescaped quote ends
- * the attribute and everything after it becomes markup in someone's campaign.
- *
- * Percent-encoding rather than backslash-escaping, because the same value has to
- * survive two different contexts: `\"` is correct in CSS but is still a literal
- * quote to an HTML attribute parser. `%22` is safe in both, and resolves
- * identically when the browser fetches it.
- *
- * Schemes are allowlisted as well. A relative path has no scheme and is fine;
- * anything exotic resolves to nothing rather than being handed to the parser.
- */
-const CSS_URL_ESCAPE = { '"': '%22', "'": '%27', '(': '%28', ')': '%29', '\\': '%5C' };
-
-export const cssUrl = (u) => {
-  const raw = String(u == null ? '' : u).trim();
-  if (!raw) return '';
-  const scheme = raw.match(/^([a-z][a-z0-9+.-]*):/i);
-  if (scheme && !/^(https?|blob)$/i.test(scheme[1]) && !/^data:image\//i.test(raw)) return '';
-  // An explicit table, not encodeURIComponent: that leaves ( ) ' untouched,
-  // and an unescaped paren closes url(...) just as surely as a quote does.
-  return raw.replace(/["'()\\]|\s/g, (c) => CSS_URL_ESCAPE[c] || '%20');
-};
-
-export const escHtml = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-
-/** Minimal HTML syntax highlighter for the code view. */
-export const hl = (src) => escHtml(src)
-  .replace(/([\w-]+)=&quot;([^&]*)&quot;/g, '<span style="color:#a8763e">$1</span>=<span style="color:#4a8a6a">&quot;$2&quot;</span>')
-  .replace(/([\w-]+)="([^"]*)"/g, '<span style="color:#a8763e">$1</span>=<span style="color:#4a8a6a">"$2"</span>')
-  .replace(/(&lt;\/?)([a-zA-Z][\w-]*)/g, '$1<span style="color:#5980a6;font-weight:600">$2</span>')
-  .replace(/(\{\{[^{}]*\}\})/g, '<span style="background:rgba(89,128,166,0.18);color:#2c455d;border-radius:2px">$1</span>');
+/** Scopes authored CSS to the email sheet so a raw block can never restyle the editor chrome. Ported verbatim: manual brace-matching, not the CSSOM, so arbitrary/partial CSS still scopes instead of failing to parse. */
+export const scopeCss = (css, root) => {
+  const src = String(css || '');
+  let out = ''; let i = 0;
+  const prefix = (sel) => sel.split(',').map((s) => {
+    const t = s.trim();
+    if (!t) return '';
+    if (/^(from|to|\d+%)$/i.test(t)) return t;
+    if (t.startsWith('@')) return t;
+    if (/^(html|body|:root)\b/i.test(t)) return root + t.replace(/^(html|body|:root)/i, '');
+    return root + ' ' + t;
+  }).filter(Boolean).join(', ');
+  while (i < src.length) {
+    const brace = src.indexOf('{', i);
+    if (brace < 0) { out += src.slice(i); break; }
+    const head = src.slice(i, brace).trim();
+    let depth = 1; let j = brace + 1;
+    while (j < src.length && depth > 0) { if (src[j] === '{') depth++; else if (src[j] === '}') depth--; j++; }
+    const body = src.slice(brace + 1, j - 1);
+    if (head.startsWith('@')) {
+      out += head + '{' + (/^@(media|supports|layer|container)/i.test(head) ? scopeCss(body, root) : body) + '}';
+    } else {
+      out += prefix(head) + '{' + body + '}';
+    }
+    i = j;
+  }
+  return out;
+};
+
+export const migrateTokens = (json) => String(json).replace(/\[\[\s*([\w.]+)\s*\]\]/g, '{' + '{ $1 }' + '}');
+
+/** Paste sanitizer -- Word/Docs/Notion drop class soup, mso- properties and nested spans into the document; keep a small tag whitelist and drop attributes (href/target/rel on links survive). */
+const PASTE_OK = { A: 1, B: 1, STRONG: 1, I: 1, EM: 1, U: 1, S: 1, STRIKE: 1, BR: 1, P: 1, UL: 1, OL: 1, LI: 1, H1: 1, H2: 1, H3: 1, H4: 1, H5: 1, H6: 1, BLOCKQUOTE: 1, CODE: 1, SUP: 1, SUB: 1 };
+
+export const cleanHtml = (html) => {
+  const doc = new DOMParser().parseFromString(String(html || ''), 'text/html');
+  doc.querySelectorAll('style,script,meta,link,title,head').forEach((n) => n.remove());
+  const walk = (node) => {
+    Array.from(node.children).forEach((el) => {
+      walk(el);
+      if (!PASTE_OK[el.tagName]) {
+        const parent = el.parentNode;
+        while (el.firstChild) parent.insertBefore(el.firstChild, el);
+        parent.removeChild(el);
+        return;
+      }
+      Array.from(el.attributes).forEach((at) => {
+        const keep = el.tagName === 'A' && ['href', 'target', 'rel'].indexOf(at.name) > -1;
+        if (!keep) el.removeAttribute(at.name);
+      });
+    });
+  };
+  walk(doc.body);
+  return doc.body.innerHTML.replace(/<!--[\s\S]*?-->/g, '').replace(/\s{2,}/g, ' ').trim();
+};
+
+/**
+ * Import sanitizer. Pasting wants `cleanHtml`'s scorched-earth policy (Word/
+ * Docs class soup adds nothing), but an HTML *import* is the opposite case:
+ * a hand-built email's inline styles ARE the design. Running imports through
+ * the paste path collapsed every distinctly-styled paragraph -- a 26px/800
+ * headline, an italic footnote, a 12px footer -- into one uniform block in
+ * the theme's default face. This variant keeps the same structural whitelist
+ * (plus `SPAN`/`IMG`, which carry real content in emails) and preserves a
+ * whitelist of typographic/spacing style properties per element; everything
+ * else (mso-*, classes, ids, event handlers) is still stripped.
+ */
+const IMPORT_OK = Object.assign({ SPAN: 1, IMG: 1 }, PASTE_OK);
+const IMPORT_STYLES = [
+  'font-size', 'font-weight', 'font-style', 'font-family', 'color', 'line-height',
+  'letter-spacing', 'text-align', 'text-decoration', 'text-transform',
+  'background-color', 'border-radius', 'padding', 'margin', 'word-break',
+  'width', 'max-width', 'height',
+];
+
+export const cleanImportHtml = (html) => {
+  const doc = new DOMParser().parseFromString(String(html || ''), 'text/html');
+  doc.querySelectorAll('style,script,meta,link,title,head').forEach((n) => n.remove());
+  const walk = (node) => {
+    Array.from(node.children).forEach((el) => {
+      walk(el);
+      if (!IMPORT_OK[el.tagName]) {
+        const parent = el.parentNode;
+        while (el.firstChild) parent.insertBefore(el.firstChild, el);
+        parent.removeChild(el);
+        return;
+      }
+      const kept = [];
+      IMPORT_STYLES.forEach((p) => {
+        const v = el.style.getPropertyValue(p);
+        if (v) kept.push(p + ':' + v);
+      });
+      Array.from(el.attributes).forEach((at) => {
+        const keep = (el.tagName === 'A' && ['href', 'target', 'rel'].indexOf(at.name) > -1)
+          || (el.tagName === 'IMG' && ['src', 'alt', 'width', 'height'].indexOf(at.name) > -1);
+        if (!keep) el.removeAttribute(at.name);
+      });
+      if (kept.length) el.setAttribute('style', kept.join(';'));
+    });
+  };
+  walk(doc.body);
+  return doc.body.innerHTML.replace(/<!--[\s\S]*?-->/g, '').replace(/\s{2,}/g, ' ').trim();
+};
+
+/**
+ * Makes an image URL safe to drop inside `url("...")`.
+ *
+ * These URLs are not ours: they come from a storage provider's backend, or from
+ * a user typing into the "Background image URL" field. They are then
+ * interpolated into CSS -- in the library tiles, in the canvas, and (worst) into
+ * a `style="..."` attribute in the exported email, where an unescaped quote ends
+ * the attribute and everything after it becomes markup in someone's campaign.
+ *
+ * Percent-encoding rather than backslash-escaping, because the same value has to
+ * survive two different contexts: `\"` is correct in CSS but is still a literal
+ * quote to an HTML attribute parser. `%22` is safe in both, and resolves
+ * identically when the browser fetches it.
+ *
+ * Schemes are allowlisted as well. A relative path has no scheme and is fine;
+ * anything exotic resolves to nothing rather than being handed to the parser.
+ */
+const CSS_URL_ESCAPE = { '"': '%22', "'": '%27', '(': '%28', ')': '%29', '\\': '%5C' };
+
+export const cssUrl = (u) => {
+  const raw = String(u == null ? '' : u).trim();
+  if (!raw) return '';
+  const scheme = raw.match(/^([a-z][a-z0-9+.-]*):/i);
+  if (scheme && !/^(https?|blob)$/i.test(scheme[1]) && !/^data:image\//i.test(raw)) return '';
+  // An explicit table, not encodeURIComponent: that leaves ( ) ' untouched,
+  // and an unescaped paren closes url(...) just as surely as a quote does.
+  return raw.replace(/["'()\\]|\s/g, (c) => CSS_URL_ESCAPE[c] || '%20');
+};
+
+export const escHtml = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+/** Minimal HTML syntax highlighter for the code view. */
+export const hl = (src) => escHtml(src)
+  .replace(/([\w-]+)=&quot;([^&]*)&quot;/g, '<span style="color:#a8763e">$1</span>=<span style="color:#4a8a6a">&quot;$2&quot;</span>')
+  .replace(/([\w-]+)="([^"]*)"/g, '<span style="color:#a8763e">$1</span>=<span style="color:#4a8a6a">"$2"</span>')
+  .replace(/(&lt;\/?)([a-zA-Z][\w-]*)/g, '$1<span style="color:#5980a6;font-weight:600">$2</span>')
+  .replace(/(\{\{[^{}]*\}\})/g, '<span style="background:rgba(89,128,166,0.18);color:#2c455d;border-radius:2px">$1</span>');