From df2cf47d20596437dccde80dedffabd6abb0078c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Tue, 7 Apr 2026 02:45:07 +0200
Subject: [PATCH 1/2] fix(core): load head styles and scripts from non-template
 sub-compositions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When a sub-composition is a full HTML document (not wrapped in
<template>), the composition loader only extracted <style> and
<script> elements from within the [data-composition-id] root
element. Any CSS in <head> (backgrounds, positioning, fonts) or
scripts in <head> (GSAP CDN) were silently dropped.

This caused the iris-wipe eval (prompt 25, scored 1.0/5) to
render entirely black — the scene background colors and absolute
positioning were defined in <head><style> and never loaded.

Now extracts <head> styles and scripts from non-template sub-comp
documents and injects them before the content-level assets.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../core/src/runtime/compositionLoader.ts     | 50 ++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)
diff --git a/packages/core/src/runtime/compositionLoader.ts b/packages/core/src/runtime/compositionLoader.ts
index a2958745..a440cf9a 100644
--- a/packages/core/src/runtime/compositionLoader.ts
+++ b/packages/core/src/runtime/compositionLoader.ts
@@ -81,6 +81,10 @@ async function mountCompositionContent(params: {
   injectedStyles: HTMLStyleElement[];
   injectedScripts: HTMLScriptElement[];
   parseDimensionPx: (value: string | null) => string | null;
+  /** Extra <style> elements from the parsed document <head> (non-template sub-compositions). */
+  headStyles?: HTMLStyleElement[];
+  /** Extra <script> elements from the parsed document <head> (non-template sub-compositions). */
+  headScripts?: HTMLScriptElement[];
   onDiagnostic?: (payload: {
     code: string;
     details: Record<string, string | number | boolean | null | string[]>;
@@ -98,6 +102,17 @@ async function mountCompositionContent(params: {
   }
   const contentNode = innerRoot ?? params.sourceNode;
 
+  // Inject <head> styles from non-template sub-compositions first (they define
+  // element styles like backgrounds and positioning that the composition needs).
+  if (params.headStyles) {
+    for (const style of params.headStyles) {
+      const clonedStyle = style.cloneNode(true);
+      if (!(clonedStyle instanceof HTMLStyleElement)) continue;
+      document.head.appendChild(clonedStyle);
+      params.injectedStyles.push(clonedStyle);
+    }
+  }
+
   const styles = Array.from(contentNode.querySelectorAll<HTMLStyleElement>("style"));
   for (const style of styles) {
     const clonedStyle = style.cloneNode(true);
@@ -106,8 +121,27 @@ async function mountCompositionContent(params: {
     params.injectedStyles.push(clonedStyle);
   }
 
+  // Collect head scripts first (e.g. GSAP CDN loaded in <head> of non-template sub-comps),
+  // then content scripts. Head scripts must execute before content scripts.
+  const headScriptPayloads: PendingScript[] = [];
+  if (params.headScripts) {
+    for (const script of params.headScripts) {
+      const scriptType = script.getAttribute("type")?.trim() ?? "";
+      const scriptSrc = script.getAttribute("src")?.trim() ?? "";
+      if (scriptSrc) {
+        const resolvedSrc = resolveScriptSourceUrl(scriptSrc, params.compositionUrl);
+        headScriptPayloads.push({ kind: "external", src: resolvedSrc, type: scriptType });
+      } else {
+        const scriptText = script.textContent?.trim() ?? "";
+        if (scriptText) {
+          headScriptPayloads.push({ kind: "inline", content: scriptText, type: scriptType });
+        }
+      }
+    }
+  }
+
   const scripts = Array.from(contentNode.querySelectorAll<HTMLScriptElement>("script"));
-  const scriptPayloads: PendingScript[] = [];
+  const scriptPayloads: PendingScript[] = [...headScriptPayloads];
   for (const script of scripts) {
     const scriptType = script.getAttribute("type")?.trim() ?? "";
     const scriptSrc = script.getAttribute("src")?.trim() ?? "";
@@ -287,6 +321,18 @@ export async function loadExternalCompositions(
               )
             : null) ?? doc.querySelector<HTMLTemplateElement>("template");
         const sourceNode = template ? template.content : doc.body;
+        // When loading a non-template sub-composition (full HTML document),
+        // extract <style> and <script> elements from the parsed document's
+        // <head>. These contain critical CSS (backgrounds, positioning, fonts)
+        // and library scripts (e.g. GSAP CDN) that would otherwise be lost
+        // because mountCompositionContent only looks inside the composition
+        // root element.
+        const headStyles = !template
+          ? Array.from(doc.head.querySelectorAll<HTMLStyleElement>("style"))
+          : undefined;
+        const headScripts = !template
+          ? Array.from(doc.head.querySelectorAll<HTMLScriptElement>("script"))
+          : undefined;
         await mountCompositionContent({
           host,
           hostCompositionId,
@@ -298,6 +344,8 @@ export async function loadExternalCompositions(
           injectedStyles: params.injectedStyles,
           injectedScripts: params.injectedScripts,
           parseDimensionPx: params.parseDimensionPx,
+          headStyles,
+          headScripts,
           onDiagnostic: params.onDiagnostic,
         });
       } catch (error) {

From f8efac291fdd60ce04352325c63d943cfdfa4df5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Tue, 7 Apr 2026 03:16:20 +0200
Subject: [PATCH 2/2] fix(core): extract head styles/scripts in bundler for
 non-template sub-comps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Same bug as the runtime and producer fixes, but in the bundler
used by the studio preview. The bundler's sub-composition
inlining parsed only body.innerHTML for non-template
sub-compositions, dropping all <head> styles and scripts.

This is why the iris-wipe showed black in the studio preview —
the scene backgrounds and GSAP CDN script were in <head>.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/core/src/compiler/htmlBundler.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/core/src/compiler/htmlBundler.ts b/packages/core/src/compiler/htmlBundler.ts
index 7933350c..c5905847 100644
--- a/packages/core/src/compiler/htmlBundler.ts
+++ b/packages/core/src/compiler/htmlBundler.ts
@@ -440,6 +440,22 @@ export async function bundleToSingleHtml(
       ? contentDoc.querySelector(`[data-composition-id="${compId}"]`)
       : contentDoc.querySelector("[data-composition-id]");
 
+    // When a sub-composition is a full HTML document (no <template>), styles
+    // and scripts in <head> are not part of contentDoc (which only has body
+    // content). Extract them so backgrounds, positioning, fonts, and library
+    // scripts (e.g. GSAP CDN) are not silently dropped.
+    if (!contentRoot && compDoc.head) {
+      for (const s of [...compDoc.head.querySelectorAll("style")]) {
+        compStyleChunks.push(rewriteCssAssetUrls(s.textContent || "", src));
+      }
+      for (const s of [...compDoc.head.querySelectorAll("script")]) {
+        const externalSrc = (s.getAttribute("src") || "").trim();
+        if (externalSrc && !compExternalScriptSrcs.includes(externalSrc)) {
+          compExternalScriptSrcs.push(externalSrc);
+        }
+      }
+    }
+
     for (const s of [...contentDoc.querySelectorAll("style")]) {
       compStyleChunks.push(rewriteCssAssetUrls(s.textContent || "", src));
       s.remove();
