@1agh/maude 0.24.0 → 0.25.0

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

@@ -194,6 +194,11 @@ const ANNOTATION_SVG_ELEMENTS = new Set([
   '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',
 ]);
 
@@ -240,7 +245,16 @@ export function sanitizeAnnotationSvg(svg: string): string {
       // 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.
-      .replace(/\s(?:on[a-z]+|style|(?:[\w-]+:)?href)\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, '')
+      //    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,
+        ''
+      )
   );
 }
 

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