@1agh/maude 0.24.0 → 0.25.0

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