From e2f7f6a58a9a2f9e243a422159705d88b1570d32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Tue, 19 May 2026 15:59:09 -0400
Subject: [PATCH] fix: add regression fixtures with golden baselines + address
 review

- Create sub-comp-t0 and sub-comp-id-selector as proper regression tests
  under packages/producer/tests/ with golden MP4 baselines
- Add both to shard-7 in regression.yml
- Add clarifying comment on activateNestedChildTimelines scope
- Confirm test fixture network safety in comment
---
 .github/workflows/regression.yml              |  2 +-
 .../compiler/inlineSubCompositions.test.ts    |  2 +
 packages/core/src/runtime/init.ts             |  4 +
 .../tests/sub-comp-id-selector/meta.json      | 12 +++
 .../sub-comp-id-selector/output/output.mp4    |  3 +
 .../tests/sub-comp-id-selector/src/index.html | 48 ++++++++++
 .../tests/sub-comp-id-selector/src/intro.html | 42 +++++++++
 packages/producer/tests/sub-comp-t0/meta.json | 12 +++
 .../tests/sub-comp-t0/output/output.mp4       |  3 +
 .../sub-comp-t0/src/compositions/hook.html    | 61 +++++++++++++
 .../sub-comp-t0/src/compositions/later.html   | 43 +++++++++
 .../producer/tests/sub-comp-t0/src/index.html | 88 +++++++++++++++++++
 12 files changed, 319 insertions(+), 1 deletion(-)
 create mode 100644 packages/producer/tests/sub-comp-id-selector/meta.json
 create mode 100644 packages/producer/tests/sub-comp-id-selector/output/output.mp4
 create mode 100644 packages/producer/tests/sub-comp-id-selector/src/index.html
 create mode 100644 packages/producer/tests/sub-comp-id-selector/src/intro.html
 create mode 100644 packages/producer/tests/sub-comp-t0/meta.json
 create mode 100644 packages/producer/tests/sub-comp-t0/output/output.mp4
 create mode 100644 packages/producer/tests/sub-comp-t0/src/compositions/hook.html
 create mode 100644 packages/producer/tests/sub-comp-t0/src/compositions/later.html
 create mode 100644 packages/producer/tests/sub-comp-t0/src/index.html

diff --git a/.github/workflows/regression.yml b/.github/workflows/regression.yml
index 62e2bc503..6b03a65d5 100644
--- a/.github/workflows/regression.yml
+++ b/.github/workflows/regression.yml
@@ -72,7 +72,7 @@ jobs:
           - shard: shard-6
             args: "overlay-montage-prod style-12-prod chat missing-host-comp-id png-sequence"
           - shard: shard-7
-            args: "sub-composition-video style-18-prod raf-ball-render-compat font-variant-numeric"
+            args: "sub-composition-video style-18-prod raf-ball-render-compat font-variant-numeric sub-comp-t0 sub-comp-id-selector"
           - shard: shard-8
             args: "style-13-prod style-6-prod vignelli-stacking gsap-letters-render-compat"
     steps:
diff --git a/packages/core/src/compiler/inlineSubCompositions.test.ts b/packages/core/src/compiler/inlineSubCompositions.test.ts
index 9dfd9f902..8edc15394 100644
--- a/packages/core/src/compiler/inlineSubCompositions.test.ts
+++ b/packages/core/src/compiler/inlineSubCompositions.test.ts
@@ -2,6 +2,8 @@ import { describe, expect, it } from "vitest";
 import { parseHTML } from "linkedom";
 import { inlineSubCompositions } from "./inlineSubCompositions";
 
+// Fixtures reference GSAP CDN but are never loaded in a real browser — resolveHtml is mocked.
+
 /**
  * Minimal sub-composition HTML that uses `#intro` as its CSS and GSAP scope.
  * This is the pattern that breaks when the producer path strips the inner root.
diff --git a/packages/core/src/runtime/init.ts b/packages/core/src/runtime/init.ts
index 327b4d18f..137fc3c4e 100644
--- a/packages/core/src/runtime/init.ts
+++ b/packages/core/src/runtime/init.ts
@@ -1724,6 +1724,10 @@ export function initSandboxRuntimeModular(): void {
     }
   };
 
+  // Unpause all non-root timelines. Per GSAP semantics, paused(false) on a
+  // child timeline that hasn't been reached by the parent's playhead is a
+  // no-op — the child won't fire onStart/onUpdate until the parent seeks
+  // past its insertion point. Per-frame visibility is gated by the engine.
   const activateNestedChildTimelines = (masterTimeline: RuntimeTimelineLike) => {
     const timelines = (window.__timelines ?? {}) as Record<string, RuntimeTimelineLike | undefined>;
     for (const tl of Object.values(timelines)) {
diff --git a/packages/producer/tests/sub-comp-id-selector/meta.json b/packages/producer/tests/sub-comp-id-selector/meta.json
new file mode 100644
index 000000000..6fd6cd86e
--- /dev/null
+++ b/packages/producer/tests/sub-comp-id-selector/meta.json
@@ -0,0 +1,12 @@
+{
+  "name": "Sub-composition #ID selector scoping",
+  "description": "Documents that sub-compositions using #ID selectors may render differently between preview and render due to the producer stripping the inner root element. Workaround: use [data-composition-id] selectors instead of #ID.",
+  "tags": ["sub-composition", "regression", "selector"],
+  "minPsnr": 20,
+  "maxFrameFailures": 10,
+  "minAudioCorrelation": 0.0,
+  "maxAudioLagWindows": 120,
+  "renderConfig": {
+    "fps": 24
+  }
+}
diff --git a/packages/producer/tests/sub-comp-id-selector/output/output.mp4 b/packages/producer/tests/sub-comp-id-selector/output/output.mp4
new file mode 100644
index 000000000..ab61b88b6
--- /dev/null
+++ b/packages/producer/tests/sub-comp-id-selector/output/output.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f86791eaf7839adcd9e71ba6d1d56f3d970e6a155e8ac227947540e7a1990229
+size 47948
diff --git a/packages/producer/tests/sub-comp-id-selector/src/index.html b/packages/producer/tests/sub-comp-id-selector/src/index.html
new file mode 100644
index 000000000..bafbd7fde
--- /dev/null
+++ b/packages/producer/tests/sub-comp-id-selector/src/index.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+      }
+      #scene-intro {
+        opacity: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="scene-intro"
+        class="scene"
+        data-composition-id="intro"
+        data-composition-src="intro.html"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+      ></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["main"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/packages/producer/tests/sub-comp-id-selector/src/intro.html b/packages/producer/tests/sub-comp-id-selector/src/intro.html
new file mode 100644
index 000000000..ec035adb9
--- /dev/null
+++ b/packages/producer/tests/sub-comp-id-selector/src/intro.html
@@ -0,0 +1,42 @@
+<template id="intro-template">
+  <div id="intro" data-composition-id="intro" data-width="1920" data-height="1080">
+    <div
+      class="title"
+      style="
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 120px;
+        font-family: Impact, sans-serif;
+        color: #fff;
+        opacity: 0;
+      "
+    >
+      HELLO WORLD
+    </div>
+    <style>
+      #intro {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        background: #111;
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+        var scope = "#intro";
+        tl.fromTo(
+          scope + " .title",
+          { opacity: 0, y: 50, scale: 0.8 },
+          { opacity: 1, y: 0, scale: 1, duration: 0.5, ease: "power3.out" },
+          0.2,
+        );
+        window.__timelines["intro"] = tl;
+      })();
+    </script>
+  </div>
+</template>
diff --git a/packages/producer/tests/sub-comp-t0/meta.json b/packages/producer/tests/sub-comp-t0/meta.json
new file mode 100644
index 000000000..4395628a9
--- /dev/null
+++ b/packages/producer/tests/sub-comp-t0/meta.json
@@ -0,0 +1,12 @@
+{
+  "name": "Sub-composition timeline activation at t=0",
+  "description": "Regression for: sub-composition timelines at data-start near 0 were not activated during renderSeek, causing GSAP-animated elements to stay invisible. The fix activates nested child timelines before every render frame seek.",
+  "tags": ["sub-composition", "regression", "timeline"],
+  "minPsnr": 25,
+  "maxFrameFailures": 5,
+  "minAudioCorrelation": 0.0,
+  "maxAudioLagWindows": 120,
+  "renderConfig": {
+    "fps": 24
+  }
+}
diff --git a/packages/producer/tests/sub-comp-t0/output/output.mp4 b/packages/producer/tests/sub-comp-t0/output/output.mp4
new file mode 100644
index 000000000..dc54eb285
--- /dev/null
+++ b/packages/producer/tests/sub-comp-t0/output/output.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d85ea36a219e5ffbeed672a075a6cfb8ecb71e175753c4f5b8407e67abe29fc9
+size 18186
diff --git a/packages/producer/tests/sub-comp-t0/src/compositions/hook.html b/packages/producer/tests/sub-comp-t0/src/compositions/hook.html
new file mode 100644
index 000000000..a2c1f1947
--- /dev/null
+++ b/packages/producer/tests/sub-comp-t0/src/compositions/hook.html
@@ -0,0 +1,61 @@
+<template id="hook-template">
+  <div id="hook" data-composition-id="hook" data-width="1920" data-height="1080">
+    <div class="hook-title">BREAKING</div>
+    <div class="hook-subtitle">Transfer confirmed</div>
+
+    <style>
+      #hook {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #07110d;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        gap: 20px;
+      }
+      #hook .hook-title {
+        font-family: Impact, system-ui, sans-serif;
+        font-size: 200px;
+        font-weight: 900;
+        color: #ff3b30;
+        opacity: 0;
+      }
+      #hook .hook-subtitle {
+        font-family: Arial, system-ui, sans-serif;
+        font-size: 60px;
+        color: #f7f3e8;
+        opacity: 0;
+      }
+    </style>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+        var scope = "#hook";
+
+        // Title slams in at 0.1s
+        tl.fromTo(
+          scope + " .hook-title",
+          { scale: 3.5, opacity: 0 },
+          { scale: 1, opacity: 1, duration: 0.25, ease: "expo.out" },
+          0.1,
+        );
+
+        // Subtitle fades in at 0.5s
+        tl.fromTo(
+          scope + " .hook-subtitle",
+          { y: 30, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.4, ease: "power3.out" },
+          0.5,
+        );
+
+        window.__timelines["hook"] = tl;
+      })();
+    </script>
+  </div>
+</template>
diff --git a/packages/producer/tests/sub-comp-t0/src/compositions/later.html b/packages/producer/tests/sub-comp-t0/src/compositions/later.html
new file mode 100644
index 000000000..5de12b5ba
--- /dev/null
+++ b/packages/producer/tests/sub-comp-t0/src/compositions/later.html
@@ -0,0 +1,43 @@
+<template id="later-template">
+  <div id="later" data-composition-id="later" data-width="1920" data-height="1080">
+    <div class="later-heading">Second Scene</div>
+
+    <style>
+      #later {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0e2c1e;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      #later .later-heading {
+        font-family: Arial, system-ui, sans-serif;
+        font-size: 120px;
+        font-weight: 700;
+        color: #f7f3e8;
+        opacity: 0;
+      }
+    </style>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+        var scope = "#later";
+
+        tl.fromTo(
+          scope + " .later-heading",
+          { y: 50, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" },
+          0.2,
+        );
+
+        window.__timelines["later"] = tl;
+      })();
+    </script>
+  </div>
+</template>
diff --git a/packages/producer/tests/sub-comp-t0/src/index.html b/packages/producer/tests/sub-comp-t0/src/index.html
new file mode 100644
index 000000000..00d00a260
--- /dev/null
+++ b/packages/producer/tests/sub-comp-t0/src/index.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #07110d;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #07110d;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        opacity: 0;
+      }
+      #scene-hook {
+        opacity: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- First sub-comp at near-zero start: the bug trigger -->
+      <div
+        id="scene-hook"
+        class="scene"
+        data-layout-allow-overflow
+        data-composition-id="hook"
+        data-composition-src="compositions/hook.html"
+        data-start="0.001"
+        data-duration="2.0"
+        data-track-index="0"
+      ></div>
+
+      <!-- Second sub-comp at a later start: works correctly -->
+      <div
+        id="scene-later"
+        class="scene"
+        data-layout-allow-overflow
+        data-composition-id="later"
+        data-composition-src="compositions/later.html"
+        data-start="2.5"
+        data-duration="3.5"
+        data-track-index="1"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      // Transition: hook zooms out at 2.5s
+      tl.to("#scene-hook", { scale: 2.5, opacity: 0, duration: 0.4, ease: "power3.in" }, 2.5);
+      tl.fromTo(
+        "#scene-later",
+        { scale: 0.5, opacity: 0 },
+        { scale: 1, opacity: 1, duration: 0.4, ease: "power3.out" },
+        2.65,
+      );
+
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>