@1agh/maude 1.0.6 → 1.0.7

package/apps/studio/client/app.jsx

@@ -28,6 +28,14 @@ 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,
+} 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';
@@ -1530,6 +1538,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,22 +1562,27 @@ 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 [sel, setSel] = useState(mode === 'handoff' ? 'shadcn' : 'png');
   const [scope, setScope] = useState(
     initialScope && EXPORT_SCOPE_LABELS[initialScope] ? initialScope : 'artboard'
   );
@@ -1606,6 +1634,15 @@ function ExportDialog({
     if (validScopes.length && !validScopes.includes(scope)) setScope(validScopes[0]);
   }, [validScopes, scope]);
 
+  // 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')
       .then((r) => r.json())
@@ -1678,6 +1715,88 @@ function ExportDialog({
     // the in-canvas dialog's captureScopeHints.
     if (activeArtboardId) options.artboardId = activeArtboardId;
     if (selection?.selector) options.selection = selection;
+    // 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.
+    const browserEligible =
+      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);
+        setBusy(false);
+        onClose();
+        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}…` }),
+        });
+        downloadCapturedBlob(filename, blob);
+        setBusy(false);
+        onClose();
+        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,
@@ -1745,10 +1864,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 && (
@@ -10286,6 +10406,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 +13163,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
@@ -13006,6 +13188,49 @@ function App() {
           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 +13239,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 +13293,7 @@ function App() {
     broadcastChrome,
     activePath,
     postToActiveCanvas,
+    captureFromCanvas,
   ]);
 
   // Tell the active canvas iframe to drop any persistent selection (canvas
@@ -15831,6 +16057,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)}
         />
       )}

package/apps/studio/client/export-lane.js

@@ -0,0 +1,156 @@
+// export-lane.js — DDR-231 (hybrid export lanes), client half.
+//
+// The SINGLE definition of "can the member's own browser capture this export
+// request", shared by the shell ExportDialog and the bridged in-canvas
+// handler in app.jsx — and unit-tested without a DOM
+// (test/export-browser-lane.test.ts). If the rule forks between the two entry
+// points, one dialog silently routes through the fleet the other avoids.
+//
+// The rule: a workspace (any non-local lane) captures png/svg of a KNOWN
+// active artboard in the browser — the canvas already renders there, so the
+// capture is instant and needs no render service. Everything else (other
+// formats, multi-artboard scopes, selection captures) continues to the jobs
+// lane: `remote` renders it on maude-render, `none` refuses with a remedy.
+
+/** Formats the canvas-lib export-capture bridge can produce today. */
+export const BROWSER_CAPTURE_FORMATS = new Set(['png', 'svg']);
+
+/**
+ * Formats a workspace can serve WITHOUT the render service thanks to the
+ * browser lane — the dialog's card-blocking check on lane `none`. pptx rides
+ * the capture bridge for its PNGs and the in-cell assemble route
+ * (`/_api/export-assemble`) for composition.
+ */
+export const BROWSER_SERVABLE_FORMATS = new Set(['png', 'svg', 'pptx']);
+
+/**
+ * @param {{ exportLane?: string, format?: string, scope?: string, artboardId?: unknown }} req
+ * @returns {boolean}
+ */
+export function browserCaptureEligible({ exportLane, format, scope, artboardId }) {
+  if (exportLane === 'local' || exportLane === undefined) return false;
+  if (BROWSER_CAPTURE_FORMATS.has(format)) return scope === 'artboard' && !!artboardId;
+  // The deck: every artboard captured as PNG in the browser, composed in-cell.
+  if (format === 'pptx') return scope === 'canvas-as-separate';
+  return false;
+}
+
+/**
+ * DDR-231 — the pptx browser lane, shared by the shell ExportDialog and the
+ * bridged in-canvas handler: capture EVERY artboard as PNG via the bridge,
+ * POST them to the in-cell assemble route, hand back the finished deck.
+ * 3× mirrors the desktop PNG-deck fallback's FALLBACK_SCALE (crisp in
+ * non-vector viewers).
+ *
+ * @param {{ capture: Function, name?: string, scale?: number, onProgress?: Function }} args
+ * @returns {Promise<{ filename: string, blob: Blob }>}
+ */
+export async function captureDeckViaBrowser({ capture, name = 'export', scale = 3, onProgress }) {
+  const items = await capture({
+    format: 'png',
+    artboardIds: null,
+    scale,
+    onProgress,
+    timeoutMs: 300_000,
+  });
+  if (!items || !items.length) throw new Error('capture returned nothing');
+  const fd = new FormData();
+  fd.set('format', 'pptx');
+  fd.set('scale', String(scale));
+  fd.set('name', name);
+  for (const it of items) fd.append('image', it.blob, it.name);
+  const r = await fetch('/_api/export-assemble', { method: 'POST', body: fd });
+  if (!r.ok) throw new Error((await r.text()) || `deck assembly failed (${r.status})`);
+  const disp = r.headers.get('content-disposition') || '';
+  const filename = /filename="([^"]+)"/.exec(disp)?.[1] || `${name}.pptx`;
+  return { filename, blob: await r.blob() };
+}
+
+const SAFE_CAPTURE_MIME = { png: 'image/png', svg: 'image/svg+xml' };
+const PNG_MAGIC = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
+// A forged reply can't be allowed to drive an unbounded number of downloads or
+// buffer an arbitrary blob into the member's browser (DDR-231 adversarial pass,
+// F1 caps). A png/svg export targets ONE artboard, so these are generous.
+export const MAX_CAPTURE_ITEMS = 64;
+export const MAX_CAPTURE_TOTAL_BYTES = 96 * 1024 * 1024;
+
+/** Safe download basename for a captured item: path-stripped, charset-limited,
+ * with the requested format's extension forced on. */
+function safeCaptureName(name, format) {
+  const ext = format === 'svg' ? 'svg' : 'png';
+  const raw = typeof name === 'string' ? name : '';
+  let base = raw
+    .replace(/^.*[\\/]/, '') // drop any path
+    .replace(/[^A-Za-z0-9._-]/g, '_')
+    .replace(new RegExp(`\\.${ext}$`, 'i'), '');
+  if (!base || /^\.+$/.test(base)) base = 'artboard';
+  return `${base.slice(0, 200)}.${ext}`;
+}
+
+/** True iff `bytes` actually begins with the requested format's signature —
+ * PNG 8-byte magic, or SVG/XML text for svg. */
+function magicMatches(bytes, format) {
+  if (format === 'png') return PNG_MAGIC.every((b, i) => bytes[i] === b);
+  // svg: allow a leading BOM/whitespace, then `<svg` or `<?xml`.
+  const head = new TextDecoder('utf-8', { fatal: false })
+    .decode(bytes.slice(0, 64))
+    .replace(/^/, '')
+    .trimStart()
+    .toLowerCase();
+  return head.startsWith('<svg') || head.startsWith('<?xml');
+}
+
+/**
+ * DDR-231 security (adversarial pass, F1) — the capture bridge lives in the
+ * CANVAS iframe, and tenant-authored TSX executes in that same window, so
+ * tenant code can FORGE an `export-capture-done` reply carrying arbitrary bytes
+ * + name that passes the shell's `e.source` check. Before the shell writes any
+ * of it to disk, treat the whole reply as untrusted DATA:
+ *   - cap the item count and total bytes (a forged reply must not drive 1000
+ *     downloads or buffer a giant blob);
+ *   - for each item, SNIFF the leading magic bytes and reject anything that
+ *     isn't actually the requested format (an HTML/exe payload disguised as a
+ *     `.png` is dropped, not merely relabelled);
+ *   - derive the filename from the request, not the reply, and force the
+ *     format's extension + MIME.
+ *
+ * @param {Array<{ name?: string, blob: Blob }>} items
+ * @param {string} format 'png' | 'svg'
+ * @returns {Promise<Array<{ name: string, blob: Blob }>>}
+ */
+export async function sanitizeCapturedItems(items, format) {
+  if (!Array.isArray(items) || !items.length) throw new Error('capture returned nothing');
+  if (items.length > MAX_CAPTURE_ITEMS)
+    throw new Error(`capture returned too many items (${items.length})`);
+  const mime = SAFE_CAPTURE_MIME[format] || 'application/octet-stream';
+  const out = [];
+  let total = 0;
+  for (const item of items) {
+    if (!(item?.blob instanceof Blob)) throw new Error('capture item is not a blob');
+    total += item.blob.size;
+    if (total > MAX_CAPTURE_TOTAL_BYTES) throw new Error('capture payload too large');
+    const head = new Uint8Array(await item.blob.slice(0, 64).arrayBuffer());
+    if (!magicMatches(head, format))
+      throw new Error(`capture item is not a valid ${format} — refusing to download`);
+    out.push({
+      name: safeCaptureName(item.name, format),
+      // Re-wrap so the download Content-Type is the format's MIME regardless of
+      // what the (untrusted) reply claimed.
+      blob: new Blob([item.blob], { type: mime }),
+    });
+  }
+  return out;
+}
+
+/**
+ * Fold the dialog's resolution options (scale multiplier OR physical dpi —
+ * dpi wins, mirroring exporters/png.ts resolveDeviceScale) into the capture
+ * bridge's deviceScale, clamped to the raster guard's 1–8 window
+ * (capture-core.ts assertRasterSizeOk enforces the byte/side ceilings).
+ *
+ * @param {{ dpi?: number, scale?: number }} [options]
+ * @returns {number}
+ */
+export function captureScale(options = {}) {
+  return Math.max(1, Math.min(8, options.dpi ? options.dpi / 96 : options.scale || 1));
+}