@seliseblocks/mailcraft 0.2.9 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seliseblocks/mailcraft",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "Framework-agnostic drag-and-drop email template editor, packaged as a zero-dependency Web Component.",
   "license": "MIT",
   "author": "SELISE Digital Platforms",
@@ -60,7 +60,7 @@
   },
   "scripts": {
     "build": "node build.js",
-    "test": "node test/storage.test.mjs && node test/export.test.mjs && node test/templates.test.mjs && node test/system.test.mjs && node test/toolbar.test.mjs && node test/editor-dom.test.mjs && node test/css-cascade.test.mjs && node test/render-dom.test.mjs && node test/import-html.test.mjs && node test/interaction.test.mjs && node test/focus-preserve.test.mjs && node test/shortcuts.test.mjs && node test/import-structure.test.mjs",
+    "test": "node test/storage.test.mjs && node test/export.test.mjs && node test/templates.test.mjs && node test/system.test.mjs && node test/toolbar.test.mjs && node test/editor-dom.test.mjs && node test/css-cascade.test.mjs && node test/render-dom.test.mjs && node test/import-html.test.mjs && node test/interaction.test.mjs && node test/focus-preserve.test.mjs && node test/shortcuts.test.mjs && node test/import-structure.test.mjs && node test/roundtrip.test.mjs",
     "prepublishOnly": "npm run build && npm test",
     "coverage": "c8 --reporter=text --reporter=text-summary --src=src --all --exclude=\"test/**\" --exclude=\"examples/**\" --exclude=\"build.js\" npm test"
   },

package/src/core/blocks.js

@@ -18,7 +18,6 @@ BLOCKS.push(
   { type: 'heading', code: 'HED', label: 'Heading', hint: 'Display heading', make: () => ({ text: 'What we kept', level: 'h2', size: 34, lh: 1.12, align: 'left', color: '', weight: '600', font: 'body', py: 8, px: 0 }) },
   { type: 'list', code: 'LST', label: 'List', hint: 'Bulleted or numbered list', make: () => ({ items: 'Import your list\nPick a template\nSend the first one', ordered: false, size: 15, lh: 1.7, color: '', gap: 4, py: 8, px: 0 }) },
   { type: 'table', code: 'TBL', label: 'Table', hint: 'Data table — edit cells inline', make: () => ({ data: 'Plan|Price|Seats\nStarter|$19|3\nTeam|$49|10\nStudio|$99|25', header: true, borders: true, borderWidth: 1, borderStyle: 'solid', striped: true, pad: 10, size: 14, headBg: '#f8fafc', lineColor: '#e2e8f0', align: 'left', width: 100 }) },
-  { type: 'embed', code: 'EMB', label: 'Embed', hint: 'Iframe embed — map, form, player', make: () => ({ src: 'https://example.com/embed', height: 320, label: 'Embedded content', py: 8 }) },
   { type: 'css', code: 'CSS', label: 'Raw CSS', hint: 'Inject a style block', make: () => ({ code: '.mc-note { font: 13px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #0065b3; letter-spacing: 0.04em; }', note: 'Styles apply to raw HTML blocks below.' }) },
   { type: 'codeblock', code: 'PRE', label: 'Code', hint: 'Preformatted code sample', make: () => ({ code: 'curl -X POST https://api.example.com/v1/sends \\\n  -H "Authorization: Bearer $KEY" \\\n  -d campaign=mc-4471', bg: '#172033', color: '#e8e9ea', size: 12.5, pad: 14 }) },
 );
@@ -180,7 +179,7 @@ export const PALETTE = [
   { t: 'heading' }, { t: 'text' }, { t: 'list' }, { g: 'quote' }, { t: 'image' }, { g: 'gallery' },
   { t: 'button' }, { t: 'table' }, { g: 'card' }, { g: 'product' }, { g: 'hero' }, { g: 'stats' },
   { t: 'box' }, { t: 'divider' }, { t: 'spacer' }, { t: 'social' }, { t: 'video' },
-  { t: 'embed' }, { t: 'menu' }, { g: 'footer' }, { t: 'html' }, { t: 'css' }, { t: 'svg' },
+  { t: 'menu' }, { g: 'footer' }, { t: 'html' }, { t: 'css' }, { t: 'svg' },
   { t: 'codeblock' }, { t: 'countdown' }, { t: 'condition' }, { t: 'loop' },
 ];
 
@@ -208,6 +207,15 @@ export function migrateDoc(doc) {
     if (r.props.mb === undefined) r.props.mb = legacyMarginY;
     if (r.props.ml === undefined) r.props.ml = 0;
     r.cols.forEach((c) => {
+      // The embed block (an <iframe>) was removed on 2026-09-02: mail clients
+      // strip iframes, so the block only ever rendered in browser contexts.
+      // A saved document keeps its content as the raw html it always exported.
+      c.blocks.forEach((b) => {
+        if (b.type !== 'embed') return;
+        const p = b.props || {};
+        b.type = 'html';
+        b.props = { code: '<div style="padding:' + (p.py || 0) + 'px 0"><iframe src="' + (p.src || '') + '" title="' + (p.label || '') + '" style="width:100%;height:' + (p.height || 320) + 'px;border:1px solid rgba(29,31,32,0.14);background:#fff;display:block"></iframe></div>' };
+      });
       // A block whose type this build no longer knows is dropped rather than
       // rendered as an unrecognized shape; a row emptied that way goes with it.
       c.blocks = c.blocks.filter((b) => DEF(b.type));
@@ -266,15 +274,26 @@ export function normalizeDoc(input) {
       return {
         id: r.id || uid(),
         props: Object.assign({}, rowDefaults, r.props || {}),
-        cols: cols.map((c) => ({
-          id: c.id || uid(),
-          span: Number(c.span) > 0 ? Number(c.span) : evenSpan,
-          blocks: (Array.isArray(c.blocks) ? c.blocks : []).filter((b) => b && typeof b === 'object' && b.type).map((b) => (
-            DEF(b.type)
-              ? { id: b.id || uid(), type: b.type, props: Object.assign(DEF(b.type).make(), b.props || {}) }
-              : { id: b.id || uid(), type: b.type, props: b.props || {} }
-          )),
-        })),
+        cols: cols.map((c) => {
+          const col = {
+            id: c.id || uid(),
+            span: Number(c.span) > 0 ? Number(c.span) : evenSpan,
+            blocks: (Array.isArray(c.blocks) ? c.blocks : []).filter((b) => b && typeof b === 'object' && b.type).map((b) => (
+              DEF(b.type)
+                ? { id: b.id || uid(), type: b.type, props: Object.assign(DEF(b.type).make(), b.props || {}) }
+                : { id: b.id || uid(), type: b.type, props: b.props || {} }
+            )),
+          };
+          // A column's optional styling (the canvas's `styled` wrapper and the
+          // importer's hoist both speak these keys) rides through untouched --
+          // rebuilding the column without them silently stripped a card
+          // column's paint on every loadDoc/loadTemplate, before export ever
+          // saw it.
+          ['bg', 'radius', 'padY', 'padX', 'border', 'borderStyle', 'lineColor'].forEach((k) => {
+            if (c[k] !== undefined && c[k] !== '' && c[k] !== 0) col[k] = c[k];
+          });
+          return col;
+        }),
       };
     }),
   };

package/src/core/css-cascade.js

@@ -1,117 +1,120 @@
-/**
- * Import-time CSS cascade: folds a parsed document's `<style>` rules into the
- * elements' inline styles, so the importer's classifiers (which read inline
- * styles only) see class-styled templates -- Mailchimp exports, hand-written
- * emails, framework output that was never inlined -- the same way a mail
- * client would.
- *
- * Deliberately a subset of a real cascade, matched to what email CSS uses:
- * - `@media` blocks (and every other at-rule) are dropped whole: responsive
- *   overrides can't be represented in the imported model, desktop values win.
- *   A side benefit: base-rule `.desktop_hide { display:none }` still applies,
- *   so mobile-only duplicate content is correctly dropped by the importer's
- *   hidden-element skip.
- * - Selectors containing `:` are skipped -- pseudo-classes/-elements are
- *   interactive or generated state with no place in a static import.
- * - Specificity is the classic ids/classes/tags count; equal specificity
- *   resolves by source order; `!important` wins over everything including
- *   inline styles, which otherwise always win (matching browser behavior for
- *   the combinations that matter here).
- */
-
-function stripComments(css) {
-  return String(css || '').replace(/\/\*[\s\S]*?\*\//g, '');
-}
-
-/** Removes every at-rule: block-less ones (`@import ...;`) to the semicolon, block ones (`@media { ... }`) across balanced braces. */
-function stripAtRules(css) {
-  let out = '';
-  let i = 0;
-  while (i < css.length) {
-    if (css[i] === '@') {
-      const semi = css.indexOf(';', i);
-      const brace = css.indexOf('{', i);
-      if (brace === -1 || (semi !== -1 && semi < brace)) {
-        i = semi === -1 ? css.length : semi + 1;
-        continue;
-      }
-      let depth = 0;
-      let j = brace;
-      for (; j < css.length; j++) {
-        if (css[j] === '{') depth++;
-        else if (css[j] === '}') { depth--; if (!depth) break; }
-      }
-      i = j + 1;
-      continue;
-    }
-    out += css[i];
-    i++;
-  }
-  return out;
-}
-
-function specificity(sel) {
-  const ids = (sel.match(/#[\w-]+/g) || []).length;
-  const classes = (sel.match(/\.[\w-]+|\[[^\]]*\]/g) || []).length;
-  const tags = (sel.match(/(^|[\s>+~])[a-zA-Z][\w-]*/g) || []).length;
-  return ids * 100 + classes * 10 + tags;
-}
-
-export function inlineStylesheets(doc) {
-  const sheets = Array.from(doc.querySelectorAll('style'));
-  if (!sheets.length) return;
-  const css = stripAtRules(stripComments(sheets.map((s) => s.textContent || '').join('\n')));
-
-  const rules = [];
-  const ruleRe = /([^{}]+)\{([^{}]*)\}/g;
-  let m;
-  let order = 0;
-  while ((m = ruleRe.exec(css))) {
-    const decls = [];
-    m[2].split(';').forEach((d) => {
-      const at = d.indexOf(':');
-      if (at < 0) return;
-      const prop = d.slice(0, at).trim().toLowerCase();
-      let value = d.slice(at + 1).trim();
-      if (!prop || !value || prop.indexOf('--') === 0 || prop.indexOf('mso-') === 0) return;
-      const important = /!important\s*$/i.test(value);
-      if (important) value = value.replace(/!important\s*$/i, '').trim();
-      if (value) decls.push({ prop, value, important });
-    });
-    if (!decls.length) continue;
-    m[1].split(',').forEach((raw) => {
-      const sel = raw.trim();
-      if (!sel || sel === '*' || sel.indexOf(':') > -1) return;
-      rules.push({ sel, decls, spec: specificity(sel), order: order++ });
-    });
-  }
-  if (!rules.length) return;
-
-  // Ascending: later (more specific / later-in-source) rules overwrite
-  // earlier winners per property below.
-  rules.sort((a, b) => a.spec - b.spec || a.order - b.order);
-
-  const winners = new Map(); // element -> Map(prop -> {value, important})
-  rules.forEach((rule) => {
-    let matched;
-    try { matched = doc.querySelectorAll(rule.sel); } catch { return; }
-    matched.forEach((el) => {
-      if (el !== doc.body && !doc.body.contains(el)) return;
-      let bucket = winners.get(el);
-      if (!bucket) { bucket = new Map(); winners.set(el, bucket); }
-      rule.decls.forEach((d) => {
-        const cur = bucket.get(d.prop);
-        if (cur && cur.important && !d.important) return;
-        bucket.set(d.prop, d);
-      });
-    });
-  });
-
-  winners.forEach((bucket, el) => {
-    if (!el.style) return;
-    bucket.forEach((d, prop) => {
-      if (!d.important && el.style.getPropertyValue(prop)) return; // inline wins
-      try { el.style.setProperty(prop, d.value); } catch { /* unparseable value -- skip */ }
-    });
-  });
-}
+/**
+ * Import-time CSS cascade: folds a parsed document's `<style>` rules into the
+ * elements' inline styles, so the importer's classifiers (which read inline
+ * styles only) see class-styled templates -- Mailchimp exports, hand-written
+ * emails, framework output that was never inlined -- the same way a mail
+ * client would.
+ *
+ * Deliberately a subset of a real cascade, matched to what email CSS uses:
+ * - `@media` blocks (and every other at-rule) are dropped whole: responsive
+ *   overrides can't be represented in the imported model, desktop values win.
+ *   A side benefit: base-rule `.desktop_hide { display:none }` still applies,
+ *   so mobile-only duplicate content is correctly dropped by the importer's
+ *   hidden-element skip.
+ * - Selectors containing `:` are skipped -- pseudo-classes/-elements are
+ *   interactive or generated state with no place in a static import.
+ * - Specificity is the classic ids/classes/tags count; equal specificity
+ *   resolves by source order; `!important` wins over everything including
+ *   inline styles, which otherwise always win (matching browser behavior for
+ *   the combinations that matter here).
+ */
+
+function stripComments(css) {
+  return String(css || '').replace(/\/\*[\s\S]*?\*\//g, '');
+}
+
+/** Removes every at-rule: block-less ones (`@import ...;`) to the semicolon, block ones (`@media { ... }`) across balanced braces. */
+function stripAtRules(css) {
+  let out = '';
+  let i = 0;
+  while (i < css.length) {
+    if (css[i] === '@') {
+      const semi = css.indexOf(';', i);
+      const brace = css.indexOf('{', i);
+      if (brace === -1 || (semi !== -1 && semi < brace)) {
+        i = semi === -1 ? css.length : semi + 1;
+        continue;
+      }
+      let depth = 0;
+      let j = brace;
+      for (; j < css.length; j++) {
+        if (css[j] === '{') depth++;
+        else if (css[j] === '}') { depth--; if (!depth) break; }
+      }
+      i = j + 1;
+      continue;
+    }
+    out += css[i];
+    i++;
+  }
+  return out;
+}
+
+function specificity(sel) {
+  const ids = (sel.match(/#[\w-]+/g) || []).length;
+  const classes = (sel.match(/\.[\w-]+|\[[^\]]*\]/g) || []).length;
+  const tags = (sel.match(/(^|[\s>+~])[a-zA-Z][\w-]*/g) || []).length;
+  return ids * 100 + classes * 10 + tags;
+}
+
+export function inlineStylesheets(doc) {
+  // A style tag carrying the css-block marker IS a block (import-html reads
+  // it back as one); folding its rules inline here stamped them onto every
+  // matched element AND kept the block, doubling the styles on each save.
+  const sheets = Array.from(doc.querySelectorAll('style')).filter((s) => !(s.getAttribute && s.getAttribute('data-mc')));
+  if (!sheets.length) return;
+  const css = stripAtRules(stripComments(sheets.map((s) => s.textContent || '').join('\n')));
+
+  const rules = [];
+  const ruleRe = /([^{}]+)\{([^{}]*)\}/g;
+  let m;
+  let order = 0;
+  while ((m = ruleRe.exec(css))) {
+    const decls = [];
+    m[2].split(';').forEach((d) => {
+      const at = d.indexOf(':');
+      if (at < 0) return;
+      const prop = d.slice(0, at).trim().toLowerCase();
+      let value = d.slice(at + 1).trim();
+      if (!prop || !value || prop.indexOf('--') === 0 || prop.indexOf('mso-') === 0) return;
+      const important = /!important\s*$/i.test(value);
+      if (important) value = value.replace(/!important\s*$/i, '').trim();
+      if (value) decls.push({ prop, value, important });
+    });
+    if (!decls.length) continue;
+    m[1].split(',').forEach((raw) => {
+      const sel = raw.trim();
+      if (!sel || sel === '*' || sel.indexOf(':') > -1) return;
+      rules.push({ sel, decls, spec: specificity(sel), order: order++ });
+    });
+  }
+  if (!rules.length) return;
+
+  // Ascending: later (more specific / later-in-source) rules overwrite
+  // earlier winners per property below.
+  rules.sort((a, b) => a.spec - b.spec || a.order - b.order);
+
+  const winners = new Map(); // element -> Map(prop -> {value, important})
+  rules.forEach((rule) => {
+    let matched;
+    try { matched = doc.querySelectorAll(rule.sel); } catch { return; }
+    matched.forEach((el) => {
+      if (el !== doc.body && !doc.body.contains(el)) return;
+      let bucket = winners.get(el);
+      if (!bucket) { bucket = new Map(); winners.set(el, bucket); }
+      rule.decls.forEach((d) => {
+        const cur = bucket.get(d.prop);
+        if (cur && cur.important && !d.important) return;
+        bucket.set(d.prop, d);
+      });
+    });
+  });
+
+  winners.forEach((bucket, el) => {
+    if (!el.style) return;
+    bucket.forEach((d, prop) => {
+      if (!d.important && el.style.getPropertyValue(prop)) return; // inline wins
+      try { el.style.setProperty(prop, d.value); } catch { /* unparseable value -- skip */ }
+    });
+  });
+}

package/src/core/editor-core.js

@@ -1224,7 +1224,7 @@ export class EditorCore {
 
   // ---- export / code view --------------------------------------------------
 
-  buildHtml() { return buildHtmlFn(this.state, this.exportRoot, boxCss); }
+  buildHtml(opts) { return buildHtmlFn(this.state, this.exportRoot, boxCss, opts); }
 
   openExport = () => {
     this.setState({ exportOpen: true, exportCode: this.buildHtml(), copied: false, libraryOpen: false, aiOpen: false, codeOpen: false });
@@ -1373,9 +1373,9 @@ export class EditorCore {
           /<a(?:\s|>)/i.test(String(b.props.html || ''))
             ? [{ kind: 'richLinks', label: 'Links', html: b.props.html || '', onChange: (v) => this.setProp(b.id, 'html', v) }]
             : [],
-          [B.area('Text', 'html'), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.range('Text size', 'size', ...SIZE_SPAN.text, 1, 'px'), B.range('Line spacing', 'lh', 0.8, 3, 0.05, ''), B.seg('Align', 'align', ALIGN), B.sel('Text weight', 'weight', [{ value: '400', label: 'Regular' }, { value: '500', label: 'Medium' }, { value: '700', label: 'Bold' }]), B.color('Text color', 'color')], padF));
+          [B.area('Text', 'html'), B.sel('Font', 'fontFamily', this.fontOptions(true, b.props.fontFamily)), B.range('Text size', 'size', ...SIZE_SPAN.text, 1, 'px'), B.range('Line spacing', 'lh', 0.8, 3, 0.05, ''), B.seg('Align', 'align', ALIGN), B.sel('Text weight', 'weight', [{ value: '400', label: 'Regular' }, { value: '500', label: 'Medium' }, { value: '700', label: 'Bold' }]), B.color('Text color', 'color')], padF));
         case 'image': return decorate(base.concat([B.btn('Choose from library', () => this.openLibrary({ id: b.id, key: 'src' })), B.text('Alt text', 'alt', 'Describe the image'), B.text('Link URL', 'href', 'https://'), B.range('Width', 'width', 5, 100, 1, '%'), B.seg('Align', 'align', ALIGN), B.range('Rounded corners', 'radius', 0, 200, 1, 'px')], padF));
-        case 'button': return decorate(base.concat([B.text('Label', 'label'), B.text('Link URL', 'href', 'https://'), B.color('Button color', 'bg'), B.color('Text color', 'color'), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.range('Text size', 'size', 8, 48, 1, 'px'), B.range('Rounded corners', 'radius', 0, 60, 1, 'px'), B.range('Outline thickness', 'borderW', 0, 6, 1, 'px')].concat(b.props.borderW ? [B.sel('Outline style', 'borderStyle', BORDER_STYLES), B.color('Outline color', 'borderColor')] : []).concat([B.range('Button height', 'py', 0, 60, 1, 'px'), B.range('Button width', 'px', 0, 120, 2, 'px'), B.seg('Align', 'align', ALIGN), B.tog('Full width', 'full')])));
+        case 'button': return decorate(base.concat([B.text('Label', 'label'), B.text('Link URL', 'href', 'https://'), B.color('Button color', 'bg'), B.color('Text color', 'color'), B.sel('Font', 'fontFamily', this.fontOptions(true, b.props.fontFamily)), B.range('Text size', 'size', 8, 48, 1, 'px'), B.range('Rounded corners', 'radius', 0, 60, 1, 'px'), B.range('Outline thickness', 'borderW', 0, 6, 1, 'px')].concat(b.props.borderW ? [B.sel('Outline style', 'borderStyle', BORDER_STYLES), B.color('Outline color', 'borderColor')] : []).concat([B.range('Button height', 'py', 0, 60, 1, 'px'), B.range('Button width', 'px', 0, 120, 2, 'px'), B.seg('Align', 'align', ALIGN), B.tog('Full width', 'full')])));
         case 'divider': return decorate(base.concat([B.range('Thickness', 'thickness', 1, 20, 1, 'px'), B.sel('Line style', 'lineStyle', BORDER_STYLES), B.range('Width', 'width', 5, 100, 5, '%'), B.color('Color', 'color'), B.range('Space above & below', 'py', 0, 160, 2, 'px')]));
         case 'spacer': return decorate(base.concat([B.range('Height', 'height', 0, 400, 2, 'px')]));
         // Dynamic-content markers: the expression lives on the start marker;
@@ -1400,15 +1400,15 @@ export class EditorCore {
           B.seg('Icon palette', 'palette', [{ value: 'custom', label: 'Custom' }, { value: 'brand', label: 'Brand' }]),
           B.seg('Icon shape', 'shape', [{ value: 'outline', label: 'Outline' }, { value: 'bare', label: 'Bare' }, { value: 'circle', label: 'Circle' }, { value: 'square', label: 'Square' }]),
           B.tog('Show network names', 'showLabel'),
-          B.sel('Font', 'fontFamily', this.fontOptions(true)),
+          B.sel('Font', 'fontFamily', this.fontOptions(true, b.props.fontFamily)),
           B.seg('Align', 'align', ALIGN), B.range('Icon size', 'size', 10, 64, 1, 'px'), B.range('Space between icons', 'gap', 0, 80, 2, 'px'), B.color('Icon color', 'color'),
         ]));
         case 'video': return decorate(base.concat([B.btn('Choose thumbnail', () => this.openLibrary({ id: b.id, key: 'src' })), B.text('Video URL', 'href', 'https://'), B.text('Caption', 'caption'), B.color('Badge color', 'badge')]));
         case 'html': return decorate(base.concat([B.area('Raw HTML', 'code')]));
-        case 'countdown': return decorate(base.concat([B.text('Ends at (YYYY-MM-DDTHH:MM)', 'target'), B.text('Label', 'label'), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.color('Color', 'color')]));
-        case 'menu': return decorate(base.concat([B.area('Items — one per line as Label|URL', 'items'), B.seg('Align', 'align', ALIGN), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.range('Text size', 'size', 8, 32, 1, 'px'), B.range('Space between items', 'gap', 0, 80, 2, 'px'), B.color('Text color', 'color')]));
-        case 'heading': return decorate(base.concat([B.area('Text', 'text'), B.sel('Heading level', 'level', [{ value: 'h1', label: 'H1 — largest' }, { value: 'h2', label: 'H2' }, { value: 'h3', label: 'H3' }, { value: 'h4', label: 'H4 — smallest' }]), B.seg('Font style', 'font', [{ value: 'condensed', label: 'Condensed' }, { value: 'body', label: 'Body' }]), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.range('Text size', 'size', ...SIZE_SPAN.heading, 1, 'px'), B.range('Line spacing', 'lh', 0.8, 2.2, 0.02, ''), B.seg('Align', 'align', ALIGN), B.sel('Text weight', 'weight', [{ value: '400', label: 'Regular' }, { value: '600', label: 'Semibold' }, { value: '700', label: 'Bold' }]), B.color('Text color', 'color')], padF));
-        case 'list': return decorate(base.concat([B.area('Items — one per line', 'items'), B.tog('Numbered', 'ordered'), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.range('Text size', 'size', 8, 48, 1, 'px'), B.range('Line spacing', 'lh', 0.8, 3, 0.05, ''), B.range('Space between items', 'gap', 0, 60, 1, 'px'), B.color('Text color', 'color')], padF));
+        case 'countdown': return decorate(base.concat([B.text('Ends at (YYYY-MM-DDTHH:MM)', 'target'), B.text('Label', 'label'), B.sel('Font', 'fontFamily', this.fontOptions(true, b.props.fontFamily)), B.color('Color', 'color')]));
+        case 'menu': return decorate(base.concat([B.area('Items — one per line as Label|URL', 'items'), B.seg('Align', 'align', ALIGN), B.sel('Font', 'fontFamily', this.fontOptions(true, b.props.fontFamily)), B.range('Text size', 'size', 8, 32, 1, 'px'), B.range('Space between items', 'gap', 0, 80, 2, 'px'), B.color('Text color', 'color')]));
+        case 'heading': return decorate(base.concat([B.area('Text', 'text'), B.sel('Heading level', 'level', [{ value: 'h1', label: 'H1 — largest' }, { value: 'h2', label: 'H2' }, { value: 'h3', label: 'H3' }, { value: 'h4', label: 'H4 — smallest' }]), B.seg('Font style', 'font', [{ value: 'condensed', label: 'Condensed' }, { value: 'body', label: 'Body' }]), B.sel('Font', 'fontFamily', this.fontOptions(true, b.props.fontFamily)), B.range('Text size', 'size', ...SIZE_SPAN.heading, 1, 'px'), B.range('Line spacing', 'lh', 0.8, 2.2, 0.02, ''), B.seg('Align', 'align', ALIGN), B.sel('Text weight', 'weight', [{ value: '400', label: 'Regular' }, { value: '600', label: 'Semibold' }, { value: '700', label: 'Bold' }]), B.color('Text color', 'color')], padF));
+        case 'list': return decorate(base.concat([B.area('Items — one per line', 'items'), B.tog('Numbered', 'ordered'), B.sel('Font', 'fontFamily', this.fontOptions(true, b.props.fontFamily)), B.range('Text size', 'size', 8, 48, 1, 'px'), B.range('Line spacing', 'lh', 0.8, 3, 0.05, ''), B.range('Space between items', 'gap', 0, 60, 1, 'px'), B.color('Text color', 'color')], padF));
         case 'table': return decorate(base.concat([
           // Custom kind (render/fields.js `renderTableGrid`): a real grid of
           // cell inputs with add/remove row+column controls, replacing the
@@ -1416,11 +1416,10 @@ export class EditorCore {
           // `data` string underneath.
           { kind: 'tablegrid', label: 'Cells', value: b.props.data || '', header: !!b.props.header, onChange: (v) => this.setProp(b.id, 'data', v) },
           B.tog('Header row', 'header'), B.tog('Cell borders', 'borders'), ...(b.props.borders ? [B.range('Border thickness', 'borderWidth', 1, 10, 1, 'px'), B.sel('Border style', 'borderStyle', BORDER_STYLES)] : []), B.tog('Zebra stripes', 'striped'),
-          B.sel('Font', 'fontFamily', this.fontOptions(true)),
+          B.sel('Font', 'fontFamily', this.fontOptions(true, b.props.fontFamily)),
           B.range('Space in cells', 'pad', 0, 50, 1, 'px'), B.range('Text size', 'size', 8, 32, 1, 'px'), B.range('Width', 'width', 10, 100, 5, '%'),
           B.color('Header color', 'headBg'), B.color('Line color', 'lineColor'), B.seg('Align', 'align', ALIGN),
         ]));
-        case 'embed': return decorate(base.concat([B.text('Embed URL', 'src', 'https://'), B.range('Height', 'height', 40, 1200, 10, 'px'), B.text('Accessible label', 'label'), B.range('Padding', 'py', 0, 120, 2, 'px')]));
         case 'css': return decorate(base.concat([B.area('CSS', 'code'), B.text('Note to yourself', 'note')]));
         case 'box': return decorate(base.concat([B.area('Content (HTML allowed)', 'html'), B.color('Background color', 'bg'), B.btn('Choose background image', () => this.openLibrary({ id: b.id, key: 'bgImage' })), B.text('Background image URL', 'bgImage', 'https://'), B.range('Space inside', 'pad', 0, 160, 2, 'px'), B.range('Border thickness', 'border', 0, 20, 1, 'px')].concat(b.props.border ? [
           B.sel('Border style', 'borderStyle', BORDER_STYLES), B.color('Border color', 'lineColor'),
@@ -1576,7 +1575,7 @@ export class EditorCore {
    * an empty value meaning "use the theme font" (renderers read
    * `p.fontFamily || theme.font`, so old documents need no migration).
    */
-  fontOptions(inherit) {
+  fontOptions(inherit, current) {
     const stacks = [
       { value: '"Helvetica Neue", Helvetica, Arial, sans-serif', label: 'Helvetica Neue' },
       { value: 'Helvetica, Arial, sans-serif', label: 'Helvetica / Arial' },
@@ -1589,7 +1588,20 @@ export class EditorCore {
       { value: '"Palatino Linotype", Palatino, Georgia, serif', label: 'Palatino' },
       { value: 'ui-monospace, "Courier New", monospace', label: 'Monospace' },
     ];
-    return inherit ? [{ value: '', label: 'Inherit — theme font' }].concat(stacks) : stacks;
+    const opts = inherit ? [{ value: '', label: 'Inherit — theme font' }].concat(stacks) : stacks;
+    // An imported email brings its own stack, and it is almost never one of
+    // the ten above. A <select> whose value matches no option shows nothing
+    // selected -- the control read 'Inherit — theme font' (or the first
+    // stack) about a block that was really set in Georgia, and the only way
+    // to answer "what font is this?" was to overwrite it. Kept as an option
+    // of its own, matched loosely because quoting and spacing differ
+    // between what CSSOM hands back and what the list declares ('DM Sans'
+    // vs "DM Sans").
+    const key = (v) => String(v || '').replace(/["']/g, '').replace(/\s*,\s*/g, ',').replace(/\s+/g, ' ').trim().toLowerCase();
+    if (current && !opts.some((o) => key(o.value) === key(current))) {
+      opts.push({ value: current, label: String(current).split(',')[0].replace(/["']/g, '').trim() + ' — from the email' });
+    }
+    return opts;
   }
 
   themeFields() {
@@ -1621,7 +1633,7 @@ export class EditorCore {
       B.color('Border color', 'borderColor'),
     ] : []).concat([
       B.head('Type & color'),
-      B.sel('Default font', 'font', this.fontOptions(false)),
+      B.sel('Default font', 'font', this.fontOptions(false, this.state.doc.theme.font)),
       B.color('Text color', 'text'),
       B.color('Link color', 'link'),
     ]));

package/src/core/export.js

@@ -136,9 +136,38 @@ export function decorateLogicTags(html) {
   return s;
 }
 
-export function buildHtml(state, root, boxCss) {
+export function buildHtml(state, root, boxCss, opts) {
   const d = state.doc; const t = d.theme;
   const logic = logicPlan(d);
+  /*
+   * Fidelity markers. A handful of blocks render into markup that cannot be
+   * read back into the block it came from: a countdown bakes its digits, a
+   * video is just a linked image, a section box and a code sample are styled
+   * divs like any other, a raw-CSS block is a bare <style>, and a flex/grid
+   * row is a div no table walker can re-shape. For exactly those, the export
+   * stamps a compact attribute layer -- `data-mc` (the type), `data-mcp`
+   * (the props the DOM itself does not carry), `data-mcr` (a CSS-layout
+   * row's settings) and the inert `mc-keep` class -- which the importer
+   * trusts when present and ignores otherwise. Mail clients ignore unknown
+   * attributes wholesale, and everything else round-trips from its rendered
+   * shape alone, so the layer stays this small. Attribute names deliberately
+   * sit outside `grab()`'s `data-mc-[a-z-]+` strip (they live on exporter
+   * scaffolding, but belt and braces). A host that wants pristine HTML can
+   * pass `exportHtml({ markers: false })` and accept the lossy reload.
+   */
+  const markers = !(opts && opts.markers === false);
+  const attrEsc = (v) => String(v).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+  const MARKED = { countdown: 1, video: 1, box: 1, codeblock: 1 };
+  const marker = (b) => {
+    if (!markers || !MARKED[b.type]) return '';
+    const payload = { ...b.props };
+    // Content the rendered DOM already carries is not duplicated into the
+    // payload: a box's html IS the grabbed markup, a code sample's text IS
+    // the <pre>'s own.
+    if (b.type === 'box') delete payload.html;
+    if (b.type === 'codeblock') delete payload.code;
+    return ' data-mc="' + b.type + '" data-mcp="' + attrEsc(JSON.stringify(payload)) + '"';
+  };
   const grab = (id) => {
     const el = root.querySelector('[data-mc-content="' + id + '"]');
     if (!el) return '';
@@ -174,7 +203,11 @@ export function buildHtml(state, root, boxCss) {
    */
   const mobilePlan = (rp, cols) => {
     const mode = rp.mobileCols === undefined ? 1 : rp.mobileCols;
-    if (cols < 2 || mode === 'keep') return { row: '', cell: '' };
+    if (cols < 2) return { row: '', cell: '' };
+    // `keep` exports NO functional class, which made it indistinguishable
+    // from foreign HTML (where stacking is the safer default) -- so it ships
+    // as the inert `mc-keep`, a marker with no stylesheet rule behind it.
+    if (mode === 'keep') return { row: markers ? 'mc-keep' : '', cell: '' };
     const rowCls = [];
     // Two-up and reverse both need the row to become a flex container, which
     // is safe precisely because it only ever runs inside the media query: a
@@ -208,11 +241,15 @@ export function buildHtml(state, root, boxCss) {
       return blocksOf.map((b) => logic.emit.get(b.id) || '').filter(Boolean).map((s) => '      ' + s).join('\n');
     }
     const colInner = (c) => c.blocks.map((b) => {
-      if (b.type === 'css') return '<style>' + (b.props.code || '') + '</style>';
+      if (b.type === 'css') return '<style' + (markers ? ' data-mc="css"' + (b.props.note ? ' data-mcn="' + attrEsc(b.props.note) + '"' : '') : '') + '>' + (b.props.code || '') + '</style>';
       if (b.type === 'html') return b.props.code || '';
-      if (b.type === 'svg') return '<div style="text-align:' + b.props.align + ';padding:' + b.props.py + 'px 0">' + (b.props.code || '') + '</div>';
+      // The same width-carrying span the canvas draws (block-body.js), so the
+      // Width slider reaches the sent mail and the importer can read it back
+      // -- exported bare, the drawing shipped at its intrinsic size and the
+      // prop reset to 100 on every reload.
+      if (b.type === 'svg') return '<div style="text-align:' + b.props.align + ';padding:' + b.props.py + 'px 0"><span style="display:inline-block;width:' + (b.props.width || 100) + '%">' + (b.props.code || '') + '</span></div>';
       if (b.type === 'condition' || b.type === 'loop') return logic.emit.get(b.id) || '';
-      return '<div' + visClass(b.props) + ' style="' + boxCss(b.props) + '">' + grab(b.id) + '</div>';
+      return '<div' + marker(b) + visClass(b.props) + ' style="' + boxCss(b.props) + '">' + grab(b.id) + '</div>';
     }).filter(Boolean).join('\n            ') || '&nbsp;';
     const cells = r.cols.map((c) => {
       // Column-level styling (bg/radius/inner padding) renders as a wrapper
@@ -228,9 +265,12 @@ export function buildHtml(state, root, boxCss) {
     // for every wide client.
     const wrapCls = [plan.cell ? 'mc-stack' : '', plan.row].filter(Boolean).join(' ');
     const stackWrap = wrapCls ? ' class="' + wrapCls + '"' : '';
+    const mcr = markers && rp.layout && rp.layout !== 'columns'
+      ? ' data-mcr="' + attrEsc(JSON.stringify({ layout: rp.layout, flexDir: rp.flexDir || 'row', justify: rp.justify || 'flex-start', alignItems: rp.alignItems || 'stretch', wrap: rp.wrap !== false, gridCols: rp.gridCols || 2, gap: rp.gap || 0, spans: r.cols.map((c) => c.span) })) + '"'
+      : '';
     const cssBody = rp.layout === 'grid'
-      ? '<div' + stackWrap + ' style="display:grid;grid-template-columns:repeat(' + (rp.gridCols || 2) + ',minmax(0,1fr));gap:' + rp.gap + 'px">\n            ' + r.cols.map((c) => '<div>' + colInner(c) + '</div>').join('\n            ') + '\n          </div>'
-      : '<div' + stackWrap + ' style="display:flex;flex-direction:' + (rp.flexDir || 'row') + ';justify-content:' + (rp.justify || 'flex-start') + ';align-items:' + (rp.alignItems || 'stretch') + ';flex-wrap:' + (rp.wrap ? 'wrap' : 'nowrap') + ';gap:' + rp.gap + 'px">\n            ' + r.cols.map((c) => '<div style="flex:' + c.span + ' 1 auto;min-width:0">' + colInner(c) + '</div>').join('\n            ') + '\n          </div>';
+      ? '<div' + mcr + stackWrap + ' style="display:grid;grid-template-columns:repeat(' + (rp.gridCols || 2) + ',minmax(0,1fr));gap:' + rp.gap + 'px">\n            ' + r.cols.map((c) => '<div>' + colInner(c) + '</div>').join('\n            ') + '\n          </div>'
+      : '<div' + mcr + stackWrap + ' style="display:flex;flex-direction:' + (rp.flexDir || 'row') + ';justify-content:' + (rp.justify || 'flex-start') + ';align-items:' + (rp.alignItems || 'stretch') + ';flex-wrap:' + (rp.wrap ? 'wrap' : 'nowrap') + ';gap:' + rp.gap + 'px">\n            ' + r.cols.map((c) => '<div style="flex:' + c.span + ' 1 auto;min-width:0">' + colInner(c) + '</div>').join('\n            ') + '\n          </div>';
     const body = rp.layout && rp.layout !== 'columns'
       ? cssBody
       // The `<tr>` is what becomes the flex container for two-up and reverse;
@@ -244,8 +284,21 @@ export function buildHtml(state, root, boxCss) {
       : 'background:' + (rp.bg || t.contentBg || 'transparent') + ';';
     const tdBorder = rowBorderCss(rp)
       + (rp.radius ? 'border-radius:' + rp.radius + 'px;' : '')
-      + (rp.shadow ? 'box-shadow:' + rp.shadow + ';' : '')
-      + ((rp.mt || rp.mr || rp.mb || rp.ml || rp.my) ? 'margin:' + rowMargin(rp) + ';' : '');
+      + (rp.shadow ? 'box-shadow:' + rp.shadow + ';' : '');
+    // Outside margins and Max width need an element mail clients actually
+    // honour them on: margins on a <td> are ignored by every major client
+    // (the old shape wrote them there -- inert in sent mail AND never read
+    // back), and max-width was canvas-only. Both now ride a wrapper div
+    // INSIDE the cell, carrying the row's paint and padding with them so
+    // the margin sits outside the painted box, exactly as the canvas draws
+    // it. Rows using neither keep the old markup byte for byte.
+    const boxed = rp.mt || rp.mr || rp.mb || rp.ml || rp.my || (rp.maxW && rp.maxW < 100);
+    if (boxed) {
+      const cap = rp.maxW && rp.maxW < 100 ? 'max-width:' + rp.maxW + '%;' : '';
+      // centerEmpty only when capped: an uncapped box spans the cell anyway,
+      // and `auto` there would only read back as a lost slider value.
+      return '      <tr>\n        <td style="padding:0;">\n        <div style="' + cap + 'margin:' + rowMargin(rp, !!cap) + ';padding:' + rowPad(rp) + ';' + tdBg + tdBorder + '">\n          ' + body + '\n        </div>\n        </td>\n      </tr>';
+    }
     return '      <tr>\n        <td style="padding:' + rowPad(rp) + ';' + tdBg + tdBorder + '">\n          ' + body + '\n        </td>\n      </tr>';
   }).join('\n') + (logic.tail ? '\n      ' + logic.tail : '');
   // The page section -- the full-width area the content column sits on. Its
@@ -353,6 +406,26 @@ export function buildHtml(state, root, boxCss) {
   // `text-size-adjust` at 100%, never `none`: both stop a mobile client
   // inflating the type, but `none` also blocks legitimate scaling and leaves
   // text unreadably small on some Android clients.
+  /*
+   * theme.link, made real: mail clients have no stylesheet to inherit a link
+   * color from (Gmail strips <style>; the sheet rule that paints the canvas
+   * never ships), so the value must ride every anchor inline. Stamped only
+   * where no inline color already stands -- a button label, a menu item, or
+   * a link the user recolored by hand keeps its own -- and skipped entirely
+   * when the theme has no link color. The canvas strips restated stamps at
+   * render time (overrideLinkColor), which is what keeps a reloaded document
+   * inheriting: export -> import -> export re-stamps the same bytes.
+   */
+  const stampLinks = (html) => {
+    if (!t.link) return html;
+    return html.replace(/<a\b([^>]*)>/g, (m0, attrs) => {
+      if (/(?:[;"\s])color\s*:/.test(attrs)) return m0;
+      if (/style="/.test(attrs)) {
+        return '<a' + attrs.replace(/style="([^"]*)"/, (s0, css) => 'style="' + css + (!css.trim() || css.trim().endsWith(';') ? '' : ';') + 'color:' + t.link + ';"') + '>';
+      }
+      return '<a' + attrs + ' style="color:' + t.link + ';">';
+    });
+  };
   const bodyStyle = 'margin:0;padding:0;background:' + pageBg + ';font-family:' + t.font.replace(/"/g, "'") + ';color:' + t.text + ';-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%;';
-  return msoHarden('<!doctype html>\n<html lang="en" xmlns:o="urn:schemas-microsoft-com:office:office">\n<head>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width,initial-scale=1">\n<meta name="color-scheme" content="light">\n<meta name="supported-color-schemes" content="light">\n<title>' + 'Email' + '</title>' + msoHead + stackCss + '\n</head>\n<body style="' + bodyStyle + '">\n<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:' + pageBg + ';">\n  <tr><td align="center" style="padding:' + pagePad + ';">\n    ' + ghostOpen + '\n    ' + shell + '\n    ' + ghostClose + '\n  </td></tr>\n</table>\n</body>\n</html>');
+  return msoHarden(stampLinks('<!doctype html>\n<html lang="en" xmlns:o="urn:schemas-microsoft-com:office:office">\n<head>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width,initial-scale=1">\n<meta name="color-scheme" content="light">\n<meta name="supported-color-schemes" content="light">\n<title>' + 'Email' + '</title>' + msoHead + stackCss + '\n</head>\n<body style="' + bodyStyle + '">\n<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:' + pageBg + ';">\n  <tr><td align="center" style="padding:' + pagePad + ';">\n    ' + ghostOpen + '\n    ' + shell + '\n    ' + ghostClose + '\n  </td></tr>\n</table>\n</body>\n</html>'));
 }