fix(core): set explicit dimensions on data-hf-inner-root wrapper

The prepareFlattenedInnerRoot function creates a wrapper div when
inlining sub-compositions. This wrapper had no width/height, which
broke CSS height:100% chains — any sub-composition using percentage
heights with flexbox centering would collapse to 0px and render
content at the top instead of centered.

Read data-width/data-height from the inner root and set matching
pixel dimensions on the wrapper's inline style. Applied in both the
compiler (server-side bundling) and the runtime (browser-side
composition loader).

Adds a producer regression test with a centered card sub-composition
that fails without this fix.

packages/core/src/compiler/htmlBundler.ts

@@ -399,6 +399,13 @@ export function prepareFlattenedInnerRoot(innerRoot: Element): Element {
     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;
 }
 

packages/core/src/runtime/compositionLoader.ts

@@ -85,6 +85,10 @@ function prepareFlattenedInnerRoot(innerRoot: HTMLElement): HTMLElement {
     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");
+  prepared.style.width = w ? `${w}px` : "100%";
+  prepared.style.height = h ? `${h}px` : "100%";
   return prepared;
 }