@1agh/maude 1.0.5 → 1.0.7

package/apps/studio/bin/_png-playwright.mjs

@@ -84,10 +84,13 @@ try {
   // failure, so the success path and desktop output are unchanged.
   const diag = [];
   page.on('console', (m) => {
-    if (m.type() === 'error' || m.type() === 'warning') diag.push(`console.${m.type()}: ${m.text()}`);
+    if (m.type() === 'error' || m.type() === 'warning')
+      diag.push(`console.${m.type()}: ${m.text()}`);
   });
   page.on('pageerror', (e) => diag.push(`pageerror: ${e.message}`));
-  page.on('requestfailed', (r) => diag.push(`requestfailed: ${r.url()} — ${r.failure()?.errorText ?? '?'}`));
+  page.on('requestfailed', (r) =>
+    diag.push(`requestfailed: ${r.url()} — ${r.failure()?.errorText ?? '?'}`)
+  );
   try {
     await page.goto(url, { waitUntil: 'load', timeout: timeoutMs });
   } catch (e) {

package/apps/studio/bin/_svg-playwright.mjs

@@ -33,14 +33,16 @@ const {
   out,
   'out-dir': outDir,
   'bundle-path': bundlePath,
+  'core-path': corePath,
   'widen-to-artboard': widenFlag,
   multi: multiFlag,
   timeout = '12',
 } = args;
 
-if (!url || !bundlePath) {
+if (!url || !bundlePath || !corePath) {
   console.error(
-    'usage: _svg-playwright.mjs --url <url> --selector <css> --out <path> --bundle-path <iife.js>'
+    'usage: _svg-playwright.mjs --url <url> --selector <css> --out <path> ' +
+      '--bundle-path <iife.js> --core-path <capture-core.js>'
   );
   process.exit(2);
 }
@@ -71,9 +73,15 @@ try {
       world.style.transform = 'none';
     }
   });
-  // Inject dom-to-svg into the page. Bundle attaches its exports under
-  // `window.domToSvg`.
+  // Inject dom-to-svg (IIFE — attaches `window.domToSvg`) and the SHARED
+  // capture spine (module — attaches `window.__maudeCaptureCore`). The core is
+  // the SAME source the canvas runtime's export-capture bridge imports
+  // (exporters/capture-core.ts, DDR-231 single-spine): the serializer logic
+  // must never be re-inlined here — it forked once and the browser lane would
+  // silently drift from this shim.
   await page.addScriptTag({ path: bundlePath });
+  await page.addScriptTag({ path: corePath, type: 'module' });
+  await page.waitForFunction(() => !!window.__maudeCaptureCore, { timeout: timeoutMs });
 
   const written = [];
 
@@ -82,155 +90,28 @@ try {
   // multi-target loop must not leave an already-captured artboard sitting at
   // the origin, overlapping the next target's geometry (the scatter bug).
   const pinArtboard = async (handle) => {
-    const saved = await handle.evaluate((el) => {
-      const ab = el.closest('[data-dc-screen]') ?? el;
-      const prev = { left: ab.style.left, top: ab.style.top };
-      ab.style.left = '0px';
-      ab.style.top = '0px';
-      return prev;
-    });
+    const saved = await handle.evaluate((el) => window.__maudeCaptureCore.pinArtboard(el));
     return async () => {
-      await handle.evaluate((el, prev) => {
-        const ab = el.closest('[data-dc-screen]') ?? el;
-        ab.style.left = prev.left;
-        ab.style.top = prev.top;
-      }, saved);
+      await handle.evaluate(
+        (el, prev) => window.__maudeCaptureCore.restoreArtboard(el, prev),
+        saved
+      );
     };
   };
 
   // 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.
+  // The ENTIRE capture logic (backdrop rect from the effective background,
+  // oklch→sRGB normalization for vector editors, inlineResources) lives in the
+  // shared capture spine (exporters/capture-core.ts) injected above — the same
+  // code the canvas runtime's export-capture bridge runs in the member's
+  // browser (DDR-231). Nothing capture-shaped may be inlined here again.
   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(root);
-        } catch {
-          /* best-effort */
-        }
-        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;
-      },
+      (el, opts) =>
+        window.__maudeCaptureCore.svgForElement(el, window.domToSvg, {
+          widenToArtboard: opts.widenToArtboard,
+        }),
       { widenToArtboard }
     );
   };

package/apps/studio/canvas-lib.tsx

@@ -124,6 +124,15 @@ import {
   diffLayoutPositions,
 } from './commands/move-artboards-command.ts';
 import { scopedCdSelector, selectorIndex, shortText } from './dom-selection.ts';
+import {
+  type DomToSvgApi,
+  pinArtboard,
+  rasterizeSvg,
+  resetWorldPlane,
+  restoreArtboard,
+  restoreWorldPlane,
+  svgForElement,
+} from './exporters/capture-core.ts';
 // Photo editor (feature-photo-editor) — schema.ts is DEPENDENCY-FREE (no pixi),
 // so this static import is safe and adds zero bundle cost. The WebGL compositor
 // (photo/pipeline.ts, which imports pixi.js) is loaded via a DYNAMIC import
@@ -1787,8 +1796,128 @@ export function DesignCanvas(props: DesignCanvasProps) {
 }
 DesignCanvas.displayName = 'DesignCanvas';
 
+// DDR-231 (hybrid export lanes) — the workspace `browser` export lane.
+//
+// In workspace mode the studio shell cannot capture the canvas itself: the
+// iframe is a separate (untrusted, DDR-054) origin, unreachable by DOM from
+// the shell. So the SHELL ASKS and the CANVAS CAPTURES — this bridge listens
+// for an `export-capture` postMessage from the embedding parent, renders the
+// requested artboards through the shared capture spine (capture-core.ts — the
+// same code the playwright SVG shim injects, DDR-231's single-spine rule) and
+// replies with per-artboard Blobs (structured-clonable across the origin
+// split). dom-to-svg loads LAZILY through the importmap (`dom-to-svg` runtime
+// bundle — the pixi.js pattern), so a canvas that never exports pays zero
+// bundle cost.
+//
+// Capture mutates live DOM (world zoom reset + artboard pinned to origin) and
+// restores everything afterwards — the member is looking at this plane. The
+// shell overlays a veil during capture to cover the brief reflow.
+function useExportCaptureBridge() {
+  useEffect(() => {
+    if (typeof window === 'undefined' || window.parent === window) return;
+    let busy = false;
+    const onMsg = (e: MessageEvent) => {
+      // Only the embedding shell may drive capture — a message from any other
+      // window (a nested iframe, an opened popup) is ignored outright.
+      if (e.source !== window.parent) return;
+      const m = e.data as {
+        dgn?: string;
+        id?: unknown;
+        format?: unknown;
+        artboardIds?: unknown;
+        scale?: unknown;
+      } | null;
+      if (!m || m.dgn !== 'export-capture' || typeof m.id !== 'string') return;
+      const requestId = m.id;
+      // DDR-231 security (L1): reply to the ASKING origin, never `'*'`. The
+      // done-message carries the rendered artboard blobs; a wildcard target
+      // would leak them to whatever page happens to be the parent if the
+      // shell's `frame-ancestors` CSP were ever absent (tests / misconfig).
+      // `e.origin` here is the embedding shell (we already gated
+      // `e.source === window.parent`); fall back to `'*'` only for an opaque
+      // `"null"` origin where a targeted post is impossible.
+      const replyOrigin = e.origin && e.origin !== 'null' ? e.origin : '*';
+      const reply = (msg: Record<string, unknown>) => {
+        try {
+          window.parent.postMessage(msg, replyOrigin);
+        } catch {
+          /* parent gone — nothing to deliver to */
+        }
+      };
+      if (busy) {
+        reply({
+          dgn: 'export-capture-error',
+          id: requestId,
+          message: 'a capture is already running on this canvas',
+        });
+        return;
+      }
+      busy = true;
+      const format = m.format === 'svg' ? 'svg' : 'png';
+      const scale = Math.max(1, Math.min(8, Number(m.scale) || 1));
+      const wanted = Array.isArray(m.artboardIds)
+        ? m.artboardIds.filter((s): s is string => typeof s === 'string')
+        : null;
+      void (async () => {
+        const savedWorld = resetWorldPlane();
+        try {
+          const all = Array.from(document.querySelectorAll('[data-dc-screen]'));
+          const targets = wanted?.length
+            ? all.filter((el) => wanted.includes(el.getAttribute('data-dc-screen') ?? ''))
+            : all;
+          if (!targets.length) throw new Error('no artboards matched the capture request');
+          const api = (await import('dom-to-svg')) as unknown as DomToSvgApi;
+          const items: { name: string; type: string; blob: Blob }[] = [];
+          for (let i = 0; i < targets.length; i += 1) {
+            const el = targets[i] as Element;
+            const abId = el.getAttribute('data-dc-screen') || `artboard-${i + 1}`;
+            const prevPos = pinArtboard(el);
+            try {
+              const svg = await svgForElement(el, api);
+              if (format === 'svg') {
+                items.push({
+                  name: `${abId}.svg`,
+                  type: 'image/svg+xml',
+                  blob: new Blob([svg], { type: 'image/svg+xml' }),
+                });
+              } else {
+                items.push({
+                  name: `${abId}.png`,
+                  type: 'image/png',
+                  blob: await rasterizeSvg(svg, scale),
+                });
+              }
+            } finally {
+              restoreArtboard(el, prevPos);
+            }
+            reply({
+              dgn: 'export-capture-progress',
+              id: requestId,
+              current: i + 1,
+              total: targets.length,
+            });
+          }
+          reply({ dgn: 'export-capture-done', id: requestId, items });
+        } catch (err) {
+          reply({
+            dgn: 'export-capture-error',
+            id: requestId,
+            message: err instanceof Error ? err.message : String(err),
+          });
+        } finally {
+          restoreWorldPlane(savedWorld);
+          busy = false;
+        }
+      })();
+    };
+    window.addEventListener('message', onMsg);
+    return () => window.removeEventListener('message', onMsg);
+  }, []);
+}
+
 function DesignCanvasInner({ children, controls }: DesignCanvasProps) {
   ensureEngineStyles();
+  useExportCaptureBridge();
 
   const hostRef = useRef<HTMLDivElement | null>(null);
   const worldRef = useRef<HTMLDivElement | null>(null);