@hyperframes/producer 0.4.10 → 0.4.11

package/dist/index.js

@@ -78348,16 +78348,16 @@ var require_buffer_crc32 = __commonJS({
       }
       return crc ^ -1;
     }
-    function crc32() {
+    function crc322() {
       return bufferizeInt(_crc32.apply(null, arguments));
     }
-    crc32.signed = function() {
+    crc322.signed = function() {
       return _crc32.apply(null, arguments);
     };
-    crc32.unsigned = function() {
+    crc322.unsigned = function() {
       return _crc32.apply(null, arguments) >>> 0;
     };
-    module.exports = crc32;
+    module.exports = crc322;
   }
 });
 
@@ -78367,7 +78367,7 @@ var require_yauzl = __commonJS({
     var fs8 = __require("fs");
     var zlib = __require("zlib");
     var fd_slicer = require_fd_slicer();
-    var crc32 = require_buffer_crc32();
+    var crc322 = require_buffer_crc32();
     var util = __require("util");
     var EventEmitter4 = __require("events").EventEmitter;
     var Transform = __require("stream").Transform;
@@ -78653,7 +78653,7 @@ var require_yauzl = __commonJS({
                   continue;
                 }
                 var oldNameCrc32 = extraField.data.readUInt32LE(1);
-                if (crc32.unsigned(buffer.slice(0, entry.fileNameLength)) !== oldNameCrc32) {
+                if (crc322.unsigned(buffer.slice(0, entry.fileNameLength)) !== oldNameCrc32) {
                   continue;
                 }
                 entry.fileName = decodeBuffer(extraField.data, 5, extraField.data.length, true);
@@ -89420,7 +89420,7 @@ import {
   existsSync as existsSync15,
   mkdirSync as mkdirSync10,
   rmSync as rmSync3,
-  readFileSync as readFileSync9,
+  readFileSync as readFileSync10,
   readdirSync as readdirSync6,
   writeFileSync as writeFileSync4,
   copyFileSync as copyFileSync2,
@@ -99641,9 +99641,25 @@ var mediaRules = [
   // video_nested_in_timed_element
   ({ source: source2, tags }) => {
     const findings = [];
+    const voidElements3 = /* @__PURE__ */ new Set([
+      "area",
+      "base",
+      "br",
+      "col",
+      "embed",
+      "hr",
+      "img",
+      "input",
+      "link",
+      "meta",
+      "source",
+      "track",
+      "wbr"
+    ]);
     const timedTagPositions = [];
     for (const tag of tags) {
       if (tag.name === "video" || tag.name === "audio") continue;
+      if (voidElements3.has(tag.name)) continue;
       if (readAttr(tag.raw, "data-composition-id")) continue;
       if (readAttr(tag.raw, "data-start")) {
         timedTagPositions.push({
@@ -99810,7 +99826,9 @@ function extractGsapWindows(script) {
   let index = 0;
   while ((match2 = methodPattern.exec(script)) !== null && index < parsed.animations.length) {
     const raw2 = match2[0];
-    const meta = parseGsapWindowMeta(match2[1] ?? "", match2[2] ?? "");
+    const args = match2[2] ?? "";
+    if (!/^\s*["']/.test(args)) continue;
+    const meta = parseGsapWindowMeta(match2[1] ?? "", args);
     const animation = parsed.animations[index];
     index += 1;
     if (!animation) continue;
@@ -101104,6 +101122,12 @@ async function createCaptureSession(serverUrl, outputDir, options, onBeforeCaptu
   );
   const { browser, captureMode } = await acquireBrowser(chromeArgs, config2);
   const page = await browser.newPage();
+  await page.evaluateOnNewDocument(() => {
+    const w = window;
+    if (typeof w.__name !== "function") {
+      w.__name = (fn, _name) => fn;
+    }
+  });
   const browserVersion = await browser.version();
   const expectedMajor = config2?.expectedChromiumMajor;
   if (Number.isFinite(expectedMajor)) {
@@ -101208,9 +101232,10 @@ async function initializeSession(session) {
         `[FrameCapture] window.__hf not ready after ${pageReadyTimeout2}ms. Page must expose window.__hf = { duration, seek }.`
       );
     }
+    const skipIdsLiteral = JSON.stringify(session.options.skipReadinessVideoIds ?? []);
     const videosReady = await pollPageExpression(
       page,
-      `document.querySelectorAll("video").length === 0 || Array.from(document.querySelectorAll("video")).every(v => v.readyState >= 1)`,
+      `(() => { const skip = new Set(${skipIdsLiteral}); const vids = Array.from(document.querySelectorAll("video")).filter(v => !skip.has(v.id)); return vids.length === 0 || vids.every(v => v.readyState >= 1); })()`,
       pageReadyTimeout2
     );
     if (!videosReady) {
@@ -101270,10 +101295,11 @@ async function initializeSession(session) {
       `[FrameCapture] window.__hf not ready after ${pageReadyTimeout}ms. Page must expose window.__hf = { duration, seek }.`
     );
   }
+  const beginframeSkipIdsLiteral = JSON.stringify(session.options.skipReadinessVideoIds ?? []);
   const videoDeadline = Date.now() + (session.config?.playerReadyTimeout ?? DEFAULT_CONFIG.playerReadyTimeout);
   while (Date.now() < videoDeadline) {
     const videosReady = await page.evaluate(
-      `document.querySelectorAll("video").length === 0 || Array.from(document.querySelectorAll("video")).every(v => v.readyState >= 1)`
+      `(() => { const skip = new Set(${beginframeSkipIdsLiteral}); const vids = Array.from(document.querySelectorAll("video")).filter(v => !skip.has(v.id)); return vids.length === 0 || vids.every(v => v.readyState >= 1); })()`
     );
     if (videosReady) break;
     await new Promise((r) => setTimeout(r, 100));
@@ -102253,6 +102279,8 @@ import { join as join8 } from "path";
 
 // ../engine/src/utils/ffprobe.ts
 import { spawn as spawn7 } from "child_process";
+import { readFileSync as readFileSync5 } from "fs";
+import { extname as extname2 } from "path";
 function runFfprobe(args) {
   return new Promise((resolve13, reject) => {
     const proc = spawn7("ffprobe", args);
@@ -102291,6 +102319,67 @@ function parseProbeJson(stdout) {
 }
 var videoMetadataCache = /* @__PURE__ */ new Map();
 var audioMetadataCache = /* @__PURE__ */ new Map();
+function crc32(buf) {
+  let crc = 4294967295;
+  for (let i = 0; i < buf.length; i++) {
+    crc ^= buf[i] ?? 0;
+    for (let bit = 0; bit < 8; bit++) {
+      const mask = -(crc & 1);
+      crc = crc >>> 1 ^ 3988292384 & mask;
+    }
+  }
+  return (crc ^ 4294967295) >>> 0;
+}
+function extractPngMetadataFromBuffer(buf) {
+  if (buf.length < 8 || buf[0] !== 137 || buf[1] !== 80 || buf[2] !== 78 || buf[3] !== 71 || buf[4] !== 13 || buf[5] !== 10 || buf[6] !== 26 || buf[7] !== 10) {
+    return null;
+  }
+  let width = 0;
+  let height = 0;
+  let seenIdat = false;
+  let pos = 8;
+  while (pos + 12 <= buf.length) {
+    const chunkLen = buf.readUInt32BE(pos);
+    const chunkType = buf.toString("ascii", pos + 4, pos + 8);
+    if (pos + 12 + chunkLen > buf.length) return null;
+    const chunkData = buf.subarray(pos + 8, pos + 8 + chunkLen);
+    const chunkCrc = buf.readUInt32BE(pos + 8 + chunkLen);
+    const chunkBytes = Buffer.concat([Buffer.from(chunkType, "ascii"), chunkData]);
+    if (crc32(chunkBytes) !== chunkCrc) return null;
+    if (chunkType === "IHDR" && chunkLen >= 8) {
+      width = buf.readUInt32BE(pos + 8);
+      height = buf.readUInt32BE(pos + 12);
+    }
+    if (chunkType === "IDAT") {
+      seenIdat = true;
+    }
+    if (chunkType === "cICP" && chunkLen === 4 && !seenIdat) {
+      const primariesCode = chunkData[0] ?? 0;
+      const transferCode = chunkData[1] ?? 0;
+      const matrixCode = chunkData[2] ?? 0;
+      return {
+        width,
+        height,
+        colorSpace: {
+          colorPrimaries: primariesCode === 9 ? "bt2020" : primariesCode === 1 ? "bt709" : `unknown-${primariesCode}`,
+          colorTransfer: transferCode === 16 ? "smpte2084" : transferCode === 18 ? "arib-std-b67" : transferCode === 1 ? "bt709" : `unknown-${transferCode}`,
+          colorSpace: matrixCode === 9 ? "bt2020nc" : matrixCode === 0 ? "gbr" : `unknown-${matrixCode}`
+        }
+      };
+    }
+    if (chunkType === "IEND") break;
+    pos += 12 + chunkLen;
+  }
+  return width > 0 && height > 0 ? { width, height, colorSpace: null } : null;
+}
+function extractStillImageMetadata(filePath) {
+  if (extname2(filePath).toLowerCase() !== ".png") return null;
+  try {
+    return extractPngMetadataFromBuffer(readFileSync5(filePath));
+  } catch {
+    return null;
+  }
+}
 function parseFrameRate(frameRateStr) {
   if (!frameRateStr) return 0;
   const parts = frameRateStr.split("/");
@@ -102305,18 +102394,38 @@ async function extractVideoMetadata(filePath) {
   const cached = videoMetadataCache.get(filePath);
   if (cached) return cached;
   const probePromise = (async () => {
-    const stdout = await runFfprobe([
-      "-v",
-      "quiet",
-      "-print_format",
-      "json",
-      "-show_format",
-      "-show_streams",
-      filePath
-    ]);
-    const output2 = parseProbeJson(stdout);
-    const videoStream = output2.streams.find((s) => s.codec_type === "video");
-    if (!videoStream) throw new Error("[FFmpeg] No video stream found");
+    const stillImageMeta = extractStillImageMetadata(filePath);
+    let output2 = null;
+    try {
+      const stdout = await runFfprobe([
+        "-v",
+        "quiet",
+        "-print_format",
+        "json",
+        "-show_format",
+        "-show_streams",
+        filePath
+      ]);
+      output2 = parseProbeJson(stdout);
+    } catch (error) {
+      if (!stillImageMeta) throw error;
+    }
+    const videoStream = output2?.streams.find((s) => s.codec_type === "video");
+    if (!videoStream) {
+      if (stillImageMeta) {
+        return {
+          durationSeconds: 0,
+          width: stillImageMeta.width,
+          height: stillImageMeta.height,
+          fps: 0,
+          videoCodec: "png",
+          hasAudio: false,
+          isVFR: false,
+          colorSpace: stillImageMeta.colorSpace
+        };
+      }
+      throw new Error("[FFmpeg] No video stream found");
+    }
     const rFps = parseFrameRate(videoStream.r_frame_rate);
     const avgFps = parseFrameRate(videoStream.avg_frame_rate);
     const fps = avgFps || rFps;
@@ -102324,16 +102433,17 @@ async function extractVideoMetadata(filePath) {
     const colorTransfer = videoStream.color_transfer || "";
     const colorPrimaries = videoStream.color_primaries || "";
     const colorSpaceVal = videoStream.color_space || "";
-    const hasColorInfo = !!(colorTransfer || colorPrimaries || colorSpaceVal);
+    const ffprobeColorSpace = colorTransfer || colorPrimaries || colorSpaceVal ? { colorTransfer, colorPrimaries, colorSpace: colorSpaceVal } : null;
+    const colorSpace = ffprobeColorSpace ?? stillImageMeta?.colorSpace ?? null;
     return {
-      durationSeconds: output2.format.duration ? parseFloat(output2.format.duration) : 0,
-      width: videoStream.width || 0,
-      height: videoStream.height || 0,
+      durationSeconds: output2?.format.duration ? parseFloat(output2.format.duration) : 0,
+      width: videoStream.width || stillImageMeta?.width || 0,
+      height: videoStream.height || stillImageMeta?.height || 0,
       fps,
       videoCodec: videoStream.codec_name || "unknown",
-      hasAudio: output2.streams.some((s) => s.codec_type === "audio"),
+      hasAudio: output2?.streams.some((s) => s.codec_type === "audio") ?? false,
       isVFR,
-      colorSpace: hasColorInfo ? { colorTransfer, colorPrimaries, colorSpace: colorSpaceVal } : null
+      colorSpace
     };
   })();
   videoMetadataCache.set(filePath, probePromise);
@@ -102432,7 +102542,7 @@ async function analyzeKeyframeIntervalsUncached(filePath) {
 // ../engine/src/utils/urlDownloader.ts
 import { createWriteStream as createWriteStream2, existsSync as existsSync7, mkdirSync as mkdirSync4 } from "fs";
 import { createHash } from "crypto";
-import { join as join7, extname as extname2 } from "path";
+import { join as join7, extname as extname3 } from "path";
 import { Readable } from "stream";
 import { finished } from "stream/promises";
 var downloadPathCache = /* @__PURE__ */ new Map();
@@ -102440,7 +102550,7 @@ var inFlightDownloads = /* @__PURE__ */ new Map();
 function getFilenameFromUrl(url) {
   const hash2 = createHash("md5").update(url).digest("hex").slice(0, 12);
   const urlObj = new URL(url);
-  const ext = extname2(urlObj.pathname) || ".mp4";
+  const ext = extname3(urlObj.pathname) || ".mp4";
   return `download_${hash2}${ext}`;
 }
 async function downloadToTemp(url, destDir, timeoutMs = 3e5) {
@@ -102533,6 +102643,34 @@ function parseVideoElements(html) {
   }
   return videos;
 }
+function parseImageElements(html) {
+  const images = [];
+  const { document: document2 } = parseHTML(html);
+  const imgEls = document2.querySelectorAll("img[src]");
+  let autoIdCounter = 0;
+  for (const el of imgEls) {
+    const src = el.getAttribute("src");
+    if (!src) continue;
+    const id = el.getAttribute("id") || `hf-img-${autoIdCounter++}`;
+    if (!el.getAttribute("id")) {
+      el.setAttribute("id", id);
+    }
+    const startAttr = el.getAttribute("data-start");
+    const endAttr = el.getAttribute("data-end");
+    const durationAttr = el.getAttribute("data-duration");
+    const start = startAttr ? parseFloat(startAttr) : 0;
+    let end = 0;
+    if (endAttr) {
+      end = parseFloat(endAttr);
+    } else if (durationAttr) {
+      end = start + parseFloat(durationAttr);
+    } else {
+      end = Infinity;
+    }
+    images.push({ id, src, start, end });
+  }
+  return images;
+}
 async function extractVideoFramesRange(videoPath, videoId, startTime, duration, options, signal, config2) {
   const ffmpegProcessTimeout = config2?.ffmpegProcessTimeout ?? DEFAULT_CONFIG.ffmpegProcessTimeout;
   const { fps, outputDir, quality = 95, format: format3 = "jpg" } = options;
@@ -102942,8 +103080,8 @@ function createVideoFrameInjector(frameLookup, config2) {
     }
   };
 }
-async function queryElementStacking(page, nativeHdrVideoIds) {
-  const hdrIds = Array.from(nativeHdrVideoIds);
+async function queryElementStacking(page, nativeHdrIds) {
+  const hdrIds = Array.from(nativeHdrIds);
   return page.evaluate((hdrIdList) => {
     const hdrSet = new Set(hdrIdList);
     const elements = document.querySelectorAll("[data-start]");
@@ -103072,7 +103210,12 @@ async function queryElementStacking(page, nativeHdrVideoIds) {
         // 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]
+        borderRadius: isHdrEl ? getEffectiveBorderRadius(el) : [0, 0, 0, 0],
+        // `getComputedStyle` returns "" when the property doesn't apply (e.g.
+        // for non-replaced elements); normalize to the CSS defaults so callers
+        // can rely on a populated value.
+        objectFit: style.objectFit || "fill",
+        objectPosition: style.objectPosition || "50% 50%"
       });
     }
     return results;
@@ -106537,6 +106680,125 @@ function blitRgb48leAffine(canvas, source2, matrix, srcW, srcH, canvasW, canvasH
     }
   }
 }
+function parseObjectPositionAxis(value, axis) {
+  const lower = value.trim().toLowerCase();
+  if (lower === "left" || lower === "top") return 0;
+  if (lower === "right" || lower === "bottom") return 1;
+  if (lower === "center" || lower === "") return 0.5;
+  if (lower.endsWith("%")) {
+    const pct = parseFloat(lower) / 100;
+    return Number.isFinite(pct) ? Math.max(0, Math.min(1, pct)) : 0.5;
+  }
+  if (axis === "x" || axis === "y") return 0.5;
+  return 0.5;
+}
+function parseObjectPosition(css) {
+  if (!css || !css.trim()) return { x: 0.5, y: 0.5 };
+  const tokens = css.trim().split(/\s+/);
+  if (tokens.length === 1) {
+    const single = tokens[0] ?? "";
+    const v = parseObjectPositionAxis(single, "x");
+    return { x: v, y: 0.5 };
+  }
+  return {
+    x: parseObjectPositionAxis(tokens[0] ?? "", "x"),
+    y: parseObjectPositionAxis(tokens[1] ?? "", "y")
+  };
+}
+function computeObjectFitRect(srcW, srcH, dstW, dstH, fit, pos) {
+  let renderedW = dstW;
+  let renderedH = dstH;
+  if (fit === "fill") {
+    return { dx: 0, dy: 0, dw: dstW, dh: dstH };
+  }
+  if (fit === "none") {
+    renderedW = srcW;
+    renderedH = srcH;
+  } else if (fit === "scale-down") {
+    const scale = Math.min(dstW / srcW, dstH / srcH, 1);
+    renderedW = srcW * scale;
+    renderedH = srcH * scale;
+  } else if (fit === "cover") {
+    const scale = Math.max(dstW / srcW, dstH / srcH);
+    renderedW = srcW * scale;
+    renderedH = srcH * scale;
+  } else {
+    const scale = Math.min(dstW / srcW, dstH / srcH);
+    renderedW = srcW * scale;
+    renderedH = srcH * scale;
+  }
+  const dx = (dstW - renderedW) * pos.x;
+  const dy = (dstH - renderedH) * pos.y;
+  return { dx, dy, dw: renderedW, dh: renderedH };
+}
+function resampleRgb48leObjectFit(source2, srcW, srcH, dstW, dstH, fit = "fill", objectPosition) {
+  if (srcW <= 0 || srcH <= 0 || dstW <= 0 || dstH <= 0) {
+    return source2;
+  }
+  if (fit === "fill" && srcW === dstW && srcH === dstH) {
+    return source2;
+  }
+  const pos = parseObjectPosition(objectPosition);
+  const rect = computeObjectFitRect(srcW, srcH, dstW, dstH, fit, pos);
+  const dst = Buffer.alloc(dstW * dstH * 6);
+  const stride = dstW * 6;
+  const xMin = Math.max(0, Math.floor(rect.dx));
+  const yMin = Math.max(0, Math.floor(rect.dy));
+  const xMax = Math.min(dstW, Math.ceil(rect.dx + rect.dw));
+  const yMax = Math.min(dstH, Math.ceil(rect.dy + rect.dh));
+  if (rect.dw <= 0 || rect.dh <= 0) {
+    return dst;
+  }
+  const invScaleX = srcW / rect.dw;
+  const invScaleY = srcH / rect.dh;
+  for (let dy = yMin; dy < yMax; dy++) {
+    const rowOff = dy * stride;
+    const sy = (dy + 0.5 - rect.dy) * invScaleY - 0.5;
+    const syc = Math.max(0, Math.min(srcH - 1, sy));
+    const y0 = Math.floor(syc);
+    const y1 = Math.min(y0 + 1, srcH - 1);
+    const fy = syc - y0;
+    const ify = 1 - fy;
+    for (let dx = xMin; dx < xMax; dx++) {
+      const sx = (dx + 0.5 - rect.dx) * invScaleX - 0.5;
+      const sxc = Math.max(0, Math.min(srcW - 1, sx));
+      const x0 = Math.floor(sxc);
+      const x1 = Math.min(x0 + 1, srcW - 1);
+      const fx = sxc - x0;
+      const ifx = 1 - fx;
+      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 = ifx * ify;
+      const w10 = fx * ify;
+      const w01 = ifx * fy;
+      const w11 = fx * fy;
+      const r = source2.readUInt16LE(off00) * w00 + source2.readUInt16LE(off10) * w10 + source2.readUInt16LE(off01) * w01 + source2.readUInt16LE(off11) * w11;
+      const g = source2.readUInt16LE(off00 + 2) * w00 + source2.readUInt16LE(off10 + 2) * w10 + source2.readUInt16LE(off01 + 2) * w01 + source2.readUInt16LE(off11 + 2) * w11;
+      const b = source2.readUInt16LE(off00 + 4) * w00 + source2.readUInt16LE(off10 + 4) * w10 + source2.readUInt16LE(off01 + 4) * w01 + source2.readUInt16LE(off11 + 4) * w11;
+      const dstOff = rowOff + dx * 6;
+      dst.writeUInt16LE(Math.round(r), dstOff);
+      dst.writeUInt16LE(Math.round(g), dstOff + 2);
+      dst.writeUInt16LE(Math.round(b), dstOff + 4);
+    }
+  }
+  return dst;
+}
+function normalizeObjectFit(value) {
+  switch ((value ?? "").trim().toLowerCase()) {
+    case "cover":
+      return "cover";
+    case "contain":
+      return "contain";
+    case "none":
+      return "none";
+    case "scale-down":
+      return "scale-down";
+    default:
+      return "fill";
+  }
+}
 function parseTransformMatrix(css) {
   if (!css || css === "none") return null;
   const match2 = css.match(
@@ -107205,12 +107467,12 @@ import { freemem as freemem2 } from "os";
 import { fileURLToPath as fileURLToPath3 } from "url";
 
 // src/services/fileServer.ts
-import { readFileSync as readFileSync6, existsSync as existsSync12, statSync as statSync5 } from "node:fs";
-import { join as join11, extname as extname3 } from "node:path";
+import { readFileSync as readFileSync7, existsSync as existsSync12, statSync as statSync5 } from "node:fs";
+import { join as join11, extname as extname4 } from "node:path";
 
 // src/services/hyperframeRuntimeLoader.ts
 import { createHash as createHash2 } from "node:crypto";
-import { existsSync as existsSync11, readFileSync as readFileSync5 } from "node:fs";
+import { existsSync as existsSync11, readFileSync as readFileSync6 } from "node:fs";
 import { dirname as dirname8, resolve as resolve7 } from "node:path";
 import { fileURLToPath as fileURLToPath2 } from "node:url";
 var PRODUCER_DIR = dirname8(fileURLToPath2(import.meta.url));
@@ -107253,7 +107515,7 @@ function resolveVerifiedHyperframeRuntime() {
       `[HyperframeRuntimeLoader] Missing manifest at ${manifestPath}. Build core runtime artifacts before rendering.`
     );
   }
-  const manifestRaw = readFileSync5(manifestPath, "utf8");
+  const manifestRaw = readFileSync6(manifestPath, "utf8");
   const manifest = JSON.parse(manifestRaw);
   const runtimeFileName = manifest.artifacts?.iife;
   if (!runtimeFileName || !manifest.sha256) {
@@ -107265,7 +107527,7 @@ function resolveVerifiedHyperframeRuntime() {
   if (!existsSync11(runtimePath)) {
     throw new Error(`[HyperframeRuntimeLoader] Missing runtime artifact at ${runtimePath}.`);
   }
-  const runtimeSource = readFileSync5(runtimePath, "utf8");
+  const runtimeSource = readFileSync6(runtimePath, "utf8");
   const runtimeSha = createHash2("sha256").update(runtimeSource, "utf8").digest("hex");
   if (runtimeSha !== manifest.sha256) {
     throw new Error(
@@ -107685,10 +107947,10 @@ function createFileServer2(options) {
       }
       return c.text("Not found", 404);
     }
-    const ext = extname3(filePath).toLowerCase();
+    const ext = extname4(filePath).toLowerCase();
     const contentType = MIME_TYPES[ext] || "application/octet-stream";
     if (ext === ".html") {
-      const rawHtml = readFileSync6(filePath, "utf-8");
+      const rawHtml = readFileSync7(filePath, "utf-8");
       const isIndex = relativePath === "index.html";
       let html = rawHtml;
       if (preHeadScripts.length > 0) {
@@ -107697,7 +107959,7 @@ function createFileServer2(options) {
       html = isIndex ? injectScriptsIntoHtml(html, headScripts, bodyScripts, stripEmbeddedRuntime) : html;
       return c.text(html, 200, { "Content-Type": contentType });
     }
-    const content = readFileSync6(filePath);
+    const content = readFileSync7(filePath);
     return new Response(content, {
       status: 200,
       headers: { "Content-Type": contentType }
@@ -107724,7 +107986,7 @@ function createFileServer2(options) {
 }
 
 // src/services/htmlCompiler.ts
-import { readFileSync as readFileSync8, existsSync as existsSync14, mkdirSync as mkdirSync9 } from "fs";
+import { readFileSync as readFileSync9, existsSync as existsSync14, mkdirSync as mkdirSync9 } from "fs";
 import { join as join14, dirname as dirname9, resolve as resolve9 } from "path";
 import postcss from "postcss";
 
@@ -107757,7 +108019,7 @@ function resolveRenderPaths(projectDir, outputPath, rendersDir = DEFAULT_RENDERS
 }
 
 // src/services/deterministicFonts.ts
-import { existsSync as existsSync13, mkdirSync as mkdirSync8, readFileSync as readFileSync7, writeFileSync as writeFileSync3 } from "node:fs";
+import { existsSync as existsSync13, mkdirSync as mkdirSync8, readFileSync as readFileSync8, writeFileSync as writeFileSync3 } from "node:fs";
 import { homedir as homedir2 } from "node:os";
 import { join as join13 } from "node:path";
 
@@ -108086,7 +108348,7 @@ async function fetchGoogleFont(familyName) {
         continue;
       }
     }
-    const fontBytes = readFileSync7(cachePath);
+    const fontBytes = readFileSync8(cachePath);
     const dataUri = `data:font/woff2;base64,${fontBytes.toString("base64")}`;
     faces.push({ weight, style, dataUri });
   }
@@ -108237,6 +108499,7 @@ async function compileHtmlFile(html, baseDir, downloadDir) {
 async function parseSubCompositions(html, projectDir, downloadDir, parentOffset = 0, parentEnd = Infinity, visited = /* @__PURE__ */ new Set()) {
   const videos = [];
   const audios = [];
+  const images = [];
   const subCompositions = /* @__PURE__ */ new Map();
   const { document: document2 } = parseHTML(html);
   const compEls = document2.querySelectorAll("[data-composition-src]");
@@ -108256,7 +108519,7 @@ async function parseSubCompositions(html, projectDir, downloadDir, parentOffset
     if (!existsSync14(filePath)) {
       continue;
     }
-    const rawSubHtml = readFileSync8(filePath, "utf-8");
+    const rawSubHtml = readFileSync9(filePath, "utf-8");
     const nestedVisited = new Set(visited);
     nestedVisited.add(filePath);
     workItems.push({ srcPath, absoluteStart, absoluteEnd, filePath, rawSubHtml, nestedVisited });
@@ -108278,12 +108541,14 @@ async function parseSubCompositions(html, projectDir, downloadDir, parentOffset
       );
       const subVideos = parseVideoElements(compiledSub);
       const subAudios = parseAudioElements(compiledSub);
+      const subImages = parseImageElements(compiledSub);
       return {
         srcPath: item.srcPath,
         compiledSub,
         nested,
         subVideos,
         subAudios,
+        subImages,
         absoluteStart: item.absoluteStart,
         absoluteEnd: item.absoluteEnd
       };
@@ -108296,6 +108561,7 @@ async function parseSubCompositions(html, projectDir, downloadDir, parentOffset
     }
     videos.push(...r.nested.videos);
     audios.push(...r.nested.audios);
+    images.push(...r.nested.images);
     for (const v of r.subVideos) {
       v.start += r.absoluteStart;
       v.end += r.absoluteStart;
@@ -108316,10 +108582,20 @@ async function parseSubCompositions(html, projectDir, downloadDir, parentOffset
         audios.push(a);
       }
     }
-    if (r.subVideos.length > 0 || r.subAudios.length > 0 || r.nested.videos.length > 0 || r.nested.audios.length > 0) {
+    for (const img of r.subImages) {
+      img.start += r.absoluteStart;
+      img.end += r.absoluteStart;
+      if (img.end > r.absoluteEnd) {
+        img.end = r.absoluteEnd;
+      }
+      if (img.start < r.absoluteEnd) {
+        images.push(img);
+      }
+    }
+    if (r.subVideos.length > 0 || r.subAudios.length > 0 || r.subImages.length > 0 || r.nested.videos.length > 0 || r.nested.audios.length > 0 || r.nested.images.length > 0) {
     }
   }
-  return { videos, audios, subCompositions };
+  return { videos, audios, images, subCompositions };
 }
 function promoteCssImportsToLinkTags(html) {
   const { document: document2 } = parseHTML(html);
@@ -108451,7 +108727,7 @@ function inlineSubCompositions(html, subCompositions, projectDir) {
     if (!compHtml) {
       const filePath = resolve9(projectDir, srcPath);
       if (existsSync14(filePath)) {
-        compHtml = readFileSync8(filePath, "utf-8");
+        compHtml = readFileSync9(filePath, "utf-8");
       }
     }
     if (!compHtml) {
@@ -108619,7 +108895,9 @@ ${html}
 </html>`;
 }
 async function inlineExternalScripts(html) {
-  const { document: document2 } = parseHTML(html);
+  const fullHtml = ensureFullDocument(html);
+  const wrappedFragment = fullHtml !== html;
+  const { document: document2 } = parseHTML(fullHtml);
   const scripts = document2.querySelectorAll("script[src]");
   const externalScripts = [];
   for (const el of scripts) {
@@ -108638,20 +108916,20 @@ async function inlineExternalScripts(html) {
       return { src, text: await response.text() };
     })
   );
-  let result = html;
   for (let i = 0; i < downloads.length; i++) {
     const download = downloads[i];
-    const { src } = externalScripts[i];
+    const { el, src } = externalScripts[i];
     if (download.status === "fulfilled") {
-      const escapedSrc = src.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-      const scriptTagRe = new RegExp(
-        `<script\\b[^>]*\\bsrc=["']${escapedSrc}["'][^>]*>\\s*</script>`,
-        "is"
-      );
       const safeText = download.value.text.replace(/<\/script/gi, "<\\/script");
-      result = result.replace(scriptTagRe, `<script>/* inlined: ${src} */
+      const inlineScript = document2.createElement("script");
+      for (const attr of Array.from(el.attributes)) {
+        if (attr.name.toLowerCase() === "src") continue;
+        inlineScript.setAttribute(attr.name, attr.value);
+      }
+      inlineScript.textContent = `/* inlined: ${src} */
 ${safeText}
-</script>`);
+`;
+      el.replaceWith(inlineScript);
       console.log(`[Compiler] Inlined CDN script: ${src}`);
     } else {
       console.warn(
@@ -108659,7 +108937,7 @@ ${safeText}
       );
     }
   }
-  return result;
+  return wrappedFragment ? document2.body.innerHTML || "" : document2.toString();
 }
 function collectExternalAssets(html, projectDir) {
   const absProjectDir = resolve9(projectDir);
@@ -108719,7 +108997,7 @@ function collectExternalAssets(html, projectDir) {
   };
 }
 async function compileForRender(projectDir, htmlPath, downloadDir) {
-  const rawHtml = readFileSync8(htmlPath, "utf-8");
+  const rawHtml = readFileSync9(htmlPath, "utf-8");
   const { html: compiledHtml, unresolvedCompositions } = await compileHtmlFile(
     rawHtml,
     projectDir,
@@ -108728,6 +109006,7 @@ async function compileForRender(projectDir, htmlPath, downloadDir) {
   const {
     videos: subVideos,
     audios: subAudios,
+    images: subImages,
     subCompositions
   } = await parseSubCompositions(compiledHtml, projectDir, downloadDir);
   const fullHtml = ensureFullDocument(compiledHtml);
@@ -108744,8 +109023,10 @@ async function compileForRender(projectDir, htmlPath, downloadDir) {
   const { html, externalAssets } = collectExternalAssets(assembledHtml, projectDir);
   const mainVideos = parseVideoElements(html);
   const mainAudios = parseAudioElements(html);
+  const mainImages = parseImageElements(html);
   const videos = dedupeElementsById([...mainVideos, ...subVideos]);
   const audios = dedupeElementsById([...mainAudios, ...subAudios]);
+  const images = dedupeElementsById([...mainImages, ...subImages]);
   for (const video of videos) {
     if (isHttpUrl(video.src)) continue;
     const videoPath = resolve9(projectDir, video.src);
@@ -108776,6 +109057,7 @@ async function compileForRender(projectDir, htmlPath, downloadDir) {
     subCompositions,
     videos,
     audios,
+    images,
     unresolvedCompositions,
     externalAssets,
     width,
@@ -108860,12 +109142,15 @@ async function recompileWithResolutions(compiled, resolutions, projectDir, downl
   const {
     videos: subVideos,
     audios: subAudios,
+    images: subImages,
     subCompositions
   } = await parseSubCompositions(html, projectDir, downloadDir);
   const mainVideos = parseVideoElements(html);
   const mainAudios = parseAudioElements(html);
+  const mainImages = parseImageElements(html);
   const videos = dedupeElementsById([...mainVideos, ...subVideos]);
   const audios = dedupeElementsById([...mainAudios, ...subAudios]);
+  const images = dedupeElementsById([...mainImages, ...subImages]);
   const remaining = compiled.unresolvedCompositions.filter(
     (c) => !resolutions.some((r) => r.id === c.id)
   );
@@ -108875,6 +109160,7 @@ async function recompileWithResolutions(compiled, resolutions, projectDir, downl
     subCompositions,
     videos,
     audios,
+    images,
     unresolvedCompositions: remaining,
     renderModeHints: compiled.renderModeHints
   };
@@ -109060,7 +109346,7 @@ function blitHdrVideoLayer(canvas, el, time, fps, hdrFrameDirs, hdrStartTimes, w
     return;
   }
   try {
-    const { data: hdrRgb, width: srcW, height: srcH } = decodePngToRgb48le(readFileSync9(framePath));
+    const { data: hdrRgb, width: srcW, height: srcH } = decodePngToRgb48le(readFileSync10(framePath));
     if (sourceTransfer && targetTransfer && sourceTransfer !== targetTransfer) {
       convertTransfer(hdrRgb, sourceTransfer, targetTransfer);
     }
@@ -109102,6 +109388,55 @@ function blitHdrVideoLayer(canvas, el, time, fps, hdrFrameDirs, hdrStartTimes, w
     }
   }
 }
+function blitHdrImageLayer(canvas, el, hdrImageBuffers, width, height, log, sourceTransfer, targetTransfer) {
+  const buf = hdrImageBuffers.get(el.id);
+  if (!buf) {
+    return;
+  }
+  try {
+    let hdrRgb = buf.data;
+    if (sourceTransfer && targetTransfer && sourceTransfer !== targetTransfer) {
+      hdrRgb = Buffer.from(buf.data);
+      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,
+        buf.width,
+        buf.height,
+        width,
+        height,
+        el.opacity < 0.999 ? el.opacity : void 0,
+        borderRadiusParam
+      );
+    } else {
+      blitRgb48leRegion(
+        canvas,
+        hdrRgb,
+        el.x,
+        el.y,
+        buf.width,
+        buf.height,
+        width,
+        height,
+        el.opacity < 0.999 ? el.opacity : void 0,
+        borderRadiusParam
+      );
+    }
+  } catch (err) {
+    if (log) {
+      log.debug(`HDR image blit failed for ${el.id}`, {
+        error: err instanceof Error ? err.message : String(err)
+      });
+    }
+  }
+}
 function createRenderJob(config2) {
   return {
     id: randomUUID(),
@@ -109153,6 +109488,10 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
   let lastBrowserConsole = [];
   let restoreLogger = null;
   const perfStages = {};
+  const hdrDiagnostics = {
+    videoExtractionFailures: 0,
+    imageDecodeFailures: 0
+  };
   const perfOutputPath = join15(workDir, "perf-summary.json");
   const cfg = { ...job.config.producerConfig ?? resolveConfig() };
   const outputFormat = job.config.format ?? "mp4";
@@ -109184,7 +109523,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       throw new Error(`Entry file not found: ${htmlPath}`);
     }
     assertNotAborted();
-    const rawEntry = readFileSync9(htmlPath, "utf-8");
+    const rawEntry = readFileSync10(htmlPath, "utf-8");
     if (entryFile !== "index.html" && rawEntry.trimStart().startsWith("<template")) {
       const wrapperPath = join15(workDir, "standalone-entry.html");
       const projectIndexPath = join15(projectDir, "index.html");
@@ -109194,7 +109533,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
         );
       }
       const standaloneHtml = extractStandaloneEntryFromIndex(
-        readFileSync9(projectIndexPath, "utf-8"),
+        readFileSync10(projectIndexPath, "utf-8"),
         entryFile
       );
       if (!standaloneHtml) {
@@ -109229,6 +109568,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       duration: compiled.staticDuration,
       videos: compiled.videos,
       audios: compiled.audios,
+      images: compiled.images,
       width: compiled.width,
       height: compiled.height
     };
@@ -109293,6 +109633,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
           assertNotAborted();
           composition.videos = compiled.videos;
           composition.audios = compiled.audios;
+          composition.images = compiled.images;
           writeCompiledArtifacts(compiled, workDir, Boolean(job.config.debug));
         }
       }
@@ -109448,6 +109789,30 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
         })
       );
     }
+    const nativeHdrImageIds = /* @__PURE__ */ new Set();
+    const imageTransfers = /* @__PURE__ */ new Map();
+    const hdrImageSrcPaths = /* @__PURE__ */ new Map();
+    const imageColorSpaces = [];
+    if (job.config.hdr && composition.images.length > 0) {
+      const probed = await Promise.all(
+        composition.images.map(async (img) => {
+          let imgPath = img.src;
+          if (!imgPath.startsWith("/")) {
+            const fromCompiled = existsSync15(join15(compiledDir, imgPath)) ? join15(compiledDir, imgPath) : join15(projectDir, imgPath);
+            imgPath = fromCompiled;
+          }
+          if (!existsSync15(imgPath)) return null;
+          const meta = await extractVideoMetadata(imgPath);
+          if (isHdrColorSpace(meta.colorSpace)) {
+            nativeHdrImageIds.add(img.id);
+            imageTransfers.set(img.id, detectTransfer(meta.colorSpace));
+            hdrImageSrcPaths.set(img.id, imgPath);
+          }
+          return meta.colorSpace;
+        })
+      );
+      imageColorSpaces.push(...probed);
+    }
     if (composition.videos.length > 0) {
       extractionResult = await extractAllVideoFrames(
         composition.videos,
@@ -109485,21 +109850,22 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       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 (job.config.hdr) {
+      const videoColorSpaces = (extractionResult?.extracted ?? []).map(
+        (ext) => ext.metadata.colorSpace
+      );
+      const allColorSpaces = [...videoColorSpaces, ...imageColorSpaces];
+      if (allColorSpaces.length > 0) {
+        const info = analyzeCompositionHdr(allColorSpaces);
+        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`);
+      log.warn(
+        `[Render] HDR source detected but format is ${outputFormat} \u2014 falling back to SDR. Use --format mp4 for HDR10 output.`
+      );
       effectiveHdr = void 0;
     }
     if (effectiveHdr) {
@@ -109552,12 +109918,14 @@ 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 hasHdrContent = effectiveHdr && nativeHdrVideoIds.size > 0;
+    const nativeHdrIds = /* @__PURE__ */ new Set([...nativeHdrVideoIds, ...nativeHdrImageIds]);
+    const hasHdrContent = effectiveHdr && nativeHdrIds.size > 0;
     const encoderHdr = hasHdrContent ? effectiveHdr : void 0;
     const preset = getEncoderPreset(job.config.quality, outputFormat, encoderHdr);
     job.framesRendered = 0;
     if (hasHdrContent) {
       log.info("[Render] HDR layered composite: z-ordered DOM + native HLG video layers");
+      cfg.forceScreenshot = true;
       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) {
@@ -109573,7 +109941,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       const domSession = await createCaptureSession(
         fileServer.url,
         framesDir,
-        captureOptions,
+        { ...captureOptions, skipReadinessVideoIds: Array.from(nativeHdrVideoIds) },
         createVideoFrameInjector(frameLookup),
         cfg
       );
@@ -109627,13 +109995,22 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       );
       assertNotAborted();
       const hdrExtractionDims = /* @__PURE__ */ new Map();
+      const hdrImageFitInfo = /* @__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);
+      const hdrImageStartTimes = /* @__PURE__ */ new Map();
+      for (const img of composition.images) {
+        if (nativeHdrImageIds.has(img.id)) {
+          hdrImageStartTimes.set(img.id, img.start);
+        }
+      }
+      const uniqueStartTimes = [
+        .../* @__PURE__ */ new Set([...hdrVideoStartTimes.values(), ...hdrImageStartTimes.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);
@@ -109641,11 +110018,17 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
         if (domSession.onBeforeCapture) {
           await domSession.onBeforeCapture(domSession.page, seekTime);
         }
-        const stacking = await queryElementStacking(domSession.page, nativeHdrVideoIds);
+        const stacking = await queryElementStacking(domSession.page, nativeHdrIds);
         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 });
           }
+          if (el.isHdr && nativeHdrImageIds.has(el.id) && !hdrImageFitInfo.has(el.id)) {
+            hdrImageFitInfo.set(el.id, {
+              fit: el.objectFit,
+              position: el.objectPosition
+            });
+          }
         }
       }
       const hdrFrameDirs = /* @__PURE__ */ new Map();
@@ -109676,14 +110059,59 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
         ];
         const result = await runFfmpeg(ffmpegArgs, { signal: abortSignal });
         if (!result.success) {
-          log.warn("HDR frame pre-extraction failed; loop will fill with black", {
+          hdrDiagnostics.videoExtractionFailures += 1;
+          log.error("HDR frame pre-extraction failed; aborting render", {
             videoId,
             srcPath,
             stderr: result.stderr.slice(-400)
           });
+          throw new Error(
+            `HDR frame extraction failed for video "${videoId}". Aborting render to avoid shipping black HDR layers.`
+          );
         }
         hdrFrameDirs.set(videoId, frameDir);
       }
+      const hdrImageBuffers = /* @__PURE__ */ new Map();
+      for (const [imageId, srcPath] of hdrImageSrcPaths) {
+        try {
+          const decoded = decodePngToRgb48le(readFileSync10(srcPath));
+          const layout2 = hdrExtractionDims.get(imageId);
+          const fitInfo = hdrImageFitInfo.get(imageId);
+          if (layout2 && (layout2.width !== decoded.width || layout2.height !== decoded.height)) {
+            const fit = normalizeObjectFit(fitInfo?.fit);
+            const resampled = resampleRgb48leObjectFit(
+              decoded.data,
+              decoded.width,
+              decoded.height,
+              layout2.width,
+              layout2.height,
+              fit,
+              fitInfo?.position
+            );
+            hdrImageBuffers.set(imageId, {
+              data: resampled,
+              width: layout2.width,
+              height: layout2.height
+            });
+          } else {
+            hdrImageBuffers.set(imageId, {
+              data: Buffer.from(decoded.data),
+              width: decoded.width,
+              height: decoded.height
+            });
+          }
+        } catch (err) {
+          hdrDiagnostics.imageDecodeFailures += 1;
+          log.error("HDR image decode failed; aborting render", {
+            imageId,
+            srcPath,
+            error: err instanceof Error ? err.message : String(err)
+          });
+          throw new Error(
+            `HDR image decode failed for image "${imageId}". Aborting render to avoid shipping missing HDR image layers.`
+          );
+        }
+      }
       assertNotAborted();
       try {
         let countNonZeroAlpha2 = function(rgba) {
@@ -109741,38 +110169,67 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
             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
-              );
+              const isHdrImage = nativeHdrImageIds.has(layer.element.id);
+              if (isHdrImage) {
+                blitHdrImageLayer(
+                  canvas,
+                  layer.element,
+                  hdrImageBuffers,
+                  width,
+                  height,
+                  log,
+                  imageTransfers.get(layer.element.id),
+                  effectiveHdr?.transfer
+                );
+              } else {
+                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
-                });
+                if (isHdrImage) {
+                  const buf = hdrImageBuffers.get(layer.element.id);
+                  log.info("[diag] hdr layer blit", {
+                    frame: debugFrameIndex,
+                    layerIdx,
+                    id: layer.element.id,
+                    kind: "image",
+                    pixelsAdded: after2 - before2,
+                    totalNonZero: after2,
+                    bufferDecoded: !!buf,
+                    bufferDims: buf ? `${buf.width}x${buf.height}` : null
+                  });
+                } else {
+                  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,
+                    kind: "video",
+                    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);
@@ -109847,7 +110304,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
           if (beforeCaptureHook) {
             await beforeCaptureHook(domSession.page, time);
           }
-          const stackingInfo = await queryElementStacking(domSession.page, nativeHdrVideoIds);
+          const stackingInfo = await queryElementStacking(domSession.page, nativeHdrIds);
           const activeTransition = transitionRanges.find(
             (t) => i >= t.startFrame && i <= t.endFrame
           );
@@ -109879,22 +110336,35 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
               }
               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
-                );
+                if (nativeHdrImageIds.has(el.id)) {
+                  blitHdrImageLayer(
+                    sceneBuf,
+                    el,
+                    hdrImageBuffers,
+                    width,
+                    height,
+                    log,
+                    imageTransfers.get(el.id),
+                    effectiveHdr?.transfer
+                  );
+                } else {
+                  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));
+              const hideIds = stackingInfo.map((e) => e.id).filter((id) => !sceneIds.has(id) || nativeHdrIds.has(id));
               await applyDomLayerMask(domSession.page, showIds, hideIds);
               const domPng = await captureAlphaPng(domSession.page, width, height);
               await removeDomLayerMask(domSession.page, hideIds);
@@ -110015,7 +110485,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
             fileServer.url,
             workDir,
             tasks,
-            captureOptions,
+            { ...captureOptions, skipReadinessVideoIds: Array.from(nativeHdrVideoIds) },
             () => createVideoFrameInjector(frameLookup),
             abortSignal,
             (progress) => {
@@ -110045,7 +110515,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
           const session = probeSession ?? await createCaptureSession(
             fileServer.url,
             framesDir,
-            captureOptions,
+            { ...captureOptions, skipReadinessVideoIds: Array.from(nativeHdrVideoIds) },
             videoInjector,
             cfg
           );
@@ -110096,7 +110566,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
             fileServer.url,
             workDir,
             tasks,
-            captureOptions,
+            { ...captureOptions, skipReadinessVideoIds: Array.from(nativeHdrVideoIds) },
             () => createVideoFrameInjector(frameLookup),
             abortSignal,
             (progress) => {
@@ -110127,7 +110597,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
           const session = probeSession ?? await createCaptureSession(
             fileServer.url,
             framesDir,
-            captureOptions,
+            { ...captureOptions, skipReadinessVideoIds: Array.from(nativeHdrVideoIds) },
             videoInjector,
             cfg
           );
@@ -110245,6 +110715,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       videoCount: composition.videos.length,
       audioCount: composition.audios.length,
       stages: perfStages,
+      hdrDiagnostics: hdrDiagnostics.videoExtractionFailures > 0 || hdrDiagnostics.imageDecodeFailures > 0 ? { ...hdrDiagnostics } : void 0,
       captureAvgMs: totalFrames > 0 ? Math.round((perfStages.captureMs ?? 0) / totalFrames) : void 0
     };
     job.perfSummary = perfSummary;
@@ -110325,7 +110796,8 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       elapsedMs: elapsed,
       freeMemoryMB: freeMemMB,
       browserConsoleTail: lastBrowserConsole.length > 0 ? lastBrowserConsole.slice(-30) : void 0,
-      perfStages: Object.keys(perfStages).length > 0 ? { ...perfStages } : void 0
+      perfStages: Object.keys(perfStages).length > 0 ? { ...perfStages } : void 0,
+      hdrDiagnostics: hdrDiagnostics.videoExtractionFailures > 0 || hdrDiagnostics.imageDecodeFailures > 0 ? { ...hdrDiagnostics } : void 0
     };
     if (fileServer) {
       const fs8 = fileServer;
@@ -110520,7 +110992,7 @@ var streamSSE = (c, cb, onError) => {
 };
 
 // src/services/hyperframeLint.ts
-import { existsSync as existsSync16, readFileSync as readFileSync10, statSync as statSync6 } from "node:fs";
+import { existsSync as existsSync16, readFileSync as readFileSync11, statSync as statSync6 } from "node:fs";
 import { resolve as resolve11, join as join16 } from "node:path";
 function isStringRecord(value) {
   if (!value || typeof value !== "object" || Array.isArray(value)) {
@@ -110563,7 +111035,7 @@ function readProjectEntryFile(projectDir, preferredEntryFile) {
     if (existsSync16(absoluteEntryPath) && statSync6(absoluteEntryPath).isFile()) {
       return {
         entryFile,
-        html: readFileSync10(absoluteEntryPath, "utf-8"),
+        html: readFileSync11(absoluteEntryPath, "utf-8"),
         source: "projectDir"
       };
     }