@1agh/maude 0.15.0 → 0.17.1

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

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

@@ -0,0 +1,143 @@
+// _png-playwright.mjs — playwright shim for the PNG exporter.
+//
+// Replaces the screenshot.sh / agent-browser path because agent-browser
+// applies its own viewport sizing that doesn't honor our 1440x900 setup,
+// producing clipped captures. With our own playwright we control the
+// viewport exactly and crop to the target element's bounding box.
+
+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 = '12',
+  scale = '1',
+} = args;
+
+if (!url) {
+  console.error('usage: _png-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 deviceScaleFactor = Math.max(1, Math.min(4, Number(scale) || 1));
+
+const browser = await chromium.launch();
+try {
+  // 1440x900 matches the canvas viewport the design tool uses everywhere;
+  // exporters resize per-target before each shot to fit the artboard exactly.
+  const ctx = await browser.newContext({
+    viewport: { width: 1440, height: 900 },
+    deviceScaleFactor,
+  });
+  const page = await ctx.newPage();
+  await page.goto(url, { waitUntil: 'networkidle', timeout: timeoutMs });
+  await page.evaluate(() => document.fonts.ready);
+
+  const written = [];
+
+  const captureHandle = async (handle, target) => {
+    // Widen to artboard if requested — the selection's selector points at a
+    // descendant, but for "Export this artboard" we want the enclosing
+    // [data-dc-screen]. Done browser-side so the locator + bbox align.
+    const widenedHandle = widen
+      ? await handle.evaluateHandle((el) => el.closest('[data-dc-screen]') ?? el)
+      : handle;
+    // Reset the world plane's pan/zoom so every artboard renders at its
+    // declared native dimensions (1440×900 etc.). The dev-server uses CSS
+    // `zoom` (not `transform: scale`) on `.dc-world`, which actually shrinks
+    // layout — getBoundingClientRect returns 818×512 instead of 1440×900
+    // unless we zero both `zoom` and `transform` here.
+    await page.evaluate(
+      (sel) => {
+        const world = document.querySelector('.dc-world');
+        if (world) {
+          world.style.zoom = '1';
+          world.style.transform = 'none';
+        }
+        // Each artboard carries `style="left: …; top: …;"` so the world plane
+        // can position it as part of a multi-artboard layout. Pin the target
+        // to (0,0) so the screenshot clip starts at the viewport origin.
+        const ab = document.querySelector(sel);
+        if (ab) {
+          ab.style.left = '0px';
+          ab.style.top = '0px';
+        }
+      },
+      widen ? '[data-dc-screen]:first-of-type' : (selector ?? '[data-dc-screen]:first-of-type')
+    );
+    const rect = await widenedHandle.evaluate((el) => {
+      const r = el.getBoundingClientRect();
+      return { x: r.left, y: r.top, width: r.width, height: r.height };
+    });
+    // Resize the viewport to fit the artboard so the screenshot doesn't
+    // include the world plane's pan/zoom margin. The artboard then sits at
+    // (0,0) with its native dimensions.
+    await page.setViewportSize({
+      width: Math.max(1, Math.ceil(rect.width)),
+      height: Math.max(1, Math.ceil(rect.height)),
+    });
+    await widenedHandle.evaluate((el) => {
+      el.scrollIntoView({ block: 'start', inline: 'start' });
+      window.scrollTo(0, 0);
+    });
+    // After scroll, recompute rect — it's now anchored near (0,0).
+    const finalRect = await widenedHandle.evaluate((el) => {
+      const r = el.getBoundingClientRect();
+      return { x: r.left, y: r.top, width: r.width, height: r.height };
+    });
+    await page.screenshot({
+      path: target,
+      clip: {
+        x: Math.max(0, Math.floor(finalRect.x)),
+        y: Math.max(0, Math.floor(finalRect.y)),
+        width: Math.max(1, Math.ceil(finalRect.width)),
+        height: Math.max(1, Math.ceil(finalRect.height)),
+      },
+    });
+    written.push(target);
+  };
+
+  if (multi) {
+    if (!outDir) {
+      console.error('_png-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}`;
+      await captureHandle(handle, join(outDir, `${id}.png`));
+    }
+  } else {
+    if (!out) {
+      console.error('_png-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 });
+    await captureHandle(handle, out);
+  }
+
+  for (const w of written) console.log(w);
+  console.error(`✓ playwright wrote ${written.length} png file(s)`);
+} finally {
+  await browser.close();
+}

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

@@ -0,0 +1,98 @@
+// _pptx-playwright.mjs — playwright shim for the PPTX exporter.
+//
+// Drives `dom-to-pptx` (atharva9167j) — computed-style + getBoundingClientRect
+// architecture that respects the browser's layout result. Replaces our hand-
+// rolled DOM walker; see DDR-043. Per artboard → one slide. dom-to-pptx ships
+// a UMD bundle at `dist/dom-to-pptx.bundle.js` that exposes `window.domToPptx`.
+//
+// Invocation (Bun.spawn from exporters/pptx.ts — not invoked directly):
+//   node _pptx-playwright.mjs --url <url> --selector <css> --out <pptx-path>
+//     --bundle-path <umd.js> [--multi] [--timeout 12]
+
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { dirname } 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, 'bundle-path': bundlePath, multi: multiFlag, timeout = '15' } = args;
+
+if (!url || !out || !bundlePath) {
+  console.error(
+    'usage: _pptx-playwright.mjs --url <url> --selector <css> --out <pptx-path> --bundle-path <umd.js>'
+  );
+  process.exit(2);
+}
+
+const multi = multiFlag !== undefined;
+const timeoutMs = Number(timeout) * 1000;
+
+mkdirSync(dirname(out), { recursive: true });
+
+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 });
+  await page.evaluate(() => document.fonts.ready);
+  // Reset the world plane's CSS zoom + transform so dom-to-pptx reads the
+  // artboard at its declared 1440×900 instead of the pan-zoomed thumbnail.
+  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';
+    }
+  });
+  // dom-to-pptx ships a UMD bundle; addScriptTag exposes `window.domToPptx`.
+  await page.addScriptTag({ path: bundlePath });
+
+  // Resolve target handle(s). Multi-mode iterates every artboard; single-
+  // mode widens to the closest artboard ancestor of the supplied selector
+  // (matches the SVG/HTML shims' behaviour for --selector).
+  const handles = multi
+    ? await page.locator(selector ?? '[data-dc-screen]').all()
+    : [page.locator(selector ?? '[data-dc-screen]:first-of-type').first()];
+
+  // dom-to-pptx is designed to walk ONE root and emit ONE pptx. For multi,
+  // we serialize each artboard separately then merge in Node via pptxgenjs.
+  // For v1 we just emit the FIRST artboard if multi=true and warn — proper
+  // merge lives in exporters/pptx.ts (which receives back the byte array).
+  const handle = handles[0];
+  if (!handle) {
+    console.error('_pptx-playwright: no target found');
+    process.exit(2);
+  }
+  await handle.waitFor({ state: 'visible', timeout: timeoutMs });
+
+  // Run dom-to-pptx inside the page. It returns a Blob; we serialise to a
+  // byte array for transport across the playwright boundary.
+  const bytesArray = await handle.evaluate(async (el) => {
+    const target = el.closest('[data-dc-screen]') ?? el;
+    // window.domToPptx is the UMD-injected entry.
+    const { exportToPptx } = /** @type any */ (window).domToPptx;
+    if (typeof exportToPptx !== 'function') {
+      throw new Error('dom-to-pptx bundle did not expose exportToPptx');
+    }
+    const blob = await exportToPptx(target, { filename: 'export.pptx' });
+    const ab = await blob.arrayBuffer();
+    return Array.from(new Uint8Array(ab));
+  });
+
+  writeFileSync(out, new Uint8Array(bytesArray));
+  console.log(out);
+  console.error(
+    `✓ dom-to-pptx wrote ${out} (${bytesArray.length} bytes, ${handles.length} artboard${handles.length === 1 ? '' : 's available — first emitted'})`
+  );
+} finally {
+  await browser.close();
+}

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

@@ -0,0 +1,141 @@
+// _svg-playwright.mjs — playwright shim for the SVG exporter.
+//
+// Uses `dom-to-svg` (felixfbecker/dom-to-svg) to walk the rendered DOM and
+// emit real SVG primitives — <rect>, <text>, <path>, <image> — that vector
+// editors like Affinity Designer / Illustrator / Inkscape decompose
+// correctly. The previous `<foreignObject>`-wrapping approach (DDR-038)
+// renders pixel-perfect in Chrome but Affinity refuses to import it; see
+// DDR-042 for the swap rationale.
+//
+// Bundled IIFE: exporters/_browser-bundles.ts pre-bundles dom-to-svg via
+// Bun.build, caches the result under /tmp, and passes the path via
+// --bundle-path. The shim loads it with addScriptTag.
+//
+// Invocation (Bun.spawn from exporters/svg.ts — not invoked directly):
+//   node _svg-playwright.mjs --url <url> --selector <css> --out <path>
+//     --bundle-path <iife.js> [--widen-to-artboard] [--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,
+  'bundle-path': bundlePath,
+  'widen-to-artboard': widenFlag,
+  multi: multiFlag,
+  timeout = '12',
+} = args;
+
+if (!url || !bundlePath) {
+  console.error(
+    'usage: _svg-playwright.mjs --url <url> --selector <css> --out <path> --bundle-path <iife.js>'
+  );
+  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 });
+  await page.evaluate(() => document.fonts.ready);
+  // Reset the world plane's CSS zoom + transform so artboards render at
+  // declared dimensions before dom-to-svg walks the layout.
+  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';
+    }
+  });
+  // Inject dom-to-svg into the page. Bundle attaches its exports under
+  // `window.domToSvg`.
+  await page.addScriptTag({ path: bundlePath });
+
+  const written = [];
+
+  const serializeOne = async (handle) => {
+    return await handle.evaluate(
+      async (el, opts) => {
+        const target = opts.widenToArtboard ? (el.closest('[data-dc-screen]') ?? el) : el;
+        // window.domToSvg is the IIFE-injected entry.
+        const { elementToSVG, inlineResources } = /** @type any */ (window).domToSvg;
+        const svgDoc = elementToSVG(target);
+        // base64-embeds fonts + images so the SVG is portable outside the
+        // dev-server origin. Some external fetches fail silently — Affinity
+        // tolerates missing resources better than missing primitives.
+        try {
+          await inlineResources(svgDoc.documentElement);
+        } catch {
+          /* best-effort */
+        }
+        return new XMLSerializer().serializeToString(svgDoc);
+      },
+      { widenToArtboard: opts }
+    );
+  };
+  const opts = { widenToArtboard: widen };
+
+  if (multi) {
+    if (!outDir) {
+      console.error('_svg-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 svg = await handle.evaluate(async (el) => {
+        // window.domToSvg is the IIFE-injected entry.
+        const { elementToSVG, inlineResources, formatXML } = /** @type any */ (window).domToSvg;
+        const svgDoc = elementToSVG(el);
+        try {
+          await inlineResources(svgDoc.documentElement);
+        } catch {
+          /* */
+        }
+        return formatXML(new XMLSerializer().serializeToString(svgDoc));
+      });
+      const target = join(outDir, `${id}.svg`);
+      writeFileSync(target, svg, 'utf8');
+      written.push(target);
+    }
+  } else {
+    if (!out) {
+      console.error('_svg-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 svg = await serializeOne(handle);
+    writeFileSync(out, svg, 'utf8');
+    written.push(out);
+  }
+
+  for (const w of written) console.log(w);
+  console.error(`✓ dom-to-svg wrote ${written.length} svg file(s)`);
+} finally {
+  await browser.close();
+}

package/plugins/design/dev-server/canvas-lib.tsx

@@ -1182,7 +1182,6 @@ function DesignCanvasInner({ children, controls }: DesignCanvasProps) {
   );
 
   const showMiniMap = controls?.minimap !== false;
-  const showToolbar = controls?.toolbar !== false;
 
   // Drag-state bus (Phase 4.2). Single source of truth: only one artboard
   // drag is active at a time. DCArtboards write here when their local drag
@@ -1492,15 +1491,15 @@ const OVERLAY_CSS = `
   bottom: 16px;
   width: 196px;
   height: 132px;
-  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;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  background: var(--bg-2, var(--bg-1, rgba(255,255,255,0.98)));
+  border: 1px solid var(--fg-0, #1c1917);
+  border-radius: 0;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 10px;
-  color: rgba(40,30,20,0.7);
+  color: var(--fg-1, rgba(40,30,20,0.7));
   z-index: 6;
   user-select: none;
-  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
+  box-shadow: 4px 4px 0 var(--fg-0, #1c1917);
   overflow: hidden;
 }
 .dc-mm-hd {
@@ -1534,15 +1533,15 @@ const OVERLAY_CSS = `
   transform: translateX(-50%);
   display: flex;
   align-items: stretch;
-  background: rgba(255,255,255,0.94);
-  border: 1px solid rgba(0,0,0,0.12);
-  border-radius: 6px;
+  background: var(--bg-2, rgba(255,255,255,0.94));
+  border: 1px solid var(--fg-0, #1c1917);
+  border-radius: 0;
   overflow: hidden;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 11px;
-  color: rgba(40,30,20,0.85);
+  color: var(--fg-1, rgba(40,30,20,0.85));
   z-index: 6;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
+  box-shadow: 4px 4px 0 var(--fg-0, #1c1917);
 }
 .dc-zoom-tb button {
   appearance: none;