@seliseblocks/mailcraft 0.2.7 → 0.2.9

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

@@ -102,6 +102,67 @@ export const cleanImportHtml = (html) => {
   return doc.body.innerHTML.replace(/<!--[\s\S]*?-->/g, '').replace(/\s{2,}/g, ' ').trim();
 };
 
+/**
+ * Mutation-time repairs for rich block HTML. Imported content keeps its
+ * per-element inline typography on purpose (`cleanImportHtml` above), but a
+ * descendant's own `font-size`/`color`/`line-height` always outranks the
+ * inherited value from the block wrapper -- so the inspector's Text size,
+ * Text color, Line spacing and Text weight controls were dead on any block
+ * whose paragraphs carried their own styles. The render-time strip that fixed
+ * the Font control (`overrideRichFont`, render/block-body.js) can't be reused
+ * here: `fontFamily` defaults to empty so "unset" means "leave the import
+ * alone", while `size`/`color`/`lh`/`weight` always hold a value -- stripping
+ * at render time would flatten every imported design on first paint. These
+ * run once, at the moment the user moves the control (core `setProp`), so an
+ * untouched document renders byte-identical and the rewrite lands in the same
+ * undo step as the prop change.
+ *
+ * Both return the input string untouched (same reference, no reparse churn)
+ * when there is nothing to rewrite.
+ */
+
+/** Drops trailing float noise without inventing integers: 60.75 stays, 78.00 becomes 78. */
+const trimNum = (n) => String(Number(n.toFixed(2)));
+
+/**
+ * Multiplies every absolute inline font-size by `ratio`, so the block's Text
+ * size acts as a master scale and a 15/26/15px imported hierarchy survives a
+ * base change instead of being flattened. Only px/pt scale -- em/% are
+ * relative and already follow the wrapper. A px line-height sitting beside a
+ * scaled font-size scales with it, or the imported `line-height:22px` would
+ * strangle 45px glyphs.
+ */
+export const scaleInlineSizes = (html, ratio) => {
+  const src = String(html == null ? '' : html);
+  if (!src || !Number.isFinite(ratio) || ratio <= 0 || ratio === 1 || !/font-size/i.test(src)) return src;
+  const doc = new DOMParser().parseFromString(src, 'text/html');
+  let changed = false;
+  doc.body.querySelectorAll('[style]').forEach((node) => {
+    const size = /^([\d.]+)(px|pt)$/.exec(node.style.fontSize || '');
+    if (!size) return;
+    node.style.fontSize = trimNum(parseFloat(size[1]) * ratio) + size[2];
+    const lh = /^([\d.]+)px$/.exec(node.style.lineHeight || '');
+    if (lh) node.style.lineHeight = trimNum(parseFloat(lh[1]) * ratio) + 'px';
+    changed = true;
+  });
+  return changed ? doc.body.innerHTML : src;
+};
+
+/** Removes one CSS property from every descendant's inline style -- the block-level control now owns it. The property name is exact (`color` never touches `background-color`). */
+export const stripInlineStyle = (html, prop) => {
+  const src = String(html == null ? '' : html);
+  if (!src || src.indexOf(prop) === -1) return src;
+  const doc = new DOMParser().parseFromString(src, 'text/html');
+  let changed = false;
+  doc.body.querySelectorAll('[style]').forEach((node) => {
+    if (!node.style.getPropertyValue(prop)) return;
+    node.style.removeProperty(prop);
+    if (!node.getAttribute('style')) node.removeAttribute('style');
+    changed = true;
+  });
+  return changed ? doc.body.innerHTML : src;
+};
+
 /**
  * Makes an image URL safe to drop inside `url("...")`.
  *
@@ -160,7 +221,14 @@ export const linkHref = (u) => {
     if (!/^[a-z][a-z0-9+.-]*:\d/i.test(raw)) return '';
   }
   if (raw.startsWith('//')) return 'https:' + raw;
-  if (/^[#/]/.test(raw) || raw.startsWith('{{')) return raw;
+  // A href that *is* a merge placeholder is handed back untouched. Only
+  // `{{ }}` used to be, so `[Survey URL]` -- and Mailchimp's `*|URL|*`, and
+  // `%%url%%`, and `${url}` -- came back as `https://[Survey URL]`, which the
+  // sending engine then expands into `https://https://...` and the link is
+  // dead. Anchored to the start on purpose: `example.com/{{id}}` is a real
+  // relative URL and still needs its scheme.
+  if (/^(?:\{\{|\[|%%|\*\||\$\{)/.test(raw)) return raw;
+  if (/^[#/]/.test(raw)) return raw;
   if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(raw)) return 'mailto:' + raw;
   return 'https://' + raw;
 };

package/src/core/variables.js

@@ -1,11 +1,11 @@
-export const DEFAULT_VARS = 'first_name\nlast_name\nemail\ncompany\ncity\norder_id\nplan\ndiscount\nunsubscribe_url';
-export const TOKEN = (t) => '{' + '{ ' + t + ' }' + '}';
-
-/** Variables are supplied by the host application -- the editor only ever shows the tokens, never a substituted value. */
-export function vars(raw) {
-  const list = Array.isArray(raw) ? raw : String(raw == null ? DEFAULT_VARS : raw).split(/[\n,]/);
-  return list.map((v) => String(v).trim().replace(/^\{\{\s*|\s*\}\}$/g, '')).filter(Boolean);
-}
-
-/** Which prop field a merge tag lands in when inserted from the Data tab, keyed by the selected block's type. */
-export const INSERT_KEYS = { text: 'html', heading: 'text', button: 'label', html: 'code', codeblock: 'code', quote: 'text', list: 'items', table: 'data' };
+export const DEFAULT_VARS = 'first_name\nlast_name\nemail\ncompany\ncity\norder_id\nplan\ndiscount\nunsubscribe_url';
+export const TOKEN = (t) => '{' + '{ ' + t + ' }' + '}';
+
+/** Variables are supplied by the host application -- the editor only ever shows the tokens, never a substituted value. */
+export function vars(raw) {
+  const list = Array.isArray(raw) ? raw : String(raw == null ? DEFAULT_VARS : raw).split(/[\n,]/);
+  return list.map((v) => String(v).trim().replace(/^\{\{\s*|\s*\}\}$/g, '')).filter(Boolean);
+}
+
+/** Which prop field a merge tag lands in when inserted from the Data tab, keyed by the selected block's type. */
+export const INSERT_KEYS = { text: 'html', heading: 'text', button: 'label', html: 'code', codeblock: 'code', quote: 'text', list: 'items', table: 'data' };

package/src/mailcraft-editor.js

@@ -1039,6 +1039,22 @@ export class MailCraftEditor extends ElementBase {
   }
 
   renderTabBody() {
+    // The browser's native colour dialog is bound to the identity of its
+    // <input type="color"> node: Chromium closes the dialog the moment that
+    // node leaves the document -- even if the same node is spliced back into
+    // the rebuilt tree within the same task (unlike the range slider's mouse
+    // capture, which focus-preserve.js does save that way). The picker lives
+    // in this panel, and its `input` events commit (debounced) to the doc, so
+    // every colour the user tried used to rebuild the panel ~120ms later and
+    // slam the dialog shut. While the picker holds focus -- the only time its
+    // dialog can be open -- the panel therefore skips its rebuild: the canvas
+    // has already re-rendered above (that is the live preview), and the pill
+    // previews itself (fields.js mutates its swatch and hex text directly on
+    // every `input`). Nothing else in the panel changes on a colour commit,
+    // so nothing is stale; the moment focus moves anywhere else, the next
+    // render rebuilds the panel as usual.
+    const active = this.shadowRoot.activeElement;
+    if (active && active.tagName === 'INPUT' && active.type === 'color' && this.tabBody.contains(active)) return;
     this.tabBody.innerHTML = '';
     const tab = this.core.state.tab;
     if (tab === 'design') this.tabBody.appendChild(this.renderDesignTab());
@@ -1579,7 +1595,30 @@ export class MailCraftEditor extends ElementBase {
     this.codeStatusEl = elS('div', 'font-family: var(--ed-font); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ed-muted);', { class: 'mc-code-kicker' });
     headText.append(this.codeStatusEl, elS('div', 'font-family: var(--ed-font); font-weight: 600; font-size: 15px; line-height: 1.2;', { text: t('modal.rawHtmlTitle'), 'data-i18n': 'modal.rawHtmlTitle', class: 'mc-code-heading' }));
     this.codeWidthSeg = elS('div', '', { class: 'mc-segment' });
-    const reloadBtn = elS('button', 'border: 1px solid var(--ed-line); background: transparent; color: var(--ed-text); cursor: pointer; height: 30px; padding: 0 11px; display: flex; align-items: center; gap: 6px; font-family: var(--ed-font); font-size: 11px; font-weight: 600; transition: border-color 0.16s, background 0.16s;', { type: 'button', title: t('action.reloadHint'), 'data-i18n-title': 'action.reloadHint' });
+    // Ghost-button chrome shared by the header's Copy and Reload.
+    const GHOST_BTN = 'border: 1px solid var(--ed-line); background: transparent; color: var(--ed-text); cursor: pointer; height: 30px; padding: 0 11px; display: flex; align-items: center; gap: 6px; font-family: var(--ed-font); font-size: 11px; font-weight: 600; transition: border-color 0.16s, background 0.16s;';
+    const copyBtn = elS('button', GHOST_BTN, { type: 'button', title: t('toast.htmlCopied'), 'data-i18n-title': 'toast.htmlCopied', class: 'mc-code-copy' });
+    copyBtn.appendChild(icon('copy', 14));
+    // Reuses keys every locale already carries (story.copy / export.copied)
+    // rather than minting new ones across 32 translations.
+    const copyLabel = elS('span', '', { text: t('story.copy'), 'data-i18n': 'story.copy' });
+    copyBtn.appendChild(copyLabel);
+    copyBtn.addEventListener('mouseenter', () => { copyBtn.style.borderColor = 'var(--ed-accent)'; copyBtn.style.background = 'var(--ed-soft)'; });
+    copyBtn.addEventListener('mouseleave', () => { copyBtn.style.borderColor = 'var(--ed-line)'; copyBtn.style.background = 'transparent'; });
+    copyBtn.addEventListener('click', () => {
+      this.core.copyCode();
+      // Momentary "Copied": swap the i18n key itself, not just the text --
+      // refreshStrings relabels every [data-i18n] node on each render and
+      // would otherwise revert the feedback mid-flash.
+      copyLabel.setAttribute('data-i18n', 'export.copied');
+      copyLabel.textContent = this.core.t('export.copied');
+      clearTimeout(this._codeCopyTimer);
+      this._codeCopyTimer = setTimeout(() => {
+        copyLabel.setAttribute('data-i18n', 'story.copy');
+        copyLabel.textContent = this.core.t('story.copy');
+      }, 1600);
+    });
+    const reloadBtn = elS('button', GHOST_BTN, { type: 'button', title: t('action.reloadHint'), 'data-i18n-title': 'action.reloadHint' });
     reloadBtn.appendChild(icon('refresh', 14));
     reloadBtn.appendChild(elS('span', '', { text: t('action.reload'), 'data-i18n': 'action.reload' }));
     reloadBtn.addEventListener('mouseenter', () => { reloadBtn.style.borderColor = 'var(--ed-accent)'; reloadBtn.style.background = 'var(--ed-soft)'; });
@@ -1601,7 +1640,7 @@ export class MailCraftEditor extends ElementBase {
     closeBtn.addEventListener('mouseleave', () => { closeBtn.style.borderColor = 'var(--ed-line)'; });
     closeBtn.addEventListener('click', () => this.core.setState({ libraryOpen: false, exportOpen: false, aiOpen: false, codeOpen: false, assetTarget: null, libHot: false }));
     tip(closeBtn, t('action.closeWithoutApplyingHint'), 'down', 'end');
-    head.append(headIcon, headText, this.codeWidthSeg, reloadBtn, applyBtn, closeBtn);
+    head.append(headIcon, headText, this.codeWidthSeg, copyBtn, reloadBtn, applyBtn, closeBtn);
     overlay.appendChild(head);
 
     const cols = elS('div', 'display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; min-height: 0; background: var(--ed-work);', { class: 'mc-code-split' });