@1agh/maude 0.24.0 → 0.26.0

package/plugins/design/dev-server/draw/test/palette.test.ts

@@ -0,0 +1,123 @@
+import { describe, expect, test } from 'bun:test';
+import {
+  CURRENT_COLOR,
+  colorDistribution,
+  contrastRatio,
+  isPerceptuallyEven,
+  meetsWcag,
+  oklchRamp,
+  oklchToRgb,
+  parseColor,
+  parseOklch,
+  relativeLuminance,
+  toHex,
+} from '../palette.ts';
+
+describe('parsing', () => {
+  test('hex (short + long)', () => {
+    expect(parseColor('#fff')).toEqual({ r: 255, g: 255, b: 255 });
+    expect(parseColor('#000000')).toEqual({ r: 0, g: 0, b: 0 });
+    expect(parseColor('#1a2b3c')).toEqual({ r: 26, g: 43, b: 60 });
+  });
+  test('rgb()', () => {
+    expect(parseColor('rgb(10, 20, 30)')).toEqual({ r: 10, g: 20, b: 30 });
+  });
+  test('rejects junk', () => {
+    expect(() => parseColor('chartreuse')).toThrow();
+  });
+  test('oklch', () => {
+    const o = parseOklch('oklch(70% 0.1 250)');
+    expect(o.l).toBeCloseTo(0.7, 6);
+    expect(o.c).toBeCloseTo(0.1, 6);
+    expect(o.h).toBeCloseTo(250, 6);
+  });
+});
+
+describe('WCAG contrast', () => {
+  test('black on white is 21:1', () => {
+    expect(contrastRatio('#000000', '#ffffff')).toBeCloseTo(21, 1);
+  });
+  test('order independent', () => {
+    expect(contrastRatio('#ffffff', '#000000')).toBeCloseTo(21, 1);
+  });
+  test('#767676 on white ≈ 4.54 (the AA reference gray)', () => {
+    expect(contrastRatio('#767676', '#ffffff')).toBeCloseTo(4.54, 1);
+  });
+  test('relativeLuminance bounds', () => {
+    expect(relativeLuminance('#000000')).toBeCloseTo(0, 6);
+    expect(relativeLuminance('#ffffff')).toBeCloseTo(1, 6);
+  });
+  test('meetsWcag thresholds', () => {
+    expect(meetsWcag(4.5)).toBe(true);
+    expect(meetsWcag(4.49)).toBe(false);
+    expect(meetsWcag(3.2, { large: true })).toBe(true);
+    expect(meetsWcag(3.2, { nonText: true })).toBe(true);
+    expect(meetsWcag(6.9, { level: 'AAA' })).toBe(false);
+    expect(meetsWcag(7.1, { level: 'AAA' })).toBe(true);
+  });
+});
+
+describe('OKLCH → sRGB', () => {
+  test('achromatic extremes', () => {
+    expect(oklchToRgb({ l: 1, c: 0, h: 0 })).toEqual({ r: 255, g: 255, b: 255 });
+    expect(oklchToRgb({ l: 0, c: 0, h: 0 })).toEqual({ r: 0, g: 0, b: 0 });
+  });
+  test('mid achromatic is neutral gray (r=g=b)', () => {
+    const g = oklchToRgb({ l: 0.5, c: 0, h: 0 });
+    expect(g.r).toBe(g.g);
+    expect(g.g).toBe(g.b);
+    expect(g.r).toBeGreaterThan(70);
+    expect(g.r).toBeLessThan(150);
+  });
+  test('a red-ish hue makes red the dominant channel', () => {
+    const red = oklchToRgb({ l: 0.63, c: 0.25, h: 29 });
+    expect(red.r).toBeGreaterThan(red.g);
+    expect(red.r).toBeGreaterThan(red.b);
+  });
+  test('round-trips through hex', () => {
+    expect(toHex(oklchToRgb({ l: 1, c: 0, h: 0 }))).toBe('#ffffff');
+  });
+});
+
+describe('ramps', () => {
+  test('evenly spaced lightness', () => {
+    const ramp = oklchRamp({ hue: 250, chroma: 0.1, count: 5, lMax: 0.9, lMin: 0.3 });
+    expect(ramp).toHaveLength(5);
+    expect(ramp[0].l).toBeCloseTo(0.9, 6);
+    expect(ramp[4].l).toBeCloseTo(0.3, 6);
+    expect(isPerceptuallyEven(ramp)).toBe(true);
+  });
+  test('detects an uneven ramp', () => {
+    const uneven = [
+      { l: 0.9, c: 0.1, h: 0 },
+      { l: 0.85, c: 0.1, h: 0 },
+      { l: 0.4, c: 0.1, h: 0 },
+    ];
+    expect(isPerceptuallyEven(uneven)).toBe(false);
+  });
+});
+
+describe('60-30-10 distribution', () => {
+  test('passes when accent ≤ 15%', () => {
+    const r = colorDistribution([
+      { role: 'dominant', area: 60 },
+      { role: 'secondary', area: 30 },
+      { role: 'accent', area: 10 },
+    ]);
+    expect(r.ok).toBe(true);
+    expect(r.accentRatio).toBeCloseTo(0.1, 6);
+    expect(r.dominantRole).toBe('dominant');
+  });
+  test('fails when accent dominates', () => {
+    const r = colorDistribution([
+      { role: 'base', area: 50 },
+      { role: 'accent', area: 50 },
+    ]);
+    expect(r.ok).toBe(false);
+    expect(r.accentRatio).toBeCloseTo(0.5, 6);
+  });
+});
+
+test('CURRENT_COLOR constant', () => {
+  expect(CURRENT_COLOR).toBe('currentColor');
+});

package/plugins/design/dev-server/draw/test/primitives.test.ts

@@ -0,0 +1,129 @@
+import { describe, expect, test } from 'bun:test';
+import {
+  VIEWBOX,
+  boxViewBox,
+  circle,
+  group,
+  line,
+  place,
+  polygon,
+  rect,
+  snap,
+  squareViewBox,
+  text,
+  transformString,
+  use,
+} from '../primitives.ts';
+
+describe('snap', () => {
+  test('grid 0 is a no-op (optical adjustments survive)', () => {
+    expect(snap(12.34)).toBe(12.34);
+    expect(snap(12.34, 0)).toBe(12.34);
+  });
+  test('snaps to nearest multiple', () => {
+    expect(snap(13, 8)).toBe(16);
+    expect(snap(11, 8)).toBe(8);
+    expect(snap(7, 4)).toBe(8);
+    expect(snap(5, 4)).toBe(4);
+  });
+});
+
+describe('constructors', () => {
+  test('rect carries geometry + style', () => {
+    const r = rect({ x: 1, y: 2, width: 10, height: 20, rx: 3, fill: '#abc' });
+    expect(r).toMatchObject({ el: 'rect', x: 1, y: 2, width: 10, height: 20, rx: 3, fill: '#abc' });
+  });
+  test('rect snaps geometry to grid when requested', () => {
+    const r = rect({ x: 3, y: 5, width: 13, height: 21, grid: 8 }) as {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+    };
+    expect(r.x).toBe(0);
+    expect(r.y).toBe(8);
+    expect(r.width).toBe(16);
+    expect(r.height).toBe(24);
+  });
+  test('grid is not leaked as a primitive field', () => {
+    const r = rect({ x: 0, y: 0, width: 8, height: 8, grid: 8 }) as Record<string, unknown>;
+    expect(r.grid).toBeUndefined();
+  });
+  test('circle / line / polygon shapes', () => {
+    expect(circle({ cx: 12, cy: 12, r: 6 })).toMatchObject({ el: 'circle', cx: 12, cy: 12, r: 6 });
+    expect(line({ x1: 0, y1: 0, x2: 4, y2: 4 })).toMatchObject({ el: 'line', x2: 4 });
+    const poly = polygon({
+      points: [
+        { x: 0, y: 0 },
+        { x: 4, y: 0 },
+        { x: 2, y: 4 },
+      ],
+    }) as {
+      points: Array<{ x: number }>;
+    };
+    expect(poly.points).toHaveLength(3);
+  });
+  test('text carries content + type attrs', () => {
+    const t = text({
+      x: 0,
+      y: 0,
+      content: 'Hi',
+      fontSize: 16,
+      fontWeight: 700,
+      textAnchor: 'middle',
+    });
+    expect(t).toMatchObject({
+      el: 'text',
+      content: 'Hi',
+      fontSize: 16,
+      fontWeight: 700,
+      textAnchor: 'middle',
+    });
+  });
+  test('use references a symbol id', () => {
+    expect(use({ href: '#leaf', x: 2, y: 4 })).toMatchObject({
+      el: 'use',
+      href: '#leaf',
+      x: 2,
+      y: 4,
+    });
+  });
+});
+
+describe('transform composition', () => {
+  test('transformString emits canonical translate→rotate→scale, skipping identity', () => {
+    expect(transformString({})).toBe('');
+    expect(transformString({ x: 4, y: 6 })).toBe('translate(4 6)');
+    expect(transformString({ rotate: 45 })).toBe('rotate(45)');
+    expect(transformString({ rotate: 45, originX: 12, originY: 12 })).toBe('rotate(45 12 12)');
+    expect(transformString({ x: 2, scale: 1.5, rotate: 90 })).toBe(
+      'translate(2 0) rotate(90) scale(1.5)'
+    );
+  });
+  test('place wraps children in a transformed group', () => {
+    const g = place([circle({ cx: 0, cy: 0, r: 1 })], { x: 10, y: 10 }) as {
+      el: string;
+      transform: string;
+      children: unknown[];
+    };
+    expect(g.el).toBe('group');
+    expect(g.transform).toBe('translate(10 10)');
+    expect(g.children).toHaveLength(1);
+  });
+  test('group passes opacity + id', () => {
+    const g = group([], { opacity: 0.5, id: 'x' }) as { opacity: number; id: string };
+    expect(g.opacity).toBe(0.5);
+    expect(g.id).toBe('x');
+  });
+});
+
+describe('viewBox presets', () => {
+  test('square / box helpers', () => {
+    expect(squareViewBox(24)).toBe('0 0 24 24');
+    expect(boxViewBox(1200, 630)).toBe('0 0 1200 630');
+  });
+  test('named presets', () => {
+    expect(VIEWBOX.icon).toBe('0 0 24 24');
+    expect(VIEWBOX.logo).toBe('0 0 64 64');
+  });
+});

package/plugins/design/dev-server/draw/test/serialize.test.ts

@@ -0,0 +1,105 @@
+import { describe, expect, test } from 'bun:test';
+import { path, circle, group, line, rect, text } from '../primitives.ts';
+import type { DrawPrimitive } from '../primitives.ts';
+import { primitivesToNodes, toJsx, toSvg } from '../serialize.ts';
+
+const SAMPLE: DrawPrimitive[] = [
+  rect({ x: 2, y: 2, width: 20, height: 20, rx: 4 }), // fillable, no paint → currentColor
+  circle({ cx: 12, cy: 12, r: 6, stroke: '#333', strokeWidth: 1.5 }), // stroked → fill none
+  line({ x1: 0, y1: 0, x2: 24, y2: 24 }), // bare line → stroke currentColor
+  group([path({ d: 'M0 0 L4 4', fill: 'none', stroke: 'currentColor' })], {
+    transform: 'translate(1 1)',
+  }),
+  text({ x: 12, y: 20, content: 'Hi & <there>', fontSize: 8, textAnchor: 'middle' }),
+];
+
+const OPTS = { viewBox: '0 0 24 24', a11y: { title: 'Sample mark', desc: 'A test drawing' } };
+
+describe('toSvg', () => {
+  const svg = toSvg(SAMPLE, OPTS);
+  test('is a complete accessible document', () => {
+    expect(svg).toContain('xmlns="http://www.w3.org/2000/svg"');
+    expect(svg).toContain('viewBox="0 0 24 24"');
+    expect(svg).toContain('role="img"');
+    expect(svg).toContain('<title>Sample mark</title>');
+    expect(svg).toContain('<desc>A test drawing</desc>');
+  });
+  test('defaults a paint-less fillable shape to currentColor', () => {
+    expect(svg).toMatch(/<rect[^>]*fill="currentColor"/);
+  });
+  test('stroked shape with no fill gets fill="none"', () => {
+    expect(svg).toMatch(/<circle[^>]*fill="none"[^>]*stroke="#333"/);
+  });
+  test('bare line inherits stroke currentColor', () => {
+    expect(svg).toMatch(/<line[^>]*stroke="currentColor"/);
+  });
+  test('kebab-case attribute names + escaped text', () => {
+    expect(svg).toContain('stroke-width="1.5"');
+    expect(svg).toContain('text-anchor="middle"');
+    expect(svg).toContain('Hi &amp; &lt;there&gt;');
+  });
+  test('self-closes leaf shapes', () => {
+    expect(svg).toMatch(/<rect[^>]*\/>/);
+  });
+});
+
+describe('toJsx', () => {
+  const jsx = toJsx(SAMPLE, OPTS);
+  test('uses camelCase attribute dialect', () => {
+    expect(jsx).toContain('strokeWidth="1.5"');
+    expect(jsx).toContain('textAnchor="middle"');
+  });
+  test('omits the xmlns document marker', () => {
+    expect(jsx).not.toContain('xmlns=');
+  });
+  test('keeps viewBox + role + title', () => {
+    expect(jsx).toContain('viewBox="0 0 24 24"');
+    expect(jsx).toContain('role="img"');
+    expect(jsx).toContain('<title>Sample mark</title>');
+  });
+});
+
+describe('SVG ↔ JSX parity (the single-source invariant)', () => {
+  const svg = toSvg(SAMPLE, OPTS);
+  const jsx = toJsx(SAMPLE, OPTS);
+
+  const openTags = (s: string): string[] =>
+    Array.from(s.matchAll(/<([a-zA-Z][a-zA-Z0-9]*)/g), (m) => m[1]);
+  const numbers = (s: string): number[] =>
+    Array.from(s.replace(/\sxmlns="[^"]*"/, '').matchAll(/-?\d+\.?\d*/g), (m) => Number(m[0])).sort(
+      (a, b) => a - b
+    );
+
+  test('identical element sequence', () => {
+    expect(openTags(jsx)).toEqual(openTags(svg));
+  });
+  test('identical geometry (number multiset, ignoring xmlns)', () => {
+    expect(numbers(jsx)).toEqual(numbers(svg));
+  });
+  test('both built from one node tree (primitivesToNodes)', () => {
+    const root = primitivesToNodes(SAMPLE, OPTS);
+    expect(root.tag).toBe('svg');
+    // title + desc + 5 primitives
+    expect(root.children.map((c) => c.tag)).toEqual([
+      'title',
+      'desc',
+      'rect',
+      'circle',
+      'line',
+      'g',
+      'text',
+    ]);
+  });
+});
+
+describe('decorative a11y', () => {
+  test('decorative marks get aria-hidden and no title/desc/role', () => {
+    const svg = toSvg([circle({ cx: 12, cy: 12, r: 6 })], {
+      viewBox: '0 0 24 24',
+      a11y: { decorative: true },
+    });
+    expect(svg).toContain('aria-hidden="true"');
+    expect(svg).not.toContain('role="img"');
+    expect(svg).not.toContain('<title>');
+  });
+});

package/plugins/design/dev-server/export-dialog.tsx

@@ -24,12 +24,141 @@ import {
   useState,
 } from 'react';
 
+import { useSelectionSetOptional } from './use-selection-set.tsx';
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
 
+// ─── cross-origin export bridge ──────────────────────────────────────────────
+// This dialog renders INSIDE the canvas iframe. Since phase-9.1 the canvas is
+// served from a segregated origin (default ON) whose CSP is `connect-src 'self'`
+// and whose route allowlist deliberately excludes the privileged /_api/export +
+// /_api/export-history (DDR-060). A direct in-iframe fetch therefore 403s
+// ("Forbidden (canvas origin)"). When the parent is cross-origin we ask the
+// trusted main shell (app.jsx onMessage) to run the request same-origin via a
+// `dgn` postMessage — the channel comments/selection already use. When the split
+// is OFF (same-origin iframe) we fall through to the direct fetch.
+
+/** True when framed by a different origin (the canvas-origin split is on). */
+function isCrossOriginFramed(): boolean {
+  if (typeof window === 'undefined' || window.parent === window) return false;
+  try {
+    // Same-origin parent → this read succeeds → split is OFF, use direct fetch.
+    void window.parent.location.href;
+    return false;
+  } catch {
+    return true;
+  }
+}
+
+/** Parent (main shell) origin, for postMessage targeting. */
+function parentOrigin(): string {
+  try {
+    if (document.referrer) return new URL(document.referrer).origin;
+  } catch {
+    /* fall through to wildcard */
+  }
+  return '*';
+}
+
+let bridgeSeq = 0;
+
+/**
+ * Post one request to the parent shell and resolve with its matching reply.
+ * Only accepts a reply from the parent window (source check) with the matching
+ * id; rejects on a 60 s timeout so a dropped reply can't hang the dialog.
+ */
+function bridgeRequest<T>(
+  reqDgn: string,
+  resDgn: string,
+  extra: Record<string, unknown>
+): Promise<T> {
+  bridgeSeq += 1;
+  const id = `exp-${bridgeSeq}`;
+  return new Promise((resolve, reject) => {
+    const onMsg = (e: MessageEvent) => {
+      if (e.source !== window.parent) return;
+      const m = e.data as { dgn?: string; id?: string } | null;
+      if (!m || typeof m !== 'object' || m.dgn !== resDgn || m.id !== id) return;
+      clearTimeout(timer);
+      window.removeEventListener('message', onMsg);
+      resolve(m as unknown as T);
+    };
+    const timer = setTimeout(() => {
+      window.removeEventListener('message', onMsg);
+      reject(new Error('export bridge timed out'));
+    }, 60_000);
+    window.addEventListener('message', onMsg);
+    window.parent.postMessage({ dgn: reqDgn, id, ...extra }, parentOrigin());
+  });
+}
+
 export type Format = 'png' | 'pdf' | 'svg' | 'html' | 'pptx' | 'canva' | 'zip';
 export type Scope = 'selection' | 'artboard' | 'canvas-as-separate' | 'project-raw';
 
+// ─── PNG size presets (item 1) ───────────────────────────────────────────────
+// Resolution multiplier applied as Chromium `deviceScaleFactor`. The native
+// artboard is 1440×900; 2× → 2880×1800. Default 2× because a single-scale PNG
+// was uselessly small. The shim clamps deviceScaleFactor ≤ 4.
+type PngScale = 1 | 2 | 3;
+const PNG_SCALES: ReadonlyArray<{ value: PngScale; label: string }> = [
+  { value: 1, label: '1× (native)' },
+  { value: 2, label: '2× (retina)' },
+  { value: 3, label: '3× (max)' },
+];
+const DEFAULT_PNG_SCALE: PngScale = 2;
+
+/**
+ * The artboard under the viewport centre — the export dialog's notion of "the
+ * active artboard" when nothing is selected. getBoundingClientRect is in
+ * screen coords (post-zoom) so the centre-distance metric is zoom-invariant.
+ * Returns undefined off-DOM (tests) or when the canvas has no artboards.
+ */
+function activeArtboardId(): string | undefined {
+  if (typeof document === 'undefined' || typeof window === 'undefined') return undefined;
+  const screens = Array.from(document.querySelectorAll('[data-dc-screen]'));
+  if (!screens.length) return undefined;
+  const cx = window.innerWidth / 2;
+  const cy = window.innerHeight / 2;
+  let best: Element | null = null;
+  let bestDist = Number.POSITIVE_INFINITY;
+  for (const el of screens) {
+    const r = el.getBoundingClientRect();
+    const dx = (r.left + r.right) / 2 - cx;
+    const dy = (r.top + r.bottom) / 2 - cy;
+    const d = dx * dx + dy * dy;
+    if (d < bestDist) {
+      bestDist = d;
+      best = el;
+    }
+  }
+  return best?.getAttribute('data-dc-screen') ?? undefined;
+}
+
+/**
+ * Snapshot the live canvas selection + active artboard at submit time so the
+ * export is independent of whether opening the dialog cleared the persisted
+ * `_active.json.selected`. Rides the `options` bag through the cross-origin
+ * bridge into `resolveScope` (see scope.ts `ExportScopeHints`). `selSet` is the
+ * optional selection-set context — null when the dialog is mounted outside a
+ * provider (tests), in which case we still contribute the viewport-centre
+ * artboard id.
+ */
+function captureScopeHints(
+  selSet: {
+    selected: Array<{ selector?: string; file?: string; artboardId?: string | null }>;
+  } | null
+): { selection?: { selector: string; file?: string }; artboardId?: string } {
+  const out: { selection?: { selector: string; file?: string }; artboardId?: string } = {};
+  const sel = selSet?.selected?.[0];
+  if (sel?.selector) {
+    out.selection = { selector: sel.selector, ...(sel.file ? { file: sel.file } : {}) };
+  }
+  const artboardId = (sel?.artboardId ?? undefined) || activeArtboardId();
+  if (artboardId) out.artboardId = artboardId;
+  return out;
+}
+
 const FORMAT_META: Record<Format, { label: string; description: string; defaultExt: string }> = {
   png: { label: 'PNG', description: 'Raster image, one per artboard.', defaultExt: '.png' },
   pdf: { label: 'PDF', description: 'Multi-page PDF, one page per artboard.', defaultExt: '.pdf' },
@@ -167,6 +296,15 @@ export function ExportDialogProvider({ children }: { children: ReactNode }): Rea
   // Pre-load history when the dialog opens; refresh after each export.
   const loadHistory = useCallback(async () => {
     try {
+      if (isCrossOriginFramed()) {
+        const res = await bridgeRequest<{ history?: ExportHistoryEntry[] }>(
+          'export-history-request',
+          'export-history-result',
+          {}
+        );
+        setHistory(Array.isArray(res.history) ? res.history : []);
+        return;
+      }
       const r = await fetch('/_api/export-history');
       if (!r.ok) return;
       const data = (await r.json()) as { history: ExportHistoryEntry[] };
@@ -213,6 +351,23 @@ export function ExportDialogProvider({ children }: { children: ReactNode }): Rea
       setSubmitting(true);
       setStatus(null);
       try {
+        if (isCrossOriginFramed()) {
+          // Bridge through the main shell — the iframe can't reach /_api/export
+          // (canvas origin 403s it). The parent runs the export + triggers the
+          // download, then replies with the saved filename or an error string.
+          const res = await bridgeRequest<{ ok?: boolean; filename?: string; error?: string }>(
+            'export-request',
+            'export-result',
+            { payload: { format, scope, options } }
+          );
+          if (!res.ok) {
+            setStatus({ text: `Export failed: ${res.error || 'unknown'}`, isError: true });
+            return;
+          }
+          setStatus({ text: `Saved ${res.filename ?? 'export'}`, isError: false });
+          void loadHistory();
+          return;
+        }
         const r = await fetch('/_api/export', {
           method: 'POST',
           headers: { 'content-type': 'application/json' },
@@ -296,6 +451,20 @@ const DialogShell = (() => {
     const { ref, openState, onClose, onSubmit, history, submitting, status } = props;
     const [format, setFormat] = useState<Format>('png');
     const [scope, setScope] = useState<Scope>('artboard');
+    const [pngScale, setPngScale] = useState<PngScale>(DEFAULT_PNG_SCALE);
+    // Optional — the dialog can be mounted in tests without a provider.
+    const selSet = useSelectionSetOptional();
+
+    // Build the options bag at submit time: snapshot the live selection /
+    // active artboard (items 3 & 5) plus the PNG size (item 1).
+    const handleSubmit = useCallback(() => {
+      const options: Record<string, unknown> = {};
+      const hints = captureScopeHints(selSet);
+      if (hints.selection) options.selection = hints.selection;
+      if (hints.artboardId) options.artboardId = hints.artboardId;
+      if (format === 'png') options.scale = pngScale;
+      onSubmit(format, scope, options);
+    }, [selSet, format, scope, pngScale, onSubmit]);
 
     useEffect(() => {
       if (!openState) return;
@@ -354,6 +523,25 @@ const DialogShell = (() => {
             </select>
             <p className="dc-ed-desc">{SCOPE_META[scope].description}</p>
           </div>
+          {format === 'png' && (
+            <div>
+              <label htmlFor="dc-ed-png-scale">Size</label>
+              <select
+                id="dc-ed-png-scale"
+                value={pngScale}
+                onChange={(e) => setPngScale(Number(e.target.value) as PngScale)}
+              >
+                {PNG_SCALES.map((s) => (
+                  <option key={s.value} value={s.value}>
+                    {s.label}
+                  </option>
+                ))}
+              </select>
+              <p className="dc-ed-desc">
+                Resolution multiplier. 2× ≈ 2880×1800 for a 1440×900 artboard.
+              </p>
+            </div>
+          )}
         </div>
         {history.length > 0 && (
           <div className="dc-ed-recent">
@@ -391,7 +579,7 @@ const DialogShell = (() => {
             type="button"
             className="dc-ed-primary"
             disabled={submitting}
-            onClick={() => onSubmit(format, scope, {})}
+            onClick={handleSubmit}
           >
             {submitting ? 'Exporting…' : 'Export'}
           </button>

package/plugins/design/dev-server/exporters/html.ts

@@ -40,7 +40,10 @@ async function captureHtml(
   if (target.multi) {
     args.push('--multi', '1', '--out-dir', outDir);
   } else {
-    args.push('--widen-to-artboard', '1', '--out', path.join(outDir, `${target.canvasSlug}.html`));
+    // Widen to the enclosing artboard only when scope.ts requested it; a
+    // `selection` target serializes the element exactly.
+    if (target.widen) args.push('--widen-to-artboard', '1');
+    args.push('--out', path.join(outDir, `${target.canvasSlug}.html`));
   }
   const proc = Bun.spawn(['node', ...args], {
     cwd: path.dirname(HTML_PLAYWRIGHT),

package/plugins/design/dev-server/exporters/index.ts

@@ -89,7 +89,10 @@ export async function runExport(args: {
   resolve: Omit<ResolveScopeArgs, 'scope'>;
   ctx: ExportContext;
 }): Promise<ExportResult> {
-  const targets = await resolveScope({ ...args.resolve, scope: args.scope });
+  // Thread the options bag into the resolver so submit-time selection /
+  // active-artboard hints (DDR — selection-passthrough) win over the persisted
+  // `_active.json`. Additive — existing `resolve` callers stay valid.
+  const targets = await resolveScope({ ...args.resolve, scope: args.scope, options: args.options });
   const adapter = getAdapter(args.format);
   if (!adapter) {
     throw new Error(`unknown format: ${args.format}`);

package/plugins/design/dev-server/exporters/pdf.ts

@@ -40,7 +40,13 @@ async function capturePdf(
     String(timeoutSec),
   ];
   if (target.multi) args.push('--multi', '1', '--out-dir', outDir);
-  else args.push('--out', path.join(outDir, `${target.canvasSlug}.pdf`));
+  else {
+    // Widen to the enclosing artboard only when scope.ts requested it
+    // (artboard-via-descendant fallback). selection / artboard-by-id targets
+    // already point at the exact element / screen.
+    if (target.widen) args.push('--widen-to-artboard', '1');
+    args.push('--out', path.join(outDir, `${target.canvasSlug}.pdf`));
+  }
 
   const proc = Bun.spawn(['node', ...args], {
     cwd: path.dirname(PDF_PLAYWRIGHT),

package/plugins/design/dev-server/exporters/png.ts

@@ -28,6 +28,17 @@ interface CaptureOptions {
   timeoutSec?: number;
 }
 
+/**
+ * Coerce an arbitrary `options.scale` into the 1–3 preset range (default 2×).
+ * Exported for unit coverage of the item-1 default/clamp behaviour.
+ */
+export function clampScale(raw: unknown): 1 | 2 | 3 {
+  const n = Math.round(Number(raw));
+  if (n === 1) return 1;
+  if (n === 3) return 3;
+  return 2;
+}
+
 async function captureElement(
   target: Extract<Target, { kind: 'element' }>,
   ctx: ExportContext,
@@ -48,7 +59,12 @@ async function captureElement(
   if (target.multi) {
     args.push('--multi', '1', '--out-dir', outDir);
   } else {
-    args.push('--widen-to-artboard', '1', '--out', path.join(outDir, `${target.canvasSlug}.png`));
+    // Only widen to the enclosing artboard when scope.ts asked for it
+    // (artboard-via-descendant fallback). `selection` scope sets widen=false so
+    // the capture is the element exactly; artboard-by-id targets the screen
+    // element directly and needs no widening.
+    if (target.widen) args.push('--widen-to-artboard', '1');
+    args.push('--out', path.join(outDir, `${target.canvasSlug}.png`));
   }
   const proc = Bun.spawn(['node', ...args], {
     cwd: path.dirname(PNG_PLAYWRIGHT),
@@ -101,7 +117,10 @@ export async function run(
 
   const tmp = mkdtempSync(path.join(tmpdir(), 'maude-png-'));
   const captureOpts: CaptureOptions = {
-    scale: (options.scale as 1 | 2 | 3 | undefined) ?? 1,
+    // Default 2× — a single-scale PNG was uselessly small (item 1). The dialog
+    // sends an explicit scale; this default covers direct API / curl callers.
+    // Clamped to the 1–3 preset range; the shim re-clamps deviceScaleFactor ≤ 4.
+    scale: clampScale(options.scale),
     timeoutSec: (options.timeoutSec as number | undefined) ?? 8,
   };