@seliseblocks/mailcraft 0.2.15 → 0.2.18

package/src/render/block-body.js

@@ -1,7 +1,7 @@
 import { icon, brandIcon, socialKey, SOCIAL_BRAND, contrastInk } from '../core/icons.js';
 import { pad } from '../core/layout-style.js';
 import { parseItems, cellsOf } from '../core/parse.js';
-import { linkHref } from '../core/sanitize.js';
+import { linkHref, cssUrl } from '../core/sanitize.js';
 
 function el(tag, style, attrs) {
   const node = document.createElement(tag);
@@ -93,7 +93,7 @@ function overrideLinkColor(root, link) {
  * toolbar node or null), `ctx.onTableCellBlur(block, ri, ci, value)`, `ctx.now`
  * (for the countdown), `ctx.vars` and `ctx.onInsertVariable` for the code-view escape hatch.
  */
-export function blockBody(b, theme, live, ctx) {
+export function blockBody(b, theme, live, ctx, colPx) {
   const p = b.props; const t = theme;
   const attr = live ? { 'data-mc-content': b.id } : {};
 
@@ -119,20 +119,87 @@ export function blockBody(b, theme, live, ctx) {
     case 'image': {
       const wrap = el('div', { padding: pad(p), textAlign: p.align, fontSize: '0' }, attr);
       const imgHref = linkHref(p.href);
+      /*
+       * Two things every exported image needs and had neither of.
+       *
+       * `width` as an ATTRIBUTE, in px: the Word engine behind Classic
+       * Outlook does not resolve a percentage width on an image and falls
+       * back to the file's intrinsic size, so a 1200px hero authored at 60%
+       * shipped 1200px wide and tore the layout open. The CSS percentage
+       * stays for every client that can do better -- the attribute is only
+       * the floor Word reads -- and `height:auto` keeps the aspect ratio once
+       * a width is pinned.
+       *
+       * A real `font-size` on the IMG: the wrapper sets `font-size:0` to kill
+       * the inline-block whitespace gap, and alt text inherits it, so with
+       * images blocked (Outlook's default) the alt text rendered at 0px and
+       * the recipient saw nothing at all. The wrapper keeps its 0; the image
+       * carries type of its own for the blocked state.
+       */
+      /*
+       * Two ways to size an image, and the second one is why a logo used to
+       * drift.
+       *
+       * The default is a PERCENTAGE of the column -- responsive, and the
+       * right answer for a hero. But a percentage cannot express "88px", and
+       * an import that met one had to round it into the nearest whole
+       * percent (88 of 600 -> 15% -> 93px). Every save re-derived the
+       * percent from the new pixel width, so the logo crept a little wider
+       * each time and never landed back on 88.
+       *
+       * `wUnit: 'px'` with `wpx` pins the real number instead: the CSS width,
+       * the Word `width` attribute and the read-back all carry the same
+       * integer, so the value is a fixed point. `max-width:100%` (plus the
+       * stylesheet's own `img` rule in the sent mail) keeps a pinned image
+       * from holding a narrow phone column open.
+       */
+      const fixed = p.wUnit === 'px' && Number(p.wpx) > 0;
+      const pxW = fixed
+        ? Math.max(1, Math.round(Number(p.wpx)))
+        : Math.max(1, Math.round(((Number(colPx) || Number(t.width) || 620)) * ((Number(p.width) || 100) / 100)));
+      const cssW = fixed ? pxW + 'px' : (Number(p.width) || 100) + '%';
+      /*
+       * `height` as an attribute, derived from the source's own aspect ratio
+       * rather than invented: with images blocked (Outlook's default, and
+       * Gmail's for an unknown sender) a width-only image collapses to a
+       * one-line strip and the layout below it jumps when the image loads.
+       * A width AND a height reserve the real box. The CSS `height:auto`
+       * still wins in every client that reads CSS, so a client that scales
+       * the image down keeps its proportions -- the attribute is only the
+       * floor Word and a blocked-image placeholder read.
+       *
+       * Absent unless the ratio is known (an import that carried both
+       * dimensions, or a library asset), so no image gains a guessed height.
+       */
+      const ratio = Number(p.ratio) > 0 ? Number(p.ratio) : 0;
+      const hAttr = ratio ? String(Math.max(1, Math.round(pxW * ratio))) : undefined;
+      // Retina and responsive sources ride through untouched. Apple Mail and
+      // iOS pick from `srcset`; every other client ignores both attributes
+      // and uses `src`, which is why `src` stays the 1x fallback.
+      const srcAttrs = {
+        srcset: p.srcset || undefined,
+        sizes: p.srcset && p.sizes ? p.sizes : undefined,
+        title: p.title || undefined,
+      };
+      const altType = { fontSize: '13px', lineHeight: '1.4', fontFamily: t.font, color: t.text };
       if (imgHref) {
         // The % width must live on the anchor, not the img: a percentage on a
         // child of a shrink-to-fit inline-block resolves against the image's
         // own intrinsic size (i.e. not at all), which rendered every linked
         // logo/icon at full intrinsic width no matter what `width` said.
-        const a = el('a', { display: 'inline-block', width: p.width + '%' }, { href: imgHref });
+        // `max-width` only in pixel mode: a percentage anchor is already
+        // capped by its container, and adding the declaration unconditionally
+        // would rewrite the markup of every linked image that never asked for
+        // this feature.
+        const a = el('a', { display: 'inline-block', width: cssW, ...(fixed ? { maxWidth: '100%' } : {}) }, { href: imgHref });
         // Same guard as every other anchor the canvas draws: without it a
         // click on a linked logo navigates the host application away from the
         // editor, taking the uncommitted document with it.
         a.addEventListener('click', (e) => e.preventDefault());
-        a.appendChild(el('img', { width: '100%', borderRadius: p.radius + 'px', display: 'block', border: '0' }, { src: p.src, alt: p.alt }));
+        a.appendChild(el('img', { width: '100%', height: 'auto', borderRadius: p.radius + 'px', display: 'block', border: '0', ...altType }, { src: p.src, alt: p.alt, width: String(pxW), height: hAttr, border: '0', ...srcAttrs }));
         wrap.appendChild(a);
       } else {
-        wrap.appendChild(el('img', { width: p.width + '%', maxWidth: '100%', borderRadius: p.radius + 'px', display: 'inline-block', border: '0' }, { src: p.src, alt: p.alt }));
+        wrap.appendChild(el('img', { width: cssW, height: 'auto', maxWidth: '100%', borderRadius: p.radius + 'px', display: 'inline-block', border: '0', ...altType }, { src: p.src, alt: p.alt, width: String(pxW), height: hAttr, border: '0', ...srcAttrs }));
       }
       return wrap;
     }
@@ -197,11 +264,29 @@ export function blockBody(b, theme, live, ctx) {
     }
     case 'divider': {
       const wrap = el('div', { padding: p.py + 'px 0' }, attr);
-      wrap.appendChild(el('div', { height: '0', width: p.width + '%', margin: '0 auto', borderTop: p.thickness + 'px ' + (p.lineStyle || 'solid') + ' ' + p.color }));
+      const rule = p.thickness + 'px ' + (p.lineStyle || 'solid') + ' ' + p.color;
+      // Word gives a zero-height div nothing to draw the border on, so the
+      // same rule ships twice: once on this div, which every other client
+      // renders and the importer reads (classifyDivider: a DIV bar with a
+      // border-top), and once on a <td> inside an MSO-only table, the shape
+      // Word does paint. `<!--[if !mso]><!-->` keeps the div out of Word so
+      // it never draws both. Comments are inert to the importer.
+      const doc = wrap.ownerDocument;
+      wrap.appendChild(doc.createComment('[if !mso]><!'));
+      wrap.appendChild(el('div', { height: '0', width: p.width + '%', margin: '0 auto', borderTop: rule, fontSize: '1px', lineHeight: '1px' }, { html: '&nbsp;' }));
+      wrap.appendChild(doc.createComment('<![endif]'));
+      wrap.appendChild(doc.createComment('[if mso]><table role="presentation" width="' + p.width + '%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td style="border-top:' + rule + ';font-size:1px;line-height:1px;">&nbsp;</td></tr></table><![endif]'));
       return wrap;
     }
-    case 'spacer':
-      return el('div', { height: p.height + 'px' }, attr);
+    case 'spacer': {
+      // An empty div has no height in Word: it needs a character to give a
+      // line to, and an exact line-height to size that line (msoHarden adds
+      // mso-line-height-rule:exactly wherever a px line-height stands). This
+      // is mj-spacer's shape. The NBSP trims to nothing for the importer, so
+      // classifySpacer still sees an empty div with a height.
+      const h = Math.max(0, Number(p.height) || 0);
+      return el('div', { height: h + 'px', lineHeight: h + 'px', fontSize: '1px' }, { ...attr, html: '&nbsp;' });
+    }
     case 'social': {
       // Two independent axes cover every style the block offers without a
       // second hand-drawn icon set per platform: `palette` picks the source
@@ -241,14 +326,32 @@ export function blockBody(b, theme, live, ctx) {
     }
     case 'video': {
       const wrap = el('div', { padding: '4px 0', textAlign: 'center' }, attr);
-      const a = el('a', { display: 'block', position: 'relative' }, { href: linkHref(p.href) });
+      /*
+       * The play badge used to float over the thumbnail with
+       * position:absolute. Gmail strips `position` outright and Word ignores
+       * it, so in both the badge fell to a line below the picture. Now the
+       * thumbnail is the cell's background (the one overlay mechanism email
+       * has) and the badge is plain centred content inside it. The cell needs
+       * a height, since a background gives none: 16:9 of the column width,
+       * which is what a video thumbnail is. The whole cell is the link.
+       */
+      const vw = Math.max(120, Number(colPx) || Number(t.width) || 620);
+      const vh = Math.round(vw * 9 / 16);
+      const vurl = cssUrl(p.src);
+      const table = el('table', { width: '100%', borderCollapse: 'collapse' }, { role: 'presentation', cellpadding: '0', cellspacing: '0', border: '0', width: '100%' });
+      const tr = el('tr'); table.appendChild(tr);
+      const cell = el('td', {
+        height: vh + 'px', textAlign: 'center', verticalAlign: 'middle',
+        backgroundColor: '#111111', backgroundImage: vurl ? 'url("' + vurl + '")' : 'none',
+        backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
+      }, { height: String(vh), align: 'center', valign: 'middle', background: p.src || undefined, bgcolor: '#111111' });
+      const a = el('a', { display: 'inline-block', textDecoration: 'none' }, { href: linkHref(p.href), title: p.caption || undefined });
       a.addEventListener('click', (e) => e.preventDefault());
-      a.appendChild(el('img', { width: '100%', display: 'block', border: '0' }, { src: p.src, alt: p.caption }));
-      const badge = el('span', { position: 'absolute', inset: '0', display: 'flex', alignItems: 'center', justifyContent: 'center' });
-      const circle = el('span', { width: '54px', height: '54px', borderRadius: '50%', background: p.badge, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '18px', paddingLeft: '4px' }, { text: '▶' });
-      badge.appendChild(circle);
-      a.appendChild(badge);
-      wrap.appendChild(a);
+      const circle = el('span', { display: 'inline-block', width: '54px', height: '54px', lineHeight: '54px', borderRadius: '50%', background: p.badge, color: '#fff', textAlign: 'center', fontSize: '18px', fontFamily: 'Arial, sans-serif' }, { text: '▶' });
+      a.appendChild(circle);
+      cell.appendChild(a);
+      tr.appendChild(cell);
+      wrap.appendChild(table);
       wrap.appendChild(el('div', { fontFamily: t.font, fontSize: '12.5px', color: p.badge, opacity: '0.7', marginTop: '8px' }, { text: p.caption }));
       return wrap;
     }
@@ -385,8 +488,17 @@ export function blockBody(b, theme, live, ctx) {
       const edit = live;
       const borderSide = (on) => (p.border && on !== false ? p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + p.lineColor : '0');
       const box = el('div', {
-        background: p.bgImage ? 'linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url("' + p.bgImage + '")' : p.bg,
-        backgroundSize: 'cover', backgroundPosition: 'center',
+        // Colour and image as separate longhands, never one shorthand. The
+        // shorthand made `p.bg` unreachable the moment an image was set --
+        // there was no colour left underneath when a client refused the image
+        // -- and it opened with a no-op `linear-gradient()` that outlook.com's
+        // sanitiser drops the whole declaration over, taking the photo with
+        // it. Same rule as a row's background (core/export.js).
+        backgroundColor: p.bg || 'transparent',
+        backgroundImage: p.bgImage ? 'url("' + cssUrl(p.bgImage) + '")' : 'none',
+        // The same three controls a row has; hard-coded cover/center meant a
+        // box background could never tile or pin to an edge.
+        backgroundSize: p.bgSize || 'cover', backgroundPosition: p.bgPos || 'center', backgroundRepeat: p.bgRepeat || 'no-repeat',
         borderTop: borderSide(p.topBorder), borderRight: borderSide(p.rightBorder),
         borderBottom: borderSide(p.bottomBorder), borderLeft: borderSide(p.leftBorder),
         borderRadius: p.radius + 'px', padding: p.pad + 'px', textAlign: p.align,

package/src/render/canvas.js

@@ -1,6 +1,6 @@
 import { DEF } from '../core/blocks.js';
-import { boxStyle, rowBg, rowPad, colsWrap, colStyle } from '../core/layout-style.js';
-import { scopeCss } from '../core/sanitize.js';
+import { boxStyle, rowBg, rowPad, colsWrap, colStyle, colBg } from '../core/layout-style.js';
+import { scopeCss, cssUrl } from '../core/sanitize.js';
 import { cellsOf } from '../core/parse.js';
 import { icon } from '../core/icons.js';
 import { blockBody } from './block-body.js';
@@ -189,7 +189,14 @@ export function renderDoc(core, live) {
   const radius = Number(theme.radius) || 0;
   const borderW = Number(theme.borderW) || 0;
   const root = el('div', {
-    width: width + 'px', maxWidth: '100%', background: theme.contentBg || 'transparent', color: theme.text, fontFamily: theme.font,
+    width: width + 'px', maxWidth: '100%', color: theme.text, fontFamily: theme.font,
+    // Colour and image as separate longhands, mirroring what the exporter
+    // writes -- the canvas has to show the same paint the recipient gets.
+    backgroundColor: theme.contentBg || 'transparent',
+    backgroundImage: theme.contentBgImage ? 'url("' + cssUrl(theme.contentBgImage) + '")' : 'none',
+    backgroundSize: theme.contentBgSize || 'cover',
+    backgroundPosition: theme.contentBgPos || 'center',
+    backgroundRepeat: theme.contentBgRepeat || 'no-repeat',
     // Only when the document actually asks for a shape: an unconditional
     // `0px` would override the editor chrome's own soft corner on the sheet
     // (style.js) and square off every template that never touched the field.
@@ -224,6 +231,15 @@ export function renderDoc(core, live) {
   const padX = Number(theme.padX) || 0;
   const page = el('div', {
     background: theme.bg || 'transparent',
+    // The page image, only when there is one: the longhands are added AFTER
+    // the shorthand so they override it, and are absent otherwise so a
+    // document with no image paints exactly as it always did.
+    ...(theme.bgImage ? {
+      backgroundImage: 'url("' + cssUrl(theme.bgImage) + '")',
+      backgroundSize: theme.bgSize || 'cover',
+      backgroundPosition: theme.bgPos || 'center',
+      backgroundRepeat: theme.bgRepeat || 'no-repeat',
+    } : {}),
     padding: padY + 'px ' + padX + 'px',
     boxSizing: 'border-box', maxWidth: '100%', display: 'flex', justifyContent: 'center',
     transition: 'background 0.2s, padding 0.22s cubic-bezier(0.22,0.61,0.36,1)',
@@ -310,7 +326,20 @@ export function renderDoc(core, live) {
         }
         : { display: 'block' })
       : colsWrap(r.props));
+    /*
+     * What this column measures in a sent email, in px. Word cannot resolve a
+     * percentage width on an image (it falls back to the file's intrinsic
+     * size, which is how a 1200px hero tore the layout open in Outlook), so
+     * the image renderer needs a real number to put in a `width` attribute.
+     * Approximate by construction -- cell gutters and column padding are not
+     * modelled here -- but an approximate cap is the whole difference between
+     * a scaled image and a 1200px one.
+     */
+    const rowPadX = (r.props.pl ?? r.props.px ?? 0) + (r.props.pr ?? r.props.px ?? 0);
+    const gapPx = (r.props.gap || 0) * Math.max(0, r.cols.length - 1);
+    const innerPx = Math.max(40, (Number(theme.width) || 620) - rowPadX - gapPx);
     r.cols.forEach((c, ci) => {
+      const colPx = Math.max(20, Math.round(innerPx * ((c.span || 100) / 100)));
       const colLines = [];
       const items = [];
       c.blocks.forEach((b, bi) => {
@@ -356,7 +385,7 @@ export function renderDoc(core, live) {
         // few pixels from the RTE's own controls. The RTE stands in for it for
         // the duration of the edit; it comes back on blur (still selected).
         if (bSel && ctx.editingId !== b.id) bWrap.appendChild(toolbar(core, b.id, 'block', DEF(b.type).code));
-        bWrap.appendChild(blockBody(b, theme, live, ctx));
+        bWrap.appendChild(blockBody(b, theme, live, ctx, colPx));
         items.push(bWrap);
       });
       let colTracker;
@@ -379,9 +408,9 @@ export function renderDoc(core, live) {
       // background must stop at the column's visual edge, not bleed across
       // the gutter. `host` is also what the drag listeners and
       // `indexFromPoint` must use -- the block slots are its children.
-      const styled = c.bg || c.border || c.radius || c.padY || c.padX;
+      const styled = c.bg || c.bgImage || c.border || c.radius || c.padY || c.padX;
       const host = styled
-        ? el('div', { background: c.bg || 'transparent', border: c.border ? c.border + 'px ' + (c.borderStyle || 'solid') + ' ' + (c.lineColor || '#e2e2e5') : '0', borderRadius: (c.radius || 0) + 'px', padding: (c.padY || 0) + 'px ' + (c.padX || 0) + 'px', height: '100%', boxSizing: 'border-box' })
+        ? el('div', { ...colBg(c), border: c.border ? c.border + 'px ' + (c.borderStyle || 'solid') + ' ' + (c.lineColor || '#e2e2e5') : '0', borderRadius: (c.radius || 0) + 'px', padding: (c.padY || 0) + 'px ' + (c.padX || 0) + 'px', height: '100%', boxSizing: 'border-box' })
         : colEl;
       if (live) {
         host.addEventListener('dragover', (e) => {

package/src/render/fields.js

@@ -447,6 +447,25 @@ export function renderField(f) {
     return wrap;
   }
 
+  /*
+   * A note is prose, not a control: no label row, no focus key, nothing to
+   * commit. It sits in the flow where the panel put it, tinted by tone --
+   * amber for a warning the author should act on before sending, muted for
+   * an aside. The left rule rather than a filled panel keeps it from reading
+   * as a field the user failed to fill in.
+   */
+  if (f.isNote) {
+    const warn = f.tone !== 'info';
+    wrap.appendChild(el('div', {
+      fontFamily: 'var(--ed-font)', fontSize: '11px', lineHeight: '1.5',
+      color: warn ? 'var(--ed-text)' : 'var(--ed-muted)',
+      background: warn ? 'rgba(214,141,32,0.10)' : 'var(--ed-panel-2)',
+      borderLeft: '2px solid ' + (warn ? 'rgba(214,141,32,0.85)' : 'var(--ed-line)'),
+      padding: '7px 9px', boxSizing: 'border-box',
+    }, { text: f.label, class: 'mc-field-note', role: warn ? 'status' : undefined }));
+    return wrap;
+  }
+
   // No isHead branch: heads never reach renderField -- renderFieldCards
   // consumes them as card kickers. A field list rendered without the card
   // grouper would drop its headings, which is the loud failure we want.

package/src/render/screenshot.js

@@ -62,8 +62,15 @@ function encodeCanvas(canvas, mime, quality) {
   });
 }
 
+// Inlined bytes are cached per URL for the session: every capture (open,
+// retry, reopen) used to re-fetch each remote image, which is most of a slow
+// open on a photo-heavy template. A failed fetch is evicted so a transient
+// network error does not pin the blank-pixel fallback forever.
+const inlineCache = new Map();
+
 function toDataUri(url) {
-  return fetch(url, { mode: 'cors' }).then((res) => {
+  if (inlineCache.has(url)) return inlineCache.get(url);
+  const job = fetch(url, { mode: 'cors' }).then((res) => {
     if (!res.ok) throw new Error('fetch failed: ' + res.status);
     return res.blob();
   }).then((blob) => new Promise((resolve, reject) => {
@@ -71,7 +78,12 @@ function toDataUri(url) {
     fr.onload = () => resolve(fr.result);
     fr.onerror = reject;
     fr.readAsDataURL(blob);
-  }));
+  })).catch((err) => {
+    inlineCache.delete(url);
+    throw err;
+  });
+  inlineCache.set(url, job);
+  return job;
 }
 
 async function inlineExternalImages(root) {
@@ -85,11 +97,34 @@ async function inlineExternalImages(root) {
     ));
   });
   root.querySelectorAll('[style]').forEach((el) => {
-    const m = (el.style.backgroundImage || '').match(/url\(["']?(?!data:)([^"')]+)["']?\)/);
+    /*
+     * Only the `url(...)` layer is rewritten, never the whole declaration.
+     * A tinted section paints `linear-gradient(rgba(20,22,24,α),…),url(…)`
+     * (core/layout-style.js), and replacing the property wholesale dropped
+     * the gradient -- so every darkened hero came out of the screenshot
+     * lighter than the canvas it was captured from. A fetch that fails
+     * leaves a transparent pixel in the layer's place rather than `none`,
+     * which would be invalid inside a layer list and would take the tint
+     * down with it a second way.
+     */
+    const decl = el.style.backgroundImage || '';
+    const m = decl.match(/url\(["']?(?!data:)([^"')]+)["']?\)/);
     if (!m) return;
     jobs.push(toDataUri(m[1]).then(
-      (uri) => { el.style.backgroundImage = 'url("' + uri + '")'; },
-      () => { el.style.backgroundImage = 'none'; },
+      (uri) => { el.style.backgroundImage = decl.replace(m[0], 'url("' + uri + '")'); },
+      () => { el.style.backgroundImage = decl.replace(m[0], 'url("' + BLANK_PIXEL + '")'); },
+    ));
+  });
+  // The legacy `background` attribute -- what an imported Outlook-first
+  // template, and the exporter's own rows, carry alongside the CSS. Read only
+  // where no CSS image was inlined above, so the two never fetch twice.
+  root.querySelectorAll('[background]').forEach((el) => {
+    const src = el.getAttribute('background') || '';
+    if (!src || src.startsWith('data:')) return;
+    if (/url\(/.test(el.style.backgroundImage || '')) return;
+    jobs.push(toDataUri(src).then(
+      (uri) => { el.setAttribute('background', uri); el.style.backgroundImage = 'url("' + uri + '")'; },
+      () => { el.removeAttribute('background'); },
     ));
   });
   await Promise.all(jobs);

package/src/render/story.js

@@ -83,14 +83,17 @@ export const createStoryViewer = function (core, hooks) {
     open: false, page: 0, pages: 1, playing: true, done: false, held: false,
     remaining: PAGE_MS, startedAt: 0, timer: 0, token: 0,
     url: '', blob: null, natW: 0, natH: 0, cardW: 0, cardH: 0, showH: 0,
-    format: 0, saving: false,
+    format: 0, saving: false, onClose: null,
   };
 
   // ---- chrome -----------------------------------------------------------
 
   // Dim only, no backdrop blur -- a full-screen blur is a many-frame stall on
   // weak GPUs each time the overlay fades in; the deeper dim carries the focus.
-  const overlay = el('div', 'position: absolute; inset: 0; z-index: 78; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 11px; padding: 22px; box-sizing: border-box; background: rgba(9,11,16,0.86); opacity: 0; transition: opacity 0.22s ease;', { class: 'mc-story' });
+  // Deep dim rather than translucent: bright chrome underneath (the export
+  // dialog's buttons, a colourful canvas) bled through 0.86 right where the
+  // viewer's own header sits and read as clutter.
+  const overlay = el('div', 'position: absolute; inset: 0; z-index: 78; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 11px; padding: 22px; box-sizing: border-box; background: rgba(8,10,15,0.94); opacity: 0; transition: opacity 0.22s ease;', { class: 'mc-story' });
   // Clicking the dark surround closes; clicks on the card are the tap zones'
   // business and must not fall through to here.
   overlay.addEventListener('click', (e) => { if (e.target === overlay) close(); });
@@ -108,13 +111,19 @@ export const createStoryViewer = function (core, hooks) {
   headRow.append(headText, closeBtn);
 
   const card = el('div', 'position: relative; overflow: hidden; border-radius: 16px; background: #fff; flex: none; box-shadow: 0 26px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.09); transform: scale(0.965) translateY(10px); opacity: 0; transition: transform 0.34s cubic-bezier(0.22,0.61,0.36,1), opacity 0.24s ease;');
-  const shot = el('img', 'position: absolute; left: 0; top: 0; width: 100%; display: block; opacity: 0; transform: translate3d(0,0,0); transition: opacity 0.32s ease;', { alt: '' });
+  // `will-change` keeps the tall capture promoted to its own layer for the
+  // life of the viewer -- without it the browser may demote between slides
+  // and re-rasterize megapixels on the next one, which is the visible hitch.
+  const shot = el('img', 'position: absolute; left: 0; top: 0; width: 100%; display: block; opacity: 0; transform: translate3d(0,0,0); transition: opacity 0.32s ease; will-change: transform;', { alt: '', decoding: 'async' });
   card.appendChild(shot);
 
   // Skeleton: shown while the capture renders and cross-faded out when the
   // image arrives, so the card never flashes empty or resizes under the eye.
   const skeleton = el('div', 'position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; background: var(--ed-panel); color: var(--ed-faint); transition: opacity 0.28s ease;');
-  const shimmer = el('div', 'position: absolute; inset: 0; background: linear-gradient(100deg, transparent 22%, var(--ed-soft) 40%, transparent 58%); background-size: 260% 100%; animation: mcStoryShimmer 1.6s linear infinite;');
+  // The sweep animates `transform`, not `background-position`: the capture
+  // work saturates the main thread exactly while this plays, and a composited
+  // transform keeps gliding where a per-frame background repaint stutters.
+  const shimmer = el('div', 'position: absolute; top: 0; bottom: 0; left: 0; width: 60%; background: linear-gradient(100deg, transparent, var(--ed-soft), transparent); transform: translateX(-110%); animation: mcStoryShimmer 1.6s linear infinite; will-change: transform;');
   const skelText = el('div', 'position: relative; font-family: var(--ed-font); font-size: 12.5px; font-weight: 600; color: var(--ed-text);');
   const skelHint = el('div', 'position: relative; font-family: ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.07em; line-height: 1.7; color: var(--ed-faint); max-width: 76%; text-align: center;');
   const retryBtn = el('button', 'position: relative; display: none; border: 1px solid var(--ed-line); background: transparent; color: var(--ed-text); cursor: pointer; height: 30px; padding: 0 13px; border-radius: 8px; align-items: center; gap: 7px; font-family: var(--ed-font); font-size: 11.5px; font-weight: 600;', { type: 'button' });
@@ -409,18 +418,24 @@ export const createStoryViewer = function (core, hooks) {
       s.url = URL.createObjectURL(blob);
       shot.onload = () => {
         if (token !== s.token) return;
-        s.natW = shot.naturalWidth;
-        s.natH = shot.naturalHeight;
-        layout();
-        shot.style.opacity = '1';
-        skeleton.style.opacity = '0';
-        setTimeout(() => { if (token === s.token) skeleton.style.display = 'none'; }, 300);
-        setActionsEnabled(true);
-        // A template that fits on one screen has nothing to advance through:
-        // land on "replay" rather than running an invisible timer.
-        if (s.pages < 2) { s.done = true; s.playing = false; }
-        syncPlayBtn();
-        arm();
+        // Decode the megapixels off-screen first: fading in an undecoded
+        // image rasterizes it inside the fade and drops its first frames.
+        const ready = shot.decode ? shot.decode().catch(() => {}) : Promise.resolve();
+        ready.then(() => {
+          if (token !== s.token) return;
+          s.natW = shot.naturalWidth;
+          s.natH = shot.naturalHeight;
+          layout();
+          shot.style.opacity = '1';
+          skeleton.style.opacity = '0';
+          setTimeout(() => { if (token === s.token) skeleton.style.display = 'none'; }, 300);
+          setActionsEnabled(true);
+          // A template that fits on one screen has nothing to advance through:
+          // land on "replay" rather than running an invisible timer.
+          if (s.pages < 2) { s.done = true; s.playing = false; }
+          syncPlayBtn();
+          arm();
+        });
       };
       shot.src = s.url;
     }, () => {
@@ -460,9 +475,10 @@ export const createStoryViewer = function (core, hooks) {
     step(e.deltaY > 0 ? 1 : -1);
   }, { passive: false });
 
-  function open() {
+  function open(opts) {
     if (s.open) return;
     s.open = true;
+    s.onClose = (opts && opts.onClose) || null;
     overlay.style.display = 'flex';
     overlay.removeAttribute('aria-hidden');
     kickerEl.textContent = t('story.kicker');
@@ -471,7 +487,14 @@ export const createStoryViewer = function (core, hooks) {
     card.style.transform = 'scale(1) translateY(0)';
     card.style.opacity = '1';
     layout();
-    load();
+    // The capture blocks the main thread in bursts (render, layout, serialize,
+    // rasterize, encode) -- started immediately those bursts land inside the
+    // entrance transition and visibly stutter it. The skeleton goes up now;
+    // the capture starts once the chrome has finished arriving (0.34s card
+    // transition, plus a beat).
+    showSkeleton(false);
+    renderMeta();
+    setTimeout(() => { if (s.open) load(); }, 380);
     window.addEventListener('keydown', onKey, true);
     window.addEventListener('resize', layout);
     closeBtn.focus({ preventScroll: true });
@@ -482,6 +505,11 @@ export const createStoryViewer = function (core, hooks) {
     s.open = false;
     s.token++;
     clearTimeout(s.timer);
+    // Restore whatever the host parked for the viewer (the export dialog) as
+    // the fade-out starts, so leaving reads as returning, not as a blank beat.
+    const restore = s.onClose;
+    s.onClose = null;
+    if (restore) restore();
     window.removeEventListener('keydown', onKey, true);
     window.removeEventListener('resize', layout);
     overlay.style.opacity = '0';

package/src/render/style.js

@@ -108,7 +108,7 @@ export const STYLE = `
 @keyframes mcIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
 @keyframes mcFade { from { opacity: 0; } to { opacity: 1; } }
 @keyframes mcPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
-@keyframes mcStoryShimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } }
+@keyframes mcStoryShimmer { from { transform: translateX(-110%); } to { transform: translateX(280%); } }
 
 /*
  * Hover/selection outlines on canvas rows and blocks. Re-rendering on every