@hyperframes/producer 0.8.149 → 0.8.151

package/dist/public-server.js

@@ -4323,7 +4323,8 @@ function computeSegmentPlanHash(input) {
     input.imageFormat,
     input.useGpu ? "gpu" : "cpu",
     `${input.outputWidth}x${input.outputHeight}`,
-    input.motionBlur
+    input.motionBlur,
+    input.captureQuality === void 0 ? "" : String(input.captureQuality)
   ].join(" ");
   return createHash2("sha256").update(ordered).digest("hex").slice(0, 16);
 }
@@ -5239,9 +5240,18 @@ import {
 
 // src/services/renderMediaCollector.ts
 import { parseHTML as parseHTML2 } from "linkedom";
-import { MEDIA_RENDER_ID_ATTR, resolveAuthoredTimingWindow } from "@hyperframes/core";
+import {
+  MEDIA_RENDER_ID_ATTR,
+  normalizeRateSpec as normalizeRateSpec2,
+  resolveAuthoredTimingWindow,
+  shiftRateLane,
+  sourceTimeAt as sourceTimeAt2
+} from "@hyperframes/core";
 import {
   MEDIA_START_BASIS_ATTR,
+  compositionOriginSeconds,
+  cutToHostSlots,
+  hostInPointSeconds,
   readMediaStartBasis,
   resolveAbsoluteMediaStartSeconds
 } from "@hyperframes/core/media-timing";
@@ -5251,7 +5261,6 @@ import {
   parseAudioElements,
   resolveReferencedStart
 } from "@hyperframes/engine";
-var COMPOSITION_HOST_ATTR = "data-composition-file";
 function resolveHostEnd(host, hostStart) {
   return resolveAuthoredTimingWindow({
     start: hostStart,
@@ -5259,39 +5268,52 @@ function resolveHostEnd(host, hostStart) {
     end: host.getAttribute("data-end")
   })?.end ?? null;
 }
-var ROOT_WINDOW = { offset: 0, limit: Infinity, basis: "local" };
-function resolveHostWindow(element, document2, startCache, visiting) {
+var ROOT_WINDOW = { offset: 0, limit: Infinity, basis: "local", slots: [] };
+var COMPOSITION_HOST_SELECTOR = "[data-composition-id], [data-composition-src], [data-composition-file]";
+function enclosingHosts(element) {
   const hosts = [];
   for (let ancestor = element.parentElement; ancestor; ancestor = ancestor.parentElement) {
-    if (ancestor.hasAttribute(COMPOSITION_HOST_ATTR)) hosts.push(ancestor);
+    if (ancestor.matches(COMPOSITION_HOST_SELECTOR)) {
+      hosts.unshift(ancestor);
+    }
   }
+  return hosts;
+}
+function resolveHostWindow(element, document2, startCache, visiting) {
+  const hosts = enclosingHosts(element);
   if (hosts.length === 0) return ROOT_WINDOW;
   let offset = 0;
   let limit = Infinity;
-  for (const host of hosts.reverse()) {
+  const slots = [];
+  for (const [index, host] of hosts.entries()) {
     const hostStart = resolveReferencedStart(document2, host, startCache, visiting);
     const hostEnd = resolveHostEnd(host, hostStart);
-    if (hostEnd != null) limit = Math.min(limit, offset + hostEnd);
-    offset += hostStart;
+    if (hostEnd != null && !isRootComposition(host, index)) {
+      limit = Math.min(limit, offset + hostEnd);
+    }
+    if (hostInPointSeconds(host) > 0) {
+      slots.push({ start: offset + hostStart, end: offset + (hostEnd ?? Infinity) });
+    }
+    offset += compositionOriginSeconds(hostStart, host);
   }
+  return { offset, limit, basis: mediaStartBasis(element), slots };
+}
+var isRootComposition = (host, depth) => depth === 0 && !host.matches("[data-composition-src], [data-composition-file]");
+function mediaStartBasis(element) {
   const tag = element.tagName.toLowerCase();
-  const basis = tag === "video" || tag === "audio" ? readMediaStartBasis(element.getAttribute(MEDIA_START_BASIS_ATTR)) : "local";
-  return {
-    offset,
-    limit,
-    basis
-  };
+  return tag === "video" || tag === "audio" ? readMediaStartBasis(element.getAttribute(MEDIA_START_BASIS_ATTR)) : "local";
 }
 function collectHostWindows(html) {
   const { document: document2 } = parseHTML2(html);
   const windows = /* @__PURE__ */ new Map();
   const startCache = /* @__PURE__ */ new Map();
   const visiting = /* @__PURE__ */ new Set();
-  for (const element of document2.querySelectorAll(`[${MEDIA_RENDER_ID_ATTR}]`)) {
+  for (const element of document2.querySelectorAll("video, audio, img[src]")) {
     const renderId = element.getAttribute(MEDIA_RENDER_ID_ATTR);
-    if (!renderId) continue;
+    const id = renderId || element.getAttribute("id");
+    if (!id || !renderId && windows.has(id)) continue;
     windows.set(
-      renderId,
+      id,
       resolveHostWindow(element, document2, startCache, visiting)
     );
   }
@@ -5309,34 +5331,59 @@ function toAbsoluteWindow(start, end, window2) {
     hostStart: window2.offset,
     basis: window2.basis
   });
-  return { start: absoluteStart, end: Math.min(absoluteEnd, window2.limit) };
+  const absolute = { start: absoluteStart, end: Math.min(absoluteEnd, window2.limit) };
+  const played = cutToHostSlots(absolute, window2.slots);
+  if (played.end === played.start && absolute.end > absolute.start) return null;
+  return { start: absolute.start, end: played.end, played };
+}
+function startAtPlayed(clip, played) {
+  const head = played.start - clip.start;
+  if (head <= 0) return clip;
+  if ("loop" in clip && clip.loop) return { ...clip, start: played.start };
+  const rate = normalizeRateSpec2(clip.playbackRate);
+  return {
+    ...clip,
+    start: played.start,
+    mediaStart: clip.mediaStart + sourceTimeAt2(rate, head),
+    playbackRate: shiftRateLane(rate, head)
+  };
 }
 function collectRenderMedia(html) {
   const windows = collectHostWindows(html);
   const windowFor = (id) => windows.get(id) ?? ROOT_WINDOW;
+  const droppedMediaIds = /* @__PURE__ */ new Set();
   const videos = [];
   for (const video of parseVideoElements(html)) {
     const absolute = toAbsoluteWindow(video.start, video.end, windowFor(video.id));
-    if (absolute) videos.push({ ...video, ...absolute });
+    if (!absolute) {
+      droppedMediaIds.add(video.id);
+      continue;
+    }
+    videos.push(
+      startAtPlayed({ ...video, start: absolute.start, end: absolute.end }, absolute.played)
+    );
   }
   const images = [];
   for (const image of parseImageElements(html)) {
     const absolute = toAbsoluteWindow(image.start, image.end, windowFor(image.id));
-    if (absolute) images.push({ ...image, ...absolute });
+    if (absolute) images.push({ ...image, start: absolute.start, end: absolute.end });
+    else droppedMediaIds.add(image.id);
   }
   const audios = [];
   for (const audio of parseAudioElements(html)) {
     const elementId = audio.type === "video" ? audio.id.replace(/-audio$/, "") : audio.id;
-    const authoredEnd = audio.end > 0 ? audio.end : Infinity;
-    const absolute = toAbsoluteWindow(audio.start, authoredEnd, windowFor(elementId));
-    if (!absolute) continue;
-    audios.push({
-      ...audio,
-      start: absolute.start,
-      end: Number.isFinite(absolute.end) ? absolute.end : 0
-    });
+    const placed = placeAudio(audio, windowFor(elementId));
+    if (placed) audios.push(placed);
+    else droppedMediaIds.add(elementId);
   }
-  return { videos, audios, images };
+  return { videos, audios, images, droppedMediaIds };
+}
+function placeAudio(audio, window2) {
+  const authoredEnd = audio.end > 0 ? audio.end : Infinity;
+  const absolute = toAbsoluteWindow(audio.start, authoredEnd, window2);
+  if (!absolute) return null;
+  const end = Number.isFinite(absolute.end) ? absolute.end : 0;
+  return startAtPlayed({ ...audio, start: absolute.start, end }, absolute.played);
 }
 
 // src/services/htmlCompiler.ts
@@ -5344,6 +5391,7 @@ import {
   analyzeKeyframeIntervals,
   assertMediaPayload,
   NotMediaPayloadError as NotMediaPayloadError2,
+  parseMasterFxChain,
   probeMediaProfile as probeMediaProfile2
 } from "@hyperframes/engine";
 
@@ -7043,7 +7091,8 @@ async function compileForRender(projectDir, htmlPath, downloadDir, options = {})
   for (const [relPath, absPath] of preparedGifAssets) {
     externalAssets.set(relPath, absPath);
   }
-  const { videos, audios, images } = collectRenderMedia(html);
+  const { videos, audios, images, droppedMediaIds } = collectRenderMedia(html);
+  const masterFxChain = parseMasterFxChain(html);
   for (const video of videos) {
     if (isHttpUrl(video.src)) continue;
     const videoPath = resolve6(projectDir, video.src);
@@ -7077,6 +7126,8 @@ async function compileForRender(projectDir, htmlPath, downloadDir, options = {})
     videos,
     audios,
     images,
+    droppedMediaIds,
+    ...masterFxChain ? { masterFxChain } : {},
     unresolvedCompositions,
     externalAssets,
     width,
@@ -7509,6 +7560,7 @@ async function runCompileStage(input) {
     videos: compiled.videos,
     audios: compiled.audios,
     images: compiled.images,
+    masterFxChain: compiled.masterFxChain,
     width: compiled.width,
     height: compiled.height
   };
@@ -7571,7 +7623,7 @@ import {
   isTransientBrowserError,
   probeBeginFrameLiveness
 } from "@hyperframes/engine";
-import { fpsToNumber as fpsToNumber7 } from "@hyperframes/core";
+import { MEDIA_RENDER_ID_ATTR as MEDIA_RENDER_ID_ATTR2, fpsToNumber as fpsToNumber7, readMediaStart as readMediaStart2 } from "@hyperframes/core";
 import { extractMediaSrcMutations } from "@hyperframes/parsers";
 
 // src/services/render/stages/probeFailures.ts
@@ -7585,6 +7637,9 @@ function isActionableProbeFailure(line) {
 function resolveCaptureImageFormat(input) {
   return input.needsAlpha || input.motionBlur ? "png" : "jpeg";
 }
+function resolveCaptureJpegQuality(quality) {
+  return quality === "draft" ? 80 : 100;
+}
 
 // src/services/render/stages/probeStage.ts
 var FRAME_BOUNDARY_EPSILON = 1e-3;
@@ -7618,6 +7673,26 @@ function hasVariableBoundMedia(html, variables) {
     return Boolean(variableId && Object.hasOwn(variables, variableId));
   });
 }
+function authoredMediaStarts(html) {
+  const { document: document2 } = parseHTML5(html);
+  const starts = /* @__PURE__ */ new Map();
+  for (const media of document2.querySelectorAll("video, audio")) {
+    const id = media.getAttribute(MEDIA_RENDER_ID_ATTR2) || media.getAttribute("id");
+    if (id && !starts.has(id)) starts.set(id, readMediaStart2(media));
+  }
+  return starts;
+}
+function adoptRuntimeMediaStart(composition, el, authored) {
+  const shift = el.mediaStart - authored;
+  if (el.mediaStart <= 0 || Math.abs(shift) <= BROWSER_MEDIA_EPSILON) return;
+  const entries = el.tagName === "video" ? [
+    ...composition.videos.filter((video) => video.id === el.id),
+    ...composition.audios.filter(
+      (audio) => audio.type === "video" && audio.id === `${el.id}-audio`
+    )
+  ] : composition.audios.filter((audio) => audio.type !== "video" && audio.id === el.id);
+  for (const entry of entries) entry.mediaStart += shift;
+}
 function reconcileBrowserMediaEnd(existingEnd, projectedEnd, sourceChanged, durationInferred) {
   if (projectedEnd <= 0) return existingEnd;
   if (sourceChanged && durationInferred) return projectedEnd;
@@ -7720,7 +7795,7 @@ async function runProbeStage(input) {
         height,
         fps: job.config.fps,
         format: captureFormat,
-        quality: captureFormat === "png" ? void 0 : 80,
+        quality: captureFormat === "png" ? void 0 : resolveCaptureJpegQuality(job.config.quality),
         variables: job.config.variables,
         deviceScaleFactor,
         motionBlur,
@@ -7871,6 +7946,7 @@ async function runProbeStage(input) {
         const existingVideoIds = new Set(composition.videos.map((v) => v.id));
         const existingAudioIds = new Set(composition.audios.map((a) => a.id));
         const existingImageIds = new Set(composition.images.map((image) => image.id));
+        const authoredStarts = authoredMediaStarts(compiled.html);
         pruneMutedBrowserMedia(composition, browserMedia, existingAudioIds);
         for (const el of browserMedia) {
           if (!el.src || el.src === "about:blank") continue;
@@ -7898,9 +7974,11 @@ async function runProbeStage(input) {
                   sourceChanged,
                   el.durationInferred
                 );
-                if (el.mediaStart > 0 && (existing.mediaStart <= 0 || Math.abs(existing.mediaStart - el.mediaStart) > BROWSER_MEDIA_EPSILON)) {
-                  existing.mediaStart = el.mediaStart;
-                }
+                adoptRuntimeMediaStart(
+                  composition,
+                  el,
+                  authoredStarts.get(el.id) ?? existing.mediaStart
+                );
                 if (el.hasAudio && !el.muted && !existing.hasAudio) {
                   existing.hasAudio = true;
                 }
@@ -7908,7 +7986,7 @@ async function runProbeStage(input) {
                   existing.loop = true;
                 }
               }
-            } else {
+            } else if (!compiled.droppedMediaIds.has(el.id)) {
               composition.videos.push({
                 id: el.id,
                 src,
@@ -7939,14 +8017,16 @@ async function runProbeStage(input) {
                   sourceChanged,
                   el.durationInferred
                 );
-                if (el.mediaStart > 0 && (existing.mediaStart <= 0 || Math.abs(existing.mediaStart - el.mediaStart) > BROWSER_MEDIA_EPSILON)) {
-                  existing.mediaStart = el.mediaStart;
-                }
+                adoptRuntimeMediaStart(
+                  composition,
+                  el,
+                  authoredStarts.get(el.id) ?? existing.mediaStart
+                );
                 if (el.volume > 0 && Math.abs((existing.volume ?? 1) - el.volume) > BROWSER_MEDIA_EPSILON) {
                   existing.volume = el.volume;
                 }
               }
-            } else {
+            } else if (!compiled.droppedMediaIds.has(el.id)) {
               composition.audios.push({
                 id: el.id,
                 src,
@@ -7974,7 +8054,7 @@ async function runProbeStage(input) {
                   existing.end = projectedEnd;
                 }
               }
-            } else {
+            } else if (!compiled.droppedMediaIds.has(el.id)) {
               composition.images.push({
                 id: el.id,
                 src,
@@ -8557,6 +8637,7 @@ async function runAudioStage(input) {
     ffmpegProcessTimeout,
     audioGain,
     audios,
+    masterFxChain,
     abortSignal,
     assertNotAborted,
     log
@@ -8576,7 +8657,7 @@ async function runAudioStage(input) {
         audioOutputPath,
         duration,
         abortSignal,
-        { ffmpegProcessTimeout, audioGain },
+        { ffmpegProcessTimeout, audioGain, masterFxChain },
         compiledDir
       );
     } catch (err) {
@@ -8662,13 +8743,16 @@ function shouldAllowAdaptiveCaptureRetry(workerCount, _explicitlyConfigured) {
   return workerCount > 1;
 }
 var JPEG_RAW_RGBA_DIVISOR = 8;
+var HIGH_QUALITY_JPEG_RAW_RGBA_DIVISOR = 4;
 var DISK_PROJECTION_SAMPLE_FRAMES = 10;
 function estimateDiskCaptureBytes(totalFrames, captureOptions) {
   const scale = captureOptions.deviceScaleFactor ?? 1;
   const outputWidth = Math.ceil(captureOptions.width * scale);
   const outputHeight = Math.ceil(captureOptions.height * scale);
   const rawBytes = Math.ceil(totalFrames) * outputWidth * outputHeight * 4;
-  return frameFileExtension(captureOptions.format) === "jpg" ? Math.ceil(rawBytes / JPEG_RAW_RGBA_DIVISOR) : rawBytes;
+  return frameFileExtension(captureOptions.format) === "jpg" ? Math.ceil(
+    rawBytes / ((captureOptions.quality ?? 80) > 80 ? HIGH_QUALITY_JPEG_RAW_RGBA_DIVISOR : JPEG_RAW_RGBA_DIVISOR)
+  ) : rawBytes;
 }
 function freeDiskBytesAt(path) {
   try {
@@ -12045,6 +12129,7 @@ async function executeRenderPipeline(input) {
         ffmpegProcessTimeout: cfg.ffmpegProcessTimeout,
         audioGain: cfg.audioGain,
         audios: composition.audios,
+        masterFxChain: composition.masterFxChain,
         abortSignal: executionSignal,
         assertNotAborted,
         log
@@ -12129,7 +12214,7 @@ async function executeRenderPipeline(input) {
       height,
       fps: job.config.fps,
       format: captureImageFormat,
-      quality: captureImageFormat === "png" ? void 0 : job.config.quality === "draft" ? 80 : 95,
+      quality: captureImageFormat === "png" ? void 0 : resolveCaptureJpegQuality(job.config.quality),
       variables: job.config.variables,
       deviceScaleFactor,
       motionBlur: job.config.motionBlur,
@@ -12757,7 +12842,8 @@ async function executeRenderPipeline(input) {
           // Device-scaled: the capture buffer, not the CSS composition size.
           outputWidth: captureCompositionWidth ?? width,
           outputHeight: captureCompositionHeight ?? height,
-          motionBlur: job.config.motionBlur ? JSON.stringify(job.config.motionBlur) : ""
+          motionBlur: job.config.motionBlur ? JSON.stringify(job.config.motionBlur) : "",
+          captureQuality: captureOptions.quality
         });
         const segmentDir = segmentDirFor(join26(projectDir, "renders"), segmentPlanHash);
         let completedSegments = /* @__PURE__ */ new Set();

package/dist/services/htmlCompiler.d.ts

@@ -8,6 +8,8 @@ export interface CompiledComposition {
     videos: VideoElement[];
     audios: AudioElement[];
     images: ImageElement[];
+    droppedMediaIds: Set<string>;
+    masterFxChain?: string;
     unresolvedCompositions: UnresolvedElement[];
     /** Assets that resolve outside projectDir. Keys are the path used in HTML, values are absolute filesystem paths. */
     externalAssets: Map<string, string>;

package/dist/services/render/captureImageFormat.d.ts

@@ -1,4 +1,4 @@
-import type { MotionBlurOptions } from "@hyperframes/engine";
+import type { EngineConfig, MotionBlurOptions } from "@hyperframes/engine";
 /**
  * The format a render captures its frames in.
  *
@@ -16,3 +16,8 @@ export declare function resolveCaptureImageFormat(input: {
     needsAlpha: boolean;
     motionBlur: MotionBlurOptions | undefined;
 }): "jpeg" | "png";
+/**
+ * Below 100, Chrome's JPEG turns graded colour and grain into 8x8 chroma blotches that survive
+ * the final encode. Draft keeps the smaller, faster frames.
+ */
+export declare function resolveCaptureJpegQuality(quality: EngineConfig["quality"]): number;

package/dist/services/render/segmentManifest.d.ts

@@ -37,6 +37,7 @@ export interface SegmentPlanHashInput {
     outputHeight: number;
     /** Serialised motion-blur options, or "" when off; sample count and shutter change every pixel. */
     motionBlur: string;
+    captureQuality: number | undefined;
 }
 /** Everything that determines segment bytes. Key order is fixed by construction. */
 export declare function computeSegmentPlanHash(input: SegmentPlanHashInput): string;

package/dist/services/render/shared.d.ts

@@ -19,6 +19,7 @@ export interface CompositionMetadata {
     videos: VideoElement[];
     audios: AudioElement[];
     images: ImageElement[];
+    masterFxChain?: string;
     width: number;
     height: number;
 }

package/dist/services/render/stages/audioStage.d.ts

@@ -32,6 +32,7 @@ export interface AudioStageInput {
     audioGain: number;
     /** Read-only view of `composition.audios`. */
     audios: CompositionMetadata["audios"];
+    masterFxChain?: string;
     abortSignal: AbortSignal | undefined;
     assertNotAborted: () => void;
     /** Where a per-track failure's detail goes. Optional so tests need not pass one. */

package/dist/services/renderMediaCollector.d.ts

@@ -1,23 +1,17 @@
 /**
  * Collect the render pipeline's media list from the fully inlined document.
  *
- * Sub-composition media used to be gathered from each composition FILE before
- * inlining, then merged with the main document's media and deduplicated by
- * element id. That merge is unsound: ids are unique per file, not per render
- * document, so two scenes that both declare `<video id="clip">` — or that both
- * declare a bare `<video>` and get the per-file auto-id `hf-video-0` — collapse
- * into a single entry. See mediaRenderIds.ts for the full failure.
- *
- * Reading the inlined document instead makes the render document the single
- * source of truth for what media exists: every element is present exactly once,
- * `assignMediaRenderIds` has already given it a document-unique key, and the
- * timeline offsets are recoverable from the composition hosts it sits inside.
+ * Ids are unique per composition file, not per render document (see mediaRenderIds.ts), so media is
+ * read from the inlined document: each element once, keyed by its render id or else its author id,
+ * and placed by the composition hosts it sits inside.
  */
 import { type VideoElement, type ImageElement, type AudioElement } from "@hyperframes/engine";
 export interface RenderMedia {
     videos: VideoElement[];
     audios: AudioElement[];
     images: ImageElement[];
+    /** Ids of clips in the document that never play; the browser probe must not add them back. */
+    droppedMediaIds: Set<string>;
 }
 /**
  * Parse every media element in the inlined render document, with each clip's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/producer",
-  "version": "0.8.149",
+  "version": "0.8.151",
   "description": "HTML-to-video rendering engine using Chrome's BeginFrame API",
   "repository": {
     "type": "git",
@@ -35,11 +35,11 @@
     "postcss": "^8.4.0",
     "puppeteer": "^25.2.1",
     "puppeteer-core": "^25.2.1",
-    "@hyperframes/engine": "0.8.149",
-    "@hyperframes/core": "0.8.149",
-    "@hyperframes/lint": "0.8.149",
-    "@hyperframes/studio-server": "0.8.149",
-    "@hyperframes/parsers": "0.8.149"
+    "@hyperframes/lint": "0.8.151",
+    "@hyperframes/engine": "0.8.151",
+    "@hyperframes/studio-server": "0.8.151",
+    "@hyperframes/parsers": "0.8.151",
+    "@hyperframes/core": "0.8.151"
   },
   "devDependencies": {
     "@types/node": "^25.0.10",
@@ -48,7 +48,7 @@
     "tsx": "^4.21.0",
     "typescript": "^5.7.2",
     "vitest": "^4.1.11",
-    "@hyperframes/aws-lambda": "0.8.149"
+    "@hyperframes/aws-lambda": "0.8.151"
   },
   "engines": {
     "node": ">=22"