@1agh/maude 0.45.1 → 0.46.0

package/apps/studio/artboard-guides-overlay.tsx

@@ -0,0 +1,270 @@
+/**
+ * @file       artboard-guides-overlay.tsx — feature-1-artboard-kinds-foundation, T4.
+ * @scope      apps/studio/artboard-guides-overlay.tsx
+ * @purpose    Render-only chrome for an artboard's guides/marks — Figma-vocabulary
+ *             generic layout guides (columns/rows/grid, T5) plus a per-kind
+ *             content registry that downstream plans hang kind-specific chrome
+ *             off of (feature-2-print-artboards: bleed/trim/margin/marks;
+ *             feature-3-web-artboards: breakpoint band). Rendered by DCArtboard
+ *             as a world-coord sibling of the `<article>` — same mount pattern
+ *             as `ArtboardActivityOverlay` — so it pans/zooms with the artboard
+ *             for free WITHOUT living inside `.dc-artboard`'s
+ *             `contain:paint`/`content-visibility` subtree (that subtree exists
+ *             to cull/freeze exported artboard CONTENT; guides are never
+ *             exported/screenshotted and must never be culled with it).
+ *
+ * Decorative — `aria-hidden` + `pointer-events:none`, flat divs only (no
+ * filters/blends/gradients — Design Decision 2: WebKit does not
+ * GPU-accelerate those, and this layer sits on top of every artboard on a
+ * dense canvas).
+ */
+
+import type { ReactNode } from 'react';
+
+import type { ArtboardKind } from './canvas-lib.tsx';
+import type { ArtboardPrintProp } from './print/units.ts';
+
+export interface OverlayRect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+/** One axis of the Figma "columns"/"rows" layout-guide vocabulary. */
+export interface BandGuideDef {
+  count: number;
+  gutter: number;
+  margin: number;
+}
+
+export interface GridGuideDef {
+  /** World-unit spacing between grid lines. */
+  size: number;
+}
+
+/**
+ * Generic layout guides (T5) — versioned design intent (a JSX prop on
+ * DCArtboard), kind-agnostic: any artboard can carry columns/rows/grid
+ * regardless of its `kind`.
+ */
+export interface GuideDefinitions {
+  columns?: BandGuideDef;
+  rows?: BandGuideDef;
+  grid?: GridGuideDef;
+}
+
+/**
+ * Per-user show/hide state (T6) — lives in `_canvas-state/<slug>.view.json`
+ * (existing runtime file), never in the versioned `.meta.json`. A flat bag,
+ * not just a `guides` boolean, so downstream plans can add their own keys
+ * (`bleed`, `breakpoints`, …) without a schema change here.
+ */
+export interface OverlayVisibility {
+  guides?: boolean;
+  [key: string]: boolean | undefined;
+}
+
+export interface KindOverlayProps {
+  rect: OverlayRect;
+  kind: ArtboardKind;
+  guides?: GuideDefinitions;
+  /** feature-2-print-artboards T2/T3 — the artboard's `print` JSX prop, when
+   *  present. Only meaningful to the 'print' kind's registered renderer. */
+  print?: ArtboardPrintProp;
+  visibility: OverlayVisibility;
+}
+
+export type KindOverlayRenderFn = (props: KindOverlayProps) => ReactNode;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Per-kind content registry. Foundation registers nothing here — the generic
+// guides below already apply to every kind. feature-2-print-artboards /
+// feature-3-web-artboards call `registerKindOverlay` at module load to hang
+// their own kind-specific chrome off the same mount point.
+
+const kindOverlayRegistry = new Map<ArtboardKind, KindOverlayRenderFn>();
+
+/**
+ * Register additional overlay content for one artboard kind. Last call for a
+ * given kind wins — safe to re-call on HMR (module re-eval re-registers).
+ */
+export function registerKindOverlay(kind: ArtboardKind, renderFn: KindOverlayRenderFn): void {
+  kindOverlayRegistry.set(kind, renderFn);
+}
+
+/** Test-only: clear the registry between test files (module-scoped Map would
+ *  otherwise leak registrations across `bun test`'s shared module graph). */
+export function __resetKindOverlayRegistryForTests(): void {
+  kindOverlayRegistry.clear();
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Generic guides (T5) — Figma vocabulary. Columns/rows render as translucent
+// violet bands (Figma's own default), grid renders as red hairlines @ 10%
+// opacity. Chrome-engine constants, not DS tokens — guides are never part of
+// exported artboard content, same reasoning as SnapGuideOverlay's hardcoded
+// magenta/gray.
+const COLUMN_FILL = 'color-mix(in oklab, oklch(62% 0.19 300) 14%, transparent)';
+const GRID_LINE = 'color-mix(in oklab, oklch(55% 0.22 25) 10%, transparent)';
+
+/** Safety bound, not a coverage cap — guards against a pathological
+ *  `grid.size` (e.g. 1) turning into thousands of divs on a large artboard. */
+const MAX_GRID_LINES_PER_AXIS = 400;
+
+/**
+ * Safety bound, not a coverage cap — same reasoning as MAX_GRID_LINES_PER_AXIS,
+ * for the columns/rows `count`. `guides` is an artboard-authored JSX prop, so
+ * it's part of the DDR-054 untrusted-canvas surface — a malicious/poisoned
+ * canvas (peer-pushed under phase-30 branch-scoped multiplayer, or a
+ * prompt-injected agent edit) can set `columns.count` to an arbitrary number
+ * with no server-side validation in between (the value never round-trips
+ * through `setArtboardGuidesOp`'s bounds — it's read directly from React
+ * props at render time). An uncapped loop here mounts one `<div>` per band,
+ * so a huge count is a real client-side DoS (viewer tab freeze/OOM), found
+ * independently by both the security-auditor and ethical-hacker passes on
+ * this feature. 64 comfortably exceeds any real layout-guide use.
+ */
+const MAX_BANDS_PER_AXIS = 64;
+
+function computeBands(def: BandGuideDef, extent: number): Array<{ start: number; size: number }> {
+  const count = Math.min(Math.max(0, Math.floor(def.count)), MAX_BANDS_PER_AXIS);
+  if (count <= 0 || extent <= 0) return [];
+  const usable = extent - def.margin * 2;
+  if (usable <= 0) return [];
+  const bandSize = (usable - def.gutter * Math.max(0, count - 1)) / count;
+  if (bandSize <= 0) return [];
+  const bands: Array<{ start: number; size: number }> = [];
+  for (let i = 0; i < count; i++) {
+    bands.push({ start: def.margin + i * (bandSize + def.gutter), size: bandSize });
+  }
+  return bands;
+}
+
+function gridLinePositions(size: number, extent: number): number[] {
+  if (size < 2 || extent <= 0) return [];
+  const out: number[] = [];
+  for (let pos = size; pos < extent && out.length < MAX_GRID_LINES_PER_AXIS; pos += size) {
+    out.push(pos);
+  }
+  return out;
+}
+
+function GenericGuides({ rect, guides }: { rect: OverlayRect; guides: GuideDefinitions }) {
+  const nodes: ReactNode[] = [];
+  if (guides.columns) {
+    for (const b of computeBands(guides.columns, rect.w)) {
+      nodes.push(
+        <div
+          key={`col-${b.start}`}
+          style={{
+            position: 'absolute',
+            left: b.start,
+            top: 0,
+            width: b.size,
+            height: rect.h,
+            background: COLUMN_FILL,
+          }}
+        />
+      );
+    }
+  }
+  if (guides.rows) {
+    for (const b of computeBands(guides.rows, rect.h)) {
+      nodes.push(
+        <div
+          key={`row-${b.start}`}
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: b.start,
+            width: rect.w,
+            height: b.size,
+            background: COLUMN_FILL,
+          }}
+        />
+      );
+    }
+  }
+  if (guides.grid) {
+    for (const x of gridLinePositions(guides.grid.size, rect.w)) {
+      nodes.push(
+        <div
+          key={`gx-${x}`}
+          style={{
+            position: 'absolute',
+            left: x,
+            top: 0,
+            width: 1,
+            height: rect.h,
+            background: GRID_LINE,
+          }}
+        />
+      );
+    }
+    for (const y of gridLinePositions(guides.grid.size, rect.h)) {
+      nodes.push(
+        <div
+          key={`gy-${y}`}
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: y,
+            width: rect.w,
+            height: 1,
+            background: GRID_LINE,
+          }}
+        />
+      );
+    }
+  }
+  return <>{nodes}</>;
+}
+GenericGuides.displayName = 'GenericGuides';
+
+/**
+ * The mount point DCArtboard renders as a world-coord sibling of its
+ * `<article>`. Renders nothing when there's neither a visible generic guide
+ * definition nor a registered kind-specific renderer — so the common case
+ * (no `guides` prop, no downstream plan loaded yet) costs one map lookup and
+ * no extra DOM.
+ */
+export function ArtboardGuidesOverlay({ rect, kind, guides, print, visibility }: KindOverlayProps) {
+  const KindContent = kindOverlayRegistry.get(kind);
+  // T6 Gotcha — a view.json predating the `overlays` lane has no `guides`
+  // key at all; that absence must resolve to HIDDEN, not shown, so opening
+  // an old canvas doesn't suddenly paint guides nobody asked to see. Only an
+  // explicit `true` (the View-menu toggle) shows them.
+  const showGenericGuides = visibility.guides === true && !!guides;
+  if (!showGenericGuides && !KindContent) return null;
+  return (
+    <div
+      className="dc-artboard-guides"
+      aria-hidden="true"
+      style={{
+        position: 'absolute',
+        left: rect.x,
+        top: rect.y,
+        width: rect.w,
+        height: rect.h,
+        overflow: 'hidden',
+        pointerEvents: 'none',
+      }}
+    >
+      {showGenericGuides && guides ? <GenericGuides rect={rect} guides={guides} /> : null}
+      {/* Kind-specific renderers see the full, ungated `visibility` bag and
+          decide their own show/hide (e.g. print's bleed toggle is a
+          different key than `guides`). */}
+      {KindContent ? (
+        <KindContent
+          rect={rect}
+          kind={kind}
+          guides={guides}
+          print={print}
+          visibility={visibility}
+        />
+      ) : null}
+    </div>
+  );
+}
+ArtboardGuidesOverlay.displayName = 'ArtboardGuidesOverlay';

package/apps/studio/bin/_import-asset.mjs

@@ -248,11 +248,41 @@ export function svgPreParseReject(text) {
   if (encMatch && !/^(utf-8|us-ascii|ascii)$/i.test(encMatch[1])) {
     throw new ImportAssetError(3, `unsupported declared encoding: ${encMatch[1]}`);
   }
-  if (/<!DOCTYPE/i.test(text) || /<!ENTITY/i.test(text)) {
-    throw new ImportAssetError(
-      3,
-      'DOCTYPE/ENTITY declarations are rejected (XXE/entity-expansion class)'
-    );
+  // XXE / entity-expansion hardening. The attack surface is an ENTITY
+  // declaration or an internal DTD subset (`<!DOCTYPE svg [ … ]>`, where entities
+  // are declared) — NOT a plain external-identifier DOCTYPE. Adobe Illustrator,
+  // Affinity/Serif, and Inkscape all emit a benign `<!DOCTYPE svg PUBLIC "-//W3C//
+  // DTD SVG 1.1//EN" "…svg11.dtd">` with no internal subset; rejecting that whole
+  // class turned away real, clean brand logos (RCA G8). Reject the actual vector,
+  // allow the benign declaration (the allowlist sanitizer drops the DOCTYPE from
+  // the stored output regardless, and happy-dom treats the DOCTYPE as an inert
+  // node — it never fetches an external DTD). See DDR-167 + DDR-177.
+  if (/<!ENTITY/i.test(text)) {
+    throw new ImportAssetError(3, 'ENTITY declarations are rejected (XXE/entity-expansion class)');
+  }
+  // Internal-subset detection, quote-aware. A naive `/<!DOCTYPE\b(.*?)>/` is
+  // evadable: a `>` inside a quoted external-id literal (`SYSTEM "http://x/>y"
+  // [ … ]`) truncates the capture before the `[` (ethical-hacker review). Scan
+  // from `<!DOCTYPE` respecting quotes, and reject on a `[` (internal subset)
+  // reached before the closing `>`.
+  const dtStart = text.search(/<!DOCTYPE\b/i);
+  if (dtStart >= 0) {
+    let quote = null;
+    for (let i = dtStart + 9; i < text.length; i++) {
+      const c = text[i];
+      if (quote) {
+        if (c === quote) quote = null;
+      } else if (c === '"' || c === "'") {
+        quote = c;
+      } else if (c === '[') {
+        throw new ImportAssetError(
+          3,
+          'DOCTYPE with an internal subset is rejected (XXE/entity-expansion class)'
+        );
+      } else if (c === '>') {
+        break; // end of DOCTYPE, no internal subset seen
+      }
+    }
   }
   // Any processing instruction other than the single leading XML declaration.
   const piRe = /<\?([^?]*)\?>/g;

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

@@ -5,13 +5,26 @@
 // Per DDR-041 (PDF via page.pdf()): print-media emulation, font readiness
 // wait, explicit page size matching the artboard rect.
 //
+// feature-2-print-artboards T5 (dogfood follow-up) — a "vector PDF" is only
+// vector for TEXT and drawn shapes; any raster <img>/<canvas> content on the
+// artboard (a photo dropped onto a flyer, a large-format billboard authored
+// at a small on-screen scale) still embeds as a bitmap, and that bitmap's
+// pixel density is set by the CAPTURING context's deviceScaleFactor — 1× by
+// default, which looks fine on screen but is visibly soft once printed large
+// (e.g. a design authored at 1:10 scale for a billboard). `--scale` sets the
+// context's deviceScaleFactor before `page.pdf()` runs, exactly like
+// _png-playwright.mjs, so embedded raster content captures at print density
+// while vector text/shapes stay crisp regardless (they're never rasterized).
+// Page SIZE (in pt) is unaffected — it always comes from the artboard's own
+// rect, not from this scale.
+//
 // 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]
+//     [--multi] [--out-dir <dir>] [--timeout 12] [--scale 3.125]
 
 import { mkdirSync, writeFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
-import { launchChromium } from './_pw-launch.mjs';
+import { assertRenderOutputSizeOk, launchChromium, safeArtboardFilename } from './_pw-launch.mjs';
 
 const args = Object.fromEntries(
   process.argv.slice(2).reduce((acc, cur, i, all) => {
@@ -28,6 +41,7 @@ const {
   'widen-to-artboard': widenFlag,
   multi: multiFlag,
   timeout = '12',
+  scale = '1',
 } = args;
 
 if (!url) {
@@ -38,10 +52,21 @@ if (!url) {
 const widen = widenFlag !== undefined;
 const multi = multiFlag !== undefined;
 const timeoutMs = Number(timeout) * 1000;
+// Same ceiling as _png-playwright.mjs's raised T4 ceiling (600dpi = 6.25×).
+// The PDF *page* stays vector-sized regardless of this factor (only raster
+// CONTENT density scales with it — see the file header) — but Chromium's
+// rendering/rasterization surface for `page.pdf()` scales with
+// deviceScaleFactor exactly like a screenshot buffer does, so the same
+// output-size guard as PNG's DOES apply here (see assertRenderOutputSizeOk
+// call below); a huge artboard + high DPI is just as costly to render.
+const deviceScaleFactor = Math.max(1, Math.min(8, Number(scale) || 1));
 
 const browser = await launchChromium();
 try {
-  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
+  const ctx = await browser.newContext({
+    viewport: { width: 1440, height: 900 },
+    deviceScaleFactor,
+  });
   const page = await ctx.newPage();
   await page.goto(url, { waitUntil: 'load', timeout: timeoutMs });
   // Wait for web fonts so `@font-face` glyphs land in the PDF instead of
@@ -102,9 +127,15 @@ try {
       const r = el.getBoundingClientRect();
       return { w: r.width, h: r.height, x: r.left, y: r.top };
     });
+    assertRenderOutputSizeOk(rect.w, rect.h, deviceScaleFactor, '_pdf-playwright');
+    // feature-2-print-artboards T5 — name multi output by the artboard's
+    // OWN id (mirrors _png-playwright.mjs's multi-write scheme) rather than
+    // a positional index, so the PDF post-pass can correlate each written
+    // file back to its artboard's `print` prop via the filename alone.
+    const screenId = multi ? await screens[i].getAttribute('data-dc-screen') : null;
     // 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;
+    const targetPath = multi ? join(outDir, safeArtboardFilename(screenId, i, '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({

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

@@ -7,7 +7,7 @@
 
 import { mkdirSync } from 'node:fs';
 import { dirname, join } from 'node:path';
-import { launchChromium } from './_pw-launch.mjs';
+import { launchChromium, safeArtboardFilename } from './_pw-launch.mjs';
 
 const args = Object.fromEntries(
   process.argv.slice(2).reduce((acc, cur, i, all) => {
@@ -35,7 +35,38 @@ if (!url) {
 const widen = widenFlag !== undefined;
 const multi = multiFlag !== undefined;
 const timeoutMs = Number(timeout) * 1000;
-const deviceScaleFactor = Math.max(1, Math.min(4, Number(scale) || 1));
+// feature-2-print-artboards T4 — ceiling raised 4→8 so a 300dpi export
+// (3.125×) AND 600dpi (6.25×) both fit; exporters/png.ts resolveDeviceScale
+// is the only caller that can reach beyond 3, via the `dpi` option.
+const deviceScaleFactor = Math.max(1, Math.min(8, Number(scale) || 1));
+// feature-2-print-artboards T4 — a raster export's actual pixel dimensions
+// are only known once the target element's DOM rect is measured below (the
+// adapter can't pre-compute them — see png.ts's own comment), so the "too
+// big to render" guard lives here rather than in the Node-side adapter.
+// 16,000px matches common canvas/texture limits across browser engines;
+// ~600MB is a generous RGBA-buffer ceiling (width × height × 4 bytes) well
+// under typical CI/desktop RAM, chosen so a legitimate 600dpi A0 poster still
+// fits (9933×14043px × 4B ≈ 558MB) while a runaway value fails loud instead
+// of OOM-killing the render process.
+const MAX_OUTPUT_SIDE_PX = 16000;
+const MAX_OUTPUT_BYTES = 600 * 1024 * 1024;
+function assertOutputSizeOk(widthCss, heightCss) {
+  const outW = Math.ceil(widthCss * deviceScaleFactor);
+  const outH = Math.ceil(heightCss * deviceScaleFactor);
+  const estBytes = outW * outH * 4;
+  if (outW > MAX_OUTPUT_SIDE_PX || outH > MAX_OUTPUT_SIDE_PX || estBytes > MAX_OUTPUT_BYTES) {
+    const maxScaleForSide = MAX_OUTPUT_SIDE_PX / Math.max(widthCss, heightCss);
+    const maxScaleForBytes = Math.sqrt(MAX_OUTPUT_BYTES / 4 / (widthCss * heightCss));
+    const maxScale = Math.min(maxScaleForSide, maxScaleForBytes);
+    const maxDpi = Math.floor(maxScale * 96);
+    console.error(
+      `_png-playwright: requested output ${outW}×${outH}px at ${deviceScaleFactor}× exceeds the ` +
+        `render guard (max side ${MAX_OUTPUT_SIDE_PX}px / max ~${Math.round(MAX_OUTPUT_BYTES / 1024 / 1024)}MB). ` +
+        `For this artboard size (${Math.round(widthCss)}×${Math.round(heightCss)}px), the max supported DPI is ~${maxDpi}.`
+    );
+    process.exit(1);
+  }
+}
 
 const browser = await launchChromium();
 try {
@@ -97,6 +128,9 @@ try {
       const r = el.getBoundingClientRect();
       return { x: r.left, y: r.top, width: r.width, height: r.height };
     });
+    // feature-2-print-artboards T4 — fail loud BEFORE resizing the viewport
+    // to a pathological size, not after.
+    assertOutputSizeOk(rect.width, rect.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.
@@ -141,8 +175,8 @@ try {
     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`));
+      const id = await handle.getAttribute('data-dc-screen');
+      await captureHandle(handle, join(outDir, safeArtboardFilename(id, i, 'png')));
       console.log(`MAUDE_PROGRESS {"current":${i + 1},"total":${screens.length}}`);
     }
   } else {

package/apps/studio/bin/_pw-launch.mjs

@@ -113,3 +113,55 @@ export async function launchChromium(opts) {
     throw err;
   }
 }
+
+// Shared by every multi-artboard export shim (_png/_pdf-playwright.mjs) that
+// names its output file after an artboard's `data-dc-screen` id for T5's
+// filename-correlation convenience. That id comes straight off a live DOM
+// attribute — i.e. from canvas-authored JSX, DDR-054 untrusted content — and
+// feeds directly into `path.join(outDir, ...)`, which does NOT sandbox `..`
+// segments. Re-validates against the SAME shape api.ts's write-side artboard-id
+// ops already enforce (`/^[A-Za-z][\w-]{0,63}$/`) before it's ever used as a
+// path segment; anything else (or a `false`y id) falls back to the safe
+// positional name so a malformed/malicious id can never escape `outDir`.
+const SAFE_ARTBOARD_ID_RE = /^[A-Za-z][\w-]{0,63}$/;
+export function safeArtboardFilename(id, index, ext) {
+  const safe =
+    typeof id === 'string' && SAFE_ARTBOARD_ID_RE.test(id) ? id : `artboard-${index + 1}`;
+  return `${safe}.${ext}`;
+}
+
+// Shared by every raster-capture export shim (_png/_pdf-playwright.mjs) that
+// scales its render surface by `deviceScaleFactor` (feature-2-print-artboards
+// T4's DPI support). The requested pixel output is only knowable once the
+// target element's DOM rect is measured (the Node-side adapter can't
+// pre-compute it), so this guard lives here rather than in exporters/*.ts.
+// Applies EQUALLY to the PDF shim: `deviceScaleFactor` scales Chromium's
+// whole rendering/rasterization surface for `page.pdf()` too, not just PNG's
+// screenshot buffer — the PDF *page* stays vector-sized regardless, but the
+// backing store Chromium allocates to paint it does not, so a huge
+// artboard + high DPI is exactly as costly to render as it is for PNG, even
+// though the resulting PDF bytes are typically far smaller than a raw PNG
+// buffer. 16,000px matches common canvas/texture limits across browser
+// engines; ~600MB is a generous RGBA-buffer ceiling (width × height × 4
+// bytes) chosen so a legitimate 600dpi A0 poster still fits (9933×14043px ×
+// 4B ≈ 558MB) while a runaway value fails loud instead of OOM-killing the
+// render process.
+const MAX_OUTPUT_SIDE_PX = 16000;
+const MAX_OUTPUT_BYTES = 600 * 1024 * 1024;
+export function assertRenderOutputSizeOk(widthCss, heightCss, deviceScaleFactor, label) {
+  const outW = Math.ceil(widthCss * deviceScaleFactor);
+  const outH = Math.ceil(heightCss * deviceScaleFactor);
+  const estBytes = outW * outH * 4;
+  if (outW > MAX_OUTPUT_SIDE_PX || outH > MAX_OUTPUT_SIDE_PX || estBytes > MAX_OUTPUT_BYTES) {
+    const maxScaleForSide = MAX_OUTPUT_SIDE_PX / Math.max(widthCss, heightCss);
+    const maxScaleForBytes = Math.sqrt(MAX_OUTPUT_BYTES / 4 / (widthCss * heightCss));
+    const maxScale = Math.min(maxScaleForSide, maxScaleForBytes);
+    const maxDpi = Math.floor(maxScale * 96);
+    console.error(
+      `${label}: requested output ${outW}×${outH}px at ${deviceScaleFactor}× exceeds the ` +
+        `render guard (max side ${MAX_OUTPUT_SIDE_PX}px / max ~${Math.round(MAX_OUTPUT_BYTES / 1024 / 1024)}MB). ` +
+        `For this artboard size (${Math.round(widthCss)}×${Math.round(heightCss)}px), the max supported DPI is ~${maxDpi}.`
+    );
+    process.exit(1);
+  }
+}

package/apps/studio/bin/_pw-launch.test.mjs

@@ -0,0 +1,90 @@
+// _pw-launch.test.mjs — the pure, security-relevant helpers shared by the
+// multi-artboard export shims (_png/_pdf-playwright.mjs). Regression coverage
+// for the arbitrary-file-write finding fixed in the print-artboards dogfood
+// pass (DDR-182 addendum): a `data-dc-screen` id is DDR-054 untrusted canvas
+// content, and used to be trusted verbatim as a `path.join` segment.
+
+import { describe, expect, test } from 'bun:test';
+import { assertRenderOutputSizeOk, safeArtboardFilename } from './_pw-launch.mjs';
+
+describe('safeArtboardFilename', () => {
+  test('passes a well-formed id through unchanged', () => {
+    expect(safeArtboardFilename('ak-alpha', 0, 'pdf')).toBe('ak-alpha.pdf');
+    expect(safeArtboardFilename('Beta_2', 3, 'png')).toBe('Beta_2.png');
+  });
+
+  test('falls back to the positional name for a path-traversal id', () => {
+    expect(safeArtboardFilename('../../../../tmp/pwned', 2, 'pdf')).toBe('artboard-3.pdf');
+    expect(safeArtboardFilename('/etc/passwd', 0, 'png')).toBe('artboard-1.png');
+    expect(safeArtboardFilename('..', 1, 'pdf')).toBe('artboard-2.pdf');
+  });
+
+  test('falls back for null/undefined/empty/non-string ids', () => {
+    expect(safeArtboardFilename(null, 0, 'pdf')).toBe('artboard-1.pdf');
+    expect(safeArtboardFilename(undefined, 4, 'png')).toBe('artboard-5.png');
+    expect(safeArtboardFilename('', 1, 'pdf')).toBe('artboard-2.pdf');
+  });
+
+  test('falls back for an id starting with a digit or containing unsafe chars', () => {
+    expect(safeArtboardFilename('1abc', 0, 'pdf')).toBe('artboard-1.pdf');
+    expect(safeArtboardFilename('a/b', 0, 'pdf')).toBe('artboard-1.pdf');
+    expect(safeArtboardFilename('a b', 0, 'pdf')).toBe('artboard-1.pdf');
+  });
+
+  test('falls back for an id over the 64-char cap', () => {
+    expect(safeArtboardFilename(`a${'x'.repeat(64)}`, 0, 'pdf')).toBe('artboard-1.pdf');
+  });
+});
+
+describe('assertRenderOutputSizeOk', () => {
+  test('does not exit for a reasonable A4-at-300dpi request', () => {
+    const origExit = process.exit;
+    let exited = false;
+    process.exit = () => {
+      exited = true;
+    };
+    try {
+      assertRenderOutputSizeOk(818, 1146, 3.125, '_test');
+    } finally {
+      process.exit = origExit;
+    }
+    expect(exited).toBe(false);
+  });
+
+  test('exits when the requested output exceeds the max side guard', () => {
+    const origExit = process.exit;
+    const origError = console.error;
+    let exitCode;
+    process.exit = (code) => {
+      exitCode = code;
+      throw new Error('exit'); // stop the (test-only) function from continuing past exit
+    };
+    console.error = () => {};
+    try {
+      expect(() => assertRenderOutputSizeOk(20000, 20000, 1, '_test')).toThrow();
+    } finally {
+      process.exit = origExit;
+      console.error = origError;
+    }
+    expect(exitCode).toBe(1);
+  });
+
+  test('exits when the requested output exceeds the byte-size guard even under the side cap', () => {
+    const origExit = process.exit;
+    const origError = console.error;
+    let exitCode;
+    process.exit = (code) => {
+      exitCode = code;
+      throw new Error('exit');
+    };
+    console.error = () => {};
+    try {
+      // 15000×15000 stays under the 16000px side cap but blows the ~600MB estimate.
+      expect(() => assertRenderOutputSizeOk(15000, 15000, 1, '_test')).toThrow();
+    } finally {
+      process.exit = origExit;
+      console.error = origError;
+    }
+    expect(exitCode).toBe(1);
+  });
+});