@1agh/maude 1.0.6 → 1.0.8

package/apps/studio/canvas-lib.tsx

@@ -124,6 +124,16 @@ import {
   diffLayoutPositions,
 } from './commands/move-artboards-command.ts';
 import { scopedCdSelector, selectorIndex, shortText } from './dom-selection.ts';
+import { applyCaptureChrome } from './exporters/capture-chrome.ts';
+import {
+  type DomToSvgApi,
+  pinArtboard,
+  rasterizeSvg,
+  resetWorldPlane,
+  restoreArtboard,
+  restoreWorldPlane,
+  svgForElement,
+} from './exporters/capture-core.ts';
 // Photo editor (feature-photo-editor) — schema.ts is DEPENDENCY-FREE (no pixi),
 // so this static import is safe and adds zero bundle cost. The WebGL compositor
 // (photo/pipeline.ts, which imports pixi.js) is loaded via a DYNAMIC import
@@ -1787,8 +1797,134 @@ export function DesignCanvas(props: DesignCanvasProps) {
 }
 DesignCanvas.displayName = 'DesignCanvas';
 
+// DDR-231 (hybrid export lanes) — the workspace `browser` export lane.
+//
+// In workspace mode the studio shell cannot capture the canvas itself: the
+// iframe is a separate (untrusted, DDR-054) origin, unreachable by DOM from
+// the shell. So the SHELL ASKS and the CANVAS CAPTURES — this bridge listens
+// for an `export-capture` postMessage from the embedding parent, renders the
+// requested artboards through the shared capture spine (capture-core.ts — the
+// same code the playwright SVG shim injects, DDR-231's single-spine rule) and
+// replies with per-artboard Blobs (structured-clonable across the origin
+// split). dom-to-svg loads LAZILY through the importmap (`dom-to-svg` runtime
+// bundle — the pixi.js pattern), so a canvas that never exports pays zero
+// bundle cost.
+//
+// Capture mutates live DOM (world zoom reset + artboard pinned to origin) and
+// restores everything afterwards — the member is looking at this plane. The
+// shell overlays a veil during capture to cover the brief reflow.
+function useExportCaptureBridge() {
+  useEffect(() => {
+    if (typeof window === 'undefined' || window.parent === window) return;
+    let busy = false;
+    const onMsg = (e: MessageEvent) => {
+      // Only the embedding shell may drive capture — a message from any other
+      // window (a nested iframe, an opened popup) is ignored outright.
+      if (e.source !== window.parent) return;
+      const m = e.data as {
+        dgn?: string;
+        id?: unknown;
+        format?: unknown;
+        artboardIds?: unknown;
+        scale?: unknown;
+      } | null;
+      if (!m || m.dgn !== 'export-capture' || typeof m.id !== 'string') return;
+      const requestId = m.id;
+      // DDR-231 security (L1): reply to the ASKING origin, never `'*'`. The
+      // done-message carries the rendered artboard blobs; a wildcard target
+      // would leak them to whatever page happens to be the parent if the
+      // shell's `frame-ancestors` CSP were ever absent (tests / misconfig).
+      // `e.origin` here is the embedding shell (we already gated
+      // `e.source === window.parent`); fall back to `'*'` only for an opaque
+      // `"null"` origin where a targeted post is impossible.
+      const replyOrigin = e.origin && e.origin !== 'null' ? e.origin : '*';
+      const reply = (msg: Record<string, unknown>) => {
+        try {
+          window.parent.postMessage(msg, replyOrigin);
+        } catch {
+          /* parent gone — nothing to deliver to */
+        }
+      };
+      if (busy) {
+        reply({
+          dgn: 'export-capture-error',
+          id: requestId,
+          message: 'a capture is already running on this canvas',
+        });
+        return;
+      }
+      busy = true;
+      const format = m.format === 'svg' ? 'svg' : 'png';
+      const scale = Math.max(1, Math.min(8, Number(m.scale) || 1));
+      const wanted = Array.isArray(m.artboardIds)
+        ? m.artboardIds.filter((s): s is string => typeof s === 'string')
+        : null;
+      void (async () => {
+        const savedWorld = resetWorldPlane();
+        // Hold the chrome suppression across the WHOLE batch. `svgForElement`
+        // applies it per target too (ref-counted), but a 10-artboard deck would
+        // otherwise add and remove the style ten times — ten forced reflows,
+        // and the member watching the canvas sees the chrome flicker.
+        const releaseChrome = applyCaptureChrome(document);
+        try {
+          const all = Array.from(document.querySelectorAll('[data-dc-screen]'));
+          const targets = wanted?.length
+            ? all.filter((el) => wanted.includes(el.getAttribute('data-dc-screen') ?? ''))
+            : all;
+          if (!targets.length) throw new Error('no artboards matched the capture request');
+          const api = (await import('dom-to-svg')) as unknown as DomToSvgApi;
+          const items: { name: string; type: string; blob: Blob }[] = [];
+          for (let i = 0; i < targets.length; i += 1) {
+            const el = targets[i] as Element;
+            const abId = el.getAttribute('data-dc-screen') || `artboard-${i + 1}`;
+            const prevPos = pinArtboard(el);
+            try {
+              const svg = await svgForElement(el, api);
+              if (format === 'svg') {
+                items.push({
+                  name: `${abId}.svg`,
+                  type: 'image/svg+xml',
+                  blob: new Blob([svg], { type: 'image/svg+xml' }),
+                });
+              } else {
+                items.push({
+                  name: `${abId}.png`,
+                  type: 'image/png',
+                  blob: await rasterizeSvg(svg, scale),
+                });
+              }
+            } finally {
+              restoreArtboard(el, prevPos);
+            }
+            reply({
+              dgn: 'export-capture-progress',
+              id: requestId,
+              current: i + 1,
+              total: targets.length,
+            });
+          }
+          reply({ dgn: 'export-capture-done', id: requestId, items });
+        } catch (err) {
+          reply({
+            dgn: 'export-capture-error',
+            id: requestId,
+            message: err instanceof Error ? err.message : String(err),
+          });
+        } finally {
+          releaseChrome();
+          restoreWorldPlane(savedWorld);
+          busy = false;
+        }
+      })();
+    };
+    window.addEventListener('message', onMsg);
+    return () => window.removeEventListener('message', onMsg);
+  }, []);
+}
+
 function DesignCanvasInner({ children, controls }: DesignCanvasProps) {
   ensureEngineStyles();
+  useExportCaptureBridge();
 
   const hostRef = useRef<HTMLDivElement | null>(null);
   const worldRef = useRef<HTMLDivElement | null>(null);

package/apps/studio/client/app.jsx

@@ -12,6 +12,11 @@ import { createRoot } from 'react-dom/client';
 // import that Bun erases), so this pulls only string constants into the client
 // bundle — no React, no input-router. See the tool-cursor handler below.
 import { resolveToolCursor } from '../canvas-cursors.ts';
+import {
+  defaultScopeForFormat,
+  isScopeValidForFormat,
+  validScopesForFormat,
+} from '../exporters/format-scopes.ts';
 // feature-3-web-artboards T5 — the single source (grid-track-handles.ts) for
 // the Inspector's Grid-section track parser/serializer, shared with the
 // on-canvas gutter-drag overlay so both edit the SAME track-list shape.
@@ -28,6 +33,15 @@ import { sizingModeOf, sizingModePatch } from '../sizing-mode.ts';
 // above (a type-only SyncStatusSnapshot import that Bun erases).
 import { syncPresentation } from '../sync/presentation.ts';
 import { canvasUrl } from './canvas-url.js';
+import {
+  BROWSER_CAPTURE_FORMATS,
+  BROWSER_SERVABLE_FORMATS,
+  browserCaptureEligible,
+  captureDeckViaBrowser,
+  captureScale,
+  sanitizeCapturedItems,
+  recordBrowserExport,
+} from './export-lane.js';
 import { TreeRowMenu, useRowMenu } from './tree-row-menu.jsx';
 import { useTreeDrag } from './use-tree-drag.js';
 import ChatPanel from './panels/ChatPanel.jsx';
@@ -1167,18 +1181,6 @@ const EXPORT_SCOPE_LABELS = {
   'canvas-as-separate': 'Canvas · artboards separate',
   'project-raw': 'Whole project (raw)',
 };
-const EXPORT_VALID_SCOPES = {
-  png: ['selection', 'artboard', 'canvas-as-separate'],
-  pdf: ['selection', 'artboard', 'canvas-as-separate'],
-  svg: ['selection', 'artboard', 'canvas-as-separate'],
-  html: ['artboard', 'canvas-as-separate'],
-  pptx: ['canvas-as-separate'],
-  mp4: ['artboard'],
-  gif: ['artboard'],
-  webm: ['artboard'],
-  canva: ['canvas-as-separate'],
-  zip: ['project-raw'],
-};
 const PNG_SCALES = [
   { value: 1, label: '1× (native)' },
   { value: 2, label: '2× (retina)' },
@@ -1530,6 +1532,21 @@ function AssetPicker({
   );
 }
 
+// Direct download for a browser-lane capture. export-center's autoDownloadBlob
+// fetches a JOB's bytes — a browser capture has no job, just the Blob.
+function downloadCapturedBlob(name, blob) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = name || 'export';
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  // Revoke on a delay — an immediate revoke can race the download start in
+  // some engines (the click only queues the fetch of the object URL).
+  setTimeout(() => URL.revokeObjectURL(url), 10_000);
+}
+
 function ExportDialog({
   mode,
   initialScope,
@@ -1539,24 +1556,38 @@ function ExportDialog({
   activeArtboardId = null,
   selection = null,
   exportLane = 'local',
+  onBrowserCapture = null,
   onClose,
 }) {
   // feature-cloud-export-render-workers — on a cell with no render service
   // (`lane === 'none'`), formats that render through a browser are offered
   // disabled-with-a-reason instead of firing a request the proxy 404s. ZIP
   // (JSZip over project files) and the AI-handoff card (clipboard copy) need
-  // no browser and stay live in every lane.
+  // no browser — and DDR-231's browser lane keeps png/svg live in every
+  // workspace lane too (captured by the member's own browser, no service).
   const laneBlocked = useCallback(
     (c) =>
-      (exportLane === 'none' && !c.handoff && c.format !== 'zip') ||
+      (exportLane === 'none' &&
+        !c.handoff &&
+        c.format !== 'zip' &&
+        !BROWSER_SERVABLE_FORMATS.has(c.format)) ||
       // Canva bundles project files the render service can't reach — desktop only
       // in every workspace lane (exporters/remote.ts REMOTE_UNSUPPORTED_FORMATS).
       (exportLane !== 'local' && c.format === 'canva'),
     [exportLane]
   );
-  const [sel, setSel] = useState(mode === 'handoff' ? 'shadcn' : exportLane === 'none' ? 'zip' : 'png');
-  const [scope, setScope] = useState(
-    initialScope && EXPORT_SCOPE_LABELS[initialScope] ? initialScope : 'artboard'
+  const [sel, setSel] = useState(mode === 'handoff' ? 'shadcn' : 'png');
+  // DDR-231 Phase 2 T4 — seed from the shared table, and only honour an
+  // incoming hint the CHOSEN FORMAT can actually render. A hint the format
+  // can't take (a context menu's `project-raw`, a re-run of a zip history
+  // entry) used to survive into the request and reach the render service as
+  // an unrenderable file-tree target: "invalid render job".
+  // The dialog opens on the PNG card; the format-change effect below re-seeds
+  // the scope whenever the member picks another one.
+  const [scope, setScope] = useState(() =>
+    initialScope && isScopeValidForFormat('png', initialScope)
+      ? initialScope
+      : defaultScopeForFormat('png')
   );
   const [scale, setScale] = useState(2);
   // feature-2-print-artboards T4/T6 — PNG resolution (folds scale + dpi, see
@@ -1580,7 +1611,7 @@ function ExportDialog({
   const [status, setStatus] = useState(null); // { ok, msg }
   const [recent, setRecent] = useState([]);
   const card = EXPORT_CARDS.find((c) => c.id === sel) || EXPORT_CARDS[0];
-  const validScopes = card.handoff ? [] : EXPORT_VALID_SCOPES[card.format] || ['artboard'];
+  const validScopes = card.handoff ? [] : validScopesForFormat(card.format);
   // Long-comp tiers (feature-enhanced-video-editing Task 1). 900 frames is the
   // safe tier (the frame-step fallback runs ~2.5 s/frame and 1080p captures
   // have died from memory pressure above it); 3600 is the server's default cap
@@ -1601,10 +1632,22 @@ function ExportDialog({
   const exportOverCap = card.temporal && exportCompFrames > EXPORT_DEFAULT_CAP;
 
   // Keep the scope valid for the chosen format (pptx/zip etc. only allow a
-  // subset) — mirrors VALID_SCOPES_PER_FORMAT in the in-canvas dialog.
+  // subset). Both dialogs and the server now read one table
+  // (exporters/format-scopes.ts) — see DDR-231 Phase 2 T4.
   useEffect(() => {
-    if (validScopes.length && !validScopes.includes(scope)) setScope(validScopes[0]);
-  }, [validScopes, scope]);
+    if (validScopes.length && !validScopes.includes(scope)) {
+      setScope(defaultScopeForFormat(card.format));
+    }
+  }, [validScopes, scope, card.format]);
+
+  // DDR-231 T7 — wake the render service the moment the dialog opens on a
+  // remote-lane workspace: the multi-GB Chromium container starts booting
+  // while the member is still picking format/scope, so a video/PDF job lands
+  // on a warm (or at least warming) service instead of a cold one.
+  useEffect(() => {
+    if (exportLane !== 'remote') return;
+    fetch('/_api/export-warmup').catch(() => {});
+  }, [exportLane]);
 
   const loadRecent = useCallback(() => {
     fetch('/_api/export-history')
@@ -1678,6 +1721,119 @@ function ExportDialog({
     // the in-canvas dialog's captureScopeHints.
     if (activeArtboardId) options.artboardId = activeArtboardId;
     if (selection?.selector) options.selection = selection;
+    // Which canvas FILE this dialog is exporting — the server's `_active.json`
+    // lags a tab switch, and a job resolved against the stale file renders the
+    // wrong canvas (with this dialog's artboardId, which then never matches).
+    if (activePath && activePath !== SYSTEM_TAB) options.canvasFile = activePath;
+    // DDR-231 — the browser lane: in a workspace, png/svg of the active
+    // artboard is captured by the member's OWN browser (the canvas already
+    // renders here) — instant, no fleet wake. Everything else continues to
+    // the jobs lane below.
+    // NOTE the format gate. `browserCaptureEligible` answers for the whole
+    // browser lane, pptx included — but this branch is the SINGLE-ARTBOARD
+    // capture that downloads what the bridge returns verbatim. Without the
+    // gate, a pptx export fell in here, asked the bridge for a "pptx" (which it
+    // renders as PNG), and died in `sanitizeCapturedItems` on "not a valid
+    // pptx" — silently degrading to the worker lane, which is why the deck
+    // arrived minutes later with none of the browser lane's fixes in it. The
+    // dedicated deck branch below was unreachable. Found by the T7 export E2E.
+    const browserEligible =
+      BROWSER_CAPTURE_FORMATS.has(card.format) &&
+      browserCaptureEligible({
+        exportLane,
+        format: card.format,
+        scope,
+        artboardId: options.artboardId,
+      }) &&
+      typeof onBrowserCapture === 'function';
+    if (browserEligible) {
+      try {
+        const capScale = captureScale(options);
+        setStatus({ ok: true, msg: 'Capturing…' });
+        const items = await onBrowserCapture({
+          format: card.format,
+          artboardIds: [options.artboardId],
+          scale: capScale,
+          onProgress: (current, total) =>
+            setStatus({ ok: true, msg: `Capturing ${current}/${total}…` }),
+        });
+        // Validate before writing to disk — the capture bridge shares a window
+        // with tenant TSX, which can forge a reply (DDR-231 security pass, F1):
+        // caps count/bytes, sniffs magic, forces name+MIME.
+        const safeItems = await sanitizeCapturedItems(items, card.format);
+        for (const it of safeItems) downloadCapturedBlob(it.name, it.blob);
+        // DDR-231 Phase 2 T6 — the export is DONE and the member should see
+        // that, in the dialog and in the ledger. Phase 1 closed the modal the
+        // instant the download was handed off, so a browser-lane export left
+        // no trace anywhere ("v exports dialog nic nevidim").
+        for (const it of safeItems) {
+          await recordBrowserExport({ format: card.format, scope, filename: it.name });
+        }
+        setBusy(false);
+        setStatus({
+          ok: true,
+          msg: `Saved ${safeItems.map((it) => it.name).join(', ')} to your downloads.`,
+        });
+        return;
+      } catch (err) {
+        if (exportLane !== 'remote') {
+          setStatus({ ok: false, msg: `Capture failed: ${(err && err.message) || err}` });
+          setBusy(false);
+          return;
+        }
+        // A render service exists — degrade to the slower jobs lane instead of
+        // a dead end (and the fallback keeps the worker path exercised).
+      }
+    }
+    // DDR-231 — the pptx deck: capture every artboard as PNG in THIS browser,
+    // compose in-cell (/_api/export-assemble — the zip containment class).
+    if (
+      browserCaptureEligible({ exportLane, format: card.format, scope }) &&
+      card.format === 'pptx' &&
+      typeof onBrowserCapture === 'function'
+    ) {
+      try {
+        setStatus({ ok: true, msg: 'Capturing artboards…' });
+        const deckName =
+          activePath && activePath !== SYSTEM_TAB
+            ? basename(activePath).replace(/\.[^.]+$/, '')
+            : 'export';
+        const { filename, blob } = await captureDeckViaBrowser({
+          capture: onBrowserCapture,
+          name: deckName,
+          onProgress: (current, total) =>
+            setStatus({ ok: true, msg: `Capturing ${current}/${total}…` }),
+          // Composition happens in-cell AFTER the last capture, and it is not
+          // instant for a 10-slide deck. Without this the status sat on
+          // "Capturing 10/10…" through the whole assemble step and the deck
+          // then appeared out of nowhere — the reported "modal closes, nothing
+          // happens, and after a while it downloads by itself".
+          onAssemble: () => setStatus({ ok: true, msg: 'Assembling deck…' }),
+        });
+        downloadCapturedBlob(filename, blob);
+        await recordBrowserExport({ format: card.format, scope, filename });
+        setBusy(false);
+        setStatus({ ok: true, msg: `Saved ${filename} to your downloads.` });
+        return;
+      } catch (err) {
+        if (exportLane !== 'remote') {
+          setStatus({ ok: false, msg: `Deck export failed: ${(err && err.message) || err}` });
+          setBusy(false);
+          return;
+        }
+        // Render service available — degrade to the jobs lane below.
+      }
+    }
+    if (exportLane === 'none' && BROWSER_CAPTURE_FORMATS.has(card.format)) {
+      // Without a render service the browser can only capture what it renders:
+      // the active artboard. Other scopes have nowhere to run.
+      setStatus({
+        ok: false,
+        msg: 'Without the render service this workspace exports PNG/SVG of the active artboard only — switch Scope to “Active artboard”, or ask your admin to add maude-render.',
+      });
+      setBusy(false);
+      return;
+    }
     try {
       // feature-background-export-notification-center — enqueue and close
       // immediately; the menubar notification center owns status, progress,
@@ -1725,6 +1881,10 @@ function ExportDialog({
               <button
                 type="button"
                 key={c.id}
+                // Stable hooks for the export E2E harnesses (agent-browser web
+                // + desktop-e2e native) — data-testid convention, DDR-231
+                // Phase 2 T7/T8.
+                data-testid={`export-format-${c.id}`}
                 className={'st-fmt' + (c.id === sel ? ' is-on' : '')}
                 disabled={laneBlocked(c)}
                 title={
@@ -1745,10 +1905,11 @@ function ExportDialog({
           </div>
           {exportLane === 'none' && (
             <div className="st-dialog-note" data-testid="export-lane-note">
-              Rendered exports (PNG, PDF, video…) need the render service, which this
-              workspace doesn&apos;t have configured. ZIP and AI handoff still work here —
-              for everything else use the desktop app, or ask your admin to add the
-              <code> maude-render</code> service (see the self-hosting docs).
+              PNG and SVG of the active artboard — and the PPTX deck — export right
+              here in your browser; ZIP and AI handoff work too. PDF, video and other
+              multi-artboard exports need the render service, which this workspace
+              doesn&apos;t have configured — use the desktop app, or ask your admin to
+              add the <code> maude-render</code> service (see the self-hosting docs).
             </div>
           )}
           {!card.handoff && (
@@ -1758,6 +1919,7 @@ function ExportDialog({
               </label>
               <select
                 id="st-export-scope"
+                data-testid="export-scope"
                 className="st-select"
                 value={scope}
                 onChange={(e) => setScope(e.target.value)}
@@ -1940,12 +2102,14 @@ function ExportDialog({
             <div
               className={'callout ' + (status.ok ? 'callout--success' : 'callout--error')}
               style={{ fontSize: 12 }}
+              data-testid="export-status"
+              data-ok={status.ok ? '1' : '0'}
             >
               {status.msg}
             </div>
           )}
           {recent.length > 0 && (
-            <div className="st-export-recent">
+            <div className="st-export-recent" data-testid="export-recent">
               <div className="st-rp-hd">Recent</div>
               {recent.map((h, i) => (
                 <div className="st-export-recent-row" key={i}>
@@ -1963,7 +2127,13 @@ function ExportDialog({
           <button type="button" className="btn btn--ghost" onClick={onClose}>
             Cancel
           </button>
-          <button type="button" className="btn btn--primary" disabled={busy} onClick={doExport}>
+          <button
+            type="button"
+            className="btn btn--primary"
+            data-testid="export-submit"
+            disabled={busy}
+            onClick={doExport}
+          >
             <StIcon name="download" size={14} />
             {card.handoff
               ? 'Copy handoff command'
@@ -10286,6 +10456,58 @@ function App() {
     [activePath]
   );
 
+  // DDR-231 (hybrid export lanes) — ask the active canvas iframe to capture
+  // its own artboards (canvas-lib's useExportCaptureBridge) and hand back the
+  // blobs. The shell can't reach the cross-origin canvas DOM, and the sandbox
+  // omits allow-downloads, so this is the division of labour: the CANVAS
+  // captures (it renders the pixels), the SHELL downloads. Resolves with
+  // [{ name, type, blob }]; rejects on canvas error or timeout.
+  const browserCaptureSeq = useRef(0);
+  const captureFromCanvas = useCallback(
+    ({ format, artboardIds = null, scale = 1, onProgress, timeoutMs = 120_000 }) =>
+      new Promise((resolve, reject) => {
+        const el = activePath ? iframesRef.current.get(activePath) : null;
+        if (!el || !el.contentWindow) {
+          reject(new Error('no active canvas to capture'));
+          return;
+        }
+        const cw = el.contentWindow;
+        browserCaptureSeq.current += 1;
+        const id = `cap-${Date.now().toString(36)}-${browserCaptureSeq.current}`;
+        let settled = false;
+        const finish = (fn, arg) => {
+          if (settled) return;
+          settled = true;
+          window.removeEventListener('message', onMsg);
+          clearTimeout(timer);
+          fn(arg);
+        };
+        const onMsg = (e) => {
+          // Only answers from the iframe we asked — a message with a matching
+          // id from any other window is ignored.
+          if (e.source !== cw) return;
+          const m = e.data;
+          if (!m || m.id !== id) return;
+          if (m.dgn === 'export-capture-progress') onProgress?.(m.current, m.total);
+          else if (m.dgn === 'export-capture-done')
+            finish(resolve, Array.isArray(m.items) ? m.items : []);
+          else if (m.dgn === 'export-capture-error')
+            finish(reject, new Error(m.message || 'capture failed'));
+        };
+        const timer = setTimeout(
+          () => finish(reject, new Error('capture timed out — the canvas did not answer')),
+          timeoutMs
+        );
+        window.addEventListener('message', onMsg);
+        try {
+          cw.postMessage({ dgn: 'export-capture', id, format, artboardIds, scale }, '*');
+        } catch (err) {
+          finish(reject, err);
+        }
+      }),
+    [activePath]
+  );
+
   // ── feature-photo-editor — the Photo tab's three channels ─────────────────
   // (1) live preview: broadcast the edit DOWN to the active canvas iframe, whose
   //     canvas-lib `PhotoPreviewBridge` bakes the composite and swaps it directly
@@ -12991,6 +13213,16 @@ function App() {
         // report status back to the iframe. Origin is already validated
         // (e.origin === expectedOrigin) above, so only the real canvas iframe
         // can ask — this is NOT a generic fetch proxy.
+        //
+        // DDR-231 security (M1): additionally require the request come from the
+        // ACTIVE canvas — captureFromCanvas + the browser-lane branch capture
+        // and auto-download `activePath`'s pixels regardless of who asked, so
+        // WITHOUT this gate a background (untrusted, DDR-054) same-origin canvas
+        // could `postMessage({dgn:'export-request'})` with no user gesture and
+        // force a silent download of whatever the user is currently looking at.
+        // Same one-liner every sibling mutating branch already uses.
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        if (e.source !== activeWin) return;
         void runBridgedExport(e.source, m.id, m.payload);
       } else if (m.dgn === 'export-history-request' && m.id) {
         // Same bridge for the dialog's Recent tab (/_api/export-history is
@@ -13001,11 +13233,65 @@ function App() {
     // Reply target for the export bridge: the canvas iframe's own origin.
     const replyOrigin = cfg?.canvasOrigin || window.location.origin;
     async function runBridgedExport(source, id, payload) {
+      // The in-canvas dialog exports the canvas it LIVES IN — which the M1
+      // gate above just proved is `activePath`. Stamp it so scope resolution
+      // never falls back to the server's (asynchronously written, possibly
+      // stale) `_active.json` — same rule as the shell dialog's canvasFile.
+      // OVERWRITE, not fill-if-absent: the M1 gate above proved the sender IS
+      // the active canvas iframe (untrusted, DDR-054), so a canvasFile IT
+      // supplied must not survive — the bridged export renders the canvas it
+      // lives in, full stop (security review W2).
+      if (payload?.options && activePath && activePath !== SYSTEM_TAB) {
+        payload.options.canvasFile = activePath;
+      }
       const reply = (msg) => {
         try {
           if (source) source.postMessage({ dgn: 'export-result', id, ...msg }, replyOrigin);
         } catch {}
       };
+      // DDR-231 — the browser lane, mirrored for the IN-CANVAS dialog: png/svg
+      // of a known artboard is captured by the asking canvas itself (the shell
+      // relays the request back over the export-capture bridge and downloads
+      // the blobs — the sandboxed iframe can't download, the shell can).
+      const opts = payload?.options || {};
+      const bridgedBrowserEligible = browserCaptureEligible({
+        exportLane: cfg.exportLane || 'local',
+        format: payload?.format,
+        scope: payload?.scope,
+        artboardId: opts.artboardId,
+      });
+      if (bridgedBrowserEligible) {
+        try {
+          if (payload.format === 'pptx') {
+            const { filename, blob } = await captureDeckViaBrowser({
+              capture: captureFromCanvas,
+              name: activePath ? activePath.replace(/^.*\//, '').replace(/\.[^.]+$/, '') : 'export',
+            });
+            downloadCapturedBlob(filename, blob);
+          } else {
+            const capScale = captureScale(opts);
+            const items = await captureFromCanvas({
+              format: payload.format,
+              artboardIds: [opts.artboardId],
+              scale: capScale,
+            });
+            const safeItems = await sanitizeCapturedItems(items, payload.format);
+            for (const it of safeItems) downloadCapturedBlob(it.name, it.blob);
+          }
+          reply({ ok: true, browser: true });
+          return;
+        } catch {
+          if (cfg.exportLane !== 'remote') {
+            reply({
+              ok: false,
+              error:
+                'Capturing in the browser failed and this workspace has no render service to fall back to — try again, or ask your admin to add maude-render.',
+            });
+            return;
+          }
+          // Render service available — degrade to the jobs lane below.
+        }
+      }
       // feature-cloud-export-render-workers — a workspace with no render
       // service can't produce browser-rendered formats; answer the in-canvas
       // dialog with the reason instead of relaying a request the proxy 404s.
@@ -13014,7 +13300,7 @@ function App() {
         reply({
           ok: false,
           error:
-            'This format needs the render service, which this workspace doesn’t have configured. ZIP still works here; for rendered formats use the desktop app or ask your admin to add maude-render.',
+            'This format needs the render service, which this workspace doesn’t have configured. PNG/SVG of the active artboard and the PPTX deck export straight from the browser; ZIP works too. For the rest use the desktop app or ask your admin to add maude-render.',
         });
         return;
       }
@@ -13068,6 +13354,7 @@ function App() {
     broadcastChrome,
     activePath,
     postToActiveCanvas,
+    captureFromCanvas,
   ]);
 
   // Tell the active canvas iframe to drop any persistent selection (canvas
@@ -15831,6 +16118,7 @@ function App() {
           activeArtboardId={selected?.artboardId ?? canvasActiveArtboard ?? null}
           selection={selected?.selector ? { selector: selected.selector, file: selected.file } : null}
           exportLane={cfg.exportLane || 'local'}
+          onBrowserCapture={captureFromCanvas}
           onClose={() => setExportDialog(null)}
         />
       )}