@hyperframes/producer 0.4.6 → 0.4.7

package/dist/public-server.js

@@ -92210,6 +92210,7 @@ import {
   mkdirSync as mkdirSync10,
   rmSync as rmSync3,
   readFileSync as readFileSync9,
+  readdirSync as readdirSync6,
   writeFileSync as writeFileSync4,
   copyFileSync as copyFileSync2,
   appendFileSync
@@ -101457,6 +101458,8 @@ var DEFAULT_CONFIG = {
   ffmpegEncodeTimeout: 6e5,
   ffmpegProcessTimeout: 3e5,
   ffmpegStreamingTimeout: 6e5,
+  hdr: false,
+  hdrAutoDetect: true,
   audioGain: 1.35,
   frameDataUriCacheLimit: 256,
   playerReadyTimeout: 45e3,
@@ -101513,6 +101516,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,
@@ -101709,7 +101718,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",
@@ -103696,6 +103706,24 @@ async function pageScreenshotCapture(page, options) {
   });
   return Buffer.from(result.data, "base64");
 }
+async function initTransparentBackground(page) {
+  const client = await getCdpSession(page);
+  await client.send("Emulation.setDefaultBackgroundColorOverride", {
+    color: { r: 0, g: 0, b: 0, a: 0 }
+  });
+}
+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");
+}
 async function injectVideoFramesBatch(page, updates) {
   if (updates.length === 0) return;
   await page.evaluate(
@@ -103717,16 +103745,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;
@@ -103777,14 +103796,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);
@@ -104241,7 +104268,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 {
@@ -104259,6 +104286,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) {
@@ -104316,6 +104352,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");
@@ -104622,31 +104661,79 @@ 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";
+}
+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 {
@@ -104659,19 +104746,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) {
@@ -104709,12 +104813,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));
@@ -104730,17 +104837,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]}`;
@@ -104810,14 +104931,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;
@@ -104921,6 +105044,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,
@@ -104928,7 +105055,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);
@@ -105136,18 +105264,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) => {
@@ -105207,30 +105337,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);
@@ -105465,6 +105665,74 @@ function createVideoFrameInjector(frameLookup, config2) {
     }
   };
 }
+async function hideVideoElements(page, videoIds) {
+  if (videoIds.length === 0) return;
+  await page.evaluate((ids) => {
+    for (const id of ids) {
+      const el = document.getElementById(id);
+      if (el) {
+        el.style.setProperty("visibility", "hidden", "important");
+        el.style.setProperty("opacity", "0", "important");
+        const img = document.getElementById(`__render_frame_${id}__`);
+        if (img) img.style.setProperty("visibility", "hidden", "important");
+      }
+    }
+  }, videoIds);
+}
+async function showVideoElements(page, videoIds) {
+  if (videoIds.length === 0) return;
+  await page.evaluate((ids) => {
+    for (const id of ids) {
+      const el = document.getElementById(id);
+      if (el) {
+        el.style.removeProperty("visibility");
+        el.style.removeProperty("opacity");
+        const img = document.getElementById(`__render_frame_${id}__`);
+        if (img) img.style.removeProperty("visibility");
+      }
+    }
+  }, videoIds);
+}
+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;
+    }
+    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 opacity = parseFloat(style.opacity) || 1;
+      const visible = style.visibility !== "hidden" && style.display !== "none" && rect.width > 0 && rect.height > 0;
+      results.push({
+        id,
+        zIndex,
+        x: Math.round(rect.x),
+        y: Math.round(rect.y),
+        width: Math.round(rect.width),
+        height: Math.round(rect.height),
+        opacity,
+        visible,
+        isHdr: hdrSet.has(id)
+      });
+    }
+    return results;
+  }, hdrIds);
+}
 
 // ../engine/src/services/audioMixer.ts
 import { existsSync as existsSync9, mkdirSync as mkdirSync6, rmSync as rmSync2 } from "fs";
@@ -105951,6 +106219,292 @@ async function mergeWorkerFrames(workDir, tasks, outputDir) {
   return totalFrames;
 }
 
+// ../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);
+        }
+      }
+    }
+  }
+}
+
+// ../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;
+}
+
 // src/services/renderOrchestrator.ts
 import { join as join15, dirname as dirname10, resolve as resolve10 } from "path";
 import { randomUUID } from "crypto";
@@ -106271,6 +106825,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"
@@ -106316,20 +106874,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;
@@ -106411,7 +106973,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();
@@ -107671,6 +108233,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") {
@@ -108070,7 +108650,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.";
@@ -108094,8 +108677,26 @@ 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();
     if (composition.videos.length > 0) {
-      const extractionResult = await extractAllVideoFrames(
+      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);
+          }
+        })
+      );
+    }
+    if (composition.videos.length > 0) {
+      extractionResult = await extractAllVideoFrames(
         composition.videos,
         projectDir,
         { fps: job.config.fps, outputDir: join15(workDir, "video-frames") },
@@ -108130,6 +108731,23 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
     } else {
       perfStages.videoExtractMs = Date.now() - stage2Start;
     }
+    let effectiveHdr;
+    if (frameLookup) {
+      const colorSpaces = (extractionResult?.extracted ?? []).map((ext) => ext.metadata.colorSpace);
+      const info = analyzeCompositionHdr(colorSpaces);
+      if (info.hasHdr && info.dominantTransfer) {
+        effectiveHdr = { transfer: info.dominantTransfer };
+      }
+    }
+    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");
@@ -108175,218 +108793,398 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
     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 hasHdrVideo = effectiveHdr && composition.videos.length > 0 && frameLookup;
+    const encoderHdr = hasHdrVideo ? effectiveHdr : void 0;
+    const preset = getEncoderPreset(job.config.quality, outputFormat, encoderHdr);
     job.framesRendered = 0;
-    let streamingEncoder = null;
-    if (enableStreamingEncode) {
-      streamingEncoder = await spawnStreamingEncoder(
+    if (hasHdrVideo) {
+      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);
+      }
+      const domSession = await createCaptureSession(
+        fileServer.url,
+        framesDir,
+        captureOptions,
+        createVideoFrameInjector(frameLookup),
+        cfg
+      );
+      await initializeSession(domSession);
+      assertNotAborted();
+      lastBrowserConsole = domSession.browserConsoleBuffer;
+      await initTransparentBackground(domSession.page);
+      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);
-        };
-        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
+      const { execSync: execSync2 } = await import("child_process");
+      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;
+        try {
+          execSync2(
+            `ffmpeg -ss ${video.mediaStart} -i "${srcPath}" -t ${duration} -r ${job.config.fps} -vf "scale=${width}:${height}:force_original_aspect_ratio=increase,crop=${width}:${height}" -pix_fmt rgb48le -c:v png "${join15(frameDir, "frame_%04d.png")}"`,
+            { maxBuffer: 1024 * 1024, stdio: ["pipe", "pipe", "pipe"] }
+          );
+        } catch (err) {
+          log.warn("HDR frame pre-extraction failed; loop will fill with black", {
+            videoId,
+            srcPath,
+            error: err instanceof Error ? err.message : String(err)
+          });
+        }
+        hdrFrameDirs.set(videoId, frameDir);
+      }
+      assertNotAborted();
+      try {
+        const beforeCaptureHook = domSession.onBeforeCapture;
+        for (let i = 0; i < job.totalFrames; i++) {
+          assertNotAborted();
+          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 layers = groupIntoLayers(stackingInfo);
+          if (i % 30 === 0) {
+            const hdrEl = stackingInfo.find((e) => e.isHdr);
+            const hdrInLayers = layers.some((l) => l.type === "hdr");
+            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,
+              hdrLayerPresent: hdrInLayers,
+              layerCount: layers.length
+            });
+          }
+          const canvas = Buffer.alloc(width * height * 6);
+          for (const layer of layers) {
+            if (layer.type === "hdr") {
+              const el = layer.element;
+              const frameDir = hdrFrameDirs.get(el.id);
+              const video = composition.videos.find((v) => v.id === el.id);
+              if (!frameDir || !video) continue;
+              const videoFrameIndex = Math.round((time - video.start) * job.config.fps) + 1;
+              const maxIndex = getMaxFrameIndex(frameDir);
+              const inBounds = videoFrameIndex >= 1 && (maxIndex === 0 || videoFrameIndex <= maxIndex);
+              const framePath = inBounds ? join15(frameDir, `frame_${String(videoFrameIndex).padStart(4, "0")}.png`) : null;
+              if (framePath !== null && existsSync15(framePath)) {
+                try {
+                  const hdrRgb = decodePngToRgb48le(readFileSync9(framePath)).data;
+                  blitRgb48leRegion(
+                    canvas,
+                    hdrRgb,
+                    el.x,
+                    el.y,
+                    el.width,
+                    el.height,
+                    width,
+                    height,
+                    el.opacity < 0.999 ? el.opacity : void 0
+                  );
+                } catch (err) {
+                  log.warn("HDR layer decode/blit failed; skipping layer for frame", {
+                    frameIndex: i,
+                    videoId: el.id,
+                    framePath,
+                    error: err instanceof Error ? err.message : String(err)
+                  });
+                }
+              }
+            } else {
+              const allElementIds = stackingInfo.map((e) => e.id);
+              const layerIds = new Set(layer.elementIds);
+              const hideIds = allElementIds.filter(
+                (id) => !layerIds.has(id) || nativeHdrVideoIds.has(id)
               );
+              await hideVideoElements(domSession.page, hideIds);
+              const domPng = await captureAlphaPng(domSession.page, width, height);
+              await showVideoElements(domSession.page, hideIds);
+              await domSession.page.evaluate((t) => {
+                if (window.__hf && typeof window.__hf.seek === "function") window.__hf.seek(t);
+              }, time);
+              try {
+                const { data: domRgba } = decodePng(domPng);
+                const hdrTransfer = effectiveHdr ? effectiveHdr.transfer : "hlg";
+                blitRgba8OverRgb48le(domRgba, canvas, width, height, hdrTransfer);
+              } catch (err) {
+                log.warn("DOM layer decode/blit failed; skipping overlay for frame", {
+                  frameIndex: i,
+                  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);
           }
-          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;
+          hdrEncoder.writeFrame(canvas);
+          job.framesRendered = i + 1;
+          if ((i + 1) % 10 === 0 || i + 1 === job.totalFrames) {
             const frameProgress = (i + 1) / job.totalFrames;
-            const progress = 25 + frameProgress * 55;
             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, 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);
+          };
+          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 < 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;
               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;