@1agh/maude 0.41.0 → 0.43.0

package/apps/studio/test/edit-source-command.test.ts

@@ -30,9 +30,32 @@ describe('createEditSourceCommand', () => {
       id: 'cd-1',
       key: 'color',
       value: 'blue',
+      // do() writes `after` over `before`, so `from` = before; css has no occurrence.
+      from: 'red',
+      occurrence: undefined,
     });
   });
 
+  test('do()/undo() carry occurrence + from for a text edit (variable re-target)', async () => {
+    const applyFn = mock(() => {});
+    const textEdit: EditSourcePayload = {
+      op: 'text',
+      canvas: '.design/ui/Foo.tsx',
+      id: 'cd-9',
+      key: '',
+      before: 'Old',
+      after: 'New',
+      occurrence: 2,
+    };
+    const cmd = createEditSourceCommand({ payload: textEdit, applyFn });
+    await cmd.do();
+    // redo/do: write New over Old → from = Old.
+    expect(applyFn.mock.calls[0]?.[0]).toMatchObject({ value: 'New', from: 'Old', occurrence: 2 });
+    await cmd.undo();
+    // undo: write Old over New → from = New.
+    expect(applyFn.mock.calls[1]?.[0]).toMatchObject({ value: 'Old', from: 'New', occurrence: 2 });
+  });
+
   test('undo() applies the BEFORE value', async () => {
     const applyFn = mock(() => {});
     const cmd = createEditSourceCommand({ payload: cssEdit, applyFn });

package/apps/studio/test/element-structural-edit.test.ts

@@ -10,6 +10,7 @@ import {
   applyDeleteElement,
   applyInsertArtboard,
   applyInsertElement,
+  applyInsertElementIntoArtboard,
   applyResizeArtboard,
   CanvasEditError,
 } from '../canvas-edit.ts';
@@ -153,6 +154,51 @@ describe('canvas-edit / applyInsertElement', () => {
   });
 });
 
+describe('canvas-edit / applyInsertElementIntoArtboard (empty-artboard fallback)', () => {
+  const emptyCanvas = [
+    'export default function Demo() {',
+    '  return (',
+    '    <DesignCanvas>',
+    '      <DCArtboard id="home" label="Home" width={1440} height={1024}>',
+    '      </DCArtboard>',
+    '    </DesignCanvas>',
+    '  );',
+    '}',
+  ].join('\n');
+
+  test("inserts a div as the artboard's only child (inside-end)", () => {
+    const out = applyInsertElementIntoArtboard(CANVAS, emptyCanvas, 'home', 'inside-end', 'div');
+    expect(out.source).toMatch(
+      /<DCArtboard id="home"[^>]*>[\s\S]*var\(--bg-2\)[\s\S]*<\/DCArtboard>/
+    );
+    expect(parses(out.source)).toBe(true);
+    expect(out.newId).toMatch(/^[0-9a-f]{8}$/);
+  });
+
+  test('inside-start lands the new element right after the opening tag', () => {
+    const out = applyInsertElementIntoArtboard(CANVAS, emptyCanvas, 'home', 'inside-start', 'text');
+    expect(out.source).toContain('<p style={{ margin: 0 }}>Text</p>');
+    expect(parses(out.source)).toBe(true);
+  });
+
+  test('image insert requires a contained asset src', () => {
+    expect(() =>
+      applyInsertElementIntoArtboard(CANVAS, emptyCanvas, 'home', 'inside-end', 'image')
+    ).toThrow(CanvasEditError);
+    const ok = applyInsertElementIntoArtboard(CANVAS, emptyCanvas, 'home', 'inside-end', 'image', {
+      src: 'assets/ab12cd34.png',
+    });
+    expect(ok.source).toContain('src="assets/ab12cd34.png"');
+    expect(parses(ok.source)).toBe(true);
+  });
+
+  test('unknown artboard id throws', () => {
+    expect(() =>
+      applyInsertElementIntoArtboard(CANVAS, emptyCanvas, 'nope', 'inside-end', 'div')
+    ).toThrow(CanvasEditError);
+  });
+});
+
 describe('canvas-edit / applyResizeArtboard (D4)', () => {
   const canvas = [
     'export default function Demo() {',

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);
     }