@1agh/maude 1.0.5 → 1.0.7

package/apps/studio/exporters/capture-core.ts

@@ -0,0 +1,291 @@
+// capture-core.ts — the SHARED in-page capture spine (DDR-231 single-spine).
+//
+// Pure browser code, two hosts, ONE source:
+//   1. The playwright SVG shim (`bin/_svg-playwright.mjs`) injects this file
+//      as a module bundle (`getCaptureCoreBundle()`) and calls it inside
+//      `page.evaluate` — the desktop / render-worker lane.
+//   2. The canvas runtime (`canvas-lib.tsx` export-capture listener) imports
+//      it directly — the workspace `browser` lane, where the member's own
+//      browser does the capture (DDR-231: images render client-side).
+//
+// History: this logic lived inline in `_svg-playwright.mjs`'s serializeOne
+// (backdrop rect from the artboard's effective background, oklch→sRGB
+// normalization for vector editors, dom-to-svg inlineResources). Extracting it
+// is DDR-231's BUILDER condition — if the two hosts fork, the browser lane
+// rots into a second implementation. Do not re-inline.
+//
+// NO Node imports allowed here — this file must bundle for `target: 'browser'`
+// with zero shims. Loaded as a side-effect module: assigns
+// `window.__maudeCaptureCore` so the shim can reach it without an importmap.
+
+/** The subset of dom-to-svg the capture uses (IIFE `window.domToSvg` in the
+ * shim host; `await import('dom-to-svg')` through the importmap in the canvas
+ * runtime host). */
+export interface DomToSvgApi {
+  elementToSVG(el: Element): XMLDocument;
+  inlineResources(el: Element): Promise<void>;
+}
+
+// Raster ceilings — mirrored from bin/_png-playwright.mjs (feature-2-print-
+// artboards T4): 16k px matches common canvas/texture limits across engines;
+// ~600MB is the RGBA-buffer ceiling that still admits a 600dpi A0 poster.
+export const MAX_OUTPUT_SIDE_PX = 16000;
+export const MAX_OUTPUT_BYTES = 600 * 1024 * 1024;
+
+/** Throws with an actionable message (max supported DPI for this artboard)
+ * when the requested raster exceeds the render guard. */
+export function assertRasterSizeOk(widthCss: number, heightCss: number, scale: number): void {
+  const outW = Math.ceil(widthCss * scale);
+  const outH = Math.ceil(heightCss * scale);
+  const estBytes = outW * outH * 4;
+  if (outW > MAX_OUTPUT_SIDE_PX || outH > MAX_OUTPUT_SIDE_PX || estBytes > MAX_OUTPUT_BYTES) {
+    const maxScaleForSide = MAX_OUTPUT_SIDE_PX / Math.max(widthCss, heightCss);
+    const maxScaleForBytes = Math.sqrt(MAX_OUTPUT_BYTES / 4 / (widthCss * heightCss));
+    const maxScale = Math.min(maxScaleForSide, maxScaleForBytes);
+    const maxDpi = Math.floor(maxScale * 96);
+    throw new Error(
+      `requested output ${outW}×${outH}px at ${scale}× exceeds the render guard ` +
+        `(max side ${MAX_OUTPUT_SIDE_PX}px / ~${Math.round(MAX_OUTPUT_BYTES / 1024 / 1024)}MB). ` +
+        `For this artboard (${Math.round(widthCss)}×${Math.round(heightCss)}px) the max ` +
+        `supported DPI is ~${maxDpi}.`
+    );
+  }
+}
+
+/** Pin an element's enclosing artboard to (0,0); returns the style values to
+ * hand back to {@link restoreArtboard}. Per-target save/restore (not a global
+ * reset) — the multi-artboard scatter-bug lesson from the playwright shims. */
+export function pinArtboard(el: Element): { left: string; top: string } {
+  const ab = (el.closest('[data-dc-screen]') ?? el) as HTMLElement;
+  const prev = { left: ab.style.left, top: ab.style.top };
+  ab.style.left = '0px';
+  ab.style.top = '0px';
+  return prev;
+}
+
+export function restoreArtboard(el: Element, prev: { left: string; top: string }): void {
+  const ab = (el.closest('[data-dc-screen]') ?? el) as HTMLElement;
+  ab.style.left = prev.left;
+  ab.style.top = prev.top;
+}
+
+/** Reset the world plane's pan/zoom so artboards measure at their declared
+ * dimensions (CSS `zoom` shrinks LAYOUT — getBoundingClientRect lies under
+ * it). Returns the saved styles for {@link restoreWorldPlane}; the live-canvas
+ * host MUST restore (the member is looking at the plane), the throwaway shim
+ * page never bothers. */
+export function restoreWorldPlane(saved: { zoom: string; transform: string } | null): void {
+  const world = document.querySelector<HTMLElement>('.dc-world');
+  if (!world || !saved) return;
+  world.style.zoom = saved.zoom;
+  world.style.transform = saved.transform;
+}
+
+export function resetWorldPlane(): { zoom: string; transform: string } | null {
+  const world = document.querySelector<HTMLElement>('.dc-world');
+  if (!world) return null;
+  const saved = { zoom: world.style.zoom, transform: world.style.transform };
+  world.style.zoom = '1';
+  world.style.transform = 'none';
+  return saved;
+}
+
+/** Convert ANY computed color (modern Chromium serializes `oklch(...)`
+ * verbatim from getComputedStyle) to sRGB rgb()/rgba(). Affinity Designer /
+ * older Illustrator / Inkscape don't parse CSS Color 4 and silently drop the
+ * fill. A 1×1 canvas normalizes any CSS color string to sRGB bytes; null when
+ * the value can't be painted (keep the original rather than emit a wrong
+ * colour). */
+function makeToSrgb(): (color: string) => string | null {
+  const cache = new Map<string, string | null>();
+  const canvas = document.createElement('canvas');
+  canvas.width = 1;
+  canvas.height = 1;
+  const ctx = canvas.getContext('2d', { willReadFrequently: true });
+  return (color: string) => {
+    const hit = cache.get(color);
+    if (hit !== undefined) return hit;
+    let result: string | null = null;
+    try {
+      if (ctx) {
+        ctx.clearRect(0, 0, 1, 1);
+        ctx.fillStyle = '#000';
+        ctx.fillStyle = color; // ignored (stays #000) if syntax unsupported
+        ctx.fillRect(0, 0, 1, 1);
+        const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+        if (a !== 0) {
+          result =
+            a === 255 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(3)})`;
+        }
+      }
+    } catch {
+      result = null;
+    }
+    cache.set(color, result);
+    return result;
+  };
+}
+
+const isOpaque = (bg: string | null): bg is string =>
+  !!bg &&
+  bg !== 'transparent' &&
+  !/^rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)$/.test(bg) &&
+  !/^rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0(\.0+)?\s*\)$/.test(bg);
+
+/** Effective background of the artboard region: the DS theme bg usually sits
+ * on an inner full-bleed wrapper (`.app` / `.mdcc`), occasionally on the
+ * artboard element itself, sometimes on an ancestor. Descend first for a
+ * near-full-bleed opaque bg, then fall back to ancestors. An intentionally
+ * transparent artboard returns null → stays transparent. */
+function effectiveBg(node: Element): string | null {
+  const abRect = node.getBoundingClientRect();
+  const abArea = Math.max(1, abRect.width * abRect.height);
+  const queue: Element[] = [node];
+  let guard = 0;
+  while (queue.length && guard < 80) {
+    const e = queue.shift() as Element;
+    guard += 1;
+    const bg = getComputedStyle(e).backgroundColor;
+    if (isOpaque(bg)) {
+      const r = e.getBoundingClientRect();
+      if (r.width * r.height >= abArea * 0.6) return bg;
+    }
+    for (const c of e.children) queue.push(c);
+  }
+  let cur = node.parentElement;
+  let up = 0;
+  while (cur && up < 12) {
+    const bg = getComputedStyle(cur).backgroundColor;
+    if (isOpaque(bg)) return bg;
+    cur = cur.parentElement;
+    up += 1;
+  }
+  return null;
+}
+
+export interface SvgCaptureOptions {
+  /** Capture the enclosing `[data-dc-screen]` rather than the element itself. */
+  widenToArtboard?: boolean;
+}
+
+/**
+ * Serialize one element (usually an artboard) to a portable SVG string:
+ * dom-to-svg primitives + a backdrop `<rect>` from the effective background
+ * (dom-to-svg doesn't paint the root's fill — the "artboard bg vanished in
+ * Affinity" bug) + base64-inlined fonts/images + a global CSS-Color-4 → sRGB
+ * rewrite so vector editors keep every fill.
+ */
+export async function svgForElement(
+  el: Element,
+  api: DomToSvgApi,
+  opts: SvgCaptureOptions = {}
+): Promise<string> {
+  const target = opts.widenToArtboard ? (el.closest('[data-dc-screen]') ?? el) : el;
+  const toSrgb = makeToSrgb();
+
+  const bg = effectiveBg(target);
+  const fillColor = bg ? toSrgb(bg) : null;
+  const svgDoc = api.elementToSVG(target);
+  const root = svgDoc.documentElement;
+  if (fillColor) {
+    const NS = 'http://www.w3.org/2000/svg';
+    const rect = svgDoc.createElementNS(NS, 'rect');
+    const vb = (root.getAttribute('viewBox') || '').split(/\s+/).map(Number);
+    if (vb.length === 4 && vb.every((n) => !Number.isNaN(n))) {
+      rect.setAttribute('x', String(vb[0]));
+      rect.setAttribute('y', String(vb[1]));
+      rect.setAttribute('width', String(vb[2]));
+      rect.setAttribute('height', String(vb[3]));
+    } else {
+      rect.setAttribute('x', '0');
+      rect.setAttribute('y', '0');
+      rect.setAttribute('width', '100%');
+      rect.setAttribute('height', '100%');
+    }
+    rect.setAttribute('fill', fillColor);
+    root.insertBefore(rect, root.firstChild);
+  }
+  // base64-embeds fonts + images so the SVG is portable outside the serving
+  // origin — and, for the raster path, so the <img> decode is self-contained
+  // (an SVG-as-image loads NO external resources; a data: font/image does).
+  try {
+    await api.inlineResources(root);
+  } catch {
+    /* best-effort — a missing resource beats a missing primitive */
+  }
+  let out = new XMLSerializer().serializeToString(svgDoc);
+  out = out.replace(/(?:oklch|oklab|lch|lab|color)\([^)]*\)/gi, (m) => toSrgb(m) || m);
+  return out;
+}
+
+/** Parse the root viewBox (or width/height) out of a serialized SVG. */
+export function svgDimensions(svg: string): { width: number; height: number } | null {
+  const doc = new DOMParser().parseFromString(svg, 'image/svg+xml');
+  const root = doc.documentElement;
+  if (root.nodeName === 'parsererror') return null;
+  const vb = (root.getAttribute('viewBox') || '').split(/\s+/).map(Number);
+  if (vb.length === 4 && vb.every((n) => !Number.isNaN(n)) && vb[2] > 0 && vb[3] > 0) {
+    return { width: vb[2], height: vb[3] };
+  }
+  const w = Number.parseFloat(root.getAttribute('width') || '');
+  const h = Number.parseFloat(root.getAttribute('height') || '');
+  return Number.isFinite(w) && Number.isFinite(h) && w > 0 && h > 0
+    ? { width: w, height: h }
+    : null;
+}
+
+/**
+ * Rasterize a self-contained SVG string to a PNG Blob at `scale`×. The SVG
+ * must already have its resources inlined ({@link svgForElement} does) — an
+ * external URL inside an SVG-as-image silently doesn't load, and a
+ * cross-origin bitmap would taint the canvas and make toBlob throw.
+ */
+export async function rasterizeSvg(svg: string, scale: number): Promise<Blob> {
+  const dims = svgDimensions(svg);
+  if (!dims) throw new Error('capture produced an SVG with no measurable dimensions');
+  assertRasterSizeOk(dims.width, dims.height, scale);
+  const url = URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' }));
+  try {
+    const img = new Image();
+    img.decoding = 'async';
+    await new Promise<void>((resolve, reject) => {
+      img.onload = () => resolve();
+      img.onerror = () => reject(new Error('SVG rasterization failed to decode'));
+      img.src = url;
+    });
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.max(1, Math.ceil(dims.width * scale));
+    canvas.height = Math.max(1, Math.ceil(dims.height * scale));
+    const ctx = canvas.getContext('2d');
+    if (!ctx) throw new Error('2d canvas context unavailable');
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    const blob = await new Promise<Blob | null>((resolve) => {
+      canvas.toBlob(resolve, 'image/png');
+    });
+    if (!blob) throw new Error('canvas.toBlob returned null');
+    return blob;
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+
+const core = {
+  MAX_OUTPUT_SIDE_PX,
+  MAX_OUTPUT_BYTES,
+  assertRasterSizeOk,
+  pinArtboard,
+  restoreArtboard,
+  resetWorldPlane,
+  restoreWorldPlane,
+  svgForElement,
+  svgDimensions,
+  rasterizeSvg,
+};
+
+export type CaptureCore = typeof core;
+
+// Side-effect global for the playwright-shim host (injected via addScriptTag,
+// no importmap there) — mirrors video-encode-lib's `window.__maudeEnc`.
+if (typeof window !== 'undefined') {
+  (window as unknown as { __maudeCaptureCore: CaptureCore }).__maudeCaptureCore = core;
+}

package/apps/studio/exporters/pptx.ts

@@ -269,30 +269,58 @@ function pngArgsFor(target: ElementTarget, url: string, outDir: string): string[
 
 // ─── PNG fallback deck ────────────────────────────────────────────────────────
 
-async function buildPngDeck(pngPaths: string[]): Promise<Uint8Array> {
+/**
+ * DDR-231 (hybrid export lanes) — the browser-free half of the PNG deck,
+ * working on BYTES so the workspace assemble route (`/_api/export-assemble`)
+ * can feed it captures made in the MEMBER's browser: the client's
+ * export-capture bridge rasterizes the artboards, this composes the .pptx
+ * in-cell with PptxGenJS (pure JS — same containment class as zip). The
+ * desktop path below ({@link buildPngDeck}) is a thin file-reading wrapper,
+ * so both hosts share one composition (the single-spine rule).
+ *
+ * @param captureScale the deviceScale the PNGs were rendered at — slide
+ *   dimensions normalise back to artboard inches through it.
+ */
+export async function assemblePngDeck(
+  images: Uint8Array[],
+  captureScale: number
+): Promise<Uint8Array> {
   const JSZip = (await import('jszip')).default;
-  // Slide size from the first PNG (px → inches); contain-fit the rest.
-  const dims = pngPaths.map((p) => {
+  // The full 8-byte PNG signature (security L3 — 4 bytes let a `\x89PNG…`
+  // prefix on non-PNG bytes through) and a sane dimension ceiling (security
+  // F3 — the images arrive from the untrusted client; an IHDR claiming
+  // 2^31×2^31 would drive PptxGenJS's EMU geometry into overflow/garbage).
+  const PNG_SIG = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
+  const MAX_DIM = 20000; // px — above any real artboard × 8× export scale
+  // Slide size from the largest PNG (px → inches); contain-fit the rest.
+  const dims = images.map((bytes) => {
     // PNG IHDR: width @ byte 16, height @ 20 (big-endian).
-    const b = readFileSync(p);
-    return { w: b.readUInt32BE(16), h: b.readUInt32BE(20), p };
+    const b = Buffer.from(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    if (b.length < 24 || PNG_SIG.some((sig, i) => b[i] !== sig)) {
+      throw new Error('assemblePngDeck: not a PNG');
+    }
+    const w = b.readUInt32BE(16);
+    const h = b.readUInt32BE(20);
+    if (w < 1 || h < 1 || w > MAX_DIM || h > MAX_DIM) {
+      throw new Error(`assemblePngDeck: implausible PNG dimensions ${w}×${h}`);
+    }
+    return { w, h, b };
   });
   const maxW = Math.max(...dims.map((d) => d.w));
   const maxH = Math.max(...dims.map((d) => d.h));
-  // The PNGs are FALLBACK_SCALE× the artboard; normalise to artboard inches.
-  const slideW = maxW / SCREEN_DPI / FALLBACK_SCALE;
-  const slideH = maxH / SCREEN_DPI / FALLBACK_SCALE;
+  const slideW = maxW / SCREEN_DPI / captureScale;
+  const slideH = maxH / SCREEN_DPI / captureScale;
   const pptx = new PptxGenJS();
   pptx.defineLayout({ name: 'MAUDE_ARTBOARD', width: slideW, height: slideH });
   pptx.layout = 'MAUDE_ARTBOARD';
   for (const d of dims) {
     const slide = pptx.addSlide();
-    const nativeW = d.w / SCREEN_DPI / FALLBACK_SCALE;
-    const nativeH = d.h / SCREEN_DPI / FALLBACK_SCALE;
+    const nativeW = d.w / SCREEN_DPI / captureScale;
+    const nativeH = d.h / SCREEN_DPI / captureScale;
     const scale = Math.min(slideW / nativeW, slideH / nativeH);
     const w = nativeW * scale;
     const h = nativeH * scale;
-    const dataUri = `data:image/png;base64,${readFileSync(d.p).toString('base64')}`;
+    const dataUri = `data:image/png;base64,${d.b.toString('base64')}`;
     slide.addImage({ data: dataUri, x: (slideW - w) / 2, y: (slideH - h) / 2, w, h });
   }
   const buf = new Uint8Array((await pptx.write({ outputType: 'nodebuffer' })) as Uint8Array);
@@ -310,6 +338,13 @@ async function buildPngDeck(pngPaths: string[]): Promise<Uint8Array> {
   return zip.generateAsync({ type: 'uint8array' });
 }
 
+async function buildPngDeck(pngPaths: string[]): Promise<Uint8Array> {
+  return assemblePngDeck(
+    pngPaths.map((p) => new Uint8Array(readFileSync(p))),
+    FALLBACK_SCALE
+  );
+}
+
 export async function run(
   targets: Target[],
   options: ExportOptions,

package/apps/studio/exporters/remote.ts

@@ -169,15 +169,29 @@ export async function renderRemotely(args: {
     ...options,
     timeoutSec: Math.max(Number((options as { timeoutSec?: number }).timeoutSec) || 0, 60),
   };
-  const res = await fetch(`${service.url}/render`, {
-    method: 'POST',
-    signal,
-    headers: {
-      'content-type': 'application/json',
-      authorization: `Bearer ${service.secret}`,
-    },
-    body: JSON.stringify({ format, targets, options: remoteOptions, canvas }),
-  });
+  let res: Response;
+  try {
+    res = await fetch(`${service.url}/render`, {
+      method: 'POST',
+      signal,
+      headers: {
+        'content-type': 'application/json',
+        authorization: `Bearer ${service.secret}`,
+      },
+      body: JSON.stringify({ format, targets, options: remoteOptions, canvas }),
+    });
+  } catch (err) {
+    if (signal?.aborted) throw err;
+    // DDR-231 T7 — the member sees this in the export dialog / notification
+    // center: name the LIKELY cause (a sleeping container waking) instead of
+    // leaking a bare fetch error.
+    throw new Error(
+      'The render service didn’t answer — it may still be waking up. Try the export again in a minute.'
+    );
+  }
+  if (res.status === 503) {
+    throw new Error('The render service is busy with other exports right now — try again shortly.');
+  }
   if (!res.ok) {
     const detail = (await res.text().catch(() => '')) || `${res.status}`;
     throw new Error(`render service refused the job: ${detail}`);

package/apps/studio/exporters/svg.ts

@@ -12,7 +12,7 @@ import path from 'node:path';
 
 import JSZip from 'jszip';
 
-import { getBrowserBundle } from './_browser-bundles.ts';
+import { getBrowserBundle, getCaptureCoreBundle } from './_browser-bundles.ts';
 import { exportShimPath, runShim } from './_runtime.ts';
 import {
   canvasShellUrl,
@@ -32,6 +32,7 @@ async function captureSvg(
   outDir: string,
   timeoutSec: number,
   bundlePath: string,
+  corePath: string,
   hooks?: ExportHooks
 ): Promise<string[]> {
   const args = [
@@ -42,6 +43,8 @@ async function captureSvg(
     target.cssPath,
     '--bundle-path',
     bundlePath,
+    '--core-path',
+    corePath,
     '--timeout',
     String(timeoutSec),
   ];
@@ -82,13 +85,24 @@ export async function run(
     throw new Error('svg adapter requires element targets (got file-tree)');
   }
   const timeoutSec = (options.timeoutSec as number | undefined) ?? 12;
-  const bundlePath = await getBrowserBundle('dom-to-svg', 'domToSvg');
+  const [bundlePath, corePath] = await Promise.all([
+    getBrowserBundle('dom-to-svg', 'domToSvg'),
+    getCaptureCoreBundle(),
+  ]);
   const tmp = mkdtempSync(path.join(tmpdir(), 'maude-svg-'));
 
   try {
     const written: string[] = [];
     for (let i = 0; i < elementTargets.length; i += 1) {
-      const paths = await captureSvg(elementTargets[i], ctx, tmp, timeoutSec, bundlePath, hooks);
+      const paths = await captureSvg(
+        elementTargets[i],
+        ctx,
+        tmp,
+        timeoutSec,
+        bundlePath,
+        corePath,
+        hooks
+      );
       written.push(...paths);
       hooks?.onProgress?.({ current: i + 1, total: elementTargets.length });
     }

package/apps/studio/http.ts

@@ -4425,6 +4425,107 @@ export function createHttp(
       });
     },
 
+    '/_api/export-warmup': async (req: Request) => {
+      // DDR-231 T7 — wake the render service while the member is still picking
+      // export options: the dialog fires this on open (remote lane only), so
+      // by the time a video/PDF job lands the multi-GB Chromium container is
+      // already booting instead of starting cold. Proxies GET /_health — no
+      // job body, no secret in the response, nothing evaluates.
+      if (req.method !== 'GET') return new Response('Method not allowed', { status: 405 });
+      if (!isTrustedRequestHost(req))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      // Side-effecting GET (it triggers an outbound fetch that wakes/bills a
+      // container) → gate it like every other side-effecting GET, so a
+      // cross-site page a member visits can't fire it as a keep-warm
+      // amplification (DDR-231 security L2).
+      if (!sameOriginRead(req)) return new Response('cross-origin rejected', { status: 403 });
+      const serviceUrl = process.env.MAUDE_RENDER_URL;
+      if (!serviceUrl) return Response.json({ ok: false, lane: resolveRenderLane() });
+      try {
+        const r = await fetch(`${serviceUrl.replace(/\/+$/, '')}/_health`, {
+          signal: AbortSignal.timeout(8_000),
+        });
+        const body = (await r.json().catch(() => null)) as { ok?: boolean } | null;
+        return Response.json(
+          { ok: Boolean(body?.ok), lane: 'remote' },
+          { headers: { 'Cache-Control': 'no-store' } }
+        );
+      } catch {
+        // A timeout here usually MEANS the container is waking — that is the
+        // point of the ping; report it calmly.
+        return Response.json(
+          { ok: false, waking: true, lane: 'remote' },
+          { headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+    },
+
+    '/_api/export-assemble': async (req: Request) => {
+      // DDR-231 (hybrid export lanes) — the browser lane's ASSEMBLE half. The
+      // member's browser captured the artboard PNGs (canvas-lib's
+      // export-capture bridge — the only place the pixels exist in a
+      // workspace); this composes them into a .pptx deck with PptxGenJS —
+      // pure JS over pure data, the same containment class as zip: no tenant
+      // TSX evaluates here and no browser enters the image. MAIN-ORIGIN ONLY
+      // (absent from CANVAS_SAFE_API + the canvas-origin routes map) and
+      // CSRF-gated like its jobs siblings.
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!isTrustedRequestHost(req))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      // Byte cap BEFORE parsing: 50 artboards at 3× are tens of MB; 96 MB sits
+      // under Bun's global maxRequestBodySize (~108 MB) so formData() can't be
+      // pushed past it, and still fits a large deck (PptxGenJS base64-encodes
+      // every image → memory ~3× input). REQUIRE an honest content-length: a
+      // chunked / absent-length body would otherwise skip this fast-reject and
+      // buffer up to Bun's ceiling before the loop below could stop it
+      // (adversarial pass). formData() itself is still Bun-capped as a backstop.
+      const MAX_ASSEMBLE_BYTES = 96 * 1024 * 1024;
+      const declared = Number(req.headers.get('content-length'));
+      if (!Number.isFinite(declared) || declared <= 0)
+        return new Response('content-length required', { status: 411 });
+      if (declared > MAX_ASSEMBLE_BYTES)
+        return new Response('assembly payload too large', { status: 413 });
+      const form = await req.formData().catch(() => null);
+      if (!form) return new Response('multipart form body required', { status: 400 });
+      if (form.get('format') !== 'pptx')
+        return new Response('unsupported assemble format', { status: 400 });
+      const scale = Math.max(1, Math.min(8, Number(form.get('scale')) || 1));
+      const images: Uint8Array[] = [];
+      let total = 0;
+      for (const [key, value] of form.entries()) {
+        if (key !== 'image') continue;
+        // Bun's FormData typings collapse the entry value; runtime-check the
+        // Blob shape instead of trusting the declared union.
+        const file = value as unknown;
+        if (!(file instanceof Blob)) continue;
+        const bytes = new Uint8Array(await file.arrayBuffer());
+        total += bytes.byteLength;
+        if (images.length >= 100 || total > MAX_ASSEMBLE_BYTES)
+          return new Response('assembly payload too large', { status: 413 });
+        images.push(bytes);
+      }
+      if (!images.length) return new Response('no images to assemble', { status: 400 });
+      try {
+        const { assemblePngDeck } = await import('./exporters/pptx.ts');
+        const body = await assemblePngDeck(images, scale);
+        const name = String(form.get('name') || 'export').replace(/[^A-Za-z0-9._-]/g, '_');
+        return new Response(body as unknown as BodyInit, {
+          status: 200,
+          headers: {
+            'Content-Type':
+              'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+            'Content-Disposition': `attachment; filename="${name}.pptx"`,
+            'Cache-Control': 'no-store',
+          },
+        });
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        return new Response(`deck assembly failed: ${msg}`, { status: 422 });
+      }
+    },
+
     // feature-ai-media-generation (DDR-16x) — the background AI-media generation
     // job queue. The privileged sibling of /_api/export-jobs: MAIN-ORIGIN ONLY
     // (absent from CANVAS_SAFE_API + startCanvasServer's routes — the untrusted

package/apps/studio/runtime-bundle.ts

@@ -123,6 +123,12 @@ export const RUNTIME_PACKAGES = [
   '@remotion/transitions/flip',
   '@remotion/transitions/clock-wipe',
   '@remotion/transitions/none',
+  // DDR-231 (hybrid export lanes) — the workspace `browser` lane captures
+  // artboards in the MEMBER's browser. canvas-lib's export-capture listener
+  // reaches dom-to-svg through a LAZY runtime `import('dom-to-svg')` (the
+  // pixi.js pattern), so a canvas that never exports pays zero bundle cost —
+  // regression-pinned alongside pixi in test/photo-canvas-bundle.test.ts.
+  'dom-to-svg',
 ] as const;
 
 export type RuntimePackage = (typeof RUNTIME_PACKAGES)[number];

package/apps/studio/test/capture-core.test.ts

@@ -0,0 +1,32 @@
+// capture-core.test.ts — pure-logic guards of the shared capture spine
+// (DDR-231). The DOM-dependent half (svgForElement, rasterizeSvg) is exercised
+// end-to-end by the fidelity gate (plan T6) — no DOM emulation here.
+
+import { describe, expect, test } from 'bun:test';
+
+import {
+  assertRasterSizeOk,
+  MAX_OUTPUT_BYTES,
+  MAX_OUTPUT_SIDE_PX,
+} from '../exporters/capture-core.ts';
+
+describe('assertRasterSizeOk — the raster render guard', () => {
+  test('a 1440×900 artboard at 2× passes', () => {
+    expect(() => assertRasterSizeOk(1440, 900, 2)).not.toThrow();
+  });
+
+  test('a 600dpi A0 poster still fits (the guard ceiling rationale)', () => {
+    // 9933×14043 px ≈ 558MB RGBA — deliberately inside the ~600MB ceiling.
+    expect(() => assertRasterSizeOk(9933 / 6.25, 14043 / 6.25, 6.25)).not.toThrow();
+  });
+
+  test('exceeding the side ceiling throws with an actionable max-DPI hint', () => {
+    expect(() => assertRasterSizeOk(MAX_OUTPUT_SIDE_PX, 900, 2)).toThrow(/max supported DPI/);
+  });
+
+  test('exceeding the byte ceiling throws even when both sides fit', () => {
+    // 15000×15000 × 4B = 900MB > ceiling while each side < 16000.
+    expect(15000 * 15000 * 4).toBeGreaterThan(MAX_OUTPUT_BYTES);
+    expect(() => assertRasterSizeOk(15000, 15000, 1)).toThrow(/render guard/);
+  });
+});