@1agh/maude 0.41.0 → 0.42.0

package/apps/studio/api.ts

@@ -180,16 +180,6 @@ export interface GitCommitter {
   commits: number;
 }
 
-// Phase 6.5 T10 — export history. Five-deep ring buffer of recent exports
-// surfaced by the dialog's "Recent" tab + ⌘⇧E re-run.
-export interface ExportHistoryEntry {
-  format: string;
-  scope: string;
-  options?: Record<string, unknown>;
-  filename: string;
-  at: string;
-}
-
 export type CreateCanvasResult =
   | { ok: true; file: string; rel: string; slug: string }
   | { ok: false; status: number; error: string };
@@ -465,9 +455,6 @@ export interface Api {
   // Aggregate data
   buildIndexData(): Promise<unknown>;
   buildSystemData(dsName?: string | null): Promise<unknown>;
-  // Export history (Phase 6.5 T10)
-  loadExportHistory(): Promise<ExportHistoryEntry[]>;
-  appendExportHistory(entry: ExportHistoryEntry): Promise<void>;
 }
 
 export interface ApiHooks {
@@ -3006,32 +2993,6 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     };
   }
 
-  // ---------- Export history (Phase 6.5 T10) ----------
-  //
-  // 5-deep ring buffer persisted at `<designRoot>/_export-history.json`.
-  // Reads tolerate missing / malformed files (returns []). Writes truncate
-  // to most-recent-first.
-
-  const HISTORY_PATH = path.join(paths.designRoot, '_export-history.json');
-  const HISTORY_DEPTH = 5;
-
-  async function loadExportHistory(): Promise<ExportHistoryEntry[]> {
-    try {
-      const raw = await Bun.file(HISTORY_PATH).text();
-      const arr = JSON.parse(raw);
-      if (!Array.isArray(arr)) return [];
-      return arr.slice(0, HISTORY_DEPTH);
-    } catch {
-      return [];
-    }
-  }
-
-  async function appendExportHistory(entry: ExportHistoryEntry): Promise<void> {
-    const prev = await loadExportHistory();
-    const next = [entry, ...prev].slice(0, HISTORY_DEPTH);
-    await Bun.write(HISTORY_PATH, JSON.stringify(next, null, 2));
-  }
-
   function tokenKind(name: string, value: string): string {
     const n = name.toLowerCase();
     const v = String(value).trim();
@@ -3273,7 +3234,5 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     reorderRevert,
     buildIndexData,
     buildSystemData,
-    loadExportHistory,
-    appendExportHistory,
   };
 }

package/apps/studio/bin/_html-playwright.mjs

@@ -62,14 +62,31 @@ try {
       world.style.zoom = '1';
       world.style.transform = 'none';
     }
-    for (const el of document.querySelectorAll('[data-dc-screen]')) {
-      el.style.left = '0px';
-      el.style.top = '0px';
-    }
   });
 
   const written = [];
 
+  // Pin one artboard to (0,0) for its capture, returning a restore function.
+  // Per-target rather than a one-shot reset of every `[data-dc-screen]` — a
+  // multi-target loop must not leave an already-captured artboard sitting at
+  // the origin, overlapping the next target's geometry (the scatter bug).
+  const pinArtboard = async (handle) => {
+    const saved = await handle.evaluate((el) => {
+      const ab = el.closest('[data-dc-screen]') ?? el;
+      const prev = { left: ab.style.left, top: ab.style.top };
+      ab.style.left = '0px';
+      ab.style.top = '0px';
+      return prev;
+    });
+    return async () => {
+      await handle.evaluate((el, prev) => {
+        const ab = el.closest('[data-dc-screen]') ?? el;
+        ab.style.left = prev.left;
+        ab.style.top = prev.top;
+      }, saved);
+    };
+  };
+
   if (multi) {
     if (!outDir) {
       console.error('_html-playwright: --multi requires --out-dir');
@@ -80,10 +97,13 @@ try {
     for (let i = 0; i < screens.length; i += 1) {
       const handle = screens[i];
       const id = (await handle.getAttribute('data-dc-screen')) ?? `artboard-${i + 1}`;
+      const restore = await pinArtboard(handle);
       const html = await serializeOne(handle, false);
+      await restore();
       const target = join(outDir, `${id}.html`);
       writeFileSync(target, html, 'utf8');
       written.push(target);
+      console.log(`MAUDE_PROGRESS {"current":${i + 1},"total":${screens.length}}`);
     }
   } else {
     if (!out) {
@@ -93,7 +113,9 @@ try {
     mkdirSync(dirname(out), { recursive: true });
     const handle = page.locator(selector ?? '[data-dc-screen]:first-of-type').first();
     await handle.waitFor({ state: 'visible', timeout: timeoutMs });
+    const restore = await pinArtboard(handle);
     const html = await serializeOne(handle, widen);
+    await restore();
     writeFileSync(out, html, 'utf8');
     written.push(out);
   }

package/apps/studio/bin/_pdf-playwright.mjs

@@ -88,11 +88,15 @@ try {
         : screens[i];
     // Pin the captured element's own artboard to (0,0) right before its
     // capture so the world's multi-artboard layout doesn't push the bbox off
-    // the viewport.
-    await handle.evaluate((el) => {
+    // the viewport. Save the prior value so it can be restored right after
+    // this artboard's PDF is written — otherwise every artboard captured
+    // earlier in the loop stays stacked at (0,0) and bleeds into later pages.
+    const savedPos = await handle.evaluate((el) => {
       const ab = el.closest('[data-dc-screen]') ?? el;
+      const prev = { left: ab.style.left, top: ab.style.top };
       ab.style.left = '0px';
       ab.style.top = '0px';
+      return prev;
     });
     const rect = await handle.evaluate((el) => {
       const r = el.getBoundingClientRect();
@@ -120,6 +124,13 @@ try {
     });
     writeFileSync(targetPath, pdf);
     written.push(targetPath);
+    // Restore the artboard's original position now that its page is written.
+    await handle.evaluate((el, prev) => {
+      const ab = el.closest('[data-dc-screen]') ?? el;
+      ab.style.left = prev.left;
+      ab.style.top = prev.top;
+    }, savedPos);
+    if (multi) console.log(`MAUDE_PROGRESS {"current":${i + 1},"total":${screens.length}}`);
   }
 
   for (const w of written) console.log(w);

package/apps/studio/bin/_png-playwright.mjs

@@ -82,11 +82,16 @@ try {
     // artboard #2 (or any non-first selection's host) left the wrong artboard
     // at the origin (item 5 root cause). Each artboard carries
     // `style="left:…; top:…;"` for the world layout — zero the right one so the
-    // screenshot clip starts at the viewport origin.
-    await widenedHandle.evaluate((el) => {
+    // screenshot clip starts at the viewport origin. Save the prior value so it
+    // can be restored after this artboard's capture — otherwise every artboard
+    // processed earlier in a `--multi` loop is left stacked at (0,0) and bleeds
+    // into every subsequent target's clip region (the scatter bug).
+    const savedPos = await widenedHandle.evaluate((el) => {
       const ab = el.closest('[data-dc-screen]') ?? el;
+      const prev = { left: ab.style.left, top: ab.style.top };
       ab.style.left = '0px';
       ab.style.top = '0px';
+      return prev;
     });
     const rect = await widenedHandle.evaluate((el) => {
       const r = el.getBoundingClientRect();
@@ -118,6 +123,13 @@ try {
       },
     });
     written.push(target);
+    // Restore the artboard's original position now that its capture is done,
+    // so it doesn't stay pinned at (0,0) and corrupt the next target's clip.
+    await widenedHandle.evaluate((el, prev) => {
+      const ab = el.closest('[data-dc-screen]') ?? el;
+      ab.style.left = prev.left;
+      ab.style.top = prev.top;
+    }, savedPos);
   };
 
   if (multi) {
@@ -131,6 +143,7 @@ try {
       const handle = screens[i];
       const id = (await handle.getAttribute('data-dc-screen')) ?? `artboard-${i + 1}`;
       await captureHandle(handle, join(outDir, `${id}.png`));
+      console.log(`MAUDE_PROGRESS {"current":${i + 1},"total":${screens.length}}`);
     }
   } else {
     if (!out) {

package/apps/studio/bin/_pptx-playwright.mjs

@@ -48,10 +48,6 @@ try {
       world.style.zoom = '1';
       world.style.transform = 'none';
     }
-    for (const el of document.querySelectorAll('[data-dc-screen]')) {
-      el.style.left = '0px';
-      el.style.top = '0px';
-    }
   });
   // dom-to-pptx ships a UMD bundle; addScriptTag exposes `window.domToPptx`.
   await page.addScriptTag({ path: bundlePath });
@@ -74,6 +70,17 @@ try {
   }
   await handle.waitFor({ state: 'visible', timeout: timeoutMs });
 
+  // Pin this artboard to (0,0) for its capture, restoring afterwards so a
+  // future multi-slide implementation doesn't inherit a stacked-at-origin bug
+  // (the scatter bug fixed in the png/pdf/svg/html shims).
+  const savedPos = await handle.evaluate((el) => {
+    const ab = el.closest('[data-dc-screen]') ?? el;
+    const prev = { left: ab.style.left, top: ab.style.top };
+    ab.style.left = '0px';
+    ab.style.top = '0px';
+    return prev;
+  });
+
   // Run dom-to-pptx inside the page. It returns a Blob; we serialise to a
   // byte array for transport across the playwright boundary.
   const bytesArray = await handle.evaluate(async (el) => {
@@ -88,6 +95,12 @@ try {
     return Array.from(new Uint8Array(ab));
   });
 
+  await handle.evaluate((el, prev) => {
+    const ab = el.closest('[data-dc-screen]') ?? el;
+    ab.style.left = prev.left;
+    ab.style.top = prev.top;
+  }, savedPos);
+
   writeFileSync(out, new Uint8Array(bytesArray));
   console.log(out);
   console.error(

package/apps/studio/bin/_screenshot-playwright.mjs

@@ -5,7 +5,7 @@
 //
 // Invocation (called by screenshot.sh — not directly by users):
 //   npm exec --package=playwright -- node _screenshot-playwright.mjs \
-//     --url <url> [--selector <css>] --out <path> [--timeout 8]
+//     --url <url> [--selector <css>] --out <path> [--timeout 8] [--theme <name>]
 //
 // First invocation may install chromium (~150 MB). Subsequent runs reuse cache.
 
@@ -20,7 +20,7 @@ const args = Object.fromEntries(
   }, [])
 );
 
-const { url, selector, out, timeout = '8' } = args;
+const { url, selector, out, timeout = '8', theme } = args;
 if (!url || !out) {
   console.error(
     'usage: _screenshot-playwright.mjs --url <url> [--selector <css>] --out <path> [--timeout 8]'
@@ -37,6 +37,21 @@ try {
   const page = await ctx.newPage();
   await page.goto(url, { waitUntil: 'networkidle', timeout: timeoutMs });
 
+  if (theme) {
+    // Dual-theme reality check (/design:new step 9): force every DS artboard
+    // theme wrapper to `theme` before capture, deterministically, instead of
+    // relying on whatever the canvas is pinned to. No-op if the canvas has no
+    // `[data-theme]` elements (e.g. a single-theme DS).
+    const n = await page.evaluate((t) => {
+      const els = document.querySelectorAll('[data-theme]');
+      els.forEach((el) => {
+        el.setAttribute('data-theme', t);
+      });
+      return els.length;
+    }, theme);
+    console.error(`→ theme override: forced data-theme="${theme}" on ${n} element(s)`);
+  }
+
   if (selector) {
     const loc = page.locator(selector).first();
     await loc.waitFor({ state: 'visible', timeout: timeoutMs });

package/apps/studio/bin/_svg-playwright.mjs

@@ -70,10 +70,6 @@ try {
       world.style.zoom = '1';
       world.style.transform = 'none';
     }
-    for (const el of document.querySelectorAll('[data-dc-screen]')) {
-      el.style.left = '0px';
-      el.style.top = '0px';
-    }
   });
   // Inject dom-to-svg into the page. Bundle attaches its exports under
   // `window.domToSvg`.
@@ -81,6 +77,27 @@ try {
 
   const written = [];
 
+  // Pin one artboard to (0,0) for its capture, returning a restore function.
+  // Per-target rather than a one-shot reset of every `[data-dc-screen]` — a
+  // multi-target loop must not leave an already-captured artboard sitting at
+  // the origin, overlapping the next target's geometry (the scatter bug).
+  const pinArtboard = async (handle) => {
+    const saved = await handle.evaluate((el) => {
+      const ab = el.closest('[data-dc-screen]') ?? el;
+      const prev = { left: ab.style.left, top: ab.style.top };
+      ab.style.left = '0px';
+      ab.style.top = '0px';
+      return prev;
+    });
+    return async () => {
+      await handle.evaluate((el, prev) => {
+        const ab = el.closest('[data-dc-screen]') ?? el;
+        ab.style.left = prev.left;
+        ab.style.top = prev.top;
+      }, saved);
+    };
+  };
+
   // Single in-page serializer used by BOTH branches (single + multi) so they
   // can't drift again (the `formatXML` 500 bug came from a divergent copy).
   // Note: dom-to-svg exports only elementToSVG / inlineResources /
@@ -228,11 +245,14 @@ try {
     for (let i = 0; i < screens.length; i += 1) {
       const handle = screens[i];
       const id = (await handle.getAttribute('data-dc-screen')) ?? `artboard-${i + 1}`;
+      const restore = await pinArtboard(handle);
       // Each multi handle is already a `[data-dc-screen]` artboard — no widen.
       const svg = await serializeOne(handle, false);
+      await restore();
       const target = join(outDir, `${id}.svg`);
       writeFileSync(target, svg, 'utf8');
       written.push(target);
+      console.log(`MAUDE_PROGRESS {"current":${i + 1},"total":${screens.length}}`);
     }
   } else {
     if (!out) {
@@ -242,7 +262,9 @@ try {
     mkdirSync(dirname(out), { recursive: true });
     const handle = page.locator(selector ?? '[data-dc-screen]:first-of-type').first();
     await handle.waitFor({ state: 'visible', timeout: timeoutMs });
+    const restore = await pinArtboard(handle);
     const svg = await serializeOne(handle, widen);
+    await restore();
     writeFileSync(out, svg, 'utf8');
     written.push(out);
   }

package/apps/studio/bin/screenshot.sh

@@ -9,12 +9,18 @@
 #                 [--screen <id> | --element <id> | --selector <css> | --full]
 #                 [--all-screens] [--out <path>] [--out-dir <dir>]
 #                 [--timeout 8] [--engine auto|agent-browser|playwright]
-#                 [--root <repo>]
+#                 [--theme <name>] [--root <repo>]
 #
 # Notes:
 #   - Exactly one of --screen / --element / --selector / --full is required
 #     (or --all-screens which loops over every [data-dc-screen]/[data-dc-slot]).
 #   - --out required for single-shot modes; --out-dir required for --all-screens.
+#   - --theme <name> forces every `[data-theme]` element (DS artboard wrappers)
+#     to that value BEFORE capture, via a DOM eval — does not touch the actual
+#     canvas file or the running server's state. Used to capture a DS's
+#     alternate theme deterministically for the dual-theme reality check
+#     (/design:new step 9) instead of relying on whatever the canvas is pinned
+#     to. No-op if the canvas has no `[data-theme]` elements.
 #   - URL resolution: --url > --port + _active.json > _server.json + _active.json.
 #   - Stdout: written PNG paths, one per line (composable in for-loops).
 #   - Stderr: diagnostic, engine choice, timing.
@@ -30,6 +36,7 @@ TIMEOUT=8
 ENGINE="auto"
 ALL_SCREENS=0
 ROOT=""
+THEME=""
 
 while [ $# -gt 0 ]; do
   case "$1" in
@@ -44,9 +51,10 @@ while [ $# -gt 0 ]; do
     --out-dir)  OUT_DIR="$2"; shift 2 ;;
     --timeout)  TIMEOUT="$2"; shift 2 ;;
     --engine)   ENGINE="$2"; shift 2 ;;
+    --theme)    THEME="$2"; shift 2 ;;
     --root)     ROOT="$2"; shift 2 ;;
     --help|-h)
-      sed -n '2,22p' "$0" | sed 's/^# \?//'
+      sed -n '2,27p' "$0" | sed 's/^# \?//'
       exit 0
       ;;
     *)
@@ -57,6 +65,20 @@ while [ $# -gt 0 ]; do
 done
 
 # ---------- arg validation ----------
+# --theme ultimately traces back to config.json's designSystems[].themes[]
+# (untrusted, same posture as prep.sh's MOODBOARD_VARIANTS). Callers (e.g.
+# new.md step 9) build an --out-dir path from this value — reject anything
+# outside a safe slug charset here too, at the shared sink, rather than
+# trusting every caller to re-derive this guard.
+if [ -n "$THEME" ]; then
+  case "$THEME" in
+    *[!A-Za-z0-9._-]*|"")
+      echo "screenshot.sh: --theme '$THEME' contains unsafe characters (allowed: A-Za-z0-9._-)" >&2
+      exit 2
+      ;;
+  esac
+fi
+
 if [ $ALL_SCREENS -eq 1 ]; then
   [ -z "$OUT_DIR" ] && { echo "screenshot.sh: --all-screens needs --out-dir" >&2; exit 2; }
 else
@@ -189,10 +211,12 @@ pw_screenshot() {
     return 1
   fi
   echo "→ playwright engine; first invocation may install chromium (~150MB, one-off)" >&2
+  local theme_args=()
+  [ -n "$THEME" ] && theme_args=(--theme "$THEME")
   if [ -n "$css" ]; then
-    npm exec --yes --package=playwright -- node "$pw_script" --url "$URL" --selector "$css" --out "$out" --timeout "$TIMEOUT" >&2 || return 1
+    npm exec --yes --package=playwright -- node "$pw_script" --url "$URL" --selector "$css" --out "$out" --timeout "$TIMEOUT" "${theme_args[@]}" >&2 || return 1
   else
-    npm exec --yes --package=playwright -- node "$pw_script" --url "$URL" --out "$out" --timeout "$TIMEOUT" >&2 || return 1
+    npm exec --yes --package=playwright -- node "$pw_script" --url "$URL" --out "$out" --timeout "$TIMEOUT" "${theme_args[@]}" >&2 || return 1
   fi
   [ -s "$out" ] || { echo "✗ playwright wrote no file: $out" >&2; return 1; }
   return 0
@@ -224,9 +248,34 @@ navigate_once() {
       echo "→ no DC mount detected after ${TIMEOUT}s — proceeding (may be a non-canvas page)" >&2
       sleep 1
     fi
+    apply_theme_override
   fi
 }
 
+# ---------- --theme override (dual-theme reality check) ----------
+# Forces every element carrying a `data-theme` attribute (DS artboard theme
+# wrappers) to $THEME, so the caller can deterministically capture a DS's
+# alternate theme instead of whatever the canvas happens to be pinned to.
+# agent-browser only — the playwright path applies it inside
+# _screenshot-playwright.mjs (passed via --theme) since that shim owns its own
+# page.evaluate. No-op when --theme wasn't passed or no [data-theme] elements
+# exist (e.g. a single-theme DS or a non-canvas page).
+apply_theme_override() {
+  [ -z "$THEME" ] && return 0
+  [ "$ENGINE" = "agent-browser" ] || return 0
+  # THEME ultimately traces back to config.json's designSystems[].themes[]
+  # array — treated as untrusted input elsewhere in this codebase (see
+  # prep.sh's MOODBOARD_VARIANTS clamp). JSON-encode it via jq so it lands as
+  # a properly-escaped JS string literal in the eval'd expression below,
+  # instead of naively splicing the raw value into a JS string (which a
+  # crafted config value could break out of).
+  local theme_json
+  theme_json=$(jq -Rn --arg t "$THEME" '$t' 2>/dev/null) || return 0
+  local n
+  n=$("$AB" eval "(function(t){var els=document.querySelectorAll('[data-theme]');els.forEach(function(el){el.setAttribute('data-theme',t)});return els.length})($theme_json)" 2>/dev/null)
+  echo "→ theme override: forced data-theme=\"$THEME\" on $(printf '%s' "$n" | tr -d '[:space:]') element(s)" >&2
+}
+
 capture() {
   local css="$1"
   local out="$2"

package/apps/studio/client/app.jsx

@@ -29,11 +29,11 @@ import {
   onUpdateReady,
   pickMediaFile,
   restartToUpdate,
-  saveExport,
 } from './github.js';
 import { COLLAB_TOUR } from './tour/collab-tour.js';
 import { TourOverlay } from './tour/overlay.jsx';
 import { USAGE_TOUR } from './tour/usage-tour.js';
+import { ExportBadge, ExportPanel, ExportToast, useExportCenter } from './export-center.jsx';
 import { useWhatsNew, WhatsNewPanel, WhatsNewToast } from './whats-new.jsx';
 
 const USAGE_TOUR_STORE = 'mdcc-usage-tour-seen';
@@ -1079,7 +1079,10 @@ function ExportDialog({
     if (activeArtboardId) options.artboardId = activeArtboardId;
     if (selection?.selector) options.selection = selection;
     try {
-      const r = await fetch('/_api/export', {
+      // feature-background-export-notification-center — enqueue and close
+      // immediately; the menubar notification center owns status, progress,
+      // and completion (download / native Save…) from here on.
+      const r = await fetch('/_api/export-jobs', {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
         body: JSON.stringify({ format: card.format, scope, options }),
@@ -1089,38 +1092,11 @@ function ExportDialog({
         setBusy(false);
         return;
       }
-      const disp = r.headers.get('Content-Disposition') || '';
-      const fn = /filename="([^"]+)"/.exec(disp);
-      const filename = (fn && fn[1]) || `export.${card.format}`;
-      const blob = await r.blob();
-      if (isNativeApp()) {
-        // Native: WKWebView swallows the `<a download>` blob (the file lands in
-        // an unknown default with no prompt). Route through a real OS save dialog
-        // so the export OFFERS a location. Cancel → soft no-op.
-        const bytes = Array.from(new Uint8Array(await blob.arrayBuffer()));
-        const savedPath = await saveExport(filename, bytes);
-        if (savedPath) {
-          setStatus({ ok: true, msg: `Saved to ${savedPath}` });
-          loadRecent();
-        } else {
-          setStatus({ ok: true, msg: 'Save cancelled' });
-        }
-      } else {
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        URL.revokeObjectURL(url);
-        setStatus({ ok: true, msg: `Exported ${filename}` });
-        loadRecent();
-      }
+      onClose();
     } catch (err) {
       setStatus({ ok: false, msg: err && err.message ? err.message : String(err) });
+      setBusy(false);
     }
-    setBusy(false);
   }
 
   return (
@@ -2680,6 +2656,7 @@ function Menubar({
   onOpenWhatsNew,
   onOpenReadiness,
   whatsNewCount,
+  exportCenter,
   artboardCount = 0,
   presence = null,
   inspectorOpen,
@@ -2993,6 +2970,7 @@ function Menubar({
             <StIcon name="sparkle" size={15} />
           </button>
         )}
+        {exportCenter && <ExportBadge center={exportCenter} />}
         <button
           type="button"
           className="st-whatsnew"
@@ -7049,6 +7027,7 @@ function App() {
   // toggles on its own and coexists with Inspector/Changes/Comments/Chat.
   const toggleTimeline = useCallback(() => setTimelineOpen((v) => !v), []);
   const whatsNew = useWhatsNew(MDCC_VERSION);
+  const exportCenter = useExportCenter();
   // Phase 29 (E4) — first-run onboarding wizard. The native shell boots a minimal
   // "welcome" project on first launch; we ask it whether this is a first run and, if
   // so, show the wizard OVER the (empty) canvas browser. Completing any door switches
@@ -7696,6 +7675,10 @@ function App() {
                 );
               } catch {}
             }
+          } else if (m.type === 'export:job' && m.payload) {
+            // feature-background-export-notification-center — full-snapshot
+            // job state on every queued/running/progress/done/failed change.
+            exportCenter.upsert(m.payload);
           } else if (m.type === 'sync:status' && m.payload) {
             // Phase 9 Task 8 — hub connection state for the offline banner.
             setSyncStatus(m.payload);
@@ -8854,7 +8837,12 @@ function App() {
         } catch {}
       };
       try {
-        const r = await fetch('/_api/export', {
+        // feature-background-export-notification-center — enqueue and reply
+        // with the job id immediately; the notification center (which
+        // already owns the WS connection) is the single place status/
+        // progress/completion live from here, regardless of which dialog
+        // created the job.
+        const r = await fetch('/_api/export-jobs', {
           method: 'POST',
           headers: { 'content-type': 'application/json' },
           body: JSON.stringify(payload),
@@ -8863,28 +8851,8 @@ function App() {
           reply({ ok: false, error: (await r.text()) || String(r.status) });
           return;
         }
-        const disp = r.headers.get('Content-Disposition') || '';
-        const fn = /filename="([^"]+)"/.exec(disp);
-        const filename = (fn && fn[1]) || 'export';
-        const blob = await r.blob();
-        if (isNativeApp()) {
-          // Native: route the bridged in-canvas export through the OS save dialog
-          // too (WKWebView swallows the `<a download>` blob). Mirror the shell
-          // ExportDialog's doExport native branch.
-          const bytes = Array.from(new Uint8Array(await blob.arrayBuffer()));
-          const savedPath = await saveExport(filename, bytes);
-          reply(savedPath ? { ok: true, filename } : { ok: false, error: 'Save cancelled' });
-          return;
-        }
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        URL.revokeObjectURL(url);
-        reply({ ok: true, filename });
+        const { jobId } = await r.json();
+        reply({ ok: true, jobId });
       } catch (err) {
         reply({ ok: false, error: err && err.message ? err.message : String(err) });
       }
@@ -10011,6 +9979,7 @@ function App() {
       <UpdateBanner update={updateReady} onDismiss={() => setUpdateReady(null)} />
       <SyncBanner status={syncStatus} />
       {!usageNudge && !tourSteps && <WhatsNewToast wn={whatsNew} />}
+      {!usageNudge && !tourSteps && <ExportToast center={exportCenter} />}
       {gitLifecycle && (
         <div role="status" aria-live="polite" className="st-banner st-banner--info">
           <span className="st-banner-dot" aria-hidden="true" />
@@ -10064,6 +10033,7 @@ function App() {
           onOpenReadiness={() => setReadinessOpen(true)}
           onOpenWhatsNew={whatsNew.openPanel}
           whatsNewCount={whatsNew.unseen.length}
+          exportCenter={exportCenter}
           artboardCount={activeArtboards}
           inspectorOpen={inspectorOpen}
           inspectorTab={inspectorTab}
@@ -10730,6 +10700,7 @@ function App() {
         }}
       />
       <WhatsNewPanel wn={whatsNew} onStartTour={startTour} />
+      <ExportPanel center={exportCenter} />
       <ReadinessDialog open={readinessOpen} onClose={() => setReadinessOpen(false)} />
       {usageNudge && !tourSteps && !collabNudge && (
         <div className="mdcc-tour-nudge" role="status" aria-live="polite">