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

packages/core/src/compiler/compositionScoping.test.ts

@@ -660,4 +660,18 @@ window.__timelines['intro'] = tl;
     // data-hf-authored-id="intro" element, finding the .title child.
     expect(gsapTargets).toEqual([["HELLO"]]);
   });
+
+  it("innerRootClasses emits both compound and descendant selectors for root class", () => {
+    const css = `.scene_1-root { background: #1a1a2e; }
+.scene_1-root .title { color: red; }
+.unrelated { margin: 0; }`;
+    const result = scopeCssToComposition(css, "scene_1", undefined, null, {
+      innerRootClasses: ["scene_1-root"],
+    });
+    expect(result).toContain('[data-composition-id="scene_1"].scene_1-root');
+    expect(result).toContain('[data-composition-id="scene_1"] .scene_1-root');
+    expect(result).toContain('[data-composition-id="scene_1"].scene_1-root .title');
+    expect(result).toContain('[data-composition-id="scene_1"] .scene_1-root .title');
+    expect(result).toContain('[data-composition-id="scene_1"] .unrelated');
+  });
 });

packages/core/src/compiler/compositionScoping.ts

@@ -133,6 +133,39 @@ function scopeSelector(
   return `${leading}${scope} ${trimmed}${trailing}`;
 }
 
+function scopeSelectorWithRootClasses(
+  selector: string,
+  scope: string,
+  compositionId: string,
+  authoredRootId?: string | null,
+  compoundAuthoredRoot?: boolean,
+  innerRootClasses?: string[],
+): string[] {
+  const scoped = scopeSelector(
+    selector,
+    scope,
+    compositionId,
+    authoredRootId,
+    compoundAuthoredRoot,
+  );
+  if (!innerRootClasses?.length) return [scoped];
+  const trimmed = selector.trim();
+  for (const cls of innerRootClasses) {
+    const dotCls = `.${cls}`;
+    if (
+      trimmed === dotCls ||
+      trimmed.startsWith(`${dotCls} `) ||
+      trimmed.startsWith(`${dotCls}.`) ||
+      trimmed.startsWith(`${dotCls}:`)
+    ) {
+      const rest = trimmed.slice(dotCls.length);
+      const compound = `${scope}${dotCls}${rest}`;
+      if (compound !== scoped) return [compound, scoped];
+    }
+  }
+  return [scoped];
+}
+
 function normalizeCompositionRootSelector(
   selector: string,
   scope: string,
@@ -168,7 +201,7 @@ export function scopeCssToComposition(
   compositionId: string,
   scopeSelectorOverride?: string,
   authoredRootId?: string | null,
-  options?: { compoundAuthoredRoot?: boolean },
+  options?: { compoundAuthoredRoot?: boolean; innerRootClasses?: string[] },
 ): string {
   const trimmedCompositionId = compositionId.trim();
   if (!css || !trimmedCompositionId) return css;
@@ -179,13 +212,14 @@ export function scopeCssToComposition(
 
   root.walkRules((rule) => {
     if (isInsideGlobalAtRule(rule)) return;
-    rule.selectors = rule.selectors.map((selector) =>
-      scopeSelector(
+    rule.selectors = rule.selectors.flatMap((selector) =>
+      scopeSelectorWithRootClasses(
         selector,
         scope,
         trimmedCompositionId,
         authoredRootId,
         options?.compoundAuthoredRoot,
+        options?.innerRootClasses,
       ),
     );
   });

packages/core/src/compiler/htmlBundler.ts

@@ -379,39 +379,11 @@ function parseHostVariableValues(host: Element): Record<string, unknown> {
   return parsed as Record<string, unknown>;
 }
 
-export const FLATTENED_INNER_ROOT_STRIP_ATTRS = [
-  "data-composition-id",
-  "data-composition-file",
-  "data-start",
-  "data-duration",
-  "data-end",
-  "data-track-index",
-  "data-track",
-  "data-composition-src",
-  "data-hf-authored-duration",
-  "data-hf-authored-end",
-];
-
-export function prepareFlattenedInnerRoot(innerRoot: Element): Element {
-  const prepared = innerRoot.cloneNode(true) as Element;
-  const authoredRootId = prepared.getAttribute("id")?.trim();
-  for (const attrName of FLATTENED_INNER_ROOT_STRIP_ATTRS) {
-    prepared.removeAttribute(attrName);
-  }
-  if (authoredRootId) {
-    prepared.removeAttribute("id");
-    prepared.setAttribute("data-hf-authored-id", authoredRootId);
-  }
-  prepared.setAttribute("data-hf-inner-root", "true");
-  const w = prepared.getAttribute("data-width");
-  const h = prepared.getAttribute("data-height");
-  const widthVal = w ? `${w}px` : "100%";
-  const heightVal = h ? `${h}px` : "100%";
-  const existingStyle = (prepared.getAttribute("style") || "").trim();
-  const fill = `width:${widthVal};height:${heightVal}`;
-  prepared.setAttribute("style", existingStyle ? `${existingStyle};${fill}` : fill);
-  return prepared;
-}
+export {
+  FLATTENED_INNER_ROOT_STRIP_ATTRS,
+  prepareFlattenedInnerRoot,
+} from "./inlineSubCompositions";
+import { prepareFlattenedInnerRoot } from "./inlineSubCompositions";
 
 function enforceCompositionPixelSizing(document: Document): void {
   const compositionEls = [