fix(producer): preserve inner root element during sub-composition inlining

[miguel-heygen]

Summary

The producer's inlineSubCompositions call did not pass flattenInnerRoot, so when a sub-composition had a wrapper element with classes (e.g. .scene_1-root), the producer path used innerHTML which stripped the wrapper — losing the class. The scoped CSS still targeted .scene_1-root, so nothing matched and styles/GSAP/JS all broke.

The bundler path already passed prepareFlattenedInnerRoot, which is why hyperframes preview worked correctly but hyperframes render (producer) didn't.

Fix

Pass prepareFlattenedInnerRoot to the producer's inlineSubCompositions call, aligning it with the bundler path. The inner root element is now preserved as a child of the host with its classes intact.

Test plan

• Added regression test: flattenInnerRoot preserves .scene_N-root class so scoped CSS resolves
• Added characterization test: without flattenInnerRoot, the class is lost (documents the pre-fix behavior)
• All 11 inlineSubCompositions tests pass

Reported by James in the team channel.

[vanceingalls]

Review

The fix is correct for the stated bug — the inner root element's class is now preserved during producer inlining. The diagnosis and bundler-vs-producer alignment story are accurate. But there's a blocker-level regression introduced by keeping compoundAuthoredRoot: true alongside the new flattenInnerRoot.

---

BLOCKER: compoundAuthoredRoot: true breaks #id-based CSS selectors when id != compId

The old producer path (no flattenInnerRoot) relied on innerHTML-based inlining, which collapses the inner root onto the host. With that path:

• inlineSubCompositions propagated data-hf-authored-id = authoredRootId directly onto the host
• compoundAuthoredRoot: true generated [data-composition-id="scene_1"][data-hf-authored-id="root"] — a compound selector targeting the host, which had both attributes ✓

After this fix:

• prepareFlattenedInnerRoot places data-hf-authored-id = "root" on the child inner root element, and does NOT set it on the host
• The producer's post-inlining loop sets data-hf-authored-id on the host only if not already present, and uses compId as the value — so the host ends up with data-hf-authored-id = "scene_1", not "root"
• CSS scoping (run during inlineSubCompositions itself, before the post-loop) used authoredRootId = "root" and compoundAuthoredRoot: true to emit [data-composition-id="scene_1"][data-hf-authored-id="root"]
• At runtime that selector matches nothing: the host has the wrong authored-id value, and the child has no data-composition-id

This only fires when id != compId on the inner root element (e.g. id="root" with data-composition-id="scene_1"). But that's exactly the fixture shape in the new test ("root" vs "scene_1") — the test just doesn't assert on CSS selector resolution for #root-style selectors.

The new tests are silent on this because they only check DOM structure (class preserved), not scoped CSS output for #id selectors.

Fix options:

1. Drop compoundAuthoredRoot: true from the producer call. With flattenInnerRoot, the inner root is a child of the host — not merged onto it — so descendant selectors are correct and compound is no longer needed.
2. If compoundAuthoredRoot must be retained for some other reason, the post-loop needs to set data-hf-authored-id from authoredRootId (not compId) on the host, so the compound selector has something to match.

---

IMPORTANT: The new tests use a stub that doesn't exercise prepareFlattenedInnerRoot

The new regression tests define their own inline flattenInnerRoot stub that omits timing-attr stripping, width/height style injection, and data-composition-id removal — all of which prepareFlattenedInnerRoot does. Tests that pass against a simplified stub can miss interactions that only appear with the production function. Recommend switching the new tests to call prepareFlattenedInnerRoot directly (it's already exported from ./htmlBundler).

---

NIT: Stale comment in producer wrapper

The comment on the post-loop in htmlCompiler.ts says "Unlike flattenInnerRoot (which changes DOM structure and breaks baselines), this preserves the existing innerHTML-based inlining..." — directly contradicted by the new line above it. Should be updated to reflect that the loop exists to align data-hf-authored-id on the host for the CSS scoping contract.

---

What's solid

• Root cause diagnosis is correct and the 1-line fix is the right direction.
• The characterization test (pre-fix behavior) is a good addition.
• The type cast (prepareFlattenedInnerRoot as (el: Element) => Element) is the standard linkedom bridge pattern used throughout the file — not a concern.
• CI is still running; regression-shards (shard-7, sub-composition-video ...) would catch this if any existing test composition has id != compId on its inner root.

— Vai

[vanceingalls]

All three R1 blockers are resolved.

1. compoundAuthoredRoot: true dropped — replaced with flattenInnerRoot: prepareFlattenedInnerRoot. Descendant selectors in the CSS scoping now work correctly because the inner root is a proper child of the host. The compound-selector breakage path is gone.

2. Inline stub removed — the hand-rolled flattenInnerRoot approximation in the test is deleted; the test now imports and calls the real prepareFlattenedInnerRoot from htmlBundler. Regression test exercises the exact code path that was broken in production.

3. Stale comment updated — the misleading "Unlike flattenInnerRoot (which changes DOM structure and breaks baselines)..." comment is gone, replaced with a clean one-liner.

The end-to-end fixture (src/scene_1.html → compiled.html) demonstrates the fix visually. The characterization test that documents the pre-fix behavior is a nice touch.

— Vai