@1agh/maude 1.0.6 → 1.0.8

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

@@ -18,7 +18,7 @@
 
 import { mkdirSync, writeFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
-import { launchChromium } from './_pw-launch.mjs';
+import { launchChromium, safeArtboardFilename } from './_pw-launch.mjs';
 
 const args = Object.fromEntries(
   process.argv.slice(2).reduce((acc, cur, i, all) => {
@@ -33,14 +33,16 @@ const {
   out,
   'out-dir': outDir,
   'bundle-path': bundlePath,
+  'core-path': corePath,
   'widen-to-artboard': widenFlag,
   multi: multiFlag,
   timeout = '12',
 } = args;
 
-if (!url || !bundlePath) {
+if (!url || !bundlePath || !corePath) {
   console.error(
-    'usage: _svg-playwright.mjs --url <url> --selector <css> --out <path> --bundle-path <iife.js>'
+    'usage: _svg-playwright.mjs --url <url> --selector <css> --out <path> ' +
+      '--bundle-path <iife.js> --core-path <capture-core.js>'
   );
   process.exit(2);
 }
@@ -51,7 +53,10 @@ const timeoutMs = Number(timeout) * 1000;
 
 const browser = await launchChromium();
 try {
-  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
+  const ctx = await browser.newContext({
+    viewport: { width: 1440, height: 900 },
+    serviceWorkers: 'block',
+  });
   const page = await ctx.newPage();
   await page.goto(url, { waitUntil: 'load', timeout: timeoutMs });
   await page.evaluate(() => document.fonts.ready);
@@ -71,9 +76,41 @@ try {
       world.style.transform = 'none';
     }
   });
-  // Inject dom-to-svg into the page. Bundle attaches its exports under
-  // `window.domToSvg`.
-  await page.addScriptTag({ path: bundlePath });
+  // Get dom-to-svg (`window.domToSvg`) and the SHARED capture spine
+  // (`window.__maudeCaptureCore`) into the page. The core is the SAME source
+  // the canvas runtime's export-capture bridge imports (exporters/
+  // capture-core.ts, DDR-231 single-spine): the serializer logic must never be
+  // re-inlined here — it forked once and the browser lane would silently drift
+  // from this shim.
+  //
+  // PREFER WHAT THE PAGE ALREADY HAS (DDR-231 Phase 2 T4). A real canvas
+  // bundles capture-core through canvas-lib, so `__maudeCaptureCore` is
+  // already set, and `dom-to-svg` resolves through the shell's importmap.
+  // `addScriptTag({path})` injects an INLINE script, which the canvas origin's
+  // strict shell CSP (`script-src 'self' 'sha256-…'`) refuses outright — so on
+  // the render-worker lane, where the canvas is ALWAYS loaded from the canvas
+  // origin, every SVG export died with "Executing inline script violates the
+  // following Content Security Policy directive". Reaching for the in-page
+  // copy first fixes that lane without relaxing anyone's CSP, and makes the
+  // worker run literally the same code the member's browser runs.
+  const reuse = await page.evaluate(async () => {
+    const w = window;
+    if (!w.domToSvg) {
+      try {
+        w.domToSvg = await import('dom-to-svg');
+      } catch {
+        /* no importmap on this page — the injection fallback below covers it */
+      }
+    }
+    return !!w.__maudeCaptureCore && !!w.domToSvg;
+  });
+  if (!reuse) {
+    await page.addScriptTag({ path: bundlePath });
+    await page.addScriptTag({ path: corePath, type: 'module' });
+  }
+  await page.waitForFunction(() => !!window.__maudeCaptureCore && !!window.domToSvg, {
+    timeout: timeoutMs,
+  });
 
   const written = [];
 
@@ -82,155 +119,28 @@ try {
   // 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;
-    });
+    const saved = await handle.evaluate((el) => window.__maudeCaptureCore.pinArtboard(el));
     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);
+      await handle.evaluate(
+        (el, prev) => window.__maudeCaptureCore.restoreArtboard(el, prev),
+        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 /
-  // documentToSVG — there is NO `formatXML` pretty-printer; serialize straight
-  // to a string. dom-to-svg also does NOT paint the captured root's background
-  // fill, so the artboard's background was dropped (item 4) — we prepend a
-  // backdrop <rect> from the artboard's effective (visible) background color.
+  // The ENTIRE capture logic (backdrop rect from the effective background,
+  // oklch→sRGB normalization for vector editors, inlineResources) lives in the
+  // shared capture spine (exporters/capture-core.ts) injected above — the same
+  // code the canvas runtime's export-capture bridge runs in the member's
+  // browser (DDR-231). Nothing capture-shaped may be inlined here again.
   const serializeOne = async (handle, widenToArtboard) => {
     return await handle.evaluate(
-      async (el, opts) => {
-        const target = opts.widenToArtboard ? (el.closest('[data-dc-screen]') ?? el) : el;
-        // window.domToSvg is the IIFE-injected entry.
-        const { elementToSVG, inlineResources } = /** @type any */ (window).domToSvg;
-
-        // 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
-        // (`oklch`, `color()`) and silently drop the fill — the artboard then
-        // shows as transparent (the exact symptom: bg vanished in Affinity).
-        // A 1×1 canvas normalizes any CSS color string to sRGB bytes. Returns
-        // null if the value can't be painted (keep the rect off rather than
-        // emit a wrong colour).
-        const _srgbCache = new Map();
-        const _srgbCanvas = document.createElement('canvas');
-        _srgbCanvas.width = 1;
-        _srgbCanvas.height = 1;
-        const _srgbCtx = _srgbCanvas.getContext('2d');
-        const toSrgb = (color) => {
-          if (_srgbCache.has(color)) return _srgbCache.get(color);
-          let result = null;
-          try {
-            if (_srgbCtx) {
-              _srgbCtx.clearRect(0, 0, 1, 1);
-              _srgbCtx.fillStyle = '#000';
-              _srgbCtx.fillStyle = color; // ignored (stays #000) if syntax unsupported
-              _srgbCtx.fillRect(0, 0, 1, 1);
-              const [r, g, b, a] = _srgbCtx.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;
-          }
-          _srgbCache.set(color, result);
-          return result;
-        };
-
-        const isOpaque = (bg) =>
-          !!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 body. Descend first to
-        // find a near-full-bleed opaque bg, then fall back to ancestors. An
-        // intentionally transparent artboard returns null → stays transparent.
-        const effectiveBg = (node) => {
-          const abRect = node.getBoundingClientRect();
-          const abArea = Math.max(1, abRect.width * abRect.height);
-          const queue = [node];
-          let guard = 0;
-          while (queue.length && guard < 80) {
-            const e = queue.shift();
-            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;
-        };
-
-        const bg = effectiveBg(target);
-        // Normalize to sRGB so the fill survives in vector editors (item 4 /
-        // oklch follow-up). If conversion fails, skip the backdrop rather than
-        // emit an unparseable fill.
-        const fillColor = bg ? toSrgb(bg) : null;
-        const svgDoc = 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
-        // dev-server origin. Some external fetches fail silently — Affinity
-        // tolerates missing resources better than missing primitives.
-        try {
-          await inlineResources(root);
-        } catch {
-          /* best-effort */
-        }
-        let out = new XMLSerializer().serializeToString(svgDoc);
-        // dom-to-svg copies computed colours through VERBATIM, and modern
-        // Chromium serializes DS tokens as `oklch(...)` — Affinity Designer /
-        // older Illustrator / Inkscape can't parse CSS Color 4 and drop every
-        // such fill/stroke (the artboard bg + many element colours vanish).
-        // Rewrite every CSS Color 4 colour function (oklch/oklab/lch/lab/color)
-        // anywhere in the serialized SVG to its sRGB rgb()/rgba() equivalent.
-        // Each token is a standalone colour (no nested parens), so a single
-        // `\([^)]*\)` match is safe; toSrgb returns null on an unconvertible
-        // value and we keep the original rather than corrupt it.
-        out = out.replace(/(?:oklch|oklab|lch|lab|color)\([^)]*\)/gi, (m) => toSrgb(m) || m);
-        return out;
-      },
+      (el, opts) =>
+        window.__maudeCaptureCore.svgForElement(el, window.domToSvg, {
+          widenToArtboard: opts.widenToArtboard,
+        }),
       { widenToArtboard }
     );
   };
@@ -249,7 +159,11 @@ try {
       // 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`);
+      // `id` is the tenant-authored `data-dc-screen` (untrusted, DDR-054) — a
+      // `../`-laden id in `join(outDir, `${id}.svg`)` is an arbitrary-path
+      // write of attacker bytes (security review F1). The png shim already
+      // routes through this; the svg/html siblings did not.
+      const target = join(outDir, safeArtboardFilename(id, i, 'svg'));
       writeFileSync(target, svg, 'utf8');
       written.push(target);
       console.log(`MAUDE_PROGRESS {"current":${i + 1},"total":${screens.length}}`);

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

@@ -25,7 +25,7 @@
 import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path';
 
-import { assertRenderOutputSizeOk, launchChromium } from './_pw-launch.mjs';
+import { addScriptCspSafe, assertRenderOutputSizeOk, launchChromium } from './_pw-launch.mjs';
 
 const args = Object.fromEntries(
   process.argv.slice(2).reduce((acc, cur, i, all) => {
@@ -63,6 +63,24 @@ if (!url) {
 
 const timeoutMs = Number(timeout) * 1000;
 const deviceScaleFactor = Math.max(1, Math.min(4, Number(scale) || 1));
+
+// Hard self-kill — the whole shim, not just individual Playwright calls, has a
+// wall-clock ceiling. `launchChromium` has NO timeout, and on headless Linux
+// `--enable-gpu` can hang Chromium at GPU-process init before a single log line
+// — a silent wedge that ate the full 600s render budget with nothing to show.
+// This guarantees the process EXITS with a diagnostic instead of hanging, so
+// the render worker (and the export gate) fail fast and legibly. Generous
+// enough for a slow software encode; well under any job/test budget.
+const HARD_KILL_MS = Math.max(timeoutMs, 150_000);
+const hardKill = setTimeout(() => {
+  console.error(
+    `_video-playwright: HARD TIMEOUT after ${HARD_KILL_MS}ms — exiting. The render did not ` +
+      `complete (see the last stage logged above; on headless Linux this is usually the video ` +
+      `encoder or GPU init). gpu=${process.env.MAUDE_CAPTURE_GPU === '1' ? 'on' : 'off'}.`
+  );
+  process.exit(7);
+}, HARD_KILL_MS);
+hardKill.unref?.();
 // `--audio` is presence-checked (Object.fromEntries maps a bare flag to '1'), so
 // absence of the flag entirely (not passed) still defaults to audio ON — video.ts
 // always passes an explicit '0'/'1'.
@@ -74,6 +92,35 @@ const frameFormat = frameFormatArg === 'jpeg' ? 'jpeg' : 'png';
 /** Wait a real turn of the event loop + a frame so a seek settles before shot. */
 const SETTLE_MS = 16;
 
+/**
+ * Run a `page.evaluate` with a hard wall-clock cap. A `page.evaluate` awaits its
+ * in-page promise with NO Playwright timeout, so a WebCodecs encoder that never
+ * resolves (headless Linux without a working encoder) hangs the whole render
+ * indefinitely. This races the evaluate against a timer and throws a NAMED
+ * error on overrun, so the shim exits (fail-fast + diagnostic) instead of
+ * wedging the render worker until the job timeout.
+ */
+async function evalWithTimeout(page, fn, arg, ms, stage) {
+  let timer;
+  const timeout = new Promise((_, reject) => {
+    timer = setTimeout(
+      () =>
+        reject(
+          new Error(
+            `encode stage "${stage}" did not resolve within ${ms}ms — headless WebCodecs ` +
+              `likely has no working video encoder (see the "webcodecs caps" line above).`
+          )
+        ),
+      ms
+    );
+  });
+  try {
+    return await Promise.race([page.evaluate(fn, arg), timeout]);
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
 // GPU opt-in, measured not assumed (2026-08-09, M-series mac, 1920x1080):
 //
 //   config                        h264 prefer-hardware   png        jpeg q90
@@ -93,15 +140,58 @@ const SETTLE_MS = 16;
 // something to smuggle in behind a perf flag. Opt in with MAUDE_CAPTURE_GPU=1.
 const gpuArgs =
   process.env.MAUDE_CAPTURE_GPU === '1' ? ['--enable-gpu', '--ignore-gpu-blocklist'] : [];
+console.error(
+  `_video-playwright: launching chromium (gpu=${gpuArgs.length ? 'on' : 'off'}, format=${format})`
+);
 const browser = await launchChromium(gpuArgs.length ? { args: gpuArgs } : undefined);
+console.error('_video-playwright: browser launched');
 try {
   const ctx = await browser.newContext({
+    serviceWorkers: 'block',
     viewport: { width: 1440, height: 900 },
     deviceScaleFactor,
   });
   const page = await ctx.newPage();
   await page.goto(url, { waitUntil: 'load', timeout: timeoutMs });
   await page.evaluate(() => document.fonts.ready);
+  console.error('_video-playwright: page loaded');
+
+  // UNCONDITIONAL WebCodecs capability probe — logged for every video render
+  // regardless of which encode path runs, so the render worker's log always
+  // names what this headless box can actually encode. This is THE fact that
+  // differs between a mac dev machine and headless Linux/the cloud worker, and
+  // the answer decides whether video needs a different encoder entirely. Bounded
+  // so a hung isConfigSupported (seen on some headless builds) can't wedge here.
+  try {
+    const caps = await evalWithTimeout(
+      page,
+      async () => {
+        const probe = async (codec) => {
+          try {
+            if (typeof VideoEncoder?.isConfigSupported !== 'function') return 'no-webcodecs';
+            const r = await VideoEncoder.isConfigSupported({ codec, width: 320, height: 180 });
+            return r?.supported ? 'yes' : 'no';
+          } catch (e) {
+            return `err:${e?.name || 'x'}`;
+          }
+        };
+        return {
+          avc: await probe('avc1.42001f'),
+          vp9: await probe('vp09.00.10.08'),
+          vp8: await probe('vp8'),
+          av1: await probe('av01.0.04M.08'),
+        };
+      },
+      undefined,
+      15_000,
+      'isConfigSupported probe'
+    );
+    console.error(
+      `_video-playwright: webcodecs caps avc=${caps.avc} vp9=${caps.vp9} vp8=${caps.vp8} av1=${caps.av1}`
+    );
+  } catch (e) {
+    console.error(`_video-playwright: cap probe failed: ${e instanceof Error ? e.message : e}`);
+  }
 
   // Resolve the target artboard handle. Priority: explicit --selector (from the
   // export scope Target) → --artboard id → first artboard. `--widen` climbs to
@@ -166,7 +256,7 @@ try {
     try {
       const t0 = Date.now();
       const libSrc = readFileSync(renderLib, 'utf8');
-      await page.addScriptTag({ content: libSrc, type: 'module' });
+      await addScriptCspSafe(page, { content: libSrc, type: 'module', name: 'render-lib' });
       await page.waitForFunction(() => typeof window.__maudeRenderVideo__ === 'function', {
         timeout: timeoutMs,
       });
@@ -175,7 +265,14 @@ try {
       const frameRange =
         Number.isFinite(explicitFrames) && explicitFrames > 0 ? [0, explicitFrames - 1] : null;
 
-      const rendered = await page.evaluate(
+      // Bound the whole-comp render: @remotion/web-renderer drives WebCodecs,
+      // which on headless Linux without a working encoder never resolves — a
+      // hang, not a throw, so the graceful frame-step fallback below never
+      // fires. A wall-clock cap turns that hang INTO a throw, which the catch
+      // converts into exactly that fallback (frame-step, muted) — the video
+      // still exports instead of wedging the render worker.
+      const rendered = await evalWithTimeout(
+        page,
         async ({ compId, container, scale, muted, frameRange, licenseKey }) => {
           return window.__maude_render_video__(compId, {
             container,
@@ -192,7 +289,9 @@ try {
           muted: !wantAudio,
           frameRange,
           licenseKey,
-        }
+        },
+        Math.min(timeoutMs, 90_000),
+        `renderMediaOnWeb(${format})`
       );
 
       writeFileSync(out, Buffer.from(rendered.b64, 'base64'));
@@ -421,9 +520,14 @@ async function frameStepCapture({
   const isGif = format === 'gif';
   if (encoding) {
     const libSrc = readFileSync(encodeLib, 'utf8');
-    await page.addScriptTag({ content: libSrc, type: 'module' });
+    await addScriptCspSafe(page, { content: libSrc, type: 'module', name: 'encode-lib' });
     await page.waitForFunction(() => typeof window.__maudeEnc === 'object', { timeout: timeoutMs });
-    const started = await page.evaluate(
+    // Bound the encoder start: on headless Linux without a working WebCodecs
+    // encoder this promise never resolves, so a wall-clock cap converts the hang
+    // into a fast, diagnostic failure instead of consuming the whole render
+    // budget in silence.
+    const started = await evalWithTimeout(
+      page,
       async ({ width, height, fps, isGif, gifColors, fmt }) => {
         if (isGif) {
           window.__maudeEnc.startGif({ width, height, fps, maxColors: gifColors });
@@ -438,7 +542,9 @@ async function frameStepCapture({
         isGif,
         gifColors: Number(args.gifColors) || 256,
         fmt: format,
-      }
+      },
+      Math.min(timeoutMs, 45_000),
+      `startVideo(${format})`
     );
     console.error(`encoder: ${started.container} / ${started.codec} @ ${outW}×${outH}`);
   }
@@ -470,12 +576,15 @@ async function frameStepCapture({
     if (encoding) {
       const tEnc = Date.now();
       const b64 = shot.toString('base64');
-      await page.evaluate(
+      await evalWithTimeout(
+        page,
         async ({ b64, isGif, format }) => {
           if (isGif) return window.__maudeEnc.addGifFrame(b64);
           return window.__maudeEnc.addVideoFrame(b64, format);
         },
-        { b64, isGif, format: shotFormat }
+        { b64, isGif, format: shotFormat },
+        30_000,
+        `addFrame#${f}`
       );
       // NB: this stage is the double CDP crossing — the screenshot bytes go out
       // to node as base64 and straight back into the same page, to an encoder
@@ -512,10 +621,13 @@ async function frameStepCapture({
     result = { ...result, degraded: true, audioDropped: true, fallbackReason };
   }
   if (encoding) {
-    const enc = await page.evaluate(
+    const enc = await evalWithTimeout(
+      page,
       async ({ isGif }) =>
         isGif ? window.__maudeEnc.finishGif() : window.__maudeEnc.finishVideo(),
-      { isGif }
+      { isGif },
+      Math.min(timeoutMs, 45_000),
+      `finish(${format})`
     );
     writeFileSync(out, Buffer.from(enc.b64, 'base64'));
     result = { ...result, out, bytes: enc.bytes, container: enc.container, codec: enc.codec };

package/apps/studio/canvas-edit.ts

@@ -4180,6 +4180,39 @@ export function readArtboardPrintProp(
   return objectExpressionToPlain(resolved);
 }
 
+/**
+ * Every print artboard's `print` prop in a canvas, keyed by artboard id.
+ *
+ * The per-id reader above is what the PDF adapter uses when it has the checkout
+ * on disk. A render worker (DDR-230) does NOT — it holds no tenant files by
+ * design — so the cell resolves these up front and ships them inside the job
+ * (`options.printProps`, exporters/jobs.ts). Until it did, a cloud print PDF
+ * silently came back with no BleedBox/TrimBox and no marks: the adapter's
+ * `readFileSync` failed against the worker's empty scratch root and the
+ * fall-through was "not a print artboard" (DDR-232 follow-up, found by the
+ * worker-lane export E2E).
+ */
+export function readAllArtboardPrintProps(
+  canvasAbsPath: string,
+  source: string
+): Record<string, Record<string, unknown>> {
+  const out: Record<string, Record<string, unknown>> = {};
+  const parsed = parseSync(canvasAbsPath, source, { sourceType: 'module' });
+  if (parsed.errors && parsed.errors.length > 0) return out;
+  for (const ab of collectJsxByTag(parsed.program, 'DCArtboard')) {
+    const id = getStringAttr(ab.openingElement, 'id');
+    if (!id || getStringAttr(ab.openingElement, 'kind') !== 'print') continue;
+    const attr = findAttribute(ab.openingElement, 'print');
+    if (attr?.value?.type !== 'JSXExpressionContainer') continue;
+    const expr = attr.value.expression as AnyNode | undefined;
+    if (!expr) continue;
+    const resolved = resolveValueNode(parsed.program, expr);
+    if (resolved?.type !== 'ObjectExpression') continue;
+    out[id] = objectExpressionToPlain(resolved);
+  }
+  return out;
+}
+
 /**
  * Delete the `<DCArtboard id="…">` whose `id` prop equals `artboardId` — the
  * artboard counterpart of applyDeleteElement (an artboard is addressed by its id