@1agh/maude 1.0.6 → 1.0.8

package/apps/studio/test/export-browser-lane.test.ts

@@ -0,0 +1,126 @@
+// export-browser-lane.test.ts — DDR-231 lane-resolution matrix for the client
+// half of the hybrid export lanes (client/export-lane.js). Fail-first: red
+// before the browser lane existed (the module didn't).
+
+import { describe, expect, test } from 'bun:test';
+
+import {
+  BROWSER_CAPTURE_FORMATS,
+  browserCaptureEligible,
+  captureScale,
+  MAX_CAPTURE_ITEMS,
+  sanitizeCapturedItems,
+} from '../client/export-lane.js';
+
+const PNG_1PX = Uint8Array.from(
+  atob(
+    'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=='
+  ),
+  (c) => c.charCodeAt(0)
+);
+const pngBlob = () => new Blob([PNG_1PX], { type: 'image/png' });
+
+describe('browserCaptureEligible — who captures where', () => {
+  const base = { format: 'png', scope: 'artboard', artboardId: 'board-1' };
+
+  test('desktop/local NEVER routes through the browser bridge (playwright spine owns it)', () => {
+    expect(browserCaptureEligible({ ...base, exportLane: 'local' })).toBe(false);
+    expect(browserCaptureEligible({ ...base, exportLane: undefined })).toBe(false);
+  });
+
+  test('a workspace WITH a render service still prefers the browser for png/svg artboard', () => {
+    expect(browserCaptureEligible({ ...base, exportLane: 'remote' })).toBe(true);
+    expect(browserCaptureEligible({ ...base, exportLane: 'remote', format: 'svg' })).toBe(true);
+  });
+
+  test('a workspace WITHOUT a render service gets png/svg artboard too (the DDR-231 win)', () => {
+    expect(browserCaptureEligible({ ...base, exportLane: 'none' })).toBe(true);
+  });
+
+  test('video formats stay on the jobs lane (Canva/Kapwing pattern — full-CSS fidelity)', () => {
+    for (const format of ['mp4', 'webm', 'gif', 'pdf', 'html', 'zip', 'canva']) {
+      expect(browserCaptureEligible({ ...base, exportLane: 'remote', format })).toBe(false);
+    }
+  });
+
+  test('the pptx deck rides the browser lane on its (only) canvas-as-separate scope', () => {
+    const deck = { format: 'pptx', scope: 'canvas-as-separate' };
+    expect(browserCaptureEligible({ ...deck, exportLane: 'remote' })).toBe(true);
+    expect(browserCaptureEligible({ ...deck, exportLane: 'none' })).toBe(true);
+    expect(browserCaptureEligible({ ...deck, exportLane: 'local' })).toBe(false);
+    expect(
+      browserCaptureEligible({ format: 'pptx', scope: 'artboard', exportLane: 'remote' })
+    ).toBe(false);
+  });
+
+  test('non-artboard scopes stay on the jobs lane (v1: capture what you are looking at)', () => {
+    for (const scope of ['selection', 'canvas-as-separate', 'project-raw']) {
+      expect(browserCaptureEligible({ ...base, exportLane: 'remote', scope })).toBe(false);
+    }
+  });
+
+  test('no known artboard → no browser capture (the bridge selects by id)', () => {
+    expect(browserCaptureEligible({ ...base, exportLane: 'remote', artboardId: null })).toBe(false);
+  });
+
+  test('the format set matches what canvas-lib can actually produce', () => {
+    expect([...BROWSER_CAPTURE_FORMATS].sort()).toEqual(['png', 'svg']);
+  });
+});
+
+describe('sanitizeCapturedItems — the untrusted-reply neutralizer (F1)', () => {
+  test('a forged non-PNG blob named .png is REJECTED by magic sniffing', async () => {
+    const evil = [
+      { name: 'invoice.png', blob: new Blob(['<script>alert(1)</script>'], { type: 'image/png' }) },
+    ];
+    await expect(sanitizeCapturedItems(evil, 'png')).rejects.toThrow(/not a valid png/);
+  });
+
+  test('a real PNG passes and gets a path-stripped name + forced MIME', async () => {
+    const [safe] = await sanitizeCapturedItems(
+      [{ name: '../../etc/passwd\r\n.png', blob: pngBlob() }],
+      'png'
+    );
+    expect(safe.name).not.toContain('/');
+    expect(safe.name).not.toContain('..');
+    expect(safe.name.endsWith('.png')).toBe(true);
+    expect(safe.blob.type).toBe('image/png');
+  });
+
+  test('svg magic (<svg / <?xml) is accepted; other bytes rejected', async () => {
+    const [ok] = await sanitizeCapturedItems(
+      [{ name: 'b.svg', blob: new Blob(['<svg/>']) }],
+      'svg'
+    );
+    expect(ok.name).toBe('b.svg');
+    expect(ok.blob.type).toBe('image/svg+xml');
+    await expect(
+      sanitizeCapturedItems([{ name: 'x.svg', blob: new Blob(['not svg']) }], 'svg')
+    ).rejects.toThrow(/not a valid svg/);
+  });
+
+  test('too many items is refused (a forged reply cannot drive N downloads)', async () => {
+    const many = Array.from({ length: MAX_CAPTURE_ITEMS + 1 }, () => ({ blob: pngBlob() }));
+    await expect(sanitizeCapturedItems(many, 'png')).rejects.toThrow(/too many items/);
+  });
+
+  test('a non-blob item is refused', async () => {
+    await expect(
+      sanitizeCapturedItems([{ name: 'x.png', blob: 'not a blob' as unknown as Blob }], 'png')
+    ).rejects.toThrow(/not a blob/);
+  });
+});
+
+describe('captureScale — dpi folds over scale, clamped to the raster guard window', () => {
+  test('scale multiplier passes through', () => {
+    expect(captureScale({ scale: 2 })).toBe(2);
+  });
+  test('dpi wins over scale (mirrors exporters/png.ts resolveDeviceScale)', () => {
+    expect(captureScale({ dpi: 300, scale: 2 })).toBe(300 / 96);
+  });
+  test('clamped to [1, 8]', () => {
+    expect(captureScale({ dpi: 1200 })).toBe(8);
+    expect(captureScale({ scale: 0 })).toBe(1);
+    expect(captureScale()).toBe(1);
+  });
+});

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

@@ -0,0 +1,146 @@
+// export-capture-fidelity.test.ts — DDR-231 T6: the fidelity gate for the
+// browser export lane.
+//
+// The browser lane rasterizes dom-to-svg output (capture-core.ts); the
+// reference spine screenshots the live element (the playwright path the
+// desktop + render worker use). dom-to-svg RECONSTRUCTS the DOM as SVG
+// primitives, so the two are not byte-identical — this gate pins how far
+// apart they may drift on a representative artboard (tokens-styled text,
+// gradient, border-radius, shadow, nested layout). A capture regression
+// (dropped background, missing text, wrong geometry) blows well past these
+// thresholds; anti-aliasing and shadow-softness differences do not.
+//
+// Runs a real Chromium (repo playwright) — lives in the studio suite, not the
+// sync lane.
+
+import { describe, expect, test } from 'bun:test';
+
+import { getBrowserBundle, getCaptureCoreBundle } from '../exporters/_browser-bundles.ts';
+
+const FIXTURE = `<!doctype html><html><body style="margin:0;background:#222">
+  <div class="dc-world">
+    <div data-dc-screen="board-1" style="position:absolute;left:0;top:0;width:420px;height:300px;
+         background:linear-gradient(135deg,#1c2340,#3a1f47);border-radius:16px;overflow:hidden;
+         font-family:Arial,Helvetica,sans-serif;color:#f5f2ea">
+      <div style="padding:28px">
+        <div style="font-size:24px;font-weight:700;letter-spacing:-0.4px">Summer Camp</div>
+        <div style="font-size:13px;opacity:.75;margin-top:6px">Brno · 12–16 August</div>
+        <div style="display:flex;gap:10px;margin-top:18px">
+          <div style="flex:1;height:64px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:10px"></div>
+          <div style="flex:1;height:64px;background:#e4572e;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.4)"></div>
+        </div>
+        <div style="margin-top:16px;font-size:12px;line-height:1.5;opacity:.85">
+          Registrace do konce července. Kapacita 60 hráčů.
+        </div>
+      </div>
+    </div>
+  </div></body></html>`;
+
+describe('browser-lane capture vs playwright reference', () => {
+  test(
+    'raster stays within the drift thresholds on a representative artboard',
+    async () => {
+      const [iife, core] = await Promise.all([
+        getBrowserBundle('dom-to-svg', 'domToSvg'),
+        getCaptureCoreBundle(),
+      ]);
+      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();
+        await page.setContent(FIXTURE);
+        await page.evaluate(() => document.fonts.ready);
+        await page.addScriptTag({ path: iife });
+        await page.addScriptTag({ path: core, type: 'module' });
+        await page.waitForFunction(
+          () => !!(window as never as Record<string, unknown>)['__maudeCaptureCore']
+        );
+
+        // Reference: the playwright spine's capture of the same element.
+        const el = page.locator('[data-dc-screen]');
+        const refBytes: Uint8Array = await el.screenshot();
+        const refB64 = Buffer.from(refBytes).toString('base64');
+
+        const verdict = await page.evaluate(async (refDataUri: string) => {
+          // 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 = await core.svgForElement(target, w.domToSvg);
+          const blob: Blob = await core.rasterizeSvg(svg, 1);
+
+          const load = (src: string) =>
+            new Promise<HTMLImageElement>((resolve, reject) => {
+              const img = new Image();
+              img.onload = () => resolve(img);
+              img.onerror = () => reject(new Error('decode failed'));
+              img.src = src;
+            });
+          const candUrl = URL.createObjectURL(blob);
+          const [ref, cand] = await Promise.all([load(refDataUri), load(candUrl)]);
+          const W = ref.naturalWidth;
+          const H = ref.naturalHeight;
+          const draw = (img: HTMLImageElement) => {
+            const c = document.createElement('canvas');
+            c.width = W;
+            c.height = H;
+            const g = c.getContext('2d') as CanvasRenderingContext2D;
+            g.drawImage(img, 0, 0, W, H);
+            return g.getImageData(0, 0, W, H).data;
+          };
+          const a = draw(ref);
+          const b = draw(cand);
+          let sum = 0;
+          let close = 0;
+          const n = W * H;
+          for (let i = 0; i < n * 4; i += 4) {
+            const d =
+              (Math.abs(a[i] - b[i]) +
+                Math.abs(a[i + 1] - b[i + 1]) +
+                Math.abs(a[i + 2] - b[i + 2])) /
+              3;
+            sum += d;
+            if (d <= 32) close += 1;
+          }
+          URL.revokeObjectURL(candUrl);
+          return {
+            refW: W,
+            refH: H,
+            candW: cand.naturalWidth,
+            candH: cand.naturalHeight,
+            meanDelta: sum / n,
+            closeRatio: close / n,
+          };
+        }, `data:image/png;base64,${refB64}`);
+
+        // Geometry must agree exactly — a size mismatch is a broken capture,
+        // not drift.
+        expect(verdict.candW).toBe(verdict.refW);
+        expect(verdict.candH).toBe(verdict.refH);
+        // Thresholds set from the MEASURED baseline (fail-first evidence,
+        // 2026-08-23): healthy capture = meanDelta 1.48, closeRatio 1.0;
+        // a simulated dropped-text regression = meanDelta 5.37, closeRatio
+        // 0.974. Both captures render in the SAME engine, so platform font
+        // variance cancels — the residual is dom-to-svg reconstruction only.
+        // meanDelta < 4 / closeRatio > 0.99 keeps ~2.7× headroom over healthy
+        // while catching the text-drop class (mean-only thresholds missed it —
+        // text is a small pixel fraction, hence the paired closeRatio gate).
+        expect(verdict.meanDelta).toBeLessThan(4);
+        expect(verdict.closeRatio).toBeGreaterThan(0.99);
+      } finally {
+        await browser.close();
+      }
+    },
+    { timeout: 60_000 }
+  );
+});