@1agh/maude 0.23.0 → 0.25.0

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

@@ -135,6 +135,15 @@ export interface Api {
   loadCommentsForFile(file: string): Promise<Comment[]>;
   saveCommentsForFile(file: string, list: Comment[]): Promise<void>;
   loadAllComments(): Promise<Record<string, Comment[]>>;
+  /**
+   * Resolve a canvas URL slug back to its repo-relative `file` path by scanning
+   * the ACTUAL canvas files under each canvas group — independent of whether the
+   * canvas has any comments yet. The inverse of `fileSlug`. Returns null when no
+   * canvas matches. Load-bearing for collab: a peer that has not yet received any
+   * comment for a canvas must still resolve the file to MATERIALIZE the first
+   * hub-pushed comment to disk (the receiving-peer projection gap, DDR-064).
+   */
+  fileForSlug(slug: string): Promise<string | null>;
   commentsAdd(payload: Partial<Comment> & { file: string; text: string }): Promise<Comment | null>;
   commentsPatch(id: string, patch: Partial<Comment>): Promise<Comment | null>;
   commentsDelete(id: string): Promise<boolean>;
@@ -173,6 +182,82 @@ export interface ApiHooks {
   onAnnotationsChanged?: (file: string, svg: string) => void;
 }
 
+/**
+ * Elements the annotation tool legitimately emits (`strokesToSvg` in
+ * annotations-layer.tsx). This is the WHOLE vocabulary — purely presentational.
+ */
+const ANNOTATION_SVG_ELEMENTS = new Set([
+  'svg',
+  'g',
+  'path',
+  'rect',
+  'ellipse',
+  'line',
+  'polyline',
+  // Phase 24 — `polygon` (diamond / triangle shape primitives + closed arrowhead
+  // outlines + diamond heads) and `circle` (circle arrowhead). Inert shape
+  // elements with no script capability — same safety class as the rest.
+  'polygon',
+  'circle',
+  'text',
+]);
+
+/**
+ * A3 (DDR-060 F1 re-audit) — sanitize an annotation SVG before it is persisted /
+ * synced / mirrored into the collab Y.Map. ALLOWLIST, not denylist (the F1
+ * confirming pass showed a denylist loses the race: `<svg:script>` via namespace,
+ * `javascript&#58;` via HTML entity, `<style>@import url()>`, CSS `url(javascript:)`
+ * all slipped a tag-name denylist). Two rules, both keyed to the fixed legit
+ * vocabulary so they're zero-regression on real annotations:
+ *
+ *   1. Element allowlist — drop the markup of any tag whose LOCAL name (namespace
+ *      stripped, so `svg:script` → `script`) isn't in ANNOTATION_SVG_ELEMENTS.
+ *      Dropped-tag text content survives as inert text (not in a script/style
+ *      context), which is harmless.
+ *   2. Attribute denylist on survivors — the legit vocabulary uses none of
+ *      `on*=`, `style=`, or any `href`, so stripping them closes inline handlers,
+ *      CSS `url(javascript:)`, and entity-encoded `xlink:href` in one pass.
+ *
+ * The current consumer (`svgToStrokes` → DOMParser image/svg+xml → structured
+ * strokes → React) never raw-renders this string, so the live XSS risk is already
+ * nil; this keeps "inert" TRUE for any future raw-render consumer and for the
+ * synced file a peer / Claude-context ingests (defense-in-depth, DDR-054 §3).
+ */
+export function sanitizeAnnotationSvg(svg: string): string {
+  return (
+    svg
+      // 1. Remove the CONTENT of executable / instruction-bearing elements (not
+      //    just their tags) so an injected script body / `@import` / prompt-
+      //    injection string can't survive as inert text a future raw-renderer or
+      //    Claude-context read might act on. Namespace-tolerant (`svg:script`),
+      //    non-greedy to the first matching dangerous close tag.
+      .replace(
+        /<\s*(?:[\w-]+:)?(?:script|style|foreignObject|title|desc)\b[\s\S]*?<\s*\/\s*(?:[\w-]+:)?(?:script|style|foreignObject|title|desc)\s*>/gi,
+        ''
+      )
+      // 2. Element allowlist — drop the markup of any tag whose LOCAL name isn't
+      //    in the fixed annotation vocabulary. `[^>]*` stops at the first `>`;
+      //    annotation attrs never contain a literal `>`.
+      .replace(/<\/?\s*([a-zA-Z][\w:-]*)\b[^>]*>/g, (match, rawName: string) => {
+        const local = String(rawName).split(':').pop()?.toLowerCase() ?? '';
+        return ANNOTATION_SVG_ELEMENTS.has(local) ? match : '';
+      })
+      // 3. Attribute denylist on the surviving allowlisted elements — the legit
+      //    vocabulary uses no on*= / style= / *href=, so stripping them closes
+      //    inline handlers, CSS url(javascript:), and entity-encoded hrefs.
+      //    The leading boundary is a LOOKBEHIND on whitespace / quote / slash
+      //    (not a consumed `\s`) so a handler glued to the previous attribute's
+      //    closing quote — `<circle r="2"onload="…"/>`, which HTML/SVG parsers
+      //    accept as a distinct attribute — is also stripped (Phase 24 security
+      //    review, DDR-067). The non-consuming lookbehind leaves the preceding
+      //    quote intact so the legit attribute it belonged to survives.
+      .replace(
+        /(?<=[\s"'/])(?:on[a-z]+|style|(?:[\w-]+:)?href)\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi,
+        ''
+      )
+  );
+}
+
 export function createApi(ctx: Context, hooks: ApiHooks): Api {
   const onCommentsChanged = hooks.onCommentsChanged;
   const onAnnotationsChanged = hooks.onAnnotationsChanged;
@@ -195,6 +280,28 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       .toLowerCase();
   }
 
+  async function fileForSlug(slug: string): Promise<string | null> {
+    // Authoritative slug → canvas-file resolver: enumerate the real canvas
+    // files under each canvas group and match by the canonical slug. Unlike a
+    // comments-file scan, this resolves even when the canvas has NO comments yet
+    // — the fix for the receiving-peer projection gap where a fresh peer could
+    // not locate the file to write the first hub-pushed comment (DDR-064).
+    for (const g of cfg.canvasGroups) {
+      const groupAbs = path.join(paths.designRoot, g.path);
+      const groupRel = path.posix.join(paths.designRel, g.path);
+      let files: string[];
+      try {
+        files = await findHtmlFiles(groupAbs, groupRel);
+      } catch {
+        continue;
+      }
+      for (const rel of files) {
+        if (fileSlug(rel) === slug) return rel;
+      }
+    }
+    return null;
+  }
+
   function commentsPath(file: string): string {
     return path.join(paths.commentsDir, `${fileSlug(file)}.json`);
   }
@@ -586,11 +693,22 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     if (typeof svg !== 'string') return false;
     if (svg.length > 1024 * 1024) return false;
     // Cheap content gate — must look like an <svg> document. Avoids accidental
-    // writes of arbitrary blobs through this endpoint. The client controls the
-    // content fully, so we don't try to sanitize beyond a tag check.
+    // writes of arbitrary blobs through this endpoint.
     if (!/^\s*<svg[\s>]/i.test(svg)) return false;
-    await Bun.write(annotationsPath(file), svg);
-    onAnnotationsChanged?.(file, svg);
+    // A3 (DDR-060 F1 re-audit) — sanitize active content before persisting.
+    // This endpoint is on the canvas-origin allowlist (DDR-054 "inert collab
+    // write") and accepts ANY `file`, so a hub-pushed canvas can write a
+    // sibling's `.annotations.svg`. The persisted SVG is currently consumed only
+    // via `svgToStrokes` (DOMParser image/svg+xml → structured strokes → React
+    // re-render), so a `<script>`/`on*` payload is parsed inertly and discarded
+    // — the stored-XSS chain is LATENT today, not live. We sanitize anyway so
+    // "inert" stays true for any future raw-render consumer and for the synced
+    // file a peer/Claude-context ingests. The legit annotation vocabulary
+    // (strokesToSvg) is purely presentational — path/rect/ellipse/g/line/
+    // polyline/text — so stripping executable constructs is zero-regression.
+    const clean = sanitizeAnnotationSvg(svg);
+    await Bun.write(annotationsPath(file), clean);
+    onAnnotationsChanged?.(file, clean);
     return true;
   }
 
@@ -946,6 +1064,7 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     loadCommentsForFile,
     saveCommentsForFile,
     loadAllComments,
+    fileForSlug,
     commentsAdd,
     commentsPatch,
     commentsDelete,

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

@@ -4,7 +4,7 @@
 // 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';
+import { launchChromium } from './_pw-launch.mjs';
 
 const args = process.argv.slice(2);
 let url;
@@ -24,7 +24,7 @@ if (!url) {
 }
 
 const timeoutMs = timeoutSec * 1000;
-const browser = await chromium.launch();
+const browser = await launchChromium();
 try {
   const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
   const page = await ctx.newPage();

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

@@ -13,7 +13,7 @@
 
 import { mkdirSync, writeFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
-import { chromium } from 'playwright';
+import { launchChromium } from './_pw-launch.mjs';
 
 const args = Object.fromEntries(
   process.argv.slice(2).reduce((acc, cur, i, all) => {
@@ -41,7 +41,7 @@ const widen = widenFlag !== undefined;
 const multi = multiFlag !== undefined;
 const timeoutMs = Number(timeout) * 1000;
 
-const browser = await chromium.launch();
+const browser = await launchChromium();
 try {
   const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
   const page = await ctx.newPage();

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

@@ -11,7 +11,7 @@
 
 import { mkdirSync, writeFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
-import { chromium } from 'playwright';
+import { launchChromium } from './_pw-launch.mjs';
 
 const args = Object.fromEntries(
   process.argv.slice(2).reduce((acc, cur, i, all) => {
@@ -20,17 +20,26 @@ const args = Object.fromEntries(
   }, [])
 );
 
-const { url, selector, out, 'out-dir': outDir, multi: multiFlag, timeout = '12' } = args;
+const {
+  url,
+  selector,
+  out,
+  'out-dir': outDir,
+  'widen-to-artboard': widenFlag,
+  multi: multiFlag,
+  timeout = '12',
+} = args;
 
 if (!url) {
   console.error('usage: _pdf-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();
+const browser = await launchChromium();
 try {
   const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
   const page = await ctx.newPage();
@@ -63,12 +72,20 @@ try {
   });
 
   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.
+    // Widen a descendant selector to its enclosing artboard when requested
+    // (artboard-via-descendant fallback); selection / artboard-by-id targets
+    // pass through unchanged.
+    const handle =
+      widen && !multi
+        ? await screens[i].evaluateHandle((el) => el.closest('[data-dc-screen]') ?? el)
+        : screens[i];
+    // Pin the captured element's own 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 ab = el.closest('[data-dc-screen]') ?? el;
+      ab.style.left = '0px';
+      ab.style.top = '0px';
     });
     const rect = await handle.evaluate((el) => {
       const r = el.getBoundingClientRect();

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

@@ -7,7 +7,7 @@
 
 import { mkdirSync, writeFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
-import { chromium } from 'playwright';
+import { launchChromium } from './_pw-launch.mjs';
 
 const args = Object.fromEntries(
   process.argv.slice(2).reduce((acc, cur, i, all) => {
@@ -37,7 +37,7 @@ 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();
+const browser = await launchChromium();
 try {
   // 1440x900 matches the canvas viewport the design tool uses everywhere;
   // exporters resize per-target before each shot to fit the artboard exactly.
@@ -63,24 +63,24 @@ try {
     // `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')
-    );
+    await page.evaluate(() => {
+      const world = document.querySelector('.dc-world');
+      if (world) {
+        world.style.zoom = '1';
+        world.style.transform = 'none';
+      }
+    });
+    // Pin the captured element's OWN artboard to (0,0). Previously this reset
+    // `[data-dc-screen]:first-of-type` regardless of the target, so capturing
+    // artboard #2 (or any non-first selection's host) left the wrong artboard
+    // at the origin (item 5 root cause). Each artboard carries
+    // `style="left:…; top:…;"` for the world layout — zero the right one so the
+    // screenshot clip starts at the viewport origin.
+    await widenedHandle.evaluate((el) => {
+      const ab = el.closest('[data-dc-screen]') ?? el;
+      ab.style.left = '0px';
+      ab.style.top = '0px';
+    });
     const rect = await widenedHandle.evaluate((el) => {
       const r = el.getBoundingClientRect();
       return { x: r.left, y: r.top, width: r.width, height: r.height };

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

@@ -11,7 +11,7 @@
 
 import { mkdirSync, writeFileSync } from 'node:fs';
 import { dirname } from 'node:path';
-import { chromium } from 'playwright';
+import { launchChromium } from './_pw-launch.mjs';
 
 const args = Object.fromEntries(
   process.argv.slice(2).reduce((acc, cur, i, all) => {
@@ -34,7 +34,7 @@ const timeoutMs = Number(timeout) * 1000;
 
 mkdirSync(dirname(out), { recursive: true });
 
-const browser = await chromium.launch();
+const browser = await launchChromium();
 try {
   const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
   const page = await ctx.newPage();

package/plugins/design/dev-server/bin/_pw-launch.mjs

@@ -0,0 +1,61 @@
+// _pw-launch.mjs — shared Chromium launcher for the export / screenshot shims.
+//
+// Every renderer shim (_png/_pdf/_svg/_html/_pptx/_enumerate-artboards/
+// _screenshot-playwright.mjs) opens a Chromium instance with `chromium.launch()`.
+// Playwright the npm package can be present while its browser BINARY is not — the
+// package install and `npx playwright install chromium` are separate steps, and
+// the dependency check `npx playwright --version` only proves the former. When
+// the binary is missing, `launch()` rejects with a multi-line stack trace that
+// `exporters/*.ts` rethrows and `/_api/export` surfaces verbatim as an opaque
+// 500 ("nefunguji exporty"). This helper funnels that one failure mode through a
+// single place: it prints one actionable line and exits with a distinct code, so
+// the export endpoint's 500 body becomes the remediation instead of a stack. Any
+// OTHER launch error is rethrown untouched — real diagnostics are preserved.
+//
+// See `.ai/logs/rca/issue-nefunguji-exporty.md`.
+
+import { chromium } from 'playwright';
+
+/** Exit code the shims surface for "Chromium browser binary not installed". */
+export const NO_BROWSER_EXIT = 3;
+
+/** One-line, copy-pasteable remediation shown in the export 500 body. */
+export const INSTALL_HINT =
+  "Playwright's Chromium browser isn't installed. Run:  npx playwright install chromium";
+
+/**
+ * True when a `chromium.launch()` rejection is the "browser binary not
+ * downloaded" case (as opposed to a sandbox / port / crash failure). Pure +
+ * exported so it's unit-testable without spawning a browser. Matches the stable
+ * fragments Playwright emits across versions:
+ *   "browserType.launch: Executable doesn't exist at <path>"
+ *   "Please run the following command to download new browsers"
+ *   "playwright install"
+ */
+export function isMissingBrowserError(message) {
+  const m = String(message ?? '');
+  return (
+    /Executable doesn'?t exist/i.test(m) ||
+    /please run the following command to download/i.test(m) ||
+    /playwright install/i.test(m)
+  );
+}
+
+/**
+ * Launch Chromium, mapping the missing-binary failure to a clean exit. Drop-in
+ * for `chromium.launch(opts)` — same signature, same resolved Browser.
+ */
+export async function launchChromium(opts) {
+  try {
+    return await chromium.launch(opts);
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err);
+    if (isMissingBrowserError(msg)) {
+      // Single clean line — the export endpoint pipes shim stderr into the 500
+      // body, so this is what the user reads. No stack trace.
+      console.error(INSTALL_HINT);
+      process.exit(NO_BROWSER_EXIT);
+    }
+    throw err;
+  }
+}

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

@@ -11,7 +11,7 @@
 
 import { mkdirSync } from 'node:fs';
 import { dirname } from 'node:path';
-import { chromium } from 'playwright';
+import { launchChromium } from './_pw-launch.mjs';
 
 const args = Object.fromEntries(
   process.argv.slice(2).reduce((acc, cur, i, all) => {
@@ -31,7 +31,7 @@ if (!url || !out) {
 const timeoutMs = Number(timeout) * 1000;
 mkdirSync(dirname(out), { recursive: true });
 
-const browser = await chromium.launch();
+const browser = await launchChromium();
 try {
   const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
   const page = await ctx.newPage();

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

@@ -18,7 +18,7 @@
 
 import { mkdirSync, writeFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
-import { chromium } from 'playwright';
+import { launchChromium } from './_pw-launch.mjs';
 
 const args = Object.fromEntries(
   process.argv.slice(2).reduce((acc, cur, i, all) => {
@@ -49,7 +49,7 @@ const widen = widenFlag !== undefined;
 const multi = multiFlag !== undefined;
 const timeoutMs = Number(timeout) * 1000;
 
-const browser = await chromium.launch();
+const browser = await launchChromium();
 try {
   const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
   const page = await ctx.newPage();
@@ -74,27 +74,142 @@ try {
 
   const written = [];
 
-  const serializeOne = async (handle) => {
+  // Single in-page serializer used by BOTH branches (single + multi) so they
+  // can't drift again (the `formatXML` 500 bug came from a divergent copy).
+  // Note: dom-to-svg exports only elementToSVG / inlineResources /
+  // documentToSVG — there is NO `formatXML` pretty-printer; serialize straight
+  // to a string. dom-to-svg also does NOT paint the captured root's background
+  // fill, so the artboard's background was dropped (item 4) — we prepend a
+  // backdrop <rect> from the artboard's effective (visible) background color.
+  const serializeOne = async (handle, widenToArtboard) => {
     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;
+
+        // Convert ANY computed color (modern Chromium serializes `oklch(...)`
+        // verbatim from getComputedStyle) to sRGB rgb()/rgba(). Affinity
+        // Designer / older Illustrator / Inkscape don't parse CSS Color 4
+        // (`oklch`, `color()`) and silently drop the fill — the artboard then
+        // shows as transparent (the exact symptom: bg vanished in Affinity).
+        // A 1×1 canvas normalizes any CSS color string to sRGB bytes. Returns
+        // null if the value can't be painted (keep the rect off rather than
+        // emit a wrong colour).
+        const _srgbCache = new Map();
+        const _srgbCanvas = document.createElement('canvas');
+        _srgbCanvas.width = 1;
+        _srgbCanvas.height = 1;
+        const _srgbCtx = _srgbCanvas.getContext('2d');
+        const toSrgb = (color) => {
+          if (_srgbCache.has(color)) return _srgbCache.get(color);
+          let result = null;
+          try {
+            if (_srgbCtx) {
+              _srgbCtx.clearRect(0, 0, 1, 1);
+              _srgbCtx.fillStyle = '#000';
+              _srgbCtx.fillStyle = color; // ignored (stays #000) if syntax unsupported
+              _srgbCtx.fillRect(0, 0, 1, 1);
+              const [r, g, b, a] = _srgbCtx.getImageData(0, 0, 1, 1).data;
+              if (a !== 0) {
+                result =
+                  a === 255
+                    ? `rgb(${r}, ${g}, ${b})`
+                    : `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(3)})`;
+              }
+            }
+          } catch {
+            result = null;
+          }
+          _srgbCache.set(color, result);
+          return result;
+        };
+
+        const isOpaque = (bg) =>
+          !!bg &&
+          bg !== 'transparent' &&
+          !/^rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)$/.test(bg) &&
+          !/^rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0(\.0+)?\s*\)$/.test(bg);
+        // Effective background of the artboard region: the DS theme bg usually
+        // sits on an inner full-bleed wrapper (`.app` / `.mdcc`), occasionally
+        // on the artboard element itself, sometimes on body. Descend first to
+        // find a near-full-bleed opaque bg, then fall back to ancestors. An
+        // intentionally transparent artboard returns null → stays transparent.
+        const effectiveBg = (node) => {
+          const abRect = node.getBoundingClientRect();
+          const abArea = Math.max(1, abRect.width * abRect.height);
+          const queue = [node];
+          let guard = 0;
+          while (queue.length && guard < 80) {
+            const e = queue.shift();
+            guard += 1;
+            const bg = getComputedStyle(e).backgroundColor;
+            if (isOpaque(bg)) {
+              const r = e.getBoundingClientRect();
+              if (r.width * r.height >= abArea * 0.6) return bg;
+            }
+            for (const c of e.children) queue.push(c);
+          }
+          let cur = node.parentElement;
+          let up = 0;
+          while (cur && up < 12) {
+            const bg = getComputedStyle(cur).backgroundColor;
+            if (isOpaque(bg)) return bg;
+            cur = cur.parentElement;
+            up += 1;
+          }
+          return null;
+        };
+
+        const bg = effectiveBg(target);
+        // Normalize to sRGB so the fill survives in vector editors (item 4 /
+        // oklch follow-up). If conversion fails, skip the backdrop rather than
+        // emit an unparseable fill.
+        const fillColor = bg ? toSrgb(bg) : null;
         const svgDoc = elementToSVG(target);
+        const root = svgDoc.documentElement;
+        if (fillColor) {
+          const NS = 'http://www.w3.org/2000/svg';
+          const rect = svgDoc.createElementNS(NS, 'rect');
+          const vb = (root.getAttribute('viewBox') || '').split(/\s+/).map(Number);
+          if (vb.length === 4 && vb.every((n) => !Number.isNaN(n))) {
+            rect.setAttribute('x', String(vb[0]));
+            rect.setAttribute('y', String(vb[1]));
+            rect.setAttribute('width', String(vb[2]));
+            rect.setAttribute('height', String(vb[3]));
+          } else {
+            rect.setAttribute('x', '0');
+            rect.setAttribute('y', '0');
+            rect.setAttribute('width', '100%');
+            rect.setAttribute('height', '100%');
+          }
+          rect.setAttribute('fill', fillColor);
+          root.insertBefore(rect, root.firstChild);
+        }
         // 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);
+          await inlineResources(root);
         } catch {
           /* best-effort */
         }
-        return new XMLSerializer().serializeToString(svgDoc);
+        let out = new XMLSerializer().serializeToString(svgDoc);
+        // dom-to-svg copies computed colours through VERBATIM, and modern
+        // Chromium serializes DS tokens as `oklch(...)` — Affinity Designer /
+        // older Illustrator / Inkscape can't parse CSS Color 4 and drop every
+        // such fill/stroke (the artboard bg + many element colours vanish).
+        // Rewrite every CSS Color 4 colour function (oklch/oklab/lch/lab/color)
+        // anywhere in the serialized SVG to its sRGB rgb()/rgba() equivalent.
+        // Each token is a standalone colour (no nested parens), so a single
+        // `\([^)]*\)` match is safe; toSrgb returns null on an unconvertible
+        // value and we keep the original rather than corrupt it.
+        out = out.replace(/(?:oklch|oklab|lch|lab|color)\([^)]*\)/gi, (m) => toSrgb(m) || m);
+        return out;
       },
-      { widenToArtboard: opts }
+      { widenToArtboard }
     );
   };
-  const opts = { widenToArtboard: widen };
 
   if (multi) {
     if (!outDir) {
@@ -106,17 +221,8 @@ try {
     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));
-      });
+      // Each multi handle is already a `[data-dc-screen]` artboard — no widen.
+      const svg = await serializeOne(handle, false);
       const target = join(outDir, `${id}.svg`);
       writeFileSync(target, svg, 'utf8');
       written.push(target);
@@ -129,7 +235,7 @@ try {
     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);
+    const svg = await serializeOne(handle, widen);
     writeFileSync(out, svg, 'utf8');
     written.push(out);
   }

package/plugins/design/dev-server/bin/preflight.sh

@@ -13,9 +13,16 @@
 #   preflight.sh --warn-only        # same as --quiet (SessionStart hook)
 #
 # Resolution (DDR-045): never compute paths from `dirname $0` inside a
-# `bun --compile` standalone binary — that maps to /$bunfs/root. The CLI
-# entry stays Node, so we resolve via $CLAUDE_PLUGIN_ROOT first, with the
-# script-dir fallback only used when running uncompiled from the repo.
+# `bun --compile` standalone binary — that maps to /$bunfs/root.
+#
+# Resolution (DDR-061): in a MARKETPLACE install the plugin is copied alone into
+# `cache/<marketplace>/<plugin>/<version>/` — there is NO sibling `$PKG_ROOT/cli/`.
+# So: use the sibling `cli/lib` when it exists (running uncompiled from the repo
+# or an npm package, where cli/ is present); otherwise reach the check through
+# the on-PATH `maude` binary (a declared plugin dependency), which resolves the
+# manifest from its own package root. Fixing a straggler — the relative-path
+# crash (`Cannot find module …/cache/maude/cli/lib/preflight.mjs`) that the cache
+# steps already avoid by calling on-PATH `maude`.
 #
 # Exit: 0 if all hard deps pass; 1 otherwise.
 
@@ -23,10 +30,14 @@ SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
 PLUGIN_ROOT="${CLAUDE_PLUGIN_ROOT:-$(cd "$SCRIPT_DIR/../.." && pwd)}"
 PKG_ROOT="$(cd "$PLUGIN_ROOT/../.." && pwd)"
 
-# The Node lib needs cwd to be the package root (it resolves dependencies.json
-# via `plugins/<plugin>/dependencies.json`). Subshell so we don't mutate the
-# caller's cwd.
-(
-  cd "$PKG_ROOT" || exit 1
-  exec node "$PKG_ROOT/cli/lib/preflight.mjs" --plugin design "$@"
-)
+if [ -f "$PKG_ROOT/cli/lib/preflight.mjs" ]; then
+  # Sibling cli/ present (repo / npm package). The Node lib needs cwd = package
+  # root (it resolves `plugins/<plugin>/dependencies.json`). Subshell preserves
+  # the caller's cwd.
+  ( cd "$PKG_ROOT" || exit 1; exec node "$PKG_ROOT/cli/lib/preflight.mjs" --plugin design "$@" )
+elif command -v maude >/dev/null 2>&1; then
+  exec maude preflight --plugin design "$@"
+else
+  echo "preflight: no cli/lib beside the plugin and 'maude' not on PATH — install maude (npm i -g @1agh/maude)." >&2
+  exit 1
+fi