@1agh/maude 0.39.1 → 0.41.0

package/apps/studio/dom-selection.ts

@@ -146,6 +146,19 @@ export function selectorIndex(doc: Document, selector: string, el: Element | nul
   return 0;
 }
 
+/**
+ * GLOBAL occurrence index of `el` among EVERY node in the document that shares
+ * its `data-cd-id` — the DOM instance index the server-side reused-component
+ * usage resolver (`resolveUsageId`) expects, in source order. Distinct from a
+ * `Selection.index` (which counts within an artboard-SCOPED selector). Used to
+ * route a whole-instance move/resize per-occurrence (Stage H3) so it stays local
+ * to the dragged instance. Matches the reorder drag's own snapshot occurrence.
+ */
+export function globalCdOccurrence(doc: Document, cdId: string, el: Element | null): number {
+  if (!cdId || !el) return 0;
+  return selectorIndex(doc, `[data-cd-id="${cssEscape(cdId)}"]`, el);
+}
+
 /**
  * Resolve a stored Selection to its live element, artboard-scoped. Prefers the
  * id+artboardId scoped selector (the robust path), then the stored `selector`
@@ -175,6 +188,63 @@ export function resolveSelectionEl(
   return null;
 }
 
+/**
+ * Length of the trailing run `a` and `b` share, walked from the end. `domPath()`
+ * hops carry no positional (nth-child) info, so a shared suffix survives a
+ * sibling insertion/removal anywhere earlier in the tree — exactly the DDR-019
+ * `data-cd-id` renumbering case this fallback exists for.
+ */
+function matchingSuffixLength(a: string[], b: string[]): number {
+  let n = 0;
+  const max = Math.min(a.length, b.length);
+  for (let i = 1; i <= max; i++) {
+    if (a[a.length - i] !== b[b.length - i]) break;
+    n++;
+  }
+  return n;
+}
+
+/**
+ * Best-effort structural fallback for when a stored `data-cd-id` selector no
+ * longer identifies the intended element. A canvas rewrite (`/design:edit`
+ * regenerating JSX) renumbers `data-cd-id` — it's an AST-position fingerprint,
+ * not a stable identity (DDR-019) — so the id can end up on an unrelated
+ * element, or on none at all. This scores every stamped element in the
+ * artboard by how much of its live `domPath()` matches the STORED path
+ * (as a trailing run) plus authored-class overlap, and requires the leaf tag
+ * to match. Returns null when nothing scores above zero (no plausible match —
+ * the caller should treat the target as gone).
+ */
+export function resolveByDomPath(
+  doc: Document,
+  opts: { artboardId?: string | null; tag?: string; classes?: string; dom_path?: string[] }
+): Element | null {
+  const storedPath = opts.dom_path;
+  const wantTag = (opts.tag || '').toLowerCase();
+  if (!storedPath || storedPath.length === 0 || !wantTag) return null;
+  let scope: ParentNode = doc;
+  if (opts.artboardId) {
+    const artboard = doc.querySelector(`[data-dc-screen="${opts.artboardId}"]`);
+    if (artboard) scope = artboard;
+  }
+  const wantClasses = (opts.classes || '').split(/\s+/).filter(Boolean);
+  let best: Element | null = null;
+  let bestScore = 0;
+  for (const el of Array.from(scope.querySelectorAll('[data-cd-id]'))) {
+    if (el.tagName.toLowerCase() !== wantTag) continue;
+    const suffix = matchingSuffixLength(domPath(el), storedPath);
+    if (suffix === 0) continue;
+    const liveClasses = realClasses(el).split(/\s+/).filter(Boolean);
+    const overlap = wantClasses.filter((c) => liveClasses.includes(c)).length;
+    const score = suffix * 10 + overlap;
+    if (score > bestScore) {
+      bestScore = score;
+      best = el;
+    }
+  }
+  return best;
+}
+
 /**
  * Phase 12.2 — style maps for the CSS-knob properties. `authored` is what the
  * element sets INLINE (React renders `style={{padding:8}}` → `style="padding:8px"`),
@@ -193,9 +263,18 @@ const KNOB_PROPS = [
   // Layout
   'display',
   'flex-direction',
+  'flex-wrap',
   'align-items',
   'justify-content',
   'gap',
+  // Stage M — flex-CHILD props (sizing mode Fill + the Auto-layout child rows).
+  // Shown only when the PARENT is flex (Selection.parentDisplay); captured here so
+  // they round-trip. `flex` shorthand is listed for customStyles-exclusion only.
+  'flex',
+  'flex-grow',
+  'flex-shrink',
+  'flex-basis',
+  'align-self',
   // Typography
   'font-family',
   'color',
@@ -219,7 +298,10 @@ const KNOB_PROPS = [
   // Size
   'width',
   'height',
+  'min-width',
+  'min-height',
   'max-width',
+  'max-height',
   // Appearance
   'background-color',
   'border-radius',
@@ -232,6 +314,32 @@ const KNOB_PROPS = [
   'border-color',
   'box-shadow',
   'opacity',
+  // feature-element-editing-robustness Stage B — promotes DDR-104 §3's OUT-list
+  // into curated rows (superseded by the Stage-G DDR). Adding them here captures
+  // their authored/computed values for the new panel controls AND moves them out
+  // of the Advanced "customStyles" hatch (a canvas that carried one as a raw
+  // custom prop now surfaces it in its curated row instead).
+  // Position + stacking
+  'position',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'z-index',
+  // Transform
+  'transform',
+  'transform-origin',
+  // Typography (extra)
+  'font-style',
+  'text-transform',
+  'text-decoration',
+  'white-space',
+  // Overflow
+  'overflow',
+  // Media framing
+  'object-fit',
+  'aspect-ratio',
+  'object-position',
 ] as const;
 
 // Phase 12.3 — HTML attributes the custom-attribute hatch may have written, so a
@@ -245,6 +353,8 @@ function styleMapsFor(el: Element | null): {
   computed: Record<string, string>;
   customStyles: Record<string, string>;
   attrs: Record<string, string>;
+  parentDisplay?: string;
+  parentFlexDirection?: string;
 } {
   if (!el || typeof window === 'undefined' || !window.getComputedStyle) {
     return { authored: {}, computed: {}, customStyles: {}, attrs: {} };
@@ -283,7 +393,16 @@ function styleMapsFor(el: Element | null): {
       if (ATTR_SKIP.test(a.name)) continue;
       attrs[a.name] = a.value;
     }
-    return { authored, computed, customStyles, attrs };
+    // Stage M — parent's layout context (for the Fixed/Hug/Fill sizing control +
+    // flex-child row gating). Read here because the shell can't reach the
+    // cross-origin iframe to compute it after selection.
+    const parent = (el as HTMLElement).parentElement;
+    const parentDisplay = parent ? window.getComputedStyle(parent).display : '';
+    const parentFlexDirection =
+      parent && (parentDisplay === 'flex' || parentDisplay === 'inline-flex')
+        ? window.getComputedStyle(parent).flexDirection
+        : '';
+    return { authored, computed, customStyles, attrs, parentDisplay, parentFlexDirection };
   } catch {
     return { authored: {}, computed: {}, customStyles: {}, attrs: {} };
   }
@@ -336,6 +455,13 @@ export function hoverTargetToSelection(target: HoverTarget, file?: string): Sele
           h: Math.round(rect.height),
         }
       : null,
+    // WORLD-unit size — `offsetWidth`/`offsetHeight` are the element's own local
+    // pixel box, unaffected by an ancestor's `.dc-world` zoom transform (unlike
+    // `bounds`, which is the SCREEN rect and lies at any zoom other than 100%).
+    // The Inspector's artboard-resize fields (Stage D4 tail) need the true
+    // JSX-authored width/height to pre-fill correctly regardless of zoom.
+    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) : '',
     ...styleMapsFor(el),
   };

package/apps/studio/drag-state.ts

@@ -0,0 +1,24 @@
+/**
+ * @file       drag-state.ts
+ * @purpose    Tiny shared module-scope flag: is an in-canvas ELEMENT drag
+ *             (`ReorderDrag` — reorder or out-of-flow reposition) currently
+ *             active? Consulted by per-frame rAF overlays (`ElementResizeOverlay`,
+ *             `SpacingHandlesOverlay`) so they can skip their own
+ *             getBoundingClientRect/getComputedStyle work while the drag's OWN
+ *             live-preview chrome is what matters — avoids compounding rAF cost
+ *             during the single most DOM-churn-heavy gesture the canvas has
+ *             (dogfood 2026-07-07: "hrozně zavaší ten toolbar" during reorder).
+ *             A standalone module (not exported from canvas-shell.tsx) so the
+ *             overlay files can import it without a circular import back into
+ *             canvas-shell.tsx (which imports THEM).
+ */
+
+let active = false;
+
+export function setElementDragActive(v: boolean): void {
+  active = v;
+}
+
+export function isElementDragActive(): boolean {
+  return active;
+}

package/apps/studio/equal-spacing-detector.ts

@@ -96,3 +96,208 @@ export function detectEqualSpacing(
 
   return { axis, gapPx: median, midpoints };
 }
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Task L7 — Alt-hover distance measurement between exactly TWO rects (the
+// selected element + whatever's hovered). Same pairwise-gap formula as
+// `detectEqualSpacing`'s loop body, but without its 3-rect / equal-tolerance
+// preconditions, and shaped for line-painting rather than midpoint dots.
+
+export interface PairGap {
+  axis: SpacingAxis;
+  /** The gap between the two rects' facing edges, in the caller's coord space. */
+  gap: number;
+  /** Leading edge of the gap span — `left` for an x-axis line, `top` for y. */
+  from: number;
+  /** Perpendicular-axis center of the pair — `top` for an x-axis line
+   *  (vertically centers it between the two rects), `left` for y. */
+  cross: number;
+}
+
+/**
+ * Distance between two rects along one axis. Returns `null` when they
+ * overlap on that axis (no meaningful gap — e.g. two rects stacked only on
+ * y have no x-axis gap to show).
+ */
+export function computePairGap(a: Rect, b: Rect, axis: SpacingAxis): PairGap | null {
+  const [first, second] =
+    axis === 'x' ? (a.x <= b.x ? [a, b] : [b, a]) : a.y <= b.y ? [a, b] : [b, a];
+  if (axis === 'x') {
+    const gap = second.x - (first.x + first.w);
+    if (gap <= 0) return null;
+    return {
+      axis,
+      gap,
+      from: first.x + first.w,
+      cross: (first.y + first.h / 2 + second.y + second.h / 2) / 2,
+    };
+  }
+  const gap = second.y - (first.y + first.h);
+  if (gap <= 0) return null;
+  return {
+    axis,
+    gap,
+    from: first.y + first.h,
+    cross: (first.x + first.w / 2 + second.x + second.w / 2) / 2,
+  };
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Task L5 — distribute / align / tidy-up for a multi-selection of ELEMENTS.
+//
+// These mirror the artboard `distributeArtboards`/`alignArtboards` algorithms
+// in canvas-shell.tsx verbatim, generalized from `ArtboardRect` to any rect
+// set. Kept pure/DOM-free like `detectEqualSpacing` above — the caller
+// resolves DOM rects, calls these, then posts one `reposition-request` per
+// moved rect through the existing element-drag write lane (no new endpoint).
+//
+// `key` is an OPAQUE caller-supplied correlation token (not a `data-cd-id`) —
+// a shared-component instance's cd-id can repeat across selections
+// (disambiguated only by occurrence index), so matching results back to the
+// caller's own bookkeeping by `id` would collide. Callers pass e.g. the
+// selection's array index as `key` and zip the result back themselves.
+
+export interface KeyedRect extends Rect {
+  key: string;
+}
+
+export type AlignAxisMode = 'left' | 'right' | 'center-x' | 'top' | 'bottom' | 'center-y';
+
+export interface MovedRect {
+  key: string;
+  x: number;
+  y: number;
+}
+
+/**
+ * Align 2+ rects to a common edge/midline of their union bbox. Returns only
+ * the rects whose position actually changes (rounded-equal = no-op, skipped).
+ */
+export function computeAlign(rects: KeyedRect[], mode: AlignAxisMode): MovedRect[] {
+  if (rects.length < 2) return [];
+  let xMin = Number.POSITIVE_INFINITY;
+  let yMin = Number.POSITIVE_INFINITY;
+  let xMax = Number.NEGATIVE_INFINITY;
+  let yMax = Number.NEGATIVE_INFINITY;
+  for (const r of rects) {
+    if (r.x < xMin) xMin = r.x;
+    if (r.y < yMin) yMin = r.y;
+    if (r.x + r.w > xMax) xMax = r.x + r.w;
+    if (r.y + r.h > yMax) yMax = r.y + r.h;
+  }
+  const cx = (xMin + xMax) / 2;
+  const cy = (yMin + yMax) / 2;
+  const moved: MovedRect[] = [];
+  for (const r of rects) {
+    let nx = r.x;
+    let ny = r.y;
+    switch (mode) {
+      case 'left':
+        nx = xMin;
+        break;
+      case 'right':
+        nx = xMax - r.w;
+        break;
+      case 'center-x':
+        nx = cx - r.w / 2;
+        break;
+      case 'top':
+        ny = yMin;
+        break;
+      case 'bottom':
+        ny = yMax - r.h;
+        break;
+      case 'center-y':
+        ny = cy - r.h / 2;
+        break;
+    }
+    if (Math.round(nx) === Math.round(r.x) && Math.round(ny) === Math.round(r.y)) continue;
+    moved.push({ key: r.key, x: Math.round(nx), y: Math.round(ny) });
+  }
+  return moved;
+}
+
+/**
+ * Distribute 3+ rects with equal gaps on one axis. Sorts by leading edge,
+ * holds the first + last fixed, redistributes the middle ones so the trailing
+ * → next-leading gap is equal everywhere.
+ */
+export function computeDistribute(rects: KeyedRect[], axis: SpacingAxis): MovedRect[] {
+  if (rects.length < 3) return [];
+  const sorted = [...rects].sort((a, b) => (axis === 'x' ? a.x - b.x : a.y - b.y));
+  const first = sorted[0];
+  const last = sorted[sorted.length - 1];
+  if (!first || !last) return [];
+  const sideLen = (r: KeyedRect) => (axis === 'x' ? r.w : r.h);
+  const totalSides = sorted.reduce((acc, r) => acc + sideLen(r), 0);
+  const span = (axis === 'x' ? last.x + last.w - first.x : last.y + last.h - first.y) - totalSides;
+  const gap = span / (sorted.length - 1);
+  const moved: MovedRect[] = [];
+  let cursor = axis === 'x' ? first.x + first.w + gap : first.y + first.h + gap;
+  for (let i = 1; i < sorted.length - 1; i++) {
+    const r = sorted[i];
+    if (!r) continue;
+    if (axis === 'x') {
+      moved.push({ key: r.key, x: Math.round(cursor), y: Math.round(r.y) });
+      cursor += r.w + gap;
+    } else {
+      moved.push({ key: r.key, x: Math.round(r.x), y: Math.round(cursor) });
+      cursor += r.h + gap;
+    }
+  }
+  return moved;
+}
+
+export interface TidyOptions {
+  /** Pixel gap between grid cells, both axes. Default 16. */
+  gap?: number;
+  /** Column count. Default: near-square (`round(sqrt(n))`). */
+  columns?: number;
+}
+
+/**
+ * Snap 2+ rects into a clean grid: reading-order sort (top-to-bottom, then
+ * left-to-right), laid out at a fixed gap from the union bbox's top-left,
+ * each column/row sized to its widest/tallest member so nothing overlaps.
+ */
+export function computeTidyGrid(rects: KeyedRect[], opts: TidyOptions = {}): MovedRect[] {
+  const n = rects.length;
+  if (n < 2) return [];
+  const gap = opts.gap ?? 16;
+  const columns = Math.max(1, Math.min(n, opts.columns ?? Math.round(Math.sqrt(n))));
+  const sorted = [...rects].sort((a, b) => a.y - b.y || a.x - b.x);
+  const originX = Math.min(...rects.map((r) => r.x));
+  const originY = Math.min(...rects.map((r) => r.y));
+  const rows = Math.ceil(n / columns);
+  const colWidths: number[] = new Array(columns).fill(0);
+  const rowHeights: number[] = new Array(rows).fill(0);
+  sorted.forEach((r, i) => {
+    const row = Math.floor(i / columns);
+    const col = i % columns;
+    colWidths[col] = Math.max(colWidths[col] ?? 0, r.w);
+    rowHeights[row] = Math.max(rowHeights[row] ?? 0, r.h);
+  });
+  const colX: number[] = [];
+  {
+    let cursor = originX;
+    for (let c = 0; c < columns; c++) {
+      colX.push(cursor);
+      cursor += (colWidths[c] ?? 0) + gap;
+    }
+  }
+  const rowY: number[] = [];
+  {
+    let cursor = originY;
+    for (let r = 0; r < rows; r++) {
+      rowY.push(cursor);
+      cursor += (rowHeights[r] ?? 0) + gap;
+    }
+  }
+  return sorted.map((r, i) => {
+    const row = Math.floor(i / columns);
+    const col = i % columns;
+    const nx = colX[col] ?? r.x;
+    const ny = rowY[row] ?? r.y;
+    return { key: r.key, x: Math.round(nx), y: Math.round(ny) };
+  });
+}

package/apps/studio/export-dialog.tsx

@@ -271,7 +271,7 @@ const DIALOG_CSS = `
 .dc-export-dialog footer button.dc-ed-primary { background: var(--maude-hud-accent, #1a1a1a); color: var(--maude-hud-accent-fg, #fff); border-color: transparent; }
 .dc-export-dialog footer button:disabled { opacity: 0.4; cursor: not-allowed; }
 .dc-export-dialog .dc-ed-status { padding: 8px 20px; font-size: 12px; color: var(--maude-chrome-fg-1, rgba(40,30,20,0.65)); border-top: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.08)); }
-.dc-export-dialog .dc-ed-status.is-error { color: var(--status-error, #c0392b); }
+.dc-export-dialog .dc-ed-status.is-error { color: #c0392b; }
 `;
 
 // ─────────────────────────────────────────────────────────────────────────────

package/apps/studio/exporters/_browser-bundles.ts

@@ -9,6 +9,8 @@ import { existsSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import path from 'node:path';
 
+import { DEV_SERVER_ROOT } from '../paths.ts';
+
 interface CachedBundle {
   path: string;
   ready: Promise<string>;
@@ -68,6 +70,121 @@ async function buildIife(entry: string, globalName: string, cachePath: string):
   return cachePath;
 }
 
+/**
+ * DDR-148 — build the in-page video encoder (`video-encode-lib.ts`) to a
+ * self-contained browser ESM module cached under the OS temp dir. It imports
+ * mediabunny + gifenc (both INLINED — no externals) and assigns
+ * `window.__maudeEnc`; the capture shim injects it via
+ * `page.addScriptTag({ content, type: 'module' })`. Returns the cache path.
+ *
+ * Unlike getBrowserBundle this bundles a LOCAL source entry (not an npm
+ * package) and keeps ESM (the module's top-level `window.__maudeEnc = …` side
+ * effect runs on load — no IIFE export-hoisting needed).
+ */
+let encodeLibReady: Promise<string> | null = null;
+export function getEncodeLibBundle(): Promise<string> {
+  if (encodeLibReady) return encodeLibReady;
+  // DDR-045: derive from DEV_SERVER_ROOT, never `import.meta.dir`. In a compiled
+  // binary the latter is the virtual `/$bunfs/root`, so `Bun.build` fails with
+  // "failed to open root directory: /$bunfs/root" (the mp4/gif export bug).
+  const entry = path.join(DEV_SERVER_ROOT, 'exporters', 'video-encode-lib.ts');
+  const cachePath = path.join(tmpdir(), 'maude-video-encode-lib.mjs');
+  encodeLibReady = (async () => {
+    const built = await Bun.build({
+      entrypoints: [entry],
+      target: 'browser',
+      format: 'esm',
+      minify: true,
+      conditions: ['browser', 'import'],
+    });
+    if (!built.success) {
+      throw new Error(`encode-lib bundle failed: ${built.logs.map((l) => l.message).join('; ')}`);
+    }
+    const first = built.outputs[0];
+    if (!first) throw new Error('encode-lib bundle produced no outputs');
+    await Bun.write(cachePath, await first.text());
+    return cachePath;
+  })();
+  return encodeLibReady;
+}
+
+/**
+ * DDR-148 addendum (audio export) — build the in-page whole-comp renderer
+ * (`video-render-lib.ts`, wraps @remotion/web-renderer's renderMediaOnWeb) to a
+ * self-contained browser ESM module cached under the OS temp dir. Assigns
+ * `window.__maudeRenderVideo__`; the capture shim injects it via addScriptTag
+ * before calling `window.__maude_render_video__` (video-comp.tsx bridge).
+ *
+ * UNLIKE getEncodeLibBundle, this externalizes 'remotion' + '@remotion/media' —
+ * they must resolve to the SAME module instances the canvas's importmap already
+ * loaded (dual-package hazard: a second bundled copy would give
+ * renderMediaOnWeb's internal Composition/context providers a different
+ * `TimelineContext` than the one the passed `component`'s hooks read from,
+ * freezing every frame at 0 / silencing audio). The browser's importmap
+ * (declared in _shell.html) resolves these bare specifiers even for a
+ * dynamically injected `<script type=module>` tag.
+ */
+let webRendererLibReady: Promise<string> | null = null;
+export function getWebRendererBundle(): Promise<string> {
+  if (webRendererLibReady) return webRendererLibReady;
+  const entry = path.join(DEV_SERVER_ROOT, 'exporters', 'video-render-lib.ts');
+  const cachePath = path.join(tmpdir(), 'maude-video-render-lib.mjs');
+  webRendererLibReady = (async () => {
+    // Bun's `external` field is package-name PREFIX matched (runtime-bundle.ts's
+    // comment on the same gotcha) — listing 'remotion' also externalizes deep
+    // subpaths like 'remotion/version' (a real import inside web-renderer's own
+    // dependency tree). The importmap only maps the bare 'remotion' specifier, so
+    // an externalized 'remotion/version' 404s in the browser with "Failed to
+    // resolve module specifier". Use an exact-match onResolve plugin (mirrors
+    // canvas-build.ts's `exact-externals`) so ONLY the specifiers the importmap
+    // actually covers are externalized; every subpath (version, no-react, etc.)
+    // gets bundled inline like any other dependency.
+    //
+    // react/react-dom MUST also be externalized here (not just remotion) — a
+    // second bundled React copy inside this module renders the SAME `component`
+    // reference the page's importmap-loaded React created, and two React
+    // instances in one page is the textbook "Invalid Hook Call" (minified React
+    // error #321): the component's hooks resolve against instance A's dispatcher
+    // while web-renderer's internal renderer/reconciler is instance B. Discovered
+    // empirically — the first working build threw exactly this error.
+    const EXTERNAL_EXACT = new Set([
+      'remotion',
+      '@remotion/media',
+      'react',
+      'react-dom',
+      'react-dom/client',
+      'react/jsx-runtime',
+      'react/jsx-dev-runtime',
+    ]);
+    const built = await Bun.build({
+      entrypoints: [entry],
+      target: 'browser',
+      format: 'esm',
+      minify: true,
+      conditions: ['browser', 'import'],
+      plugins: [
+        {
+          name: 'exact-externals',
+          setup(builder) {
+            builder.onResolve({ filter: /.*/ }, (args) => {
+              if (EXTERNAL_EXACT.has(args.path)) return { path: args.path, external: true };
+              return null;
+            });
+          },
+        },
+      ],
+    });
+    if (!built.success) {
+      throw new Error(`web-renderer bundle failed: ${built.logs.map((l) => l.message).join('; ')}`);
+    }
+    const first = built.outputs[0];
+    if (!first) throw new Error('web-renderer bundle produced no outputs');
+    await Bun.write(cachePath, await first.text());
+    return cachePath;
+  })();
+  return webRendererLibReady;
+}
+
 /**
  * Returns the path to an IIFE bundle for the given npm package, attaching its
  * exports under `window[globalName]`. Caches under the OS temp dir so a long-

package/apps/studio/exporters/_runtime.ts

@@ -0,0 +1,69 @@
+// Shared runtime + path resolution for the external playwright render shims
+// (`bin/_{png,pdf,svg,html,pptx,video}-playwright.mjs`).
+//
+// RCA: issue-desktop-export-failures. The render exporters were written for the
+// dev-server runtime and never migrated for the compiled-Bun sidecar packaging,
+// so they broke in two ways in every `bun --compile` standalone binary (the
+// desktop app AND `npm i -g @1agh/maude`):
+//
+//   1. Shim paths computed from `import.meta.dir` → inside a compiled binary that
+//      is the virtual `/$bunfs/root`, not a real disk path, so `Bun.spawn` /
+//      `Bun.build` fail with "failed to open root directory: /$bunfs/root". This
+//      is the DDR-045 bug: filesystem-relative paths MUST derive from
+//      `paths.ts`, never a local `import.meta.dir`.
+//   2. Spawning a hardcoded `'node'` → the desktop sidecar is a compiled Bun
+//      binary with no bundled `node`; a Finder-launched `.app` can't rely on one
+//      being on PATH, so the spawn fails with `posix_spawn 'node'` ENOENT.
+//
+// This module centralizes both concerns so all six adapters resolve identically.
+
+import path from 'node:path';
+
+import { DEV_SERVER_ROOT } from '../paths.ts';
+
+/**
+ * Real-disk dir holding the render shims (`<DEV_SERVER_ROOT>/bin`).
+ *
+ * Derived from `DEV_SERVER_ROOT` (paths.ts) — NEVER `import.meta.dir`, which is
+ * the virtual `/$bunfs/root` inside a compiled binary (DDR-045). In dev this is
+ * the same `apps/studio/bin` the old `path.join(import.meta.dir, '..', 'bin')`
+ * resolved to; in the desktop bundle it resolves to `Resources/apps/studio/bin`
+ * (the shims ARE staged there — stage-resources ships the whole source tree).
+ */
+export const EXPORT_SHIM_DIR: string = path.join(DEV_SERVER_ROOT, 'bin');
+
+/** Absolute path to a render shim by basename (e.g. `_png-playwright.mjs`). */
+export function exportShimPath(basename: string): string {
+  return path.join(EXPORT_SHIM_DIR, basename);
+}
+
+/**
+ * Resolve a JS runtime able to execute the external `.mjs` render shims.
+ *
+ * Ladder (mirrors `acp/probe.ts` resolveAgentRuntime): explicit override → a
+ * real `node` on PATH → a standalone `bun` on PATH. The compiled maude binary
+ * (`process.execPath`) is deliberately NOT a fallback — a `bun --compile`
+ * standalone ignores a script argument and re-runs its own embedded entrypoint,
+ * so it can't run a shim. When nothing resolves (a packaged desktop app whose
+ * sidecar has no node/bun on PATH) we throw an ACTIONABLE error instead of the
+ * cryptic `posix_spawn 'node'` ENOENT the hardcoded `'node'` produced.
+ */
+export function resolveExportRuntime(): string {
+  // Look up against the LIVE process PATH (the desktop sidecar sets it via env at
+  // spawn — DDR-128), not Bun's startup env snapshot, so a corrected PATH is
+  // honored and the lookup is deterministic/testable.
+  const pathEnv = process.env.PATH;
+  const runtime =
+    process.env.MAUDE_EXPORT_RUNTIME ||
+    Bun.which('node', { PATH: pathEnv }) ||
+    Bun.which('bun', { PATH: pathEnv });
+  if (!runtime) {
+    throw new Error(
+      'render export needs a JS runtime (node or bun) on PATH, but this build has none. ' +
+        'Run the export from the browser dev-server (`maude design serve`), install Node, ' +
+        'or set MAUDE_EXPORT_RUNTIME to a node/bun binary. ' +
+        '(Native desktop render-export backend is pending — see RCA issue-desktop-export-failures.)'
+    );
+  }
+  return runtime;
+}

package/apps/studio/exporters/html.ts

@@ -11,7 +11,7 @@ import { tmpdir } from 'node:os';
 import path from 'node:path';
 
 import JSZip from 'jszip';
-
+import { exportShimPath, resolveExportRuntime } from './_runtime.ts';
 import {
   canvasShellUrl,
   type ExportContext,
@@ -20,7 +20,8 @@ import {
 } from './index.ts';
 import type { Target } from './scope.ts';
 
-const HTML_PLAYWRIGHT = path.join(import.meta.dir, '..', 'bin', '_html-playwright.mjs');
+// DDR-045: resolve via DEV_SERVER_ROOT, never `import.meta.dir`. See _runtime.ts.
+const HTML_PLAYWRIGHT = exportShimPath('_html-playwright.mjs');
 
 async function captureHtml(
   target: Extract<Target, { kind: 'element' }>,
@@ -45,7 +46,7 @@ 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(['node', ...args], {
+  const proc = Bun.spawn([resolveExportRuntime(), ...args], {
     cwd: path.dirname(HTML_PLAYWRIGHT),
     stdout: 'pipe',
     stderr: 'pipe',