@1agh/maude 0.41.0 → 0.43.0

package/apps/studio/dom-selection.ts

@@ -463,6 +463,31 @@ export function hoverTargetToSelection(target: HoverTarget, file?: string): Sele
     worldW: el instanceof HTMLElement ? Math.round(el.offsetWidth) : undefined,
     worldH: el instanceof HTMLElement ? Math.round(el.offsetHeight) : undefined,
     html: el ? (el.outerHTML ?? '').slice(0, 4000) : '',
+    // feature-photo-editor (Task 14) — flag a content-addressed artboard `<img>`
+    // so the Inspector can offer the Photo tab. Only a real `assets/<sha8>.<ext>`
+    // src qualifies (an external URL / SVG icon / data: URI has no sidecar).
+    // `data-photo-asset` (stamped by canvas-lib's PhotoPreviewBridge the first
+    // time it bakes an edit into this element) is checked FIRST — once an edit
+    // is applied, the live `src` is a `data:` URL (the baked composite), which
+    // no longer matches the asset regex. Without this, an already-edited photo
+    // would lose its Photo tab the moment you select it (the exact regression
+    // this fixes — the bridge's own direct-src-swap made the element's `src`
+    // stop being a reliable asset key).
+    ...(() => {
+      if (el?.tagName?.toLowerCase() !== 'img') return {};
+      // The canvas iframe is untrusted content (DDR-054) — an authored `<img
+      // data-photo-asset="...">` is attacker-controllable, so the tag is only
+      // trusted when it actually has the `assets/<sha8>.<ext>` shape (security
+      // review finding: an unshaped value would ride unbounded into
+      // `_active.json`/the WS broadcast via inspect.ts's `enrich()`).
+      const assetRe = /assets\/[0-9a-f]{8}\.[a-z0-9]+/i;
+      const tagged = (el as HTMLElement).getAttribute?.('data-photo-asset');
+      if (tagged && assetRe.test(tagged))
+        return { photoKind: 'artboard-img' as const, photoAsset: tagged };
+      const src = (el as HTMLImageElement).getAttribute?.('src') || '';
+      const m = assetRe.exec(src);
+      return m ? { photoKind: 'artboard-img' as const, photoAsset: m[0] } : {};
+    })(),
     ...styleMapsFor(el),
   };
 }

package/apps/studio/export-dialog.tsx

@@ -3,8 +3,10 @@
  * @scope      apps/studio/export-dialog.tsx
  * @purpose    Native `<dialog>`-based export modal. Three controls — format,
  *             scope, per-format options — plus a Recent tab populated by
- *             `/_api/export-history`. Submit fires `POST /_api/export`, the
- *             response is piped to a Blob URL anchor download. `⌘E` opens
+ *             `/_api/export-history`. Submit POSTs `/_api/export-jobs` and
+ *             closes immediately (feature-background-export-notification-
+ *             center) — the main-shell notification center owns status/
+ *             progress/completion from there, not this dialog. `⌘E` opens
  *             the dialog from anywhere inside the canvas; `⌘⇧E` re-runs the
  *             most recent export without opening (T10 fast path).
  *
@@ -293,7 +295,9 @@ export function ExportDialogProvider({ children }: { children: ReactNode }): Rea
     dialogRef.current?.close();
   }, []);
 
-  // Pre-load history when the dialog opens; refresh after each export.
+  // Loaded when the dialog opens. Submit now closes the dialog immediately
+  // (the job runs in the background) instead of refreshing this in place —
+  // the next open picks up whatever's finished by then.
   const loadHistory = useCallback(async () => {
     try {
       if (isCrossOriginFramed()) {
@@ -364,10 +368,13 @@ export function ExportDialogProvider({ children }: { children: ReactNode }): Rea
       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 }>(
+          // Bridge through the main shell — the iframe can't reach
+          // /_api/export-jobs (canvas origin 403s it, DDR-060). The parent
+          // enqueues the job and replies with the id immediately; the
+          // trusted main-shell notification center (which already owns the
+          // WS connection) is the single place status/progress/completion
+          // live from here — this dialog no longer polls or receives bytes.
+          const res = await bridgeRequest<{ ok?: boolean; jobId?: string; error?: string }>(
             'export-request',
             'export-result',
             { payload: { format, scope, options } }
@@ -376,11 +383,10 @@ export function ExportDialogProvider({ children }: { children: ReactNode }): Rea
             setStatus({ text: `Export failed: ${res.error || 'unknown'}`, isError: true });
             return;
           }
-          setStatus({ text: `Saved ${res.filename ?? 'export'}`, isError: false });
-          void loadHistory();
+          close();
           return;
         }
-        const r = await fetch('/_api/export', {
+        const r = await fetch('/_api/export-jobs', {
           method: 'POST',
           headers: { 'content-type': 'application/json' },
           body: JSON.stringify({ format, scope, options }),
@@ -390,20 +396,7 @@ export function ExportDialogProvider({ children }: { children: ReactNode }): Rea
           setStatus({ text: `Export failed: ${text || r.status}`, isError: true });
           return;
         }
-        const disp = r.headers.get('Content-Disposition') ?? '';
-        const filename =
-          /filename="([^"]+)"/.exec(disp)?.[1] ?? `export${FORMAT_META[format].defaultExt}`;
-        const blob = await r.blob();
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        URL.revokeObjectURL(url);
-        setStatus({ text: `Saved ${filename}`, isError: false });
-        void loadHistory();
+        close();
       } catch (err) {
         const msg = err instanceof Error ? err.message : String(err);
         setStatus({ text: `Export failed: ${msg}`, isError: true });
@@ -411,7 +404,7 @@ export function ExportDialogProvider({ children }: { children: ReactNode }): Rea
         setSubmitting(false);
       }
     },
-    [loadHistory]
+    [close]
   );
 
   const rerunLast = useCallback(async () => {

package/apps/studio/exporters/_runtime.ts

@@ -67,3 +67,107 @@ export function resolveExportRuntime(): string {
   }
   return runtime;
 }
+
+export interface SpawnShimOptions {
+  /** cwd for the spawned shim — callers pass `path.dirname(<SHIM>)`. */
+  cwd: string;
+  /** Aborts the render — kills the child process. */
+  signal?: AbortSignal;
+  /** Fired for each `MAUDE_PROGRESS {"current":N,"total":M}` stdout line. */
+  onProgress?: (update: { current: number; total: number }) => void;
+}
+
+export interface SpawnShimResult {
+  code: number;
+  /** stdout lines with `MAUDE_PROGRESS` lines filtered out (written-file paths etc.). */
+  stdoutLines: string[];
+  stderr: string;
+}
+
+const PROGRESS_LINE = /^MAUDE_PROGRESS (.+)$/;
+
+/**
+ * Spawn a render shim (`bin/_{png,pdf,svg,html,pptx,video}-playwright.mjs`)
+ * via a resolved node/bun runtime, reading stdout INCREMENTALLY (not
+ * buffered via `new Response(proc.stdout).text()`) so a `MAUDE_PROGRESS`
+ * line written mid-render reaches `onProgress` as soon as it's flushed,
+ * instead of only after the whole process exits. Non-progress lines
+ * (written-file paths, the existing per-adapter contract) collect into
+ * `stdoutLines` in the order they arrived. Exit-code handling stays with the
+ * caller — this returns the same shape the old `Promise.all([...text()])`
+ * block did, so adapters keep their existing `if (code !== 0) throw …`.
+ */
+export async function spawnShim(args: string[], opts: SpawnShimOptions): Promise<SpawnShimResult> {
+  const proc = Bun.spawn([resolveExportRuntime(), ...args], {
+    cwd: opts.cwd,
+    stdout: 'pipe',
+    stderr: 'pipe',
+    signal: opts.signal,
+  });
+  // Bun.spawn's `signal` option kills the child on abort; this listener is a
+  // defensive fallback in case a given Bun build ignores it — cheap and
+  // idempotent (killing an already-exited process is a no-op).
+  const onAbort = () => {
+    try {
+      proc.kill();
+    } catch {
+      /* already exited */
+    }
+  };
+  opts.signal?.addEventListener('abort', onAbort);
+
+  const stderrPromise = new Response(proc.stderr).text();
+  const stdoutLines: string[] = [];
+  let buffer = '';
+  const consumeLine = (line: string) => {
+    if (!line) return;
+    const match = PROGRESS_LINE.exec(line);
+    if (!match) {
+      stdoutLines.push(line);
+      return;
+    }
+    try {
+      const update = JSON.parse(match[1]) as { current: number; total: number };
+      opts.onProgress?.(update);
+    } catch {
+      /* malformed progress line — drop it rather than treat it as a file path */
+    }
+  };
+
+  try {
+    const reader = proc.stdout.pipeThrough(new TextDecoderStream()).getReader();
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += value;
+      let newlineIdx = buffer.indexOf('\n');
+      while (newlineIdx !== -1) {
+        consumeLine(buffer.slice(0, newlineIdx).trim());
+        buffer = buffer.slice(newlineIdx + 1);
+        newlineIdx = buffer.indexOf('\n');
+      }
+    }
+    if (buffer.trim()) consumeLine(buffer.trim());
+  } finally {
+    opts.signal?.removeEventListener('abort', onAbort);
+  }
+
+  const [stderr, code] = await Promise.all([stderrPromise, proc.exited]);
+  return { code, stdoutLines, stderr };
+}
+
+/**
+ * `spawnShim()` + the exit-code check every adapter did identically
+ * (`if (code !== 0) throw new Error(...)`; `code review, /flow:done` — six
+ * near-copies collapsed into one). `args[0]` is the shim path by convention
+ * (every adapter builds it that way), used only for the error message.
+ */
+export async function runShim(args: string[], opts: SpawnShimOptions): Promise<string[]> {
+  const { code, stdoutLines, stderr } = await spawnShim(args, opts);
+  if (code !== 0) {
+    throw new Error(
+      `${path.basename(args[0])} exited ${code}: ${stderr.trim() || stdoutLines.join('\n').trim()}`
+    );
+  }
+  return stdoutLines;
+}

package/apps/studio/exporters/html.ts

@@ -11,10 +11,11 @@ import { tmpdir } from 'node:os';
 import path from 'node:path';
 
 import JSZip from 'jszip';
-import { exportShimPath, resolveExportRuntime } from './_runtime.ts';
+import { exportShimPath, runShim } from './_runtime.ts';
 import {
   canvasShellUrl,
   type ExportContext,
+  type ExportHooks,
   type ExportOptions,
   type ExportResult,
 } from './index.ts';
@@ -27,7 +28,8 @@ async function captureHtml(
   target: Extract<Target, { kind: 'element' }>,
   ctx: ExportContext,
   outDir: string,
-  timeoutSec: number
+  timeoutSec: number,
+  hooks?: ExportHooks
 ): Promise<string[]> {
   const args = [
     HTML_PLAYWRIGHT,
@@ -46,29 +48,18 @@ async function captureHtml(
     if (target.widen) args.push('--widen-to-artboard', '1');
     args.push('--out', path.join(outDir, `${target.canvasSlug}.html`));
   }
-  const proc = Bun.spawn([resolveExportRuntime(), ...args], {
+  return runShim(args, {
     cwd: path.dirname(HTML_PLAYWRIGHT),
-    stdout: 'pipe',
-    stderr: 'pipe',
+    signal: hooks?.signal,
+    onProgress: hooks?.onProgress,
   });
-  const [stdout, stderr] = await Promise.all([
-    new Response(proc.stdout).text(),
-    new Response(proc.stderr).text(),
-  ]);
-  const code = await proc.exited;
-  if (code !== 0) {
-    throw new Error(`_html-playwright exited ${code}: ${stderr.trim() || stdout.trim()}`);
-  }
-  return stdout
-    .split('\n')
-    .map((s) => s.trim())
-    .filter(Boolean);
 }
 
 export async function run(
   targets: Target[],
   options: ExportOptions,
-  ctx: ExportContext
+  ctx: ExportContext,
+  hooks?: ExportHooks
 ): Promise<ExportResult> {
   if (!targets.length) {
     return { filename: 'export.zip', contentType: 'application/zip', body: new Uint8Array(0) };
@@ -83,9 +74,10 @@ export async function run(
   const tmp = mkdtempSync(path.join(tmpdir(), 'maude-html-'));
   try {
     const written: string[] = [];
-    for (const t of elementTargets) {
-      const paths = await captureHtml(t, ctx, tmp, timeoutSec);
+    for (let i = 0; i < elementTargets.length; i += 1) {
+      const paths = await captureHtml(elementTargets[i], ctx, tmp, timeoutSec, hooks);
       written.push(...paths);
+      hooks?.onProgress?.({ current: i + 1, total: elementTargets.length });
     }
     if (!written.length) {
       return { filename: 'export.zip', contentType: 'application/zip', body: new Uint8Array(0) };

package/apps/studio/exporters/index.ts

@@ -74,8 +74,19 @@ export interface ExportResult {
   body: Uint8Array;
 }
 
+/** Progress + cancellation hooks threaded through to the shim-spawning layer. */
+export interface ExportHooks {
+  onProgress?: (update: { current: number; total: number }) => void;
+  signal?: AbortSignal;
+}
+
 export interface Adapter {
-  run(targets: Target[], options: ExportOptions, ctx: ExportContext): Promise<ExportResult>;
+  run(
+    targets: Target[],
+    options: ExportOptions,
+    ctx: ExportContext,
+    hooks?: ExportHooks
+  ): Promise<ExportResult>;
 }
 
 const REGISTRY: Record<Format, Adapter> = {
@@ -114,6 +125,7 @@ export async function runExport(args: {
   options: ExportOptions;
   resolve: Omit<ResolveScopeArgs, 'scope'>;
   ctx: ExportContext;
+  hooks?: ExportHooks;
 }): Promise<ExportResult> {
   // Thread the options bag into the resolver so submit-time selection /
   // active-artboard hints (DDR — selection-passthrough) win over the persisted
@@ -123,7 +135,7 @@ export async function runExport(args: {
   if (!adapter) {
     throw new Error(`unknown format: ${args.format}`);
   }
-  return adapter.run(targets, args.options, args.ctx);
+  return adapter.run(targets, args.options, args.ctx, args.hooks);
 }
 
 export type { Scope, Target };