@hyperframes/producer 0.4.6 → 0.4.8

package/dist/index.js

@@ -5116,12 +5116,12 @@ var require_common = __commonJS({
       createDebug.skips = [];
       createDebug.formatters = {};
       function selectColor(namespace) {
-        let hash = 0;
+        let hash2 = 0;
         for (let i = 0; i < namespace.length; i++) {
-          hash = (hash << 5) - hash + namespace.charCodeAt(i);
-          hash |= 0;
+          hash2 = (hash2 << 5) - hash2 + namespace.charCodeAt(i);
+          hash2 |= 0;
         }
-        return createDebug.colors[Math.abs(hash) % createDebug.colors.length];
+        return createDebug.colors[Math.abs(hash2) % createDebug.colors.length];
       }
       createDebug.selectColor = selectColor;
       function createDebug(namespace) {
@@ -54349,25 +54349,25 @@ var require_data = __commonJS({
     var notmodified_1 = __importDefault2(require_notmodified());
     var debug6 = (0, debug_1.default)("get-uri:data");
     var DataReadable = class extends stream_1.Readable {
-      constructor(hash, buf) {
+      constructor(hash2, buf) {
         super();
         this.push(buf);
         this.push(null);
-        this.hash = hash;
+        this.hash = hash2;
       }
     };
     var data = async ({ href: uri }, { cache } = {}) => {
       const shasum = (0, crypto_1.createHash)("sha1");
       shasum.update(uri);
-      const hash = shasum.digest("hex");
-      debug6('generated SHA1 hash for "data:" URI: %o', hash);
-      if (cache?.hash === hash) {
-        debug6("got matching cache SHA1 hash: %o", hash);
+      const hash2 = shasum.digest("hex");
+      debug6('generated SHA1 hash for "data:" URI: %o', hash2);
+      if (cache?.hash === hash2) {
+        debug6("got matching cache SHA1 hash: %o", hash2);
         throw new notmodified_1.default();
       } else {
         debug6('creating Readable stream from "data:" URI buffer');
         const { buffer } = (0, data_uri_to_buffer_1.dataUriToBuffer)(uri);
-        return new DataReadable(hash, Buffer.from(buffer));
+        return new DataReadable(hash2, Buffer.from(buffer));
       }
     };
     exports.data = data;
@@ -75362,14 +75362,14 @@ var require_dist10 = __commonJS({
             (0, quickjs_emscripten_1.getQuickJS)(),
             this.loadPacFile()
           ]);
-          const hash = crypto3.createHash("sha1").update(code).digest("hex");
-          if (this.resolver && this.resolverHash === hash) {
+          const hash2 = crypto3.createHash("sha1").update(code).digest("hex");
+          if (this.resolver && this.resolverHash === hash2) {
             debug6("Same sha1 hash for code - contents have not changed, reusing previous proxy resolver");
             return this.resolver;
           }
           debug6("Creating new proxy resolver instance");
           this.resolver = (0, pac_resolver_1.createPacResolver)(qjs, code, this.opts);
-          this.resolverHash = hash;
+          this.resolverHash = hash2;
           return this.resolver;
         } catch (err) {
           if (this.resolver && err.code === "ENOTMODIFIED") {
@@ -89421,6 +89421,7 @@ import {
   mkdirSync as mkdirSync10,
   rmSync as rmSync3,
   readFileSync as readFileSync9,
+  readdirSync as readdirSync6,
   writeFileSync as writeFileSync4,
   copyFileSync as copyFileSync2,
   appendFileSync
@@ -98668,6 +98669,8 @@ var DEFAULT_CONFIG = {
   ffmpegEncodeTimeout: 6e5,
   ffmpegProcessTimeout: 3e5,
   ffmpegStreamingTimeout: 6e5,
+  hdr: false,
+  hdrAutoDetect: true,
   audioGain: 1.35,
   frameDataUriCacheLimit: 256,
   playerReadyTimeout: 45e3,
@@ -98724,6 +98727,12 @@ function resolveConfig(overrides) {
       "FFMPEG_STREAMING_TIMEOUT_MS",
       DEFAULT_CONFIG.ffmpegStreamingTimeout
     ),
+    hdr: (() => {
+      const raw2 = env2("PRODUCER_HDR_TRANSFER");
+      if (raw2 === "hlg" || raw2 === "pq") return { transfer: raw2 };
+      return void 0;
+    })(),
+    hdrAutoDetect: envBool("PRODUCER_HDR_AUTO_DETECT", DEFAULT_CONFIG.hdrAutoDetect),
     audioGain: envNum("PRODUCER_AUDIO_GAIN", DEFAULT_CONFIG.audioGain),
     frameDataUriCacheLimit: Math.max(
       32,
@@ -98920,7 +98929,8 @@ function buildChromeArgs(options, config2) {
     "--font-render-hinting=none",
     "--force-color-profile=srgb",
     `--window-size=${options.width},${options.height}`,
-    // Remotion perf flags — prevent Chrome from throttling background tabs/timers
+    // Prevent Chrome from throttling background tabs/timers — critical when the
+    // page is offscreen during headless capture
     "--disable-background-timer-throttling",
     "--disable-backgrounding-occluded-windows",
     "--disable-renderer-backgrounding",
@@ -99634,6 +99644,7 @@ var mediaRules = [
     const timedTagPositions = [];
     for (const tag of tags) {
       if (tag.name === "video" || tag.name === "audio") continue;
+      if (readAttr(tag.raw, "data-composition-id")) continue;
       if (readAttr(tag.raw, "data-start")) {
         timedTagPositions.push({
           name: tag.name,
@@ -100740,7 +100751,8 @@ function lintHyperframeHtml(html, options = {}) {
 }
 
 // ../core/src/compiler/rewriteSubCompPaths.ts
-import { join as join4, resolve as resolve6, dirname as dirname4 } from "path";
+import { posix } from "path";
+var { join: join4, resolve: resolve6, dirname: dirname4 } = posix;
 var PATH_ATTRS = ["src", "href"];
 var CSS_URL_RE = /\burl\(\s*(["']?)([^)"']+)\1\s*\)/g;
 function isAbsoluteOrSpecial(val) {
@@ -100907,6 +100919,83 @@ async function pageScreenshotCapture(page, options) {
   });
   return Buffer.from(result.data, "base64");
 }
+var TRANSPARENT_BG_STYLE_ID = "__hf_transparent_bg__";
+async function initTransparentBackground(page) {
+  const client = await getCdpSession(page);
+  await client.send("Emulation.setDefaultBackgroundColorOverride", {
+    color: { r: 0, g: 0, b: 0, a: 0 }
+  });
+  await page.evaluate((styleId) => {
+    if (document.getElementById(styleId)) return;
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = "html,body,[data-composition-id]{background:transparent !important;background-color:transparent !important;background-image:none !important;}";
+    document.head.appendChild(style);
+  }, TRANSPARENT_BG_STYLE_ID);
+}
+async function captureAlphaPng(page, width, height) {
+  const client = await getCdpSession(page);
+  const result = await client.send("Page.captureScreenshot", {
+    format: "png",
+    fromSurface: true,
+    captureBeyondViewport: false,
+    optimizeForSpeed: false,
+    // must be false to preserve alpha
+    clip: { x: 0, y: 0, width, height, scale: 1 }
+  });
+  return Buffer.from(result.data, "base64");
+}
+var DOM_LAYER_MASK_STYLE_ID = "__hf_dom_layer_mask__";
+async function applyDomLayerMask(page, showIds, extraHideIds) {
+  await page.evaluate(
+    (args) => {
+      const existing = document.getElementById(args.styleId);
+      if (existing) existing.remove();
+      const showSelectors = [];
+      for (const id of args.show) {
+        const escaped = CSS.escape(id);
+        showSelectors.push(`#${escaped}`, `#${escaped} *`);
+        const renderEscaped = CSS.escape(`__render_frame_${id}__`);
+        showSelectors.push(`#${renderEscaped}`, `#${renderEscaped} *`);
+      }
+      const massHideRule = "body *{visibility:hidden !important;}";
+      const showRule = showSelectors.length === 0 ? "" : `${showSelectors.join(",")}{visibility:visible !important;}`;
+      const style = document.createElement("style");
+      style.id = args.styleId;
+      style.textContent = `${massHideRule}
+${showRule}`;
+      document.head.appendChild(style);
+      for (const id of args.hide) {
+        const el = document.getElementById(id);
+        if (el) {
+          el.style.setProperty("visibility", "hidden", "important");
+        }
+        const img = document.getElementById(`__render_frame_${id}__`);
+        if (img) {
+          img.style.setProperty("visibility", "hidden", "important");
+        }
+      }
+    },
+    { show: showIds, hide: extraHideIds, styleId: DOM_LAYER_MASK_STYLE_ID }
+  );
+}
+async function removeDomLayerMask(page, extraHideIds) {
+  await page.evaluate(
+    (args) => {
+      const style = document.getElementById(args.styleId);
+      if (style) style.remove();
+      for (const id of args.hide) {
+        const el = document.getElementById(id);
+        if (el) {
+          el.style.removeProperty("visibility");
+        }
+        const img = document.getElementById(`__render_frame_${id}__`);
+        if (img) img.style.removeProperty("visibility");
+      }
+    },
+    { hide: extraHideIds, styleId: DOM_LAYER_MASK_STYLE_ID }
+  );
+}
 async function injectVideoFramesBatch(page, updates) {
   if (updates.length === 0) return;
   await page.evaluate(
@@ -100928,16 +101017,7 @@ async function injectVideoFramesBatch(page, updates) {
           video.parentNode?.insertBefore(img, video.nextSibling);
         }
         if (!img) continue;
-        if (!sourceIsStatic) {
-          img.style.position = computedStyle.position;
-          img.style.width = computedStyle.width;
-          img.style.height = computedStyle.height;
-          img.style.top = computedStyle.top;
-          img.style.left = computedStyle.left;
-          img.style.right = computedStyle.right;
-          img.style.bottom = computedStyle.bottom;
-          img.style.inset = computedStyle.inset;
-        } else {
+        {
           const videoRect = video.getBoundingClientRect();
           const offsetLeft = Number.isFinite(video.offsetLeft) ? video.offsetLeft : 0;
           const offsetTop = Number.isFinite(video.offsetTop) ? video.offsetTop : 0;
@@ -100956,6 +101036,7 @@ async function injectVideoFramesBatch(page, updates) {
         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;
           }
@@ -100988,14 +101069,22 @@ async function syncVideoFrameVisibility(page, activeVideoIds) {
     const active = new Set(ids);
     const videos = Array.from(document.querySelectorAll("video[data-start]"));
     for (const video of videos) {
-      if (active.has(video.id)) continue;
-      video.style.removeProperty("display");
-      video.style.setProperty("visibility", "hidden", "important");
-      video.style.setProperty("opacity", "0", "important");
-      video.style.setProperty("pointer-events", "none", "important");
       const img = video.nextElementSibling;
-      if (img && img.classList.contains("__render_frame__")) {
-        img.style.visibility = "hidden";
+      const hasImg = img && img.classList.contains("__render_frame__");
+      if (active.has(video.id)) {
+        video.style.setProperty("visibility", "hidden", "important");
+        video.style.setProperty("pointer-events", "none", "important");
+        if (hasImg) {
+          img.style.visibility = "visible";
+        }
+      } else {
+        video.style.removeProperty("display");
+        video.style.setProperty("visibility", "hidden", "important");
+        video.style.setProperty("opacity", "0", "important");
+        video.style.setProperty("pointer-events", "none", "important");
+        if (hasImg) {
+          img.style.visibility = "hidden";
+        }
       }
     }
   }, activeVideoIds);
@@ -101452,7 +101541,7 @@ var ENCODER_PRESETS = {
   standard: { preset: "medium", quality: 18, codec: "h264" },
   high: { preset: "slow", quality: 15, codec: "h264" }
 };
-function getEncoderPreset(quality, format3 = "mp4") {
+function getEncoderPreset(quality, format3 = "mp4", hdr) {
   const base = ENCODER_PRESETS[quality];
   if (format3 === "webm") {
     return {
@@ -101470,6 +101559,15 @@ function getEncoderPreset(quality, format3 = "mp4") {
       pixelFormat: "yuva444p10le"
     };
   }
+  if (hdr) {
+    return {
+      preset: base.preset === "ultrafast" ? "fast" : base.preset,
+      quality: base.quality,
+      codec: "h265",
+      pixelFormat: "yuv420p10le",
+      hdr
+    };
+  }
   return { ...base, pixelFormat: "yuv420p" };
 }
 function buildEncoderArgs(options, inputArgs, outputPath, gpuEncoder = null) {
@@ -101527,6 +101625,9 @@ function buildEncoderArgs(options, inputArgs, outputPath, gpuEncoder = null) {
         args.push(xParamsFlag, `aq-mode=3:aq-strength=0.8:deblock=1,1:${colorParams}`);
       }
     }
+    if (codec === "h265") {
+      args.push("-tag:v", "hvc1");
+    }
   } else if (codec === "vp9") {
     args.push("-c:v", "libvpx-vp9", "-b:v", bitrate || "0", "-crf", String(quality));
     args.push("-deadline", preset === "ultrafast" ? "realtime" : "good");
@@ -101833,31 +101934,83 @@ async function applyFaststart(inputPath, outputPath, signal, config2) {
 import { spawn as spawn6 } from "child_process";
 import { existsSync as existsSync6, mkdirSync as mkdirSync3, statSync as statSync4 } from "fs";
 import { dirname as dirname6 } from "path";
+
+// ../engine/src/utils/hdr.ts
+function isHdrColorSpace(cs) {
+  if (!cs) return false;
+  return cs.colorPrimaries.includes("bt2020") || cs.colorSpace.includes("bt2020") || cs.colorTransfer === "smpte2084" || cs.colorTransfer === "arib-std-b67";
+}
+function detectTransfer(cs) {
+  if (cs?.colorTransfer === "smpte2084") return "pq";
+  return "hlg";
+}
+var DEFAULT_HDR10_MASTERING = {
+  masterDisplay: "G(13250,34500)B(7500,3000)R(34000,16000)WP(15635,16450)L(10000000,1)",
+  maxCll: "1000,400"
+};
+function getHdrEncoderColorParams(transfer, mastering = DEFAULT_HDR10_MASTERING) {
+  const colorTrc = transfer === "pq" ? "smpte2084" : "arib-std-b67";
+  const tagging = `colorprim=bt2020:transfer=${colorTrc}:colormatrix=bt2020nc`;
+  const metadata = `master-display=${mastering.masterDisplay}:max-cll=${mastering.maxCll}`;
+  return {
+    colorPrimaries: "bt2020",
+    colorTrc,
+    colorspace: "bt2020nc",
+    pixelFormat: "yuv420p10le",
+    x265ColorParams: `${tagging}:${metadata}`,
+    mastering
+  };
+}
+function analyzeCompositionHdr(colorSpaces) {
+  let hasPq = false;
+  let hasHdr = false;
+  for (const cs of colorSpaces) {
+    if (!isHdrColorSpace(cs)) continue;
+    hasHdr = true;
+    if (cs?.colorTransfer === "smpte2084") hasPq = true;
+  }
+  if (!hasHdr) return { hasHdr: false, dominantTransfer: null };
+  const dominantTransfer = hasPq ? "pq" : "hlg";
+  return { hasHdr: true, dominantTransfer };
+}
+
+// ../engine/src/services/streamingEncoder.ts
 function createFrameReorderBuffer(startFrame, endFrame) {
-  let nextFrame = startFrame;
-  let waiters = [];
-  const resolveWaiters = () => {
-    for (const waiter of waiters.slice()) {
-      if (waiter.frame === nextFrame) {
-        waiter.resolve();
-        waiters = waiters.filter((w) => w !== waiter);
-      }
+  let cursor = startFrame;
+  const pending = /* @__PURE__ */ new Map();
+  const enqueueAt = (frame, resolve13) => {
+    const list = pending.get(frame);
+    if (list === void 0) {
+      pending.set(frame, [resolve13]);
+    } else {
+      list.push(resolve13);
     }
   };
-  return {
-    waitForFrame: (frame) => new Promise((resolve13) => {
-      waiters.push({ frame, resolve: resolve13 });
-      resolveWaiters();
-    }),
-    advanceTo: (frame) => {
-      nextFrame = frame;
-      resolveWaiters();
-    },
-    waitForAllDone: () => new Promise((resolve13) => {
-      waiters.push({ frame: endFrame, resolve: resolve13 });
-      resolveWaiters();
-    })
+  const flushAt = (frame) => {
+    const list = pending.get(frame);
+    if (list === void 0) return;
+    pending.delete(frame);
+    for (const resolve13 of list) resolve13();
+  };
+  const waitForFrame = (frame) => new Promise((resolve13) => {
+    if (frame === cursor) {
+      resolve13();
+      return;
+    }
+    enqueueAt(frame, resolve13);
+  });
+  const advanceTo = (frame) => {
+    cursor = frame;
+    flushAt(frame);
   };
+  const waitForAllDone = () => new Promise((resolve13) => {
+    if (cursor >= endFrame) {
+      resolve13();
+      return;
+    }
+    enqueueAt(endFrame, resolve13);
+  });
+  return { waitForFrame, advanceTo, waitForAllDone };
 }
 function buildStreamingArgs(options, outputPath, gpuEncoder = null) {
   const {
@@ -101870,19 +102023,36 @@ function buildStreamingArgs(options, outputPath, gpuEncoder = null) {
     useGpu = false,
     imageFormat = "jpeg"
   } = options;
-  const inputCodec = imageFormat === "png" ? "png" : "mjpeg";
-  const args = [
-    "-f",
-    "image2pipe",
-    "-vcodec",
-    inputCodec,
-    "-framerate",
-    String(fps),
-    "-i",
-    "-",
-    "-r",
-    String(fps)
-  ];
+  const args = [];
+  if (options.rawInputFormat) {
+    const hdrTransfer = options.hdr?.transfer;
+    const inputColorTrc = hdrTransfer === "pq" ? "smpte2084" : hdrTransfer === "hlg" ? "arib-std-b67" : void 0;
+    args.push(
+      "-f",
+      "rawvideo",
+      "-pix_fmt",
+      options.rawInputFormat,
+      "-s",
+      `${options.width}x${options.height}`,
+      "-framerate",
+      String(fps)
+    );
+    if (inputColorTrc) {
+      args.push(
+        "-color_primaries",
+        "bt2020",
+        "-color_trc",
+        inputColorTrc,
+        "-colorspace",
+        "bt2020nc"
+      );
+    }
+    args.push("-i", "-");
+  } else {
+    const inputCodec = imageFormat === "png" ? "png" : "mjpeg";
+    args.push("-f", "image2pipe", "-vcodec", inputCodec, "-framerate", String(fps), "-i", "-");
+  }
+  args.push("-r", String(fps));
   const shouldUseGpu = useGpu && gpuEncoder !== null;
   if (codec === "h264" || codec === "h265") {
     if (shouldUseGpu) {
@@ -101920,12 +102090,15 @@ function buildStreamingArgs(options, outputPath, gpuEncoder = null) {
       if (bitrate) args.push("-b:v", bitrate);
       else args.push("-crf", String(quality));
       const xParamsFlag = codec === "h264" ? "-x264-params" : "-x265-params";
-      const colorParams = "colorprim=bt709:transfer=bt709:colormatrix=bt709";
+      const colorParams = options.rawInputFormat && options.hdr ? getHdrEncoderColorParams(options.hdr.transfer).x265ColorParams : "colorprim=bt709:transfer=bt709:colormatrix=bt709";
       if (preset === "ultrafast") {
         args.push(xParamsFlag, `aq-mode=3:${colorParams}`);
       } else {
         args.push(xParamsFlag, `aq-mode=3:aq-strength=0.8:deblock=1,1:${colorParams}`);
       }
+      if (codec === "h265") {
+        args.push("-tag:v", "hvc1");
+      }
     }
   } else if (codec === "vp9") {
     args.push("-c:v", "libvpx-vp9", "-b:v", bitrate || "0", "-crf", String(quality));
@@ -101941,17 +102114,31 @@ function buildStreamingArgs(options, outputPath, gpuEncoder = null) {
     return [...args, "-y", outputPath];
   }
   if (codec === "h264" || codec === "h265") {
-    args.push(
-      "-colorspace:v",
-      "bt709",
-      "-color_primaries:v",
-      "bt709",
-      "-color_trc:v",
-      "bt709",
-      "-color_range",
-      "tv"
-    );
-    if (gpuEncoder === "vaapi") {
+    if (options.rawInputFormat && options.hdr) {
+      args.push(
+        "-colorspace:v",
+        "bt2020nc",
+        "-color_primaries:v",
+        "bt2020",
+        "-color_trc:v",
+        options.hdr.transfer === "pq" ? "smpte2084" : "arib-std-b67",
+        "-color_range",
+        "tv"
+      );
+    } else {
+      args.push(
+        "-colorspace:v",
+        "bt709",
+        "-color_primaries:v",
+        "bt709",
+        "-color_trc:v",
+        "bt709",
+        "-color_range",
+        "tv"
+      );
+    }
+    if (options.rawInputFormat) {
+    } else if (gpuEncoder === "vaapi") {
       const vfIdx = args.indexOf("-vf");
       if (vfIdx !== -1) {
         args[vfIdx + 1] = `scale=in_range=pc:out_range=tv,${args[vfIdx + 1]}`;
@@ -102021,14 +102208,16 @@ Process error: ${err.message}`;
       if (exitStatus !== "running" || !ffmpeg.stdin || ffmpeg.stdin.destroyed) {
         return false;
       }
-      return ffmpeg.stdin.write(buffer);
+      const copy = Buffer.from(buffer);
+      return ffmpeg.stdin.write(copy);
     },
     close: async () => {
       clearTimeout(timer2);
       if (signal) signal.removeEventListener("abort", onAbort);
-      if (ffmpeg.stdin && !ffmpeg.stdin.destroyed) {
+      const stdin = ffmpeg.stdin;
+      if (stdin && !stdin.destroyed) {
         await new Promise((resolve13) => {
-          ffmpeg.stdin.end(() => resolve13());
+          stdin.end(() => resolve13());
         });
       }
       await exitPromise;
@@ -102132,6 +102321,10 @@ async function extractVideoMetadata(filePath) {
     const avgFps = parseFrameRate(videoStream.avg_frame_rate);
     const fps = avgFps || rFps;
     const isVFR = rFps > 0 && avgFps > 0 && Math.abs(rFps - avgFps) / Math.max(rFps, avgFps) > 0.1;
+    const colorTransfer = videoStream.color_transfer || "";
+    const colorPrimaries = videoStream.color_primaries || "";
+    const colorSpaceVal = videoStream.color_space || "";
+    const hasColorInfo = !!(colorTransfer || colorPrimaries || colorSpaceVal);
     return {
       durationSeconds: output2.format.duration ? parseFloat(output2.format.duration) : 0,
       width: videoStream.width || 0,
@@ -102139,7 +102332,8 @@ async function extractVideoMetadata(filePath) {
       fps,
       videoCodec: videoStream.codec_name || "unknown",
       hasAudio: output2.streams.some((s) => s.codec_type === "audio"),
-      isVFR
+      isVFR,
+      colorSpace: hasColorInfo ? { colorTransfer, colorPrimaries, colorSpace: colorSpaceVal } : null
     };
   })();
   videoMetadataCache.set(filePath, probePromise);
@@ -102244,10 +102438,10 @@ import { finished } from "stream/promises";
 var downloadPathCache = /* @__PURE__ */ new Map();
 var inFlightDownloads = /* @__PURE__ */ new Map();
 function getFilenameFromUrl(url) {
-  const hash = createHash("md5").update(url).digest("hex").slice(0, 12);
+  const hash2 = createHash("md5").update(url).digest("hex").slice(0, 12);
   const urlObj = new URL(url);
   const ext = extname2(urlObj.pathname) || ".mp4";
-  return `download_${hash}${ext}`;
+  return `download_${hash2}${ext}`;
 }
 async function downloadToTemp(url, destDir, timeoutMs = 3e5) {
   const cachedPath = downloadPathCache.get(url);
@@ -102347,18 +102541,20 @@ async function extractVideoFramesRange(videoPath, videoId, startTime, duration,
   const metadata = await extractVideoMetadata(videoPath);
   const framePattern = `frame_%05d.${format3}`;
   const outputPattern = join8(videoOutputDir, framePattern);
-  const args = [
-    "-ss",
-    String(startTime),
-    "-i",
-    videoPath,
-    "-t",
-    String(duration),
-    "-vf",
-    `fps=${fps}`,
-    "-q:v",
-    format3 === "jpg" ? String(Math.ceil((100 - quality) / 3)) : "0"
-  ];
+  const isHdr = isHdrColorSpace(metadata.colorSpace);
+  const isMacOS = process.platform === "darwin";
+  const args = [];
+  if (isHdr && isMacOS) {
+    args.push("-hwaccel", "videotoolbox");
+  }
+  args.push("-ss", String(startTime), "-i", videoPath, "-t", String(duration));
+  const vfFilters = [];
+  if (isHdr && isMacOS) {
+    vfFilters.push("format=nv12");
+  }
+  vfFilters.push(`fps=${fps}`);
+  args.push("-vf", vfFilters.join(","));
+  args.push("-q:v", format3 === "jpg" ? String(Math.ceil((100 - quality) / 3)) : "0");
   if (format3 === "png") args.push("-compression_level", "6");
   args.push("-y", outputPattern);
   return new Promise((resolve13, reject) => {
@@ -102418,30 +102614,100 @@ async function extractVideoFramesRange(videoPath, videoId, startTime, duration,
     });
   });
 }
+async function convertSdrToHdr(inputPath, outputPath, signal, config2) {
+  const timeout2 = config2?.ffmpegProcessTimeout ?? DEFAULT_CONFIG.ffmpegProcessTimeout;
+  const args = [
+    "-i",
+    inputPath,
+    "-vf",
+    "colorspace=all=bt2020:iall=bt709:range=tv",
+    "-color_primaries",
+    "bt2020",
+    "-color_trc",
+    "arib-std-b67",
+    "-colorspace",
+    "bt2020nc",
+    "-c:v",
+    "libx264",
+    "-preset",
+    "fast",
+    "-crf",
+    "16",
+    "-c:a",
+    "copy",
+    "-y",
+    outputPath
+  ];
+  const result = await runFfmpeg(args, { signal, timeout: timeout2 });
+  if (!result.success) {
+    throw new Error(
+      `SDR\u2192HDR conversion failed (exit ${result.exitCode}): ${result.stderr.slice(-300)}`
+    );
+  }
+}
 async function extractAllVideoFrames(videos, baseDir, options, signal, config2, compiledDir) {
   const startTime = Date.now();
   const extracted = [];
   const errors = [];
   let totalFramesExtracted = 0;
+  const resolvedVideos = [];
+  for (const video of videos) {
+    if (signal?.aborted) break;
+    try {
+      let videoPath = video.src;
+      if (!videoPath.startsWith("/") && !isHttpUrl(videoPath)) {
+        const fromCompiled = compiledDir ? join8(compiledDir, videoPath) : null;
+        videoPath = fromCompiled && existsSync8(fromCompiled) ? fromCompiled : join8(baseDir, videoPath);
+      }
+      if (isHttpUrl(videoPath)) {
+        const downloadDir = join8(options.outputDir, "_downloads");
+        mkdirSync5(downloadDir, { recursive: true });
+        videoPath = await downloadToTemp(videoPath, downloadDir);
+      }
+      if (!existsSync8(videoPath)) {
+        errors.push({ videoId: video.id, error: `Video file not found: ${videoPath}` });
+        continue;
+      }
+      resolvedVideos.push({ video, videoPath });
+    } catch (err) {
+      errors.push({ videoId: video.id, error: err instanceof Error ? err.message : String(err) });
+    }
+  }
+  const videoColorSpaces = await Promise.all(
+    resolvedVideos.map(async ({ videoPath }) => {
+      const metadata = await extractVideoMetadata(videoPath);
+      return metadata.colorSpace;
+    })
+  );
+  const hasAnyHdr = videoColorSpaces.some(isHdrColorSpace);
+  if (hasAnyHdr) {
+    const convertDir = join8(options.outputDir, "_hdr_normalized");
+    mkdirSync5(convertDir, { recursive: true });
+    for (let i = 0; i < resolvedVideos.length; i++) {
+      if (signal?.aborted) break;
+      const cs = videoColorSpaces[i] ?? null;
+      if (!isHdrColorSpace(cs)) {
+        const entry = resolvedVideos[i];
+        if (!entry) continue;
+        const convertedPath = join8(convertDir, `${entry.video.id}_hdr.mp4`);
+        try {
+          await convertSdrToHdr(entry.videoPath, convertedPath, signal, config2);
+          entry.videoPath = convertedPath;
+        } catch (err) {
+          errors.push({
+            videoId: entry.video.id,
+            error: `SDR\u2192HDR conversion failed: ${err instanceof Error ? err.message : String(err)}`
+          });
+        }
+      }
+    }
+  }
   const results = await Promise.all(
-    videos.map(async (video) => {
+    resolvedVideos.map(async ({ video, videoPath }) => {
       if (signal?.aborted) {
         throw new Error("Video frame extraction cancelled");
       }
       try {
-        let videoPath = video.src;
-        if (!videoPath.startsWith("/") && !isHttpUrl(videoPath)) {
-          const fromCompiled = compiledDir ? join8(compiledDir, videoPath) : null;
-          videoPath = fromCompiled && existsSync8(fromCompiled) ? fromCompiled : join8(baseDir, videoPath);
-        }
-        if (isHttpUrl(videoPath)) {
-          const downloadDir = join8(options.outputDir, "_downloads");
-          mkdirSync5(downloadDir, { recursive: true });
-          videoPath = await downloadToTemp(videoPath, downloadDir);
-        }
-        if (!existsSync8(videoPath)) {
-          return { error: { videoId: video.id, error: `Video file not found: ${videoPath}` } };
-        }
         let videoDuration = video.end - video.start;
         if (!Number.isFinite(videoDuration) || videoDuration <= 0) {
           const metadata = await extractVideoMetadata(videoPath);
@@ -102676,6 +102942,142 @@ function createVideoFrameInjector(frameLookup, config2) {
     }
   };
 }
+async function queryElementStacking(page, nativeHdrVideoIds) {
+  const hdrIds = Array.from(nativeHdrVideoIds);
+  return page.evaluate((hdrIdList) => {
+    const hdrSet = new Set(hdrIdList);
+    const elements = document.querySelectorAll("[data-start]");
+    const results = [];
+    function getEffectiveZIndex(node) {
+      let current = node;
+      while (current) {
+        const cs = window.getComputedStyle(current);
+        const pos = cs.position;
+        const z = parseInt(cs.zIndex);
+        if (!Number.isNaN(z) && pos !== "static") return z;
+        current = current.parentElement;
+      }
+      return 0;
+    }
+    function getEffectiveBorderRadius(node) {
+      function resolveRadius(value, el) {
+        if (value.includes("%")) {
+          const pct = parseFloat(value) / 100;
+          const htmlEl = el;
+          const w = htmlEl.offsetWidth || 0;
+          const h = htmlEl.offsetHeight || 0;
+          return pct * Math.min(w, h);
+        }
+        return parseFloat(value) || 0;
+      }
+      const selfCs = window.getComputedStyle(node);
+      const selfRadii = [
+        resolveRadius(selfCs.borderTopLeftRadius, node),
+        resolveRadius(selfCs.borderTopRightRadius, node),
+        resolveRadius(selfCs.borderBottomRightRadius, node),
+        resolveRadius(selfCs.borderBottomLeftRadius, node)
+      ];
+      if (selfRadii[0] > 0 || selfRadii[1] > 0 || selfRadii[2] > 0 || selfRadii[3] > 0) {
+        return selfRadii;
+      }
+      let current = node.parentElement;
+      while (current) {
+        const cs = window.getComputedStyle(current);
+        if (cs.overflow !== "visible") {
+          const tl = resolveRadius(cs.borderTopLeftRadius, current);
+          const tr = resolveRadius(cs.borderTopRightRadius, current);
+          const brr = resolveRadius(cs.borderBottomRightRadius, current);
+          const bl = resolveRadius(cs.borderBottomLeftRadius, current);
+          if (tl > 0 || tr > 0 || brr > 0 || bl > 0) {
+            return [tl, tr, brr, bl];
+          }
+        }
+        current = current.parentElement;
+      }
+      return [0, 0, 0, 0];
+    }
+    function getEffectiveOpacity(node) {
+      let opacity = 1;
+      let current = node;
+      while (current) {
+        const cs = window.getComputedStyle(current);
+        const val = parseFloat(cs.opacity);
+        opacity *= Number.isNaN(val) ? 1 : val;
+        current = current.parentElement;
+      }
+      return opacity;
+    }
+    function getViewportMatrix(node) {
+      const chain = [];
+      let current = node;
+      while (current instanceof HTMLElement) {
+        chain.push(current);
+        const next = current.offsetParent ?? current.parentElement;
+        if (next === current) break;
+        current = next;
+      }
+      let mat = new DOMMatrix();
+      for (let i = chain.length - 1; i >= 0; i--) {
+        const htmlEl = chain[i];
+        if (!htmlEl) continue;
+        mat = mat.translate(htmlEl.offsetLeft, htmlEl.offsetTop);
+        const cs = window.getComputedStyle(htmlEl);
+        if (cs.transform && cs.transform !== "none") {
+          const origin = cs.transformOrigin.split(" ");
+          const ox = resolveLength(origin[0] ?? "0", htmlEl.offsetWidth);
+          const oy = resolveLength(origin[1] ?? "0", htmlEl.offsetHeight);
+          try {
+            const t = new DOMMatrix(cs.transform);
+            if (Number.isFinite(t.a) && Number.isFinite(t.b) && Number.isFinite(t.c) && Number.isFinite(t.d) && Number.isFinite(t.e) && Number.isFinite(t.f)) {
+              mat = mat.translate(ox, oy).multiply(t).translate(-ox, -oy);
+            }
+          } catch {
+          }
+        }
+      }
+      return mat.toString();
+    }
+    function resolveLength(value, basis) {
+      if (value.endsWith("%")) {
+        const pct = parseFloat(value) / 100;
+        return Number.isFinite(pct) ? pct * basis : 0;
+      }
+      const n = parseFloat(value);
+      return Number.isFinite(n) ? n : 0;
+    }
+    for (const el of elements) {
+      const id = el.id;
+      if (!id) continue;
+      const rect = el.getBoundingClientRect();
+      const style = window.getComputedStyle(el);
+      const zIndex = getEffectiveZIndex(el);
+      const isHdrEl = hdrSet.has(id);
+      const opacityStartNode = isHdrEl ? el.parentElement : el;
+      const opacity = opacityStartNode ? getEffectiveOpacity(opacityStartNode) : 1;
+      const visible = style.visibility !== "hidden" && style.display !== "none" && rect.width > 0 && rect.height > 0;
+      const htmlEl = el instanceof HTMLElement ? el : null;
+      results.push({
+        id,
+        zIndex,
+        x: Math.round(rect.x),
+        y: Math.round(rect.y),
+        width: Math.round(rect.width),
+        height: Math.round(rect.height),
+        layoutWidth: htmlEl?.offsetWidth || Math.round(rect.width),
+        layoutHeight: htmlEl?.offsetHeight || Math.round(rect.height),
+        opacity,
+        visible,
+        isHdr: hdrSet.has(id),
+        // For HDR elements, use the full accumulated viewport matrix so the
+        // affine blit can apply rotation/scale/translate properly. For DOM
+        // elements, the element-level transform is sufficient for reference.
+        transform: isHdrEl ? getViewportMatrix(el) : style.transform || "none",
+        borderRadius: isHdrEl ? getEffectiveBorderRadius(el) : [0, 0, 0, 0]
+      });
+    }
+    return results;
+  }, hdrIds);
+}
 
 // ../engine/src/services/audioMixer.ts
 import { existsSync as existsSync9, mkdirSync as mkdirSync6, rmSync as rmSync2 } from "fs";
@@ -105786,6 +106188,1016 @@ var serve = (options, listeningListener) => {
   return server;
 };
 
+// ../engine/src/utils/alphaBlit.ts
+import { inflateSync } from "zlib";
+function paeth(a, b, c) {
+  const p = a + b - c;
+  const pa = Math.abs(p - a);
+  const pb = Math.abs(p - b);
+  const pc = Math.abs(p - c);
+  if (pa <= pb && pa <= pc) return a;
+  if (pb <= pc) return b;
+  return c;
+}
+function decodePngRaw(buf, caller) {
+  if (buf[0] !== 137 || buf[1] !== 80 || buf[2] !== 78 || buf[3] !== 71 || buf[4] !== 13 || buf[5] !== 10 || buf[6] !== 26 || buf[7] !== 10) {
+    throw new Error(`${caller}: not a PNG file`);
+  }
+  let pos = 8;
+  let width = 0;
+  let height = 0;
+  let bitDepth = 0;
+  let colorType = 0;
+  let interlace = 0;
+  let sawIhdr = false;
+  const idatChunks = [];
+  while (pos + 12 <= buf.length) {
+    const chunkLen = buf.readUInt32BE(pos);
+    const chunkType = buf.toString("ascii", pos + 4, pos + 8);
+    const chunkData = buf.subarray(pos + 8, pos + 8 + chunkLen);
+    if (chunkType === "IHDR") {
+      width = chunkData.readUInt32BE(0);
+      height = chunkData.readUInt32BE(4);
+      bitDepth = chunkData[8] ?? 0;
+      colorType = chunkData[9] ?? 0;
+      interlace = chunkData[12] ?? 0;
+      sawIhdr = true;
+    } else if (chunkType === "IDAT") {
+      idatChunks.push(Buffer.from(chunkData));
+    } else if (chunkType === "IEND") {
+      break;
+    }
+    pos += 12 + chunkLen;
+  }
+  if (!sawIhdr) {
+    throw new Error(`${caller}: PNG missing IHDR chunk`);
+  }
+  if (colorType !== 2 && colorType !== 6) {
+    throw new Error(`${caller}: unsupported color type ${colorType} (expected 2=RGB or 6=RGBA)`);
+  }
+  if (interlace !== 0) {
+    throw new Error(
+      `${caller}: Adam7-interlaced PNGs are not supported (interlace method ${interlace})`
+    );
+  }
+  const channels = colorType === 6 ? 4 : 3;
+  const bpp = channels * (bitDepth / 8);
+  const stride = width * bpp;
+  const compressed = Buffer.concat(idatChunks);
+  const decompressed = inflateSync(compressed);
+  const rawPixels = Buffer.allocUnsafe(height * stride);
+  const prevRow = new Uint8Array(stride);
+  const currRow = new Uint8Array(stride);
+  let srcPos = 0;
+  for (let y = 0; y < height; y++) {
+    const filterType = decompressed[srcPos++] ?? 0;
+    const rawRow = decompressed.subarray(srcPos, srcPos + stride);
+    srcPos += stride;
+    switch (filterType) {
+      case 0:
+        currRow.set(rawRow);
+        break;
+      case 1:
+        for (let x = 0; x < stride; x++) {
+          currRow[x] = (rawRow[x] ?? 0) + (x >= bpp ? currRow[x - bpp] ?? 0 : 0) & 255;
+        }
+        break;
+      case 2:
+        for (let x = 0; x < stride; x++) {
+          currRow[x] = (rawRow[x] ?? 0) + (prevRow[x] ?? 0) & 255;
+        }
+        break;
+      case 3:
+        for (let x = 0; x < stride; x++) {
+          const left2 = x >= bpp ? currRow[x - bpp] ?? 0 : 0;
+          const up = prevRow[x] ?? 0;
+          currRow[x] = (rawRow[x] ?? 0) + Math.floor((left2 + up) / 2) & 255;
+        }
+        break;
+      case 4:
+        for (let x = 0; x < stride; x++) {
+          const left2 = x >= bpp ? currRow[x - bpp] ?? 0 : 0;
+          const up = prevRow[x] ?? 0;
+          const upLeft = x >= bpp ? prevRow[x - bpp] ?? 0 : 0;
+          currRow[x] = (rawRow[x] ?? 0) + paeth(left2, up, upLeft) & 255;
+        }
+        break;
+      default:
+        throw new Error(`${caller}: unknown filter type ${filterType} at row ${y}`);
+    }
+    rawPixels.set(currRow, y * stride);
+    prevRow.set(currRow);
+  }
+  return { width, height, bitDepth, colorType, rawPixels };
+}
+function decodePng(buf) {
+  const { width, height, bitDepth, colorType, rawPixels } = decodePngRaw(buf, "decodePng");
+  if (bitDepth !== 8) {
+    throw new Error(`decodePng: unsupported bit depth ${bitDepth} (expected 8)`);
+  }
+  const output2 = new Uint8Array(width * height * 4);
+  if (colorType === 6) {
+    output2.set(rawPixels);
+  } else {
+    for (let i = 0; i < width * height; i++) {
+      output2[i * 4 + 0] = rawPixels[i * 3 + 0] ?? 0;
+      output2[i * 4 + 1] = rawPixels[i * 3 + 1] ?? 0;
+      output2[i * 4 + 2] = rawPixels[i * 3 + 2] ?? 0;
+      output2[i * 4 + 3] = 255;
+    }
+  }
+  return { width, height, data: output2 };
+}
+function decodePngToRgb48le(buf) {
+  const { width, height, bitDepth, colorType, rawPixels } = decodePngRaw(buf, "decodePngToRgb48le");
+  if (bitDepth !== 16) {
+    throw new Error(`decodePngToRgb48le: unsupported bit depth ${bitDepth} (expected 16)`);
+  }
+  const bpp = colorType === 6 ? 8 : 6;
+  const output2 = Buffer.allocUnsafe(width * height * 6);
+  for (let y = 0; y < height; y++) {
+    const dstBase = y * width * 6;
+    const srcRowBase = y * width * bpp;
+    for (let x = 0; x < width; x++) {
+      const srcBase = srcRowBase + x * bpp;
+      output2[dstBase + x * 6 + 0] = rawPixels[srcBase + 1] ?? 0;
+      output2[dstBase + x * 6 + 1] = rawPixels[srcBase + 0] ?? 0;
+      output2[dstBase + x * 6 + 2] = rawPixels[srcBase + 3] ?? 0;
+      output2[dstBase + x * 6 + 3] = rawPixels[srcBase + 2] ?? 0;
+      output2[dstBase + x * 6 + 4] = rawPixels[srcBase + 5] ?? 0;
+      output2[dstBase + x * 6 + 5] = rawPixels[srcBase + 4] ?? 0;
+    }
+  }
+  return { width, height, data: output2 };
+}
+function buildSrgbToHdrLut(transfer) {
+  const lut = new Uint16Array(256);
+  const hlgA = 0.17883277;
+  const hlgB = 1 - 4 * hlgA;
+  const hlgC = 0.5 - hlgA * Math.log(4 * hlgA);
+  const pqM1 = 0.1593017578125;
+  const pqM2 = 78.84375;
+  const pqC1 = 0.8359375;
+  const pqC2 = 18.8515625;
+  const pqC3 = 18.6875;
+  const pqMaxNits = 1e4;
+  const sdrNits = 203;
+  for (let i = 0; i < 256; i++) {
+    const v = i / 255;
+    const linear = v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    let signal;
+    if (transfer === "hlg") {
+      signal = linear <= 1 / 12 ? Math.sqrt(3 * linear) : hlgA * Math.log(12 * linear - hlgB) + hlgC;
+    } else {
+      const Lp = Math.max(0, linear * sdrNits / pqMaxNits);
+      const Lm1 = Math.pow(Lp, pqM1);
+      signal = Math.pow((pqC1 + pqC2 * Lm1) / (1 + pqC3 * Lm1), pqM2);
+    }
+    lut[i] = Math.min(65535, Math.round(signal * 65535));
+  }
+  return lut;
+}
+var SRGB_TO_HLG = buildSrgbToHdrLut("hlg");
+var SRGB_TO_PQ = buildSrgbToHdrLut("pq");
+function getSrgbToHdrLut(transfer) {
+  return transfer === "pq" ? SRGB_TO_PQ : SRGB_TO_HLG;
+}
+function blitRgba8OverRgb48le(domRgba, canvas, width, height, transfer = "hlg") {
+  const pixelCount = width * height;
+  const lut = getSrgbToHdrLut(transfer);
+  for (let i = 0; i < pixelCount; i++) {
+    const da = domRgba[i * 4 + 3] ?? 0;
+    if (da === 0) {
+      continue;
+    } else if (da === 255) {
+      const r16 = lut[domRgba[i * 4 + 0] ?? 0] ?? 0;
+      const g16 = lut[domRgba[i * 4 + 1] ?? 0] ?? 0;
+      const b16 = lut[domRgba[i * 4 + 2] ?? 0] ?? 0;
+      canvas.writeUInt16LE(r16, i * 6);
+      canvas.writeUInt16LE(g16, i * 6 + 2);
+      canvas.writeUInt16LE(b16, i * 6 + 4);
+    } else {
+      const alpha = da / 255;
+      const invAlpha = 1 - alpha;
+      const hdrR = (canvas[i * 6 + 0] ?? 0) | (canvas[i * 6 + 1] ?? 0) << 8;
+      const hdrG = (canvas[i * 6 + 2] ?? 0) | (canvas[i * 6 + 3] ?? 0) << 8;
+      const hdrB = (canvas[i * 6 + 4] ?? 0) | (canvas[i * 6 + 5] ?? 0) << 8;
+      const domR = lut[domRgba[i * 4 + 0] ?? 0] ?? 0;
+      const domG = lut[domRgba[i * 4 + 1] ?? 0] ?? 0;
+      const domB = lut[domRgba[i * 4 + 2] ?? 0] ?? 0;
+      canvas.writeUInt16LE(Math.round(domR * alpha + hdrR * invAlpha), i * 6);
+      canvas.writeUInt16LE(Math.round(domG * alpha + hdrG * invAlpha), i * 6 + 2);
+      canvas.writeUInt16LE(Math.round(domB * alpha + hdrB * invAlpha), i * 6 + 4);
+    }
+  }
+}
+function cornerAlpha(px, py, cx, cy, r) {
+  const dx = px - cx;
+  const dy = py - cy;
+  const dist = Math.sqrt(dx * dx + dy * dy);
+  if (dist > r + 0.5) return 0;
+  if (dist > r - 0.5) return r + 0.5 - dist;
+  return 1;
+}
+function roundedRectAlpha(px, py, w, h, radii) {
+  const [tl, tr, br, bl] = radii;
+  if (px < tl && py < tl) return cornerAlpha(px, py, tl, tl, tl);
+  if (px >= w - tr && py < tr) return cornerAlpha(px, py, w - tr, tr, tr);
+  if (px >= w - br && py >= h - br) return cornerAlpha(px, py, w - br, h - br, br);
+  if (px < bl && py >= h - bl) return cornerAlpha(px, py, bl, h - bl, bl);
+  return 1;
+}
+function blitRgb48leRegion(canvas, source2, dx, dy, sw, sh, canvasWidth, canvasHeight, opacity, borderRadius) {
+  if (sw <= 0 || sh <= 0) return;
+  const op = opacity ?? 1;
+  const x0 = Math.max(0, dx);
+  const y0 = Math.max(0, dy);
+  const x1 = Math.min(canvasWidth, dx + sw);
+  const y1 = Math.min(canvasHeight, dy + sh);
+  if (x0 >= x1 || y0 >= y1) return;
+  const clippedW = x1 - x0;
+  const srcOffsetX = x0 - dx;
+  const srcOffsetY = y0 - dy;
+  const hasMask = borderRadius !== void 0;
+  if (op >= 0.999 && !hasMask) {
+    for (let y = 0; y < y1 - y0; y++) {
+      const srcRowOff = ((srcOffsetY + y) * sw + srcOffsetX) * 6;
+      const dstRowOff = ((y0 + y) * canvasWidth + x0) * 6;
+      source2.copy(canvas, dstRowOff, srcRowOff, srcRowOff + clippedW * 6);
+    }
+  } else {
+    for (let y = 0; y < y1 - y0; y++) {
+      for (let x = 0; x < clippedW; x++) {
+        let effectiveOp = op;
+        if (hasMask) {
+          const ma = roundedRectAlpha(srcOffsetX + x, srcOffsetY + y, sw, sh, borderRadius);
+          if (ma <= 0) continue;
+          effectiveOp *= ma;
+        }
+        const srcOff = ((srcOffsetY + y) * sw + srcOffsetX + x) * 6;
+        const dstOff = ((y0 + y) * canvasWidth + x0 + x) * 6;
+        if (effectiveOp >= 0.999) {
+          source2.copy(canvas, dstOff, srcOff, srcOff + 6);
+        } else {
+          const invEff = 1 - effectiveOp;
+          const sr = source2.readUInt16LE(srcOff);
+          const sg = source2.readUInt16LE(srcOff + 2);
+          const sb = source2.readUInt16LE(srcOff + 4);
+          const dr = canvas.readUInt16LE(dstOff);
+          const dg = canvas.readUInt16LE(dstOff + 2);
+          const db = canvas.readUInt16LE(dstOff + 4);
+          canvas.writeUInt16LE(Math.round(sr * effectiveOp + dr * invEff), dstOff);
+          canvas.writeUInt16LE(Math.round(sg * effectiveOp + dg * invEff), dstOff + 2);
+          canvas.writeUInt16LE(Math.round(sb * effectiveOp + db * invEff), dstOff + 4);
+        }
+      }
+    }
+  }
+}
+function blitRgb48leAffine(canvas, source2, matrix, srcW, srcH, canvasW, canvasH, opacity, borderRadius) {
+  const a = matrix[0];
+  const b = matrix[1];
+  const c = matrix[2];
+  const d = matrix[3];
+  const tx = matrix[4];
+  const ty = matrix[5];
+  if (a === void 0 || b === void 0 || c === void 0 || d === void 0 || tx === void 0 || ty === void 0)
+    return;
+  const det = a * d - b * c;
+  if (Math.abs(det) < 1e-10) return;
+  const invA = d / det;
+  const invB = -b / det;
+  const invC = -c / det;
+  const invD = a / det;
+  const invTx = -(invA * tx + invC * ty);
+  const invTy = -(invB * tx + invD * ty);
+  const op = opacity ?? 1;
+  const hasMask = borderRadius !== void 0;
+  const corners = [
+    [tx, ty],
+    [a * srcW + tx, b * srcW + ty],
+    [c * srcH + tx, d * srcH + ty],
+    [a * srcW + c * srcH + tx, b * srcW + d * srcH + ty]
+  ];
+  let minX = canvasW, maxX = 0, minY = canvasH, maxY = 0;
+  for (const corner of corners) {
+    const cx = corner[0] ?? 0;
+    const cy = corner[1] ?? 0;
+    if (cx < minX) minX = cx;
+    if (cx > maxX) maxX = cx;
+    if (cy < minY) minY = cy;
+    if (cy > maxY) maxY = cy;
+  }
+  const startX = Math.max(0, Math.floor(minX));
+  const endX = Math.min(canvasW, Math.ceil(maxX));
+  const startY = Math.max(0, Math.floor(minY));
+  const endY = Math.min(canvasH, Math.ceil(maxY));
+  for (let dy = startY; dy < endY; dy++) {
+    for (let dx = startX; dx < endX; dx++) {
+      const sx = invA * dx + invC * dy + invTx;
+      const sy = invB * dx + invD * dy + invTy;
+      if (sx < 0 || sy < 0 || sx >= srcW || sy >= srcH) continue;
+      let effectiveOp = op;
+      if (hasMask) {
+        const ma = roundedRectAlpha(sx, sy, srcW, srcH, borderRadius);
+        if (ma <= 0) continue;
+        effectiveOp *= ma;
+      }
+      const x0 = Math.floor(sx);
+      const y0 = Math.floor(sy);
+      const fx = sx - x0;
+      const fy = sy - y0;
+      const x1 = Math.min(x0 + 1, srcW - 1);
+      const y1 = Math.min(y0 + 1, srcH - 1);
+      const off00 = (y0 * srcW + x0) * 6;
+      const off10 = (y0 * srcW + x1) * 6;
+      const off01 = (y1 * srcW + x0) * 6;
+      const off11 = (y1 * srcW + x1) * 6;
+      const w00 = (1 - fx) * (1 - fy);
+      const w10 = fx * (1 - fy);
+      const w01 = (1 - fx) * fy;
+      const w11 = fx * fy;
+      const sr = source2.readUInt16LE(off00) * w00 + source2.readUInt16LE(off10) * w10 + source2.readUInt16LE(off01) * w01 + source2.readUInt16LE(off11) * w11;
+      const sg = source2.readUInt16LE(off00 + 2) * w00 + source2.readUInt16LE(off10 + 2) * w10 + source2.readUInt16LE(off01 + 2) * w01 + source2.readUInt16LE(off11 + 2) * w11;
+      const sb = source2.readUInt16LE(off00 + 4) * w00 + source2.readUInt16LE(off10 + 4) * w10 + source2.readUInt16LE(off01 + 4) * w01 + source2.readUInt16LE(off11 + 4) * w11;
+      const dstOff = (dy * canvasW + dx) * 6;
+      if (effectiveOp >= 0.999) {
+        canvas.writeUInt16LE(Math.round(sr), dstOff);
+        canvas.writeUInt16LE(Math.round(sg), dstOff + 2);
+        canvas.writeUInt16LE(Math.round(sb), dstOff + 4);
+      } else {
+        const invEff = 1 - effectiveOp;
+        const dr = canvas.readUInt16LE(dstOff);
+        const dg = canvas.readUInt16LE(dstOff + 2);
+        const db = canvas.readUInt16LE(dstOff + 4);
+        canvas.writeUInt16LE(Math.round(sr * effectiveOp + dr * invEff), dstOff);
+        canvas.writeUInt16LE(Math.round(sg * effectiveOp + dg * invEff), dstOff + 2);
+        canvas.writeUInt16LE(Math.round(sb * effectiveOp + db * invEff), dstOff + 4);
+      }
+    }
+  }
+}
+function parseTransformMatrix(css) {
+  if (!css || css === "none") return null;
+  const match2 = css.match(
+    /^matrix\(\s*([^,]+),\s*([^,]+),\s*([^,]+),\s*([^,]+),\s*([^,]+),\s*([^,)]+)\s*\)$/
+  );
+  if (!match2) return null;
+  const values = match2.slice(1, 7).map(Number);
+  if (!values.every(Number.isFinite)) return null;
+  return values;
+}
+
+// ../engine/src/utils/layerCompositor.ts
+function groupIntoLayers(elements) {
+  const sorted = [...elements].sort((a, b) => a.zIndex - b.zIndex);
+  const layers = [];
+  for (const el of sorted) {
+    if (el.isHdr) {
+      layers.push({ type: "hdr", element: el });
+    } else {
+      const last2 = layers[layers.length - 1];
+      if (last2 && last2.type === "dom") {
+        last2.elementIds.push(el.id);
+      } else {
+        layers.push({ type: "dom", elementIds: [el.id] });
+      }
+    }
+  }
+  return layers;
+}
+
+// ../engine/src/utils/shaderTransitions.ts
+var PQ_M1 = 0.1593017578125;
+var PQ_M2 = 78.84375;
+var PQ_C1 = 0.8359375;
+var PQ_C2 = 18.8515625;
+var PQ_C3 = 18.6875;
+function pqEotf(signal) {
+  const sp = Math.pow(Math.max(0, signal), 1 / PQ_M2);
+  const num = Math.max(sp - PQ_C1, 0);
+  const den = PQ_C2 - PQ_C3 * sp;
+  return den > 0 ? Math.pow(num / den, 1 / PQ_M1) : 0;
+}
+function pqOetf(linear) {
+  const lp = Math.pow(Math.max(0, linear), PQ_M1);
+  return Math.pow((PQ_C1 + PQ_C2 * lp) / (1 + PQ_C3 * lp), PQ_M2);
+}
+function hlgEotf(signal) {
+  const a = 0.17883277;
+  const b = 1 - 4 * a;
+  const c = 0.5 - a * Math.log(4 * a);
+  if (signal <= 0.5) {
+    return signal * signal / 3;
+  }
+  return (Math.exp((signal - c) / a) + b) / 12;
+}
+function hlgOetf(linear) {
+  const a = 0.17883277;
+  const b = 1 - 4 * a;
+  const c = 0.5 - a * Math.log(4 * a);
+  if (linear <= 1 / 12) {
+    return Math.sqrt(3 * linear);
+  }
+  return a * Math.log(12 * linear - b) + c;
+}
+function buildLut(fn) {
+  const lut = new Uint16Array(65536);
+  for (let i = 0; i < 65536; i++) {
+    lut[i] = Math.round(fn(i / 65535) * 65535);
+  }
+  return lut;
+}
+var HLG_OOTF_LW = 1e3;
+var HLG_OOTF_GAMMA = 1.2 * Math.pow(1.111, Math.log2(HLG_OOTF_LW / 1e3));
+function hlgSceneToPqDisplay(sceneLinear) {
+  const displayNits = HLG_OOTF_LW * Math.pow(Math.max(0, sceneLinear), HLG_OOTF_GAMMA);
+  return displayNits / 1e4;
+}
+function pqDisplayToHlgScene(displayNormalized) {
+  const displayNits = displayNormalized * 1e4;
+  return Math.pow(Math.max(0, displayNits / HLG_OOTF_LW), 1 / HLG_OOTF_GAMMA);
+}
+var hlgToPqLut = null;
+var pqToHlgLut = null;
+function getHlgToPqLut() {
+  if (!hlgToPqLut) hlgToPqLut = buildLut((v) => pqOetf(hlgSceneToPqDisplay(hlgEotf(v))));
+  return hlgToPqLut;
+}
+function getPqToHlgLut() {
+  if (!pqToHlgLut) pqToHlgLut = buildLut((v) => hlgOetf(pqDisplayToHlgScene(pqEotf(v))));
+  return pqToHlgLut;
+}
+function convertTransfer(buf, from2, to) {
+  if (from2 === to) return;
+  const lut = from2 === "hlg" ? getHlgToPqLut() : getPqToHlgLut();
+  const len = buf.length / 2;
+  for (let i = 0; i < len; i++) {
+    const off = i * 2;
+    buf.writeUInt16LE(lut[buf.readUInt16LE(off)] ?? 0, off);
+  }
+}
+function sampleRgb48le(buf, u, v, w, h) {
+  const uc = Math.max(0, Math.min(1, u));
+  const vc = Math.max(0, Math.min(1, v));
+  const sx = uc * (w - 1);
+  const sy = vc * (h - 1);
+  const x0 = Math.floor(sx);
+  const y0 = Math.floor(sy);
+  const x1 = Math.min(x0 + 1, w - 1);
+  const y1 = Math.min(y0 + 1, h - 1);
+  const fx = sx - x0;
+  const fy = sy - y0;
+  const w00 = (1 - fx) * (1 - fy);
+  const w10 = fx * (1 - fy);
+  const w01 = (1 - fx) * fy;
+  const w11 = fx * fy;
+  const off00 = (y0 * w + x0) * 6;
+  const off10 = (y0 * w + x1) * 6;
+  const off01 = (y1 * w + x0) * 6;
+  const off11 = (y1 * w + x1) * 6;
+  const r = Math.round(
+    buf.readUInt16LE(off00) * w00 + buf.readUInt16LE(off10) * w10 + buf.readUInt16LE(off01) * w01 + buf.readUInt16LE(off11) * w11
+  );
+  const g = Math.round(
+    buf.readUInt16LE(off00 + 2) * w00 + buf.readUInt16LE(off10 + 2) * w10 + buf.readUInt16LE(off01 + 2) * w01 + buf.readUInt16LE(off11 + 2) * w11
+  );
+  const b = Math.round(
+    buf.readUInt16LE(off00 + 4) * w00 + buf.readUInt16LE(off10 + 4) * w10 + buf.readUInt16LE(off01 + 4) * w01 + buf.readUInt16LE(off11 + 4) * w11
+  );
+  return [r, g, b];
+}
+function mix16(a, b, t) {
+  return Math.round(a * (1 - t) + b * t);
+}
+function clamp16(v) {
+  return Math.max(0, Math.min(65535, v));
+}
+function smoothstep(edge0, edge1, x) {
+  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));
+  return t * t * (3 - 2 * t);
+}
+function hash(x, y) {
+  return (Math.sin(x * 127.1 + y * 311.7) * 43758.5453 % 1 + 1) % 1;
+}
+function vnoise(px, py) {
+  const ix = Math.floor(px);
+  const iy = Math.floor(py);
+  let fx = px - ix;
+  let fy = py - iy;
+  fx = fx * fx * fx * (fx * (fx * 6 - 15) + 10);
+  fy = fy * fy * fy * (fy * (fy * 6 - 15) + 10);
+  const h00 = hash(ix, iy);
+  const h10 = hash(ix + 1, iy);
+  const h01 = hash(ix, iy + 1);
+  const h11 = hash(ix + 1, iy + 1);
+  return h00 * (1 - fx) * (1 - fy) + h10 * fx * (1 - fy) + h01 * (1 - fx) * fy + h11 * fx * fy;
+}
+var ROT_A = 0.8;
+var ROT_B = 0.6;
+function fbm(px, py) {
+  let value = 0;
+  let amplitude = 0.5;
+  let x = px;
+  let y = py;
+  for (let i = 0; i < 5; i++) {
+    value += amplitude * vnoise(x, y);
+    const nx = ROT_A * x - ROT_B * y;
+    const ny = ROT_B * x + ROT_A * y;
+    x = nx * 2.02;
+    y = ny * 2.02;
+    amplitude *= 0.5;
+  }
+  return value;
+}
+var TRANSITIONS = {};
+var crossfade = (from2, to, out, w, h, p) => {
+  const inv = 1 - p;
+  for (let i = 0; i < w * h; i++) {
+    const o = i * 6;
+    out.writeUInt16LE(Math.round(from2.readUInt16LE(o) * inv + to.readUInt16LE(o) * p), o);
+    out.writeUInt16LE(
+      Math.round(from2.readUInt16LE(o + 2) * inv + to.readUInt16LE(o + 2) * p),
+      o + 2
+    );
+    out.writeUInt16LE(
+      Math.round(from2.readUInt16LE(o + 4) * inv + to.readUInt16LE(o + 4) * p),
+      o + 4
+    );
+  }
+};
+TRANSITIONS["crossfade"] = crossfade;
+var flashThroughWhite = (from2, to, out, w, h, p) => {
+  const toWhite = smoothstep(0, 0.45, p);
+  const fromWhite = 1 - smoothstep(0.5, 1, p);
+  const blend = smoothstep(0.35, 0.65, p);
+  for (let i = 0; i < w * h; i++) {
+    const o = i * 6;
+    const fromR = mix16(from2.readUInt16LE(o), 65535, toWhite);
+    const fromG = mix16(from2.readUInt16LE(o + 2), 65535, toWhite);
+    const fromB = mix16(from2.readUInt16LE(o + 4), 65535, toWhite);
+    const toR = mix16(to.readUInt16LE(o), 65535, fromWhite);
+    const toG = mix16(to.readUInt16LE(o + 2), 65535, fromWhite);
+    const toB = mix16(to.readUInt16LE(o + 4), 65535, fromWhite);
+    out.writeUInt16LE(mix16(fromR, toR, blend), o);
+    out.writeUInt16LE(mix16(fromG, toG, blend), o + 2);
+    out.writeUInt16LE(mix16(fromB, toB, blend), o + 4);
+  }
+};
+TRANSITIONS["flash-through-white"] = flashThroughWhite;
+var chromaticSplit = (from2, to, out, w, h, p) => {
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const cx = ux - 0.5;
+    const cy = uy - 0.5;
+    const fromShift = p * 0.06;
+    const fr = sampleRgb48le(from2, ux + cx * fromShift, uy + cy * fromShift, w, h)[0];
+    const fg = sampleRgb48le(from2, ux, uy, w, h)[1];
+    const fb = sampleRgb48le(from2, ux - cx * fromShift, uy - cy * fromShift, w, h)[2];
+    const toShift = (1 - p) * 0.06;
+    const tr = sampleRgb48le(to, ux - cx * toShift, uy - cy * toShift, w, h)[0];
+    const tg = sampleRgb48le(to, ux, uy, w, h)[1];
+    const tb = sampleRgb48le(to, ux + cx * toShift, uy + cy * toShift, w, h)[2];
+    out.writeUInt16LE(clamp16(mix16(fr, tr, p)), o);
+    out.writeUInt16LE(clamp16(mix16(fg, tg, p)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(fb, tb, p)), o + 4);
+  }
+};
+TRANSITIONS["chromatic-split"] = chromaticSplit;
+var sdfIris = (from2, to, out, w, h, p) => {
+  const accentBright = [65535, 55e3, 35e3];
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const ax = (ux - 0.5) * (w / h);
+    const ay = uy - 0.5;
+    const d = Math.sqrt(ax * ax + ay * ay);
+    const radius = p * 1.2;
+    const fw = 3e-3;
+    const edge = smoothstep(radius + fw, radius - fw, d);
+    const ring1 = Math.exp(-Math.abs(d - radius) * 25);
+    const ring2 = Math.exp(-Math.abs(d - radius + 0.04) * 20) * 0.5;
+    const ring3 = Math.exp(-Math.abs(d - radius + 0.08) * 15) * 0.25;
+    const glow = (ring1 + ring2 + ring3) * p * (1 - p) * 4;
+    const [fromR, fromG, fromB] = sampleRgb48le(from2, ux, uy, w, h);
+    const [toR, toG, toB] = sampleRgb48le(to, ux, uy, w, h);
+    out.writeUInt16LE(clamp16(mix16(fromR, toR, edge) + accentBright[0] * glow * 0.6), o);
+    out.writeUInt16LE(clamp16(mix16(fromG, toG, edge) + accentBright[1] * glow * 0.6), o + 2);
+    out.writeUInt16LE(clamp16(mix16(fromB, toB, edge) + accentBright[2] * glow * 0.6), o + 4);
+  }
+};
+TRANSITIONS["sdf-iris"] = sdfIris;
+function glitchRand(x, y) {
+  return (Math.sin(x * 12.9898 + y * 78.233) * 43758.5453 % 1 + 1) % 1;
+}
+var glitch = (from2, to, out, w, h, p) => {
+  const intensity = p * (1 - p) * 4;
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const lineY = Math.floor(uy * 60) / 60;
+    const lineDisp = (glitchRand(lineY, Math.floor(p * 17)) - 0.5) * 0.18 * intensity;
+    const blockX = Math.floor(ux * 12);
+    const blockY = Math.floor(uy * 8);
+    const progressStep = Math.floor(p * 11);
+    const br = glitchRand(blockX + progressStep, blockY + progressStep);
+    const ba = (br >= 0.83 ? 1 : 0) * intensity;
+    const bdx = (glitchRand(blockX * 2.1, blockY * 2.1) - 0.5) * 0.35 * ba;
+    const bdy = (glitchRand(blockX * 3.7, blockY * 3.7) - 0.5) * 0.35 * ba;
+    const uvx = Math.max(0, Math.min(1, ux + lineDisp + bdx));
+    const uvy = Math.max(0, Math.min(1, uy + bdy));
+    const shift = intensity * 0.035;
+    const r = sampleRgb48le(from2, uvx + shift, uvy, w, h)[0];
+    const g = sampleRgb48le(from2, uvx, uvy, w, h)[1];
+    const b = sampleRgb48le(from2, uvx - shift, uvy, w, h)[2];
+    let cr = r / 65535;
+    let cg = g / 65535;
+    let cb = b / 65535;
+    const scanline = (uy * h * 0.5 % 1 + 1) % 1 >= 0.5 ? 0.05 * intensity : 0;
+    cr -= scanline;
+    cg -= scanline;
+    cb -= scanline;
+    const flicker = 1 + (glitchRand(Math.floor(p * 23), 0) - 0.5) * 0.3 * intensity;
+    cr *= flicker;
+    cg *= flicker;
+    cb *= flicker;
+    const levels = 256 - (256 - 8) * (intensity * 0.5);
+    cr = Math.floor(cr * levels) / levels;
+    cg = Math.floor(cg * levels) / levels;
+    cb = Math.floor(cb * levels) / levels;
+    const [toR, toG, toB] = sampleRgb48le(to, ux, uy, w, h);
+    out.writeUInt16LE(clamp16(mix16(Math.round(cr * 65535), toR, p)), o);
+    out.writeUInt16LE(clamp16(mix16(Math.round(cg * 65535), toG, p)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(Math.round(cb * 65535), toB, p)), o + 4);
+  }
+};
+TRANSITIONS["glitch"] = glitch;
+function aces(x) {
+  return Math.max(0, Math.min(1, x * (2.51 * x + 0.03) / (x * (2.43 * x + 0.59) + 0.14)));
+}
+var lightLeak = (from2, to, out, w, h, p) => {
+  const accent = [5e4 / 65535, 25e3 / 65535, 5e3 / 65535];
+  const accentBright = [65535 / 65535, 55e3 / 65535, 35e3 / 65535];
+  const lpx = 1.3;
+  const lpy = -0.2;
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const dx = ux - lpx;
+    const dy = uy - lpy;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    const leak = Math.max(0, Math.min(1, Math.exp(-dist * 1.8) * p * 4));
+    const warmR = accent[0] + (accentBright[0] - accent[0]) * dist * 0.7;
+    const warmG = accent[1] + (accentBright[1] - accent[1]) * dist * 0.7;
+    const warmB = accent[2] + (accentBright[2] - accent[2]) * dist * 0.7;
+    const flare = Math.exp(-Math.abs(uy - (-0.2 + ux * 0.3)) * 15) * leak * 0.3;
+    const [fr, fg, fb] = sampleRgb48le(from2, ux, uy, w, h);
+    const fromR = fr / 65535;
+    const fromG = fg / 65535;
+    const fromB = fb / 65535;
+    const overR = aces(fromR + warmR * leak * 3 + accentBright[0] * flare);
+    const overG = aces(fromG + warmG * leak * 3 + accentBright[1] * flare);
+    const overB = aces(fromB + warmB * leak * 3 + accentBright[2] * flare);
+    const [toR, toG, toB] = sampleRgb48le(to, ux, uy, w, h);
+    const blend = smoothstep(0.15, 0.85, p);
+    out.writeUInt16LE(clamp16(mix16(Math.round(overR * 65535), toR, blend)), o);
+    out.writeUInt16LE(clamp16(mix16(Math.round(overG * 65535), toG, blend)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(Math.round(overB * 65535), toB, blend)), o + 4);
+  }
+};
+TRANSITIONS["light-leak"] = lightLeak;
+var crossWarpMorph = (from2, to, out, w, h, p) => {
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const dispX = fbm(ux * 3, uy * 3) - 0.5;
+    const dispY = fbm(ux * 3 + 7.3, uy * 3 + 3.7) - 0.5;
+    const fromUx = Math.max(0, Math.min(1, ux + dispX * p * 0.5));
+    const fromUy = Math.max(0, Math.min(1, uy + dispY * p * 0.5));
+    const toUx = Math.max(0, Math.min(1, ux - dispX * (1 - p) * 0.5));
+    const toUy = Math.max(0, Math.min(1, uy - dispY * (1 - p) * 0.5));
+    const [fromR, fromG, fromB] = sampleRgb48le(from2, fromUx, fromUy, w, h);
+    const [toR, toG, toB] = sampleRgb48le(to, toUx, toUy, w, h);
+    const n = fbm(ux * 4 + 3.1, uy * 4 + 1.7);
+    const blend = smoothstep(0.4, 0.6, n + p * 1.2 - 0.6);
+    out.writeUInt16LE(clamp16(mix16(fromR, toR, blend)), o);
+    out.writeUInt16LE(clamp16(mix16(fromG, toG, blend)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(fromB, toB, blend)), o + 4);
+  }
+};
+TRANSITIONS["cross-warp-morph"] = crossWarpMorph;
+var whipPan = (from2, to, out, w, h, p) => {
+  const fromOff = p * 1.5;
+  const toOff = (1 - p) * 1.5;
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    let fromR = 0, fromG = 0, fromB = 0;
+    for (let s = 0; s < 10; s++) {
+      const f = s / 10;
+      const fuv = Math.max(0, Math.min(1, ux + fromOff + p * 0.08 * f));
+      const [r, g, b] = sampleRgb48le(from2, fuv, uy, w, h);
+      fromR += r;
+      fromG += g;
+      fromB += b;
+    }
+    fromR /= 10;
+    fromG /= 10;
+    fromB /= 10;
+    let toR = 0, toG = 0, toB = 0;
+    for (let s = 0; s < 10; s++) {
+      const f = s / 10;
+      const tuv = Math.max(0, Math.min(1, ux - toOff - (1 - p) * 0.08 * f));
+      const [r, g, b] = sampleRgb48le(to, tuv, uy, w, h);
+      toR += r;
+      toG += g;
+      toB += b;
+    }
+    toR /= 10;
+    toG /= 10;
+    toB /= 10;
+    out.writeUInt16LE(clamp16(mix16(Math.round(fromR), Math.round(toR), p)), o);
+    out.writeUInt16LE(clamp16(mix16(Math.round(fromG), Math.round(toG), p)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(Math.round(fromB), Math.round(toB), p)), o + 4);
+  }
+};
+TRANSITIONS["whip-pan"] = whipPan;
+var cinematicZoom = (from2, to, out, w, h, p) => {
+  const fromS = p * 0.08;
+  const toS = (1 - p) * 0.06;
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const dx = ux - 0.5;
+    const dy = uy - 0.5;
+    let fr = 0, fg = 0, fb = 0;
+    for (let s = 0; s < 12; s++) {
+      const f = s / 12;
+      const rr = sampleRgb48le(
+        from2,
+        ux - dx * fromS * 1.06 * f,
+        uy - dy * fromS * 1.06 * f,
+        w,
+        h
+      )[0];
+      const gg = sampleRgb48le(from2, ux - dx * fromS * f, uy - dy * fromS * f, w, h)[1];
+      const bb = sampleRgb48le(
+        from2,
+        ux - dx * fromS * 0.94 * f,
+        uy - dy * fromS * 0.94 * f,
+        w,
+        h
+      )[2];
+      fr += rr;
+      fg += gg;
+      fb += bb;
+    }
+    fr /= 12;
+    fg /= 12;
+    fb /= 12;
+    let tr = 0, tg = 0, tb = 0;
+    for (let s = 0; s < 12; s++) {
+      const f = s / 12;
+      const rr = sampleRgb48le(to, ux + dx * toS * 1.06 * f, uy + dy * toS * 1.06 * f, w, h)[0];
+      const gg = sampleRgb48le(to, ux + dx * toS * f, uy + dy * toS * f, w, h)[1];
+      const bb = sampleRgb48le(to, ux + dx * toS * 0.94 * f, uy + dy * toS * 0.94 * f, w, h)[2];
+      tr += rr;
+      tg += gg;
+      tb += bb;
+    }
+    tr /= 12;
+    tg /= 12;
+    tb /= 12;
+    out.writeUInt16LE(clamp16(mix16(Math.round(fr), Math.round(tr), p)), o);
+    out.writeUInt16LE(clamp16(mix16(Math.round(fg), Math.round(tg), p)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(Math.round(fb), Math.round(tb), p)), o + 4);
+  }
+};
+TRANSITIONS["cinematic-zoom"] = cinematicZoom;
+var gravitationalLens = (from2, to, out, w, h, p) => {
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const uvx = ux - 0.5;
+    const uvy = uy - 0.5;
+    const dist = Math.sqrt(uvx * uvx + uvy * uvy);
+    const pull = p * 2;
+    const warpStr = pull * 0.3 / (dist + 0.1);
+    const warpedX = Math.max(0, Math.min(1, ux - uvx * warpStr));
+    const warpedY = Math.max(0, Math.min(1, uy - uvy * warpStr));
+    const [, ag] = sampleRgb48le(from2, warpedX, warpedY, w, h);
+    const horizon = smoothstep(0, 0.3, dist / (1 - p * 0.85 + 1e-3));
+    const shift = pull * 0.02 / (dist + 0.2);
+    const rSampX = Math.max(0, Math.min(1, ux - uvx * (warpStr + shift)));
+    const rSampY = Math.max(0, Math.min(1, uy - uvy * (warpStr + shift)));
+    const bSampX = Math.max(0, Math.min(1, ux - uvx * (warpStr - shift)));
+    const bSampY = Math.max(0, Math.min(1, uy - uvy * (warpStr - shift)));
+    const ar = sampleRgb48le(from2, rSampX, rSampY, w, h)[0];
+    const ab = sampleRgb48le(from2, bSampX, bSampY, w, h)[2];
+    const lensedR = Math.round(ar * horizon);
+    const lensedG = Math.round(ag * horizon);
+    const lensedB = Math.round(ab * horizon);
+    const [toR, toG, toB] = sampleRgb48le(to, ux, uy, w, h);
+    const blend = smoothstep(0.3, 0.9, p);
+    out.writeUInt16LE(clamp16(mix16(lensedR, toR, blend)), o);
+    out.writeUInt16LE(clamp16(mix16(lensedG, toG, blend)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(lensedB, toB, blend)), o + 4);
+  }
+};
+TRANSITIONS["gravitational-lens"] = gravitationalLens;
+var rippleWaves = (from2, to, out, w, h, p) => {
+  const accentBright = [65535, 55e3, 35e3];
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const uvx = ux - 0.5;
+    const uvy = uy - 0.5;
+    const dist = Math.sqrt(uvx * uvx + uvy * uvy);
+    const nux = uvx + 1e-3;
+    const nuy = uvy + 1e-3;
+    const nlen = Math.sqrt(nux * nux + nuy * nuy);
+    const dirx = nux / nlen;
+    const diry = nuy / nlen;
+    const fromAmp = p * 0.04;
+    const fw1 = Math.exp(Math.sin(dist * 25 - p * 12) - 1);
+    const fw2 = Math.exp(Math.sin(dist * 50 - p * 18) - 1) * 0.5;
+    const fromUx = Math.max(0, Math.min(1, ux + dirx * (fw1 + fw2) * fromAmp));
+    const fromUy = Math.max(0, Math.min(1, uy + diry * (fw1 + fw2) * fromAmp));
+    const toAmp = (1 - p) * 0.04;
+    const tw1 = Math.exp(Math.sin(dist * 25 + p * 12) - 1);
+    const tw2 = Math.exp(Math.sin(dist * 50 + p * 18) - 1) * 0.5;
+    const toUx = Math.max(0, Math.min(1, ux - dirx * (tw1 + tw2) * toAmp));
+    const toUy = Math.max(0, Math.min(1, uy - diry * (tw1 + tw2) * toAmp));
+    const [fromR, fromG, fromB] = sampleRgb48le(from2, fromUx, fromUy, w, h);
+    const [toR, toG, toB] = sampleRgb48le(to, toUx, toUy, w, h);
+    const peak = fw1 * p;
+    const tintR = accentBright[0] * peak * 0.1;
+    const tintG = accentBright[1] * peak * 0.1;
+    const tintB = accentBright[2] * peak * 0.1;
+    out.writeUInt16LE(clamp16(mix16(Math.round(fromR + tintR), toR, p)), o);
+    out.writeUInt16LE(clamp16(mix16(Math.round(fromG + tintG), toG, p)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(Math.round(fromB + tintB), toB, p)), o + 4);
+  }
+};
+TRANSITIONS["ripple-waves"] = rippleWaves;
+var swirlVortex = (from2, to, out, w, h, p) => {
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const uvx = ux - 0.5;
+    const uvy = uy - 0.5;
+    const dist = Math.sqrt(uvx * uvx + uvy * uvy);
+    const warp = fbm(ux * 4, uy * 4) * 0.5;
+    const fromAng = p * (1 - dist) * 10 + warp * p * 3;
+    const fs8 = Math.sin(fromAng);
+    const fc = Math.cos(fromAng);
+    const fromUx = Math.max(0, Math.min(1, uvx * fc - uvy * fs8 + 0.5));
+    const fromUy = Math.max(0, Math.min(1, uvx * fs8 + uvy * fc + 0.5));
+    const toAng = -(1 - p) * (1 - dist) * 10 - warp * (1 - p) * 3;
+    const ts = Math.sin(toAng);
+    const tc = Math.cos(toAng);
+    const toUx = Math.max(0, Math.min(1, uvx * tc - uvy * ts + 0.5));
+    const toUy = Math.max(0, Math.min(1, uvx * ts + uvy * tc + 0.5));
+    const [fromR, fromG, fromB] = sampleRgb48le(from2, fromUx, fromUy, w, h);
+    const [toR, toG, toB] = sampleRgb48le(to, toUx, toUy, w, h);
+    out.writeUInt16LE(clamp16(mix16(fromR, toR, p)), o);
+    out.writeUInt16LE(clamp16(mix16(fromG, toG, p)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(fromB, toB, p)), o + 4);
+  }
+};
+TRANSITIONS["swirl-vortex"] = swirlVortex;
+var thermalDistortion = (from2, to, out, w, h, p) => {
+  const accentBright = [65535, 55e3, 35e3];
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const heat = p * 1.5;
+    const yFade = smoothstep(1, 0, uy);
+    const shimmer = Math.sin(uy * 40 + fbm(ux * 6, uy * 6) * 8) * fbm(ux * 3 + 0, uy * 3 + p * 2);
+    const dispX = shimmer * heat * 0.03 * yFade;
+    const fromUx = Math.max(0, Math.min(1, ux + dispX));
+    const [fromR, fromG, fromB] = sampleRgb48le(from2, fromUx, uy, w, h);
+    const invShimmer = Math.sin(uy * 40 + fbm(ux * 6 + 3, uy * 6 + 3) * 8) * fbm(ux * 3 + 3, uy * 3 + p * 2);
+    const dispX2 = invShimmer * (1 - p) * 0.03 * yFade;
+    const toUx = Math.max(0, Math.min(1, ux + dispX2));
+    const [toR, toG, toB] = sampleRgb48le(to, toUx, uy, w, h);
+    const haze = heat * yFade * 0.15 * (1 - p);
+    out.writeUInt16LE(clamp16(mix16(fromR, toR, p) + Math.round(accentBright[0] * haze)), o);
+    out.writeUInt16LE(clamp16(mix16(fromG, toG, p) + Math.round(accentBright[1] * haze)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(fromB, toB, p) + Math.round(accentBright[2] * haze)), o + 4);
+  }
+};
+TRANSITIONS["thermal-distortion"] = thermalDistortion;
+var domainWarp = (from2, to, out, w, h, p) => {
+  const accentDark = [25e3, 8e3, 2e3];
+  const accentBright = [65535, 55e3, 35e3];
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const qx = fbm(ux * 3, uy * 3);
+    const qy = fbm(ux * 3 + 5.2, uy * 3 + 1.3);
+    const rx = fbm(ux * 3 + qx * 4 + 1.7, uy * 3 + qy * 4 + 9.2);
+    const ry = fbm(ux * 3 + qx * 4 + 8.3, uy * 3 + qy * 4 + 2.8);
+    const n = fbm(ux * 3 + rx * 2, uy * 3 + ry * 2);
+    const warpDirX = (qx - 0.5) * 0.4;
+    const warpDirY = (qy - 0.5) * 0.4;
+    const aUx = Math.max(0, Math.min(1, ux + warpDirX * p));
+    const aUy = Math.max(0, Math.min(1, uy + warpDirY * p));
+    const bUx = Math.max(0, Math.min(1, ux - warpDirX * (1 - p)));
+    const bUy = Math.max(0, Math.min(1, uy - warpDirY * (1 - p)));
+    const [aR, aG, aB] = sampleRgb48le(from2, aUx, aUy, w, h);
+    const [bR, bG, bB] = sampleRgb48le(to, bUx, bUy, w, h);
+    const e = smoothstep(p - 0.08, p + 0.08, n);
+    const ed = Math.abs(n - p);
+    const pStep = p >= 1 ? 1 : 0;
+    const em = smoothstep(0.1, 0, ed) * (1 - pStep);
+    const ecBlend = smoothstep(0, 0.1, ed);
+    const ecR = accentDark[0] + (accentBright[0] - accentDark[0]) * (1 - ecBlend);
+    const ecG = accentDark[1] + (accentBright[1] - accentDark[1]) * (1 - ecBlend);
+    const ecB = accentDark[2] + (accentBright[2] - accentDark[2]) * (1 - ecBlend);
+    out.writeUInt16LE(clamp16(mix16(bR, aR, e) + Math.round(ecR * em * 2)), o);
+    out.writeUInt16LE(clamp16(mix16(bG, aG, e) + Math.round(ecG * em * 2)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(bB, aB, e) + Math.round(ecB * em * 2)), o + 4);
+  }
+};
+TRANSITIONS["domain-warp"] = domainWarp;
+function ridged(px, py) {
+  let value = 0;
+  let amplitude = 0.5;
+  let x = px;
+  let y = py;
+  for (let i = 0; i < 5; i++) {
+    value += amplitude * Math.abs(vnoise(x, y) * 2 - 1);
+    const nx = ROT_A * x - ROT_B * y;
+    const ny = ROT_B * x + ROT_A * y;
+    x = nx * 2.02;
+    y = ny * 2.02;
+    amplitude *= 0.5;
+  }
+  return value;
+}
+var ridgedBurn = (from2, to, out, w, h, p) => {
+  const accent = [5e4, 25e3, 5e3];
+  const accentDark = [25e3, 8e3, 2e3];
+  const accentBright = [65535, 55e3, 35e3];
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const [aR, aG, aB] = sampleRgb48le(from2, ux, uy, w, h);
+    const [bR, bG, bB] = sampleRgb48le(to, ux, uy, w, h);
+    const n = ridged(ux * 4, uy * 4);
+    const e = smoothstep(p - 0.04, p + 0.04, n);
+    const heat = smoothstep(0.12, 0, Math.abs(n - p));
+    const pStep = p >= 1 ? 1 : 0;
+    const heatMasked = heat * (1 - pStep);
+    let burnR = accentDark[0] + (accent[0] - accentDark[0]) * smoothstep(0, 0.25, heatMasked);
+    let burnG = accentDark[1] + (accent[1] - accentDark[1]) * smoothstep(0, 0.25, heatMasked);
+    let burnB = accentDark[2] + (accent[2] - accentDark[2]) * smoothstep(0, 0.25, heatMasked);
+    const blend2 = smoothstep(0.25, 0.5, heatMasked);
+    burnR = burnR + (accentBright[0] - burnR) * blend2;
+    burnG = burnG + (accentBright[1] - burnG) * blend2;
+    burnB = burnB + (accentBright[2] - burnB) * blend2;
+    const blend3 = smoothstep(0.5, 1, heatMasked);
+    burnR = burnR + (65535 - burnR) * blend3;
+    burnG = burnG + (65535 - burnG) * blend3;
+    burnB = burnB + (65535 - burnB) * blend3;
+    const sparks = (vnoise(ux * 80, uy * 80) >= 0.92 ? 1 : 0) * heatMasked * 3;
+    out.writeUInt16LE(
+      clamp16(
+        mix16(bR, aR, e) + Math.round(burnR * heatMasked * 3.5) + Math.round(accentBright[0] * sparks)
+      ),
+      o
+    );
+    out.writeUInt16LE(
+      clamp16(
+        mix16(bG, aG, e) + Math.round(burnG * heatMasked * 3.5) + Math.round(accentBright[1] * sparks)
+      ),
+      o + 2
+    );
+    out.writeUInt16LE(
+      clamp16(
+        mix16(bB, aB, e) + Math.round(burnB * heatMasked * 3.5) + Math.round(accentBright[2] * sparks)
+      ),
+      o + 4
+    );
+  }
+};
+TRANSITIONS["ridged-burn"] = ridgedBurn;
+
 // src/services/renderOrchestrator.ts
 import { join as join15, dirname as dirname10, resolve as resolve10 } from "path";
 import { randomUUID } from "crypto";
@@ -106106,6 +107518,10 @@ var RENDER_MODE_SCRIPT = `(function() {
   }
   waitForPlayer();
 })();`;
+var HF_EARLY_STUB = `(function() {
+  if (typeof window === "undefined") return;
+  if (!window.__hf) window.__hf = {};
+})();`;
 var HF_BRIDGE_SCRIPT = `(function() {
   var __realSetInterval =
     window.__HF_VIRTUAL_TIME__ && typeof window.__HF_VIRTUAL_TIME__.originalSetInterval === "function"
@@ -106151,20 +107567,24 @@ var HF_BRIDGE_SCRIPT = `(function() {
     if (!p || typeof p.renderSeek !== "function" || typeof p.getDuration !== "function") {
       return false;
     }
-    window.__hf = {
-      get duration() {
+    var hf = window.__hf || {};
+    Object.defineProperty(hf, "duration", {
+      configurable: true,
+      enumerable: true,
+      get: function() {
         var d = p.getDuration();
         return d > 0 ? d : getDeclaredDuration();
       },
-      seek: function(t) {
-        p.renderSeek(t);
-        var nextTimeMs = (Math.max(0, Number(t) || 0)) * 1000;
-        if (window.__HF_VIRTUAL_TIME__ && typeof window.__HF_VIRTUAL_TIME__.seekToTime === "function") {
-          window.__HF_VIRTUAL_TIME__.seekToTime(nextTimeMs);
-        }
-        seekSameOriginChildFrames(window, nextTimeMs);
-      },
+    });
+    hf.seek = function(t) {
+      p.renderSeek(t);
+      var nextTimeMs = (Math.max(0, Number(t) || 0)) * 1000;
+      if (window.__HF_VIRTUAL_TIME__ && typeof window.__HF_VIRTUAL_TIME__.seekToTime === "function") {
+        window.__HF_VIRTUAL_TIME__.seekToTime(nextTimeMs);
+      }
+      seekSameOriginChildFrames(window, nextTimeMs);
     };
+    window.__hf = hf;
     return true;
   }
   if (bridge()) return;
@@ -106246,7 +107666,7 @@ ${headTags}`);
 }
 function createFileServer2(options) {
   const { projectDir, compiledDir, port = 0, stripEmbeddedRuntime = true } = options;
-  const preHeadScripts = options.preHeadScripts ?? [];
+  const preHeadScripts = [HF_EARLY_STUB, ...options.preHeadScripts ?? []];
   const headScripts = options.headScripts ?? [getVerifiedHyperframeRuntimeSource()];
   const bodyScripts = options.bodyScripts ?? [RENDER_MODE_SCRIPT, HF_BRIDGE_SCRIPT];
   const app = new Hono2();
@@ -107506,6 +108926,24 @@ async function safeCleanup(label, fn, log = defaultLogger) {
     });
   }
 }
+var frameDirMaxIndexCache = /* @__PURE__ */ new Map();
+var FRAME_FILENAME_RE = /^frame_(\d+)\.png$/;
+function getMaxFrameIndex(frameDir) {
+  const cached = frameDirMaxIndexCache.get(frameDir);
+  if (cached !== void 0) return cached;
+  let max = 0;
+  try {
+    for (const name of readdirSync6(frameDir)) {
+      const m = FRAME_FILENAME_RE.exec(name);
+      if (!m) continue;
+      const n = Number(m[1]);
+      if (Number.isFinite(n) && n > max) max = n;
+    }
+  } catch {
+  }
+  frameDirMaxIndexCache.set(frameDir, max);
+  return max;
+}
 var RenderCancelledError = class extends Error {
   reason;
   constructor(message = "render_cancelled", reason = "aborted") {
@@ -107607,6 +109045,63 @@ function applyRenderModeHints(cfg, compiled, log = defaultLogger) {
     reasons: compiled.renderModeHints.reasons.map((reason) => reason.message)
   });
 }
+function blitHdrVideoLayer(canvas, el, time, fps, hdrFrameDirs, hdrStartTimes, width, height, log, sourceTransfer, targetTransfer) {
+  const frameDir = hdrFrameDirs.get(el.id);
+  const startTime = hdrStartTimes.get(el.id);
+  if (!frameDir || startTime === void 0) {
+    return;
+  }
+  const videoFrameIndex = Math.round((time - startTime) * fps) + 1;
+  if (videoFrameIndex < 1) return;
+  const maxIndex = getMaxFrameIndex(frameDir);
+  const effectiveIndex = maxIndex > 0 ? Math.min(videoFrameIndex, maxIndex) : videoFrameIndex;
+  const framePath = join15(frameDir, `frame_${String(effectiveIndex).padStart(4, "0")}.png`);
+  if (!existsSync15(framePath)) {
+    return;
+  }
+  try {
+    const { data: hdrRgb, width: srcW, height: srcH } = decodePngToRgb48le(readFileSync9(framePath));
+    if (sourceTransfer && targetTransfer && sourceTransfer !== targetTransfer) {
+      convertTransfer(hdrRgb, sourceTransfer, targetTransfer);
+    }
+    const viewportMatrix = parseTransformMatrix(el.transform);
+    const br = el.borderRadius;
+    const hasBorderRadius = br[0] > 0 || br[1] > 0 || br[2] > 0 || br[3] > 0;
+    const borderRadiusParam = hasBorderRadius ? br : void 0;
+    if (viewportMatrix) {
+      blitRgb48leAffine(
+        canvas,
+        hdrRgb,
+        viewportMatrix,
+        srcW,
+        srcH,
+        width,
+        height,
+        el.opacity < 0.999 ? el.opacity : void 0,
+        borderRadiusParam
+      );
+    } else {
+      blitRgb48leRegion(
+        canvas,
+        hdrRgb,
+        el.x,
+        el.y,
+        srcW,
+        srcH,
+        width,
+        height,
+        el.opacity < 0.999 ? el.opacity : void 0,
+        borderRadiusParam
+      );
+    }
+  } catch (err) {
+    if (log) {
+      log.debug(`HDR blit failed for ${el.id}`, {
+        error: err instanceof Error ? err.message : String(err)
+      });
+    }
+  }
+}
 function createRenderJob(config2) {
   return {
     id: randomUUID(),
@@ -107877,6 +109372,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
     perfStages.browserProbeMs = Date.now() - probeStart;
     job.duration = composition.duration;
     job.totalFrames = Math.ceil(composition.duration * job.config.fps);
+    const totalFrames = job.totalFrames;
     if (job.duration <= 0) {
       const diagnostics = [];
       try {
@@ -107905,7 +109401,10 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
             }
           }
         }
-      } catch {
+      } catch (err) {
+        log.warn("Failed to gather browser diagnostics for zero-duration composition", {
+          error: err instanceof Error ? err.message : String(err)
+        });
         diagnostics.push("(Could not gather browser diagnostics \u2014 page may have crashed)");
       }
       const hint = diagnostics.length > 0 ? "\n\nDiagnostics:\n  - " + diagnostics.join("\n  - ") : "\n\nCheck that GSAP timelines are registered on window.__timelines.";
@@ -107929,8 +109428,28 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
     updateJobStatus(job, "preprocessing", "Extracting video frames", 10, onProgress);
     let frameLookup = null;
     const compiledDir = join15(workDir, "compiled");
+    let extractionResult = null;
+    const nativeHdrVideoIds = /* @__PURE__ */ new Set();
+    const videoTransfers = /* @__PURE__ */ new Map();
+    if (job.config.hdr && composition.videos.length > 0) {
+      await Promise.all(
+        composition.videos.map(async (v) => {
+          let videoPath = v.src;
+          if (!videoPath.startsWith("/")) {
+            const fromCompiled = existsSync15(join15(compiledDir, videoPath)) ? join15(compiledDir, videoPath) : join15(projectDir, videoPath);
+            videoPath = fromCompiled;
+          }
+          if (!existsSync15(videoPath)) return;
+          const meta = await extractVideoMetadata(videoPath);
+          if (isHdrColorSpace(meta.colorSpace)) {
+            nativeHdrVideoIds.add(v.id);
+            videoTransfers.set(v.id, detectTransfer(meta.colorSpace));
+          }
+        })
+      );
+    }
     if (composition.videos.length > 0) {
-      const extractionResult = await extractAllVideoFrames(
+      extractionResult = await extractAllVideoFrames(
         composition.videos,
         projectDir,
         { fps: job.config.fps, outputDir: join15(workDir, "video-frames") },
@@ -107965,6 +109484,29 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
     } else {
       perfStages.videoExtractMs = Date.now() - stage2Start;
     }
+    let effectiveHdr;
+    if (job.config.hdr && frameLookup) {
+      const colorSpaces = (extractionResult?.extracted ?? []).map((ext) => ext.metadata.colorSpace);
+      const info = analyzeCompositionHdr(colorSpaces);
+      if (info.hasHdr && info.dominantTransfer) {
+        effectiveHdr = { transfer: info.dominantTransfer };
+      }
+    }
+    if (job.config.hdr && !effectiveHdr && nativeHdrVideoIds.size > 0) {
+      const firstTransfer = videoTransfers.values().next().value;
+      if (firstTransfer) {
+        effectiveHdr = { transfer: firstTransfer };
+      }
+    }
+    if (effectiveHdr && outputFormat !== "mp4") {
+      log.info(`[Render] HDR source detected but format is ${outputFormat} \u2014 using SDR`);
+      effectiveHdr = void 0;
+    }
+    if (effectiveHdr) {
+      log.info(
+        `[Render] HDR source detected \u2014 output: ${effectiveHdr.transfer.toUpperCase()} (BT.2020, 10-bit H.265)`
+      );
+    }
     const stage3Start = Date.now();
     updateJobStatus(job, "preprocessing", "Processing audio tracks", 20, onProgress);
     const audioOutputPath = join15(workDir, "audio.aac");
@@ -108006,222 +109548,655 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       format: needsAlpha ? "png" : "jpeg",
       quality: needsAlpha ? void 0 : job.config.quality === "draft" ? 80 : 95
     };
-    const workerCount = calculateOptimalWorkers(job.totalFrames, job.config.workers, cfg);
+    const workerCount = calculateOptimalWorkers(totalFrames, job.config.workers, cfg);
     const FORMAT_EXT = { mp4: ".mp4", webm: ".webm", mov: ".mov" };
     const videoExt = FORMAT_EXT[outputFormat] ?? ".mp4";
     const videoOnlyPath = join15(workDir, `video-only${videoExt}`);
-    const preset = getEncoderPreset(job.config.quality, outputFormat);
-    const effectiveQuality = job.config.crf ?? preset.quality;
-    const effectiveBitrate = job.config.videoBitrate;
-    const baseEncoderOpts = {
-      fps: job.config.fps,
-      width,
-      height,
-      codec: preset.codec,
-      preset: preset.preset,
-      quality: effectiveQuality,
-      bitrate: effectiveBitrate,
-      pixelFormat: preset.pixelFormat,
-      useGpu: job.config.useGpu
-    };
+    const hasHdrContent = effectiveHdr && nativeHdrVideoIds.size > 0;
+    const encoderHdr = hasHdrContent ? effectiveHdr : void 0;
+    const preset = getEncoderPreset(job.config.quality, outputFormat, encoderHdr);
     job.framesRendered = 0;
-    let streamingEncoder = null;
-    if (enableStreamingEncode) {
-      streamingEncoder = await spawnStreamingEncoder(
+    if (hasHdrContent) {
+      log.info("[Render] HDR layered composite: z-ordered DOM + native HLG video layers");
+      const hdrVideoIds = composition.videos.filter((v) => nativeHdrVideoIds.has(v.id)).map((v) => v.id);
+      const hdrVideoSrcPaths = /* @__PURE__ */ new Map();
+      for (const v of composition.videos) {
+        if (!hdrVideoIds.includes(v.id)) continue;
+        let srcPath = v.src;
+        if (!srcPath.startsWith("/")) {
+          const fromCompiled = join15(compiledDir, srcPath);
+          srcPath = existsSync15(fromCompiled) ? fromCompiled : join15(projectDir, srcPath);
+        }
+        hdrVideoSrcPaths.set(v.id, srcPath);
+      }
+      if (!fileServer) throw new Error("fileServer must be initialized before HDR compositing");
+      const domSession = await createCaptureSession(
+        fileServer.url,
+        framesDir,
+        captureOptions,
+        createVideoFrameInjector(frameLookup),
+        cfg
+      );
+      await initializeSession(domSession);
+      assertNotAborted();
+      lastBrowserConsole = domSession.browserConsoleBuffer;
+      await initTransparentBackground(domSession.page);
+      const transitionMeta = await domSession.page.evaluate(() => {
+        return window.__hf?.transitions ?? [];
+      });
+      const sceneElements = await domSession.page.evaluate(() => {
+        const scenes = document.querySelectorAll(".scene");
+        const map2 = {};
+        for (const scene of scenes) {
+          const els = scene.querySelectorAll("[data-start]");
+          map2[scene.id] = Array.from(els).map((e) => e.id);
+        }
+        return map2;
+      });
+      const transitionRanges = transitionMeta.map((t) => ({
+        ...t,
+        startFrame: Math.floor(t.time * job.config.fps),
+        endFrame: Math.ceil((t.time + t.duration) * job.config.fps)
+      }));
+      if (transitionRanges.length > 0) {
+        log.info("[Render] Detected shader transitions for HDR compositing", {
+          count: transitionRanges.length,
+          transitions: transitionRanges.map((t) => ({
+            shader: t.shader,
+            from: t.fromScene,
+            to: t.toScene,
+            frames: `${t.startFrame}-${t.endFrame}`
+          }))
+        });
+      }
+      const hdrEncoder = await spawnStreamingEncoder(
         videoOnlyPath,
         {
-          ...baseEncoderOpts,
-          imageFormat: captureOptions.format || "jpeg"
+          fps: job.config.fps,
+          width,
+          height,
+          codec: preset.codec,
+          preset: preset.preset,
+          quality: preset.quality,
+          pixelFormat: preset.pixelFormat,
+          hdr: preset.hdr,
+          rawInputFormat: "rgb48le"
         },
-        abortSignal
+        abortSignal,
+        { ffmpegStreamingTimeout: 36e5 }
       );
       assertNotAborted();
-    }
-    if (enableStreamingEncode && streamingEncoder) {
-      const reorderBuffer = createFrameReorderBuffer(0, job.totalFrames);
-      const currentEncoder = streamingEncoder;
-      if (workerCount > 1) {
-        const tasks = distributeFrames(job.totalFrames, workerCount, workDir);
-        const onFrameBuffer = async (frameIndex, buffer) => {
-          await reorderBuffer.waitForFrame(frameIndex);
-          currentEncoder.writeFrame(buffer);
-          reorderBuffer.advanceTo(frameIndex + 1);
+      const hdrExtractionDims = /* @__PURE__ */ new Map();
+      const hdrVideoStartTimes = /* @__PURE__ */ new Map();
+      for (const v of composition.videos) {
+        if (hdrVideoIds.includes(v.id)) {
+          hdrVideoStartTimes.set(v.id, v.start);
+        }
+      }
+      const uniqueStartTimes = [...new Set(hdrVideoStartTimes.values())].sort((a, b) => a - b);
+      for (const seekTime of uniqueStartTimes) {
+        await domSession.page.evaluate((t) => {
+          if (window.__hf && typeof window.__hf.seek === "function") window.__hf.seek(t);
+        }, seekTime);
+        if (domSession.onBeforeCapture) {
+          await domSession.onBeforeCapture(domSession.page, seekTime);
+        }
+        const stacking = await queryElementStacking(domSession.page, nativeHdrVideoIds);
+        for (const el of stacking) {
+          if (el.isHdr && el.layoutWidth > 0 && el.layoutHeight > 0 && !hdrExtractionDims.has(el.id)) {
+            hdrExtractionDims.set(el.id, { width: el.layoutWidth, height: el.layoutHeight });
+          }
+        }
+      }
+      const hdrFrameDirs = /* @__PURE__ */ new Map();
+      for (const [videoId, srcPath] of hdrVideoSrcPaths) {
+        const video = composition.videos.find((v) => v.id === videoId);
+        if (!video) continue;
+        const frameDir = join15(framesDir, `hdr_${videoId}`);
+        mkdirSync10(frameDir, { recursive: true });
+        const duration = video.end - video.start;
+        const dims = hdrExtractionDims.get(videoId) ?? { width, height };
+        const ffmpegArgs = [
+          "-ss",
+          String(video.mediaStart),
+          "-i",
+          srcPath,
+          "-t",
+          String(duration),
+          "-r",
+          String(job.config.fps),
+          "-vf",
+          `scale=${dims.width}:${dims.height}:force_original_aspect_ratio=increase,crop=${dims.width}:${dims.height}`,
+          "-pix_fmt",
+          "rgb48le",
+          "-c:v",
+          "png",
+          "-y",
+          join15(frameDir, "frame_%04d.png")
+        ];
+        const result = await runFfmpeg(ffmpegArgs, { signal: abortSignal });
+        if (!result.success) {
+          log.warn("HDR frame pre-extraction failed; loop will fill with black", {
+            videoId,
+            srcPath,
+            stderr: result.stderr.slice(-400)
+          });
+        }
+        hdrFrameDirs.set(videoId, frameDir);
+      }
+      assertNotAborted();
+      try {
+        let countNonZeroAlpha2 = function(rgba) {
+          let n = 0;
+          for (let p = 3; p < rgba.length; p += 4) {
+            if (rgba[p] !== 0) n++;
+          }
+          return n;
+        }, countNonZeroRgb482 = function(buf) {
+          let n = 0;
+          for (let p = 0; p < buf.length; p += 6) {
+            if (buf[p] !== 0 || buf[p + 1] !== 0 || buf[p + 2] !== 0) n++;
+          }
+          return n;
         };
-        await executeParallelCapture(
-          fileServer.url,
-          workDir,
-          tasks,
-          captureOptions,
-          () => createVideoFrameInjector(frameLookup),
-          abortSignal,
-          (progress) => {
-            job.framesRendered = progress.capturedFrames;
-            const frameProgress = progress.capturedFrames / progress.totalFrames;
-            const progressPct = 25 + frameProgress * 55;
-            if (progress.capturedFrames % 30 === 0 || progress.capturedFrames === progress.totalFrames) {
-              updateJobStatus(
-                job,
-                "rendering",
-                `Streaming frame ${progress.capturedFrames}/${progress.totalFrames} (${workerCount} workers)`,
-                Math.round(progressPct),
-                onProgress
+        var countNonZeroAlpha = countNonZeroAlpha2, countNonZeroRgb48 = countNonZeroRgb482;
+        const beforeCaptureHook = domSession.onBeforeCapture;
+        const cleanedUpVideos = /* @__PURE__ */ new Set();
+        const hdrVideoEndTimes = /* @__PURE__ */ new Map();
+        for (const v of composition.videos) {
+          if (hdrFrameDirs.has(v.id)) {
+            hdrVideoEndTimes.set(v.id, v.end);
+          }
+        }
+        const debugDumpEnabled = process.env.KEEP_TEMP === "1";
+        const debugDumpDir = debugDumpEnabled ? join15(framesDir, "debug-composite") : null;
+        if (debugDumpDir && !existsSync15(debugDumpDir)) {
+          mkdirSync10(debugDumpDir, { recursive: true });
+        }
+        async function compositeToBuffer(canvas, time, fullStacking, elementFilter, debugFrameIndex = -1) {
+          const filteredStacking = elementFilter ? fullStacking.filter((e) => elementFilter.has(e.id)) : fullStacking;
+          const layers = groupIntoLayers(filteredStacking);
+          const shouldLog = debugDumpEnabled && debugFrameIndex >= 0;
+          if (shouldLog) {
+            log.info("[diag] compositeToBuffer plan", {
+              frame: debugFrameIndex,
+              time: time.toFixed(3),
+              filterSize: elementFilter?.size,
+              fullStackingCount: fullStacking.length,
+              filteredCount: filteredStacking.length,
+              layerCount: layers.length,
+              layers: layers.map(
+                (l) => l.type === "hdr" ? {
+                  type: "hdr",
+                  id: l.element.id,
+                  z: l.element.zIndex,
+                  visible: l.element.visible,
+                  opacity: l.element.opacity,
+                  bounds: `${Math.round(l.element.x)},${Math.round(l.element.y)} ${Math.round(l.element.width)}x${Math.round(l.element.height)}`
+                } : { type: "dom", ids: l.elementIds }
+              )
+            });
+          }
+          for (let layerIdx = 0; layerIdx < layers.length; layerIdx++) {
+            const layer = layers[layerIdx];
+            if (layer.type === "hdr") {
+              const before2 = shouldLog ? countNonZeroRgb482(canvas) : 0;
+              blitHdrVideoLayer(
+                canvas,
+                layer.element,
+                time,
+                job.config.fps,
+                hdrFrameDirs,
+                hdrVideoStartTimes,
+                width,
+                height,
+                log,
+                videoTransfers.get(layer.element.id),
+                effectiveHdr?.transfer
               );
+              if (shouldLog) {
+                const after2 = countNonZeroRgb482(canvas);
+                const frameDir = hdrFrameDirs.get(layer.element.id);
+                const startTime = hdrVideoStartTimes.get(layer.element.id) ?? 0;
+                const localTime = time - startTime;
+                const frameNum = Math.floor(localTime * job.config.fps) + 1;
+                const expectedFrame = frameDir ? join15(frameDir, `frame_${String(frameNum).padStart(4, "0")}.png`) : null;
+                log.info("[diag] hdr layer blit", {
+                  frame: debugFrameIndex,
+                  layerIdx,
+                  id: layer.element.id,
+                  pixelsAdded: after2 - before2,
+                  totalNonZero: after2,
+                  startTime,
+                  localTime: localTime.toFixed(3),
+                  hdrFrameNum: frameNum,
+                  expectedFrame,
+                  expectedFrameExists: expectedFrame ? existsSync15(expectedFrame) : false
+                });
+              }
+            } else {
+              const allElementIds = fullStacking.map((e) => e.id);
+              const layerIds = new Set(layer.elementIds);
+              const hideIds = allElementIds.filter((id) => !layerIds.has(id));
+              await domSession.page.evaluate((t) => {
+                if (window.__hf && typeof window.__hf.seek === "function") window.__hf.seek(t);
+              }, time);
+              if (beforeCaptureHook) {
+                await beforeCaptureHook(domSession.page, time);
+              }
+              await applyDomLayerMask(domSession.page, layer.elementIds, hideIds);
+              const domPng = await captureAlphaPng(domSession.page, width, height);
+              await removeDomLayerMask(domSession.page, hideIds);
+              try {
+                const { data: domRgba } = decodePng(domPng);
+                if (!effectiveHdr) {
+                  throw new Error(
+                    "Invariant violation: effectiveHdr is undefined inside HDR layer branch"
+                  );
+                }
+                const before2 = shouldLog ? countNonZeroRgb482(canvas) : 0;
+                const alphaPixels = shouldLog ? countNonZeroAlpha2(domRgba) : 0;
+                blitRgba8OverRgb48le(domRgba, canvas, width, height, effectiveHdr.transfer);
+                if (shouldLog && debugDumpDir) {
+                  const after2 = countNonZeroRgb482(canvas);
+                  const dumpName = `frame_${String(debugFrameIndex).padStart(4, "0")}_layer_${String(layerIdx).padStart(2, "0")}_dom.png`;
+                  const dumpPath = join15(debugDumpDir, dumpName);
+                  writeFileSync4(dumpPath, domPng);
+                  log.info("[diag] dom layer blit", {
+                    frame: debugFrameIndex,
+                    layerIdx,
+                    layerIds: layer.elementIds,
+                    hideCount: hideIds.length,
+                    pngBytes: domPng.length,
+                    alphaPixels,
+                    pixelsAdded: after2 - before2,
+                    totalNonZero: after2,
+                    dumpPath
+                  });
+                }
+              } catch (err) {
+                log.warn("DOM layer decode/blit failed; skipping overlay", {
+                  layerIds: layer.elementIds,
+                  error: err instanceof Error ? err.message : String(err)
+                });
+              }
             }
-          },
-          onFrameBuffer,
-          cfg
-        );
-        if (probeSession) {
-          lastBrowserConsole = probeSession.browserConsoleBuffer;
-          await closeCaptureSession(probeSession);
-          probeSession = null;
-        }
-      } else {
-        const videoInjector = createVideoFrameInjector(frameLookup);
-        const session = probeSession ?? await createCaptureSession(
-          fileServer.url,
-          framesDir,
-          captureOptions,
-          videoInjector,
-          cfg
-        );
-        if (probeSession) {
-          prepareCaptureSessionForReuse(session, framesDir, videoInjector);
-          probeSession = null;
-        }
-        try {
-          if (!session.isInitialized) {
-            await initializeSession(session);
           }
+          if (shouldLog && debugDumpDir) {
+            const finalNonZero = countNonZeroRgb482(canvas);
+            log.info("[diag] compositeToBuffer end", {
+              frame: debugFrameIndex,
+              finalNonZeroPixels: finalNonZero,
+              totalPixels: width * height,
+              coverage: (finalNonZero / (width * height) * 100).toFixed(1) + "%"
+            });
+          }
+        }
+        const bufSize = width * height * 6;
+        const hasTransitions = transitionRanges.length > 0;
+        const transBufferA = hasTransitions ? Buffer.alloc(bufSize) : null;
+        const transBufferB = hasTransitions ? Buffer.alloc(bufSize) : null;
+        const transOutput = hasTransitions ? Buffer.alloc(bufSize) : null;
+        const normalCanvas = Buffer.alloc(bufSize);
+        for (let i = 0; i < totalFrames; i++) {
           assertNotAborted();
-          lastBrowserConsole = session.browserConsoleBuffer;
-          for (let i = 0; i < job.totalFrames; i++) {
-            assertNotAborted();
-            const time = i / job.config.fps;
-            const { buffer } = await captureFrameToBuffer(session, i, time);
-            await reorderBuffer.waitForFrame(i);
-            currentEncoder.writeFrame(buffer);
-            reorderBuffer.advanceTo(i + 1);
-            job.framesRendered = i + 1;
-            const frameProgress = (i + 1) / job.totalFrames;
-            const progress = 25 + frameProgress * 55;
+          const time = i / job.config.fps;
+          await domSession.page.evaluate((t) => {
+            if (window.__hf && typeof window.__hf.seek === "function") window.__hf.seek(t);
+          }, time);
+          if (beforeCaptureHook) {
+            await beforeCaptureHook(domSession.page, time);
+          }
+          const stackingInfo = await queryElementStacking(domSession.page, nativeHdrVideoIds);
+          const activeTransition = transitionRanges.find(
+            (t) => i >= t.startFrame && i <= t.endFrame
+          );
+          if (i % 30 === 0) {
+            const hdrEl = stackingInfo.find((e) => e.isHdr);
+            log.debug("[Render] HDR layer composite frame", {
+              frame: i,
+              time: time.toFixed(2),
+              hdrElement: hdrEl ? { z: hdrEl.zIndex, visible: hdrEl.visible, width: hdrEl.width } : null,
+              stackingCount: stackingInfo.length,
+              activeTransition: activeTransition?.shader
+            });
+          }
+          if (activeTransition && transBufferA && transBufferB && transOutput) {
+            const progress = activeTransition.endFrame === activeTransition.startFrame ? 1 : (i - activeTransition.startFrame) / (activeTransition.endFrame - activeTransition.startFrame);
+            const sceneAIds = new Set(sceneElements[activeTransition.fromScene] ?? []);
+            const sceneBIds = new Set(sceneElements[activeTransition.toScene] ?? []);
+            transBufferA.fill(0);
+            transBufferB.fill(0);
+            for (const [sceneBuf, sceneIds] of [
+              [transBufferA, sceneAIds],
+              [transBufferB, sceneBIds]
+            ]) {
+              await domSession.page.evaluate((t) => {
+                if (window.__hf && typeof window.__hf.seek === "function") window.__hf.seek(t);
+              }, time);
+              if (beforeCaptureHook) {
+                await beforeCaptureHook(domSession.page, time);
+              }
+              for (const el of stackingInfo) {
+                if (!el.isHdr || !sceneIds.has(el.id)) continue;
+                blitHdrVideoLayer(
+                  sceneBuf,
+                  el,
+                  time,
+                  job.config.fps,
+                  hdrFrameDirs,
+                  hdrVideoStartTimes,
+                  width,
+                  height,
+                  log,
+                  videoTransfers.get(el.id),
+                  effectiveHdr?.transfer
+                );
+              }
+              const showIds = Array.from(sceneIds);
+              const hideIds = stackingInfo.map((e) => e.id).filter((id) => !sceneIds.has(id) || nativeHdrVideoIds.has(id));
+              await applyDomLayerMask(domSession.page, showIds, hideIds);
+              const domPng = await captureAlphaPng(domSession.page, width, height);
+              await removeDomLayerMask(domSession.page, hideIds);
+              try {
+                const { data: domRgba } = decodePng(domPng);
+                if (!effectiveHdr) {
+                  throw new Error(
+                    "Invariant violation: effectiveHdr is undefined inside hasHdrVideo branch"
+                  );
+                }
+                blitRgba8OverRgb48le(
+                  domRgba,
+                  sceneBuf,
+                  width,
+                  height,
+                  effectiveHdr.transfer
+                );
+              } catch (err) {
+                log.warn("DOM layer decode/blit failed; skipping overlay for transition scene", {
+                  frameIndex: i,
+                  sceneIds: Array.from(sceneIds),
+                  error: err instanceof Error ? err.message : String(err)
+                });
+              }
+            }
+            const transitionFn = TRANSITIONS[activeTransition.shader] ?? crossfade;
+            transitionFn(transBufferA, transBufferB, transOutput, width, height, progress);
+            hdrEncoder.writeFrame(transOutput);
+          } else {
+            normalCanvas.fill(0);
+            await compositeToBuffer(normalCanvas, time, stackingInfo, void 0, i);
+            if (debugDumpEnabled && debugDumpDir && i % 30 === 0) {
+              const previewPath = join15(
+                debugDumpDir,
+                `frame_${String(i).padStart(4, "0")}_final_rgb48le.bin`
+              );
+              writeFileSync4(previewPath, normalCanvas);
+            }
+            hdrEncoder.writeFrame(normalCanvas);
+          }
+          if (process.env.KEEP_TEMP !== "1") {
+            for (const [videoId, endTime] of hdrVideoEndTimes) {
+              if (time > endTime && !cleanedUpVideos.has(videoId)) {
+                const stillNeeded = activeTransition && (sceneElements[activeTransition.fromScene]?.includes(videoId) || sceneElements[activeTransition.toScene]?.includes(videoId));
+                if (!stillNeeded) {
+                  const frameDir = hdrFrameDirs.get(videoId);
+                  if (frameDir) {
+                    try {
+                      rmSync3(frameDir, { recursive: true, force: true });
+                    } catch (err) {
+                      log.warn("Failed to clean up HDR frame directory", {
+                        videoId,
+                        frameDir,
+                        error: err instanceof Error ? err.message : String(err)
+                      });
+                    }
+                  }
+                  cleanedUpVideos.add(videoId);
+                }
+              }
+            }
+          }
+          job.framesRendered = i + 1;
+          if ((i + 1) % 10 === 0 || i + 1 === totalFrames) {
+            const frameProgress = (i + 1) / totalFrames;
             updateJobStatus(
               job,
               "rendering",
-              `Streaming frame ${i + 1}/${job.totalFrames}`,
-              Math.round(progress),
+              `HDR composite frame ${i + 1}/${job.totalFrames}`,
+              Math.round(25 + frameProgress * 55),
               onProgress
             );
           }
-        } finally {
-          lastBrowserConsole = session.browserConsoleBuffer;
-          await closeCaptureSession(session);
         }
+      } finally {
+        lastBrowserConsole = domSession.browserConsoleBuffer;
+        await closeCaptureSession(domSession);
       }
-      const encodeResult = await currentEncoder.close();
+      const hdrEncodeResult = await hdrEncoder.close();
       assertNotAborted();
-      if (!encodeResult.success) {
-        throw new Error(`Streaming encode failed: ${encodeResult.error}`);
+      if (!hdrEncodeResult.success) {
+        throw new Error(`HDR encode failed: ${hdrEncodeResult.error}`);
       }
       perfStages.captureMs = Date.now() - stage4Start;
-      perfStages.encodeMs = encodeResult.durationMs;
+      perfStages.encodeMs = hdrEncodeResult.durationMs;
     } else {
-      if (workerCount > 1) {
-        const tasks = distributeFrames(job.totalFrames, workerCount, workDir);
-        await executeParallelCapture(
-          fileServer.url,
-          workDir,
-          tasks,
-          captureOptions,
-          () => createVideoFrameInjector(frameLookup),
-          abortSignal,
-          (progress) => {
-            job.framesRendered = progress.capturedFrames;
-            const frameProgress = progress.capturedFrames / progress.totalFrames;
-            const progressPct = 25 + frameProgress * 45;
-            if (progress.capturedFrames % 30 === 0 || progress.capturedFrames === progress.totalFrames) {
+      let streamingEncoder = null;
+      if (enableStreamingEncode) {
+        streamingEncoder = await spawnStreamingEncoder(
+          videoOnlyPath,
+          {
+            fps: job.config.fps,
+            width,
+            height,
+            codec: preset.codec,
+            preset: preset.preset,
+            quality: preset.quality,
+            pixelFormat: preset.pixelFormat,
+            useGpu: job.config.useGpu,
+            imageFormat: captureOptions.format || "jpeg",
+            hdr: preset.hdr
+          },
+          abortSignal
+        );
+        assertNotAborted();
+      }
+      if (enableStreamingEncode && streamingEncoder) {
+        const reorderBuffer = createFrameReorderBuffer(0, totalFrames);
+        const currentEncoder = streamingEncoder;
+        if (workerCount > 1) {
+          const tasks = distributeFrames(job.totalFrames, workerCount, workDir);
+          const onFrameBuffer = async (frameIndex, buffer) => {
+            await reorderBuffer.waitForFrame(frameIndex);
+            currentEncoder.writeFrame(buffer);
+            reorderBuffer.advanceTo(frameIndex + 1);
+          };
+          await executeParallelCapture(
+            fileServer.url,
+            workDir,
+            tasks,
+            captureOptions,
+            () => createVideoFrameInjector(frameLookup),
+            abortSignal,
+            (progress) => {
+              job.framesRendered = progress.capturedFrames;
+              const frameProgress = progress.capturedFrames / progress.totalFrames;
+              const progressPct = 25 + frameProgress * 55;
+              if (progress.capturedFrames % 30 === 0 || progress.capturedFrames === progress.totalFrames) {
+                updateJobStatus(
+                  job,
+                  "rendering",
+                  `Streaming frame ${progress.capturedFrames}/${progress.totalFrames} (${workerCount} workers)`,
+                  Math.round(progressPct),
+                  onProgress
+                );
+              }
+            },
+            onFrameBuffer,
+            cfg
+          );
+          if (probeSession) {
+            lastBrowserConsole = probeSession.browserConsoleBuffer;
+            await closeCaptureSession(probeSession);
+            probeSession = null;
+          }
+        } else {
+          const videoInjector = createVideoFrameInjector(frameLookup);
+          const session = probeSession ?? await createCaptureSession(
+            fileServer.url,
+            framesDir,
+            captureOptions,
+            videoInjector,
+            cfg
+          );
+          if (probeSession) {
+            prepareCaptureSessionForReuse(session, framesDir, videoInjector);
+            probeSession = null;
+          }
+          try {
+            if (!session.isInitialized) {
+              await initializeSession(session);
+            }
+            assertNotAborted();
+            lastBrowserConsole = session.browserConsoleBuffer;
+            for (let i = 0; i < totalFrames; i++) {
+              assertNotAborted();
+              const time = i / job.config.fps;
+              const { buffer } = await captureFrameToBuffer(session, i, time);
+              await reorderBuffer.waitForFrame(i);
+              currentEncoder.writeFrame(buffer);
+              reorderBuffer.advanceTo(i + 1);
+              job.framesRendered = i + 1;
+              const frameProgress = (i + 1) / totalFrames;
+              const progress = 25 + frameProgress * 55;
               updateJobStatus(
                 job,
                 "rendering",
-                `Capturing frame ${progress.capturedFrames}/${progress.totalFrames} (${workerCount} workers)`,
-                Math.round(progressPct),
+                `Streaming frame ${i + 1}/${job.totalFrames}`,
+                Math.round(progress),
                 onProgress
               );
             }
-          },
-          void 0,
-          cfg
-        );
-        await mergeWorkerFrames(workDir, tasks, framesDir);
-        if (probeSession) {
-          lastBrowserConsole = probeSession.browserConsoleBuffer;
-          await closeCaptureSession(probeSession);
-          probeSession = null;
+          } finally {
+            lastBrowserConsole = session.browserConsoleBuffer;
+            await closeCaptureSession(session);
+          }
         }
-      } else {
-        const videoInjector = createVideoFrameInjector(frameLookup);
-        const session = probeSession ?? await createCaptureSession(
-          fileServer.url,
-          framesDir,
-          captureOptions,
-          videoInjector,
-          cfg
-        );
-        if (probeSession) {
-          prepareCaptureSessionForReuse(session, framesDir, videoInjector);
-          probeSession = null;
+        const encodeResult = await currentEncoder.close();
+        assertNotAborted();
+        if (!encodeResult.success) {
+          throw new Error(`Streaming encode failed: ${encodeResult.error}`);
         }
-        try {
-          if (!session.isInitialized) {
-            await initializeSession(session);
+        perfStages.captureMs = Date.now() - stage4Start;
+        perfStages.encodeMs = encodeResult.durationMs;
+      } else {
+        if (workerCount > 1) {
+          const tasks = distributeFrames(job.totalFrames, workerCount, workDir);
+          await executeParallelCapture(
+            fileServer.url,
+            workDir,
+            tasks,
+            captureOptions,
+            () => createVideoFrameInjector(frameLookup),
+            abortSignal,
+            (progress) => {
+              job.framesRendered = progress.capturedFrames;
+              const frameProgress = progress.capturedFrames / progress.totalFrames;
+              const progressPct = 25 + frameProgress * 45;
+              if (progress.capturedFrames % 30 === 0 || progress.capturedFrames === progress.totalFrames) {
+                updateJobStatus(
+                  job,
+                  "rendering",
+                  `Capturing frame ${progress.capturedFrames}/${progress.totalFrames} (${workerCount} workers)`,
+                  Math.round(progressPct),
+                  onProgress
+                );
+              }
+            },
+            void 0,
+            cfg
+          );
+          await mergeWorkerFrames(workDir, tasks, framesDir);
+          if (probeSession) {
+            lastBrowserConsole = probeSession.browserConsoleBuffer;
+            await closeCaptureSession(probeSession);
+            probeSession = null;
           }
-          assertNotAborted();
-          lastBrowserConsole = session.browserConsoleBuffer;
-          for (let i = 0; i < job.totalFrames; i++) {
-            assertNotAborted();
-            const time = i / job.config.fps;
-            await captureFrame(session, i, time);
-            job.framesRendered = i + 1;
-            const frameProgress = (i + 1) / job.totalFrames;
-            const progress = 25 + frameProgress * 45;
-            updateJobStatus(
-              job,
-              "rendering",
-              `Capturing frame ${i + 1}/${job.totalFrames}`,
-              Math.round(progress),
-              onProgress
-            );
+        } else {
+          const videoInjector = createVideoFrameInjector(frameLookup);
+          const session = probeSession ?? await createCaptureSession(
+            fileServer.url,
+            framesDir,
+            captureOptions,
+            videoInjector,
+            cfg
+          );
+          if (probeSession) {
+            prepareCaptureSessionForReuse(session, framesDir, videoInjector);
+            probeSession = null;
           }
-        } finally {
-          lastBrowserConsole = session.browserConsoleBuffer;
-          await closeCaptureSession(session);
+          try {
+            if (!session.isInitialized) {
+              await initializeSession(session);
+            }
+            assertNotAborted();
+            lastBrowserConsole = session.browserConsoleBuffer;
+            for (let i = 0; i < job.totalFrames; i++) {
+              assertNotAborted();
+              const time = i / job.config.fps;
+              await captureFrame(session, i, time);
+              job.framesRendered = i + 1;
+              const frameProgress = (i + 1) / job.totalFrames;
+              const progress = 25 + frameProgress * 45;
+              updateJobStatus(
+                job,
+                "rendering",
+                `Capturing frame ${i + 1}/${job.totalFrames}`,
+                Math.round(progress),
+                onProgress
+              );
+            }
+          } finally {
+            lastBrowserConsole = session.browserConsoleBuffer;
+            await closeCaptureSession(session);
+          }
+        }
+        perfStages.captureMs = Date.now() - stage4Start;
+        const stage5Start = Date.now();
+        updateJobStatus(job, "encoding", "Encoding video", 75, onProgress);
+        const frameExt = needsAlpha ? "png" : "jpg";
+        const framePattern = `frame_%06d.${frameExt}`;
+        const encoderOpts = {
+          fps: job.config.fps,
+          width,
+          height,
+          codec: preset.codec,
+          preset: preset.preset,
+          quality: preset.quality,
+          pixelFormat: preset.pixelFormat,
+          useGpu: job.config.useGpu,
+          hdr: preset.hdr
+        };
+        const encodeResult = enableChunkedEncode ? await encodeFramesChunkedConcat(
+          framesDir,
+          framePattern,
+          videoOnlyPath,
+          encoderOpts,
+          chunkedEncodeSize,
+          abortSignal
+        ) : await encodeFramesFromDir(
+          framesDir,
+          framePattern,
+          videoOnlyPath,
+          encoderOpts,
+          abortSignal
+        );
+        assertNotAborted();
+        if (!encodeResult.success) {
+          throw new Error(`Encoding failed: ${encodeResult.error}`);
         }
+        perfStages.encodeMs = Date.now() - stage5Start;
       }
-      perfStages.captureMs = Date.now() - stage4Start;
-      const stage5Start = Date.now();
-      updateJobStatus(job, "encoding", "Encoding video", 75, onProgress);
-      const frameExt = needsAlpha ? "png" : "jpg";
-      const framePattern = `frame_%06d.${frameExt}`;
-      const encoderOpts = baseEncoderOpts;
-      const encodeResult = enableChunkedEncode ? await encodeFramesChunkedConcat(
-        framesDir,
-        framePattern,
-        videoOnlyPath,
-        encoderOpts,
-        chunkedEncodeSize,
-        abortSignal
-      ) : await encodeFramesFromDir(
-        framesDir,
-        framePattern,
-        videoOnlyPath,
-        encoderOpts,
-        abortSignal
-      );
-      assertNotAborted();
-      if (!encodeResult.success) {
-        throw new Error(`Encoding failed: ${encodeResult.error}`);
-      }
-      perfStages.encodeMs = Date.now() - stage5Start;
     }
     if (probeSession !== null) {
       const remainingProbeSession = probeSession;
@@ -108265,12 +110240,12 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       chunkedEncode: enableChunkedEncode,
       chunkSizeFrames: enableChunkedEncode ? chunkedEncodeSize : null,
       compositionDurationSeconds: composition.duration,
-      totalFrames: job.totalFrames,
+      totalFrames,
       resolution: { width, height },
       videoCount: composition.videos.length,
       audioCount: composition.audios.length,
       stages: perfStages,
-      captureAvgMs: job.totalFrames > 0 ? Math.round((perfStages.captureMs ?? 0) / job.totalFrames) : void 0
+      captureAvgMs: totalFrames > 0 ? Math.round((perfStages.captureMs ?? 0) / totalFrames) : void 0
     };
     job.perfSummary = perfSummary;
     if (job.config.debug) {
@@ -108288,6 +110263,8 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
         const debugOutput = join15(workDir, `output${videoExt}`);
         copyFileSync2(outputPath, debugOutput);
       }
+    } else if (process.env.KEEP_TEMP === "1") {
+      log.info("KEEP_TEMP=1 \u2014 leaving workDir on disk for inspection", { workDir });
     } else {
       await safeCleanup(
         "remove workDir",