hyperframes 0.6.7 → 0.6.8

package/dist/cli.js

@@ -54,7 +54,7 @@ var VERSION;
 var init_version = __esm({
   "src/version.ts"() {
     "use strict";
-    VERSION = true ? "0.6.7" : "0.0.0-dev";
+    VERSION = true ? "0.6.8" : "0.0.0-dev";
   }
 });
 
@@ -4563,8 +4563,13 @@ function compileTag(tag, isVideo2, generateId) {
     id = `${isVideo2 ? "hf-video" : "hf-audio"}-${generateId()}`;
     result = injectAttr(result, "id", id);
   }
-  const startStr = getAttr(result, "data-start");
-  const start = startStr !== null ? parseFloat(startStr) : 0;
+  let startStr = getAttr(result, "data-start");
+  if (startStr === null) {
+    result = injectAttr(result, "data-start", "0");
+    result = injectAttr(result, "data-hf-auto-start", "");
+    startStr = "0";
+  }
+  const start = parseFloat(startStr);
   const mediaStartStr = getAttr(result, "data-media-start");
   const mediaStart = mediaStartStr ? parseFloat(mediaStartStr) : 0;
   if (!hasAttr(result, "data-end")) {
@@ -11433,7 +11438,7 @@ import { get as httpsGet } from "https";
 import { pipeline } from "stream/promises";
 function downloadFile(url, dest) {
   const tmp = `${dest}.tmp`;
-  return new Promise((resolve42, reject) => {
+  return new Promise((resolve43, reject) => {
     const follow = (u) => {
       httpsGet(u, (res) => {
         if (res.statusCode === 301 || res.statusCode === 302) {
@@ -11450,7 +11455,7 @@ function downloadFile(url, dest) {
         const file = createWriteStream(tmp);
         pipeline(res, file).then(() => {
           renameSync(tmp, dest);
-          resolve42();
+          resolve43();
         }).catch((err) => {
           try {
             unlinkSync(tmp);
@@ -12175,7 +12180,7 @@ function hasNpx() {
   }
 }
 function runSkillsAdd(repo) {
-  return new Promise((resolve42, reject) => {
+  return new Promise((resolve43, reject) => {
     const child = spawn("npx", ["skills", "add", repo, "--all"], {
       stdio: "inherit",
       timeout: 12e4,
@@ -12189,7 +12194,7 @@ function runSkillsAdd(repo) {
       env: { ...process.env, GIT_CLONE_PROTECTION_ACTIVE: "0" }
     });
     child.on("close", (code, signal) => {
-      if (code === 0) resolve42();
+      if (code === 0) resolve43();
       else if (signal === "SIGINT" || code === 130) process.exit(0);
       else reject(new Error(`npx skills add exited with code ${code}`));
     });
@@ -13073,7 +13078,7 @@ function computePeaks(floats, count) {
   return peaks.map((p2) => p2 / maxPeak);
 }
 function decodeAudioPeaks(audioPath) {
-  return new Promise((resolve42, reject) => {
+  return new Promise((resolve43, reject) => {
     const proc = spawn2(
       "ffmpeg",
       [
@@ -13106,7 +13111,7 @@ function decodeAudioPeaks(audioPath) {
         return;
       }
       const ab = buf.buffer.slice(buf.byteOffset, buf.byteOffset + numSamples * 4);
-      resolve42(computePeaks(new Float32Array(ab), PEAK_COUNT));
+      resolve43(computePeaks(new Float32Array(ab), PEAK_COUNT));
     });
     proc.on("error", reject);
   });
@@ -17046,8 +17051,8 @@ var init_custom_element_registry = __esm({
         } : (element) => element.localName === localName;
         registry.set(localName, { Class, check });
         if (waiting.has(localName)) {
-          for (const resolve42 of waiting.get(localName))
-            resolve42(Class);
+          for (const resolve43 of waiting.get(localName))
+            resolve43(Class);
           waiting.delete(localName);
         }
         ownerDocument.querySelectorAll(
@@ -17087,13 +17092,13 @@ var init_custom_element_registry = __esm({
        */
       whenDefined(localName) {
         const { registry, waiting } = this;
-        return new Promise((resolve42) => {
+        return new Promise((resolve43) => {
           if (registry.has(localName))
-            resolve42(registry.get(localName).Class);
+            resolve43(registry.get(localName).Class);
           else {
             if (!waiting.has(localName))
               waiting.set(localName, []);
-            waiting.get(localName).push(resolve42);
+            waiting.get(localName).push(resolve43);
           }
         });
       }
@@ -22799,12 +22804,12 @@ var require_CSSValueExpression = __commonJS({
         return false;
       }
     };
-    CSSOM.CSSValueExpression.prototype._parseJSString = function(token, idx, sep6) {
-      var endIdx = this._findMatchedIdx(token, idx, sep6), text;
+    CSSOM.CSSValueExpression.prototype._parseJSString = function(token, idx, sep7) {
+      var endIdx = this._findMatchedIdx(token, idx, sep7), text;
       if (endIdx === -1) {
         return false;
       } else {
-        text = token.substring(idx, endIdx + sep6.length);
+        text = token.substring(idx, endIdx + sep7.length);
         return {
           idx: endIdx,
           text
@@ -22844,15 +22849,15 @@ var require_CSSValueExpression = __commonJS({
       if (!isLegal) {
         return false;
       } else {
-        var sep6 = "/";
-        return this._parseJSString(token, idx, sep6);
+        var sep7 = "/";
+        return this._parseJSString(token, idx, sep7);
       }
     };
-    CSSOM.CSSValueExpression.prototype._findMatchedIdx = function(token, idx, sep6) {
+    CSSOM.CSSValueExpression.prototype._findMatchedIdx = function(token, idx, sep7) {
       var startIdx = idx, endIdx;
       var NOT_FOUND = -1;
       while (true) {
-        endIdx = token.indexOf(sep6, startIdx + 1);
+        endIdx = token.indexOf(sep7, startIdx + 1);
         if (endIdx === -1) {
           endIdx = NOT_FOUND;
           break;
@@ -26987,7 +26992,7 @@ var init_lint2 = __esm({
 // ../core/src/studio-api/routes/render.ts
 import { streamSSE } from "hono/streaming";
 import { existsSync as existsSync13, readFileSync as readFileSync15, mkdirSync as mkdirSync7, unlinkSync as unlinkSync4, readdirSync as readdirSync6, statSync as statSync3 } from "fs";
-import { join as join17 } from "path";
+import { join as join17, resolve as resolve12, sep as sep2 } from "path";
 function registerRenderRoutes(api, adapter2) {
   const renderJobs = /* @__PURE__ */ new Map();
   const TTL_MS = 3e5;
@@ -27025,6 +27030,14 @@ function registerRenderRoutes(api, adapter2) {
     const fps = fpsParse && fpsParse.ok ? fpsParse.value : { num: 30, den: 1 };
     const quality = ["draft", "standard", "high"].includes(body.quality ?? "") ? body.quality : "standard";
     const outputResolution = VALID_RESOLUTIONS.has(body.resolution ?? "") ? body.resolution : void 0;
+    let composition;
+    if (typeof body.composition === "string" && body.composition.length > 0) {
+      const resolved = resolve12(project.dir, body.composition);
+      if (!resolved.startsWith(resolve12(project.dir) + sep2)) {
+        return c3.json({ error: "composition path must be within the project directory" }, 400);
+      }
+      composition = body.composition;
+    }
     const now = /* @__PURE__ */ new Date();
     const datePart = now.toISOString().slice(0, 10);
     const timePart = now.toTimeString().slice(0, 8).replace(/:/g, "-");
@@ -27040,7 +27053,8 @@ function registerRenderRoutes(api, adapter2) {
       fps,
       quality,
       jobId,
-      outputResolution
+      outputResolution,
+      composition
     });
     jobState.createdAt = Date.now();
     renderJobs.set(jobId, jobState);
@@ -27215,8 +27229,10 @@ function studioPositionSeekReapplyRuntime() {
   const ROTATION_ATTR = "data-hf-studio-rotation";
   const ORIGINAL_TRANSLATE_ATTR = "data-hf-studio-original-translate";
   const ORIGINAL_ROTATE_ATTR = "data-hf-studio-original-rotate";
+  const MOTION_ATTR = "data-hf-studio-motion";
+  const MOTION_TL_KEY = "studio-motion";
   const WRAPPED_PROP = "__hfStudioPositionSeekReapplyWrapped";
-  if (!document.querySelector("[" + PATH_OFFSET_ATTR + '="true"]') && !document.querySelector("[" + ROTATION_ATTR + '="true"]'))
+  if (!document.querySelector("[" + PATH_OFFSET_ATTR + '="true"]') && !document.querySelector("[" + ROTATION_ATTR + '="true"]') && !document.querySelector("[" + MOTION_ATTR + "]"))
     return;
   const splitTopLevelWhitespace = (value) => {
     const parts = [];
@@ -27252,6 +27268,84 @@ function studioPositionSeekReapplyRuntime() {
     if (!original || original === "none" || !isSimpleRotateAngle(original)) return rotationValue;
     return "calc(" + original + " + " + rotationValue + ")";
   };
+  let lastSeekTime = 0;
+  let cachedMotionKey = "";
+  const finiteNum = (v2) => typeof v2 === "number" && Number.isFinite(v2) ? v2 : null;
+  const computeMotionKey = (motionEls) => {
+    let key2 = "";
+    for (let i2 = 0; i2 < motionEls.length; i2++) {
+      const json = motionEls[i2].getAttribute?.(MOTION_ATTR);
+      if (json) key2 += (key2 ? "\n" : "") + json;
+    }
+    return key2;
+  };
+  const reapplyMotionTimeline = () => {
+    const motionEls = document.querySelectorAll("[" + MOTION_ATTR + "]");
+    if (motionEls.length === 0) {
+      cachedMotionKey = "";
+      return;
+    }
+    const win = window;
+    const gsap = win.gsap;
+    if (!gsap || typeof gsap.timeline !== "function") return;
+    win.__timelines = win.__timelines || {};
+    const motionKey = computeMotionKey(motionEls);
+    const existing = win.__timelines[MOTION_TL_KEY];
+    if (motionKey && motionKey === cachedMotionKey && existing && typeof existing.totalTime === "function") {
+      existing.totalTime(lastSeekTime, false);
+      return;
+    }
+    if (existing && typeof existing.kill === "function") existing.kill();
+    const tl = gsap.timeline({ paused: true, defaults: { overwrite: "auto" } });
+    const fromTo = tl.fromTo;
+    if (typeof fromTo !== "function") return;
+    let applied = 0;
+    for (let i2 = 0; i2 < motionEls.length; i2++) {
+      const el = motionEls[i2];
+      if (!(el instanceof HTMLElement)) continue;
+      const json = el.getAttribute(MOTION_ATTR);
+      if (!json) continue;
+      try {
+        const m2 = JSON.parse(json);
+        const start = finiteNum(m2.start);
+        const duration = finiteNum(m2.duration);
+        if (start == null || duration == null || duration <= 0) continue;
+        const ease = typeof m2.ease === "string" ? m2.ease : "none";
+        const from = m2.from && typeof m2.from === "object" ? m2.from : {};
+        const to = m2.to && typeof m2.to === "object" ? m2.to : {};
+        const customEase = m2.customEase;
+        let resolvedEase = ease;
+        if (customEase?.id && customEase?.data && win.CustomEase?.create) {
+          try {
+            gsap.registerPlugin?.(win.CustomEase);
+            win.CustomEase.create(customEase.id, customEase.data);
+            resolvedEase = customEase.id;
+          } catch {
+          }
+        }
+        fromTo.call(
+          tl,
+          el,
+          { ...from },
+          { ...to, duration, ease: resolvedEase, overwrite: "auto", immediateRender: false },
+          start
+        );
+        applied += 1;
+      } catch {
+      }
+    }
+    if (applied === 0) {
+      cachedMotionKey = "";
+      if (typeof tl.kill === "function")
+        tl.kill();
+      return;
+    }
+    cachedMotionKey = motionKey;
+    win.__timelines[MOTION_TL_KEY] = tl;
+    if (typeof tl.pause === "function") tl.pause();
+    if (typeof tl.totalTime === "function")
+      tl.totalTime(lastSeekTime, false);
+  };
   const reapplyAll = () => {
     const offsetEls = document.querySelectorAll("[" + PATH_OFFSET_ATTR + '="true"]');
     for (let i2 = 0; i2 < offsetEls.length; i2++) {
@@ -27279,6 +27373,7 @@ function studioPositionSeekReapplyRuntime() {
         el.style.setProperty("rotate", composeRotation(el, "var(" + ROTATION_PROP + ", 0deg)"));
       }
     }
+    reapplyMotionTimeline();
   };
   const runtimeWindow = window;
   const isWrapped = (fn) => Boolean(fn[WRAPPED_PROP]);
@@ -27305,6 +27400,7 @@ function studioPositionSeekReapplyRuntime() {
       return true;
     }
     const wrapped = function(time) {
+      lastSeekTime = typeof time === "number" && Number.isFinite(time) ? Math.max(0, time) : 0;
       const result = seek.call(this, time);
       reapplyAll();
       return result;
@@ -28159,6 +28255,10 @@ function findFromEnv2() {
   return void 0;
 }
 async function findFromCache() {
+  const fromPuppeteer = findFromPuppeteerCache();
+  if (fromPuppeteer) {
+    return fromPuppeteer;
+  }
   if (existsSync17(CACHE_DIR2)) {
     const installed = await getInstalledBrowsers({ cacheDir: CACHE_DIR2 });
     const match = installed.find((b2) => b2.browser === Browser.CHROMEHEADLESSSHELL);
@@ -28166,17 +28266,41 @@ async function findFromCache() {
       return { executablePath: match.executablePath, source: "cache" };
     }
   }
-  const fromPuppeteer = findFromPuppeteerCache();
-  if (fromPuppeteer) {
-    return fromPuppeteer;
-  }
   return void 0;
 }
+function parseVersionSegments(versionDir) {
+  const dashIdx = versionDir.indexOf("-");
+  const versionPart = dashIdx >= 0 ? versionDir.slice(dashIdx + 1) : versionDir;
+  const segments = versionPart.split(".");
+  const parsed = [];
+  for (const seg of segments) {
+    const n = parseInt(seg, 10);
+    if (!Number.isFinite(n)) {
+      break;
+    }
+    parsed.push(n);
+  }
+  return parsed.length > 0 ? parsed : void 0;
+}
+function compareVersionDirsDescending(a, b2) {
+  const pa = parseVersionSegments(a);
+  const pb = parseVersionSegments(b2);
+  if (!pa && !pb) return 0;
+  if (!pa) return 1;
+  if (!pb) return -1;
+  const len = Math.max(pa.length, pb.length);
+  for (let i2 = 0; i2 < len; i2 += 1) {
+    const av = pa[i2] ?? 0;
+    const bv = pb[i2] ?? 0;
+    if (av !== bv) return bv - av;
+  }
+  return 0;
+}
 function findFromPuppeteerCache() {
   if (!existsSync17(PUPPETEER_CACHE_DIR)) return void 0;
   let versions;
   try {
-    versions = readdirSync8(PUPPETEER_CACHE_DIR).sort().reverse();
+    versions = [...readdirSync8(PUPPETEER_CACHE_DIR)].sort(compareVersionDirsDescending);
   } catch {
     return void 0;
   }
@@ -28216,7 +28340,8 @@ function warnSystemFallbackOnce(executablePath) {
   _warnedSystemFallback = true;
   console.warn(
     `[hyperframes] Using system Chrome at ${executablePath}; HeadlessExperimental.beginFrame is unavailable in regular Chrome builds, so the perf-optimized capture path falls back to screenshot mode. Install chrome-headless-shell for the optimized path:
-  npx @puppeteer/browsers install chrome-headless-shell`
+  npx @puppeteer/browsers install chrome-headless-shell
+(Or set HYPERFRAMES_BROWSER_PATH to point at an existing chrome-headless-shell binary.)`
   );
 }
 function _resetSystemFallbackWarnForTests() {
@@ -28368,6 +28493,10 @@ function resolveConfig(overrides) {
     ),
     expectedChromiumMajor: env("PRODUCER_EXPECTED_CHROMIUM_MAJOR") ? Number(env("PRODUCER_EXPECTED_CHROMIUM_MAJOR")) : void 0,
     forceScreenshot: envBool("PRODUCER_FORCE_SCREENSHOT", DEFAULT_CONFIG2.forceScreenshot),
+    enablePageSideCompositing: envBool(
+      "HF_PAGE_SIDE_COMPOSITING",
+      DEFAULT_CONFIG2.enablePageSideCompositing
+    ),
     enableChunkedEncode: envBool(
       "PRODUCER_ENABLE_CHUNKED_ENCODE",
       DEFAULT_CONFIG2.enableChunkedEncode
@@ -28449,6 +28578,7 @@ var init_config2 = __esm({
       browserTimeout: 12e4,
       protocolTimeout: 3e5,
       forceScreenshot: false,
+      enablePageSideCompositing: true,
       enableChunkedEncode: false,
       chunkSizeFrames: 360,
       enableStreamingEncode: true,
@@ -28854,14 +28984,14 @@ async function pageScreenshotCapture(page, options) {
   const client = await getCdpSession(page);
   const isPng = options.format === "png";
   const dpr = options.deviceScaleFactor ?? 1;
-  const clip = dpr > 1 ? { x: 0, y: 0, width: options.width, height: options.height, scale: dpr } : void 0;
+  const clip = { x: 0, y: 0, width: options.width, height: options.height, scale: dpr };
   const result = await client.send("Page.captureScreenshot", {
     format: isPng ? "png" : "jpeg",
     quality: isPng ? void 0 : options.quality ?? 80,
     fromSurface: true,
     captureBeyondViewport: false,
     optimizeForSpeed: !isPng,
-    ...clip ? { clip } : {}
+    clip
   });
   return Buffer.from(result.data, "base64");
 }
@@ -28965,6 +29095,15 @@ async function injectVideoFramesBatch(page, updates) {
   await page.evaluate(
     async (items, visualProperties) => {
       const pendingDecodes = [];
+      const replacementLayoutProperties = /* @__PURE__ */ new Set([
+        "width",
+        "height",
+        "top",
+        "left",
+        "right",
+        "bottom",
+        "inset"
+      ]);
       for (const item of items) {
         const video = document.getElementById(item.videoId);
         if (!video) continue;
@@ -28973,7 +29112,6 @@ async function injectVideoFramesBatch(page, updates) {
         const computedStyle = window.getComputedStyle(video);
         const opacityParsed = parseFloat(computedStyle.opacity);
         const computedOpacity = Number.isNaN(opacityParsed) ? 1 : opacityParsed;
-        const sourceIsStatic = !computedStyle.position || computedStyle.position === "static";
         if (isNewImage) {
           img = document.createElement("img");
           img.classList.add("__render_frame__");
@@ -28982,6 +29120,16 @@ async function injectVideoFramesBatch(page, updates) {
           video.parentNode?.insertBefore(img, video.nextSibling);
         }
         if (!img) continue;
+        for (const property of visualProperties) {
+          if (property === "opacity") continue;
+          if (replacementLayoutProperties.has(property)) {
+            continue;
+          }
+          const value = computedStyle.getPropertyValue(property);
+          if (value) {
+            img.style.setProperty(property, value);
+          }
+        }
         {
           const videoRect = video.getBoundingClientRect();
           const offsetLeft = Number.isFinite(video.offsetLeft) ? video.offsetLeft : 0;
@@ -29000,16 +29148,6 @@ async function injectVideoFramesBatch(page, updates) {
         img.style.objectFit = computedStyle.objectFit;
         img.style.objectPosition = computedStyle.objectPosition;
         img.style.zIndex = computedStyle.zIndex;
-        for (const property of visualProperties) {
-          if (property === "opacity") continue;
-          if (sourceIsStatic && (property === "top" || property === "left" || property === "right" || property === "bottom" || property === "inset")) {
-            continue;
-          }
-          const value = computedStyle.getPropertyValue(property);
-          if (value) {
-            img.style.setProperty(property, value);
-          }
-        }
         img.decoding = "sync";
         if (img.getAttribute("src") !== item.dataUri) {
           img.src = item.dataUri;
@@ -29094,10 +29232,10 @@ async function waitForCloseWithTimeout(promise) {
       () => void 0,
       () => void 0
     ),
-    new Promise((resolve42) => {
+    new Promise((resolve43) => {
       timer = setTimeout(() => {
         timedOut = true;
-        resolve42();
+        resolve43();
       }, CAPTURE_SESSION_CLOSE_TIMEOUT_MS);
     })
   ]);
@@ -29195,10 +29333,27 @@ async function pollPageExpression(page, expression, timeoutMs, intervalMs = 100)
   while (Date.now() < deadline) {
     const ready = Boolean(await page.evaluate(expression));
     if (ready) return true;
-    await new Promise((resolve42) => setTimeout(resolve42, intervalMs));
+    await new Promise((resolve43) => setTimeout(resolve43, intervalMs));
   }
   return Boolean(await page.evaluate(expression));
 }
+async function pollVideosReady(page, skipIds, timeoutMs, intervalMs = 100) {
+  const check = async () => {
+    return Boolean(
+      await page.evaluate((skipIdList) => {
+        const skip = new Set(skipIdList);
+        const vids = Array.from(document.querySelectorAll("video")).filter((v2) => !skip.has(v2.id));
+        return vids.length === 0 || vids.every((v2) => v2.readyState >= 2);
+      }, skipIds)
+    );
+  };
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    if (await check()) return true;
+    await new Promise((resolve43) => setTimeout(resolve43, intervalMs));
+  }
+  return check();
+}
 async function applyVideoMetadataHints(page, hints) {
   if (!hints || hints.length === 0) return;
   await page.evaluate(
@@ -29229,7 +29384,7 @@ async function waitForOptionalTailwindReady(page, timeoutMs) {
     page.evaluate(
       `Promise.resolve(window.__tailwindReady).then(() => true, () => false)`
     ),
-    new Promise((resolve42) => setTimeout(() => resolve42(false), timeoutMs))
+    new Promise((resolve43) => setTimeout(() => resolve43(false), timeoutMs))
   ]);
   if (!ready) {
     throw new Error(
@@ -29281,10 +29436,9 @@ async function initializeSession(session) {
       );
     }
     await applyVideoMetadataHints(page, session.options.videoMetadataHints);
-    const skipIdsLiteral = JSON.stringify(session.options.skipReadinessVideoIds ?? []);
-    const videosReady = await pollPageExpression(
+    const videosReady = await pollVideosReady(
       page,
-      `(() => { const skip = new Set(${skipIdsLiteral}); const vids = Array.from(document.querySelectorAll("video")).filter(v => !skip.has(v.id)); return vids.length === 0 || vids.every(v => v.readyState >= 2); })()`,
+      session.options.skipReadinessVideoIds ?? [],
       pageReadyTimeout2
     );
     if (!videosReady) {
@@ -29356,15 +29510,11 @@ async function initializeSession(session) {
     );
   }
   await applyVideoMetadataHints(page, session.options.videoMetadataHints);
-  const beginframeSkipIdsLiteral = JSON.stringify(session.options.skipReadinessVideoIds ?? []);
-  const videoDeadline = Date.now() + (session.config?.playerReadyTimeout ?? DEFAULT_CONFIG2.playerReadyTimeout);
-  while (Date.now() < videoDeadline) {
-    const videosReady = await page.evaluate(
-      `(() => { const skip = new Set(${beginframeSkipIdsLiteral}); const vids = Array.from(document.querySelectorAll("video")).filter(v => !skip.has(v.id)); return vids.length === 0 || vids.every(v => v.readyState >= 2); })()`
-    );
-    if (videosReady) break;
-    await new Promise((r2) => setTimeout(r2, 100));
-  }
+  await pollVideosReady(
+    page,
+    session.options.skipReadinessVideoIds ?? [],
+    session.config?.playerReadyTimeout ?? DEFAULT_CONFIG2.playerReadyTimeout
+  );
   await page.evaluate(`document.fonts?.ready`);
   await waitForOptionalTailwindReady(page, pageReadyTimeout);
   warmupState.running = false;
@@ -29414,10 +29564,11 @@ async function prepareFrameForCapture(session, frameIndex, time) {
   }
   const quantizedTime = quantizeTimeToFrame(time, fpsToNumber(options.fps));
   const seekStart = Date.now();
-  await page.evaluate((t2) => {
+  const hasPendingComposite = await page.evaluate((t2) => {
     if (window.__hf && typeof window.__hf.seek === "function") {
       window.__hf.seek(t2);
     }
+    return !!window.__hf_page_composite_pending;
   }, quantizedTime);
   const seekMs = Date.now() - seekStart;
   const beforeCaptureStart = Date.now();
@@ -29425,6 +29576,26 @@ async function prepareFrameForCapture(session, frameIndex, time) {
     await session.onBeforeCapture(page, quantizedTime);
   }
   const beforeCaptureMs = Date.now() - beforeCaptureStart;
+  if (hasPendingComposite && session.captureMode !== "beginframe") {
+    await page.evaluate(async () => {
+      const w3 = window;
+      if (typeof w3.__hf_page_composite_prepare === "function") {
+        await w3.__hf_page_composite_prepare();
+      }
+    });
+    const cdp = await getCdpSession(page);
+    await cdp.send("Page.captureScreenshot", {
+      format: "jpeg",
+      quality: 1,
+      clip: { x: 0, y: 0, width: 1, height: 1, scale: 1 }
+    });
+    await page.evaluate(() => {
+      const w3 = window;
+      if (typeof w3.__hf_page_composite_resolve === "function") {
+        w3.__hf_page_composite_resolve();
+      }
+    });
+  }
   return { quantizedTime, seekMs, beforeCaptureMs };
 }
 async function captureFrameCore(session, frameIndex, time) {
@@ -29566,14 +29737,14 @@ var init_frameCapture = __esm({
     BROWSER_CONSOLE_BUFFER_SIZE = 200;
     CAPTURE_SESSION_CLOSE_TIMEOUT_MS = 5e3;
     LOCKED_WARMUP_TICKS = 60;
-    realSleep = (ms) => new Promise((resolve42) => setTimeout(resolve42, ms));
+    realSleep = (ms) => new Promise((resolve43) => setTimeout(resolve43, ms));
   }
 });
 
 // ../engine/src/utils/gpuEncoder.ts
 import { spawn as spawn3 } from "child_process";
 async function detectGpuEncoder() {
-  return new Promise((resolve42) => {
+  return new Promise((resolve43) => {
     const ffmpeg = spawn3("ffmpeg", ["-encoders"], {
       stdio: ["pipe", "pipe", "pipe"]
     });
@@ -29582,13 +29753,13 @@ async function detectGpuEncoder() {
       stdout2 += data.toString();
     });
     ffmpeg.on("close", () => {
-      if (stdout2.includes("h264_nvenc")) resolve42("nvenc");
-      else if (stdout2.includes("h264_videotoolbox")) resolve42("videotoolbox");
-      else if (stdout2.includes("h264_vaapi")) resolve42("vaapi");
-      else if (stdout2.includes("h264_qsv")) resolve42("qsv");
-      else resolve42(null);
+      if (stdout2.includes("h264_nvenc")) resolve43("nvenc");
+      else if (stdout2.includes("h264_videotoolbox")) resolve43("videotoolbox");
+      else if (stdout2.includes("h264_vaapi")) resolve43("vaapi");
+      else if (stdout2.includes("h264_qsv")) resolve43("qsv");
+      else resolve43(null);
     });
-    ffmpeg.on("error", () => resolve42(null));
+    ffmpeg.on("error", () => resolve43(null));
   });
 }
 async function getCachedGpuEncoder() {
@@ -29709,7 +29880,7 @@ async function runFfmpeg(args, opts) {
   const signal = opts?.signal;
   const timeout = opts?.timeout ?? DEFAULT_TIMEOUT;
   const onStderr = opts?.onStderr;
-  return new Promise((resolve42) => {
+  return new Promise((resolve43) => {
     const ffmpeg = spawn4("ffmpeg", args);
     let stderr = "";
     const onAbort = () => {
@@ -29735,7 +29906,7 @@ async function runFfmpeg(args, opts) {
     ffmpeg.on("close", (code) => {
       clearTimeout(timer);
       if (signal) signal.removeEventListener("abort", onAbort);
-      resolve42({
+      resolve43({
         success: !signal?.aborted && code === 0,
         exitCode: code,
         stderr,
@@ -29745,7 +29916,7 @@ async function runFfmpeg(args, opts) {
     ffmpeg.on("error", (err) => {
       clearTimeout(timer);
       if (signal) signal.removeEventListener("abort", onAbort);
-      resolve42({
+      resolve43({
         success: false,
         exitCode: null,
         stderr: err.message,
@@ -29976,7 +30147,7 @@ async function encodeFramesFromDir(framesDir, framePattern, outputPath, options,
   const inputPath = join24(framesDir, framePattern);
   const inputArgs = ["-framerate", fpsToFfmpegArg(options.fps), "-i", inputPath];
   const args = buildEncoderArgs(options, inputArgs, outputPath, gpuEncoder);
-  return new Promise((resolve42) => {
+  return new Promise((resolve43) => {
     const ffmpeg = spawn5("ffmpeg", args);
     let stderr = "";
     const onAbort = () => {
@@ -30001,7 +30172,7 @@ async function encodeFramesFromDir(framesDir, framePattern, outputPath, options,
       if (signal) signal.removeEventListener("abort", onAbort);
       const durationMs = Date.now() - startTime;
       if (signal?.aborted) {
-        resolve42({
+        resolve43({
           success: false,
           outputPath,
           durationMs,
@@ -30012,7 +30183,7 @@ async function encodeFramesFromDir(framesDir, framePattern, outputPath, options,
         return;
       }
       if (code !== 0) {
-        resolve42({
+        resolve43({
           success: false,
           outputPath,
           durationMs,
@@ -30023,12 +30194,12 @@ async function encodeFramesFromDir(framesDir, framePattern, outputPath, options,
         return;
       }
       const fileSize = existsSync20(outputPath) ? statSync6(outputPath).size : 0;
-      resolve42({ success: true, outputPath, durationMs, framesEncoded: frameCount, fileSize });
+      resolve43({ success: true, outputPath, durationMs, framesEncoded: frameCount, fileSize });
     });
     ffmpeg.on("error", (err) => {
       clearTimeout(timer);
       if (signal) signal.removeEventListener("abort", onAbort);
-      resolve42({
+      resolve43({
         success: false,
         outputPath,
         durationMs: Date.now() - startTime,
@@ -30086,18 +30257,18 @@ async function encodeFramesChunkedConcat(framesDir, framePattern, outputPath, op
     let gpuEncoder = null;
     if (options.useGpu) gpuEncoder = await getCachedGpuEncoder();
     const args = buildEncoderArgs(options, inputArgs, chunkPath, gpuEncoder);
-    const chunkResult = await new Promise((resolve42) => {
+    const chunkResult = await new Promise((resolve43) => {
       const ffmpeg = spawn5("ffmpeg", args);
       let stderr = "";
       ffmpeg.stderr.on("data", (d2) => {
         stderr += d2.toString();
       });
       ffmpeg.on("close", (code) => {
-        if (code === 0) resolve42({ success: true });
-        else resolve42({ success: false, error: `Chunk ${i2} encode failed: ${stderr.slice(-400)}` });
+        if (code === 0) resolve43({ success: true });
+        else resolve43({ success: false, error: `Chunk ${i2} encode failed: ${stderr.slice(-400)}` });
       });
       ffmpeg.on("error", (err) => {
-        resolve42({ success: false, error: `Chunk ${i2} encode error: ${err.message}` });
+        resolve43({ success: false, error: `Chunk ${i2} encode error: ${err.message}` });
       });
     });
     if (!chunkResult.success) {
@@ -30127,18 +30298,18 @@ async function encodeFramesChunkedConcat(framesDir, framePattern, outputPath, op
     "-y",
     outputPath
   ];
-  const concatResult = await new Promise((resolve42) => {
+  const concatResult = await new Promise((resolve43) => {
     const ffmpeg = spawn5("ffmpeg", concatArgs);
     let stderr = "";
     ffmpeg.stderr.on("data", (d2) => {
       stderr += d2.toString();
     });
     ffmpeg.on("close", (code) => {
-      if (code === 0) resolve42({ success: true });
-      else resolve42({ success: false, error: `Chunk concat failed: ${stderr.slice(-400)}` });
+      if (code === 0) resolve43({ success: true });
+      else resolve43({ success: false, error: `Chunk concat failed: ${stderr.slice(-400)}` });
     });
     ffmpeg.on("error", (err) => {
-      resolve42({ success: false, error: `Chunk concat error: ${err.message}` });
+      resolve43({ success: false, error: `Chunk concat error: ${err.message}` });
     });
   });
   if (!concatResult.success) {
@@ -30240,37 +30411,37 @@ import { dirname as dirname8 } from "path";
 function createFrameReorderBuffer(startFrame, endFrame) {
   let cursor = startFrame;
   const pending = /* @__PURE__ */ new Map();
-  const enqueueAt = (frame, resolve42) => {
+  const enqueueAt = (frame, resolve43) => {
     const list = pending.get(frame);
     if (list === void 0) {
-      pending.set(frame, [resolve42]);
+      pending.set(frame, [resolve43]);
     } else {
-      list.push(resolve42);
+      list.push(resolve43);
     }
   };
   const flushAt = (frame) => {
     const list = pending.get(frame);
     if (list === void 0) return;
     pending.delete(frame);
-    for (const resolve42 of list) resolve42();
+    for (const resolve43 of list) resolve43();
   };
-  const waitForFrame = (frame) => new Promise((resolve42) => {
+  const waitForFrame = (frame) => new Promise((resolve43) => {
     if (frame === cursor) {
-      resolve42();
+      resolve43();
       return;
     }
-    enqueueAt(frame, resolve42);
+    enqueueAt(frame, resolve43);
   });
   const advanceTo = (frame) => {
     cursor = frame;
     flushAt(frame);
   };
-  const waitForAllDone = () => new Promise((resolve42) => {
+  const waitForAllDone = () => new Promise((resolve43) => {
     if (cursor >= endFrame) {
-      resolve42();
+      resolve43();
       return;
     }
-    enqueueAt(endFrame, resolve42);
+    enqueueAt(endFrame, resolve43);
   });
   return { waitForFrame, advanceTo, waitForAllDone };
 }
@@ -30451,7 +30622,7 @@ async function spawnStreamingEncoder(outputPath, options, signal, config) {
   let stderr = "";
   let exitCode = null;
   let exitPromiseResolve = null;
-  const exitPromise = new Promise((resolve42) => exitPromiseResolve = resolve42);
+  const exitPromise = new Promise((resolve43) => exitPromiseResolve = resolve43);
   ffmpeg.stderr?.on("data", (data) => {
     stderr += data.toString();
   });
@@ -30501,8 +30672,8 @@ Process error: ${err.message}`;
       if (signal) signal.removeEventListener("abort", onAbort);
       const stdin = ffmpeg.stdin;
       if (stdin && !stdin.destroyed) {
-        await new Promise((resolve42) => {
-          stdin.end(() => resolve42());
+        await new Promise((resolve43) => {
+          stdin.end(() => resolve43());
         });
       }
       await exitPromise;
@@ -30546,7 +30717,7 @@ import { spawn as spawn7 } from "child_process";
 import { readFileSync as readFileSync18 } from "fs";
 import { extname as extname5 } from "path";
 function runFfprobe(args) {
-  return new Promise((resolve42, reject) => {
+  return new Promise((resolve43, reject) => {
     const proc = spawn7("ffprobe", args);
     let stdout2 = "";
     let stderr = "";
@@ -30560,7 +30731,7 @@ function runFfprobe(args) {
       if (code !== 0) {
         reject(new Error(`[FFmpeg] ffprobe exited with code ${code}: ${stderr}`));
       } else {
-        resolve42(stdout2);
+        resolve43(stdout2);
       }
     });
     proc.on("error", (err) => {
@@ -30896,9 +31067,9 @@ var init_urlDownloader = __esm({
 });
 
 // ../core/src/compiler/htmlCompiler.ts
-import { resolve as resolve12 } from "path";
+import { resolve as resolve13 } from "path";
 function resolveMediaSrc(src, projectDir) {
-  return src.startsWith("http://") || src.startsWith("https://") ? src : resolve12(projectDir, src);
+  return src.startsWith("http://") || src.startsWith("https://") ? src : resolve13(projectDir, src);
 }
 async function compileHtml(rawHtml, projectDir, probeMediaDuration) {
   const { html: staticCompiled, unresolved } = compileTimingAttrs(rawHtml);
@@ -31260,12 +31431,12 @@ var init_staticGuard = __esm({
 
 // ../core/src/compiler/htmlBundler.ts
 import { readFileSync as readFileSync19, existsSync as existsSync23 } from "fs";
-import { join as join26, resolve as resolve13, isAbsolute as isAbsolute3, sep as sep2 } from "path";
+import { join as join26, resolve as resolve14, isAbsolute as isAbsolute3, sep as sep3 } from "path";
 import { transformSync } from "esbuild";
 function safePath(projectDir, relativePath) {
-  const resolved = resolve13(projectDir, relativePath);
-  const normalizedBase = resolve13(projectDir) + sep2;
-  if (!resolved.startsWith(normalizedBase) && resolved !== resolve13(projectDir)) return null;
+  const resolved = resolve14(projectDir, relativePath);
+  const normalizedBase = resolve14(projectDir) + sep3;
+  if (!resolved.startsWith(normalizedBase) && resolved !== resolve14(projectDir)) return null;
   return resolved;
 }
 function getRuntimeScriptUrl() {
@@ -31965,7 +32136,7 @@ var init_extractionCache = __esm({
 // ../engine/src/services/videoFrameExtractor.ts
 import { spawn as spawn8 } from "child_process";
 import { existsSync as existsSync25, mkdirSync as mkdirSync15, readdirSync as readdirSync12, rmSync as rmSync5 } from "fs";
-import { isAbsolute as isAbsolute4, join as join28, posix as posix2, resolve as resolve14, sep as sep3 } from "path";
+import { isAbsolute as isAbsolute4, join as join28, posix as posix2, resolve as resolve15, sep as sep4 } from "path";
 function parseVideoElements(html) {
   const videos = [];
   const { document: document2 } = parseHTML(unwrapTemplate(html));
@@ -32060,7 +32231,7 @@ async function extractVideoFramesRange(videoPath, videoId, startTime, duration,
   args.push("-q:v", format === "jpg" ? String(Math.ceil((100 - quality) / 3)) : "0");
   if (format === "png") args.push("-compression_level", "6");
   args.push("-y", outputPattern);
-  return new Promise((resolve42, reject) => {
+  return new Promise((resolve43, reject) => {
     const ffmpeg = spawn8("ffmpeg", args);
     let stderr = "";
     const onAbort = () => {
@@ -32095,7 +32266,7 @@ async function extractVideoFramesRange(videoPath, videoId, startTime, duration,
       files.forEach((file, index) => {
         framePaths.set(index, join28(videoOutputDir, file));
       });
-      resolve42({
+      resolve43({
         videoId,
         srcPath: videoPath,
         outputDir: videoOutputDir,
@@ -32212,9 +32383,9 @@ function resolveProjectRelativeSrc(src, baseDir, compiledDir) {
   const candidates = [];
   if (fromCompiled) candidates.push(fromCompiled);
   candidates.push(fromBase);
-  const baseAbs = resolve14(baseDir);
-  const fromBaseAbs = resolve14(fromBase);
-  if (!fromBaseAbs.startsWith(baseAbs + sep3) && fromBaseAbs !== baseAbs) {
+  const baseAbs = resolve15(baseDir);
+  const fromBaseAbs = resolve15(fromBase);
+  if (!fromBaseAbs.startsWith(baseAbs + sep4) && fromBaseAbs !== baseAbs) {
     const normalized = posix2.normalize(src.replace(/\\/g, "/"));
     const stripped = normalized.replace(/^(\.\.\/)+/, "");
     if (stripped && stripped !== src && !stripped.startsWith("..")) {
@@ -33584,11 +33755,11 @@ function createFileServer(options) {
       headers: { "Content-Type": contentType }
     });
   });
-  return new Promise((resolve42) => {
+  return new Promise((resolve43) => {
     const server = serve({ fetch: app.fetch, port }, (info) => {
       const actualPort = info.port;
       const url = `http://localhost:${actualPort}`;
-      resolve42({
+      resolve43({
         url,
         port: actualPort,
         close: () => server.close()
@@ -35720,7 +35891,7 @@ var init_deterministicFonts = __esm({
 // ../producer/src/services/hyperframeRuntimeLoader.ts
 import { createHash as createHash5 } from "crypto";
 import { existsSync as existsSync31, readFileSync as readFileSync22 } from "fs";
-import { dirname as dirname10, resolve as resolve15 } from "path";
+import { dirname as dirname10, resolve as resolve16 } from "path";
 import { fileURLToPath as fileURLToPath2 } from "url";
 function resolveHyperframeManifestPath() {
   if (process.env.PRODUCER_HYPERFRAME_MANIFEST_PATH) {
@@ -35756,7 +35927,7 @@ function resolveVerifiedHyperframeRuntime() {
       `[HyperframeRuntimeLoader] Invalid manifest at ${manifestPath}; missing iife artifact or sha256.`
     );
   }
-  const runtimePath = resolve15(dirname10(manifestPath), runtimeFileName);
+  const runtimePath = resolve16(dirname10(manifestPath), runtimeFileName);
   if (!existsSync31(runtimePath)) {
     throw new Error(`[HyperframeRuntimeLoader] Missing runtime artifact at ${runtimePath}.`);
   }
@@ -35780,18 +35951,18 @@ var init_hyperframeRuntimeLoader = __esm({
   "../producer/src/services/hyperframeRuntimeLoader.ts"() {
     "use strict";
     PRODUCER_DIR = dirname10(fileURLToPath2(import.meta.url));
-    SIBLING_MANIFEST_PATH = resolve15(PRODUCER_DIR, "hyperframe.manifest.json");
-    MODULE_RELATIVE_MANIFEST_PATH = resolve15(
+    SIBLING_MANIFEST_PATH = resolve16(PRODUCER_DIR, "hyperframe.manifest.json");
+    MODULE_RELATIVE_MANIFEST_PATH = resolve16(
       PRODUCER_DIR,
       "../../../core/dist/hyperframe.manifest.json"
     );
     CWD_RELATIVE_MANIFEST_PATHS = [
       // When bundled to a single file (dist/public-server.js), the manifest
       // is copied as a sibling by build.mjs
-      resolve15(PRODUCER_DIR, "hyperframe.manifest.json"),
-      resolve15(process.cwd(), "packages/core/dist/hyperframe.manifest.json"),
-      resolve15(process.cwd(), "../core/dist/hyperframe.manifest.json"),
-      resolve15(process.cwd(), "core/dist/hyperframe.manifest.json")
+      resolve16(PRODUCER_DIR, "hyperframe.manifest.json"),
+      resolve16(process.cwd(), "packages/core/dist/hyperframe.manifest.json"),
+      resolve16(process.cwd(), "../core/dist/hyperframe.manifest.json"),
+      resolve16(process.cwd(), "core/dist/hyperframe.manifest.json")
     ];
   }
 });
@@ -35800,11 +35971,11 @@ var init_hyperframeRuntimeLoader = __esm({
 import { Hono as Hono3 } from "hono";
 import { serve as serve2 } from "@hono/node-server";
 import { readFileSync as readFileSync23, existsSync as existsSync32, realpathSync, statSync as statSync10 } from "fs";
-import { join as join34, extname as extname8, resolve as resolve16, sep as sep4 } from "path";
+import { join as join34, extname as extname8, resolve as resolve17, sep as sep5 } from "path";
 function isPathInside(child, parent, options = {}) {
   const { resolveSymlinks = false, pathModule } = options;
-  const resolveFn = pathModule?.resolve ?? resolve16;
-  const separator = pathModule?.sep ?? sep4;
+  const resolveFn = pathModule?.resolve ?? resolve17;
+  const separator = pathModule?.sep ?? sep5;
   const resolvedChild = resolveFn(child);
   const resolvedParent = resolveFn(parent);
   const normalizedChild = resolveSymlinks && existsSync32(resolvedChild) ? realpathSync.native(resolvedChild) : resolvedChild;
@@ -36009,12 +36180,15 @@ function createFileServer2(options) {
       headers: { "Content-Type": contentType }
     });
   });
-  return new Promise((resolve42) => {
+  return new Promise((resolve43) => {
     const connections = /* @__PURE__ */ new Set();
     const server = serve2({ fetch: app.fetch, port }, (info) => {
-      resolve42({
+      resolve43({
         url: `http://localhost:${info.port}`,
         port: info.port,
+        addPreHeadScript: (script) => {
+          preHeadScripts.push(script);
+        },
         close: () => {
           for (const socket of connections) socket.destroy();
           connections.clear();
@@ -36028,7 +36202,7 @@ function createFileServer2(options) {
     });
   });
 }
-var MIME_TYPES3, VIRTUAL_TIME_SHIM, RENDER_SEEK_MODE, RENDER_SEEK_DIAGNOSTICS, RENDER_SEEK_STEP, RENDER_SEEK_OFFSET_FRACTION, RENDER_MODE_SCRIPT, HF_EARLY_STUB, HF_BRIDGE_SCRIPT;
+var MIME_TYPES3, VIRTUAL_TIME_SHIM, RENDER_SEEK_MODE, RENDER_SEEK_DIAGNOSTICS, RENDER_SEEK_STEP, RENDER_SEEK_OFFSET_FRACTION, RENDER_MODE_SCRIPT, HF_EARLY_STUB, HF_PAGE_SIDE_COMPOSITING_STUB, HF_BRIDGE_SCRIPT;
 var init_fileServer2 = __esm({
   "../producer/src/services/fileServer.ts"() {
     "use strict";
@@ -36178,6 +36352,10 @@ var init_fileServer2 = __esm({
     HF_EARLY_STUB = `(function() {
   if (typeof window === "undefined") return;
   if (!window.__hf) window.__hf = {};
+})();`;
+    HF_PAGE_SIDE_COMPOSITING_STUB = `(function() {
+  if (typeof window === "undefined") return;
+  window.__HF_PAGE_SIDE_COMPOSITING__ = true;
 })();`;
     HF_BRIDGE_SCRIPT = `(function() {
   var __realSetInterval =
@@ -36342,7 +36520,7 @@ var init_paths = __esm({
 
 // ../producer/src/services/render/shared.ts
 import { copyFileSync as copyFileSync2, cpSync, existsSync as existsSync33, mkdirSync as mkdirSync19, symlinkSync, writeFileSync as writeFileSync15 } from "fs";
-import { basename as basename4, dirname as dirname11, isAbsolute as isAbsolute6, join as join36, relative as relative3, resolve as resolve17 } from "path";
+import { basename as basename4, dirname as dirname11, isAbsolute as isAbsolute6, join as join36, relative as relative3, resolve as resolve18 } from "path";
 function projectBrowserEndToCompositionTimeline(existingStart, browserStart, browserEnd) {
   return browserEnd + (existingStart - browserStart);
 }
@@ -36387,7 +36565,7 @@ function writeCompiledArtifacts(compiled, workDir, includeSummary) {
     writeFileSync15(outPath, html, "utf-8");
   }
   for (const [relativePath, absolutePath] of compiled.externalAssets) {
-    const outPath = resolve17(join36(compileDir, relativePath));
+    const outPath = resolve18(join36(compileDir, relativePath));
     if (!isPathInside2(outPath, compileDir)) {
       console.warn(`[Render] Skipping external asset with unsafe path: ${relativePath}`);
       continue;
@@ -36439,9 +36617,9 @@ function updateJobStatus(job, status, stage, progress, onProgress) {
   if (onProgress) onProgress(job, stage);
 }
 function createCompiledFrameSrcResolver(compiledDir) {
-  const compiledRoot = resolve17(compiledDir);
+  const compiledRoot = resolve18(compiledDir);
   return (framePath) => {
-    const resolvedFramePath = resolve17(framePath);
+    const resolvedFramePath = resolve18(framePath);
     if (!isPathInside2(resolvedFramePath, compiledRoot)) return null;
     const relativePath = relative3(compiledRoot, resolvedFramePath);
     if (!relativePath || relativePath.startsWith("..") || isAbsolute6(relativePath)) {
@@ -36520,7 +36698,7 @@ var init_shared = __esm({
     init_paths();
     BROWSER_MEDIA_EPSILON = 1e-4;
     materializePathModule = {
-      resolve: resolve17,
+      resolve: resolve18,
       join: join36,
       dirname: dirname11,
       basename: basename4,
@@ -37065,7 +37243,7 @@ var init_urlDownloader2 = __esm({
 
 // ../producer/src/services/htmlCompiler.ts
 import { readFileSync as readFileSync24, existsSync as existsSync34, mkdirSync as mkdirSync20 } from "fs";
-import { join as join38, dirname as dirname12, resolve as resolve18 } from "path";
+import { join as join38, dirname as dirname12, resolve as resolve19 } from "path";
 function dedupeElementsById(elements) {
   const deduped = /* @__PURE__ */ new Map();
   for (const element of elements) {
@@ -37209,7 +37387,7 @@ async function parseSubCompositions(html, projectDir, downloadDir, parentOffset
     const elEnd = elEndRaw ? parseFloat(elEndRaw) : Infinity;
     const absoluteStart = parentOffset + elStart;
     const absoluteEnd = Math.min(parentEnd, isFinite(elEnd) ? parentOffset + elEnd : Infinity);
-    const filePath = resolve18(projectDir, srcPath);
+    const filePath = resolve19(projectDir, srcPath);
     if (visited.has(filePath)) {
       continue;
     }
@@ -37401,7 +37579,7 @@ function inlineSubCompositions(html, subCompositions, projectDir) {
     if (!srcPath) continue;
     let compHtml = subCompositions.get(srcPath) || null;
     if (!compHtml) {
-      const filePath = resolve18(projectDir, srcPath);
+      const filePath = resolve19(projectDir, srcPath);
       if (existsSync34(filePath)) {
         compHtml = readFileSync24(filePath, "utf-8");
       }
@@ -37592,7 +37770,7 @@ ${safeText}
   return wrappedFragment ? document2.body.innerHTML || "" : document2.toString();
 }
 function collectExternalAssets(html, projectDir) {
-  const absProjectDir = resolve18(projectDir);
+  const absProjectDir = resolve19(projectDir);
   const externalAssets = /* @__PURE__ */ new Map();
   const CSS_URL_RE2 = /\burl\(\s*(["']?)([^)"']+)\1\s*\)/g;
   function processPath(rawPath) {
@@ -37600,7 +37778,7 @@ function collectExternalAssets(html, projectDir) {
     if (!trimmed || trimmed.startsWith("/") || trimmed.startsWith("http://") || trimmed.startsWith("https://") || trimmed.startsWith("//") || trimmed.startsWith("data:") || trimmed.startsWith("#")) {
       return null;
     }
-    const absPath = resolve18(absProjectDir, trimmed);
+    const absPath = resolve19(absProjectDir, trimmed);
     if (isPathInside2(absPath, absProjectDir)) {
       return null;
     }
@@ -37675,7 +37853,11 @@ async function compileForRender(projectDir, htmlPath, downloadDir, options = {})
   );
   const assembledHtml = await inlineExternalScripts(coalescedHtml);
   const { html: htmlWithAssets, externalAssets } = collectExternalAssets(assembledHtml, projectDir);
-  const HF_POSITION_ATTRS = ['data-hf-studio-path-offset="true"', 'data-hf-studio-rotation="true"'];
+  const HF_POSITION_ATTRS = [
+    'data-hf-studio-path-offset="true"',
+    'data-hf-studio-rotation="true"',
+    'data-hf-studio-motion="'
+  ];
   const hasPositionEdits = HF_POSITION_ATTRS.some((attr) => htmlWithAssets.includes(attr));
   const html = hasPositionEdits ? htmlWithAssets.replace(
     /<\/body>/i,
@@ -37689,7 +37871,7 @@ async function compileForRender(projectDir, htmlPath, downloadDir, options = {})
   const images = dedupeElementsById([...mainImages, ...subImages]);
   for (const video of videos) {
     if (isHttpUrl(video.src)) continue;
-    const videoPath = resolve18(projectDir, video.src);
+    const videoPath = resolve19(projectDir, video.src);
     const reencode = `ffmpeg -i "${video.src}" -c:v libx264 -r 30 -g 30 -keyint_min 30 -movflags +faststart -c:a copy output.mp4`;
     Promise.all([analyzeKeyframeIntervals(videoPath), extractMediaMetadata(videoPath)]).then(([analysis, metadata]) => {
       if (analysis.isProblematic) {
@@ -37760,6 +37942,73 @@ async function discoverMediaFromBrowser(page) {
   });
   return elements;
 }
+async function discoverVideoVisibilityFromTimeline(page, compositionDuration) {
+  if (compositionDuration <= 0) return [];
+  return page.evaluate((duration) => {
+    const results = [];
+    const videos = document.querySelectorAll("video[data-hf-auto-start]");
+    if (videos.length === 0) return results;
+    const timelines = window.__timelines;
+    if (!timelines) return results;
+    const rootEl = document.querySelector("[data-composition-id]");
+    const compId = rootEl?.getAttribute("data-composition-id");
+    if (!compId) return results;
+    const tl = timelines[compId];
+    if (!tl) return results;
+    const seekTl = (t2) => {
+      if (typeof tl.totalTime === "function") {
+        tl.totalTime(t2, true);
+      } else if (typeof tl.seek === "function") {
+        tl.seek(t2, true);
+      }
+    };
+    const SAMPLE_STEP = 0.1;
+    const BINARY_PRECISION = 1 / 60;
+    for (const videoEl of videos) {
+      const id = videoEl.id;
+      if (!id) continue;
+      const sceneEl = videoEl.closest(".scene") || videoEl;
+      let firstVisible = null;
+      let lastVisible = null;
+      for (let t2 = 0; t2 <= duration; t2 += SAMPLE_STEP) {
+        seekTl(t2);
+        const opacity = parseFloat(window.getComputedStyle(sceneEl).opacity);
+        if (opacity > 0) {
+          if (firstVisible === null) firstVisible = t2;
+          lastVisible = t2;
+        }
+      }
+      if (firstVisible === null || lastVisible === null) continue;
+      let lo = Math.max(0, firstVisible - SAMPLE_STEP);
+      let hi = firstVisible;
+      while (hi - lo > BINARY_PRECISION) {
+        const mid = (lo + hi) / 2;
+        seekTl(mid);
+        const opacity = parseFloat(window.getComputedStyle(sceneEl).opacity);
+        if (opacity > 0) hi = mid;
+        else lo = mid;
+      }
+      const exactStart = hi;
+      lo = lastVisible;
+      hi = Math.min(duration, lastVisible + SAMPLE_STEP);
+      while (hi - lo > BINARY_PRECISION) {
+        const mid = (lo + hi) / 2;
+        seekTl(mid);
+        const opacity = parseFloat(window.getComputedStyle(sceneEl).opacity);
+        if (opacity > 0) lo = mid;
+        else hi = mid;
+      }
+      const exactEnd = lo;
+      results.push({
+        videoId: id,
+        visibleStart: Math.max(0, exactStart),
+        visibleEnd: Math.min(duration, exactEnd)
+      });
+    }
+    seekTl(0);
+    return results;
+  }, compositionDuration);
+}
 async function resolveCompositionDurations(page, unresolved) {
   if (unresolved.length === 0) return [];
   const ids = unresolved.map((el) => el.id);
@@ -37951,7 +38200,8 @@ async function runProbeStage(input) {
   let probeSession = null;
   let lastBrowserConsole = [];
   const probeStart = Date.now();
-  const needsBrowser = composition.duration <= 0 || compiled.unresolvedCompositions.length > 0;
+  const hasAutoStartVideos = compiled.html.includes("data-hf-auto-start");
+  const needsBrowser = composition.duration <= 0 || compiled.unresolvedCompositions.length > 0 || hasAutoStartVideos;
   if (needsBrowser) {
     const reasons = [];
     if (composition.duration <= 0) reasons.push("root duration unknown");
@@ -38101,6 +38351,24 @@ async function runProbeStage(input) {
         }
       }
     }
+    if (composition.videos.length > 0) {
+      const visibilityWindows = await discoverVideoVisibilityFromTimeline(
+        probeSession.page,
+        composition.duration
+      );
+      assertNotAborted();
+      for (const win of visibilityWindows) {
+        const video = composition.videos.find((v2) => v2.id === win.videoId);
+        if (!video) continue;
+        if (win.visibleStart >= 0 && win.visibleEnd > win.visibleStart) {
+          video.start = win.visibleStart;
+          video.end = win.visibleEnd;
+          log2.info(
+            `[Probe] Runtime video discovery: ${video.id} visible ${win.visibleStart.toFixed(2)}s\u2013${win.visibleEnd.toFixed(2)}s`
+          );
+        }
+      }
+    }
   }
   const browserProbeMs = Date.now() - probeStart;
   const duration = composition.duration;
@@ -39423,8 +39691,8 @@ async function createShaderTransitionWorkerPool(opts) {
       if (terminated) {
         throw new Error("shader-blend pool already terminated");
       }
-      return new Promise((resolve42, reject) => {
-        const task = traceEnabled ? { req, resolve: resolve42, reject, enqueuedAtMs: Date.now(), traceId: ++nextTaskId } : { req, resolve: resolve42, reject };
+      return new Promise((resolve43, reject) => {
+        const task = traceEnabled ? { req, resolve: resolve43, reject, enqueuedAtMs: Date.now(), traceId: ++nextTaskId } : { req, resolve: resolve43, reject };
         const idle = slots.find((s2) => !s2.busy);
         if (idle) {
           queue.unshift(task);
@@ -40157,7 +40425,7 @@ import {
   copyFileSync as copyFileSync4,
   appendFileSync
 } from "fs";
-import { join as join49, dirname as dirname14, resolve as resolve19 } from "path";
+import { join as join49, dirname as dirname14, resolve as resolve20 } from "path";
 import { randomUUID as randomUUID2 } from "crypto";
 import { fileURLToPath as fileURLToPath4 } from "url";
 function sampleDirectoryBytes(dir) {
@@ -40831,7 +41099,7 @@ function extractStandaloneEntryFromIndex(indexHtml, entryFile) {
 }
 async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSignal) {
   const moduleDir = dirname14(fileURLToPath4(import.meta.url));
-  const producerRoot = process.env.PRODUCER_RENDERS_DIR ? resolve19(process.env.PRODUCER_RENDERS_DIR, "..") : resolve19(moduleDir, "../..");
+  const producerRoot = process.env.PRODUCER_RENDERS_DIR ? resolve20(process.env.PRODUCER_RENDERS_DIR, "..") : resolve20(moduleDir, "../..");
   const debugDir = join49(producerRoot, ".debug");
   const workDir = job.config.debug ? join49(debugDir, job.id) : join49(dirname14(outputPath), `work-${job.id}`);
   const pipelineStart = Date.now();
@@ -41073,7 +41341,14 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
     const videoOnlyPath = join49(workDir, `video-only${videoExt}`);
     const nativeHdrIds = /* @__PURE__ */ new Set([...nativeHdrVideoIds, ...nativeHdrImageIds]);
     const hasHdrContent = Boolean(effectiveHdr && nativeHdrIds.size > 0);
-    const useLayeredComposite = shouldUseLayeredComposite({
+    const usePageSideCompositingForTransitions = cfg.enablePageSideCompositing && compiled.hasShaderTransitions && !hasHdrContent && !isPngSequence && !needsAlpha;
+    if (usePageSideCompositingForTransitions) {
+      fileServer.addPreHeadScript(HF_PAGE_SIDE_COMPOSITING_STUB);
+      log2.info(
+        "[Render] Page-side compositing enabled \u2014 bypassing Node-side layered shader-blend path. Engine will capture one opaque RGB frame per output frame."
+      );
+    }
+    const useLayeredComposite = !usePageSideCompositingForTransitions && shouldUseLayeredComposite({
       hasHdrContent,
       hasShaderTransitions: compiled.hasShaderTransitions,
       isPngSequence
@@ -41407,7 +41682,7 @@ var init_config3 = __esm({
 
 // ../producer/src/services/hyperframeLint.ts
 import { existsSync as existsSync40, readFileSync as readFileSync27, statSync as statSync13 } from "fs";
-import { resolve as resolve20, join as join50 } from "path";
+import { resolve as resolve21, join as join50 } from "path";
 function isStringRecord(value) {
   if (!value || typeof value !== "object" || Array.isArray(value)) {
     return false;
@@ -41434,7 +41709,7 @@ function pickEntryFile(files, preferredEntryFile) {
   return null;
 }
 function readProjectEntryFile(projectDir, preferredEntryFile) {
-  const absProjectDir = resolve20(projectDir);
+  const absProjectDir = resolve21(projectDir);
   if (!existsSync40(absProjectDir) || !statSync13(absProjectDir).isDirectory()) {
     return { error: `Project directory not found: ${absProjectDir}` };
   }
@@ -41442,7 +41717,7 @@ function readProjectEntryFile(projectDir, preferredEntryFile) {
     (value) => typeof value === "string" && value.trim().length > 0
   );
   for (const entryFile of entryCandidates) {
-    const absoluteEntryPath = resolve20(absProjectDir, entryFile);
+    const absoluteEntryPath = resolve21(absProjectDir, entryFile);
     if (!absoluteEntryPath.startsWith(absProjectDir)) {
       return { error: `Entry file must stay inside project directory: ${entryFile}` };
     }
@@ -41518,10 +41793,10 @@ var init_semaphore = __esm({
           this.active++;
           return () => this.release();
         }
-        return new Promise((resolve42) => {
+        return new Promise((resolve43) => {
           this.queue.push(() => {
             this.active++;
-            resolve42(() => this.release());
+            resolve43(() => this.release());
           });
         });
       }
@@ -41552,7 +41827,7 @@ import {
   rmSync as rmSync10,
   createReadStream
 } from "fs";
-import { resolve as resolve21, dirname as dirname15, join as join51 } from "path";
+import { resolve as resolve22, dirname as dirname15, join as join51 } from "path";
 import { tmpdir as tmpdir3 } from "os";
 import { parseArgs as parseArgs2 } from "util";
 import crypto2 from "crypto";
@@ -41576,12 +41851,12 @@ async function prepareRenderBody(body) {
   const options = parseRenderOptions(body);
   const projectDir = typeof body.projectDir === "string" ? body.projectDir : void 0;
   if (projectDir) {
-    const absProjectDir = resolve21(projectDir);
+    const absProjectDir = resolve22(projectDir);
     if (!existsSync41(absProjectDir) || !statSync14(absProjectDir).isDirectory()) {
       return { error: `Project directory not found: ${absProjectDir}` };
     }
     const entry = options.entryFile || "index.html";
-    if (!existsSync41(resolve21(absProjectDir, entry))) {
+    if (!existsSync41(resolve22(absProjectDir, entry))) {
       return { error: `Entry file "${entry}" not found in project directory: ${absProjectDir}` };
     }
     return { prepared: { input: { projectDir: absProjectDir, ...options } } };
@@ -41622,7 +41897,7 @@ function resolveOutputPath(projectDir, outputCandidate, rendersDir, log2) {
   try {
     return resolveRenderPaths(projectDir, outputCandidate, rendersDir).absoluteOutputPath;
   } catch (error) {
-    const fallbackPath = resolve21(rendersDir, `producer-fallback-${Date.now()}.mp4`);
+    const fallbackPath = resolve22(rendersDir, `producer-fallback-${Date.now()}.mp4`);
     log2.warn("Failed to resolve output path, using fallback", {
       fallback: fallbackPath,
       error: error instanceof Error ? error.message : String(error)
@@ -42011,7 +42286,7 @@ var init_server = __esm({
     init_logger();
     init_semaphore();
     init_src();
-    entryScript = process.argv[1] ? resolve21(process.argv[1]) : "";
+    entryScript = process.argv[1] ? resolve22(process.argv[1]) : "";
     isPublicServerEntry = entryScript.endsWith("/public-server.js") || entryScript.endsWith("/src/server.ts");
     if (isPublicServerEntry) {
       const { values } = parseArgs2({
@@ -42138,7 +42413,7 @@ var init_runtimeEnvSnapshot = __esm({
 
 // ../producer/src/services/render/stages/freezePlan.ts
 import { existsSync as existsSync42, mkdirSync as mkdirSync26, readFileSync as readFileSync28, readdirSync as readdirSync17, writeFileSync as writeFileSync20 } from "fs";
-import { join as join52, relative as relative4, resolve as resolve22 } from "path";
+import { join as join52, relative as relative4, resolve as resolve23 } from "path";
 function stripUndefined(value) {
   if (Array.isArray(value)) return value.map(stripUndefined);
   if (value !== null && typeof value === "object") {
@@ -42155,7 +42430,7 @@ function stripUndefined(value) {
 }
 function listPlanFiles(planDir) {
   const results = [];
-  const rootResolved = resolve22(planDir);
+  const rootResolved = resolve23(planDir);
   function walk(dir) {
     const entries2 = readdirSync17(dir, { withFileTypes: true });
     for (const entry of entries2) {
@@ -42414,7 +42689,7 @@ import {
   statSync as statSync15,
   writeFileSync as writeFileSync21
 } from "fs";
-import { join as join54, relative as relative5, sep as sep5 } from "path";
+import { join as join54, relative as relative5, sep as sep6 } from "path";
 function formatBytes(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KiB`;
@@ -42601,7 +42876,7 @@ async function plan(projectDir, config, planDir) {
     filter: (src) => {
       const rel = relative5(projectDir, src);
       if (rel === "" || rel.startsWith("..")) return true;
-      const firstSegment = rel.split(sep5, 1)[0];
+      const firstSegment = rel.split(sep6, 1)[0];
       return firstSegment === void 0 || !PLAN_PROJECT_DIR_SKIP_SEGMENTS.has(firstSegment);
     }
   });
@@ -43368,7 +43643,7 @@ async function defaultRunFfmpeg(args) {
   };
 }
 function runFfprobeJson(args) {
-  return new Promise((resolve42, reject) => {
+  return new Promise((resolve43, reject) => {
     const proc = spawn9("ffprobe", args);
     let stdout2 = "";
     let stderr = "";
@@ -43391,7 +43666,7 @@ function runFfprobeJson(args) {
         return;
       }
       try {
-        resolve42(JSON.parse(stdout2));
+        resolve43(JSON.parse(stdout2));
       } catch (err) {
         reject(new Error(`Failed to parse ffprobe output: ${err.message}`));
       }
@@ -43647,18 +43922,18 @@ __export(studioServer_exports, {
 import { Hono as Hono5 } from "hono";
 import { streamSSE as streamSSE3 } from "hono/streaming";
 import { existsSync as existsSync47, readFileSync as readFileSync32, writeFileSync as writeFileSync24, statSync as statSync17 } from "fs";
-import { resolve as resolve23, join as join57, basename as basename5 } from "path";
+import { resolve as resolve24, join as join57, basename as basename5 } from "path";
 function resolveDistDir() {
   return resolveStudioBundle().dir;
 }
 function resolveStudioBundle() {
-  const builtPath = resolve23(__dirname, "studio");
-  const builtIndex = resolve23(builtPath, "index.html");
+  const builtPath = resolve24(__dirname, "studio");
+  const builtIndex = resolve24(builtPath, "index.html");
   if (existsSync47(builtIndex)) {
     return { dir: builtPath, indexPath: builtIndex, available: true, checkedPaths: [builtIndex] };
   }
-  const devPath = resolve23(__dirname, "..", "..", "..", "studio", "dist");
-  const devIndex = resolve23(devPath, "index.html");
+  const devPath = resolve24(__dirname, "..", "..", "..", "studio", "dist");
+  const devIndex = resolve24(devPath, "index.html");
   if (existsSync47(devIndex)) {
     return {
       dir: devPath,
@@ -43675,11 +43950,11 @@ function resolveStudioBundle() {
   };
 }
 function resolveRuntimePath() {
-  const builtPath = resolve23(__dirname, "hyperframe-runtime.js");
+  const builtPath = resolve24(__dirname, "hyperframe-runtime.js");
   if (existsSync47(builtPath)) return builtPath;
-  const iifePath = resolve23(__dirname, "hyperframe.runtime.iife.js");
+  const iifePath = resolve24(__dirname, "hyperframe.runtime.iife.js");
   if (existsSync47(iifePath)) return iifePath;
-  const devPath = resolve23(
+  const devPath = resolve24(
     __dirname,
     "..",
     "..",
@@ -43776,7 +44051,7 @@ function createStudioServer(options) {
       return injectDeterministicFontFaces2(html);
     },
     getProjectSignature(dir) {
-      if (resolve23(dir) !== resolve23(projectDir)) return createProjectSignature(dir);
+      if (resolve24(dir) !== resolve24(projectDir)) return createProjectSignature(dir);
       cachedProjectSignature ??= createProjectSignature(projectDir);
       return cachedProjectSignature;
     },
@@ -43813,7 +44088,8 @@ function createStudioServer(options) {
             quality: opts.quality,
             format: opts.format,
             outputResolution: opts.outputResolution,
-            ...manualEditsRenderScript ? { renderBodyScripts: [manualEditsRenderScript] } : {}
+            ...manualEditsRenderScript ? { renderBodyScripts: [manualEditsRenderScript] } : {},
+            ...opts.composition ? { entryFile: opts.composition } : {}
           });
           const startTime = Date.now();
           const onProgress = (j3) => {
@@ -43933,7 +44209,7 @@ function createStudioServer(options) {
     return api.fetch(forwardReq);
   });
   const serveStudioStaticFile = (c3) => {
-    const filePath = resolve23(studioDir, c3.req.path.slice(1));
+    const filePath = resolve24(studioDir, c3.req.path.slice(1));
     if (!existsSync47(filePath) || !statSync17(filePath).isFile()) return c3.text("not found", 404);
     const content = readFileSync32(filePath);
     return new Response(content, {
@@ -43944,7 +44220,7 @@ function createStudioServer(options) {
   app.get("/icons/*", serveStudioStaticFile);
   app.get("/favicon.svg", serveStudioStaticFile);
   app.get("*", (c3) => {
-    const indexPath = resolve23(studioDir, "index.html");
+    const indexPath = resolve24(studioDir, "index.html");
     if (!existsSync47(indexPath)) {
       return c3.html(
         `<!doctype html>
@@ -44028,14 +44304,14 @@ __export(preview_exports, {
 });
 import { spawn as spawn10 } from "child_process";
 import { existsSync as existsSync48, lstatSync as lstatSync2, symlinkSync as symlinkSync2, unlinkSync as unlinkSync5, readlinkSync, mkdirSync as mkdirSync30 } from "fs";
-import { resolve as resolve24, dirname as dirname18, basename as basename6, join as join58 } from "path";
+import { resolve as resolve25, dirname as dirname18, basename as basename6, join as join58 } from "path";
 import { fileURLToPath as fileURLToPath6 } from "url";
 import { createRequire as createRequire2 } from "module";
-async function runDevMode(dir, projectName) {
+async function runDevMode(dir, options) {
   const thisFile = fileURLToPath6(import.meta.url);
-  const repoRoot = resolve24(dirname18(thisFile), "..", "..", "..", "..");
+  const repoRoot = resolve25(dirname18(thisFile), "..", "..", "..", "..");
   const projectsDir = join58(repoRoot, "packages", "studio", "data", "projects");
-  const pName = projectName ?? basename6(dir);
+  const pName = options?.projectName ?? basename6(dir);
   const symlinkPath = join58(projectsDir, pName);
   mkdirSync30(projectsDir, { recursive: true });
   let createdSymlink = false;
@@ -44045,7 +44321,7 @@ async function runDevMode(dir, projectName) {
         const stat3 = lstatSync2(symlinkPath);
         if (stat3.isSymbolicLink()) {
           const target = readlinkSync(symlinkPath);
-          if (resolve24(target) !== resolve24(dir)) {
+          if (resolve25(target) !== resolve25(dir)) {
             unlinkSync5(symlinkPath);
           }
         }
@@ -44078,9 +44354,11 @@ async function runDevMode(dir, projectName) {
       console.log();
       console.log(`  ${c2.dim("Press Ctrl+C to stop")}`);
       console.log();
-      const urlToOpen = `${frontendUrl}#project/${pName}`;
-      import("open").then((mod) => mod.default(urlToOpen)).catch(() => {
-      });
+      if (!options?.noOpen) {
+        const urlToOpen = `${frontendUrl}#project/${pName}`;
+        import("open").then((mod) => mod.default(urlToOpen)).catch(() => {
+        });
+      }
       child.stdout?.removeListener("data", handleOutput);
       child.stderr?.removeListener("data", handleOutput);
     }
@@ -44099,8 +44377,8 @@ async function runDevMode(dir, projectName) {
       }
     });
   }
-  return new Promise((resolve42) => {
-    child.on("close", () => resolve42());
+  return new Promise((resolve43) => {
+    child.on("close", () => resolve43());
   });
 }
 function hasLocalStudio(dir) {
@@ -44112,17 +44390,17 @@ function hasLocalStudio(dir) {
     return false;
   }
 }
-async function runLocalStudioMode(dir, projectName) {
+async function runLocalStudioMode(dir, options) {
   const req = createRequire2(join58(dir, "package.json"));
   const studioPkgPath = dirname18(req.resolve("@hyperframes/studio/package.json"));
-  const pName = projectName ?? basename6(dir);
+  const pName = options?.projectName ?? basename6(dir);
   const projectsDir = join58(studioPkgPath, "data", "projects");
   const symlinkPath = join58(projectsDir, pName);
   mkdirSync30(projectsDir, { recursive: true });
   let createdSymlink = false;
   if (dir !== symlinkPath) {
     if (existsSync48(symlinkPath) && lstatSync2(symlinkPath).isSymbolicLink()) {
-      if (resolve24(readlinkSync(symlinkPath)) !== resolve24(dir)) {
+      if (resolve25(readlinkSync(symlinkPath)) !== resolve25(dir)) {
         unlinkSync5(symlinkPath);
       }
     }
@@ -44152,8 +44430,10 @@ async function runLocalStudioMode(dir, projectName) {
       console.log();
       console.log(`  ${c2.dim("Press Ctrl+C to stop")}`);
       console.log();
-      import("open").then((mod) => mod.default(`${url}#project/${pName}`)).catch(() => {
-      });
+      if (!options?.noOpen) {
+        import("open").then((mod) => mod.default(`${url}#project/${pName}`)).catch(() => {
+        });
+      }
     }
   }
   child.stdout?.on("data", handleOutput);
@@ -44170,13 +44450,13 @@ async function runLocalStudioMode(dir, projectName) {
       }
     });
   }
-  return new Promise((resolve42) => {
-    child.on("close", () => resolve42());
+  return new Promise((resolve43) => {
+    child.on("close", () => resolve43());
   });
 }
-async function runEmbeddedMode(dir, startPort, projectName, forceNew = false) {
+async function runEmbeddedMode(dir, startPort, options) {
   const { createStudioServer: createStudioServer2, resolveStudioBundle: resolveStudioBundle2 } = await Promise.resolve().then(() => (init_studioServer(), studioServer_exports));
-  const pName = projectName ?? basename6(dir);
+  const pName = options?.projectName ?? basename6(dir);
   const studioBundle = resolveStudioBundle2();
   ge(c2.bold("hyperframes preview"));
   const s2 = ft();
@@ -44197,7 +44477,7 @@ async function runEmbeddedMode(dir, startPort, projectName, forceNew = false) {
   const { app } = createStudioServer2({ projectDir: dir, projectName: pName });
   let result;
   try {
-    result = await findPortAndServe(app.fetch, startPort, dir, forceNew);
+    result = await findPortAndServe(app.fetch, startPort, dir, !!options?.forceNew);
   } catch (err) {
     s2.stop(c2.error("Failed to start studio"));
     console.error();
@@ -44217,8 +44497,10 @@ async function runEmbeddedMode(dir, startPort, projectName, forceNew = false) {
       `  ${c2.dim("Reusing existing server. Use --force-new to start a fresh instance.")}`
     );
     console.log();
-    import("open").then((mod) => mod.default(`${url2}#project/${pName}`)).catch(() => {
-    });
+    if (!options?.noOpen) {
+      import("open").then((mod) => mod.default(`${url2}#project/${pName}`)).catch(() => {
+      });
+    }
     return;
   }
   const url = `http://localhost:${result.port}`;
@@ -44236,8 +44518,10 @@ async function runEmbeddedMode(dir, startPort, projectName, forceNew = false) {
   console.log();
   console.log(`  ${c2.dim("Press Ctrl+C to stop")}`);
   console.log();
-  import("open").then((mod) => mod.default(`${url}#project/${pName}`)).catch(() => {
-  });
+  if (!options?.noOpen) {
+    import("open").then((mod) => mod.default(`${url}#project/${pName}`)).catch(() => {
+    });
+  }
   let rl;
   if (process.platform === "win32") {
     const readline = await import("readline");
@@ -44279,6 +44563,7 @@ var init_preview2 = __esm({
       ["Preview a specific project directory", "hyperframes preview ./my-video"],
       ["Use a custom port", "hyperframes preview --port 8080"],
       ["Force a new server even if one is already running", "hyperframes preview --force-new"],
+      ["Start without opening the browser", "hyperframes preview --no-open"],
       ["List all active preview servers", "hyperframes preview --list"],
       ["Kill all active preview servers", "hyperframes preview --kill-all"]
     ];
@@ -44301,6 +44586,11 @@ var init_preview2 = __esm({
           type: "boolean",
           description: "Kill all active preview servers and exit",
           default: false
+        },
+        open: {
+          type: "boolean",
+          default: true,
+          description: "Open browser automatically"
         }
       },
       async run({ args }) {
@@ -44338,7 +44628,7 @@ var init_preview2 = __esm({
           return;
         }
         const rawArg = args.dir;
-        const dir = resolve24(rawArg ?? ".");
+        const dir = resolve25(rawArg ?? ".");
         const isImplicitCwd = !rawArg || rawArg === "." || rawArg === "./";
         const projectName = isImplicitCwd ? basename6(process.env.PWD ?? dir) : basename6(dir);
         const indexPath = join58(dir, "index.html");
@@ -44351,14 +44641,15 @@ var init_preview2 = __esm({
             console.log();
           }
         }
+        const noOpen = !args.open;
         if (isDevMode()) {
-          return runDevMode(dir, projectName);
+          return runDevMode(dir, { projectName, noOpen });
         }
         if (hasLocalStudio(dir)) {
-          return runLocalStudioMode(dir, projectName);
+          return runLocalStudioMode(dir, { projectName, noOpen });
         }
         const forceNew = !!args["force-new"];
-        return runEmbeddedMode(dir, startPort, projectName, forceNew);
+        return runEmbeddedMode(dir, startPort, { projectName, forceNew, noOpen });
       }
     });
   }
@@ -44381,7 +44672,7 @@ import {
   readFileSync as readFileSync33,
   readdirSync as readdirSync21
 } from "fs";
-import { resolve as resolve25, basename as basename7, join as join59, dirname as dirname19 } from "path";
+import { resolve as resolve26, basename as basename7, join as join59, dirname as dirname19 } from "path";
 import { fileURLToPath as fileURLToPath7 } from "url";
 import { execFileSync as execFileSync5, spawn as spawn11 } from "child_process";
 function probeVideo(filePath) {
@@ -44451,8 +44742,8 @@ function transcodeToMp4(inputPath, outputPath) {
 }
 function resolveAssetDir(devSegments, builtSegments) {
   const base = dirname19(fileURLToPath7(import.meta.url));
-  const devPath = resolve25(base, ...devSegments);
-  const builtPath = resolve25(base, ...builtSegments);
+  const devPath = resolve26(base, ...devSegments);
+  const builtPath = resolve26(base, ...builtSegments);
   return existsSync49(devPath) ? devPath : builtPath;
 }
 function getStaticTemplateDir(templateId) {
@@ -44480,7 +44771,7 @@ function buildPackageScripts() {
   };
 }
 function writeDefaultPackageJson(destDir, projectName) {
-  const packageJsonPath = resolve25(destDir, "package.json");
+  const packageJsonPath = resolve26(destDir, "package.json");
   if (existsSync49(packageJsonPath)) return;
   writeFileSync25(
     packageJsonPath,
@@ -44623,7 +44914,7 @@ async function handleVideoFile(videoPath, destDir, interactive) {
       }
       if (shouldTranscode) {
         const mp4Name = localVideoName.replace(/\.[^.]+$/, ".mp4");
-        const mp4Path = resolve25(destDir, mp4Name);
+        const mp4Path = resolve26(destDir, mp4Name);
         const spin = ft();
         spin.start("Transcoding to H.264 MP4...");
         const ok = await transcodeToMp4(videoPath, mp4Path);
@@ -44632,10 +44923,10 @@ async function handleVideoFile(videoPath, destDir, interactive) {
           localVideoName = mp4Name;
         } else {
           spin.stop(c2.warn("Transcode failed \u2014 copying original file"));
-          copyFileSync5(videoPath, resolve25(destDir, localVideoName));
+          copyFileSync5(videoPath, resolve26(destDir, localVideoName));
         }
       } else {
-        copyFileSync5(videoPath, resolve25(destDir, localVideoName));
+        copyFileSync5(videoPath, resolve26(destDir, localVideoName));
       }
     } else {
       if (interactive) {
@@ -44645,10 +44936,10 @@ async function handleVideoFile(videoPath, destDir, interactive) {
         console.log(c2.warn("ffmpeg not installed \u2014 cannot transcode. Copying original."));
         console.log(c2.dim("Install: ") + c2.accent("brew install ffmpeg"));
       }
-      copyFileSync5(videoPath, resolve25(destDir, localVideoName));
+      copyFileSync5(videoPath, resolve26(destDir, localVideoName));
     }
   } else {
-    copyFileSync5(videoPath, resolve25(destDir, localVideoName));
+    copyFileSync5(videoPath, resolve26(destDir, localVideoName));
   }
   return { meta, localVideoName };
 }
@@ -44712,7 +45003,7 @@ async function scaffoldProject(destDir, name, templateId, localVideoName, durati
   if (tailwind) writeTailwindSupport(destDir);
   if (resolution) applyResolutionPreset(destDir, resolution);
   writeFileSync25(
-    resolve25(destDir, "meta.json"),
+    resolve26(destDir, "meta.json"),
     JSON.stringify(
       {
         id: name,
@@ -44724,7 +45015,7 @@ async function scaffoldProject(destDir, name, templateId, localVideoName, durati
     ),
     "utf-8"
   );
-  if (!existsSync49(resolve25(destDir, "hyperframes.json"))) {
+  if (!existsSync49(resolve26(destDir, "hyperframes.json"))) {
     const { writeProjectConfig: writeProjectConfig2, DEFAULT_PROJECT_CONFIG: DEFAULT_PROJECT_CONFIG2 } = await Promise.resolve().then(() => (init_projectConfig(), projectConfig_exports));
     writeProjectConfig2(destDir, DEFAULT_PROJECT_CONFIG2);
   }
@@ -44733,7 +45024,7 @@ async function scaffoldProject(destDir, name, templateId, localVideoName, durati
   if (existsSync49(sharedDir)) {
     for (const entry of readdirSync21(sharedDir, { withFileTypes: true })) {
       const src = join59(sharedDir, entry.name);
-      const dest = resolve25(destDir, entry.name);
+      const dest = resolve26(destDir, entry.name);
       if (entry.isFile() || entry.isSymbolicLink()) {
         copyFileSync5(src, dest);
       }
@@ -44889,7 +45180,7 @@ var init_init = __esm({
         if (!interactive) {
           const templateId2 = exampleFlag ?? "blank";
           const name2 = args.name ?? "my-video";
-          const destDir2 = resolve25(name2);
+          const destDir2 = resolve26(name2);
           if (existsSync49(destDir2) && readdirSync21(destDir2).length > 0) {
             console.error(c2.error(`Directory already exists and is not empty: ${name2}`));
             process.exit(1);
@@ -44903,7 +45194,7 @@ var init_init = __esm({
             process.exit(1);
           }
           if (videoFlag) {
-            const videoPath = resolve25(videoFlag);
+            const videoPath = resolve26(videoFlag);
             if (!existsSync49(videoPath)) {
               console.error(c2.error(`Video file not found: ${videoFlag}`));
               process.exit(1);
@@ -44917,13 +45208,13 @@ var init_init = __esm({
             );
           }
           if (audioFlag) {
-            const audioPath = resolve25(audioFlag);
+            const audioPath = resolve26(audioFlag);
             if (!existsSync49(audioPath)) {
               console.error(c2.error(`Audio file not found: ${audioFlag}`));
               process.exit(1);
             }
             sourceFilePath2 = audioPath;
-            copyFileSync5(audioPath, resolve25(destDir2, basename7(audioPath)));
+            copyFileSync5(audioPath, resolve26(destDir2, basename7(audioPath)));
             console.log(`Audio: ${basename7(audioPath)}`);
           }
           if (sourceFilePath2 && !skipTranscribe) {
@@ -44965,7 +45256,7 @@ var init_init = __esm({
             process.exit(1);
           }
           trackInitTemplate(templateId2, { tailwind });
-          const transcriptFile2 = resolve25(destDir2, "transcript.json");
+          const transcriptFile2 = resolve26(destDir2, "transcript.json");
           if (existsSync49(transcriptFile2)) {
             await patchTranscript(destDir2, transcriptFile2);
           }
@@ -45020,7 +45311,7 @@ var init_init = __esm({
           }
           name = nameResult;
         }
-        const destDir = resolve25(name);
+        const destDir = resolve26(name);
         if (existsSync49(destDir) && readdirSync21(destDir).length > 0) {
           const overwrite = await ue({
             message: `Directory ${c2.accent(name)} already exists and is not empty. Overwrite?`,
@@ -45035,7 +45326,7 @@ var init_init = __esm({
         let sourceFilePath;
         let videoDuration;
         if (videoFlag) {
-          const videoPath = resolve25(videoFlag);
+          const videoPath = resolve26(videoFlag);
           if (!existsSync49(videoPath)) {
             R2.error(`File not found: ${videoFlag}`);
             me("Setup cancelled.");
@@ -45047,7 +45338,7 @@ var init_init = __esm({
           localVideoName = result.localVideoName;
           videoDuration = result.meta.durationSeconds;
         } else if (audioFlag) {
-          const audioPath = resolve25(audioFlag);
+          const audioPath = resolve26(audioFlag);
           if (!existsSync49(audioPath)) {
             R2.error(`File not found: ${audioFlag}`);
             me("Setup cancelled.");
@@ -45055,7 +45346,7 @@ var init_init = __esm({
           }
           mkdirSync31(destDir, { recursive: true });
           sourceFilePath = audioPath;
-          copyFileSync5(audioPath, resolve25(destDir, basename7(audioPath)));
+          copyFileSync5(audioPath, resolve26(destDir, basename7(audioPath)));
           R2.info(`Audio copied to ${c2.accent(basename7(audioPath))}`);
         }
         if (sourceFilePath) {
@@ -45148,7 +45439,7 @@ ${c2.dim("Use --example blank for offline use.")}`
           process.exit(1);
         }
         trackInitTemplate(templateId, { tailwind });
-        const transcriptFile = resolve25(destDir, "transcript.json");
+        const transcriptFile = resolve26(destDir, "transcript.json");
         if (existsSync49(transcriptFile)) {
           await patchTranscript(destDir, transcriptFile);
         }
@@ -45236,7 +45527,7 @@ __export(add_exports, {
   runAdd: () => runAdd
 });
 import { existsSync as existsSync50 } from "fs";
-import { resolve as resolve26, relative as relative6 } from "path";
+import { resolve as resolve27, relative as relative6 } from "path";
 function remapTarget(item, originalTarget, paths) {
   if (item.type === "hyperframes:block") {
     const blocksDir = paths.blocks.replace(/\/+$/, "");
@@ -45259,10 +45550,10 @@ function buildSnippet(item, relativeTarget) {
   return "";
 }
 async function runAdd(opts) {
-  const projectDir = resolve26(opts.projectDir);
+  const projectDir = resolve27(opts.projectDir);
   let config = loadProjectConfig(projectDir);
   const hasConfig = existsSync50(projectConfigPath(projectDir));
-  if (!hasConfig && existsSync50(resolve26(projectDir, "index.html"))) {
+  if (!hasConfig && existsSync50(resolve27(projectDir, "index.html"))) {
     writeProjectConfig(projectDir, DEFAULT_PROJECT_CONFIG);
     config = DEFAULT_PROJECT_CONFIG;
   }
@@ -45361,7 +45652,7 @@ var init_add = __esm({
         }
       },
       async run({ args }) {
-        const projectDir = resolve26(args.dir ?? process.cwd());
+        const projectDir = resolve27(args.dir ?? process.cwd());
         const json = args.json === true;
         const skipClipboard = args["no-clipboard"] === true;
         const hasConfigBefore = existsSync50(projectConfigPath(projectDir));
@@ -45397,7 +45688,7 @@ var init_add = __esm({
             process.exit(1);
           }
           let config = loadProjectConfig(projectDir);
-          if (!existsSync50(projectConfigPath(projectDir)) && existsSync50(resolve26(projectDir, "index.html"))) {
+          if (!existsSync50(projectConfigPath(projectDir)) && existsSync50(resolve27(projectDir, "index.html"))) {
             writeProjectConfig(projectDir, DEFAULT_PROJECT_CONFIG);
             config = DEFAULT_PROJECT_CONFIG;
           }
@@ -45449,7 +45740,7 @@ __export(catalog_exports, {
   default: () => catalog_default,
   examples: () => examples4
 });
-import { resolve as resolve27 } from "path";
+import { resolve as resolve28 } from "path";
 var examples4, catalog_default;
 var init_catalog = __esm({
   "src/commands/catalog.ts"() {
@@ -45493,7 +45784,7 @@ var init_catalog = __esm({
       async run({ args }) {
         const json = args.json === true;
         const interactive = args["human-friendly"] === true;
-        const dir = resolve27(process.cwd());
+        const dir = resolve28(process.cwd());
         const config = loadProjectConfig(dir) ?? DEFAULT_PROJECT_CONFIG;
         let typeFilter;
         if (args.type === "block") typeFilter = "hyperframes:block";
@@ -45618,11 +45909,11 @@ var init_format = __esm({
 
 // src/utils/project.ts
 import { existsSync as existsSync51, statSync as statSync18 } from "fs";
-import { resolve as resolve28, basename as basename8 } from "path";
+import { resolve as resolve29, basename as basename8 } from "path";
 function resolveProject(dirArg) {
-  const dir = resolve28(dirArg ?? ".");
+  const dir = resolve29(dirArg ?? ".");
   const name = basename8(dir);
-  const indexPath = resolve28(dir, "index.html");
+  const indexPath = resolve29(dir, "index.html");
   if (!existsSync51(dir) || !statSync18(dir).isDirectory()) {
     errorBox("Not a directory: " + dir);
     process.exit(1);
@@ -45651,7 +45942,7 @@ __export(play_exports, {
   examples: () => examples5
 });
 import { existsSync as existsSync52, readFileSync as readFileSync34 } from "fs";
-import { resolve as resolve29, dirname as dirname20 } from "path";
+import { resolve as resolve30, dirname as dirname20 } from "path";
 function commandDir() {
   return dirname20(new URL(import.meta.url).pathname);
 }
@@ -45659,10 +45950,10 @@ function resolveRuntimePath2() {
   const d2 = commandDir();
   const candidates = [
     // Bundled with CLI dist
-    resolve29(d2, "hyperframe-runtime.js"),
-    resolve29(d2, "..", "hyperframe-runtime.js"),
+    resolve30(d2, "hyperframe-runtime.js"),
+    resolve30(d2, "..", "hyperframe-runtime.js"),
     // Monorepo dev: commands/ → src/ → cli/ → packages/ then into core/dist/
-    resolve29(d2, "..", "..", "..", "core", "dist", "hyperframe.runtime.iife.js")
+    resolve30(d2, "..", "..", "..", "core", "dist", "hyperframe.runtime.iife.js")
   ];
   for (const p2 of candidates) {
     if (existsSync52(p2)) return p2;
@@ -45673,10 +45964,10 @@ function resolvePlayerPath() {
   const d2 = commandDir();
   const candidates = [
     // Monorepo dev: commands/ → src/ → cli/ → packages/ then into player/dist/
-    resolve29(d2, "..", "..", "..", "player", "dist", "hyperframes-player.global.js"),
+    resolve30(d2, "..", "..", "..", "player", "dist", "hyperframes-player.global.js"),
     // Bundled with CLI dist
-    resolve29(d2, "hyperframes-player.global.js"),
-    resolve29(d2, "..", "hyperframes-player.global.js")
+    resolve30(d2, "hyperframes-player.global.js"),
+    resolve30(d2, "..", "hyperframes-player.global.js")
   ];
   for (const p2 of candidates) {
     if (existsSync52(p2)) return p2;
@@ -45739,13 +46030,19 @@ var init_play = __esm({
     examples5 = [
       ["Play the current project", "hyperframes play"],
       ["Play a specific project directory", "hyperframes play ./my-video"],
-      ["Use a custom port", "hyperframes play --port 8080"]
+      ["Use a custom port", "hyperframes play --port 8080"],
+      ["Start without opening the browser", "hyperframes play --no-open"]
     ];
     play_default = defineCommand({
       meta: { name: "play", description: "Play a composition in a lightweight browser player" },
       args: {
         dir: { type: "positional", description: "Project directory", required: false },
-        port: { type: "string", description: "Port to run the player server on", default: "3003" }
+        port: { type: "string", description: "Port to run the player server on", default: "3003" },
+        open: {
+          type: "boolean",
+          default: true,
+          description: "Open browser automatically"
+        }
       },
       async run({ args }) {
         const project = resolveProject(args.dir);
@@ -45781,7 +46078,7 @@ var init_play = __esm({
         });
         app.get("/composition/*", async (ctx) => {
           const reqPath = ctx.req.path.replace("/composition/", "");
-          const filePath = resolve29(project.dir, reqPath);
+          const filePath = resolve30(project.dir, reqPath);
           if (!filePath.startsWith(project.dir)) return ctx.text("Forbidden", 403);
           if (!existsSync52(filePath)) return ctx.text("Not found", 404);
           const content = readFileSync34(filePath, "utf-8");
@@ -45849,8 +46146,10 @@ var init_play = __esm({
         console.log();
         console.log(`  ${c2.dim("Press Ctrl+C to stop")}`);
         console.log();
-        import("open").then((mod) => mod.default(url)).catch(() => {
-        });
+        if (args.open) {
+          import("open").then((mod) => mod.default(url)).catch(() => {
+          });
+        }
         return new Promise(() => {
         });
       }
@@ -46099,7 +46398,7 @@ __export(publish_exports, {
   default: () => publish_default,
   examples: () => examples6
 });
-import { basename as basename10, resolve as resolve30 } from "path";
+import { basename as basename10, resolve as resolve31 } from "path";
 import { existsSync as existsSync53 } from "fs";
 import { join as join61 } from "path";
 var examples6, publish_default;
@@ -46133,7 +46432,7 @@ var init_publish = __esm({
       },
       async run({ args }) {
         const rawArg = args.dir;
-        const dir = resolve30(rawArg ?? ".");
+        const dir = resolve31(rawArg ?? ".");
         const isImplicitCwd = !rawArg || rawArg === "." || rawArg === "./";
         const projectName = isImplicitCwd ? basename10(process.env["PWD"] ?? dir) : basename10(dir);
         const indexPath = join61(dir, "index.html");
@@ -46260,7 +46559,8 @@ function buildDockerRunArgs(input) {
     ...options.hdrMode === "force-sdr" ? ["--sdr"] : [],
     ...options.variables && Object.keys(options.variables).length > 0 ? ["--variables", JSON.stringify(options.variables)] : [],
     ...options.entryFile ? ["--composition", options.entryFile] : [],
-    ...options.outputResolution ? ["--resolution", options.outputResolution] : []
+    ...options.outputResolution ? ["--resolution", options.outputResolution] : [],
+    ...options.pageSideCompositing === false ? ["--no-page-side-compositing"] : []
   ];
 }
 var init_dockerRunArgs = __esm({
@@ -46333,7 +46633,7 @@ __export(render_exports, {
 });
 import { mkdirSync as mkdirSync32, readdirSync as readdirSync23, readFileSync as readFileSync36, statSync as statSync20, writeFileSync as writeFileSync26, rmSync as rmSync14 } from "fs";
 import { cpus as cpus4, freemem as freemem3, tmpdir as tmpdir4 } from "os";
-import { resolve as resolve31, dirname as dirname21, join as join62, basename as basename11 } from "path";
+import { resolve as resolve32, dirname as dirname21, join as join62, basename as basename11 } from "path";
 import { execFileSync as execFileSync6, spawn as spawn12 } from "child_process";
 function formatFpsParseError(input, reason) {
   switch (reason) {
@@ -46351,7 +46651,7 @@ function formatFpsParseError(input, reason) {
       return `Got "${input}". Decimal frame rates are ambiguous \u2014 use the exact rational form instead (e.g. 30000/1001 for 29.97).`;
   }
 }
-function parseVariablesArg(inline, filePath, readFile = (p2) => readFileSync36(resolve31(p2), "utf8")) {
+function parseVariablesArg(inline, filePath, readFile = (p2) => readFileSync36(resolve32(p2), "utf8")) {
   if (inline != null && filePath != null) {
     return { ok: false, error: { kind: "conflict" } };
   }
@@ -46450,8 +46750,8 @@ function dockerImageTag(version) {
   return `${DOCKER_IMAGE_PREFIX}:${version}`;
 }
 function resolveDockerfilePath() {
-  const builtPath = resolve31(__dirname, "docker", "Dockerfile.render");
-  const devPath = resolve31(__dirname, "..", "src", "docker", "Dockerfile.render");
+  const builtPath = resolve32(__dirname, "docker", "Dockerfile.render");
+  const devPath = resolve32(__dirname, "..", "src", "docker", "Dockerfile.render");
   for (const p2 of [builtPath, devPath]) {
     try {
       statSync20(p2);
@@ -46528,8 +46828,8 @@ async function renderDocker(projectDir, outputPath, options) {
   const outputFilename = basename11(outputPath);
   const dockerArgs = buildDockerRunArgs({
     imageTag,
-    projectDir: resolve31(projectDir),
-    outputDir: resolve31(outputDir),
+    projectDir: resolve32(projectDir),
+    outputDir: resolve32(outputDir),
     outputFilename,
     options: {
       fps: options.fps,
@@ -46544,7 +46844,8 @@ async function renderDocker(projectDir, outputPath, options) {
       quiet: options.quiet,
       variables: options.variables,
       entryFile: options.entryFile,
-      outputResolution: options.outputResolution
+      outputResolution: options.outputResolution,
+      pageSideCompositing: options.pageSideCompositing
     }
   });
   if (!options.quiet) {
@@ -46868,6 +47169,11 @@ var init_render2 = __esm({
         resolution: {
           type: "string",
           description: "Output resolution preset: landscape (1920x1080), portrait (1080x1920), landscape-4k (3840x2160), portrait-4k (2160x3840), square (1080x1080), square-4k (2160x2160). Aliases: 1080p, 4k, uhd, 1080p-square, square-1080p, 4k-square. The composition is unchanged \u2014 Chrome renders at higher DPR (deviceScaleFactor) so the captured screenshot lands at the requested dimensions. Aspect ratio must match the composition; the scale must be an integer multiple. Not yet supported with --hdr."
+        },
+        "page-side-compositing": {
+          type: "boolean",
+          description: "Run shader transitions on a page-side WebGL canvas inside Chrome instead of the Node-side layered blend. ~6\xD7 faster for SDR shader-transition renders. HDR/alpha/video content auto-disables. Use --no-page-side-compositing to force the layered path.",
+          default: true
         }
       },
       async run({ args }) {
@@ -46918,6 +47224,9 @@ var init_render2 = __esm({
           }
           workers = parsed;
         }
+        if (args["page-side-compositing"] === false) {
+          process.env.HF_PAGE_SIDE_COMPOSITING = "false";
+        }
         if (args["max-concurrent-renders"] != null) {
           const parsed = parseInt(args["max-concurrent-renders"], 10);
           if (isNaN(parsed) || parsed < 1 || parsed > 10) {
@@ -46929,12 +47238,12 @@ var init_render2 = __esm({
           }
           process.env.PRODUCER_MAX_CONCURRENT_RENDERS = String(parsed);
         }
-        const rendersDir = resolve31("renders");
+        const rendersDir = resolve32("renders");
         const ext = FORMAT_EXT[format] ?? ".mp4";
         const now = /* @__PURE__ */ new Date();
         const datePart = now.toISOString().slice(0, 10);
         const timePart = now.toTimeString().slice(0, 8).replace(/:/g, "-");
-        const outputPath = args.output ? resolve31(args.output) : join62(rendersDir, `${project.name}_${datePart}_${timePart}${ext}`);
+        const outputPath = args.output ? resolve32(args.output) : join62(rendersDir, `${project.name}_${datePart}_${timePart}${ext}`);
         mkdirSync32(dirname21(outputPath), { recursive: true });
         const useDocker = args.docker ?? false;
         const useGpu = args.gpu ?? false;
@@ -46975,8 +47284,8 @@ var init_render2 = __esm({
         }
         const entryFile = args.composition?.trim().replace(/^\.\//, "") || void 0;
         if (entryFile) {
-          const absProjectDir = resolve31(project.dir);
-          const entryPath = resolve31(absProjectDir, entryFile);
+          const absProjectDir = resolve32(project.dir);
+          const entryPath = resolve32(absProjectDir, entryFile);
           if (!entryPath.startsWith(absProjectDir)) {
             errorBox(
               "Invalid composition path",
@@ -47122,6 +47431,7 @@ var init_render2 = __esm({
             variables,
             entryFile,
             outputResolution,
+            pageSideCompositing: args["page-side-compositing"] !== false,
             exitAfterComplete: true
           });
         } else {
@@ -47350,7 +47660,7 @@ var init_lint3 = __esm({
 // src/utils/staticProjectServer.ts
 import { createServer } from "http";
 import { existsSync as existsSync54, readFileSync as readFileSync37 } from "fs";
-import { isAbsolute as isAbsolute8, relative as relative8, resolve as resolve32 } from "path";
+import { isAbsolute as isAbsolute8, relative as relative8, resolve as resolve33 } from "path";
 async function serveStaticProjectHtml(projectDir, html, bindErrorMessage = "Failed to bind local HTTP server") {
   const server = createServer((req, res) => {
     const url = req.url ?? "/";
@@ -47359,7 +47669,7 @@ async function serveStaticProjectHtml(projectDir, html, bindErrorMessage = "Fail
       res.end(html);
       return;
     }
-    const filePath = resolve32(projectDir, decodeURIComponent(url).replace(/^\//, ""));
+    const filePath = resolve33(projectDir, decodeURIComponent(url).replace(/^\//, ""));
     const rel = relative8(projectDir, filePath);
     if (rel.startsWith("..") || isAbsolute8(rel)) {
       res.writeHead(403);
@@ -47597,7 +47907,7 @@ async function seekTo(page, time) {
     if (!fonts?.ready) return Promise.resolve();
     return Promise.race([
       fonts.ready.then(() => void 0),
-      new Promise((resolve42) => setTimeout(resolve42, 500))
+      new Promise((resolve43) => setTimeout(resolve43, 500))
     ]);
   }).catch(() => {
   });
@@ -47657,7 +47967,7 @@ async function runLayoutAudit(projectDir, opts) {
       if (!fonts?.ready) return Promise.resolve();
       return Promise.race([
         fonts.ready.then(() => void 0),
-        new Promise((resolve42) => setTimeout(resolve42, 750))
+        new Promise((resolve43) => setTimeout(resolve43, 750))
       ]);
     }).catch(() => {
     });
@@ -48000,7 +48310,7 @@ __export(compositions_exports, {
   parseSubComposition: () => parseSubComposition
 });
 import { existsSync as existsSync56, readFileSync as readFileSync40 } from "fs";
-import { resolve as resolve33, dirname as dirname23 } from "path";
+import { resolve as resolve34, dirname as dirname23 } from "path";
 function countRenderableDescendants(root) {
   return Array.from(root.querySelectorAll("*")).filter(
     (el) => !NON_RENDERED_TAGS.has(el.tagName.toLowerCase())
@@ -48032,7 +48342,7 @@ function parseCompositions(html, baseDir) {
     const height = parseInt(div.getAttribute("data-height") ?? "1080", 10);
     const compositionSrc = div.getAttribute("data-composition-src");
     if (compositionSrc) {
-      const subPath = resolve33(baseDir, compositionSrc);
+      const subPath = resolve34(baseDir, compositionSrc);
       if (existsSync56(subPath)) {
         const subHtml = readFileSync40(subPath, "utf-8");
         const subInfo = parseSubComposition(subHtml, id, width, height);
@@ -48176,7 +48486,7 @@ __export(benchmark_exports, {
   examples: () => examples13
 });
 import { existsSync as existsSync57, statSync as statSync22 } from "fs";
-import { resolve as resolve34, join as join65 } from "path";
+import { resolve as resolve35, join as join65 } from "path";
 var examples13, FPS_30, FPS_60, DEFAULT_CONFIGS, benchmark_default;
 var init_benchmark = __esm({
   "src/commands/benchmark.ts"() {
@@ -48221,7 +48531,7 @@ var init_benchmark = __esm({
           process.exit(1);
         }
         const jsonOutput = args.json ?? false;
-        const benchDir = resolve34("renders", ".benchmark");
+        const benchDir = resolve35("renders", ".benchmark");
         let producer = null;
         try {
           producer = await loadProducer();
@@ -48977,12 +49287,12 @@ async function runPipeline(options, session, media, format, bgFormat) {
         const drains = [];
         if (!fgWroteFully) {
           drains.push(
-            new Promise((resolve42) => fg.proc.stdin.once("drain", () => resolve42()))
+            new Promise((resolve43) => fg.proc.stdin.once("drain", () => resolve43()))
           );
         }
         if (!bgWroteFully && bg) {
           drains.push(
-            new Promise((resolve42) => bg.proc.stdin.once("drain", () => resolve42()))
+            new Promise((resolve43) => bg.proc.stdin.once("drain", () => resolve43()))
           );
         }
         await Promise.all(drains);
@@ -49015,11 +49325,11 @@ ${decoder.getStderr().slice(-400)}`
   return processed;
 }
 function waitForExit(proc, label2, getStderr) {
-  return new Promise((resolve42, reject) => {
+  return new Promise((resolve43, reject) => {
     proc.on("error", reject);
     proc.on("exit", (code, signal) => {
       if (code === 0 && !signal) {
-        resolve42();
+        resolve43();
         return;
       }
       const cause = signal ? `killed by ${signal}` : `exited with code ${code}`;
@@ -49053,7 +49363,7 @@ __export(remove_background_exports, {
   default: () => remove_background_default,
   examples: () => examples15
 });
-import { resolve as resolve35 } from "path";
+import { resolve as resolve36 } from "path";
 import { existsSync as existsSync59 } from "fs";
 async function showInfo(json) {
   const { selectProviders: selectProviders2, listAvailableProviders: listAvailableProviders2, DEFAULT_MODEL: DEFAULT_MODEL4, MODEL_MEMORY_MB: MODEL_MEMORY_MB2, modelPath: modelPath2 } = await Promise.resolve().then(() => (init_manager3(), manager_exports3));
@@ -49195,10 +49505,10 @@ var init_remove_background = __esm({
           );
           process.exit(1);
         }
-        const inputPath = resolve35(args.input);
-        const outputPath = resolve35(args.output);
+        const inputPath = resolve36(args.input);
+        const outputPath = resolve36(args.output);
         const backgroundOutputArg = args["background-output"];
-        const backgroundOutputPath = backgroundOutputArg ? resolve35(backgroundOutputArg) : void 0;
+        const backgroundOutputPath = backgroundOutputArg ? resolve36(backgroundOutputArg) : void 0;
         const { render: render3 } = await Promise.resolve().then(() => (init_pipeline(), pipeline_exports));
         const spin = args.json ? null : ft();
         spin?.start("Preparing background-removal pipeline...");
@@ -49267,7 +49577,7 @@ __export(transcribe_exports2, {
   examples: () => examples16
 });
 import { existsSync as existsSync60, writeFileSync as writeFileSync27 } from "fs";
-import { resolve as resolve36, join as join67, extname as extname11 } from "path";
+import { resolve as resolve37, join as join67, extname as extname11 } from "path";
 async function importTranscript(inputPath, dir, json) {
   const { loadTranscript: loadTranscript2, patchCaptionHtml: patchCaptionHtml2 } = await Promise.resolve().then(() => (init_normalize(), normalize_exports));
   const { words, format } = loadTranscript2(inputPath);
@@ -49391,12 +49701,12 @@ var init_transcribe2 = __esm({
         }
       },
       async run({ args }) {
-        const inputPath = resolve36(args.input);
+        const inputPath = resolve37(args.input);
         if (!existsSync60(inputPath)) {
           console.error(c2.error(`File not found: ${args.input}`));
           process.exit(1);
         }
-        const dir = resolve36(args.dir ?? ".");
+        const dir = resolve37(args.dir ?? ".");
         const ext = extname11(inputPath).toLowerCase();
         const isImport = ext === ".json" || ext === ".srt" || ext === ".vtt";
         if (isImport) {
@@ -49686,7 +49996,7 @@ __export(tts_exports, {
   examples: () => examples17
 });
 import { existsSync as existsSync63, readFileSync as readFileSync41 } from "fs";
-import { resolve as resolve37, extname as extname12 } from "path";
+import { resolve as resolve38, extname as extname12 } from "path";
 function listVoices(json) {
   const rows = BUNDLED_VOICES.map((v2) => ({ ...v2, defaultLang: inferLangFromVoiceId(v2.id) }));
   if (json) {
@@ -49794,7 +50104,7 @@ var init_tts = __esm({
           process.exit(1);
         }
         let text;
-        const maybeFile = resolve37(args.input);
+        const maybeFile = resolve38(args.input);
         if (existsSync63(maybeFile) && extname12(maybeFile).toLowerCase() === ".txt") {
           text = readFileSync41(maybeFile, "utf-8").trim();
           if (!text) {
@@ -49808,7 +50118,7 @@ var init_tts = __esm({
           console.error(c2.error("No text provided."));
           process.exit(1);
         }
-        const output = resolve37(args.output ?? "speech.wav");
+        const output = resolve38(args.output ?? "speech.wav");
         const voice = args.voice ?? DEFAULT_VOICE;
         const speed = args.speed ? parseFloat(args.speed) : 1;
         if (isNaN(speed) || speed <= 0 || speed > 3) {
@@ -49889,13 +50199,13 @@ __export(docs_exports, {
   examples: () => examples18
 });
 import { readFileSync as readFileSync42, existsSync as existsSync64 } from "fs";
-import { resolve as resolve38, dirname as dirname25, join as join70 } from "path";
+import { resolve as resolve39, dirname as dirname25, join as join70 } from "path";
 import { fileURLToPath as fileURLToPath9 } from "url";
 function docsDir() {
   const thisFile = fileURLToPath9(import.meta.url);
   const dir = dirname25(thisFile);
-  const devPath = resolve38(dir, "..", "docs");
-  const builtPath = resolve38(dir, "docs");
+  const devPath = resolve39(dir, "..", "docs");
+  const builtPath = resolve39(dir, "docs");
   return existsSync64(devPath) ? devPath : builtPath;
 }
 function formatInlineCode(line) {
@@ -50261,7 +50571,7 @@ __export(upgrade_exports, {
   default: () => upgrade_default,
   examples: () => examples20
 });
-import { execSync as execSync4 } from "child_process";
+import { execFileSync as execFileSync8 } from "child_process";
 var examples20, upgrade_default;
 var init_upgrade = __esm({
   "src/commands/upgrade.ts"() {
@@ -50319,13 +50629,20 @@ var init_upgrade = __esm({
             return;
           }
         }
-        const installCmd = `npm install -g hyperframes@${result.latest}`;
+        const SAFE_VERSION = /^[0-9]+\.[0-9]+\.[0-9]+(?:-[0-9A-Za-z.-]+)?(?:\+[0-9A-Za-z.-]+)?$/;
+        if (!SAFE_VERSION.test(result.latest)) {
+          ye(c2.dim("Refusing to install: unexpected version string from npm registry."));
+          process.exitCode = 1;
+          return;
+        }
+        const installArgs = ["install", "-g", `hyperframes@${result.latest}`];
+        const installCmd = `npm ${installArgs.join(" ")}`;
         if (autoYes) {
           console.log();
           console.log(`   ${c2.dim("Running:")} ${c2.accent(installCmd)}`);
           console.log();
           try {
-            execSync4(installCmd, { stdio: "inherit" });
+            execFileSync8("npm", installArgs, { stdio: "inherit", shell: false });
             ye(c2.success(`Upgraded to v${result.latest}`));
           } catch {
             ye(c2.dim("Install failed. Try running manually:"));
@@ -50760,7 +51077,7 @@ __export(snapshot_exports, {
 import { spawn as spawn14 } from "child_process";
 import { existsSync as existsSync66, mkdtempSync as mkdtempSync3, readFileSync as readFileSync44, mkdirSync as mkdirSync36, rmSync as rmSync15 } from "fs";
 import { tmpdir as tmpdir5 } from "os";
-import { resolve as resolve39, join as join72, relative as relative9, isAbsolute as isAbsolute9 } from "path";
+import { resolve as resolve40, join as join72, relative as relative9, isAbsolute as isAbsolute9 } from "path";
 async function extractVideoFrameToBuffer(videoPath, timeSeconds, useVp9AlphaDecoder = false) {
   const tmp = mkdtempSync3(join72(tmpdir5(), "hf-snapshot-frame-"));
   const outPath = join72(tmp, "frame.png");
@@ -50949,7 +51266,7 @@ async function captureSnapshots(projectDir, opts) {
             try {
               const url = new URL(v2.src);
               const decodedPath = decodeURIComponent(url.pathname).replace(/^\//, "");
-              const candidate = resolve39(projectDir, decodedPath);
+              const candidate = resolve40(projectDir, decodedPath);
               const rel = relative9(projectDir, candidate);
               if (!rel.startsWith("..") && !isAbsolute9(rel) && existsSync66(candidate)) {
                 filePath = candidate;
@@ -51445,7 +51762,7 @@ async function extractHtml(page, opts = {}) {
     (_match, pre, urls, post) => {
       const fixed = urls.replace(/&amp;/g, "&").replace(
         /(^|,\s*)(\/[^\s,]+)/g,
-        (_m, sep6, path2) => sep6 + pageOrigin + path2
+        (_m, sep7, path2) => sep7 + pageOrigin + path2
       );
       return pre + fixed + post;
     }
@@ -52542,7 +52859,7 @@ var require_p_retry = __commonJS({
       return error;
     };
     var isNetworkError = (errorMessage) => networkErrorMsgs.includes(errorMessage);
-    var pRetry2 = (input, options) => new Promise((resolve42, reject) => {
+    var pRetry2 = (input, options) => new Promise((resolve43, reject) => {
       options = {
         onFailedAttempt: () => {
         },
@@ -52552,7 +52869,7 @@ var require_p_retry = __commonJS({
       const operation = retry.operation(options);
       operation.attempt(async (attemptNumber) => {
         try {
-          resolve42(await input(attemptNumber));
+          resolve43(await input(attemptNumber));
         } catch (error) {
           if (!(error instanceof Error)) {
             reject(new TypeError(`Non-error was thrown: "${error}". You should only throw errors.`));
@@ -53088,8 +53405,8 @@ var require_retry3 = __commonJS({
       }
       const delay = getNextRetryDelay(config);
       err.config.retryConfig.currentRetryAttempt += 1;
-      const backoff = config.retryBackoff ? config.retryBackoff(err, delay) : new Promise((resolve42) => {
-        setTimeout(resolve42, delay);
+      const backoff = config.retryBackoff ? config.retryBackoff(err, delay) : new Promise((resolve43) => {
+        setTimeout(resolve43, delay);
       });
       if (config.onRetryAttempt) {
         await config.onRetryAttempt(err);
@@ -53997,8 +54314,8 @@ var require_helpers = __commonJS({
     function req(url, opts = {}) {
       const href = typeof url === "string" ? url : url.href;
       const req2 = (href.startsWith("https:") ? https2 : http4).request(url, opts);
-      const promise = new Promise((resolve42, reject) => {
-        req2.once("response", resolve42).once("error", reject).end();
+      const promise = new Promise((resolve43, reject) => {
+        req2.once("response", resolve43).once("error", reject).end();
       });
       req2.then = promise.then.bind(promise);
       return req2;
@@ -54175,7 +54492,7 @@ var require_parse_proxy_response = __commonJS({
     var debug_1 = __importDefault(require_src2());
     var debug = (0, debug_1.default)("https-proxy-agent:parse-proxy-response");
     function parseProxyResponse(socket) {
-      return new Promise((resolve42, reject) => {
+      return new Promise((resolve43, reject) => {
         let buffersLength = 0;
         const buffers = [];
         function read() {
@@ -54241,7 +54558,7 @@ var require_parse_proxy_response = __commonJS({
           }
           debug("got proxy server response: %o %o", firstLine, headers);
           cleanup();
-          resolve42({
+          resolve43({
             connect: {
               statusCode,
               statusText,
@@ -54485,7 +54802,7 @@ var require_ponyfill_es2018 = __commonJS({
         return new originalPromise(executor);
       }
       function promiseResolvedWith(value) {
-        return newPromise((resolve42) => resolve42(value));
+        return newPromise((resolve43) => resolve43(value));
       }
       function promiseRejectedWith(reason) {
         return originalPromiseReject(reason);
@@ -54655,8 +54972,8 @@ var require_ponyfill_es2018 = __commonJS({
         return new TypeError("Cannot " + name + " a stream using a released reader");
       }
       function defaultReaderClosedPromiseInitialize(reader) {
-        reader._closedPromise = newPromise((resolve42, reject) => {
-          reader._closedPromise_resolve = resolve42;
+        reader._closedPromise = newPromise((resolve43, reject) => {
+          reader._closedPromise_resolve = resolve43;
           reader._closedPromise_reject = reject;
         });
       }
@@ -54830,8 +55147,8 @@ var require_ponyfill_es2018 = __commonJS({
           }
           let resolvePromise;
           let rejectPromise;
-          const promise = newPromise((resolve42, reject) => {
-            resolvePromise = resolve42;
+          const promise = newPromise((resolve43, reject) => {
+            resolvePromise = resolve43;
             rejectPromise = reject;
           });
           const readRequest = {
@@ -54936,8 +55253,8 @@ var require_ponyfill_es2018 = __commonJS({
           const reader = this._reader;
           let resolvePromise;
           let rejectPromise;
-          const promise = newPromise((resolve42, reject) => {
-            resolvePromise = resolve42;
+          const promise = newPromise((resolve43, reject) => {
+            resolvePromise = resolve43;
             rejectPromise = reject;
           });
           const readRequest = {
@@ -55956,8 +56273,8 @@ var require_ponyfill_es2018 = __commonJS({
           }
           let resolvePromise;
           let rejectPromise;
-          const promise = newPromise((resolve42, reject) => {
-            resolvePromise = resolve42;
+          const promise = newPromise((resolve43, reject) => {
+            resolvePromise = resolve43;
             rejectPromise = reject;
           });
           const readIntoRequest = {
@@ -56269,10 +56586,10 @@ var require_ponyfill_es2018 = __commonJS({
           wasAlreadyErroring = true;
           reason = void 0;
         }
-        const promise = newPromise((resolve42, reject) => {
+        const promise = newPromise((resolve43, reject) => {
           stream._pendingAbortRequest = {
             _promise: void 0,
-            _resolve: resolve42,
+            _resolve: resolve43,
             _reject: reject,
             _reason: reason,
             _wasAlreadyErroring: wasAlreadyErroring
@@ -56289,9 +56606,9 @@ var require_ponyfill_es2018 = __commonJS({
         if (state === "closed" || state === "errored") {
           return promiseRejectedWith(new TypeError(`The stream (in ${state} state) is not in the writable state and cannot be closed`));
         }
-        const promise = newPromise((resolve42, reject) => {
+        const promise = newPromise((resolve43, reject) => {
           const closeRequest = {
-            _resolve: resolve42,
+            _resolve: resolve43,
             _reject: reject
           };
           stream._closeRequest = closeRequest;
@@ -56304,9 +56621,9 @@ var require_ponyfill_es2018 = __commonJS({
         return promise;
       }
       function WritableStreamAddWriteRequest(stream) {
-        const promise = newPromise((resolve42, reject) => {
+        const promise = newPromise((resolve43, reject) => {
           const writeRequest = {
-            _resolve: resolve42,
+            _resolve: resolve43,
             _reject: reject
           };
           stream._writeRequests.push(writeRequest);
@@ -56922,8 +57239,8 @@ var require_ponyfill_es2018 = __commonJS({
         return new TypeError("Cannot " + name + " a stream using a released writer");
       }
       function defaultWriterClosedPromiseInitialize(writer) {
-        writer._closedPromise = newPromise((resolve42, reject) => {
-          writer._closedPromise_resolve = resolve42;
+        writer._closedPromise = newPromise((resolve43, reject) => {
+          writer._closedPromise_resolve = resolve43;
           writer._closedPromise_reject = reject;
           writer._closedPromiseState = "pending";
         });
@@ -56959,8 +57276,8 @@ var require_ponyfill_es2018 = __commonJS({
         writer._closedPromiseState = "resolved";
       }
       function defaultWriterReadyPromiseInitialize(writer) {
-        writer._readyPromise = newPromise((resolve42, reject) => {
-          writer._readyPromise_resolve = resolve42;
+        writer._readyPromise = newPromise((resolve43, reject) => {
+          writer._readyPromise_resolve = resolve43;
           writer._readyPromise_reject = reject;
         });
         writer._readyPromiseState = "pending";
@@ -57047,7 +57364,7 @@ var require_ponyfill_es2018 = __commonJS({
         source._disturbed = true;
         let shuttingDown = false;
         let currentWrite = promiseResolvedWith(void 0);
-        return newPromise((resolve42, reject) => {
+        return newPromise((resolve43, reject) => {
           let abortAlgorithm;
           if (signal !== void 0) {
             abortAlgorithm = () => {
@@ -57192,7 +57509,7 @@ var require_ponyfill_es2018 = __commonJS({
             if (isError) {
               reject(error);
             } else {
-              resolve42(void 0);
+              resolve43(void 0);
             }
             return null;
           }
@@ -57473,8 +57790,8 @@ var require_ponyfill_es2018 = __commonJS({
         let branch1;
         let branch2;
         let resolveCancelPromise;
-        const cancelPromise = newPromise((resolve42) => {
-          resolveCancelPromise = resolve42;
+        const cancelPromise = newPromise((resolve43) => {
+          resolveCancelPromise = resolve43;
         });
         function pullAlgorithm() {
           if (reading) {
@@ -57565,8 +57882,8 @@ var require_ponyfill_es2018 = __commonJS({
         let branch1;
         let branch2;
         let resolveCancelPromise;
-        const cancelPromise = newPromise((resolve42) => {
-          resolveCancelPromise = resolve42;
+        const cancelPromise = newPromise((resolve43) => {
+          resolveCancelPromise = resolve43;
         });
         function forwardReaderError(thisReader) {
           uponRejection(thisReader._closedPromise, (r2) => {
@@ -58346,8 +58663,8 @@ var require_ponyfill_es2018 = __commonJS({
           const writableHighWaterMark = ExtractHighWaterMark(writableStrategy, 1);
           const writableSizeAlgorithm = ExtractSizeAlgorithm(writableStrategy);
           let startPromise_resolve;
-          const startPromise = newPromise((resolve42) => {
-            startPromise_resolve = resolve42;
+          const startPromise = newPromise((resolve43) => {
+            startPromise_resolve = resolve43;
           });
           InitializeTransformStream(this, startPromise, writableHighWaterMark, writableSizeAlgorithm, readableHighWaterMark, readableSizeAlgorithm);
           SetUpTransformStreamDefaultControllerFromTransformer(this, transformer);
@@ -58440,8 +58757,8 @@ var require_ponyfill_es2018 = __commonJS({
         if (stream._backpressureChangePromise !== void 0) {
           stream._backpressureChangePromise_resolve();
         }
-        stream._backpressureChangePromise = newPromise((resolve42) => {
-          stream._backpressureChangePromise_resolve = resolve42;
+        stream._backpressureChangePromise = newPromise((resolve43) => {
+          stream._backpressureChangePromise_resolve = resolve43;
         });
         stream._backpressure = backpressure;
       }
@@ -58609,8 +58926,8 @@ var require_ponyfill_es2018 = __commonJS({
           return controller._finishPromise;
         }
         const readable = stream._readable;
-        controller._finishPromise = newPromise((resolve42, reject) => {
-          controller._finishPromise_resolve = resolve42;
+        controller._finishPromise = newPromise((resolve43, reject) => {
+          controller._finishPromise_resolve = resolve43;
           controller._finishPromise_reject = reject;
         });
         const cancelPromise = controller._cancelAlgorithm(reason);
@@ -58636,8 +58953,8 @@ var require_ponyfill_es2018 = __commonJS({
           return controller._finishPromise;
         }
         const readable = stream._readable;
-        controller._finishPromise = newPromise((resolve42, reject) => {
-          controller._finishPromise_resolve = resolve42;
+        controller._finishPromise = newPromise((resolve43, reject) => {
+          controller._finishPromise_resolve = resolve43;
           controller._finishPromise_reject = reject;
         });
         const flushPromise = controller._flushAlgorithm();
@@ -58667,8 +58984,8 @@ var require_ponyfill_es2018 = __commonJS({
           return controller._finishPromise;
         }
         const writable = stream._writable;
-        controller._finishPromise = newPromise((resolve42, reject) => {
-          controller._finishPromise_resolve = resolve42;
+        controller._finishPromise = newPromise((resolve43, reject) => {
+          controller._finishPromise_resolve = resolve43;
           controller._finishPromise_reject = reject;
         });
         const cancelPromise = controller._cancelAlgorithm(reason);
@@ -60637,7 +60954,7 @@ import zlib from "zlib";
 import Stream2, { PassThrough as PassThrough2, pipeline as pump } from "stream";
 import { Buffer as Buffer3 } from "buffer";
 async function fetch3(url, options_) {
-  return new Promise((resolve42, reject) => {
+  return new Promise((resolve43, reject) => {
     const request = new Request2(url, options_);
     const { parsedURL, options } = getNodeRequestOptions(request);
     if (!supportedSchemas.has(parsedURL.protocol)) {
@@ -60646,7 +60963,7 @@ async function fetch3(url, options_) {
     if (parsedURL.protocol === "data:") {
       const data = dist_default3(request.url);
       const response2 = new Response2(data, { headers: { "Content-Type": data.typeFull } });
-      resolve42(response2);
+      resolve43(response2);
       return;
     }
     const send = (parsedURL.protocol === "https:" ? https : http3).request;
@@ -60768,7 +61085,7 @@ async function fetch3(url, options_) {
             if (responseReferrerPolicy) {
               requestOptions.referrerPolicy = responseReferrerPolicy;
             }
-            resolve42(fetch3(new Request2(locationURL, requestOptions)));
+            resolve43(fetch3(new Request2(locationURL, requestOptions)));
             finalize();
             return;
           }
@@ -60801,7 +61118,7 @@ async function fetch3(url, options_) {
       const codings = headers.get("Content-Encoding");
       if (!request.compress || request.method === "HEAD" || codings === null || response_.statusCode === 204 || response_.statusCode === 304) {
         response = new Response2(body, responseOptions);
-        resolve42(response);
+        resolve43(response);
         return;
       }
       const zlibOptions = {
@@ -60815,7 +61132,7 @@ async function fetch3(url, options_) {
           }
         });
         response = new Response2(body, responseOptions);
-        resolve42(response);
+        resolve43(response);
         return;
       }
       if (codings === "deflate" || codings === "x-deflate") {
@@ -60839,12 +61156,12 @@ async function fetch3(url, options_) {
             });
           }
           response = new Response2(body, responseOptions);
-          resolve42(response);
+          resolve43(response);
         });
         raw.once("end", () => {
           if (!response) {
             response = new Response2(body, responseOptions);
-            resolve42(response);
+            resolve43(response);
           }
         });
         return;
@@ -60856,11 +61173,11 @@ async function fetch3(url, options_) {
           }
         });
         response = new Response2(body, responseOptions);
-        resolve42(response);
+        resolve43(response);
         return;
       }
       response = new Response2(body, responseOptions);
-      resolve42(response);
+      resolve43(response);
     });
     writeToStream(request_, request).catch(reject);
   });
@@ -66942,7 +67259,7 @@ var require_jwtaccess = __commonJS({
         }
       }
       fromStreamAsync(inputStream) {
-        return new Promise((resolve42, reject) => {
+        return new Promise((resolve43, reject) => {
           if (!inputStream) {
             reject(new Error("Must pass in a stream containing the service account auth settings."));
           }
@@ -66951,7 +67268,7 @@ var require_jwtaccess = __commonJS({
             try {
               const data = JSON.parse(s2);
               this.fromJSON(data);
-              resolve42();
+              resolve43();
             } catch (err) {
               reject(err);
             }
@@ -67190,7 +67507,7 @@ var require_jwtclient = __commonJS({
         }
       }
       fromStreamAsync(inputStream) {
-        return new Promise((resolve42, reject) => {
+        return new Promise((resolve43, reject) => {
           if (!inputStream) {
             throw new Error("Must pass in a stream containing the service account auth settings.");
           }
@@ -67199,7 +67516,7 @@ var require_jwtclient = __commonJS({
             try {
               const data = JSON.parse(s2);
               this.fromJSON(data);
-              resolve42();
+              resolve43();
             } catch (e3) {
               reject(e3);
             }
@@ -67332,7 +67649,7 @@ var require_refreshclient = __commonJS({
         }
       }
       async fromStreamAsync(inputStream) {
-        return new Promise((resolve42, reject) => {
+        return new Promise((resolve43, reject) => {
           if (!inputStream) {
             return reject(new Error("Must pass in a stream containing the user refresh token."));
           }
@@ -67341,7 +67658,7 @@ var require_refreshclient = __commonJS({
             try {
               const data = JSON.parse(s2);
               this.fromJSON(data);
-              return resolve42();
+              return resolve43();
             } catch (err) {
               return reject(err);
             }
@@ -69174,7 +69491,7 @@ var require_pluggable_auth_handler = __commonJS({
        * @return A promise that resolves with the executable response.
        */
       retrieveResponseFromExecutable(envMap) {
-        return new Promise((resolve42, reject) => {
+        return new Promise((resolve43, reject) => {
           const child = childProcess.spawn(this.commandComponents[0], this.commandComponents.slice(1), {
             env: { ...process.env, ...Object.fromEntries(envMap) }
           });
@@ -69196,7 +69513,7 @@ var require_pluggable_auth_handler = __commonJS({
               try {
                 const responseJson = JSON.parse(output);
                 const response = new executable_response_1.ExecutableResponse(responseJson);
-                return resolve42(response);
+                return resolve43(response);
               } catch (error) {
                 if (error instanceof executable_response_1.ExecutableResponseError) {
                   return reject(error);
@@ -70099,7 +70416,7 @@ var require_googleauth = __commonJS({
         }
       }
       fromStreamAsync(inputStream, options) {
-        return new Promise((resolve42, reject) => {
+        return new Promise((resolve43, reject) => {
           if (!inputStream) {
             throw new Error("Must pass in a stream containing the Google auth settings.");
           }
@@ -70109,7 +70426,7 @@ var require_googleauth = __commonJS({
               try {
                 const data = JSON.parse(chunks.join(""));
                 const r2 = this._cacheClientFromJSON(data, options);
-                return resolve42(r2);
+                return resolve43(r2);
               } catch (err) {
                 if (!this.keyFilename)
                   throw err;
@@ -70119,7 +70436,7 @@ var require_googleauth = __commonJS({
                 });
                 this.cachedCredential = client;
                 this.setGapicJWTValues(client);
-                return resolve42(client);
+                return resolve43(client);
               }
             } catch (err) {
               return reject(err);
@@ -70155,17 +70472,17 @@ var require_googleauth = __commonJS({
        * Run the Google Cloud SDK command that prints the default project ID
        */
       async getDefaultServiceProjectId() {
-        return new Promise((resolve42) => {
+        return new Promise((resolve43) => {
           (0, child_process_1.exec)("gcloud config config-helper --format json", (err, stdout2) => {
             if (!err && stdout2) {
               try {
                 const projectId = JSON.parse(stdout2).configuration.properties.core.project;
-                resolve42(projectId);
+                resolve43(projectId);
                 return;
               } catch (e3) {
               }
             }
-            resolve42(null);
+            resolve43(null);
           });
         });
       }
@@ -78008,14 +78325,14 @@ function __asyncValues(o) {
   }, i2);
   function verb(n) {
     i2[n] = o[n] && function(v2) {
-      return new Promise(function(resolve42, reject) {
-        v2 = o[n](v2), settle(resolve42, reject, v2.done, v2.value);
+      return new Promise(function(resolve43, reject) {
+        v2 = o[n](v2), settle(resolve43, reject, v2.done, v2.value);
       });
     };
   }
-  function settle(resolve42, reject, d2, v2) {
+  function settle(resolve43, reject, d2, v2) {
     Promise.resolve(v2).then(function(v3) {
-      resolve42({ value: v3, done: d2 });
+      resolve43({ value: v3, done: d2 });
     }, reject);
   }
 }
@@ -88505,8 +88822,8 @@ var init_node4 = __esm({
         const url = `${websocketBaseUrl}/ws/google.ai.generativelanguage.${apiVersion}.GenerativeService.BidiGenerateMusic?key=${apiKey}`;
         let onopenResolve = () => {
         };
-        const onopenPromise = new Promise((resolve42) => {
-          onopenResolve = resolve42;
+        const onopenPromise = new Promise((resolve43) => {
+          onopenResolve = resolve43;
         });
         const callbacks = params.callbacks;
         const onopenAwaitedCallback = function() {
@@ -88712,8 +89029,8 @@ var init_node4 = __esm({
         }
         let onopenResolve = () => {
         };
-        const onopenPromise = new Promise((resolve42) => {
-          onopenResolve = resolve42;
+        const onopenPromise = new Promise((resolve43) => {
+          onopenResolve = resolve43;
         });
         const callbacks = params.callbacks;
         const onopenAwaitedCallback = function() {
@@ -91061,7 +91378,7 @@ var init_node4 = __esm({
         return void 0;
       }
     };
-    sleep$1 = (ms) => new Promise((resolve42) => setTimeout(resolve42, ms));
+    sleep$1 = (ms) => new Promise((resolve43) => setTimeout(resolve43, ms));
     FallbackEncoder = ({ headers, body }) => {
       return {
         bodyHeaders: {
@@ -91570,8 +91887,8 @@ ${underline2}`);
     };
     APIPromise = class _APIPromise extends Promise {
       constructor(client, responsePromise, parseResponse = defaultParseResponse) {
-        super((resolve42) => {
-          resolve42(null);
+        super((resolve43) => {
+          resolve43(null);
         });
         this.responsePromise = responsePromise;
         this.parseResponse = parseResponse;
@@ -93106,12 +93423,12 @@ var init_agentPromptGenerator = __esm({
 
 // src/capture/scaffolding.ts
 import { existsSync as existsSync67, writeFileSync as writeFileSync32, readFileSync as readFileSync47 } from "fs";
-import { join as join77, resolve as resolve40 } from "path";
+import { join as join77, resolve as resolve41 } from "path";
 function loadEnvFile(startDir) {
   try {
-    let dir = resolve40(startDir);
+    let dir = resolve41(startDir);
     for (let i2 = 0; i2 < 5; i2++) {
-      const envPath = resolve40(dir, ".env");
+      const envPath = resolve41(dir, ".env");
       try {
         const envContent = readFileSync47(envPath, "utf-8");
         for (const line of envContent.split("\n")) {
@@ -93125,7 +93442,7 @@ function loadEnvFile(startDir) {
         }
         break;
       } catch {
-        dir = resolve40(dir, "..");
+        dir = resolve41(dir, "..");
       }
     }
   } catch {
@@ -93892,7 +94209,7 @@ __export(capture_exports2, {
   default: () => capture_default,
   examples: () => examples23
 });
-import { resolve as resolve41 } from "path";
+import { resolve as resolve42 } from "path";
 var examples23, capture_default;
 var init_capture2 = __esm({
   "src/commands/capture.ts"() {
@@ -93951,7 +94268,7 @@ var init_capture2 = __esm({
           const hostname = new URL(url).hostname.replace(/^www\./, "");
           outputName = `captures/${hostname.replace(/\./g, "-")}`;
         }
-        const outputDir = resolve41(outputName);
+        const outputDir = resolve42(outputName);
         const isJson = args.json;
         if (!isJson) {
           const { c: c3 } = await Promise.resolve().then(() => (init_colors(), colors_exports));