@1agh/maude 0.58.2 → 0.59.0

package/apps/studio/bin/perf.sh

@@ -0,0 +1,228 @@
+#!/usr/bin/env bash
+# perf.sh — render-performance benchmark for a canvas (`maude design perf`).
+#
+# Drives a scripted pan + zoom against a live canvas and reports frame-time
+# percentiles, long-task count and the React render count during the gesture,
+# with a DELTA against the previous run of the same (canvas, engine) pair. The
+# history file makes "before and after" a property of the tool rather than
+# something the operator has to remember to write down.
+#
+# Deliberately NOT a CI gate. Headless frame timings swing with GPU load and
+# machine state, so an absolute threshold would go red for reasons unrelated to
+# the code and train everyone to ignore it. The gate is the delta, read by a
+# human, on one machine. (Plan: .ai/plans/feature-canvas-render-performance.md)
+#
+# Usage:
+#   perf.sh [--root <repo>] [--canvas <rel-path>] [--fixture]
+#           [--boards N] [--strokes N]
+#           [--pan N] [--zoom N] [--timeout S] [--repeat N]
+#           [--engine chromium|safari]
+#           [--history <path>] [--json]
+#
+#   --engine safari measures WebKit through safaridriver (one-time
+#   `safaridriver --enable`, needs admin auth). Use it for anything the Tauri
+#   desktop shell has to be fast at: the desktop is WKWebView, and Chromium does
+#   NOT reproduce WebKit's compositing / re-raster behaviour — a canvas can sit
+#   at a warm 60fps in headless Chromium while being unusable in the .app.
+#
+#   --canvas   Canvas to measure, relative to <designRoot> (default: _active.json).
+#   --fixture  Generate + measure the synthetic fixture instead (--boards/--strokes).
+#   --json     Raw JSON (current + previous run) instead of the human report.
+#
+# Reads:  $DESIGN_ROOT/_server.json  (must exist — run `maude design server-up` first)
+# Writes: $DESIGN_ROOT/_smoke/perf/history.jsonl   (append-only, per-machine runtime state)
+#         $DESIGN_ROOT/ui/perf-fixture.tsx         (only with --fixture)
+#
+# Exit: 0 measured / 1 missing dep or capture failure / 2 bad args.
+
+REPO=""
+CANVAS=""
+FIXTURE=0
+BOARDS=128
+STROKES=150
+PAN=60
+ZOOM=40
+REPEAT=3
+PROBE_ENGINE="chromium"
+FIT_ALL=0
+STUDIO=0
+TIMEOUT=30
+HISTORY=""
+JSON=0
+
+while [ $# -gt 0 ]; do
+  case "$1" in
+    --root)     REPO="$2"; shift 2 ;;
+    --canvas)   CANVAS="$2"; shift 2 ;;
+    --fixture)  FIXTURE=1; shift ;;
+    --boards)   BOARDS="$2"; shift 2 ;;
+    --strokes)  STROKES="$2"; shift 2 ;;
+    --pan)      PAN="$2"; shift 2 ;;
+    --zoom)     ZOOM="$2"; shift 2 ;;
+    --timeout)  TIMEOUT="$2"; shift 2 ;;
+    --repeat)   REPEAT="$2"; shift 2 ;;
+    --engine)   PROBE_ENGINE="$2"; shift 2 ;;
+    --fit-all)  FIT_ALL=1; shift ;;
+    --studio)   STUDIO=1; shift ;;
+    --history)  HISTORY="$2"; shift 2 ;;
+    --json)     JSON=1; shift ;;
+    --help|-h)
+      sed -n '2,30p' "$0" | sed 's/^# \?//'
+      exit 0
+      ;;
+    *)
+      echo "perf.sh: unknown arg '$1' (try --help)" >&2
+      exit 2
+      ;;
+  esac
+done
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+# JS runtime. The packaged desktop app ships no user `node` (DDR-177) but always
+# has a `bun` on PATH (real, or the compiled-sidecar shim `maude` stages), so
+# prefer bun and keep node as the developer-machine fallback.
+if command -v bun >/dev/null 2>&1; then JS_RUNTIME="bun"; else JS_RUNTIME="node"; fi
+
+# ---------- resolve repo + design root (mirrors smoke.sh) ----------
+if [ -z "$REPO" ]; then
+  REPO="${CLAUDE_PROJECT_DIR:-$(git rev-parse --show-toplevel 2>/dev/null || pwd)}"
+fi
+DESIGN_ROOT="$REPO/.design"
+[ -d "$DESIGN_ROOT" ] || { echo "perf.sh: no .design/ under $REPO" >&2; exit 1; }
+
+STATE="$DESIGN_ROOT/_server.json"
+[ -f "$STATE" ] || { echo "perf.sh: $STATE missing — run 'maude design server-up' first" >&2; exit 1; }
+
+if command -v jq >/dev/null 2>&1; then
+  PORT=$(jq -r .port "$STATE" 2>/dev/null)
+else
+  PORT=$(sed -nE 's/.*"port"[[:space:]]*:[[:space:]]*([0-9]+).*/\1/p' "$STATE" | head -n1)
+fi
+[ -n "$PORT" ] || { echo "perf.sh: no port in $STATE" >&2; exit 1; }
+
+# ---------- fixture generation ----------
+if [ "$FIXTURE" = "1" ]; then
+  # Counts are validated as plain integers and paths travel via argv, never
+  # interpolated into the script body: `--boards "1); <js>; ("` or a design root
+  # containing a quote would otherwise execute inside this node process, which
+  # runs with the user's full privileges. `maude design perf` is reachable from
+  # an agent session, so its arguments are not automatically trustworthy.
+  case "$BOARDS" in ''|*[!0-9]*) echo "perf.sh: --boards must be a positive integer" >&2; exit 2 ;; esac
+  case "$STROKES" in ''|*[!0-9]*) echo "perf.sh: --strokes must be a non-negative integer" >&2; exit 2 ;; esac
+  # Upper bound too: the guards above accept any magnitude, and `--boards 99999999`
+  # is a cheap way to make an auto-approved verb fill a disk.
+  [ "$BOARDS" -le 2000 ] || { echo "perf.sh: --boards must be <= 2000" >&2; exit 2; }
+  [ "$STROKES" -le 5000 ] || { echo "perf.sh: --strokes must be <= 5000" >&2; exit 2; }
+  "$JS_RUNTIME" -e '
+    const [modPath, designRoot, boards, strokes] = process.argv.slice(1);
+    import(modPath).then((m) => {
+      const r = m.writePerfCanvas({
+        designRoot,
+        boards: Number(boards),
+        strokes: Number(strokes),
+      });
+      console.error("→ fixture written: " + r.canvasPath);
+    }).catch((e) => {
+      console.error("perf.sh: fixture generation failed: " + e.message);
+      process.exit(1);
+    });
+  ' "$SCRIPT_DIR/../test/fixtures/perf-canvas.mjs" "$DESIGN_ROOT" "$BOARDS" "$STROKES" || exit 1
+  CANVAS="ui/perf-fixture.tsx"
+fi
+
+# ---------- resolve canvas ----------
+if [ -z "$CANVAS" ]; then
+  ACTIVE_FILE="$DESIGN_ROOT/_active.json"
+  if [ -f "$ACTIVE_FILE" ] && command -v jq >/dev/null 2>&1; then
+    CANVAS=$(jq -r '.active // empty' "$ACTIVE_FILE" 2>/dev/null)
+  fi
+fi
+[ -n "$CANVAS" ] || { echo "perf.sh: no --canvas and no active canvas in _active.json" >&2; exit 2; }
+
+# `_active.json` stores the path relative to the REPO (".design/ui/x.tsx"); the
+# canvas-shell query param wants it the same way, so normalize either input
+# shape to the repo-relative form rather than guessing at call sites.
+DESIGN_REL="${DESIGN_ROOT#"$REPO"/}"
+case "$CANVAS" in
+  "$DESIGN_REL"/*) REL_FULL="$CANVAS" ;;
+  *)               REL_FULL="$DESIGN_REL/$CANVAS" ;;
+esac
+# Containment: an existence check alone would accept `--canvas ../../../x.tsx`
+# and leave the boundary entirely to the dev-server route. A benchmark has no
+# business probing that gate.
+case "$REL_FULL" in
+  *..*) echo "perf.sh: --canvas must not contain '..'" >&2; exit 2 ;;
+esac
+[ -f "$REPO/$REL_FULL" ] || { echo "perf.sh: canvas not found: $REPO/$REL_FULL" >&2; exit 2; }
+
+# Percent-encode the whole value, not just spaces: a canvas named with `#`, `&`
+# or `%` would otherwise truncate or rewrite the query string.
+REL_ENC=$("$JS_RUNTIME" -e 'process.stdout.write(encodeURIComponent(process.argv[1]))' "$REL_FULL")
+URL="http://localhost:${PORT}/_canvas-shell.html?canvas=${REL_ENC}"
+
+# ---------- history path ----------
+# `_smoke/` is already IGNORED runtime state (DDR-115), so the benchmark log
+# inherits the right gitignore posture without touching any of the three lists.
+if [ -z "$HISTORY" ]; then
+  HISTORY="$DESIGN_ROOT/_smoke/perf/history.jsonl"
+fi
+# Containment: `perf` is auto-approved in ACP sessions (`Bash(maude:*)`), so an
+# unconstrained --history would be an arbitrary mkdir + append outside every
+# write-scope gate. The default already lives under the design root; require it.
+HISTORY_ABS=$("$JS_RUNTIME" -e 'const p=require("path");process.stdout.write(p.resolve(process.argv[1]))' "$HISTORY")
+DESIGN_ABS=$("$JS_RUNTIME" -e 'const p=require("path");process.stdout.write(p.resolve(process.argv[1]))' "$DESIGN_ROOT")
+case "$HISTORY_ABS" in
+  "$DESIGN_ABS"/*) ;;
+  *) echo "perf.sh: --history must resolve under $DESIGN_ABS (got $HISTORY_ABS)" >&2; exit 2 ;;
+esac
+HISTORY="$HISTORY_ABS"
+mkdir -p "$(dirname "$HISTORY")"
+
+# ---------- engine tag ----------
+# The tag is part of the history KEY, not decoration: a WKWebView number and a
+# headless-Chromium number are not comparable, and silently averaging them would
+# make every delta meaningless.
+ENGINE_TAG="${MAUDE_PERF_ENGINE_TAG:-}"
+if [ -z "$ENGINE_TAG" ]; then
+  if [ -n "$MAUDE_DESKTOP" ]; then ENGINE_TAG="webkit-desktop"; else ENGINE_TAG="blink-headless"; fi
+fi
+
+if [ "$PROBE_ENGINE" = "safari" ]; then
+  command -v safaridriver >/dev/null 2>&1 || {
+    echo "perf.sh: safaridriver not found (macOS only)" >&2
+    exit 1
+  }
+  PROBE_URL="$URL"
+  if [ "$STUDIO" = "1" ]; then
+    # Studio mode drives the real app shell (root URL + a file-tree click),
+    # not the bare canvas page — see _perf-probe-safari.mjs for why that
+    # difference changes the numbers.
+    PROBE_URL="http://localhost:${PORT}/"
+    SLUG=$(printf '%s' "${REL_FULL#"$DESIGN_REL"/}" \
+      | sed -E 's/\.[A-Za-z]+$//' | tr '[:upper:]' '[:lower:]' \
+      | sed -E 's/[^a-z0-9]+/-/g; s/^-+|-+$//g')
+  fi
+  echo "→ perf: $REL_FULL | port: $PORT | engine: webkit-safari${STUDIO:+ | studio}" >&2
+  ARGS=(--url "$PROBE_URL" --label "$REL_FULL$([ "$STUDIO" = "1" ] && echo " (studio)")" --history "$HISTORY"
+        --timeout "$TIMEOUT" --pan "$PAN" --zoom "$ZOOM" --repeat "$REPEAT")
+  [ "$STUDIO" = "1" ] && ARGS+=(--studio "$SLUG")
+  [ "$FIT_ALL" = "1" ] && ARGS+=(--fit-all)
+  [ "$JSON" = "1" ] && ARGS+=(--json)
+  exec "$JS_RUNTIME" "$SCRIPT_DIR/_perf-probe-safari.mjs" "${ARGS[@]}"
+fi
+
+AB="${MAUDE_AGENT_BROWSER:-agent-browser}"
+command -v "$AB" >/dev/null 2>&1 || {
+  echo "perf.sh: agent-browser not on PATH (required — the probe needs scripted gestures + rAF timing)" >&2
+  exit 1
+}
+
+echo "→ perf: $REL_FULL | port: $PORT | engine: $ENGINE_TAG" >&2
+
+ARGS=(--url "$URL" --label "$REL_FULL" --history "$HISTORY" --engine-tag "$ENGINE_TAG"
+      --timeout "$TIMEOUT" --pan "$PAN" --zoom "$ZOOM" --repeat "$REPEAT")
+[ "$FIT_ALL" = "1" ] && ARGS+=(--fit-all)
+[ "$JSON" = "1" ] && ARGS+=(--json)
+
+exec "$JS_RUNTIME" "$SCRIPT_DIR/_perf-probe.mjs" "${ARGS[@]}"

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/bin/smoke.sh

@@ -26,10 +26,14 @@
 #            [--changed-only]         (default off — screenshot only canvases changed
 #                                      since the last smoke run; escalates to the full
 #                                      set when dev-server / canvas-lib / templates changed)
+#            [--perf]                 (also benchmark the heaviest canvas after the sweep
+#                                      and append the frame-time / render-count delta to
+#                                      the report — see perf.sh)
 #
 # Reads:
 #   $DESIGN_ROOT/_server.json   (must exist — caller runs server-up.sh first)
-#   $DESIGN_ROOT/ui/*.tsx       (canvases)
+#   $DESIGN_ROOT/ui/**/*.tsx    (canvases, RECURSIVELY — `--pages` imports
+#                               land in ui/<folder>/ and were being missed)
 #   $DESIGN_ROOT/system/*/preview/*.tsx   (specimens, when --include-system 1)
 #
 # Writes:
@@ -52,6 +56,7 @@ INCLUDE_SYSTEM=1
 TIMEOUT=8
 ENGINE="auto"
 CHANGED_ONLY=0
+PERF=0
 
 while [ $# -gt 0 ]; do
   case "$1" in
@@ -61,6 +66,7 @@ while [ $# -gt 0 ]; do
     --timeout)        TIMEOUT="$2"; shift 2 ;;
     --engine)         ENGINE="$2"; shift 2 ;;
     --changed-only)   CHANGED_ONLY=1; shift ;;
+    --perf)           PERF=1; shift ;;
     --help|-h)
       sed -n '2,30p' "$0" | sed 's/^# \?//'
       exit 0
@@ -111,13 +117,24 @@ fi
 echo "→ smoke engine: $ENGINE | port: $PORT | out: $OUT_DIR" >&2
 
 # ---------- collect canvases ----------
+#
+# RECURSIVE, and that is a fix, not a preference. This was `-maxdepth 1` and the
+# consequence was measured on the first live Figma migration: `--pages` always
+# writes to `ui/<folder>/`, so EVERY canvas the primary import route produces was
+# invisible here. The run reported "52/52 canvases rendered styled" having never
+# looked at the 6 imported pages — green, true, and worthless. The import-graph
+# lint below already walks `ui/` recursively, which is exactly why the mismatch
+# went unnoticed: the lint covered the imports, the screenshots did not.
+#
+# A `_`-prefixed DIRECTORY is skipped as well as a `_`-prefixed file, so runtime
+# state (`_history/`, `_draw/`, `_smoke/` output itself) never enters the sweep —
+# without that, recursing would screenshot our own previous reports.
 CANVASES=""
 if [ -d "$DESIGN_ROOT/ui" ]; then
   while IFS= read -r f; do
-    base=$(basename "$f")
-    case "$base" in _*) continue ;; esac
+    case "$f" in *'/_'*) continue ;; esac
     CANVASES="$CANVASES$f"$'\n'
-  done < <(find "$DESIGN_ROOT/ui" -maxdepth 1 -type f -name '*.tsx' 2>/dev/null | sort)
+  done < <(find "$DESIGN_ROOT/ui" -type f -name '*.tsx' 2>/dev/null | sort)
 fi
 
 if [ "$INCLUDE_SYSTEM" = "1" ] && [ -d "$DESIGN_ROOT/system" ]; then
@@ -130,7 +147,7 @@ fi
 
 CANVASES=$(printf '%s' "$CANVASES" | sed '/^$/d')
 COUNT=$(printf '%s' "$CANVASES" | grep -c .)
-[ "$COUNT" -gt 0 ] || { echo "smoke.sh: no canvases found (ui/*.tsx or system/*/preview/*.tsx)" >&2; exit 1; }
+[ "$COUNT" -gt 0 ] || { echo "smoke.sh: no canvases found (ui/**/*.tsx or system/*/preview/*.tsx)" >&2; exit 1; }
 echo "→ found $COUNT canvases" >&2
 
 # ---------- --changed-only incremental filter (Phase C / DDR-061) ----------
@@ -525,6 +542,33 @@ TOTAL_FAIL=$((FAILED + LINT_FAILED))
   fi
 } >> "$MD"
 
+# ---------- optional perf pass (--perf) ----------
+# Smoke answers "does it still render"; this answers "is it still fast", against
+# the same canvases, in the same run. The heaviest canvas (most artboards) is the
+# one worth timing — a 1-artboard specimen has nothing to say about pan/zoom.
+if [ "$PERF" = "1" ]; then
+  HEAVIEST=""
+  HEAVIEST_N=0
+  while IFS= read -r f; do
+    [ -n "$f" ] || continue
+    n=$(grep -c 'DCArtboard' "$f" 2>/dev/null || echo 0)
+    if [ "$n" -gt "$HEAVIEST_N" ]; then HEAVIEST_N="$n"; HEAVIEST="$f"; fi
+  done <<< "$CANVASES"
+  if [ -n "$HEAVIEST" ]; then
+    REL_PERF="${HEAVIEST#"$REPO"/}"
+    echo "→ perf: benchmarking heaviest canvas ($HEAVIEST_N artboards): $REL_PERF" >&2
+    {
+      echo ""
+      echo "## Perf"
+      echo ""
+      echo '```'
+      bash "$(dirname "${BASH_SOURCE[0]}")/perf.sh" --root "$REPO" --canvas "$REL_PERF" 2>&1 || \
+        echo "(perf run failed — see stderr; smoke result above is unaffected)"
+      echo '```'
+    } >> "$MD"
+  fi
+fi
+
 echo "→ report: $MD" >&2
 echo "→ tsv:    $TSV" >&2
 

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)' }}>`,