hyperframes 0.8.43 → 0.8.44

package/dist/cli.js

@@ -50,7 +50,7 @@ var VERSION;
 var init_version = __esm({
   "src/version.ts"() {
     "use strict";
-    VERSION = true ? "0.8.43" : "0.0.0-dev";
+    VERSION = true ? "0.8.44" : "0.0.0-dev";
   }
 });
 
@@ -55088,9 +55088,9 @@ var init_dist2 = __esm({
     UHD_SQUARE_MIN = 2160;
     UHD_RECT_MIN = 3840;
     OK = { ok: true };
-    HTML_BODY_CSS_WIDTH_FIRST_RE = /html\s*,\s*body\s*\{[^}]*?width:\s*(\d+)px[^}]*?height:\s*(\d+)px/i;
-    HTML_BODY_CSS_HEIGHT_FIRST_RE = /html\s*,\s*body\s*\{[^}]*?height:\s*(\d+)px[^}]*?width:\s*(\d+)px/i;
-    VIEWPORT_META_SIZE_RE = /<meta[^>]*name=["']viewport["'][^>]*content=["']width=(\d+),\s*height=(\d+)/i;
+    HTML_BODY_CSS_WIDTH_FIRST_RE = /(html\s*,\s*body\s*\{[^}]*?width:\s*)(\d+)px([^}]*?height:\s*)(\d+)px/i;
+    HTML_BODY_CSS_HEIGHT_FIRST_RE = /(html\s*,\s*body\s*\{[^}]*?height:\s*)(\d+)px([^}]*?width:\s*)(\d+)px/i;
+    VIEWPORT_META_SIZE_RE = /(<meta[^>]*name=["']viewport["'][^>]*content=["']width=)(\d+)(,\s*height=)(\d+)/i;
     FONT_ALIAS_MAP = {
       // ── Canonical bundled fonts (self-referencing) ────────────────────────
       inter: "inter",
@@ -71226,6 +71226,31 @@ function getEncoderPreset(quality, format = "mp4", hdr) {
   }
   return { ...base2, pixelFormat: "yuv420p" };
 }
+function resolveLockedGopSize(options) {
+  if (options.lockGopForChunkConcat !== true) return null;
+  if (typeof options.gopSize !== "number" || !Number.isFinite(options.gopSize) || options.gopSize <= 0) {
+    throw new Error(
+      `[chunkEncoder] lockGopForChunkConcat=true requires a positive integer gopSize (received ${String(options.gopSize)})`
+    );
+  }
+  return Math.floor(options.gopSize);
+}
+function appendLockedGopArgs(args, gopSize) {
+  args.push(
+    "-g",
+    String(gopSize),
+    "-keyint_min",
+    String(gopSize),
+    "-sc_threshold",
+    "0",
+    "-force_key_frames",
+    `expr:eq(mod(n,${gopSize}),0)`
+  );
+}
+function lockedGopCodecParams(codec, gopSize) {
+  const shared = "scenecut=0:open-gop=0:repeat-headers=1";
+  return codec === "h264" ? shared : `keyint=${gopSize}:min-keyint=${gopSize}:${shared}`;
+}
 function buildEncoderArgs(options, inputArgs, outputPath, gpuEncoder = null) {
   const {
     fps,
@@ -71293,36 +71318,15 @@ function buildEncoderArgs(options, inputArgs, outputPath, gpuEncoder = null) {
       args.push("-c:v", encoderName, "-preset", preset2);
       if (bitrate) args.push("-b:v", bitrate);
       else args.push("-crf", String(quality));
-      const lockGop = options.lockGopForChunkConcat === true;
-      let gop = 0;
-      if (lockGop) {
-        if (typeof options.gopSize !== "number" || !Number.isFinite(options.gopSize) || options.gopSize <= 0) {
-          throw new Error(
-            `[chunkEncoder] lockGopForChunkConcat=true requires a positive integer gopSize (received ${String(options.gopSize)})`
-          );
-        }
-        gop = Math.floor(options.gopSize);
-        args.push(
-          "-g",
-          String(gop),
-          "-keyint_min",
-          String(gop),
-          "-sc_threshold",
-          "0",
-          "-force_key_frames",
-          `expr:eq(mod(n,${gop}),0)`
-        );
-      }
+      const gop = resolveLockedGopSize(options);
+      const lockGop = gop !== null;
+      if (gop !== null) appendLockedGopArgs(args, gop);
       if (codec === "h264" || codec === "h265" && lockGop) {
         args.push("-bf", "0");
       }
       const xParamsFlag = codec === "h264" ? "-x264-params" : "-x265-params";
       const colorParams = codec === "h265" && options.hdr ? getHdrEncoderColorParams(options.hdr.transfer).x265ColorParams : "colorprim=bt709:transfer=bt709:colormatrix=bt709";
-      let gopParams = "";
-      if (lockGop) {
-        const shared = "scenecut=0:open-gop=0:repeat-headers=1";
-        gopParams = codec === "h264" ? shared : `keyint=${gop}:min-keyint=${gop}:${shared}`;
-      }
+      const gopParams = gop !== null ? lockedGopCodecParams(codec, gop) : "";
       const joinParams = (...parts) => parts.filter((p2) => p2.length > 0).join(":");
       if (preset2 === "ultrafast") {
         args.push(xParamsFlag, joinParams("aq-mode=3", colorParams, gopParams));
@@ -71341,15 +71345,10 @@ function buildEncoderArgs(options, inputArgs, outputPath, gpuEncoder = null) {
     args.push("-deadline", preset2 === "ultrafast" ? "realtime" : "good");
     args.push("-row-mt", "1");
     appendVp9CpuUsedArg(args, vp9CpuUsed);
-    const lockGopVp9 = options.lockGopForChunkConcat === true;
-    if (lockGopVp9) {
-      if (typeof options.gopSize !== "number" || !Number.isFinite(options.gopSize) || options.gopSize <= 0) {
-        throw new Error(
-          `[chunkEncoder] lockGopForChunkConcat=true requires a positive integer gopSize (received ${String(options.gopSize)})`
-        );
-      }
-      const gop = Math.floor(options.gopSize);
-      args.push("-g", String(gop), "-keyint_min", String(gop), "-auto-alt-ref", "0");
+    const vp9Gop = resolveLockedGopSize(options);
+    const lockGopVp9 = vp9Gop !== null;
+    if (vp9Gop !== null) {
+      args.push("-g", String(vp9Gop), "-keyint_min", String(vp9Gop), "-auto-alt-ref", "0");
     }
     if (pixelFormat === "yuva420p") {
       if (!lockGopVp9) {
@@ -71896,15 +71895,18 @@ function buildStreamingArgs(options, outputPath, gpuEncoder = null) {
       args.push("-c:v", encoderName, "-preset", preset2);
       if (bitrate) args.push("-b:v", bitrate);
       else args.push("-crf", String(quality));
-      if (codec === "h264") {
+      const lockedGop = resolveLockedGopSize(options);
+      if (lockedGop !== null) appendLockedGopArgs(args, lockedGop);
+      if (codec === "h264" || lockedGop !== null) {
         args.push("-bf", "0");
       }
       const xParamsFlag = codec === "h264" ? "-x264-params" : "-x265-params";
       const colorParams = options.rawInputFormat && options.hdr ? getHdrEncoderColorParams(options.hdr.transfer).x265ColorParams : "colorprim=bt709:transfer=bt709:colormatrix=bt709";
+      const gopParams = lockedGop !== null ? `:${lockedGopCodecParams(codec, lockedGop)}` : "";
       if (preset2 === "ultrafast") {
-        args.push(xParamsFlag, `aq-mode=3:${colorParams}`);
+        args.push(xParamsFlag, `aq-mode=3:${colorParams}${gopParams}`);
       } else {
-        args.push(xParamsFlag, `aq-mode=3:aq-strength=0.8:deblock=1,1:${colorParams}`);
+        args.push(xParamsFlag, `aq-mode=3:aq-strength=0.8:deblock=1,1:${colorParams}${gopParams}`);
       }
       if (codec === "h265") {
         args.push("-tag:v", "hvc1");
@@ -72135,6 +72137,7 @@ var init_streamingEncoder = __esm({
     init_dist3();
     init_vp9Options();
     init_renderProvenance();
+    init_chunkEncoder();
   }
 });
 
@@ -80437,12 +80440,12 @@ function findVisibleMarkupCommentLeak(source) {
 function readHtmlBodyCssSize(source) {
   const widthFirst = source.match(HTML_BODY_CSS_WIDTH_FIRST_RE);
   if (widthFirst) {
-    const [, width = "", height = ""] = widthFirst;
+    const [, , width = "", , height = ""] = widthFirst;
     return { width, height };
   }
   const heightFirst = source.match(HTML_BODY_CSS_HEIGHT_FIRST_RE);
   if (heightFirst) {
-    const [, height = "", width = ""] = heightFirst;
+    const [, , height = "", , width = ""] = heightFirst;
     return { width, height };
   }
   return null;
@@ -80450,18 +80453,39 @@ function readHtmlBodyCssSize(source) {
 function readViewportMetaSize(source) {
   const match = source.match(VIEWPORT_META_SIZE_RE);
   if (!match) return null;
-  const [, width = "", height = ""] = match;
+  const [, , width = "", , height = ""] = match;
   return { width, height };
 }
 function describeSizeMismatch(label2, size, dataWidth, dataHeight) {
   if (!size || size.width === dataWidth && size.height === dataHeight) return null;
   return `${label2} is ${size.width}x${size.height}`;
 }
-function findScaffoldSizeMismatches(source, dataWidth, dataHeight) {
-  return [
-    describeSizeMismatch("html/body CSS", readHtmlBodyCssSize(source), dataWidth, dataHeight),
-    describeSizeMismatch("the viewport meta", readViewportMetaSize(source), dataWidth, dataHeight)
-  ].filter((mismatch) => mismatch !== null);
+function describeRootDimensionsDrift(source, dataWidth, dataHeight) {
+  const bodyCssMismatch = describeSizeMismatch(
+    "html/body CSS",
+    readHtmlBodyCssSize(source),
+    dataWidth,
+    dataHeight
+  );
+  const viewportMismatch = describeSizeMismatch(
+    "the viewport meta",
+    readViewportMetaSize(source),
+    dataWidth,
+    dataHeight
+  );
+  if (!bodyCssMismatch && !viewportMismatch) return null;
+  const declared = `Root composition declares data-width="${dataWidth}" data-height="${dataHeight}"`;
+  if (!bodyCssMismatch) {
+    return {
+      message: `${declared}, but ${viewportMismatch}. The viewport meta has no effect on capture \u2014 the renderer sizes the viewport from the root's own data-width/data-height \u2014 so this is stale metadata, not a clipping risk.`,
+      fixHint: "update the meta viewport to match, or scaffold with `hyperframes init --resolution portrait`"
+    };
+  }
+  const mismatches = viewportMismatch ? `${bodyCssMismatch} and ${viewportMismatch}` : bodyCssMismatch;
+  return {
+    message: `${declared}, but ${mismatches}. The scaffolded body clips the composition at its old size.`,
+    fixHint: "update html/body CSS and the meta viewport to match, or scaffold with `hyperframes init --resolution portrait`"
+  };
 }
 function tweensVolumeInSameCall(script, id) {
   const selector = new RegExp(`#${escapeRegExp4(id)}(?![\\w-])`, "g");
@@ -82803,22 +82827,24 @@ var init_dist4 = __esm({
       // root. `hyperframes check`'s layout audits can't see it: they measure
       // against the root's own (already-correct) rect, not the body's.
       //
-      // A sub-composition fragment has no html/body or viewport to compare
-      // against, which makes this top-level-only without a separate guard.
-      ({ rootTag, source }) => {
-        if (!rootTag) return [];
+      // Sub-compositions are exempt: loadExternalCompositions (packages/core/src/
+      // runtime/compositionLoader.ts) mounts only the matched <template>/<body>
+      // subtree, so a sub-comp's own <html>/<head>/<meta viewport> never reach
+      // the rendering document, even when it's a full standalone document.
+      ({ rootTag, source, options }) => {
+        if (!rootTag || options.isSubComposition) return [];
         const dataWidth = readAttr(rootTag.raw, "data-width");
         const dataHeight = readAttr(rootTag.raw, "data-height");
         if (!dataWidth || !dataHeight) return [];
-        const mismatches = findScaffoldSizeMismatches(source, dataWidth, dataHeight);
-        if (mismatches.length === 0) return [];
+        const drift = describeRootDimensionsDrift(source, dataWidth, dataHeight);
+        if (!drift) return [];
         return [
           {
             code: "root_dimensions_mismatch",
             severity: "warning",
-            message: `Root composition declares data-width="${dataWidth}" data-height="${dataHeight}", but ${mismatches.join(" and ")}. The scaffolded body clips the composition at its old size.`,
+            message: drift.message,
             elementId: readAttr(rootTag.raw, "id") || void 0,
-            fixHint: "update html/body CSS and the meta viewport to match, or scaffold with `hyperframes init --resolution portrait`",
+            fixHint: drift.fixHint,
             snippet: truncateSnippet(rootTag.raw)
           }
         ];
@@ -150156,19 +150182,16 @@ function applyResolutionPreset(destDir, resolution) {
         changed = true;
       }
     }
-    const bodyCssRe = /(html\s*,\s*body\s*\{[^}]*?width:\s*)\d+px([^}]*?height:\s*)\d+px/i;
-    if (bodyCssRe.test(html)) {
-      html = html.replace(bodyCssRe, `$1${width}px$2${height}px`);
+    if (HTML_BODY_CSS_WIDTH_FIRST_RE.test(html)) {
+      html = html.replace(HTML_BODY_CSS_WIDTH_FIRST_RE, `$1${width}px$3${height}px`);
       changed = true;
     }
-    const bodyCssReverseRe = /(html\s*,\s*body\s*\{[^}]*?height:\s*)\d+px([^}]*?width:\s*)\d+px/i;
-    if (bodyCssReverseRe.test(html)) {
-      html = html.replace(bodyCssReverseRe, `$1${height}px$2${width}px`);
+    if (HTML_BODY_CSS_HEIGHT_FIRST_RE.test(html)) {
+      html = html.replace(HTML_BODY_CSS_HEIGHT_FIRST_RE, `$1${height}px$3${width}px`);
       changed = true;
     }
-    const viewportRe = /(<meta[^>]*name=["']viewport["'][^>]*content=["'])width=\d+,\s*height=\d+/i;
-    if (viewportRe.test(html)) {
-      html = html.replace(viewportRe, `$1width=${width}, height=${height}`);
+    if (VIEWPORT_META_SIZE_RE.test(html)) {
+      html = html.replace(VIEWPORT_META_SIZE_RE, `$1${width}$3${height}`);
       changed = true;
     }
     if (changed) writeFileSync29(file, html, "utf-8");
@@ -150260,6 +150283,7 @@ var init_init = __esm({
     init_ffmpeg();
     init_version();
     init_dist3();
+    init_dist2();
     examples3 = [
       ["Create a project with the interactive wizard", "hyperframes init my-video"],
       ["Pick a starter example", "hyperframes init my-video --example warm-grain"],

package/dist/fontLocalizeCli.js

@@ -50355,9 +50355,9 @@ var init_dist = __esm({
       COMPOSITION_ATTRIBUTES.legacyTrack
     ]);
     OK = { ok: true };
-    HTML_BODY_CSS_WIDTH_FIRST_RE = /html\s*,\s*body\s*\{[^}]*?width:\s*(\d+)px[^}]*?height:\s*(\d+)px/i;
-    HTML_BODY_CSS_HEIGHT_FIRST_RE = /html\s*,\s*body\s*\{[^}]*?height:\s*(\d+)px[^}]*?width:\s*(\d+)px/i;
-    VIEWPORT_META_SIZE_RE = /<meta[^>]*name=["']viewport["'][^>]*content=["']width=(\d+),\s*height=(\d+)/i;
+    HTML_BODY_CSS_WIDTH_FIRST_RE = /(html\s*,\s*body\s*\{[^}]*?width:\s*)(\d+)px([^}]*?height:\s*)(\d+)px/i;
+    HTML_BODY_CSS_HEIGHT_FIRST_RE = /(html\s*,\s*body\s*\{[^}]*?height:\s*)(\d+)px([^}]*?width:\s*)(\d+)px/i;
+    VIEWPORT_META_SIZE_RE = /(<meta[^>]*name=["']viewport["'][^>]*content=["']width=)(\d+)(,\s*height=)(\d+)/i;
     FONT_ALIAS_MAP = {
       // ── Canonical bundled fonts (self-referencing) ────────────────────────
       inter: "inter",
@@ -60405,6 +60405,31 @@ function getEncoderPreset(quality, format = "mp4", hdr) {
   }
   return { ...base2, pixelFormat: "yuv420p" };
 }
+function resolveLockedGopSize(options) {
+  if (options.lockGopForChunkConcat !== true) return null;
+  if (typeof options.gopSize !== "number" || !Number.isFinite(options.gopSize) || options.gopSize <= 0) {
+    throw new Error(
+      `[chunkEncoder] lockGopForChunkConcat=true requires a positive integer gopSize (received ${String(options.gopSize)})`
+    );
+  }
+  return Math.floor(options.gopSize);
+}
+function appendLockedGopArgs(args, gopSize) {
+  args.push(
+    "-g",
+    String(gopSize),
+    "-keyint_min",
+    String(gopSize),
+    "-sc_threshold",
+    "0",
+    "-force_key_frames",
+    `expr:eq(mod(n,${gopSize}),0)`
+  );
+}
+function lockedGopCodecParams(codec, gopSize) {
+  const shared = "scenecut=0:open-gop=0:repeat-headers=1";
+  return codec === "h264" ? shared : `keyint=${gopSize}:min-keyint=${gopSize}:${shared}`;
+}
 function buildEncoderArgs(options, inputArgs, outputPath, gpuEncoder = null) {
   const {
     fps,
@@ -60472,36 +60497,15 @@ function buildEncoderArgs(options, inputArgs, outputPath, gpuEncoder = null) {
       args.push("-c:v", encoderName, "-preset", preset2);
       if (bitrate) args.push("-b:v", bitrate);
       else args.push("-crf", String(quality));
-      const lockGop = options.lockGopForChunkConcat === true;
-      let gop = 0;
-      if (lockGop) {
-        if (typeof options.gopSize !== "number" || !Number.isFinite(options.gopSize) || options.gopSize <= 0) {
-          throw new Error(
-            `[chunkEncoder] lockGopForChunkConcat=true requires a positive integer gopSize (received ${String(options.gopSize)})`
-          );
-        }
-        gop = Math.floor(options.gopSize);
-        args.push(
-          "-g",
-          String(gop),
-          "-keyint_min",
-          String(gop),
-          "-sc_threshold",
-          "0",
-          "-force_key_frames",
-          `expr:eq(mod(n,${gop}),0)`
-        );
-      }
+      const gop = resolveLockedGopSize(options);
+      const lockGop = gop !== null;
+      if (gop !== null) appendLockedGopArgs(args, gop);
       if (codec === "h264" || codec === "h265" && lockGop) {
         args.push("-bf", "0");
       }
       const xParamsFlag = codec === "h264" ? "-x264-params" : "-x265-params";
       const colorParams = codec === "h265" && options.hdr ? getHdrEncoderColorParams(options.hdr.transfer).x265ColorParams : "colorprim=bt709:transfer=bt709:colormatrix=bt709";
-      let gopParams = "";
-      if (lockGop) {
-        const shared = "scenecut=0:open-gop=0:repeat-headers=1";
-        gopParams = codec === "h264" ? shared : `keyint=${gop}:min-keyint=${gop}:${shared}`;
-      }
+      const gopParams = gop !== null ? lockedGopCodecParams(codec, gop) : "";
       const joinParams = (...parts) => parts.filter((p) => p.length > 0).join(":");
       if (preset2 === "ultrafast") {
         args.push(xParamsFlag, joinParams("aq-mode=3", colorParams, gopParams));
@@ -60520,15 +60524,10 @@ function buildEncoderArgs(options, inputArgs, outputPath, gpuEncoder = null) {
     args.push("-deadline", preset2 === "ultrafast" ? "realtime" : "good");
     args.push("-row-mt", "1");
     appendVp9CpuUsedArg(args, vp9CpuUsed);
-    const lockGopVp9 = options.lockGopForChunkConcat === true;
-    if (lockGopVp9) {
-      if (typeof options.gopSize !== "number" || !Number.isFinite(options.gopSize) || options.gopSize <= 0) {
-        throw new Error(
-          `[chunkEncoder] lockGopForChunkConcat=true requires a positive integer gopSize (received ${String(options.gopSize)})`
-        );
-      }
-      const gop = Math.floor(options.gopSize);
-      args.push("-g", String(gop), "-keyint_min", String(gop), "-auto-alt-ref", "0");
+    const vp9Gop = resolveLockedGopSize(options);
+    const lockGopVp9 = vp9Gop !== null;
+    if (vp9Gop !== null) {
+      args.push("-g", String(vp9Gop), "-keyint_min", String(vp9Gop), "-auto-alt-ref", "0");
     }
     if (pixelFormat === "yuva420p") {
       if (!lockGopVp9) {
@@ -61075,15 +61074,18 @@ function buildStreamingArgs(options, outputPath, gpuEncoder = null) {
       args.push("-c:v", encoderName, "-preset", preset2);
       if (bitrate) args.push("-b:v", bitrate);
       else args.push("-crf", String(quality));
-      if (codec === "h264") {
+      const lockedGop = resolveLockedGopSize(options);
+      if (lockedGop !== null) appendLockedGopArgs(args, lockedGop);
+      if (codec === "h264" || lockedGop !== null) {
         args.push("-bf", "0");
       }
       const xParamsFlag = codec === "h264" ? "-x264-params" : "-x265-params";
       const colorParams = options.rawInputFormat && options.hdr ? getHdrEncoderColorParams(options.hdr.transfer).x265ColorParams : "colorprim=bt709:transfer=bt709:colormatrix=bt709";
+      const gopParams = lockedGop !== null ? `:${lockedGopCodecParams(codec, lockedGop)}` : "";
       if (preset2 === "ultrafast") {
-        args.push(xParamsFlag, `aq-mode=3:${colorParams}`);
+        args.push(xParamsFlag, `aq-mode=3:${colorParams}${gopParams}`);
       } else {
-        args.push(xParamsFlag, `aq-mode=3:aq-strength=0.8:deblock=1,1:${colorParams}`);
+        args.push(xParamsFlag, `aq-mode=3:aq-strength=0.8:deblock=1,1:${colorParams}${gopParams}`);
       }
       if (codec === "h265") {
         args.push("-tag:v", "hvc1");
@@ -61314,6 +61316,7 @@ var init_streamingEncoder = __esm({
     init_dist2();
     init_vp9Options();
     init_renderProvenance();
+    init_chunkEncoder();
   }
 });
 
@@ -69430,12 +69433,12 @@ function findVisibleMarkupCommentLeak(source) {
 function readHtmlBodyCssSize(source) {
   const widthFirst = source.match(HTML_BODY_CSS_WIDTH_FIRST_RE);
   if (widthFirst) {
-    const [, width = "", height = ""] = widthFirst;
+    const [, , width = "", , height = ""] = widthFirst;
     return { width, height };
   }
   const heightFirst = source.match(HTML_BODY_CSS_HEIGHT_FIRST_RE);
   if (heightFirst) {
-    const [, height = "", width = ""] = heightFirst;
+    const [, , height = "", , width = ""] = heightFirst;
     return { width, height };
   }
   return null;
@@ -69443,18 +69446,39 @@ function readHtmlBodyCssSize(source) {
 function readViewportMetaSize(source) {
   const match = source.match(VIEWPORT_META_SIZE_RE);
   if (!match) return null;
-  const [, width = "", height = ""] = match;
+  const [, , width = "", , height = ""] = match;
   return { width, height };
 }
 function describeSizeMismatch(label, size, dataWidth, dataHeight) {
   if (!size || size.width === dataWidth && size.height === dataHeight) return null;
   return `${label} is ${size.width}x${size.height}`;
 }
-function findScaffoldSizeMismatches(source, dataWidth, dataHeight) {
-  return [
-    describeSizeMismatch("html/body CSS", readHtmlBodyCssSize(source), dataWidth, dataHeight),
-    describeSizeMismatch("the viewport meta", readViewportMetaSize(source), dataWidth, dataHeight)
-  ].filter((mismatch) => mismatch !== null);
+function describeRootDimensionsDrift(source, dataWidth, dataHeight) {
+  const bodyCssMismatch = describeSizeMismatch(
+    "html/body CSS",
+    readHtmlBodyCssSize(source),
+    dataWidth,
+    dataHeight
+  );
+  const viewportMismatch = describeSizeMismatch(
+    "the viewport meta",
+    readViewportMetaSize(source),
+    dataWidth,
+    dataHeight
+  );
+  if (!bodyCssMismatch && !viewportMismatch) return null;
+  const declared = `Root composition declares data-width="${dataWidth}" data-height="${dataHeight}"`;
+  if (!bodyCssMismatch) {
+    return {
+      message: `${declared}, but ${viewportMismatch}. The viewport meta has no effect on capture \u2014 the renderer sizes the viewport from the root's own data-width/data-height \u2014 so this is stale metadata, not a clipping risk.`,
+      fixHint: "update the meta viewport to match, or scaffold with `hyperframes init --resolution portrait`"
+    };
+  }
+  const mismatches = viewportMismatch ? `${bodyCssMismatch} and ${viewportMismatch}` : bodyCssMismatch;
+  return {
+    message: `${declared}, but ${mismatches}. The scaffolded body clips the composition at its old size.`,
+    fixHint: "update html/body CSS and the meta viewport to match, or scaffold with `hyperframes init --resolution portrait`"
+  };
 }
 function tweensVolumeInSameCall(script, id) {
   const selector = new RegExp(`#${escapeRegExp3(id)}(?![\\w-])`, "g");
@@ -71075,22 +71099,24 @@ var init_dist3 = __esm({
       // root. `hyperframes check`'s layout audits can't see it: they measure
       // against the root's own (already-correct) rect, not the body's.
       //
-      // A sub-composition fragment has no html/body or viewport to compare
-      // against, which makes this top-level-only without a separate guard.
-      ({ rootTag, source }) => {
-        if (!rootTag) return [];
+      // Sub-compositions are exempt: loadExternalCompositions (packages/core/src/
+      // runtime/compositionLoader.ts) mounts only the matched <template>/<body>
+      // subtree, so a sub-comp's own <html>/<head>/<meta viewport> never reach
+      // the rendering document, even when it's a full standalone document.
+      ({ rootTag, source, options }) => {
+        if (!rootTag || options.isSubComposition) return [];
         const dataWidth = readAttr(rootTag.raw, "data-width");
         const dataHeight = readAttr(rootTag.raw, "data-height");
         if (!dataWidth || !dataHeight) return [];
-        const mismatches = findScaffoldSizeMismatches(source, dataWidth, dataHeight);
-        if (mismatches.length === 0) return [];
+        const drift = describeRootDimensionsDrift(source, dataWidth, dataHeight);
+        if (!drift) return [];
         return [
           {
             code: "root_dimensions_mismatch",
             severity: "warning",
-            message: `Root composition declares data-width="${dataWidth}" data-height="${dataHeight}", but ${mismatches.join(" and ")}. The scaffolded body clips the composition at its old size.`,
+            message: drift.message,
             elementId: readAttr(rootTag.raw, "id") || void 0,
-            fixHint: "update html/body CSS and the meta viewport to match, or scaffold with `hyperframes init --resolution portrait`",
+            fixHint: drift.fixHint,
             snippet: truncateSnippet(rootTag.raw)
           }
         ];
@@ -99807,8 +99833,8 @@ async function runFontLocalize(io, localize) {
 }
 
 // src/version.ts
-var VERSION = true ? "0.8.43" : "0.0.0-dev";
-var PRODUCER_VERSION = true ? "0.8.43" : "0.0.0-dev";
+var VERSION = true ? "0.8.44" : "0.0.0-dev";
+var PRODUCER_VERSION = true ? "0.8.44" : "0.0.0-dev";
 
 // src/fontLocalizeCli.ts
 async function readStdin() {

package/dist/hyperframes-player.global.js

@@ -1,4 +1,4 @@
-"use strict";var HyperframesPlayer=(()=>{var ee=Object.defineProperty;var et=Object.getOwnPropertyDescriptor;var tt=Object.getOwnPropertyNames;var it=Object.prototype.hasOwnProperty;var rt=(r,e)=>{for(var t in e)ee(r,t,{get:e[t],enumerable:!0})},nt=(r,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of tt(e))!it.call(r,n)&&n!==t&&ee(r,n,{get:()=>e[n],enumerable:!(i=et(e,n))||i.enumerable});return r};var ot=r=>nt(ee({},"__esModule",{value:!0}),r);var Ht={};rt(Ht,{HyperframesPlayer:()=>K,SPEED_PRESETS:()=>re,formatSpeed:()=>O,formatTime:()=>q});function we(r){return r.hasRuntime||r.runtimeInjected?!1:!!(r.hasNestedCompositions||r.hasTimelines&&r.attempts>=5)}function P(r){return typeof r=="object"&&r!==null}function Ae(r){return P(r)&&typeof r.getDuration=="function"}function Ce(r){return P(r)&&typeof r.duration=="function"&&typeof r.time=="function"&&typeof r.seek=="function"&&typeof r.play=="function"&&typeof r.pause=="function"}var k="https://cdn.jsdelivr.net/npm/@hyperframes/core@0.8.43/dist/hyperframe.runtime.iife.js";function N(r){if(r===null)return null;let e=Number.parseInt(r,10);return Number.isFinite(e)&&e>0?e:null}function at(r){let e=r?.querySelector("[data-composition-id][data-width][data-height]")??r?.querySelector("[data-width][data-height]");if(!e)return null;let t=N(e.getAttribute("data-width")),i=N(e.getAttribute("data-height"));return t!==null&&i!==null?{width:t,height:i}:null}var W=class{constructor(e,t){this._iframe=e;this._callbacks=t}_iframe;_callbacks;_interval=null;_runtimeInjected=!1;get runtimeInjected(){return this._runtimeInjected}start(){this.stop(),this._runtimeInjected=!1;let e=0;this._interval=setInterval(()=>{e++;try{let t=this._iframe.contentWindow;if(!t)return;let i=!!(t.__hf||t.__player),n=!!(t.__timelines&&Object.keys(t.__timelines).length>0),o=!!this._iframe.contentDocument?.querySelector("[data-composition-src]");if(we({hasRuntime:i,hasTimelines:n,hasNestedCompositions:o,runtimeInjected:this._runtimeInjected,attempts:e})){this._injectRuntime();return}if(this._runtimeInjected&&!i)return;let d=this._resolvePlaybackDurationAdapter(t);if(d&&d.getDuration()>0){this.stop();let s=at(this._iframe.contentDocument);this._callbacks.onReady({duration:d.getDuration(),adapter:d,compositionSize:s});return}}catch{}e>=40&&(this.stop(),this._callbacks.onError("Composition timeline not found after 8s"))},200)}stop(){this._interval!==null&&(clearInterval(this._interval),this._interval=null)}resolveDirectTimelineAdapter(){try{let e=this._iframe.contentWindow;return e?this._resolveDirectTimelineAdapterFromWindow(e):null}catch{return null}}resolveDirectTimelineAdapterFromWindow(e){return this._resolveDirectTimelineAdapterFromWindow(e)}hasRuntimeBridge(e){return Reflect.get(e,"__hf")!==void 0||P(Reflect.get(e,"__player"))}_injectRuntime(){this._runtimeInjected=!0;try{let e=this._iframe.contentDocument;if(!e)return;let t=e.createElement("script");t.src=k,(e.head||e.documentElement).appendChild(t),this._callbacks.onRuntimeInjected?.()}catch{}}_resolveDirectTimelineAdapterFromWindow(e){if(this.hasRuntimeBridge(e))return null;let t=Reflect.get(e,"__timelines");if(!P(t))return null;let i=Object.keys(t);if(i.length===0)return null;let n=this._iframe.contentDocument?.querySelector("[data-composition-id]")?.getAttribute("data-composition-id"),o=n&&n in t?n:i[i.length-1],d=t[o];return Ce(d)?d:null}_resolvePlaybackDurationAdapter(e){let t=Reflect.get(e,"__player");if(Ae(t))return{kind:"runtime",getDuration:()=>t.getDuration()};let i=this._resolveDirectTimelineAdapterFromWindow(e);return i?{kind:"direct-timeline",timeline:i,getDuration:()=>i.duration()}:null}};var Re=`
+"use strict";var HyperframesPlayer=(()=>{var ee=Object.defineProperty;var et=Object.getOwnPropertyDescriptor;var tt=Object.getOwnPropertyNames;var it=Object.prototype.hasOwnProperty;var rt=(r,e)=>{for(var t in e)ee(r,t,{get:e[t],enumerable:!0})},nt=(r,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of tt(e))!it.call(r,n)&&n!==t&&ee(r,n,{get:()=>e[n],enumerable:!(i=et(e,n))||i.enumerable});return r};var ot=r=>nt(ee({},"__esModule",{value:!0}),r);var Ht={};rt(Ht,{HyperframesPlayer:()=>K,SPEED_PRESETS:()=>re,formatSpeed:()=>O,formatTime:()=>q});function we(r){return r.hasRuntime||r.runtimeInjected?!1:!!(r.hasNestedCompositions||r.hasTimelines&&r.attempts>=5)}function P(r){return typeof r=="object"&&r!==null}function Ae(r){return P(r)&&typeof r.getDuration=="function"}function Ce(r){return P(r)&&typeof r.duration=="function"&&typeof r.time=="function"&&typeof r.seek=="function"&&typeof r.play=="function"&&typeof r.pause=="function"}var k="https://cdn.jsdelivr.net/npm/@hyperframes/core@0.8.44/dist/hyperframe.runtime.iife.js";function N(r){if(r===null)return null;let e=Number.parseInt(r,10);return Number.isFinite(e)&&e>0?e:null}function at(r){let e=r?.querySelector("[data-composition-id][data-width][data-height]")??r?.querySelector("[data-width][data-height]");if(!e)return null;let t=N(e.getAttribute("data-width")),i=N(e.getAttribute("data-height"));return t!==null&&i!==null?{width:t,height:i}:null}var W=class{constructor(e,t){this._iframe=e;this._callbacks=t}_iframe;_callbacks;_interval=null;_runtimeInjected=!1;get runtimeInjected(){return this._runtimeInjected}start(){this.stop(),this._runtimeInjected=!1;let e=0;this._interval=setInterval(()=>{e++;try{let t=this._iframe.contentWindow;if(!t)return;let i=!!(t.__hf||t.__player),n=!!(t.__timelines&&Object.keys(t.__timelines).length>0),o=!!this._iframe.contentDocument?.querySelector("[data-composition-src]");if(we({hasRuntime:i,hasTimelines:n,hasNestedCompositions:o,runtimeInjected:this._runtimeInjected,attempts:e})){this._injectRuntime();return}if(this._runtimeInjected&&!i)return;let d=this._resolvePlaybackDurationAdapter(t);if(d&&d.getDuration()>0){this.stop();let s=at(this._iframe.contentDocument);this._callbacks.onReady({duration:d.getDuration(),adapter:d,compositionSize:s});return}}catch{}e>=40&&(this.stop(),this._callbacks.onError("Composition timeline not found after 8s"))},200)}stop(){this._interval!==null&&(clearInterval(this._interval),this._interval=null)}resolveDirectTimelineAdapter(){try{let e=this._iframe.contentWindow;return e?this._resolveDirectTimelineAdapterFromWindow(e):null}catch{return null}}resolveDirectTimelineAdapterFromWindow(e){return this._resolveDirectTimelineAdapterFromWindow(e)}hasRuntimeBridge(e){return Reflect.get(e,"__hf")!==void 0||P(Reflect.get(e,"__player"))}_injectRuntime(){this._runtimeInjected=!0;try{let e=this._iframe.contentDocument;if(!e)return;let t=e.createElement("script");t.src=k,(e.head||e.documentElement).appendChild(t),this._callbacks.onRuntimeInjected?.()}catch{}}_resolveDirectTimelineAdapterFromWindow(e){if(this.hasRuntimeBridge(e))return null;let t=Reflect.get(e,"__timelines");if(!P(t))return null;let i=Object.keys(t);if(i.length===0)return null;let n=this._iframe.contentDocument?.querySelector("[data-composition-id]")?.getAttribute("data-composition-id"),o=n&&n in t?n:i[i.length-1],d=t[o];return Ce(d)?d:null}_resolvePlaybackDurationAdapter(e){let t=Reflect.get(e,"__player");if(Ae(t))return{kind:"runtime",getDuration:()=>t.getDuration()};let i=this._resolveDirectTimelineAdapterFromWindow(e);return i?{kind:"direct-timeline",timeline:i,getDuration:()=>i.duration()}:null}};var Re=`
   :host {
     display: block;
     position: relative;

package/dist/renderSetupWorker.js

@@ -54938,9 +54938,9 @@ var LEGACY_TIMING_ATTRIBUTES = Object.freeze([
   COMPOSITION_ATTRIBUTES.derivedEnd,
   COMPOSITION_ATTRIBUTES.legacyTrack
 ]);
-var HTML_BODY_CSS_WIDTH_FIRST_RE = /html\s*,\s*body\s*\{[^}]*?width:\s*(\d+)px[^}]*?height:\s*(\d+)px/i;
-var HTML_BODY_CSS_HEIGHT_FIRST_RE = /html\s*,\s*body\s*\{[^}]*?height:\s*(\d+)px[^}]*?width:\s*(\d+)px/i;
-var VIEWPORT_META_SIZE_RE = /<meta[^>]*name=["']viewport["'][^>]*content=["']width=(\d+),\s*height=(\d+)/i;
+var HTML_BODY_CSS_WIDTH_FIRST_RE = /(html\s*,\s*body\s*\{[^}]*?width:\s*)(\d+)px([^}]*?height:\s*)(\d+)px/i;
+var HTML_BODY_CSS_HEIGHT_FIRST_RE = /(html\s*,\s*body\s*\{[^}]*?height:\s*)(\d+)px([^}]*?width:\s*)(\d+)px/i;
+var VIEWPORT_META_SIZE_RE = /(<meta[^>]*name=["']viewport["'][^>]*content=["']width=)(\d+)(,\s*height=)(\d+)/i;
 function parseProgram2(script) {
   try {
     return parse3(script, { ecmaVersion: "latest", sourceType: "script" });
@@ -57143,12 +57143,12 @@ function findVisibleMarkupCommentLeak(source) {
 function readHtmlBodyCssSize(source) {
   const widthFirst = source.match(HTML_BODY_CSS_WIDTH_FIRST_RE);
   if (widthFirst) {
-    const [, width = "", height = ""] = widthFirst;
+    const [, , width = "", , height = ""] = widthFirst;
     return { width, height };
   }
   const heightFirst = source.match(HTML_BODY_CSS_HEIGHT_FIRST_RE);
   if (heightFirst) {
-    const [, height = "", width = ""] = heightFirst;
+    const [, , height = "", , width = ""] = heightFirst;
     return { width, height };
   }
   return null;
@@ -57156,18 +57156,39 @@ function readHtmlBodyCssSize(source) {
 function readViewportMetaSize(source) {
   const match = source.match(VIEWPORT_META_SIZE_RE);
   if (!match) return null;
-  const [, width = "", height = ""] = match;
+  const [, , width = "", , height = ""] = match;
   return { width, height };
 }
 function describeSizeMismatch(label, size, dataWidth, dataHeight) {
   if (!size || size.width === dataWidth && size.height === dataHeight) return null;
   return `${label} is ${size.width}x${size.height}`;
 }
-function findScaffoldSizeMismatches(source, dataWidth, dataHeight) {
-  return [
-    describeSizeMismatch("html/body CSS", readHtmlBodyCssSize(source), dataWidth, dataHeight),
-    describeSizeMismatch("the viewport meta", readViewportMetaSize(source), dataWidth, dataHeight)
-  ].filter((mismatch) => mismatch !== null);
+function describeRootDimensionsDrift(source, dataWidth, dataHeight) {
+  const bodyCssMismatch = describeSizeMismatch(
+    "html/body CSS",
+    readHtmlBodyCssSize(source),
+    dataWidth,
+    dataHeight
+  );
+  const viewportMismatch = describeSizeMismatch(
+    "the viewport meta",
+    readViewportMetaSize(source),
+    dataWidth,
+    dataHeight
+  );
+  if (!bodyCssMismatch && !viewportMismatch) return null;
+  const declared = `Root composition declares data-width="${dataWidth}" data-height="${dataHeight}"`;
+  if (!bodyCssMismatch) {
+    return {
+      message: `${declared}, but ${viewportMismatch}. The viewport meta has no effect on capture \u2014 the renderer sizes the viewport from the root's own data-width/data-height \u2014 so this is stale metadata, not a clipping risk.`,
+      fixHint: "update the meta viewport to match, or scaffold with `hyperframes init --resolution portrait`"
+    };
+  }
+  const mismatches = viewportMismatch ? `${bodyCssMismatch} and ${viewportMismatch}` : bodyCssMismatch;
+  return {
+    message: `${declared}, but ${mismatches}. The scaffolded body clips the composition at its old size.`,
+    fixHint: "update html/body CSS and the meta viewport to match, or scaffold with `hyperframes init --resolution portrait`"
+  };
 }
 var coreRules = [
   // id_requires_css_escape
@@ -57224,22 +57245,24 @@ var coreRules = [
   // root. `hyperframes check`'s layout audits can't see it: they measure
   // against the root's own (already-correct) rect, not the body's.
   //
-  // A sub-composition fragment has no html/body or viewport to compare
-  // against, which makes this top-level-only without a separate guard.
-  ({ rootTag, source }) => {
-    if (!rootTag) return [];
+  // Sub-compositions are exempt: loadExternalCompositions (packages/core/src/
+  // runtime/compositionLoader.ts) mounts only the matched <template>/<body>
+  // subtree, so a sub-comp's own <html>/<head>/<meta viewport> never reach
+  // the rendering document, even when it's a full standalone document.
+  ({ rootTag, source, options }) => {
+    if (!rootTag || options.isSubComposition) return [];
     const dataWidth = readAttr(rootTag.raw, "data-width");
     const dataHeight = readAttr(rootTag.raw, "data-height");
     if (!dataWidth || !dataHeight) return [];
-    const mismatches = findScaffoldSizeMismatches(source, dataWidth, dataHeight);
-    if (mismatches.length === 0) return [];
+    const drift = describeRootDimensionsDrift(source, dataWidth, dataHeight);
+    if (!drift) return [];
     return [
       {
         code: "root_dimensions_mismatch",
         severity: "warning",
-        message: `Root composition declares data-width="${dataWidth}" data-height="${dataHeight}", but ${mismatches.join(" and ")}. The scaffolded body clips the composition at its old size.`,
+        message: drift.message,
         elementId: readAttr(rootTag.raw, "id") || void 0,
-        fixHint: "update html/body CSS and the meta viewport to match, or scaffold with `hyperframes init --resolution portrait`",
+        fixHint: drift.fixHint,
         snippet: truncateSnippet(rootTag.raw)
       }
     ];