@1agh/maude 1.0.11 → 1.2.0

package/apps/studio/test/export-capture-hygiene.test.ts

@@ -1,675 +0,0 @@
-// export-capture-hygiene.test.ts — DDR-231 Phase 2 T2/T3.
-//
-// The Phase-1 fidelity gate (export-capture-fidelity.test.ts) compares the
-// browser lane against the playwright reference IN THE SAME ENGINE on a
-// fixture that has neither editor chrome nor a network-loaded asset. Both
-// defects the first live cloud export hit therefore passed it clean:
-//
-//   1. CHROME LEAK — the browser lane captures the LIVE canvas DOM, where the
-//      artboard's own `.dc-artboard-label` header (an editor affordance, a
-//      child of `[data-dc-screen]`) is visible. The desktop lane never sees it
-//      because its shell is loaded with `?hide-chrome=1`, which flips
-//      `_shell.html`'s `#canvas-hide-chrome` block to `media="all"`. Evidence:
-//      the exported `post-lokace.svg` carried
-//      `<g class="dc-artboard-label" aria-label="Artboard Lokace týdne …">`.
-//   2. ASSETS NOT EMBEDDED — every `<image>` kept a remote `http(s)` href and
-//      the artifact had zero `data:` URIs, so the SVG renders with broken
-//      images outside the serving origin, and the PNG rasterization (an
-//      SVG-as-image loads NO external resources) drops them entirely.
-//   3. NO LOAD WAIT — the capture serializes immediately, so an artboard whose
-//      images are still decoding captures without them.
-//
-// This file pins all three against a real Chromium with a real HTTP origin,
-// which is what makes #2 reproducible at all (a `file:`/`setContent` fixture
-// has no network asset to fail on).
-
-import { describe, expect, test } from 'bun:test';
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-
-import { getBrowserBundle, getCaptureCoreBundle } from '../exporters/_browser-bundles.ts';
-
-/** A real (tiny, latin-subset, OFL) woff2 — the test is about the `@font-face`
- * `src` becoming a `data:` URI, not about glyph coverage. */
-const WOFF2 = readFileSync(join(import.meta.dir, 'fixtures', 'tiny-subset.woff2'));
-
-/** 1×1 red PNG — small enough to inline in the fixture host verbatim. */
-const PNG_1PX = Buffer.from(
-  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==',
-  'base64'
-);
-
-const SVG_ASSET = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" fill="#0a0"/></svg>`;
-
-/**
- * A canvas-shaped fixture: the world plane, one artboard, the artboard's own
- * `.dc-artboard-label` header (exactly where canvas-lib puts it — a child of
- * the `[data-dc-screen]` article), a shell-level overlay, and two network
- * assets (a raster `<img>` and an SVG `<img>`).
- */
-function fixtureHtml(origin: string): string {
-  return `<!doctype html><html><head><meta charset="utf-8"></head>
-<body style="margin:0;background:#222">
-  <div class="dc-world">
-    <article class="dc-artboard" data-dc-screen="board-1"
-      style="position:absolute;left:0;top:0;width:360px;height:240px;background:#12203a;
-             font-family:Arial,Helvetica,sans-serif;color:#f5f2ea">
-      <header class="dc-artboard-label sku">Artboard Lokace týdne · IG Post · 1:1</header>
-      <div class="dc-artboard-body" style="padding:16px">
-        <div style="font-size:18px;font-weight:700">Summer Camp</div>
-        <img id="photo" src="${origin}/photo.png" width="120" height="80" alt="photo" />
-        <img id="logo" src="${origin}/logo.svg" width="40" height="40" alt="logo" />
-      </div>
-    </article>
-    <div class="dc-mm" style="position:absolute;left:10px;top:10px;width:60px;height:40px;background:#f0f">minimap</div>
-    <div class="dc-participants" style="position:absolute;right:4px;top:4px">MD</div>
-  </div>
-</body></html>`;
-}
-
-/** Serve the fixture + its assets from a real origin so `<img>` is a real fetch. */
-function startFixtureHost(): { origin: string; stop: () => void } {
-  const server = Bun.serve({
-    port: 0,
-    fetch(req) {
-      const { pathname } = new URL(req.url);
-      if (pathname === '/photo.png') {
-        return new Response(PNG_1PX, { headers: { 'content-type': 'image/png' } });
-      }
-      if (pathname === '/logo.svg') {
-        return new Response(SVG_ASSET, { headers: { 'content-type': 'image/svg+xml' } });
-      }
-      const origin = `http://127.0.0.1:${server.port}`;
-      return new Response(fixtureHtml(origin), { headers: { 'content-type': 'text/html' } });
-    },
-  });
-  return { origin: `http://127.0.0.1:${server.port}`, stop: () => server.stop(true) };
-}
-
-describe('browser-lane capture hygiene (chrome + assets)', () => {
-  test(
-    'a captured artboard carries no editor chrome and no remote resource refs',
-    async () => {
-      const [iife, core] = await Promise.all([
-        getBrowserBundle('dom-to-svg', 'domToSvg'),
-        getCaptureCoreBundle(),
-      ]);
-      const host = startFixtureHost();
-      const { launchChromium } = (await import('../bin/_pw-launch.mjs')) as {
-        launchChromium: () => Promise<{
-          newContext: (o: unknown) => Promise<{ newPage: () => Promise<unknown> }>;
-          close: () => Promise<void>;
-        }>;
-      };
-      const browser = await launchChromium();
-      try {
-        const ctx = await browser.newContext({
-          viewport: { width: 800, height: 600 },
-          deviceScaleFactor: 1,
-        });
-        // biome-ignore lint/suspicious/noExplicitAny: playwright page surface
-        const page: any = await ctx.newPage();
-        const consoleErrors: string[] = [];
-        page.on('console', (m: { type: () => string; text: () => string }) => {
-          if (m.type() === 'error') consoleErrors.push(m.text());
-        });
-        await page.goto(host.origin, { waitUntil: 'domcontentloaded' });
-        await page.addScriptTag({ path: iife });
-        await page.addScriptTag({ path: core, type: 'module' });
-        await page.waitForFunction(
-          () => !!(window as never as Record<string, unknown>)['__maudeCaptureCore']
-        );
-
-        const { svg, chromeDrawables } = await page.evaluate(async () => {
-          // biome-ignore lint/suspicious/noExplicitAny: injected globals
-          const w = window as any;
-          const core = w.__maudeCaptureCore;
-          const target = document.querySelector('[data-dc-screen]') as Element;
-          const out: string = await core.svgForElement(target, w.domToSvg);
-          // dom-to-svg still emits an (empty) <g> for a display:none element,
-          // carrying its class — inert, and the playwright reference lane
-          // produces the same. What must be absent is anything that PAINTS, so
-          // assert on drawable descendants rather than on the class string.
-          const doc = new DOMParser().parseFromString(out, 'image/svg+xml');
-          const drawable = 'text,image,rect,path,circle,ellipse,line,polygon,polyline,use';
-          let painted = 0;
-          for (const sel of core.CAPTURE_HIDDEN_SELECTORS as string[]) {
-            // Class/attribute selectors survive serialization; ids are rewritten.
-            if (sel.startsWith('#')) continue;
-            for (const node of doc.querySelectorAll(sel)) {
-              painted += node.querySelectorAll(drawable).length;
-            }
-          }
-          return { svg: out, chromeDrawables: painted };
-        });
-
-        // (1) chrome — the artboard's own label header, and any overlay from
-        // `_shell.html`'s `#canvas-hide-chrome` list, must contribute nothing
-        // that renders. The label's text is the exact leak the live cloud
-        // export shipped.
-        expect(chromeDrawables).toBe(0);
-        // …and the nodes are gone outright, so the label text does not even
-        // survive as `aria-label` metadata in the delivered file.
-        expect(svg).not.toContain('dc-artboard-label');
-        expect(svg).not.toContain('Lokace týdne');
-        expect(svg).not.toContain('minimap');
-
-        // (2) assets — every resource ref must be embedded. A remote
-        // `http(s)://` href in the output is the live defect: an SVG-as-image
-        // loads no external resources, so the raster silently drops it.
-        const remoteRefs = svg.match(/(?:xlink:)?href="https?:\/\/[^"]+"/g) ?? [];
-        expect(remoteRefs).toEqual([]);
-        expect(svg).toContain('data:image/png');
-
-        // The capture must not have papered over a failure by logging it.
-        expect(consoleErrors.filter((t) => /inlin|resource/i.test(t))).toEqual([]);
-      } finally {
-        await browser.close();
-        host.stop();
-      }
-    },
-    { timeout: 60_000 }
-  );
-
-  test(
-    'the capture waits for images that have not decoded yet',
-    async () => {
-      const [iife, core] = await Promise.all([
-        getBrowserBundle('dom-to-svg', 'domToSvg'),
-        getCaptureCoreBundle(),
-      ]);
-      // A host that stalls the photo response — the capture must still come
-      // back with the image embedded, not race past it.
-      const server = Bun.serve({
-        port: 0,
-        async fetch(req) {
-          const { pathname } = new URL(req.url);
-          if (pathname === '/photo.png') {
-            await Bun.sleep(600);
-            return new Response(PNG_1PX, { headers: { 'content-type': 'image/png' } });
-          }
-          if (pathname === '/logo.svg') {
-            return new Response(SVG_ASSET, { headers: { 'content-type': 'image/svg+xml' } });
-          }
-          return new Response(fixtureHtml(`http://127.0.0.1:${server.port}`), {
-            headers: { 'content-type': 'text/html' },
-          });
-        },
-      });
-      const { launchChromium } = (await import('../bin/_pw-launch.mjs')) as {
-        launchChromium: () => Promise<{
-          newContext: (o: unknown) => Promise<{ newPage: () => Promise<unknown> }>;
-          close: () => Promise<void>;
-        }>;
-      };
-      const browser = await launchChromium();
-      try {
-        const ctx = await browser.newContext({ viewport: { width: 800, height: 600 } });
-        // biome-ignore lint/suspicious/noExplicitAny: playwright page surface
-        const page: any = await ctx.newPage();
-        // `domcontentloaded`, deliberately: the slow <img> is still in flight,
-        // which is exactly the live-canvas state the browser lane captures in.
-        await page.goto(`http://127.0.0.1:${server.port}`, { waitUntil: 'domcontentloaded' });
-        await page.addScriptTag({ path: iife });
-        await page.addScriptTag({ path: core, type: 'module' });
-        await page.waitForFunction(
-          () => !!(window as never as Record<string, unknown>)['__maudeCaptureCore']
-        );
-        const svg: string = await page.evaluate(async () => {
-          // biome-ignore lint/suspicious/noExplicitAny: injected globals
-          const w = window as any;
-          const target = document.querySelector('[data-dc-screen]') as Element;
-          return await w.__maudeCaptureCore.svgForElement(target, w.domToSvg);
-        });
-        expect(svg).toContain('data:image/png');
-      } finally {
-        await browser.close();
-        server.stop(true);
-      }
-    },
-    { timeout: 60_000 }
-  );
-});
-
-describe('browser-lane capture hygiene (webfonts)', () => {
-  test(
-    '@font-face sources are embedded — from a <link> stylesheet AND an inline <style>',
-    async () => {
-      // Fonts are the classic silent fidelity killer (DDR-231 SHIPPER's top
-      // risk): an SVG whose @font-face still points at the serving origin
-      // renders in a fallback face everywhere but the live page, and nothing
-      // errors. Two declaration shapes, because dom-to-svg only copies the
-      // first on its own (it needs a stylesheet href to absolutize `src`) —
-      // the second is what capture-core's appendInlineFontFaces carries over.
-      const [iife, core] = await Promise.all([
-        getBrowserBundle('dom-to-svg', 'domToSvg'),
-        getCaptureCoreBundle(),
-      ]);
-      const server = Bun.serve({
-        port: 0,
-        fetch(req) {
-          const { pathname } = new URL(req.url);
-          if (pathname === '/f.woff2')
-            return new Response(WOFF2, { headers: { 'content-type': 'font/woff2' } });
-          if (pathname === '/linked.css')
-            return new Response(
-              '@font-face{font-family:"LinkedFace";src:url(/f.woff2) format("woff2")}',
-              { headers: { 'content-type': 'text/css' } }
-            );
-          return new Response(
-            `<!doctype html><html><head><link rel="stylesheet" href="/linked.css">
-             <style>@font-face{font-family:"InlineFace";src:url("/f.woff2") format("woff2")}</style>
-             </head><body style="margin:0"><div class="dc-world">
-             <article data-dc-screen="b1" style="position:absolute;left:0;top:0;width:320px;height:120px;background:#123;color:#fff">
-               <p style="font-family:LinkedFace,serif">Linked</p>
-               <p style="font-family:InlineFace,serif">Inline</p>
-             </article></div></body></html>`,
-            { headers: { 'content-type': 'text/html' } }
-          );
-        },
-      });
-      const { launchChromium } = (await import('../bin/_pw-launch.mjs')) as {
-        launchChromium: () => Promise<{
-          newContext: (o: unknown) => Promise<{ newPage: () => Promise<unknown> }>;
-          close: () => Promise<void>;
-        }>;
-      };
-      const browser = await launchChromium();
-      try {
-        const ctx = await browser.newContext({});
-        // biome-ignore lint/suspicious/noExplicitAny: playwright page surface
-        const page: any = await ctx.newPage();
-        await page.goto(`http://127.0.0.1:${server.port}`, { waitUntil: 'load' });
-        await page.addScriptTag({ path: iife });
-        await page.addScriptTag({ path: core, type: 'module' });
-        await page.waitForFunction(
-          () => !!(window as never as Record<string, unknown>).__maudeCaptureCore
-        );
-        const svg: string = await page.evaluate(async () => {
-          // biome-ignore lint/suspicious/noExplicitAny: injected globals
-          const w = window as any;
-          const target = document.querySelector('[data-dc-screen]') as Element;
-          return await w.__maudeCaptureCore.svgForElement(target, w.domToSvg);
-        });
-        const faces = svg.match(/@font-face[^}]*}/g) ?? [];
-        const families = faces.map((f) => /font-family:\s*"?([^;"]+)"?/.exec(f)?.[1]?.trim());
-        expect(families.sort()).toEqual(['InlineFace', 'LinkedFace']);
-        for (const face of faces) expect(face).toContain('data:font/woff2;base64,');
-        // No font source may still point at the serving origin.
-        expect(svg.match(/url\(["']?https?:[^)]*\)/g) ?? []).toEqual([]);
-      } finally {
-        await browser.close();
-        server.stop(true);
-      }
-    },
-    { timeout: 60_000 }
-  );
-});
-
-describe('browser-lane capture hygiene (CSS filter on images)', () => {
-  test(
-    'an <img> with a CSS filter is embedded with the filter BAKED IN',
-    async () => {
-      // The alligators "Duo" treatment: `filter: url(#poster5) contrast(…)`
-      // against an SVG filter mounted elsewhere in the page. dom-to-svg puts no
-      // `filter` on its <image>, so the original bytes rendered flat — the cloud
-      // PNG/SVG/PPTX lost the photo treatment the desktop screenshot kept.
-      const [iife, core] = await Promise.all([
-        getBrowserBundle('dom-to-svg', 'domToSvg'),
-        getCaptureCoreBundle(),
-      ]);
-      const server = Bun.serve({
-        port: 0,
-        fetch(req) {
-          const { pathname } = new URL(req.url);
-          if (pathname === '/photo.png')
-            return new Response(PNG_1PX, { headers: { 'content-type': 'image/png' } });
-          return new Response(
-            `<!doctype html><body style="margin:0">
-             <svg width="0" height="0" style="position:absolute"><filter id="poster5" color-interpolation-filters="sRGB"><feColorMatrix type="saturate" values="0"/></filter></svg>
-             <div class="dc-world"><article data-dc-screen="b1" style="position:absolute;left:0;top:0;width:200px;height:120px;background:#123">
-               <img id="p" src="/photo.png" width="120" height="60" style="filter:url(#poster5) contrast(1.22);object-fit:cover">
-             </article></div></body>`,
-            { headers: { 'content-type': 'text/html' } }
-          );
-        },
-      });
-      const { launchChromium } = (await import('../bin/_pw-launch.mjs')) as {
-        launchChromium: () => Promise<{
-          newContext: (o: unknown) => Promise<{ newPage: () => Promise<unknown> }>;
-          close: () => Promise<void>;
-        }>;
-      };
-      const browser = await launchChromium();
-      try {
-        const ctx = await browser.newContext({});
-        // biome-ignore lint/suspicious/noExplicitAny: playwright page surface
-        const page: any = await ctx.newPage();
-        await page.goto(`http://127.0.0.1:${server.port}`, { waitUntil: 'load' });
-        await page.addScriptTag({ path: iife });
-        await page.addScriptTag({ path: core, type: 'module' });
-        await page.waitForFunction(
-          () => !!(window as never as Record<string, unknown>).__maudeCaptureCore
-        );
-        const verdict = await page.evaluate(async () => {
-          // biome-ignore lint/suspicious/noExplicitAny: injected globals
-          const w = window as any;
-          const target = document.querySelector('[data-dc-screen]') as Element;
-          const svg: string = await w.__maudeCaptureCore.svgForElement(target, w.domToSvg);
-          const href = /<image[^>]*href="(data:[^"]+)"/.exec(svg)?.[1] ?? null;
-          const par = /<image[^>]*preserveAspectRatio="([^"]+)"/.exec(svg)?.[1] ?? null;
-          if (!href) return { href: null, pixel: null, par };
-          // Decode the embedded bitmap and read its first pixel: the source is
-          // pure red (#ff0000); saturate(0) turns it grey — equal channels.
-          const img = new Image();
-          await new Promise<void>((ok, ko) => {
-            img.onload = () => ok();
-            img.onerror = () => ko(new Error('decode'));
-            img.src = href;
-          });
-          const c = document.createElement('canvas');
-          c.width = 1;
-          c.height = 1;
-          const g = c.getContext('2d') as CanvasRenderingContext2D;
-          g.drawImage(img, 0, 0);
-          return {
-            href: href.slice(0, 22),
-            pixel: Array.from(g.getImageData(0, 0, 1, 1).data),
-            par,
-          };
-        });
-        expect(verdict.href).toBe('data:image/png;base64,');
-        // `object-fit: cover` → SVG `slice`, or the photo letterboxes (the
-        // green side bands on every exported hero).
-        expect(verdict.par).toBe('xMidYMid slice');
-        const [r, g, b] = verdict.pixel as number[];
-        // Grey = the filter was baked. Red would mean the original bytes shipped.
-        expect(Math.abs(r - g)).toBeLessThan(8);
-        expect(Math.abs(g - b)).toBeLessThan(8);
-      } finally {
-        await browser.close();
-        server.stop(true);
-      }
-    },
-    { timeout: 60_000 }
-  );
-});
-
-describe('browser-lane capture hygiene (paint dom-to-svg cannot express)', () => {
-  test(
-    'a repeating-linear-gradient clipped to a polygon survives as SVG paint',
-    async () => {
-      // The alligators "Sash": a diagonal yellow stripe band clipped to the
-      // top-right corner triangle. dom-to-svg matches `linear-gradient` only
-      // and drops `clip-path`, so the element vanished from every dom-to-svg
-      // lane while the screenshot lanes kept it. capture-core substitutes an
-      // equivalent inline <svg> (spreadMethod="repeat" + <clipPath>) for the
-      // duration of the serialization.
-      const [iife, core] = await Promise.all([
-        getBrowserBundle('dom-to-svg', 'domToSvg'),
-        getCaptureCoreBundle(),
-      ]);
-      const server = Bun.serve({
-        port: 0,
-        fetch() {
-          return new Response(
-            `<!doctype html><body style="margin:0"><div class="dc-world">
-             <article data-dc-screen="b1" style="position:absolute;left:0;top:0;width:240px;height:240px;background:#f1efe8">
-               <div aria-hidden="true" style="position:absolute;top:0;right:0;width:120px;height:120px;
-                 background:repeating-linear-gradient(-45deg,#ffcd00 0 14px,transparent 14px 28px);
-                 clip-path:polygon(100% 0,0 0,100% 100%)"></div>
-             </article></div></body>`,
-            { headers: { 'content-type': 'text/html' } }
-          );
-        },
-      });
-      const { launchChromium } = (await import('../bin/_pw-launch.mjs')) as {
-        launchChromium: () => Promise<{
-          newContext: (o: unknown) => Promise<{ newPage: () => Promise<unknown> }>;
-          close: () => Promise<void>;
-        }>;
-      };
-      const browser = await launchChromium();
-      try {
-        const ctx = await browser.newContext({});
-        // biome-ignore lint/suspicious/noExplicitAny: playwright page surface
-        const page: any = await ctx.newPage();
-        await page.goto(`http://127.0.0.1:${server.port}`, { waitUntil: 'load' });
-        await page.addScriptTag({ path: iife });
-        await page.addScriptTag({ path: core, type: 'module' });
-        await page.waitForFunction(
-          () => !!(window as never as Record<string, unknown>).__maudeCaptureCore
-        );
-        const verdict = await page.evaluate(async () => {
-          // biome-ignore lint/suspicious/noExplicitAny: injected globals
-          const w = window as any;
-          const core = w.__maudeCaptureCore;
-          const target = document.querySelector('[data-dc-screen]') as Element;
-          const svg: string = await core.svgForElement(target, w.domToSvg);
-          // The live element must be back to its CSS paint afterwards.
-          const sash = target.querySelector('div[aria-hidden]') as HTMLElement;
-          const restored =
-            getComputedStyle(sash).backgroundImage.startsWith('repeating-linear-gradient(') &&
-            !sash.querySelector('svg');
-          const blob: Blob = await core.rasterizeSvg(svg, 1);
-          const img = new Image();
-          const url = URL.createObjectURL(blob);
-          await new Promise<void>((ok, ko) => {
-            img.onload = () => ok();
-            img.onerror = () => ko(new Error('decode'));
-            img.src = url;
-          });
-          const c = document.createElement('canvas');
-          c.width = 240;
-          c.height = 240;
-          const g = c.getContext('2d') as CanvasRenderingContext2D;
-          g.drawImage(img, 0, 0);
-          // Sample a diagonal run across the top-right triangle: with stripes
-          // present, SOME of those pixels are yellow; none are if the band
-          // vanished. And the bottom-left corner (outside the clip) stays bg.
-          let yellow = 0;
-          for (let i = 0; i < 40; i += 1) {
-            const [r, gg, b] = g.getImageData(235 - i, 5 + i, 1, 1).data;
-            if (r > 230 && gg > 180 && gg < 225 && b < 60) yellow += 1;
-          }
-          const [br, bg, bb] = g.getImageData(20, 220, 1, 1).data;
-          return {
-            hasRepeat: svg.includes('spreadMethod="repeat"'),
-            hasClip: svg.includes('<clipPath'),
-            yellow,
-            corner: [br, bg, bb],
-            restored,
-          };
-        });
-        expect(verdict.hasRepeat).toBe(true);
-        expect(verdict.hasClip).toBe(true);
-        expect(verdict.yellow).toBeGreaterThan(5);
-        expect(verdict.corner).toEqual([241, 239, 232]);
-        expect(verdict.restored).toBe(true);
-      } finally {
-        await browser.close();
-        server.stop(true);
-      }
-    },
-    { timeout: 60_000 }
-  );
-});
-
-describe('HTML export is inert (security review F1)', () => {
-  test(
-    'a canvas with <script>/onerror/javascript:/foreignObject exports as non-executable HTML',
-    async () => {
-      // The self-contained HTML file is opened LOCALLY by a member (file://
-      // origin). A tenant-authored canvas (untrusted, DDR-054) must not smuggle
-      // executable markup into it. Drive the real _html-playwright shim over a
-      // canvas-shaped page carrying every script sink, and assert the produced
-      // document is neutralized (no <script>, no on* handler, no javascript:,
-      // no <foreignObject>) AND carries a script-src 'none' CSP meta.
-      const server = Bun.serve({
-        port: 0,
-        fetch() {
-          return new Response(
-            `<!doctype html><html><head><title>x</title>
-             <script>window.__evil = 1</script></head>
-             <body style="margin:0"><div class="dc-world">
-               <article data-dc-screen="b1" style="position:absolute;left:0;top:0;width:200px;height:120px;background:#123">
-                 <img src="x" onerror="window.__evil=2">
-                 <a href="javascript:window.__evil=3">x</a>
-                 <svg><foreignObject><div onclick="window.__evil=4">x</div></foreignObject></svg>
-               </article>
-             </div></body></html>`,
-            { headers: { 'content-type': 'text/html' } }
-          );
-        },
-      });
-      const { spawn } = await import('bun');
-      const { mkdtempSync } = await import('node:fs');
-      const { tmpdir } = await import('node:os');
-      const { join } = await import('node:path');
-      const out = join(mkdtempSync(join(tmpdir(), 'maude-html-f1-')), 'out.html');
-      const shim = join(import.meta.dir, '..', 'bin', '_html-playwright.mjs');
-      const proc = spawn({
-        cmd: [
-          'node',
-          shim,
-          '--url',
-          `http://127.0.0.1:${server.port}`,
-          '--selector',
-          '[data-dc-screen="b1"]',
-          '--out',
-          out,
-          '--timeout',
-          '15',
-        ],
-        stdout: 'pipe',
-        stderr: 'pipe',
-      });
-      const code = await proc.exited;
-      server.stop(true);
-      expect(code).toBe(0);
-      const html = await Bun.file(out).text();
-      // Neutralized.
-      expect(html).not.toMatch(/<script[\s>]/i);
-      expect(html).not.toMatch(/\bon\w+\s*=/i);
-      expect(html).not.toMatch(/javascript:/i);
-      expect(html).not.toMatch(/<foreignobject/i);
-      // Belt: a CSP that forbids script even if a sink were missed.
-      expect(html).toMatch(/http-equiv="Content-Security-Policy"[^>]*script-src 'none'/i);
-    },
-    { timeout: 60_000 }
-  );
-});
-
-describe('security review — path traversal + remote-ref beacon', () => {
-  test(
-    'a `../`-laden data-dc-screen id cannot write outside the out-dir (F1, svg + html)',
-    async () => {
-      const { spawn } = await import('bun');
-      const { mkdtempSync, existsSync } = await import('node:fs');
-      const { tmpdir } = await import('node:os');
-      const { join } = await import('node:path');
-      // A canvas with two artboards whose ids are path-traversal payloads.
-      const server = Bun.serve({
-        port: 0,
-        fetch() {
-          return new Response(
-            `<!doctype html><body style="margin:0"><div class="dc-world">
-             <article data-dc-screen="../../ESCAPED-A" style="position:absolute;left:0;top:0;width:80px;height:60px;background:#123"></article>
-             <article data-dc-screen="../../ESCAPED-B" style="position:absolute;left:0;top:0;width:80px;height:60px;background:#345"></article>
-             </div></body>`,
-            { headers: { 'content-type': 'text/html' } }
-          );
-        },
-      });
-      const iife = await getBrowserBundle('dom-to-svg', 'domToSvg');
-      const core = await getCaptureCoreBundle();
-      try {
-        for (const [shim, ext, extraArgs] of [
-          ['_svg-playwright.mjs', 'svg', ['--bundle-path', iife, '--core-path', core]],
-          ['_html-playwright.mjs', 'html', []],
-        ] as const) {
-          const base = mkdtempSync(join(tmpdir(), 'maude-f1-'));
-          const outDir = join(base, 'out');
-          const proc = spawn({
-            cmd: [
-              'node',
-              join(import.meta.dir, '..', 'bin', shim),
-              '--url',
-              `http://127.0.0.1:${server.port}`,
-              '--selector',
-              '[data-dc-screen]',
-              '--multi',
-              '--out-dir',
-              outDir,
-              '--timeout',
-              '15',
-              ...extraArgs,
-            ],
-            stdout: 'pipe',
-            stderr: 'pipe',
-          });
-          expect(await proc.exited).toBe(0);
-          // The traversal target — `<base>/ESCAPED-A.<ext>` — must NOT exist.
-          expect(existsSync(join(base, `ESCAPED-A.${ext}`))).toBe(false);
-          expect(existsSync(join(base, `ESCAPED-B.${ext}`))).toBe(false);
-          // The sanitized files land INSIDE out-dir instead.
-          expect(existsSync(join(outDir, `artboard-1.${ext}`))).toBe(true);
-        }
-      } finally {
-        server.stop(true);
-      }
-    },
-    { timeout: 90_000 }
-  );
-
-  test('a remote background url the CSP blocks is dropped from the SVG, not left as a beacon (F5)', async () => {
-    const [iife, core] = await Promise.all([
-      getBrowserBundle('dom-to-svg', 'domToSvg'),
-      getCaptureCoreBundle(),
-    ]);
-    // The capture page pins connect-src 'self' (cspForCapture) — but here we
-    // assert the BOUNDARY: even without a CSP, a remote ref that fails to
-    // inline must be removed. Point at a black-hole host so the fetch fails.
-    const server = Bun.serve({
-      port: 0,
-      fetch() {
-        return new Response(
-          `<!doctype html><body style="margin:0"><div class="dc-world">
-           <article data-dc-screen="b1" style="position:absolute;left:0;top:0;width:200px;height:120px;background:#123">
-             <img src="http://127.0.0.1:1/beacon.png" width="40" height="40">
-           </article></div></body>`,
-          { headers: { 'content-type': 'text/html' } }
-        );
-      },
-    });
-    const { launchChromium } = (await import('../bin/_pw-launch.mjs')) as {
-      launchChromium: () => Promise<{
-        newContext: (o: unknown) => Promise<{ newPage: () => Promise<unknown> }>;
-        close: () => Promise<void>;
-      }>;
-    };
-    const browser = await launchChromium();
-    try {
-      const ctx = await browser.newContext({});
-      // biome-ignore lint/suspicious/noExplicitAny: playwright page surface
-      const page: any = await ctx.newPage();
-      await page.goto(`http://127.0.0.1:${server.port}`, { waitUntil: 'load' });
-      await page.addScriptTag({ path: iife });
-      await page.addScriptTag({ path: core, type: 'module' });
-      await page.waitForFunction(
-        () => !!(window as never as Record<string, unknown>).__maudeCaptureCore
-      );
-      const svg: string = await page.evaluate(async () => {
-        // biome-ignore lint/suspicious/noExplicitAny: injected globals
-        const w = window as any;
-        const target = document.querySelector('[data-dc-screen]') as Element;
-        return await w.__maudeCaptureCore.svgForElement(target, w.domToSvg);
-      });
-      expect(svg.match(/https?:\/\/127\.0\.0\.1:1/g) ?? []).toEqual([]);
-      expect(svg).not.toContain('beacon.png');
-    } finally {
-      await browser.close();
-      server.stop(true);
-    }
-  });
-});