@hyperframes/producer 0.4.30 → 0.4.32

package/dist/public-server.js

@@ -102365,12 +102365,28 @@ var coreRules = [
 function escapeRegExp(value) {
   return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-function selectorTargetsManagedMedia(selector, mediaIds) {
+function hasAttrName(tagSource, attr) {
+  const escaped = escapeRegExp(attr);
+  const attrs = tagSource.replace(/^<\s*[a-z][\w:-]*/i, "");
+  return new RegExp(`(?:^|\\s)${escaped}(?:\\s*=|\\s|/?>)`, "i").test(attrs);
+}
+function classNamesFromAttr(classAttr) {
+  if (!classAttr) return [];
+  return classAttr.split(/\s+/).filter(Boolean);
+}
+function selectorTargetsManagedMedia(selector, mediaIndex) {
   const normalized = selector.trim();
   if (!normalized) return false;
-  if (/\b(video|audio)\b/i.test(normalized)) return true;
-  for (const mediaId of mediaIds) {
-    if (normalized.includes(`#${mediaId}`) || normalized.includes(`[id="${mediaId}"]`) || normalized.includes(`[id='${mediaId}']`)) {
+  if (mediaIndex.hasVideo && /\bvideo\b/i.test(normalized)) return true;
+  if (mediaIndex.hasAudio && /\baudio\b/i.test(normalized)) return true;
+  for (const mediaId of mediaIndex.ids) {
+    const escapedId = escapeRegExp(mediaId);
+    if (new RegExp(`#${escapedId}(?![\\w-])`).test(normalized) || normalized.includes(`[id="${mediaId}"]`) || normalized.includes(`[id='${mediaId}']`)) {
+      return true;
+    }
+  }
+  for (const className of mediaIndex.classes) {
+    if (new RegExp(`\\.${escapeRegExp(className)}(?![\\w-])`).test(normalized)) {
       return true;
     }
   }
@@ -102378,66 +102394,96 @@ function selectorTargetsManagedMedia(selector, mediaIds) {
 }
 function findImperativeMediaControlFindings(ctx) {
   const findings = [];
-  const managedMediaIds = new Set(
-    ctx.tags.filter((tag) => tag.name === "video" || tag.name === "audio").map((tag) => readAttr(tag.raw, "id")).filter((id) => Boolean(id))
-  );
-  if (managedMediaIds.size === 0 || ctx.scripts.length === 0) return findings;
+  const mediaTags = ctx.tags.filter((tag) => tag.name === "video" || tag.name === "audio");
+  const mediaIndex = {
+    ids: new Set(
+      mediaTags.map((tag) => readAttr(tag.raw, "id")).filter((id) => Boolean(id))
+    ),
+    classes: new Set(mediaTags.flatMap((tag) => classNamesFromAttr(readAttr(tag.raw, "class")))),
+    hasVideo: mediaTags.some((tag) => tag.name === "video"),
+    hasAudio: mediaTags.some((tag) => tag.name === "audio")
+  };
+  if (mediaTags.length === 0 || ctx.scripts.length === 0) return findings;
   for (const script of ctx.scripts) {
     const mediaVars = /* @__PURE__ */ new Map();
     const assignmentPatterns = [
-      /\b(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*(?:document|window\.document)\.getElementById\(\s*["']([^"']+)["']\s*\)/g,
-      /\b(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*(?:document|window\.document)\.querySelector\(\s*["']([^"']+)["']\s*\)/g
+      {
+        pattern: /\b(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*(?:document|window\.document)\.getElementById\(\s*["']([^"']+)["']\s*\)/g,
+        variableIndex: 1,
+        targetIndex: 2
+      },
+      {
+        pattern: /\b(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*(?:document|window\.document)\.querySelector\(\s*(["'])([\s\S]*?)\2\s*\)/g,
+        variableIndex: 1,
+        targetIndex: 3
+      }
     ];
-    for (const pattern of assignmentPatterns) {
+    for (const { pattern, variableIndex, targetIndex } of assignmentPatterns) {
       let match2;
       while ((match2 = pattern.exec(script.content)) !== null) {
-        const variableName = match2[1];
-        const target = match2[2];
+        const variableName = match2[variableIndex];
+        const target = match2[targetIndex];
         if (!variableName || !target) continue;
-        if (managedMediaIds.has(target) || selectorTargetsManagedMedia(target, managedMediaIds)) {
-          mediaVars.set(variableName, managedMediaIds.has(target) ? target : void 0);
+        if (mediaIndex.ids.has(target) || selectorTargetsManagedMedia(target, mediaIndex)) {
+          mediaVars.set(variableName, mediaIndex.ids.has(target) ? target : void 0);
         }
       }
     }
     const directIdPatterns = [
       {
         pattern: /\b(?:document|window\.document)\.getElementById\(\s*["']([^"']+)["']\s*\)\.play\s*\(/g,
-        kind: "play()"
+        kind: "play()",
+        targetIndex: 1
       },
       {
         pattern: /\b(?:document|window\.document)\.getElementById\(\s*["']([^"']+)["']\s*\)\.pause\s*\(/g,
-        kind: "pause()"
+        kind: "pause()",
+        targetIndex: 1
       },
       {
         pattern: /\b(?:document|window\.document)\.getElementById\(\s*["']([^"']+)["']\s*\)\.currentTime\s*=/g,
-        kind: "currentTime"
+        kind: "currentTime",
+        targetIndex: 1
+      },
+      {
+        pattern: /\b(?:document|window\.document)\.getElementById\(\s*["']([^"']+)["']\s*\)\.muted\s*=/g,
+        kind: "muted assignment",
+        targetIndex: 1
       },
       {
-        pattern: /\b(?:document|window\.document)\.querySelector\(\s*["']([^"']+)["']\s*\)\.play\s*\(/g,
-        kind: "play()"
+        pattern: /\b(?:document|window\.document)\.querySelector\(\s*(["'])([\s\S]*?)\1\s*\)\.play\s*\(/g,
+        kind: "play()",
+        targetIndex: 2
       },
       {
-        pattern: /\b(?:document|window\.document)\.querySelector\(\s*["']([^"']+)["']\s*\)\.pause\s*\(/g,
-        kind: "pause()"
+        pattern: /\b(?:document|window\.document)\.querySelector\(\s*(["'])([\s\S]*?)\1\s*\)\.pause\s*\(/g,
+        kind: "pause()",
+        targetIndex: 2
       },
       {
-        pattern: /\b(?:document|window\.document)\.querySelector\(\s*["']([^"']+)["']\s*\)\.currentTime\s*=/g,
-        kind: "currentTime"
+        pattern: /\b(?:document|window\.document)\.querySelector\(\s*(["'])([\s\S]*?)\1\s*\)\.currentTime\s*=/g,
+        kind: "currentTime",
+        targetIndex: 2
+      },
+      {
+        pattern: /\b(?:document|window\.document)\.querySelector\(\s*(["'])([\s\S]*?)\1\s*\)\.muted\s*=/g,
+        kind: "muted assignment",
+        targetIndex: 2
       }
     ];
-    for (const { pattern, kind } of directIdPatterns) {
+    for (const { pattern, kind, targetIndex } of directIdPatterns) {
       let match2;
       while ((match2 = pattern.exec(script.content)) !== null) {
-        const target = match2[1];
+        const target = match2[targetIndex];
         if (!target) continue;
-        const elementId = managedMediaIds.has(target) ? target : selectorTargetsManagedMedia(target, managedMediaIds) ? void 0 : null;
+        const elementId = mediaIndex.ids.has(target) ? target : selectorTargetsManagedMedia(target, mediaIndex) ? void 0 : null;
         if (elementId === null) continue;
         findings.push({
           code: "imperative_media_control",
           severity: "error",
           message: `Inline <script> imperatively controls managed media via ${kind}. HyperFrames must own media play/pause/seek to keep preview, timeline, and renders deterministic.`,
           elementId: elementId || void 0,
-          fixHint: "Remove imperative media play/pause/currentTime control. Express timing with data-start/data-duration and media offsets like data-media-start or data-playback-start instead.",
+          fixHint: "Remove imperative media play/pause/currentTime/muted control. Express timing with data-start/data-duration and media offsets like data-media-start or data-playback-start instead.",
           snippet: truncateSnippet(match2[0])
         });
       }
@@ -102447,7 +102493,11 @@ function findImperativeMediaControlFindings(ctx) {
       const variablePatterns = [
         { pattern: new RegExp(`\\b${escapedVar}\\.play\\s*\\(`, "g"), kind: "play()" },
         { pattern: new RegExp(`\\b${escapedVar}\\.pause\\s*\\(`, "g"), kind: "pause()" },
-        { pattern: new RegExp(`\\b${escapedVar}\\.currentTime\\s*=`, "g"), kind: "currentTime" }
+        { pattern: new RegExp(`\\b${escapedVar}\\.currentTime\\s*=`, "g"), kind: "currentTime" },
+        {
+          pattern: new RegExp(`\\b${escapedVar}\\.muted\\s*=`, "g"),
+          kind: "muted assignment"
+        }
       ];
       for (const { pattern, kind } of variablePatterns) {
         let match2;
@@ -102457,7 +102507,7 @@ function findImperativeMediaControlFindings(ctx) {
             severity: "error",
             message: `Inline <script> imperatively controls managed media via ${kind}. HyperFrames must own media play/pause/seek to keep preview, timeline, and renders deterministic.`,
             elementId,
-            fixHint: "Remove imperative media play/pause/currentTime control. Express timing with data-start/data-duration and media offsets like data-media-start or data-playback-start instead.",
+            fixHint: "Remove imperative media play/pause/currentTime/muted control. Express timing with data-start/data-duration and media offsets like data-media-start or data-playback-start instead.",
             snippet: truncateSnippet(match2[0])
           });
         }
@@ -102519,15 +102569,27 @@ var mediaRules = [
     const findings = [];
     for (const tag of tags) {
       if (tag.name !== "video") continue;
-      const hasMuted = /\bmuted\b/i.test(tag.raw);
-      if (!hasMuted && readAttr(tag.raw, "data-start")) {
+      const hasMuted = hasAttrName(tag.raw, "muted");
+      const hasDeclaredAudio = readAttr(tag.raw, "data-has-audio") === "true";
+      if (!hasMuted && !hasDeclaredAudio && readAttr(tag.raw, "data-start")) {
         const elementId = readAttr(tag.raw, "id") || void 0;
         findings.push({
           code: "video_missing_muted",
           severity: "error",
-          message: `<video${elementId ? ` id="${elementId}"` : ""}> has data-start but is not muted. The framework expects video to be muted with a separate <audio> element for sound.`,
+          message: `<video${elementId ? ` id="${elementId}"` : ""}> has data-start but is not muted. Mark audible videos with data-has-audio="true"; otherwise keep video muted and use a separate <audio> element for sound.`,
+          elementId,
+          fixHint: 'Add the `muted` attribute for silent video, or add data-has-audio="true" when the video track should contribute audio.',
+          snippet: truncateSnippet(tag.raw)
+        });
+      }
+      if (hasMuted && hasDeclaredAudio) {
+        const elementId = readAttr(tag.raw, "id") || void 0;
+        findings.push({
+          code: "video_muted_with_declared_audio",
+          severity: "error",
+          message: `<video${elementId ? ` id="${elementId}"` : ""}> declares data-has-audio="true" but also has muted. Studio preview will silence the video audio.`,
           elementId,
-          fixHint: "Add the `muted` attribute to the <video> tag and use a separate <audio> element with the same src for audio playback.",
+          fixHint: 'Remove the `muted` attribute if this video should be audible, or remove data-has-audio="true" and use data-volume="0" for silent visual video.',
           snippet: truncateSnippet(tag.raw)
         });
       }
@@ -102649,7 +102711,7 @@ var mediaRules = [
     }
     return findings;
   },
-  // media_missing_id + media_missing_src + media_preload_none
+  // media_missing_data_start + media_missing_id + media_missing_src + media_preload_none
   ({ tags }) => {
     const findings = [];
     for (const tag of tags) {
@@ -102657,6 +102719,16 @@ var mediaRules = [
       const hasDataStart = readAttr(tag.raw, "data-start");
       const hasId = readAttr(tag.raw, "id");
       const hasSrc = readAttr(tag.raw, "src");
+      if (hasSrc && !hasDataStart) {
+        findings.push({
+          code: "media_missing_data_start",
+          severity: "error",
+          message: `<${tag.name}${hasId ? ` id="${hasId}"` : ""}> has src but no data-start. HyperFrames cannot own playback for untimed media, so preview and render behavior can diverge.`,
+          elementId: hasId || void 0,
+          fixHint: `Add data-start="0" (or the intended start time) and data-duration if the clip should stop before the source ends.`,
+          snippet: truncateSnippet(tag.raw)
+        });
+      }
       if (hasDataStart && !hasId) {
         findings.push({
           code: "media_missing_id",
@@ -103513,6 +103585,31 @@ var compositionRules = [
     }
     return findings;
   },
+  // split_data_attribute_selector
+  ({ scripts, styles }) => {
+    const findings = [];
+    const splitDataAttrSelectorPattern = /\[data-composition-id=(["'])([^"'\]]+)\1\s+(data-[\w:-]+)=(["'])([^"'\]]*)\4\]/g;
+    const scan = (content) => {
+      splitDataAttrSelectorPattern.lastIndex = 0;
+      let match2;
+      while ((match2 = splitDataAttrSelectorPattern.exec(content)) !== null) {
+        const compId = match2[2] ?? "";
+        const attrName = match2[3] ?? "";
+        const attrValue = match2[5] ?? "";
+        findings.push({
+          code: "split_data_attribute_selector",
+          severity: "error",
+          message: `Selector "${match2[0]}" combines two attributes inside one CSS attribute selector. Browsers reject it, so GSAP timelines or querySelector calls will fail before registering.`,
+          selector: match2[0],
+          fixHint: `Use separate attribute selectors: [data-composition-id="${compId}"][${attrName}="${attrValue}"].`,
+          snippet: truncateSnippet(match2[0])
+        });
+      }
+    };
+    for (const style of styles) scan(style.content);
+    for (const script of scripts) scan(script.content);
+    return findings;
+  },
   // template_literal_selector
   ({ scripts }) => {
     const findings = [];
@@ -103926,13 +104023,13 @@ async function beginFrameCapture(page, options, frameTimeTicks, interval) {
 }
 async function pageScreenshotCapture(page, options) {
   const client = await getCdpSession(page);
-  const format3 = options.format === "png" ? "png" : "jpeg";
+  const isPng = options.format === "png";
   const result = await client.send("Page.captureScreenshot", {
-    format: format3,
-    quality: format3 === "jpeg" ? options.quality ?? 80 : void 0,
+    format: isPng ? "png" : "jpeg",
+    quality: isPng ? void 0 : options.quality ?? 80,
     fromSurface: true,
     captureBeyondViewport: false,
-    optimizeForSpeed: true
+    optimizeForSpeed: !isPng
   });
   return Buffer.from(result.data, "base64");
 }
@@ -104145,12 +104242,6 @@ async function createCaptureSession(serverUrl, outputDir, options, onBeforeCaptu
     deviceScaleFactor: options.deviceScaleFactor || 1
   };
   await page.setViewport(viewport);
-  if (options.format === "png") {
-    const cdp = await getCdpSession(page);
-    await cdp.send("Emulation.setDefaultBackgroundColorOverride", {
-      color: { r: 0, g: 0, b: 0, a: 0 }
-    });
-  }
   return {
     browser,
     page,
@@ -104246,6 +104337,9 @@ async function initializeSession(session) {
       );
     }
     await page.evaluate(`document.fonts?.ready`);
+    if (session.options.format === "png") {
+      await initTransparentBackground(session.page);
+    }
     session.isInitialized = true;
     return;
   }
@@ -104309,6 +104403,9 @@ async function initializeSession(session) {
   await page.evaluate(`document.fonts?.ready`);
   warmupRunning = false;
   session.beginFrameTimeTicks = (warmupTicks + 10) * session.beginFrameIntervalMs;
+  if (session.options.format === "png") {
+    await initTransparentBackground(session.page);
+  }
   session.isInitialized = true;
 }
 async function captureFrameErrorDiagnostics(session, frameIndex, time, error) {
@@ -108823,7 +108920,217 @@ function createFileServer2(options) {
 // src/services/htmlCompiler.ts
 import { readFileSync as readFileSync9, existsSync as existsSync15, mkdirSync as mkdirSync10 } from "fs";
 import { join as join15, dirname as dirname9, resolve as resolve10 } from "path";
+
+// ../core/src/compiler/htmlBundler.ts
+import { transformSync } from "esbuild";
+
+// ../core/src/compiler/compositionScoping.ts
 import postcss from "postcss";
+function escapeRegExp2(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function escapeCssAttributeValue(value) {
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+function scopeSelector(selector, scope, compositionId) {
+  const selectorWithoutRootTiming = normalizeCompositionRootSelector(
+    selector,
+    scope,
+    compositionId
+  );
+  const trimmed = selectorWithoutRootTiming.trim();
+  if (!trimmed) return selector;
+  if (/^(html|body|:root|\*)$/i.test(trimmed)) return selector;
+  const compositionIdPattern = new RegExp(
+    `data-composition-id\\s*=\\s*(["'])${escapeRegExp2(compositionId)}\\1`
+  );
+  if (compositionIdPattern.test(trimmed)) return selectorWithoutRootTiming;
+  const leading = selectorWithoutRootTiming.match(/^\s*/)?.[0] ?? "";
+  const trailing = selectorWithoutRootTiming.match(/\s*$/)?.[0] ?? "";
+  return `${leading}${scope} ${trimmed}${trailing}`;
+}
+function normalizeCompositionRootSelector(selector, scope, compositionId) {
+  const quotedCompId = escapeRegExp2(compositionId);
+  const compAttr = String.raw`\[\s*data-composition-id\s*=\s*(?:"${quotedCompId}"|'${quotedCompId}')\s*\]`;
+  const timingAttr = String.raw`\s*\[\s*data-(?:start|duration)\s*=\s*(?:"[^"]*"|'[^']*')\s*\]`;
+  return selector.replace(new RegExp(`${compAttr}(?:${timingAttr})+`, "g"), scope).replace(new RegExp(`(?:${timingAttr})+${compAttr}`, "g"), scope);
+}
+var GLOBAL_AT_RULES = /* @__PURE__ */ new Set(["keyframes", "-webkit-keyframes", "font-face"]);
+function isAtRuleNode(node) {
+  return node?.type === "atrule";
+}
+function isInsideGlobalAtRule(rule) {
+  let current = rule.parent;
+  while (current) {
+    if (isAtRuleNode(current) && GLOBAL_AT_RULES.has(current.name.toLowerCase())) {
+      return true;
+    }
+    current = current.parent;
+  }
+  return false;
+}
+function scopeCssToComposition(css, compositionId) {
+  const trimmedCompositionId = compositionId.trim();
+  if (!css || !trimmedCompositionId) return css;
+  const scope = `[data-composition-id="${escapeCssAttributeValue(trimmedCompositionId)}"]`;
+  const root = postcss.parse(css);
+  root.walkRules((rule) => {
+    if (isInsideGlobalAtRule(rule)) return;
+    rule.selectors = rule.selectors.map(
+      (selector) => scopeSelector(selector, scope, trimmedCompositionId)
+    );
+  });
+  return root.toResult({ map: false }).css;
+}
+function wrapScopedCompositionScript(source2, compositionId, errorLabel = "[HyperFrames] composition script error:") {
+  const compositionIdLiteral = JSON.stringify(compositionId);
+  const errorLabelLiteral = JSON.stringify(errorLabel);
+  const escapedCompositionId = escapeRegExp2(compositionId);
+  const rootSelectorPatternLiteral = JSON.stringify(
+    String.raw`\[\s*data-composition-id\s*=\s*(?:"${escapedCompositionId}"|'${escapedCompositionId}')\s*\]`
+  );
+  const timingSelectorPatternLiteral = JSON.stringify(
+    String.raw`\s*\[\s*data-(?:start|duration)\s*=\s*(?:"[^"]*"|'[^']*')\s*\]`
+  );
+  return `(function(){
+  var __hfCompId = ${compositionIdLiteral};
+  var __hfErrorLabel = ${errorLabelLiteral};
+  var __hfEscapeAttr = function(value) {
+    return (value + "").replace(/\\\\/g, "\\\\\\\\").replace(/"/g, "\\\\\\"");
+  };
+  var __hfRootSelector = __hfCompId
+    ? '[data-composition-id="' + __hfEscapeAttr(__hfCompId) + '"]'
+    : "";
+  var __hfRoot = null;
+  var __hfRootSelectorPattern = ${rootSelectorPatternLiteral};
+  var __hfTimingSelectorPattern = ${timingSelectorPatternLiteral};
+  var __hfNormalizeSelector = function(selector) {
+    if (!__hfCompId || typeof selector !== "string") return selector;
+    return selector
+      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)
+      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);
+  };
+  var __hfFindRoot = function() {
+    if (!__hfRoot && __hfRootSelector) {
+      __hfRoot = window.document.querySelector(__hfRootSelector);
+    }
+    return __hfRoot;
+  };
+  var __hfContains = function(node) {
+    var root = __hfFindRoot();
+    return !root || node === root || root.contains(node);
+  };
+  var __hfQueryAll = function(selector) {
+    var root = __hfFindRoot();
+    if (!root || typeof selector !== "string") {
+      return window.document.querySelectorAll(selector);
+    }
+    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {
+      return __hfContains(node);
+    });
+  };
+  var __hfQueryOne = function(selector) {
+    var matches = __hfQueryAll(selector);
+    return matches[0] || null;
+  };
+  var __hfScopedDocument = typeof Proxy === "function"
+    ? new Proxy(window.document, {
+        get: function(target, prop, receiver) {
+          if (prop === "querySelector") return __hfQueryOne;
+          if (prop === "querySelectorAll") return __hfQueryAll;
+          if (prop === "getElementById") {
+            return function(id) {
+              var found = target.getElementById(id);
+              return found && __hfContains(found) ? found : null;
+            };
+          }
+          var value = Reflect.get(target, prop, receiver);
+          return typeof value === "function" ? value.bind(target) : value;
+        },
+      })
+    : window.document;
+  var __hfResolveGsapTarget = function(target) {
+    if (typeof target !== "string") return target;
+    return __hfQueryAll(target);
+  };
+  var __hfScopeTimeline = function(timeline) {
+    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;
+    ["to", "from", "fromTo", "set"].forEach(function(method) {
+      var original = timeline[method];
+      if (typeof original !== "function") return;
+      timeline[method] = function(target) {
+        var args = Array.prototype.slice.call(arguments);
+        args[0] = __hfResolveGsapTarget(target);
+        return original.apply(timeline, args);
+      };
+    });
+    try {
+      Object.defineProperty(timeline, "__hfScopedCompositionRoot", {
+        value: __hfFindRoot(),
+        configurable: true,
+      });
+    } catch (_err) {}
+    return timeline;
+  };
+  var __hfBaseGsap = typeof gsap === "undefined" ? window.gsap : gsap;
+  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== "function"
+    ? __hfBaseGsap
+    : new Proxy(__hfBaseGsap, {
+        get: function(target, prop, receiver) {
+          if (prop === "timeline") {
+            return function() {
+              return __hfScopeTimeline(target.timeline.apply(target, arguments));
+            };
+          }
+          if (prop === "to" || prop === "from" || prop === "fromTo" || prop === "set") {
+            return function(firstArg) {
+              var args = Array.prototype.slice.call(arguments);
+              args[0] = __hfResolveGsapTarget(firstArg);
+              return target[prop].apply(target, args);
+            };
+          }
+          if (prop === "utils" && target.utils && typeof Proxy === "function") {
+            return new Proxy(target.utils, {
+              get: function(utilsTarget, utilsProp, utilsReceiver) {
+                if (utilsProp === "toArray") {
+                  return function(firstArg) {
+                    var args = Array.prototype.slice.call(arguments);
+                    args[0] = __hfResolveGsapTarget(firstArg);
+                    return utilsTarget.toArray.apply(utilsTarget, args);
+                  };
+                }
+                if (utilsProp === "selector") {
+                  return function(base) {
+                    var baseEl = typeof base === "string" ? __hfQueryOne(base) : base;
+                    var root = baseEl || __hfFindRoot();
+                    return function(selector) {
+                      if (!root || typeof selector !== "string") return [];
+                      return Array.prototype.slice.call(root.querySelectorAll(selector));
+                    };
+                  };
+                }
+                var value = Reflect.get(utilsTarget, utilsProp, utilsReceiver);
+                return typeof value === "function" ? value.bind(utilsTarget) : value;
+              },
+            });
+          }
+          var value = Reflect.get(target, prop, receiver);
+          return typeof value === "function" ? value.bind(target) : value;
+        },
+      });
+  var __hfRun = function() {
+    try {
+      (function(document, gsap) {
+${source2}
+      }).call(window, __hfScopedDocument, __hfScopedGsap);
+    } catch (_err) {
+      console.error(__hfErrorLabel, __hfCompId, _err);
+    }
+  };
+  __hfFindRoot();
+  __hfRun();
+})()`;
+}
 
 // src/utils/paths.ts
 import { resolve as resolve9, basename as basename2, join as join13, relative as relative2, isAbsolute as isAbsolute4 } from "node:path";
@@ -109480,27 +109787,6 @@ function promoteCssImportsToLinkTags(html) {
   }
   return document2.toString();
 }
-function scopeCssToComposition(css, compositionId) {
-  const scope = `[data-composition-id="${compositionId}"]`;
-  const globalAtRules = /* @__PURE__ */ new Set(["keyframes", "-webkit-keyframes", "font-face"]);
-  const root = postcss.parse(css);
-  root.walkRules((rule) => {
-    let node = rule.parent;
-    while (node) {
-      if (node.type === "atrule" && globalAtRules.has(node.name.toLowerCase())) {
-        return;
-      }
-      node = node.parent;
-    }
-    rule.selectors = rule.selectors.map((sel) => {
-      if (!sel.trim()) return sel;
-      if (/^(html|body|:root|\*)$/i.test(sel.trim())) return sel;
-      if (sel.includes(`data-composition-id="${compositionId}"`)) return sel;
-      return `${scope} ${sel}`;
-    });
-  });
-  return root.toResult().css;
-}
 function coalesceHeadStylesAndBodyScripts(html) {
   const { document: document2 } = parseHTML(html);
   const head = document2.querySelector("head");
@@ -109629,28 +109915,13 @@ function inlineSubCompositions(html, subCompositions, projectDir) {
       const content = (scriptEl.textContent || "").trim();
       if (content) {
         const scriptMountCompId = compId || inferredCompId || "";
-        const compIdLiteral = JSON.stringify(scriptMountCompId);
-        collectedScripts.push(`(function(){
-  var __compId = ${compIdLiteral};
-  var __run = function() {
-    try {
-      ${content}
-    } catch (_err) {
-      console.error("[Compiler] Composition script failed", __compId, _err);
-    }
-  };
-  if (!__compId) { __run(); return; }
-  ${COMPILER_MOUNT_BLOCK_START}
-  var __selector = '[data-composition-id="' + (__compId + '').replace(/"/g, '\\\\"') + '"]';
-  var __attempt = 0;
-  var __tryRun = function() {
-    if (document.querySelector(__selector)) { __run(); return; }
-    if (++__attempt >= 8) { __run(); return; }
-    requestAnimationFrame(__tryRun);
-  };
-  __tryRun();
-  ${COMPILER_MOUNT_BLOCK_END}
-})()`);
+        collectedScripts.push(
+          scriptMountCompId ? wrapScopedCompositionScript(
+            content,
+            scriptMountCompId,
+            "[Compiler] Composition script failed"
+          ) : `(function(){ try { ${content} } catch (_err) { console.error("[Compiler] Composition script failed", _err); } })()`
+        );
       }
       scriptEl.remove();
     }
@@ -109667,23 +109938,12 @@ function inlineSubCompositions(html, subCompositions, projectDir) {
       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());
-      if (!compId && inferredCompId) {
-        host.innerHTML = innerRoot.outerHTML || "";
-      } else {
-        host.innerHTML = innerRoot.innerHTML || "";
-      }
+      host.innerHTML = compId ? innerRoot.innerHTML || "" : innerRoot.outerHTML || "";
     } else {
       contentDoc.querySelectorAll("style, script").forEach((el) => el.remove());
       host.innerHTML = contentDoc.toString();
     }
     host.removeAttribute("data-composition-src");
-    const hostDataStart = host.getAttribute("data-start");
-    if (hostDataStart != null) {
-      const innerComp = host.querySelector("[data-composition-id]");
-      if (innerComp && !innerComp.getAttribute("data-start")) {
-        innerComp.setAttribute("data-start", hostDataStart);
-      }
-    }
     const hostW = host.getAttribute("data-width");
     const hostH = host.getAttribute("data-height");
     if (hostW && hostH) {
@@ -110628,13 +110888,14 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
   const outputFormat = job.config.format ?? "mp4";
   const isWebm = outputFormat === "webm";
   const isMov = outputFormat === "mov";
-  const needsAlpha = isWebm || isMov;
+  const isPngSequence = outputFormat === "png-sequence";
+  const needsAlpha = isWebm || isMov || isPngSequence;
   if (needsAlpha) {
     cfg.forceScreenshot = true;
   }
   const enableChunkedEncode = cfg.enableChunkedEncode;
   const chunkedEncodeSize = cfg.chunkSizeFrames;
-  const enableStreamingEncode = cfg.enableStreamingEncode;
+  const enableStreamingEncode = cfg.enableStreamingEncode && !isPngSequence;
   let peakRssBytes = 0;
   let peakHeapUsedBytes = 0;
   const sampleMemory = () => {
@@ -111022,7 +111283,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
     }
     if (effectiveHdr && outputFormat !== "mp4") {
       log.warn(
-        `[Render] HDR source detected but format is ${outputFormat} \u2014 falling back to SDR. Use --format mp4 for HDR10 output.`
+        `[Render] HDR source detected but format is "${outputFormat}" \u2014 falling back to SDR. HDR + alpha is not supported. Use --format mp4 for HDR10 output.`
       );
       effectiveHdr = void 0;
     }
@@ -111077,13 +111338,19 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       skipReadinessVideoIds: Array.from(nativeHdrVideoIds)
     });
     const workerCount = calculateOptimalWorkers(totalFrames, job.config.workers, cfg);
-    const FORMAT_EXT = { mp4: ".mp4", webm: ".webm", mov: ".mov" };
+    const FORMAT_EXT = {
+      mp4: ".mp4",
+      webm: ".webm",
+      mov: ".mov",
+      "png-sequence": ""
+    };
     const videoExt = FORMAT_EXT[outputFormat] ?? ".mp4";
     const videoOnlyPath = join16(workDir, `video-only${videoExt}`);
     const nativeHdrIds = /* @__PURE__ */ new Set([...nativeHdrVideoIds, ...nativeHdrImageIds]);
     const hasHdrContent = effectiveHdr && nativeHdrIds.size > 0;
     const encoderHdr = hasHdrContent ? effectiveHdr : void 0;
-    const preset = getEncoderPreset(job.config.quality, outputFormat, encoderHdr);
+    const presetFormat = isPngSequence ? "mp4" : outputFormat;
+    const preset = getEncoderPreset(job.config.quality, presetFormat, encoderHdr);
     if (job.config.crf != null && job.config.videoBitrate) {
       log.warn(
         `[Render] Both crf=${job.config.crf} and videoBitrate=${job.config.videoBitrate} were set. These are mutually exclusive; honoring crf and ignoring videoBitrate. Set only one to silence this warning.`
@@ -111733,41 +112000,64 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
             }
           }
           perfStages.captureMs = Date.now() - stage4Start;
-          const stage5Start = Date.now();
-          updateJobStatus(job, "encoding", "Encoding video", 75, onProgress);
-          const frameExt = needsAlpha ? "png" : "jpg";
-          const framePattern = `frame_%06d.${frameExt}`;
-          const encoderOpts = {
-            fps: job.config.fps,
-            width,
-            height,
-            codec: preset.codec,
-            preset: preset.preset,
-            quality: effectiveQuality,
-            bitrate: effectiveBitrate,
-            pixelFormat: preset.pixelFormat,
-            useGpu: job.config.useGpu,
-            hdr: preset.hdr
-          };
-          const encodeResult = enableChunkedEncode ? await encodeFramesChunkedConcat(
-            framesDir,
-            framePattern,
-            videoOnlyPath,
-            encoderOpts,
-            chunkedEncodeSize,
-            abortSignal
-          ) : await encodeFramesFromDir(
-            framesDir,
-            framePattern,
-            videoOnlyPath,
-            encoderOpts,
-            abortSignal
-          );
-          assertNotAborted();
-          if (!encodeResult.success) {
-            throw new Error(`Encoding failed: ${encodeResult.error}`);
+          if (isPngSequence) {
+            const stage5Start = Date.now();
+            updateJobStatus(job, "encoding", "Writing PNG sequence", 75, onProgress);
+            if (!existsSync16(outputPath)) mkdirSync11(outputPath, { recursive: true });
+            const captured = readdirSync8(framesDir).filter((name) => name.endsWith(".png")).sort();
+            if (captured.length === 0) {
+              throw new Error(
+                `[Render] png-sequence output requested but no PNGs were captured to ${framesDir}`
+              );
+            }
+            captured.forEach((name, i) => {
+              const dst = join16(outputPath, `frame_${String(i + 1).padStart(6, "0")}.png`);
+              copyFileSync2(join16(framesDir, name), dst);
+            });
+            if (hasAudio && existsSync16(audioOutputPath)) {
+              copyFileSync2(audioOutputPath, join16(outputPath, "audio.aac"));
+              log.info(
+                `[Render] png-sequence: audio.aac sidecar written to ${outputPath}/audio.aac`
+              );
+            }
+            perfStages.encodeMs = Date.now() - stage5Start;
+          } else {
+            const stage5Start = Date.now();
+            updateJobStatus(job, "encoding", "Encoding video", 75, onProgress);
+            const frameExt = needsAlpha ? "png" : "jpg";
+            const framePattern = `frame_%06d.${frameExt}`;
+            const encoderOpts = {
+              fps: job.config.fps,
+              width,
+              height,
+              codec: preset.codec,
+              preset: preset.preset,
+              quality: effectiveQuality,
+              bitrate: effectiveBitrate,
+              pixelFormat: preset.pixelFormat,
+              useGpu: job.config.useGpu,
+              hdr: preset.hdr
+            };
+            const encodeResult = enableChunkedEncode ? await encodeFramesChunkedConcat(
+              framesDir,
+              framePattern,
+              videoOnlyPath,
+              encoderOpts,
+              chunkedEncodeSize,
+              abortSignal
+            ) : await encodeFramesFromDir(
+              framesDir,
+              framePattern,
+              videoOnlyPath,
+              encoderOpts,
+              abortSignal
+            );
+            assertNotAborted();
+            if (!encodeResult.success) {
+              throw new Error(`Encoding failed: ${encodeResult.error}`);
+            }
+            perfStages.encodeMs = Date.now() - stage5Start;
           }
-          perfStages.encodeMs = Date.now() - stage5Start;
         }
       } finally {
         if (streamingEncoder && !streamingEncoderClosed) {
@@ -111790,27 +112080,29 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
     if (frameLookup) frameLookup.cleanup();
     fileServer.close();
     fileServer = null;
-    const stage6Start = Date.now();
-    updateJobStatus(job, "assembling", "Assembling final video", 90, onProgress);
-    if (hasAudio) {
-      const muxResult = await muxVideoWithAudio(
-        videoOnlyPath,
-        audioOutputPath,
-        outputPath,
-        abortSignal
-      );
-      assertNotAborted();
-      if (!muxResult.success) {
-        throw new Error(`Audio muxing failed: ${muxResult.error}`);
-      }
-    } else {
-      const faststartResult = await applyFaststart(videoOnlyPath, outputPath, abortSignal);
-      assertNotAborted();
-      if (!faststartResult.success) {
-        throw new Error(`Faststart failed: ${faststartResult.error}`);
+    if (!isPngSequence) {
+      const stage6Start = Date.now();
+      updateJobStatus(job, "assembling", "Assembling final video", 90, onProgress);
+      if (hasAudio) {
+        const muxResult = await muxVideoWithAudio(
+          videoOnlyPath,
+          audioOutputPath,
+          outputPath,
+          abortSignal
+        );
+        assertNotAborted();
+        if (!muxResult.success) {
+          throw new Error(`Audio muxing failed: ${muxResult.error}`);
+        }
+      } else {
+        const faststartResult = await applyFaststart(videoOnlyPath, outputPath, abortSignal);
+        assertNotAborted();
+        if (!faststartResult.success) {
+          throw new Error(`Faststart failed: ${faststartResult.error}`);
+        }
       }
+      perfStages.assembleMs = Date.now() - stage6Start;
     }
-    perfStages.assembleMs = Date.now() - stage6Start;
     job.outputPath = outputPath;
     updateJobStatus(job, "complete", "Render complete", 100, onProgress);
     const totalElapsed = Date.now() - pipelineStart;
@@ -111849,7 +112141,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       }
     }
     if (job.config.debug) {
-      if (existsSync16(outputPath)) {
+      if (!isPngSequence && existsSync16(outputPath)) {
         const debugOutput = join16(workDir, `output${videoExt}`);
         copyFileSync2(outputPath, debugOutput);
       }