@1agh/maude 0.16.0 → 0.17.1

package/README.md

@@ -2,6 +2,10 @@
 
 A personal marketplace of Claude Code plugins. Two plugins today, plus a `maude` CLI for scaffolding and running the bundled dev tooling.
 
+<!-- Demo video lives at https://github.com/1aGh/maude/releases/download/v0.16.0/demo.mp4 once uploaded.
+     Until then the inline tag below stays a soft 404; landing page at https://maude.iagh.cz autoplays the same file. -->
+<video src="https://github.com/1aGh/maude/releases/download/v0.16.0/demo.mp4" controls muted playsinline poster="https://maude.iagh.cz/demo-poster.jpg" width="800"></video>
+
 > **📚 Full docs: https://maude.iagh.cz** (or browse the source under [`site/content/docs/`](./site/content/docs/) until the public URL lands).
 > Contributing? See [CONTRIBUTING.md](./CONTRIBUTING.md). Security? See [SECURITY.md](./SECURITY.md).
 

package/cli/commands/design.mjs

@@ -3,7 +3,7 @@ import { mkdir, readFile, readdir, stat, writeFile } from 'node:fs/promises';
 import { basename, join, resolve } from 'node:path';
 import { parseArgs } from '../lib/argv.mjs';
 
-const SUBCOMMANDS = new Set(['serve', 'init', 'help']);
+const SUBCOMMANDS = new Set(['serve', 'init', 'export', 'help']);
 
 export async function run({ args, pkgRoot }) {
   const { positional } = parseArgs(args);
@@ -25,10 +25,13 @@ export async function run({ args, pkgRoot }) {
   if (sub === 'init') {
     return runInit({ args, pkgRoot });
   }
+  if (sub === 'export') {
+    return runExport({ args });
+  }
 }
 
 function usage() {
-  return `maude design <serve|init> [options]
+  return `maude design <serve|init|export> [options]
 
   serve [--port N] [--root PATH]
         Start the design plugin's dev server in the current repo. Equivalent
@@ -45,6 +48,13 @@ function usage() {
         --discovery-payload <path> reads a JSON file with answers + tokens and
         scaffolds Core + the derived specimens deterministically (this is the
         path skill 'design-system' uses when shelling out from Claude Code).
+
+  export <format> [--scope selection|artboard|canvas-as-separate|project-raw]
+         [--port N] [--out <path>] [--option key=value ...]
+        Drive the same POST /_api/export endpoint the UI uses. Auto-detects
+        port from .design/_server.json; requires a running dev server. The
+        response body is written to --out (default: current dir, server-
+        supplied filename). Formats: png pdf svg html pptx canva zip.
 `;
 }
 
@@ -98,6 +108,102 @@ async function runServe({ args, pkgRoot }) {
   });
 }
 
+async function runExport({ args }) {
+  // `maude design export <format> [--scope ...] [--port N] [--out <path>] [--option key=value]`
+  const subArgs = args.slice(args.indexOf('export') + 1);
+  const { positional, flags } = parseArgs(subArgs, {
+    booleans: ['help'],
+  });
+  if (flags.help) {
+    process.stdout.write(usage());
+    return;
+  }
+
+  const format = positional[0];
+  const VALID_FORMATS = new Set(['png', 'pdf', 'svg', 'html', 'pptx', 'canva', 'zip']);
+  if (!format || !VALID_FORMATS.has(format)) {
+    process.stderr.write(
+      `maude design export: missing or unknown <format>. Try one of: ${Array.from(VALID_FORMATS).join(', ')}\n`
+    );
+    process.exit(2);
+  }
+
+  const scope = flags.scope ?? 'canvas-as-separate';
+  const VALID_SCOPES = new Set(['selection', 'artboard', 'canvas-as-separate', 'project-raw']);
+  if (!VALID_SCOPES.has(scope)) {
+    process.stderr.write(`maude design export: unknown --scope "${scope}"\n`);
+    process.exit(2);
+  }
+
+  // Resolve port: --port > .design/_server.json
+  let port = flags.port ? Number(flags.port) : null;
+  if (!port) {
+    try {
+      const raw = await readFile(resolve(process.cwd(), '.design', '_server.json'), 'utf8');
+      port = JSON.parse(raw).port;
+    } catch {
+      /* no server.json — handled below */
+    }
+  }
+  if (!port) {
+    process.stderr.write(
+      'maude design export: no --port given and .design/_server.json not found. Start the dev server first (`maude design serve`).\n'
+    );
+    process.exit(1);
+  }
+
+  // Collect `--option key=value` repeated flags into an object.
+  const options = {};
+  const repeated = collectRepeatedFlag(subArgs, '--option');
+  for (const item of repeated) {
+    const eq = item.indexOf('=');
+    if (eq < 0) {
+      process.stderr.write(
+        `maude design export: invalid --option "${item}" (expected key=value)\n`
+      );
+      process.exit(2);
+    }
+    const key = item.slice(0, eq);
+    const value = item.slice(eq + 1);
+    // Coerce common JSON-ish values: true/false, numbers, arrays via comma.
+    options[key] = value === 'true' ? true : value === 'false' ? false : value;
+  }
+
+  const url = `http://localhost:${port}/_api/export`;
+  const r = await fetch(url, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ format, scope, options }),
+  });
+  if (!r.ok) {
+    const text = await r.text();
+    process.stderr.write(`maude design export: server returned ${r.status}: ${text}\n`);
+    process.exit(1);
+  }
+
+  const disp = r.headers.get('content-disposition') ?? '';
+  const serverFilename = /filename="([^"]+)"/.exec(disp)?.[1] ?? `export.${format}`;
+  const outPath = flags.out
+    ? resolve(process.cwd(), flags.out)
+    : resolve(process.cwd(), serverFilename);
+  const bytes = new Uint8Array(await r.arrayBuffer());
+  await writeFile(outPath, bytes);
+  process.stdout.write(`maude design export: wrote ${outPath} (${bytes.byteLength} bytes)\n`);
+}
+
+function collectRepeatedFlag(argv, name) {
+  const out = [];
+  for (let i = 0; i < argv.length; i += 1) {
+    if (argv[i] === name && argv[i + 1] !== undefined) {
+      out.push(argv[i + 1]);
+      i += 1;
+    } else if (argv[i].startsWith(`${name}=`)) {
+      out.push(argv[i].slice(name.length + 1));
+    }
+  }
+  return out;
+}
+
 async function runInit({ args, pkgRoot }) {
   const subArgs = args.slice(args.indexOf('init') + 1);
   const { flags } = parseArgs(subArgs, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1agh/maude",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "description": "Marketplace of Claude Code plugins by Michal Dovrtěl: `design` (canvas-first design iteration) + `flow` (generic agentic workflow loop with .ai second brain). Ships the `maude` CLI (with `mdcc` legacy alias) to scaffold workspace, run the design dev server, and manage configs.",
   "type": "module",
   "engines": {
@@ -34,18 +34,20 @@
     "video:smoke": "bash scripts/video/smoke/run.sh",
     "video:smoke:terminal": "vhs scripts/video/smoke/terminal.tape",
     "video:smoke:browser": "playwright test --config scripts/video/smoke/playwright.config.ts",
-    "video:smoke:card": "remotion render scripts/video/smoke/card/index.tsx SmokeCard scripts/video/.work/smoke/card.mp4 --mute",
+    "video:smoke:card": "cd scripts/video/final && pnpm run render SmokeCard ../.work/smoke/card.mp4 --mute",
+    "video:render": "cd scripts/video/final && pnpm run render",
+    "video:studio": "cd scripts/video/final && pnpm run studio",
     "postinstall": "node cli/install.cjs",
     "prepublishOnly": "bash scripts/check-version-parity.sh"
   },
   "optionalDependencies": {
-    "@1agh/maude-darwin-arm64": "0.16.0",
-    "@1agh/maude-darwin-x64": "0.16.0",
-    "@1agh/maude-linux-arm64": "0.16.0",
-    "@1agh/maude-linux-arm64-musl": "0.16.0",
-    "@1agh/maude-linux-x64": "0.16.0",
-    "@1agh/maude-linux-x64-musl": "0.16.0",
-    "@1agh/maude-win32-x64": "0.16.0"
+    "@1agh/maude-darwin-arm64": "0.17.1",
+    "@1agh/maude-darwin-x64": "0.17.1",
+    "@1agh/maude-linux-arm64": "0.17.1",
+    "@1agh/maude-linux-arm64-musl": "0.17.1",
+    "@1agh/maude-linux-x64": "0.17.1",
+    "@1agh/maude-linux-x64-musl": "0.17.1",
+    "@1agh/maude-win32-x64": "0.17.1"
   },
   "files": [
     "cli",
@@ -81,14 +83,6 @@
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
     "@changesets/cli": "^2.27.10",
-    "@playwright/test": "^1.60.0",
-    "@remotion/bundler": "^4.0.463",
-    "@remotion/cli": "^4.0.463",
-    "@remotion/renderer": "^4.0.463",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
-    "remotion": "^4.0.463"
+    "@playwright/test": "^1.60.0"
   }
 }

package/plugins/design/dev-server/annotations-context-toolbar.tsx

@@ -36,14 +36,14 @@ const TOOLBAR_CSS = `
   display: flex;
   align-items: center;
   gap: 6px;
-  background: var(--bg-1, rgba(255,255,255,0.98));
-  border: 1px solid var(--u-border-2, rgba(0,0,0,0.08));
-  border-radius: 8px;
+  background: var(--u-bg-2, var(--bg-1, rgba(255,255,255,0.98)));
+  border: 1px solid var(--u-fg-0, #1c1917);
+  border-radius: 0;
   padding: 6px 8px;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
-  font-family: ui-sans-serif, system-ui, sans-serif;
+  box-shadow: 4px 4px 0 var(--u-fg-0, #1c1917);
+  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 12px;
-  color: var(--fg-0, #1a1a1a);
+  color: var(--u-fg-0, var(--fg-0, #1a1a1a));
   user-select: none;
   pointer-events: auto;
 }
@@ -79,8 +79,8 @@ const TOOLBAR_CSS = `
 .dc-annot-ctx-btn {
   appearance: none;
   background: transparent;
-  border: 1px solid rgba(0,0,0,0.12);
-  border-radius: 4px;
+  border: 1px solid var(--u-fg-0, rgba(0,0,0,0.6));
+  border-radius: 0;
   padding: 3px 8px;
   font: inherit;
   color: inherit;

package/plugins/design/dev-server/annotations-layer.tsx

@@ -118,9 +118,7 @@ const STROKE_WIDTH_THIN = 2;
 const STROKE_WIDTH_THICK = 6;
 type Thickness = typeof STROKE_WIDTH_THIN | typeof STROKE_WIDTH_THICK;
 
-const FONT_SIZE_SMALL = 12;
 const FONT_SIZE_MEDIUM = 14;
-const FONT_SIZE_LARGE = 20;
 const DEFAULT_FONT_SIZE = FONT_SIZE_MEDIUM;
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -459,15 +457,15 @@ const ANNOT_CSS = `
   display: flex;
   align-items: center;
   gap: 8px;
-  background: var(--bg-1, rgba(255,255,255,0.98));
-  border: 1px solid var(--u-border-2, rgba(0,0,0,0.08));
-  border-radius: 8px;
+  background: var(--u-bg-2, var(--bg-1, rgba(255,255,255,0.98)));
+  border: 1px solid var(--u-fg-0, #1c1917);
+  border-radius: 0;
   padding: 6px 10px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 11px;
-  color: rgba(40,30,20,0.85);
+  color: var(--u-fg-0, rgba(40,30,20,0.85));
   z-index: 6;
-  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
+  box-shadow: 4px 4px 0 var(--u-fg-0, #1c1917);
   user-select: none;
 }
 .dc-annot-chrome .dc-annot-swatches { display: flex; gap: 4px; }
@@ -1481,7 +1479,7 @@ function TextEditor({
           textAlign: 'center',
           color: existing?.color ?? '#1a1a1a',
           fontSize: `${fontSize}px`,
-          fontFamily: 'ui-sans-serif, system-ui, sans-serif',
+          fontFamily: 'var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
           lineHeight: 1.25,
           outline: 'none',
           background: 'transparent',
@@ -1568,7 +1566,7 @@ function StrokeNode({
         fontSize={stroke.fontSize}
         textAnchor="middle"
         dominantBaseline="middle"
-        style={{ fontFamily: 'ui-sans-serif, system-ui, sans-serif' }}
+        style={{ fontFamily: 'var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)' }}
       >
         {stroke.text}
       </text>

package/plugins/design/dev-server/api.ts

@@ -119,6 +119,16 @@ export interface GitCommitter {
   commits: number;
 }
 
+// Phase 6.5 T10 — export history. Five-deep ring buffer of recent exports
+// surfaced by the dialog's "Recent" tab + ⌘⇧E re-run.
+export interface ExportHistoryEntry {
+  format: string;
+  scope: string;
+  options?: Record<string, unknown>;
+  filename: string;
+  at: string;
+}
+
 export interface Api {
   // File tree
   fileSlug(file: string): string;
@@ -146,6 +156,9 @@ export interface Api {
   // Aggregate data
   buildIndexData(): Promise<unknown>;
   buildSystemData(): Promise<unknown>;
+  // Export history (Phase 6.5 T10)
+  loadExportHistory(): Promise<ExportHistoryEntry[]>;
+  appendExportHistory(entry: ExportHistoryEntry): Promise<void>;
 }
 
 export function createApi(ctx: Context, onCommentsChanged: (file: string) => void): Api {
@@ -694,6 +707,32 @@ export function createApi(ctx: Context, onCommentsChanged: (file: string) => voi
     };
   }
 
+  // ---------- Export history (Phase 6.5 T10) ----------
+  //
+  // 5-deep ring buffer persisted at `<designRoot>/_export-history.json`.
+  // Reads tolerate missing / malformed files (returns []). Writes truncate
+  // to most-recent-first.
+
+  const HISTORY_PATH = path.join(paths.designRoot, '_export-history.json');
+  const HISTORY_DEPTH = 5;
+
+  async function loadExportHistory(): Promise<ExportHistoryEntry[]> {
+    try {
+      const raw = await Bun.file(HISTORY_PATH).text();
+      const arr = JSON.parse(raw);
+      if (!Array.isArray(arr)) return [];
+      return arr.slice(0, HISTORY_DEPTH);
+    } catch {
+      return [];
+    }
+  }
+
+  async function appendExportHistory(entry: ExportHistoryEntry): Promise<void> {
+    const prev = await loadExportHistory();
+    const next = [entry, ...prev].slice(0, HISTORY_DEPTH);
+    await Bun.write(HISTORY_PATH, JSON.stringify(next, null, 2));
+  }
+
   function tokenKind(name: string, value: string): string {
     const n = name.toLowerCase();
     const v = String(value).trim();
@@ -853,5 +892,7 @@ export function createApi(ctx: Context, onCommentsChanged: (file: string) => voi
     saveAnnotations,
     buildIndexData,
     buildSystemData,
+    loadExportHistory,
+    appendExportHistory,
   };
 }

package/plugins/design/dev-server/bin/_enumerate-artboards-playwright.mjs

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+// Tiny playwright shim that lists `[data-dc-screen]` IDs on a canvas-shell URL,
+// one per line on stdout. Spawned by `exporters/pptx.ts` for canvas-as-separate
+// merge. Lives as a subprocess (not a direct import) so `bun build --compile`
+// of the dev-server binary doesn't pull in playwright + chromium-bidi deep deps.
+
+import { chromium } from 'playwright';
+
+const args = process.argv.slice(2);
+let url;
+let timeoutSec = 20;
+for (let i = 0; i < args.length; i += 1) {
+  if (args[i] === '--url') {
+    i += 1;
+    url = args[i];
+  } else if (args[i] === '--timeout') {
+    i += 1;
+    timeoutSec = Number(args[i]);
+  }
+}
+if (!url) {
+  console.error('usage: _enumerate-artboards-playwright.mjs --url <url> [--timeout <sec>]');
+  process.exit(2);
+}
+
+const timeoutMs = timeoutSec * 1000;
+const browser = await chromium.launch();
+try {
+  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
+  const page = await ctx.newPage();
+  await page.goto(url, { waitUntil: 'networkidle', timeout: timeoutMs });
+  const ids = await page.evaluate(() =>
+    Array.from(document.querySelectorAll('[data-dc-screen]')).map(
+      (el) => el.getAttribute('data-dc-screen') ?? ''
+    )
+  );
+  for (const id of ids.filter(Boolean)) console.log(id);
+} finally {
+  await browser.close();
+}

package/plugins/design/dev-server/bin/_html-playwright.mjs

@@ -0,0 +1,129 @@
+// _html-playwright.mjs — playwright shim for the HTML exporter.
+//
+// Walks the rendered DOM, serializes the full document with stylesheets
+// inlined, and emits a standalone `index.html`. Web fonts + remote images
+// are NOT inlined in v1 — the doc references them by absolute URL so the
+// resulting file works under file:// when the user has those origins
+// available. Full asset inlining is a follow-up; see plan T5.
+//
+// Invocation (Bun.spawn from exporters/html.ts — not invoked directly):
+//   npm exec --package=playwright -- node _html-playwright.mjs \
+//     --url <url> --selector <css> --out <path> \
+//     [--widen-to-artboard] [--multi] [--out-dir <dir>] [--timeout 8]
+
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { chromium } from 'playwright';
+
+const args = Object.fromEntries(
+  process.argv.slice(2).reduce((acc, cur, i, all) => {
+    if (cur.startsWith('--')) acc.push([cur.slice(2), all[i + 1] ?? '1']);
+    return acc;
+  }, [])
+);
+
+const {
+  url,
+  selector,
+  out,
+  'out-dir': outDir,
+  'widen-to-artboard': widenFlag,
+  multi: multiFlag,
+  timeout = '8',
+} = args;
+
+if (!url) {
+  console.error('usage: _html-playwright.mjs --url <url> --selector <css> --out <path>');
+  process.exit(2);
+}
+
+const widen = widenFlag !== undefined;
+const multi = multiFlag !== undefined;
+const timeoutMs = Number(timeout) * 1000;
+
+const browser = await chromium.launch();
+try {
+  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
+  const page = await ctx.newPage();
+  await page.goto(url, { waitUntil: 'networkidle', timeout: timeoutMs });
+  // Reset the world plane's CSS zoom + transform so the captured artboard
+  // outerHTML carries 1440×900 dimensions instead of the pan-zoomed thumb.
+  await page.evaluate(() => {
+    const world = document.querySelector('.dc-world');
+    if (world) {
+      world.style.zoom = '1';
+      world.style.transform = 'none';
+    }
+    for (const el of document.querySelectorAll('[data-dc-screen]')) {
+      el.style.left = '0px';
+      el.style.top = '0px';
+    }
+  });
+
+  const written = [];
+
+  if (multi) {
+    if (!outDir) {
+      console.error('_html-playwright: --multi requires --out-dir');
+      process.exit(2);
+    }
+    mkdirSync(outDir, { recursive: true });
+    const screens = await page.locator(selector ?? '[data-dc-screen]').all();
+    for (let i = 0; i < screens.length; i += 1) {
+      const handle = screens[i];
+      const id = (await handle.getAttribute('data-dc-screen')) ?? `artboard-${i + 1}`;
+      const html = await serializeOne(handle, false);
+      const target = join(outDir, `${id}.html`);
+      writeFileSync(target, html, 'utf8');
+      written.push(target);
+    }
+  } else {
+    if (!out) {
+      console.error('_html-playwright: --out required when --multi not set');
+      process.exit(2);
+    }
+    mkdirSync(dirname(out), { recursive: true });
+    const handle = page.locator(selector ?? '[data-dc-screen]:first-of-type').first();
+    await handle.waitFor({ state: 'visible', timeout: timeoutMs });
+    const html = await serializeOne(handle, widen);
+    writeFileSync(out, html, 'utf8');
+    written.push(out);
+  }
+
+  for (const w of written) console.log(w);
+  console.error(`✓ playwright wrote ${written.length} html file(s)`);
+} finally {
+  await browser.close();
+}
+
+async function serializeOne(locator, widenToArtboard) {
+  return await locator.evaluate(
+    (el, opts) => {
+      const target = opts.widenToArtboard ? (el.closest('[data-dc-screen]') ?? el) : el;
+      const cssChunks = [];
+      for (const sheet of Array.from(document.styleSheets)) {
+        try {
+          for (const rule of Array.from(sheet.cssRules)) {
+            cssChunks.push(rule.cssText);
+          }
+        } catch {
+          // Cross-origin sheet — skip.
+        }
+      }
+      const styleBlock = `<style>${cssChunks.join('\n')}</style>`;
+      const innerHtml = target.outerHTML;
+      return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>${document.title || 'Maude export'}</title>
+<base href="${location.origin}/" />
+${styleBlock}
+</head>
+<body>${innerHtml}</body>
+</html>`;
+    },
+    { widenToArtboard }
+  );
+}

package/plugins/design/dev-server/bin/_pdf-playwright.mjs

@@ -0,0 +1,105 @@
+// _pdf-playwright.mjs — playwright shim for the PDF exporter.
+//
+// Drives Chromium's print-to-PDF (`page.pdf()`) directly so the output is a
+// true vector PDF with selectable text — NOT a PNG embedded in a PDF wrapper.
+// Per DDR-041 (PDF via page.pdf()): print-media emulation, font readiness
+// wait, explicit page size matching the artboard rect.
+//
+// Invocation (Bun.spawn from exporters/pdf.ts — not invoked directly):
+//   node _pdf-playwright.mjs --url <url> --selector <css> --out <path>
+//     [--multi] [--out-dir <dir>] [--timeout 12]
+
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { chromium } from 'playwright';
+
+const args = Object.fromEntries(
+  process.argv.slice(2).reduce((acc, cur, i, all) => {
+    if (cur.startsWith('--')) acc.push([cur.slice(2), all[i + 1] ?? '1']);
+    return acc;
+  }, [])
+);
+
+const { url, selector, out, 'out-dir': outDir, multi: multiFlag, timeout = '12' } = args;
+
+if (!url) {
+  console.error('usage: _pdf-playwright.mjs --url <url> --selector <css> --out <path>');
+  process.exit(2);
+}
+
+const multi = multiFlag !== undefined;
+const timeoutMs = Number(timeout) * 1000;
+
+const browser = await chromium.launch();
+try {
+  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
+  const page = await ctx.newPage();
+  await page.goto(url, { waitUntil: 'networkidle', timeout: timeoutMs });
+  // Wait for web fonts so `@font-face` glyphs land in the PDF instead of
+  // fallback Latin (puppeteer #3183 / playwright equivalent).
+  await page.evaluate(() => document.fonts.ready);
+  // Print-media emulation — Chromium's PDF output otherwise applies *screen*
+  // CSS and ignores `@media print` rules entirely.
+  await page.emulateMedia({ media: 'print' });
+
+  const written = [];
+  const screens = multi
+    ? await page.locator(selector ?? '[data-dc-screen]').all()
+    : [page.locator(selector ?? '[data-dc-screen]:first-of-type').first()];
+
+  if (multi && outDir) mkdirSync(outDir, { recursive: true });
+  else if (out) mkdirSync(dirname(out), { recursive: true });
+
+  // Reset the world plane's pan/zoom + transform so artboards render at
+  // their declared dimensions. CSS `zoom` on .dc-world actually shrinks
+  // layout, so getBoundingClientRect returns the post-zoom size unless
+  // we zero this. Done once per page; affects every artboard read below.
+  await page.evaluate(() => {
+    const world = document.querySelector('.dc-world');
+    if (world) {
+      world.style.zoom = '1';
+      world.style.transform = 'none';
+    }
+  });
+
+  for (let i = 0; i < screens.length; i += 1) {
+    const handle = screens[i];
+    // Pin each artboard to (0,0) right before its capture so the world's
+    // multi-artboard layout doesn't push the bbox off the viewport.
+    await handle.evaluate((el) => {
+      el.style.left = '0px';
+      el.style.top = '0px';
+    });
+    const rect = await handle.evaluate((el) => {
+      const r = el.getBoundingClientRect();
+      return { w: r.width, h: r.height, x: r.left, y: r.top };
+    });
+    // Set the page size to the artboard's pixel dimensions so the resulting
+    // PDF is exactly one artboard per page with no margin.
+    const targetPath = multi ? join(outDir, `artboard-${i + 1}.pdf`) : out;
+    // Crop trick: set the viewport to the artboard rect, scroll it into the
+    // top-left corner, then page.pdf() with matching width/height.
+    await page.setViewportSize({
+      width: Math.ceil(rect.w),
+      height: Math.ceil(rect.h),
+    });
+    await handle.evaluate((el) => {
+      el.scrollIntoView({ block: 'start', inline: 'start' });
+      window.scrollTo(0, 0);
+    });
+    const pdf = await page.pdf({
+      width: `${Math.ceil(rect.w)}px`,
+      height: `${Math.ceil(rect.h)}px`,
+      printBackground: true,
+      preferCSSPageSize: false,
+      margin: { top: 0, right: 0, bottom: 0, left: 0 },
+    });
+    writeFileSync(targetPath, pdf);
+    written.push(targetPath);
+  }
+
+  for (const w of written) console.log(w);
+  console.error(`✓ page.pdf wrote ${written.length} file(s)`);
+} finally {
+  await browser.close();
+}