@seliseblocks/mailcraft 0.2.15 → 0.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seliseblocks/mailcraft",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "description": "Framework-agnostic drag-and-drop email template editor, packaged as a zero-dependency Web Component.",
   "license": "MIT",
   "author": "SELISE Digital Platforms",

package/src/mailcraft-editor.js

@@ -487,8 +487,12 @@ export class MailCraftEditor extends ElementBase {
    */
   screenshotPng(options) { return captureTemplatePng(this.core, this.mc, options); }
 
-  /** Opens the story-style viewer over the editor and captures into it -- what the Screenshot button does. Nothing touches the filesystem until the user picks Download inside it. */
-  previewScreenshot() { this.story.open(); }
+  /** Opens the story-style viewer over the editor and captures into it -- what the Screenshot button does. The export dialog, which hosts that button, is parked while the viewer is up and restored when it closes, so the two never read as stacked modals. Nothing touches the filesystem until the user picks Download inside it. */
+  previewScreenshot() {
+    const fromExport = this.core.state.exportOpen;
+    if (fromExport) this.core.setState({ exportOpen: false });
+    this.story.open(fromExport ? { onClose: () => this.core.setState({ exportOpen: true }) } : undefined);
+  }
 
   /** `screenshotPng(options)` plus the same save-a-file flow as the HTML export download, with success/failure toasts. Pass an already-captured blob (the story viewer does) to save that one instead of rendering a second time; the filename extension follows the blob's actual type. */
   async downloadScreenshot(blob, options) {

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) {

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