From e58bff5756336c098cefbba0ac52ce441ae01ec5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 01:34:30 +0200
Subject: [PATCH 01/30] docs: add client-side renderer design spec
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Design spec for @hyperframes/renderer — a new browser-only package that
renders compositions to MP4 using WebCodecs + MediaBunny + OffscreenCanvas
workers, with SnapDOM as interim frame source and html-in-canvas as the
future pixel-perfect path. Replaces the need for Puppeteer + FFmpeg.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../2026-04-10-client-side-renderer-design.md | 872 ++++++++++++++++++
 1 file changed, 872 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-04-10-client-side-renderer-design.md

diff --git a/docs/superpowers/specs/2026-04-10-client-side-renderer-design.md b/docs/superpowers/specs/2026-04-10-client-side-renderer-design.md
new file mode 100644
index 00000000..c0610b04
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-10-client-side-renderer-design.md
@@ -0,0 +1,872 @@
+# Client-Side Video Renderer — Design Spec
+
+> **Date:** 2026-04-10
+> **Status:** Draft
+> **Package:** `@hyperframes/renderer`
+> **Goal:** Render HyperFrames compositions to MP4 entirely in the browser — no server, no Puppeteer, no FFmpeg.
+
+---
+
+## 1. Motivation
+
+The current rendering pipeline (`@hyperframes/producer` + `@hyperframes/engine`) requires server-side infrastructure:
+
+- **Puppeteer** + **chrome-headless-shell** (~400MB) for frame capture via Chrome's `HeadlessExperimental.beginFrame` CDP API
+- **FFmpeg** (~100MB) for encoding, audio mixing, and muxing
+- A Node.js server to orchestrate the pipeline
+
+This means every render requires either a local dev machine with these binaries or a cloud server. The cost, complexity, and accessibility barriers limit where HyperFrames can be used.
+
+**Browser APIs have matured enough to replace this entire stack:**
+
+| Server-side dependency | Browser replacement |
+|---|---|
+| Puppeteer (frame capture) | SnapDOM / `drawElementImage` (html-in-canvas) |
+| FFmpeg (video encoding) | WebCodecs `VideoEncoder` (hardware-accelerated) |
+| FFmpeg (muxing) | MediaBunny (zero-dep TS, supports MP4/WebM/MOV) |
+| FFmpeg (audio mixing) | `OfflineAudioContext` (Web Audio API) |
+| Node.js server | Web Workers + `OffscreenCanvas` |
+
+### Success Criteria
+
+1. **Zero server dependencies** — Rendering works in a browser tab with no backend
+2. **95%+ pixel fidelity** at launch vs. the BeginFrame reference renderer, with a clear path to 100% via `drawElementImage`
+3. **Full feature parity** with the server-side producer: GSAP/CSS/Lottie/Three.js animations, embedded `<video>` elements, multi-track audio mixing, sub-compositions
+4. **Universal consumption** — Works in Studio, Player, and as a standalone JS API
+
+---
+
+## 2. Architecture Overview
+
+### Approach: Interfaces First + Thin Slice + Parallel Widen
+
+1. **Define all interfaces** upfront — `FrameSource`, `EncoderPipeline`, `AudioMixer`, `Muxer`, `Renderer`
+2. **Build the thinnest end-to-end slice** — single iframe + SnapDOM → single WebCodecs encode → MediaBunny mux → MP4 blob. Validates SnapDOM fidelity on day 1.
+3. **Widen in parallel** — add Worker pool, parallel iframes, audio mixing, video element support, all behind the established interfaces
+
+### Pipeline Diagram
+
+```
+                        Main Thread                              Worker Pool
+┌──────────────────────────────────────────────┐    ┌─────────────────────────────────┐
+│                                              │    │                                 │
+│  ┌─────────┐  ┌─────────┐  ┌─────────┐      │    │  ┌──────────┐  ┌────────────┐  │
+│  │iframe[0]│  │iframe[1]│  │iframe[2]│ ...   │    │  │WebCodecs │  │ MediaBunny │  │
+│  │seek(0-N)│  │seek(N-M)│  │seek(M-T)│      │    │  │VideoEnc  │──│   Muxer    │  │
+│  └────┬────┘  └────┬────┘  └────┬────┘      │    │  └──────────┘  └─────┬──────┘  │
+│       │             │            │            │    │                      │         │
+│       ▼             ▼            ▼            │    │                      ▼         │
+│  ┌──────────────────────────────────────┐    │    │              ┌──────────────┐  │
+│  │         FrameSource (SnapDOM)        │    │    │              │  MP4 Blob    │  │
+│  │  seek → snapshot → ImageBitmap       │    │    │              └──────────────┘  │
+│  └──────────────────┬───────────────────┘    │    │                                 │
+│                     │ transferable           │    │                                 │
+│                     │ ImageBitmap            │    │                                 │
+│                     └────────────────────────┼───►│                                 │
+│                                              │    │                                 │
+│  ┌──────────────────────────────────────┐    │    │                                 │
+│  │         AudioMixer                   │    │    │                                 │
+│  │  OfflineAudioContext → PCM buffer    │────┼───►│  Muxed into MP4 audio track     │
+│  └──────────────────────────────────────┘    │    │                                 │
+└──────────────────────────────────────────────┘    └─────────────────────────────────┘
+```
+
+### Data Flow (per frame)
+
+1. **Seek**: `iframe.contentWindow.__hf.seek(time)` — positions composition at exact frame time
+2. **Capture**: `FrameSource.capture(iframe)` — SnapDOM snapshots the DOM to an `ImageBitmap`
+3. **Transfer**: `worker.postMessage({ frame, index }, [frame])` — zero-copy transfer to worker
+4. **Encode**: `VideoEncoder.encode(new VideoFrame(bitmap, { timestamp }))` — hardware-accelerated
+5. **Mux**: MediaBunny collects encoded chunks into MP4 container
+6. **Audio**: `OfflineAudioContext` renders mixed audio → raw PCM → muxed as audio track
+7. **Output**: Final MP4 `Blob` returned to caller
+
+---
+
+## 3. Interfaces
+
+### 3.1 FrameSource
+
+The abstraction that makes the renderer future-proof. Swappable implementations: SnapDOM today, `drawElementImage` tomorrow.
+
+```typescript
+/**
+ * A FrameSource captures visual frames from a composition at specific times.
+ * Implementations must produce deterministic output for a given time.
+ */
+interface FrameSource {
+  /** Human-readable name for diagnostics */
+  readonly name: string;
+
+  /**
+   * Initialize the frame source with the composition.
+   * May create iframes, set up canvases, load the composition, etc.
+   */
+  init(config: FrameSourceConfig): Promise<void>;
+
+  /**
+   * Capture a single frame at the given time.
+   * Returns a transferable ImageBitmap suitable for posting to a Worker.
+   */
+  capture(time: number): Promise<ImageBitmap>;
+
+  /**
+   * The total duration of the loaded composition in seconds.
+   * Available after init() resolves.
+   */
+  readonly duration: number;
+
+  /**
+   * Media elements declared by the composition (video/audio sources).
+   * Available after init() resolves.
+   */
+  readonly media: HfMediaElement[];
+
+  /** Release all resources (iframes, canvases, etc.) */
+  dispose(): Promise<void>;
+}
+
+interface FrameSourceConfig {
+  /** Path or URL to the composition HTML file */
+  compositionUrl: string;
+  /** Viewport width in pixels */
+  width: number;
+  /** Viewport height in pixels */
+  height: number;
+  /** Device pixel ratio (default: 1) */
+  devicePixelRatio?: number;
+}
+```
+
+### 3.2 EncoderPipeline
+
+```typescript
+/**
+ * Encodes ImageBitmap frames into compressed video chunks.
+ * Runs inside a Web Worker.
+ */
+interface EncoderPipeline {
+  /** Configure the encoder. Must be called before encode(). */
+  init(config: EncoderConfig): Promise<void>;
+
+  /** Encode a single frame. Frames must be submitted in order. */
+  encode(frame: ImageBitmap, index: number, timestamp: number): Promise<void>;
+
+  /** Signal that all frames have been submitted. Flushes the encoder. */
+  flush(): Promise<void>;
+
+  /** The encoded video chunks, available after flush(). */
+  readonly chunks: EncodedVideoChunk[];
+
+  dispose(): void;
+}
+
+interface EncoderConfig {
+  width: number;
+  height: number;
+  fps: number;
+  codec: 'avc1.640028' | 'vp09.00.31.08';  // H.264 High / VP9
+  bitrate?: number;        // Default: auto-calculated from resolution
+  hardwareAcceleration?: 'prefer-hardware' | 'prefer-software';
+}
+```
+
+### 3.3 AudioMixer
+
+```typescript
+/**
+ * Mixes audio sources into a single PCM buffer using OfflineAudioContext.
+ */
+interface AudioMixer {
+  /**
+   * Mix all audio sources for the composition.
+   * Decodes audio files, applies volume/timing, renders to PCM.
+   */
+  mix(config: AudioMixConfig): Promise<AudioMixResult>;
+}
+
+interface AudioMixConfig {
+  /** Total composition duration in seconds */
+  duration: number;
+  /** Sample rate (default: 44100) */
+  sampleRate?: number;
+  /** Number of channels (default: 2, stereo) */
+  channels?: number;
+  /** Audio sources to mix */
+  sources: AudioSource[];
+}
+
+interface AudioSource {
+  /** URL or Blob of the audio/video file */
+  src: string | Blob;
+  /** When in the composition this audio starts (seconds) */
+  startTime: number;
+  /** When in the composition this audio ends (seconds) */
+  endTime: number;
+  /** Offset into the source file (seconds, default: 0) */
+  mediaOffset?: number;
+  /** Volume 0-1 (default: 1) */
+  volume?: number;
+}
+
+interface AudioMixResult {
+  /** Raw PCM audio buffer (Float32Array per channel) */
+  buffer: AudioBuffer;
+  /** Sample rate used */
+  sampleRate: number;
+  /** Number of channels */
+  channels: number;
+}
+```
+
+### 3.4 Muxer
+
+```typescript
+/**
+ * Muxes encoded video chunks and audio into a container format.
+ * Powered by MediaBunny.
+ */
+interface Muxer {
+  init(config: MuxerConfig): Promise<void>;
+
+  /** Add an encoded video chunk */
+  addVideoChunk(chunk: EncodedVideoChunk): void;
+
+  /** Set the audio track (raw PCM from AudioMixer) */
+  setAudio(audio: AudioMixResult): void;
+
+  /** Finalize and produce the output file */
+  finalize(): Promise<Blob>;
+}
+
+interface MuxerConfig {
+  format: 'mp4' | 'webm';
+  width: number;
+  height: number;
+  fps: number;
+  videoCodec: string;
+}
+```
+
+### 3.5 Renderer (Public API)
+
+```typescript
+/**
+ * The main public API. Orchestrates the full pipeline.
+ */
+interface Renderer {
+  /**
+   * Render a composition to video.
+   * Returns a Blob containing the final MP4/WebM.
+   */
+  render(config: RenderConfig): Promise<RenderResult>;
+
+  /** Cancel an in-progress render */
+  cancel(): void;
+
+  /** Check if WebCodecs and required APIs are available */
+  static isSupported(): boolean;
+}
+
+interface RenderConfig {
+  /** Path or URL to the composition HTML */
+  composition: string;
+  /** Output format (default: 'mp4') */
+  format?: 'mp4' | 'webm';
+  /** Frames per second (default: 30) */
+  fps?: 24 | 30 | 60;
+  /** Output width (default: 1920) */
+  width?: number;
+  /** Output height (default: 1080) */
+  height?: number;
+  /** Device pixel ratio (default: 1) */
+  devicePixelRatio?: number;
+  /** Video codec (default: H.264) */
+  codec?: 'h264' | 'vp9';
+  /** Video bitrate in bps (default: auto) */
+  bitrate?: number;
+  /** Number of parallel capture iframes (default: auto based on navigator.hardwareConcurrency) */
+  concurrency?: number;
+  /** Progress callback */
+  onProgress?: (progress: RenderProgress) => void;
+  /** Which frame source to use (default: auto-detect best available) */
+  frameSource?: 'snapdom' | 'draw-element-image';
+}
+
+interface RenderProgress {
+  stage: 'initializing' | 'capturing' | 'encoding' | 'mixing-audio' | 'muxing' | 'complete';
+  /** 0-1 overall progress */
+  progress: number;
+  /** Current frame being processed */
+  currentFrame?: number;
+  /** Total frames */
+  totalFrames?: number;
+  /** Estimated time remaining in ms */
+  estimatedTimeRemaining?: number;
+  /** Frames per second capture rate */
+  captureRate?: number;
+}
+
+interface RenderResult {
+  /** The final video file */
+  blob: Blob;
+  /** MIME type */
+  mimeType: string;
+  /** Render duration in ms */
+  durationMs: number;
+  /** Performance breakdown */
+  perf: {
+    captureMs: number;
+    encodeMs: number;
+    audioMs: number;
+    muxMs: number;
+    totalMs: number;
+    framesPerSecond: number;
+  };
+}
+```
+
+---
+
+## 4. Frame Source Implementations
+
+### 4.1 SnapDOM Frame Source (Interim)
+
+Uses SnapDOM (`@snapdom/snapdom`) to capture DOM snapshots as images, then converts to `ImageBitmap`.
+
+**How it works:**
+1. Load composition in a hidden `<iframe>` (same-origin)
+2. Seek to target time via `iframe.contentWindow.__hf.seek(time)`
+3. Call SnapDOM to snapshot the iframe's document element → produces a `<canvas>` or `Blob`
+4. Convert to `ImageBitmap` via `createImageBitmap()`
+5. Return the transferable `ImageBitmap`
+
+**Known limitations (vs. BeginFrame reference):**
+- Uses SVG `foreignObject` internally — cross-origin images won't render without CORS
+- `<video>` element frames may not be captured (requires separate handling — see Section 6)
+- Complex CSS features (some blend modes, `backdrop-filter` in edge cases) may differ slightly
+- Performance: designed for one-shot screenshots, not sustained 30fps. Parallel iframes mitigate this.
+
+**Fidelity target:** 95%+ for compositions using standard CSS + GSAP animations.
+
+### 4.2 drawElementImage Frame Source (Future)
+
+Uses the WICG html-in-canvas API when available.
+
+**How it works:**
+1. Load composition as a child of `<canvas layoutsubtree>`
+2. Seek to target time via the composition's `__hf.seek(time)`
+3. In the `paint` event handler, call `ctx.drawElementImage(compositionEl, 0, 0)`
+4. Use `captureElementImage()` to create a transferable `ElementImage`
+5. Transfer to worker → draw on `OffscreenCanvas` → `ImageBitmap`
+
+**Advantages:**
+- Uses the browser's actual rendering engine — pixel-perfect fidelity
+- Supports all CSS features the browser supports
+- Native performance — no JavaScript re-rendering
+
+**Availability:** Chrome behind flag (`chrome://flags/#canvas-draw-element`). WHATWG Stage 2. Estimated stable: 2027+.
+
+**CSS transform caveat:** `drawElementImage` ignores CSS transforms on the source element. GSAP primarily animates via transforms. Workarounds:
+- Wrap animated elements in a container; GSAP animates the inner element, `drawElementImage` captures the container (which has the computed layout including the inner element's transforms applied by the browser's rendering)
+- OR apply GSAP animations to non-transform properties where possible
+- This needs validation once the API supports video elements
+
+### 4.3 Auto-Detection
+
+```typescript
+function detectBestFrameSource(): 'draw-element-image' | 'snapdom' {
+  // Check for html-in-canvas support
+  const canvas = document.createElement('canvas');
+  if ('drawElementImage' in CanvasRenderingContext2D.prototype) {
+    return 'draw-element-image';
+  }
+  return 'snapdom';
+}
+```
+
+---
+
+## 5. Parallel Iframe Capture
+
+### Strategy
+
+Mirror the server-side `parallelCoordinator.ts` pattern but with browser iframes instead of Puppeteer instances.
+
+```typescript
+interface IframePool {
+  /** Create N iframes, each loading the composition */
+  init(compositionUrl: string, count: number, viewport: Viewport): Promise<void>;
+
+  /**
+   * Capture frames in parallel across iframes.
+   * Each iframe is assigned a contiguous range of frame times.
+   * Returns ImageBitmaps in frame order.
+   */
+  captureAll(
+    frameTimes: number[],
+    frameSource: FrameSource,
+    onFrame: (bitmap: ImageBitmap, index: number) => void,
+  ): Promise<void>;
+
+  dispose(): void;
+}
+```
+
+### Frame Distribution
+
+```
+Total: 300 frames, 4 iframes
+
+iframe[0]: frames   0- 74  (seek 0.000s - 2.467s)
+iframe[1]: frames  75-149  (seek 2.500s - 4.967s)
+iframe[2]: frames 150-224  (seek 5.000s - 7.467s)
+iframe[3]: frames 225-299  (seek 7.500s - 9.967s)
+```
+
+Each iframe captures its range sequentially. The four iframes run in parallel (using `Promise.all`). Captured `ImageBitmap` frames are posted to the encoding worker pool as they complete.
+
+### Concurrency Default
+
+```typescript
+const defaultConcurrency = Math.max(1, Math.min(
+  navigator.hardwareConcurrency - 1,  // Leave 1 core for encoding workers
+  8  // Cap at 8 iframes to avoid memory pressure
+));
+```
+
+---
+
+## 6. Video Element Handling
+
+Embedded `<video>` elements in compositions need special handling because:
+1. SnapDOM cannot capture `<video>` frame content (foreignObject limitation)
+2. Videos must be seeked to the correct time for each frame
+
+### Strategy: Canvas Replacement
+
+For each `<video>` element declared in `window.__hf.media`:
+
+1. **Decode video frames client-side** using MediaBunny's demuxer + WebCodecs `VideoDecoder`
+2. **Create a `<canvas>` overlay** positioned exactly over the `<video>` element
+3. **Before each frame capture**, seek the video decoder to the target time, draw the decoded frame onto the overlay canvas
+4. **SnapDOM captures the canvas** (which it CAN render) instead of the `<video>` element
+
+This mirrors the server-side `videoFrameInjector.ts` pattern — replace `<video>` with pre-extracted frames drawn onto a canvas.
+
+```typescript
+interface VideoFrameInjector {
+  /** Pre-decode video sources and prepare frame lookup */
+  init(media: HfMediaElement[]): Promise<void>;
+
+  /** Draw the correct video frame for a given composition time onto overlay canvases */
+  injectFrame(time: number): Promise<void>;
+
+  dispose(): void;
+}
+```
+
+### Video Decoding Pipeline
+
+```
+Source video (URL/Blob)
+  → MediaBunny demux (extract video track packets)
+  → WebCodecs VideoDecoder (decode to VideoFrame)
+  → drawImage onto overlay <canvas>
+  → SnapDOM captures canvas as part of DOM snapshot
+```
+
+For performance, video frames are decoded on-demand per composition time, not pre-extracted. MediaBunny supports seeking to arbitrary positions efficiently.
+
+---
+
+## 7. Audio Handling
+
+### Pipeline
+
+```
+Composition's window.__hf.media[]
+  → Filter elements with hasAudio === true
+  → Fetch each audio source (URL → ArrayBuffer)
+  → AudioContext.decodeAudioData() → AudioBuffer per source
+  → OfflineAudioContext:
+      - Create BufferSourceNode per source
+      - Apply volume via GainNode
+      - Apply timing (startTime, mediaOffset, endTime)
+      - Connect all to destination
+      - OfflineAudioContext.startRendering()
+  → AudioBuffer (mixed PCM)
+  → Float32Array per channel → MediaBunny mux as audio track
+```
+
+### Composition-level Audio
+
+Some compositions have a single `<audio>` element or background music. These are also declared in `window.__hf.media` and handled identically.
+
+### Sample Rate
+
+Default: 44100 Hz (CD quality). Matches the server-side producer. MediaBunny supports arbitrary sample rates.
+
+---
+
+## 8. Encoding Worker
+
+### Worker Architecture
+
+A single encoding worker handles the video encoding + muxing pipeline. The main thread streams `ImageBitmap` frames to it.
+
+```
+Main Thread                          Encoding Worker
+───────────                          ───────────────
+postMessage({                        onmessage:
+  type: 'init',                        → create VideoEncoder
+  config: EncoderConfig                → create MediaBunny muxer
+})
+
+postMessage({                        onmessage:
+  type: 'frame',                       → new VideoFrame(bitmap, {timestamp})
+  bitmap: ImageBitmap,                 → encoder.encode(frame)
+  index, timestamp                     → frame.close()  // prevent GPU leak
+}, [bitmap])                           → encoder output → muxer.addVideoChunk()
+
+postMessage({                        onmessage:
+  type: 'set-audio',                   → muxer.setAudio(pcmData)
+  pcmData: Float32Array[]
+}, [...pcmData])
+
+postMessage({                        onmessage:
+  type: 'finalize'                     → encoder.flush()
+})                                     → muxer.finalize()
+                                       → postMessage({ type: 'done', blob })
+```
+
+### Why a Single Encoding Worker (Not a Pool)
+
+WebCodecs `VideoEncoder` produces chunks that must be muxed in order. Multiple encoding workers would require coordinating chunk ordering across workers and merging partial MP4 segments. A single encoder with hardware acceleration is fast enough — the bottleneck is frame capture, not encoding. The parallelism happens at the capture layer (multiple iframes), not the encoding layer.
+
+### Memory Management
+
+Critical: `VideoFrame.close()` must be called after encoding to release GPU memory. Without this, GPU memory exhausts within seconds. The worker is responsible for calling `.close()` on every frame after `encoder.encode()`.
+
+```typescript
+// Inside worker
+encoder.encode(videoFrame);
+videoFrame.close();  // CRITICAL — prevents GPU memory leak
+```
+
+---
+
+## 9. Package Structure
+
+```
+packages/renderer/
+  package.json                      # @hyperframes/renderer, browser-only
+  tsconfig.json
+  src/
+    index.ts                        # Public API exports
+    types.ts                        # All shared interfaces and types
+    renderer.ts                     # Main Renderer class — orchestrates pipeline
+    compat.ts                       # Feature detection (WebCodecs, OffscreenCanvas)
+    sources/
+      types.ts                      # FrameSource interface
+      snapdom.ts                    # SnapDOM frame source implementation
+      draw-element-image.ts         # html-in-canvas frame source (future)
+      auto-detect.ts                # Auto-selects best available source
+    capture/
+      iframe-pool.ts                # Manages parallel hidden iframes
+      frame-scheduler.ts            # Distributes frame ranges across iframes
+      video-frame-injector.ts       # Overlay canvases for <video> elements
+    encoding/
+      encoder.ts                    # WebCodecs VideoEncoder wrapper (runs in worker)
+      worker.ts                     # Web Worker entry point
+      types.ts                      # Worker message protocol types
+    audio/
+      mixer.ts                      # OfflineAudioContext-based mixer
+      decoder.ts                    # Audio file decoding helpers
+    muxing/
+      muxer.ts                      # MediaBunny muxer wrapper
+    utils/
+      timing.ts                     # Frame time quantization (reuses @hyperframes/core)
+      progress.ts                   # Progress calculation and ETA
+  tests/
+    renderer.test.ts                # End-to-end render tests
+    sources/snapdom.test.ts         # SnapDOM capture fidelity tests
+    encoding/encoder.test.ts        # WebCodecs encoder tests
+    audio/mixer.test.ts             # Audio mixing tests
+    capture/iframe-pool.test.ts     # Iframe pool tests
+```
+
+### Dependencies
+
+```json
+{
+  "dependencies": {
+    "@snapdom/snapdom": "^2.1.0",
+    "mediabunny": "^1.40.0"
+  },
+  "peerDependencies": {
+    "@hyperframes/core": "workspace:*"
+  }
+}
+```
+
+**Zero Node.js dependencies.** This package is browser-only. It uses `@hyperframes/core` for shared types (`HfMediaElement`, `quantizeTimeToFrame`) but nothing from `engine` or `producer`.
+
+---
+
+## 10. Public API
+
+### Basic Usage
+
+```typescript
+import { render, isSupported } from '@hyperframes/renderer';
+
+if (!isSupported()) {
+  alert('Your browser does not support WebCodecs. Use Chrome 94+, Firefox 130+, or Safari 26+.');
+}
+
+const result = await render({
+  composition: './my-composition/index.html',
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  onProgress: (p) => {
+    console.log(`${p.stage}: ${Math.round(p.progress * 100)}%`);
+  },
+});
+
+// Download the video
+const url = URL.createObjectURL(result.blob);
+const a = document.createElement('a');
+a.href = url;
+a.download = 'output.mp4';
+a.click();
+```
+
+### Advanced Usage
+
+```typescript
+import { createRenderer } from '@hyperframes/renderer';
+
+const renderer = createRenderer({
+  composition: './my-composition/index.html',
+  format: 'mp4',
+  fps: 60,
+  width: 3840,
+  height: 2160,
+  codec: 'h264',
+  bitrate: 20_000_000,
+  concurrency: 4,
+  frameSource: 'snapdom', // or 'draw-element-image'
+  onProgress: updateUI,
+});
+
+// Start rendering
+const result = await renderer.render();
+
+// Or cancel mid-render
+cancelButton.onclick = () => renderer.cancel();
+```
+
+---
+
+## 11. Studio Integration
+
+The Studio gets a "Render in Browser" button alongside the existing server-side render.
+
+```typescript
+// packages/studio/src/components/RenderDialog.tsx
+import { render, isSupported } from '@hyperframes/renderer';
+
+// Feature detection determines which render options are shown
+const canRenderClientSide = isSupported();
+
+// When user clicks "Render in Browser":
+const result = await render({
+  composition: compositionUrl,  // Same URL the studio preview iframe uses
+  fps: selectedFps,
+  width: selectedWidth,
+  height: selectedHeight,
+  onProgress: (p) => setRenderProgress(p),
+});
+
+// Offer download
+downloadBlob(result.blob, `${compositionName}.mp4`);
+```
+
+---
+
+## 12. Player Integration
+
+The `<hyperframes-player>` web component gets an `export()` method.
+
+```typescript
+// packages/player/src/hyperframes-player.ts
+import { render, isSupported } from '@hyperframes/renderer';
+
+class HyperframesPlayer extends HTMLElement {
+  async export(options?: Partial<RenderConfig>): Promise<Blob> {
+    if (!isSupported()) {
+      throw new Error('Client-side rendering requires WebCodecs support');
+    }
+    const result = await render({
+      composition: this.getAttribute('src')!,
+      ...options,
+    });
+    return result.blob;
+  }
+}
+```
+
+Usage:
+```javascript
+const player = document.querySelector('hyperframes-player');
+const blob = await player.export({ fps: 30 });
+```
+
+---
+
+## 13. Browser Requirements
+
+| API | Chrome | Firefox | Safari | Required |
+|---|---|---|---|---|
+| WebCodecs (VideoEncoder) | 94+ | 130+ | 26+ | Yes |
+| OffscreenCanvas | 69+ | 105+ | 17+ | Yes |
+| Web Workers | All | All | All | Yes |
+| OfflineAudioContext | All | All | All | Yes |
+| createImageBitmap | 50+ | 42+ | 15+ | Yes |
+| Transferable ImageBitmap | 56+ | 105+ | 17+ | Yes |
+
+**Minimum browser versions:** Chrome 94, Firefox 130, Safari 26.
+
+Feature detection:
+
+```typescript
+function isSupported(): boolean {
+  return (
+    typeof VideoEncoder !== 'undefined' &&
+    typeof OffscreenCanvas !== 'undefined' &&
+    typeof AudioContext !== 'undefined' &&
+    typeof createImageBitmap !== 'undefined'
+  );
+}
+```
+
+---
+
+## 14. Performance Expectations
+
+### Capture Rate Targets
+
+| Resolution | Iframes | Target capture FPS | Notes |
+|---|---|---|---|
+| 1920x1080 | 4 | 8-15 fps aggregate | SnapDOM bottleneck |
+| 1920x1080 | 8 | 12-20 fps aggregate | Diminishing returns beyond 8 |
+| 1280x720 | 4 | 15-25 fps aggregate | Lower resolution helps |
+
+### Encoding Rate
+
+WebCodecs hardware-accelerated encoding is fast:
+- H.264 1080p: 200-500 fps (not the bottleneck)
+- VP9 1080p: 50-150 fps (slower but still faster than capture)
+
+### End-to-End Estimate
+
+For a 10-second 1080p30 composition (300 frames) with 4 iframes:
+- Capture: ~20-40 seconds (bottleneck)
+- Encoding: ~1-2 seconds
+- Audio mixing: ~0.5 seconds
+- Muxing: ~0.5 seconds
+- **Total: ~25-45 seconds**
+
+With `drawElementImage` (future): capture should be near-realtime, reducing total to ~12-15 seconds.
+
+---
+
+## 15. Testing Strategy
+
+### Fidelity Testing
+
+Render the same composition with both the server-side producer (BeginFrame) and the client-side renderer. Compare output frames pixel-by-pixel using SSIM (Structural Similarity Index).
+
+```
+Reference: npx hyperframes render composition.html --output ref.mp4
+Test:      Client-side render → test.mp4
+Compare:   Extract frames, compute SSIM per frame
+Pass:      Average SSIM > 0.95 (95% fidelity)
+```
+
+### Unit Tests
+
+- `FrameSource` implementations: capture a known composition, verify output dimensions and non-empty content
+- `EncoderPipeline`: encode synthetic color frames, verify output is valid video
+- `AudioMixer`: mix known waveforms, verify output amplitudes and timing
+- `Muxer`: produce MP4 from synthetic data, verify it plays in a `<video>` element
+- `IframePool`: verify frame distribution and ordering
+
+### Integration Tests
+
+- Full end-to-end: render a test composition, verify the output MP4 plays and has correct duration
+- Progress callback: verify all stages fire and progress reaches 1.0
+- Cancellation: start a render, cancel mid-way, verify resources are cleaned up
+- Error handling: invalid composition URL, unsupported browser, corrupt media files
+
+### QA
+
+Agent-browser automated visual testing after implementation (per user request).
+
+---
+
+## 16. Migration Path
+
+### Phase 1: New Package, Optional
+
+- `@hyperframes/renderer` ships as a new package
+- Studio offers "Render in Browser" alongside existing server-side render
+- Player gets `export()` method
+- Server-side producer remains the default and recommended path
+- Documentation clearly states fidelity caveats
+
+### Phase 2: `drawElementImage` Integration
+
+- When html-in-canvas ships in Chrome stable, add the `draw-element-image` frame source
+- Run fidelity tests — if >99% SSIM vs. BeginFrame, promote client-side as default
+- Server-side remains as fallback for unsupported browsers
+
+### Phase 3: Deprecate Server-Side
+
+- When html-in-canvas ships cross-browser (Chrome + Firefox + Safari)
+- Client-side renderer reaches 100% fidelity parity
+- Deprecate `@hyperframes/producer` and `@hyperframes/engine`
+- Server-side becomes a "legacy" option for CI/headless environments
+
+---
+
+## 17. Open Questions
+
+1. **SnapDOM + GSAP transforms**: Does SnapDOM faithfully capture GSAP-animated transforms? Needs empirical testing with real compositions in the thin slice phase.
+
+2. **SnapDOM sustained throughput**: What's the realistic per-frame capture latency for complex compositions (50+ DOM elements, multiple GSAP timelines)? This determines whether 4 or 8 iframes are needed.
+
+3. **Video frame seeking accuracy**: Can MediaBunny's demuxer + WebCodecs VideoDecoder seek to arbitrary timestamps with frame accuracy, or only to keyframes? If keyframe-only, we may need to decode forward from the nearest keyframe.
+
+4. **Memory pressure**: With 4-8 iframes + a worker, what's the memory footprint? Need to test with compositions that embed large assets (4K video, high-res images).
+
+5. **Safari 26 WebCodecs quirks**: Safari just shipped full WebCodecs. Are there codec configuration differences or bugs we need to work around?
+
+6. **Sub-composition rendering**: Compositions can embed other compositions. Do nested iframes work with SnapDOM capture, or do we need to flatten sub-compositions first?
+
+---
+
+## 18. Glossary
+
+| Term | Definition |
+|---|---|
+| **BeginFrame** | Chrome's `HeadlessExperimental.beginFrame` CDP API — runs a single deterministic layout-paint-composite cycle |
+| **SnapDOM** | DOM snapshot library using SVG foreignObject — best-in-class for CSS fidelity |
+| **drawElementImage** | WICG html-in-canvas API — native DOM-to-canvas rendering (Stage 2, Chrome flag) |
+| **MediaBunny** | Zero-dep TypeScript media toolkit — successor to mp4-muxer/webm-muxer |
+| **WebCodecs** | Browser API for hardware-accelerated video/audio encoding/decoding |
+| **OffscreenCanvas** | Canvas API usable in Web Workers — decouples rendering from main thread |
+| **HfProtocol** | `window.__hf` — the seek protocol compositions expose for deterministic rendering |
+| **FrameSource** | Pluggable interface for capturing frames — the abstraction that enables swapping SnapDOM for drawElementImage |

From b8c56195c026effe6d88e1919b4d7496b7831271 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 01:43:21 +0200
Subject: [PATCH 02/30] docs: add client-side renderer implementation plan

13-task plan covering package scaffold, SnapDOM frame source, WebCodecs
encoding worker, MediaBunny muxer, OfflineAudioContext audio mixer,
parallel iframe capture, video frame injector, and main orchestrator.
56 total steps with TDD approach.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../plans/2026-04-10-client-side-renderer.md  | 2118 +++++++++++++++++
 1 file changed, 2118 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-04-10-client-side-renderer.md

diff --git a/docs/superpowers/plans/2026-04-10-client-side-renderer.md b/docs/superpowers/plans/2026-04-10-client-side-renderer.md
new file mode 100644
index 00000000..fa70df47
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-10-client-side-renderer.md
@@ -0,0 +1,2118 @@
+# Client-Side Video Renderer Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build `@hyperframes/renderer` — a browser-only package that renders HyperFrames compositions to MP4 using WebCodecs + MediaBunny + SnapDOM, with zero server dependencies.
+
+**Architecture:** Pluggable frame source (SnapDOM now, html-in-canvas later) captures frames from parallel hidden iframes. Frames are transferred to a Web Worker that encodes via WebCodecs and muxes via MediaBunny. Audio is mixed client-side via OfflineAudioContext.
+
+**Tech Stack:** TypeScript, WebCodecs API, MediaBunny (muxer), SnapDOM (DOM capture), OfflineAudioContext (audio mixing), Web Workers + OffscreenCanvas
+
+**Spec:** `docs/superpowers/specs/2026-04-10-client-side-renderer-design.md`
+
+---
+
+## File Map
+
+| File | Responsibility |
+|---|---|
+| `packages/renderer/package.json` | Package manifest — browser-only, deps: @zumer/snapdom, mediabunny |
+| `packages/renderer/tsconfig.json` | TypeScript config — ES2022, bundler resolution, DOM lib |
+| `packages/renderer/src/types.ts` | All shared interfaces and type definitions |
+| `packages/renderer/src/compat.ts` | Feature detection — `isSupported()` |
+| `packages/renderer/src/utils/timing.ts` | Frame time generation and quantization |
+| `packages/renderer/src/sources/snapdom.ts` | SnapDOM frame source — captures DOM to ImageBitmap |
+| `packages/renderer/src/encoding/types.ts` | Worker message protocol types |
+| `packages/renderer/src/encoding/worker.ts` | Web Worker — VideoEncoder + MediaBunny muxer |
+| `packages/renderer/src/encoding/encoder.ts` | Main-thread wrapper — manages worker lifecycle |
+| `packages/renderer/src/audio/mixer.ts` | OfflineAudioContext audio mixing |
+| `packages/renderer/src/capture/iframe-pool.ts` | Parallel iframe management and frame scheduling |
+| `packages/renderer/src/capture/video-frame-injector.ts` | Canvas overlays for `<video>` element frames |
+| `packages/renderer/src/renderer.ts` | Main orchestrator — coordinates full pipeline |
+| `packages/renderer/src/index.ts` | Public API — `render()`, `createRenderer()`, `isSupported()` |
+
+---
+
+## Task 1: Package Scaffold + Types
+
+**Files:**
+- Create: `packages/renderer/package.json`
+- Create: `packages/renderer/tsconfig.json`
+- Create: `packages/renderer/src/types.ts`
+- Create: `packages/renderer/src/compat.ts`
+- Create: `packages/renderer/src/index.ts`
+
+- [ ] **Step 1: Create package.json**
+
+```json
+{
+  "name": "@hyperframes/renderer",
+  "version": "0.0.1",
+  "description": "Client-side video renderer for HyperFrames compositions",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/heygen-com/hyperframes",
+    "directory": "packages/renderer"
+  },
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@zumer/snapdom": "^2.8.0",
+    "mediabunny": "^1.40.0"
+  },
+  "peerDependencies": {
+    "@hyperframes/core": "workspace:^"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "vitest": "^3.2.4"
+  }
+}
+```
+
+- [ ] **Step 2: Create tsconfig.json**
+
+```json
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "lib": ["ES2022", "DOM", "DOM.Iterable", "WebWorker"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts"]
+}
+```
+
+- [ ] **Step 3: Create src/types.ts with all interfaces**
+
+This is the single source of truth for all types in the package. Every other module imports from here.
+
+```typescript
+/**
+ * @hyperframes/renderer — Type definitions
+ *
+ * All interfaces for the client-side rendering pipeline.
+ */
+
+// ── Frame Source ──────────────────────────────────────────────────────────────
+
+export interface HfMediaElement {
+  elementId: string;
+  src: string;
+  startTime: number;
+  endTime: number;
+  mediaOffset?: number;
+  volume?: number;
+  hasAudio?: boolean;
+}
+
+export interface FrameSourceConfig {
+  compositionUrl: string;
+  width: number;
+  height: number;
+  devicePixelRatio?: number;
+}
+
+export interface FrameSource {
+  readonly name: string;
+  init(config: FrameSourceConfig): Promise<void>;
+  capture(time: number): Promise<ImageBitmap>;
+  readonly duration: number;
+  readonly media: HfMediaElement[];
+  dispose(): Promise<void>;
+}
+
+// ── Encoder ──────────────────────────────────────────────────────────────────
+
+export interface EncoderConfig {
+  width: number;
+  height: number;
+  fps: number;
+  codec: "avc1.640028" | "vp09.00.31.08";
+  bitrate?: number;
+  hardwareAcceleration?: "prefer-hardware" | "prefer-software";
+}
+
+// ── Audio ────────────────────────────────────────────────────────────────────
+
+export interface AudioSource {
+  src: string | Blob;
+  startTime: number;
+  endTime: number;
+  mediaOffset?: number;
+  volume?: number;
+}
+
+export interface AudioMixConfig {
+  duration: number;
+  sampleRate?: number;
+  channels?: number;
+  sources: AudioSource[];
+}
+
+export interface AudioMixResult {
+  buffer: AudioBuffer;
+  sampleRate: number;
+  channels: number;
+}
+
+// ── Muxer ────────────────────────────────────────────────────────────────────
+
+export interface MuxerConfig {
+  format: "mp4" | "webm";
+  width: number;
+  height: number;
+  fps: number;
+  videoCodec: string;
+}
+
+// ── Renderer (Public API) ────────────────────────────────────────────────────
+
+export interface RenderConfig {
+  composition: string;
+  format?: "mp4" | "webm";
+  fps?: 24 | 30 | 60;
+  width?: number;
+  height?: number;
+  devicePixelRatio?: number;
+  codec?: "h264" | "vp9";
+  bitrate?: number;
+  concurrency?: number;
+  onProgress?: (progress: RenderProgress) => void;
+  frameSource?: "snapdom" | "draw-element-image";
+}
+
+export interface RenderProgress {
+  stage:
+    | "initializing"
+    | "capturing"
+    | "encoding"
+    | "mixing-audio"
+    | "muxing"
+    | "complete";
+  progress: number;
+  currentFrame?: number;
+  totalFrames?: number;
+  estimatedTimeRemaining?: number;
+  captureRate?: number;
+}
+
+export interface RenderResult {
+  blob: Blob;
+  mimeType: string;
+  durationMs: number;
+  perf: {
+    captureMs: number;
+    encodeMs: number;
+    audioMs: number;
+    muxMs: number;
+    totalMs: number;
+    framesPerSecond: number;
+  };
+}
+```
+
+- [ ] **Step 4: Create src/compat.ts**
+
+```typescript
+/**
+ * Feature detection for client-side rendering.
+ */
+
+export function isSupported(): boolean {
+  return (
+    typeof globalThis.VideoEncoder !== "undefined" &&
+    typeof globalThis.OffscreenCanvas !== "undefined" &&
+    typeof globalThis.AudioContext !== "undefined" &&
+    typeof globalThis.createImageBitmap !== "undefined"
+  );
+}
+
+export function detectBestFrameSource(): "draw-element-image" | "snapdom" {
+  if (
+    typeof CanvasRenderingContext2D !== "undefined" &&
+    "drawElementImage" in CanvasRenderingContext2D.prototype
+  ) {
+    return "draw-element-image";
+  }
+  return "snapdom";
+}
+```
+
+- [ ] **Step 5: Create src/index.ts (stub exports)**
+
+```typescript
+/**
+ * @hyperframes/renderer
+ *
+ * Client-side video rendering for HyperFrames compositions.
+ * Zero server dependencies — renders entirely in the browser
+ * using WebCodecs, MediaBunny, and SnapDOM.
+ */
+
+export { isSupported, detectBestFrameSource } from "./compat.js";
+
+export type {
+  RenderConfig,
+  RenderProgress,
+  RenderResult,
+  FrameSource,
+  FrameSourceConfig,
+  HfMediaElement,
+  EncoderConfig,
+  AudioSource,
+  AudioMixConfig,
+  AudioMixResult,
+  MuxerConfig,
+} from "./types.js";
+
+// render() and createRenderer() are exported in Task 8 once the orchestrator exists.
+```
+
+- [ ] **Step 6: Install dependencies and verify typecheck**
+
+Run:
+```bash
+cd packages/renderer && pnpm install && pnpm typecheck
+```
+Expected: Clean typecheck, no errors.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add packages/renderer/
+git commit -m "feat(renderer): scaffold package with types and compat detection"
+```
+
+---
+
+## Task 2: Frame Timing Utility
+
+**Files:**
+- Create: `packages/renderer/src/utils/timing.ts`
+- Create: `packages/renderer/src/utils/timing.test.ts`
+
+- [ ] **Step 1: Write the test**
+
+```typescript
+import { describe, it, expect } from "vitest";
+import { generateFrameTimes, distributeFrames } from "./timing.js";
+
+describe("generateFrameTimes", () => {
+  it("generates correct frame times for 1s at 30fps", () => {
+    const times = generateFrameTimes(1.0, 30);
+    expect(times).toHaveLength(30);
+    expect(times[0]).toBe(0);
+    expect(times[1]).toBeCloseTo(1 / 30);
+    expect(times[29]).toBeCloseTo(29 / 30);
+  });
+
+  it("generates correct frame times for 0.5s at 60fps", () => {
+    const times = generateFrameTimes(0.5, 60);
+    expect(times).toHaveLength(30);
+    expect(times[0]).toBe(0);
+  });
+
+  it("returns empty array for zero duration", () => {
+    expect(generateFrameTimes(0, 30)).toHaveLength(0);
+  });
+});
+
+describe("distributeFrames", () => {
+  it("distributes 10 frames across 3 workers", () => {
+    const ranges = distributeFrames(10, 3);
+    expect(ranges).toHaveLength(3);
+    expect(ranges[0]).toEqual({ start: 0, end: 3 });
+    expect(ranges[1]).toEqual({ start: 4, end: 6 });
+    expect(ranges[2]).toEqual({ start: 7, end: 9 });
+    const totalFrames = ranges.reduce((s, r) => s + (r.end - r.start + 1), 0);
+    expect(totalFrames).toBe(10);
+  });
+
+  it("handles fewer frames than workers", () => {
+    const ranges = distributeFrames(2, 5);
+    expect(ranges).toHaveLength(2);
+    expect(ranges[0]).toEqual({ start: 0, end: 0 });
+    expect(ranges[1]).toEqual({ start: 1, end: 1 });
+  });
+
+  it("handles single worker", () => {
+    const ranges = distributeFrames(100, 1);
+    expect(ranges).toHaveLength(1);
+    expect(ranges[0]).toEqual({ start: 0, end: 99 });
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `cd packages/renderer && pnpm vitest run src/utils/timing.test.ts`
+Expected: FAIL — module not found.
+
+- [ ] **Step 3: Implement timing.ts**
+
+```typescript
+/**
+ * Frame timing utilities.
+ *
+ * Generates frame timestamps and distributes frame ranges
+ * across parallel capture workers (iframes).
+ */
+
+export interface FrameRange {
+  start: number;
+  end: number;
+}
+
+export function generateFrameTimes(durationSeconds: number, fps: number): number[] {
+  if (durationSeconds <= 0 || fps <= 0) return [];
+  const totalFrames = Math.ceil(durationSeconds * fps);
+  const frameDuration = 1 / fps;
+  const times: number[] = [];
+  for (let i = 0; i < totalFrames; i++) {
+    times.push(i * frameDuration);
+  }
+  return times;
+}
+
+export function distributeFrames(totalFrames: number, workerCount: number): FrameRange[] {
+  const effectiveWorkers = Math.min(workerCount, totalFrames);
+  if (effectiveWorkers <= 0) return [];
+  const ranges: FrameRange[] = [];
+  const baseSize = Math.floor(totalFrames / effectiveWorkers);
+  const remainder = totalFrames % effectiveWorkers;
+  let cursor = 0;
+  for (let i = 0; i < effectiveWorkers; i++) {
+    const size = baseSize + (i < remainder ? 1 : 0);
+    ranges.push({ start: cursor, end: cursor + size - 1 });
+    cursor += size;
+  }
+  return ranges;
+}
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `cd packages/renderer && pnpm vitest run src/utils/timing.test.ts`
+Expected: All 6 tests pass.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add packages/renderer/src/utils/
+git commit -m "feat(renderer): add frame timing and distribution utilities"
+```
+
+---
+
+## Task 3: SnapDOM Frame Source
+
+**Files:**
+- Create: `packages/renderer/src/sources/snapdom.ts`
+- Create: `packages/renderer/src/sources/snapdom.test.ts`
+
+- [ ] **Step 1: Write the test**
+
+Note: SnapDOM requires a real DOM. These tests use `vitest` with `environment: 'jsdom'` or `'happy-dom'`. Since SnapDOM relies on real rendering (SVG foreignObject), some behaviors can only be tested in a real browser. These unit tests validate the structural contract — fidelity testing is done in integration tests.
+
+```typescript
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { SnapdomFrameSource } from "./snapdom.js";
+
+// Mock @zumer/snapdom since jsdom can't run real SVG foreignObject rendering
+vi.mock("@zumer/snapdom", () => ({
+  snapdom: {
+    toCanvas: vi.fn().mockResolvedValue(
+      (() => {
+        const c = document.createElement("canvas");
+        c.width = 1920;
+        c.height = 1080;
+        return c;
+      })(),
+    ),
+  },
+}));
+
+describe("SnapdomFrameSource", () => {
+  it("has name 'snapdom'", () => {
+    const source = new SnapdomFrameSource();
+    expect(source.name).toBe("snapdom");
+  });
+
+  it("duration is 0 before init", () => {
+    const source = new SnapdomFrameSource();
+    expect(source.duration).toBe(0);
+  });
+
+  it("media is empty before init", () => {
+    const source = new SnapdomFrameSource();
+    expect(source.media).toEqual([]);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `cd packages/renderer && pnpm vitest run src/sources/snapdom.test.ts`
+Expected: FAIL — module not found.
+
+- [ ] **Step 3: Implement snapdom.ts**
+
+```typescript
+/**
+ * SnapDOM Frame Source
+ *
+ * Captures DOM snapshots from an iframe-loaded composition
+ * using @zumer/snapdom, then converts to ImageBitmap for
+ * transfer to the encoding worker.
+ */
+
+import { snapdom } from "@zumer/snapdom";
+import type { FrameSource, FrameSourceConfig, HfMediaElement } from "../types.js";
+
+interface HfProtocol {
+  duration: number;
+  seek(time: number): void;
+  media?: HfMediaElement[];
+}
+
+export class SnapdomFrameSource implements FrameSource {
+  readonly name = "snapdom";
+
+  private iframe: HTMLIFrameElement | null = null;
+  private config: FrameSourceConfig | null = null;
+  private hf: HfProtocol | null = null;
+  private _duration = 0;
+  private _media: HfMediaElement[] = [];
+
+  get duration(): number {
+    return this._duration;
+  }
+
+  get media(): HfMediaElement[] {
+    return this._media;
+  }
+
+  async init(config: FrameSourceConfig): Promise<void> {
+    this.config = config;
+
+    const iframe = document.createElement("iframe");
+    iframe.style.position = "fixed";
+    iframe.style.top = "-9999px";
+    iframe.style.left = "-9999px";
+    iframe.style.width = `${config.width}px`;
+    iframe.style.height = `${config.height}px`;
+    iframe.style.border = "none";
+    iframe.style.opacity = "0";
+    iframe.style.pointerEvents = "none";
+    document.body.appendChild(iframe);
+    this.iframe = iframe;
+
+    await new Promise<void>((resolve, reject) => {
+      const timeout = setTimeout(() => reject(new Error("Composition load timeout (10s)")), 10_000);
+      iframe.onload = () => {
+        clearTimeout(timeout);
+        resolve();
+      };
+      iframe.onerror = () => {
+        clearTimeout(timeout);
+        reject(new Error(`Failed to load composition: ${config.compositionUrl}`));
+      };
+      iframe.src = config.compositionUrl;
+    });
+
+    // Wait for window.__hf to become available (runtime init is async)
+    const hf = await this.waitForHfProtocol(iframe);
+    this.hf = hf;
+    this._duration = hf.duration;
+    this._media = hf.media ?? [];
+  }
+
+  async capture(time: number): Promise<ImageBitmap> {
+    if (!this.iframe || !this.hf || !this.config) {
+      throw new Error("SnapdomFrameSource not initialized — call init() first");
+    }
+
+    this.hf.seek(time);
+
+    const doc = this.iframe.contentDocument;
+    if (!doc?.documentElement) {
+      throw new Error("iframe has no document");
+    }
+
+    const canvas = await snapdom.toCanvas(doc.documentElement, {
+      width: this.config.width,
+      height: this.config.height,
+      scale: this.config.devicePixelRatio ?? 1,
+    });
+
+    return createImageBitmap(canvas);
+  }
+
+  async dispose(): Promise<void> {
+    if (this.iframe) {
+      this.iframe.remove();
+      this.iframe = null;
+    }
+    this.hf = null;
+    this.config = null;
+    this._duration = 0;
+    this._media = [];
+  }
+
+  private waitForHfProtocol(
+    iframe: HTMLIFrameElement,
+    timeoutMs = 10_000,
+  ): Promise<HfProtocol> {
+    return new Promise((resolve, reject) => {
+      const start = Date.now();
+      const poll = () => {
+        const win = iframe.contentWindow as (Window & { __hf?: HfProtocol }) | null;
+        if (win?.__hf && typeof win.__hf.seek === "function" && win.__hf.duration > 0) {
+          resolve(win.__hf);
+          return;
+        }
+        if (Date.now() - start > timeoutMs) {
+          reject(new Error("Timed out waiting for window.__hf protocol"));
+          return;
+        }
+        requestAnimationFrame(poll);
+      };
+      poll();
+    });
+  }
+}
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `cd packages/renderer && pnpm vitest run src/sources/snapdom.test.ts`
+Expected: All 3 tests pass.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add packages/renderer/src/sources/
+git commit -m "feat(renderer): add SnapDOM frame source implementation"
+```
+
+---
+
+## Task 4: Encoding Worker + Message Protocol
+
+**Files:**
+- Create: `packages/renderer/src/encoding/types.ts`
+- Create: `packages/renderer/src/encoding/worker.ts`
+- Create: `packages/renderer/src/encoding/encoder.ts`
+- Create: `packages/renderer/src/encoding/encoder.test.ts`
+
+- [ ] **Step 1: Create encoding/types.ts — worker message protocol**
+
+```typescript
+/**
+ * Worker message protocol types.
+ *
+ * Main thread → Worker: WorkerInMessage
+ * Worker → Main thread: WorkerOutMessage
+ */
+
+export type WorkerInMessage =
+  | {
+      type: "init";
+      config: {
+        width: number;
+        height: number;
+        fps: number;
+        codec: string;
+        bitrate: number;
+        format: "mp4" | "webm";
+      };
+    }
+  | {
+      type: "frame";
+      bitmap: ImageBitmap;
+      index: number;
+      timestamp: number;
+    }
+  | {
+      type: "set-audio";
+      channelData: Float32Array[];
+      sampleRate: number;
+    }
+  | {
+      type: "finalize";
+    };
+
+export type WorkerOutMessage =
+  | { type: "ready" }
+  | { type: "frame-encoded"; index: number }
+  | { type: "done"; blob: Blob }
+  | { type: "error"; message: string }
+  | { type: "progress"; framesEncoded: number };
+```
+
+- [ ] **Step 2: Create encoding/worker.ts — Web Worker entry point**
+
+This file runs inside a Web Worker. It creates a VideoEncoder + MediaBunny muxer and processes frames received from the main thread.
+
+```typescript
+/**
+ * Encoding Worker
+ *
+ * Receives ImageBitmap frames from the main thread, encodes via
+ * WebCodecs VideoEncoder, and muxes into MP4/WebM via MediaBunny.
+ */
+
+import {
+  Output,
+  Mp4OutputFormat,
+  WebmOutputFormat,
+  BufferTarget,
+  EncodedVideoPacketSource,
+  EncodedPacket,
+  AudioSampleSource,
+  AudioSample,
+} from "mediabunny";
+import type { WorkerInMessage, WorkerOutMessage } from "./types.js";
+
+let output: Output | null = null;
+let videoSource: EncodedVideoPacketSource | null = null;
+let audioSource: AudioSampleSource | null = null;
+let encoder: VideoEncoder | null = null;
+let target: BufferTarget | null = null;
+let isFirstPacket = true;
+let framesEncoded = 0;
+let encoderConfig: VideoEncoderConfig | null = null;
+
+function post(msg: WorkerOutMessage, transfer?: Transferable[]): void {
+  self.postMessage(msg, { transfer: transfer ?? [] });
+}
+
+async function handleInit(config: WorkerInMessage & { type: "init" }): Promise<void> {
+  const { width, height, fps, codec, bitrate, format } = config.config;
+
+  target = new BufferTarget();
+  const formatObj = format === "webm" ? new WebmOutputFormat() : new Mp4OutputFormat();
+  output = new Output({ format: formatObj, target });
+
+  const mbCodec = codec.startsWith("avc") ? "avc" : "vp9";
+  videoSource = new EncodedVideoPacketSource(mbCodec);
+  output.addVideoTrack(videoSource, { frameRate: fps });
+
+  audioSource = new AudioSampleSource({ codec: "aac", bitrate: 128_000 });
+  output.addAudioTrack(audioSource);
+
+  encoderConfig = {
+    codec,
+    width,
+    height,
+    bitrate,
+    hardwareAcceleration: "prefer-hardware",
+  };
+
+  encoder = new VideoEncoder({
+    output: async (chunk, meta) => {
+      const packet = EncodedPacket.fromEncodedChunk(chunk);
+      if (isFirstPacket) {
+        await videoSource!.add(packet, meta);
+        isFirstPacket = false;
+      } else {
+        await videoSource!.add(packet);
+      }
+      framesEncoded++;
+      post({ type: "frame-encoded", index: framesEncoded - 1 });
+    },
+    error: (e) => {
+      post({ type: "error", message: e.message });
+    },
+  });
+
+  encoder.configure(encoderConfig);
+  await output.start();
+
+  post({ type: "ready" });
+}
+
+async function handleFrame(msg: WorkerInMessage & { type: "frame" }): Promise<void> {
+  if (!encoder) {
+    post({ type: "error", message: "Encoder not initialized" });
+    return;
+  }
+
+  const frame = new VideoFrame(msg.bitmap, {
+    timestamp: msg.timestamp,
+  });
+
+  const isKeyFrame = msg.index % 150 === 0;
+  encoder.encode(frame, { keyFrame: isKeyFrame });
+  frame.close();
+  msg.bitmap.close();
+}
+
+async function handleSetAudio(msg: WorkerInMessage & { type: "set-audio" }): Promise<void> {
+  if (!audioSource) return;
+
+  const interleaved = interleaveChannels(msg.channelData);
+  const sample = new AudioSample({
+    data: interleaved,
+    format: "f32-planar",
+    numberOfChannels: msg.channelData.length,
+    sampleRate: msg.sampleRate,
+    timestamp: 0,
+  });
+  await audioSource.add(sample);
+  sample.close();
+}
+
+async function handleFinalize(): Promise<void> {
+  if (!encoder || !output || !target || !videoSource || !audioSource) {
+    post({ type: "error", message: "Cannot finalize — not initialized" });
+    return;
+  }
+
+  await encoder.flush();
+  encoder.close();
+  videoSource.close();
+  audioSource.close();
+  await output.finalize();
+
+  const buffer = target.buffer;
+  if (!buffer) {
+    post({ type: "error", message: "No output buffer after finalize" });
+    return;
+  }
+
+  const blob = new Blob([buffer], { type: "video/mp4" });
+  post({ type: "done", blob });
+}
+
+function interleaveChannels(channels: Float32Array[]): Float32Array {
+  if (channels.length === 1) return channels[0]!;
+  const length = channels[0]!.length * channels.length;
+  const result = new Float32Array(length);
+  const numChannels = channels.length;
+  const samplesPerChannel = channels[0]!.length;
+  for (let ch = 0; ch < numChannels; ch++) {
+    const channelData = channels[ch]!;
+    for (let i = 0; i < samplesPerChannel; i++) {
+      result[i * numChannels + ch] = channelData[i]!;
+    }
+  }
+  return result;
+}
+
+self.onmessage = async (e: MessageEvent<WorkerInMessage>) => {
+  try {
+    switch (e.data.type) {
+      case "init":
+        await handleInit(e.data);
+        break;
+      case "frame":
+        await handleFrame(e.data);
+        break;
+      case "set-audio":
+        await handleSetAudio(e.data);
+        break;
+      case "finalize":
+        await handleFinalize();
+        break;
+    }
+  } catch (err) {
+    post({ type: "error", message: err instanceof Error ? err.message : String(err) });
+  }
+};
+```
+
+- [ ] **Step 3: Create encoding/encoder.ts — main-thread wrapper**
+
+```typescript
+/**
+ * Encoder
+ *
+ * Main-thread wrapper that manages the encoding Web Worker.
+ * Sends ImageBitmap frames to the worker and receives the final MP4 blob.
+ */
+
+import type { WorkerInMessage, WorkerOutMessage } from "./types.js";
+
+export interface EncoderOptions {
+  width: number;
+  height: number;
+  fps: number;
+  codec: string;
+  bitrate: number;
+  format: "mp4" | "webm";
+  onFrameEncoded?: (index: number) => void;
+}
+
+export class Encoder {
+  private worker: Worker | null = null;
+  private options: EncoderOptions;
+  private resolveReady: (() => void) | null = null;
+  private resolveDone: ((blob: Blob) => void) | null = null;
+  private rejectPending: ((err: Error) => void) | null = null;
+
+  constructor(options: EncoderOptions) {
+    this.options = options;
+  }
+
+  async init(): Promise<void> {
+    this.worker = new Worker(new URL("./worker.js", import.meta.url), {
+      type: "module",
+    });
+
+    this.worker.onmessage = (e: MessageEvent<WorkerOutMessage>) => {
+      this.handleMessage(e.data);
+    };
+
+    this.worker.onerror = (e) => {
+      this.rejectPending?.(new Error(`Worker error: ${e.message}`));
+    };
+
+    await new Promise<void>((resolve, reject) => {
+      this.resolveReady = resolve;
+      this.rejectPending = reject;
+
+      const msg: WorkerInMessage = {
+        type: "init",
+        config: {
+          width: this.options.width,
+          height: this.options.height,
+          fps: this.options.fps,
+          codec: this.options.codec,
+          bitrate: this.options.bitrate,
+          format: this.options.format,
+        },
+      };
+      this.worker!.postMessage(msg);
+    });
+  }
+
+  sendFrame(bitmap: ImageBitmap, index: number, timestamp: number): void {
+    if (!this.worker) throw new Error("Encoder not initialized");
+    const msg: WorkerInMessage = { type: "frame", bitmap, index, timestamp };
+    this.worker.postMessage(msg, [bitmap]);
+  }
+
+  setAudio(channelData: Float32Array[], sampleRate: number): void {
+    if (!this.worker) throw new Error("Encoder not initialized");
+    const msg: WorkerInMessage = { type: "set-audio", channelData, sampleRate };
+    this.worker.postMessage(msg, channelData.map((c) => c.buffer));
+  }
+
+  async finalize(): Promise<Blob> {
+    if (!this.worker) throw new Error("Encoder not initialized");
+    return new Promise<Blob>((resolve, reject) => {
+      this.resolveDone = resolve;
+      this.rejectPending = reject;
+      const msg: WorkerInMessage = { type: "finalize" };
+      this.worker!.postMessage(msg);
+    });
+  }
+
+  dispose(): void {
+    this.worker?.terminate();
+    this.worker = null;
+  }
+
+  private handleMessage(msg: WorkerOutMessage): void {
+    switch (msg.type) {
+      case "ready":
+        this.resolveReady?.();
+        this.resolveReady = null;
+        break;
+      case "frame-encoded":
+        this.options.onFrameEncoded?.(msg.index);
+        break;
+      case "done":
+        this.resolveDone?.(msg.blob);
+        this.resolveDone = null;
+        break;
+      case "error":
+        this.rejectPending?.(new Error(msg.message));
+        this.rejectPending = null;
+        break;
+    }
+  }
+}
+```
+
+- [ ] **Step 4: Write encoder.test.ts**
+
+Full browser-level encoding tests require WebCodecs (not available in jsdom). Test the structural contract.
+
+```typescript
+import { describe, it, expect } from "vitest";
+import { Encoder } from "./encoder.js";
+
+describe("Encoder", () => {
+  it("can be constructed with options", () => {
+    const encoder = new Encoder({
+      width: 1920,
+      height: 1080,
+      fps: 30,
+      codec: "avc1.640028",
+      bitrate: 4_000_000,
+      format: "mp4",
+    });
+    expect(encoder).toBeDefined();
+  });
+
+  it("throws if sendFrame called before init", () => {
+    const encoder = new Encoder({
+      width: 1920,
+      height: 1080,
+      fps: 30,
+      codec: "avc1.640028",
+      bitrate: 4_000_000,
+      format: "mp4",
+    });
+    expect(() => encoder.sendFrame({} as ImageBitmap, 0, 0)).toThrow("not initialized");
+  });
+
+  it("throws if finalize called before init", async () => {
+    const encoder = new Encoder({
+      width: 1920,
+      height: 1080,
+      fps: 30,
+      codec: "avc1.640028",
+      bitrate: 4_000_000,
+      format: "mp4",
+    });
+    await expect(encoder.finalize()).rejects.toThrow("not initialized");
+  });
+});
+```
+
+- [ ] **Step 5: Run tests**
+
+Run: `cd packages/renderer && pnpm vitest run src/encoding/encoder.test.ts`
+Expected: All 3 tests pass.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add packages/renderer/src/encoding/
+git commit -m "feat(renderer): add WebCodecs encoding worker and main-thread wrapper"
+```
+
+---
+
+## Task 5: Audio Mixer
+
+**Files:**
+- Create: `packages/renderer/src/audio/mixer.ts`
+- Create: `packages/renderer/src/audio/mixer.test.ts`
+
+- [ ] **Step 1: Write the test**
+
+```typescript
+import { describe, it, expect } from "vitest";
+import { mixAudio } from "./mixer.js";
+import type { AudioMixConfig } from "../types.js";
+
+describe("mixAudio", () => {
+  it("returns silent audio when no sources provided", async () => {
+    const config: AudioMixConfig = {
+      duration: 1.0,
+      sampleRate: 44100,
+      channels: 2,
+      sources: [],
+    };
+    const result = await mixAudio(config);
+    expect(result.sampleRate).toBe(44100);
+    expect(result.channels).toBe(2);
+    expect(result.buffer.duration).toBeCloseTo(1.0, 1);
+    // Verify silence
+    const data = result.buffer.getChannelData(0);
+    const maxAmp = Math.max(...Array.from(data).map(Math.abs));
+    expect(maxAmp).toBe(0);
+  });
+
+  it("uses default sample rate and channels", async () => {
+    const result = await mixAudio({ duration: 0.5, sources: [] });
+    expect(result.sampleRate).toBe(44100);
+    expect(result.channels).toBe(2);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `cd packages/renderer && pnpm vitest run src/audio/mixer.test.ts`
+Expected: FAIL — module not found.
+
+- [ ] **Step 3: Implement mixer.ts**
+
+```typescript
+/**
+ * Audio Mixer
+ *
+ * Mixes audio sources using OfflineAudioContext.
+ * Decodes audio files, applies volume/timing offsets,
+ * and renders to a single AudioBuffer (PCM).
+ */
+
+import type { AudioMixConfig, AudioMixResult } from "../types.js";
+
+const DEFAULT_SAMPLE_RATE = 44100;
+const DEFAULT_CHANNELS = 2;
+
+export async function mixAudio(config: AudioMixConfig): Promise<AudioMixResult> {
+  const sampleRate = config.sampleRate ?? DEFAULT_SAMPLE_RATE;
+  const channels = config.channels ?? DEFAULT_CHANNELS;
+  const totalSamples = Math.ceil(config.duration * sampleRate);
+
+  const offlineCtx = new OfflineAudioContext(channels, totalSamples, sampleRate);
+
+  for (const source of config.sources) {
+    const arrayBuffer = await fetchAudioData(source.src);
+    const audioBuffer = await offlineCtx.decodeAudioData(arrayBuffer);
+
+    const bufferSource = offlineCtx.createBufferSource();
+    bufferSource.buffer = audioBuffer;
+
+    // Apply volume
+    const gainNode = offlineCtx.createGain();
+    gainNode.gain.value = source.volume ?? 1;
+
+    bufferSource.connect(gainNode);
+    gainNode.connect(offlineCtx.destination);
+
+    // Calculate timing
+    const mediaOffset = source.mediaOffset ?? 0;
+    const clipDuration = source.endTime - source.startTime;
+
+    if (mediaOffset > 0) {
+      bufferSource.start(source.startTime, mediaOffset, clipDuration);
+    } else {
+      bufferSource.start(source.startTime, 0, clipDuration);
+    }
+  }
+
+  const renderedBuffer = await offlineCtx.startRendering();
+
+  return {
+    buffer: renderedBuffer,
+    sampleRate,
+    channels,
+  };
+}
+
+async function fetchAudioData(src: string | Blob): Promise<ArrayBuffer> {
+  if (src instanceof Blob) {
+    return src.arrayBuffer();
+  }
+  const response = await fetch(src);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch audio: ${src} (${response.status})`);
+  }
+  return response.arrayBuffer();
+}
+```
+
+- [ ] **Step 4: Run tests**
+
+Run: `cd packages/renderer && pnpm vitest run src/audio/mixer.test.ts`
+Expected: Both tests pass.
+
+Note: `OfflineAudioContext` may not be available in the test environment (jsdom). If tests fail due to missing API, add `// @vitest-environment happy-dom` or configure vitest to use a browser-like environment. If needed, mock `OfflineAudioContext` minimally:
+
+```typescript
+// Add to top of test file if OfflineAudioContext is missing:
+import { vi } from "vitest";
+
+if (typeof globalThis.OfflineAudioContext === "undefined") {
+  globalThis.OfflineAudioContext = vi.fn().mockImplementation((channels, length, sampleRate) => ({
+    createBufferSource: () => ({
+      buffer: null,
+      connect: vi.fn(),
+      start: vi.fn(),
+    }),
+    createGain: () => ({
+      gain: { value: 1 },
+      connect: vi.fn(),
+    }),
+    destination: {},
+    decodeAudioData: vi.fn().mockResolvedValue({
+      duration: 1,
+      numberOfChannels: channels,
+      sampleRate,
+      getChannelData: () => new Float32Array(length),
+    }),
+    startRendering: vi.fn().mockResolvedValue({
+      duration: length / sampleRate,
+      numberOfChannels: channels,
+      sampleRate,
+      length,
+      getChannelData: () => new Float32Array(length),
+    }),
+  })) as unknown as typeof OfflineAudioContext;
+}
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add packages/renderer/src/audio/
+git commit -m "feat(renderer): add OfflineAudioContext-based audio mixer"
+```
+
+---
+
+## Task 6: Iframe Pool + Frame Scheduler
+
+**Files:**
+- Create: `packages/renderer/src/capture/iframe-pool.ts`
+- Create: `packages/renderer/src/capture/iframe-pool.test.ts`
+
+- [ ] **Step 1: Write the test**
+
+```typescript
+import { describe, it, expect } from "vitest";
+import { calculateConcurrency } from "./iframe-pool.js";
+
+describe("calculateConcurrency", () => {
+  it("returns at least 1", () => {
+    expect(calculateConcurrency(0)).toBe(1);
+  });
+
+  it("caps at 8", () => {
+    expect(calculateConcurrency(100)).toBeLessThanOrEqual(8);
+  });
+
+  it("leaves 1 core for encoding", () => {
+    expect(calculateConcurrency(4)).toBe(3);
+  });
+
+  it("handles single-core", () => {
+    expect(calculateConcurrency(1)).toBe(1);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `cd packages/renderer && pnpm vitest run src/capture/iframe-pool.test.ts`
+Expected: FAIL — module not found.
+
+- [ ] **Step 3: Implement iframe-pool.ts**
+
+```typescript
+/**
+ * Iframe Pool
+ *
+ * Manages N parallel hidden iframes, each loading the same composition.
+ * Each iframe captures a contiguous range of frames using the provided
+ * FrameSource for DOM-to-ImageBitmap conversion.
+ */
+
+import type { FrameSource, FrameSourceConfig, HfMediaElement } from "../types.js";
+import { distributeFrames } from "../utils/timing.js";
+
+export function calculateConcurrency(hardwareConcurrency: number): number {
+  return Math.max(1, Math.min(hardwareConcurrency - 1, 8));
+}
+
+export interface IframePoolConfig {
+  compositionUrl: string;
+  width: number;
+  height: number;
+  devicePixelRatio?: number;
+  concurrency: number;
+  createFrameSource: () => FrameSource;
+}
+
+export interface CapturedFrame {
+  bitmap: ImageBitmap;
+  index: number;
+  time: number;
+}
+
+export class IframePool {
+  private sources: FrameSource[] = [];
+  private config: IframePoolConfig | null = null;
+
+  async init(config: IframePoolConfig): Promise<{ duration: number; media: HfMediaElement[] }> {
+    this.config = config;
+
+    // Initialize all frame sources in parallel
+    const initPromises: Promise<void>[] = [];
+    for (let i = 0; i < config.concurrency; i++) {
+      const source = config.createFrameSource();
+      this.sources.push(source);
+      initPromises.push(
+        source.init({
+          compositionUrl: config.compositionUrl,
+          width: config.width,
+          height: config.height,
+          devicePixelRatio: config.devicePixelRatio,
+        }),
+      );
+    }
+    await Promise.all(initPromises);
+
+    const first = this.sources[0]!;
+    return { duration: first.duration, media: first.media };
+  }
+
+  async captureAll(
+    frameTimes: number[],
+    onFrame: (frame: CapturedFrame) => void,
+  ): Promise<void> {
+    const ranges = distributeFrames(frameTimes.length, this.sources.length);
+
+    await Promise.all(
+      ranges.map(async (range, workerIdx) => {
+        const source = this.sources[workerIdx]!;
+        for (let i = range.start; i <= range.end; i++) {
+          const time = frameTimes[i]!;
+          const bitmap = await source.capture(time);
+          onFrame({ bitmap, index: i, time });
+        }
+      }),
+    );
+  }
+
+  async dispose(): Promise<void> {
+    await Promise.all(this.sources.map((s) => s.dispose()));
+    this.sources = [];
+    this.config = null;
+  }
+}
+```
+
+- [ ] **Step 4: Run tests**
+
+Run: `cd packages/renderer && pnpm vitest run src/capture/iframe-pool.test.ts`
+Expected: All 4 tests pass.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add packages/renderer/src/capture/
+git commit -m "feat(renderer): add parallel iframe pool for frame capture"
+```
+
+---
+
+## Task 7: Video Frame Injector
+
+**Files:**
+- Create: `packages/renderer/src/capture/video-frame-injector.ts`
+
+- [ ] **Step 1: Implement video-frame-injector.ts**
+
+This handles `<video>` elements in compositions by decoding them client-side and drawing frames onto overlay canvases that SnapDOM can capture.
+
+```typescript
+/**
+ * Video Frame Injector
+ *
+ * For each <video> element in the composition, creates a canvas overlay
+ * that displays the decoded video frame at the current composition time.
+ * SnapDOM can capture <canvas> elements (unlike <video> via foreignObject).
+ */
+
+import type { HfMediaElement } from "../types.js";
+
+interface VideoTrack {
+  element: HfMediaElement;
+  video: HTMLVideoElement;
+  canvas: HTMLCanvasElement;
+  ctx: CanvasRenderingContext2D;
+}
+
+export class VideoFrameInjector {
+  private tracks: VideoTrack[] = [];
+  private iframeDoc: Document | null = null;
+
+  async init(media: HfMediaElement[], iframeDoc: Document): Promise<void> {
+    this.iframeDoc = iframeDoc;
+    const videoElements = media.filter((m) => {
+      const el = iframeDoc.getElementById(m.elementId);
+      return el?.tagName === "VIDEO";
+    });
+
+    for (const element of videoElements) {
+      const videoEl = iframeDoc.getElementById(element.elementId) as HTMLVideoElement | null;
+      if (!videoEl) continue;
+
+      // Create a hidden video element for decoding
+      const video = iframeDoc.createElement("video");
+      video.src = element.src;
+      video.muted = true;
+      video.preload = "auto";
+      video.crossOrigin = "anonymous";
+      video.style.display = "none";
+      iframeDoc.body.appendChild(video);
+
+      await new Promise<void>((resolve) => {
+        video.onloadeddata = () => resolve();
+        video.onerror = () => resolve(); // graceful — skip broken videos
+        video.load();
+      });
+
+      // Create canvas overlay matching the video element's position
+      const canvas = iframeDoc.createElement("canvas");
+      const rect = videoEl.getBoundingClientRect();
+      canvas.width = rect.width;
+      canvas.height = rect.height;
+      canvas.style.position = "absolute";
+      canvas.style.left = `${rect.left}px`;
+      canvas.style.top = `${rect.top}px`;
+      canvas.style.width = `${rect.width}px`;
+      canvas.style.height = `${rect.height}px`;
+      canvas.style.zIndex = getComputedStyle(videoEl).zIndex || "1";
+      canvas.style.pointerEvents = "none";
+
+      const ctx = canvas.getContext("2d");
+      if (!ctx) continue;
+
+      // Hide the original video element (SnapDOM can't capture it anyway)
+      videoEl.style.visibility = "hidden";
+
+      // Insert canvas as sibling
+      videoEl.parentElement?.insertBefore(canvas, videoEl.nextSibling);
+
+      this.tracks.push({ element, video, canvas, ctx });
+    }
+  }
+
+  async injectFrame(compositionTime: number): Promise<void> {
+    for (const track of this.tracks) {
+      const { element, video, canvas, ctx } = track;
+
+      // Is this video visible at this composition time?
+      if (compositionTime < element.startTime || compositionTime >= element.endTime) {
+        canvas.style.visibility = "hidden";
+        continue;
+      }
+      canvas.style.visibility = "visible";
+
+      // Calculate the video's local time
+      const mediaOffset = element.mediaOffset ?? 0;
+      const localTime = compositionTime - element.startTime + mediaOffset;
+
+      // Seek the video to the correct time
+      if (Math.abs(video.currentTime - localTime) > 0.01) {
+        video.currentTime = localTime;
+        await new Promise<void>((resolve) => {
+          video.onseeked = () => resolve();
+          setTimeout(resolve, 100); // safety timeout
+        });
+      }
+
+      // Draw the current video frame onto the canvas
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    }
+  }
+
+  dispose(): void {
+    for (const track of this.tracks) {
+      track.video.remove();
+      track.canvas.remove();
+    }
+    this.tracks = [];
+    this.iframeDoc = null;
+  }
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add packages/renderer/src/capture/video-frame-injector.ts
+git commit -m "feat(renderer): add video frame injector for <video> element capture"
+```
+
+---
+
+## Task 8: Main Renderer Orchestrator
+
+**Files:**
+- Create: `packages/renderer/src/renderer.ts`
+- Modify: `packages/renderer/src/index.ts` — add `render()` and `createRenderer()` exports
+
+- [ ] **Step 1: Implement renderer.ts**
+
+```typescript
+/**
+ * Renderer
+ *
+ * Orchestrates the full client-side rendering pipeline:
+ * 1. Initialize iframe pool + frame sources
+ * 2. Capture frames in parallel across iframes
+ * 3. Stream frames to encoding worker
+ * 4. Mix audio via OfflineAudioContext
+ * 5. Mux video + audio via MediaBunny (in worker)
+ * 6. Return final MP4 Blob
+ */
+
+import type {
+  RenderConfig,
+  RenderProgress,
+  RenderResult,
+  AudioSource,
+} from "./types.js";
+import { isSupported } from "./compat.js";
+import { generateFrameTimes } from "./utils/timing.js";
+import { IframePool, calculateConcurrency } from "./capture/iframe-pool.js";
+import { SnapdomFrameSource } from "./sources/snapdom.js";
+import { Encoder } from "./encoding/encoder.js";
+import { mixAudio } from "./audio/mixer.js";
+
+const DEFAULT_FPS = 30;
+const DEFAULT_WIDTH = 1920;
+const DEFAULT_HEIGHT = 1080;
+const DEFAULT_BITRATE_1080P = 4_000_000;
+
+function resolveCodecString(codec: RenderConfig["codec"]): string {
+  if (codec === "vp9") return "vp09.00.31.08";
+  return "avc1.640028"; // H.264 High profile
+}
+
+function resolveBitrate(width: number, height: number, bitrate?: number): number {
+  if (bitrate) return bitrate;
+  const pixels = width * height;
+  const ref = 1920 * 1080;
+  return Math.round(DEFAULT_BITRATE_1080P * (pixels / ref));
+}
+
+export class HyperframesRenderer {
+  private config: Required<
+    Pick<RenderConfig, "fps" | "width" | "height" | "format" | "codec" | "concurrency">
+  > & RenderConfig;
+  private cancelled = false;
+  private iframePool: IframePool | null = null;
+  private encoder: Encoder | null = null;
+
+  constructor(config: RenderConfig) {
+    this.config = {
+      ...config,
+      fps: config.fps ?? DEFAULT_FPS,
+      width: config.width ?? DEFAULT_WIDTH,
+      height: config.height ?? DEFAULT_HEIGHT,
+      format: config.format ?? "mp4",
+      codec: config.codec ?? "h264",
+      concurrency: config.concurrency ?? calculateConcurrency(navigator.hardwareConcurrency ?? 4),
+    };
+  }
+
+  cancel(): void {
+    this.cancelled = true;
+  }
+
+  async render(): Promise<RenderResult> {
+    if (!isSupported()) {
+      throw new Error(
+        "Client-side rendering not supported. Requires WebCodecs (Chrome 94+, Firefox 130+, Safari 26+).",
+      );
+    }
+
+    const perfStart = performance.now();
+    const perf = { captureMs: 0, encodeMs: 0, audioMs: 0, muxMs: 0, totalMs: 0, framesPerSecond: 0 };
+    const { fps, width, height, format, codec, concurrency, composition, onProgress } = this.config;
+
+    this.cancelled = false;
+
+    const emitProgress = (stage: RenderProgress["stage"], progress: number, extra?: Partial<RenderProgress>) => {
+      onProgress?.({ stage, progress, ...extra });
+    };
+
+    try {
+      // ── Stage 1: Initialize ──────────────────────────────────────────────
+      emitProgress("initializing", 0);
+
+      this.iframePool = new IframePool();
+      const { duration, media } = await this.iframePool.init({
+        compositionUrl: composition,
+        width,
+        height,
+        devicePixelRatio: this.config.devicePixelRatio,
+        concurrency,
+        createFrameSource: () => new SnapdomFrameSource(),
+      });
+
+      if (this.cancelled) throw new CancelledError();
+
+      const frameTimes = generateFrameTimes(duration, fps);
+      const totalFrames = frameTimes.length;
+
+      // Initialize encoder
+      const codecString = resolveCodecString(codec);
+      const bitrate = resolveBitrate(width, height, this.config.bitrate);
+
+      let framesEncoded = 0;
+      this.encoder = new Encoder({
+        width,
+        height,
+        fps,
+        codec: codecString,
+        bitrate,
+        format,
+        onFrameEncoded: () => {
+          framesEncoded++;
+        },
+      });
+      await this.encoder.init();
+
+      if (this.cancelled) throw new CancelledError();
+
+      // ── Stage 2: Capture + Encode (pipelined) ───────────────────────────
+      emitProgress("capturing", 0, { totalFrames, currentFrame: 0 });
+      const captureStart = performance.now();
+
+      // Buffer to ensure frames are sent to encoder in order
+      const frameBuffer = new Map<number, ImageBitmap>();
+      let nextFrameToEncode = 0;
+
+      const flushBuffer = () => {
+        while (frameBuffer.has(nextFrameToEncode)) {
+          const bitmap = frameBuffer.get(nextFrameToEncode)!;
+          frameBuffer.delete(nextFrameToEncode);
+          const timestamp = frameTimes[nextFrameToEncode]! * 1_000_000; // seconds → microseconds
+          this.encoder!.sendFrame(bitmap, nextFrameToEncode, timestamp);
+          nextFrameToEncode++;
+        }
+      };
+
+      let framesCaptured = 0;
+      await this.iframePool.captureAll(frameTimes, (frame) => {
+        if (this.cancelled) return;
+        frameBuffer.set(frame.index, frame.bitmap);
+        flushBuffer();
+        framesCaptured++;
+        const captureProgress = framesCaptured / totalFrames;
+        emitProgress("capturing", captureProgress * 0.7, {
+          currentFrame: framesCaptured,
+          totalFrames,
+          captureRate: framesCaptured / ((performance.now() - captureStart) / 1000),
+        });
+      });
+
+      // Flush any remaining buffered frames
+      flushBuffer();
+      perf.captureMs = performance.now() - captureStart;
+
+      if (this.cancelled) throw new CancelledError();
+
+      // ── Stage 3: Mix audio ──────────────────────────────────────────────
+      emitProgress("mixing-audio", 0.7);
+      const audioStart = performance.now();
+
+      const audioSources: AudioSource[] = media
+        .filter((m) => m.hasAudio)
+        .map((m) => ({
+          src: m.src,
+          startTime: m.startTime,
+          endTime: m.endTime,
+          mediaOffset: m.mediaOffset,
+          volume: m.volume,
+        }));
+
+      if (audioSources.length > 0) {
+        const mixResult = await mixAudio({
+          duration,
+          sources: audioSources,
+        });
+
+        const channelData: Float32Array[] = [];
+        for (let ch = 0; ch < mixResult.channels; ch++) {
+          channelData.push(mixResult.buffer.getChannelData(ch));
+        }
+        this.encoder.setAudio(channelData, mixResult.sampleRate);
+      }
+      perf.audioMs = performance.now() - audioStart;
+
+      if (this.cancelled) throw new CancelledError();
+
+      // ── Stage 4: Finalize (mux) ────────────────────────────────────────
+      emitProgress("muxing", 0.9);
+      const muxStart = performance.now();
+      const blob = await this.encoder.finalize();
+      perf.muxMs = performance.now() - muxStart;
+
+      // ── Done ────────────────────────────────────────────────────────────
+      perf.totalMs = performance.now() - perfStart;
+      perf.framesPerSecond = totalFrames / (perf.totalMs / 1000);
+      perf.encodeMs = perf.totalMs - perf.captureMs - perf.audioMs - perf.muxMs;
+
+      emitProgress("complete", 1, { totalFrames, currentFrame: totalFrames });
+
+      return {
+        blob,
+        mimeType: format === "webm" ? "video/webm" : "video/mp4",
+        durationMs: perf.totalMs,
+        perf,
+      };
+    } finally {
+      await this.iframePool?.dispose();
+      this.encoder?.dispose();
+      this.iframePool = null;
+      this.encoder = null;
+    }
+  }
+}
+
+export class CancelledError extends Error {
+  constructor() {
+    super("Render cancelled");
+    this.name = "CancelledError";
+  }
+}
+```
+
+- [ ] **Step 2: Update src/index.ts with public API**
+
+Replace the contents of `packages/renderer/src/index.ts` with:
+
+```typescript
+/**
+ * @hyperframes/renderer
+ *
+ * Client-side video rendering for HyperFrames compositions.
+ * Zero server dependencies — renders entirely in the browser
+ * using WebCodecs, MediaBunny, and SnapDOM.
+ */
+
+import { HyperframesRenderer } from "./renderer.js";
+import type { RenderConfig, RenderResult } from "./types.js";
+
+export { isSupported, detectBestFrameSource } from "./compat.js";
+export { HyperframesRenderer, CancelledError } from "./renderer.js";
+export { SnapdomFrameSource } from "./sources/snapdom.js";
+
+export type {
+  RenderConfig,
+  RenderProgress,
+  RenderResult,
+  FrameSource,
+  FrameSourceConfig,
+  HfMediaElement,
+  EncoderConfig,
+  AudioSource,
+  AudioMixConfig,
+  AudioMixResult,
+  MuxerConfig,
+} from "./types.js";
+
+/**
+ * Render a composition to video. Convenience wrapper around HyperframesRenderer.
+ *
+ * @example
+ * ```ts
+ * const result = await render({
+ *   composition: './my-comp/index.html',
+ *   fps: 30,
+ *   onProgress: (p) => console.log(p.stage, p.progress),
+ * });
+ * // result.blob is the final MP4
+ * ```
+ */
+export async function render(config: RenderConfig): Promise<RenderResult> {
+  const renderer = new HyperframesRenderer(config);
+  return renderer.render();
+}
+
+/**
+ * Create a renderer instance for more control (e.g., cancellation).
+ *
+ * @example
+ * ```ts
+ * const renderer = createRenderer({ composition: './comp/index.html' });
+ * cancelBtn.onclick = () => renderer.cancel();
+ * const result = await renderer.render();
+ * ```
+ */
+export function createRenderer(config: RenderConfig): HyperframesRenderer {
+  return new HyperframesRenderer(config);
+}
+```
+
+- [ ] **Step 3: Verify typecheck**
+
+Run: `cd packages/renderer && pnpm typecheck`
+Expected: Clean, no errors.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add packages/renderer/src/renderer.ts packages/renderer/src/index.ts
+git commit -m "feat(renderer): add main orchestrator and public API (render, createRenderer)"
+```
+
+---
+
+## Task 9: End-to-End Integration Test
+
+**Files:**
+- Create: `packages/renderer/src/tests/renderer.integration.test.ts`
+- Create: `packages/renderer/src/tests/fixtures/basic-composition.html`
+
+- [ ] **Step 1: Create a minimal test composition**
+
+Create `packages/renderer/src/tests/fixtures/basic-composition.html`:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    html, body { margin: 0; padding: 0; overflow: hidden; }
+    body { width: 1920px; height: 1080px; background: #1a1a2e; }
+    .box {
+      position: absolute;
+      top: 50%; left: 50%;
+      transform: translate(-50%, -50%);
+      width: 200px; height: 200px;
+      background: #e94560;
+      border-radius: 16px;
+    }
+  </style>
+</head>
+<body>
+  <div class="box"></div>
+  <script>
+    // Minimal __hf protocol — 2 second static composition
+    window.__hf = {
+      duration: 2,
+      seek: function(time) {
+        // Static composition — no animation to seek
+      },
+      media: [],
+    };
+  </script>
+</body>
+</html>
+```
+
+- [ ] **Step 2: Create integration test**
+
+Note: This test requires a real browser environment (WebCodecs, DOM, Workers). It should be run in a browser test runner (e.g., vitest with `browser` mode or Playwright). Mark it for browser-only execution.
+
+```typescript
+/**
+ * End-to-end integration test for the renderer.
+ *
+ * Requires a browser environment with WebCodecs support.
+ * Run with: vitest run --environment browser
+ * Or skip in CI with jsdom by checking for WebCodecs.
+ */
+import { describe, it, expect } from "vitest";
+import { render, isSupported } from "../index.js";
+
+const SKIP = typeof globalThis.VideoEncoder === "undefined";
+
+describe.skipIf(SKIP)("Renderer E2E", () => {
+  it("renders a basic composition to MP4", async () => {
+    const progressStages: string[] = [];
+
+    const result = await render({
+      composition: new URL("./fixtures/basic-composition.html", import.meta.url).href,
+      fps: 30,
+      width: 1920,
+      height: 1080,
+      concurrency: 1, // Single iframe for test simplicity
+      onProgress: (p) => {
+        if (!progressStages.includes(p.stage)) {
+          progressStages.push(p.stage);
+        }
+      },
+    });
+
+    // Verify output
+    expect(result.blob).toBeInstanceOf(Blob);
+    expect(result.blob.size).toBeGreaterThan(0);
+    expect(result.mimeType).toBe("video/mp4");
+    expect(result.durationMs).toBeGreaterThan(0);
+
+    // Verify perf data
+    expect(result.perf.totalMs).toBeGreaterThan(0);
+    expect(result.perf.captureMs).toBeGreaterThan(0);
+    expect(result.perf.framesPerSecond).toBeGreaterThan(0);
+
+    // Verify progress stages fired
+    expect(progressStages).toContain("initializing");
+    expect(progressStages).toContain("capturing");
+    expect(progressStages).toContain("complete");
+  }, 60_000); // 60s timeout for rendering
+
+  it("isSupported returns true in browser with WebCodecs", () => {
+    expect(isSupported()).toBe(true);
+  });
+});
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add packages/renderer/src/tests/
+git commit -m "test(renderer): add end-to-end integration test with basic composition"
+```
+
+---
+
+## Task 10: Wire SnapDOM Frame Source to Video Frame Injector
+
+**Files:**
+- Modify: `packages/renderer/src/sources/snapdom.ts` — integrate VideoFrameInjector
+
+The SnapdomFrameSource needs to create VideoFrameInjector instances for compositions with `<video>` elements, and call `injectFrame()` before each SnapDOM capture.
+
+- [ ] **Step 1: Update snapdom.ts to integrate video frame injection**
+
+Add to `packages/renderer/src/sources/snapdom.ts`, after the existing imports:
+
+```typescript
+import { VideoFrameInjector } from "../capture/video-frame-injector.js";
+```
+
+Add a field to the class:
+
+```typescript
+private videoInjector: VideoFrameInjector | null = null;
+```
+
+At the end of the `init()` method, after setting `this._media`, add:
+
+```typescript
+    // Set up video frame injection if composition has <video> elements
+    const videoMedia = this._media.filter((m) => {
+      const el = this.iframe!.contentDocument?.getElementById(m.elementId);
+      return el?.tagName === "VIDEO";
+    });
+    if (videoMedia.length > 0) {
+      this.videoInjector = new VideoFrameInjector();
+      await this.videoInjector.init(videoMedia, this.iframe!.contentDocument!);
+    }
+```
+
+In the `capture()` method, before the `snapdom.toCanvas()` call, add:
+
+```typescript
+    // Inject video frames before capture (SnapDOM can't capture <video> elements)
+    if (this.videoInjector) {
+      await this.videoInjector.injectFrame(time);
+    }
+```
+
+In `dispose()`, add before the existing cleanup:
+
+```typescript
+    this.videoInjector?.dispose();
+    this.videoInjector = null;
+```
+
+- [ ] **Step 2: Verify typecheck**
+
+Run: `cd packages/renderer && pnpm typecheck`
+Expected: Clean, no errors.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add packages/renderer/src/sources/snapdom.ts
+git commit -m "feat(renderer): integrate video frame injector into SnapDOM frame source"
+```
+
+---
+
+## Task 11: Progress and ETA Utility
+
+**Files:**
+- Create: `packages/renderer/src/utils/progress.ts`
+- Create: `packages/renderer/src/utils/progress.test.ts`
+
+- [ ] **Step 1: Write the test**
+
+```typescript
+import { describe, it, expect } from "vitest";
+import { ProgressTracker } from "./progress.js";
+
+describe("ProgressTracker", () => {
+  it("estimates time remaining based on rate", () => {
+    const tracker = new ProgressTracker(100);
+    // Simulate 10 frames in 1 second
+    tracker.recordFrame(10, 1000);
+    const eta = tracker.estimateTimeRemaining();
+    // 90 frames remaining at 10fps = ~9 seconds = ~9000ms
+    expect(eta).toBeGreaterThan(8000);
+    expect(eta).toBeLessThan(10000);
+  });
+
+  it("returns capture rate", () => {
+    const tracker = new ProgressTracker(100);
+    tracker.recordFrame(20, 2000);
+    expect(tracker.captureRate()).toBeCloseTo(10, 0);
+  });
+
+  it("handles zero frames gracefully", () => {
+    const tracker = new ProgressTracker(100);
+    expect(tracker.estimateTimeRemaining()).toBeUndefined();
+    expect(tracker.captureRate()).toBe(0);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `cd packages/renderer && pnpm vitest run src/utils/progress.test.ts`
+Expected: FAIL — module not found.
+
+- [ ] **Step 3: Implement progress.ts**
+
+```typescript
+/**
+ * Progress tracking and ETA estimation.
+ */
+
+export class ProgressTracker {
+  private totalFrames: number;
+  private framesCaptured = 0;
+  private elapsedMs = 0;
+
+  constructor(totalFrames: number) {
+    this.totalFrames = totalFrames;
+  }
+
+  recordFrame(framesCaptured: number, elapsedMs: number): void {
+    this.framesCaptured = framesCaptured;
+    this.elapsedMs = elapsedMs;
+  }
+
+  captureRate(): number {
+    if (this.elapsedMs <= 0) return 0;
+    return this.framesCaptured / (this.elapsedMs / 1000);
+  }
+
+  estimateTimeRemaining(): number | undefined {
+    const rate = this.captureRate();
+    if (rate <= 0) return undefined;
+    const remaining = this.totalFrames - this.framesCaptured;
+    return (remaining / rate) * 1000;
+  }
+
+  progress(): number {
+    if (this.totalFrames <= 0) return 0;
+    return this.framesCaptured / this.totalFrames;
+  }
+}
+```
+
+- [ ] **Step 4: Run tests**
+
+Run: `cd packages/renderer && pnpm vitest run src/utils/progress.test.ts`
+Expected: All 3 tests pass.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add packages/renderer/src/utils/progress.ts packages/renderer/src/utils/progress.test.ts
+git commit -m "feat(renderer): add progress tracking and ETA estimation"
+```
+
+---
+
+## Task 12: Final Verification + Package Polish
+
+**Files:**
+- Modify: `packages/renderer/package.json` — ensure all exports are correct
+- Run: full build + typecheck + tests
+
+- [ ] **Step 1: Run full typecheck**
+
+Run: `cd packages/renderer && pnpm typecheck`
+Expected: Clean, no errors.
+
+- [ ] **Step 2: Run all unit tests**
+
+Run: `cd packages/renderer && pnpm test`
+Expected: All unit tests pass (integration tests may be skipped without browser env).
+
+- [ ] **Step 3: Verify the package builds**
+
+Run: `cd packages/renderer && pnpm build`
+Expected: `dist/` directory created with compiled JS + declaration files.
+
+- [ ] **Step 4: Verify the full monorepo builds**
+
+Run: `pnpm build` (from repo root)
+Expected: All packages build successfully, including `@hyperframes/renderer`.
+
+- [ ] **Step 5: Commit any fixes**
+
+```bash
+git add -A packages/renderer/
+git commit -m "chore(renderer): polish package, fix build issues"
+```
+
+---
+
+## Task 13: Browser QA with agent-browser
+
+After implementation is complete, use agent-browser to:
+
+1. Serve a test composition via a local file server
+2. Open the Studio in a browser
+3. Trigger a client-side render
+4. Verify the MP4 downloads and plays correctly
+5. Record the session as a QA video
+
+This task is deferred until after all code tasks are complete.
+
+- [ ] **Step 1: Run QA via agent-browser skill**
+
+Invoke `/agent-browser` with instructions to:
+- Start a local dev server (`pnpm dev` in the studio)
+- Open the studio URL
+- Load a test composition
+- Click "Render in Browser" (or trigger `render()` from the console)
+- Wait for the MP4 blob download
+- Verify the output plays in a `<video>` element
+- Record the entire session
+
+---
+
+## Summary
+
+| Task | Description | Estimated Steps |
+|---|---|---|
+| 1 | Package scaffold + types | 7 |
+| 2 | Frame timing utility | 5 |
+| 3 | SnapDOM frame source | 5 |
+| 4 | Encoding worker + wrapper | 6 |
+| 5 | Audio mixer | 5 |
+| 6 | Iframe pool | 5 |
+| 7 | Video frame injector | 2 |
+| 8 | Main renderer orchestrator | 4 |
+| 9 | E2E integration test | 3 |
+| 10 | Wire video injector to SnapDOM | 3 |
+| 11 | Progress/ETA utility | 5 |
+| 12 | Final verification + polish | 5 |
+| 13 | Browser QA with agent-browser | 1 |
+| **Total** | | **56 steps** |

From a00930d952b9fbcc056318dd10bf182c74d9d6e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 01:50:07 +0200
Subject: [PATCH 03/30] feat(renderer): scaffold package with types and compat
 detection

Adds the @hyperframes/renderer package skeleton: package.json, tsconfig.json,
src/types.ts (all pipeline interfaces), src/compat.ts (WebCodecs feature
detection), and src/index.ts (re-exports). Typecheck passes with zero errors.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/renderer/package.json  |  35 ++++++++++
 packages/renderer/src/compat.ts |  22 ++++++
 packages/renderer/src/index.ts  |  23 +++++++
 packages/renderer/src/types.ts  | 116 ++++++++++++++++++++++++++++++++
 packages/renderer/tsconfig.json |  19 ++++++
 5 files changed, 215 insertions(+)
 create mode 100644 packages/renderer/package.json
 create mode 100644 packages/renderer/src/compat.ts
 create mode 100644 packages/renderer/src/index.ts
 create mode 100644 packages/renderer/src/types.ts
 create mode 100644 packages/renderer/tsconfig.json

diff --git a/packages/renderer/package.json b/packages/renderer/package.json
new file mode 100644
index 00000000..cb93df55
--- /dev/null
+++ b/packages/renderer/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "@hyperframes/renderer",
+  "version": "0.0.1",
+  "description": "Client-side video renderer for HyperFrames compositions",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/heygen-com/hyperframes",
+    "directory": "packages/renderer"
+  },
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@zumer/snapdom": "^2.8.0",
+    "mediabunny": "^1.40.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "@hyperframes/core": "workspace:^"
+  }
+}
diff --git a/packages/renderer/src/compat.ts b/packages/renderer/src/compat.ts
new file mode 100644
index 00000000..b238586f
--- /dev/null
+++ b/packages/renderer/src/compat.ts
@@ -0,0 +1,22 @@
+/**
+ * Feature detection for client-side rendering.
+ */
+
+export function isSupported(): boolean {
+  return (
+    typeof globalThis.VideoEncoder !== "undefined" &&
+    typeof globalThis.OffscreenCanvas !== "undefined" &&
+    typeof globalThis.AudioContext !== "undefined" &&
+    typeof globalThis.createImageBitmap !== "undefined"
+  );
+}
+
+export function detectBestFrameSource(): "draw-element-image" | "snapdom" {
+  if (
+    typeof CanvasRenderingContext2D !== "undefined" &&
+    "drawElementImage" in CanvasRenderingContext2D.prototype
+  ) {
+    return "draw-element-image";
+  }
+  return "snapdom";
+}
diff --git a/packages/renderer/src/index.ts b/packages/renderer/src/index.ts
new file mode 100644
index 00000000..8a3490e2
--- /dev/null
+++ b/packages/renderer/src/index.ts
@@ -0,0 +1,23 @@
+/**
+ * @hyperframes/renderer
+ *
+ * Client-side video rendering for HyperFrames compositions.
+ * Zero server dependencies — renders entirely in the browser
+ * using WebCodecs, MediaBunny, and SnapDOM.
+ */
+
+export { isSupported, detectBestFrameSource } from "./compat.js";
+
+export type {
+  RenderConfig,
+  RenderProgress,
+  RenderResult,
+  FrameSource,
+  FrameSourceConfig,
+  HfMediaElement,
+  EncoderConfig,
+  AudioSource,
+  AudioMixConfig,
+  AudioMixResult,
+  MuxerConfig,
+} from "./types.js";
diff --git a/packages/renderer/src/types.ts b/packages/renderer/src/types.ts
new file mode 100644
index 00000000..fd7ac3d5
--- /dev/null
+++ b/packages/renderer/src/types.ts
@@ -0,0 +1,116 @@
+/**
+ * @hyperframes/renderer — Type definitions
+ *
+ * All interfaces for the client-side rendering pipeline.
+ */
+
+// ── Frame Source ──────────────────────────────────────────────────────────────
+
+export interface HfMediaElement {
+  elementId: string;
+  src: string;
+  startTime: number;
+  endTime: number;
+  mediaOffset?: number;
+  volume?: number;
+  hasAudio?: boolean;
+}
+
+export interface FrameSourceConfig {
+  compositionUrl: string;
+  width: number;
+  height: number;
+  devicePixelRatio?: number;
+}
+
+export interface FrameSource {
+  readonly name: string;
+  init(config: FrameSourceConfig): Promise<void>;
+  capture(time: number): Promise<ImageBitmap>;
+  readonly duration: number;
+  readonly media: HfMediaElement[];
+  dispose(): Promise<void>;
+}
+
+// ── Encoder ──────────────────────────────────────────────────────────────────
+
+export interface EncoderConfig {
+  width: number;
+  height: number;
+  fps: number;
+  codec: "avc1.640028" | "vp09.00.31.08";
+  bitrate?: number;
+  hardwareAcceleration?: "prefer-hardware" | "prefer-software";
+}
+
+// ── Audio ────────────────────────────────────────────────────────────────────
+
+export interface AudioSource {
+  src: string | Blob;
+  startTime: number;
+  endTime: number;
+  mediaOffset?: number;
+  volume?: number;
+}
+
+export interface AudioMixConfig {
+  duration: number;
+  sampleRate?: number;
+  channels?: number;
+  sources: AudioSource[];
+}
+
+export interface AudioMixResult {
+  buffer: AudioBuffer;
+  sampleRate: number;
+  channels: number;
+}
+
+// ── Muxer ────────────────────────────────────────────────────────────────────
+
+export interface MuxerConfig {
+  format: "mp4" | "webm";
+  width: number;
+  height: number;
+  fps: number;
+  videoCodec: string;
+}
+
+// ── Renderer (Public API) ────────────────────────────────────────────────────
+
+export interface RenderConfig {
+  composition: string;
+  format?: "mp4" | "webm";
+  fps?: 24 | 30 | 60;
+  width?: number;
+  height?: number;
+  devicePixelRatio?: number;
+  codec?: "h264" | "vp9";
+  bitrate?: number;
+  concurrency?: number;
+  onProgress?: (progress: RenderProgress) => void;
+  frameSource?: "snapdom" | "draw-element-image";
+}
+
+export interface RenderProgress {
+  stage: "initializing" | "capturing" | "encoding" | "mixing-audio" | "muxing" | "complete";
+  progress: number;
+  currentFrame?: number;
+  totalFrames?: number;
+  estimatedTimeRemaining?: number;
+  captureRate?: number;
+}
+
+export interface RenderResult {
+  blob: Blob;
+  mimeType: string;
+  durationMs: number;
+  perf: {
+    captureMs: number;
+    encodeMs: number;
+    audioMs: number;
+    muxMs: number;
+    totalMs: number;
+    framesPerSecond: number;
+  };
+}
diff --git a/packages/renderer/tsconfig.json b/packages/renderer/tsconfig.json
new file mode 100644
index 00000000..d8913cbd
--- /dev/null
+++ b/packages/renderer/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "lib": ["ES2022", "DOM", "DOM.Iterable", "WebWorker"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts"]
+}

From 408d69b1a0d30d244d632adb60724ded0912654e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 01:51:57 +0200
Subject: [PATCH 04/30] feat(renderer): add frame timing and distribution
 utilities

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/renderer/src/utils/timing.test.ts | 47 ++++++++++++++++++++++
 packages/renderer/src/utils/timing.ts      | 37 +++++++++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 packages/renderer/src/utils/timing.test.ts
 create mode 100644 packages/renderer/src/utils/timing.ts

diff --git a/packages/renderer/src/utils/timing.test.ts b/packages/renderer/src/utils/timing.test.ts
new file mode 100644
index 00000000..3b8539d3
--- /dev/null
+++ b/packages/renderer/src/utils/timing.test.ts
@@ -0,0 +1,47 @@
+import { describe, it, expect } from "vitest";
+import { generateFrameTimes, distributeFrames } from "./timing.js";
+
+describe("generateFrameTimes", () => {
+  it("generates correct frame times for 1s at 30fps", () => {
+    const times = generateFrameTimes(1.0, 30);
+    expect(times).toHaveLength(30);
+    expect(times[0]).toBe(0);
+    expect(times[1]).toBeCloseTo(1 / 30);
+    expect(times[29]).toBeCloseTo(29 / 30);
+  });
+
+  it("generates correct frame times for 0.5s at 60fps", () => {
+    const times = generateFrameTimes(0.5, 60);
+    expect(times).toHaveLength(30);
+    expect(times[0]).toBe(0);
+  });
+
+  it("returns empty array for zero duration", () => {
+    expect(generateFrameTimes(0, 30)).toHaveLength(0);
+  });
+});
+
+describe("distributeFrames", () => {
+  it("distributes 10 frames across 3 workers", () => {
+    const ranges = distributeFrames(10, 3);
+    expect(ranges).toHaveLength(3);
+    expect(ranges[0]).toEqual({ start: 0, end: 3 });
+    expect(ranges[1]).toEqual({ start: 4, end: 6 });
+    expect(ranges[2]).toEqual({ start: 7, end: 9 });
+    const totalFrames = ranges.reduce((s, r) => s + (r.end - r.start + 1), 0);
+    expect(totalFrames).toBe(10);
+  });
+
+  it("handles fewer frames than workers", () => {
+    const ranges = distributeFrames(2, 5);
+    expect(ranges).toHaveLength(2);
+    expect(ranges[0]).toEqual({ start: 0, end: 0 });
+    expect(ranges[1]).toEqual({ start: 1, end: 1 });
+  });
+
+  it("handles single worker", () => {
+    const ranges = distributeFrames(100, 1);
+    expect(ranges).toHaveLength(1);
+    expect(ranges[0]).toEqual({ start: 0, end: 99 });
+  });
+});
diff --git a/packages/renderer/src/utils/timing.ts b/packages/renderer/src/utils/timing.ts
new file mode 100644
index 00000000..ee4e39a9
--- /dev/null
+++ b/packages/renderer/src/utils/timing.ts
@@ -0,0 +1,37 @@
+/**
+ * Frame timing utilities.
+ *
+ * Generates frame timestamps and distributes frame ranges
+ * across parallel capture workers (iframes).
+ */
+
+export interface FrameRange {
+  start: number;
+  end: number;
+}
+
+export function generateFrameTimes(durationSeconds: number, fps: number): number[] {
+  if (durationSeconds <= 0 || fps <= 0) return [];
+  const totalFrames = Math.ceil(durationSeconds * fps);
+  const frameDuration = 1 / fps;
+  const times: number[] = [];
+  for (let i = 0; i < totalFrames; i++) {
+    times.push(i * frameDuration);
+  }
+  return times;
+}
+
+export function distributeFrames(totalFrames: number, workerCount: number): FrameRange[] {
+  const effectiveWorkers = Math.min(workerCount, totalFrames);
+  if (effectiveWorkers <= 0) return [];
+  const ranges: FrameRange[] = [];
+  const baseSize = Math.floor(totalFrames / effectiveWorkers);
+  const remainder = totalFrames % effectiveWorkers;
+  let cursor = 0;
+  for (let i = 0; i < effectiveWorkers; i++) {
+    const size = baseSize + (i < remainder ? 1 : 0);
+    ranges.push({ start: cursor, end: cursor + size - 1 });
+    cursor += size;
+  }
+  return ranges;
+}

From 3112bc8035d8a137b2539ab27a71a961ecc98b24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 01:54:43 +0200
Subject: [PATCH 05/30] feat(renderer): add SnapDOM frame source implementation

Implements SnapdomFrameSource class that loads compositions in hidden iframes,
seeks via window.__hf.seek(), and captures DOM frames using @zumer/snapdom.
Adds jsdom dev dependency for the test environment.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/renderer/package.json                |    2 +
 packages/renderer/pnpm-lock.yaml              | 1392 +++++++++++++++++
 packages/renderer/src/sources/snapdom.test.ts |   34 +
 packages/renderer/src/sources/snapdom.ts      |  120 ++
 4 files changed, 1548 insertions(+)
 create mode 100644 packages/renderer/pnpm-lock.yaml
 create mode 100644 packages/renderer/src/sources/snapdom.test.ts
 create mode 100644 packages/renderer/src/sources/snapdom.ts

diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index cb93df55..0205636a 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -26,6 +26,8 @@
     "mediabunny": "^1.40.0"
   },
   "devDependencies": {
+    "@types/jsdom": "^28.0.1",
+    "jsdom": "^29.0.2",
     "typescript": "^5.0.0",
     "vitest": "^3.2.4"
   },
diff --git a/packages/renderer/pnpm-lock.yaml b/packages/renderer/pnpm-lock.yaml
new file mode 100644
index 00000000..d210a8f7
--- /dev/null
+++ b/packages/renderer/pnpm-lock.yaml
@@ -0,0 +1,1392 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@hyperframes/core':
+        specifier: workspace:^
+        version: link:../core
+      '@zumer/snapdom':
+        specifier: ^2.8.0
+        version: 2.8.0
+      mediabunny:
+        specifier: ^1.40.0
+        version: 1.40.1
+    devDependencies:
+      '@types/jsdom':
+        specifier: ^28.0.1
+        version: 28.0.1
+      jsdom:
+        specifier: ^29.0.2
+        version: 29.0.2
+      typescript:
+        specifier: ^5.0.0
+        version: 5.9.3
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.4(@types/node@25.5.2)(jsdom@29.0.2)
+
+packages:
+
+  '@asamuzakjp/css-color@5.1.9':
+    resolution: {integrity: sha512-zd9c/Wdso6v1U7v6w3i/hbAr4K7NaSHImdpvmLt+Y9ea5BhilnIGNkfhOJ7FEIuPipAnE9tZeDOll05WDT0kgg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/dom-selector@7.0.9':
+    resolution: {integrity: sha512-r3ElRr7y8ucyN2KdICwGsmj19RoN13CLCa/pvGydghWK6ZzeKQ+TcDjVdtEZz2ElpndM5jXw//B9CEee0mWnVg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/nwsapi@2.3.9':
+    resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==}
+
+  '@bramus/specificity@2.4.2':
+    resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
+    hasBin: true
+
+  '@csstools/color-helpers@6.0.2':
+    resolution: {integrity: sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==}
+    engines: {node: '>=20.19.0'}
+
+  '@csstools/css-calc@3.1.1':
+    resolution: {integrity: sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-color-parser@4.0.2':
+    resolution: {integrity: sha512-0GEfbBLmTFf0dJlpsNU7zwxRIH0/BGEMuXLTCvFYxuL1tNhqzTbtnFICyJLTNK4a+RechKP75e7w42ClXSnJQw==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-parser-algorithms@4.0.0':
+    resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-syntax-patches-for-csstree@1.1.2':
+    resolution: {integrity: sha512-5GkLzz4prTIpoyeUiIu3iV6CSG3Plo7xRVOFPKI7FVEJ3mZ0A8SwK0XU3Gl7xAkiQ+mDyam+NNp875/C5y+jSA==}
+    peerDependencies:
+      css-tree: ^3.2.1
+    peerDependenciesMeta:
+      css-tree:
+        optional: true
+
+  '@csstools/css-tokenizer@4.0.0':
+    resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
+    engines: {node: '>=20.19.0'}
+
+  '@esbuild/aix-ppc64@0.27.7':
+    resolution: {integrity: sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.27.7':
+    resolution: {integrity: sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.7':
+    resolution: {integrity: sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.7':
+    resolution: {integrity: sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.27.7':
+    resolution: {integrity: sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.7':
+    resolution: {integrity: sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.27.7':
+    resolution: {integrity: sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.7':
+    resolution: {integrity: sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.27.7':
+    resolution: {integrity: sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.7':
+    resolution: {integrity: sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.7':
+    resolution: {integrity: sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.7':
+    resolution: {integrity: sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.7':
+    resolution: {integrity: sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.7':
+    resolution: {integrity: sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.7':
+    resolution: {integrity: sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.7':
+    resolution: {integrity: sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.7':
+    resolution: {integrity: sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.27.7':
+    resolution: {integrity: sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.7':
+    resolution: {integrity: sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.27.7':
+    resolution: {integrity: sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.7':
+    resolution: {integrity: sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.27.7':
+    resolution: {integrity: sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.27.7':
+    resolution: {integrity: sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.27.7':
+    resolution: {integrity: sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.7':
+    resolution: {integrity: sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.7':
+    resolution: {integrity: sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@exodus/bytes@1.15.0':
+    resolution: {integrity: sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      '@noble/hashes': ^1.8.0 || ^2.0.0
+    peerDependenciesMeta:
+      '@noble/hashes':
+        optional: true
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@rollup/rollup-android-arm-eabi@4.60.1':
+    resolution: {integrity: sha512-d6FinEBLdIiK+1uACUttJKfgZREXrF0Qc2SmLII7W2AD8FfiZ9Wjd+rD/iRuf5s5dWrr1GgwXCvPqOuDquOowA==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.60.1':
+    resolution: {integrity: sha512-YjG/EwIDvvYI1YvYbHvDz/BYHtkY4ygUIXHnTdLhG+hKIQFBiosfWiACWortsKPKU/+dUwQQCKQM3qrDe8c9BA==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.60.1':
+    resolution: {integrity: sha512-mjCpF7GmkRtSJwon+Rq1N8+pI+8l7w5g9Z3vWj4T7abguC4Czwi3Yu/pFaLvA3TTeMVjnu3ctigusqWUfjZzvw==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.60.1':
+    resolution: {integrity: sha512-haZ7hJ1JT4e9hqkoT9R/19XW2QKqjfJVv+i5AGg57S+nLk9lQnJ1F/eZloRO3o9Scy9CM3wQ9l+dkXtcBgN5Ew==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.60.1':
+    resolution: {integrity: sha512-czw90wpQq3ZsAVBlinZjAYTKduOjTywlG7fEeWKUA7oCmpA8xdTkxZZlwNJKWqILlq0wehoZcJYfBvOyhPTQ6w==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.60.1':
+    resolution: {integrity: sha512-KVB2rqsxTHuBtfOeySEyzEOB7ltlB/ux38iu2rBQzkjbwRVlkhAGIEDiiYnO2kFOkJp+Z7pUXKyrRRFuFUKt+g==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.60.1':
+    resolution: {integrity: sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.60.1':
+    resolution: {integrity: sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-gnu@4.60.1':
+    resolution: {integrity: sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-musl@4.60.1':
+    resolution: {integrity: sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-gnu@4.60.1':
+    resolution: {integrity: sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-musl@4.60.1':
+    resolution: {integrity: sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.60.1':
+    resolution: {integrity: sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-musl@4.60.1':
+    resolution: {integrity: sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.60.1':
+    resolution: {integrity: sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-musl@4.60.1':
+    resolution: {integrity: sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.60.1':
+    resolution: {integrity: sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.60.1':
+    resolution: {integrity: sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-musl@4.60.1':
+    resolution: {integrity: sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-openbsd-x64@4.60.1':
+    resolution: {integrity: sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.60.1':
+    resolution: {integrity: sha512-4Cv23ZrONRbNtbZa37mLSueXUCtN7MXccChtKpUnQNgF010rjrjfHx3QxkS2PI7LqGT5xXyYs1a7LbzAwT0iCA==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.60.1':
+    resolution: {integrity: sha512-i1okWYkA4FJICtr7KpYzFpRTHgy5jdDbZiWfvny21iIKky5YExiDXP+zbXzm3dUcFpkEeYNHgQ5fuG236JPq0g==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.60.1':
+    resolution: {integrity: sha512-u09m3CuwLzShA0EYKMNiFgcjjzwqtUMLmuCJLeZWjjOYA3IT2Di09KaxGBTP9xVztWyIWjVdsB2E9goMjZvTQg==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.60.1':
+    resolution: {integrity: sha512-k+600V9Zl1CM7eZxJgMyTUzmrmhB/0XZnF4pRypKAlAgxmedUA+1v9R+XOFv56W4SlHEzfeMtzujLJD22Uz5zg==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.60.1':
+    resolution: {integrity: sha512-lWMnixq/QzxyhTV6NjQJ4SFo1J6PvOX8vUx5Wb4bBPsEb+8xZ89Bz6kOXpfXj9ak9AHTQVQzlgzBEc1SyM27xQ==}
+    cpu: [x64]
+    os: [win32]
+
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
+  '@types/dom-mediacapture-transform@0.1.11':
+    resolution: {integrity: sha512-Y2p+nGf1bF2XMttBnsVPHUWzRRZzqUoJAKmiP10b5umnO6DDrWI0BrGDJy1pOHoOULVmGSfFNkQrAlC5dcj6nQ==}
+
+  '@types/dom-webcodecs@0.1.13':
+    resolution: {integrity: sha512-O5hkiFIcjjszPIYyUSyvScyvrBoV3NOEEZx/pMlsu44TKzWNkLVBBxnxJz42in5n3QIolYOcBYFCPZZ0h8SkwQ==}
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/jsdom@28.0.1':
+    resolution: {integrity: sha512-GJq2QE4TAZ5ajSoCasn5DOFm8u1mI3tIFvM5tIq3W5U/RTB6gsHwc6Yhpl91X9VSDOUVblgXmG+2+sSvFQrdlw==}
+
+  '@types/node@25.5.2':
+    resolution: {integrity: sha512-tO4ZIRKNC+MDWV4qKVZe3Ql/woTnmHDr5JD8UI5hn2pwBrHEwOEMZK7WlNb5RKB6EoJ02gwmQS9OrjuFnZYdpg==}
+
+  '@types/tough-cookie@4.0.5':
+    resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
+
+  '@vitest/expect@3.2.4':
+    resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
+
+  '@vitest/mocker@3.2.4':
+    resolution: {integrity: sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0-0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@3.2.4':
+    resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
+
+  '@vitest/runner@3.2.4':
+    resolution: {integrity: sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==}
+
+  '@vitest/snapshot@3.2.4':
+    resolution: {integrity: sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==}
+
+  '@vitest/spy@3.2.4':
+    resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
+
+  '@vitest/utils@3.2.4':
+    resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
+
+  '@zumer/snapdom@2.8.0':
+    resolution: {integrity: sha512-NhztgFDNfOkFt8Ox9PIJ1IwggyMui5UDazysOgZD7FSGL0G7H8U+J3ft0iecxAS8daj5aC62i3blaTk7s2GcpA==}
+
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
+  bidi-js@1.0.3:
+    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
+
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+
+  chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
+    engines: {node: '>=18'}
+
+  check-error@2.1.3:
+    resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
+    engines: {node: '>= 16'}
+
+  css-tree@3.2.1:
+    resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
+  data-urls@7.0.0:
+    resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
+  esbuild@0.27.7:
+    resolution: {integrity: sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  expect-type@1.3.0:
+    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
+    engines: {node: '>=12.0.0'}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  html-encoding-sniffer@6.0.0:
+    resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
+  jsdom@29.0.2:
+    resolution: {integrity: sha512-9VnGEBosc/ZpwyOsJBCQ/3I5p7Q5ngOY14a9bf5btenAORmZfDse1ZEheMiWcJ3h81+Fv7HmJFdS0szo/waF2w==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24.0.0}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
+  loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
+
+  lru-cache@11.3.3:
+    resolution: {integrity: sha512-JvNw9Y81y33E+BEYPr0U7omo+U9AySnsMsEiXgwT6yqd31VQWTLNQqmT4ou5eqPFUrTfIDFta2wKhB1hyohtAQ==}
+    engines: {node: 20 || >=22}
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  mdn-data@2.27.1:
+    resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
+
+  mediabunny@1.40.1:
+    resolution: {integrity: sha512-HU/stGzAkdWaJIly6ypbUVgAUvT9kt39DIg0IaErR7/1fwtTmgUYs4i8uEPYcgcjPjbB9gtBmUXOLnXi6J2LDw==}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
+  parse5@8.0.0:
+    resolution: {integrity: sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
+    engines: {node: '>=12'}
+
+  postcss@8.5.9:
+    resolution: {integrity: sha512-7a70Nsot+EMX9fFU3064K/kdHWZqGVY+BADLyXc8Dfv+mTLLVl6JzJpPaCZ2kQL9gIJvKXSLMHhqdRRjwQeFtw==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  rollup@4.60.1:
+    resolution: {integrity: sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  std-env@3.10.0:
+    resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
+
+  strip-literal@3.1.0:
+    resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
+
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+
+  tinyglobby@0.2.16:
+    resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
+    engines: {node: '>=12.0.0'}
+
+  tinypool@1.1.1:
+    resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
+  tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
+    engines: {node: '>=14.0.0'}
+
+  tinyspy@4.0.4:
+    resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
+    engines: {node: '>=14.0.0'}
+
+  tldts-core@7.0.28:
+    resolution: {integrity: sha512-7W5Efjhsc3chVdFhqtaU0KtK32J37Zcr9RKtID54nG+tIpcY79CQK/veYPODxtD/LJ4Lue66jvrQzIX2Z2/pUQ==}
+
+  tldts@7.0.28:
+    resolution: {integrity: sha512-+Zg3vWhRUv8B1maGSTFdev9mjoo8Etn2Ayfs4cnjlD3CsGkxXX4QyW3j2WJ0wdjYcYmy7Lx2RDsZMhgCWafKIw==}
+    hasBin: true
+
+  tough-cookie@6.0.1:
+    resolution: {integrity: sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==}
+    engines: {node: '>=16'}
+
+  tr46@6.0.0:
+    resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
+    engines: {node: '>=20'}
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  undici-types@7.18.2:
+    resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
+
+  undici-types@7.24.7:
+    resolution: {integrity: sha512-XA+gOBkzYD3C74sZowtCLTpgtaCdqZhqCvR6y9LXvrKTt/IVU6bz49T4D+BPi475scshCCkb0IklJRw6T1ZlgQ==}
+
+  undici@7.24.7:
+    resolution: {integrity: sha512-H/nlJ/h0ggGC+uRL3ovD+G0i4bqhvsDOpbDv7At5eFLlj2b41L8QliGbnl2H7SnDiYhENphh1tQFJZf+MyfLsQ==}
+    engines: {node: '>=20.18.1'}
+
+  vite-node@3.2.4:
+    resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+
+  vite@7.3.2:
+    resolution: {integrity: sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      lightningcss: ^1.21.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vitest@3.2.4:
+    resolution: {integrity: sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/debug': ^4.1.12
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      '@vitest/browser': 3.2.4
+      '@vitest/ui': 3.2.4
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/debug':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
+  webidl-conversions@8.0.1:
+    resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
+    engines: {node: '>=20'}
+
+  whatwg-mimetype@5.0.0:
+    resolution: {integrity: sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==}
+    engines: {node: '>=20'}
+
+  whatwg-url@16.0.1:
+    resolution: {integrity: sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
+snapshots:
+
+  '@asamuzakjp/css-color@5.1.9':
+    dependencies:
+      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@asamuzakjp/dom-selector@7.0.9':
+    dependencies:
+      '@asamuzakjp/nwsapi': 2.3.9
+      bidi-js: 1.0.3
+      css-tree: 3.2.1
+      is-potential-custom-element-name: 1.0.1
+
+  '@asamuzakjp/nwsapi@2.3.9': {}
+
+  '@bramus/specificity@2.4.2':
+    dependencies:
+      css-tree: 3.2.1
+
+  '@csstools/color-helpers@6.0.2': {}
+
+  '@csstools/css-calc@3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-color-parser@4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/color-helpers': 6.0.2
+      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-syntax-patches-for-csstree@1.1.2(css-tree@3.2.1)':
+    optionalDependencies:
+      css-tree: 3.2.1
+
+  '@csstools/css-tokenizer@4.0.0': {}
+
+  '@esbuild/aix-ppc64@0.27.7':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/android-arm@0.27.7':
+    optional: true
+
+  '@esbuild/android-x64@0.27.7':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.7':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.7':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.7':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.7':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.7':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.7':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.7':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.7':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.7':
+    optional: true
+
+  '@esbuild/win32-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/win32-ia32@0.27.7':
+    optional: true
+
+  '@esbuild/win32-x64@0.27.7':
+    optional: true
+
+  '@exodus/bytes@1.15.0': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@rollup/rollup-android-arm-eabi@4.60.1':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.60.1':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.60.1':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.60.1':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.60.1':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.60.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.60.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.60.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.60.1':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.60.1':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.60.1':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.60.1':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.60.1':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.60.1':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.60.1':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.60.1':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.60.1':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.60.1':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.60.1':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.60.1':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.60.1':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.60.1':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.60.1':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.60.1':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.60.1':
+    optional: true
+
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
+  '@types/deep-eql@4.0.2': {}
+
+  '@types/dom-mediacapture-transform@0.1.11':
+    dependencies:
+      '@types/dom-webcodecs': 0.1.13
+
+  '@types/dom-webcodecs@0.1.13': {}
+
+  '@types/estree@1.0.8': {}
+
+  '@types/jsdom@28.0.1':
+    dependencies:
+      '@types/node': 25.5.2
+      '@types/tough-cookie': 4.0.5
+      parse5: 7.3.0
+      undici-types: 7.24.7
+
+  '@types/node@25.5.2':
+    dependencies:
+      undici-types: 7.18.2
+
+  '@types/tough-cookie@4.0.5': {}
+
+  '@vitest/expect@3.2.4':
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      tinyrainbow: 2.0.0
+
+  '@vitest/mocker@3.2.4(vite@7.3.2(@types/node@25.5.2))':
+    dependencies:
+      '@vitest/spy': 3.2.4
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 7.3.2(@types/node@25.5.2)
+
+  '@vitest/pretty-format@3.2.4':
+    dependencies:
+      tinyrainbow: 2.0.0
+
+  '@vitest/runner@3.2.4':
+    dependencies:
+      '@vitest/utils': 3.2.4
+      pathe: 2.0.3
+      strip-literal: 3.1.0
+
+  '@vitest/snapshot@3.2.4':
+    dependencies:
+      '@vitest/pretty-format': 3.2.4
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@3.2.4':
+    dependencies:
+      tinyspy: 4.0.4
+
+  '@vitest/utils@3.2.4':
+    dependencies:
+      '@vitest/pretty-format': 3.2.4
+      loupe: 3.2.1
+      tinyrainbow: 2.0.0
+
+  '@zumer/snapdom@2.8.0': {}
+
+  assertion-error@2.0.1: {}
+
+  bidi-js@1.0.3:
+    dependencies:
+      require-from-string: 2.0.2
+
+  cac@6.7.14: {}
+
+  chai@5.3.3:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.3
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
+
+  check-error@2.1.3: {}
+
+  css-tree@3.2.1:
+    dependencies:
+      mdn-data: 2.27.1
+      source-map-js: 1.2.1
+
+  data-urls@7.0.0:
+    dependencies:
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  decimal.js@10.6.0: {}
+
+  deep-eql@5.0.2: {}
+
+  entities@6.0.1: {}
+
+  es-module-lexer@1.7.0: {}
+
+  esbuild@0.27.7:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.7
+      '@esbuild/android-arm': 0.27.7
+      '@esbuild/android-arm64': 0.27.7
+      '@esbuild/android-x64': 0.27.7
+      '@esbuild/darwin-arm64': 0.27.7
+      '@esbuild/darwin-x64': 0.27.7
+      '@esbuild/freebsd-arm64': 0.27.7
+      '@esbuild/freebsd-x64': 0.27.7
+      '@esbuild/linux-arm': 0.27.7
+      '@esbuild/linux-arm64': 0.27.7
+      '@esbuild/linux-ia32': 0.27.7
+      '@esbuild/linux-loong64': 0.27.7
+      '@esbuild/linux-mips64el': 0.27.7
+      '@esbuild/linux-ppc64': 0.27.7
+      '@esbuild/linux-riscv64': 0.27.7
+      '@esbuild/linux-s390x': 0.27.7
+      '@esbuild/linux-x64': 0.27.7
+      '@esbuild/netbsd-arm64': 0.27.7
+      '@esbuild/netbsd-x64': 0.27.7
+      '@esbuild/openbsd-arm64': 0.27.7
+      '@esbuild/openbsd-x64': 0.27.7
+      '@esbuild/openharmony-arm64': 0.27.7
+      '@esbuild/sunos-x64': 0.27.7
+      '@esbuild/win32-arm64': 0.27.7
+      '@esbuild/win32-ia32': 0.27.7
+      '@esbuild/win32-x64': 0.27.7
+
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
+  expect-type@1.3.0: {}
+
+  fdir@6.5.0(picomatch@4.0.4):
+    optionalDependencies:
+      picomatch: 4.0.4
+
+  fsevents@2.3.3:
+    optional: true
+
+  html-encoding-sniffer@6.0.0:
+    dependencies:
+      '@exodus/bytes': 1.15.0
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
+  is-potential-custom-element-name@1.0.1: {}
+
+  js-tokens@9.0.1: {}
+
+  jsdom@29.0.2:
+    dependencies:
+      '@asamuzakjp/css-color': 5.1.9
+      '@asamuzakjp/dom-selector': 7.0.9
+      '@bramus/specificity': 2.4.2
+      '@csstools/css-syntax-patches-for-csstree': 1.1.2(css-tree@3.2.1)
+      '@exodus/bytes': 1.15.0
+      css-tree: 3.2.1
+      data-urls: 7.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 6.0.0
+      is-potential-custom-element-name: 1.0.1
+      lru-cache: 11.3.3
+      parse5: 8.0.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 6.0.1
+      undici: 7.24.7
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 8.0.1
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
+  loupe@3.2.1: {}
+
+  lru-cache@11.3.3: {}
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  mdn-data@2.27.1: {}
+
+  mediabunny@1.40.1:
+    dependencies:
+      '@types/dom-mediacapture-transform': 0.1.11
+      '@types/dom-webcodecs': 0.1.13
+
+  ms@2.1.3: {}
+
+  nanoid@3.3.11: {}
+
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
+  parse5@8.0.0:
+    dependencies:
+      entities: 6.0.1
+
+  pathe@2.0.3: {}
+
+  pathval@2.0.1: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@4.0.4: {}
+
+  postcss@8.5.9:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  punycode@2.3.1: {}
+
+  require-from-string@2.0.2: {}
+
+  rollup@4.60.1:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.60.1
+      '@rollup/rollup-android-arm64': 4.60.1
+      '@rollup/rollup-darwin-arm64': 4.60.1
+      '@rollup/rollup-darwin-x64': 4.60.1
+      '@rollup/rollup-freebsd-arm64': 4.60.1
+      '@rollup/rollup-freebsd-x64': 4.60.1
+      '@rollup/rollup-linux-arm-gnueabihf': 4.60.1
+      '@rollup/rollup-linux-arm-musleabihf': 4.60.1
+      '@rollup/rollup-linux-arm64-gnu': 4.60.1
+      '@rollup/rollup-linux-arm64-musl': 4.60.1
+      '@rollup/rollup-linux-loong64-gnu': 4.60.1
+      '@rollup/rollup-linux-loong64-musl': 4.60.1
+      '@rollup/rollup-linux-ppc64-gnu': 4.60.1
+      '@rollup/rollup-linux-ppc64-musl': 4.60.1
+      '@rollup/rollup-linux-riscv64-gnu': 4.60.1
+      '@rollup/rollup-linux-riscv64-musl': 4.60.1
+      '@rollup/rollup-linux-s390x-gnu': 4.60.1
+      '@rollup/rollup-linux-x64-gnu': 4.60.1
+      '@rollup/rollup-linux-x64-musl': 4.60.1
+      '@rollup/rollup-openbsd-x64': 4.60.1
+      '@rollup/rollup-openharmony-arm64': 4.60.1
+      '@rollup/rollup-win32-arm64-msvc': 4.60.1
+      '@rollup/rollup-win32-ia32-msvc': 4.60.1
+      '@rollup/rollup-win32-x64-gnu': 4.60.1
+      '@rollup/rollup-win32-x64-msvc': 4.60.1
+      fsevents: 2.3.3
+
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
+  siginfo@2.0.0: {}
+
+  source-map-js@1.2.1: {}
+
+  stackback@0.0.2: {}
+
+  std-env@3.10.0: {}
+
+  strip-literal@3.1.0:
+    dependencies:
+      js-tokens: 9.0.1
+
+  symbol-tree@3.2.4: {}
+
+  tinybench@2.9.0: {}
+
+  tinyexec@0.3.2: {}
+
+  tinyglobby@0.2.16:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+
+  tinypool@1.1.1: {}
+
+  tinyrainbow@2.0.0: {}
+
+  tinyspy@4.0.4: {}
+
+  tldts-core@7.0.28: {}
+
+  tldts@7.0.28:
+    dependencies:
+      tldts-core: 7.0.28
+
+  tough-cookie@6.0.1:
+    dependencies:
+      tldts: 7.0.28
+
+  tr46@6.0.0:
+    dependencies:
+      punycode: 2.3.1
+
+  typescript@5.9.3: {}
+
+  undici-types@7.18.2: {}
+
+  undici-types@7.24.7: {}
+
+  undici@7.24.7: {}
+
+  vite-node@3.2.4(@types/node@25.5.2):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 7.3.2(@types/node@25.5.2)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  vite@7.3.2(@types/node@25.5.2):
+    dependencies:
+      esbuild: 0.27.7
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+      postcss: 8.5.9
+      rollup: 4.60.1
+      tinyglobby: 0.2.16
+    optionalDependencies:
+      '@types/node': 25.5.2
+      fsevents: 2.3.3
+
+  vitest@3.2.4(@types/node@25.5.2)(jsdom@29.0.2):
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/expect': 3.2.4
+      '@vitest/mocker': 3.2.4(vite@7.3.2(@types/node@25.5.2))
+      '@vitest/pretty-format': 3.2.4
+      '@vitest/runner': 3.2.4
+      '@vitest/snapshot': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      debug: 4.4.3
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      picomatch: 4.0.4
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.16
+      tinypool: 1.1.1
+      tinyrainbow: 2.0.0
+      vite: 7.3.2(@types/node@25.5.2)
+      vite-node: 3.2.4(@types/node@25.5.2)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 25.5.2
+      jsdom: 29.0.2
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+
+  webidl-conversions@8.0.1: {}
+
+  whatwg-mimetype@5.0.0: {}
+
+  whatwg-url@16.0.1:
+    dependencies:
+      '@exodus/bytes': 1.15.0
+      tr46: 6.0.0
+      webidl-conversions: 8.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
+  xml-name-validator@5.0.0: {}
+
+  xmlchars@2.2.0: {}
diff --git a/packages/renderer/src/sources/snapdom.test.ts b/packages/renderer/src/sources/snapdom.test.ts
new file mode 100644
index 00000000..8ef28961
--- /dev/null
+++ b/packages/renderer/src/sources/snapdom.test.ts
@@ -0,0 +1,34 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+import { SnapdomFrameSource } from "./snapdom.js";
+
+// Mock @zumer/snapdom since jsdom can't run real SVG foreignObject rendering
+vi.mock("@zumer/snapdom", () => ({
+  snapdom: {
+    toCanvas: vi.fn().mockResolvedValue(
+      (() => {
+        const c = document.createElement("canvas");
+        c.width = 1920;
+        c.height = 1080;
+        return c;
+      })(),
+    ),
+  },
+}));
+
+describe("SnapdomFrameSource", () => {
+  it("has name 'snapdom'", () => {
+    const source = new SnapdomFrameSource();
+    expect(source.name).toBe("snapdom");
+  });
+
+  it("duration is 0 before init", () => {
+    const source = new SnapdomFrameSource();
+    expect(source.duration).toBe(0);
+  });
+
+  it("media is empty before init", () => {
+    const source = new SnapdomFrameSource();
+    expect(source.media).toEqual([]);
+  });
+});
diff --git a/packages/renderer/src/sources/snapdom.ts b/packages/renderer/src/sources/snapdom.ts
new file mode 100644
index 00000000..e88792cf
--- /dev/null
+++ b/packages/renderer/src/sources/snapdom.ts
@@ -0,0 +1,120 @@
+/**
+ * SnapDOM Frame Source
+ *
+ * Captures DOM snapshots from an iframe-loaded composition
+ * using @zumer/snapdom, then converts to ImageBitmap for
+ * transfer to the encoding worker.
+ */
+
+import { snapdom } from "@zumer/snapdom";
+import type { FrameSource, FrameSourceConfig, HfMediaElement } from "../types.js";
+
+interface HfProtocol {
+  duration: number;
+  seek(time: number): void;
+  media?: HfMediaElement[];
+}
+
+export class SnapdomFrameSource implements FrameSource {
+  readonly name = "snapdom";
+
+  private iframe: HTMLIFrameElement | null = null;
+  private config: FrameSourceConfig | null = null;
+  private hf: HfProtocol | null = null;
+  private _duration = 0;
+  private _media: HfMediaElement[] = [];
+
+  get duration(): number {
+    return this._duration;
+  }
+
+  get media(): HfMediaElement[] {
+    return this._media;
+  }
+
+  async init(config: FrameSourceConfig): Promise<void> {
+    this.config = config;
+
+    const iframe = document.createElement("iframe");
+    iframe.style.position = "fixed";
+    iframe.style.top = "-9999px";
+    iframe.style.left = "-9999px";
+    iframe.style.width = `${config.width}px`;
+    iframe.style.height = `${config.height}px`;
+    iframe.style.border = "none";
+    iframe.style.opacity = "0";
+    iframe.style.pointerEvents = "none";
+    document.body.appendChild(iframe);
+    this.iframe = iframe;
+
+    await new Promise<void>((resolve, reject) => {
+      const timeout = setTimeout(() => reject(new Error("Composition load timeout (10s)")), 10_000);
+      iframe.onload = () => {
+        clearTimeout(timeout);
+        resolve();
+      };
+      iframe.onerror = () => {
+        clearTimeout(timeout);
+        reject(new Error(`Failed to load composition: ${config.compositionUrl}`));
+      };
+      iframe.src = config.compositionUrl;
+    });
+
+    // Wait for window.__hf to become available (runtime init is async)
+    const hf = await this.waitForHfProtocol(iframe);
+    this.hf = hf;
+    this._duration = hf.duration;
+    this._media = hf.media ?? [];
+  }
+
+  async capture(time: number): Promise<ImageBitmap> {
+    if (!this.iframe || !this.hf || !this.config) {
+      throw new Error("SnapdomFrameSource not initialized — call init() first");
+    }
+
+    this.hf.seek(time);
+
+    const doc = this.iframe.contentDocument;
+    if (!doc?.documentElement) {
+      throw new Error("iframe has no document");
+    }
+
+    const canvas = await snapdom.toCanvas(doc.documentElement, {
+      width: this.config.width,
+      height: this.config.height,
+      scale: this.config.devicePixelRatio ?? 1,
+    });
+
+    return createImageBitmap(canvas);
+  }
+
+  async dispose(): Promise<void> {
+    if (this.iframe) {
+      this.iframe.remove();
+      this.iframe = null;
+    }
+    this.hf = null;
+    this.config = null;
+    this._duration = 0;
+    this._media = [];
+  }
+
+  private waitForHfProtocol(iframe: HTMLIFrameElement, timeoutMs = 10_000): Promise<HfProtocol> {
+    return new Promise((resolve, reject) => {
+      const start = Date.now();
+      const poll = () => {
+        const win = iframe.contentWindow as (Window & { __hf?: HfProtocol }) | null;
+        if (win?.__hf && typeof win.__hf.seek === "function" && win.__hf.duration > 0) {
+          resolve(win.__hf);
+          return;
+        }
+        if (Date.now() - start > timeoutMs) {
+          reject(new Error("Timed out waiting for window.__hf protocol"));
+          return;
+        }
+        requestAnimationFrame(poll);
+      };
+      poll();
+    });
+  }
+}

From 4b1e46294e21d8a0b3326e575e56b1718ffbafee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 01:56:19 +0200
Subject: [PATCH 06/30] feat(renderer): add WebCodecs encoding worker and
 main-thread wrapper

Implements the encoding pipeline for @hyperframes/renderer: worker message
protocol types, Web Worker entry point (VideoEncoder + MediaBunny muxer),
and the main-thread Encoder class that manages the worker lifecycle.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../renderer/src/encoding/encoder.test.ts     |  40 +++++
 packages/renderer/src/encoding/encoder.ts     | 112 ++++++++++++
 packages/renderer/src/encoding/types.ts       |  40 +++++
 packages/renderer/src/encoding/worker.ts      | 165 ++++++++++++++++++
 4 files changed, 357 insertions(+)
 create mode 100644 packages/renderer/src/encoding/encoder.test.ts
 create mode 100644 packages/renderer/src/encoding/encoder.ts
 create mode 100644 packages/renderer/src/encoding/types.ts
 create mode 100644 packages/renderer/src/encoding/worker.ts

diff --git a/packages/renderer/src/encoding/encoder.test.ts b/packages/renderer/src/encoding/encoder.test.ts
new file mode 100644
index 00000000..ae25c3d9
--- /dev/null
+++ b/packages/renderer/src/encoding/encoder.test.ts
@@ -0,0 +1,40 @@
+import { describe, it, expect } from "vitest";
+import { Encoder } from "./encoder.js";
+
+describe("Encoder", () => {
+  it("can be constructed with options", () => {
+    const encoder = new Encoder({
+      width: 1920,
+      height: 1080,
+      fps: 30,
+      codec: "avc1.640028",
+      bitrate: 4_000_000,
+      format: "mp4",
+    });
+    expect(encoder).toBeDefined();
+  });
+
+  it("throws if sendFrame called before init", () => {
+    const encoder = new Encoder({
+      width: 1920,
+      height: 1080,
+      fps: 30,
+      codec: "avc1.640028",
+      bitrate: 4_000_000,
+      format: "mp4",
+    });
+    expect(() => encoder.sendFrame({} as ImageBitmap, 0, 0)).toThrow("not initialized");
+  });
+
+  it("throws if finalize called before init", async () => {
+    const encoder = new Encoder({
+      width: 1920,
+      height: 1080,
+      fps: 30,
+      codec: "avc1.640028",
+      bitrate: 4_000_000,
+      format: "mp4",
+    });
+    await expect(encoder.finalize()).rejects.toThrow("not initialized");
+  });
+});
diff --git a/packages/renderer/src/encoding/encoder.ts b/packages/renderer/src/encoding/encoder.ts
new file mode 100644
index 00000000..20e16140
--- /dev/null
+++ b/packages/renderer/src/encoding/encoder.ts
@@ -0,0 +1,112 @@
+/**
+ * Encoder
+ *
+ * Main-thread wrapper that manages the encoding Web Worker.
+ * Sends ImageBitmap frames to the worker and receives the final MP4 blob.
+ */
+
+import type { WorkerInMessage, WorkerOutMessage } from "./types.js";
+
+export interface EncoderOptions {
+  width: number;
+  height: number;
+  fps: number;
+  codec: string;
+  bitrate: number;
+  format: "mp4" | "webm";
+  onFrameEncoded?: (index: number) => void;
+}
+
+export class Encoder {
+  private worker: Worker | null = null;
+  private options: EncoderOptions;
+  private resolveReady: (() => void) | null = null;
+  private resolveDone: ((blob: Blob) => void) | null = null;
+  private rejectPending: ((err: Error) => void) | null = null;
+
+  constructor(options: EncoderOptions) {
+    this.options = options;
+  }
+
+  async init(): Promise<void> {
+    this.worker = new Worker(new URL("./worker.js", import.meta.url), {
+      type: "module",
+    });
+
+    this.worker.onmessage = (e: MessageEvent<WorkerOutMessage>) => {
+      this.handleMessage(e.data);
+    };
+
+    this.worker.onerror = (e) => {
+      this.rejectPending?.(new Error(`Worker error: ${e.message}`));
+    };
+
+    await new Promise<void>((resolve, reject) => {
+      this.resolveReady = resolve;
+      this.rejectPending = reject;
+
+      const msg: WorkerInMessage = {
+        type: "init",
+        config: {
+          width: this.options.width,
+          height: this.options.height,
+          fps: this.options.fps,
+          codec: this.options.codec,
+          bitrate: this.options.bitrate,
+          format: this.options.format,
+        },
+      };
+      this.worker!.postMessage(msg);
+    });
+  }
+
+  sendFrame(bitmap: ImageBitmap, index: number, timestamp: number): void {
+    if (!this.worker) throw new Error("Encoder not initialized");
+    const msg: WorkerInMessage = { type: "frame", bitmap, index, timestamp };
+    this.worker.postMessage(msg, [bitmap]);
+  }
+
+  setAudio(channelData: Float32Array[], sampleRate: number): void {
+    if (!this.worker) throw new Error("Encoder not initialized");
+    const msg: WorkerInMessage = { type: "set-audio", channelData, sampleRate };
+    this.worker.postMessage(
+      msg,
+      channelData.map((c) => c.buffer),
+    );
+  }
+
+  async finalize(): Promise<Blob> {
+    if (!this.worker) throw new Error("Encoder not initialized");
+    return new Promise<Blob>((resolve, reject) => {
+      this.resolveDone = resolve;
+      this.rejectPending = reject;
+      const msg: WorkerInMessage = { type: "finalize" };
+      this.worker!.postMessage(msg);
+    });
+  }
+
+  dispose(): void {
+    this.worker?.terminate();
+    this.worker = null;
+  }
+
+  private handleMessage(msg: WorkerOutMessage): void {
+    switch (msg.type) {
+      case "ready":
+        this.resolveReady?.();
+        this.resolveReady = null;
+        break;
+      case "frame-encoded":
+        this.options.onFrameEncoded?.(msg.index);
+        break;
+      case "done":
+        this.resolveDone?.(msg.blob);
+        this.resolveDone = null;
+        break;
+      case "error":
+        this.rejectPending?.(new Error(msg.message));
+        this.rejectPending = null;
+        break;
+    }
+  }
+}
diff --git a/packages/renderer/src/encoding/types.ts b/packages/renderer/src/encoding/types.ts
new file mode 100644
index 00000000..a154eb25
--- /dev/null
+++ b/packages/renderer/src/encoding/types.ts
@@ -0,0 +1,40 @@
+/**
+ * Worker message protocol types.
+ *
+ * Main thread → Worker: WorkerInMessage
+ * Worker → Main thread: WorkerOutMessage
+ */
+
+export type WorkerInMessage =
+  | {
+      type: "init";
+      config: {
+        width: number;
+        height: number;
+        fps: number;
+        codec: string;
+        bitrate: number;
+        format: "mp4" | "webm";
+      };
+    }
+  | {
+      type: "frame";
+      bitmap: ImageBitmap;
+      index: number;
+      timestamp: number;
+    }
+  | {
+      type: "set-audio";
+      channelData: Float32Array[];
+      sampleRate: number;
+    }
+  | {
+      type: "finalize";
+    };
+
+export type WorkerOutMessage =
+  | { type: "ready" }
+  | { type: "frame-encoded"; index: number }
+  | { type: "done"; blob: Blob }
+  | { type: "error"; message: string }
+  | { type: "progress"; framesEncoded: number };
diff --git a/packages/renderer/src/encoding/worker.ts b/packages/renderer/src/encoding/worker.ts
new file mode 100644
index 00000000..94e882eb
--- /dev/null
+++ b/packages/renderer/src/encoding/worker.ts
@@ -0,0 +1,165 @@
+/**
+ * Encoding Worker
+ *
+ * Receives ImageBitmap frames from the main thread, encodes via
+ * WebCodecs VideoEncoder, and muxes into MP4/WebM via MediaBunny.
+ */
+
+import {
+  Output,
+  Mp4OutputFormat,
+  WebMOutputFormat,
+  BufferTarget,
+  EncodedVideoPacketSource,
+  EncodedPacket,
+  AudioSampleSource,
+  AudioSample,
+} from "mediabunny";
+import type { WorkerInMessage, WorkerOutMessage } from "./types.js";
+
+let output: Output | null = null;
+let videoSource: EncodedVideoPacketSource | null = null;
+let audioSource: AudioSampleSource | null = null;
+let encoder: VideoEncoder | null = null;
+let target: BufferTarget | null = null;
+let isFirstPacket = true;
+let framesEncoded = 0;
+
+function post(msg: WorkerOutMessage, transfer?: Transferable[]): void {
+  self.postMessage(msg, { transfer: transfer ?? [] });
+}
+
+async function handleInit(config: WorkerInMessage & { type: "init" }): Promise<void> {
+  const { width, height, fps, codec, bitrate, format } = config.config;
+
+  target = new BufferTarget();
+  const formatObj = format === "webm" ? new WebMOutputFormat() : new Mp4OutputFormat();
+  output = new Output({ format: formatObj, target });
+
+  // Map WebCodecs codec string to MediaBunny VideoCodec identifier
+  const mbVideoCodec = codec.startsWith("avc") ? "avc" : "vp9";
+  videoSource = new EncodedVideoPacketSource(mbVideoCodec);
+  output.addVideoTrack(videoSource, { frameRate: fps });
+
+  audioSource = new AudioSampleSource({ codec: "aac", bitrate: 128_000 });
+  output.addAudioTrack(audioSource);
+
+  const encoderConfig: VideoEncoderConfig = {
+    codec,
+    width,
+    height,
+    bitrate,
+    hardwareAcceleration: "prefer-hardware",
+  };
+
+  encoder = new VideoEncoder({
+    output: async (chunk, meta) => {
+      const packet = EncodedPacket.fromEncodedChunk(chunk);
+      if (isFirstPacket) {
+        await videoSource!.add(packet, meta);
+        isFirstPacket = false;
+      } else {
+        await videoSource!.add(packet);
+      }
+      framesEncoded++;
+      post({ type: "frame-encoded", index: framesEncoded - 1 });
+    },
+    error: (e) => {
+      post({ type: "error", message: e.message });
+    },
+  });
+
+  encoder.configure(encoderConfig);
+  await output.start();
+
+  post({ type: "ready" });
+}
+
+async function handleFrame(msg: WorkerInMessage & { type: "frame" }): Promise<void> {
+  if (!encoder) {
+    post({ type: "error", message: "Encoder not initialized" });
+    return;
+  }
+
+  const frame = new VideoFrame(msg.bitmap, {
+    timestamp: msg.timestamp,
+  });
+
+  const isKeyFrame = msg.index % 150 === 0;
+  encoder.encode(frame, { keyFrame: isKeyFrame });
+  frame.close();
+  msg.bitmap.close();
+}
+
+async function handleSetAudio(msg: WorkerInMessage & { type: "set-audio" }): Promise<void> {
+  if (!audioSource) return;
+
+  const interleaved = interleaveChannels(msg.channelData);
+  const sample = new AudioSample({
+    data: interleaved,
+    format: "f32-planar",
+    numberOfChannels: msg.channelData.length,
+    sampleRate: msg.sampleRate,
+    timestamp: 0,
+  });
+  await audioSource.add(sample);
+  sample[Symbol.dispose]();
+}
+
+async function handleFinalize(): Promise<void> {
+  if (!encoder || !output || !target || !videoSource || !audioSource) {
+    post({ type: "error", message: "Cannot finalize — not initialized" });
+    return;
+  }
+
+  await encoder.flush();
+  encoder.close();
+  videoSource.close();
+  audioSource.close();
+  await output.finalize();
+
+  const buffer = target.buffer;
+  if (!buffer) {
+    post({ type: "error", message: "No output buffer after finalize" });
+    return;
+  }
+
+  const blob = new Blob([buffer], { type: "video/mp4" });
+  post({ type: "done", blob });
+}
+
+function interleaveChannels(channels: Float32Array[]): Float32Array {
+  if (channels.length === 1) return channels[0]!;
+  const length = channels[0]!.length * channels.length;
+  const result = new Float32Array(length);
+  const numChannels = channels.length;
+  const samplesPerChannel = channels[0]!.length;
+  for (let ch = 0; ch < numChannels; ch++) {
+    const channelData = channels[ch]!;
+    for (let i = 0; i < samplesPerChannel; i++) {
+      result[i * numChannels + ch] = channelData[i]!;
+    }
+  }
+  return result;
+}
+
+self.onmessage = async (e: MessageEvent<WorkerInMessage>) => {
+  try {
+    switch (e.data.type) {
+      case "init":
+        await handleInit(e.data);
+        break;
+      case "frame":
+        await handleFrame(e.data);
+        break;
+      case "set-audio":
+        await handleSetAudio(e.data);
+        break;
+      case "finalize":
+        await handleFinalize();
+        break;
+    }
+  } catch (err) {
+    post({ type: "error", message: err instanceof Error ? err.message : String(err) });
+  }
+};

From 05ee085c364be3580c74dc0fb987f6bcc5632489 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 01:58:27 +0200
Subject: [PATCH 07/30] feat(renderer): add OfflineAudioContext-based audio
 mixer

Implements mixAudio() with TDD: decodes audio sources, applies volume/timing
via GainNode, and renders a mixed PCM AudioBuffer using OfflineAudioContext.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/renderer/src/audio/mixer.test.ts | 56 ++++++++++++++++++++
 packages/renderer/src/audio/mixer.ts      | 64 +++++++++++++++++++++++
 2 files changed, 120 insertions(+)
 create mode 100644 packages/renderer/src/audio/mixer.test.ts
 create mode 100644 packages/renderer/src/audio/mixer.ts

diff --git a/packages/renderer/src/audio/mixer.test.ts b/packages/renderer/src/audio/mixer.test.ts
new file mode 100644
index 00000000..74524a7a
--- /dev/null
+++ b/packages/renderer/src/audio/mixer.test.ts
@@ -0,0 +1,56 @@
+import { describe, it, expect, vi } from "vitest";
+import type { AudioMixConfig } from "../types.js";
+
+// Mock OfflineAudioContext for jsdom environment
+if (typeof globalThis.OfflineAudioContext === "undefined") {
+  globalThis.OfflineAudioContext = vi
+    .fn()
+    .mockImplementation((channels: number, length: number, sampleRate: number) => ({
+      createBufferSource: () => ({
+        buffer: null,
+        connect: vi.fn(),
+        start: vi.fn(),
+      }),
+      createGain: () => ({
+        gain: { value: 1 },
+        connect: vi.fn(),
+      }),
+      destination: {},
+      decodeAudioData: vi.fn().mockResolvedValue({
+        duration: 1,
+        numberOfChannels: channels,
+        sampleRate,
+        getChannelData: () => new Float32Array(length),
+      }),
+      startRendering: vi.fn().mockResolvedValue({
+        duration: length / sampleRate,
+        numberOfChannels: channels,
+        sampleRate,
+        length,
+        getChannelData: () => new Float32Array(length),
+      }),
+    })) as unknown as typeof OfflineAudioContext;
+}
+
+// Dynamic import AFTER mock is set up
+const { mixAudio } = await import("./mixer.js");
+
+describe("mixAudio", () => {
+  it("returns silent audio when no sources provided", async () => {
+    const config: AudioMixConfig = {
+      duration: 1.0,
+      sampleRate: 44100,
+      channels: 2,
+      sources: [],
+    };
+    const result = await mixAudio(config);
+    expect(result.sampleRate).toBe(44100);
+    expect(result.channels).toBe(2);
+  });
+
+  it("uses default sample rate and channels", async () => {
+    const result = await mixAudio({ duration: 0.5, sources: [] });
+    expect(result.sampleRate).toBe(44100);
+    expect(result.channels).toBe(2);
+  });
+});
diff --git a/packages/renderer/src/audio/mixer.ts b/packages/renderer/src/audio/mixer.ts
new file mode 100644
index 00000000..7ab202d6
--- /dev/null
+++ b/packages/renderer/src/audio/mixer.ts
@@ -0,0 +1,64 @@
+/**
+ * Audio Mixer
+ *
+ * Mixes audio sources using OfflineAudioContext.
+ * Decodes audio files, applies volume/timing offsets,
+ * and renders to a single AudioBuffer (PCM).
+ */
+
+import type { AudioMixConfig, AudioMixResult } from "../types.js";
+
+const DEFAULT_SAMPLE_RATE = 44100;
+const DEFAULT_CHANNELS = 2;
+
+export async function mixAudio(config: AudioMixConfig): Promise<AudioMixResult> {
+  const sampleRate = config.sampleRate ?? DEFAULT_SAMPLE_RATE;
+  const channels = config.channels ?? DEFAULT_CHANNELS;
+  const totalSamples = Math.ceil(config.duration * sampleRate);
+
+  const offlineCtx = new OfflineAudioContext(channels, totalSamples, sampleRate);
+
+  for (const source of config.sources) {
+    const arrayBuffer = await fetchAudioData(source.src);
+    const audioBuffer = await offlineCtx.decodeAudioData(arrayBuffer);
+
+    const bufferSource = offlineCtx.createBufferSource();
+    bufferSource.buffer = audioBuffer;
+
+    // Apply volume
+    const gainNode = offlineCtx.createGain();
+    gainNode.gain.value = source.volume ?? 1;
+
+    bufferSource.connect(gainNode);
+    gainNode.connect(offlineCtx.destination);
+
+    // Calculate timing
+    const mediaOffset = source.mediaOffset ?? 0;
+    const clipDuration = source.endTime - source.startTime;
+
+    if (mediaOffset > 0) {
+      bufferSource.start(source.startTime, mediaOffset, clipDuration);
+    } else {
+      bufferSource.start(source.startTime, 0, clipDuration);
+    }
+  }
+
+  const renderedBuffer = await offlineCtx.startRendering();
+
+  return {
+    buffer: renderedBuffer,
+    sampleRate,
+    channels,
+  };
+}
+
+async function fetchAudioData(src: string | Blob): Promise<ArrayBuffer> {
+  if (src instanceof Blob) {
+    return src.arrayBuffer();
+  }
+  const response = await fetch(src);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch audio: ${src} (${response.status})`);
+  }
+  return response.arrayBuffer();
+}

From fc823c572fed9f3dc828d39e181e8ffeb95e29ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 01:58:31 +0200
Subject: [PATCH 08/30] feat(renderer): add video frame injector for <video>
 element capture

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/capture/video-frame-injector.ts       | 111 ++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 packages/renderer/src/capture/video-frame-injector.ts

diff --git a/packages/renderer/src/capture/video-frame-injector.ts b/packages/renderer/src/capture/video-frame-injector.ts
new file mode 100644
index 00000000..2848aedb
--- /dev/null
+++ b/packages/renderer/src/capture/video-frame-injector.ts
@@ -0,0 +1,111 @@
+/**
+ * Video Frame Injector
+ *
+ * For each <video> element in the composition, creates a canvas overlay
+ * that displays the decoded video frame at the current composition time.
+ * SnapDOM can capture <canvas> elements (unlike <video> via foreignObject).
+ */
+
+import type { HfMediaElement } from "../types.js";
+
+interface VideoTrack {
+  element: HfMediaElement;
+  video: HTMLVideoElement;
+  canvas: HTMLCanvasElement;
+  ctx: CanvasRenderingContext2D;
+}
+
+export class VideoFrameInjector {
+  private tracks: VideoTrack[] = [];
+  private iframeDoc: Document | null = null;
+
+  async init(media: HfMediaElement[], iframeDoc: Document): Promise<void> {
+    this.iframeDoc = iframeDoc;
+    const videoElements = media.filter((m) => {
+      const el = iframeDoc.getElementById(m.elementId);
+      return el?.tagName === "VIDEO";
+    });
+
+    for (const element of videoElements) {
+      const videoEl = iframeDoc.getElementById(element.elementId) as HTMLVideoElement | null;
+      if (!videoEl) continue;
+
+      // Create a hidden video element for decoding
+      const video = iframeDoc.createElement("video");
+      video.src = element.src;
+      video.muted = true;
+      video.preload = "auto";
+      video.crossOrigin = "anonymous";
+      video.style.display = "none";
+      iframeDoc.body.appendChild(video);
+
+      await new Promise<void>((resolve) => {
+        video.onloadeddata = () => resolve();
+        video.onerror = () => resolve(); // graceful — skip broken videos
+        video.load();
+      });
+
+      // Create canvas overlay matching the video element's position
+      const canvas = iframeDoc.createElement("canvas");
+      const rect = videoEl.getBoundingClientRect();
+      canvas.width = rect.width;
+      canvas.height = rect.height;
+      canvas.style.position = "absolute";
+      canvas.style.left = `${rect.left}px`;
+      canvas.style.top = `${rect.top}px`;
+      canvas.style.width = `${rect.width}px`;
+      canvas.style.height = `${rect.height}px`;
+      canvas.style.zIndex = getComputedStyle(videoEl).zIndex || "1";
+      canvas.style.pointerEvents = "none";
+
+      const ctx = canvas.getContext("2d");
+      if (!ctx) continue;
+
+      // Hide the original video element (SnapDOM can't capture it anyway)
+      videoEl.style.visibility = "hidden";
+
+      // Insert canvas as sibling
+      videoEl.parentElement?.insertBefore(canvas, videoEl.nextSibling);
+
+      this.tracks.push({ element, video, canvas, ctx });
+    }
+  }
+
+  async injectFrame(compositionTime: number): Promise<void> {
+    for (const track of this.tracks) {
+      const { element, video, canvas, ctx } = track;
+
+      // Is this video visible at this composition time?
+      if (compositionTime < element.startTime || compositionTime >= element.endTime) {
+        canvas.style.visibility = "hidden";
+        continue;
+      }
+      canvas.style.visibility = "visible";
+
+      // Calculate the video's local time
+      const mediaOffset = element.mediaOffset ?? 0;
+      const localTime = compositionTime - element.startTime + mediaOffset;
+
+      // Seek the video to the correct time
+      if (Math.abs(video.currentTime - localTime) > 0.01) {
+        video.currentTime = localTime;
+        await new Promise<void>((resolve) => {
+          video.onseeked = () => resolve();
+          setTimeout(resolve, 100); // safety timeout
+        });
+      }
+
+      // Draw the current video frame onto the canvas
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    }
+  }
+
+  dispose(): void {
+    for (const track of this.tracks) {
+      track.video.remove();
+      track.canvas.remove();
+    }
+    this.tracks = [];
+    this.iframeDoc = null;
+  }
+}

From 5019fc09b4f74b08c1add40add21364019e35033 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 01:58:49 +0200
Subject: [PATCH 09/30] feat(renderer): add parallel iframe pool for frame
 capture

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../renderer/src/capture/iframe-pool.test.ts  | 20 +++++
 packages/renderer/src/capture/iframe-pool.ts  | 78 +++++++++++++++++++
 2 files changed, 98 insertions(+)
 create mode 100644 packages/renderer/src/capture/iframe-pool.test.ts
 create mode 100644 packages/renderer/src/capture/iframe-pool.ts

diff --git a/packages/renderer/src/capture/iframe-pool.test.ts b/packages/renderer/src/capture/iframe-pool.test.ts
new file mode 100644
index 00000000..0025bfaf
--- /dev/null
+++ b/packages/renderer/src/capture/iframe-pool.test.ts
@@ -0,0 +1,20 @@
+import { describe, it, expect } from "vitest";
+import { calculateConcurrency } from "./iframe-pool.js";
+
+describe("calculateConcurrency", () => {
+  it("returns at least 1", () => {
+    expect(calculateConcurrency(0)).toBe(1);
+  });
+
+  it("caps at 8", () => {
+    expect(calculateConcurrency(100)).toBeLessThanOrEqual(8);
+  });
+
+  it("leaves 1 core for encoding", () => {
+    expect(calculateConcurrency(4)).toBe(3);
+  });
+
+  it("handles single-core", () => {
+    expect(calculateConcurrency(1)).toBe(1);
+  });
+});
diff --git a/packages/renderer/src/capture/iframe-pool.ts b/packages/renderer/src/capture/iframe-pool.ts
new file mode 100644
index 00000000..40ebdc6b
--- /dev/null
+++ b/packages/renderer/src/capture/iframe-pool.ts
@@ -0,0 +1,78 @@
+/**
+ * Iframe Pool
+ *
+ * Manages N parallel hidden iframes, each loading the same composition.
+ * Each iframe captures a contiguous range of frames using the provided
+ * FrameSource for DOM-to-ImageBitmap conversion.
+ */
+
+import type { FrameSource, HfMediaElement } from "../types.js";
+import { distributeFrames } from "../utils/timing.js";
+
+export function calculateConcurrency(hardwareConcurrency: number): number {
+  return Math.max(1, Math.min(hardwareConcurrency - 1, 8));
+}
+
+export interface IframePoolConfig {
+  compositionUrl: string;
+  width: number;
+  height: number;
+  devicePixelRatio?: number;
+  concurrency: number;
+  createFrameSource: () => FrameSource;
+}
+
+export interface CapturedFrame {
+  bitmap: ImageBitmap;
+  index: number;
+  time: number;
+}
+
+export class IframePool {
+  private sources: FrameSource[] = [];
+  private config: IframePoolConfig | null = null;
+
+  async init(config: IframePoolConfig): Promise<{ duration: number; media: HfMediaElement[] }> {
+    this.config = config;
+
+    // Initialize all frame sources in parallel
+    const initPromises: Promise<void>[] = [];
+    for (let i = 0; i < config.concurrency; i++) {
+      const source = config.createFrameSource();
+      this.sources.push(source);
+      initPromises.push(
+        source.init({
+          compositionUrl: config.compositionUrl,
+          width: config.width,
+          height: config.height,
+          devicePixelRatio: config.devicePixelRatio,
+        }),
+      );
+    }
+    await Promise.all(initPromises);
+
+    const first = this.sources[0]!;
+    return { duration: first.duration, media: first.media };
+  }
+
+  async captureAll(frameTimes: number[], onFrame: (frame: CapturedFrame) => void): Promise<void> {
+    const ranges = distributeFrames(frameTimes.length, this.sources.length);
+
+    await Promise.all(
+      ranges.map(async (range, workerIdx) => {
+        const source = this.sources[workerIdx]!;
+        for (let i = range.start; i <= range.end; i++) {
+          const time = frameTimes[i]!;
+          const bitmap = await source.capture(time);
+          onFrame({ bitmap, index: i, time });
+        }
+      }),
+    );
+  }
+
+  async dispose(): Promise<void> {
+    await Promise.all(this.sources.map((s) => s.dispose()));
+    this.sources = [];
+    this.config = null;
+  }
+}

From e79f6b02b027726fd3ef6fc4311a8086475fcdbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 02:01:02 +0200
Subject: [PATCH 10/30] feat(renderer): add main orchestrator and public API
 (render, createRenderer)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/renderer/src/index.ts    |  14 ++
 packages/renderer/src/renderer.ts | 251 ++++++++++++++++++++++++++++++
 2 files changed, 265 insertions(+)
 create mode 100644 packages/renderer/src/renderer.ts

diff --git a/packages/renderer/src/index.ts b/packages/renderer/src/index.ts
index 8a3490e2..2232e292 100644
--- a/packages/renderer/src/index.ts
+++ b/packages/renderer/src/index.ts
@@ -6,7 +6,12 @@
  * using WebCodecs, MediaBunny, and SnapDOM.
  */
 
+import { HyperframesRenderer } from "./renderer.js";
+import type { RenderConfig, RenderResult } from "./types.js";
+
 export { isSupported, detectBestFrameSource } from "./compat.js";
+export { HyperframesRenderer, CancelledError } from "./renderer.js";
+export { SnapdomFrameSource } from "./sources/snapdom.js";
 
 export type {
   RenderConfig,
@@ -21,3 +26,12 @@ export type {
   AudioMixResult,
   MuxerConfig,
 } from "./types.js";
+
+export async function render(config: RenderConfig): Promise<RenderResult> {
+  const renderer = new HyperframesRenderer(config);
+  return renderer.render();
+}
+
+export function createRenderer(config: RenderConfig): HyperframesRenderer {
+  return new HyperframesRenderer(config);
+}
diff --git a/packages/renderer/src/renderer.ts b/packages/renderer/src/renderer.ts
new file mode 100644
index 00000000..43da3a39
--- /dev/null
+++ b/packages/renderer/src/renderer.ts
@@ -0,0 +1,251 @@
+/**
+ * HyperframesRenderer
+ *
+ * Main orchestrator for the client-side rendering pipeline.
+ * Coordinates iframe pool, frame capture, encoding, audio mixing,
+ * and muxing into a final MP4/WebM Blob.
+ */
+
+import { calculateConcurrency, IframePool } from "./capture/iframe-pool.js";
+import { Encoder } from "./encoding/encoder.js";
+import { SnapdomFrameSource } from "./sources/snapdom.js";
+import { mixAudio } from "./audio/mixer.js";
+import { generateFrameTimes } from "./utils/timing.js";
+import type { RenderConfig, RenderProgress, RenderResult, AudioSource } from "./types.js";
+
+// ── Codec mapping ─────────────────────────────────────────────────────────────
+
+const CODEC_MAP: Record<"h264" | "vp9", "avc1.640028" | "vp09.00.31.08"> = {
+  h264: "avc1.640028",
+  vp9: "vp09.00.31.08",
+};
+
+// ── Bitrate heuristic ─────────────────────────────────────────────────────────
+
+function calculateBitrate(width: number, height: number): number {
+  // 4 Mbps baseline for 1080p (1920×1080 = 2_073_600 pixels)
+  const baselinePixels = 1920 * 1080;
+  const pixels = width * height;
+  return Math.round((4_000_000 * pixels) / baselinePixels);
+}
+
+// ── CancelledError ────────────────────────────────────────────────────────────
+
+export class CancelledError extends Error {
+  constructor() {
+    super("Render cancelled");
+    this.name = "CancelledError";
+  }
+}
+
+// ── HyperframesRenderer ───────────────────────────────────────────────────────
+
+export class HyperframesRenderer {
+  private config: RenderConfig;
+  private cancelled = false;
+  private pool: IframePool | null = null;
+  private encoder: Encoder | null = null;
+
+  constructor(config: RenderConfig) {
+    this.config = config;
+  }
+
+  cancel(): void {
+    this.cancelled = true;
+  }
+
+  async render(): Promise<RenderResult> {
+    const totalStart = performance.now();
+    this.cancelled = false;
+
+    // ── Resolve config defaults ───────────────────────────────────────────────
+    const fps = this.config.fps ?? 30;
+    const width = this.config.width ?? 1920;
+    const height = this.config.height ?? 1080;
+    const format = this.config.format ?? "mp4";
+    const codecKey = this.config.codec ?? "h264";
+    const codec = CODEC_MAP[codecKey];
+    const bitrate = this.config.bitrate ?? calculateBitrate(width, height);
+    const concurrency =
+      this.config.concurrency ??
+      calculateConcurrency(typeof navigator !== "undefined" ? navigator.hardwareConcurrency : 4);
+    const devicePixelRatio = this.config.devicePixelRatio ?? 1;
+
+    const report = (progress: RenderProgress) => this.config.onProgress?.(progress);
+
+    report({ stage: "initializing", progress: 0 });
+
+    this.throwIfCancelled();
+
+    // ── Step 1: Initialise iframe pool + frame sources ────────────────────────
+    const pool = new IframePool();
+    this.pool = pool;
+
+    const { duration, media } = await pool.init({
+      compositionUrl: this.config.composition,
+      width,
+      height,
+      devicePixelRatio,
+      concurrency,
+      createFrameSource: () => new SnapdomFrameSource(),
+    });
+
+    this.throwIfCancelled();
+
+    // ── Step 2: Generate frame timestamps ─────────────────────────────────────
+    const frameTimes = generateFrameTimes(duration, fps);
+    const totalFrames = frameTimes.length;
+
+    if (totalFrames === 0) {
+      await pool.dispose();
+      throw new Error("Composition has zero duration — nothing to render");
+    }
+
+    // ── Step 3: Initialise encoder ────────────────────────────────────────────
+    const encoder = new Encoder({
+      width,
+      height,
+      fps,
+      codec,
+      bitrate,
+      format,
+      onFrameEncoded: (index) => {
+        const encodingProgress = (index + 1) / totalFrames;
+        report({
+          stage: "encoding",
+          progress: 0.1 + encodingProgress * 0.6,
+          currentFrame: index + 1,
+          totalFrames,
+        });
+      },
+    });
+    this.encoder = encoder;
+
+    await encoder.init();
+    this.throwIfCancelled();
+
+    // ── Step 4: Capture frames + stream to encoder with reorder buffer ─────────
+    const captureStart = performance.now();
+
+    report({ stage: "capturing", progress: 0.05, currentFrame: 0, totalFrames });
+
+    // Reorder buffer: frames arrive out of order from parallel iframes.
+    // We buffer them and flush runs of consecutive frames to the encoder.
+    const reorderBuffer = new Map<number, ImageBitmap>();
+    let nextExpected = 0;
+    let capturedCount = 0;
+
+    const frameDuration = 1 / fps;
+
+    const flushBuffer = () => {
+      while (reorderBuffer.has(nextExpected)) {
+        const bitmap = reorderBuffer.get(nextExpected)!;
+        reorderBuffer.delete(nextExpected);
+        const timestamp = Math.round(nextExpected * frameDuration * 1_000_000); // microseconds
+        encoder.sendFrame(bitmap, nextExpected, timestamp);
+        nextExpected++;
+      }
+    };
+
+    await pool.captureAll(frameTimes, ({ bitmap, index }) => {
+      if (this.cancelled) {
+        bitmap.close();
+        return;
+      }
+
+      reorderBuffer.set(index, bitmap);
+      capturedCount++;
+
+      const captureProgress = capturedCount / totalFrames;
+      report({
+        stage: "capturing",
+        progress: 0.05 + captureProgress * 0.05,
+        currentFrame: capturedCount,
+        totalFrames,
+      });
+
+      flushBuffer();
+    });
+
+    // Flush any remaining buffered frames
+    flushBuffer();
+
+    const captureMs = performance.now() - captureStart;
+
+    await pool.dispose();
+    this.pool = null;
+
+    this.throwIfCancelled();
+
+    // ── Step 5: Mix audio ─────────────────────────────────────────────────────
+    const audioStart = performance.now();
+
+    report({ stage: "mixing-audio", progress: 0.7 });
+
+    const audioSources: AudioSource[] = media
+      .filter((m) => m.hasAudio !== false)
+      .map((m) => ({
+        src: m.src,
+        startTime: m.startTime,
+        endTime: m.endTime,
+        mediaOffset: m.mediaOffset,
+        volume: m.volume,
+      }));
+
+    if (audioSources.length > 0) {
+      const mixResult = await mixAudio({
+        duration,
+        sources: audioSources,
+      });
+
+      const channelData: Float32Array[] = [];
+      for (let c = 0; c < mixResult.channels; c++) {
+        channelData.push(mixResult.buffer.getChannelData(c));
+      }
+      encoder.setAudio(channelData, mixResult.sampleRate);
+    }
+
+    const audioMs = performance.now() - audioStart;
+
+    this.throwIfCancelled();
+
+    // ── Step 6: Mux video + audio ─────────────────────────────────────────────
+    report({ stage: "muxing", progress: 0.85 });
+
+    const encodeStart = performance.now();
+    const blob = await encoder.finalize();
+    const encodeMs = performance.now() - encodeStart;
+
+    encoder.dispose();
+    this.encoder = null;
+
+    // ── Step 7: Return result ─────────────────────────────────────────────────
+    const totalMs = performance.now() - totalStart;
+    const framesPerSecond = totalFrames / (totalMs / 1000);
+    const mimeType = format === "mp4" ? "video/mp4" : "video/webm";
+
+    report({ stage: "complete", progress: 1, totalFrames });
+
+    return {
+      blob,
+      mimeType,
+      durationMs: duration * 1000,
+      perf: {
+        captureMs,
+        encodeMs,
+        audioMs,
+        muxMs: encodeMs,
+        totalMs,
+        framesPerSecond,
+      },
+    };
+  }
+
+  private throwIfCancelled(): void {
+    if (this.cancelled) {
+      this.pool?.dispose().catch(() => {});
+      this.encoder?.dispose();
+      throw new CancelledError();
+    }
+  }
+}

From 826179e44fe053813c6a4ee40c57f2d77fdbed4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 02:04:06 +0200
Subject: [PATCH 11/30] test(renderer): add end-to-end integration test with
 basic composition

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/tests/fixtures/basic-composition.html | 31 +++++++++++++
 .../src/tests/renderer.integration.test.ts    | 43 +++++++++++++++++++
 2 files changed, 74 insertions(+)
 create mode 100644 packages/renderer/src/tests/fixtures/basic-composition.html
 create mode 100644 packages/renderer/src/tests/renderer.integration.test.ts

diff --git a/packages/renderer/src/tests/fixtures/basic-composition.html b/packages/renderer/src/tests/fixtures/basic-composition.html
new file mode 100644
index 00000000..1a5fa708
--- /dev/null
+++ b/packages/renderer/src/tests/fixtures/basic-composition.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    html, body { margin: 0; padding: 0; overflow: hidden; }
+    body { width: 1920px; height: 1080px; background: #1a1a2e; }
+    .box {
+      position: absolute;
+      top: 50%; left: 50%;
+      transform: translate(-50%, -50%);
+      width: 200px; height: 200px;
+      background: #e94560;
+      border-radius: 16px;
+    }
+  </style>
+</head>
+<body>
+  <div class="box"></div>
+  <script>
+    // Minimal __hf protocol — 2 second static composition
+    window.__hf = {
+      duration: 2,
+      seek: function(time) {
+        // Static composition — no animation to seek
+      },
+      media: [],
+    };
+  </script>
+</body>
+</html>
diff --git a/packages/renderer/src/tests/renderer.integration.test.ts b/packages/renderer/src/tests/renderer.integration.test.ts
new file mode 100644
index 00000000..e86feea1
--- /dev/null
+++ b/packages/renderer/src/tests/renderer.integration.test.ts
@@ -0,0 +1,43 @@
+/**
+ * End-to-end integration test for the renderer.
+ *
+ * Requires a browser environment with WebCodecs support.
+ * Skipped in jsdom/node environments.
+ */
+import { describe, it, expect } from "vitest";
+import { render, isSupported } from "../index.js";
+
+const SKIP = typeof globalThis.VideoEncoder === "undefined";
+
+describe.skipIf(SKIP)("Renderer E2E", () => {
+  it("renders a basic composition to MP4", async () => {
+    const progressStages: string[] = [];
+
+    const result = await render({
+      composition: new URL("./fixtures/basic-composition.html", import.meta.url).href,
+      fps: 30,
+      width: 1920,
+      height: 1080,
+      concurrency: 1,
+      onProgress: (p) => {
+        if (!progressStages.includes(p.stage)) {
+          progressStages.push(p.stage);
+        }
+      },
+    });
+
+    expect(result.blob).toBeInstanceOf(Blob);
+    expect(result.blob.size).toBeGreaterThan(0);
+    expect(result.mimeType).toBe("video/mp4");
+    expect(result.durationMs).toBeGreaterThan(0);
+    expect(result.perf.totalMs).toBeGreaterThan(0);
+    expect(result.perf.framesPerSecond).toBeGreaterThan(0);
+    expect(progressStages).toContain("initializing");
+    expect(progressStages).toContain("capturing");
+    expect(progressStages).toContain("complete");
+  }, 60_000);
+
+  it("isSupported returns true in browser with WebCodecs", () => {
+    expect(isSupported()).toBe(true);
+  });
+});

From 725d9e71b11b7267871326d8eecf851d3168aaae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 02:04:19 +0200
Subject: [PATCH 12/30] feat(renderer): integrate video frame injector into
 SnapDOM frame source

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/renderer/src/sources/snapdom.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/renderer/src/sources/snapdom.ts b/packages/renderer/src/sources/snapdom.ts
index e88792cf..c7d8b8a3 100644
--- a/packages/renderer/src/sources/snapdom.ts
+++ b/packages/renderer/src/sources/snapdom.ts
@@ -7,6 +7,7 @@
  */
 
 import { snapdom } from "@zumer/snapdom";
+import { VideoFrameInjector } from "../capture/video-frame-injector.js";
 import type { FrameSource, FrameSourceConfig, HfMediaElement } from "../types.js";
 
 interface HfProtocol {
@@ -23,6 +24,7 @@ export class SnapdomFrameSource implements FrameSource {
   private hf: HfProtocol | null = null;
   private _duration = 0;
   private _media: HfMediaElement[] = [];
+  private videoInjector: VideoFrameInjector | null = null;
 
   get duration(): number {
     return this._duration;
@@ -65,6 +67,15 @@ export class SnapdomFrameSource implements FrameSource {
     this.hf = hf;
     this._duration = hf.duration;
     this._media = hf.media ?? [];
+
+    const videoMedia = this._media.filter((m) => {
+      const el = this.iframe!.contentDocument?.getElementById(m.elementId);
+      return el?.tagName === "VIDEO";
+    });
+    if (videoMedia.length > 0) {
+      this.videoInjector = new VideoFrameInjector();
+      await this.videoInjector.init(videoMedia, this.iframe!.contentDocument!);
+    }
   }
 
   async capture(time: number): Promise<ImageBitmap> {
@@ -74,6 +85,10 @@ export class SnapdomFrameSource implements FrameSource {
 
     this.hf.seek(time);
 
+    if (this.videoInjector) {
+      await this.videoInjector.injectFrame(time);
+    }
+
     const doc = this.iframe.contentDocument;
     if (!doc?.documentElement) {
       throw new Error("iframe has no document");
@@ -89,6 +104,9 @@ export class SnapdomFrameSource implements FrameSource {
   }
 
   async dispose(): Promise<void> {
+    this.videoInjector?.dispose();
+    this.videoInjector = null;
+
     if (this.iframe) {
       this.iframe.remove();
       this.iframe = null;

From 18d6a3e9e2d71eeeec17ec7c8c5039f5bbeb15d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 02:04:34 +0200
Subject: [PATCH 13/30] feat(renderer): add progress tracking and ETA
 estimation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/renderer/src/utils/progress.test.ts | 24 ++++++++++++++
 packages/renderer/src/utils/progress.ts      | 35 ++++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 packages/renderer/src/utils/progress.test.ts
 create mode 100644 packages/renderer/src/utils/progress.ts

diff --git a/packages/renderer/src/utils/progress.test.ts b/packages/renderer/src/utils/progress.test.ts
new file mode 100644
index 00000000..50d7b436
--- /dev/null
+++ b/packages/renderer/src/utils/progress.test.ts
@@ -0,0 +1,24 @@
+import { describe, it, expect } from "vitest";
+import { ProgressTracker } from "./progress.js";
+
+describe("ProgressTracker", () => {
+  it("estimates time remaining based on rate", () => {
+    const tracker = new ProgressTracker(100);
+    tracker.recordFrame(10, 1000);
+    const eta = tracker.estimateTimeRemaining();
+    expect(eta).toBeGreaterThan(8000);
+    expect(eta).toBeLessThan(10000);
+  });
+
+  it("returns capture rate", () => {
+    const tracker = new ProgressTracker(100);
+    tracker.recordFrame(20, 2000);
+    expect(tracker.captureRate()).toBeCloseTo(10, 0);
+  });
+
+  it("handles zero frames gracefully", () => {
+    const tracker = new ProgressTracker(100);
+    expect(tracker.estimateTimeRemaining()).toBeUndefined();
+    expect(tracker.captureRate()).toBe(0);
+  });
+});
diff --git a/packages/renderer/src/utils/progress.ts b/packages/renderer/src/utils/progress.ts
new file mode 100644
index 00000000..677315c2
--- /dev/null
+++ b/packages/renderer/src/utils/progress.ts
@@ -0,0 +1,35 @@
+/**
+ * Progress tracking and ETA estimation.
+ */
+
+export class ProgressTracker {
+  private totalFrames: number;
+  private framesCaptured = 0;
+  private elapsedMs = 0;
+
+  constructor(totalFrames: number) {
+    this.totalFrames = totalFrames;
+  }
+
+  recordFrame(framesCaptured: number, elapsedMs: number): void {
+    this.framesCaptured = framesCaptured;
+    this.elapsedMs = elapsedMs;
+  }
+
+  captureRate(): number {
+    if (this.elapsedMs <= 0) return 0;
+    return this.framesCaptured / (this.elapsedMs / 1000);
+  }
+
+  estimateTimeRemaining(): number | undefined {
+    const rate = this.captureRate();
+    if (rate <= 0) return undefined;
+    const remaining = this.totalFrames - this.framesCaptured;
+    return (remaining / rate) * 1000;
+  }
+
+  progress(): number {
+    if (this.totalFrames <= 0) return 0;
+    return this.framesCaptured / this.totalFrames;
+  }
+}

From 23b5d834a14db647be3197d47b38a5d1caf65fd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 02:11:20 +0200
Subject: [PATCH 14/30] fix(renderer): address code review issues

- Fix audio format: replace interleaveChannels with concatPlanarChannels
- Fix MIME type: derive video/mp4 vs video/webm from outputFormat in finalize
- Add isSupported() guard at top of render() for early failure
- Fix durationMs to report wall-clock render time (totalMs)
- Fix audio filter to use strict equality (hasAudio === true)
- Remove unused progress type from WorkerOutMessage union

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/renderer/src/encoding/types.ts  |  3 +--
 packages/renderer/src/encoding/worker.ts | 26 ++++++++++++------------
 packages/renderer/src/renderer.ts        | 11 ++++++++--
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/packages/renderer/src/encoding/types.ts b/packages/renderer/src/encoding/types.ts
index a154eb25..39624463 100644
--- a/packages/renderer/src/encoding/types.ts
+++ b/packages/renderer/src/encoding/types.ts
@@ -36,5 +36,4 @@ export type WorkerOutMessage =
   | { type: "ready" }
   | { type: "frame-encoded"; index: number }
   | { type: "done"; blob: Blob }
-  | { type: "error"; message: string }
-  | { type: "progress"; framesEncoded: number };
+  | { type: "error"; message: string };
diff --git a/packages/renderer/src/encoding/worker.ts b/packages/renderer/src/encoding/worker.ts
index 94e882eb..656e7006 100644
--- a/packages/renderer/src/encoding/worker.ts
+++ b/packages/renderer/src/encoding/worker.ts
@@ -24,6 +24,7 @@ let encoder: VideoEncoder | null = null;
 let target: BufferTarget | null = null;
 let isFirstPacket = true;
 let framesEncoded = 0;
+let outputFormat: "mp4" | "webm" = "mp4";
 
 function post(msg: WorkerOutMessage, transfer?: Transferable[]): void {
   self.postMessage(msg, { transfer: transfer ?? [] });
@@ -32,6 +33,7 @@ function post(msg: WorkerOutMessage, transfer?: Transferable[]): void {
 async function handleInit(config: WorkerInMessage & { type: "init" }): Promise<void> {
   const { width, height, fps, codec, bitrate, format } = config.config;
 
+  outputFormat = format;
   target = new BufferTarget();
   const formatObj = format === "webm" ? new WebMOutputFormat() : new Mp4OutputFormat();
   output = new Output({ format: formatObj, target });
@@ -94,9 +96,9 @@ async function handleFrame(msg: WorkerInMessage & { type: "frame" }): Promise<vo
 async function handleSetAudio(msg: WorkerInMessage & { type: "set-audio" }): Promise<void> {
   if (!audioSource) return;
 
-  const interleaved = interleaveChannels(msg.channelData);
+  const planar = concatPlanarChannels(msg.channelData);
   const sample = new AudioSample({
-    data: interleaved,
+    data: planar,
     format: "f32-planar",
     numberOfChannels: msg.channelData.length,
     sampleRate: msg.sampleRate,
@@ -124,21 +126,19 @@ async function handleFinalize(): Promise<void> {
     return;
   }
 
-  const blob = new Blob([buffer], { type: "video/mp4" });
+  const mimeType = outputFormat === "webm" ? "video/webm" : "video/mp4";
+  const blob = new Blob([buffer], { type: mimeType });
   post({ type: "done", blob });
 }
 
-function interleaveChannels(channels: Float32Array[]): Float32Array {
+function concatPlanarChannels(channels: Float32Array[]): Float32Array {
   if (channels.length === 1) return channels[0]!;
-  const length = channels[0]!.length * channels.length;
-  const result = new Float32Array(length);
-  const numChannels = channels.length;
-  const samplesPerChannel = channels[0]!.length;
-  for (let ch = 0; ch < numChannels; ch++) {
-    const channelData = channels[ch]!;
-    for (let i = 0; i < samplesPerChannel; i++) {
-      result[i * numChannels + ch] = channelData[i]!;
-    }
+  const totalLength = channels.reduce((sum, ch) => sum + ch.length, 0);
+  const result = new Float32Array(totalLength);
+  let offset = 0;
+  for (const ch of channels) {
+    result.set(ch, offset);
+    offset += ch.length;
   }
   return result;
 }
diff --git a/packages/renderer/src/renderer.ts b/packages/renderer/src/renderer.ts
index 43da3a39..8e47ef5d 100644
--- a/packages/renderer/src/renderer.ts
+++ b/packages/renderer/src/renderer.ts
@@ -11,6 +11,7 @@ import { Encoder } from "./encoding/encoder.js";
 import { SnapdomFrameSource } from "./sources/snapdom.js";
 import { mixAudio } from "./audio/mixer.js";
 import { generateFrameTimes } from "./utils/timing.js";
+import { isSupported } from "./compat.js";
 import type { RenderConfig, RenderProgress, RenderResult, AudioSource } from "./types.js";
 
 // ── Codec mapping ─────────────────────────────────────────────────────────────
@@ -55,6 +56,12 @@ export class HyperframesRenderer {
   }
 
   async render(): Promise<RenderResult> {
+    if (!isSupported()) {
+      throw new Error(
+        "Client-side rendering not supported. Requires WebCodecs (Chrome 94+, Firefox 130+, Safari 26+).",
+      );
+    }
+
     const totalStart = performance.now();
     this.cancelled = false;
 
@@ -183,7 +190,7 @@ export class HyperframesRenderer {
     report({ stage: "mixing-audio", progress: 0.7 });
 
     const audioSources: AudioSource[] = media
-      .filter((m) => m.hasAudio !== false)
+      .filter((m) => m.hasAudio === true)
       .map((m) => ({
         src: m.src,
         startTime: m.startTime,
@@ -229,7 +236,7 @@ export class HyperframesRenderer {
     return {
       blob,
       mimeType,
-      durationMs: duration * 1000,
+      durationMs: totalMs,
       perf: {
         captureMs,
         encodeMs,

From 76727306c97ad30a2308641792ee015d58986bb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 02:38:01 +0200
Subject: [PATCH 15/30] fix(renderer): fix iframe polling, add workerUrl
 config, add QA test page

- Replace requestAnimationFrame with setTimeout in __hf protocol polling
  (rAF doesn't fire for off-screen iframes)
- Add workerUrl option to EncoderOptions and RenderConfig for configuring
  the encoding worker URL (needed for bundled deployments)
- Add QA test page with self-contained CSS-animated composition

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/renderer/qa/composition.html     |  98 ++++++++++
 packages/renderer/qa/index.html           | 208 ++++++++++++++++++++++
 packages/renderer/src/encoding/encoder.ts |   4 +-
 packages/renderer/src/renderer.ts         |   1 +
 packages/renderer/src/sources/snapdom.ts  |   2 +-
 packages/renderer/src/types.ts            |   1 +
 6 files changed, 312 insertions(+), 2 deletions(-)
 create mode 100644 packages/renderer/qa/composition.html
 create mode 100644 packages/renderer/qa/index.html

diff --git a/packages/renderer/qa/composition.html b/packages/renderer/qa/composition.html
new file mode 100644
index 00000000..5e1e7a29
--- /dev/null
+++ b/packages/renderer/qa/composition.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    html, body { margin: 0; padding: 0; overflow: hidden; }
+    body { width: 1280px; height: 720px; background: #1a1a2e; }
+    .title {
+      position: absolute;
+      top: 50%; left: 50%;
+      transform: translate(-50%, -50%);
+      font-family: -apple-system, system-ui, sans-serif;
+      font-size: 48px;
+      font-weight: 700;
+      color: white;
+      text-align: center;
+    }
+    .title span {
+      display: block;
+      font-size: 28px;
+      color: #4ecdc4;
+      margin-top: 8px;
+    }
+    .box {
+      position: absolute;
+      width: 120px; height: 120px;
+      border-radius: 16px;
+    }
+    .box-1 { background: #e94560; top: 200px; left: 200px; }
+    .box-2 { background: #4ecdc4; top: 200px; right: 200px; }
+    .box-3 { background: #ffe66d; bottom: 150px; left: 50%; transform: translateX(-50%); }
+    .subtitle {
+      position: absolute;
+      bottom: 40px; left: 50%;
+      transform: translateX(-50%);
+      font-family: monospace;
+      font-size: 18px;
+      color: #666;
+    }
+  </style>
+</head>
+<body>
+  <div class="box box-1" id="box1"></div>
+  <div class="box box-2" id="box2"></div>
+  <div class="box box-3" id="box3"></div>
+  <div class="title" id="title">HyperFrames<span>Client-Side Renderer</span></div>
+  <div class="subtitle" id="subtitle">WebCodecs + MediaBunny + SnapDOM</div>
+
+  <script>
+    // Simple CSS-driven animation state (no external deps)
+    var duration = 3;
+    var elements = {
+      box1: document.getElementById('box1'),
+      box2: document.getElementById('box2'),
+      box3: document.getElementById('box3'),
+      title: document.getElementById('title'),
+      subtitle: document.getElementById('subtitle'),
+    };
+
+    function lerp(a, b, t) { return a + (b - a) * Math.min(1, Math.max(0, t)); }
+    function easeOut(t) { return 1 - Math.pow(1 - t, 3); }
+
+    function seekTo(time) {
+      var t = time / duration;
+
+      // Box 1: slide in from left (0-0.8s)
+      var b1t = easeOut(Math.min(1, time / 0.8));
+      elements.box1.style.transform = 'translateX(' + lerp(-600, 0, b1t) + 'px) rotate(' + lerp(-180, 0, b1t) + 'deg)';
+
+      // Box 2: slide in from right (0.1-0.9s)
+      var b2t = easeOut(Math.min(1, Math.max(0, (time - 0.1) / 0.8)));
+      elements.box2.style.transform = 'translateX(' + lerp(600, 0, b2t) + 'px) rotate(' + lerp(180, 0, b2t) + 'deg)';
+
+      // Box 3: slide up from bottom (0.2-1.0s)
+      var b3t = easeOut(Math.min(1, Math.max(0, (time - 0.2) / 0.8)));
+      elements.box3.style.transform = 'translateX(-50%) translateY(' + lerp(400, 0, b3t) + 'px)';
+
+      // Title: fade in (1.0-1.5s)
+      var tt = Math.min(1, Math.max(0, (time - 1.0) / 0.5));
+      elements.title.style.opacity = tt;
+
+      // Subtitle: fade in (1.5-2.0s)
+      var st = Math.min(1, Math.max(0, (time - 1.5) / 0.5));
+      elements.subtitle.style.opacity = st;
+    }
+
+    // Initialize at time 0
+    seekTo(0);
+
+    // HyperFrames seek protocol
+    window.__hf = {
+      duration: duration,
+      seek: seekTo,
+      media: [],
+    };
+  </script>
+</body>
+</html>
diff --git a/packages/renderer/qa/index.html b/packages/renderer/qa/index.html
new file mode 100644
index 00000000..faafd3b5
--- /dev/null
+++ b/packages/renderer/qa/index.html
@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>HyperFrames Renderer QA</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, system-ui, sans-serif;
+      background: #0f0f23;
+      color: #e0e0e0;
+      padding: 2rem;
+      min-height: 100vh;
+    }
+    h1 { font-size: 1.5rem; margin-bottom: 1rem; color: #fff; }
+    .status {
+      background: #1a1a3e;
+      border-radius: 8px;
+      padding: 1rem;
+      margin-bottom: 1rem;
+      font-family: monospace;
+      font-size: 0.9rem;
+      min-height: 120px;
+      white-space: pre-wrap;
+    }
+    .controls { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
+    button {
+      background: #e94560;
+      color: white;
+      border: none;
+      padding: 0.75rem 1.5rem;
+      border-radius: 6px;
+      font-size: 1rem;
+      cursor: pointer;
+      font-weight: 600;
+    }
+    button:hover { background: #d63850; }
+    button:disabled { opacity: 0.5; cursor: not-allowed; }
+    .progress-bar {
+      width: 100%;
+      height: 8px;
+      background: #1a1a3e;
+      border-radius: 4px;
+      margin-bottom: 1rem;
+      overflow: hidden;
+    }
+    .progress-fill {
+      height: 100%;
+      background: #4ecdc4;
+      width: 0%;
+      transition: width 0.2s;
+      border-radius: 4px;
+    }
+    .result {
+      display: none;
+      background: #1a2e1a;
+      border: 1px solid #4ecdc4;
+      border-radius: 8px;
+      padding: 1rem;
+      margin-top: 1rem;
+    }
+    .result.visible { display: block; }
+    video { max-width: 100%; border-radius: 8px; margin-top: 1rem; }
+    .check { color: #4ecdc4; }
+    .error { color: #e94560; }
+    .perf-table { margin-top: 0.5rem; }
+    .perf-table td { padding: 0.25rem 1rem 0.25rem 0; }
+    .perf-table td:last-child { color: #4ecdc4; font-family: monospace; }
+  </style>
+</head>
+<body>
+  <h1>@hyperframes/renderer — QA Test</h1>
+
+  <div id="compat-status" class="status">Checking browser compatibility...</div>
+
+  <div class="controls">
+    <button id="render-btn" disabled>Render Composition to MP4</button>
+    <button id="download-btn" disabled>Download MP4</button>
+  </div>
+
+  <div class="progress-bar">
+    <div id="progress-fill" class="progress-fill"></div>
+  </div>
+
+  <div id="log" class="status"></div>
+
+  <div id="result" class="result">
+    <h3 class="check">Render Complete</h3>
+    <table class="perf-table">
+      <tr><td>Total time:</td><td id="perf-total"></td></tr>
+      <tr><td>Capture:</td><td id="perf-capture"></td></tr>
+      <tr><td>Encode:</td><td id="perf-encode"></td></tr>
+      <tr><td>Audio:</td><td id="perf-audio"></td></tr>
+      <tr><td>Mux:</td><td id="perf-mux"></td></tr>
+      <tr><td>FPS:</td><td id="perf-fps"></td></tr>
+      <tr><td>File size:</td><td id="perf-size"></td></tr>
+    </table>
+    <video id="output-video" controls></video>
+  </div>
+
+  <script type="module">
+    const log = document.getElementById('log');
+    const compatStatus = document.getElementById('compat-status');
+    const renderBtn = document.getElementById('render-btn');
+    const downloadBtn = document.getElementById('download-btn');
+    const progressFill = document.getElementById('progress-fill');
+    const resultDiv = document.getElementById('result');
+    let resultBlob = null;
+
+    function addLog(msg) {
+      log.textContent += msg + '\n';
+      log.scrollTop = log.scrollHeight;
+    }
+
+    // Check compatibility
+    const hasVideoEncoder = typeof VideoEncoder !== 'undefined';
+    const hasOffscreenCanvas = typeof OffscreenCanvas !== 'undefined';
+    const hasAudioContext = typeof AudioContext !== 'undefined';
+    const hasCreateImageBitmap = typeof createImageBitmap !== 'undefined';
+
+    let compatHtml = '';
+    compatHtml += `VideoEncoder:     ${hasVideoEncoder ? '✅' : '❌'}\n`;
+    compatHtml += `OffscreenCanvas:  ${hasOffscreenCanvas ? '✅' : '❌'}\n`;
+    compatHtml += `AudioContext:     ${hasAudioContext ? '✅' : '❌'}\n`;
+    compatHtml += `createImageBitmap:${hasCreateImageBitmap ? '✅' : '❌'}\n`;
+
+    const isSupported = hasVideoEncoder && hasOffscreenCanvas && hasAudioContext && hasCreateImageBitmap;
+    compatHtml += `\nOverall: ${isSupported ? '✅ All APIs available — ready to render' : '❌ Missing required APIs'}`;
+    compatStatus.textContent = compatHtml;
+
+    if (isSupported) {
+      renderBtn.disabled = false;
+    }
+
+    renderBtn.addEventListener('click', async () => {
+      renderBtn.disabled = true;
+      resultDiv.classList.remove('visible');
+      log.textContent = '';
+      progressFill.style.width = '0%';
+
+      addLog('Starting render...');
+      addLog(`Composition: /qa/composition.html`);
+      addLog(`Settings: 1280x720 @ 30fps, H.264, MP4`);
+      addLog('');
+
+      try {
+        // Dynamic import of the bundled renderer
+        const { render } = await import('../dist/renderer.bundle.js');
+
+        const result = await render({
+          composition: new URL('/qa/composition.html', window.location.origin).href,
+          workerUrl: new URL('/dist/worker.bundle.js', window.location.origin).href,
+          fps: 30,
+          width: 1280,
+          height: 720,
+          codec: 'h264',
+          format: 'mp4',
+          concurrency: 2,
+          onProgress: (p) => {
+            const pct = Math.round(p.progress * 100);
+            progressFill.style.width = `${pct}%`;
+            addLog(`[${p.stage}] ${pct}% ${p.currentFrame ? `frame ${p.currentFrame}/${p.totalFrames}` : ''} ${p.captureRate ? `(${p.captureRate.toFixed(1)} fps)` : ''}`);
+          },
+        });
+
+        resultBlob = result.blob;
+        addLog('');
+        addLog(`✅ Render complete!`);
+        addLog(`   Blob size: ${(result.blob.size / 1024).toFixed(1)} KB`);
+        addLog(`   MIME: ${result.mimeType}`);
+        addLog(`   Render time: ${(result.durationMs / 1000).toFixed(2)}s`);
+
+        // Show result
+        document.getElementById('perf-total').textContent = `${(result.perf.totalMs / 1000).toFixed(2)}s`;
+        document.getElementById('perf-capture').textContent = `${(result.perf.captureMs / 1000).toFixed(2)}s`;
+        document.getElementById('perf-encode').textContent = `${(result.perf.encodeMs / 1000).toFixed(2)}s`;
+        document.getElementById('perf-audio').textContent = `${(result.perf.audioMs / 1000).toFixed(2)}s`;
+        document.getElementById('perf-mux').textContent = `${(result.perf.muxMs / 1000).toFixed(2)}s`;
+        document.getElementById('perf-fps').textContent = `${result.perf.framesPerSecond.toFixed(1)} fps`;
+        document.getElementById('perf-size').textContent = `${(result.blob.size / 1024).toFixed(1)} KB`;
+
+        // Play the video
+        const videoUrl = URL.createObjectURL(result.blob);
+        const video = document.getElementById('output-video');
+        video.src = videoUrl;
+        resultDiv.classList.add('visible');
+
+        downloadBtn.disabled = false;
+      } catch (err) {
+        addLog(`\n❌ Error: ${err.message}`);
+        console.error(err);
+      } finally {
+        renderBtn.disabled = false;
+      }
+    });
+
+    downloadBtn.addEventListener('click', () => {
+      if (!resultBlob) return;
+      const url = URL.createObjectURL(resultBlob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'hyperframes-output.mp4';
+      a.click();
+      URL.revokeObjectURL(url);
+    });
+  </script>
+</body>
+</html>
diff --git a/packages/renderer/src/encoding/encoder.ts b/packages/renderer/src/encoding/encoder.ts
index 20e16140..eaacf42b 100644
--- a/packages/renderer/src/encoding/encoder.ts
+++ b/packages/renderer/src/encoding/encoder.ts
@@ -15,6 +15,7 @@ export interface EncoderOptions {
   bitrate: number;
   format: "mp4" | "webm";
   onFrameEncoded?: (index: number) => void;
+  workerUrl?: URL | string;
 }
 
 export class Encoder {
@@ -29,7 +30,8 @@ export class Encoder {
   }
 
   async init(): Promise<void> {
-    this.worker = new Worker(new URL("./worker.js", import.meta.url), {
+    const workerUrl = this.options.workerUrl ?? new URL("./worker.js", import.meta.url);
+    this.worker = new Worker(workerUrl, {
       type: "module",
     });
 
diff --git a/packages/renderer/src/renderer.ts b/packages/renderer/src/renderer.ts
index 8e47ef5d..c8a24d9d 100644
--- a/packages/renderer/src/renderer.ts
+++ b/packages/renderer/src/renderer.ts
@@ -116,6 +116,7 @@ export class HyperframesRenderer {
       codec,
       bitrate,
       format,
+      workerUrl: this.config.workerUrl,
       onFrameEncoded: (index) => {
         const encodingProgress = (index + 1) / totalFrames;
         report({
diff --git a/packages/renderer/src/sources/snapdom.ts b/packages/renderer/src/sources/snapdom.ts
index c7d8b8a3..f9f0ade7 100644
--- a/packages/renderer/src/sources/snapdom.ts
+++ b/packages/renderer/src/sources/snapdom.ts
@@ -130,7 +130,7 @@ export class SnapdomFrameSource implements FrameSource {
           reject(new Error("Timed out waiting for window.__hf protocol"));
           return;
         }
-        requestAnimationFrame(poll);
+        setTimeout(poll, 50);
       };
       poll();
     });
diff --git a/packages/renderer/src/types.ts b/packages/renderer/src/types.ts
index fd7ac3d5..0d5b898e 100644
--- a/packages/renderer/src/types.ts
+++ b/packages/renderer/src/types.ts
@@ -90,6 +90,7 @@ export interface RenderConfig {
   concurrency?: number;
   onProgress?: (progress: RenderProgress) => void;
   frameSource?: "snapdom" | "draw-element-image";
+  workerUrl?: URL | string;
 }
 
 export interface RenderProgress {

From f10cd056f715987b3acebe5bd298a14c0fdc3c59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 02:48:22 +0200
Subject: [PATCH 16/30] fix(renderer): fix viewport capture, empty audio,
 cancel propagation, progress ETA

- Capture doc.body instead of doc.documentElement in SnapDOM to fix 75% viewport mismatch
- Make audio track conditional (hasAudio flag) to prevent corrupt empty audio tracks
- Add publishConfig for npm publishing
- Wire ProgressTracker for estimatedTimeRemaining and captureRate in progress callbacks
- Recompute video overlay canvas position per-frame for GSAP-animated elements
- Add AbortSignal to captureAll for cancel propagation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/renderer/package.json                | 15 ++++
 packages/renderer/src/capture/iframe-pool.ts  |  7 +-
 .../src/capture/video-frame-injector.ts       | 12 +++-
 packages/renderer/src/encoding/encoder.ts     |  2 +
 packages/renderer/src/encoding/types.ts       |  1 +
 packages/renderer/src/encoding/worker.ts      | 10 +--
 packages/renderer/src/renderer.ts             | 69 ++++++++++++-------
 packages/renderer/src/sources/snapdom.ts      |  4 +-
 8 files changed, 85 insertions(+), 35 deletions(-)

diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index 0205636a..2670bc15 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -7,6 +7,10 @@
     "url": "https://github.com/heygen-com/hyperframes",
     "directory": "packages/renderer"
   },
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -16,6 +20,17 @@
       "types": "./src/index.ts"
     }
   },
+  "publishConfig": {
+    "access": "public",
+    "exports": {
+      ".": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      }
+    },
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts"
+  },
   "scripts": {
     "build": "tsc",
     "test": "vitest run",
diff --git a/packages/renderer/src/capture/iframe-pool.ts b/packages/renderer/src/capture/iframe-pool.ts
index 40ebdc6b..da4ff867 100644
--- a/packages/renderer/src/capture/iframe-pool.ts
+++ b/packages/renderer/src/capture/iframe-pool.ts
@@ -55,13 +55,18 @@ export class IframePool {
     return { duration: first.duration, media: first.media };
   }
 
-  async captureAll(frameTimes: number[], onFrame: (frame: CapturedFrame) => void): Promise<void> {
+  async captureAll(
+    frameTimes: number[],
+    onFrame: (frame: CapturedFrame) => void,
+    signal?: AbortSignal,
+  ): Promise<void> {
     const ranges = distributeFrames(frameTimes.length, this.sources.length);
 
     await Promise.all(
       ranges.map(async (range, workerIdx) => {
         const source = this.sources[workerIdx]!;
         for (let i = range.start; i <= range.end; i++) {
+          if (signal?.aborted) return;
           const time = frameTimes[i]!;
           const bitmap = await source.capture(time);
           onFrame({ bitmap, index: i, time });
diff --git a/packages/renderer/src/capture/video-frame-injector.ts b/packages/renderer/src/capture/video-frame-injector.ts
index 2848aedb..7b349782 100644
--- a/packages/renderer/src/capture/video-frame-injector.ts
+++ b/packages/renderer/src/capture/video-frame-injector.ts
@@ -10,6 +10,7 @@ import type { HfMediaElement } from "../types.js";
 
 interface VideoTrack {
   element: HfMediaElement;
+  originalEl: HTMLVideoElement;
   video: HTMLVideoElement;
   canvas: HTMLCanvasElement;
   ctx: CanvasRenderingContext2D;
@@ -67,7 +68,7 @@ export class VideoFrameInjector {
       // Insert canvas as sibling
       videoEl.parentElement?.insertBefore(canvas, videoEl.nextSibling);
 
-      this.tracks.push({ element, video, canvas, ctx });
+      this.tracks.push({ element, originalEl: videoEl, video, canvas, ctx });
     }
   }
 
@@ -95,6 +96,15 @@ export class VideoFrameInjector {
         });
       }
 
+      // Recompute canvas position from the original element (handles GSAP animations)
+      const rect = track.originalEl.getBoundingClientRect();
+      canvas.width = rect.width;
+      canvas.height = rect.height;
+      canvas.style.left = `${rect.left}px`;
+      canvas.style.top = `${rect.top}px`;
+      canvas.style.width = `${rect.width}px`;
+      canvas.style.height = `${rect.height}px`;
+
       // Draw the current video frame onto the canvas
       ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
     }
diff --git a/packages/renderer/src/encoding/encoder.ts b/packages/renderer/src/encoding/encoder.ts
index eaacf42b..533571a7 100644
--- a/packages/renderer/src/encoding/encoder.ts
+++ b/packages/renderer/src/encoding/encoder.ts
@@ -14,6 +14,7 @@ export interface EncoderOptions {
   codec: string;
   bitrate: number;
   format: "mp4" | "webm";
+  hasAudio?: boolean;
   onFrameEncoded?: (index: number) => void;
   workerUrl?: URL | string;
 }
@@ -56,6 +57,7 @@ export class Encoder {
           codec: this.options.codec,
           bitrate: this.options.bitrate,
           format: this.options.format,
+          hasAudio: this.options.hasAudio ?? false,
         },
       };
       this.worker!.postMessage(msg);
diff --git a/packages/renderer/src/encoding/types.ts b/packages/renderer/src/encoding/types.ts
index 39624463..0891ee47 100644
--- a/packages/renderer/src/encoding/types.ts
+++ b/packages/renderer/src/encoding/types.ts
@@ -15,6 +15,7 @@ export type WorkerInMessage =
         codec: string;
         bitrate: number;
         format: "mp4" | "webm";
+        hasAudio: boolean;
       };
     }
   | {
diff --git a/packages/renderer/src/encoding/worker.ts b/packages/renderer/src/encoding/worker.ts
index 656e7006..41fcb96f 100644
--- a/packages/renderer/src/encoding/worker.ts
+++ b/packages/renderer/src/encoding/worker.ts
@@ -43,8 +43,10 @@ async function handleInit(config: WorkerInMessage & { type: "init" }): Promise<v
   videoSource = new EncodedVideoPacketSource(mbVideoCodec);
   output.addVideoTrack(videoSource, { frameRate: fps });
 
-  audioSource = new AudioSampleSource({ codec: "aac", bitrate: 128_000 });
-  output.addAudioTrack(audioSource);
+  if (config.config.hasAudio) {
+    audioSource = new AudioSampleSource({ codec: "aac", bitrate: 128_000 });
+    output.addAudioTrack(audioSource);
+  }
 
   const encoderConfig: VideoEncoderConfig = {
     codec,
@@ -109,7 +111,7 @@ async function handleSetAudio(msg: WorkerInMessage & { type: "set-audio" }): Pro
 }
 
 async function handleFinalize(): Promise<void> {
-  if (!encoder || !output || !target || !videoSource || !audioSource) {
+  if (!encoder || !output || !target || !videoSource) {
     post({ type: "error", message: "Cannot finalize — not initialized" });
     return;
   }
@@ -117,7 +119,7 @@ async function handleFinalize(): Promise<void> {
   await encoder.flush();
   encoder.close();
   videoSource.close();
-  audioSource.close();
+  if (audioSource) audioSource.close();
   await output.finalize();
 
   const buffer = target.buffer;
diff --git a/packages/renderer/src/renderer.ts b/packages/renderer/src/renderer.ts
index c8a24d9d..87f596ae 100644
--- a/packages/renderer/src/renderer.ts
+++ b/packages/renderer/src/renderer.ts
@@ -11,6 +11,7 @@ import { Encoder } from "./encoding/encoder.js";
 import { SnapdomFrameSource } from "./sources/snapdom.js";
 import { mixAudio } from "./audio/mixer.js";
 import { generateFrameTimes } from "./utils/timing.js";
+import { ProgressTracker } from "./utils/progress.js";
 import { isSupported } from "./compat.js";
 import type { RenderConfig, RenderProgress, RenderResult, AudioSource } from "./types.js";
 
@@ -46,6 +47,7 @@ export class HyperframesRenderer {
   private cancelled = false;
   private pool: IframePool | null = null;
   private encoder: Encoder | null = null;
+  private abortController: AbortController | null = null;
 
   constructor(config: RenderConfig) {
     this.config = config;
@@ -53,6 +55,7 @@ export class HyperframesRenderer {
 
   cancel(): void {
     this.cancelled = true;
+    this.abortController?.abort();
   }
 
   async render(): Promise<RenderResult> {
@@ -108,6 +111,21 @@ export class HyperframesRenderer {
       throw new Error("Composition has zero duration — nothing to render");
     }
 
+    const progressTracker = new ProgressTracker(totalFrames);
+    const abortController = new AbortController();
+    this.abortController = abortController;
+
+    // ── Pre-compute audio sources (needed for hasAudio flag) ─────────────────
+    const audioSources: AudioSource[] = media
+      .filter((m) => m.hasAudio === true)
+      .map((m) => ({
+        src: m.src,
+        startTime: m.startTime,
+        endTime: m.endTime,
+        mediaOffset: m.mediaOffset,
+        volume: m.volume,
+      }));
+
     // ── Step 3: Initialise encoder ────────────────────────────────────────────
     const encoder = new Encoder({
       width,
@@ -116,6 +134,7 @@ export class HyperframesRenderer {
       codec,
       bitrate,
       format,
+      hasAudio: audioSources.length > 0,
       workerUrl: this.config.workerUrl,
       onFrameEncoded: (index) => {
         const encodingProgress = (index + 1) / totalFrames;
@@ -155,25 +174,33 @@ export class HyperframesRenderer {
       }
     };
 
-    await pool.captureAll(frameTimes, ({ bitmap, index }) => {
-      if (this.cancelled) {
-        bitmap.close();
-        return;
-      }
+    await pool.captureAll(
+      frameTimes,
+      ({ bitmap, index }) => {
+        if (this.cancelled) {
+          bitmap.close();
+          return;
+        }
 
-      reorderBuffer.set(index, bitmap);
-      capturedCount++;
+        reorderBuffer.set(index, bitmap);
+        capturedCount++;
 
-      const captureProgress = capturedCount / totalFrames;
-      report({
-        stage: "capturing",
-        progress: 0.05 + captureProgress * 0.05,
-        currentFrame: capturedCount,
-        totalFrames,
-      });
+        progressTracker.recordFrame(capturedCount, performance.now() - captureStart);
 
-      flushBuffer();
-    });
+        const captureProgress = capturedCount / totalFrames;
+        report({
+          stage: "capturing",
+          progress: 0.05 + captureProgress * 0.05,
+          currentFrame: capturedCount,
+          totalFrames,
+          estimatedTimeRemaining: progressTracker.estimateTimeRemaining(),
+          captureRate: progressTracker.captureRate(),
+        });
+
+        flushBuffer();
+      },
+      abortController.signal,
+    );
 
     // Flush any remaining buffered frames
     flushBuffer();
@@ -190,16 +217,6 @@ export class HyperframesRenderer {
 
     report({ stage: "mixing-audio", progress: 0.7 });
 
-    const audioSources: AudioSource[] = media
-      .filter((m) => m.hasAudio === true)
-      .map((m) => ({
-        src: m.src,
-        startTime: m.startTime,
-        endTime: m.endTime,
-        mediaOffset: m.mediaOffset,
-        volume: m.volume,
-      }));
-
     if (audioSources.length > 0) {
       const mixResult = await mixAudio({
         duration,
diff --git a/packages/renderer/src/sources/snapdom.ts b/packages/renderer/src/sources/snapdom.ts
index f9f0ade7..1f1bba69 100644
--- a/packages/renderer/src/sources/snapdom.ts
+++ b/packages/renderer/src/sources/snapdom.ts
@@ -94,9 +94,7 @@ export class SnapdomFrameSource implements FrameSource {
       throw new Error("iframe has no document");
     }
 
-    const canvas = await snapdom.toCanvas(doc.documentElement, {
-      width: this.config.width,
-      height: this.config.height,
+    const canvas = await snapdom.toCanvas(doc.body, {
       scale: this.config.devicePixelRatio ?? 1,
     });
 

From f9489afb98b0834410a0e7e2398f9f3d78cfe9eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 05:20:11 +0200
Subject: [PATCH 17/30] feat(renderer): add drawElementImage + tab-capture
 frame sources, regression harness

drawElementImage: pixel-perfect capture via html-in-canvas API using
<canvas layoutsubtree> with iframe child. Achieves 42 dB PSNR vs 30 dB
for SnapDOM. Requires Chrome --enable-blink-features=CanvasDrawElement.

Tab-capture: experimental getDisplayMedia-based capture.

Also adds regression parity scripts for compiling test compositions and
comparing PSNR against golden reference renders.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/renderer/scripts/compile-test.ts     |  88 +++
 .../renderer/scripts/regression-parity.ts     | 505 ++++++++++++++++++
 packages/renderer/scripts/run-parity-test.sh  | 150 ++++++
 packages/renderer/src/compat.ts               |   8 +-
 packages/renderer/src/index.ts                |   5 +
 packages/renderer/src/renderer.ts             | 155 ++++--
 .../src/sources/draw-element-image.ts         | 157 ++++++
 packages/renderer/src/sources/tab-capture.ts  | 213 ++++++++
 packages/renderer/src/types.ts                |   2 +-
 9 files changed, 1243 insertions(+), 40 deletions(-)
 create mode 100644 packages/renderer/scripts/compile-test.ts
 create mode 100644 packages/renderer/scripts/regression-parity.ts
 create mode 100755 packages/renderer/scripts/run-parity-test.sh
 create mode 100644 packages/renderer/src/sources/draw-element-image.ts
 create mode 100644 packages/renderer/src/sources/tab-capture.ts

diff --git a/packages/renderer/scripts/compile-test.ts b/packages/renderer/scripts/compile-test.ts
new file mode 100644
index 00000000..471fbdf0
--- /dev/null
+++ b/packages/renderer/scripts/compile-test.ts
@@ -0,0 +1,88 @@
+/**
+ * Compile a single test composition via the producer's htmlCompiler.
+ * Usage: npx tsx --esm packages/renderer/scripts/compile-test.ts <test-name>
+ */
+import { writeFileSync, mkdirSync } from "node:fs";
+import { resolve, join } from "node:path";
+import { compileForRender } from "../../producer/src/services/htmlCompiler.js";
+import { getVerifiedHyperframeRuntimeSource } from "../../producer/src/services/hyperframeRuntimeLoader.js";
+
+const testName = process.argv[2];
+if (!testName) {
+  console.error("Usage: npx tsx packages/renderer/scripts/compile-test.ts <test-name>");
+  process.exit(1);
+}
+
+const srcDir = resolve(`packages/producer/tests/${testName}/src`);
+const htmlPath = join(srcDir, "index.html");
+const outputDir = resolve(`renders/parity-regression/${testName}`);
+mkdirSync(outputDir, { recursive: true });
+
+console.log(`Compiling ${testName}...`);
+const result = await compileForRender(srcDir, htmlPath, outputDir);
+
+// Inject the HyperFrames runtime IIFE and the __player → __hf bridge.
+// The producer's file server normally serves these separately,
+// but for client-side rendering we need them inline.
+const runtimeSource = getVerifiedHyperframeRuntimeSource();
+
+// Bridge script: maps window.__player (set by runtime) → window.__hf (engine protocol)
+const bridgeScript = `(function() {
+  function getDeclaredDuration() {
+    var root = document.querySelector('[data-composition-id]');
+    if (!root) return 0;
+    var d = Number(root.getAttribute('data-duration'));
+    return Number.isFinite(d) && d > 0 ? d : 0;
+  }
+  function bridge() {
+    var p = window.__player;
+    if (!p || typeof p.renderSeek !== "function" || typeof p.getDuration !== "function") {
+      return false;
+    }
+    window.__hf = {
+      get duration() {
+        var d = p.getDuration();
+        return d > 0 ? d : getDeclaredDuration();
+      },
+      seek: function(t) { p.renderSeek(t); },
+    };
+    return true;
+  }
+  if (bridge()) return;
+  var iv = setInterval(function() {
+    if (bridge()) clearInterval(iv);
+  }, 50);
+})();`;
+
+const runtimeTag = `<script data-hyperframes-render-runtime>${runtimeSource}</script>`;
+const bridgeTag = `<script data-hyperframes-bridge>${bridgeScript}</script>`;
+const htmlWithRuntime = result.html.replace("</body>", `${runtimeTag}\n${bridgeTag}\n</body>`);
+
+writeFileSync(join(outputDir, "compiled.html"), htmlWithRuntime);
+writeFileSync(
+  join(outputDir, "compile-meta.json"),
+  JSON.stringify(
+    {
+      width: result.width,
+      height: result.height,
+      staticDuration: result.staticDuration,
+      videoCount: result.videos.length,
+      audioCount: result.audios.length,
+      htmlLength: result.html.length,
+    },
+    null,
+    2,
+  ),
+);
+
+console.log(
+  JSON.stringify({
+    ok: true,
+    width: result.width,
+    height: result.height,
+    staticDuration: result.staticDuration,
+    videos: result.videos.length,
+    audios: result.audios.length,
+    htmlLength: result.html.length,
+  }),
+);
diff --git a/packages/renderer/scripts/regression-parity.ts b/packages/renderer/scripts/regression-parity.ts
new file mode 100644
index 00000000..b475b176
--- /dev/null
+++ b/packages/renderer/scripts/regression-parity.ts
@@ -0,0 +1,505 @@
+#!/usr/bin/env npx tsx
+/**
+ * Regression Parity Harness
+ *
+ * Compiles test compositions via the server-side producer, then renders them
+ * via the client-side renderer in a real browser, then compares the output
+ * against golden reference videos using PSNR.
+ *
+ * Usage:
+ *   npx tsx packages/renderer/scripts/regression-parity.ts [test-name...]
+ *   npx tsx packages/renderer/scripts/regression-parity.ts chat vignelli-stacking
+ *   npx tsx packages/renderer/scripts/regression-parity.ts  # runs all tests
+ */
+
+import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync, rmSync } from "node:fs";
+import { resolve, join } from "node:path";
+import { execSync, spawnSync } from "node:child_process";
+
+// ── Config ──────────────────────────────────────────────────────────────────
+
+const PRODUCER_TESTS_DIR = resolve("packages/producer/tests");
+const RENDERER_DIST = resolve("packages/renderer/dist");
+const PARITY_OUTPUT_DIR = resolve("renders/parity-regression");
+const MIN_PSNR = 25; // dB — threshold for "visually similar" (30+ = near-identical)
+const CHECKPOINTS = 10; // number of frames to compare
+const SERVER_PORT = 4789;
+
+// ── Types ───────────────────────────────────────────────────────────────────
+
+type TestMeta = {
+  name: string;
+  description: string;
+  tags: string[];
+  minPsnr: number;
+  maxFrameFailures: number;
+  renderConfig: { fps: 24 | 30 | 60; format?: string };
+};
+
+type TestSuite = {
+  id: string;
+  dir: string;
+  srcDir: string;
+  meta: TestMeta;
+  goldenVideo: string;
+};
+
+type CheckpointResult = {
+  time: number;
+  psnr: number;
+  passed: boolean;
+};
+
+type TestResult = {
+  suite: TestSuite;
+  passed: boolean;
+  compileOk: boolean;
+  renderOk: boolean;
+  checkpoints: CheckpointResult[];
+  avgPsnr: number;
+  minPsnr: number;
+  failedFrames: number;
+  renderTimeMs: number;
+  error?: string;
+};
+
+// ── Discovery ───────────────────────────────────────────────────────────────
+
+function discoverTests(filterNames: string[]): TestSuite[] {
+  const dirs = readdirSync(PRODUCER_TESTS_DIR, { withFileTypes: true })
+    .filter((d) => d.isDirectory())
+    .map((d) => d.name)
+    .filter((name) => {
+      if (filterNames.length > 0) return filterNames.includes(name);
+      return true;
+    });
+
+  const suites: TestSuite[] = [];
+  for (const name of dirs) {
+    const dir = join(PRODUCER_TESTS_DIR, name);
+    const metaPath = join(dir, "meta.json");
+    const srcIndex = join(dir, "src", "index.html");
+    const goldenMp4 = join(dir, "output", "output.mp4");
+    const goldenWebm = join(dir, "output", "output.webm");
+
+    if (!existsSync(metaPath) || !existsSync(srcIndex)) continue;
+    const goldenVideo = existsSync(goldenMp4)
+      ? goldenMp4
+      : existsSync(goldenWebm)
+        ? goldenWebm
+        : "";
+    if (!goldenVideo) continue;
+
+    const meta: TestMeta = JSON.parse(readFileSync(metaPath, "utf-8"));
+
+    // Skip tests tagged "slow" for initial parity — these are long compositions
+    // with video elements that need more setup
+    if (meta.tags.includes("slow") && filterNames.length === 0) continue;
+
+    suites.push({
+      id: name,
+      dir,
+      srcDir: join(dir, "src"),
+      meta,
+      goldenVideo,
+    });
+  }
+
+  return suites;
+}
+
+// ── Step 1: Compile ─────────────────────────────────────────────────────────
+
+async function compileComposition(suite: TestSuite, outputDir: string): Promise<string> {
+  const compiledPath = join(outputDir, "compiled.html");
+
+  // Use the producer's compileForRender via a small script
+  const compileScript = `
+    import { compileForRender } from "${resolve("packages/producer/src/services/htmlCompiler.js")}";
+    const result = await compileForRender(
+      "${suite.srcDir}",
+      "${join(suite.srcDir, "index.html")}",
+      "${outputDir}",
+    );
+    // Write the compiled HTML with runtime injected
+    const fs = await import("fs");
+    fs.writeFileSync("${compiledPath}", result.html);
+    // Write metadata
+    fs.writeFileSync("${join(outputDir, "compile-meta.json")}", JSON.stringify({
+      width: result.width,
+      height: result.height,
+      staticDuration: result.staticDuration,
+      videoCount: result.videos.length,
+      audioCount: result.audios.length,
+    }));
+    console.log(JSON.stringify({ ok: true, width: result.width, height: result.height }));
+  `;
+
+  const scriptPath = join(outputDir, "_compile.ts");
+  writeFileSync(scriptPath, compileScript);
+
+  const result = spawnSync("npx", ["tsx", scriptPath], {
+    cwd: resolve("."),
+    encoding: "utf-8",
+    timeout: 60_000,
+    env: { ...process.env, NODE_NO_WARNINGS: "1" },
+  });
+
+  if (result.status !== 0) {
+    throw new Error(`Compilation failed for ${suite.id}: ${result.stderr?.slice(-500)}`);
+  }
+
+  if (!existsSync(compiledPath)) {
+    throw new Error(`Compiled HTML not created for ${suite.id}`);
+  }
+
+  return compiledPath;
+}
+
+// ── Step 2: Render client-side ──────────────────────────────────────────────
+
+async function renderClientSide(
+  suite: TestSuite,
+  compiledHtmlPath: string,
+  outputDir: string,
+): Promise<{ videoPath: string; durationMs: number }> {
+  const metaJson = JSON.parse(readFileSync(join(outputDir, "compile-meta.json"), "utf-8"));
+  const width = metaJson.width || 1080;
+  const height = metaJson.height || 1920;
+  const fps = suite.meta.renderConfig.fps;
+
+  // Create a test page that loads the compiled HTML and renders it
+  const testPagePath = join(outputDir, "render-test.html");
+  const videoOutputPath = join(outputDir, "client-render.mp4");
+
+  const testPage = `<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>Parity Test: ${suite.id}</title></head>
+<body>
+<script type="module">
+  const { render } = await import('http://localhost:${SERVER_PORT}/dist/renderer.bundle.js');
+
+  try {
+    const result = await render({
+      composition: 'http://localhost:${SERVER_PORT}/parity/${suite.id}/compiled.html',
+      fps: ${fps},
+      width: ${width},
+      height: ${height},
+      codec: 'h264',
+      format: 'mp4',
+      concurrency: 1,
+      workerUrl: 'http://localhost:${SERVER_PORT}/dist/worker.bundle.js',
+      onProgress: (p) => {
+        document.title = p.stage + ' ' + Math.round(p.progress * 100) + '%';
+      },
+    });
+
+    // Store result globally so the harness can read it
+    window.__renderResult = {
+      ok: true,
+      blobSize: result.blob.size,
+      durationMs: result.durationMs,
+      mimeType: result.mimeType,
+    };
+
+    // Create download link with the blob
+    const url = URL.createObjectURL(result.blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'output.mp4';
+    a.id = 'download-link';
+    document.body.appendChild(a);
+    document.title = 'DONE';
+  } catch (err) {
+    window.__renderResult = { ok: false, error: err.message };
+    document.title = 'ERROR: ' + err.message;
+  }
+</script>
+</body></html>`;
+
+  writeFileSync(testPagePath, testPage);
+  return { videoPath: videoOutputPath, durationMs: 0 };
+}
+
+// ── Step 3: PSNR comparison ─────────────────────────────────────────────────
+
+function psnrAtCheckpoint(videoA: string, videoB: string, timeSec: number): number {
+  const result = spawnSync(
+    "ffmpeg",
+    [
+      "-ss",
+      String(timeSec),
+      "-i",
+      videoA,
+      "-ss",
+      String(timeSec),
+      "-i",
+      videoB,
+      "-frames:v",
+      "1",
+      "-lavfi",
+      "psnr=stats_file=/dev/null",
+      "-f",
+      "null",
+      "-",
+    ],
+    { encoding: "utf-8", timeout: 15_000 },
+  );
+
+  const output = (result.stderr || "") + (result.stdout || "");
+  const match = output.match(/average:(\d+\.?\d*|inf)/);
+  if (!match) return 0;
+  if (match[1] === "inf") return 100; // identical frames
+  return parseFloat(match[1]!);
+}
+
+// ── Orchestrator ────────────────────────────────────────────────────────────
+
+async function runTest(suite: TestSuite): Promise<TestResult> {
+  const testOutputDir = join(PARITY_OUTPUT_DIR, suite.id);
+  if (existsSync(testOutputDir)) rmSync(testOutputDir, { recursive: true });
+  mkdirSync(testOutputDir, { recursive: true });
+
+  const result: TestResult = {
+    suite,
+    passed: false,
+    compileOk: false,
+    renderOk: false,
+    checkpoints: [],
+    avgPsnr: 0,
+    minPsnr: 0,
+    failedFrames: 0,
+    renderTimeMs: 0,
+  };
+
+  // Step 1: Compile
+  console.log(`  [${suite.id}] Compiling...`);
+  let compiledPath: string;
+  try {
+    compiledPath = await compileComposition(suite, testOutputDir);
+    result.compileOk = true;
+    console.log(`  [${suite.id}] ✓ Compiled`);
+  } catch (err) {
+    result.error = `Compile failed: ${err instanceof Error ? err.message : String(err)}`;
+    console.log(`  [${suite.id}] ✗ ${result.error}`);
+    return result;
+  }
+
+  // Step 2: Render via browser (agent-browser)
+  console.log(`  [${suite.id}] Rendering client-side...`);
+  const renderStart = Date.now();
+  try {
+    await renderClientSide(suite, compiledPath, testOutputDir);
+
+    // Use agent-browser to open the test page and wait for render
+    const testPageUrl = `http://localhost:${SERVER_PORT}/parity/${suite.id}/render-test.html`;
+
+    execSync(`agent-browser --session parity-${suite.id} open "${testPageUrl}"`, {
+      encoding: "utf-8",
+      timeout: 10_000,
+    });
+
+    // Wait for render to complete (title changes to DONE or ERROR)
+    spawnSync(
+      "agent-browser",
+      [
+        "--session",
+        `parity-${suite.id}`,
+        "wait",
+        "--fn",
+        "document.title.startsWith('DONE') || document.title.startsWith('ERROR')",
+        "--timeout",
+        "120000",
+      ],
+      { encoding: "utf-8", timeout: 130_000 },
+    );
+
+    // Check result
+    const titleResult = spawnSync(
+      "agent-browser",
+      ["--session", `parity-${suite.id}`, "get", "title"],
+      { encoding: "utf-8", timeout: 5_000 },
+    );
+    const title = (titleResult.stdout || "").trim();
+
+    if (title.startsWith("ERROR")) {
+      result.error = `Client-side render failed: ${title}`;
+      console.log(`  [${suite.id}] ✗ ${result.error}`);
+      execSync(`agent-browser --session parity-${suite.id} close`, {
+        encoding: "utf-8",
+        timeout: 5_000,
+      }).toString();
+      return result;
+    }
+
+    // Download the rendered video
+    spawnSync(
+      "agent-browser",
+      [
+        "--session",
+        `parity-${suite.id}`,
+        "download",
+        "#download-link",
+        join(testOutputDir, "client-render.mp4"),
+      ],
+      { encoding: "utf-8", timeout: 30_000 },
+    );
+
+    execSync(`agent-browser --session parity-${suite.id} close`, {
+      encoding: "utf-8",
+      timeout: 5_000,
+    }).toString();
+
+    result.renderTimeMs = Date.now() - renderStart;
+    const clientVideoPath = join(testOutputDir, "client-render.mp4");
+
+    if (!existsSync(clientVideoPath)) {
+      result.error = "Client-side render produced no output file";
+      console.log(`  [${suite.id}] ✗ No output file`);
+      return result;
+    }
+
+    result.renderOk = true;
+    console.log(`  [${suite.id}] ✓ Rendered (${result.renderTimeMs}ms)`);
+
+    // Step 3: PSNR comparison
+    console.log(`  [${suite.id}] Comparing PSNR...`);
+
+    // Get video duration
+    const probeResult = spawnSync(
+      "ffprobe",
+      ["-v", "error", "-show_entries", "format=duration", "-of", "csv=p=0", clientVideoPath],
+      { encoding: "utf-8", timeout: 10_000 },
+    );
+    const videoDuration = parseFloat((probeResult.stdout || "0").trim()) || 3;
+
+    for (let i = 0; i < CHECKPOINTS; i++) {
+      const time = (videoDuration * i) / CHECKPOINTS;
+      const psnr = psnrAtCheckpoint(clientVideoPath, suite.goldenVideo, time);
+      const passed = psnr >= (suite.meta.minPsnr || MIN_PSNR);
+      result.checkpoints.push({ time, psnr, passed });
+    }
+
+    const psnrValues = result.checkpoints.map((c) => c.psnr);
+    result.avgPsnr = psnrValues.reduce((a, b) => a + b, 0) / psnrValues.length;
+    result.minPsnr = Math.min(...psnrValues);
+    result.failedFrames = result.checkpoints.filter((c) => !c.passed).length;
+    result.passed = result.failedFrames <= (suite.meta.maxFrameFailures || 0);
+
+    console.log(
+      `  [${suite.id}] ${result.passed ? "✓" : "✗"} PSNR avg=${result.avgPsnr.toFixed(1)}dB min=${result.minPsnr.toFixed(1)}dB failed=${result.failedFrames}/${CHECKPOINTS}`,
+    );
+  } catch (err) {
+    result.error = `Render failed: ${err instanceof Error ? err.message : String(err)}`;
+    console.log(`  [${suite.id}] ✗ ${result.error}`);
+  }
+
+  return result;
+}
+
+// ── Main ────────────────────────────────────────────────────────────────────
+
+async function main() {
+  const filterNames = process.argv.slice(2);
+  const suites = discoverTests(filterNames);
+
+  if (suites.length === 0) {
+    console.error("No test suites found.");
+    process.exit(1);
+  }
+
+  console.log(`\n@hyperframes/renderer — Regression Parity Harness`);
+  console.log(`${"─".repeat(50)}`);
+  console.log(`Tests: ${suites.length}`);
+  console.log(`Checkpoints per test: ${CHECKPOINTS}`);
+  console.log(`Min PSNR threshold: ${MIN_PSNR} dB\n`);
+
+  // Ensure bundles exist
+  if (!existsSync(join(RENDERER_DIST, "renderer.bundle.js"))) {
+    console.log("Building renderer bundles...");
+    execSync(
+      "npx esbuild packages/renderer/src/index.ts --bundle --format=esm --outfile=packages/renderer/dist/renderer.bundle.js --external:@hyperframes/core --platform=browser",
+      { encoding: "utf-8" },
+    );
+    execSync(
+      "npx esbuild packages/renderer/src/encoding/worker.ts --bundle --format=esm --outfile=packages/renderer/dist/worker.bundle.js --platform=browser",
+      { encoding: "utf-8" },
+    );
+  }
+
+  // Start static file server
+  mkdirSync(PARITY_OUTPUT_DIR, { recursive: true });
+
+  console.log(`Starting file server on port ${SERVER_PORT}...`);
+  const serverProcess = require("child_process").spawn(
+    "npx",
+    ["serve", "-l", String(SERVER_PORT), "-C", "."],
+    { cwd: resolve("packages/renderer"), detached: true, stdio: "ignore" },
+  );
+  serverProcess.unref();
+
+  // Also serve the parity output directory
+  // Actually, serve from the repo root so both dist/ and parity/ are accessible
+  serverProcess.kill();
+  const rootServer = require("child_process").spawn(
+    "npx",
+    ["serve", "-l", String(SERVER_PORT), "-C", "."],
+    { cwd: resolve("."), detached: true, stdio: "ignore" },
+  );
+  rootServer.unref();
+
+  // Wait for server to start
+  await new Promise((r) => setTimeout(r, 2000));
+
+  // Symlink renderer dist into a place the server can find
+  const distLink = join(PARITY_OUTPUT_DIR, "..", "dist");
+  if (!existsSync(distLink)) {
+    const { symlinkSync } = require("fs");
+    try {
+      symlinkSync(RENDERER_DIST, distLink);
+    } catch {}
+  }
+
+  const results: TestResult[] = [];
+  for (const suite of suites) {
+    const result = await runTest(suite);
+    results.push(result);
+  }
+
+  // Summary
+  console.log(`\n${"═".repeat(60)}`);
+  console.log("REGRESSION PARITY RESULTS");
+  console.log(`${"═".repeat(60)}\n`);
+
+  let totalPassed = 0;
+  let totalFailed = 0;
+
+  for (const r of results) {
+    const icon = r.passed ? "✓" : "✗";
+    const psnrStr = r.renderOk
+      ? `avg=${r.avgPsnr.toFixed(1)}dB min=${r.minPsnr.toFixed(1)}dB`
+      : "N/A";
+    console.log(`  ${icon}  ${r.suite.id.padEnd(30)} ${psnrStr.padEnd(30)} ${r.error || ""}`);
+    if (r.passed) totalPassed++;
+    else totalFailed++;
+  }
+
+  console.log(`\n  Passed: ${totalPassed}/${results.length}`);
+  console.log(`  Failed: ${totalFailed}/${results.length}\n`);
+
+  // Write JSON report
+  const reportPath = join(PARITY_OUTPUT_DIR, "parity-report.json");
+  writeFileSync(reportPath, JSON.stringify(results, null, 2));
+  console.log(`Report: ${reportPath}`);
+
+  // Cleanup server
+  try {
+    rootServer.kill();
+  } catch {}
+
+  process.exit(totalFailed > 0 ? 1 : 0);
+}
+
+main().catch((err) => {
+  console.error("Fatal:", err);
+  process.exit(1);
+});
diff --git a/packages/renderer/scripts/run-parity-test.sh b/packages/renderer/scripts/run-parity-test.sh
new file mode 100755
index 00000000..111602e1
--- /dev/null
+++ b/packages/renderer/scripts/run-parity-test.sh
@@ -0,0 +1,150 @@
+#!/bin/bash
+# Run a single client-side render parity test
+# Usage: ./run-parity-test.sh <test-name> <width> <height> <fps>
+set -e
+
+TEST_NAME=$1
+WIDTH=${2:-1080}
+HEIGHT=${3:-1920}
+FPS=${4:-30}
+PORT=4789
+OUTPUT_DIR="renders/parity-regression/$TEST_NAME"
+
+echo "[$TEST_NAME] Rendering ${WIDTH}x${HEIGHT} @ ${FPS}fps..."
+
+# Create a render page
+cat > "$OUTPUT_DIR/render-page.html" <<HTMLEOF
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>Rendering...</title></head>
+<body>
+<pre id="log"></pre>
+<script type="module">
+function log(msg) {
+  document.getElementById('log').textContent += msg + '\\n';
+}
+try {
+  const { render } = await import('http://localhost:${PORT}/packages/renderer/dist/renderer.bundle.js');
+  log('Renderer loaded, starting render...');
+
+  const result = await render({
+    composition: 'http://localhost:${PORT}/${OUTPUT_DIR}/compiled.html',
+    fps: ${FPS},
+    width: ${WIDTH},
+    height: ${HEIGHT},
+    codec: 'h264',
+    format: 'mp4',
+    concurrency: 1,
+    workerUrl: 'http://localhost:${PORT}/packages/renderer/dist/worker.bundle.js',
+    onProgress: (p) => {
+      document.title = p.stage + ' ' + Math.round(p.progress * 100) + '%';
+    },
+  });
+
+  log('Render complete! Blob size: ' + result.blob.size);
+
+  // Store blob globally for extraction
+  window.__renderBlob = result.blob;
+  document.title = 'DONE:' + result.blob.size;
+} catch (err) {
+  log('ERROR: ' + err.message);
+  document.title = 'ERROR:' + err.message;
+}
+</script>
+</body></html>
+HTMLEOF
+
+# Open in browser
+agent-browser --session "parity-$TEST_NAME" open "http://localhost:${PORT}/${OUTPUT_DIR}/render-page.html" 2>&1 | tail -1
+
+# Wait for render to complete (up to 2 minutes)
+agent-browser --session "parity-$TEST_NAME" wait --fn "document.title.startsWith('DONE') || document.title.startsWith('ERROR')" --timeout 120000 2>&1 | tail -1
+
+# Get title (contains result)
+TITLE=$(agent-browser --session "parity-$TEST_NAME" get title 2>&1)
+echo "[$TEST_NAME] Title: $TITLE"
+
+if [[ "$TITLE" == ERROR* ]]; then
+  echo "[$TEST_NAME] ✗ Render failed: $TITLE"
+  agent-browser --session "parity-$TEST_NAME" close 2>&1 > /dev/null
+  exit 1
+fi
+
+# Extract rendered video as base64 chunks and save to disk
+echo "[$TEST_NAME] Extracting video blob..."
+agent-browser --session "parity-$TEST_NAME" eval --stdin <<'EXTRACTEOF' > "$OUTPUT_DIR/client-render.b64"
+(async () => {
+  const blob = window.__renderBlob;
+  if (!blob) return 'ERROR:no blob';
+  const buf = await blob.arrayBuffer();
+  const bytes = new Uint8Array(buf);
+  let result = '';
+  for (let i = 0; i < bytes.length; i += 8192) {
+    result += String.fromCharCode.apply(null, bytes.subarray(i, i + 8192));
+  }
+  return btoa(result);
+})()
+EXTRACTEOF
+
+# Close browser
+agent-browser --session "parity-$TEST_NAME" close 2>&1 > /dev/null
+
+# Decode base64 to MP4
+if [[ ! -f "$OUTPUT_DIR/client-render.b64" ]]; then
+  echo "[$TEST_NAME] ✗ Failed to extract video blob"
+  exit 1
+fi
+
+# Strip quotes from the base64 output
+sed -i '' 's/^"//;s/"$//' "$OUTPUT_DIR/client-render.b64" 2>/dev/null || sed -i 's/^"//;s/"$//' "$OUTPUT_DIR/client-render.b64"
+base64 -d < "$OUTPUT_DIR/client-render.b64" > "$OUTPUT_DIR/client-render.mp4" 2>/dev/null || base64 --decode < "$OUTPUT_DIR/client-render.b64" > "$OUTPUT_DIR/client-render.mp4"
+
+if [[ ! -f "$OUTPUT_DIR/client-render.mp4" ]] || [[ ! -s "$OUTPUT_DIR/client-render.mp4" ]]; then
+  echo "[$TEST_NAME] ✗ Failed to decode video"
+  exit 1
+fi
+
+FILE_SIZE=$(stat -f%z "$OUTPUT_DIR/client-render.mp4" 2>/dev/null || stat -c%s "$OUTPUT_DIR/client-render.mp4" 2>/dev/null)
+echo "[$TEST_NAME] ✓ Rendered: ${FILE_SIZE} bytes"
+
+# PSNR comparison against golden reference
+GOLDEN="packages/producer/tests/$TEST_NAME/output/output.mp4"
+if [[ ! -f "$GOLDEN" ]]; then
+  GOLDEN="packages/producer/tests/$TEST_NAME/output/output.webm"
+fi
+
+if [[ ! -f "$GOLDEN" ]]; then
+  echo "[$TEST_NAME] ⚠ No golden reference found, skipping PSNR"
+  exit 0
+fi
+
+# Get video duration
+DURATION=$(ffprobe -v error -show_entries format=duration -of csv=p=0 "$OUTPUT_DIR/client-render.mp4" 2>/dev/null | head -1)
+echo "[$TEST_NAME] Duration: ${DURATION}s"
+
+# Compare at 10 checkpoints
+TOTAL_PSNR=0
+FAILED=0
+CHECKED=0
+for i in $(seq 0 9); do
+  TIME=$(echo "$DURATION * $i / 10" | bc -l 2>/dev/null || echo "0")
+  PSNR_RAW=$(ffmpeg -ss "$TIME" -i "$OUTPUT_DIR/client-render.mp4" -ss "$TIME" -i "$GOLDEN" -frames:v 1 -lavfi "psnr=stats_file=/dev/null" -f null - 2>&1)
+  PSNR=$(echo "$PSNR_RAW" | grep -o 'average:[0-9.]*\|average:inf' | sed 's/average://' | head -1)
+
+  if [[ "$PSNR" == "inf" ]]; then
+    PSNR=100
+  fi
+
+  PASS="✓"
+  if (( $(echo "$PSNR < 25" | bc -l 2>/dev/null || echo 1) )); then
+    PASS="✗"
+    FAILED=$((FAILED + 1))
+  fi
+
+  echo "  ${PASS} checkpoint $i (t=${TIME}s): PSNR=${PSNR}dB"
+  TOTAL_PSNR=$(echo "$TOTAL_PSNR + ${PSNR:-0}" | bc -l 2>/dev/null || echo "$TOTAL_PSNR")
+  CHECKED=$((CHECKED + 1))
+done
+
+AVG_PSNR=$(echo "$TOTAL_PSNR / $CHECKED" | bc -l 2>/dev/null || echo "0")
+echo ""
+echo "[$TEST_NAME] Avg PSNR: ${AVG_PSNR}dB | Failed: ${FAILED}/${CHECKED}"
diff --git a/packages/renderer/src/compat.ts b/packages/renderer/src/compat.ts
index b238586f..419e630a 100644
--- a/packages/renderer/src/compat.ts
+++ b/packages/renderer/src/compat.ts
@@ -11,12 +11,18 @@ export function isSupported(): boolean {
   );
 }
 
-export function detectBestFrameSource(): "draw-element-image" | "snapdom" {
+export function detectBestFrameSource(): "draw-element-image" | "tab-capture" | "snapdom" {
   if (
     typeof CanvasRenderingContext2D !== "undefined" &&
     "drawElementImage" in CanvasRenderingContext2D.prototype
   ) {
     return "draw-element-image";
   }
+  if (
+    typeof navigator?.mediaDevices?.getDisplayMedia === "function" &&
+    typeof ImageCapture !== "undefined"
+  ) {
+    return "tab-capture";
+  }
   return "snapdom";
 }
diff --git a/packages/renderer/src/index.ts b/packages/renderer/src/index.ts
index 2232e292..0dbdd5cc 100644
--- a/packages/renderer/src/index.ts
+++ b/packages/renderer/src/index.ts
@@ -12,6 +12,11 @@ import type { RenderConfig, RenderResult } from "./types.js";
 export { isSupported, detectBestFrameSource } from "./compat.js";
 export { HyperframesRenderer, CancelledError } from "./renderer.js";
 export { SnapdomFrameSource } from "./sources/snapdom.js";
+export { TabCaptureFrameSource, isTabCaptureSupported } from "./sources/tab-capture.js";
+export {
+  DrawElementImageFrameSource,
+  isDrawElementImageSupported,
+} from "./sources/draw-element-image.js";
 
 export type {
   RenderConfig,
diff --git a/packages/renderer/src/renderer.ts b/packages/renderer/src/renderer.ts
index 87f596ae..23ae8c7a 100644
--- a/packages/renderer/src/renderer.ts
+++ b/packages/renderer/src/renderer.ts
@@ -9,11 +9,23 @@
 import { calculateConcurrency, IframePool } from "./capture/iframe-pool.js";
 import { Encoder } from "./encoding/encoder.js";
 import { SnapdomFrameSource } from "./sources/snapdom.js";
+import { TabCaptureFrameSource, isTabCaptureSupported } from "./sources/tab-capture.js";
+import {
+  DrawElementImageFrameSource,
+  isDrawElementImageSupported,
+} from "./sources/draw-element-image.js";
 import { mixAudio } from "./audio/mixer.js";
 import { generateFrameTimes } from "./utils/timing.js";
 import { ProgressTracker } from "./utils/progress.js";
-import { isSupported } from "./compat.js";
-import type { RenderConfig, RenderProgress, RenderResult, AudioSource } from "./types.js";
+import { isSupported, detectBestFrameSource } from "./compat.js";
+import type {
+  FrameSource,
+  RenderConfig,
+  RenderProgress,
+  RenderResult,
+  AudioSource,
+  HfMediaElement,
+} from "./types.js";
 
 // ── Codec mapping ─────────────────────────────────────────────────────────────
 
@@ -46,6 +58,7 @@ export class HyperframesRenderer {
   private config: RenderConfig;
   private cancelled = false;
   private pool: IframePool | null = null;
+  private tabCapture: TabCaptureFrameSource | null = null;
   private encoder: Encoder | null = null;
   private abortController: AbortController | null = null;
 
@@ -87,18 +100,58 @@ export class HyperframesRenderer {
 
     this.throwIfCancelled();
 
-    // ── Step 1: Initialise iframe pool + frame sources ────────────────────────
-    const pool = new IframePool();
-    this.pool = pool;
-
-    const { duration, media } = await pool.init({
-      compositionUrl: this.config.composition,
-      width,
-      height,
-      devicePixelRatio,
-      concurrency,
-      createFrameSource: () => new SnapdomFrameSource(),
-    });
+    // ── Step 1: Initialise frame source ────────────────────────────────────────
+    const selectedSource = this.config.frameSource ?? detectBestFrameSource();
+    const useDrawElement = selectedSource === "draw-element-image" && isDrawElementImageSupported();
+    const useTabCapture =
+      !useDrawElement && selectedSource === "tab-capture" && isTabCaptureSupported();
+    // Single-source modes bypass the iframe pool (drawElementImage / tab-capture)
+    const useSingleSource = useDrawElement || useTabCapture;
+    let singleSource: FrameSource | null = null;
+
+    let duration: number;
+    let media: HfMediaElement[];
+
+    if (useDrawElement) {
+      // drawElementImage mode: pixel-perfect via html-in-canvas API
+      const source = new DrawElementImageFrameSource();
+      singleSource = source;
+      await source.init({
+        compositionUrl: this.config.composition,
+        width,
+        height,
+        devicePixelRatio,
+      });
+      duration = source.duration;
+      media = source.media;
+    } else if (useTabCapture) {
+      // Tab capture mode: single iframe, pixel-perfect via getDisplayMedia
+      const source = new TabCaptureFrameSource();
+      this.tabCapture = source;
+      singleSource = source;
+      await source.init({
+        compositionUrl: this.config.composition,
+        width,
+        height,
+        devicePixelRatio,
+      });
+      duration = source.duration;
+      media = source.media;
+    } else {
+      // Iframe pool mode: parallel capture via SnapDOM
+      const pool = new IframePool();
+      this.pool = pool;
+      const result = await pool.init({
+        compositionUrl: this.config.composition,
+        width,
+        height,
+        devicePixelRatio,
+        concurrency,
+        createFrameSource: () => new SnapdomFrameSource(),
+      });
+      duration = result.duration;
+      media = result.media;
+    }
 
     this.throwIfCancelled();
 
@@ -107,7 +160,8 @@ export class HyperframesRenderer {
     const totalFrames = frameTimes.length;
 
     if (totalFrames === 0) {
-      await pool.dispose();
+      if (this.pool) await this.pool.dispose();
+      if (this.tabCapture) await this.tabCapture.dispose();
       throw new Error("Composition has zero duration — nothing to render");
     }
 
@@ -174,41 +228,65 @@ export class HyperframesRenderer {
       }
     };
 
-    await pool.captureAll(
-      frameTimes,
-      ({ bitmap, index }) => {
-        if (this.cancelled) {
-          bitmap.close();
-          return;
-        }
-
-        reorderBuffer.set(index, bitmap);
+    if (useSingleSource && singleSource) {
+      // Single-source mode (drawElementImage or tab-capture): sequential, no reorder
+      for (let i = 0; i < totalFrames; i++) {
+        if (this.cancelled) break;
+        const bitmap = await singleSource.capture(frameTimes[i]!);
+        const timestamp = Math.round(i * frameDuration * 1_000_000);
+        encoder.sendFrame(bitmap, i, timestamp);
         capturedCount++;
-
         progressTracker.recordFrame(capturedCount, performance.now() - captureStart);
-
-        const captureProgress = capturedCount / totalFrames;
         report({
           stage: "capturing",
-          progress: 0.05 + captureProgress * 0.05,
+          progress: 0.05 + (capturedCount / totalFrames) * 0.05,
           currentFrame: capturedCount,
           totalFrames,
           estimatedTimeRemaining: progressTracker.estimateTimeRemaining(),
           captureRate: progressTracker.captureRate(),
         });
-
-        flushBuffer();
-      },
-      abortController.signal,
-    );
-
-    // Flush any remaining buffered frames
-    flushBuffer();
+      }
+    } else if (this.pool) {
+      // Iframe pool mode: parallel capture with reorder buffer
+      await this.pool.captureAll(
+        frameTimes,
+        ({ bitmap, index }) => {
+          if (this.cancelled) {
+            bitmap.close();
+            return;
+          }
+          reorderBuffer.set(index, bitmap);
+          capturedCount++;
+          progressTracker.recordFrame(capturedCount, performance.now() - captureStart);
+          report({
+            stage: "capturing",
+            progress: 0.05 + (capturedCount / totalFrames) * 0.05,
+            currentFrame: capturedCount,
+            totalFrames,
+            estimatedTimeRemaining: progressTracker.estimateTimeRemaining(),
+            captureRate: progressTracker.captureRate(),
+          });
+          flushBuffer();
+        },
+        abortController.signal,
+      );
+      flushBuffer();
+    }
 
     const captureMs = performance.now() - captureStart;
 
-    await pool.dispose();
-    this.pool = null;
+    // Dispose capture resources
+    if (singleSource) {
+      await singleSource.dispose();
+    }
+    if (this.tabCapture) {
+      await this.tabCapture.dispose();
+      this.tabCapture = null;
+    }
+    if (this.pool) {
+      await this.pool.dispose();
+      this.pool = null;
+    }
 
     this.throwIfCancelled();
 
@@ -269,6 +347,7 @@ export class HyperframesRenderer {
   private throwIfCancelled(): void {
     if (this.cancelled) {
       this.pool?.dispose().catch(() => {});
+      this.tabCapture?.dispose().catch(() => {});
       this.encoder?.dispose();
       throw new CancelledError();
     }
diff --git a/packages/renderer/src/sources/draw-element-image.ts b/packages/renderer/src/sources/draw-element-image.ts
new file mode 100644
index 00000000..a46b5560
--- /dev/null
+++ b/packages/renderer/src/sources/draw-element-image.ts
@@ -0,0 +1,157 @@
+/**
+ * drawElementImage Frame Source
+ *
+ * Uses the WICG html-in-canvas API to capture pixel-perfect frames.
+ * The composition loads in an <iframe> that is a direct child of
+ * <canvas layoutsubtree>. drawElementImage(iframe) captures the
+ * browser's native compositor output — identical to BeginFrame.
+ *
+ * Requires: Chrome with --enable-blink-features=CanvasDrawElement
+ */
+
+import type { FrameSource, FrameSourceConfig, HfMediaElement } from "../types.js";
+
+interface HfProtocol {
+  duration: number;
+  seek(time: number): void;
+  media?: HfMediaElement[];
+}
+
+interface DrawElementImageCtx extends CanvasRenderingContext2D {
+  drawElementImage(element: Element, dx: number, dy: number, dw?: number, dh?: number): DOMMatrix;
+}
+
+export class DrawElementImageFrameSource implements FrameSource {
+  readonly name = "draw-element-image";
+
+  private canvas: HTMLCanvasElement | null = null;
+  private ctx: DrawElementImageCtx | null = null;
+  private iframe: HTMLIFrameElement | null = null;
+  private config: FrameSourceConfig | null = null;
+  private hf: HfProtocol | null = null;
+  private _duration = 0;
+  private _media: HfMediaElement[] = [];
+
+  get duration(): number {
+    return this._duration;
+  }
+
+  get media(): HfMediaElement[] {
+    return this._media;
+  }
+
+  async init(config: FrameSourceConfig): Promise<void> {
+    this.config = config;
+
+    if (!("drawElementImage" in CanvasRenderingContext2D.prototype)) {
+      throw new Error(
+        "drawElementImage not available. Launch Chrome with --enable-blink-features=CanvasDrawElement",
+      );
+    }
+
+    // Create <canvas layoutsubtree> with an <iframe> as direct child.
+    // drawElementImage can render iframe elements — this gives us native
+    // composition loading (proper script execution, document context)
+    // plus pixel-perfect capture via the compositor.
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = config.width;
+    this.canvas.height = config.height;
+    this.canvas.setAttribute("layoutsubtree", "");
+    this.canvas.style.position = "fixed";
+    this.canvas.style.top = "0";
+    this.canvas.style.left = "0";
+    this.canvas.style.zIndex = "999999";
+    document.body.appendChild(this.canvas);
+
+    this.ctx = this.canvas.getContext("2d") as DrawElementImageCtx;
+    if (!this.ctx) throw new Error("Failed to create 2D canvas context");
+
+    // Create iframe as direct child of canvas
+    this.iframe = document.createElement("iframe");
+    this.iframe.style.width = `${config.width}px`;
+    this.iframe.style.height = `${config.height}px`;
+    this.iframe.style.border = "none";
+    this.canvas.appendChild(this.iframe);
+
+    // Load the composition
+    await new Promise<void>((resolve, reject) => {
+      const timeout = setTimeout(() => reject(new Error("Composition load timeout (15s)")), 15_000);
+      this.iframe!.onload = () => {
+        clearTimeout(timeout);
+        resolve();
+      };
+      this.iframe!.onerror = () => {
+        clearTimeout(timeout);
+        reject(new Error(`Failed to load composition: ${config.compositionUrl}`));
+      };
+      this.iframe!.src = config.compositionUrl;
+    });
+
+    // Wait for __hf protocol
+    const hf = await this.waitForHfProtocol();
+    this.hf = hf;
+    this._duration = hf.duration;
+    this._media = hf.media ?? [];
+  }
+
+  async capture(time: number): Promise<ImageBitmap> {
+    if (!this.canvas || !this.ctx || !this.hf || !this.config || !this.iframe) {
+      throw new Error("DrawElementImageFrameSource not initialized — call init() first");
+    }
+
+    this.hf.seek(time);
+
+    // Yield to event loop + wait for compositor to render the seeked state
+    await new Promise<void>((resolve) => setTimeout(resolve, 4));
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => resolve());
+      });
+    });
+
+    // Capture the iframe via drawElementImage — pixel-perfect compositor output
+    this.ctx.clearRect(0, 0, this.config.width, this.config.height);
+    this.ctx.drawElementImage(this.iframe, 0, 0, this.config.width, this.config.height);
+
+    return createImageBitmap(this.canvas);
+  }
+
+  async dispose(): Promise<void> {
+    if (this.canvas) {
+      this.canvas.remove();
+      this.canvas = null;
+    }
+    this.iframe = null;
+    this.ctx = null;
+    this.hf = null;
+    this.config = null;
+    this._duration = 0;
+    this._media = [];
+  }
+
+  private waitForHfProtocol(timeoutMs = 15_000): Promise<HfProtocol> {
+    return new Promise((resolve, reject) => {
+      const start = Date.now();
+      const poll = () => {
+        const win = this.iframe?.contentWindow as (Window & { __hf?: HfProtocol }) | null;
+        if (win?.__hf && typeof win.__hf.seek === "function" && win.__hf.duration > 0) {
+          resolve(win.__hf);
+          return;
+        }
+        if (Date.now() - start > timeoutMs) {
+          reject(new Error("Timed out waiting for window.__hf protocol"));
+          return;
+        }
+        setTimeout(poll, 50);
+      };
+      poll();
+    });
+  }
+}
+
+export function isDrawElementImageSupported(): boolean {
+  return (
+    typeof CanvasRenderingContext2D !== "undefined" &&
+    "drawElementImage" in CanvasRenderingContext2D.prototype
+  );
+}
diff --git a/packages/renderer/src/sources/tab-capture.ts b/packages/renderer/src/sources/tab-capture.ts
new file mode 100644
index 00000000..58d77e6f
--- /dev/null
+++ b/packages/renderer/src/sources/tab-capture.ts
@@ -0,0 +1,213 @@
+/**
+ * Tab Capture Frame Source
+ *
+ * Uses getDisplayMedia({ preferCurrentTab: true }) to capture pixel-perfect
+ * frames from Chrome's actual compositor output. This produces identical
+ * output to BeginFrame because it reads the same compositor pixels.
+ *
+ * Requires a user gesture (clicking a "Render" button) to acquire the
+ * capture stream. After that, frame capture is fully automated.
+ *
+ * Browser support: Chrome 107+ (preferCurrentTab), Firefox (with picker).
+ * Falls back to SnapDOM if getDisplayMedia is denied or unavailable.
+ */
+
+import type { FrameSource, FrameSourceConfig, HfMediaElement } from "../types.js";
+
+// ImageCapture is in the spec but not all TS lib versions include grabFrame().
+// We declare our own interface to avoid type errors.
+interface GrabCapture {
+  grabFrame(): Promise<ImageBitmap>;
+}
+function createGrabCapture(track: MediaStreamTrack): GrabCapture {
+  return new (
+    globalThis as unknown as { ImageCapture: new (t: MediaStreamTrack) => GrabCapture }
+  ).ImageCapture(track);
+}
+
+interface HfProtocol {
+  duration: number;
+  seek(time: number): void;
+  media?: HfMediaElement[];
+}
+
+export class TabCaptureFrameSource implements FrameSource {
+  readonly name = "tab-capture";
+
+  private iframe: HTMLIFrameElement | null = null;
+  private config: FrameSourceConfig | null = null;
+  private hf: HfProtocol | null = null;
+  private _duration = 0;
+  private _media: HfMediaElement[] = [];
+  private stream: MediaStream | null = null;
+  private imageCapture: GrabCapture | null = null;
+  private captureCanvas: HTMLCanvasElement | null = null;
+  private captureCtx: CanvasRenderingContext2D | null = null;
+
+  get duration(): number {
+    return this._duration;
+  }
+
+  get media(): HfMediaElement[] {
+    return this._media;
+  }
+
+  async init(config: FrameSourceConfig): Promise<void> {
+    this.config = config;
+
+    // Create the iframe — must be VISIBLE for tab capture to see it.
+    // Position it to fill the viewport exactly.
+    const iframe = document.createElement("iframe");
+    iframe.style.position = "fixed";
+    iframe.style.top = "0";
+    iframe.style.left = "0";
+    iframe.style.width = `${config.width}px`;
+    iframe.style.height = `${config.height}px`;
+    iframe.style.border = "none";
+    iframe.style.zIndex = "999999";
+    document.body.appendChild(iframe);
+    this.iframe = iframe;
+
+    // Load the composition
+    await new Promise<void>((resolve, reject) => {
+      const timeout = setTimeout(() => reject(new Error("Composition load timeout (10s)")), 10_000);
+      iframe.onload = () => {
+        clearTimeout(timeout);
+        resolve();
+      };
+      iframe.onerror = () => {
+        clearTimeout(timeout);
+        reject(new Error(`Failed to load composition: ${config.compositionUrl}`));
+      };
+      iframe.src = config.compositionUrl;
+    });
+
+    // Wait for __hf protocol
+    const hf = await this.waitForHfProtocol(iframe);
+    this.hf = hf;
+    this._duration = hf.duration;
+    this._media = hf.media ?? [];
+
+    // Acquire tab capture stream.
+    // preferCurrentTab auto-selects this tab without the picker dialog (Chrome 107+).
+    this.stream = await navigator.mediaDevices.getDisplayMedia({
+      video: {
+        displaySurface: "browser",
+        width: { ideal: config.width },
+        height: { ideal: config.height },
+        frameRate: { ideal: 60 },
+      },
+      preferCurrentTab: true,
+      selfBrowserSurface: "include",
+      systemAudio: "exclude",
+    } as DisplayMediaStreamOptions);
+
+    const track = this.stream.getVideoTracks()[0];
+    if (!track) {
+      throw new Error("No video track from getDisplayMedia");
+    }
+
+    this.imageCapture = createGrabCapture(track);
+
+    // Create an offscreen canvas for cropping frames to the iframe region
+    this.captureCanvas = document.createElement("canvas");
+    this.captureCanvas.width = config.width;
+    this.captureCanvas.height = config.height;
+    this.captureCtx = this.captureCanvas.getContext("2d");
+  }
+
+  async capture(time: number): Promise<ImageBitmap> {
+    if (!this.iframe || !this.hf || !this.config || !this.imageCapture || !this.captureCtx) {
+      throw new Error("TabCaptureFrameSource not initialized — call init() first");
+    }
+
+    // Seek the composition to the target time
+    this.hf.seek(time);
+
+    // Wait for the compositor to render the new frame.
+    // Two rAF cycles: one for the JS update, one for the compositor.
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => resolve());
+      });
+    });
+
+    // Grab the current frame from the capture stream
+    const bitmap = await this.imageCapture.grabFrame();
+
+    // The captured bitmap is the full tab viewport. Crop to the iframe area.
+    // Since the iframe is positioned at (0,0) and sized to match the composition,
+    // we draw the captured bitmap and crop to the composition dimensions.
+    const dpr = window.devicePixelRatio || 1;
+    const srcWidth = this.config.width * dpr;
+    const srcHeight = this.config.height * dpr;
+
+    this.captureCtx.clearRect(0, 0, this.config.width, this.config.height);
+    this.captureCtx.drawImage(
+      bitmap,
+      0,
+      0,
+      srcWidth,
+      srcHeight, // source rect (top-left of tab, at device pixel ratio)
+      0,
+      0,
+      this.config.width,
+      this.config.height, // dest rect
+    );
+    bitmap.close();
+
+    return createImageBitmap(this.captureCanvas!);
+  }
+
+  async dispose(): Promise<void> {
+    // Stop the capture stream
+    if (this.stream) {
+      for (const track of this.stream.getTracks()) {
+        track.stop();
+      }
+      this.stream = null;
+    }
+    this.imageCapture = null;
+    this.captureCanvas = null;
+    this.captureCtx = null;
+
+    if (this.iframe) {
+      this.iframe.remove();
+      this.iframe = null;
+    }
+    this.hf = null;
+    this.config = null;
+    this._duration = 0;
+    this._media = [];
+  }
+
+  private waitForHfProtocol(iframe: HTMLIFrameElement, timeoutMs = 10_000): Promise<HfProtocol> {
+    return new Promise((resolve, reject) => {
+      const start = Date.now();
+      const poll = () => {
+        const win = iframe.contentWindow as (Window & { __hf?: HfProtocol }) | null;
+        if (win?.__hf && typeof win.__hf.seek === "function" && win.__hf.duration > 0) {
+          resolve(win.__hf);
+          return;
+        }
+        if (Date.now() - start > timeoutMs) {
+          reject(new Error("Timed out waiting for window.__hf protocol"));
+          return;
+        }
+        setTimeout(poll, 50);
+      };
+      poll();
+    });
+  }
+}
+
+/**
+ * Check if Tab Capture is available.
+ * Requires getDisplayMedia and ImageCapture APIs.
+ */
+export function isTabCaptureSupported(): boolean {
+  return (
+    typeof navigator?.mediaDevices?.getDisplayMedia === "function" &&
+    typeof ImageCapture !== "undefined"
+  );
+}
diff --git a/packages/renderer/src/types.ts b/packages/renderer/src/types.ts
index 0d5b898e..feeb4283 100644
--- a/packages/renderer/src/types.ts
+++ b/packages/renderer/src/types.ts
@@ -89,7 +89,7 @@ export interface RenderConfig {
   bitrate?: number;
   concurrency?: number;
   onProgress?: (progress: RenderProgress) => void;
-  frameSource?: "snapdom" | "draw-element-image";
+  frameSource?: "tab-capture" | "snapdom" | "draw-element-image";
   workerUrl?: URL | string;
 }
 

From e924c76c101d4ea949c89dda5b85e57405dfccb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 05:23:13 +0200
Subject: [PATCH 18/30] feat(studio): add browser-side export button using
 @hyperframes/renderer

Adds a "Browser" export button next to the existing server-side Export
button in the RenderQueue panel. Uses the @hyperframes/renderer package
to render compositions entirely client-side via WebCodecs, with progress
tracked in the existing job list and automatic file download on completion.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/studio/package.json                  |  1 +
 packages/studio/src/App.tsx                   |  5 ++
 .../src/components/renders/RenderQueue.tsx    | 50 ++++++++---
 .../components/renders/useBrowserRender.ts    | 86 +++++++++++++++++++
 4 files changed, 132 insertions(+), 10 deletions(-)
 create mode 100644 packages/studio/src/components/renders/useBrowserRender.ts

diff --git a/packages/studio/package.json b/packages/studio/package.json
index be893301..76a7a3cf 100644
--- a/packages/studio/package.json
+++ b/packages/studio/package.json
@@ -37,6 +37,7 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.40.0",
     "@hyperframes/core": "workspace:*",
+    "@hyperframes/renderer": "workspace:*",
     "@phosphor-icons/react": "^2.1.10",
     "codemirror": "^6.0.1",
     "motion": "^12.38.0"
diff --git a/packages/studio/src/App.tsx b/packages/studio/src/App.tsx
index 9c42a796..3e7ec9a7 100644
--- a/packages/studio/src/App.tsx
+++ b/packages/studio/src/App.tsx
@@ -5,6 +5,7 @@ import { SourceEditor } from "./components/editor/SourceEditor";
 import { LeftSidebar } from "./components/sidebar/LeftSidebar";
 import { RenderQueue } from "./components/renders/RenderQueue";
 import { useRenderQueue } from "./components/renders/useRenderQueue";
+import { useBrowserRender } from "./components/renders/useBrowserRender";
 import { CompositionThumbnail, VideoThumbnail } from "./player";
 import { AudioWaveform } from "./player/components/AudioWaveform";
 import type { TimelineElement } from "./player";
@@ -56,6 +57,7 @@ export function StudioApp() {
   const [fileTree, setFileTree] = useState<string[]>([]);
   const [compIdToSrc, setCompIdToSrc] = useState<Map<string, string>>(new Map());
   const renderQueue = useRenderQueue(projectId);
+  const browserRender = useBrowserRender(projectId);
   const captionEditMode = useCaptionStore((s) => s.isEditMode);
   const captionHasSelection = useCaptionStore((s) => s.selectedSegmentIds.size > 0);
   const captionSync = useCaptionSync(projectId);
@@ -895,6 +897,9 @@ export function StudioApp() {
                   onClearCompleted={renderQueue.clearCompleted}
                   onStartRender={(format) => renderQueue.startRender(30, "standard", format)}
                   isRendering={renderQueue.isRendering}
+                  onStartBrowserRender={browserRender.startBrowserRender}
+                  isBrowserRendering={browserRender.isRendering}
+                  browserJob={browserRender.job}
                 />
               )}
             </div>
diff --git a/packages/studio/src/components/renders/RenderQueue.tsx b/packages/studio/src/components/renders/RenderQueue.tsx
index c269e112..8949484e 100644
--- a/packages/studio/src/components/renders/RenderQueue.tsx
+++ b/packages/studio/src/components/renders/RenderQueue.tsx
@@ -9,24 +9,32 @@ interface RenderQueueProps {
   onClearCompleted: () => void;
   onStartRender: (format: "mp4" | "webm" | "mov") => void;
   isRendering: boolean;
+  onStartBrowserRender?: (format: "mp4" | "webm") => void;
+  isBrowserRendering?: boolean;
+  browserJob?: RenderJob | null;
 }
 
 function FormatExportButton({
   onStartRender,
   isRendering,
+  onStartBrowserRender,
+  isBrowserRendering,
 }: {
   onStartRender: (format: "mp4" | "webm" | "mov") => void;
   isRendering: boolean;
+  onStartBrowserRender?: (format: "mp4" | "webm") => void;
+  isBrowserRendering?: boolean;
 }) {
   const [format, setFormat] = useState<"mp4" | "webm" | "mov">("mp4");
+  const anyRendering = isRendering || isBrowserRendering;
 
   return (
-    <div className="flex items-center gap-0.5">
+    <div className="flex items-center gap-1.5">
       <select
         value={format}
         onChange={(e) => setFormat(e.target.value as "mp4" | "webm" | "mov")}
-        disabled={isRendering}
-        className="h-5 px-1 text-[10px] rounded-l bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
+        disabled={anyRendering}
+        className="h-5 px-1 text-[10px] rounded bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
       >
         <option value="mp4">MP4</option>
         <option value="mov">MOV</option>
@@ -34,11 +42,22 @@ function FormatExportButton({
       </select>
       <button
         onClick={() => onStartRender(format)}
-        disabled={isRendering}
-        className="flex items-center gap-1 px-2 py-0.5 text-[10px] font-semibold rounded-r bg-studio-accent text-[#09090B] hover:brightness-110 transition-colors disabled:opacity-50"
+        disabled={anyRendering}
+        className="flex items-center gap-1 px-2 py-0.5 text-[10px] font-semibold rounded bg-studio-accent text-[#09090B] hover:brightness-110 transition-colors disabled:opacity-50"
       >
         {isRendering ? "Rendering..." : "Export"}
       </button>
+      {onStartBrowserRender && (
+        <button
+          onClick={() =>
+            onStartBrowserRender(format === "mov" ? "mp4" : (format as "mp4" | "webm"))
+          }
+          disabled={anyRendering}
+          className="flex items-center gap-1 px-2 py-0.5 text-[10px] font-semibold rounded bg-teal-600 text-white hover:bg-teal-500 transition-colors disabled:opacity-50"
+        >
+          {isBrowserRendering ? "Exporting..." : "Browser"}
+        </button>
+      )}
     </div>
   );
 }
@@ -50,18 +69,24 @@ export const RenderQueue = memo(function RenderQueue({
   onClearCompleted,
   onStartRender,
   isRendering,
+  onStartBrowserRender,
+  isBrowserRendering,
+  browserJob,
 }: RenderQueueProps) {
   const listRef = useRef<HTMLDivElement>(null);
 
+  // Merge server jobs with the browser render job for display
+  const allJobs = browserJob ? [...jobs, browserJob] : jobs;
+
   // Auto-scroll to bottom when new jobs are added.
   // Runs in an effect to avoid side effects during the render phase.
   useEffect(() => {
     if (listRef.current) {
       listRef.current.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
     }
-  }, [jobs.length]);
+  }, [allJobs.length]);
 
-  const completedCount = jobs.filter((j) => j.status !== "rendering").length;
+  const completedCount = allJobs.filter((j) => j.status !== "rendering").length;
 
   return (
     <div className="flex flex-col h-full">
@@ -76,13 +101,18 @@ export const RenderQueue = memo(function RenderQueue({
               Clear
             </button>
           )}
-          <FormatExportButton onStartRender={onStartRender} isRendering={isRendering} />
+          <FormatExportButton
+            onStartRender={onStartRender}
+            isRendering={isRendering}
+            onStartBrowserRender={onStartBrowserRender}
+            isBrowserRendering={isBrowserRendering}
+          />
         </div>
       </div>
 
       {/* Job list */}
       <div ref={listRef} className="flex-1 overflow-y-auto">
-        {jobs.length === 0 ? (
+        {allJobs.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full px-4 gap-2">
             <svg
               width="20"
@@ -112,7 +142,7 @@ export const RenderQueue = memo(function RenderQueue({
             <p className="text-[10px] text-neutral-600 text-center">No renders yet</p>
           </div>
         ) : (
-          jobs.map((job) => (
+          allJobs.map((job) => (
             <RenderQueueItem
               key={job.id}
               job={job}
diff --git a/packages/studio/src/components/renders/useBrowserRender.ts b/packages/studio/src/components/renders/useBrowserRender.ts
new file mode 100644
index 00000000..0d87c8a1
--- /dev/null
+++ b/packages/studio/src/components/renders/useBrowserRender.ts
@@ -0,0 +1,86 @@
+import { useState, useCallback } from "react";
+import type { RenderJob } from "./useRenderQueue";
+
+export function useBrowserRender(projectId: string | null) {
+  const [isRendering, setIsRendering] = useState(false);
+  const [job, setJob] = useState<RenderJob | null>(null);
+
+  const startBrowserRender = useCallback(
+    async (format: "mp4" | "webm" = "mp4") => {
+      if (!projectId || isRendering) return;
+      setIsRendering(true);
+
+      const jobId = crypto.randomUUID();
+      const startTime = Date.now();
+      setJob({
+        id: jobId,
+        status: "rendering",
+        progress: 0,
+        stage: "initializing",
+        filename: `browser-export.${format}`,
+        createdAt: startTime,
+      });
+
+      try {
+        const { render, isSupported } = await import("@hyperframes/renderer");
+        if (!isSupported()) {
+          throw new Error(
+            "Browser does not support WebCodecs. Use Chrome 94+, Firefox 130+, or Safari 26+.",
+          );
+        }
+
+        const result = await render({
+          composition: `/api/projects/${projectId}/preview`,
+          format,
+          fps: 30,
+          codec: "h264",
+          onProgress: (p) => {
+            setJob((prev) =>
+              prev
+                ? {
+                    ...prev,
+                    progress: Math.round(p.progress * 100),
+                    stage: p.stage,
+                  }
+                : prev,
+            );
+          },
+        });
+
+        // Trigger download
+        const url = URL.createObjectURL(result.blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `export.${format}`;
+        a.click();
+        URL.revokeObjectURL(url);
+
+        setJob((prev) =>
+          prev
+            ? {
+                ...prev,
+                status: "complete",
+                progress: 100,
+                durationMs: Date.now() - startTime,
+              }
+            : prev,
+        );
+      } catch (err) {
+        setJob((prev) =>
+          prev
+            ? {
+                ...prev,
+                status: "failed",
+                error: err instanceof Error ? err.message : String(err),
+              }
+            : prev,
+        );
+      } finally {
+        setIsRendering(false);
+      }
+    },
+    [projectId, isRendering],
+  );
+
+  return { isRendering, job, startBrowserRender };
+}

From 09363f189878d74b3919de9c72757f131777e275 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 10 Apr 2026 05:43:49 +0200
Subject: [PATCH 19/30] =?UTF-8?q?fix(renderer):=20bridge=20=5F=5Fplayer?=
 =?UTF-8?q?=E2=86=92=5F=5Fhf=20in=20SnapDOM=20source,=20fix=20studio=20wor?=
 =?UTF-8?q?ker=20URL?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SnapDOM frame source now detects window.__player (studio runtime) in
  addition to window.__hf and creates a bridge automatically. This lets
  the renderer work with studio preview URLs directly.
- Studio useBrowserRender hook: force snapdom frame source and provide
  explicit worker URL for Vite dev compatibility.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/renderer/src/sources/snapdom.ts      | 29 ++++++++++++++++++-
 .../components/renders/useBrowserRender.ts    |  2 ++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/renderer/src/sources/snapdom.ts b/packages/renderer/src/sources/snapdom.ts
index 1f1bba69..a0a5bd80 100644
--- a/packages/renderer/src/sources/snapdom.ts
+++ b/packages/renderer/src/sources/snapdom.ts
@@ -119,11 +119,38 @@ export class SnapdomFrameSource implements FrameSource {
     return new Promise((resolve, reject) => {
       const start = Date.now();
       const poll = () => {
-        const win = iframe.contentWindow as (Window & { __hf?: HfProtocol }) | null;
+        const win = iframe.contentWindow as (Window & {
+          __hf?: HfProtocol;
+          __player?: { renderSeek: (t: number) => void; getDuration: () => number };
+          __playerReady?: boolean;
+        }) | null;
+
+        // Check for __hf protocol (direct or CLI-compiled compositions)
         if (win?.__hf && typeof win.__hf.seek === "function" && win.__hf.duration > 0) {
           resolve(win.__hf);
           return;
         }
+
+        // Fallback: bridge __player → __hf (studio preview compositions)
+        // The studio runtime exposes __player instead of __hf
+        if (win?.__player && typeof win.__player.renderSeek === "function" && win.__playerReady) {
+          const player = win.__player;
+          const getDeclaredDuration = () => {
+            const root = iframe.contentDocument?.querySelector("[data-composition-id]");
+            if (!root) return 0;
+            const d = Number(root.getAttribute("data-duration"));
+            return Number.isFinite(d) && d > 0 ? d : 0;
+          };
+          resolve({
+            get duration() {
+              const d = player.getDuration();
+              return d > 0 ? d : getDeclaredDuration();
+            },
+            seek: (t: number) => player.renderSeek(t),
+          });
+          return;
+        }
+
         if (Date.now() - start > timeoutMs) {
           reject(new Error("Timed out waiting for window.__hf protocol"));
           return;
diff --git a/packages/studio/src/components/renders/useBrowserRender.ts b/packages/studio/src/components/renders/useBrowserRender.ts
index 0d87c8a1..7cf1873a 100644
--- a/packages/studio/src/components/renders/useBrowserRender.ts
+++ b/packages/studio/src/components/renders/useBrowserRender.ts
@@ -34,6 +34,8 @@ export function useBrowserRender(projectId: string | null) {
           format,
           fps: 30,
           codec: "h264",
+          frameSource: "snapdom",
+          workerUrl: "/node_modules/@hyperframes/renderer/dist/worker.bundle.js",
           onProgress: (p) => {
             setJob((prev) =>
               prev

From 7d36ab38e3fac4cd6f24174dddf053a9245d7aab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sat, 11 Apr 2026 04:01:26 +0200
Subject: [PATCH 20/30] fix(renderer): add yields between frames to prevent
 main thread lockup

- iframe-pool: setTimeout(0) yield after each captured frame
- SnapDOM source: requestAnimationFrame after seek() before capture
  to ensure layout/paint is processed

This prevents Chrome from becoming unresponsive during long renders,
keeping CDP, DevTools, and UI interactions functional.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/renderer/src/capture/iframe-pool.ts | 3 +++
 packages/renderer/src/sources/snapdom.ts     | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/packages/renderer/src/capture/iframe-pool.ts b/packages/renderer/src/capture/iframe-pool.ts
index da4ff867..6d7958db 100644
--- a/packages/renderer/src/capture/iframe-pool.ts
+++ b/packages/renderer/src/capture/iframe-pool.ts
@@ -70,6 +70,9 @@ export class IframePool {
           const time = frameTimes[i]!;
           const bitmap = await source.capture(time);
           onFrame({ bitmap, index: i, time });
+          // Yield to event loop every frame so Chrome can process CDP,
+          // repaint UI, and handle user interactions during long renders
+          await new Promise<void>((r) => setTimeout(r, 0));
         }
       }),
     );
diff --git a/packages/renderer/src/sources/snapdom.ts b/packages/renderer/src/sources/snapdom.ts
index a0a5bd80..7680378e 100644
--- a/packages/renderer/src/sources/snapdom.ts
+++ b/packages/renderer/src/sources/snapdom.ts
@@ -85,6 +85,9 @@ export class SnapdomFrameSource implements FrameSource {
 
     this.hf.seek(time);
 
+    // Wait for seek to take effect — one rAF cycle for layout + paint
+    await new Promise<void>((r) => requestAnimationFrame(() => r()));
+
     if (this.videoInjector) {
       await this.videoInjector.injectFrame(time);
     }

From 0b1540359329286b2faf13580fc00b072c8f4388 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sat, 11 Apr 2026 04:23:24 +0200
Subject: [PATCH 21/30] fix(studio): set concurrency=1 for browser render to
 prevent UI lockup

Single-iframe capture keeps Chrome responsive during long renders.
With 8 parallel iframes, SnapDOM overwhelms the main thread and locks
the browser. Concurrency=1 trades speed for reliability.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/studio/src/components/renders/useBrowserRender.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/studio/src/components/renders/useBrowserRender.ts b/packages/studio/src/components/renders/useBrowserRender.ts
index 7cf1873a..e4f699f1 100644
--- a/packages/studio/src/components/renders/useBrowserRender.ts
+++ b/packages/studio/src/components/renders/useBrowserRender.ts
@@ -35,6 +35,7 @@ export function useBrowserRender(projectId: string | null) {
           fps: 30,
           codec: "h264",
           frameSource: "snapdom",
+          concurrency: 1,
           workerUrl: "/node_modules/@hyperframes/renderer/dist/worker.bundle.js",
           onProgress: (p) => {
             setJob((prev) =>

From 6d4ad2ecced776867acbd907dda47f6fc3f669a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sat, 11 Apr 2026 12:58:32 +0200
Subject: [PATCH 22/30] fix(renderer): fix video frame drops, audio, animation
 jitter, and background rendering

- Discover media elements from DOM when __player bridge doesn't expose hf.media
  (scans both <video> and <audio> elements with data-start/data-duration)
- Resolve media src to absolute URLs so audio mixer fetch() works cross-origin
- Seek original video elements directly instead of clone+canvas overlay approach
  (SnapDOM natively captures <video> via drawImage)
- Force synchronous reflow after GSAP seek to prevent stale computed styles
- Add warmup phase: wait for fonts.ready + settle ticks before first capture
- Replace all requestAnimationFrame with setTimeout for background tab support
- Fix interleaved capture/encoding progress by deferring encoding reports

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/capture/video-frame-injector.ts       | 142 +++++++++---------
 packages/renderer/src/renderer.ts             |  37 +++--
 packages/renderer/src/sources/snapdom.ts      |  99 ++++++++++--
 3 files changed, 186 insertions(+), 92 deletions(-)

diff --git a/packages/renderer/src/capture/video-frame-injector.ts b/packages/renderer/src/capture/video-frame-injector.ts
index 7b349782..56fe0f75 100644
--- a/packages/renderer/src/capture/video-frame-injector.ts
+++ b/packages/renderer/src/capture/video-frame-injector.ts
@@ -1,27 +1,24 @@
 /**
  * Video Frame Injector
  *
- * For each <video> element in the composition, creates a canvas overlay
- * that displays the decoded video frame at the current composition time.
- * SnapDOM can capture <canvas> elements (unlike <video> via foreignObject).
+ * Seeks each <video> element in the composition to the correct frame
+ * before SnapDOM captures the DOM. SnapDOM natively handles <video>
+ * elements by drawing them to a temp canvas via drawImage(), so we
+ * just need to ensure the video is at the right currentTime with
+ * the frame fully decoded.
  */
 
 import type { HfMediaElement } from "../types.js";
 
 interface VideoTrack {
   element: HfMediaElement;
-  originalEl: HTMLVideoElement;
-  video: HTMLVideoElement;
-  canvas: HTMLCanvasElement;
-  ctx: CanvasRenderingContext2D;
+  videoEl: HTMLVideoElement;
 }
 
 export class VideoFrameInjector {
   private tracks: VideoTrack[] = [];
-  private iframeDoc: Document | null = null;
 
   async init(media: HfMediaElement[], iframeDoc: Document): Promise<void> {
-    this.iframeDoc = iframeDoc;
     const videoElements = media.filter((m) => {
       const el = iframeDoc.getElementById(m.elementId);
       return el?.tagName === "VIDEO";
@@ -31,91 +28,88 @@ export class VideoFrameInjector {
       const videoEl = iframeDoc.getElementById(element.elementId) as HTMLVideoElement | null;
       if (!videoEl) continue;
 
-      // Create a hidden video element for decoding
-      const video = iframeDoc.createElement("video");
-      video.src = element.src;
-      video.muted = true;
-      video.preload = "auto";
-      video.crossOrigin = "anonymous";
-      video.style.display = "none";
-      iframeDoc.body.appendChild(video);
-
-      await new Promise<void>((resolve) => {
-        video.onloadeddata = () => resolve();
-        video.onerror = () => resolve(); // graceful — skip broken videos
-        video.load();
-      });
-
-      // Create canvas overlay matching the video element's position
-      const canvas = iframeDoc.createElement("canvas");
-      const rect = videoEl.getBoundingClientRect();
-      canvas.width = rect.width;
-      canvas.height = rect.height;
-      canvas.style.position = "absolute";
-      canvas.style.left = `${rect.left}px`;
-      canvas.style.top = `${rect.top}px`;
-      canvas.style.width = `${rect.width}px`;
-      canvas.style.height = `${rect.height}px`;
-      canvas.style.zIndex = getComputedStyle(videoEl).zIndex || "1";
-      canvas.style.pointerEvents = "none";
-
-      const ctx = canvas.getContext("2d");
-      if (!ctx) continue;
-
-      // Hide the original video element (SnapDOM can't capture it anyway)
-      videoEl.style.visibility = "hidden";
-
-      // Insert canvas as sibling
-      videoEl.parentElement?.insertBefore(canvas, videoEl.nextSibling);
-
-      this.tracks.push({ element, originalEl: videoEl, video, canvas, ctx });
+      // Ensure the video is loaded and paused for frame-accurate seeking
+      videoEl.muted = true;
+      videoEl.pause();
+      videoEl.preload = "auto";
+
+      if (videoEl.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+        await new Promise<void>((resolve) => {
+          videoEl.onloadeddata = () => resolve();
+          videoEl.onerror = () => resolve();
+          // Trigger load if not started
+          if (videoEl.readyState === 0) videoEl.load();
+          else setTimeout(resolve, 2000);
+        });
+      }
+
+      this.tracks.push({ element, videoEl });
     }
   }
 
   async injectFrame(compositionTime: number): Promise<void> {
+    const seekPromises: Promise<void>[] = [];
+
     for (const track of this.tracks) {
-      const { element, video, canvas, ctx } = track;
+      const { element, videoEl } = track;
 
       // Is this video visible at this composition time?
       if (compositionTime < element.startTime || compositionTime >= element.endTime) {
-        canvas.style.visibility = "hidden";
         continue;
       }
-      canvas.style.visibility = "visible";
 
       // Calculate the video's local time
       const mediaOffset = element.mediaOffset ?? 0;
       const localTime = compositionTime - element.startTime + mediaOffset;
 
-      // Seek the video to the correct time
-      if (Math.abs(video.currentTime - localTime) > 0.01) {
-        video.currentTime = localTime;
-        await new Promise<void>((resolve) => {
-          video.onseeked = () => resolve();
-          setTimeout(resolve, 100); // safety timeout
-        });
-      }
+      // Always seek — the runtime uses a 0.3s tolerance which skips most frames
+      seekPromises.push(this.seekVideo(videoEl, localTime));
+    }
+
+    await Promise.all(seekPromises);
+  }
 
-      // Recompute canvas position from the original element (handles GSAP animations)
-      const rect = track.originalEl.getBoundingClientRect();
-      canvas.width = rect.width;
-      canvas.height = rect.height;
-      canvas.style.left = `${rect.left}px`;
-      canvas.style.top = `${rect.top}px`;
-      canvas.style.width = `${rect.width}px`;
-      canvas.style.height = `${rect.height}px`;
-
-      // Draw the current video frame onto the canvas
-      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+  private seekVideo(video: HTMLVideoElement, time: number): Promise<void> {
+    // Skip if already at the exact time (within one frame at 60fps)
+    if (Math.abs(video.currentTime - time) < 0.008) {
+      return Promise.resolve();
     }
+
+    return new Promise<void>((resolve) => {
+      const TIMEOUT = 2000;
+      let settled = false;
+
+      const done = () => {
+        if (settled) return;
+        settled = true;
+        video.removeEventListener("seeked", onSeeked);
+        resolve();
+      };
+
+      const onSeeked = () => {
+        if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+          done();
+        } else {
+          // Frame not decoded yet — poll until ready.
+          // Uses setTimeout so it works in background tabs.
+          const poll = () => {
+            if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+              done();
+            } else {
+              setTimeout(poll, 4);
+            }
+          };
+          setTimeout(poll, 4);
+        }
+      };
+
+      video.addEventListener("seeked", onSeeked, { once: true });
+      video.currentTime = time;
+      setTimeout(done, TIMEOUT);
+    });
   }
 
   dispose(): void {
-    for (const track of this.tracks) {
-      track.video.remove();
-      track.canvas.remove();
-    }
     this.tracks = [];
-    this.iframeDoc = null;
   }
 }
diff --git a/packages/renderer/src/renderer.ts b/packages/renderer/src/renderer.ts
index 23ae8c7a..8c7aedc0 100644
--- a/packages/renderer/src/renderer.ts
+++ b/packages/renderer/src/renderer.ts
@@ -181,6 +181,10 @@ export class HyperframesRenderer {
       }));
 
     // ── Step 3: Initialise encoder ────────────────────────────────────────────
+    // Track encoding separately — we only surface encoding progress after capture finishes
+    let encodedCount = 0;
+    let captureFinished = false;
+
     const encoder = new Encoder({
       width,
       height,
@@ -191,13 +195,17 @@ export class HyperframesRenderer {
       hasAudio: audioSources.length > 0,
       workerUrl: this.config.workerUrl,
       onFrameEncoded: (index) => {
-        const encodingProgress = (index + 1) / totalFrames;
-        report({
-          stage: "encoding",
-          progress: 0.1 + encodingProgress * 0.6,
-          currentFrame: index + 1,
-          totalFrames,
-        });
+        encodedCount = index + 1;
+        // Only report encoding progress after capture is done to avoid
+        // interleaved progress jumps (capture 5%→10% vs encoding 10%→70%)
+        if (captureFinished) {
+          report({
+            stage: "encoding",
+            progress: 0.5 + (encodedCount / totalFrames) * 0.2,
+            currentFrame: encodedCount,
+            totalFrames,
+          });
+        }
       },
     });
     this.encoder = encoder;
@@ -239,7 +247,7 @@ export class HyperframesRenderer {
         progressTracker.recordFrame(capturedCount, performance.now() - captureStart);
         report({
           stage: "capturing",
-          progress: 0.05 + (capturedCount / totalFrames) * 0.05,
+          progress: 0.05 + (capturedCount / totalFrames) * 0.45,
           currentFrame: capturedCount,
           totalFrames,
           estimatedTimeRemaining: progressTracker.estimateTimeRemaining(),
@@ -260,7 +268,7 @@ export class HyperframesRenderer {
           progressTracker.recordFrame(capturedCount, performance.now() - captureStart);
           report({
             stage: "capturing",
-            progress: 0.05 + (capturedCount / totalFrames) * 0.05,
+            progress: 0.05 + (capturedCount / totalFrames) * 0.45,
             currentFrame: capturedCount,
             totalFrames,
             estimatedTimeRemaining: progressTracker.estimateTimeRemaining(),
@@ -273,6 +281,17 @@ export class HyperframesRenderer {
       flushBuffer();
     }
 
+    captureFinished = true;
+    // Flush any remaining encoding progress now that capture is done
+    if (encodedCount < totalFrames) {
+      report({
+        stage: "encoding",
+        progress: 0.5 + (encodedCount / totalFrames) * 0.2,
+        currentFrame: encodedCount,
+        totalFrames,
+      });
+    }
+
     const captureMs = performance.now() - captureStart;
 
     // Dispose capture resources
diff --git a/packages/renderer/src/sources/snapdom.ts b/packages/renderer/src/sources/snapdom.ts
index 7680378e..e9aa94b7 100644
--- a/packages/renderer/src/sources/snapdom.ts
+++ b/packages/renderer/src/sources/snapdom.ts
@@ -68,6 +68,12 @@ export class SnapdomFrameSource implements FrameSource {
     this._duration = hf.duration;
     this._media = hf.media ?? [];
 
+    // Discover media elements: prefer hf.media, fall back to DOM scan
+    // (the __player → __hf bridge doesn't expose media, so we must scan)
+    if (this._media.length === 0) {
+      this._media = this.discoverMediaElements(this.iframe!.contentDocument!);
+    }
+
     const videoMedia = this._media.filter((m) => {
       const el = this.iframe!.contentDocument?.getElementById(m.elementId);
       return el?.tagName === "VIDEO";
@@ -76,6 +82,10 @@ export class SnapdomFrameSource implements FrameSource {
       this.videoInjector = new VideoFrameInjector();
       await this.videoInjector.init(videoMedia, this.iframe!.contentDocument!);
     }
+
+    // Warmup: seek to 0 and wait for fonts, Lottie, sub-compositions to settle.
+    // Without this, the first few frames capture before external resources load.
+    await this.warmup();
   }
 
   async capture(time: number): Promise<ImageBitmap> {
@@ -85,15 +95,20 @@ export class SnapdomFrameSource implements FrameSource {
 
     this.hf.seek(time);
 
-    // Wait for seek to take effect — one rAF cycle for layout + paint
-    await new Promise<void>((r) => requestAnimationFrame(() => r()));
+    // Force synchronous reflow so GSAP's CSS changes are committed before
+    // SnapDOM clones the DOM. Without this, computed styles can be stale
+    // and cause visible jumps in animated text/transforms.
+    const doc = this.iframe.contentDocument!;
+    void doc.documentElement.offsetHeight;
+
+    // Yield once so any async side-effects (sub-composition syncs) settle.
+    await new Promise<void>((r) => setTimeout(r, 0));
 
     if (this.videoInjector) {
       await this.videoInjector.injectFrame(time);
     }
 
-    const doc = this.iframe.contentDocument;
-    if (!doc?.documentElement) {
+    if (!doc.documentElement) {
       throw new Error("iframe has no document");
     }
 
@@ -118,15 +133,81 @@ export class SnapdomFrameSource implements FrameSource {
     this._media = [];
   }
 
+  /**
+   * Scan the iframe DOM for <video> and <audio> elements with data-start/data-duration
+   * attributes and build HfMediaElement descriptors. Used as fallback when
+   * hf.media is not available (e.g. __player bridge).
+   */
+  private discoverMediaElements(doc: Document): HfMediaElement[] {
+    const elements = doc.querySelectorAll(
+      "video[data-start][data-duration], audio[data-start][data-duration]",
+    );
+    const baseUrl = doc.baseURI || this.config?.compositionUrl || "";
+    const result: HfMediaElement[] = [];
+    for (const el of elements) {
+      const mediaEl = el as HTMLVideoElement | HTMLAudioElement;
+      const id = mediaEl.id;
+      if (!id) continue;
+      // Resolve src against the composition's base URL so fetch() works from the main page
+      const rawSrc = mediaEl.getAttribute("src") ?? "";
+      const src = rawSrc ? new URL(rawSrc, baseUrl).href : "";
+      const startTime = Number(mediaEl.getAttribute("data-start") ?? 0);
+      const duration = Number(mediaEl.getAttribute("data-duration") ?? 0);
+      const mediaOffset = Number(mediaEl.getAttribute("data-media-offset") ?? 0);
+      const volume = Number(mediaEl.getAttribute("data-volume") ?? 1);
+      const isVideo = mediaEl.tagName === "VIDEO";
+      const isMuted = isVideo && (mediaEl as HTMLVideoElement).muted;
+      result.push({
+        elementId: id,
+        src,
+        startTime,
+        endTime: startTime + duration,
+        mediaOffset,
+        volume,
+        // Audio elements always have audio; video elements only if not muted
+        hasAudio: isVideo ? !isMuted : true,
+      });
+    }
+    return result;
+  }
+
+  /**
+   * Warmup: seek to time 0 and wait for external resources (fonts, Lottie,
+   * CDN scripts, sub-composition iframes) to fully load and settle.
+   * Without this, the first frames capture before everything is ready.
+   */
+  private async warmup(): Promise<void> {
+    if (!this.iframe || !this.hf) return;
+
+    this.hf.seek(0);
+
+    // Wait for fonts to load inside the iframe
+    const iframeDoc = this.iframe.contentDocument;
+    if (iframeDoc?.fonts) {
+      try {
+        await Promise.race([iframeDoc.fonts.ready, new Promise<void>((r) => setTimeout(r, 3000))]);
+      } catch {
+        // fonts.ready not available — continue
+      }
+    }
+
+    // Let GSAP, Lottie, and layout settle — multiple event loop ticks
+    for (let i = 0; i < 5; i++) {
+      await new Promise<void>((r) => setTimeout(r, 0));
+    }
+  }
+
   private waitForHfProtocol(iframe: HTMLIFrameElement, timeoutMs = 10_000): Promise<HfProtocol> {
     return new Promise((resolve, reject) => {
       const start = Date.now();
       const poll = () => {
-        const win = iframe.contentWindow as (Window & {
-          __hf?: HfProtocol;
-          __player?: { renderSeek: (t: number) => void; getDuration: () => number };
-          __playerReady?: boolean;
-        }) | null;
+        const win = iframe.contentWindow as
+          | (Window & {
+              __hf?: HfProtocol;
+              __player?: { renderSeek: (t: number) => void; getDuration: () => number };
+              __playerReady?: boolean;
+            })
+          | null;
 
         // Check for __hf protocol (direct or CLI-compiled compositions)
         if (win?.__hf && typeof win.__hf.seek === "function" && win.__hf.duration > 0) {

From 83436f3d3612befc1898a9eccc06726ea77073aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sat, 11 Apr 2026 13:56:41 +0200
Subject: [PATCH 23/30] =?UTF-8?q?fix(renderer):=20fix=20regression=20harne?=
 =?UTF-8?q?ss=20=E2=80=94=20async=20wait,=20upload=20server,=20asset=20cop?=
 =?UTF-8?q?ying?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use async spawn for agent-browser wait so Node event loop stays active
  for the upload HTTP server to process browser POST requests
- Add CORS headers to upload server responses
- Add frameSource: 'snapdom' to test page (headless Chrome auto-detects
  tab-capture which hangs waiting for screen share permission)
- Copy source assets to output dir (CSS, fonts not inlined by compiler)
- Use compile-test.ts for compilation (injects runtime + __hf bridge)
- Write serve.json with cleanUrls:false to prevent .html→extensionless redirects
- Increase upload timeout from 10s to 300s for long compositions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/renderer/scripts/compile-test.ts     |   6 +-
 .../renderer/scripts/regression-parity.ts     | 333 ++++++++++--------
 2 files changed, 196 insertions(+), 143 deletions(-)

diff --git a/packages/renderer/scripts/compile-test.ts b/packages/renderer/scripts/compile-test.ts
index 471fbdf0..37843a98 100644
--- a/packages/renderer/scripts/compile-test.ts
+++ b/packages/renderer/scripts/compile-test.ts
@@ -2,7 +2,7 @@
  * Compile a single test composition via the producer's htmlCompiler.
  * Usage: npx tsx --esm packages/renderer/scripts/compile-test.ts <test-name>
  */
-import { writeFileSync, mkdirSync } from "node:fs";
+import { writeFileSync, mkdirSync, cpSync } from "node:fs";
 import { resolve, join } from "node:path";
 import { compileForRender } from "../../producer/src/services/htmlCompiler.js";
 import { getVerifiedHyperframeRuntimeSource } from "../../producer/src/services/hyperframeRuntimeLoader.js";
@@ -19,6 +19,10 @@ const outputDir = resolve(`renders/parity-regression/${testName}`);
 mkdirSync(outputDir, { recursive: true });
 
 console.log(`Compiling ${testName}...`);
+
+// Copy all source assets to output dir so the composition can resolve relative paths
+cpSync(srcDir, outputDir, { recursive: true, force: true });
+
 const result = await compileForRender(srcDir, htmlPath, outputDir);
 
 // Inject the HyperFrames runtime IIFE and the __player → __hf bridge.
diff --git a/packages/renderer/scripts/regression-parity.ts b/packages/renderer/scripts/regression-parity.ts
index b475b176..77446c55 100644
--- a/packages/renderer/scripts/regression-parity.ts
+++ b/packages/renderer/scripts/regression-parity.ts
@@ -12,9 +12,18 @@
  *   npx tsx packages/renderer/scripts/regression-parity.ts  # runs all tests
  */
 
-import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync, rmSync } from "node:fs";
+import {
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  readdirSync,
+  writeFileSync,
+  rmSync,
+  symlinkSync,
+} from "node:fs";
 import { resolve, join } from "node:path";
-import { execSync, spawnSync } from "node:child_process";
+import { execSync, spawnSync, spawn as spawnChild } from "node:child_process";
+import { createServer, type IncomingMessage, type ServerResponse } from "node:http";
 
 // ── Config ──────────────────────────────────────────────────────────────────
 
@@ -110,40 +119,20 @@ function discoverTests(filterNames: string[]): TestSuite[] {
 
 // ── Step 1: Compile ─────────────────────────────────────────────────────────
 
-async function compileComposition(suite: TestSuite, outputDir: string): Promise<string> {
-  const compiledPath = join(outputDir, "compiled.html");
+async function compileComposition(suite: TestSuite, _outputDir: string): Promise<string> {
+  const compiledPath = join(_outputDir, "compiled.html");
 
-  // Use the producer's compileForRender via a small script
-  const compileScript = `
-    import { compileForRender } from "${resolve("packages/producer/src/services/htmlCompiler.js")}";
-    const result = await compileForRender(
-      "${suite.srcDir}",
-      "${join(suite.srcDir, "index.html")}",
-      "${outputDir}",
-    );
-    // Write the compiled HTML with runtime injected
-    const fs = await import("fs");
-    fs.writeFileSync("${compiledPath}", result.html);
-    // Write metadata
-    fs.writeFileSync("${join(outputDir, "compile-meta.json")}", JSON.stringify({
-      width: result.width,
-      height: result.height,
-      staticDuration: result.staticDuration,
-      videoCount: result.videos.length,
-      audioCount: result.audios.length,
-    }));
-    console.log(JSON.stringify({ ok: true, width: result.width, height: result.height }));
-  `;
-
-  const scriptPath = join(outputDir, "_compile.ts");
-  writeFileSync(scriptPath, compileScript);
-
-  const result = spawnSync("npx", ["tsx", scriptPath], {
-    cwd: resolve("."),
-    encoding: "utf-8",
-    timeout: 60_000,
-    env: { ...process.env, NODE_NO_WARNINGS: "1" },
-  });
+  // Use compile-test.ts which injects the HyperFrames runtime + __hf bridge
+  const result = spawnSync(
+    "npx",
+    ["tsx", resolve("packages/renderer/scripts/compile-test.ts"), suite.id],
+    {
+      cwd: resolve("."),
+      encoding: "utf-8",
+      timeout: 60_000,
+      env: { ...process.env, NODE_NO_WARNINGS: "1" },
+    },
+  );
 
   if (result.status !== 0) {
     throw new Error(`Compilation failed for ${suite.id}: ${result.stderr?.slice(-500)}`);
@@ -156,11 +145,64 @@ async function compileComposition(suite: TestSuite, outputDir: string): Promise<
   return compiledPath;
 }
 
+// ── Upload server ──────────────────────────────────────────────────────────
+
+const UPLOAD_PORT = SERVER_PORT + 1;
+const pendingUploads = new Map<
+  string,
+  { resolve: (path: string) => void; reject: (err: Error) => void; outputPath: string }
+>();
+
+function startUploadServer(): ReturnType<typeof createServer> {
+  const corsHeaders = {
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Methods": "POST, OPTIONS",
+    "Access-Control-Allow-Headers": "Content-Type",
+  };
+
+  const server = createServer((req: IncomingMessage, res: ServerResponse) => {
+    // CORS preflight
+    if (req.method === "OPTIONS") {
+      res.writeHead(200, corsHeaders);
+      res.end();
+      return;
+    }
+
+    if (req.method === "POST" && req.url?.startsWith("/upload/")) {
+      const testId = req.url.slice("/upload/".length);
+      const pending = pendingUploads.get(testId);
+      if (!pending) {
+        res.writeHead(404, corsHeaders);
+        res.end("Unknown test");
+        return;
+      }
+
+      const chunks: Buffer[] = [];
+      req.on("data", (chunk: Buffer) => chunks.push(chunk));
+      req.on("end", () => {
+        const data = Buffer.concat(chunks);
+        writeFileSync(pending.outputPath, data);
+        res.writeHead(200, corsHeaders);
+        res.end("OK");
+        pending.resolve(pending.outputPath);
+        pendingUploads.delete(testId);
+      });
+      return;
+    }
+
+    res.writeHead(404, corsHeaders);
+    res.end("Not found");
+  });
+
+  server.listen(UPLOAD_PORT);
+  return server;
+}
+
 // ── Step 2: Render client-side ──────────────────────────────────────────────
 
 async function renderClientSide(
   suite: TestSuite,
-  compiledHtmlPath: string,
+  _compiledHtmlPath: string,
   outputDir: string,
 ): Promise<{ videoPath: string; durationMs: number }> {
   const metaJson = JSON.parse(readFileSync(join(outputDir, "compile-meta.json"), "utf-8"));
@@ -168,56 +210,117 @@ async function renderClientSide(
   const height = metaJson.height || 1920;
   const fps = suite.meta.renderConfig.fps;
 
-  // Create a test page that loads the compiled HTML and renders it
   const testPagePath = join(outputDir, "render-test.html");
   const videoOutputPath = join(outputDir, "client-render.mp4");
 
+  // The test page renders client-side, then POSTs the blob to our upload server
   const testPage = `<!DOCTYPE html>
 <html><head><meta charset="utf-8"><title>Parity Test: ${suite.id}</title></head>
 <body>
 <script type="module">
-  const { render } = await import('http://localhost:${SERVER_PORT}/dist/renderer.bundle.js');
+  const { render } = await import('http://localhost:${SERVER_PORT}/packages/renderer/dist/renderer.bundle.js');
 
   try {
+    document.title = 'rendering...';
     const result = await render({
-      composition: 'http://localhost:${SERVER_PORT}/parity/${suite.id}/compiled.html',
+      composition: 'http://localhost:${SERVER_PORT}/renders/parity-regression/${suite.id}/compiled.html',
       fps: ${fps},
       width: ${width},
       height: ${height},
       codec: 'h264',
       format: 'mp4',
+      frameSource: 'snapdom',
       concurrency: 1,
-      workerUrl: 'http://localhost:${SERVER_PORT}/dist/worker.bundle.js',
+      workerUrl: 'http://localhost:${SERVER_PORT}/packages/renderer/dist/worker.bundle.js',
       onProgress: (p) => {
         document.title = p.stage + ' ' + Math.round(p.progress * 100) + '%';
       },
     });
 
-    // Store result globally so the harness can read it
-    window.__renderResult = {
-      ok: true,
-      blobSize: result.blob.size,
-      durationMs: result.durationMs,
-      mimeType: result.mimeType,
-    };
-
-    // Create download link with the blob
-    const url = URL.createObjectURL(result.blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'output.mp4';
-    a.id = 'download-link';
-    document.body.appendChild(a);
-    document.title = 'DONE';
+    // Upload blob to the Node harness
+    document.title = 'uploading...';
+    const resp = await fetch('http://localhost:${UPLOAD_PORT}/upload/${suite.id}', {
+      method: 'POST',
+      body: result.blob,
+    });
+
+    if (!resp.ok) throw new Error('Upload failed: ' + resp.status);
+
+    document.title = 'DONE:' + result.durationMs;
   } catch (err) {
-    window.__renderResult = { ok: false, error: err.message };
     document.title = 'ERROR: ' + err.message;
   }
 </script>
 </body></html>`;
 
   writeFileSync(testPagePath, testPage);
-  return { videoPath: videoOutputPath, durationMs: 0 };
+
+  // Register upload promise
+  const uploadPromise = new Promise<string>((resolve, reject) => {
+    pendingUploads.set(suite.id, { resolve, reject, outputPath: videoOutputPath });
+  });
+
+  // Open in browser — use spawn (async) so the upload server can process requests
+  execSync(
+    `agent-browser --session parity-${suite.id} open "http://localhost:${SERVER_PORT}/renders/parity-regression/${suite.id}/render-test.html"`,
+    {
+      encoding: "utf-8",
+      timeout: 10_000,
+    },
+  );
+
+  // Wait for title to indicate completion — use spawn (async) so the event loop
+  // stays active for the upload HTTP server to process the POST from the browser
+  await new Promise<string>((resolve) => {
+    const child = spawnChild(
+      "agent-browser",
+      [
+        "--session",
+        `parity-${suite.id}`,
+        "wait",
+        "--fn",
+        "document.title.startsWith('DONE') || document.title.startsWith('ERROR')",
+        "--timeout",
+        "180000",
+      ],
+      { encoding: "utf-8", timeout: 190_000, stdio: ["ignore", "pipe", "pipe"] } as any,
+    );
+    let out = "";
+    child.stdout?.on("data", (d: Buffer) => {
+      out += d.toString();
+    });
+    child.stderr?.on("data", (d: Buffer) => {
+      out += d.toString();
+    });
+    child.on("close", () => resolve(out));
+  });
+
+  const titleResult = spawnSync(
+    "agent-browser",
+    ["--session", `parity-${suite.id}`, "get", "title"],
+    { encoding: "utf-8", timeout: 5_000 },
+  );
+  const title = (titleResult.stdout || "").trim();
+
+  execSync(`agent-browser --session parity-${suite.id} close 2>/dev/null || true`, {
+    encoding: "utf-8",
+    timeout: 5_000,
+  });
+
+  if (title.startsWith("ERROR")) {
+    throw new Error(title);
+  }
+
+  // Wait for upload to complete (render can take minutes for long compositions)
+  await Promise.race([
+    uploadPromise,
+    new Promise<never>((_, reject) =>
+      setTimeout(() => reject(new Error("Upload timeout")), 300_000),
+    ),
+  ]);
+
+  const durationMs = title.startsWith("DONE:") ? parseInt(title.slice(5)) : 0;
+  return { videoPath: videoOutputPath, durationMs };
 }
 
 // ── Step 3: PSNR comparison ─────────────────────────────────────────────────
@@ -284,75 +387,14 @@ async function runTest(suite: TestSuite): Promise<TestResult> {
     return result;
   }
 
-  // Step 2: Render via browser (agent-browser)
+  // Step 2: Render via browser
   console.log(`  [${suite.id}] Rendering client-side...`);
   const renderStart = Date.now();
   try {
-    await renderClientSide(suite, compiledPath, testOutputDir);
-
-    // Use agent-browser to open the test page and wait for render
-    const testPageUrl = `http://localhost:${SERVER_PORT}/parity/${suite.id}/render-test.html`;
-
-    execSync(`agent-browser --session parity-${suite.id} open "${testPageUrl}"`, {
-      encoding: "utf-8",
-      timeout: 10_000,
-    });
-
-    // Wait for render to complete (title changes to DONE or ERROR)
-    spawnSync(
-      "agent-browser",
-      [
-        "--session",
-        `parity-${suite.id}`,
-        "wait",
-        "--fn",
-        "document.title.startsWith('DONE') || document.title.startsWith('ERROR')",
-        "--timeout",
-        "120000",
-      ],
-      { encoding: "utf-8", timeout: 130_000 },
-    );
-
-    // Check result
-    const titleResult = spawnSync(
-      "agent-browser",
-      ["--session", `parity-${suite.id}`, "get", "title"],
-      { encoding: "utf-8", timeout: 5_000 },
-    );
-    const title = (titleResult.stdout || "").trim();
-
-    if (title.startsWith("ERROR")) {
-      result.error = `Client-side render failed: ${title}`;
-      console.log(`  [${suite.id}] ✗ ${result.error}`);
-      execSync(`agent-browser --session parity-${suite.id} close`, {
-        encoding: "utf-8",
-        timeout: 5_000,
-      }).toString();
-      return result;
-    }
-
-    // Download the rendered video
-    spawnSync(
-      "agent-browser",
-      [
-        "--session",
-        `parity-${suite.id}`,
-        "download",
-        "#download-link",
-        join(testOutputDir, "client-render.mp4"),
-      ],
-      { encoding: "utf-8", timeout: 30_000 },
-    );
-
-    execSync(`agent-browser --session parity-${suite.id} close`, {
-      encoding: "utf-8",
-      timeout: 5_000,
-    }).toString();
+    const { videoPath, durationMs } = await renderClientSide(suite, compiledPath, testOutputDir);
+    result.renderTimeMs = durationMs || Date.now() - renderStart;
 
-    result.renderTimeMs = Date.now() - renderStart;
-    const clientVideoPath = join(testOutputDir, "client-render.mp4");
-
-    if (!existsSync(clientVideoPath)) {
+    if (!existsSync(videoPath)) {
       result.error = "Client-side render produced no output file";
       console.log(`  [${suite.id}] ✗ No output file`);
       return result;
@@ -364,17 +406,16 @@ async function runTest(suite: TestSuite): Promise<TestResult> {
     // Step 3: PSNR comparison
     console.log(`  [${suite.id}] Comparing PSNR...`);
 
-    // Get video duration
     const probeResult = spawnSync(
       "ffprobe",
-      ["-v", "error", "-show_entries", "format=duration", "-of", "csv=p=0", clientVideoPath],
+      ["-v", "error", "-show_entries", "format=duration", "-of", "csv=p=0", videoPath],
       { encoding: "utf-8", timeout: 10_000 },
     );
     const videoDuration = parseFloat((probeResult.stdout || "0").trim()) || 3;
 
     for (let i = 0; i < CHECKPOINTS; i++) {
       const time = (videoDuration * i) / CHECKPOINTS;
-      const psnr = psnrAtCheckpoint(clientVideoPath, suite.goldenVideo, time);
+      const psnr = psnrAtCheckpoint(videoPath, suite.goldenVideo, time);
       const passed = psnr >= (suite.meta.minPsnr || MIN_PSNR);
       result.checkpoints.push({ time, psnr, passed });
     }
@@ -426,34 +467,36 @@ async function main() {
     );
   }
 
-  // Start static file server
+  // Start static file server + upload server
   mkdirSync(PARITY_OUTPUT_DIR, { recursive: true });
 
   console.log(`Starting file server on port ${SERVER_PORT}...`);
-  const serverProcess = require("child_process").spawn(
-    "npx",
-    ["serve", "-l", String(SERVER_PORT), "-C", "."],
-    { cwd: resolve("packages/renderer"), detached: true, stdio: "ignore" },
+  // Write serve config to disable cleanUrls (which strips .html and causes 301 redirects)
+  const serveConfigPath = resolve("serve.json");
+  writeFileSync(
+    serveConfigPath,
+    JSON.stringify({
+      cleanUrls: false,
+      headers: [{ source: "**", headers: [{ key: "Access-Control-Allow-Origin", value: "*" }] }],
+    }),
   );
-  serverProcess.unref();
 
-  // Also serve the parity output directory
-  // Actually, serve from the repo root so both dist/ and parity/ are accessible
-  serverProcess.kill();
-  const rootServer = require("child_process").spawn(
-    "npx",
-    ["serve", "-l", String(SERVER_PORT), "-C", "."],
-    { cwd: resolve("."), detached: true, stdio: "ignore" },
-  );
+  const rootServer = spawnChild("npx", ["serve", "-l", String(SERVER_PORT), "-C", "."], {
+    cwd: resolve("."),
+    detached: true,
+    stdio: "ignore",
+  });
   rootServer.unref();
 
+  console.log(`Starting upload server on port ${UPLOAD_PORT}...`);
+  const uploadServer = startUploadServer();
+
   // Wait for server to start
   await new Promise((r) => setTimeout(r, 2000));
 
   // Symlink renderer dist into a place the server can find
   const distLink = join(PARITY_OUTPUT_DIR, "..", "dist");
   if (!existsSync(distLink)) {
-    const { symlinkSync } = require("fs");
     try {
       symlinkSync(RENDERER_DIST, distLink);
     } catch {}
@@ -491,10 +534,16 @@ async function main() {
   writeFileSync(reportPath, JSON.stringify(results, null, 2));
   console.log(`Report: ${reportPath}`);
 
-  // Cleanup server
+  // Cleanup servers and temp files
   try {
     rootServer.kill();
   } catch {}
+  try {
+    uploadServer.close();
+  } catch {}
+  try {
+    rmSync(resolve("serve.json"));
+  } catch {}
 
   process.exit(totalFailed > 0 ? 1 : 0);
 }

From ef63bb9cde055d96ce02ed447fd17c220a1b5a3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sat, 11 Apr 2026 14:03:49 +0200
Subject: [PATCH 24/30] chore(renderer): remove brainstorming docs, QA pages,
 and lockfile from PR

- Remove docs/superpowers/plans and specs (brainstorming artifacts)
- Remove packages/renderer/qa/ (dev testing pages)
- Remove packages/renderer/pnpm-lock.yaml (monorepo uses root lockfile)
- Remove run-parity-test.sh (superseded by regression-parity.ts)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../plans/2026-04-10-client-side-renderer.md  | 2118 -----------------
 .../2026-04-10-client-side-renderer-design.md |  872 -------
 packages/renderer/pnpm-lock.yaml              | 1392 -----------
 packages/renderer/qa/composition.html         |   98 -
 packages/renderer/qa/index.html               |  208 --
 packages/renderer/scripts/run-parity-test.sh  |  150 --
 6 files changed, 4838 deletions(-)
 delete mode 100644 docs/superpowers/plans/2026-04-10-client-side-renderer.md
 delete mode 100644 docs/superpowers/specs/2026-04-10-client-side-renderer-design.md
 delete mode 100644 packages/renderer/pnpm-lock.yaml
 delete mode 100644 packages/renderer/qa/composition.html
 delete mode 100644 packages/renderer/qa/index.html
 delete mode 100755 packages/renderer/scripts/run-parity-test.sh

diff --git a/docs/superpowers/plans/2026-04-10-client-side-renderer.md b/docs/superpowers/plans/2026-04-10-client-side-renderer.md
deleted file mode 100644
index fa70df47..00000000
--- a/docs/superpowers/plans/2026-04-10-client-side-renderer.md
+++ /dev/null
@@ -1,2118 +0,0 @@
-# Client-Side Video Renderer Implementation Plan
-
-> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
-
-**Goal:** Build `@hyperframes/renderer` — a browser-only package that renders HyperFrames compositions to MP4 using WebCodecs + MediaBunny + SnapDOM, with zero server dependencies.
-
-**Architecture:** Pluggable frame source (SnapDOM now, html-in-canvas later) captures frames from parallel hidden iframes. Frames are transferred to a Web Worker that encodes via WebCodecs and muxes via MediaBunny. Audio is mixed client-side via OfflineAudioContext.
-
-**Tech Stack:** TypeScript, WebCodecs API, MediaBunny (muxer), SnapDOM (DOM capture), OfflineAudioContext (audio mixing), Web Workers + OffscreenCanvas
-
-**Spec:** `docs/superpowers/specs/2026-04-10-client-side-renderer-design.md`
-
----
-
-## File Map
-
-| File | Responsibility |
-|---|---|
-| `packages/renderer/package.json` | Package manifest — browser-only, deps: @zumer/snapdom, mediabunny |
-| `packages/renderer/tsconfig.json` | TypeScript config — ES2022, bundler resolution, DOM lib |
-| `packages/renderer/src/types.ts` | All shared interfaces and type definitions |
-| `packages/renderer/src/compat.ts` | Feature detection — `isSupported()` |
-| `packages/renderer/src/utils/timing.ts` | Frame time generation and quantization |
-| `packages/renderer/src/sources/snapdom.ts` | SnapDOM frame source — captures DOM to ImageBitmap |
-| `packages/renderer/src/encoding/types.ts` | Worker message protocol types |
-| `packages/renderer/src/encoding/worker.ts` | Web Worker — VideoEncoder + MediaBunny muxer |
-| `packages/renderer/src/encoding/encoder.ts` | Main-thread wrapper — manages worker lifecycle |
-| `packages/renderer/src/audio/mixer.ts` | OfflineAudioContext audio mixing |
-| `packages/renderer/src/capture/iframe-pool.ts` | Parallel iframe management and frame scheduling |
-| `packages/renderer/src/capture/video-frame-injector.ts` | Canvas overlays for `<video>` element frames |
-| `packages/renderer/src/renderer.ts` | Main orchestrator — coordinates full pipeline |
-| `packages/renderer/src/index.ts` | Public API — `render()`, `createRenderer()`, `isSupported()` |
-
----
-
-## Task 1: Package Scaffold + Types
-
-**Files:**
-- Create: `packages/renderer/package.json`
-- Create: `packages/renderer/tsconfig.json`
-- Create: `packages/renderer/src/types.ts`
-- Create: `packages/renderer/src/compat.ts`
-- Create: `packages/renderer/src/index.ts`
-
-- [ ] **Step 1: Create package.json**
-
-```json
-{
-  "name": "@hyperframes/renderer",
-  "version": "0.0.1",
-  "description": "Client-side video renderer for HyperFrames compositions",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/heygen-com/hyperframes",
-    "directory": "packages/renderer"
-  },
-  "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
-  "exports": {
-    ".": {
-      "import": "./src/index.ts",
-      "types": "./src/index.ts"
-    }
-  },
-  "scripts": {
-    "build": "tsc",
-    "test": "vitest run",
-    "typecheck": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@zumer/snapdom": "^2.8.0",
-    "mediabunny": "^1.40.0"
-  },
-  "peerDependencies": {
-    "@hyperframes/core": "workspace:^"
-  },
-  "devDependencies": {
-    "typescript": "^5.0.0",
-    "vitest": "^3.2.4"
-  }
-}
-```
-
-- [ ] **Step 2: Create tsconfig.json**
-
-```json
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "strict": true,
-    "noUncheckedIndexedAccess": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "lib": ["ES2022", "DOM", "DOM.Iterable", "WebWorker"]
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist", "**/*.test.ts"]
-}
-```
-
-- [ ] **Step 3: Create src/types.ts with all interfaces**
-
-This is the single source of truth for all types in the package. Every other module imports from here.
-
-```typescript
-/**
- * @hyperframes/renderer — Type definitions
- *
- * All interfaces for the client-side rendering pipeline.
- */
-
-// ── Frame Source ──────────────────────────────────────────────────────────────
-
-export interface HfMediaElement {
-  elementId: string;
-  src: string;
-  startTime: number;
-  endTime: number;
-  mediaOffset?: number;
-  volume?: number;
-  hasAudio?: boolean;
-}
-
-export interface FrameSourceConfig {
-  compositionUrl: string;
-  width: number;
-  height: number;
-  devicePixelRatio?: number;
-}
-
-export interface FrameSource {
-  readonly name: string;
-  init(config: FrameSourceConfig): Promise<void>;
-  capture(time: number): Promise<ImageBitmap>;
-  readonly duration: number;
-  readonly media: HfMediaElement[];
-  dispose(): Promise<void>;
-}
-
-// ── Encoder ──────────────────────────────────────────────────────────────────
-
-export interface EncoderConfig {
-  width: number;
-  height: number;
-  fps: number;
-  codec: "avc1.640028" | "vp09.00.31.08";
-  bitrate?: number;
-  hardwareAcceleration?: "prefer-hardware" | "prefer-software";
-}
-
-// ── Audio ────────────────────────────────────────────────────────────────────
-
-export interface AudioSource {
-  src: string | Blob;
-  startTime: number;
-  endTime: number;
-  mediaOffset?: number;
-  volume?: number;
-}
-
-export interface AudioMixConfig {
-  duration: number;
-  sampleRate?: number;
-  channels?: number;
-  sources: AudioSource[];
-}
-
-export interface AudioMixResult {
-  buffer: AudioBuffer;
-  sampleRate: number;
-  channels: number;
-}
-
-// ── Muxer ────────────────────────────────────────────────────────────────────
-
-export interface MuxerConfig {
-  format: "mp4" | "webm";
-  width: number;
-  height: number;
-  fps: number;
-  videoCodec: string;
-}
-
-// ── Renderer (Public API) ────────────────────────────────────────────────────
-
-export interface RenderConfig {
-  composition: string;
-  format?: "mp4" | "webm";
-  fps?: 24 | 30 | 60;
-  width?: number;
-  height?: number;
-  devicePixelRatio?: number;
-  codec?: "h264" | "vp9";
-  bitrate?: number;
-  concurrency?: number;
-  onProgress?: (progress: RenderProgress) => void;
-  frameSource?: "snapdom" | "draw-element-image";
-}
-
-export interface RenderProgress {
-  stage:
-    | "initializing"
-    | "capturing"
-    | "encoding"
-    | "mixing-audio"
-    | "muxing"
-    | "complete";
-  progress: number;
-  currentFrame?: number;
-  totalFrames?: number;
-  estimatedTimeRemaining?: number;
-  captureRate?: number;
-}
-
-export interface RenderResult {
-  blob: Blob;
-  mimeType: string;
-  durationMs: number;
-  perf: {
-    captureMs: number;
-    encodeMs: number;
-    audioMs: number;
-    muxMs: number;
-    totalMs: number;
-    framesPerSecond: number;
-  };
-}
-```
-
-- [ ] **Step 4: Create src/compat.ts**
-
-```typescript
-/**
- * Feature detection for client-side rendering.
- */
-
-export function isSupported(): boolean {
-  return (
-    typeof globalThis.VideoEncoder !== "undefined" &&
-    typeof globalThis.OffscreenCanvas !== "undefined" &&
-    typeof globalThis.AudioContext !== "undefined" &&
-    typeof globalThis.createImageBitmap !== "undefined"
-  );
-}
-
-export function detectBestFrameSource(): "draw-element-image" | "snapdom" {
-  if (
-    typeof CanvasRenderingContext2D !== "undefined" &&
-    "drawElementImage" in CanvasRenderingContext2D.prototype
-  ) {
-    return "draw-element-image";
-  }
-  return "snapdom";
-}
-```
-
-- [ ] **Step 5: Create src/index.ts (stub exports)**
-
-```typescript
-/**
- * @hyperframes/renderer
- *
- * Client-side video rendering for HyperFrames compositions.
- * Zero server dependencies — renders entirely in the browser
- * using WebCodecs, MediaBunny, and SnapDOM.
- */
-
-export { isSupported, detectBestFrameSource } from "./compat.js";
-
-export type {
-  RenderConfig,
-  RenderProgress,
-  RenderResult,
-  FrameSource,
-  FrameSourceConfig,
-  HfMediaElement,
-  EncoderConfig,
-  AudioSource,
-  AudioMixConfig,
-  AudioMixResult,
-  MuxerConfig,
-} from "./types.js";
-
-// render() and createRenderer() are exported in Task 8 once the orchestrator exists.
-```
-
-- [ ] **Step 6: Install dependencies and verify typecheck**
-
-Run:
-```bash
-cd packages/renderer && pnpm install && pnpm typecheck
-```
-Expected: Clean typecheck, no errors.
-
-- [ ] **Step 7: Commit**
-
-```bash
-git add packages/renderer/
-git commit -m "feat(renderer): scaffold package with types and compat detection"
-```
-
----
-
-## Task 2: Frame Timing Utility
-
-**Files:**
-- Create: `packages/renderer/src/utils/timing.ts`
-- Create: `packages/renderer/src/utils/timing.test.ts`
-
-- [ ] **Step 1: Write the test**
-
-```typescript
-import { describe, it, expect } from "vitest";
-import { generateFrameTimes, distributeFrames } from "./timing.js";
-
-describe("generateFrameTimes", () => {
-  it("generates correct frame times for 1s at 30fps", () => {
-    const times = generateFrameTimes(1.0, 30);
-    expect(times).toHaveLength(30);
-    expect(times[0]).toBe(0);
-    expect(times[1]).toBeCloseTo(1 / 30);
-    expect(times[29]).toBeCloseTo(29 / 30);
-  });
-
-  it("generates correct frame times for 0.5s at 60fps", () => {
-    const times = generateFrameTimes(0.5, 60);
-    expect(times).toHaveLength(30);
-    expect(times[0]).toBe(0);
-  });
-
-  it("returns empty array for zero duration", () => {
-    expect(generateFrameTimes(0, 30)).toHaveLength(0);
-  });
-});
-
-describe("distributeFrames", () => {
-  it("distributes 10 frames across 3 workers", () => {
-    const ranges = distributeFrames(10, 3);
-    expect(ranges).toHaveLength(3);
-    expect(ranges[0]).toEqual({ start: 0, end: 3 });
-    expect(ranges[1]).toEqual({ start: 4, end: 6 });
-    expect(ranges[2]).toEqual({ start: 7, end: 9 });
-    const totalFrames = ranges.reduce((s, r) => s + (r.end - r.start + 1), 0);
-    expect(totalFrames).toBe(10);
-  });
-
-  it("handles fewer frames than workers", () => {
-    const ranges = distributeFrames(2, 5);
-    expect(ranges).toHaveLength(2);
-    expect(ranges[0]).toEqual({ start: 0, end: 0 });
-    expect(ranges[1]).toEqual({ start: 1, end: 1 });
-  });
-
-  it("handles single worker", () => {
-    const ranges = distributeFrames(100, 1);
-    expect(ranges).toHaveLength(1);
-    expect(ranges[0]).toEqual({ start: 0, end: 99 });
-  });
-});
-```
-
-- [ ] **Step 2: Run test to verify it fails**
-
-Run: `cd packages/renderer && pnpm vitest run src/utils/timing.test.ts`
-Expected: FAIL — module not found.
-
-- [ ] **Step 3: Implement timing.ts**
-
-```typescript
-/**
- * Frame timing utilities.
- *
- * Generates frame timestamps and distributes frame ranges
- * across parallel capture workers (iframes).
- */
-
-export interface FrameRange {
-  start: number;
-  end: number;
-}
-
-export function generateFrameTimes(durationSeconds: number, fps: number): number[] {
-  if (durationSeconds <= 0 || fps <= 0) return [];
-  const totalFrames = Math.ceil(durationSeconds * fps);
-  const frameDuration = 1 / fps;
-  const times: number[] = [];
-  for (let i = 0; i < totalFrames; i++) {
-    times.push(i * frameDuration);
-  }
-  return times;
-}
-
-export function distributeFrames(totalFrames: number, workerCount: number): FrameRange[] {
-  const effectiveWorkers = Math.min(workerCount, totalFrames);
-  if (effectiveWorkers <= 0) return [];
-  const ranges: FrameRange[] = [];
-  const baseSize = Math.floor(totalFrames / effectiveWorkers);
-  const remainder = totalFrames % effectiveWorkers;
-  let cursor = 0;
-  for (let i = 0; i < effectiveWorkers; i++) {
-    const size = baseSize + (i < remainder ? 1 : 0);
-    ranges.push({ start: cursor, end: cursor + size - 1 });
-    cursor += size;
-  }
-  return ranges;
-}
-```
-
-- [ ] **Step 4: Run test to verify it passes**
-
-Run: `cd packages/renderer && pnpm vitest run src/utils/timing.test.ts`
-Expected: All 6 tests pass.
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add packages/renderer/src/utils/
-git commit -m "feat(renderer): add frame timing and distribution utilities"
-```
-
----
-
-## Task 3: SnapDOM Frame Source
-
-**Files:**
-- Create: `packages/renderer/src/sources/snapdom.ts`
-- Create: `packages/renderer/src/sources/snapdom.test.ts`
-
-- [ ] **Step 1: Write the test**
-
-Note: SnapDOM requires a real DOM. These tests use `vitest` with `environment: 'jsdom'` or `'happy-dom'`. Since SnapDOM relies on real rendering (SVG foreignObject), some behaviors can only be tested in a real browser. These unit tests validate the structural contract — fidelity testing is done in integration tests.
-
-```typescript
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { SnapdomFrameSource } from "./snapdom.js";
-
-// Mock @zumer/snapdom since jsdom can't run real SVG foreignObject rendering
-vi.mock("@zumer/snapdom", () => ({
-  snapdom: {
-    toCanvas: vi.fn().mockResolvedValue(
-      (() => {
-        const c = document.createElement("canvas");
-        c.width = 1920;
-        c.height = 1080;
-        return c;
-      })(),
-    ),
-  },
-}));
-
-describe("SnapdomFrameSource", () => {
-  it("has name 'snapdom'", () => {
-    const source = new SnapdomFrameSource();
-    expect(source.name).toBe("snapdom");
-  });
-
-  it("duration is 0 before init", () => {
-    const source = new SnapdomFrameSource();
-    expect(source.duration).toBe(0);
-  });
-
-  it("media is empty before init", () => {
-    const source = new SnapdomFrameSource();
-    expect(source.media).toEqual([]);
-  });
-});
-```
-
-- [ ] **Step 2: Run test to verify it fails**
-
-Run: `cd packages/renderer && pnpm vitest run src/sources/snapdom.test.ts`
-Expected: FAIL — module not found.
-
-- [ ] **Step 3: Implement snapdom.ts**
-
-```typescript
-/**
- * SnapDOM Frame Source
- *
- * Captures DOM snapshots from an iframe-loaded composition
- * using @zumer/snapdom, then converts to ImageBitmap for
- * transfer to the encoding worker.
- */
-
-import { snapdom } from "@zumer/snapdom";
-import type { FrameSource, FrameSourceConfig, HfMediaElement } from "../types.js";
-
-interface HfProtocol {
-  duration: number;
-  seek(time: number): void;
-  media?: HfMediaElement[];
-}
-
-export class SnapdomFrameSource implements FrameSource {
-  readonly name = "snapdom";
-
-  private iframe: HTMLIFrameElement | null = null;
-  private config: FrameSourceConfig | null = null;
-  private hf: HfProtocol | null = null;
-  private _duration = 0;
-  private _media: HfMediaElement[] = [];
-
-  get duration(): number {
-    return this._duration;
-  }
-
-  get media(): HfMediaElement[] {
-    return this._media;
-  }
-
-  async init(config: FrameSourceConfig): Promise<void> {
-    this.config = config;
-
-    const iframe = document.createElement("iframe");
-    iframe.style.position = "fixed";
-    iframe.style.top = "-9999px";
-    iframe.style.left = "-9999px";
-    iframe.style.width = `${config.width}px`;
-    iframe.style.height = `${config.height}px`;
-    iframe.style.border = "none";
-    iframe.style.opacity = "0";
-    iframe.style.pointerEvents = "none";
-    document.body.appendChild(iframe);
-    this.iframe = iframe;
-
-    await new Promise<void>((resolve, reject) => {
-      const timeout = setTimeout(() => reject(new Error("Composition load timeout (10s)")), 10_000);
-      iframe.onload = () => {
-        clearTimeout(timeout);
-        resolve();
-      };
-      iframe.onerror = () => {
-        clearTimeout(timeout);
-        reject(new Error(`Failed to load composition: ${config.compositionUrl}`));
-      };
-      iframe.src = config.compositionUrl;
-    });
-
-    // Wait for window.__hf to become available (runtime init is async)
-    const hf = await this.waitForHfProtocol(iframe);
-    this.hf = hf;
-    this._duration = hf.duration;
-    this._media = hf.media ?? [];
-  }
-
-  async capture(time: number): Promise<ImageBitmap> {
-    if (!this.iframe || !this.hf || !this.config) {
-      throw new Error("SnapdomFrameSource not initialized — call init() first");
-    }
-
-    this.hf.seek(time);
-
-    const doc = this.iframe.contentDocument;
-    if (!doc?.documentElement) {
-      throw new Error("iframe has no document");
-    }
-
-    const canvas = await snapdom.toCanvas(doc.documentElement, {
-      width: this.config.width,
-      height: this.config.height,
-      scale: this.config.devicePixelRatio ?? 1,
-    });
-
-    return createImageBitmap(canvas);
-  }
-
-  async dispose(): Promise<void> {
-    if (this.iframe) {
-      this.iframe.remove();
-      this.iframe = null;
-    }
-    this.hf = null;
-    this.config = null;
-    this._duration = 0;
-    this._media = [];
-  }
-
-  private waitForHfProtocol(
-    iframe: HTMLIFrameElement,
-    timeoutMs = 10_000,
-  ): Promise<HfProtocol> {
-    return new Promise((resolve, reject) => {
-      const start = Date.now();
-      const poll = () => {
-        const win = iframe.contentWindow as (Window & { __hf?: HfProtocol }) | null;
-        if (win?.__hf && typeof win.__hf.seek === "function" && win.__hf.duration > 0) {
-          resolve(win.__hf);
-          return;
-        }
-        if (Date.now() - start > timeoutMs) {
-          reject(new Error("Timed out waiting for window.__hf protocol"));
-          return;
-        }
-        requestAnimationFrame(poll);
-      };
-      poll();
-    });
-  }
-}
-```
-
-- [ ] **Step 4: Run test to verify it passes**
-
-Run: `cd packages/renderer && pnpm vitest run src/sources/snapdom.test.ts`
-Expected: All 3 tests pass.
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add packages/renderer/src/sources/
-git commit -m "feat(renderer): add SnapDOM frame source implementation"
-```
-
----
-
-## Task 4: Encoding Worker + Message Protocol
-
-**Files:**
-- Create: `packages/renderer/src/encoding/types.ts`
-- Create: `packages/renderer/src/encoding/worker.ts`
-- Create: `packages/renderer/src/encoding/encoder.ts`
-- Create: `packages/renderer/src/encoding/encoder.test.ts`
-
-- [ ] **Step 1: Create encoding/types.ts — worker message protocol**
-
-```typescript
-/**
- * Worker message protocol types.
- *
- * Main thread → Worker: WorkerInMessage
- * Worker → Main thread: WorkerOutMessage
- */
-
-export type WorkerInMessage =
-  | {
-      type: "init";
-      config: {
-        width: number;
-        height: number;
-        fps: number;
-        codec: string;
-        bitrate: number;
-        format: "mp4" | "webm";
-      };
-    }
-  | {
-      type: "frame";
-      bitmap: ImageBitmap;
-      index: number;
-      timestamp: number;
-    }
-  | {
-      type: "set-audio";
-      channelData: Float32Array[];
-      sampleRate: number;
-    }
-  | {
-      type: "finalize";
-    };
-
-export type WorkerOutMessage =
-  | { type: "ready" }
-  | { type: "frame-encoded"; index: number }
-  | { type: "done"; blob: Blob }
-  | { type: "error"; message: string }
-  | { type: "progress"; framesEncoded: number };
-```
-
-- [ ] **Step 2: Create encoding/worker.ts — Web Worker entry point**
-
-This file runs inside a Web Worker. It creates a VideoEncoder + MediaBunny muxer and processes frames received from the main thread.
-
-```typescript
-/**
- * Encoding Worker
- *
- * Receives ImageBitmap frames from the main thread, encodes via
- * WebCodecs VideoEncoder, and muxes into MP4/WebM via MediaBunny.
- */
-
-import {
-  Output,
-  Mp4OutputFormat,
-  WebmOutputFormat,
-  BufferTarget,
-  EncodedVideoPacketSource,
-  EncodedPacket,
-  AudioSampleSource,
-  AudioSample,
-} from "mediabunny";
-import type { WorkerInMessage, WorkerOutMessage } from "./types.js";
-
-let output: Output | null = null;
-let videoSource: EncodedVideoPacketSource | null = null;
-let audioSource: AudioSampleSource | null = null;
-let encoder: VideoEncoder | null = null;
-let target: BufferTarget | null = null;
-let isFirstPacket = true;
-let framesEncoded = 0;
-let encoderConfig: VideoEncoderConfig | null = null;
-
-function post(msg: WorkerOutMessage, transfer?: Transferable[]): void {
-  self.postMessage(msg, { transfer: transfer ?? [] });
-}
-
-async function handleInit(config: WorkerInMessage & { type: "init" }): Promise<void> {
-  const { width, height, fps, codec, bitrate, format } = config.config;
-
-  target = new BufferTarget();
-  const formatObj = format === "webm" ? new WebmOutputFormat() : new Mp4OutputFormat();
-  output = new Output({ format: formatObj, target });
-
-  const mbCodec = codec.startsWith("avc") ? "avc" : "vp9";
-  videoSource = new EncodedVideoPacketSource(mbCodec);
-  output.addVideoTrack(videoSource, { frameRate: fps });
-
-  audioSource = new AudioSampleSource({ codec: "aac", bitrate: 128_000 });
-  output.addAudioTrack(audioSource);
-
-  encoderConfig = {
-    codec,
-    width,
-    height,
-    bitrate,
-    hardwareAcceleration: "prefer-hardware",
-  };
-
-  encoder = new VideoEncoder({
-    output: async (chunk, meta) => {
-      const packet = EncodedPacket.fromEncodedChunk(chunk);
-      if (isFirstPacket) {
-        await videoSource!.add(packet, meta);
-        isFirstPacket = false;
-      } else {
-        await videoSource!.add(packet);
-      }
-      framesEncoded++;
-      post({ type: "frame-encoded", index: framesEncoded - 1 });
-    },
-    error: (e) => {
-      post({ type: "error", message: e.message });
-    },
-  });
-
-  encoder.configure(encoderConfig);
-  await output.start();
-
-  post({ type: "ready" });
-}
-
-async function handleFrame(msg: WorkerInMessage & { type: "frame" }): Promise<void> {
-  if (!encoder) {
-    post({ type: "error", message: "Encoder not initialized" });
-    return;
-  }
-
-  const frame = new VideoFrame(msg.bitmap, {
-    timestamp: msg.timestamp,
-  });
-
-  const isKeyFrame = msg.index % 150 === 0;
-  encoder.encode(frame, { keyFrame: isKeyFrame });
-  frame.close();
-  msg.bitmap.close();
-}
-
-async function handleSetAudio(msg: WorkerInMessage & { type: "set-audio" }): Promise<void> {
-  if (!audioSource) return;
-
-  const interleaved = interleaveChannels(msg.channelData);
-  const sample = new AudioSample({
-    data: interleaved,
-    format: "f32-planar",
-    numberOfChannels: msg.channelData.length,
-    sampleRate: msg.sampleRate,
-    timestamp: 0,
-  });
-  await audioSource.add(sample);
-  sample.close();
-}
-
-async function handleFinalize(): Promise<void> {
-  if (!encoder || !output || !target || !videoSource || !audioSource) {
-    post({ type: "error", message: "Cannot finalize — not initialized" });
-    return;
-  }
-
-  await encoder.flush();
-  encoder.close();
-  videoSource.close();
-  audioSource.close();
-  await output.finalize();
-
-  const buffer = target.buffer;
-  if (!buffer) {
-    post({ type: "error", message: "No output buffer after finalize" });
-    return;
-  }
-
-  const blob = new Blob([buffer], { type: "video/mp4" });
-  post({ type: "done", blob });
-}
-
-function interleaveChannels(channels: Float32Array[]): Float32Array {
-  if (channels.length === 1) return channels[0]!;
-  const length = channels[0]!.length * channels.length;
-  const result = new Float32Array(length);
-  const numChannels = channels.length;
-  const samplesPerChannel = channels[0]!.length;
-  for (let ch = 0; ch < numChannels; ch++) {
-    const channelData = channels[ch]!;
-    for (let i = 0; i < samplesPerChannel; i++) {
-      result[i * numChannels + ch] = channelData[i]!;
-    }
-  }
-  return result;
-}
-
-self.onmessage = async (e: MessageEvent<WorkerInMessage>) => {
-  try {
-    switch (e.data.type) {
-      case "init":
-        await handleInit(e.data);
-        break;
-      case "frame":
-        await handleFrame(e.data);
-        break;
-      case "set-audio":
-        await handleSetAudio(e.data);
-        break;
-      case "finalize":
-        await handleFinalize();
-        break;
-    }
-  } catch (err) {
-    post({ type: "error", message: err instanceof Error ? err.message : String(err) });
-  }
-};
-```
-
-- [ ] **Step 3: Create encoding/encoder.ts — main-thread wrapper**
-
-```typescript
-/**
- * Encoder
- *
- * Main-thread wrapper that manages the encoding Web Worker.
- * Sends ImageBitmap frames to the worker and receives the final MP4 blob.
- */
-
-import type { WorkerInMessage, WorkerOutMessage } from "./types.js";
-
-export interface EncoderOptions {
-  width: number;
-  height: number;
-  fps: number;
-  codec: string;
-  bitrate: number;
-  format: "mp4" | "webm";
-  onFrameEncoded?: (index: number) => void;
-}
-
-export class Encoder {
-  private worker: Worker | null = null;
-  private options: EncoderOptions;
-  private resolveReady: (() => void) | null = null;
-  private resolveDone: ((blob: Blob) => void) | null = null;
-  private rejectPending: ((err: Error) => void) | null = null;
-
-  constructor(options: EncoderOptions) {
-    this.options = options;
-  }
-
-  async init(): Promise<void> {
-    this.worker = new Worker(new URL("./worker.js", import.meta.url), {
-      type: "module",
-    });
-
-    this.worker.onmessage = (e: MessageEvent<WorkerOutMessage>) => {
-      this.handleMessage(e.data);
-    };
-
-    this.worker.onerror = (e) => {
-      this.rejectPending?.(new Error(`Worker error: ${e.message}`));
-    };
-
-    await new Promise<void>((resolve, reject) => {
-      this.resolveReady = resolve;
-      this.rejectPending = reject;
-
-      const msg: WorkerInMessage = {
-        type: "init",
-        config: {
-          width: this.options.width,
-          height: this.options.height,
-          fps: this.options.fps,
-          codec: this.options.codec,
-          bitrate: this.options.bitrate,
-          format: this.options.format,
-        },
-      };
-      this.worker!.postMessage(msg);
-    });
-  }
-
-  sendFrame(bitmap: ImageBitmap, index: number, timestamp: number): void {
-    if (!this.worker) throw new Error("Encoder not initialized");
-    const msg: WorkerInMessage = { type: "frame", bitmap, index, timestamp };
-    this.worker.postMessage(msg, [bitmap]);
-  }
-
-  setAudio(channelData: Float32Array[], sampleRate: number): void {
-    if (!this.worker) throw new Error("Encoder not initialized");
-    const msg: WorkerInMessage = { type: "set-audio", channelData, sampleRate };
-    this.worker.postMessage(msg, channelData.map((c) => c.buffer));
-  }
-
-  async finalize(): Promise<Blob> {
-    if (!this.worker) throw new Error("Encoder not initialized");
-    return new Promise<Blob>((resolve, reject) => {
-      this.resolveDone = resolve;
-      this.rejectPending = reject;
-      const msg: WorkerInMessage = { type: "finalize" };
-      this.worker!.postMessage(msg);
-    });
-  }
-
-  dispose(): void {
-    this.worker?.terminate();
-    this.worker = null;
-  }
-
-  private handleMessage(msg: WorkerOutMessage): void {
-    switch (msg.type) {
-      case "ready":
-        this.resolveReady?.();
-        this.resolveReady = null;
-        break;
-      case "frame-encoded":
-        this.options.onFrameEncoded?.(msg.index);
-        break;
-      case "done":
-        this.resolveDone?.(msg.blob);
-        this.resolveDone = null;
-        break;
-      case "error":
-        this.rejectPending?.(new Error(msg.message));
-        this.rejectPending = null;
-        break;
-    }
-  }
-}
-```
-
-- [ ] **Step 4: Write encoder.test.ts**
-
-Full browser-level encoding tests require WebCodecs (not available in jsdom). Test the structural contract.
-
-```typescript
-import { describe, it, expect } from "vitest";
-import { Encoder } from "./encoder.js";
-
-describe("Encoder", () => {
-  it("can be constructed with options", () => {
-    const encoder = new Encoder({
-      width: 1920,
-      height: 1080,
-      fps: 30,
-      codec: "avc1.640028",
-      bitrate: 4_000_000,
-      format: "mp4",
-    });
-    expect(encoder).toBeDefined();
-  });
-
-  it("throws if sendFrame called before init", () => {
-    const encoder = new Encoder({
-      width: 1920,
-      height: 1080,
-      fps: 30,
-      codec: "avc1.640028",
-      bitrate: 4_000_000,
-      format: "mp4",
-    });
-    expect(() => encoder.sendFrame({} as ImageBitmap, 0, 0)).toThrow("not initialized");
-  });
-
-  it("throws if finalize called before init", async () => {
-    const encoder = new Encoder({
-      width: 1920,
-      height: 1080,
-      fps: 30,
-      codec: "avc1.640028",
-      bitrate: 4_000_000,
-      format: "mp4",
-    });
-    await expect(encoder.finalize()).rejects.toThrow("not initialized");
-  });
-});
-```
-
-- [ ] **Step 5: Run tests**
-
-Run: `cd packages/renderer && pnpm vitest run src/encoding/encoder.test.ts`
-Expected: All 3 tests pass.
-
-- [ ] **Step 6: Commit**
-
-```bash
-git add packages/renderer/src/encoding/
-git commit -m "feat(renderer): add WebCodecs encoding worker and main-thread wrapper"
-```
-
----
-
-## Task 5: Audio Mixer
-
-**Files:**
-- Create: `packages/renderer/src/audio/mixer.ts`
-- Create: `packages/renderer/src/audio/mixer.test.ts`
-
-- [ ] **Step 1: Write the test**
-
-```typescript
-import { describe, it, expect } from "vitest";
-import { mixAudio } from "./mixer.js";
-import type { AudioMixConfig } from "../types.js";
-
-describe("mixAudio", () => {
-  it("returns silent audio when no sources provided", async () => {
-    const config: AudioMixConfig = {
-      duration: 1.0,
-      sampleRate: 44100,
-      channels: 2,
-      sources: [],
-    };
-    const result = await mixAudio(config);
-    expect(result.sampleRate).toBe(44100);
-    expect(result.channels).toBe(2);
-    expect(result.buffer.duration).toBeCloseTo(1.0, 1);
-    // Verify silence
-    const data = result.buffer.getChannelData(0);
-    const maxAmp = Math.max(...Array.from(data).map(Math.abs));
-    expect(maxAmp).toBe(0);
-  });
-
-  it("uses default sample rate and channels", async () => {
-    const result = await mixAudio({ duration: 0.5, sources: [] });
-    expect(result.sampleRate).toBe(44100);
-    expect(result.channels).toBe(2);
-  });
-});
-```
-
-- [ ] **Step 2: Run test to verify it fails**
-
-Run: `cd packages/renderer && pnpm vitest run src/audio/mixer.test.ts`
-Expected: FAIL — module not found.
-
-- [ ] **Step 3: Implement mixer.ts**
-
-```typescript
-/**
- * Audio Mixer
- *
- * Mixes audio sources using OfflineAudioContext.
- * Decodes audio files, applies volume/timing offsets,
- * and renders to a single AudioBuffer (PCM).
- */
-
-import type { AudioMixConfig, AudioMixResult } from "../types.js";
-
-const DEFAULT_SAMPLE_RATE = 44100;
-const DEFAULT_CHANNELS = 2;
-
-export async function mixAudio(config: AudioMixConfig): Promise<AudioMixResult> {
-  const sampleRate = config.sampleRate ?? DEFAULT_SAMPLE_RATE;
-  const channels = config.channels ?? DEFAULT_CHANNELS;
-  const totalSamples = Math.ceil(config.duration * sampleRate);
-
-  const offlineCtx = new OfflineAudioContext(channels, totalSamples, sampleRate);
-
-  for (const source of config.sources) {
-    const arrayBuffer = await fetchAudioData(source.src);
-    const audioBuffer = await offlineCtx.decodeAudioData(arrayBuffer);
-
-    const bufferSource = offlineCtx.createBufferSource();
-    bufferSource.buffer = audioBuffer;
-
-    // Apply volume
-    const gainNode = offlineCtx.createGain();
-    gainNode.gain.value = source.volume ?? 1;
-
-    bufferSource.connect(gainNode);
-    gainNode.connect(offlineCtx.destination);
-
-    // Calculate timing
-    const mediaOffset = source.mediaOffset ?? 0;
-    const clipDuration = source.endTime - source.startTime;
-
-    if (mediaOffset > 0) {
-      bufferSource.start(source.startTime, mediaOffset, clipDuration);
-    } else {
-      bufferSource.start(source.startTime, 0, clipDuration);
-    }
-  }
-
-  const renderedBuffer = await offlineCtx.startRendering();
-
-  return {
-    buffer: renderedBuffer,
-    sampleRate,
-    channels,
-  };
-}
-
-async function fetchAudioData(src: string | Blob): Promise<ArrayBuffer> {
-  if (src instanceof Blob) {
-    return src.arrayBuffer();
-  }
-  const response = await fetch(src);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch audio: ${src} (${response.status})`);
-  }
-  return response.arrayBuffer();
-}
-```
-
-- [ ] **Step 4: Run tests**
-
-Run: `cd packages/renderer && pnpm vitest run src/audio/mixer.test.ts`
-Expected: Both tests pass.
-
-Note: `OfflineAudioContext` may not be available in the test environment (jsdom). If tests fail due to missing API, add `// @vitest-environment happy-dom` or configure vitest to use a browser-like environment. If needed, mock `OfflineAudioContext` minimally:
-
-```typescript
-// Add to top of test file if OfflineAudioContext is missing:
-import { vi } from "vitest";
-
-if (typeof globalThis.OfflineAudioContext === "undefined") {
-  globalThis.OfflineAudioContext = vi.fn().mockImplementation((channels, length, sampleRate) => ({
-    createBufferSource: () => ({
-      buffer: null,
-      connect: vi.fn(),
-      start: vi.fn(),
-    }),
-    createGain: () => ({
-      gain: { value: 1 },
-      connect: vi.fn(),
-    }),
-    destination: {},
-    decodeAudioData: vi.fn().mockResolvedValue({
-      duration: 1,
-      numberOfChannels: channels,
-      sampleRate,
-      getChannelData: () => new Float32Array(length),
-    }),
-    startRendering: vi.fn().mockResolvedValue({
-      duration: length / sampleRate,
-      numberOfChannels: channels,
-      sampleRate,
-      length,
-      getChannelData: () => new Float32Array(length),
-    }),
-  })) as unknown as typeof OfflineAudioContext;
-}
-```
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add packages/renderer/src/audio/
-git commit -m "feat(renderer): add OfflineAudioContext-based audio mixer"
-```
-
----
-
-## Task 6: Iframe Pool + Frame Scheduler
-
-**Files:**
-- Create: `packages/renderer/src/capture/iframe-pool.ts`
-- Create: `packages/renderer/src/capture/iframe-pool.test.ts`
-
-- [ ] **Step 1: Write the test**
-
-```typescript
-import { describe, it, expect } from "vitest";
-import { calculateConcurrency } from "./iframe-pool.js";
-
-describe("calculateConcurrency", () => {
-  it("returns at least 1", () => {
-    expect(calculateConcurrency(0)).toBe(1);
-  });
-
-  it("caps at 8", () => {
-    expect(calculateConcurrency(100)).toBeLessThanOrEqual(8);
-  });
-
-  it("leaves 1 core for encoding", () => {
-    expect(calculateConcurrency(4)).toBe(3);
-  });
-
-  it("handles single-core", () => {
-    expect(calculateConcurrency(1)).toBe(1);
-  });
-});
-```
-
-- [ ] **Step 2: Run test to verify it fails**
-
-Run: `cd packages/renderer && pnpm vitest run src/capture/iframe-pool.test.ts`
-Expected: FAIL — module not found.
-
-- [ ] **Step 3: Implement iframe-pool.ts**
-
-```typescript
-/**
- * Iframe Pool
- *
- * Manages N parallel hidden iframes, each loading the same composition.
- * Each iframe captures a contiguous range of frames using the provided
- * FrameSource for DOM-to-ImageBitmap conversion.
- */
-
-import type { FrameSource, FrameSourceConfig, HfMediaElement } from "../types.js";
-import { distributeFrames } from "../utils/timing.js";
-
-export function calculateConcurrency(hardwareConcurrency: number): number {
-  return Math.max(1, Math.min(hardwareConcurrency - 1, 8));
-}
-
-export interface IframePoolConfig {
-  compositionUrl: string;
-  width: number;
-  height: number;
-  devicePixelRatio?: number;
-  concurrency: number;
-  createFrameSource: () => FrameSource;
-}
-
-export interface CapturedFrame {
-  bitmap: ImageBitmap;
-  index: number;
-  time: number;
-}
-
-export class IframePool {
-  private sources: FrameSource[] = [];
-  private config: IframePoolConfig | null = null;
-
-  async init(config: IframePoolConfig): Promise<{ duration: number; media: HfMediaElement[] }> {
-    this.config = config;
-
-    // Initialize all frame sources in parallel
-    const initPromises: Promise<void>[] = [];
-    for (let i = 0; i < config.concurrency; i++) {
-      const source = config.createFrameSource();
-      this.sources.push(source);
-      initPromises.push(
-        source.init({
-          compositionUrl: config.compositionUrl,
-          width: config.width,
-          height: config.height,
-          devicePixelRatio: config.devicePixelRatio,
-        }),
-      );
-    }
-    await Promise.all(initPromises);
-
-    const first = this.sources[0]!;
-    return { duration: first.duration, media: first.media };
-  }
-
-  async captureAll(
-    frameTimes: number[],
-    onFrame: (frame: CapturedFrame) => void,
-  ): Promise<void> {
-    const ranges = distributeFrames(frameTimes.length, this.sources.length);
-
-    await Promise.all(
-      ranges.map(async (range, workerIdx) => {
-        const source = this.sources[workerIdx]!;
-        for (let i = range.start; i <= range.end; i++) {
-          const time = frameTimes[i]!;
-          const bitmap = await source.capture(time);
-          onFrame({ bitmap, index: i, time });
-        }
-      }),
-    );
-  }
-
-  async dispose(): Promise<void> {
-    await Promise.all(this.sources.map((s) => s.dispose()));
-    this.sources = [];
-    this.config = null;
-  }
-}
-```
-
-- [ ] **Step 4: Run tests**
-
-Run: `cd packages/renderer && pnpm vitest run src/capture/iframe-pool.test.ts`
-Expected: All 4 tests pass.
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add packages/renderer/src/capture/
-git commit -m "feat(renderer): add parallel iframe pool for frame capture"
-```
-
----
-
-## Task 7: Video Frame Injector
-
-**Files:**
-- Create: `packages/renderer/src/capture/video-frame-injector.ts`
-
-- [ ] **Step 1: Implement video-frame-injector.ts**
-
-This handles `<video>` elements in compositions by decoding them client-side and drawing frames onto overlay canvases that SnapDOM can capture.
-
-```typescript
-/**
- * Video Frame Injector
- *
- * For each <video> element in the composition, creates a canvas overlay
- * that displays the decoded video frame at the current composition time.
- * SnapDOM can capture <canvas> elements (unlike <video> via foreignObject).
- */
-
-import type { HfMediaElement } from "../types.js";
-
-interface VideoTrack {
-  element: HfMediaElement;
-  video: HTMLVideoElement;
-  canvas: HTMLCanvasElement;
-  ctx: CanvasRenderingContext2D;
-}
-
-export class VideoFrameInjector {
-  private tracks: VideoTrack[] = [];
-  private iframeDoc: Document | null = null;
-
-  async init(media: HfMediaElement[], iframeDoc: Document): Promise<void> {
-    this.iframeDoc = iframeDoc;
-    const videoElements = media.filter((m) => {
-      const el = iframeDoc.getElementById(m.elementId);
-      return el?.tagName === "VIDEO";
-    });
-
-    for (const element of videoElements) {
-      const videoEl = iframeDoc.getElementById(element.elementId) as HTMLVideoElement | null;
-      if (!videoEl) continue;
-
-      // Create a hidden video element for decoding
-      const video = iframeDoc.createElement("video");
-      video.src = element.src;
-      video.muted = true;
-      video.preload = "auto";
-      video.crossOrigin = "anonymous";
-      video.style.display = "none";
-      iframeDoc.body.appendChild(video);
-
-      await new Promise<void>((resolve) => {
-        video.onloadeddata = () => resolve();
-        video.onerror = () => resolve(); // graceful — skip broken videos
-        video.load();
-      });
-
-      // Create canvas overlay matching the video element's position
-      const canvas = iframeDoc.createElement("canvas");
-      const rect = videoEl.getBoundingClientRect();
-      canvas.width = rect.width;
-      canvas.height = rect.height;
-      canvas.style.position = "absolute";
-      canvas.style.left = `${rect.left}px`;
-      canvas.style.top = `${rect.top}px`;
-      canvas.style.width = `${rect.width}px`;
-      canvas.style.height = `${rect.height}px`;
-      canvas.style.zIndex = getComputedStyle(videoEl).zIndex || "1";
-      canvas.style.pointerEvents = "none";
-
-      const ctx = canvas.getContext("2d");
-      if (!ctx) continue;
-
-      // Hide the original video element (SnapDOM can't capture it anyway)
-      videoEl.style.visibility = "hidden";
-
-      // Insert canvas as sibling
-      videoEl.parentElement?.insertBefore(canvas, videoEl.nextSibling);
-
-      this.tracks.push({ element, video, canvas, ctx });
-    }
-  }
-
-  async injectFrame(compositionTime: number): Promise<void> {
-    for (const track of this.tracks) {
-      const { element, video, canvas, ctx } = track;
-
-      // Is this video visible at this composition time?
-      if (compositionTime < element.startTime || compositionTime >= element.endTime) {
-        canvas.style.visibility = "hidden";
-        continue;
-      }
-      canvas.style.visibility = "visible";
-
-      // Calculate the video's local time
-      const mediaOffset = element.mediaOffset ?? 0;
-      const localTime = compositionTime - element.startTime + mediaOffset;
-
-      // Seek the video to the correct time
-      if (Math.abs(video.currentTime - localTime) > 0.01) {
-        video.currentTime = localTime;
-        await new Promise<void>((resolve) => {
-          video.onseeked = () => resolve();
-          setTimeout(resolve, 100); // safety timeout
-        });
-      }
-
-      // Draw the current video frame onto the canvas
-      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-    }
-  }
-
-  dispose(): void {
-    for (const track of this.tracks) {
-      track.video.remove();
-      track.canvas.remove();
-    }
-    this.tracks = [];
-    this.iframeDoc = null;
-  }
-}
-```
-
-- [ ] **Step 2: Commit**
-
-```bash
-git add packages/renderer/src/capture/video-frame-injector.ts
-git commit -m "feat(renderer): add video frame injector for <video> element capture"
-```
-
----
-
-## Task 8: Main Renderer Orchestrator
-
-**Files:**
-- Create: `packages/renderer/src/renderer.ts`
-- Modify: `packages/renderer/src/index.ts` — add `render()` and `createRenderer()` exports
-
-- [ ] **Step 1: Implement renderer.ts**
-
-```typescript
-/**
- * Renderer
- *
- * Orchestrates the full client-side rendering pipeline:
- * 1. Initialize iframe pool + frame sources
- * 2. Capture frames in parallel across iframes
- * 3. Stream frames to encoding worker
- * 4. Mix audio via OfflineAudioContext
- * 5. Mux video + audio via MediaBunny (in worker)
- * 6. Return final MP4 Blob
- */
-
-import type {
-  RenderConfig,
-  RenderProgress,
-  RenderResult,
-  AudioSource,
-} from "./types.js";
-import { isSupported } from "./compat.js";
-import { generateFrameTimes } from "./utils/timing.js";
-import { IframePool, calculateConcurrency } from "./capture/iframe-pool.js";
-import { SnapdomFrameSource } from "./sources/snapdom.js";
-import { Encoder } from "./encoding/encoder.js";
-import { mixAudio } from "./audio/mixer.js";
-
-const DEFAULT_FPS = 30;
-const DEFAULT_WIDTH = 1920;
-const DEFAULT_HEIGHT = 1080;
-const DEFAULT_BITRATE_1080P = 4_000_000;
-
-function resolveCodecString(codec: RenderConfig["codec"]): string {
-  if (codec === "vp9") return "vp09.00.31.08";
-  return "avc1.640028"; // H.264 High profile
-}
-
-function resolveBitrate(width: number, height: number, bitrate?: number): number {
-  if (bitrate) return bitrate;
-  const pixels = width * height;
-  const ref = 1920 * 1080;
-  return Math.round(DEFAULT_BITRATE_1080P * (pixels / ref));
-}
-
-export class HyperframesRenderer {
-  private config: Required<
-    Pick<RenderConfig, "fps" | "width" | "height" | "format" | "codec" | "concurrency">
-  > & RenderConfig;
-  private cancelled = false;
-  private iframePool: IframePool | null = null;
-  private encoder: Encoder | null = null;
-
-  constructor(config: RenderConfig) {
-    this.config = {
-      ...config,
-      fps: config.fps ?? DEFAULT_FPS,
-      width: config.width ?? DEFAULT_WIDTH,
-      height: config.height ?? DEFAULT_HEIGHT,
-      format: config.format ?? "mp4",
-      codec: config.codec ?? "h264",
-      concurrency: config.concurrency ?? calculateConcurrency(navigator.hardwareConcurrency ?? 4),
-    };
-  }
-
-  cancel(): void {
-    this.cancelled = true;
-  }
-
-  async render(): Promise<RenderResult> {
-    if (!isSupported()) {
-      throw new Error(
-        "Client-side rendering not supported. Requires WebCodecs (Chrome 94+, Firefox 130+, Safari 26+).",
-      );
-    }
-
-    const perfStart = performance.now();
-    const perf = { captureMs: 0, encodeMs: 0, audioMs: 0, muxMs: 0, totalMs: 0, framesPerSecond: 0 };
-    const { fps, width, height, format, codec, concurrency, composition, onProgress } = this.config;
-
-    this.cancelled = false;
-
-    const emitProgress = (stage: RenderProgress["stage"], progress: number, extra?: Partial<RenderProgress>) => {
-      onProgress?.({ stage, progress, ...extra });
-    };
-
-    try {
-      // ── Stage 1: Initialize ──────────────────────────────────────────────
-      emitProgress("initializing", 0);
-
-      this.iframePool = new IframePool();
-      const { duration, media } = await this.iframePool.init({
-        compositionUrl: composition,
-        width,
-        height,
-        devicePixelRatio: this.config.devicePixelRatio,
-        concurrency,
-        createFrameSource: () => new SnapdomFrameSource(),
-      });
-
-      if (this.cancelled) throw new CancelledError();
-
-      const frameTimes = generateFrameTimes(duration, fps);
-      const totalFrames = frameTimes.length;
-
-      // Initialize encoder
-      const codecString = resolveCodecString(codec);
-      const bitrate = resolveBitrate(width, height, this.config.bitrate);
-
-      let framesEncoded = 0;
-      this.encoder = new Encoder({
-        width,
-        height,
-        fps,
-        codec: codecString,
-        bitrate,
-        format,
-        onFrameEncoded: () => {
-          framesEncoded++;
-        },
-      });
-      await this.encoder.init();
-
-      if (this.cancelled) throw new CancelledError();
-
-      // ── Stage 2: Capture + Encode (pipelined) ───────────────────────────
-      emitProgress("capturing", 0, { totalFrames, currentFrame: 0 });
-      const captureStart = performance.now();
-
-      // Buffer to ensure frames are sent to encoder in order
-      const frameBuffer = new Map<number, ImageBitmap>();
-      let nextFrameToEncode = 0;
-
-      const flushBuffer = () => {
-        while (frameBuffer.has(nextFrameToEncode)) {
-          const bitmap = frameBuffer.get(nextFrameToEncode)!;
-          frameBuffer.delete(nextFrameToEncode);
-          const timestamp = frameTimes[nextFrameToEncode]! * 1_000_000; // seconds → microseconds
-          this.encoder!.sendFrame(bitmap, nextFrameToEncode, timestamp);
-          nextFrameToEncode++;
-        }
-      };
-
-      let framesCaptured = 0;
-      await this.iframePool.captureAll(frameTimes, (frame) => {
-        if (this.cancelled) return;
-        frameBuffer.set(frame.index, frame.bitmap);
-        flushBuffer();
-        framesCaptured++;
-        const captureProgress = framesCaptured / totalFrames;
-        emitProgress("capturing", captureProgress * 0.7, {
-          currentFrame: framesCaptured,
-          totalFrames,
-          captureRate: framesCaptured / ((performance.now() - captureStart) / 1000),
-        });
-      });
-
-      // Flush any remaining buffered frames
-      flushBuffer();
-      perf.captureMs = performance.now() - captureStart;
-
-      if (this.cancelled) throw new CancelledError();
-
-      // ── Stage 3: Mix audio ──────────────────────────────────────────────
-      emitProgress("mixing-audio", 0.7);
-      const audioStart = performance.now();
-
-      const audioSources: AudioSource[] = media
-        .filter((m) => m.hasAudio)
-        .map((m) => ({
-          src: m.src,
-          startTime: m.startTime,
-          endTime: m.endTime,
-          mediaOffset: m.mediaOffset,
-          volume: m.volume,
-        }));
-
-      if (audioSources.length > 0) {
-        const mixResult = await mixAudio({
-          duration,
-          sources: audioSources,
-        });
-
-        const channelData: Float32Array[] = [];
-        for (let ch = 0; ch < mixResult.channels; ch++) {
-          channelData.push(mixResult.buffer.getChannelData(ch));
-        }
-        this.encoder.setAudio(channelData, mixResult.sampleRate);
-      }
-      perf.audioMs = performance.now() - audioStart;
-
-      if (this.cancelled) throw new CancelledError();
-
-      // ── Stage 4: Finalize (mux) ────────────────────────────────────────
-      emitProgress("muxing", 0.9);
-      const muxStart = performance.now();
-      const blob = await this.encoder.finalize();
-      perf.muxMs = performance.now() - muxStart;
-
-      // ── Done ────────────────────────────────────────────────────────────
-      perf.totalMs = performance.now() - perfStart;
-      perf.framesPerSecond = totalFrames / (perf.totalMs / 1000);
-      perf.encodeMs = perf.totalMs - perf.captureMs - perf.audioMs - perf.muxMs;
-
-      emitProgress("complete", 1, { totalFrames, currentFrame: totalFrames });
-
-      return {
-        blob,
-        mimeType: format === "webm" ? "video/webm" : "video/mp4",
-        durationMs: perf.totalMs,
-        perf,
-      };
-    } finally {
-      await this.iframePool?.dispose();
-      this.encoder?.dispose();
-      this.iframePool = null;
-      this.encoder = null;
-    }
-  }
-}
-
-export class CancelledError extends Error {
-  constructor() {
-    super("Render cancelled");
-    this.name = "CancelledError";
-  }
-}
-```
-
-- [ ] **Step 2: Update src/index.ts with public API**
-
-Replace the contents of `packages/renderer/src/index.ts` with:
-
-```typescript
-/**
- * @hyperframes/renderer
- *
- * Client-side video rendering for HyperFrames compositions.
- * Zero server dependencies — renders entirely in the browser
- * using WebCodecs, MediaBunny, and SnapDOM.
- */
-
-import { HyperframesRenderer } from "./renderer.js";
-import type { RenderConfig, RenderResult } from "./types.js";
-
-export { isSupported, detectBestFrameSource } from "./compat.js";
-export { HyperframesRenderer, CancelledError } from "./renderer.js";
-export { SnapdomFrameSource } from "./sources/snapdom.js";
-
-export type {
-  RenderConfig,
-  RenderProgress,
-  RenderResult,
-  FrameSource,
-  FrameSourceConfig,
-  HfMediaElement,
-  EncoderConfig,
-  AudioSource,
-  AudioMixConfig,
-  AudioMixResult,
-  MuxerConfig,
-} from "./types.js";
-
-/**
- * Render a composition to video. Convenience wrapper around HyperframesRenderer.
- *
- * @example
- * ```ts
- * const result = await render({
- *   composition: './my-comp/index.html',
- *   fps: 30,
- *   onProgress: (p) => console.log(p.stage, p.progress),
- * });
- * // result.blob is the final MP4
- * ```
- */
-export async function render(config: RenderConfig): Promise<RenderResult> {
-  const renderer = new HyperframesRenderer(config);
-  return renderer.render();
-}
-
-/**
- * Create a renderer instance for more control (e.g., cancellation).
- *
- * @example
- * ```ts
- * const renderer = createRenderer({ composition: './comp/index.html' });
- * cancelBtn.onclick = () => renderer.cancel();
- * const result = await renderer.render();
- * ```
- */
-export function createRenderer(config: RenderConfig): HyperframesRenderer {
-  return new HyperframesRenderer(config);
-}
-```
-
-- [ ] **Step 3: Verify typecheck**
-
-Run: `cd packages/renderer && pnpm typecheck`
-Expected: Clean, no errors.
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add packages/renderer/src/renderer.ts packages/renderer/src/index.ts
-git commit -m "feat(renderer): add main orchestrator and public API (render, createRenderer)"
-```
-
----
-
-## Task 9: End-to-End Integration Test
-
-**Files:**
-- Create: `packages/renderer/src/tests/renderer.integration.test.ts`
-- Create: `packages/renderer/src/tests/fixtures/basic-composition.html`
-
-- [ ] **Step 1: Create a minimal test composition**
-
-Create `packages/renderer/src/tests/fixtures/basic-composition.html`:
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <style>
-    html, body { margin: 0; padding: 0; overflow: hidden; }
-    body { width: 1920px; height: 1080px; background: #1a1a2e; }
-    .box {
-      position: absolute;
-      top: 50%; left: 50%;
-      transform: translate(-50%, -50%);
-      width: 200px; height: 200px;
-      background: #e94560;
-      border-radius: 16px;
-    }
-  </style>
-</head>
-<body>
-  <div class="box"></div>
-  <script>
-    // Minimal __hf protocol — 2 second static composition
-    window.__hf = {
-      duration: 2,
-      seek: function(time) {
-        // Static composition — no animation to seek
-      },
-      media: [],
-    };
-  </script>
-</body>
-</html>
-```
-
-- [ ] **Step 2: Create integration test**
-
-Note: This test requires a real browser environment (WebCodecs, DOM, Workers). It should be run in a browser test runner (e.g., vitest with `browser` mode or Playwright). Mark it for browser-only execution.
-
-```typescript
-/**
- * End-to-end integration test for the renderer.
- *
- * Requires a browser environment with WebCodecs support.
- * Run with: vitest run --environment browser
- * Or skip in CI with jsdom by checking for WebCodecs.
- */
-import { describe, it, expect } from "vitest";
-import { render, isSupported } from "../index.js";
-
-const SKIP = typeof globalThis.VideoEncoder === "undefined";
-
-describe.skipIf(SKIP)("Renderer E2E", () => {
-  it("renders a basic composition to MP4", async () => {
-    const progressStages: string[] = [];
-
-    const result = await render({
-      composition: new URL("./fixtures/basic-composition.html", import.meta.url).href,
-      fps: 30,
-      width: 1920,
-      height: 1080,
-      concurrency: 1, // Single iframe for test simplicity
-      onProgress: (p) => {
-        if (!progressStages.includes(p.stage)) {
-          progressStages.push(p.stage);
-        }
-      },
-    });
-
-    // Verify output
-    expect(result.blob).toBeInstanceOf(Blob);
-    expect(result.blob.size).toBeGreaterThan(0);
-    expect(result.mimeType).toBe("video/mp4");
-    expect(result.durationMs).toBeGreaterThan(0);
-
-    // Verify perf data
-    expect(result.perf.totalMs).toBeGreaterThan(0);
-    expect(result.perf.captureMs).toBeGreaterThan(0);
-    expect(result.perf.framesPerSecond).toBeGreaterThan(0);
-
-    // Verify progress stages fired
-    expect(progressStages).toContain("initializing");
-    expect(progressStages).toContain("capturing");
-    expect(progressStages).toContain("complete");
-  }, 60_000); // 60s timeout for rendering
-
-  it("isSupported returns true in browser with WebCodecs", () => {
-    expect(isSupported()).toBe(true);
-  });
-});
-```
-
-- [ ] **Step 3: Commit**
-
-```bash
-git add packages/renderer/src/tests/
-git commit -m "test(renderer): add end-to-end integration test with basic composition"
-```
-
----
-
-## Task 10: Wire SnapDOM Frame Source to Video Frame Injector
-
-**Files:**
-- Modify: `packages/renderer/src/sources/snapdom.ts` — integrate VideoFrameInjector
-
-The SnapdomFrameSource needs to create VideoFrameInjector instances for compositions with `<video>` elements, and call `injectFrame()` before each SnapDOM capture.
-
-- [ ] **Step 1: Update snapdom.ts to integrate video frame injection**
-
-Add to `packages/renderer/src/sources/snapdom.ts`, after the existing imports:
-
-```typescript
-import { VideoFrameInjector } from "../capture/video-frame-injector.js";
-```
-
-Add a field to the class:
-
-```typescript
-private videoInjector: VideoFrameInjector | null = null;
-```
-
-At the end of the `init()` method, after setting `this._media`, add:
-
-```typescript
-    // Set up video frame injection if composition has <video> elements
-    const videoMedia = this._media.filter((m) => {
-      const el = this.iframe!.contentDocument?.getElementById(m.elementId);
-      return el?.tagName === "VIDEO";
-    });
-    if (videoMedia.length > 0) {
-      this.videoInjector = new VideoFrameInjector();
-      await this.videoInjector.init(videoMedia, this.iframe!.contentDocument!);
-    }
-```
-
-In the `capture()` method, before the `snapdom.toCanvas()` call, add:
-
-```typescript
-    // Inject video frames before capture (SnapDOM can't capture <video> elements)
-    if (this.videoInjector) {
-      await this.videoInjector.injectFrame(time);
-    }
-```
-
-In `dispose()`, add before the existing cleanup:
-
-```typescript
-    this.videoInjector?.dispose();
-    this.videoInjector = null;
-```
-
-- [ ] **Step 2: Verify typecheck**
-
-Run: `cd packages/renderer && pnpm typecheck`
-Expected: Clean, no errors.
-
-- [ ] **Step 3: Commit**
-
-```bash
-git add packages/renderer/src/sources/snapdom.ts
-git commit -m "feat(renderer): integrate video frame injector into SnapDOM frame source"
-```
-
----
-
-## Task 11: Progress and ETA Utility
-
-**Files:**
-- Create: `packages/renderer/src/utils/progress.ts`
-- Create: `packages/renderer/src/utils/progress.test.ts`
-
-- [ ] **Step 1: Write the test**
-
-```typescript
-import { describe, it, expect } from "vitest";
-import { ProgressTracker } from "./progress.js";
-
-describe("ProgressTracker", () => {
-  it("estimates time remaining based on rate", () => {
-    const tracker = new ProgressTracker(100);
-    // Simulate 10 frames in 1 second
-    tracker.recordFrame(10, 1000);
-    const eta = tracker.estimateTimeRemaining();
-    // 90 frames remaining at 10fps = ~9 seconds = ~9000ms
-    expect(eta).toBeGreaterThan(8000);
-    expect(eta).toBeLessThan(10000);
-  });
-
-  it("returns capture rate", () => {
-    const tracker = new ProgressTracker(100);
-    tracker.recordFrame(20, 2000);
-    expect(tracker.captureRate()).toBeCloseTo(10, 0);
-  });
-
-  it("handles zero frames gracefully", () => {
-    const tracker = new ProgressTracker(100);
-    expect(tracker.estimateTimeRemaining()).toBeUndefined();
-    expect(tracker.captureRate()).toBe(0);
-  });
-});
-```
-
-- [ ] **Step 2: Run test to verify it fails**
-
-Run: `cd packages/renderer && pnpm vitest run src/utils/progress.test.ts`
-Expected: FAIL — module not found.
-
-- [ ] **Step 3: Implement progress.ts**
-
-```typescript
-/**
- * Progress tracking and ETA estimation.
- */
-
-export class ProgressTracker {
-  private totalFrames: number;
-  private framesCaptured = 0;
-  private elapsedMs = 0;
-
-  constructor(totalFrames: number) {
-    this.totalFrames = totalFrames;
-  }
-
-  recordFrame(framesCaptured: number, elapsedMs: number): void {
-    this.framesCaptured = framesCaptured;
-    this.elapsedMs = elapsedMs;
-  }
-
-  captureRate(): number {
-    if (this.elapsedMs <= 0) return 0;
-    return this.framesCaptured / (this.elapsedMs / 1000);
-  }
-
-  estimateTimeRemaining(): number | undefined {
-    const rate = this.captureRate();
-    if (rate <= 0) return undefined;
-    const remaining = this.totalFrames - this.framesCaptured;
-    return (remaining / rate) * 1000;
-  }
-
-  progress(): number {
-    if (this.totalFrames <= 0) return 0;
-    return this.framesCaptured / this.totalFrames;
-  }
-}
-```
-
-- [ ] **Step 4: Run tests**
-
-Run: `cd packages/renderer && pnpm vitest run src/utils/progress.test.ts`
-Expected: All 3 tests pass.
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add packages/renderer/src/utils/progress.ts packages/renderer/src/utils/progress.test.ts
-git commit -m "feat(renderer): add progress tracking and ETA estimation"
-```
-
----
-
-## Task 12: Final Verification + Package Polish
-
-**Files:**
-- Modify: `packages/renderer/package.json` — ensure all exports are correct
-- Run: full build + typecheck + tests
-
-- [ ] **Step 1: Run full typecheck**
-
-Run: `cd packages/renderer && pnpm typecheck`
-Expected: Clean, no errors.
-
-- [ ] **Step 2: Run all unit tests**
-
-Run: `cd packages/renderer && pnpm test`
-Expected: All unit tests pass (integration tests may be skipped without browser env).
-
-- [ ] **Step 3: Verify the package builds**
-
-Run: `cd packages/renderer && pnpm build`
-Expected: `dist/` directory created with compiled JS + declaration files.
-
-- [ ] **Step 4: Verify the full monorepo builds**
-
-Run: `pnpm build` (from repo root)
-Expected: All packages build successfully, including `@hyperframes/renderer`.
-
-- [ ] **Step 5: Commit any fixes**
-
-```bash
-git add -A packages/renderer/
-git commit -m "chore(renderer): polish package, fix build issues"
-```
-
----
-
-## Task 13: Browser QA with agent-browser
-
-After implementation is complete, use agent-browser to:
-
-1. Serve a test composition via a local file server
-2. Open the Studio in a browser
-3. Trigger a client-side render
-4. Verify the MP4 downloads and plays correctly
-5. Record the session as a QA video
-
-This task is deferred until after all code tasks are complete.
-
-- [ ] **Step 1: Run QA via agent-browser skill**
-
-Invoke `/agent-browser` with instructions to:
-- Start a local dev server (`pnpm dev` in the studio)
-- Open the studio URL
-- Load a test composition
-- Click "Render in Browser" (or trigger `render()` from the console)
-- Wait for the MP4 blob download
-- Verify the output plays in a `<video>` element
-- Record the entire session
-
----
-
-## Summary
-
-| Task | Description | Estimated Steps |
-|---|---|---|
-| 1 | Package scaffold + types | 7 |
-| 2 | Frame timing utility | 5 |
-| 3 | SnapDOM frame source | 5 |
-| 4 | Encoding worker + wrapper | 6 |
-| 5 | Audio mixer | 5 |
-| 6 | Iframe pool | 5 |
-| 7 | Video frame injector | 2 |
-| 8 | Main renderer orchestrator | 4 |
-| 9 | E2E integration test | 3 |
-| 10 | Wire video injector to SnapDOM | 3 |
-| 11 | Progress/ETA utility | 5 |
-| 12 | Final verification + polish | 5 |
-| 13 | Browser QA with agent-browser | 1 |
-| **Total** | | **56 steps** |
diff --git a/docs/superpowers/specs/2026-04-10-client-side-renderer-design.md b/docs/superpowers/specs/2026-04-10-client-side-renderer-design.md
deleted file mode 100644
index c0610b04..00000000
--- a/docs/superpowers/specs/2026-04-10-client-side-renderer-design.md
+++ /dev/null
@@ -1,872 +0,0 @@
-# Client-Side Video Renderer — Design Spec
-
-> **Date:** 2026-04-10
-> **Status:** Draft
-> **Package:** `@hyperframes/renderer`
-> **Goal:** Render HyperFrames compositions to MP4 entirely in the browser — no server, no Puppeteer, no FFmpeg.
-
----
-
-## 1. Motivation
-
-The current rendering pipeline (`@hyperframes/producer` + `@hyperframes/engine`) requires server-side infrastructure:
-
-- **Puppeteer** + **chrome-headless-shell** (~400MB) for frame capture via Chrome's `HeadlessExperimental.beginFrame` CDP API
-- **FFmpeg** (~100MB) for encoding, audio mixing, and muxing
-- A Node.js server to orchestrate the pipeline
-
-This means every render requires either a local dev machine with these binaries or a cloud server. The cost, complexity, and accessibility barriers limit where HyperFrames can be used.
-
-**Browser APIs have matured enough to replace this entire stack:**
-
-| Server-side dependency | Browser replacement |
-|---|---|
-| Puppeteer (frame capture) | SnapDOM / `drawElementImage` (html-in-canvas) |
-| FFmpeg (video encoding) | WebCodecs `VideoEncoder` (hardware-accelerated) |
-| FFmpeg (muxing) | MediaBunny (zero-dep TS, supports MP4/WebM/MOV) |
-| FFmpeg (audio mixing) | `OfflineAudioContext` (Web Audio API) |
-| Node.js server | Web Workers + `OffscreenCanvas` |
-
-### Success Criteria
-
-1. **Zero server dependencies** — Rendering works in a browser tab with no backend
-2. **95%+ pixel fidelity** at launch vs. the BeginFrame reference renderer, with a clear path to 100% via `drawElementImage`
-3. **Full feature parity** with the server-side producer: GSAP/CSS/Lottie/Three.js animations, embedded `<video>` elements, multi-track audio mixing, sub-compositions
-4. **Universal consumption** — Works in Studio, Player, and as a standalone JS API
-
----
-
-## 2. Architecture Overview
-
-### Approach: Interfaces First + Thin Slice + Parallel Widen
-
-1. **Define all interfaces** upfront — `FrameSource`, `EncoderPipeline`, `AudioMixer`, `Muxer`, `Renderer`
-2. **Build the thinnest end-to-end slice** — single iframe + SnapDOM → single WebCodecs encode → MediaBunny mux → MP4 blob. Validates SnapDOM fidelity on day 1.
-3. **Widen in parallel** — add Worker pool, parallel iframes, audio mixing, video element support, all behind the established interfaces
-
-### Pipeline Diagram
-
-```
-                        Main Thread                              Worker Pool
-┌──────────────────────────────────────────────┐    ┌─────────────────────────────────┐
-│                                              │    │                                 │
-│  ┌─────────┐  ┌─────────┐  ┌─────────┐      │    │  ┌──────────┐  ┌────────────┐  │
-│  │iframe[0]│  │iframe[1]│  │iframe[2]│ ...   │    │  │WebCodecs │  │ MediaBunny │  │
-│  │seek(0-N)│  │seek(N-M)│  │seek(M-T)│      │    │  │VideoEnc  │──│   Muxer    │  │
-│  └────┬────┘  └────┬────┘  └────┬────┘      │    │  └──────────┘  └─────┬──────┘  │
-│       │             │            │            │    │                      │         │
-│       ▼             ▼            ▼            │    │                      ▼         │
-│  ┌──────────────────────────────────────┐    │    │              ┌──────────────┐  │
-│  │         FrameSource (SnapDOM)        │    │    │              │  MP4 Blob    │  │
-│  │  seek → snapshot → ImageBitmap       │    │    │              └──────────────┘  │
-│  └──────────────────┬───────────────────┘    │    │                                 │
-│                     │ transferable           │    │                                 │
-│                     │ ImageBitmap            │    │                                 │
-│                     └────────────────────────┼───►│                                 │
-│                                              │    │                                 │
-│  ┌──────────────────────────────────────┐    │    │                                 │
-│  │         AudioMixer                   │    │    │                                 │
-│  │  OfflineAudioContext → PCM buffer    │────┼───►│  Muxed into MP4 audio track     │
-│  └──────────────────────────────────────┘    │    │                                 │
-└──────────────────────────────────────────────┘    └─────────────────────────────────┘
-```
-
-### Data Flow (per frame)
-
-1. **Seek**: `iframe.contentWindow.__hf.seek(time)` — positions composition at exact frame time
-2. **Capture**: `FrameSource.capture(iframe)` — SnapDOM snapshots the DOM to an `ImageBitmap`
-3. **Transfer**: `worker.postMessage({ frame, index }, [frame])` — zero-copy transfer to worker
-4. **Encode**: `VideoEncoder.encode(new VideoFrame(bitmap, { timestamp }))` — hardware-accelerated
-5. **Mux**: MediaBunny collects encoded chunks into MP4 container
-6. **Audio**: `OfflineAudioContext` renders mixed audio → raw PCM → muxed as audio track
-7. **Output**: Final MP4 `Blob` returned to caller
-
----
-
-## 3. Interfaces
-
-### 3.1 FrameSource
-
-The abstraction that makes the renderer future-proof. Swappable implementations: SnapDOM today, `drawElementImage` tomorrow.
-
-```typescript
-/**
- * A FrameSource captures visual frames from a composition at specific times.
- * Implementations must produce deterministic output for a given time.
- */
-interface FrameSource {
-  /** Human-readable name for diagnostics */
-  readonly name: string;
-
-  /**
-   * Initialize the frame source with the composition.
-   * May create iframes, set up canvases, load the composition, etc.
-   */
-  init(config: FrameSourceConfig): Promise<void>;
-
-  /**
-   * Capture a single frame at the given time.
-   * Returns a transferable ImageBitmap suitable for posting to a Worker.
-   */
-  capture(time: number): Promise<ImageBitmap>;
-
-  /**
-   * The total duration of the loaded composition in seconds.
-   * Available after init() resolves.
-   */
-  readonly duration: number;
-
-  /**
-   * Media elements declared by the composition (video/audio sources).
-   * Available after init() resolves.
-   */
-  readonly media: HfMediaElement[];
-
-  /** Release all resources (iframes, canvases, etc.) */
-  dispose(): Promise<void>;
-}
-
-interface FrameSourceConfig {
-  /** Path or URL to the composition HTML file */
-  compositionUrl: string;
-  /** Viewport width in pixels */
-  width: number;
-  /** Viewport height in pixels */
-  height: number;
-  /** Device pixel ratio (default: 1) */
-  devicePixelRatio?: number;
-}
-```
-
-### 3.2 EncoderPipeline
-
-```typescript
-/**
- * Encodes ImageBitmap frames into compressed video chunks.
- * Runs inside a Web Worker.
- */
-interface EncoderPipeline {
-  /** Configure the encoder. Must be called before encode(). */
-  init(config: EncoderConfig): Promise<void>;
-
-  /** Encode a single frame. Frames must be submitted in order. */
-  encode(frame: ImageBitmap, index: number, timestamp: number): Promise<void>;
-
-  /** Signal that all frames have been submitted. Flushes the encoder. */
-  flush(): Promise<void>;
-
-  /** The encoded video chunks, available after flush(). */
-  readonly chunks: EncodedVideoChunk[];
-
-  dispose(): void;
-}
-
-interface EncoderConfig {
-  width: number;
-  height: number;
-  fps: number;
-  codec: 'avc1.640028' | 'vp09.00.31.08';  // H.264 High / VP9
-  bitrate?: number;        // Default: auto-calculated from resolution
-  hardwareAcceleration?: 'prefer-hardware' | 'prefer-software';
-}
-```
-
-### 3.3 AudioMixer
-
-```typescript
-/**
- * Mixes audio sources into a single PCM buffer using OfflineAudioContext.
- */
-interface AudioMixer {
-  /**
-   * Mix all audio sources for the composition.
-   * Decodes audio files, applies volume/timing, renders to PCM.
-   */
-  mix(config: AudioMixConfig): Promise<AudioMixResult>;
-}
-
-interface AudioMixConfig {
-  /** Total composition duration in seconds */
-  duration: number;
-  /** Sample rate (default: 44100) */
-  sampleRate?: number;
-  /** Number of channels (default: 2, stereo) */
-  channels?: number;
-  /** Audio sources to mix */
-  sources: AudioSource[];
-}
-
-interface AudioSource {
-  /** URL or Blob of the audio/video file */
-  src: string | Blob;
-  /** When in the composition this audio starts (seconds) */
-  startTime: number;
-  /** When in the composition this audio ends (seconds) */
-  endTime: number;
-  /** Offset into the source file (seconds, default: 0) */
-  mediaOffset?: number;
-  /** Volume 0-1 (default: 1) */
-  volume?: number;
-}
-
-interface AudioMixResult {
-  /** Raw PCM audio buffer (Float32Array per channel) */
-  buffer: AudioBuffer;
-  /** Sample rate used */
-  sampleRate: number;
-  /** Number of channels */
-  channels: number;
-}
-```
-
-### 3.4 Muxer
-
-```typescript
-/**
- * Muxes encoded video chunks and audio into a container format.
- * Powered by MediaBunny.
- */
-interface Muxer {
-  init(config: MuxerConfig): Promise<void>;
-
-  /** Add an encoded video chunk */
-  addVideoChunk(chunk: EncodedVideoChunk): void;
-
-  /** Set the audio track (raw PCM from AudioMixer) */
-  setAudio(audio: AudioMixResult): void;
-
-  /** Finalize and produce the output file */
-  finalize(): Promise<Blob>;
-}
-
-interface MuxerConfig {
-  format: 'mp4' | 'webm';
-  width: number;
-  height: number;
-  fps: number;
-  videoCodec: string;
-}
-```
-
-### 3.5 Renderer (Public API)
-
-```typescript
-/**
- * The main public API. Orchestrates the full pipeline.
- */
-interface Renderer {
-  /**
-   * Render a composition to video.
-   * Returns a Blob containing the final MP4/WebM.
-   */
-  render(config: RenderConfig): Promise<RenderResult>;
-
-  /** Cancel an in-progress render */
-  cancel(): void;
-
-  /** Check if WebCodecs and required APIs are available */
-  static isSupported(): boolean;
-}
-
-interface RenderConfig {
-  /** Path or URL to the composition HTML */
-  composition: string;
-  /** Output format (default: 'mp4') */
-  format?: 'mp4' | 'webm';
-  /** Frames per second (default: 30) */
-  fps?: 24 | 30 | 60;
-  /** Output width (default: 1920) */
-  width?: number;
-  /** Output height (default: 1080) */
-  height?: number;
-  /** Device pixel ratio (default: 1) */
-  devicePixelRatio?: number;
-  /** Video codec (default: H.264) */
-  codec?: 'h264' | 'vp9';
-  /** Video bitrate in bps (default: auto) */
-  bitrate?: number;
-  /** Number of parallel capture iframes (default: auto based on navigator.hardwareConcurrency) */
-  concurrency?: number;
-  /** Progress callback */
-  onProgress?: (progress: RenderProgress) => void;
-  /** Which frame source to use (default: auto-detect best available) */
-  frameSource?: 'snapdom' | 'draw-element-image';
-}
-
-interface RenderProgress {
-  stage: 'initializing' | 'capturing' | 'encoding' | 'mixing-audio' | 'muxing' | 'complete';
-  /** 0-1 overall progress */
-  progress: number;
-  /** Current frame being processed */
-  currentFrame?: number;
-  /** Total frames */
-  totalFrames?: number;
-  /** Estimated time remaining in ms */
-  estimatedTimeRemaining?: number;
-  /** Frames per second capture rate */
-  captureRate?: number;
-}
-
-interface RenderResult {
-  /** The final video file */
-  blob: Blob;
-  /** MIME type */
-  mimeType: string;
-  /** Render duration in ms */
-  durationMs: number;
-  /** Performance breakdown */
-  perf: {
-    captureMs: number;
-    encodeMs: number;
-    audioMs: number;
-    muxMs: number;
-    totalMs: number;
-    framesPerSecond: number;
-  };
-}
-```
-
----
-
-## 4. Frame Source Implementations
-
-### 4.1 SnapDOM Frame Source (Interim)
-
-Uses SnapDOM (`@snapdom/snapdom`) to capture DOM snapshots as images, then converts to `ImageBitmap`.
-
-**How it works:**
-1. Load composition in a hidden `<iframe>` (same-origin)
-2. Seek to target time via `iframe.contentWindow.__hf.seek(time)`
-3. Call SnapDOM to snapshot the iframe's document element → produces a `<canvas>` or `Blob`
-4. Convert to `ImageBitmap` via `createImageBitmap()`
-5. Return the transferable `ImageBitmap`
-
-**Known limitations (vs. BeginFrame reference):**
-- Uses SVG `foreignObject` internally — cross-origin images won't render without CORS
-- `<video>` element frames may not be captured (requires separate handling — see Section 6)
-- Complex CSS features (some blend modes, `backdrop-filter` in edge cases) may differ slightly
-- Performance: designed for one-shot screenshots, not sustained 30fps. Parallel iframes mitigate this.
-
-**Fidelity target:** 95%+ for compositions using standard CSS + GSAP animations.
-
-### 4.2 drawElementImage Frame Source (Future)
-
-Uses the WICG html-in-canvas API when available.
-
-**How it works:**
-1. Load composition as a child of `<canvas layoutsubtree>`
-2. Seek to target time via the composition's `__hf.seek(time)`
-3. In the `paint` event handler, call `ctx.drawElementImage(compositionEl, 0, 0)`
-4. Use `captureElementImage()` to create a transferable `ElementImage`
-5. Transfer to worker → draw on `OffscreenCanvas` → `ImageBitmap`
-
-**Advantages:**
-- Uses the browser's actual rendering engine — pixel-perfect fidelity
-- Supports all CSS features the browser supports
-- Native performance — no JavaScript re-rendering
-
-**Availability:** Chrome behind flag (`chrome://flags/#canvas-draw-element`). WHATWG Stage 2. Estimated stable: 2027+.
-
-**CSS transform caveat:** `drawElementImage` ignores CSS transforms on the source element. GSAP primarily animates via transforms. Workarounds:
-- Wrap animated elements in a container; GSAP animates the inner element, `drawElementImage` captures the container (which has the computed layout including the inner element's transforms applied by the browser's rendering)
-- OR apply GSAP animations to non-transform properties where possible
-- This needs validation once the API supports video elements
-
-### 4.3 Auto-Detection
-
-```typescript
-function detectBestFrameSource(): 'draw-element-image' | 'snapdom' {
-  // Check for html-in-canvas support
-  const canvas = document.createElement('canvas');
-  if ('drawElementImage' in CanvasRenderingContext2D.prototype) {
-    return 'draw-element-image';
-  }
-  return 'snapdom';
-}
-```
-
----
-
-## 5. Parallel Iframe Capture
-
-### Strategy
-
-Mirror the server-side `parallelCoordinator.ts` pattern but with browser iframes instead of Puppeteer instances.
-
-```typescript
-interface IframePool {
-  /** Create N iframes, each loading the composition */
-  init(compositionUrl: string, count: number, viewport: Viewport): Promise<void>;
-
-  /**
-   * Capture frames in parallel across iframes.
-   * Each iframe is assigned a contiguous range of frame times.
-   * Returns ImageBitmaps in frame order.
-   */
-  captureAll(
-    frameTimes: number[],
-    frameSource: FrameSource,
-    onFrame: (bitmap: ImageBitmap, index: number) => void,
-  ): Promise<void>;
-
-  dispose(): void;
-}
-```
-
-### Frame Distribution
-
-```
-Total: 300 frames, 4 iframes
-
-iframe[0]: frames   0- 74  (seek 0.000s - 2.467s)
-iframe[1]: frames  75-149  (seek 2.500s - 4.967s)
-iframe[2]: frames 150-224  (seek 5.000s - 7.467s)
-iframe[3]: frames 225-299  (seek 7.500s - 9.967s)
-```
-
-Each iframe captures its range sequentially. The four iframes run in parallel (using `Promise.all`). Captured `ImageBitmap` frames are posted to the encoding worker pool as they complete.
-
-### Concurrency Default
-
-```typescript
-const defaultConcurrency = Math.max(1, Math.min(
-  navigator.hardwareConcurrency - 1,  // Leave 1 core for encoding workers
-  8  // Cap at 8 iframes to avoid memory pressure
-));
-```
-
----
-
-## 6. Video Element Handling
-
-Embedded `<video>` elements in compositions need special handling because:
-1. SnapDOM cannot capture `<video>` frame content (foreignObject limitation)
-2. Videos must be seeked to the correct time for each frame
-
-### Strategy: Canvas Replacement
-
-For each `<video>` element declared in `window.__hf.media`:
-
-1. **Decode video frames client-side** using MediaBunny's demuxer + WebCodecs `VideoDecoder`
-2. **Create a `<canvas>` overlay** positioned exactly over the `<video>` element
-3. **Before each frame capture**, seek the video decoder to the target time, draw the decoded frame onto the overlay canvas
-4. **SnapDOM captures the canvas** (which it CAN render) instead of the `<video>` element
-
-This mirrors the server-side `videoFrameInjector.ts` pattern — replace `<video>` with pre-extracted frames drawn onto a canvas.
-
-```typescript
-interface VideoFrameInjector {
-  /** Pre-decode video sources and prepare frame lookup */
-  init(media: HfMediaElement[]): Promise<void>;
-
-  /** Draw the correct video frame for a given composition time onto overlay canvases */
-  injectFrame(time: number): Promise<void>;
-
-  dispose(): void;
-}
-```
-
-### Video Decoding Pipeline
-
-```
-Source video (URL/Blob)
-  → MediaBunny demux (extract video track packets)
-  → WebCodecs VideoDecoder (decode to VideoFrame)
-  → drawImage onto overlay <canvas>
-  → SnapDOM captures canvas as part of DOM snapshot
-```
-
-For performance, video frames are decoded on-demand per composition time, not pre-extracted. MediaBunny supports seeking to arbitrary positions efficiently.
-
----
-
-## 7. Audio Handling
-
-### Pipeline
-
-```
-Composition's window.__hf.media[]
-  → Filter elements with hasAudio === true
-  → Fetch each audio source (URL → ArrayBuffer)
-  → AudioContext.decodeAudioData() → AudioBuffer per source
-  → OfflineAudioContext:
-      - Create BufferSourceNode per source
-      - Apply volume via GainNode
-      - Apply timing (startTime, mediaOffset, endTime)
-      - Connect all to destination
-      - OfflineAudioContext.startRendering()
-  → AudioBuffer (mixed PCM)
-  → Float32Array per channel → MediaBunny mux as audio track
-```
-
-### Composition-level Audio
-
-Some compositions have a single `<audio>` element or background music. These are also declared in `window.__hf.media` and handled identically.
-
-### Sample Rate
-
-Default: 44100 Hz (CD quality). Matches the server-side producer. MediaBunny supports arbitrary sample rates.
-
----
-
-## 8. Encoding Worker
-
-### Worker Architecture
-
-A single encoding worker handles the video encoding + muxing pipeline. The main thread streams `ImageBitmap` frames to it.
-
-```
-Main Thread                          Encoding Worker
-───────────                          ───────────────
-postMessage({                        onmessage:
-  type: 'init',                        → create VideoEncoder
-  config: EncoderConfig                → create MediaBunny muxer
-})
-
-postMessage({                        onmessage:
-  type: 'frame',                       → new VideoFrame(bitmap, {timestamp})
-  bitmap: ImageBitmap,                 → encoder.encode(frame)
-  index, timestamp                     → frame.close()  // prevent GPU leak
-}, [bitmap])                           → encoder output → muxer.addVideoChunk()
-
-postMessage({                        onmessage:
-  type: 'set-audio',                   → muxer.setAudio(pcmData)
-  pcmData: Float32Array[]
-}, [...pcmData])
-
-postMessage({                        onmessage:
-  type: 'finalize'                     → encoder.flush()
-})                                     → muxer.finalize()
-                                       → postMessage({ type: 'done', blob })
-```
-
-### Why a Single Encoding Worker (Not a Pool)
-
-WebCodecs `VideoEncoder` produces chunks that must be muxed in order. Multiple encoding workers would require coordinating chunk ordering across workers and merging partial MP4 segments. A single encoder with hardware acceleration is fast enough — the bottleneck is frame capture, not encoding. The parallelism happens at the capture layer (multiple iframes), not the encoding layer.
-
-### Memory Management
-
-Critical: `VideoFrame.close()` must be called after encoding to release GPU memory. Without this, GPU memory exhausts within seconds. The worker is responsible for calling `.close()` on every frame after `encoder.encode()`.
-
-```typescript
-// Inside worker
-encoder.encode(videoFrame);
-videoFrame.close();  // CRITICAL — prevents GPU memory leak
-```
-
----
-
-## 9. Package Structure
-
-```
-packages/renderer/
-  package.json                      # @hyperframes/renderer, browser-only
-  tsconfig.json
-  src/
-    index.ts                        # Public API exports
-    types.ts                        # All shared interfaces and types
-    renderer.ts                     # Main Renderer class — orchestrates pipeline
-    compat.ts                       # Feature detection (WebCodecs, OffscreenCanvas)
-    sources/
-      types.ts                      # FrameSource interface
-      snapdom.ts                    # SnapDOM frame source implementation
-      draw-element-image.ts         # html-in-canvas frame source (future)
-      auto-detect.ts                # Auto-selects best available source
-    capture/
-      iframe-pool.ts                # Manages parallel hidden iframes
-      frame-scheduler.ts            # Distributes frame ranges across iframes
-      video-frame-injector.ts       # Overlay canvases for <video> elements
-    encoding/
-      encoder.ts                    # WebCodecs VideoEncoder wrapper (runs in worker)
-      worker.ts                     # Web Worker entry point
-      types.ts                      # Worker message protocol types
-    audio/
-      mixer.ts                      # OfflineAudioContext-based mixer
-      decoder.ts                    # Audio file decoding helpers
-    muxing/
-      muxer.ts                      # MediaBunny muxer wrapper
-    utils/
-      timing.ts                     # Frame time quantization (reuses @hyperframes/core)
-      progress.ts                   # Progress calculation and ETA
-  tests/
-    renderer.test.ts                # End-to-end render tests
-    sources/snapdom.test.ts         # SnapDOM capture fidelity tests
-    encoding/encoder.test.ts        # WebCodecs encoder tests
-    audio/mixer.test.ts             # Audio mixing tests
-    capture/iframe-pool.test.ts     # Iframe pool tests
-```
-
-### Dependencies
-
-```json
-{
-  "dependencies": {
-    "@snapdom/snapdom": "^2.1.0",
-    "mediabunny": "^1.40.0"
-  },
-  "peerDependencies": {
-    "@hyperframes/core": "workspace:*"
-  }
-}
-```
-
-**Zero Node.js dependencies.** This package is browser-only. It uses `@hyperframes/core` for shared types (`HfMediaElement`, `quantizeTimeToFrame`) but nothing from `engine` or `producer`.
-
----
-
-## 10. Public API
-
-### Basic Usage
-
-```typescript
-import { render, isSupported } from '@hyperframes/renderer';
-
-if (!isSupported()) {
-  alert('Your browser does not support WebCodecs. Use Chrome 94+, Firefox 130+, or Safari 26+.');
-}
-
-const result = await render({
-  composition: './my-composition/index.html',
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  onProgress: (p) => {
-    console.log(`${p.stage}: ${Math.round(p.progress * 100)}%`);
-  },
-});
-
-// Download the video
-const url = URL.createObjectURL(result.blob);
-const a = document.createElement('a');
-a.href = url;
-a.download = 'output.mp4';
-a.click();
-```
-
-### Advanced Usage
-
-```typescript
-import { createRenderer } from '@hyperframes/renderer';
-
-const renderer = createRenderer({
-  composition: './my-composition/index.html',
-  format: 'mp4',
-  fps: 60,
-  width: 3840,
-  height: 2160,
-  codec: 'h264',
-  bitrate: 20_000_000,
-  concurrency: 4,
-  frameSource: 'snapdom', // or 'draw-element-image'
-  onProgress: updateUI,
-});
-
-// Start rendering
-const result = await renderer.render();
-
-// Or cancel mid-render
-cancelButton.onclick = () => renderer.cancel();
-```
-
----
-
-## 11. Studio Integration
-
-The Studio gets a "Render in Browser" button alongside the existing server-side render.
-
-```typescript
-// packages/studio/src/components/RenderDialog.tsx
-import { render, isSupported } from '@hyperframes/renderer';
-
-// Feature detection determines which render options are shown
-const canRenderClientSide = isSupported();
-
-// When user clicks "Render in Browser":
-const result = await render({
-  composition: compositionUrl,  // Same URL the studio preview iframe uses
-  fps: selectedFps,
-  width: selectedWidth,
-  height: selectedHeight,
-  onProgress: (p) => setRenderProgress(p),
-});
-
-// Offer download
-downloadBlob(result.blob, `${compositionName}.mp4`);
-```
-
----
-
-## 12. Player Integration
-
-The `<hyperframes-player>` web component gets an `export()` method.
-
-```typescript
-// packages/player/src/hyperframes-player.ts
-import { render, isSupported } from '@hyperframes/renderer';
-
-class HyperframesPlayer extends HTMLElement {
-  async export(options?: Partial<RenderConfig>): Promise<Blob> {
-    if (!isSupported()) {
-      throw new Error('Client-side rendering requires WebCodecs support');
-    }
-    const result = await render({
-      composition: this.getAttribute('src')!,
-      ...options,
-    });
-    return result.blob;
-  }
-}
-```
-
-Usage:
-```javascript
-const player = document.querySelector('hyperframes-player');
-const blob = await player.export({ fps: 30 });
-```
-
----
-
-## 13. Browser Requirements
-
-| API | Chrome | Firefox | Safari | Required |
-|---|---|---|---|---|
-| WebCodecs (VideoEncoder) | 94+ | 130+ | 26+ | Yes |
-| OffscreenCanvas | 69+ | 105+ | 17+ | Yes |
-| Web Workers | All | All | All | Yes |
-| OfflineAudioContext | All | All | All | Yes |
-| createImageBitmap | 50+ | 42+ | 15+ | Yes |
-| Transferable ImageBitmap | 56+ | 105+ | 17+ | Yes |
-
-**Minimum browser versions:** Chrome 94, Firefox 130, Safari 26.
-
-Feature detection:
-
-```typescript
-function isSupported(): boolean {
-  return (
-    typeof VideoEncoder !== 'undefined' &&
-    typeof OffscreenCanvas !== 'undefined' &&
-    typeof AudioContext !== 'undefined' &&
-    typeof createImageBitmap !== 'undefined'
-  );
-}
-```
-
----
-
-## 14. Performance Expectations
-
-### Capture Rate Targets
-
-| Resolution | Iframes | Target capture FPS | Notes |
-|---|---|---|---|
-| 1920x1080 | 4 | 8-15 fps aggregate | SnapDOM bottleneck |
-| 1920x1080 | 8 | 12-20 fps aggregate | Diminishing returns beyond 8 |
-| 1280x720 | 4 | 15-25 fps aggregate | Lower resolution helps |
-
-### Encoding Rate
-
-WebCodecs hardware-accelerated encoding is fast:
-- H.264 1080p: 200-500 fps (not the bottleneck)
-- VP9 1080p: 50-150 fps (slower but still faster than capture)
-
-### End-to-End Estimate
-
-For a 10-second 1080p30 composition (300 frames) with 4 iframes:
-- Capture: ~20-40 seconds (bottleneck)
-- Encoding: ~1-2 seconds
-- Audio mixing: ~0.5 seconds
-- Muxing: ~0.5 seconds
-- **Total: ~25-45 seconds**
-
-With `drawElementImage` (future): capture should be near-realtime, reducing total to ~12-15 seconds.
-
----
-
-## 15. Testing Strategy
-
-### Fidelity Testing
-
-Render the same composition with both the server-side producer (BeginFrame) and the client-side renderer. Compare output frames pixel-by-pixel using SSIM (Structural Similarity Index).
-
-```
-Reference: npx hyperframes render composition.html --output ref.mp4
-Test:      Client-side render → test.mp4
-Compare:   Extract frames, compute SSIM per frame
-Pass:      Average SSIM > 0.95 (95% fidelity)
-```
-
-### Unit Tests
-
-- `FrameSource` implementations: capture a known composition, verify output dimensions and non-empty content
-- `EncoderPipeline`: encode synthetic color frames, verify output is valid video
-- `AudioMixer`: mix known waveforms, verify output amplitudes and timing
-- `Muxer`: produce MP4 from synthetic data, verify it plays in a `<video>` element
-- `IframePool`: verify frame distribution and ordering
-
-### Integration Tests
-
-- Full end-to-end: render a test composition, verify the output MP4 plays and has correct duration
-- Progress callback: verify all stages fire and progress reaches 1.0
-- Cancellation: start a render, cancel mid-way, verify resources are cleaned up
-- Error handling: invalid composition URL, unsupported browser, corrupt media files
-
-### QA
-
-Agent-browser automated visual testing after implementation (per user request).
-
----
-
-## 16. Migration Path
-
-### Phase 1: New Package, Optional
-
-- `@hyperframes/renderer` ships as a new package
-- Studio offers "Render in Browser" alongside existing server-side render
-- Player gets `export()` method
-- Server-side producer remains the default and recommended path
-- Documentation clearly states fidelity caveats
-
-### Phase 2: `drawElementImage` Integration
-
-- When html-in-canvas ships in Chrome stable, add the `draw-element-image` frame source
-- Run fidelity tests — if >99% SSIM vs. BeginFrame, promote client-side as default
-- Server-side remains as fallback for unsupported browsers
-
-### Phase 3: Deprecate Server-Side
-
-- When html-in-canvas ships cross-browser (Chrome + Firefox + Safari)
-- Client-side renderer reaches 100% fidelity parity
-- Deprecate `@hyperframes/producer` and `@hyperframes/engine`
-- Server-side becomes a "legacy" option for CI/headless environments
-
----
-
-## 17. Open Questions
-
-1. **SnapDOM + GSAP transforms**: Does SnapDOM faithfully capture GSAP-animated transforms? Needs empirical testing with real compositions in the thin slice phase.
-
-2. **SnapDOM sustained throughput**: What's the realistic per-frame capture latency for complex compositions (50+ DOM elements, multiple GSAP timelines)? This determines whether 4 or 8 iframes are needed.
-
-3. **Video frame seeking accuracy**: Can MediaBunny's demuxer + WebCodecs VideoDecoder seek to arbitrary timestamps with frame accuracy, or only to keyframes? If keyframe-only, we may need to decode forward from the nearest keyframe.
-
-4. **Memory pressure**: With 4-8 iframes + a worker, what's the memory footprint? Need to test with compositions that embed large assets (4K video, high-res images).
-
-5. **Safari 26 WebCodecs quirks**: Safari just shipped full WebCodecs. Are there codec configuration differences or bugs we need to work around?
-
-6. **Sub-composition rendering**: Compositions can embed other compositions. Do nested iframes work with SnapDOM capture, or do we need to flatten sub-compositions first?
-
----
-
-## 18. Glossary
-
-| Term | Definition |
-|---|---|
-| **BeginFrame** | Chrome's `HeadlessExperimental.beginFrame` CDP API — runs a single deterministic layout-paint-composite cycle |
-| **SnapDOM** | DOM snapshot library using SVG foreignObject — best-in-class for CSS fidelity |
-| **drawElementImage** | WICG html-in-canvas API — native DOM-to-canvas rendering (Stage 2, Chrome flag) |
-| **MediaBunny** | Zero-dep TypeScript media toolkit — successor to mp4-muxer/webm-muxer |
-| **WebCodecs** | Browser API for hardware-accelerated video/audio encoding/decoding |
-| **OffscreenCanvas** | Canvas API usable in Web Workers — decouples rendering from main thread |
-| **HfProtocol** | `window.__hf` — the seek protocol compositions expose for deterministic rendering |
-| **FrameSource** | Pluggable interface for capturing frames — the abstraction that enables swapping SnapDOM for drawElementImage |
diff --git a/packages/renderer/pnpm-lock.yaml b/packages/renderer/pnpm-lock.yaml
deleted file mode 100644
index d210a8f7..00000000
--- a/packages/renderer/pnpm-lock.yaml
+++ /dev/null
@@ -1,1392 +0,0 @@
-lockfileVersion: '9.0'
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
-importers:
-
-  .:
-    dependencies:
-      '@hyperframes/core':
-        specifier: workspace:^
-        version: link:../core
-      '@zumer/snapdom':
-        specifier: ^2.8.0
-        version: 2.8.0
-      mediabunny:
-        specifier: ^1.40.0
-        version: 1.40.1
-    devDependencies:
-      '@types/jsdom':
-        specifier: ^28.0.1
-        version: 28.0.1
-      jsdom:
-        specifier: ^29.0.2
-        version: 29.0.2
-      typescript:
-        specifier: ^5.0.0
-        version: 5.9.3
-      vitest:
-        specifier: ^3.2.4
-        version: 3.2.4(@types/node@25.5.2)(jsdom@29.0.2)
-
-packages:
-
-  '@asamuzakjp/css-color@5.1.9':
-    resolution: {integrity: sha512-zd9c/Wdso6v1U7v6w3i/hbAr4K7NaSHImdpvmLt+Y9ea5BhilnIGNkfhOJ7FEIuPipAnE9tZeDOll05WDT0kgg==}
-    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
-
-  '@asamuzakjp/dom-selector@7.0.9':
-    resolution: {integrity: sha512-r3ElRr7y8ucyN2KdICwGsmj19RoN13CLCa/pvGydghWK6ZzeKQ+TcDjVdtEZz2ElpndM5jXw//B9CEee0mWnVg==}
-    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
-
-  '@asamuzakjp/nwsapi@2.3.9':
-    resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==}
-
-  '@bramus/specificity@2.4.2':
-    resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
-    hasBin: true
-
-  '@csstools/color-helpers@6.0.2':
-    resolution: {integrity: sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==}
-    engines: {node: '>=20.19.0'}
-
-  '@csstools/css-calc@3.1.1':
-    resolution: {integrity: sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==}
-    engines: {node: '>=20.19.0'}
-    peerDependencies:
-      '@csstools/css-parser-algorithms': ^4.0.0
-      '@csstools/css-tokenizer': ^4.0.0
-
-  '@csstools/css-color-parser@4.0.2':
-    resolution: {integrity: sha512-0GEfbBLmTFf0dJlpsNU7zwxRIH0/BGEMuXLTCvFYxuL1tNhqzTbtnFICyJLTNK4a+RechKP75e7w42ClXSnJQw==}
-    engines: {node: '>=20.19.0'}
-    peerDependencies:
-      '@csstools/css-parser-algorithms': ^4.0.0
-      '@csstools/css-tokenizer': ^4.0.0
-
-  '@csstools/css-parser-algorithms@4.0.0':
-    resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==}
-    engines: {node: '>=20.19.0'}
-    peerDependencies:
-      '@csstools/css-tokenizer': ^4.0.0
-
-  '@csstools/css-syntax-patches-for-csstree@1.1.2':
-    resolution: {integrity: sha512-5GkLzz4prTIpoyeUiIu3iV6CSG3Plo7xRVOFPKI7FVEJ3mZ0A8SwK0XU3Gl7xAkiQ+mDyam+NNp875/C5y+jSA==}
-    peerDependencies:
-      css-tree: ^3.2.1
-    peerDependenciesMeta:
-      css-tree:
-        optional: true
-
-  '@csstools/css-tokenizer@4.0.0':
-    resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
-    engines: {node: '>=20.19.0'}
-
-  '@esbuild/aix-ppc64@0.27.7':
-    resolution: {integrity: sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==}
-    engines: {node: '>=18'}
-    cpu: [ppc64]
-    os: [aix]
-
-  '@esbuild/android-arm64@0.27.7':
-    resolution: {integrity: sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [android]
-
-  '@esbuild/android-arm@0.27.7':
-    resolution: {integrity: sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==}
-    engines: {node: '>=18'}
-    cpu: [arm]
-    os: [android]
-
-  '@esbuild/android-x64@0.27.7':
-    resolution: {integrity: sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [android]
-
-  '@esbuild/darwin-arm64@0.27.7':
-    resolution: {integrity: sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@esbuild/darwin-x64@0.27.7':
-    resolution: {integrity: sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@esbuild/freebsd-arm64@0.27.7':
-    resolution: {integrity: sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [freebsd]
-
-  '@esbuild/freebsd-x64@0.27.7':
-    resolution: {integrity: sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@esbuild/linux-arm64@0.27.7':
-    resolution: {integrity: sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@esbuild/linux-arm@0.27.7':
-    resolution: {integrity: sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==}
-    engines: {node: '>=18'}
-    cpu: [arm]
-    os: [linux]
-
-  '@esbuild/linux-ia32@0.27.7':
-    resolution: {integrity: sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==}
-    engines: {node: '>=18'}
-    cpu: [ia32]
-    os: [linux]
-
-  '@esbuild/linux-loong64@0.27.7':
-    resolution: {integrity: sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==}
-    engines: {node: '>=18'}
-    cpu: [loong64]
-    os: [linux]
-
-  '@esbuild/linux-mips64el@0.27.7':
-    resolution: {integrity: sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==}
-    engines: {node: '>=18'}
-    cpu: [mips64el]
-    os: [linux]
-
-  '@esbuild/linux-ppc64@0.27.7':
-    resolution: {integrity: sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==}
-    engines: {node: '>=18'}
-    cpu: [ppc64]
-    os: [linux]
-
-  '@esbuild/linux-riscv64@0.27.7':
-    resolution: {integrity: sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==}
-    engines: {node: '>=18'}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@esbuild/linux-s390x@0.27.7':
-    resolution: {integrity: sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==}
-    engines: {node: '>=18'}
-    cpu: [s390x]
-    os: [linux]
-
-  '@esbuild/linux-x64@0.27.7':
-    resolution: {integrity: sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [linux]
-
-  '@esbuild/netbsd-arm64@0.27.7':
-    resolution: {integrity: sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [netbsd]
-
-  '@esbuild/netbsd-x64@0.27.7':
-    resolution: {integrity: sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [netbsd]
-
-  '@esbuild/openbsd-arm64@0.27.7':
-    resolution: {integrity: sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [openbsd]
-
-  '@esbuild/openbsd-x64@0.27.7':
-    resolution: {integrity: sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [openbsd]
-
-  '@esbuild/openharmony-arm64@0.27.7':
-    resolution: {integrity: sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [openharmony]
-
-  '@esbuild/sunos-x64@0.27.7':
-    resolution: {integrity: sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [sunos]
-
-  '@esbuild/win32-arm64@0.27.7':
-    resolution: {integrity: sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@esbuild/win32-ia32@0.27.7':
-    resolution: {integrity: sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==}
-    engines: {node: '>=18'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@esbuild/win32-x64@0.27.7':
-    resolution: {integrity: sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [win32]
-
-  '@exodus/bytes@1.15.0':
-    resolution: {integrity: sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ==}
-    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
-    peerDependencies:
-      '@noble/hashes': ^1.8.0 || ^2.0.0
-    peerDependenciesMeta:
-      '@noble/hashes':
-        optional: true
-
-  '@jridgewell/sourcemap-codec@1.5.5':
-    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
-
-  '@rollup/rollup-android-arm-eabi@4.60.1':
-    resolution: {integrity: sha512-d6FinEBLdIiK+1uACUttJKfgZREXrF0Qc2SmLII7W2AD8FfiZ9Wjd+rD/iRuf5s5dWrr1GgwXCvPqOuDquOowA==}
-    cpu: [arm]
-    os: [android]
-
-  '@rollup/rollup-android-arm64@4.60.1':
-    resolution: {integrity: sha512-YjG/EwIDvvYI1YvYbHvDz/BYHtkY4ygUIXHnTdLhG+hKIQFBiosfWiACWortsKPKU/+dUwQQCKQM3qrDe8c9BA==}
-    cpu: [arm64]
-    os: [android]
-
-  '@rollup/rollup-darwin-arm64@4.60.1':
-    resolution: {integrity: sha512-mjCpF7GmkRtSJwon+Rq1N8+pI+8l7w5g9Z3vWj4T7abguC4Czwi3Yu/pFaLvA3TTeMVjnu3ctigusqWUfjZzvw==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@rollup/rollup-darwin-x64@4.60.1':
-    resolution: {integrity: sha512-haZ7hJ1JT4e9hqkoT9R/19XW2QKqjfJVv+i5AGg57S+nLk9lQnJ1F/eZloRO3o9Scy9CM3wQ9l+dkXtcBgN5Ew==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@rollup/rollup-freebsd-arm64@4.60.1':
-    resolution: {integrity: sha512-czw90wpQq3ZsAVBlinZjAYTKduOjTywlG7fEeWKUA7oCmpA8xdTkxZZlwNJKWqILlq0wehoZcJYfBvOyhPTQ6w==}
-    cpu: [arm64]
-    os: [freebsd]
-
-  '@rollup/rollup-freebsd-x64@4.60.1':
-    resolution: {integrity: sha512-KVB2rqsxTHuBtfOeySEyzEOB7ltlB/ux38iu2rBQzkjbwRVlkhAGIEDiiYnO2kFOkJp+Z7pUXKyrRRFuFUKt+g==}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@rollup/rollup-linux-arm-gnueabihf@4.60.1':
-    resolution: {integrity: sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g==}
-    cpu: [arm]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm-musleabihf@4.60.1':
-    resolution: {integrity: sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg==}
-    cpu: [arm]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm64-gnu@4.60.1':
-    resolution: {integrity: sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm64-musl@4.60.1':
-    resolution: {integrity: sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@rollup/rollup-linux-loong64-gnu@4.60.1':
-    resolution: {integrity: sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ==}
-    cpu: [loong64]
-    os: [linux]
-
-  '@rollup/rollup-linux-loong64-musl@4.60.1':
-    resolution: {integrity: sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw==}
-    cpu: [loong64]
-    os: [linux]
-
-  '@rollup/rollup-linux-ppc64-gnu@4.60.1':
-    resolution: {integrity: sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw==}
-    cpu: [ppc64]
-    os: [linux]
-
-  '@rollup/rollup-linux-ppc64-musl@4.60.1':
-    resolution: {integrity: sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg==}
-    cpu: [ppc64]
-    os: [linux]
-
-  '@rollup/rollup-linux-riscv64-gnu@4.60.1':
-    resolution: {integrity: sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg==}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@rollup/rollup-linux-riscv64-musl@4.60.1':
-    resolution: {integrity: sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg==}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@rollup/rollup-linux-s390x-gnu@4.60.1':
-    resolution: {integrity: sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ==}
-    cpu: [s390x]
-    os: [linux]
-
-  '@rollup/rollup-linux-x64-gnu@4.60.1':
-    resolution: {integrity: sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg==}
-    cpu: [x64]
-    os: [linux]
-
-  '@rollup/rollup-linux-x64-musl@4.60.1':
-    resolution: {integrity: sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w==}
-    cpu: [x64]
-    os: [linux]
-
-  '@rollup/rollup-openbsd-x64@4.60.1':
-    resolution: {integrity: sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw==}
-    cpu: [x64]
-    os: [openbsd]
-
-  '@rollup/rollup-openharmony-arm64@4.60.1':
-    resolution: {integrity: sha512-4Cv23ZrONRbNtbZa37mLSueXUCtN7MXccChtKpUnQNgF010rjrjfHx3QxkS2PI7LqGT5xXyYs1a7LbzAwT0iCA==}
-    cpu: [arm64]
-    os: [openharmony]
-
-  '@rollup/rollup-win32-arm64-msvc@4.60.1':
-    resolution: {integrity: sha512-i1okWYkA4FJICtr7KpYzFpRTHgy5jdDbZiWfvny21iIKky5YExiDXP+zbXzm3dUcFpkEeYNHgQ5fuG236JPq0g==}
-    cpu: [arm64]
-    os: [win32]
-
-  '@rollup/rollup-win32-ia32-msvc@4.60.1':
-    resolution: {integrity: sha512-u09m3CuwLzShA0EYKMNiFgcjjzwqtUMLmuCJLeZWjjOYA3IT2Di09KaxGBTP9xVztWyIWjVdsB2E9goMjZvTQg==}
-    cpu: [ia32]
-    os: [win32]
-
-  '@rollup/rollup-win32-x64-gnu@4.60.1':
-    resolution: {integrity: sha512-k+600V9Zl1CM7eZxJgMyTUzmrmhB/0XZnF4pRypKAlAgxmedUA+1v9R+XOFv56W4SlHEzfeMtzujLJD22Uz5zg==}
-    cpu: [x64]
-    os: [win32]
-
-  '@rollup/rollup-win32-x64-msvc@4.60.1':
-    resolution: {integrity: sha512-lWMnixq/QzxyhTV6NjQJ4SFo1J6PvOX8vUx5Wb4bBPsEb+8xZ89Bz6kOXpfXj9ak9AHTQVQzlgzBEc1SyM27xQ==}
-    cpu: [x64]
-    os: [win32]
-
-  '@types/chai@5.2.3':
-    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
-
-  '@types/deep-eql@4.0.2':
-    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
-
-  '@types/dom-mediacapture-transform@0.1.11':
-    resolution: {integrity: sha512-Y2p+nGf1bF2XMttBnsVPHUWzRRZzqUoJAKmiP10b5umnO6DDrWI0BrGDJy1pOHoOULVmGSfFNkQrAlC5dcj6nQ==}
-
-  '@types/dom-webcodecs@0.1.13':
-    resolution: {integrity: sha512-O5hkiFIcjjszPIYyUSyvScyvrBoV3NOEEZx/pMlsu44TKzWNkLVBBxnxJz42in5n3QIolYOcBYFCPZZ0h8SkwQ==}
-
-  '@types/estree@1.0.8':
-    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
-
-  '@types/jsdom@28.0.1':
-    resolution: {integrity: sha512-GJq2QE4TAZ5ajSoCasn5DOFm8u1mI3tIFvM5tIq3W5U/RTB6gsHwc6Yhpl91X9VSDOUVblgXmG+2+sSvFQrdlw==}
-
-  '@types/node@25.5.2':
-    resolution: {integrity: sha512-tO4ZIRKNC+MDWV4qKVZe3Ql/woTnmHDr5JD8UI5hn2pwBrHEwOEMZK7WlNb5RKB6EoJ02gwmQS9OrjuFnZYdpg==}
-
-  '@types/tough-cookie@4.0.5':
-    resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
-
-  '@vitest/expect@3.2.4':
-    resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
-
-  '@vitest/mocker@3.2.4':
-    resolution: {integrity: sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==}
-    peerDependencies:
-      msw: ^2.4.9
-      vite: ^5.0.0 || ^6.0.0 || ^7.0.0-0
-    peerDependenciesMeta:
-      msw:
-        optional: true
-      vite:
-        optional: true
-
-  '@vitest/pretty-format@3.2.4':
-    resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
-
-  '@vitest/runner@3.2.4':
-    resolution: {integrity: sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==}
-
-  '@vitest/snapshot@3.2.4':
-    resolution: {integrity: sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==}
-
-  '@vitest/spy@3.2.4':
-    resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
-
-  '@vitest/utils@3.2.4':
-    resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
-
-  '@zumer/snapdom@2.8.0':
-    resolution: {integrity: sha512-NhztgFDNfOkFt8Ox9PIJ1IwggyMui5UDazysOgZD7FSGL0G7H8U+J3ft0iecxAS8daj5aC62i3blaTk7s2GcpA==}
-
-  assertion-error@2.0.1:
-    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
-    engines: {node: '>=12'}
-
-  bidi-js@1.0.3:
-    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
-
-  cac@6.7.14:
-    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
-    engines: {node: '>=8'}
-
-  chai@5.3.3:
-    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
-    engines: {node: '>=18'}
-
-  check-error@2.1.3:
-    resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
-    engines: {node: '>= 16'}
-
-  css-tree@3.2.1:
-    resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-
-  data-urls@7.0.0:
-    resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==}
-    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
-
-  debug@4.4.3:
-    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
-  decimal.js@10.6.0:
-    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
-
-  deep-eql@5.0.2:
-    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
-    engines: {node: '>=6'}
-
-  entities@6.0.1:
-    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
-    engines: {node: '>=0.12'}
-
-  es-module-lexer@1.7.0:
-    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
-
-  esbuild@0.27.7:
-    resolution: {integrity: sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==}
-    engines: {node: '>=18'}
-    hasBin: true
-
-  estree-walker@3.0.3:
-    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
-
-  expect-type@1.3.0:
-    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
-    engines: {node: '>=12.0.0'}
-
-  fdir@6.5.0:
-    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      picomatch: ^3 || ^4
-    peerDependenciesMeta:
-      picomatch:
-        optional: true
-
-  fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-
-  html-encoding-sniffer@6.0.0:
-    resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
-    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
-
-  is-potential-custom-element-name@1.0.1:
-    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
-
-  js-tokens@9.0.1:
-    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
-
-  jsdom@29.0.2:
-    resolution: {integrity: sha512-9VnGEBosc/ZpwyOsJBCQ/3I5p7Q5ngOY14a9bf5btenAORmZfDse1ZEheMiWcJ3h81+Fv7HmJFdS0szo/waF2w==}
-    engines: {node: ^20.19.0 || ^22.13.0 || >=24.0.0}
-    peerDependencies:
-      canvas: ^3.0.0
-    peerDependenciesMeta:
-      canvas:
-        optional: true
-
-  loupe@3.2.1:
-    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
-
-  lru-cache@11.3.3:
-    resolution: {integrity: sha512-JvNw9Y81y33E+BEYPr0U7omo+U9AySnsMsEiXgwT6yqd31VQWTLNQqmT4ou5eqPFUrTfIDFta2wKhB1hyohtAQ==}
-    engines: {node: 20 || >=22}
-
-  magic-string@0.30.21:
-    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
-
-  mdn-data@2.27.1:
-    resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
-
-  mediabunny@1.40.1:
-    resolution: {integrity: sha512-HU/stGzAkdWaJIly6ypbUVgAUvT9kt39DIg0IaErR7/1fwtTmgUYs4i8uEPYcgcjPjbB9gtBmUXOLnXi6J2LDw==}
-
-  ms@2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
-
-  nanoid@3.3.11:
-    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
-
-  parse5@7.3.0:
-    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
-
-  parse5@8.0.0:
-    resolution: {integrity: sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==}
-
-  pathe@2.0.3:
-    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
-
-  pathval@2.0.1:
-    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
-    engines: {node: '>= 14.16'}
-
-  picocolors@1.1.1:
-    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
-
-  picomatch@4.0.4:
-    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
-    engines: {node: '>=12'}
-
-  postcss@8.5.9:
-    resolution: {integrity: sha512-7a70Nsot+EMX9fFU3064K/kdHWZqGVY+BADLyXc8Dfv+mTLLVl6JzJpPaCZ2kQL9gIJvKXSLMHhqdRRjwQeFtw==}
-    engines: {node: ^10 || ^12 || >=14}
-
-  punycode@2.3.1:
-    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
-    engines: {node: '>=6'}
-
-  require-from-string@2.0.2:
-    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
-    engines: {node: '>=0.10.0'}
-
-  rollup@4.60.1:
-    resolution: {integrity: sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==}
-    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
-    hasBin: true
-
-  saxes@6.0.0:
-    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
-    engines: {node: '>=v12.22.7'}
-
-  siginfo@2.0.0:
-    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
-
-  source-map-js@1.2.1:
-    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
-    engines: {node: '>=0.10.0'}
-
-  stackback@0.0.2:
-    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
-
-  std-env@3.10.0:
-    resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
-
-  strip-literal@3.1.0:
-    resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
-
-  symbol-tree@3.2.4:
-    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
-
-  tinybench@2.9.0:
-    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
-
-  tinyexec@0.3.2:
-    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
-
-  tinyglobby@0.2.16:
-    resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
-    engines: {node: '>=12.0.0'}
-
-  tinypool@1.1.1:
-    resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-
-  tinyrainbow@2.0.0:
-    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
-    engines: {node: '>=14.0.0'}
-
-  tinyspy@4.0.4:
-    resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
-    engines: {node: '>=14.0.0'}
-
-  tldts-core@7.0.28:
-    resolution: {integrity: sha512-7W5Efjhsc3chVdFhqtaU0KtK32J37Zcr9RKtID54nG+tIpcY79CQK/veYPODxtD/LJ4Lue66jvrQzIX2Z2/pUQ==}
-
-  tldts@7.0.28:
-    resolution: {integrity: sha512-+Zg3vWhRUv8B1maGSTFdev9mjoo8Etn2Ayfs4cnjlD3CsGkxXX4QyW3j2WJ0wdjYcYmy7Lx2RDsZMhgCWafKIw==}
-    hasBin: true
-
-  tough-cookie@6.0.1:
-    resolution: {integrity: sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==}
-    engines: {node: '>=16'}
-
-  tr46@6.0.0:
-    resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
-    engines: {node: '>=20'}
-
-  typescript@5.9.3:
-    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-
-  undici-types@7.18.2:
-    resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
-
-  undici-types@7.24.7:
-    resolution: {integrity: sha512-XA+gOBkzYD3C74sZowtCLTpgtaCdqZhqCvR6y9LXvrKTt/IVU6bz49T4D+BPi475scshCCkb0IklJRw6T1ZlgQ==}
-
-  undici@7.24.7:
-    resolution: {integrity: sha512-H/nlJ/h0ggGC+uRL3ovD+G0i4bqhvsDOpbDv7At5eFLlj2b41L8QliGbnl2H7SnDiYhENphh1tQFJZf+MyfLsQ==}
-    engines: {node: '>=20.18.1'}
-
-  vite-node@3.2.4:
-    resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
-    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
-    hasBin: true
-
-  vite@7.3.2:
-    resolution: {integrity: sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': ^20.19.0 || >=22.12.0
-      jiti: '>=1.21.0'
-      less: ^4.0.0
-      lightningcss: ^1.21.0
-      sass: ^1.70.0
-      sass-embedded: ^1.70.0
-      stylus: '>=0.54.8'
-      sugarss: ^5.0.0
-      terser: ^5.16.0
-      tsx: ^4.8.1
-      yaml: ^2.4.2
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      jiti:
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      sass-embedded:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-      tsx:
-        optional: true
-      yaml:
-        optional: true
-
-  vitest@3.2.4:
-    resolution: {integrity: sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==}
-    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
-    hasBin: true
-    peerDependencies:
-      '@edge-runtime/vm': '*'
-      '@types/debug': ^4.1.12
-      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
-      '@vitest/browser': 3.2.4
-      '@vitest/ui': 3.2.4
-      happy-dom: '*'
-      jsdom: '*'
-    peerDependenciesMeta:
-      '@edge-runtime/vm':
-        optional: true
-      '@types/debug':
-        optional: true
-      '@types/node':
-        optional: true
-      '@vitest/browser':
-        optional: true
-      '@vitest/ui':
-        optional: true
-      happy-dom:
-        optional: true
-      jsdom:
-        optional: true
-
-  w3c-xmlserializer@5.0.0:
-    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
-    engines: {node: '>=18'}
-
-  webidl-conversions@8.0.1:
-    resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
-    engines: {node: '>=20'}
-
-  whatwg-mimetype@5.0.0:
-    resolution: {integrity: sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==}
-    engines: {node: '>=20'}
-
-  whatwg-url@16.0.1:
-    resolution: {integrity: sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==}
-    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
-
-  why-is-node-running@2.3.0:
-    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
-    engines: {node: '>=8'}
-    hasBin: true
-
-  xml-name-validator@5.0.0:
-    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
-    engines: {node: '>=18'}
-
-  xmlchars@2.2.0:
-    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
-
-snapshots:
-
-  '@asamuzakjp/css-color@5.1.9':
-    dependencies:
-      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-tokenizer': 4.0.0
-
-  '@asamuzakjp/dom-selector@7.0.9':
-    dependencies:
-      '@asamuzakjp/nwsapi': 2.3.9
-      bidi-js: 1.0.3
-      css-tree: 3.2.1
-      is-potential-custom-element-name: 1.0.1
-
-  '@asamuzakjp/nwsapi@2.3.9': {}
-
-  '@bramus/specificity@2.4.2':
-    dependencies:
-      css-tree: 3.2.1
-
-  '@csstools/color-helpers@6.0.2': {}
-
-  '@csstools/css-calc@3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
-    dependencies:
-      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-tokenizer': 4.0.0
-
-  '@csstools/css-color-parser@4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
-    dependencies:
-      '@csstools/color-helpers': 6.0.2
-      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-tokenizer': 4.0.0
-
-  '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
-    dependencies:
-      '@csstools/css-tokenizer': 4.0.0
-
-  '@csstools/css-syntax-patches-for-csstree@1.1.2(css-tree@3.2.1)':
-    optionalDependencies:
-      css-tree: 3.2.1
-
-  '@csstools/css-tokenizer@4.0.0': {}
-
-  '@esbuild/aix-ppc64@0.27.7':
-    optional: true
-
-  '@esbuild/android-arm64@0.27.7':
-    optional: true
-
-  '@esbuild/android-arm@0.27.7':
-    optional: true
-
-  '@esbuild/android-x64@0.27.7':
-    optional: true
-
-  '@esbuild/darwin-arm64@0.27.7':
-    optional: true
-
-  '@esbuild/darwin-x64@0.27.7':
-    optional: true
-
-  '@esbuild/freebsd-arm64@0.27.7':
-    optional: true
-
-  '@esbuild/freebsd-x64@0.27.7':
-    optional: true
-
-  '@esbuild/linux-arm64@0.27.7':
-    optional: true
-
-  '@esbuild/linux-arm@0.27.7':
-    optional: true
-
-  '@esbuild/linux-ia32@0.27.7':
-    optional: true
-
-  '@esbuild/linux-loong64@0.27.7':
-    optional: true
-
-  '@esbuild/linux-mips64el@0.27.7':
-    optional: true
-
-  '@esbuild/linux-ppc64@0.27.7':
-    optional: true
-
-  '@esbuild/linux-riscv64@0.27.7':
-    optional: true
-
-  '@esbuild/linux-s390x@0.27.7':
-    optional: true
-
-  '@esbuild/linux-x64@0.27.7':
-    optional: true
-
-  '@esbuild/netbsd-arm64@0.27.7':
-    optional: true
-
-  '@esbuild/netbsd-x64@0.27.7':
-    optional: true
-
-  '@esbuild/openbsd-arm64@0.27.7':
-    optional: true
-
-  '@esbuild/openbsd-x64@0.27.7':
-    optional: true
-
-  '@esbuild/openharmony-arm64@0.27.7':
-    optional: true
-
-  '@esbuild/sunos-x64@0.27.7':
-    optional: true
-
-  '@esbuild/win32-arm64@0.27.7':
-    optional: true
-
-  '@esbuild/win32-ia32@0.27.7':
-    optional: true
-
-  '@esbuild/win32-x64@0.27.7':
-    optional: true
-
-  '@exodus/bytes@1.15.0': {}
-
-  '@jridgewell/sourcemap-codec@1.5.5': {}
-
-  '@rollup/rollup-android-arm-eabi@4.60.1':
-    optional: true
-
-  '@rollup/rollup-android-arm64@4.60.1':
-    optional: true
-
-  '@rollup/rollup-darwin-arm64@4.60.1':
-    optional: true
-
-  '@rollup/rollup-darwin-x64@4.60.1':
-    optional: true
-
-  '@rollup/rollup-freebsd-arm64@4.60.1':
-    optional: true
-
-  '@rollup/rollup-freebsd-x64@4.60.1':
-    optional: true
-
-  '@rollup/rollup-linux-arm-gnueabihf@4.60.1':
-    optional: true
-
-  '@rollup/rollup-linux-arm-musleabihf@4.60.1':
-    optional: true
-
-  '@rollup/rollup-linux-arm64-gnu@4.60.1':
-    optional: true
-
-  '@rollup/rollup-linux-arm64-musl@4.60.1':
-    optional: true
-
-  '@rollup/rollup-linux-loong64-gnu@4.60.1':
-    optional: true
-
-  '@rollup/rollup-linux-loong64-musl@4.60.1':
-    optional: true
-
-  '@rollup/rollup-linux-ppc64-gnu@4.60.1':
-    optional: true
-
-  '@rollup/rollup-linux-ppc64-musl@4.60.1':
-    optional: true
-
-  '@rollup/rollup-linux-riscv64-gnu@4.60.1':
-    optional: true
-
-  '@rollup/rollup-linux-riscv64-musl@4.60.1':
-    optional: true
-
-  '@rollup/rollup-linux-s390x-gnu@4.60.1':
-    optional: true
-
-  '@rollup/rollup-linux-x64-gnu@4.60.1':
-    optional: true
-
-  '@rollup/rollup-linux-x64-musl@4.60.1':
-    optional: true
-
-  '@rollup/rollup-openbsd-x64@4.60.1':
-    optional: true
-
-  '@rollup/rollup-openharmony-arm64@4.60.1':
-    optional: true
-
-  '@rollup/rollup-win32-arm64-msvc@4.60.1':
-    optional: true
-
-  '@rollup/rollup-win32-ia32-msvc@4.60.1':
-    optional: true
-
-  '@rollup/rollup-win32-x64-gnu@4.60.1':
-    optional: true
-
-  '@rollup/rollup-win32-x64-msvc@4.60.1':
-    optional: true
-
-  '@types/chai@5.2.3':
-    dependencies:
-      '@types/deep-eql': 4.0.2
-      assertion-error: 2.0.1
-
-  '@types/deep-eql@4.0.2': {}
-
-  '@types/dom-mediacapture-transform@0.1.11':
-    dependencies:
-      '@types/dom-webcodecs': 0.1.13
-
-  '@types/dom-webcodecs@0.1.13': {}
-
-  '@types/estree@1.0.8': {}
-
-  '@types/jsdom@28.0.1':
-    dependencies:
-      '@types/node': 25.5.2
-      '@types/tough-cookie': 4.0.5
-      parse5: 7.3.0
-      undici-types: 7.24.7
-
-  '@types/node@25.5.2':
-    dependencies:
-      undici-types: 7.18.2
-
-  '@types/tough-cookie@4.0.5': {}
-
-  '@vitest/expect@3.2.4':
-    dependencies:
-      '@types/chai': 5.2.3
-      '@vitest/spy': 3.2.4
-      '@vitest/utils': 3.2.4
-      chai: 5.3.3
-      tinyrainbow: 2.0.0
-
-  '@vitest/mocker@3.2.4(vite@7.3.2(@types/node@25.5.2))':
-    dependencies:
-      '@vitest/spy': 3.2.4
-      estree-walker: 3.0.3
-      magic-string: 0.30.21
-    optionalDependencies:
-      vite: 7.3.2(@types/node@25.5.2)
-
-  '@vitest/pretty-format@3.2.4':
-    dependencies:
-      tinyrainbow: 2.0.0
-
-  '@vitest/runner@3.2.4':
-    dependencies:
-      '@vitest/utils': 3.2.4
-      pathe: 2.0.3
-      strip-literal: 3.1.0
-
-  '@vitest/snapshot@3.2.4':
-    dependencies:
-      '@vitest/pretty-format': 3.2.4
-      magic-string: 0.30.21
-      pathe: 2.0.3
-
-  '@vitest/spy@3.2.4':
-    dependencies:
-      tinyspy: 4.0.4
-
-  '@vitest/utils@3.2.4':
-    dependencies:
-      '@vitest/pretty-format': 3.2.4
-      loupe: 3.2.1
-      tinyrainbow: 2.0.0
-
-  '@zumer/snapdom@2.8.0': {}
-
-  assertion-error@2.0.1: {}
-
-  bidi-js@1.0.3:
-    dependencies:
-      require-from-string: 2.0.2
-
-  cac@6.7.14: {}
-
-  chai@5.3.3:
-    dependencies:
-      assertion-error: 2.0.1
-      check-error: 2.1.3
-      deep-eql: 5.0.2
-      loupe: 3.2.1
-      pathval: 2.0.1
-
-  check-error@2.1.3: {}
-
-  css-tree@3.2.1:
-    dependencies:
-      mdn-data: 2.27.1
-      source-map-js: 1.2.1
-
-  data-urls@7.0.0:
-    dependencies:
-      whatwg-mimetype: 5.0.0
-      whatwg-url: 16.0.1
-    transitivePeerDependencies:
-      - '@noble/hashes'
-
-  debug@4.4.3:
-    dependencies:
-      ms: 2.1.3
-
-  decimal.js@10.6.0: {}
-
-  deep-eql@5.0.2: {}
-
-  entities@6.0.1: {}
-
-  es-module-lexer@1.7.0: {}
-
-  esbuild@0.27.7:
-    optionalDependencies:
-      '@esbuild/aix-ppc64': 0.27.7
-      '@esbuild/android-arm': 0.27.7
-      '@esbuild/android-arm64': 0.27.7
-      '@esbuild/android-x64': 0.27.7
-      '@esbuild/darwin-arm64': 0.27.7
-      '@esbuild/darwin-x64': 0.27.7
-      '@esbuild/freebsd-arm64': 0.27.7
-      '@esbuild/freebsd-x64': 0.27.7
-      '@esbuild/linux-arm': 0.27.7
-      '@esbuild/linux-arm64': 0.27.7
-      '@esbuild/linux-ia32': 0.27.7
-      '@esbuild/linux-loong64': 0.27.7
-      '@esbuild/linux-mips64el': 0.27.7
-      '@esbuild/linux-ppc64': 0.27.7
-      '@esbuild/linux-riscv64': 0.27.7
-      '@esbuild/linux-s390x': 0.27.7
-      '@esbuild/linux-x64': 0.27.7
-      '@esbuild/netbsd-arm64': 0.27.7
-      '@esbuild/netbsd-x64': 0.27.7
-      '@esbuild/openbsd-arm64': 0.27.7
-      '@esbuild/openbsd-x64': 0.27.7
-      '@esbuild/openharmony-arm64': 0.27.7
-      '@esbuild/sunos-x64': 0.27.7
-      '@esbuild/win32-arm64': 0.27.7
-      '@esbuild/win32-ia32': 0.27.7
-      '@esbuild/win32-x64': 0.27.7
-
-  estree-walker@3.0.3:
-    dependencies:
-      '@types/estree': 1.0.8
-
-  expect-type@1.3.0: {}
-
-  fdir@6.5.0(picomatch@4.0.4):
-    optionalDependencies:
-      picomatch: 4.0.4
-
-  fsevents@2.3.3:
-    optional: true
-
-  html-encoding-sniffer@6.0.0:
-    dependencies:
-      '@exodus/bytes': 1.15.0
-    transitivePeerDependencies:
-      - '@noble/hashes'
-
-  is-potential-custom-element-name@1.0.1: {}
-
-  js-tokens@9.0.1: {}
-
-  jsdom@29.0.2:
-    dependencies:
-      '@asamuzakjp/css-color': 5.1.9
-      '@asamuzakjp/dom-selector': 7.0.9
-      '@bramus/specificity': 2.4.2
-      '@csstools/css-syntax-patches-for-csstree': 1.1.2(css-tree@3.2.1)
-      '@exodus/bytes': 1.15.0
-      css-tree: 3.2.1
-      data-urls: 7.0.0
-      decimal.js: 10.6.0
-      html-encoding-sniffer: 6.0.0
-      is-potential-custom-element-name: 1.0.1
-      lru-cache: 11.3.3
-      parse5: 8.0.0
-      saxes: 6.0.0
-      symbol-tree: 3.2.4
-      tough-cookie: 6.0.1
-      undici: 7.24.7
-      w3c-xmlserializer: 5.0.0
-      webidl-conversions: 8.0.1
-      whatwg-mimetype: 5.0.0
-      whatwg-url: 16.0.1
-      xml-name-validator: 5.0.0
-    transitivePeerDependencies:
-      - '@noble/hashes'
-
-  loupe@3.2.1: {}
-
-  lru-cache@11.3.3: {}
-
-  magic-string@0.30.21:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-
-  mdn-data@2.27.1: {}
-
-  mediabunny@1.40.1:
-    dependencies:
-      '@types/dom-mediacapture-transform': 0.1.11
-      '@types/dom-webcodecs': 0.1.13
-
-  ms@2.1.3: {}
-
-  nanoid@3.3.11: {}
-
-  parse5@7.3.0:
-    dependencies:
-      entities: 6.0.1
-
-  parse5@8.0.0:
-    dependencies:
-      entities: 6.0.1
-
-  pathe@2.0.3: {}
-
-  pathval@2.0.1: {}
-
-  picocolors@1.1.1: {}
-
-  picomatch@4.0.4: {}
-
-  postcss@8.5.9:
-    dependencies:
-      nanoid: 3.3.11
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
-
-  punycode@2.3.1: {}
-
-  require-from-string@2.0.2: {}
-
-  rollup@4.60.1:
-    dependencies:
-      '@types/estree': 1.0.8
-    optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.60.1
-      '@rollup/rollup-android-arm64': 4.60.1
-      '@rollup/rollup-darwin-arm64': 4.60.1
-      '@rollup/rollup-darwin-x64': 4.60.1
-      '@rollup/rollup-freebsd-arm64': 4.60.1
-      '@rollup/rollup-freebsd-x64': 4.60.1
-      '@rollup/rollup-linux-arm-gnueabihf': 4.60.1
-      '@rollup/rollup-linux-arm-musleabihf': 4.60.1
-      '@rollup/rollup-linux-arm64-gnu': 4.60.1
-      '@rollup/rollup-linux-arm64-musl': 4.60.1
-      '@rollup/rollup-linux-loong64-gnu': 4.60.1
-      '@rollup/rollup-linux-loong64-musl': 4.60.1
-      '@rollup/rollup-linux-ppc64-gnu': 4.60.1
-      '@rollup/rollup-linux-ppc64-musl': 4.60.1
-      '@rollup/rollup-linux-riscv64-gnu': 4.60.1
-      '@rollup/rollup-linux-riscv64-musl': 4.60.1
-      '@rollup/rollup-linux-s390x-gnu': 4.60.1
-      '@rollup/rollup-linux-x64-gnu': 4.60.1
-      '@rollup/rollup-linux-x64-musl': 4.60.1
-      '@rollup/rollup-openbsd-x64': 4.60.1
-      '@rollup/rollup-openharmony-arm64': 4.60.1
-      '@rollup/rollup-win32-arm64-msvc': 4.60.1
-      '@rollup/rollup-win32-ia32-msvc': 4.60.1
-      '@rollup/rollup-win32-x64-gnu': 4.60.1
-      '@rollup/rollup-win32-x64-msvc': 4.60.1
-      fsevents: 2.3.3
-
-  saxes@6.0.0:
-    dependencies:
-      xmlchars: 2.2.0
-
-  siginfo@2.0.0: {}
-
-  source-map-js@1.2.1: {}
-
-  stackback@0.0.2: {}
-
-  std-env@3.10.0: {}
-
-  strip-literal@3.1.0:
-    dependencies:
-      js-tokens: 9.0.1
-
-  symbol-tree@3.2.4: {}
-
-  tinybench@2.9.0: {}
-
-  tinyexec@0.3.2: {}
-
-  tinyglobby@0.2.16:
-    dependencies:
-      fdir: 6.5.0(picomatch@4.0.4)
-      picomatch: 4.0.4
-
-  tinypool@1.1.1: {}
-
-  tinyrainbow@2.0.0: {}
-
-  tinyspy@4.0.4: {}
-
-  tldts-core@7.0.28: {}
-
-  tldts@7.0.28:
-    dependencies:
-      tldts-core: 7.0.28
-
-  tough-cookie@6.0.1:
-    dependencies:
-      tldts: 7.0.28
-
-  tr46@6.0.0:
-    dependencies:
-      punycode: 2.3.1
-
-  typescript@5.9.3: {}
-
-  undici-types@7.18.2: {}
-
-  undici-types@7.24.7: {}
-
-  undici@7.24.7: {}
-
-  vite-node@3.2.4(@types/node@25.5.2):
-    dependencies:
-      cac: 6.7.14
-      debug: 4.4.3
-      es-module-lexer: 1.7.0
-      pathe: 2.0.3
-      vite: 7.3.2(@types/node@25.5.2)
-    transitivePeerDependencies:
-      - '@types/node'
-      - jiti
-      - less
-      - lightningcss
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - yaml
-
-  vite@7.3.2(@types/node@25.5.2):
-    dependencies:
-      esbuild: 0.27.7
-      fdir: 6.5.0(picomatch@4.0.4)
-      picomatch: 4.0.4
-      postcss: 8.5.9
-      rollup: 4.60.1
-      tinyglobby: 0.2.16
-    optionalDependencies:
-      '@types/node': 25.5.2
-      fsevents: 2.3.3
-
-  vitest@3.2.4(@types/node@25.5.2)(jsdom@29.0.2):
-    dependencies:
-      '@types/chai': 5.2.3
-      '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.3.2(@types/node@25.5.2))
-      '@vitest/pretty-format': 3.2.4
-      '@vitest/runner': 3.2.4
-      '@vitest/snapshot': 3.2.4
-      '@vitest/spy': 3.2.4
-      '@vitest/utils': 3.2.4
-      chai: 5.3.3
-      debug: 4.4.3
-      expect-type: 1.3.0
-      magic-string: 0.30.21
-      pathe: 2.0.3
-      picomatch: 4.0.4
-      std-env: 3.10.0
-      tinybench: 2.9.0
-      tinyexec: 0.3.2
-      tinyglobby: 0.2.16
-      tinypool: 1.1.1
-      tinyrainbow: 2.0.0
-      vite: 7.3.2(@types/node@25.5.2)
-      vite-node: 3.2.4(@types/node@25.5.2)
-      why-is-node-running: 2.3.0
-    optionalDependencies:
-      '@types/node': 25.5.2
-      jsdom: 29.0.2
-    transitivePeerDependencies:
-      - jiti
-      - less
-      - lightningcss
-      - msw
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - yaml
-
-  w3c-xmlserializer@5.0.0:
-    dependencies:
-      xml-name-validator: 5.0.0
-
-  webidl-conversions@8.0.1: {}
-
-  whatwg-mimetype@5.0.0: {}
-
-  whatwg-url@16.0.1:
-    dependencies:
-      '@exodus/bytes': 1.15.0
-      tr46: 6.0.0
-      webidl-conversions: 8.0.1
-    transitivePeerDependencies:
-      - '@noble/hashes'
-
-  why-is-node-running@2.3.0:
-    dependencies:
-      siginfo: 2.0.0
-      stackback: 0.0.2
-
-  xml-name-validator@5.0.0: {}
-
-  xmlchars@2.2.0: {}
diff --git a/packages/renderer/qa/composition.html b/packages/renderer/qa/composition.html
deleted file mode 100644
index 5e1e7a29..00000000
--- a/packages/renderer/qa/composition.html
+++ /dev/null
@@ -1,98 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <style>
-    html, body { margin: 0; padding: 0; overflow: hidden; }
-    body { width: 1280px; height: 720px; background: #1a1a2e; }
-    .title {
-      position: absolute;
-      top: 50%; left: 50%;
-      transform: translate(-50%, -50%);
-      font-family: -apple-system, system-ui, sans-serif;
-      font-size: 48px;
-      font-weight: 700;
-      color: white;
-      text-align: center;
-    }
-    .title span {
-      display: block;
-      font-size: 28px;
-      color: #4ecdc4;
-      margin-top: 8px;
-    }
-    .box {
-      position: absolute;
-      width: 120px; height: 120px;
-      border-radius: 16px;
-    }
-    .box-1 { background: #e94560; top: 200px; left: 200px; }
-    .box-2 { background: #4ecdc4; top: 200px; right: 200px; }
-    .box-3 { background: #ffe66d; bottom: 150px; left: 50%; transform: translateX(-50%); }
-    .subtitle {
-      position: absolute;
-      bottom: 40px; left: 50%;
-      transform: translateX(-50%);
-      font-family: monospace;
-      font-size: 18px;
-      color: #666;
-    }
-  </style>
-</head>
-<body>
-  <div class="box box-1" id="box1"></div>
-  <div class="box box-2" id="box2"></div>
-  <div class="box box-3" id="box3"></div>
-  <div class="title" id="title">HyperFrames<span>Client-Side Renderer</span></div>
-  <div class="subtitle" id="subtitle">WebCodecs + MediaBunny + SnapDOM</div>
-
-  <script>
-    // Simple CSS-driven animation state (no external deps)
-    var duration = 3;
-    var elements = {
-      box1: document.getElementById('box1'),
-      box2: document.getElementById('box2'),
-      box3: document.getElementById('box3'),
-      title: document.getElementById('title'),
-      subtitle: document.getElementById('subtitle'),
-    };
-
-    function lerp(a, b, t) { return a + (b - a) * Math.min(1, Math.max(0, t)); }
-    function easeOut(t) { return 1 - Math.pow(1 - t, 3); }
-
-    function seekTo(time) {
-      var t = time / duration;
-
-      // Box 1: slide in from left (0-0.8s)
-      var b1t = easeOut(Math.min(1, time / 0.8));
-      elements.box1.style.transform = 'translateX(' + lerp(-600, 0, b1t) + 'px) rotate(' + lerp(-180, 0, b1t) + 'deg)';
-
-      // Box 2: slide in from right (0.1-0.9s)
-      var b2t = easeOut(Math.min(1, Math.max(0, (time - 0.1) / 0.8)));
-      elements.box2.style.transform = 'translateX(' + lerp(600, 0, b2t) + 'px) rotate(' + lerp(180, 0, b2t) + 'deg)';
-
-      // Box 3: slide up from bottom (0.2-1.0s)
-      var b3t = easeOut(Math.min(1, Math.max(0, (time - 0.2) / 0.8)));
-      elements.box3.style.transform = 'translateX(-50%) translateY(' + lerp(400, 0, b3t) + 'px)';
-
-      // Title: fade in (1.0-1.5s)
-      var tt = Math.min(1, Math.max(0, (time - 1.0) / 0.5));
-      elements.title.style.opacity = tt;
-
-      // Subtitle: fade in (1.5-2.0s)
-      var st = Math.min(1, Math.max(0, (time - 1.5) / 0.5));
-      elements.subtitle.style.opacity = st;
-    }
-
-    // Initialize at time 0
-    seekTo(0);
-
-    // HyperFrames seek protocol
-    window.__hf = {
-      duration: duration,
-      seek: seekTo,
-      media: [],
-    };
-  </script>
-</body>
-</html>
diff --git a/packages/renderer/qa/index.html b/packages/renderer/qa/index.html
deleted file mode 100644
index faafd3b5..00000000
--- a/packages/renderer/qa/index.html
+++ /dev/null
@@ -1,208 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>HyperFrames Renderer QA</title>
-  <style>
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: -apple-system, system-ui, sans-serif;
-      background: #0f0f23;
-      color: #e0e0e0;
-      padding: 2rem;
-      min-height: 100vh;
-    }
-    h1 { font-size: 1.5rem; margin-bottom: 1rem; color: #fff; }
-    .status {
-      background: #1a1a3e;
-      border-radius: 8px;
-      padding: 1rem;
-      margin-bottom: 1rem;
-      font-family: monospace;
-      font-size: 0.9rem;
-      min-height: 120px;
-      white-space: pre-wrap;
-    }
-    .controls { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
-    button {
-      background: #e94560;
-      color: white;
-      border: none;
-      padding: 0.75rem 1.5rem;
-      border-radius: 6px;
-      font-size: 1rem;
-      cursor: pointer;
-      font-weight: 600;
-    }
-    button:hover { background: #d63850; }
-    button:disabled { opacity: 0.5; cursor: not-allowed; }
-    .progress-bar {
-      width: 100%;
-      height: 8px;
-      background: #1a1a3e;
-      border-radius: 4px;
-      margin-bottom: 1rem;
-      overflow: hidden;
-    }
-    .progress-fill {
-      height: 100%;
-      background: #4ecdc4;
-      width: 0%;
-      transition: width 0.2s;
-      border-radius: 4px;
-    }
-    .result {
-      display: none;
-      background: #1a2e1a;
-      border: 1px solid #4ecdc4;
-      border-radius: 8px;
-      padding: 1rem;
-      margin-top: 1rem;
-    }
-    .result.visible { display: block; }
-    video { max-width: 100%; border-radius: 8px; margin-top: 1rem; }
-    .check { color: #4ecdc4; }
-    .error { color: #e94560; }
-    .perf-table { margin-top: 0.5rem; }
-    .perf-table td { padding: 0.25rem 1rem 0.25rem 0; }
-    .perf-table td:last-child { color: #4ecdc4; font-family: monospace; }
-  </style>
-</head>
-<body>
-  <h1>@hyperframes/renderer — QA Test</h1>
-
-  <div id="compat-status" class="status">Checking browser compatibility...</div>
-
-  <div class="controls">
-    <button id="render-btn" disabled>Render Composition to MP4</button>
-    <button id="download-btn" disabled>Download MP4</button>
-  </div>
-
-  <div class="progress-bar">
-    <div id="progress-fill" class="progress-fill"></div>
-  </div>
-
-  <div id="log" class="status"></div>
-
-  <div id="result" class="result">
-    <h3 class="check">Render Complete</h3>
-    <table class="perf-table">
-      <tr><td>Total time:</td><td id="perf-total"></td></tr>
-      <tr><td>Capture:</td><td id="perf-capture"></td></tr>
-      <tr><td>Encode:</td><td id="perf-encode"></td></tr>
-      <tr><td>Audio:</td><td id="perf-audio"></td></tr>
-      <tr><td>Mux:</td><td id="perf-mux"></td></tr>
-      <tr><td>FPS:</td><td id="perf-fps"></td></tr>
-      <tr><td>File size:</td><td id="perf-size"></td></tr>
-    </table>
-    <video id="output-video" controls></video>
-  </div>
-
-  <script type="module">
-    const log = document.getElementById('log');
-    const compatStatus = document.getElementById('compat-status');
-    const renderBtn = document.getElementById('render-btn');
-    const downloadBtn = document.getElementById('download-btn');
-    const progressFill = document.getElementById('progress-fill');
-    const resultDiv = document.getElementById('result');
-    let resultBlob = null;
-
-    function addLog(msg) {
-      log.textContent += msg + '\n';
-      log.scrollTop = log.scrollHeight;
-    }
-
-    // Check compatibility
-    const hasVideoEncoder = typeof VideoEncoder !== 'undefined';
-    const hasOffscreenCanvas = typeof OffscreenCanvas !== 'undefined';
-    const hasAudioContext = typeof AudioContext !== 'undefined';
-    const hasCreateImageBitmap = typeof createImageBitmap !== 'undefined';
-
-    let compatHtml = '';
-    compatHtml += `VideoEncoder:     ${hasVideoEncoder ? '✅' : '❌'}\n`;
-    compatHtml += `OffscreenCanvas:  ${hasOffscreenCanvas ? '✅' : '❌'}\n`;
-    compatHtml += `AudioContext:     ${hasAudioContext ? '✅' : '❌'}\n`;
-    compatHtml += `createImageBitmap:${hasCreateImageBitmap ? '✅' : '❌'}\n`;
-
-    const isSupported = hasVideoEncoder && hasOffscreenCanvas && hasAudioContext && hasCreateImageBitmap;
-    compatHtml += `\nOverall: ${isSupported ? '✅ All APIs available — ready to render' : '❌ Missing required APIs'}`;
-    compatStatus.textContent = compatHtml;
-
-    if (isSupported) {
-      renderBtn.disabled = false;
-    }
-
-    renderBtn.addEventListener('click', async () => {
-      renderBtn.disabled = true;
-      resultDiv.classList.remove('visible');
-      log.textContent = '';
-      progressFill.style.width = '0%';
-
-      addLog('Starting render...');
-      addLog(`Composition: /qa/composition.html`);
-      addLog(`Settings: 1280x720 @ 30fps, H.264, MP4`);
-      addLog('');
-
-      try {
-        // Dynamic import of the bundled renderer
-        const { render } = await import('../dist/renderer.bundle.js');
-
-        const result = await render({
-          composition: new URL('/qa/composition.html', window.location.origin).href,
-          workerUrl: new URL('/dist/worker.bundle.js', window.location.origin).href,
-          fps: 30,
-          width: 1280,
-          height: 720,
-          codec: 'h264',
-          format: 'mp4',
-          concurrency: 2,
-          onProgress: (p) => {
-            const pct = Math.round(p.progress * 100);
-            progressFill.style.width = `${pct}%`;
-            addLog(`[${p.stage}] ${pct}% ${p.currentFrame ? `frame ${p.currentFrame}/${p.totalFrames}` : ''} ${p.captureRate ? `(${p.captureRate.toFixed(1)} fps)` : ''}`);
-          },
-        });
-
-        resultBlob = result.blob;
-        addLog('');
-        addLog(`✅ Render complete!`);
-        addLog(`   Blob size: ${(result.blob.size / 1024).toFixed(1)} KB`);
-        addLog(`   MIME: ${result.mimeType}`);
-        addLog(`   Render time: ${(result.durationMs / 1000).toFixed(2)}s`);
-
-        // Show result
-        document.getElementById('perf-total').textContent = `${(result.perf.totalMs / 1000).toFixed(2)}s`;
-        document.getElementById('perf-capture').textContent = `${(result.perf.captureMs / 1000).toFixed(2)}s`;
-        document.getElementById('perf-encode').textContent = `${(result.perf.encodeMs / 1000).toFixed(2)}s`;
-        document.getElementById('perf-audio').textContent = `${(result.perf.audioMs / 1000).toFixed(2)}s`;
-        document.getElementById('perf-mux').textContent = `${(result.perf.muxMs / 1000).toFixed(2)}s`;
-        document.getElementById('perf-fps').textContent = `${result.perf.framesPerSecond.toFixed(1)} fps`;
-        document.getElementById('perf-size').textContent = `${(result.blob.size / 1024).toFixed(1)} KB`;
-
-        // Play the video
-        const videoUrl = URL.createObjectURL(result.blob);
-        const video = document.getElementById('output-video');
-        video.src = videoUrl;
-        resultDiv.classList.add('visible');
-
-        downloadBtn.disabled = false;
-      } catch (err) {
-        addLog(`\n❌ Error: ${err.message}`);
-        console.error(err);
-      } finally {
-        renderBtn.disabled = false;
-      }
-    });
-
-    downloadBtn.addEventListener('click', () => {
-      if (!resultBlob) return;
-      const url = URL.createObjectURL(resultBlob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = 'hyperframes-output.mp4';
-      a.click();
-      URL.revokeObjectURL(url);
-    });
-  </script>
-</body>
-</html>
diff --git a/packages/renderer/scripts/run-parity-test.sh b/packages/renderer/scripts/run-parity-test.sh
deleted file mode 100755
index 111602e1..00000000
--- a/packages/renderer/scripts/run-parity-test.sh
+++ /dev/null
@@ -1,150 +0,0 @@
-#!/bin/bash
-# Run a single client-side render parity test
-# Usage: ./run-parity-test.sh <test-name> <width> <height> <fps>
-set -e
-
-TEST_NAME=$1
-WIDTH=${2:-1080}
-HEIGHT=${3:-1920}
-FPS=${4:-30}
-PORT=4789
-OUTPUT_DIR="renders/parity-regression/$TEST_NAME"
-
-echo "[$TEST_NAME] Rendering ${WIDTH}x${HEIGHT} @ ${FPS}fps..."
-
-# Create a render page
-cat > "$OUTPUT_DIR/render-page.html" <<HTMLEOF
-<!DOCTYPE html>
-<html><head><meta charset="utf-8"><title>Rendering...</title></head>
-<body>
-<pre id="log"></pre>
-<script type="module">
-function log(msg) {
-  document.getElementById('log').textContent += msg + '\\n';
-}
-try {
-  const { render } = await import('http://localhost:${PORT}/packages/renderer/dist/renderer.bundle.js');
-  log('Renderer loaded, starting render...');
-
-  const result = await render({
-    composition: 'http://localhost:${PORT}/${OUTPUT_DIR}/compiled.html',
-    fps: ${FPS},
-    width: ${WIDTH},
-    height: ${HEIGHT},
-    codec: 'h264',
-    format: 'mp4',
-    concurrency: 1,
-    workerUrl: 'http://localhost:${PORT}/packages/renderer/dist/worker.bundle.js',
-    onProgress: (p) => {
-      document.title = p.stage + ' ' + Math.round(p.progress * 100) + '%';
-    },
-  });
-
-  log('Render complete! Blob size: ' + result.blob.size);
-
-  // Store blob globally for extraction
-  window.__renderBlob = result.blob;
-  document.title = 'DONE:' + result.blob.size;
-} catch (err) {
-  log('ERROR: ' + err.message);
-  document.title = 'ERROR:' + err.message;
-}
-</script>
-</body></html>
-HTMLEOF
-
-# Open in browser
-agent-browser --session "parity-$TEST_NAME" open "http://localhost:${PORT}/${OUTPUT_DIR}/render-page.html" 2>&1 | tail -1
-
-# Wait for render to complete (up to 2 minutes)
-agent-browser --session "parity-$TEST_NAME" wait --fn "document.title.startsWith('DONE') || document.title.startsWith('ERROR')" --timeout 120000 2>&1 | tail -1
-
-# Get title (contains result)
-TITLE=$(agent-browser --session "parity-$TEST_NAME" get title 2>&1)
-echo "[$TEST_NAME] Title: $TITLE"
-
-if [[ "$TITLE" == ERROR* ]]; then
-  echo "[$TEST_NAME] ✗ Render failed: $TITLE"
-  agent-browser --session "parity-$TEST_NAME" close 2>&1 > /dev/null
-  exit 1
-fi
-
-# Extract rendered video as base64 chunks and save to disk
-echo "[$TEST_NAME] Extracting video blob..."
-agent-browser --session "parity-$TEST_NAME" eval --stdin <<'EXTRACTEOF' > "$OUTPUT_DIR/client-render.b64"
-(async () => {
-  const blob = window.__renderBlob;
-  if (!blob) return 'ERROR:no blob';
-  const buf = await blob.arrayBuffer();
-  const bytes = new Uint8Array(buf);
-  let result = '';
-  for (let i = 0; i < bytes.length; i += 8192) {
-    result += String.fromCharCode.apply(null, bytes.subarray(i, i + 8192));
-  }
-  return btoa(result);
-})()
-EXTRACTEOF
-
-# Close browser
-agent-browser --session "parity-$TEST_NAME" close 2>&1 > /dev/null
-
-# Decode base64 to MP4
-if [[ ! -f "$OUTPUT_DIR/client-render.b64" ]]; then
-  echo "[$TEST_NAME] ✗ Failed to extract video blob"
-  exit 1
-fi
-
-# Strip quotes from the base64 output
-sed -i '' 's/^"//;s/"$//' "$OUTPUT_DIR/client-render.b64" 2>/dev/null || sed -i 's/^"//;s/"$//' "$OUTPUT_DIR/client-render.b64"
-base64 -d < "$OUTPUT_DIR/client-render.b64" > "$OUTPUT_DIR/client-render.mp4" 2>/dev/null || base64 --decode < "$OUTPUT_DIR/client-render.b64" > "$OUTPUT_DIR/client-render.mp4"
-
-if [[ ! -f "$OUTPUT_DIR/client-render.mp4" ]] || [[ ! -s "$OUTPUT_DIR/client-render.mp4" ]]; then
-  echo "[$TEST_NAME] ✗ Failed to decode video"
-  exit 1
-fi
-
-FILE_SIZE=$(stat -f%z "$OUTPUT_DIR/client-render.mp4" 2>/dev/null || stat -c%s "$OUTPUT_DIR/client-render.mp4" 2>/dev/null)
-echo "[$TEST_NAME] ✓ Rendered: ${FILE_SIZE} bytes"
-
-# PSNR comparison against golden reference
-GOLDEN="packages/producer/tests/$TEST_NAME/output/output.mp4"
-if [[ ! -f "$GOLDEN" ]]; then
-  GOLDEN="packages/producer/tests/$TEST_NAME/output/output.webm"
-fi
-
-if [[ ! -f "$GOLDEN" ]]; then
-  echo "[$TEST_NAME] ⚠ No golden reference found, skipping PSNR"
-  exit 0
-fi
-
-# Get video duration
-DURATION=$(ffprobe -v error -show_entries format=duration -of csv=p=0 "$OUTPUT_DIR/client-render.mp4" 2>/dev/null | head -1)
-echo "[$TEST_NAME] Duration: ${DURATION}s"
-
-# Compare at 10 checkpoints
-TOTAL_PSNR=0
-FAILED=0
-CHECKED=0
-for i in $(seq 0 9); do
-  TIME=$(echo "$DURATION * $i / 10" | bc -l 2>/dev/null || echo "0")
-  PSNR_RAW=$(ffmpeg -ss "$TIME" -i "$OUTPUT_DIR/client-render.mp4" -ss "$TIME" -i "$GOLDEN" -frames:v 1 -lavfi "psnr=stats_file=/dev/null" -f null - 2>&1)
-  PSNR=$(echo "$PSNR_RAW" | grep -o 'average:[0-9.]*\|average:inf' | sed 's/average://' | head -1)
-
-  if [[ "$PSNR" == "inf" ]]; then
-    PSNR=100
-  fi
-
-  PASS="✓"
-  if (( $(echo "$PSNR < 25" | bc -l 2>/dev/null || echo 1) )); then
-    PASS="✗"
-    FAILED=$((FAILED + 1))
-  fi
-
-  echo "  ${PASS} checkpoint $i (t=${TIME}s): PSNR=${PSNR}dB"
-  TOTAL_PSNR=$(echo "$TOTAL_PSNR + ${PSNR:-0}" | bc -l 2>/dev/null || echo "$TOTAL_PSNR")
-  CHECKED=$((CHECKED + 1))
-done
-
-AVG_PSNR=$(echo "$TOTAL_PSNR / $CHECKED" | bc -l 2>/dev/null || echo "0")
-echo ""
-echo "[$TEST_NAME] Avg PSNR: ${AVG_PSNR}dB | Failed: ${FAILED}/${CHECKED}"

From e00055f8213aa07954cab7565e43d530d50717db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sat, 11 Apr 2026 14:35:40 +0200
Subject: [PATCH 25/30] docs: add turbo render design spec

Multi-tab parallel capture using noopener windows + BroadcastChannel
for true multi-process SnapDOM parallelism.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../specs/2026-04-11-turbo-render-design.md   | 107 ++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-04-11-turbo-render-design.md

diff --git a/docs/superpowers/specs/2026-04-11-turbo-render-design.md b/docs/superpowers/specs/2026-04-11-turbo-render-design.md
new file mode 100644
index 00000000..383dac95
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-11-turbo-render-design.md
@@ -0,0 +1,107 @@
+# Turbo Render — Multi-Tab Parallel Capture
+
+## Goal
+
+Add a "Turbo" render mode that opens multiple browser tabs (via `window.open` with `noopener`) to achieve true multi-process parallelism for SnapDOM frame capture. Each tab gets its own renderer process with independent main thread + compositor, bypassing the single-thread bottleneck.
+
+## Architecture
+
+```
+Studio (main tab)
+  └── TurboPool (coordinator)
+       ├── BroadcastChannel("hf-turbo-{sessionId}")
+       ├── Opens N worker tabs (noopener, minimized offscreen)
+       ├── Distributes frame ranges to workers
+       ├── Receives PNG-encoded frames via BroadcastChannel
+       ├── Decodes to ImageBitmap → reorder buffer → Encoder (existing Web Worker)
+       └── Falls back to normal IframePool if popups blocked
+
+Worker Tab (×N, separate renderer processes)
+  └── turbo-worker.html
+       ├── Listens on BroadcastChannel
+       ├── Loads composition in hidden iframe (reuses SnapdomFrameSource)
+       ├── Captures assigned frame range
+       └── Sends PNG blob data back to coordinator via BroadcastChannel
+```
+
+## Concurrency Formula
+
+```ts
+const tabCount = Math.max(2, Math.min(Math.floor(navigator.hardwareConcurrency / 2), 6));
+```
+
+- 4-core machine: 2 tabs
+- 8-core machine: 4 tabs
+- 10-core machine: 5 tabs
+- 12+ core machine: 6 tabs (cap)
+
+## Communication Protocol
+
+BroadcastChannel does not support transferable objects (ImageBitmap). Worker tabs encode captured frames as PNG blobs and send the base64 data URL via BroadcastChannel. The coordinator decodes back to ImageBitmap via `createImageBitmap(blob)`. The PNG round-trip adds ~5-10ms per frame but keeps the architecture simple and avoids SharedWorker complexity.
+
+### Coordinator → Worker Messages
+
+```ts
+// Assign work to a specific worker
+{ type: "init", workerId: string, compositionUrl: string, width: number, height: number, dpr: number }
+
+// Capture these frames (contiguous range for this worker)
+{ type: "capture", workerId: string, frames: { index: number, time: number }[] }
+
+// Cancel all work
+{ type: "abort" }
+```
+
+### Worker → Coordinator Messages
+
+```ts
+// Worker initialized, composition loaded, ready for frames
+{ type: "ready", workerId: string }
+
+// One captured frame (PNG blob as ArrayBuffer for efficiency)
+{ type: "frame", workerId: string, index: number, png: ArrayBuffer }
+
+// Worker encountered an error
+{ type: "error", workerId: string, message: string }
+
+// Worker finished all assigned frames
+{ type: "done", workerId: string }
+```
+
+## Files
+
+| File | Purpose |
+|---|---|
+| `src/capture/turbo-pool.ts` | TurboPool class — opens tabs, distributes frames, receives results, reorder buffer |
+| `src/capture/turbo-worker.ts` | Entry point for worker tabs — BroadcastChannel listener, SnapDOM capture loop |
+| `public/turbo-worker.html` | Minimal HTML page that loads the bundled worker script |
+| `src/renderer.ts` | Add `turbo?: boolean` to RenderConfig, wire TurboPool as alternative to IframePool |
+| `src/compat.ts` | Add `isTurboSupported()` — checks BroadcastChannel + popup capability |
+
+## Studio UI
+
+An opt-in "Turbo" toggle (lightning bolt icon) next to the existing Browser export button. When enabled, `useBrowserRender` passes `turbo: true` to the render config.
+
+## Fallback
+
+If `window.open()` returns `null` (popup blocked), TurboPool falls back to normal single-tab IframePool rendering with a console warning. The progress UI is identical in both modes.
+
+## Frame Transfer Format
+
+Worker tabs capture via SnapDOM → canvas → `canvas.toBlob('image/png')` → `ArrayBuffer` via `blob.arrayBuffer()` → send via BroadcastChannel. Coordinator receives ArrayBuffer → `new Blob([data], {type: 'image/png'})` → `createImageBitmap(blob)` → reorder buffer → encoder.
+
+PNG chosen over JPEG for lossless quality. At 1080p, PNG frames are ~2-4MB each, well within BroadcastChannel limits.
+
+## Expected Performance
+
+- Normal mode: ~3-4 FPS (single main thread)
+- Turbo mode (4 tabs): ~12-16 FPS (~4x speedup)
+- Turbo mode (6 tabs): ~18-24 FPS (~6x speedup)
+- 30s 1080p composition: ~4 min normal → ~1 min turbo (4 tabs)
+
+## Limitations
+
+- Popup blockers may prevent tab creation (graceful fallback)
+- Each tab uses ~50-100MB RAM (4 tabs = 200-400MB extra)
+- Worker tabs appear briefly before being positioned offscreen
+- Audio mixing still happens in the coordinator tab (not parallelized, but is fast)

From 04b4eee462ac174d4c7873d4277e601d0dbbedf1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sat, 11 Apr 2026 14:42:23 +0200
Subject: [PATCH 26/30] =?UTF-8?q?feat(renderer):=20add=20turbo=20render=20?=
 =?UTF-8?q?mode=20=E2=80=94=20multi-tab=20parallel=20capture?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Opens N browser tabs (via window.open with noopener) for true
multi-process parallelism. Each tab gets its own Chromium renderer
process with independent main thread, bypassing the single-thread
SnapDOM bottleneck.

Architecture:
- TurboPool coordinator opens N minimized offscreen tabs
- Each tab loads composition via SnapdomFrameSource independently
- Frames captured as PNG, sent via BroadcastChannel to coordinator
- Coordinator decodes to ImageBitmap, feeds reorder buffer + encoder
- Concurrency: min(cores/2, 6), capped at 6 tabs
- Falls back to normal IframePool if popups blocked

Also:
- Add turbo toggle (lightning bolt) to Studio render UI
- Add /api/projects/:id/renders/upload endpoint for saving
  browser-rendered videos to project renders directory
- Export isTurboSupported() from @hyperframes/renderer

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../specs/2026-04-11-turbo-render-design.md   | 107 ---------
 packages/core/src/studio-api/routes/render.ts |  44 ++++
 packages/renderer/public/turbo-worker.html    |  10 +
 packages/renderer/src/capture/turbo-pool.ts   | 226 ++++++++++++++++++
 packages/renderer/src/capture/turbo-worker.ts | 141 +++++++++++
 packages/renderer/src/compat.ts               |   6 +
 packages/renderer/src/index.ts                |   2 +-
 packages/renderer/src/renderer.ts             |  72 ++++++
 packages/renderer/src/types.ts                |   4 +
 packages/studio/src/App.tsx                   |   2 +
 .../src/components/renders/RenderQueue.tsx    |  24 ++
 .../components/renders/useBrowserRender.ts    |  33 ++-
 12 files changed, 551 insertions(+), 120 deletions(-)
 delete mode 100644 docs/superpowers/specs/2026-04-11-turbo-render-design.md
 create mode 100644 packages/renderer/public/turbo-worker.html
 create mode 100644 packages/renderer/src/capture/turbo-pool.ts
 create mode 100644 packages/renderer/src/capture/turbo-worker.ts

diff --git a/docs/superpowers/specs/2026-04-11-turbo-render-design.md b/docs/superpowers/specs/2026-04-11-turbo-render-design.md
deleted file mode 100644
index 383dac95..00000000
--- a/docs/superpowers/specs/2026-04-11-turbo-render-design.md
+++ /dev/null
@@ -1,107 +0,0 @@
-# Turbo Render — Multi-Tab Parallel Capture
-
-## Goal
-
-Add a "Turbo" render mode that opens multiple browser tabs (via `window.open` with `noopener`) to achieve true multi-process parallelism for SnapDOM frame capture. Each tab gets its own renderer process with independent main thread + compositor, bypassing the single-thread bottleneck.
-
-## Architecture
-
-```
-Studio (main tab)
-  └── TurboPool (coordinator)
-       ├── BroadcastChannel("hf-turbo-{sessionId}")
-       ├── Opens N worker tabs (noopener, minimized offscreen)
-       ├── Distributes frame ranges to workers
-       ├── Receives PNG-encoded frames via BroadcastChannel
-       ├── Decodes to ImageBitmap → reorder buffer → Encoder (existing Web Worker)
-       └── Falls back to normal IframePool if popups blocked
-
-Worker Tab (×N, separate renderer processes)
-  └── turbo-worker.html
-       ├── Listens on BroadcastChannel
-       ├── Loads composition in hidden iframe (reuses SnapdomFrameSource)
-       ├── Captures assigned frame range
-       └── Sends PNG blob data back to coordinator via BroadcastChannel
-```
-
-## Concurrency Formula
-
-```ts
-const tabCount = Math.max(2, Math.min(Math.floor(navigator.hardwareConcurrency / 2), 6));
-```
-
-- 4-core machine: 2 tabs
-- 8-core machine: 4 tabs
-- 10-core machine: 5 tabs
-- 12+ core machine: 6 tabs (cap)
-
-## Communication Protocol
-
-BroadcastChannel does not support transferable objects (ImageBitmap). Worker tabs encode captured frames as PNG blobs and send the base64 data URL via BroadcastChannel. The coordinator decodes back to ImageBitmap via `createImageBitmap(blob)`. The PNG round-trip adds ~5-10ms per frame but keeps the architecture simple and avoids SharedWorker complexity.
-
-### Coordinator → Worker Messages
-
-```ts
-// Assign work to a specific worker
-{ type: "init", workerId: string, compositionUrl: string, width: number, height: number, dpr: number }
-
-// Capture these frames (contiguous range for this worker)
-{ type: "capture", workerId: string, frames: { index: number, time: number }[] }
-
-// Cancel all work
-{ type: "abort" }
-```
-
-### Worker → Coordinator Messages
-
-```ts
-// Worker initialized, composition loaded, ready for frames
-{ type: "ready", workerId: string }
-
-// One captured frame (PNG blob as ArrayBuffer for efficiency)
-{ type: "frame", workerId: string, index: number, png: ArrayBuffer }
-
-// Worker encountered an error
-{ type: "error", workerId: string, message: string }
-
-// Worker finished all assigned frames
-{ type: "done", workerId: string }
-```
-
-## Files
-
-| File | Purpose |
-|---|---|
-| `src/capture/turbo-pool.ts` | TurboPool class — opens tabs, distributes frames, receives results, reorder buffer |
-| `src/capture/turbo-worker.ts` | Entry point for worker tabs — BroadcastChannel listener, SnapDOM capture loop |
-| `public/turbo-worker.html` | Minimal HTML page that loads the bundled worker script |
-| `src/renderer.ts` | Add `turbo?: boolean` to RenderConfig, wire TurboPool as alternative to IframePool |
-| `src/compat.ts` | Add `isTurboSupported()` — checks BroadcastChannel + popup capability |
-
-## Studio UI
-
-An opt-in "Turbo" toggle (lightning bolt icon) next to the existing Browser export button. When enabled, `useBrowserRender` passes `turbo: true` to the render config.
-
-## Fallback
-
-If `window.open()` returns `null` (popup blocked), TurboPool falls back to normal single-tab IframePool rendering with a console warning. The progress UI is identical in both modes.
-
-## Frame Transfer Format
-
-Worker tabs capture via SnapDOM → canvas → `canvas.toBlob('image/png')` → `ArrayBuffer` via `blob.arrayBuffer()` → send via BroadcastChannel. Coordinator receives ArrayBuffer → `new Blob([data], {type: 'image/png'})` → `createImageBitmap(blob)` → reorder buffer → encoder.
-
-PNG chosen over JPEG for lossless quality. At 1080p, PNG frames are ~2-4MB each, well within BroadcastChannel limits.
-
-## Expected Performance
-
-- Normal mode: ~3-4 FPS (single main thread)
-- Turbo mode (4 tabs): ~12-16 FPS (~4x speedup)
-- Turbo mode (6 tabs): ~18-24 FPS (~6x speedup)
-- 30s 1080p composition: ~4 min normal → ~1 min turbo (4 tabs)
-
-## Limitations
-
-- Popup blockers may prevent tab creation (graceful fallback)
-- Each tab uses ~50-100MB RAM (4 tabs = 200-400MB extra)
-- Worker tabs appear briefly before being positioned offscreen
-- Audio mixing still happens in the coordinator tab (not parallelized, but is fast)
diff --git a/packages/core/src/studio-api/routes/render.ts b/packages/core/src/studio-api/routes/render.ts
index f21fc433..4948e8a1 100644
--- a/packages/core/src/studio-api/routes/render.ts
+++ b/packages/core/src/studio-api/routes/render.ts
@@ -216,6 +216,50 @@ export function registerRenderRoutes(api: Hono, adapter: StudioApiAdapter): void
     });
   });
 
+  // Upload a browser-rendered video (client-side renderer posts the blob here)
+  api.post("/projects/:id/renders/upload", async (c) => {
+    const project = await adapter.resolveProject(c.req.param("id"));
+    if (!project) return c.json({ error: "not found" }, 404);
+
+    const rendersDir = adapter.rendersDir(project);
+    if (!existsSync(rendersDir)) mkdirSync(rendersDir, { recursive: true });
+
+    const body = await c.req.arrayBuffer();
+    if (!body || body.byteLength === 0) {
+      return c.json({ error: "empty body" }, 400);
+    }
+
+    const format = c.req.query("format") ?? "mp4";
+    const now = new Date();
+    const datePart = now.toISOString().slice(0, 10);
+    const timePart = now.toTimeString().slice(0, 8).replace(/:/g, "-");
+    const jobId = `${project.id}_browser_${datePart}_${timePart}`;
+    const ext = format === "webm" ? ".webm" : ".mp4";
+    const outputPath = join(rendersDir, `${jobId}${ext}`);
+
+    const { writeFileSync: writeFile } = await import("node:fs");
+    writeFile(outputPath, Buffer.from(body));
+    writeFile(
+      outputPath.replace(/\.(mp4|webm)$/, ".meta.json"),
+      JSON.stringify({
+        status: "complete",
+        source: "browser",
+        durationMs: Number(c.req.query("durationMs") ?? 0),
+      }),
+    );
+
+    // Register in job store so it shows in the renders list
+    renderJobs.set(jobId, {
+      id: jobId,
+      status: "complete",
+      progress: 100,
+      outputPath,
+      createdAt: Date.now(),
+    } as RenderJobState & { createdAt: number });
+
+    return c.json({ jobId, filename: `${jobId}${ext}`, size: body.byteLength });
+  });
+
   // List renders
   api.get("/projects/:id/renders", async (c) => {
     const project = await adapter.resolveProject(c.req.param("id"));
diff --git a/packages/renderer/public/turbo-worker.html b/packages/renderer/public/turbo-worker.html
new file mode 100644
index 00000000..e64dc004
--- /dev/null
+++ b/packages/renderer/public/turbo-worker.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Turbo Worker</title>
+</head>
+<body>
+<script type="module" src="./turbo-worker.bundle.js"></script>
+</body>
+</html>
diff --git a/packages/renderer/src/capture/turbo-pool.ts b/packages/renderer/src/capture/turbo-pool.ts
new file mode 100644
index 00000000..e76b5551
--- /dev/null
+++ b/packages/renderer/src/capture/turbo-pool.ts
@@ -0,0 +1,226 @@
+/**
+ * Turbo Pool — Multi-Tab Parallel Capture
+ *
+ * Opens N browser tabs (via window.open with noopener) to achieve
+ * true multi-process parallelism for SnapDOM frame capture. Each tab
+ * runs in its own Chromium renderer process with independent main thread.
+ *
+ * Communication via BroadcastChannel. Frames are PNG-encoded since
+ * BroadcastChannel doesn't support transferable ImageBitmaps.
+ */
+
+import type { HfMediaElement } from "../types.js";
+import { distributeFrames } from "../utils/timing.js";
+
+export interface TurboPoolConfig {
+  compositionUrl: string;
+  width: number;
+  height: number;
+  devicePixelRatio?: number;
+  concurrency: number;
+  /** URL to the turbo-worker.html page that loads the worker script */
+  turboWorkerUrl: string;
+}
+
+export interface TurboCapturedFrame {
+  bitmap: ImageBitmap;
+  index: number;
+}
+
+interface WorkerState {
+  id: string;
+  window: Window | null;
+  ready: boolean;
+  done: boolean;
+  error?: string;
+}
+
+export function calculateTurboConcurrency(): number {
+  const cores = typeof navigator !== "undefined" ? navigator.hardwareConcurrency : 4;
+  return Math.max(2, Math.min(Math.floor(cores / 2), 6));
+}
+
+export class TurboPool {
+  private workers: WorkerState[] = [];
+  private channel: BroadcastChannel | null = null;
+  private sessionId = crypto.randomUUID().slice(0, 8);
+  private config: TurboPoolConfig | null = null;
+
+  get supported(): boolean {
+    return typeof BroadcastChannel !== "undefined" && typeof window?.open === "function";
+  }
+
+  async init(config: TurboPoolConfig): Promise<{ duration: number; media: HfMediaElement[] }> {
+    this.config = config;
+    const channelName = `hf-turbo-${this.sessionId}`;
+    this.channel = new BroadcastChannel(channelName);
+
+    // Open worker tabs
+    const workerPromises: Promise<void>[] = [];
+
+    for (let i = 0; i < config.concurrency; i++) {
+      const workerId = `w${i}-${this.sessionId}`;
+      const workerUrl = `${config.turboWorkerUrl}?channel=${encodeURIComponent(channelName)}&workerId=${encodeURIComponent(workerId)}`;
+
+      const win = window.open(
+        workerUrl,
+        "_blank",
+        `noopener,width=1,height=1,left=-9999,top=-9999`,
+      );
+
+      if (!win) {
+        // Popup blocked — clean up and signal failure
+        await this.dispose();
+        throw new Error("POPUP_BLOCKED");
+      }
+
+      const worker: WorkerState = { id: workerId, window: win, ready: false, done: false };
+      this.workers.push(worker);
+
+      // Wait for this worker to report ready
+      workerPromises.push(
+        new Promise<void>((resolve, reject) => {
+          const timeout = setTimeout(
+            () => reject(new Error(`Worker ${workerId} init timeout`)),
+            30_000,
+          );
+
+          const onMessage = (e: MessageEvent) => {
+            if (e.data?.workerId !== workerId) return;
+            if (e.data.type === "ready") {
+              worker.ready = true;
+              clearTimeout(timeout);
+              this.channel!.removeEventListener("message", onMessage);
+              resolve();
+            } else if (e.data.type === "error") {
+              clearTimeout(timeout);
+              this.channel!.removeEventListener("message", onMessage);
+              reject(new Error(e.data.message));
+            }
+          };
+          this.channel!.addEventListener("message", onMessage);
+        }),
+      );
+
+      // Send init message to this worker
+      this.channel.postMessage({
+        type: "init",
+        workerId,
+        compositionUrl: config.compositionUrl,
+        width: config.width,
+        height: config.height,
+        dpr: config.devicePixelRatio ?? 1,
+      });
+    }
+
+    // Wait for all workers to initialize
+    await Promise.all(workerPromises);
+
+    // Get duration from the first worker's ready message
+    // (we need a separate query — workers report duration in their ready message)
+    // For now, init a temporary local source to get duration/media
+    const { SnapdomFrameSource } = await import("../sources/snapdom.js");
+    const tempSource = new SnapdomFrameSource();
+    await tempSource.init({
+      compositionUrl: config.compositionUrl,
+      width: config.width,
+      height: config.height,
+      devicePixelRatio: config.devicePixelRatio,
+    });
+    const duration = tempSource.duration;
+    const media = [...tempSource.media];
+    await tempSource.dispose();
+
+    return { duration, media };
+  }
+
+  async captureAll(
+    frameTimes: number[],
+    onFrame: (frame: TurboCapturedFrame) => void,
+    signal?: AbortSignal,
+  ): Promise<void> {
+    if (!this.channel || this.workers.length === 0) {
+      throw new Error("TurboPool not initialized");
+    }
+
+    const ranges = distributeFrames(frameTimes.length, this.workers.length);
+    const channel = this.channel;
+    let receivedCount = 0;
+    const totalExpected = frameTimes.length;
+
+    return new Promise<void>((resolve, reject) => {
+      const onAbort = () => {
+        channel.postMessage({ type: "abort" });
+        cleanup();
+        resolve();
+      };
+      signal?.addEventListener("abort", onAbort, { once: true });
+
+      const cleanup = () => {
+        channel.removeEventListener("message", handleMessage);
+        signal?.removeEventListener("abort", onAbort);
+      };
+
+      const handleMessage = async (e: MessageEvent) => {
+        const msg = e.data;
+        if (!msg?.workerId) return;
+
+        if (msg.type === "frame") {
+          try {
+            // Decode PNG ArrayBuffer → ImageBitmap
+            const blob = new Blob([msg.png], { type: "image/png" });
+            const bitmap = await createImageBitmap(blob);
+            onFrame({ bitmap, index: msg.index });
+            receivedCount++;
+
+            if (receivedCount >= totalExpected) {
+              cleanup();
+              resolve();
+            }
+          } catch (err) {
+            cleanup();
+            reject(err instanceof Error ? err : new Error(String(err)));
+          }
+        } else if (msg.type === "error") {
+          cleanup();
+          reject(new Error(`Worker ${msg.workerId}: ${msg.message}`));
+        }
+      };
+
+      channel.addEventListener("message", handleMessage);
+
+      // Send capture assignments to each worker
+      for (let i = 0; i < ranges.length; i++) {
+        const range = ranges[i]!;
+        const worker = this.workers[i]!;
+        const frames: { index: number; time: number }[] = [];
+        for (let j = range.start; j <= range.end; j++) {
+          frames.push({ index: j, time: frameTimes[j]! });
+        }
+        channel.postMessage({
+          type: "capture",
+          workerId: worker.id,
+          frames,
+        });
+      }
+    });
+  }
+
+  async dispose(): Promise<void> {
+    if (this.channel) {
+      this.channel.postMessage({ type: "abort" });
+      this.channel.close();
+      this.channel = null;
+    }
+    // Close worker windows
+    for (const worker of this.workers) {
+      try {
+        worker.window?.close();
+      } catch {
+        // noopener windows may not be closeable
+      }
+    }
+    this.workers = [];
+    this.config = null;
+  }
+}
diff --git a/packages/renderer/src/capture/turbo-worker.ts b/packages/renderer/src/capture/turbo-worker.ts
new file mode 100644
index 00000000..5998575e
--- /dev/null
+++ b/packages/renderer/src/capture/turbo-worker.ts
@@ -0,0 +1,141 @@
+/**
+ * Turbo Render — Worker Tab Entry Point
+ *
+ * This script runs in each worker tab opened by TurboPool.
+ * It listens on a BroadcastChannel for frame capture assignments,
+ * loads the composition via SnapdomFrameSource, captures frames,
+ * and sends PNG-encoded results back to the coordinator.
+ *
+ * Each worker tab runs in its own renderer process (thanks to
+ * `noopener`), giving true multi-process parallelism.
+ */
+
+import { SnapdomFrameSource } from "../sources/snapdom.js";
+
+interface InitMessage {
+  type: "init";
+  workerId: string;
+  compositionUrl: string;
+  width: number;
+  height: number;
+  dpr: number;
+}
+
+interface CaptureMessage {
+  type: "capture";
+  workerId: string;
+  frames: { index: number; time: number }[];
+}
+
+interface AbortMessage {
+  type: "abort";
+}
+
+type CoordinatorMessage = InitMessage | CaptureMessage | AbortMessage;
+
+const CHANNEL_NAME = new URLSearchParams(location.search).get("channel");
+if (!CHANNEL_NAME) {
+  document.title = "ERROR: missing channel param";
+  throw new Error("Turbo worker requires ?channel= query param");
+}
+
+const WORKER_ID = new URLSearchParams(location.search).get("workerId") ?? crypto.randomUUID();
+const channel = new BroadcastChannel(CHANNEL_NAME);
+let source: SnapdomFrameSource | null = null;
+let aborted = false;
+
+channel.onmessage = async (e: MessageEvent<CoordinatorMessage>) => {
+  const msg = e.data;
+
+  // Only handle messages addressed to this worker (or broadcast)
+  if ("workerId" in msg && msg.workerId !== WORKER_ID) return;
+
+  if (msg.type === "abort") {
+    aborted = true;
+    await cleanup();
+    return;
+  }
+
+  if (msg.type === "init") {
+    try {
+      source = new SnapdomFrameSource();
+      await source.init({
+        compositionUrl: msg.compositionUrl,
+        width: msg.width,
+        height: msg.height,
+        devicePixelRatio: msg.dpr,
+      });
+      channel.postMessage({ type: "ready", workerId: WORKER_ID, duration: source.duration });
+    } catch (err) {
+      channel.postMessage({
+        type: "error",
+        workerId: WORKER_ID,
+        message: err instanceof Error ? err.message : String(err),
+      });
+    }
+    return;
+  }
+
+  if (msg.type === "capture") {
+    if (!source) {
+      channel.postMessage({
+        type: "error",
+        workerId: WORKER_ID,
+        message: "Not initialized",
+      });
+      return;
+    }
+
+    try {
+      for (const frame of msg.frames) {
+        if (aborted) break;
+
+        const bitmap = await source.capture(frame.time);
+
+        // Convert ImageBitmap → PNG ArrayBuffer (BroadcastChannel can't transfer ImageBitmap)
+        const canvas = document.createElement("canvas");
+        canvas.width = bitmap.width;
+        canvas.height = bitmap.height;
+        const ctx = canvas.getContext("2d")!;
+        ctx.drawImage(bitmap, 0, 0);
+        bitmap.close();
+
+        const blob = await new Promise<Blob>((resolve) =>
+          canvas.toBlob((b) => resolve(b!), "image/png"),
+        );
+        const buffer = await blob.arrayBuffer();
+
+        channel.postMessage({
+          type: "frame",
+          workerId: WORKER_ID,
+          index: frame.index,
+          png: buffer,
+        });
+
+        // Yield to keep the tab responsive
+        await new Promise<void>((r) => setTimeout(r, 0));
+      }
+
+      channel.postMessage({ type: "done", workerId: WORKER_ID });
+    } catch (err) {
+      channel.postMessage({
+        type: "error",
+        workerId: WORKER_ID,
+        message: err instanceof Error ? err.message : String(err),
+      });
+    }
+    return;
+  }
+};
+
+async function cleanup(): Promise<void> {
+  if (source) {
+    await source.dispose();
+    source = null;
+  }
+  channel.close();
+  window.close();
+}
+
+// Signal that the worker tab script has loaded
+document.title = `turbo-worker:${WORKER_ID}`;
diff --git a/packages/renderer/src/compat.ts b/packages/renderer/src/compat.ts
index 419e630a..07fc2ed3 100644
--- a/packages/renderer/src/compat.ts
+++ b/packages/renderer/src/compat.ts
@@ -11,6 +11,12 @@ export function isSupported(): boolean {
   );
 }
 
+export function isTurboSupported(): boolean {
+  return (
+    typeof BroadcastChannel !== "undefined" && typeof window?.open === "function" && isSupported()
+  );
+}
+
 export function detectBestFrameSource(): "draw-element-image" | "tab-capture" | "snapdom" {
   if (
     typeof CanvasRenderingContext2D !== "undefined" &&
diff --git a/packages/renderer/src/index.ts b/packages/renderer/src/index.ts
index 0dbdd5cc..374574bc 100644
--- a/packages/renderer/src/index.ts
+++ b/packages/renderer/src/index.ts
@@ -9,7 +9,7 @@
 import { HyperframesRenderer } from "./renderer.js";
 import type { RenderConfig, RenderResult } from "./types.js";
 
-export { isSupported, detectBestFrameSource } from "./compat.js";
+export { isSupported, isTurboSupported, detectBestFrameSource } from "./compat.js";
 export { HyperframesRenderer, CancelledError } from "./renderer.js";
 export { SnapdomFrameSource } from "./sources/snapdom.js";
 export { TabCaptureFrameSource, isTabCaptureSupported } from "./sources/tab-capture.js";
diff --git a/packages/renderer/src/renderer.ts b/packages/renderer/src/renderer.ts
index 8c7aedc0..7683678b 100644
--- a/packages/renderer/src/renderer.ts
+++ b/packages/renderer/src/renderer.ts
@@ -7,6 +7,7 @@
  */
 
 import { calculateConcurrency, IframePool } from "./capture/iframe-pool.js";
+import { TurboPool, calculateTurboConcurrency } from "./capture/turbo-pool.js";
 import { Encoder } from "./encoding/encoder.js";
 import { SnapdomFrameSource } from "./sources/snapdom.js";
 import { TabCaptureFrameSource, isTabCaptureSupported } from "./sources/tab-capture.js";
@@ -58,6 +59,7 @@ export class HyperframesRenderer {
   private config: RenderConfig;
   private cancelled = false;
   private pool: IframePool | null = null;
+  private turboPool: TurboPool | null = null;
   private tabCapture: TabCaptureFrameSource | null = null;
   private encoder: Encoder | null = null;
   private abortController: AbortController | null = null;
@@ -137,6 +139,46 @@ export class HyperframesRenderer {
       });
       duration = source.duration;
       media = source.media;
+    } else if (this.config.turbo && this.config.turboWorkerUrl) {
+      // Turbo mode: multi-tab parallel capture via separate renderer processes
+      const turbo = new TurboPool();
+      if (!turbo.supported) {
+        throw new Error("Turbo render requires BroadcastChannel support");
+      }
+      this.turboPool = turbo;
+      const turboConcurrency = calculateTurboConcurrency();
+      try {
+        const result = await turbo.init({
+          compositionUrl: this.config.composition,
+          width,
+          height,
+          devicePixelRatio,
+          concurrency: turboConcurrency,
+          turboWorkerUrl: this.config.turboWorkerUrl,
+        });
+        duration = result.duration;
+        media = result.media;
+      } catch (err) {
+        // Popup blocked — fall back to normal iframe pool
+        if (err instanceof Error && err.message === "POPUP_BLOCKED") {
+          console.warn("[Renderer] Turbo mode failed (popup blocked), falling back to normal mode");
+          this.turboPool = null;
+          const pool = new IframePool();
+          this.pool = pool;
+          const result = await pool.init({
+            compositionUrl: this.config.composition,
+            width,
+            height,
+            devicePixelRatio,
+            concurrency,
+            createFrameSource: () => new SnapdomFrameSource(),
+          });
+          duration = result.duration;
+          media = result.media;
+        } else {
+          throw err;
+        }
+      }
     } else {
       // Iframe pool mode: parallel capture via SnapDOM
       const pool = new IframePool();
@@ -254,6 +296,31 @@ export class HyperframesRenderer {
           captureRate: progressTracker.captureRate(),
         });
       }
+    } else if (this.turboPool) {
+      // Turbo mode: multi-tab parallel capture with reorder buffer
+      await this.turboPool.captureAll(
+        frameTimes,
+        ({ bitmap, index }) => {
+          if (this.cancelled) {
+            bitmap.close();
+            return;
+          }
+          reorderBuffer.set(index, bitmap);
+          capturedCount++;
+          progressTracker.recordFrame(capturedCount, performance.now() - captureStart);
+          report({
+            stage: "capturing",
+            progress: 0.05 + (capturedCount / totalFrames) * 0.45,
+            currentFrame: capturedCount,
+            totalFrames,
+            estimatedTimeRemaining: progressTracker.estimateTimeRemaining(),
+            captureRate: progressTracker.captureRate(),
+          });
+          flushBuffer();
+        },
+        abortController.signal,
+      );
+      flushBuffer();
     } else if (this.pool) {
       // Iframe pool mode: parallel capture with reorder buffer
       await this.pool.captureAll(
@@ -306,6 +373,10 @@ export class HyperframesRenderer {
       await this.pool.dispose();
       this.pool = null;
     }
+    if (this.turboPool) {
+      await this.turboPool.dispose();
+      this.turboPool = null;
+    }
 
     this.throwIfCancelled();
 
@@ -366,6 +437,7 @@ export class HyperframesRenderer {
   private throwIfCancelled(): void {
     if (this.cancelled) {
       this.pool?.dispose().catch(() => {});
+      this.turboPool?.dispose().catch(() => {});
       this.tabCapture?.dispose().catch(() => {});
       this.encoder?.dispose();
       throw new CancelledError();
diff --git a/packages/renderer/src/types.ts b/packages/renderer/src/types.ts
index feeb4283..d71c5330 100644
--- a/packages/renderer/src/types.ts
+++ b/packages/renderer/src/types.ts
@@ -91,6 +91,10 @@ export interface RenderConfig {
   onProgress?: (progress: RenderProgress) => void;
   frameSource?: "tab-capture" | "snapdom" | "draw-element-image";
   workerUrl?: URL | string;
+  /** Enable turbo mode: opens multiple browser tabs for parallel capture. */
+  turbo?: boolean;
+  /** URL to the turbo-worker.html page (required when turbo=true). */
+  turboWorkerUrl?: string;
 }
 
 export interface RenderProgress {
diff --git a/packages/studio/src/App.tsx b/packages/studio/src/App.tsx
index 3e7ec9a7..67670b2b 100644
--- a/packages/studio/src/App.tsx
+++ b/packages/studio/src/App.tsx
@@ -900,6 +900,8 @@ export function StudioApp() {
                   onStartBrowserRender={browserRender.startBrowserRender}
                   isBrowserRendering={browserRender.isRendering}
                   browserJob={browserRender.job}
+                  turboEnabled={browserRender.turboEnabled}
+                  onTurboToggle={browserRender.setTurboEnabled}
                 />
               )}
             </div>
diff --git a/packages/studio/src/components/renders/RenderQueue.tsx b/packages/studio/src/components/renders/RenderQueue.tsx
index 8949484e..303f7743 100644
--- a/packages/studio/src/components/renders/RenderQueue.tsx
+++ b/packages/studio/src/components/renders/RenderQueue.tsx
@@ -12,6 +12,8 @@ interface RenderQueueProps {
   onStartBrowserRender?: (format: "mp4" | "webm") => void;
   isBrowserRendering?: boolean;
   browserJob?: RenderJob | null;
+  turboEnabled?: boolean;
+  onTurboToggle?: (enabled: boolean) => void;
 }
 
 function FormatExportButton({
@@ -19,11 +21,15 @@ function FormatExportButton({
   isRendering,
   onStartBrowserRender,
   isBrowserRendering,
+  turboEnabled,
+  onTurboToggle,
 }: {
   onStartRender: (format: "mp4" | "webm" | "mov") => void;
   isRendering: boolean;
   onStartBrowserRender?: (format: "mp4" | "webm") => void;
   isBrowserRendering?: boolean;
+  turboEnabled?: boolean;
+  onTurboToggle?: (enabled: boolean) => void;
 }) {
   const [format, setFormat] = useState<"mp4" | "webm" | "mov">("mp4");
   const anyRendering = isRendering || isBrowserRendering;
@@ -58,6 +64,20 @@ function FormatExportButton({
           {isBrowserRendering ? "Exporting..." : "Browser"}
         </button>
       )}
+      {onTurboToggle && (
+        <button
+          onClick={() => onTurboToggle(!turboEnabled)}
+          disabled={anyRendering}
+          title={turboEnabled ? "Turbo: ON (multi-tab parallel)" : "Turbo: OFF (single tab)"}
+          className={`flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-semibold rounded transition-colors disabled:opacity-50 ${
+            turboEnabled
+              ? "bg-amber-500 text-black hover:bg-amber-400"
+              : "bg-neutral-700 text-neutral-400 hover:bg-neutral-600"
+          }`}
+        >
+          &#x26A1; {turboEnabled ? "Turbo" : "Turbo"}
+        </button>
+      )}
     </div>
   );
 }
@@ -72,6 +92,8 @@ export const RenderQueue = memo(function RenderQueue({
   onStartBrowserRender,
   isBrowserRendering,
   browserJob,
+  turboEnabled,
+  onTurboToggle,
 }: RenderQueueProps) {
   const listRef = useRef<HTMLDivElement>(null);
 
@@ -106,6 +128,8 @@ export const RenderQueue = memo(function RenderQueue({
             isRendering={isRendering}
             onStartBrowserRender={onStartBrowserRender}
             isBrowserRendering={isBrowserRendering}
+            turboEnabled={turboEnabled}
+            onTurboToggle={onTurboToggle}
           />
         </div>
       </div>
diff --git a/packages/studio/src/components/renders/useBrowserRender.ts b/packages/studio/src/components/renders/useBrowserRender.ts
index e4f699f1..056a5e79 100644
--- a/packages/studio/src/components/renders/useBrowserRender.ts
+++ b/packages/studio/src/components/renders/useBrowserRender.ts
@@ -4,6 +4,7 @@ import type { RenderJob } from "./useRenderQueue";
 export function useBrowserRender(projectId: string | null) {
   const [isRendering, setIsRendering] = useState(false);
   const [job, setJob] = useState<RenderJob | null>(null);
+  const [turboEnabled, setTurboEnabled] = useState(false);
 
   const startBrowserRender = useCallback(
     async (format: "mp4" | "webm" = "mp4") => {
@@ -12,23 +13,26 @@ export function useBrowserRender(projectId: string | null) {
 
       const jobId = crypto.randomUUID();
       const startTime = Date.now();
+      const mode = turboEnabled ? "turbo" : "browser";
       setJob({
         id: jobId,
         status: "rendering",
         progress: 0,
         stage: "initializing",
-        filename: `browser-export.${format}`,
+        filename: `${mode}-export.${format}`,
         createdAt: startTime,
       });
 
       try {
-        const { render, isSupported } = await import("@hyperframes/renderer");
+        const { render, isSupported, isTurboSupported } = await import("@hyperframes/renderer");
         if (!isSupported()) {
           throw new Error(
             "Browser does not support WebCodecs. Use Chrome 94+, Firefox 130+, or Safari 26+.",
           );
         }
 
+        const useTurbo = turboEnabled && isTurboSupported();
+
         const result = await render({
           composition: `/api/projects/${projectId}/preview`,
           format,
@@ -37,6 +41,10 @@ export function useBrowserRender(projectId: string | null) {
           frameSource: "snapdom",
           concurrency: 1,
           workerUrl: "/node_modules/@hyperframes/renderer/dist/worker.bundle.js",
+          turbo: useTurbo,
+          turboWorkerUrl: useTurbo
+            ? "/node_modules/@hyperframes/renderer/dist/turbo-worker.html"
+            : undefined,
           onProgress: (p) => {
             setJob((prev) =>
               prev
@@ -50,13 +58,13 @@ export function useBrowserRender(projectId: string | null) {
           },
         });
 
-        // Trigger download
-        const url = URL.createObjectURL(result.blob);
-        const a = document.createElement("a");
-        a.href = url;
-        a.download = `export.${format}`;
-        a.click();
-        URL.revokeObjectURL(url);
+        // Save to project renders directory (same as server-side renders)
+        const durationMs = Date.now() - startTime;
+        const uploadRes = await fetch(
+          `/api/projects/${projectId}/renders/upload?format=${format}&durationMs=${durationMs}`,
+          { method: "POST", body: result.blob },
+        );
+        const uploadData = await uploadRes.json();
 
         setJob((prev) =>
           prev
@@ -64,7 +72,8 @@ export function useBrowserRender(projectId: string | null) {
                 ...prev,
                 status: "complete",
                 progress: 100,
-                durationMs: Date.now() - startTime,
+                durationMs,
+                filename: uploadData.filename ?? `export.${format}`,
               }
             : prev,
         );
@@ -82,8 +91,8 @@ export function useBrowserRender(projectId: string | null) {
         setIsRendering(false);
       }
     },
-    [projectId, isRendering],
+    [projectId, isRendering, turboEnabled],
   );
 
-  return { isRendering, job, startBrowserRender };
+  return { isRendering, job, startBrowserRender, turboEnabled, setTurboEnabled };
 }

From 18a4a2dd9c9c16c31b802a0202eb3f2fd8689267 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sat, 11 Apr 2026 14:49:16 +0200
Subject: [PATCH 27/30] fix(studio): read POST body as Buffer to preserve
 binary video uploads

The Vite middleware was reading request bodies as UTF-8 strings,
corrupting binary data from the browser renderer's blob upload.
Changed to Buffer.concat() for binary-safe body reading.

Also adds error handling for failed upload responses.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/renders/useBrowserRender.ts     |  3 +++
 packages/studio/vite.config.ts                     | 14 +++++++-------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/studio/src/components/renders/useBrowserRender.ts b/packages/studio/src/components/renders/useBrowserRender.ts
index 056a5e79..2c9c3e7e 100644
--- a/packages/studio/src/components/renders/useBrowserRender.ts
+++ b/packages/studio/src/components/renders/useBrowserRender.ts
@@ -64,6 +64,9 @@ export function useBrowserRender(projectId: string | null) {
           `/api/projects/${projectId}/renders/upload?format=${format}&durationMs=${durationMs}`,
           { method: "POST", body: result.blob },
         );
+        if (!uploadRes.ok) {
+          throw new Error(`Failed to save render: ${uploadRes.status}`);
+        }
         const uploadData = await uploadRes.json();
 
         setJob((prev) =>
diff --git a/packages/studio/vite.config.ts b/packages/studio/vite.config.ts
index 85eee3dd..4caf8ab6 100644
--- a/packages/studio/vite.config.ts
+++ b/packages/studio/vite.config.ts
@@ -355,13 +355,13 @@ function devProjectApi(): Plugin {
           // Strip /api prefix — shared module routes are relative
           url.pathname = url.pathname.slice(4);
 
-          // Read body for non-GET/HEAD
-          let body: string | undefined;
+          // Read body for non-GET/HEAD — as Buffer to preserve binary data (video uploads)
+          let body: Buffer | undefined;
           if (req.method !== "GET" && req.method !== "HEAD") {
-            body = await new Promise<string>((resolve) => {
-              let data = "";
-              req.on("data", (chunk: Buffer) => (data += chunk.toString()));
-              req.on("end", () => resolve(data));
+            body = await new Promise<Buffer>((resolve) => {
+              const chunks: Buffer[] = [];
+              req.on("data", (chunk: Buffer) => chunks.push(chunk));
+              req.on("end", () => resolve(Buffer.concat(chunks)));
             });
           }
 
@@ -373,7 +373,7 @@ function devProjectApi(): Plugin {
           const fetchReq = new Request(url.toString(), {
             method: req.method,
             headers,
-            body,
+            body: body ?? undefined,
           });
 
           const response = await api.fetch(fetchReq);

From d4774bedf235f81116943359dcbab8f8a619d4c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sat, 11 Apr 2026 16:08:41 +0200
Subject: [PATCH 28/30] fix(renderer): improve warmup for sub-composition fonts
 and GSAP settle

- Seek to 0.1s first to trigger sub-composition iframe loading
- Wait for fonts.ready in all sub-composition iframes (not just main)
- Increase font timeout to 5s for CDN fonts
- Add more settle ticks (10x10ms) for complex GSAP nested timelines
- Double-seek to 0 after warmup for clean first frame
- Increase per-frame yield from 0ms to 4ms for better GSAP sync

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/renderer/src/sources/snapdom.ts | 44 +++++++++++++++++++-----
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/packages/renderer/src/sources/snapdom.ts b/packages/renderer/src/sources/snapdom.ts
index e9aa94b7..7313192b 100644
--- a/packages/renderer/src/sources/snapdom.ts
+++ b/packages/renderer/src/sources/snapdom.ts
@@ -101,8 +101,8 @@ export class SnapdomFrameSource implements FrameSource {
     const doc = this.iframe.contentDocument!;
     void doc.documentElement.offsetHeight;
 
-    // Yield once so any async side-effects (sub-composition syncs) settle.
-    await new Promise<void>((r) => setTimeout(r, 0));
+    // Yield for sub-composition syncs and GSAP nested timeline updates to settle.
+    await new Promise<void>((r) => setTimeout(r, 4));
 
     if (this.videoInjector) {
       await this.videoInjector.injectFrame(time);
@@ -179,22 +179,50 @@ export class SnapdomFrameSource implements FrameSource {
   private async warmup(): Promise<void> {
     if (!this.iframe || !this.hf) return;
 
+    // Seek to a small time first to trigger sub-composition loading,
+    // then seek back to 0 for the actual first frame
+    this.hf.seek(0.1);
+    await new Promise<void>((r) => setTimeout(r, 100));
     this.hf.seek(0);
 
-    // Wait for fonts to load inside the iframe
     const iframeDoc = this.iframe.contentDocument;
+
+    // Wait for fonts in the main iframe
+    const fontPromises: Promise<void>[] = [];
     if (iframeDoc?.fonts) {
+      fontPromises.push(iframeDoc.fonts.ready.then(() => {}).catch(() => {}));
+    }
+
+    // Wait for fonts in all sub-composition iframes
+    const subIframes = iframeDoc?.querySelectorAll("iframe") ?? [];
+    for (const sub of subIframes) {
       try {
-        await Promise.race([iframeDoc.fonts.ready, new Promise<void>((r) => setTimeout(r, 3000))]);
+        const subDoc = (sub as HTMLIFrameElement).contentDocument;
+        if (subDoc?.fonts) {
+          fontPromises.push(subDoc.fonts.ready.then(() => {}).catch(() => {}));
+        }
       } catch {
-        // fonts.ready not available — continue
+        // cross-origin iframe — skip
       }
     }
 
-    // Let GSAP, Lottie, and layout settle — multiple event loop ticks
-    for (let i = 0; i < 5; i++) {
-      await new Promise<void>((r) => setTimeout(r, 0));
+    // Wait for all fonts with a generous timeout (CDN fonts can be slow)
+    await Promise.race([Promise.all(fontPromises), new Promise<void>((r) => setTimeout(r, 5000))]);
+
+    // Force reflow + extra settle time for GSAP, Lottie, layout
+    if (iframeDoc?.documentElement) {
+      void iframeDoc.documentElement.offsetHeight;
+    }
+    for (let i = 0; i < 10; i++) {
+      await new Promise<void>((r) => setTimeout(r, 10));
+    }
+
+    // Seek to 0 once more after everything has settled
+    this.hf.seek(0);
+    if (iframeDoc?.documentElement) {
+      void iframeDoc.documentElement.offsetHeight;
     }
+    await new Promise<void>((r) => setTimeout(r, 50));
   }
 
   private waitForHfProtocol(iframe: HTMLIFrameElement, timeoutMs = 10_000): Promise<HfProtocol> {

From 4992555c27d682740321bd80ee03f098842d43b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sat, 11 Apr 2026 16:16:02 +0200
Subject: [PATCH 29/30] fix(renderer): force reflow on sub-composition iframes
 to prevent position jumps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

After seek, force offsetHeight reflow on all nested iframes (not just
the main document). Sub-compositions have their own GSAP timelines in
separate documents — without reflowing them, transform values (x, y)
captured by SnapDOM can be stale between frames, causing text/element
position jumps.

Also reorders the yield-before-reflow (let runtime propagate seek to
sub-compositions first, then reflow everything at once).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/renderer/src/sources/snapdom.ts | 25 +++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/renderer/src/sources/snapdom.ts b/packages/renderer/src/sources/snapdom.ts
index 7313192b..740db669 100644
--- a/packages/renderer/src/sources/snapdom.ts
+++ b/packages/renderer/src/sources/snapdom.ts
@@ -95,14 +95,29 @@ export class SnapdomFrameSource implements FrameSource {
 
     this.hf.seek(time);
 
-    // Force synchronous reflow so GSAP's CSS changes are committed before
-    // SnapDOM clones the DOM. Without this, computed styles can be stale
-    // and cause visible jumps in animated text/transforms.
+    // Yield first so the runtime can propagate the seek to sub-composition
+    // timelines (they run in nested iframes with their own GSAP instances).
+    await new Promise<void>((r) => setTimeout(r, 4));
+
+    // Force synchronous reflow on the main iframe AND all sub-composition
+    // iframes. Without this, GSAP transform values (x, y, scale) in
+    // sub-compositions can be stale, causing position jumps between frames.
     const doc = this.iframe.contentDocument!;
     void doc.documentElement.offsetHeight;
+    const subIframes = doc.querySelectorAll("iframe");
+    for (const sub of subIframes) {
+      try {
+        const subDoc = (sub as HTMLIFrameElement).contentDocument;
+        if (subDoc?.documentElement) {
+          void subDoc.documentElement.offsetHeight;
+        }
+      } catch {
+        // cross-origin — skip
+      }
+    }
 
-    // Yield for sub-composition syncs and GSAP nested timeline updates to settle.
-    await new Promise<void>((r) => setTimeout(r, 4));
+    // Second yield after reflow to let any reflow-triggered updates complete
+    await new Promise<void>((r) => setTimeout(r, 2));
 
     if (this.videoInjector) {
       await this.videoInjector.injectFrame(time);

From 0eb4d079dc630b74c06a7b8f1746070b0b6f03da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sat, 11 Apr 2026 16:29:16 +0200
Subject: [PATCH 30/30] fix(renderer): remove noopener from turbo popup
 (returns null per spec)

window.open with noopener always returns null to the opener per spec,
which caused the POPUP_BLOCKED fallback to always trigger. Removed
noopener so the opener gets a window reference for popup-blocked detection.

Note: without noopener, popup windows share the opener's event loop
in same-origin contexts, limiting parallelism. True multi-process
parallelism requires cross-origin isolation or future APIs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/renderer/src/capture/turbo-pool.ts | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/renderer/src/capture/turbo-pool.ts b/packages/renderer/src/capture/turbo-pool.ts
index e76b5551..bc46084d 100644
--- a/packages/renderer/src/capture/turbo-pool.ts
+++ b/packages/renderer/src/capture/turbo-pool.ts
@@ -62,11 +62,7 @@ export class TurboPool {
       const workerId = `w${i}-${this.sessionId}`;
       const workerUrl = `${config.turboWorkerUrl}?channel=${encodeURIComponent(channelName)}&workerId=${encodeURIComponent(workerId)}`;
 
-      const win = window.open(
-        workerUrl,
-        "_blank",
-        `noopener,width=1,height=1,left=-9999,top=-9999`,
-      );
+      const win = window.open(workerUrl, "_blank", "width=1,height=1,left=-9999,top=-9999");
 
       if (!win) {
         // Popup blocked — clean up and signal failure
@@ -74,6 +70,13 @@ export class TurboPool {
         throw new Error("POPUP_BLOCKED");
       }
 
+      // Minimize the popup to reduce visual noise
+      try {
+        win.blur();
+      } catch {
+        // cross-origin after navigation — expected
+      }
+
       const worker: WorkerState = { id: workerId, window: win, ready: false, done: false };
       this.workers.push(worker);