From 581e7a7eda27b1874dfafef5ccba9b04092c546b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sun, 17 May 2026 16:28:20 +0000
Subject: [PATCH] refactor: extract shared inlineSubCompositions from bundler
 and producer

Both the core bundler (htmlBundler.ts) and the producer (htmlCompiler.ts)
had parallel ~200-line implementations of sub-composition inlining. This
divergence caused bug #911 (producer didn't set data-composition-file).

Extract the shared logic into core/compiler/inlineSubCompositions.ts:
- Single function handles: template/body extraction, CSS/script scoping,
  asset path rewriting, data-composition-file attribution, content injection
- Callers provide environment-specific callbacks (HTML resolution, parsing,
  variable handling, inner root flattening)
- Core bundler passes its advanced features (runtime IDs, variables,
  inline style rewriting, inner root flattening)
- Producer passes a simpler resolver (map + filesystem fallback) and
  adds pixel sizing post-hoc

Net: -215 lines, one source of truth for sub-comp inlining.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/core/src/compiler/htmlBundler.ts     | 165 ++-------
 packages/core/src/compiler/index.ts           |   7 +
 .../src/compiler/inlineSubCompositions.ts     | 319 ++++++++++++++++++
 .../producer/src/services/htmlCompiler.ts     | 185 ++--------
 4 files changed, 390 insertions(+), 286 deletions(-)
 create mode 100644 packages/core/src/compiler/inlineSubCompositions.ts

diff --git a/packages/core/src/compiler/htmlBundler.ts b/packages/core/src/compiler/htmlBundler.ts
index 3e1377d84..862c6460a 100644
--- a/packages/core/src/compiler/htmlBundler.ts
+++ b/packages/core/src/compiler/htmlBundler.ts
@@ -7,15 +7,12 @@ import {
   parseHTMLContent,
   stripEmbeddedRuntimeScripts,
 } from "./htmlDocument";
-import {
-  rewriteAssetPaths,
-  rewriteCssAssetUrls,
-  rewriteInlineStyleAssetUrls,
-} from "./rewriteSubCompPaths";
+// rewriteSubCompPaths functions are used by inlineSubCompositions (shared module)
 import { scopeCssToComposition, wrapScopedCompositionScript } from "./compositionScoping";
 import { validateHyperframeHtmlContract } from "./staticGuard";
 import { getHyperframeRuntimeScript } from "../generated/runtime-inline";
 import { readDeclaredDefaults } from "../runtime/getVariables";
+import { inlineSubCompositions } from "./inlineSubCompositions";
 
 /** Resolve a relative path within projectDir, rejecting traversal outside it. */
 function safePath(projectDir: string, relativePath: string): string | null {
@@ -581,144 +578,36 @@ export async function bundleToSingleHtml(
     }
   }
 
-  // Inline sub-compositions
-  const compStyleChunks: string[] = [];
-  const compScriptChunks: string[] = [];
-  const compExternalScriptSrcs: string[] = [];
-  const compVariablesByComp: Record<string, Record<string, unknown>> = {};
+  // Inline sub-compositions (via shared function)
   const trackedCompositionHosts = getBundledTrackedCompositionHosts(document);
   const hostIdentityByElement = assignBundledRuntimeCompositionIds(trackedCompositionHosts);
   const subCompositionHosts = trackedCompositionHosts.filter((host) =>
     host.hasAttribute("data-composition-src"),
   );
-  for (const hostEl of subCompositionHosts) {
-    const src = hostEl.getAttribute("data-composition-src");
-    if (!src || !isRelativeUrl(src)) continue;
-    const compPath = safePath(projectDir, src);
-    const compHtml = compPath ? safeReadFile(compPath) : null;
-    if (compHtml == null) {
-      console.warn(`[Bundler] Composition file not found: ${src}`);
-      continue;
-    }
-
-    const compDoc = parseHTMLContent(compHtml);
-    const hostIdentity = hostIdentityByElement.get(hostEl);
-    const compId = hostIdentity?.authoredCompositionId || null;
-    const runtimeCompId = hostIdentity?.runtimeCompositionId || compId || "";
-    const contentRoot = compDoc.querySelector("template");
-    const contentHtml = contentRoot ? contentRoot.innerHTML || "" : compDoc.body.innerHTML || "";
-    const contentDoc = parseHTMLContent(contentHtml);
-    const innerRoot = compId
-      ? contentDoc.querySelector(`[data-composition-id="${compId}"]`)
-      : contentDoc.querySelector("[data-composition-id]");
-    const inferredCompId = innerRoot?.getAttribute("data-composition-id")?.trim() || "";
-    const authoredRootId = innerRoot?.getAttribute("id")?.trim() || null;
-    const scopeCompId = compId || inferredCompId;
-    const runtimeScope = runtimeCompId
-      ? cssAttributeSelector("data-composition-id", runtimeCompId)
-      : "";
-    const mergedVariables = runtimeCompId
-      ? {
-          ...readDeclaredDefaults(compDoc.documentElement),
-          ...parseHostVariableValues(hostEl),
-        }
-      : {};
-    if (runtimeCompId && Object.keys(mergedVariables).length > 0) {
-      compVariablesByComp[runtimeCompId] = mergedVariables;
-    }
-
-    // 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")]) {
-        const css = rewriteCssAssetUrls(s.textContent || "", src);
-        compStyleChunks.push(
-          scopeCompId ? scopeCssToComposition(css, scopeCompId, runtimeScope, authoredRootId) : css,
-        );
-      }
-      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")]) {
-      const css = rewriteCssAssetUrls(s.textContent || "", src);
-      compStyleChunks.push(
-        scopeCompId ? scopeCssToComposition(css, scopeCompId, runtimeScope, authoredRootId) : css,
-      );
-      s.remove();
-    }
-    for (const s of [...contentDoc.querySelectorAll("script")]) {
-      const externalSrc = (s.getAttribute("src") || "").trim();
-      if (externalSrc) {
-        // External CDN/remote script — collect for deduped injection into the document.
-        // Do NOT try to inline the content (external scripts have no innerHTML).
-        if (!compExternalScriptSrcs.includes(externalSrc)) {
-          compExternalScriptSrcs.push(externalSrc);
-        }
-      } else {
-        compScriptChunks.push(
-          scopeCompId
-            ? wrapScopedCompositionScript(
-                s.textContent || "",
-                scopeCompId,
-                "[HyperFrames] composition script error:",
-                runtimeScope,
-                runtimeCompId || scopeCompId,
-                authoredRootId,
-              )
-            : `(function(){ try { ${s.textContent || ""} } catch (_err) { console.error('[HyperFrames] composition script error:', _err); } })();`,
-        );
-      }
-      s.remove();
-    }
-
-    // Rewrite relative asset paths before inlining so ../foo.svg from
-    // compositions/ resolves correctly when the content moves to root.
-    const assetEls = innerRoot
-      ? innerRoot.querySelectorAll("[src], [href]")
-      : contentDoc.querySelectorAll("[src], [href]");
-    rewriteAssetPaths(
-      assetEls,
-      src,
-      (el: Element, attr: string) => el.getAttribute(attr),
-      (el: Element, attr: string, val: string) => {
-        el.setAttribute(attr, val);
-      },
-    );
-    const styledEls = innerRoot
-      ? innerRoot.querySelectorAll("[style]")
-      : contentDoc.querySelectorAll("[style]");
-    rewriteInlineStyleAssetUrls(
-      styledEls,
-      src,
-      (el: Element) => el.getAttribute("style"),
-      (el: Element, val: string) => {
-        el.setAttribute("style", val);
-      },
-    );
-
-    if (innerRoot) {
-      const innerW = innerRoot.getAttribute("data-width");
-      const innerH = innerRoot.getAttribute("data-height");
-      if (innerW && !hostEl.getAttribute("data-width")) hostEl.setAttribute("data-width", innerW);
-      if (innerH && !hostEl.getAttribute("data-height")) hostEl.setAttribute("data-height", innerH);
-      innerRoot.setAttribute("data-composition-file", src);
-      for (const child of [...innerRoot.querySelectorAll("style, script")]) child.remove();
-      const preparedInnerRoot = prepareFlattenedInnerRoot(innerRoot);
-      hostEl.innerHTML = preparedInnerRoot.outerHTML || "";
-    } else {
-      for (const child of [...contentDoc.querySelectorAll("style, script")]) child.remove();
-      hostEl.innerHTML = contentDoc.body.innerHTML || "";
-    }
-    hostEl.setAttribute("data-composition-file", src);
-    hostEl.removeAttribute("data-composition-src");
-  }
+  const subCompResult = inlineSubCompositions(document, subCompositionHosts, {
+    resolveHtml: (srcPath: string) => {
+      if (!isRelativeUrl(srcPath)) return null;
+      const compPath = safePath(projectDir, srcPath);
+      return compPath ? safeReadFile(compPath) : null;
+    },
+    parseHtml: parseHTMLContent,
+    hostIdentityMap: hostIdentityByElement,
+    rewriteInlineStyles: true,
+    flattenInnerRoot: prepareFlattenedInnerRoot,
+    readVariableDefaults: readDeclaredDefaults,
+    parseHostVariables: parseHostVariableValues,
+    buildScopeSelector: (compId: string) => cssAttributeSelector("data-composition-id", compId),
+    scriptErrorLabel: "[HyperFrames] composition script error:",
+    onMissingComposition: (srcPath: string) => {
+      console.warn(`[Bundler] Composition file not found: ${srcPath}`);
+    },
+  });
+  const compStyleChunks: string[] = [...subCompResult.styles];
+  const compScriptChunks: string[] = [...subCompResult.scripts];
+  const compExternalScriptSrcs: string[] = [...subCompResult.externalScriptSrcs];
+  const compVariablesByComp: Record<string, Record<string, unknown>> = {
+    ...subCompResult.variablesByComp,
+  };
 
   // Inline template compositions: inject <template id="X-template"> content into
   // matching empty host elements with data-composition-id="X" (no data-composition-src)
diff --git a/packages/core/src/compiler/index.ts b/packages/core/src/compiler/index.ts
index 8b4a1cb54..85d66afea 100644
--- a/packages/core/src/compiler/index.ts
+++ b/packages/core/src/compiler/index.ts
@@ -34,3 +34,10 @@ export {
 
 // Composition isolation helpers
 export { scopeCssToComposition, wrapScopedCompositionScript } from "./compositionScoping";
+
+// Sub-composition inlining (shared between bundler and producer)
+export {
+  inlineSubCompositions,
+  type InlineSubCompositionsOptions,
+  type InlineSubCompositionsResult,
+} from "./inlineSubCompositions";
diff --git a/packages/core/src/compiler/inlineSubCompositions.ts b/packages/core/src/compiler/inlineSubCompositions.ts
new file mode 100644
index 000000000..ce0cdbc28
--- /dev/null
+++ b/packages/core/src/compiler/inlineSubCompositions.ts
@@ -0,0 +1,319 @@
+/**
+ * Shared sub-composition inlining logic.
+ *
+ * Both the core bundler (preview) and the producer compiler (render) need to
+ * inline sub-composition HTML referenced via `data-composition-src`. This
+ * module is the single source of truth for that transformation, eliminating
+ * divergence that previously caused bugs (e.g. producer not setting
+ * `data-composition-file`).
+ */
+
+import {
+  rewriteAssetPaths,
+  rewriteCssAssetUrls,
+  rewriteInlineStyleAssetUrls,
+} from "./rewriteSubCompPaths";
+import { scopeCssToComposition, wrapScopedCompositionScript } from "./compositionScoping";
+
+// ---------------------------------------------------------------------------
+// Public interface
+// ---------------------------------------------------------------------------
+
+export interface InlineSubCompositionsOptions {
+  /**
+   * Resolve the HTML content for a sub-composition given its `data-composition-src` value.
+   * Return `null` when the file cannot be found.
+   */
+  resolveHtml: (srcPath: string) => string | null;
+
+  /**
+   * Parse an HTML string into a Document. The returned object must expose
+   * standard DOM APIs (querySelector, querySelectorAll, body, head, etc.).
+   * Both linkedom's `parseHTML(...).document` and the core bundler's
+   * `parseHTMLContent(...)` satisfy this contract.
+   */
+  parseHtml: (html: string) => Document;
+
+  /**
+   * Identity map produced by `assignBundledRuntimeCompositionIds`.
+   * When provided, authoredCompositionId and runtimeCompositionId are read
+   * from this map instead of from the host element's attributes directly.
+   * The bundler uses this; the producer can omit it.
+   */
+  hostIdentityMap?: Map<
+    Element,
+    { authoredCompositionId: string | null; runtimeCompositionId: string | null }
+  >;
+
+  /**
+   * When true, rewrite `url(...)` references in inline `style` attributes
+   * on sub-composition elements. The bundler enables this; the producer
+   * can skip it.
+   */
+  rewriteInlineStyles?: boolean;
+
+  /**
+   * Prepare the inner root element before injecting it into the host.
+   * The bundler's `prepareFlattenedInnerRoot` clones the element, strips
+   * timing attributes, and adds `data-hf-inner-root`. When omitted, the
+   * inner root's outerHTML is injected as-is.
+   */
+  flattenInnerRoot?: (innerRoot: Element) => Element;
+
+  /**
+   * Read declared variable defaults from a sub-composition's `<html>` element.
+   * The bundler passes `readDeclaredDefaults`; the producer can omit this.
+   */
+  readVariableDefaults?: (docElement: Element) => Record<string, unknown>;
+
+  /**
+   * Parse host-level variable overrides from `data-variable-values`.
+   * The bundler passes `parseHostVariableValues`; the producer can omit this.
+   */
+  parseHostVariables?: (host: Element) => Record<string, unknown>;
+
+  /**
+   * Build a CSS attribute selector for scoping, e.g.
+   * `[data-composition-id="my-comp"]`. Defaults to a simple implementation
+   * when not provided. The bundler passes `cssAttributeSelector` which
+   * handles escaping.
+   */
+  buildScopeSelector?: (compId: string) => string;
+
+  /**
+   * Error label prefix used in wrapped composition scripts.
+   * Defaults to `"[HyperFrames] composition script error:"`.
+   */
+  scriptErrorLabel?: string;
+
+  /**
+   * Log a warning when a composition file cannot be resolved.
+   * Defaults to `console.warn`.
+   */
+  onMissingComposition?: (srcPath: string) => void;
+}
+
+export interface InlineSubCompositionsResult {
+  styles: string[];
+  scripts: string[];
+  externalScriptSrcs: string[];
+  variablesByComp: Record<string, Record<string, unknown>>;
+}
+
+// ---------------------------------------------------------------------------
+// Default helpers
+// ---------------------------------------------------------------------------
+
+function defaultBuildScopeSelector(compId: string): string {
+  const escaped = compId.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+  return `[data-composition-id="${escaped}"]`;
+}
+
+// ---------------------------------------------------------------------------
+// Core implementation
+// ---------------------------------------------------------------------------
+
+/**
+ * Inline sub-compositions into a document. For each host element in `hosts`:
+ *
+ * 1. Resolve the sub-composition HTML via `options.resolveHtml`
+ * 2. Parse it, find `<template>` or `<body>` content
+ * 3. Find the inner `[data-composition-id]` root
+ * 4. Extract `<style>` elements, scope CSS, collect them
+ * 5. Extract `<script>` elements, wrap inline scripts, collect them
+ * 6. Collect external script `src` URLs for deduplication
+ * 7. Rewrite asset paths (and optionally inline-style asset URLs)
+ * 8. Copy dimension attrs from inner root to host if missing
+ * 9. Set `data-composition-file` on host
+ * 10. Remove `data-composition-src` from host
+ * 11. Inject the content into the host element
+ */
+export function inlineSubCompositions(
+  document: Document,
+  hosts: Element[],
+  options: InlineSubCompositionsOptions,
+): InlineSubCompositionsResult {
+  const {
+    resolveHtml,
+    parseHtml,
+    hostIdentityMap,
+    rewriteInlineStyles = false,
+    flattenInnerRoot,
+    readVariableDefaults,
+    parseHostVariables,
+    buildScopeSelector = defaultBuildScopeSelector,
+    scriptErrorLabel = "[HyperFrames] composition script error:",
+    onMissingComposition,
+  } = options;
+
+  const styles: string[] = [];
+  const scripts: string[] = [];
+  const externalScriptSrcs: string[] = [];
+  const variablesByComp: Record<string, Record<string, unknown>> = {};
+
+  for (const hostEl of hosts) {
+    const src = hostEl.getAttribute("data-composition-src");
+    if (!src) continue;
+
+    const compHtml = resolveHtml(src);
+    if (compHtml == null) {
+      if (onMissingComposition) {
+        onMissingComposition(src);
+      }
+      continue;
+    }
+
+    const compDoc = parseHtml(compHtml);
+
+    // Determine composition IDs
+    let compId: string | null;
+    let runtimeCompId: string;
+    if (hostIdentityMap) {
+      const identity = hostIdentityMap.get(hostEl);
+      compId = identity?.authoredCompositionId || null;
+      runtimeCompId = identity?.runtimeCompositionId || compId || "";
+    } else {
+      compId = hostEl.getAttribute("data-composition-id") || null;
+      runtimeCompId = compId || "";
+    }
+
+    // Find content: prefer <template>, fall back to <body>
+    const contentRoot = compDoc.querySelector("template");
+    const contentHtml = contentRoot ? contentRoot.innerHTML || "" : compDoc.body?.innerHTML || "";
+    const contentDoc = parseHtml(contentHtml);
+
+    // Find the inner composition root
+    const innerRoot = compId
+      ? contentDoc.querySelector(`[data-composition-id="${compId}"]`)
+      : contentDoc.querySelector("[data-composition-id]");
+    const inferredCompId = innerRoot?.getAttribute("data-composition-id")?.trim() || "";
+    const authoredRootId = innerRoot?.getAttribute("id")?.trim() || null;
+    const scopeCompId = compId || inferredCompId;
+    const runtimeScope = runtimeCompId ? buildScopeSelector(runtimeCompId) : "";
+
+    // Variable merging (bundler feature)
+    if (readVariableDefaults && parseHostVariables && runtimeCompId) {
+      const mergedVariables = {
+        ...readVariableDefaults(compDoc.documentElement),
+        ...parseHostVariables(hostEl),
+      };
+      if (Object.keys(mergedVariables).length > 0) {
+        variablesByComp[runtimeCompId] = mergedVariables;
+      }
+    }
+
+    // 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")]) {
+        const css = rewriteCssAssetUrls(s.textContent || "", src);
+        styles.push(
+          scopeCompId
+            ? scopeCssToComposition(css, scopeCompId, runtimeScope || undefined, authoredRootId)
+            : css,
+        );
+      }
+      for (const s of [...compDoc.head.querySelectorAll("script")]) {
+        const externalSrc = (s.getAttribute("src") || "").trim();
+        if (externalSrc && !externalScriptSrcs.includes(externalSrc)) {
+          externalScriptSrcs.push(externalSrc);
+        }
+      }
+    }
+
+    // Extract styles from content
+    for (const s of [...contentDoc.querySelectorAll("style")]) {
+      const css = rewriteCssAssetUrls(s.textContent || "", src);
+      styles.push(
+        scopeCompId
+          ? scopeCssToComposition(css, scopeCompId, runtimeScope || undefined, authoredRootId)
+          : css,
+      );
+      s.remove();
+    }
+
+    // Extract scripts from content
+    for (const s of [...contentDoc.querySelectorAll("script")]) {
+      const externalSrc = (s.getAttribute("src") || "").trim();
+      if (externalSrc) {
+        if (!externalScriptSrcs.includes(externalSrc)) {
+          externalScriptSrcs.push(externalSrc);
+        }
+      } else {
+        scripts.push(
+          scopeCompId
+            ? wrapScopedCompositionScript(
+                s.textContent || "",
+                scopeCompId,
+                scriptErrorLabel,
+                runtimeScope || undefined,
+                runtimeCompId || scopeCompId,
+                authoredRootId,
+              )
+            : `(function(){ try { ${s.textContent || ""} } catch (_err) { console.error(${JSON.stringify(scriptErrorLabel)}, _err); } })();`,
+        );
+      }
+      s.remove();
+    }
+
+    // Rewrite relative asset paths before inlining so ../foo.svg from
+    // compositions/ resolves correctly when the content moves to root.
+    const assetEls = innerRoot
+      ? innerRoot.querySelectorAll("[src], [href]")
+      : contentDoc.querySelectorAll("[src], [href]");
+    rewriteAssetPaths(
+      assetEls,
+      src,
+      (el: Element, attr: string) => el.getAttribute(attr),
+      (el: Element, attr: string, val: string) => {
+        el.setAttribute(attr, val);
+      },
+    );
+
+    if (rewriteInlineStyles) {
+      const styledEls = innerRoot
+        ? innerRoot.querySelectorAll("[style]")
+        : contentDoc.querySelectorAll("[style]");
+      rewriteInlineStyleAssetUrls(
+        styledEls,
+        src,
+        (el: Element) => el.getAttribute("style"),
+        (el: Element, val: string) => {
+          el.setAttribute("style", val);
+        },
+      );
+    }
+
+    // Copy dimension attributes from inner root to host if missing
+    if (innerRoot) {
+      const innerW = innerRoot.getAttribute("data-width");
+      const innerH = innerRoot.getAttribute("data-height");
+      if (innerW && !hostEl.getAttribute("data-width")) hostEl.setAttribute("data-width", innerW);
+      if (innerH && !hostEl.getAttribute("data-height")) {
+        hostEl.setAttribute("data-height", innerH);
+      }
+    }
+
+    // Inject content into the host element
+    if (innerRoot) {
+      innerRoot.setAttribute("data-composition-file", src);
+      for (const child of [...innerRoot.querySelectorAll("style, script")]) child.remove();
+      if (flattenInnerRoot) {
+        const prepared = flattenInnerRoot(innerRoot);
+        hostEl.innerHTML = prepared.outerHTML || "";
+      } else {
+        hostEl.innerHTML = compId ? innerRoot.innerHTML || "" : innerRoot.outerHTML || "";
+      }
+    } else {
+      for (const child of [...contentDoc.querySelectorAll("style, script")]) child.remove();
+      hostEl.innerHTML = contentDoc.body?.innerHTML || "";
+    }
+
+    hostEl.setAttribute("data-composition-file", src);
+    hostEl.removeAttribute("data-composition-src");
+  }
+
+  return { styles, scripts, externalScriptSrcs, variablesByComp };
+}
diff --git a/packages/producer/src/services/htmlCompiler.ts b/packages/producer/src/services/htmlCompiler.ts
index 1eba3fc30..533e04c7e 100644
--- a/packages/producer/src/services/htmlCompiler.ts
+++ b/packages/producer/src/services/htmlCompiler.ts
@@ -20,10 +20,8 @@ import {
   shouldClampMediaDuration,
   type ResolvedDuration,
   type UnresolvedElement,
-  rewriteAssetPaths,
-  rewriteCssAssetUrls,
 } from "@hyperframes/core";
-import { scopeCssToComposition, wrapScopedCompositionScript } from "@hyperframes/core/compiler";
+import { inlineSubCompositions as inlineSubCompositionsShared } from "@hyperframes/core/compiler";
 import { extractMediaMetadata, extractAudioMetadata } from "../utils/ffprobe.js";
 import { isPathInside, toExternalAssetKey } from "../utils/paths.js";
 import {
@@ -543,13 +541,11 @@ function coalesceHeadStylesAndBodyScripts(html: string): string {
 }
 
 /**
- * Inline sub-composition HTML into the main document, mirroring what the
- * bundler's step 6 does.  For each host element with `data-composition-src`:
- *   - Resolve the composition HTML from the pre-compiled map or disk
- *   - Extract <template> (or <body>) content
- *   - Move composition <style> to <head>, <script> to end of <body>
- *   - Replace host innerHTML with composition children
- *   - Remove data-composition-src so the runtime skips async fetching
+ * Inline sub-composition HTML into the main document using the shared
+ * inlining logic from @hyperframes/core. This wrapper handles the
+ * producer-specific concerns: parsing HTML via linkedom, resolving
+ * compositions from the pre-compiled map or disk, and setting explicit
+ * pixel dimensions on host elements for headless rendering.
  */
 function inlineSubCompositions(
   html: string,
@@ -559,142 +555,33 @@ function inlineSubCompositions(
   const { document } = parseHTML(html);
   const head = document.querySelector("head");
   const body = document.querySelector("body");
-  const hosts = document.querySelectorAll("[data-composition-src]");
+  const hosts = Array.from(document.querySelectorAll("[data-composition-src]"));
 
   if (!hosts.length) return html;
 
-  const collectedStyles: string[] = [];
-  const collectedScripts: string[] = [];
-  const collectedExternalScriptSrcs: string[] = [];
+  const result = inlineSubCompositionsShared(
+    document as unknown as Document,
+    hosts as unknown as Element[],
+    {
+      resolveHtml: (srcPath: string) => {
+        let compHtml = subCompositions.get(srcPath) || null;
+        if (!compHtml) {
+          const filePath = resolve(projectDir, srcPath);
+          if (existsSync(filePath)) {
+            compHtml = readFileSync(filePath, "utf-8");
+          }
+        }
+        return compHtml;
+      },
+      parseHtml: (htmlStr: string) => parseHTML(htmlStr).document as unknown as Document,
+      scriptErrorLabel: "[Compiler] Composition script failed",
+    },
+  );
 
+  // Producer-specific: set explicit pixel dimensions on host elements so
+  // children using width/height: 100% resolve correctly. The runtime does
+  // this automatically but compiled HTML needs it inline.
   for (const host of hosts) {
-    const srcPath = host.getAttribute("data-composition-src");
-    if (!srcPath) continue;
-
-    let compHtml = subCompositions.get(srcPath) || null;
-    if (!compHtml) {
-      const filePath = resolve(projectDir, srcPath);
-      if (existsSync(filePath)) {
-        compHtml = readFileSync(filePath, "utf-8");
-      }
-    }
-    if (!compHtml) {
-      continue;
-    }
-
-    const compDoc = parseHTML(compHtml).document;
-    const compId = host.getAttribute("data-composition-id");
-
-    const templateEl = compDoc.querySelector("template");
-    const bodyEl = compDoc.querySelector("body");
-    const contentHtml = templateEl
-      ? templateEl.innerHTML || ""
-      : bodyEl
-        ? bodyEl.innerHTML || ""
-        : compDoc.toString();
-
-    const contentDoc = parseHTML(contentHtml).document;
-
-    const innerRoot = compId
-      ? contentDoc.querySelector(`[data-composition-id="${compId}"]`)
-      : contentDoc.querySelector("[data-composition-id]");
-    const inferredCompId = innerRoot?.getAttribute("data-composition-id")?.trim() || null;
-
-    // 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 separately so backgrounds, positioning, fonts,
-    // and library scripts (e.g. GSAP CDN) are not silently dropped.
-    if (!templateEl) {
-      const compHead = compDoc.querySelector("head");
-      if (compHead) {
-        for (const styleEl of compHead.querySelectorAll("style")) {
-          const css = rewriteCssAssetUrls(styleEl.textContent || "", srcPath);
-          const scopeId = compId || inferredCompId;
-          if (scopeId && css.trim()) {
-            collectedStyles.push(scopeCssToComposition(css, scopeId));
-          } else {
-            collectedStyles.push(css);
-          }
-        }
-        for (const scriptEl of compHead.querySelectorAll("script")) {
-          const src = (scriptEl.getAttribute("src") || "").trim();
-          if (src && !collectedExternalScriptSrcs.includes(src)) {
-            collectedExternalScriptSrcs.push(src);
-          }
-        }
-      }
-    }
-
-    for (const styleEl of contentDoc.querySelectorAll("style")) {
-      const css = rewriteCssAssetUrls(styleEl.textContent || "", srcPath);
-      const scopeId = compId || inferredCompId;
-      if (scopeId && css.trim()) {
-        // Scope sub-composition styles to their composition ID to prevent
-        // CSS class collisions when multiple compositions use the same
-        // class names (e.g. ".content"). This matches preview behavior
-        // where each composition's styles are naturally scoped.
-        collectedStyles.push(scopeCssToComposition(css, scopeId));
-      } else {
-        collectedStyles.push(css);
-      }
-      styleEl.remove();
-    }
-
-    for (const scriptEl of contentDoc.querySelectorAll("script")) {
-      const src = (scriptEl.getAttribute("src") || "").trim();
-      if (src) {
-        // External CDN/remote script — collect for deduped injection into the
-        // parent document, mirroring the bundler's hoisting behavior.
-        if (!collectedExternalScriptSrcs.includes(src)) {
-          collectedExternalScriptSrcs.push(src);
-        }
-        scriptEl.remove();
-        continue;
-      }
-      const content = (scriptEl.textContent || "").trim();
-      if (content) {
-        const scriptMountCompId = compId || inferredCompId || "";
-        collectedScripts.push(
-          scriptMountCompId
-            ? wrapScopedCompositionScript(
-                content,
-                scriptMountCompId,
-                "[Compiler] Composition script failed",
-              )
-            : `(function(){ try { ${content} } catch (_err) { console.error("[Compiler] Composition script failed", _err); } })()`,
-        );
-      }
-      scriptEl.remove();
-    }
-
-    // Rewrite relative asset paths before inlining so ../foo.svg from
-    // compositions/ resolves correctly when the content moves to root.
-    const rewriteTarget = innerRoot || contentDoc;
-    rewriteAssetPaths(
-      rewriteTarget.querySelectorAll("[src], [href]"),
-      srcPath,
-      (el, attr) => (el.getAttribute(attr) || "").trim(),
-      (el, attr, val) => el.setAttribute(attr, val),
-    );
-
-    if (innerRoot) {
-      const innerW = innerRoot.getAttribute("data-width");
-      const innerH = innerRoot.getAttribute("data-height");
-      if (innerW && !host.getAttribute("data-width")) host.setAttribute("data-width", innerW);
-      if (innerH && !host.getAttribute("data-height")) host.setAttribute("data-height", innerH);
-      innerRoot.querySelectorAll("style, script").forEach((el) => el.remove());
-      host.innerHTML = compId ? innerRoot.innerHTML || "" : innerRoot.outerHTML || "";
-    } else {
-      contentDoc.querySelectorAll("style, script").forEach((el) => el.remove());
-      host.innerHTML = contentDoc.toString();
-    }
-
-    host.setAttribute("data-composition-file", srcPath);
-    host.removeAttribute("data-composition-src");
-
-    // Set explicit pixel dimensions on the host element so children using
-    // width/height: 100% resolve correctly. The runtime does this
-    // automatically but compiled HTML needs it inline.
     const hostW = host.getAttribute("data-width");
     const hostH = host.getAttribute("data-height");
     if (hostW && hostH) {
@@ -713,22 +600,23 @@ function inlineSubCompositions(
     }
   }
 
-  if (collectedStyles.length && head) {
+  // Append collected styles to <head>
+  if (result.styles.length && head) {
     const styleEl = document.createElement("style");
-    styleEl.textContent = collectedStyles.join("\n\n");
+    styleEl.textContent = result.styles.join("\n\n");
     head.appendChild(styleEl);
   }
 
   // Inject external CDN scripts before inline scripts so plugins (e.g.
   // TextPlugin, ScrollTrigger) are registered before composition code runs.
   // Deduplicate against scripts already present in the document.
-  if (collectedExternalScriptSrcs.length && body) {
+  if (result.externalScriptSrcs.length && body) {
     const existingScriptSrcs = new Set(
-      Array.from(document.querySelectorAll("script[src]")).map((el) =>
+      Array.from(document.querySelectorAll("script[src]")).map((el: Element) =>
         (el.getAttribute("src") || "").trim(),
       ),
     );
-    for (const src of collectedExternalScriptSrcs) {
+    for (const src of result.externalScriptSrcs) {
       if (!existingScriptSrcs.has(src)) {
         const scriptEl = document.createElement("script");
         scriptEl.setAttribute("src", src);
@@ -738,9 +626,10 @@ function inlineSubCompositions(
     }
   }
 
-  if (collectedScripts.length && body) {
+  // Append collected inline scripts to <body>
+  if (result.scripts.length && body) {
     const scriptEl = document.createElement("script");
-    scriptEl.textContent = collectedScripts.join("\n;\n");
+    scriptEl.textContent = result.scripts.join("\n;\n");
     body.appendChild(scriptEl);
   }