@1agh/maude 0.58.1 → 0.58.3

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

@@ -25,7 +25,7 @@
 import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path';
 
-import { launchChromium } from './_pw-launch.mjs';
+import { assertRenderOutputSizeOk, launchChromium } from './_pw-launch.mjs';
 
 const args = Object.fromEntries(
   process.argv.slice(2).reduce((acc, cur, i, all) => {
@@ -71,7 +71,26 @@ const licenseKey = licenseKeyArg || 'free-license';
 /** Wait a real turn of the event loop + a frame so a seek settles before shot. */
 const SETTLE_MS = 16;
 
-const browser = await launchChromium();
+// GPU opt-in, measured not assumed (2026-08-09, M-series mac, 1920x1080):
+//
+//   config                        h264 prefer-hardware   png        jpeg q90
+//   headless-shell (default)      FALSE                  51ms/187KB 33ms/43KB
+//   headless-shell --enable-gpu   true                   34ms/84KB  33ms/43KB
+//   full chromium / real Chrome   true                   34-49ms    17-33ms
+//
+// So today's engine is the ONE configuration that cannot reach a hardware
+// encoder at all — `chrome-headless-shell` forces ANGLE/SwiftShader, and
+// Chromium then reports ACCELERATED_VIDEO_ENCODE as disabled. `--enable-gpu`
+// flips that.
+//
+// It is NOT on by default, deliberately: with the GPU the same page rasterizes
+// to a materially different PNG (84KB vs 187KB), i.e. it is a VISUAL change to
+// every export, and encode is not the bottleneck anyway (~50ms of a ~1050ms
+// frame — see the MAUDE_TIMING line). Changing how a design tool renders is not
+// something to smuggle in behind a perf flag. Opt in with MAUDE_CAPTURE_GPU=1.
+const gpuArgs =
+  process.env.MAUDE_CAPTURE_GPU === '1' ? ['--enable-gpu', '--ignore-gpu-blocklist'] : [];
+const browser = await launchChromium(gpuArgs.length ? { args: gpuArgs } : undefined);
 try {
   const ctx = await browser.newContext({
     viewport: { width: 1440, height: 900 },
@@ -199,6 +218,19 @@ try {
         audioCodec: rendered.audioCodec,
       };
       const ms = Date.now() - t0;
+      // Same shape as the frame-step line, so the two paths are directly
+      // comparable — that comparison is the whole speed story (~45 s vs ~37 min
+      // on the same canvas, per RCA issue-mp4-audio-export-html5audio-silent-degrade).
+      console.log(
+        `MAUDE_TIMING ${JSON.stringify({
+          path: 'renderer',
+          frames: frameCount,
+          totalMs: ms,
+          msPerFrame: Math.round((ms / Math.max(1, frameCount)) * 10) / 10,
+          scale: deviceScaleFactor,
+          audioCodec: rendered.audioCodec,
+        })}`
+      );
       console.error(
         `✓ rendered ${rendered.container}/${rendered.videoCodec}` +
           `${rendered.audioCodec ? `+${rendered.audioCodec}` : ' (muted)'} → ${out} (${rendered.bytes} B) in ${ms}ms`
@@ -368,6 +400,11 @@ async function frameStepCapture({
   // frame is drawn down to the native artboard size (the "tiny resolution" bug:
   // scale was accepted but never applied to the encode). scale=2 → 960×540 comp
   // exports at 1920×1080. Even dims (H.264 requires width/height divisible by 2).
+  // The video path is the ONE capture path that holds a full-resolution surface
+  // across thousands of frames, and it was the only one with no output-size
+  // guard — _pdf-playwright.mjs has enforced this since it existed. A scale-3
+  // 1080p comp allocates ~74MB per frame here.
+  assertRenderOutputSizeOk(clip.width, clip.height, deviceScaleFactor, '_video-playwright');
   const outW = Math.max(2, Math.round((clip.width * deviceScaleFactor) / 2) * 2);
   const outH = Math.max(2, Math.round((clip.height * deviceScaleFactor) / 2) * 2);
 
@@ -398,16 +435,27 @@ async function frameStepCapture({
     console.error(`encoder: ${started.container} / ${started.codec} @ ${outW}×${outH}`);
   }
 
+  // Per-stage accumulators. "The export takes 15 minutes" was, for a long time,
+  // answerable only by guessing which stage owned the second — so every
+  // optimization was aimed at a suspicion. One line at the end fixes that.
+  const stageMs = { seek: 0, settle: 0, screenshot: 0, encode: 0 };
   for (let f = 0; f < frameCount; f += 1) {
+    const tSeek = Date.now();
     await seekFrame(page, f, fps, mode);
+    stageMs.seek += Date.now() - tSeek;
+    const tSettle = Date.now();
     await page.waitForTimeout(SETTLE_MS);
+    stageMs.settle += Date.now() - tSettle;
+    const tShot = Date.now();
     const shot = await page.screenshot({ clip });
+    stageMs.screenshot += Date.now() - tShot;
     if (dump) {
       const p = join(dump, `frame-${String(f).padStart(5, '0')}.png`);
       writeFileSync(p, shot);
       framePaths.push(p);
     }
     if (encoding) {
+      const tEnc = Date.now();
       const b64 = shot.toString('base64');
       await page.evaluate(
         async ({ b64, isGif }) => {
@@ -416,6 +464,11 @@ async function frameStepCapture({
         },
         { b64, isGif }
       );
+      // NB: this stage is the double CDP crossing — the screenshot bytes go out
+      // to node as base64 and straight back into the same page, to an encoder
+      // that lives in that page. Its share of the total is what decides whether
+      // transport work is worth doing at all.
+      stageMs.encode += Date.now() - tEnc;
     }
     // Machine-readable progress (stdout) — spawnShim parses `MAUDE_PROGRESS`
     // lines → onProgress → job.progress → the live bar in the Exports panel, so
@@ -426,6 +479,18 @@ async function frameStepCapture({
     if (f % 30 === 0) console.error(`frame ${f + 1}/${frameCount}`);
   }
 
+  // A seek that never landed means at least one encoded frame shows the wrong
+  // content. There is no way to tell WHICH from the outside and no way for the
+  // user to notice, so the export dies here rather than shipping a file that
+  // looks fine. Counted in-page by the seek bridge (video-comp.tsx).
+  const seekFailures = await page.evaluate(() => window.__maude_seek_failures__ ?? 0);
+  if (seekFailures > 0) {
+    throw new Error(
+      `${seekFailures} frame seek(s) never landed — the capture would contain stale ` +
+        'frames. Refusing to encode. This usually means the comp failed to mount.'
+    );
+  }
+
   let result = { fps, frameCount, width: outW, height: outH, framePaths };
   // Degradation marker — this run only encodes video (no audio), so when we're
   // standing in for a failed audio renderer, tell the exporter the export is
@@ -448,6 +513,19 @@ async function frameStepCapture({
   console.error(
     `✓ captured ${frameCount} frames @ ${fps}fps (${clip.width}×${clip.height}) in ${ms}ms`
   );
+  // Machine-readable, filtered out of stdoutLines by _runtime.ts (the adapters
+  // parse the LAST stdout line as their summary, so this must never be it).
+  console.log(
+    `MAUDE_TIMING ${JSON.stringify({
+      path: 'frame-step',
+      frames: frameCount,
+      totalMs: ms,
+      msPerFrame: Math.round((ms / Math.max(1, frameCount)) * 10) / 10,
+      stageMs,
+      scale: deviceScaleFactor,
+      out: { width: outW, height: outH },
+    })}`
+  );
   // stdout = machine-readable summary for the exporter.
   console.log(JSON.stringify(result));
 }
@@ -486,6 +564,10 @@ async function seekFrame(page, frame, fps, mode) {
     return;
   }
   // comp mode — the seek bridge pauses + seeks the Player and resolves post-paint.
+  // It now REJECTS when a seek never lands (video-comp.tsx), instead of resolving
+  // as if it had; that rejection propagates out of this evaluate and fails the
+  // export, which is the point — a stale frame is a valid-looking file with the
+  // wrong pixels, and no downstream check would ever catch it.
   // A comp with classic remotion <Video>/<OffthreadVideo> renders a real <video>
   // whose seek is ASYNC — 2 rAF isn't enough, so wait for every video to land on
   // its frame (`seeked` / readyState) before the screenshot, else a stale frame
@@ -494,7 +576,8 @@ async function seekFrame(page, frame, fps, mode) {
   // on (verified across mid-clip + mid-transition frames — DDR-148 addendum).
   await page.evaluate(async (frame) => {
     if (typeof window.__maude_seek__ === 'function') {
-      await window.__maude_seek__(frame);
+      // strict: a capture must never proceed on a seek that did not land.
+      await window.__maude_seek__(frame, { strict: true });
     }
     const vids = Array.from(document.querySelectorAll('video'));
     if (vids.length) {

package/apps/studio/bin/import-figma.sh

@@ -0,0 +1,38 @@
+#!/usr/bin/env bash
+# import-figma.sh — Figma / FigJam import (REST door). Thin shim over
+# _import-figma.mjs; reached via `maude design import-figma` (DDR-062), never a
+# raw bin path. See _import-figma.mjs + DDR-216 for the full architecture +
+# security rationale. Requires bun — _import-figma.mjs imports the `.ts`
+# annotation model and figma modules directly, same constraint as
+# import-tokens.sh.
+#
+# All args are forwarded quoted ("$@") — never unquoted or eval-expanded. This
+# matters more than usual here: a Figma URL is caller-supplied and a node id
+# rides in its query string. The charset/shape validation itself happens in
+# figma/url.ts, not in this shell (DDR-216 D4); the wrapper's ONLY job is safe
+# argv passthrough.
+#
+# Usage:
+#   import-figma.sh --board  <figjam-url> --root <repo> [--design-root .design]
+#                   [--slug <name>] [--dry-run] [--json]
+#   import-figma.sh --frames <figma-url>  --root <repo>   (Phase 3)
+#   import-figma.sh --tokens <figma-url>  --root <repo>   (Phase 4)
+#
+# Needs a Figma personal access token with the `file_content:read` scope, added
+# once in Settings.
+#
+# Exit: 0 ok · 1 other · 2 usage · 3 validation reject · 4 fetch/parse error ·
+#       5 no token configured · 6 write/containment error.
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+
+case "$1" in
+  --help|-h) sed -n '2,25p' "$0" | sed 's/^# \?//'; exit 0 ;;
+esac
+
+if ! command -v bun >/dev/null 2>&1; then
+  echo "import-figma.sh: bun is required (hard dependency — see plugins/design/dependencies.json)." >&2
+  echo "  Install: curl -fsSL https://bun.sh/install | bash" >&2
+  exit 1
+fi
+
+exec bun run "$SCRIPT_DIR/_import-figma.mjs" "$@"

package/apps/studio/bin/read-annotations.mjs

@@ -106,6 +106,9 @@ Args:
 
 FigJam v3 additive fields per annotation: z (render order), groupIds (deepest →
 shallowest), author ("ai" for annotate-verb strokes), authorName/authorId
+// (an IMPORTED stroke carries authorName "imported-figma" — DDR-216 D7, so a
+// consuming skill can tell third-party content from what the user drew), the
+// rendered fontSize for text/sticky (so 8 px is distinguishable from a heading)
 (human-drawn stickies), and from/to host ids on bound arrows.
 
 Section annotations additionally carry members: an array of every OTHER
@@ -210,6 +213,10 @@ function readText(attrs, inner) {
     h: null,
     text: decodeEntities(inner).trim(),
     color: attr(attrs, 'fill') || attr(attrs, 'stroke') || null,
+    // DDR-216 D6b / review F5 — a consuming skill must be able to see HOW BIG
+    // this renders. Without it, text at the 8 px floor is indistinguishable
+    // from a heading in the JSON an agent is handed.
+    fontSize: num(attr(attrs, 'font-size')),
   };
   if (anchorId) o.anchorId = anchorId;
   return o;
@@ -235,7 +242,8 @@ function readSticky(attrs, inner) {
   // Geometry off the inner <rect>; paper tint off the group fill; body off the
   // inner <text>. (annotations-layer.tsx strokeToSvgEl 'sticky' branch.)
   const rectAttrs = inner.match(/<rect\b([^>]*?)\/?>/)?.[1] ?? '';
-  const body = inner.match(/<text\b[^>]*>([\s\S]*?)<\/text>/)?.[1] ?? '';
+  const textEl = inner.match(/<text\b([^>]*)>([\s\S]*?)<\/text>/);
+  const body = textEl?.[2] ?? '';
   return {
     tool: 'sticky',
     id: attr(attrs, 'data-id') || '',
@@ -245,6 +253,8 @@ function readSticky(attrs, inner) {
     h: num(attr(rectAttrs, 'height')),
     text: decodeEntities(body).trim(),
     color: attr(attrs, 'fill') || null,
+    // See readText — a consuming skill needs the rendered size.
+    fontSize: num(attr(textEl?.[1] ?? '', 'font-size')),
   };
 }
 

package/apps/studio/bun.lock

@@ -14,10 +14,10 @@
         "@mediabunny/aac-encoder": "1.50.7",
         "@mediabunny/flac-encoder": "1.50.7",
         "@mediabunny/mp3-encoder": "1.50.7",
-        "@remotion/media": "4.0.486",
-        "@remotion/player": "4.0.486",
-        "@remotion/transitions": "4.0.486",
-        "@remotion/web-renderer": "4.0.486",
+        "@remotion/media": "4.0.507",
+        "@remotion/player": "4.0.507",
+        "@remotion/transitions": "4.0.507",
+        "@remotion/web-renderer": "4.0.507",
         "dom-to-pptx": "^1.1.10",
         "dom-to-svg": "^0.12.2",
         "gifenc": "^1.0.3",
@@ -37,7 +37,7 @@
         "pptxgenjs": "^4.0.1",
         "react": "^19.2.7",
         "react-dom": "^19.2.7",
-        "remotion": "4.0.486",
+        "remotion": "4.0.507",
         "svgo": "^4.0.1",
         "y-protocols": "^1.0.7",
         "yjs": "^13.6.31",
@@ -323,19 +323,19 @@
 
     "@radix-ui/rect": ["@radix-ui/rect@1.1.2", "", {}, "sha512-xnXE7wG13PI+cxieVssYXlQJuYVRhH9NBoxt3KNwzghDIA69GMm7d4wXRouHIYjE+KvS6U/MsMO73NdS2MH9ZA=="],
 
-    "@remotion/licensing": ["@remotion/licensing@4.0.486", "", {}, "sha512-9viDTCmthh0LntxGQxKaArHPVW6wAc6FmoZfBNdIHfXoE9FCfhb+VXeJVhfx2Z6awPgu7vn93wstGBMussODOw=="],
+    "@remotion/licensing": ["@remotion/licensing@4.0.507", "", {}, "sha512-fdods4YD9c8Ww69wHdnmXpjx7W0rvct6B7gLb92cWsd+ITSUG3hKoh+NqSWXF0GK5bk8IFRmTtBAwJObxow9wA=="],
 
-    "@remotion/media": ["@remotion/media@4.0.486", "", { "dependencies": { "mediabunny": "1.50.3", "remotion": "4.0.486", "zod": "4.3.6" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-vRglyMIvLDuVkj6r1miIcWDoVOoTHsWig4dMLM+F6Z5Z9BxVC95Vtlu8HjrtAvpV6K0AZ1uK3RhXemI+HybvCQ=="],
+    "@remotion/media": ["@remotion/media@4.0.507", "", { "dependencies": { "mediabunny": "1.50.8", "remotion": "4.0.507", "zod": "4.4.3" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-PpSbLq0x2E/yZGHyYcGsFpUWcocy+w2uV64qcTgASSN3Vd2ZSwNAaAGrNCUD9nN3EUaHjsoqheL/o8cRTZZ06g=="],
 
-    "@remotion/paths": ["@remotion/paths@4.0.486", "", {}, "sha512-/qhmgyQ7/xUxbxnuqtZqfAjBzkV15Tvw73r0wKS82uVE+pBzlS14aucgoJcfksDv26VwCXn6BdHpUXUjXFCjhA=="],
+    "@remotion/paths": ["@remotion/paths@4.0.507", "", {}, "sha512-/2vXtdZDvpicamS30CmW+qYkA/yWhTUCk/5MysLExZYll8pqCR+BTlluRwpkfqhH0H4VJ4LwDoY1ZRd3MQ1HeQ=="],
 
-    "@remotion/player": ["@remotion/player@4.0.486", "", { "dependencies": { "remotion": "4.0.486" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-S8wh+bS695gidwXYNnCjwZzJG9oPzyYBFMjpO0rlTbrNc3naIKT8UP443J0opitP4g8VuXnoIKObF7JzAfpe5A=="],
+    "@remotion/player": ["@remotion/player@4.0.507", "", { "dependencies": { "remotion": "4.0.507" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-ZAunyyCfOXSYh5sZrp+vFxZlSPatg5evmh7fHVCndAOWBUPIDVjdUWEM2D4i132MsN6GXasXDByi+6H0H+IkhQ=="],
 
-    "@remotion/shapes": ["@remotion/shapes@4.0.486", "", { "dependencies": { "@remotion/paths": "4.0.486", "remotion": "4.0.486" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-k+2EiXVd6heKVnGACfSnFF5Ox46lvsq6RFtHvPc3CunSMJa04Ui1Z4vNQDcddCSXoHnT/+vht6bjZNlSk36OrQ=="],
+    "@remotion/shapes": ["@remotion/shapes@4.0.507", "", { "dependencies": { "@remotion/paths": "4.0.507", "remotion": "4.0.507" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-PinB0Va4FRdv9OeaoIxikPqius9XQj5S5xruQEg/Y1CX+1Eu9KOVXqPOrMgELjkfPLLQ0rA/I4gmKoVxhaoYDQ=="],
 
-    "@remotion/transitions": ["@remotion/transitions@4.0.486", "", { "dependencies": { "@remotion/paths": "4.0.486", "@remotion/shapes": "4.0.486", "remotion": "4.0.486" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-U7K21B2NsPie3AE4vrbX7Th46Nw1dFvjs5smYLjuYRaSWPO6vTbNbPQn+pQFXf/dzTjygTNUU9Co5s3oZZNz9A=="],
+    "@remotion/transitions": ["@remotion/transitions@4.0.507", "", { "dependencies": { "@remotion/paths": "4.0.507", "@remotion/shapes": "4.0.507", "remotion": "4.0.507" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-d0rtF2gVdSxR4Q35kjSSEdQ1ji0WoKFRaeoNgx/7NO13c/3gDSECAg9m2LoP+fN5pkZFdfL8z+yhM16rL7rWjg=="],
 
-    "@remotion/web-renderer": ["@remotion/web-renderer@4.0.486", "", { "dependencies": { "@mediabunny/aac-encoder": "1.50.3", "@mediabunny/flac-encoder": "1.50.3", "@mediabunny/mp3-encoder": "1.50.3", "@remotion/licensing": "4.0.486", "mediabunny": "1.50.3", "remotion": "4.0.486" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-RbG4qFmg6paFDDc/rNL/3hooDPEWPnHu8MtDJB5axD/TiXFsaNR009L9dP610b9hPGwlykIOooSlD7INzo0Gqw=="],
+    "@remotion/web-renderer": ["@remotion/web-renderer@4.0.507", "", { "dependencies": { "@mediabunny/aac-encoder": "1.50.8", "@mediabunny/flac-encoder": "1.50.8", "@mediabunny/mp3-encoder": "1.50.8", "@remotion/licensing": "4.0.507", "mediabunny": "1.50.8", "remotion": "4.0.507" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-fH8iZX1e0hmeJ+hPqn3RfqrDBNxMGsZZzfdyX2QpTDZ9F2kKqOkh0dQsRqaU8o+YoE8JNV/+FyYm4yyDAh9o6Q=="],
 
     "@stablelib/base64": ["@stablelib/base64@1.0.1", "", {}, "sha512-1bnPQqSxSuc3Ii6MhBysoWCg58j97aUjuCSZrGSmDxNqtytIi0k8utUenAwTZN4V5mXXYGsVUI9zeBqy+jBOSQ=="],
 
@@ -757,7 +757,7 @@
 
     "readable-stream": ["readable-stream@4.7.0", "", { "dependencies": { "abort-controller": "^3.0.0", "buffer": "^6.0.3", "events": "^3.3.0", "process": "^0.11.10", "string_decoder": "^1.3.0" } }, "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg=="],
 
-    "remotion": ["remotion@4.0.486", "", { "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-njrfAmfr+fJCr4NXY6hlbzWpIRkfnF0lPdRGZ4DkQao3/XRUtuB166GcVuaVnUpwa8NP+W+Q6TczOPveUpr0pw=="],
+    "remotion": ["remotion@4.0.507", "", { "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-g/NrnRZKJyh0isE+/0sIxKlgJl6BH5v/CJ35W4TGYR1obQZf60fHkf9CGxSBHJEw27dG1PJCgKT75YGfoCZ7tg=="],
 
     "require-from-string": ["require-from-string@2.0.2", "", {}, "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="],
 
@@ -881,17 +881,11 @@
 
     "@pdf-lib/upng/pako": ["pako@1.0.11", "", {}, "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="],
 
-    "@remotion/media/mediabunny": ["mediabunny@1.50.3", "", { "dependencies": { "@types/dom-mediacapture-transform": "^0.1.11", "@types/dom-webcodecs": "0.1.13" } }, "sha512-lw6NjC6++/p6MzHC3u7RbkpM0dnukEQcAAXzZwXlmmx9y8n6132DXUMer2WaNn8RPuGgUpnemi/QIVNpEnONhQ=="],
+    "@remotion/web-renderer/@mediabunny/aac-encoder": ["@mediabunny/aac-encoder@1.50.8", "", { "peerDependencies": { "mediabunny": "^1.0.0" } }, "sha512-A5Se/LZd6RmYq/h36lBMSEsHvsyW8d0toR7FrAwpsFYbK+DVQYf90KiBT1Aw/mzLXx8/ypIOORJnd1sVZqOvJQ=="],
 
-    "@remotion/media/zod": ["zod@4.3.6", "", {}, "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg=="],
+    "@remotion/web-renderer/@mediabunny/flac-encoder": ["@mediabunny/flac-encoder@1.50.8", "", { "peerDependencies": { "mediabunny": "^1.0.0" } }, "sha512-4cfN03SbEoQaG+eBeYFUAb1R1ALaAHzf43dXFzQTr/oO5ueqzTgBoG3coKrIvBaAMU7Vv36mrBKLX8bvTppdAQ=="],
 
-    "@remotion/web-renderer/@mediabunny/aac-encoder": ["@mediabunny/aac-encoder@1.50.3", "", { "peerDependencies": { "mediabunny": "^1.0.0" } }, "sha512-rVPnhJbn+7BUsu09sEl/bee/DkzmAc33oErJ250RPlCqrPndx61DSb2GLvVmmSx6L2LU2WyCnvJIMUrGPJEXPA=="],
-
-    "@remotion/web-renderer/@mediabunny/flac-encoder": ["@mediabunny/flac-encoder@1.50.3", "", { "peerDependencies": { "mediabunny": "^1.0.0" } }, "sha512-aIEHE3eQ+hG35rRvtNNYO6ufTiGkZpzgOBjcqK8CQuRAMtUY9/DzV12jj52L0nSj2zmBKXQQ6dWBWsusigV/dQ=="],
-
-    "@remotion/web-renderer/@mediabunny/mp3-encoder": ["@mediabunny/mp3-encoder@1.50.3", "", { "peerDependencies": { "mediabunny": "^1.0.0" } }, "sha512-dyjWOhG27+ctlejfjY4vFy0g8wzo0NCRTNQ/GNsCaHxWkduaq0GI2BWKXm6UFCsfnUKgtDWMEu4zOPl9fKpbsA=="],
-
-    "@remotion/web-renderer/mediabunny": ["mediabunny@1.50.3", "", { "dependencies": { "@types/dom-mediacapture-transform": "^0.1.11", "@types/dom-webcodecs": "0.1.13" } }, "sha512-lw6NjC6++/p6MzHC3u7RbkpM0dnukEQcAAXzZwXlmmx9y8n6132DXUMer2WaNn8RPuGgUpnemi/QIVNpEnONhQ=="],
+    "@remotion/web-renderer/@mediabunny/mp3-encoder": ["@mediabunny/mp3-encoder@1.50.8", "", { "peerDependencies": { "mediabunny": "^1.0.0" } }, "sha512-eBT/H30tTu8AmZXqZ5RTpJ9VmwVlwednajuOrrWp0GS6cbGXsGMQ60Qvr3ZMIE0QDiadlEzb8/ozR+doP+MC1g=="],
 
     "body-parser/content-type": ["content-type@2.0.0", "", {}, "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ=="],
 

package/apps/studio/canvas-edit.ts

@@ -1641,7 +1641,21 @@ const CLIP_TAGS = new Set(['Sequence', 'Series.Sequence', 'TransitionSeries.Sequ
 /** Transition tags (occupy a slot between clips inside a TransitionSeries). */
 const TRANSITION_TAGS = new Set(['Series.Transition', 'TransitionSeries.Transition']);
 /** Media tags that carry a `src` (the replace-media + drop targets). */
-const MEDIA_TAGS = new Set(['Video', 'OffthreadVideo', 'Audio', 'Img', 'Image']);
+// `Maude*` spellings are the collision-avoidance ALIASES clip-ops emits when a
+// canvas already declares a component of that name (e.g. `export default
+// function Video()`). They are the same elements and must tokenize the same,
+// or the Timeline silently loses the clip's media (RCA
+// issue-mp4-audio-export-html5audio-silent-degrade follow-up).
+const MEDIA_TAGS = new Set([
+  'Video',
+  'OffthreadVideo',
+  'Audio',
+  'Img',
+  'Image',
+  'MaudeVideo',
+  'MaudeAudio',
+  'MaudeImg',
+]);
 /** Remotion/layout primitives that are structural, not their own timeline layer. */
 const LAYER_SKIP_TAGS = new Set([
   'AbsoluteFill',
@@ -4534,7 +4548,7 @@ export function assembleCompSource(
       const dur = Math.max(1, Math.round(c.durationInFrames ?? defDur));
       seqLines.push(
         `        <TransitionSeries.Sequence name="clip-${i + 1}" durationInFrames={${dur}}>`,
-        `          <OffthreadVideo src="${escapeAttr(c.src)}" />`,
+        `          <Video src="${escapeAttr(c.src)}" />`,
         `        </TransitionSeries.Sequence>`
       );
       cursor += dur;
@@ -4557,16 +4571,26 @@ export function assembleCompSource(
   // the cursor (with the historical defDur floor for degenerate inputs).
   const total = videos.length || audios.length ? Math.max(cursor, defDur) : fps * 5;
 
+  // Media elements come from @remotion/media, NEVER from 'remotion'. The export's
+  // only audio-capable path (renderMediaOnWeb) rejects `remotion`'s `Audio`
+  // (= Html5Audio) and `OffthreadVideo` outright, so a reel assembled with those
+  // exports MUTED — and ~40x slower, on the frame-step fallback. Every reel this
+  // function emits has a music bed by default, which made it the widest carrier
+  // of the bug. RCA issue-mp4-audio-export-html5audio-silent-degrade.
   const remotionImports = ['AbsoluteFill'];
-  if (videos.length) remotionImports.push('OffthreadVideo');
-  if (audios.length) remotionImports.push('Audio');
+  const mediaImports: string[] = [];
+  if (videos.length) mediaImports.push('Video');
+  if (audios.length) mediaImports.push('Audio');
   const transitionsImport = videos.length
     ? `import { TransitionSeries } from '@remotion/transitions';\n`
     : '';
+  const mediaImport = mediaImports.length
+    ? `import { ${mediaImports.join(', ')} } from '@remotion/media';\n`
+    : '';
 
   return [
     `import { DesignCanvas, DCSection, DCArtboard, VideoComp } from '@maude/canvas-lib';`,
-    `${transitionsImport}import { ${remotionImports.join(', ')} } from 'remotion';`,
+    `${transitionsImport}${mediaImport}import { ${remotionImports.join(', ')} } from 'remotion';`,
     ``,
     `const Comp = () => (`,
     `  <AbsoluteFill style={{ background: 'var(--bg-0)' }}>`,