@1agh/maude 0.40.0 → 0.42.0

package/apps/studio/test/equal-spacing-detector.test.ts

@@ -2,10 +2,24 @@
 
 import { describe, expect, test } from 'bun:test';
 
-import { detectEqualSpacing } from '../equal-spacing-detector.ts';
+import {
+  computeAlign,
+  computeDistribute,
+  computePairGap,
+  computeTidyGrid,
+  detectEqualSpacing,
+  type KeyedRect,
+} from '../equal-spacing-detector.ts';
 import type { Rect } from '../use-snap-guides.tsx';
 
 const r = (x: number, y: number, w = 100, h = 60): Rect => ({ x, y, w, h });
+const kr = (key: string, x: number, y: number, w = 100, h = 60): KeyedRect => ({
+  key,
+  x,
+  y,
+  w,
+  h,
+});
 
 describe('detectEqualSpacing / preconditions', () => {
   test('fewer than 3 rects → null', () => {
@@ -91,3 +105,153 @@ describe('detectEqualSpacing / 4+ rects', () => {
     expect(out).toBeNull();
   });
 });
+
+// Task L7 — Alt-hover measurement pairwise gap.
+
+describe('computePairGap', () => {
+  test('measures the x-axis gap regardless of argument order', () => {
+    const a = r(0, 0, 100, 50);
+    const b = r(150, 20, 80, 50);
+    const fwd = computePairGap(a, b, 'x');
+    const rev = computePairGap(b, a, 'x');
+    expect(fwd).toEqual({ axis: 'x', gap: 50, from: 100, cross: 35 });
+    expect(rev).toEqual(fwd);
+  });
+
+  test('measures the y-axis gap', () => {
+    const a = r(0, 0, 50, 60);
+    const b = r(10, 150, 50, 60);
+    const out = computePairGap(a, b, 'y');
+    expect(out).toEqual({ axis: 'y', gap: 90, from: 60, cross: 30 });
+  });
+
+  test('overlapping on the axis → null (no gap to show)', () => {
+    const a = r(0, 0, 100, 50);
+    const b = r(50, 0, 100, 50); // overlaps a on x
+    expect(computePairGap(a, b, 'x')).toBeNull();
+  });
+
+  test('touching (gap === 0) → null', () => {
+    const a = r(0, 0, 100, 50);
+    const b = r(100, 0, 100, 50);
+    expect(computePairGap(a, b, 'x')).toBeNull();
+  });
+});
+
+// Task L5 — distribute / align / tidy-up pure math.
+
+describe('computeAlign', () => {
+  test('fewer than 2 rects → []', () => {
+    expect(computeAlign([], 'left')).toEqual([]);
+    expect(computeAlign([kr('a', 0, 0)], 'left')).toEqual([]);
+  });
+
+  test('left/right/top/bottom hold the union-bbox edge', () => {
+    const rects = [kr('a', 0, 0, 100, 50), kr('b', 40, 100, 60, 50), kr('c', 200, 30, 100, 50)];
+    const left = computeAlign(rects, 'left');
+    // union xMin = 0 → 'a' already at x=0 is a no-op (skipped); b/c move.
+    expect(left).toEqual(
+      expect.arrayContaining([
+        { key: 'b', x: 0, y: 100 },
+        { key: 'c', x: 0, y: 30 },
+      ])
+    );
+    expect(left.find((m) => m.key === 'a')).toBeUndefined();
+
+    const right = computeAlign(rects, 'right');
+    // union xMax = 300 (c: 200+100)
+    expect(right.find((m) => m.key === 'a')).toEqual({ key: 'a', x: 200, y: 0 });
+    expect(right.find((m) => m.key === 'b')).toEqual({ key: 'b', x: 240, y: 100 });
+    expect(right.find((m) => m.key === 'c')).toBeUndefined(); // already at right edge
+
+    const top = computeAlign(rects, 'top');
+    expect(top.find((m) => m.key === 'a')).toBeUndefined(); // already yMin=0
+    expect(top.find((m) => m.key === 'b')).toEqual({ key: 'b', x: 40, y: 0 });
+    expect(top.find((m) => m.key === 'c')).toEqual({ key: 'c', x: 200, y: 0 });
+  });
+
+  test('center-x / center-y align to the union-bbox midpoint', () => {
+    const rects = [kr('a', 0, 0, 100, 100), kr('b', 300, 0, 100, 100)];
+    // union bbox x: 0..400, cx=200
+    const centerX = computeAlign(rects, 'center-x');
+    expect(centerX).toEqual(
+      expect.arrayContaining([
+        { key: 'a', x: 150, y: 0 },
+        { key: 'b', x: 150, y: 0 },
+      ])
+    );
+  });
+
+  test('no-op rects (already aligned) are omitted from the result', () => {
+    const rects = [kr('a', 0, 0), kr('b', 0, 50)];
+    expect(computeAlign(rects, 'left')).toEqual([]);
+  });
+});
+
+describe('computeDistribute', () => {
+  test('fewer than 3 rects → []', () => {
+    expect(computeDistribute([kr('a', 0, 0), kr('b', 200, 0)], 'x')).toEqual([]);
+  });
+
+  test('holds first + last, spaces the middle evenly on x', () => {
+    // 0..100, then a bunched pair at 110/130, then 300..400 — total span
+    // first.x(0) to last.x+w(400) = 400, minus side-lengths(100+80+90+100=370) = 30 → gap 10
+    const rects = [
+      kr('a', 0, 0, 100, 50),
+      kr('b', 110, 0, 80, 50),
+      kr('c', 130, 0, 90, 50),
+      kr('d', 300, 0, 100, 50),
+    ];
+    const out = computeDistribute(rects, 'x');
+    expect(out).toHaveLength(2); // only the 2 middle rects move
+    expect(out.find((m) => m.key === 'b')).toEqual({ key: 'b', x: 110, y: 0 });
+    expect(out.find((m) => m.key === 'c')).toEqual({ key: 'c', x: 200, y: 0 });
+  });
+
+  test('already-equal gaps still returns the (unchanged) middle positions', () => {
+    const rects = [kr('a', 0, 0), kr('b', 120, 0), kr('c', 240, 0)];
+    const out = computeDistribute(rects, 'x');
+    expect(out).toEqual([{ key: 'b', x: 120, y: 0 }]);
+  });
+
+  test('distributes on y', () => {
+    // y: 0..60, 90..150, 300..360 — total sides 180, span 360-180=180, gap 90
+    const rects = [kr('a', 0, 0, 50, 60), kr('b', 0, 90, 50, 60), kr('c', 0, 300, 50, 60)];
+    const out = computeDistribute(rects, 'y');
+    expect(out).toHaveLength(1);
+    expect(out[0]).toEqual({ key: 'b', x: 0, y: 150 });
+  });
+});
+
+describe('computeTidyGrid', () => {
+  test('fewer than 2 rects → []', () => {
+    expect(computeTidyGrid([kr('a', 5, 5)])).toEqual([]);
+  });
+
+  test('4 rects → 2×2 grid, reading-order sorted, from the union-bbox origin', () => {
+    // scattered, deliberately out of reading order
+    const rects = [
+      kr('br', 500, 500, 50, 50),
+      kr('tl', 0, 0, 50, 50),
+      kr('tr', 400, 10, 50, 50),
+      kr('bl', 20, 490, 50, 50),
+    ];
+    const out = computeTidyGrid(rects, { gap: 10 });
+    expect(out).toHaveLength(4);
+    const byKey = Object.fromEntries(out.map((m) => [m.key, m]));
+    // reading order (y then x): tl(0,0) → tr(400,10) → bl(20,490) → br(500,500)
+    // columns = round(sqrt(4)) = 2 → row0: tl,tr · row1: bl,br
+    expect(byKey.tl).toEqual({ key: 'tl', x: 0, y: 0 });
+    expect(byKey.tr).toEqual({ key: 'tr', x: 60, y: 0 }); // col0 width 50 + gap 10
+    expect(byKey.bl).toEqual({ key: 'bl', x: 0, y: 60 });
+    expect(byKey.br).toEqual({ key: 'br', x: 60, y: 60 });
+  });
+
+  test('honors an explicit column count', () => {
+    const rects = [kr('a', 0, 0, 40, 20), kr('b', 0, 0, 40, 20), kr('c', 0, 0, 40, 20)];
+    const out = computeTidyGrid(rects, { gap: 5, columns: 1 });
+    // 1 column → stacked vertically
+    expect(out.map((m) => m.x)).toEqual([0, 0, 0]);
+    expect(out.map((m) => m.y)).toEqual([0, 25, 50]);
+  });
+});

package/apps/studio/test/export-center.test.tsx

@@ -0,0 +1,287 @@
+// export-center — feature-background-export-notification-center.
+//
+// useExportCenter relies on effects (initial fetch + a status-transition
+// watcher), so — like canvas-hmr-runtime.test.tsx — this needs a live DOM
+// with real effect flushing, not renderToStaticMarkup. Registers happy-dom
+// for this file only and drives a real createRoot.
+
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, mock, test } from 'bun:test';
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+beforeAll(() => {
+  GlobalRegistrator.register();
+  (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+});
+afterAll(() => {
+  GlobalRegistrator.unregister();
+});
+
+import { act, createElement } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+import { useExportCenter } from '../client/export-center.jsx';
+
+function mount(el: HTMLElement) {
+  let root!: Root;
+  act(() => {
+    root = createRoot(el);
+  });
+  return root;
+}
+
+function job(overrides: Record<string, unknown>) {
+  return {
+    id: 'j1',
+    format: 'png',
+    scope: 'artboard',
+    status: 'queued',
+    createdAt: '2026-01-01T00:00:00.000Z',
+    ...overrides,
+  };
+}
+
+describe('useExportCenter', () => {
+  let originalFetch: typeof fetch;
+  let originalHasFocus: typeof document.hasFocus;
+  let fetchMock: ReturnType<typeof mock>;
+
+  beforeEach(() => {
+    originalFetch = globalThis.fetch;
+    originalHasFocus = document.hasFocus;
+    // The hook's initial-hydration GET must never throw synchronously in this
+    // no-server test environment; individual tests override this further.
+    fetchMock = mock(async () => new Response(JSON.stringify({ jobs: [] }), { status: 200 }));
+    globalThis.fetch = fetchMock as unknown as typeof fetch;
+  });
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+    document.hasFocus = originalHasFocus;
+  });
+
+  test('upserts a queued→running→done sequence and derives runningCount/queuedCount', () => {
+    document.hasFocus = () => false; // keep the focus-gated auto-download inert here
+    const host = document.createElement('div');
+    const root = mount(host);
+    let center!: ReturnType<typeof useExportCenter>;
+    function Probe() {
+      center = useExportCenter();
+      return null;
+    }
+    act(() => {
+      root.render(createElement(Probe));
+    });
+
+    act(() => {
+      center.upsert(job({ status: 'queued' }));
+    });
+    expect(center.queuedCount).toBe(1);
+    expect(center.runningCount).toBe(0);
+    expect(center.jobs.map((j) => j.id)).toEqual(['j1']);
+
+    act(() => {
+      center.upsert(job({ status: 'running', progress: { current: 2, total: 5 } }));
+    });
+    expect(center.queuedCount).toBe(0);
+    expect(center.runningCount).toBe(1);
+    expect(center.busyCount).toBe(1);
+    expect(center.jobs[0].progress).toEqual({ current: 2, total: 5 });
+
+    act(() => {
+      center.upsert(job({ status: 'done', filename: 'export.png' }));
+    });
+    expect(center.runningCount).toBe(0);
+    expect(center.busyCount).toBe(0);
+    // A done/failed TRANSITION queues a toast.
+    expect(center.showToast).toBe(true);
+    expect(center.toastJob?.id).toBe('j1');
+
+    act(() => root.unmount());
+  });
+
+  test('a later upsert of an already-finished job does not re-queue the toast', () => {
+    document.hasFocus = () => false;
+    const host = document.createElement('div');
+    const root = mount(host);
+    let center!: ReturnType<typeof useExportCenter>;
+    function Probe() {
+      center = useExportCenter();
+      return null;
+    }
+    act(() => {
+      root.render(createElement(Probe));
+    });
+
+    act(() => {
+      center.upsert(job({ status: 'done', filename: 'export.png' }));
+    });
+    expect(center.showToast).toBe(true);
+    act(() => {
+      center.dismissToast();
+    });
+    expect(center.showToast).toBe(false);
+
+    // Re-upserting the SAME finished status (no transition) must not resurrect the toast.
+    act(() => {
+      center.upsert(job({ status: 'done', filename: 'export.png' }));
+    });
+    expect(center.showToast).toBe(false);
+
+    act(() => root.unmount());
+  });
+
+  test('focus-gated auto-download only fires when document.hasFocus() is true', () => {
+    const host = document.createElement('div');
+    const root = mount(host);
+    let center!: ReturnType<typeof useExportCenter>;
+    function Probe() {
+      center = useExportCenter();
+      return null;
+    }
+    act(() => {
+      root.render(createElement(Probe));
+    });
+    fetchMock.mockClear(); // drop the initial hydration GET from the call log
+
+    // Unfocused — a 'done' transition must NOT hit the download endpoint.
+    document.hasFocus = () => false;
+    act(() => {
+      center.upsert(job({ id: 'unfocused', status: 'done', filename: 'a.png' }));
+    });
+    const downloadCalls = fetchMock.mock.calls.filter((c) =>
+      String(c[0]).includes('/_api/export-jobs/download')
+    );
+    expect(downloadCalls.length).toBe(0);
+
+    // Focused — a DIFFERENT job's 'done' transition MUST hit the download endpoint.
+    document.hasFocus = () => true;
+    act(() => {
+      center.upsert(job({ id: 'focused', status: 'done', filename: 'b.png' }));
+    });
+
+    act(() => root.unmount());
+  });
+
+  test('a job first seen queued surfaces a "started" toast that morphs into "done" in place', () => {
+    document.hasFocus = () => false;
+    const host = document.createElement('div');
+    const root = mount(host);
+    let center!: ReturnType<typeof useExportCenter>;
+    function Probe() {
+      center = useExportCenter();
+      return null;
+    }
+    act(() => {
+      root.render(createElement(Probe));
+    });
+
+    act(() => {
+      center.upsert(job({ status: 'queued' }));
+    });
+    expect(center.showToast).toBe(true);
+    expect(center.toastJob?.id).toBe('j1');
+    expect(center.toastJob?.status).toBe('queued');
+
+    act(() => {
+      center.upsert(job({ status: 'running', progress: { current: 1, total: 3 } }));
+    });
+    // Still the SAME toast (one entry per job), just reflecting the live status.
+    expect(center.showToast).toBe(true);
+    expect(center.toastJob?.id).toBe('j1');
+    expect(center.toastJob?.status).toBe('running');
+
+    act(() => {
+      center.upsert(job({ status: 'done', filename: 'export.png' }));
+    });
+    expect(center.showToast).toBe(true);
+    expect(center.toastJob?.id).toBe('j1');
+    expect(center.toastJob?.status).toBe('done');
+
+    act(() => root.unmount());
+  });
+
+  test('hydration seeds prior status — a historical done job never re-toasts or re-downloads', async () => {
+    fetchMock = mock(async (url: string) => {
+      if (String(url).includes('/_api/export-jobs') && !String(url).includes('download')) {
+        return new Response(
+          JSON.stringify({
+            jobs: [
+              job({ id: 'old', status: 'done', filename: 'old.png', createdAt: '2020-01-01' }),
+            ],
+          }),
+          { status: 200 }
+        );
+      }
+      return new Response(null, { status: 404 });
+    });
+    globalThis.fetch = fetchMock as unknown as typeof fetch;
+    document.hasFocus = () => true; // would auto-download if this were a live transition
+
+    const host = document.createElement('div');
+    const root = mount(host);
+    let center!: ReturnType<typeof useExportCenter>;
+    function Probe() {
+      center = useExportCenter();
+      return null;
+    }
+    // The hydration fetch resolves asynchronously — flush it under act().
+    await act(async () => {
+      root.render(createElement(Probe));
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(center.jobs.map((j) => j.id)).toEqual(['old']);
+    expect(center.showToast).toBe(false);
+    const downloadCalls = fetchMock.mock.calls.filter((c) =>
+      String(c[0]).includes('/_api/export-jobs/download')
+    );
+    expect(downloadCalls.length).toBe(0);
+
+    act(() => root.unmount());
+  });
+
+  test('savingIds reflects a busy state around save()/download()', async () => {
+    document.hasFocus = () => false;
+    let resolveDownload!: (r: Response) => void;
+    fetchMock = mock((url: string) => {
+      if (String(url).includes('/_api/export-jobs/download')) {
+        return new Promise<Response>((resolve) => {
+          resolveDownload = resolve;
+        });
+      }
+      return Promise.resolve(new Response(JSON.stringify({ jobs: [] }), { status: 200 }));
+    });
+    globalThis.fetch = fetchMock as unknown as typeof fetch;
+
+    const host = document.createElement('div');
+    const root = mount(host);
+    let center!: ReturnType<typeof useExportCenter>;
+    function Probe() {
+      center = useExportCenter();
+      return null;
+    }
+    act(() => {
+      root.render(createElement(Probe));
+    });
+    act(() => {
+      center.upsert(job({ status: 'done', filename: 'export.png' }));
+    });
+    expect(center.savingIds.has('j1')).toBe(false);
+    expect(center.toastJob).not.toBeNull();
+    const doneJob = center.toastJob as NonNullable<typeof center.toastJob>;
+
+    let downloadDone!: Promise<void>;
+    act(() => {
+      downloadDone = center.download(doneJob);
+    });
+    expect(center.savingIds.has('j1')).toBe(true);
+
+    await act(async () => {
+      resolveDownload(new Response(new Blob(['x']), { status: 200 }));
+      await downloadDone;
+    });
+    expect(center.savingIds.has('j1')).toBe(false);
+
+    act(() => root.unmount());
+  });
+});

package/apps/studio/test/export-shim-multi-capture.test.ts

@@ -0,0 +1,83 @@
+// Regression guard for the multi-target capture position-restore bug
+// (feature-background-export-notification-center, Phase A). Root cause: each
+// per-artboard capture pinned the artboard's `left`/`top` inline style to
+// `0px` for the screenshot/PDF/etc. crop but never restored it, so every
+// artboard processed earlier in a `--multi` loop stayed stacked at the
+// origin and bled into every subsequent target's clip region — the
+// `canvas-as-separate` "scattered/overlapping fragments" bug.
+//
+// Confirmed fixed via a live repro against a real 22-artboard canvas (plan
+// Task 26): the PDF export that previously didn't complete in 3+ minutes now
+// finishes in ~10s with every page showing its own correct, isolated
+// content. That run needs a real Chromium; this suite deliberately doesn't
+// spawn one (mirrors `test/exporters/pw-launch.test.ts`: "the launch path
+// itself is integration-shape... needs a real browser" — CI has none
+// installed). So this guards the FIX SHAPE at the shim source level: a
+// revert that drops the restore step (or reintroduces the old one-shot
+// "zero every artboard up front" pattern) fails loud here instead of only
+// showing up as a live-repro regression nobody runs by hand.
+
+import { describe, expect, test } from 'bun:test';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const BIN_DIR = join(import.meta.dir, '..', 'bin');
+
+function readShim(name: string): string {
+  return readFileSync(join(BIN_DIR, name), 'utf8');
+}
+
+// The old bug pattern: zero EVERY `[data-dc-screen]` once, up front, before
+// any per-target loop runs (no restore possible once every artboard shares
+// the same reset).
+const ONE_SHOT_RESET =
+  /for \(const el of document\.querySelectorAll\(['"]\[data-dc-screen\]['"]\)\)/;
+
+describe('export shims — multi-target position restore (scatter-bug regression)', () => {
+  test('_png-playwright.mjs saves + restores each artboard around its own capture', () => {
+    const src = readShim('_png-playwright.mjs');
+    expect(src).toMatch(/const savedPos = await widenedHandle\.evaluate/);
+    expect(src).toMatch(/ab\.style\.left = prev\.left;\s*\n\s*ab\.style\.top = prev\.top;/);
+    expect(src).not.toMatch(ONE_SHOT_RESET);
+  });
+
+  test('_pdf-playwright.mjs saves + restores each artboard around its own capture', () => {
+    const src = readShim('_pdf-playwright.mjs');
+    expect(src).toMatch(/const savedPos = await handle\.evaluate/);
+    expect(src).toMatch(/ab\.style\.left = prev\.left;\s*\n\s*ab\.style\.top = prev\.top;/);
+    expect(src).not.toMatch(ONE_SHOT_RESET);
+  });
+
+  test('_svg-playwright.mjs pins + restores per-target via pinArtboard (not a one-shot reset)', () => {
+    const src = readShim('_svg-playwright.mjs');
+    expect(src).toMatch(/const pinArtboard = async/);
+    expect(src).toMatch(/const restore = await pinArtboard\(handle\)/);
+    expect(src).not.toMatch(ONE_SHOT_RESET);
+  });
+
+  test('_html-playwright.mjs pins + restores per-target via pinArtboard (not a one-shot reset)', () => {
+    const src = readShim('_html-playwright.mjs');
+    expect(src).toMatch(/const pinArtboard = async/);
+    expect(src).toMatch(/const restore = await pinArtboard\(handle\)/);
+    expect(src).not.toMatch(ONE_SHOT_RESET);
+  });
+
+  test('_pptx-playwright.mjs saves + restores position around its capture', () => {
+    const src = readShim('_pptx-playwright.mjs');
+    expect(src).toMatch(/const savedPos = await handle\.evaluate/);
+    expect(src).toMatch(/ab\.style\.left = prev\.left;\s*\n\s*ab\.style\.top = prev\.top;/);
+    expect(src).not.toMatch(ONE_SHOT_RESET);
+  });
+
+  test('multi-loops emit MAUDE_PROGRESS per artboard (the notification-center signal)', () => {
+    for (const name of [
+      '_png-playwright.mjs',
+      '_pdf-playwright.mjs',
+      '_svg-playwright.mjs',
+      '_html-playwright.mjs',
+    ]) {
+      const src = readShim(name);
+      expect(src).toContain('MAUDE_PROGRESS');
+    }
+  });
+});

package/apps/studio/test/exporters/history.test.ts

@@ -55,12 +55,12 @@ describe('/_api/export-history — GET', () => {
     }
   });
 
-  test('caps to 5 most-recent entries', async () => {
+  test('caps to 20 most-recent entries', async () => {
     const { root } = makeSandbox();
     const port = nextPort();
     const proc = await bootServer(root, port);
     try {
-      for (let i = 0; i < 7; i += 1) {
+      for (let i = 0; i < 23; i += 1) {
         const r = await fetch(`http://localhost:${port}/_api/export`, {
           method: 'POST',
           headers: { 'content-type': 'application/json' },
@@ -70,7 +70,36 @@ describe('/_api/export-history — GET', () => {
       }
       const r = await fetch(`http://localhost:${port}/_api/export-history`);
       const body = (await r.json()) as HistoryShape;
-      expect(body.history.length).toBe(5);
+      expect(body.history.length).toBe(20);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('old-shape entries (no id/status) still parse on a fresh boot', async () => {
+    const { root, designRoot } = makeSandbox();
+    const { mkdirSync, writeFileSync } = await import('node:fs');
+    mkdirSync(designRoot, { recursive: true });
+    writeFileSync(
+      join(designRoot, '_export-history.json'),
+      JSON.stringify([
+        {
+          format: 'png',
+          scope: 'artboard',
+          filename: 'legacy.png',
+          at: '2026-01-01T00:00:00.000Z',
+        },
+      ])
+    );
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await fetch(`http://localhost:${port}/_api/export-history`);
+      expect(r.status).toBe(200);
+      const body = (await r.json()) as HistoryShape;
+      expect(body.history.length).toBe(1);
+      expect(body.history[0].format).toBe('png');
+      expect(body.history[0].filename).toBe('legacy.png');
     } finally {
       await killProc(proc);
     }