@editframe/elements 0.37.3-beta → 0.38.1

package/dist/preview/renderTimegroupToVideo.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderTimegroupToVideo.js","names":["timestamps: number[]","output: Output | null","videoSource: CanvasSource | null","audioSource: AudioBufferSource | null","target: BufferTarget | StreamTarget | null","fileStream: { writable: WritableStream<Uint8Array>; close: () => Promise<void> } | null","encodingCanvas: OffscreenCanvas | null","encodingCtx: OffscreenCanvasRenderingContext2D | null","videoConfig: VideoEncodingConfig","thumbCanvas: HTMLCanvasElement | null","thumbCtx: CanvasRenderingContext2D | null","seekQueue: Promise<void>[]","renderTasks: RenderTask[]","image"],"sources":["../../src/preview/renderTimegroupToVideo.ts"],"sourcesContent":["/**\n * Video rendering for timegroups using direct serialization.\n * \n * Architecture:\n * - Creates a render clone of the timeline\n * - For each frame:\n *   1. Seeks the clone to the target time\n *   2. Executes frame tasks (SVG updates, canvas draws, etc.)\n *   3. Serializes the live DOM directly to SVG+foreignObject data URI\n *   4. Renders to image and encodes to video\n * \n * RenderContext provides pixel caching across frames for performance.\n */\n\nimport { logger } from \"./logger.js\";\nimport {\n  Output,\n  Mp4OutputFormat,\n  BufferTarget,\n  StreamTarget,\n  CanvasSource,\n  AudioBufferSource,\n  QUALITY_HIGH,\n  canEncodeAudio,\n  getEncodableAudioCodecs,\n  type VideoEncodingConfig,\n  type AudioEncodingConfig,\n  type AudioCodec,\n} from \"mediabunny\";\nimport type { EFTimegroup } from \"../elements/EFTimegroup.js\";\nimport type { EFVideo } from \"../elements/EFVideo.js\";\nimport {\n  resetRenderState,\n  type ContentReadyMode,\n} from \"./renderTimegroupToCanvas.js\";\nimport { serializeTimelineToDataUri } from \"./rendering/serializeTimelineDirect.js\";\nimport { createPreviewContainer } from \"./previewTypes.js\";\nimport { RenderContext } from \"./RenderContext.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface RenderProgress {\n  progress: number;\n  currentFrame: number;\n  totalFrames: number;\n  renderedMs: number;\n  totalDurationMs: number;\n  elapsedMs: number;\n  estimatedRemainingMs: number;\n  speedMultiplier: number;\n  framePreviewCanvas?: HTMLCanvasElement; // Canvas with current frame (updated async, no encoding cost)\n}\n\nexport interface RenderToVideoOptions {\n  fps?: number;\n  codec?: \"avc\" | \"hevc\" | \"vp9\" | \"av1\" | \"vp8\";\n  bitrate?: number;\n  filename?: string;\n  scale?: number;\n  keyFrameInterval?: number;\n  fromMs?: number;\n  toMs?: number;\n  onProgress?: (progress: RenderProgress) => void;\n  streaming?: boolean;\n  signal?: AbortSignal;\n  includeAudio?: boolean;\n  audioBitrate?: number;\n  contentReadyMode?: ContentReadyMode;\n  blockingTimeoutMs?: number;\n  returnBuffer?: boolean;\n  preferredAudioCodecs?: AudioCodec[];\n  benchmarkMode?: boolean;\n  customWritableStream?: WritableStream<Uint8Array>; // For programmatic streaming (CLI/Playwright)\n  progressPreviewInterval?: number; // How often to generate preview thumbnails (default: 60 frames, 0 = disabled)\n}\n\n// ============================================================================\n// Errors\n// ============================================================================\n\nexport class NoSupportedAudioCodecError extends Error {\n  constructor(requestedCodecs: AudioCodec[], availableCodecs: AudioCodec[]) {\n    super(\n      `No supported audio codec found. Requested: [${requestedCodecs.join(\", \")}], ` +\n      `Available: [${availableCodecs.length > 0 ? availableCodecs.join(\", \") : \"none\"}]`\n    );\n    this.name = \"NoSupportedAudioCodecError\";\n  }\n}\n\nexport class RenderCancelledError extends Error {\n  constructor() {\n    super(\"Render cancelled\");\n    this.name = \"RenderCancelledError\";\n  }\n}\n\n// ============================================================================\n// Configuration\n// ============================================================================\n\ninterface ResolvedConfig {\n  fps: number;\n  codec: \"avc\" | \"hevc\" | \"vp9\" | \"av1\" | \"vp8\";\n  bitrate: number;\n  filename: string;\n  scale: number;\n  keyFrameInterval: number;\n  startMs: number;\n  endMs: number;\n  renderDurationMs: number;\n  width: number;\n  height: number;\n  videoWidth: number;\n  videoHeight: number;\n  totalFrames: number;\n  frameDurationMs: number;\n  frameDurationS: number;\n  streaming: boolean;\n  includeAudio: boolean;\n  audioBitrate: number;\n  contentReadyMode: ContentReadyMode;\n  blockingTimeoutMs: number;\n  returnBuffer: boolean;\n  preferredAudioCodecs: AudioCodec[];\n  benchmarkMode: boolean;\n  progressPreviewInterval: number;\n}\n\nfunction resolveConfig(\n  timegroup: EFTimegroup,\n  options: RenderToVideoOptions,\n): ResolvedConfig {\n  const fps = options.fps ?? timegroup.effectiveFps ?? 30;\n  const codec = options.codec ?? \"avc\";\n  const bitrate = options.bitrate ?? 8_000_000;\n  const filename = options.filename ?? \"timegroup-video.mp4\";\n  const scale = options.scale ?? 1;\n  const keyFrameInterval = options.keyFrameInterval ?? 2;\n  const streaming = options.streaming ?? true;\n  const includeAudio = options.includeAudio ?? true;\n  const audioBitrate = options.audioBitrate ?? 128_000;\n  const contentReadyMode = options.contentReadyMode ?? \"blocking\";\n  const blockingTimeoutMs = options.blockingTimeoutMs ?? 5000;\n  const returnBuffer = options.returnBuffer ?? false;\n  const preferredAudioCodecs = options.preferredAudioCodecs ?? [\"aac\", \"opus\"];\n  const benchmarkMode = options.benchmarkMode ?? false;\n  // Preview generation now uses canvas reference (no encoding) - cheap to enable!\n  // Defaults to 60 frames (every 2 seconds at 30fps). Set to 0 to disable.\n  const progressPreviewInterval = options.progressPreviewInterval ?? 60;\n\n  const totalDurationMs = timegroup.durationMs;\n  if (!totalDurationMs || totalDurationMs <= 0) {\n    throw new Error(\"Timegroup has no duration\");\n  }\n\n  const startMs = Math.max(0, options.fromMs ?? 0);\n  const endMs = options.toMs !== undefined ? Math.min(options.toMs, totalDurationMs) : totalDurationMs;\n  const renderDurationMs = endMs - startMs;\n  \n  if (renderDurationMs <= 0) {\n    throw new Error(`Invalid render range: from ${startMs}ms to ${endMs}ms`);\n  }\n\n  // Force layout reflow before reading dimensions\n  void timegroup.offsetHeight;\n  \n  const timegroupWidth = timegroup.offsetWidth;\n  const timegroupHeight = timegroup.offsetHeight;\n  \n  console.log(`[renderTimegroupToVideo] Timegroup dimensions: ${timegroupWidth}x${timegroupHeight}`);\n  console.log(`[renderTimegroupToVideo] Computed style:`, getComputedStyle(timegroup).width, getComputedStyle(timegroup).height);\n  console.log(`[renderTimegroupToVideo] BoundingClientRect:`, timegroup.getBoundingClientRect());\n  \n  if (!timegroupWidth || !timegroupHeight) {\n    throw new Error(\n      `Timegroup has no dimensions (${timegroupWidth}x${timegroupHeight}). ` +\n      `Ensure the timegroup element is in the document and has explicit width/height styles ` +\n      `(e.g., class=\"w-[1920px] h-[1080px]\")`\n    );\n  }\n  const width = Math.floor(timegroupWidth * scale);\n  const height = Math.floor(timegroupHeight * scale);\n\n  const videoWidth = width % 2 === 0 ? width : width - 1;\n  const videoHeight = height % 2 === 0 ? height : height - 1;\n\n  const frameDurationMs = 1000 / fps;\n  const totalFrames = Math.ceil(renderDurationMs / frameDurationMs);\n  const frameDurationS = frameDurationMs / 1000;\n\n  return {\n    fps,\n    codec,\n    bitrate,\n    filename,\n    scale,\n    keyFrameInterval,\n    startMs,\n    endMs,\n    renderDurationMs,\n    width,\n    height,\n    videoWidth,\n    videoHeight,\n    totalFrames,\n    frameDurationMs,\n    frameDurationS,\n    streaming,\n    includeAudio,\n    audioBitrate,\n    contentReadyMode,\n    blockingTimeoutMs,\n    returnBuffer,\n    preferredAudioCodecs,\n    benchmarkMode,\n    progressPreviewInterval,\n  };\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction isFileSystemAccessSupported(): boolean {\n  return typeof window !== \"undefined\" && \"showSaveFilePicker\" in window;\n}\n\nasync function getFileWritableStream(\n  filename: string,\n): Promise<{ writable: WritableStream<Uint8Array>; close: () => Promise<void> } | null> {\n  if (!isFileSystemAccessSupported()) {\n    return null;\n  }\n\n  try {\n    const fileHandle = await (window as any).showSaveFilePicker({\n      suggestedName: filename,\n      types: [{ description: \"MP4 Video\", accept: { \"video/mp4\": [\".mp4\"] } }],\n    });\n    const writable = await fileHandle.createWritable();\n    return { writable, close: async () => { await writable.close(); } };\n  } catch (e) {\n    if ((e as Error).name !== \"AbortError\") {\n      logger.warn(\"[renderToVideo] File System Access failed:\", e);\n    }\n    return null;\n  }\n}\n\nasync function selectAudioCodec(\n  preferredCodecs: AudioCodec[],\n  encodingOptions: { numberOfChannels: number; sampleRate: number; bitrate: number },\n): Promise<AudioCodec> {\n  for (const codec of preferredCodecs) {\n    try {\n      const isSupported = await canEncodeAudio(codec, encodingOptions);\n      if (isSupported) return codec;\n    } catch (e) {\n      logger.warn(`[selectAudioCodec] Check failed for ${codec}:`, e);\n    }\n  }\n  const availableCodecs = await getEncodableAudioCodecs(undefined, encodingOptions);\n  throw new NoSupportedAudioCodecError(preferredCodecs, availableCodecs);\n}\n\nfunction downloadBlob(blob: Blob, filename: string): void {\n  const url = URL.createObjectURL(blob);\n  const a = document.createElement(\"a\");\n  a.href = url;\n  a.download = filename;\n  document.body.appendChild(a);\n  a.click();\n  document.body.removeChild(a);\n  URL.revokeObjectURL(url);\n}\n\n// ============================================================================\n// Public API\n// ============================================================================\n\nexport async function getSupportedAudioCodecs(options?: {\n  numberOfChannels?: number;\n  sampleRate?: number;\n  bitrate?: number;\n}): Promise<AudioCodec[]> {\n  const { numberOfChannels = 2, sampleRate = 48000, bitrate = 128000 } = options ?? {};\n  return getEncodableAudioCodecs(undefined, { numberOfChannels, sampleRate, bitrate });\n}\n\n/**\n * Renders a timegroup to an MP4 video file.\n * \n * Uses the EXACT same code path as thumbnail generation (captureFromClone).\n * This ensures consistency - if thumbnails work, video export works.\n */\nexport async function renderTimegroupToVideo(\n  timegroup: EFTimegroup,\n  options: RenderToVideoOptions = {},\n): Promise<Uint8Array | undefined> {\n  const config = resolveConfig(timegroup, options);\n  const { signal, onProgress } = options;\n  \n  const checkCancelled = () => {\n    if (signal?.aborted) throw new RenderCancelledError();\n  };\n  \n  resetRenderState();\n  \n  // =========================================================================\n  // Create render clone - EXACT same as captureBatch in EFTimegroup\n  // =========================================================================\n  const { clone: renderClone, cleanup: cleanupRenderClone } =\n    await timegroup.createRenderClone();\n  \n  // Pre-fetch main video segments for all timestamps\n  // This ensures all segments are cached before rendering starts,\n  // avoiding network delays during the frame loop\n  const timestamps: number[] = [];\n  for (let i = 0; i < config.totalFrames; i++) {\n    timestamps.push(config.startMs + i * config.frameDurationMs);\n  }\n  \n  const videoElements = renderClone.querySelectorAll(\"ef-video\");\n  if (videoElements.length > 0) {\n    logger.debug(`[renderTimegroupToVideo] Prefetching main video segments for ${videoElements.length} video(s)...`);\n    await Promise.all(\n      Array.from(videoElements).map((video) =>\n        (video as EFVideo).prefetchMainVideoSegments(timestamps),\n      ),\n    );\n    logger.debug(`[renderTimegroupToVideo] Prefetch complete`);\n  }\n  \n  // =========================================================================\n  // Set up video encoding\n  // =========================================================================\n  let output: Output | null = null;\n  let videoSource: CanvasSource | null = null;\n  let audioSource: AudioBufferSource | null = null;\n  let target: BufferTarget | StreamTarget | null = null;\n  let fileStream: { writable: WritableStream<Uint8Array>; close: () => Promise<void> } | null = null;\n  let useStreaming = false;\n  let encodingCanvas: OffscreenCanvas | null = null;\n  let encodingCtx: OffscreenCanvasRenderingContext2D | null = null;\n  \n  if (!config.benchmarkMode) {\n    // Check for custom writable stream first (for programmatic streaming)\n    if (options.customWritableStream) {\n      target = new StreamTarget(options.customWritableStream as any);\n      output = new Output({\n        format: new Mp4OutputFormat({ fastStart: \"fragmented\" }),\n        target,\n      });\n      useStreaming = true;\n    } else if (config.streaming) {\n      fileStream = await getFileWritableStream(config.filename);\n      useStreaming = fileStream !== null;\n      \n      if (useStreaming && fileStream) {\n        target = new StreamTarget(fileStream.writable as any);\n        output = new Output({\n          format: new Mp4OutputFormat({ fastStart: \"fragmented\" }),\n          target,\n        });\n      }\n    }\n    \n    if (!target) {\n      target = new BufferTarget();\n      output = new Output({ format: new Mp4OutputFormat(), target });\n    }\n    \n    encodingCanvas = new OffscreenCanvas(config.videoWidth, config.videoHeight);\n    encodingCtx = encodingCanvas.getContext(\"2d\");\n    if (!encodingCtx) {\n      cleanupRenderClone();\n      throw new Error(\"Failed to get encoding canvas context\");\n    }\n    \n    if (!output) {\n      throw new Error(\"Output not initialized\");\n    }\n    \n    const videoConfig: VideoEncodingConfig = {\n      codec: config.codec,\n      bitrate: config.bitrate,\n      keyFrameInterval: config.keyFrameInterval,\n    };\n    videoSource = new CanvasSource(encodingCanvas, videoConfig);\n    output.addVideoTrack(videoSource);\n    \n    if (config.includeAudio) {\n      const selectedCodec = await selectAudioCodec(config.preferredAudioCodecs, {\n        numberOfChannels: 2,\n        sampleRate: 48000,\n        bitrate: config.audioBitrate,\n      });\n      const audioConfig: AudioEncodingConfig = {\n        codec: selectedCodec,\n        bitrate: config.audioBitrate,\n      };\n      audioSource = new AudioBufferSource(audioConfig);\n      output.addAudioTrack(audioSource);\n    }\n    \n    await output.start();\n  }\n  \n  // =========================================================================\n  // Setup for per-frame passive structure rebuilding (like live preview)\n  // =========================================================================\n  // Create RenderContext for caching across all frames\n  const renderContext = new RenderContext();\n  \n  // Create preview container with proper styling (reusable, content rebuilt each frame)\n  // Use unscaled dimensions for the preview container (which holds the full-size clone)\n  const containerWidth = timegroup.offsetWidth || 1920;\n  const containerHeight = timegroup.offsetHeight || 1080;\n  const previewContainer = createPreviewContainer({\n    width: containerWidth,\n    height: containerHeight,\n    background: getComputedStyle(timegroup).background || \"#000\",\n  });\n  \n  // Setup for direct serialization\n  console.log(`[renderTimegroupToVideo] Using direct timeline serialization`);\n  \n  // Attach renderClone to container\n  previewContainer.appendChild(renderClone);\n  \n  // CRITICAL: Add ef-render-clone-container class so isRenderClone() returns true\n  // This affects animation tracking - without it, the animation system treats the clone\n  // as the prime timeline, which causes incorrect behavior\n  previewContainer.classList.add('ef-render-clone-container');\n  \n  // CRITICAL: Attach container to document so getComputedStyle returns actual values\n  // Without this, all computed styles are empty strings!\n  // Hide the container OFF-SCREEN but do NOT use visibility:hidden because:\n  // 1. visibility:hidden is inherited by all children\n  // 2. seekForRender checks getComputedStyle().visibility and skips \"hidden\" subtrees\n  // 3. This would cause FrameController to skip rendering all nested content\n  previewContainer.style.cssText += ';position:fixed;left:-99999px;top:-99999px;pointer-events:none;';\n  document.body.appendChild(previewContainer);\n  \n  // Force layout/reflow so getComputedStyle returns correct values\n  void renderClone.offsetHeight;\n  console.log(`[renderTimegroupToVideo] Attached previewContainer to document.body (off-screen) for style computation`);\n  \n  // =========================================================================\n  // Frame loop - DEEP PIPELINE: overlap encode + render + prepare\n  // =========================================================================\n  const renderStartTime = performance.now();\n  let lastRenderedAudioEndMs = config.startMs;\n  const audioChunkDurationMs = 2000;\n  \n  // Reusable thumbnail canvas for preview (no encoding, just draw to canvas)\n  let thumbCanvas: HTMLCanvasElement | null = null;\n  let thumbCtx: CanvasRenderingContext2D | null = null;\n  if (onProgress && config.progressPreviewInterval > 0) {\n    const previewWidth = 160;\n    const previewHeight = Math.round(previewWidth * (config.videoHeight / config.videoWidth));\n    thumbCanvas = document.createElement(\"canvas\");\n    thumbCanvas.width = previewWidth;\n    thumbCanvas.height = previewHeight;\n    thumbCtx = thumbCanvas.getContext(\"2d\");\n  }\n  \n  let totalSeekMs = 0;\n  let totalSyncMs = 0;\n  let totalRenderMs = 0;\n  let totalEncodeMs = 0;\n  \n  try {\n    // ========================================================================\n    // DEEP PIPELINE: 3-4 frames ahead with operation queues\n    // ========================================================================\n    // Maintain queues of in-flight work (like the reference architecture)\n    type RenderTask = { frameIndex: number; timeMs: number; timestampS: number; promise: Promise<HTMLImageElement> };\n    const seekQueue: Promise<void>[] = [];\n    const renderTasks: RenderTask[] = [];\n    \n    // Pipeline depth configuration\n    // MAX_SEEK must be 1: Only one clone exists, so seeks must be sequential\n    // MAX_RENDER can be higher: serializeElement captures DOM state synchronously,\n    // then canvas encoding and image loading happen async and don't touch the clone\n    const MAX_SEEK = 1;\n    const MAX_RENDER = 4; // Allow 4 frames to encode/load in parallel (seek, serialize, encode, load)\n    \n    let nextSeekFrame = 0;\n    let nextRenderFrame = 0;\n    \n    for (let completedFrames = 0; completedFrames < config.totalFrames; completedFrames++) {\n      checkCancelled();\n      \n      const frameIndex = completedFrames;\n      const timeMs = timestamps[frameIndex]!;\n      const timestampS = (frameIndex * config.frameDurationMs) / 1000;\n      \n      // =====================================================================\n      // STAGE 1: Fill seek queue (don't block!)\n      // =====================================================================\n      while (seekQueue.length < MAX_SEEK && nextSeekFrame < config.totalFrames) {\n        const seekFrameIndex = nextSeekFrame;\n        const seekTimeMs = timestamps[seekFrameIndex]!;\n        \n        const seekStart = performance.now();\n        const seekPromise = renderClone.seekForRender(seekTimeMs).then(() => {\n          totalSeekMs += performance.now() - seekStart;\n        });\n        seekQueue.push(seekPromise);\n        nextSeekFrame++;\n      }\n      \n      // =====================================================================\n      // STAGE 2: Fill render queue (don't block!)\n      // =====================================================================\n      while (renderTasks.length < MAX_RENDER && seekQueue.length > 0 && nextRenderFrame < config.totalFrames) {\n        const renderFrameIndex = nextRenderFrame;\n        const renderTimeMs = timestamps[renderFrameIndex]!;\n        const renderTimestampS = (renderFrameIndex * config.frameDurationMs) / 1000;\n        const seekPromise = seekQueue.shift()!;\n        \n        const renderPromise = seekPromise.then(async () => {\n          // NOTE: seekForRender() has already:\n          // 1. Called frameController.renderFrame() to coordinate FrameRenderable elements\n          // 2. Awaited #executeCustomFrameTasks() so frame tasks are complete\n          // Clone's DOM now reflects all changes from frame tasks\n          \n          // Direct serialization: serialize timeline to data URI in one pass\n          const syncStart = performance.now();\n          const dataUri = await serializeTimelineToDataUri(renderClone, config.width, config.height, {\n            renderContext,\n            canvasScale: config.scale,\n            timeMs: renderTimeMs,\n          });\n          const syncTime = performance.now() - syncStart;\n          totalSyncMs += syncTime;\n          \n          // Create image from data URI\n          const renderStart = performance.now();\n          const image = new Image();\n          await new Promise<void>((resolve, reject) => {\n            image.onload = () => resolve();\n            image.onerror = (e) => {\n              console.error(`[Frame ${renderFrameIndex}] Image load error:`, e);\n              console.error(`[Frame ${renderFrameIndex}] Data URI preview:`, dataUri.substring(0, 200) + '...');\n              reject(new Error(`Failed to load image from data URI`));\n            };\n            image.src = dataUri;\n          });\n          const renderTime = performance.now() - renderStart;\n          totalRenderMs += renderTime;\n          \n          if (renderFrameIndex % 30 === 0) {\n            console.log(`[Frame ${renderFrameIndex}] Image loaded: ${image.width}x${image.height}`);\n          }\n          \n          // Log detailed timing every 30 frames to see breakdown\n          if (renderFrameIndex % 30 === 0) {\n            console.log(`[Frame ${renderFrameIndex}] serialize=${syncTime.toFixed(1)}ms`);\n          }\n          \n          return image;\n        });\n        \n        renderTasks.push({\n          frameIndex: renderFrameIndex,\n          timeMs: renderTimeMs,\n          timestampS: renderTimestampS,\n          promise: renderPromise,\n        });\n        nextRenderFrame++;\n      }\n      \n      // =====================================================================\n      // STAGE 3: Await the render for THIS frame (in strict order)\n      // =====================================================================\n      const taskIndex = renderTasks.findIndex((t) => t.frameIndex === frameIndex);\n      if (taskIndex === -1) {\n        throw new Error(`No render task found for frame ${frameIndex}`);\n      }\n      \n      const task = renderTasks[taskIndex]!;\n      const image = await task.promise;\n      renderTasks.splice(taskIndex, 1);\n      \n      // =====================================================================\n      // STAGE 4: Render audio chunk if needed\n      // =====================================================================\n      if (audioSource && timeMs >= lastRenderedAudioEndMs + audioChunkDurationMs) {\n        const chunkEndMs = Math.min(timeMs + audioChunkDurationMs, config.endMs);\n        try {\n          const audioBuffer = await timegroup.renderAudio(lastRenderedAudioEndMs, chunkEndMs);\n          if (audioBuffer && audioBuffer.length > 0) {\n            await audioSource.add(audioBuffer);\n          }\n        } catch (e) { /* Audio render failures are non-fatal */ }\n        lastRenderedAudioEndMs = chunkEndMs;\n      }\n      \n      // =====================================================================\n      // STAGE 5: Encode frame (sequential, maintains order)\n      // =====================================================================\n      if (videoSource && output && encodingCtx) {\n        const encodeStart = performance.now();\n        encodingCtx.drawImage(\n          image,\n          0, 0, image.width, image.height,\n          0, 0, config.videoWidth, config.videoHeight,\n        );\n        await videoSource.add(timestampS, config.frameDurationS);\n        totalEncodeMs += performance.now() - encodeStart;\n      }\n      \n      // =====================================================================\n      // STAGE 6: Progress reporting\n      // =====================================================================\n      const currentFrame = frameIndex + 1;\n      const progress = currentFrame / config.totalFrames;\n      const renderedMs = currentFrame * config.frameDurationMs;\n      const elapsedMs = performance.now() - renderStartTime;\n      const msPerFrame = elapsedMs / currentFrame;\n      const remainingFrames = config.totalFrames - currentFrame;\n      const estimatedRemainingMs = remainingFrames * msPerFrame;\n      const speedMultiplier = renderedMs / elapsedMs;\n      \n      // Update preview canvas if enabled (just draw, no encoding - super fast!)\n      // The canvas reference is passed to onProgress and can be displayed directly in UI\n      if (thumbCanvas && thumbCtx && frameIndex % config.progressPreviewInterval === 0) {\n        thumbCtx.drawImage(image, 0, 0, thumbCanvas.width, thumbCanvas.height);\n      }\n      \n      onProgress?.({\n        progress,\n        currentFrame,\n        totalFrames: config.totalFrames,\n        renderedMs,\n        totalDurationMs: config.renderDurationMs,\n        elapsedMs,\n        estimatedRemainingMs,\n        speedMultiplier,\n        framePreviewCanvas: thumbCanvas || undefined, // Pass canvas reference (no encoding!)\n      });\n    }\n    \n    // Render remaining audio\n    if (audioSource && lastRenderedAudioEndMs < config.endMs) {\n      try {\n        const audioBuffer = await timegroup.renderAudio(lastRenderedAudioEndMs, config.endMs);\n        if (audioBuffer && audioBuffer.length > 0) {\n          await audioSource.add(audioBuffer);\n        }\n      } catch (e) { /* Audio render failures are non-fatal */ }\n    }\n    \n    const totalTime = performance.now() - renderStartTime;\n    \n    // Calculate percentages and averages for performance analysis\n    const avgSeek = totalSeekMs / config.totalFrames;\n    const avgSync = totalSyncMs / config.totalFrames;\n    const avgRender = totalRenderMs / config.totalFrames;\n    const avgEncode = totalEncodeMs / config.totalFrames;\n    const avgTotal = totalTime / config.totalFrames;\n    \n    const tracked = totalSeekMs + totalSyncMs + totalRenderMs + totalEncodeMs;\n    const untracked = totalTime - tracked;\n    \n    console.log(`\\n=== Video Export Performance Breakdown ===`);\n    console.log(`Mode: Direct Serialization`);\n    console.log(`Total frames: ${config.totalFrames}`);\n    console.log(`Total time: ${totalTime.toFixed(0)}ms (${avgTotal.toFixed(1)}ms/frame)`);\n    console.log(`\\nPer-stage totals:`);\n    console.log(`  Seek:      ${totalSeekMs.toFixed(0)}ms (${(totalSeekMs/totalTime*100).toFixed(1)}%) - avg ${avgSeek.toFixed(1)}ms/frame`);\n    console.log(`  Serialize: ${totalSyncMs.toFixed(0)}ms (${(totalSyncMs/totalTime*100).toFixed(1)}%) - avg ${avgSync.toFixed(1)}ms/frame`);\n    console.log(`  Render: ${totalRenderMs.toFixed(0)}ms (${(totalRenderMs/totalTime*100).toFixed(1)}%) - avg ${avgRender.toFixed(1)}ms/frame`);\n    console.log(`  Encode: ${totalEncodeMs.toFixed(0)}ms (${(totalEncodeMs/totalTime*100).toFixed(1)}%) - avg ${avgEncode.toFixed(1)}ms/frame`);\n    console.log(`  Other:  ${untracked.toFixed(0)}ms (${(untracked/totalTime*100).toFixed(1)}%)`);\n    console.log(`==========================================\\n`);\n    \n    logger.debug(\n      `[renderTimegroupToVideo] ${config.totalFrames} frames: ` +\n      `seek=${totalSeekMs.toFixed(0)}ms, sync=${totalSyncMs.toFixed(0)}ms, ` +\n      `render=${totalRenderMs.toFixed(0)}ms, encode=${totalEncodeMs.toFixed(0)}ms, ` +\n      `total=${totalTime.toFixed(0)}ms`\n    );\n    \n    if (config.benchmarkMode) {\n      return undefined;\n    }\n    \n    await output!.finalize();\n    \n    if (useStreaming) {\n      // Streaming mode: chunks already sent via customWritableStream or file stream\n      return undefined;\n    } else {\n      const bufferTarget = target as BufferTarget;\n      const videoBuffer = bufferTarget.buffer;\n      if (!videoBuffer) {\n        throw new Error(\"Video encoding failed: no buffer produced\");\n      }\n      \n      if (config.returnBuffer) {\n        return new Uint8Array(videoBuffer);\n      }\n      \n      const videoBlob = new Blob([videoBuffer], { type: \"video/mp4\" });\n      downloadBlob(videoBlob, config.filename);\n      return undefined;\n    }\n    \n  } finally {\n    renderContext.dispose();\n    cleanupRenderClone();\n    // Remove preview container if it was attached to document\n    if (previewContainer.parentNode) {\n      previewContainer.parentNode.removeChild(previewContainer);\n    }\n  }\n}\n\nexport { QUALITY_HIGH };\nexport type { AudioCodec };\n"],"mappings":"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"}
+{"version":3,"file":"renderTimegroupToVideo.js","names":["timestamps: number[]","output: Output | null","videoSource: CanvasSource | null","audioSource: AudioBufferSource | null","target: BufferTarget | StreamTarget | null","fileStream: {\n    writable: WritableStream<Uint8Array>;\n    close: () => Promise<void>;\n  } | null","encodingCanvas: OffscreenCanvas | null","encodingCtx: OffscreenCanvasRenderingContext2D | null","videoConfig: VideoEncodingConfig","thumbCanvas: HTMLCanvasElement | null","thumbCtx: CanvasRenderingContext2D | null","pendingFrames: PendingFrame[]","entry: PendingFrame","image","image: HTMLImageElement"],"sources":["../../src/preview/renderTimegroupToVideo.ts"],"sourcesContent":["/**\n * Video rendering for timegroups using direct serialization.\n *\n * Architecture:\n * - Creates a render clone of the timeline\n * - For each frame:\n *   1. Seeks the clone to the target time\n *   2. Executes frame tasks (SVG updates, canvas draws, etc.)\n *   3. Serializes the live DOM directly to SVG+foreignObject data URI\n *   4. Renders to image and encodes to video\n *\n * RenderContext provides pixel caching across frames for performance.\n */\n\nimport { logger } from \"./logger.js\";\nimport {\n  Output,\n  Mp4OutputFormat,\n  BufferTarget,\n  StreamTarget,\n  CanvasSource,\n  AudioBufferSource,\n  QUALITY_HIGH,\n  canEncodeAudio,\n  getEncodableAudioCodecs,\n  type VideoEncodingConfig,\n  type AudioEncodingConfig,\n  type AudioCodec,\n} from \"mediabunny\";\nimport type { EFTimegroup } from \"../elements/EFTimegroup.js\";\nimport type { RenderToVideoOptions } from \"./renderTimegroupToVideo.types.js\";\nimport type { ContentReadyMode } from \"./renderTimegroupToCanvas.types.js\";\nimport {\n  resetRenderState,\n  waitForVideoContent,\n} from \"./renderTimegroupToCanvas.js\";\nimport { captureTimelineToDataUri } from \"./rendering/serializeTimelineDirect.js\";\nimport { renderToImageNative } from \"./rendering/renderToImageNative.js\";\nimport { isNativeCanvasApiAvailable } from \"./previewSettings.js\";\nimport { createPreviewContainer } from \"./previewTypes.js\";\nimport { RenderContext } from \"./RenderContext.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n// Re-export types from type-only module (zero side effects)\nexport type {\n  RenderProgress,\n  RenderToVideoOptions,\n} from \"./renderTimegroupToVideo.types.js\";\n\n// ============================================================================\n// Errors\n// ============================================================================\n\nexport class NoSupportedAudioCodecError extends Error {\n  constructor(requestedCodecs: AudioCodec[], availableCodecs: AudioCodec[]) {\n    super(\n      `No supported audio codec found. Requested: [${requestedCodecs.join(\", \")}], ` +\n        `Available: [${availableCodecs.length > 0 ? availableCodecs.join(\", \") : \"none\"}]`,\n    );\n    this.name = \"NoSupportedAudioCodecError\";\n  }\n}\n\nexport class RenderCancelledError extends Error {\n  constructor() {\n    super(\"Render cancelled\");\n    this.name = \"RenderCancelledError\";\n  }\n}\n\n// ============================================================================\n// Configuration\n// ============================================================================\n\ninterface ResolvedConfig {\n  fps: number;\n  codec: \"avc\" | \"hevc\" | \"vp9\" | \"av1\" | \"vp8\";\n  bitrate: number;\n  filename: string;\n  scale: number;\n  keyFrameInterval: number;\n  startMs: number;\n  endMs: number;\n  renderDurationMs: number;\n  width: number;\n  height: number;\n  videoWidth: number;\n  videoHeight: number;\n  totalFrames: number;\n  frameDurationMs: number;\n  frameDurationS: number;\n  streaming: boolean;\n  includeAudio: boolean;\n  audioBitrate: number;\n  contentReadyMode: ContentReadyMode;\n  blockingTimeoutMs: number;\n  returnBuffer: boolean;\n  preferredAudioCodecs: AudioCodec[];\n  benchmarkMode: boolean;\n  progressPreviewInterval: number;\n  canvasMode: \"native\" | \"foreignObject\";\n}\n\nfunction resolveConfig(\n  timegroup: EFTimegroup,\n  options: RenderToVideoOptions = {},\n): ResolvedConfig {\n  const fps = options.fps ?? timegroup.effectiveFps ?? 30;\n  const codec = options.codec ?? \"avc\";\n  const bitrate = options.bitrate ?? 8_000_000;\n  const filename = options.filename ?? \"timegroup-video.mp4\";\n  const scale = options.scale ?? 1;\n  const keyFrameInterval = options.keyFrameInterval ?? 2;\n  const streaming = options.streaming ?? true;\n  const includeAudio = options.includeAudio ?? true;\n  const audioBitrate = options.audioBitrate ?? 128_000;\n  const contentReadyMode = options.contentReadyMode ?? \"blocking\";\n  const blockingTimeoutMs = options.blockingTimeoutMs ?? 5000;\n  const returnBuffer = options.returnBuffer ?? false;\n  const preferredAudioCodecs = options.preferredAudioCodecs ?? [\"aac\", \"opus\"];\n  const benchmarkMode = options.benchmarkMode ?? false;\n  // Preview generation now uses canvas reference (no encoding) - cheap to enable!\n  // Defaults to 60 frames (every 2 seconds at 30fps). Set to 0 to disable.\n  const progressPreviewInterval = options.progressPreviewInterval ?? 60;\n\n  const totalDurationMs = timegroup.durationMs;\n  if (!totalDurationMs || totalDurationMs <= 0) {\n    throw new Error(\"Timegroup has no duration\");\n  }\n\n  const startMs = Math.max(0, options.fromMs ?? 0);\n  const endMs =\n    options.toMs !== undefined\n      ? Math.min(options.toMs, totalDurationMs)\n      : totalDurationMs;\n  const renderDurationMs = endMs - startMs;\n\n  if (renderDurationMs <= 0) {\n    throw new Error(`Invalid render range: from ${startMs}ms to ${endMs}ms`);\n  }\n\n  // Force layout reflow before reading dimensions\n  void timegroup.offsetHeight;\n\n  // Try multiple sources for dimensions (offsetWidth can be 0 in headless browsers)\n  let timegroupWidth = timegroup.offsetWidth;\n  let timegroupHeight = timegroup.offsetHeight;\n\n  if (!timegroupWidth || !timegroupHeight) {\n    const rect = timegroup.getBoundingClientRect();\n    if (rect.width > 0 && rect.height > 0) {\n      timegroupWidth = rect.width;\n      timegroupHeight = rect.height;\n    }\n  }\n\n  if (!timegroupWidth || !timegroupHeight) {\n    const computed = getComputedStyle(timegroup);\n    const cw = parseFloat(computed.width);\n    const ch = parseFloat(computed.height);\n    if (cw > 0 && ch > 0) {\n      timegroupWidth = cw;\n      timegroupHeight = ch;\n    }\n  }\n\n  if (!timegroupWidth || !timegroupHeight) {\n    throw new Error(\n      `Timegroup has no dimensions (${timegroupWidth}x${timegroupHeight}). ` +\n        `Ensure the timegroup element is in the document and has explicit width/height styles ` +\n        `(e.g., class=\"w-[1920px] h-[1080px]\")`,\n    );\n  }\n  const width = Math.floor(timegroupWidth * scale);\n  const height = Math.floor(timegroupHeight * scale);\n\n  const videoWidth = width % 2 === 0 ? width : width - 1;\n  const videoHeight = height % 2 === 0 ? height : height - 1;\n\n  const frameDurationMs = 1000 / fps;\n  const totalFrames = Math.ceil(renderDurationMs / frameDurationMs);\n  const frameDurationS = frameDurationMs / 1000;\n\n  // Determine effective canvas mode:\n  // 1. If explicitly specified, use that (with fallback if native not available)\n  // 2. If not specified, default to foreignObject for compatibility\n  const canvasMode = (() => {\n    const requested = options.canvasMode;\n    if (!requested) return \"foreignObject\";\n    if (requested === \"native\" && !isNativeCanvasApiAvailable()) {\n      logger.debug(\n        \"[renderTimegroupToVideo] Native canvas mode requested but not available, falling back to foreignObject\",\n      );\n      return \"foreignObject\";\n    }\n    return requested;\n  })();\n\n  return {\n    fps,\n    codec,\n    bitrate,\n    filename,\n    scale,\n    keyFrameInterval,\n    startMs,\n    endMs,\n    renderDurationMs,\n    width,\n    height,\n    videoWidth,\n    videoHeight,\n    totalFrames,\n    frameDurationMs,\n    frameDurationS,\n    streaming,\n    includeAudio,\n    audioBitrate,\n    contentReadyMode,\n    blockingTimeoutMs,\n    returnBuffer,\n    preferredAudioCodecs,\n    benchmarkMode,\n    progressPreviewInterval,\n    canvasMode,\n  };\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction isFileSystemAccessSupported(): boolean {\n  return typeof window !== \"undefined\" && \"showSaveFilePicker\" in window;\n}\n\nasync function getFileWritableStream(filename: string): Promise<{\n  writable: WritableStream<Uint8Array>;\n  close: () => Promise<void>;\n} | null> {\n  if (!isFileSystemAccessSupported()) {\n    return null;\n  }\n\n  try {\n    const fileHandle = await (window as any).showSaveFilePicker({\n      suggestedName: filename,\n      types: [{ description: \"MP4 Video\", accept: { \"video/mp4\": [\".mp4\"] } }],\n    });\n    const writable = await fileHandle.createWritable();\n    return {\n      writable,\n      close: async () => {\n        await writable.close();\n      },\n    };\n  } catch (e) {\n    if ((e as Error).name !== \"AbortError\") {\n      logger.warn(\"[renderToVideo] File System Access failed:\", e);\n    }\n    return null;\n  }\n}\n\nasync function selectAudioCodec(\n  preferredCodecs: AudioCodec[],\n  encodingOptions: {\n    numberOfChannels: number;\n    sampleRate: number;\n    bitrate: number;\n  },\n): Promise<AudioCodec> {\n  for (const codec of preferredCodecs) {\n    try {\n      const isSupported = await canEncodeAudio(codec, encodingOptions);\n      if (isSupported) return codec;\n    } catch (e) {\n      logger.warn(`[selectAudioCodec] Check failed for ${codec}:`, e);\n    }\n  }\n  const availableCodecs = await getEncodableAudioCodecs(\n    undefined,\n    encodingOptions,\n  );\n  throw new NoSupportedAudioCodecError(preferredCodecs, availableCodecs);\n}\n\nfunction downloadBlob(blob: Blob, filename: string): void {\n  const url = URL.createObjectURL(blob);\n  const a = document.createElement(\"a\");\n  a.href = url;\n  a.download = filename;\n  document.body.appendChild(a);\n  a.click();\n  document.body.removeChild(a);\n  URL.revokeObjectURL(url);\n}\n\n// ============================================================================\n// Public API\n// ============================================================================\n\nexport async function getSupportedAudioCodecs(options?: {\n  numberOfChannels?: number;\n  sampleRate?: number;\n  bitrate?: number;\n}): Promise<AudioCodec[]> {\n  const {\n    numberOfChannels = 2,\n    sampleRate = 48000,\n    bitrate = 128000,\n  } = options ?? {};\n  return getEncodableAudioCodecs(undefined, {\n    numberOfChannels,\n    sampleRate,\n    bitrate,\n  });\n}\n\n/**\n * Renders a timegroup to an MP4 video file.\n *\n * Uses the EXACT same code path as thumbnail generation (captureFromClone).\n * This ensures consistency - if thumbnails work, video export works.\n */\nexport async function renderTimegroupToVideo(\n  timegroup: EFTimegroup,\n  options: RenderToVideoOptions = {},\n): Promise<Uint8Array | undefined> {\n  const config = resolveConfig(timegroup, options);\n  const { signal, onProgress } = options;\n\n  const checkCancelled = () => {\n    if (signal?.aborted) throw new RenderCancelledError();\n  };\n\n  resetRenderState();\n\n  // =========================================================================\n  // Create render clone - EXACT same as captureBatch in EFTimegroup\n  // =========================================================================\n  const { clone: renderClone, cleanup: cleanupRenderClone } =\n    await timegroup.createRenderClone();\n\n  // Build timestamps array for frame loop\n  const timestamps: number[] = [];\n  for (let i = 0; i < config.totalFrames; i++) {\n    timestamps.push(config.startMs + i * config.frameDurationMs);\n  }\n\n  // =========================================================================\n  // Set up video encoding\n  // =========================================================================\n  let output: Output | null = null;\n  let videoSource: CanvasSource | null = null;\n  let audioSource: AudioBufferSource | null = null;\n  let target: BufferTarget | StreamTarget | null = null;\n  let fileStream: {\n    writable: WritableStream<Uint8Array>;\n    close: () => Promise<void>;\n  } | null = null;\n  let useStreaming = false;\n  let encodingCanvas: OffscreenCanvas | null = null;\n  let encodingCtx: OffscreenCanvasRenderingContext2D | null = null;\n\n  if (!config.benchmarkMode) {\n    // Check for custom writable stream first (for programmatic streaming)\n    if (options.customWritableStream) {\n      target = new StreamTarget(options.customWritableStream as any);\n      output = new Output({\n        format: new Mp4OutputFormat({ fastStart: \"fragmented\" }),\n        target,\n      });\n      useStreaming = true;\n    } else if (config.streaming) {\n      fileStream = await getFileWritableStream(config.filename);\n      useStreaming = fileStream !== null;\n\n      if (useStreaming && fileStream) {\n        target = new StreamTarget(fileStream.writable as any);\n        output = new Output({\n          format: new Mp4OutputFormat({ fastStart: \"fragmented\" }),\n          target,\n        });\n      }\n    }\n\n    if (!target) {\n      target = new BufferTarget();\n      output = new Output({ format: new Mp4OutputFormat(), target });\n    }\n\n    encodingCanvas = new OffscreenCanvas(config.videoWidth, config.videoHeight);\n    encodingCtx = encodingCanvas.getContext(\"2d\");\n    if (!encodingCtx) {\n      cleanupRenderClone();\n      throw new Error(\"Failed to get encoding canvas context\");\n    }\n\n    if (!output) {\n      throw new Error(\"Output not initialized\");\n    }\n\n    const videoConfig: VideoEncodingConfig = {\n      codec: config.codec,\n      bitrate: config.bitrate,\n      keyFrameInterval: config.keyFrameInterval,\n    };\n    videoSource = new CanvasSource(encodingCanvas, videoConfig);\n    output.addVideoTrack(videoSource);\n\n    if (config.includeAudio) {\n      const selectedCodec = await selectAudioCodec(\n        config.preferredAudioCodecs,\n        {\n          numberOfChannels: 2,\n          sampleRate: 48000,\n          bitrate: config.audioBitrate,\n        },\n      );\n      const audioConfig: AudioEncodingConfig = {\n        codec: selectedCodec,\n        bitrate: config.audioBitrate,\n      };\n      audioSource = new AudioBufferSource(audioConfig);\n      output.addAudioTrack(audioSource);\n    }\n\n    await output.start();\n  }\n\n  // =========================================================================\n  // Setup for per-frame passive structure rebuilding (like live preview)\n  // =========================================================================\n  // Create RenderContext for caching across all frames\n  const renderContext = new RenderContext();\n\n  // Create preview container with proper styling (reusable, content rebuilt each frame)\n  // Use unscaled dimensions for the preview container (which holds the full-size clone)\n  const containerWidth = timegroup.offsetWidth || 1920;\n  const containerHeight = timegroup.offsetHeight || 1080;\n  const previewContainer = createPreviewContainer({\n    width: containerWidth,\n    height: containerHeight,\n    background: getComputedStyle(timegroup).background || \"#000\",\n  });\n\n  // Setup for direct serialization\n  logger.debug(`[renderTimegroupToVideo] Using direct timeline serialization`);\n\n  // Attach renderClone to container\n  previewContainer.appendChild(renderClone);\n\n  // Add ef-render-clone-container class for CSS selectors and debugging\n  previewContainer.classList.add(\"ef-render-clone-container\");\n\n  // CRITICAL: Attach container to document so getComputedStyle returns actual values\n  // Without this, all computed styles are empty strings!\n  // Hide the container OFF-SCREEN but do NOT use visibility:hidden because:\n  // 1. visibility:hidden is inherited by all children\n  // 2. seekForRender checks getComputedStyle().visibility and skips \"hidden\" subtrees\n  // 3. This would cause FrameController to skip rendering all nested content\n  previewContainer.style.cssText +=\n    \";position:fixed;left:-99999px;top:-99999px;pointer-events:none;\";\n  document.body.appendChild(previewContainer);\n\n  // Force layout/reflow so getComputedStyle returns correct values\n  void renderClone.offsetHeight;\n  logger.debug(\n    `[renderTimegroupToVideo] Attached previewContainer to document.body (off-screen) for style computation`,\n  );\n\n  // =========================================================================\n  // Frame loop - DEEP PIPELINE: overlap encode + render + prepare\n  // =========================================================================\n  const renderStartTime = performance.now();\n  let lastRenderedAudioEndMs = config.startMs;\n  const audioChunkDurationMs = 2000;\n\n  // Reusable thumbnail canvas for preview (no encoding, just draw to canvas)\n  let thumbCanvas: HTMLCanvasElement | null = null;\n  let thumbCtx: CanvasRenderingContext2D | null = null;\n  if (onProgress && config.progressPreviewInterval > 0) {\n    const previewWidth = 160;\n    const previewHeight = Math.round(\n      previewWidth * (config.videoHeight / config.videoWidth),\n    );\n    thumbCanvas = document.createElement(\"canvas\");\n    thumbCanvas.width = previewWidth;\n    thumbCanvas.height = previewHeight;\n    thumbCtx = thumbCanvas.getContext(\"2d\");\n  }\n\n  try {\n    // ========================================================================\n    // OVERLAPPED PIPELINE: image loading runs parallel with seek+serialize\n    // ========================================================================\n    // The clone can only seek one frame at a time, and serialization must\n    // capture the DOM before the next seek. But image loading (data URI →\n    // Image) is independent of the clone and runs in the background.\n    //\n    // Per-frame timeline:\n    //   [seek(N)] → [serialize(N)] → [image.load(N) in background...]\n    //                                  └─ [seek(N+1)] → [serialize(N+1)] → ...\n    //                                  └─ encode(N) when image resolves\n\n    type PendingFrame = {\n      frameIndex: number;\n      timeMs: number;\n      timestampS: number;\n      resolved: HTMLImageElement | null;\n      promise: Promise<HTMLImageElement>;\n    };\n\n    const MAX_AHEAD = 2;\n    const pendingFrames: PendingFrame[] = [];\n    let nextSeekFrame = 0;\n    let encodedFrames = 0;\n\n    while (encodedFrames < config.totalFrames) {\n      checkCancelled();\n\n      // ==================================================================\n      // PHASE 1: Fill pipeline — seek+serialize ahead while images load\n      // ==================================================================\n      while (\n        nextSeekFrame < config.totalFrames &&\n        pendingFrames.length < MAX_AHEAD\n      ) {\n        const fi = nextSeekFrame;\n        const timeMs = timestamps[fi]!;\n        const timestampS = (fi * config.frameDurationMs) / 1000;\n\n        await renderClone.seekForRender(timeMs);\n\n        const entry: PendingFrame = {\n          frameIndex: fi,\n          timeMs,\n          timestampS,\n          resolved: null,\n          promise: null!,\n        };\n\n        // Wait for video content if using blocking mode\n        if (config.contentReadyMode === \"blocking\") {\n          await waitForVideoContent(\n            renderClone,\n            timeMs,\n            config.blockingTimeoutMs,\n          );\n        }\n\n        if (config.canvasMode === \"native\") {\n          const canvas = await renderToImageNative(\n            renderClone,\n            config.width,\n            config.height,\n            {\n              skipDprScaling: true,\n            },\n          );\n          entry.resolved = canvas as any as HTMLImageElement;\n          entry.promise = Promise.resolve(entry.resolved);\n        } else {\n          // Synchronous capture: walks DOM + snapshots canvas pixels.\n          // Returns immediately — clone is free for next seek.\n          // Encoding (canvas→base64, SVG assembly) and image loading\n          // all resolve in the background.\n          const dataUriPromise = captureTimelineToDataUri(\n            renderClone,\n            config.width,\n            config.height,\n            {\n              renderContext,\n              canvasScale: config.scale,\n              timeMs,\n            },\n          );\n\n          entry.promise = dataUriPromise.then((dataUri) => {\n            return new Promise<HTMLImageElement>((resolve, reject) => {\n              const image = new Image();\n              image.onload = () => {\n                entry.resolved = image;\n                resolve(image);\n              };\n              image.onerror = (e) => {\n                console.error(`[Render] frame ${fi} image load error:`, e);\n                reject(new Error(`Failed to load image from data URI`));\n              };\n              image.src = dataUri;\n            });\n          });\n        }\n\n        pendingFrames.push(entry);\n        nextSeekFrame++;\n      }\n\n      // ==================================================================\n      // PHASE 2: Encode next frame in order (await if not yet loaded)\n      // ==================================================================\n      const head = pendingFrames.shift()!;\n      const preloaded = head.resolved !== null;\n      let image: HTMLImageElement;\n      if (preloaded) {\n        image = head.resolved!;\n      } else {\n        image = await head.promise;\n      }\n\n      if (\n        audioSource &&\n        head.timeMs >= lastRenderedAudioEndMs + audioChunkDurationMs\n      ) {\n        const chunkEndMs = Math.min(\n          head.timeMs + audioChunkDurationMs,\n          config.endMs,\n        );\n        try {\n          const audioBuffer = await timegroup.renderAudio(\n            lastRenderedAudioEndMs,\n            chunkEndMs,\n            signal,\n          );\n          if (audioBuffer && audioBuffer.length > 0) {\n            await audioSource.add(audioBuffer);\n          }\n        } catch (e) {\n          /* Audio render failures are non-fatal */\n        }\n        lastRenderedAudioEndMs = chunkEndMs;\n      }\n\n      if (videoSource && output && encodingCtx) {\n        encodingCtx.drawImage(\n          image,\n          0,\n          0,\n          image.width,\n          image.height,\n          0,\n          0,\n          config.videoWidth,\n          config.videoHeight,\n        );\n        await videoSource.add(head.timestampS, config.frameDurationS);\n      }\n\n      // ==================================================================\n      // Progress reporting\n      // ==================================================================\n      encodedFrames++;\n      const currentFrame = encodedFrames;\n      const progress = currentFrame / config.totalFrames;\n      const renderedMs = currentFrame * config.frameDurationMs;\n      const elapsedMs = performance.now() - renderStartTime;\n      const msPerFrame = elapsedMs / currentFrame;\n      const remainingFrames = config.totalFrames - currentFrame;\n      const estimatedRemainingMs = remainingFrames * msPerFrame;\n      const speedMultiplier = renderedMs / elapsedMs;\n\n      if (\n        thumbCanvas &&\n        thumbCtx &&\n        head.frameIndex % config.progressPreviewInterval === 0\n      ) {\n        thumbCtx.drawImage(image, 0, 0, thumbCanvas.width, thumbCanvas.height);\n      }\n\n      onProgress?.({\n        progress,\n        currentFrame,\n        totalFrames: config.totalFrames,\n        renderedMs,\n        totalDurationMs: config.renderDurationMs,\n        elapsedMs,\n        estimatedRemainingMs,\n        speedMultiplier,\n        framePreviewCanvas: thumbCanvas || undefined,\n      });\n    }\n\n    // Render remaining audio\n    if (audioSource && lastRenderedAudioEndMs < config.endMs) {\n      try {\n        const audioBuffer = await timegroup.renderAudio(\n          lastRenderedAudioEndMs,\n          config.endMs,\n          signal,\n        );\n        if (audioBuffer && audioBuffer.length > 0) {\n          await audioSource.add(audioBuffer);\n        }\n      } catch (e) {\n        /* Audio render failures are non-fatal */\n      }\n    }\n\n    if (config.benchmarkMode) {\n      return undefined;\n    }\n\n    await output!.finalize();\n\n    if (useStreaming) {\n      // Streaming mode: chunks already sent via customWritableStream or file stream\n      return undefined;\n    } else {\n      const bufferTarget = target as BufferTarget;\n      const videoBuffer = bufferTarget.buffer;\n      if (!videoBuffer) {\n        throw new Error(\"Video encoding failed: no buffer produced\");\n      }\n\n      if (config.returnBuffer) {\n        return new Uint8Array(videoBuffer);\n      }\n\n      const videoBlob = new Blob([videoBuffer], { type: \"video/mp4\" });\n      downloadBlob(videoBlob, config.filename);\n      return undefined;\n    }\n  } finally {\n    renderContext.dispose();\n    cleanupRenderClone();\n    // Remove preview container if it was attached to document\n    if (previewContainer.parentNode) {\n      previewContainer.parentNode.removeChild(previewContainer);\n    }\n  }\n}\n\nexport { QUALITY_HIGH };\nexport type { AudioCodec };\n"],"mappings":"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"}

package/dist/preview/renderTimegroupToVideo.types.d.ts

@@ -0,0 +1,42 @@
+//#region src/preview/renderTimegroupToVideo.types.d.ts
+/**
+ * Type definitions for video rendering.
+ * This file has ZERO imports and ZERO side effects - safe for SSR.
+ */
+interface RenderProgress {
+  progress: number;
+  currentFrame: number;
+  totalFrames: number;
+  renderedMs: number;
+  totalDurationMs: number;
+  elapsedMs: number;
+  estimatedRemainingMs: number;
+  speedMultiplier: number;
+  framePreviewCanvas?: HTMLCanvasElement;
+}
+interface RenderToVideoOptions {
+  fps?: number;
+  codec?: "avc" | "hevc" | "vp9" | "av1" | "vp8";
+  bitrate?: number;
+  filename?: string;
+  scale?: number;
+  keyFrameInterval?: number;
+  fromMs?: number;
+  toMs?: number;
+  onProgress?: (progress: RenderProgress) => void;
+  streaming?: boolean;
+  signal?: AbortSignal;
+  includeAudio?: boolean;
+  audioBitrate?: number;
+  contentReadyMode?: "immediate" | "blocking";
+  blockingTimeoutMs?: number;
+  returnBuffer?: boolean;
+  preferredAudioCodecs?: Array<"aac" | "opus" | "mp3">;
+  benchmarkMode?: boolean;
+  customWritableStream?: WritableStream<Uint8Array>;
+  progressPreviewInterval?: number;
+  canvasMode?: "native" | "foreignObject";
+}
+//#endregion
+export { RenderProgress, RenderToVideoOptions };
+//# sourceMappingURL=renderTimegroupToVideo.types.d.ts.map

package/dist/preview/renderVideoToVideo.js

@@ -0,0 +1,286 @@
+import { logger } from "./logger.js";
+import { NoSupportedAudioCodecError, RenderCancelledError } from "./renderTimegroupToVideo.js";
+import { AudioBufferSource, BufferTarget, CanvasSource, Mp4OutputFormat, Output, StreamTarget, canEncodeAudio, getEncodableAudioCodecs } from "mediabunny";
+
+//#region src/preview/renderVideoToVideo.ts
+async function resolveVideoConfig(video, options = {}) {
+	const fps = options.fps ?? 30;
+	const codec = options.codec ?? "avc";
+	const bitrate = options.bitrate ?? 8e6;
+	const filename = options.filename ?? "video-export.mp4";
+	const scale = options.scale ?? 1;
+	const keyFrameInterval = options.keyFrameInterval ?? 2;
+	const streaming = options.streaming ?? false;
+	const includeAudio = options.includeAudio ?? true;
+	const audioBitrate = options.audioBitrate ?? 128e3;
+	const returnBuffer = options.returnBuffer ?? false;
+	const preferredAudioCodecs = options.preferredAudioCodecs ?? ["aac", "opus"];
+	const progressPreviewInterval = options.progressPreviewInterval ?? 60;
+	const trimStartMs = video.trimStartMs ?? 0;
+	const trimEndMs = video.trimEndMs ?? 0;
+	const intrinsicDurationMs = video.intrinsicDurationMs;
+	if (!intrinsicDurationMs || intrinsicDurationMs <= 0) throw new Error("Video has no intrinsic duration. Ensure the media engine is loaded.");
+	const effectiveDurationMs = intrinsicDurationMs - trimStartMs - trimEndMs;
+	if (effectiveDurationMs <= 0) throw new Error(`Invalid trim range: trimStart=${trimStartMs}ms, trimEnd=${trimEndMs}ms, intrinsicDuration=${intrinsicDurationMs}ms leaves no content.`);
+	const startMs = options.fromMs !== void 0 ? Math.max(0, options.fromMs) : 0;
+	const endMs = options.toMs !== void 0 ? Math.min(options.toMs, effectiveDurationMs) : effectiveDurationMs;
+	const renderDurationMs = endMs - startMs;
+	if (renderDurationMs <= 0) throw new Error(`Invalid render range: from ${startMs}ms to ${endMs}ms`);
+	const mediaEngine = await video.getMediaEngine();
+	let width;
+	let height;
+	const videoRendition = mediaEngine?.getVideoRendition?.() || mediaEngine?.videoRendition;
+	if (videoRendition?.width && videoRendition?.height) {
+		width = videoRendition.width;
+		height = videoRendition.height;
+	} else {
+		const firstFrame = await video.getVideoFrameAtSourceTime(trimStartMs, { quality: "main" });
+		try {
+			width = firstFrame.displayWidth;
+			height = firstFrame.displayHeight;
+		} finally {
+			firstFrame.close();
+		}
+	}
+	const videoWidth = Math.floor(width * scale);
+	const videoHeight = Math.floor(height * scale);
+	const evenWidth = videoWidth % 2 === 0 ? videoWidth : videoWidth - 1;
+	const evenHeight = videoHeight % 2 === 0 ? videoHeight : videoHeight - 1;
+	const frameDurationMs = 1e3 / fps;
+	return {
+		fps,
+		codec,
+		bitrate,
+		filename,
+		scale,
+		keyFrameInterval,
+		startMs,
+		endMs,
+		renderDurationMs,
+		videoWidth: evenWidth,
+		videoHeight: evenHeight,
+		totalFrames: Math.ceil(renderDurationMs / frameDurationMs),
+		frameDurationMs,
+		frameDurationS: frameDurationMs / 1e3,
+		streaming,
+		includeAudio,
+		audioBitrate,
+		returnBuffer,
+		preferredAudioCodecs,
+		progressPreviewInterval,
+		trimStartMs
+	};
+}
+function isFileSystemAccessSupported() {
+	return typeof window !== "undefined" && "showSaveFilePicker" in window;
+}
+async function getFileWritableStream(filename) {
+	if (!isFileSystemAccessSupported()) return null;
+	try {
+		const writable = await (await window.showSaveFilePicker({
+			suggestedName: filename,
+			types: [{
+				description: "MP4 Video",
+				accept: { "video/mp4": [".mp4"] }
+			}]
+		})).createWritable();
+		return {
+			writable,
+			close: async () => {
+				await writable.close();
+			}
+		};
+	} catch (e) {
+		if (e.name !== "AbortError") logger.warn("[renderVideoToVideo] File System Access failed:", e);
+		return null;
+	}
+}
+function downloadBlob(blob, filename) {
+	const url = URL.createObjectURL(blob);
+	const a = document.createElement("a");
+	a.href = url;
+	a.download = filename;
+	document.body.appendChild(a);
+	a.click();
+	document.body.removeChild(a);
+	URL.revokeObjectURL(url);
+}
+async function selectAudioCodec(preferredCodecs, encodingOptions) {
+	for (const codec of preferredCodecs) try {
+		if (await canEncodeAudio(codec, encodingOptions)) return codec;
+	} catch (e) {
+		logger.warn(`[selectAudioCodec] Check failed for ${codec}:`, e);
+	}
+	throw new NoSupportedAudioCodecError(preferredCodecs, await getEncodableAudioCodecs(void 0, encodingOptions));
+}
+/**
+* Render a single EFVideo element directly to MP4.
+*
+* This is the fast path: frames are decoded from the media engine,
+* drawn to an encoding canvas (with CSS filter/opacity applied),
+* and encoded to video. No DOM serialization involved.
+*/
+async function renderVideoToVideo(video, options = {}) {
+	const { signal, onProgress } = options;
+	const checkCancelled = () => {
+		if (signal?.aborted) throw new RenderCancelledError();
+	};
+	await video.waitForMediaDurations(signal);
+	checkCancelled();
+	const config = await resolveVideoConfig(video, options);
+	const computedStyle = getComputedStyle(video);
+	const cssFilter = computedStyle.filter;
+	const cssOpacity = parseFloat(computedStyle.opacity);
+	const hasFilter = cssFilter && cssFilter !== "none";
+	const hasOpacity = cssOpacity < 1;
+	logger.debug(`[renderVideoToVideo] starting: ${config.totalFrames} frames, ${config.videoWidth}x${config.videoHeight} @ ${config.fps}fps, trim=[${config.trimStartMs}, -${video.trimEndMs ?? 0}], css: filter=${hasFilter ? cssFilter : "none"}, opacity=${cssOpacity}`);
+	let output = null;
+	let videoSource = null;
+	let audioSource = null;
+	let target = null;
+	let fileStream = null;
+	let useStreaming = false;
+	const encodingCanvas = new OffscreenCanvas(config.videoWidth, config.videoHeight);
+	const encodingCtx = encodingCanvas.getContext("2d", hasFilter || hasOpacity ? { willReadFrequently: true } : void 0);
+	if (!encodingCtx) throw new Error("Failed to get encoding canvas context");
+	if (hasFilter) encodingCtx.filter = cssFilter;
+	if (hasOpacity) encodingCtx.globalAlpha = cssOpacity;
+	if (options.customWritableStream) {
+		target = new StreamTarget(options.customWritableStream);
+		output = new Output({
+			format: new Mp4OutputFormat({ fastStart: "fragmented" }),
+			target
+		});
+		useStreaming = true;
+	} else if (config.streaming) {
+		fileStream = await getFileWritableStream(config.filename);
+		useStreaming = fileStream !== null;
+		if (useStreaming && fileStream) {
+			target = new StreamTarget(fileStream.writable);
+			output = new Output({
+				format: new Mp4OutputFormat({ fastStart: "fragmented" }),
+				target
+			});
+		}
+	}
+	if (!target) {
+		target = new BufferTarget();
+		output = new Output({
+			format: new Mp4OutputFormat(),
+			target
+		});
+	}
+	if (!output) throw new Error("Output not initialized");
+	videoSource = new CanvasSource(encodingCanvas, {
+		codec: config.codec,
+		bitrate: config.bitrate,
+		keyFrameInterval: config.keyFrameInterval
+	});
+	output.addVideoTrack(videoSource);
+	if (config.includeAudio) try {
+		audioSource = new AudioBufferSource({
+			codec: await selectAudioCodec(config.preferredAudioCodecs, {
+				numberOfChannels: 2,
+				sampleRate: 48e3,
+				bitrate: config.audioBitrate
+			}),
+			bitrate: config.audioBitrate
+		});
+		output.addAudioTrack(audioSource);
+	} catch (e) {
+		logger.warn("[renderVideoToVideo] Audio codec selection failed, rendering without audio:", e);
+	}
+	await output.start();
+	const renderStartTime = performance.now();
+	let lastRenderedAudioEndMs = config.startMs;
+	const audioChunkDurationMs = 2e3;
+	let thumbCanvas = null;
+	let thumbCtx = null;
+	if (config.progressPreviewInterval > 0) {
+		const thumbScale = 160 / config.videoWidth;
+		thumbCanvas = document.createElement("canvas");
+		thumbCanvas.width = Math.round(config.videoWidth * thumbScale);
+		thumbCanvas.height = Math.round(config.videoHeight * thumbScale);
+		thumbCtx = thumbCanvas.getContext("2d");
+	}
+	let totalSeekMs = 0;
+	let totalDrawMs = 0;
+	let totalEncodeMs = 0;
+	try {
+		for (let frameIndex = 0; frameIndex < config.totalFrames; frameIndex++) {
+			checkCancelled();
+			const timelineTimeMs = config.startMs + frameIndex * config.frameDurationMs;
+			const sourceTimeMs = timelineTimeMs + config.trimStartMs;
+			const timestampS = frameIndex * config.frameDurationMs / 1e3;
+			const seekStart = performance.now();
+			const videoFrame = await video.getVideoFrameAtSourceTime(sourceTimeMs, {
+				quality: "main",
+				signal
+			});
+			totalSeekMs += performance.now() - seekStart;
+			try {
+				const drawStart = performance.now();
+				encodingCtx.drawImage(videoFrame, 0, 0, videoFrame.displayWidth, videoFrame.displayHeight, 0, 0, config.videoWidth, config.videoHeight);
+				totalDrawMs += performance.now() - drawStart;
+			} finally {
+				videoFrame.close();
+			}
+			const encodeStart = performance.now();
+			await videoSource.add(timestampS, config.frameDurationS);
+			totalEncodeMs += performance.now() - encodeStart;
+			if (audioSource && timelineTimeMs >= lastRenderedAudioEndMs + audioChunkDurationMs) {
+				const chunkEndMs = Math.min(timelineTimeMs + audioChunkDurationMs, config.endMs);
+				try {
+					const audioBuffer = await video.renderAudio(lastRenderedAudioEndMs, chunkEndMs);
+					if (audioBuffer && audioBuffer.length > 0) await audioSource.add(audioBuffer);
+				} catch (e) {}
+				lastRenderedAudioEndMs = chunkEndMs;
+			}
+			if (thumbCanvas && thumbCtx && frameIndex % config.progressPreviewInterval === 0) thumbCtx.drawImage(encodingCanvas, 0, 0, thumbCanvas.width, thumbCanvas.height);
+			const currentFrame = frameIndex + 1;
+			const progress = currentFrame / config.totalFrames;
+			const renderedMs = currentFrame * config.frameDurationMs;
+			const elapsedMs = performance.now() - renderStartTime;
+			const msPerFrame = elapsedMs / currentFrame;
+			const estimatedRemainingMs = (config.totalFrames - currentFrame) * msPerFrame;
+			const speedMultiplier = renderedMs / elapsedMs;
+			onProgress?.({
+				progress,
+				currentFrame,
+				totalFrames: config.totalFrames,
+				renderedMs,
+				totalDurationMs: config.renderDurationMs,
+				elapsedMs,
+				estimatedRemainingMs,
+				speedMultiplier,
+				framePreviewCanvas: thumbCanvas || void 0
+			});
+		}
+		if (audioSource && lastRenderedAudioEndMs < config.endMs) try {
+			const audioBuffer = await video.renderAudio(lastRenderedAudioEndMs, config.endMs);
+			if (audioBuffer && audioBuffer.length > 0) await audioSource.add(audioBuffer);
+		} catch (e) {}
+		const totalElapsed = performance.now() - renderStartTime;
+		logger.debug(`[renderVideoToVideo] complete: ${config.totalFrames} frames in ${totalElapsed.toFixed(0)}ms (seek=${totalSeekMs.toFixed(0)}ms, draw=${totalDrawMs.toFixed(0)}ms, encode=${totalEncodeMs.toFixed(0)}ms) speed=${(config.renderDurationMs / totalElapsed).toFixed(1)}x`);
+		await output.finalize();
+		if (useStreaming) {
+			if (fileStream) await fileStream.close();
+			return;
+		} else {
+			const videoBuffer = target.buffer;
+			if (!videoBuffer) throw new Error("Video encoding failed: no buffer produced");
+			if (config.returnBuffer) return new Uint8Array(videoBuffer);
+			downloadBlob(new Blob([videoBuffer], { type: "video/mp4" }), config.filename);
+			return;
+		}
+	} catch (error) {
+		try {
+			await output?.finalize();
+		} catch {}
+		throw error;
+	}
+}
+
+//#endregion
+export { renderVideoToVideo };
+//# sourceMappingURL=renderVideoToVideo.js.map

package/dist/preview/renderVideoToVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderVideoToVideo.js","names":["width: number","height: number","output: Output | null","videoSource: CanvasSource | null","audioSource: AudioBufferSource | null","target: BufferTarget | StreamTarget | null","fileStream: {\n    writable: WritableStream<Uint8Array>;\n    close: () => Promise<void>;\n  } | null","thumbCanvas: HTMLCanvasElement | null","thumbCtx: CanvasRenderingContext2D | null"],"sources":["../../src/preview/renderVideoToVideo.ts"],"sourcesContent":["/**\n * Direct video-to-video rendering — fast path for single video elements.\n *\n * Bypasses the full DOM serialization pipeline (foreignObject/native canvas)\n * by decoding frames directly from the media engine and re-encoding to MP4.\n *\n * Supports CSS effects via canvas 2D context:\n * - filter (ctx.filter)\n * - opacity (ctx.globalAlpha)\n */\n\nimport {\n  Output,\n  Mp4OutputFormat,\n  BufferTarget,\n  StreamTarget,\n  CanvasSource,\n  AudioBufferSource,\n  canEncodeAudio,\n  getEncodableAudioCodecs,\n  type VideoEncodingConfig,\n  type AudioEncodingConfig,\n  type AudioCodec,\n} from \"mediabunny\";\nimport type { EFVideo } from \"../elements/EFVideo.js\";\nimport {\n  NoSupportedAudioCodecError,\n  RenderCancelledError,\n} from \"./renderTimegroupToVideo.js\";\nimport type { RenderToVideoOptions } from \"./renderTimegroupToVideo.types.js\";\nimport { logger } from \"./logger.js\";\n\n// ============================================================================\n// Configuration\n// ============================================================================\n\ninterface ResolvedVideoConfig {\n  fps: number;\n  codec: \"avc\" | \"hevc\" | \"vp9\" | \"av1\" | \"vp8\";\n  bitrate: number;\n  filename: string;\n  scale: number;\n  keyFrameInterval: number;\n  startMs: number;\n  endMs: number;\n  renderDurationMs: number;\n  videoWidth: number;\n  videoHeight: number;\n  totalFrames: number;\n  frameDurationMs: number;\n  frameDurationS: number;\n  streaming: boolean;\n  includeAudio: boolean;\n  audioBitrate: number;\n  returnBuffer: boolean;\n  preferredAudioCodecs: AudioCodec[];\n  progressPreviewInterval: number;\n  trimStartMs: number;\n}\n\nasync function resolveVideoConfig(\n  video: EFVideo,\n  options: RenderToVideoOptions = {},\n): Promise<ResolvedVideoConfig> {\n  const fps = options.fps ?? 30;\n  const codec = options.codec ?? \"avc\";\n  const bitrate = options.bitrate ?? 8_000_000;\n  const filename = options.filename ?? \"video-export.mp4\";\n  const scale = options.scale ?? 1;\n  const keyFrameInterval = options.keyFrameInterval ?? 2;\n  const streaming = options.streaming ?? false;\n  const includeAudio = options.includeAudio ?? true;\n  const audioBitrate = options.audioBitrate ?? 128_000;\n  const returnBuffer = options.returnBuffer ?? false;\n  const preferredAudioCodecs = options.preferredAudioCodecs ?? [\"aac\", \"opus\"];\n  const progressPreviewInterval = options.progressPreviewInterval ?? 60;\n\n  const trimStartMs = video.trimStartMs ?? 0;\n  const trimEndMs = video.trimEndMs ?? 0;\n  const intrinsicDurationMs = video.intrinsicDurationMs;\n\n  if (!intrinsicDurationMs || intrinsicDurationMs <= 0) {\n    throw new Error(\n      \"Video has no intrinsic duration. Ensure the media engine is loaded.\",\n    );\n  }\n\n  const effectiveDurationMs = intrinsicDurationMs - trimStartMs - trimEndMs;\n  if (effectiveDurationMs <= 0) {\n    throw new Error(\n      `Invalid trim range: trimStart=${trimStartMs}ms, trimEnd=${trimEndMs}ms, ` +\n        `intrinsicDuration=${intrinsicDurationMs}ms leaves no content.`,\n    );\n  }\n\n  const startMs =\n    options.fromMs !== undefined ? Math.max(0, options.fromMs) : 0;\n  const endMs =\n    options.toMs !== undefined\n      ? Math.min(options.toMs, effectiveDurationMs)\n      : effectiveDurationMs;\n  const renderDurationMs = endMs - startMs;\n\n  if (renderDurationMs <= 0) {\n    throw new Error(`Invalid render range: from ${startMs}ms to ${endMs}ms`);\n  }\n\n  // Determine video dimensions from the media engine rendition metadata\n  const mediaEngine = await video.getMediaEngine();\n  let width: number;\n  let height: number;\n\n  const videoRendition =\n    mediaEngine?.getVideoRendition?.() || (mediaEngine as any)?.videoRendition;\n  if (videoRendition?.width && videoRendition?.height) {\n    width = videoRendition.width;\n    height = videoRendition.height;\n  } else {\n    // Fall back: decode first frame to get dimensions\n    const firstFrame = await video.getVideoFrameAtSourceTime(trimStartMs, {\n      quality: \"main\",\n    });\n    try {\n      width = firstFrame.displayWidth;\n      height = firstFrame.displayHeight;\n    } finally {\n      firstFrame.close();\n    }\n  }\n\n  const videoWidth = Math.floor(width * scale);\n  const videoHeight = Math.floor(height * scale);\n  // Ensure even dimensions for video encoding\n  const evenWidth = videoWidth % 2 === 0 ? videoWidth : videoWidth - 1;\n  const evenHeight = videoHeight % 2 === 0 ? videoHeight : videoHeight - 1;\n\n  const frameDurationMs = 1000 / fps;\n  const totalFrames = Math.ceil(renderDurationMs / frameDurationMs);\n  const frameDurationS = frameDurationMs / 1000;\n\n  return {\n    fps,\n    codec,\n    bitrate,\n    filename,\n    scale,\n    keyFrameInterval,\n    startMs,\n    endMs,\n    renderDurationMs,\n    videoWidth: evenWidth,\n    videoHeight: evenHeight,\n    totalFrames,\n    frameDurationMs,\n    frameDurationS,\n    streaming,\n    includeAudio,\n    audioBitrate,\n    returnBuffer,\n    preferredAudioCodecs,\n    progressPreviewInterval,\n    trimStartMs,\n  };\n}\n\n// ============================================================================\n// Utilities (same as renderTimegroupToVideo — not exported from there)\n// ============================================================================\n\nfunction isFileSystemAccessSupported(): boolean {\n  return typeof window !== \"undefined\" && \"showSaveFilePicker\" in window;\n}\n\nasync function getFileWritableStream(filename: string): Promise<{\n  writable: WritableStream<Uint8Array>;\n  close: () => Promise<void>;\n} | null> {\n  if (!isFileSystemAccessSupported()) {\n    return null;\n  }\n\n  try {\n    const fileHandle = await (window as any).showSaveFilePicker({\n      suggestedName: filename,\n      types: [{ description: \"MP4 Video\", accept: { \"video/mp4\": [\".mp4\"] } }],\n    });\n    const writable = await fileHandle.createWritable();\n    return {\n      writable,\n      close: async () => {\n        await writable.close();\n      },\n    };\n  } catch (e) {\n    if ((e as Error).name !== \"AbortError\") {\n      logger.warn(\"[renderVideoToVideo] File System Access failed:\", e);\n    }\n    return null;\n  }\n}\n\nfunction downloadBlob(blob: Blob, filename: string): void {\n  const url = URL.createObjectURL(blob);\n  const a = document.createElement(\"a\");\n  a.href = url;\n  a.download = filename;\n  document.body.appendChild(a);\n  a.click();\n  document.body.removeChild(a);\n  URL.revokeObjectURL(url);\n}\n\nasync function selectAudioCodec(\n  preferredCodecs: AudioCodec[],\n  encodingOptions: {\n    numberOfChannels: number;\n    sampleRate: number;\n    bitrate: number;\n  },\n): Promise<AudioCodec> {\n  for (const codec of preferredCodecs) {\n    try {\n      const isSupported = await canEncodeAudio(codec, encodingOptions);\n      if (isSupported) return codec;\n    } catch (e) {\n      logger.warn(`[selectAudioCodec] Check failed for ${codec}:`, e);\n    }\n  }\n  const availableCodecs = await getEncodableAudioCodecs(\n    undefined,\n    encodingOptions,\n  );\n  throw new NoSupportedAudioCodecError(preferredCodecs, availableCodecs);\n}\n\n// ============================================================================\n// Main render function\n// ============================================================================\n\n/**\n * Render a single EFVideo element directly to MP4.\n *\n * This is the fast path: frames are decoded from the media engine,\n * drawn to an encoding canvas (with CSS filter/opacity applied),\n * and encoded to video. No DOM serialization involved.\n */\nexport async function renderVideoToVideo(\n  video: EFVideo,\n  options: RenderToVideoOptions = {},\n): Promise<Uint8Array | undefined> {\n  const { signal, onProgress } = options;\n\n  const checkCancelled = () => {\n    if (signal?.aborted) throw new RenderCancelledError();\n  };\n\n  // Ensure media engine is loaded\n  await video.waitForMediaDurations(signal);\n  checkCancelled();\n\n  const config = await resolveVideoConfig(video, options);\n\n  // Read CSS effects once before the frame loop (values don't change during rendering)\n  const computedStyle = getComputedStyle(video);\n  const cssFilter = computedStyle.filter;\n  const cssOpacity = parseFloat(computedStyle.opacity);\n  const hasFilter = cssFilter && cssFilter !== \"none\";\n  const hasOpacity = cssOpacity < 1;\n\n  logger.debug(\n    `[renderVideoToVideo] starting: ${config.totalFrames} frames, ` +\n      `${config.videoWidth}x${config.videoHeight} @ ${config.fps}fps, ` +\n      `trim=[${config.trimStartMs}, -${video.trimEndMs ?? 0}], ` +\n      `css: filter=${hasFilter ? cssFilter : \"none\"}, opacity=${cssOpacity}`,\n  );\n\n  // =========================================================================\n  // Set up video encoding\n  // =========================================================================\n  let output: Output | null = null;\n  let videoSource: CanvasSource | null = null;\n  let audioSource: AudioBufferSource | null = null;\n  let target: BufferTarget | StreamTarget | null = null;\n  let fileStream: {\n    writable: WritableStream<Uint8Array>;\n    close: () => Promise<void>;\n  } | null = null;\n  let useStreaming = false;\n\n  const encodingCanvas = new OffscreenCanvas(\n    config.videoWidth,\n    config.videoHeight,\n  );\n  const encodingCtx = encodingCanvas.getContext(\n    \"2d\",\n    hasFilter || hasOpacity ? { willReadFrequently: true } : undefined,\n  );\n  if (!encodingCtx) {\n    throw new Error(\"Failed to get encoding canvas context\");\n  }\n\n  if (hasFilter) {\n    encodingCtx.filter = cssFilter;\n  }\n  if (hasOpacity) {\n    encodingCtx.globalAlpha = cssOpacity;\n  }\n\n  if (options.customWritableStream) {\n    target = new StreamTarget(options.customWritableStream as any);\n    output = new Output({\n      format: new Mp4OutputFormat({ fastStart: \"fragmented\" }),\n      target,\n    });\n    useStreaming = true;\n  } else if (config.streaming) {\n    fileStream = await getFileWritableStream(config.filename);\n    useStreaming = fileStream !== null;\n\n    if (useStreaming && fileStream) {\n      target = new StreamTarget(fileStream.writable as any);\n      output = new Output({\n        format: new Mp4OutputFormat({ fastStart: \"fragmented\" }),\n        target,\n      });\n    }\n  }\n\n  if (!target) {\n    target = new BufferTarget();\n    output = new Output({ format: new Mp4OutputFormat(), target });\n  }\n\n  if (!output) {\n    throw new Error(\"Output not initialized\");\n  }\n\n  const videoConfig: VideoEncodingConfig = {\n    codec: config.codec,\n    bitrate: config.bitrate,\n    keyFrameInterval: config.keyFrameInterval,\n  };\n\n  // Use CanvasSource directly - filter and opacity don't require special handling\n  videoSource = new CanvasSource(encodingCanvas, videoConfig);\n  output.addVideoTrack(videoSource);\n\n  if (config.includeAudio) {\n    try {\n      const selectedCodec = await selectAudioCodec(\n        config.preferredAudioCodecs,\n        {\n          numberOfChannels: 2,\n          sampleRate: 48000,\n          bitrate: config.audioBitrate,\n        },\n      );\n      const audioConfig: AudioEncodingConfig = {\n        codec: selectedCodec,\n        bitrate: config.audioBitrate,\n      };\n      audioSource = new AudioBufferSource(audioConfig);\n      output.addAudioTrack(audioSource);\n    } catch (e) {\n      logger.warn(\n        \"[renderVideoToVideo] Audio codec selection failed, rendering without audio:\",\n        e,\n      );\n    }\n  }\n\n  await output.start();\n\n  // =========================================================================\n  // Frame loop\n  // =========================================================================\n  const renderStartTime = performance.now();\n  let lastRenderedAudioEndMs = config.startMs;\n  const audioChunkDurationMs = 2000;\n\n  let thumbCanvas: HTMLCanvasElement | null = null;\n  let thumbCtx: CanvasRenderingContext2D | null = null;\n\n  if (config.progressPreviewInterval > 0) {\n    const thumbScale = 160 / config.videoWidth;\n    thumbCanvas = document.createElement(\"canvas\");\n    thumbCanvas.width = Math.round(config.videoWidth * thumbScale);\n    thumbCanvas.height = Math.round(config.videoHeight * thumbScale);\n    thumbCtx = thumbCanvas.getContext(\"2d\");\n  }\n\n  let totalSeekMs = 0;\n  let totalDrawMs = 0;\n  let totalEncodeMs = 0;\n\n  try {\n    for (let frameIndex = 0; frameIndex < config.totalFrames; frameIndex++) {\n      checkCancelled();\n\n      const timelineTimeMs =\n        config.startMs + frameIndex * config.frameDurationMs;\n      const sourceTimeMs = timelineTimeMs + config.trimStartMs;\n      const timestampS = (frameIndex * config.frameDurationMs) / 1000;\n\n      // Decode frame\n      const seekStart = performance.now();\n      const videoFrame = await video.getVideoFrameAtSourceTime(sourceTimeMs, {\n        quality: \"main\",\n        signal,\n      });\n      totalSeekMs += performance.now() - seekStart;\n\n      try {\n        const drawStart = performance.now();\n\n        encodingCtx.drawImage(\n          videoFrame,\n          0,\n          0,\n          videoFrame.displayWidth,\n          videoFrame.displayHeight,\n          0,\n          0,\n          config.videoWidth,\n          config.videoHeight,\n        );\n\n        totalDrawMs += performance.now() - drawStart;\n      } finally {\n        videoFrame.close();\n      }\n\n      // Encode frame\n      const encodeStart = performance.now();\n      await videoSource!.add(timestampS, config.frameDurationS);\n      totalEncodeMs += performance.now() - encodeStart;\n\n      // Render audio in chunks\n      if (\n        audioSource &&\n        timelineTimeMs >= lastRenderedAudioEndMs + audioChunkDurationMs\n      ) {\n        const chunkEndMs = Math.min(\n          timelineTimeMs + audioChunkDurationMs,\n          config.endMs,\n        );\n        try {\n          const audioBuffer = await video.renderAudio(\n            lastRenderedAudioEndMs,\n            chunkEndMs,\n          );\n          if (audioBuffer && audioBuffer.length > 0) {\n            await audioSource.add(audioBuffer);\n          }\n        } catch (e) {\n          // Audio render failures are non-fatal\n        }\n        lastRenderedAudioEndMs = chunkEndMs;\n      }\n\n      // Progress preview thumbnail\n      if (\n        thumbCanvas &&\n        thumbCtx &&\n        frameIndex % config.progressPreviewInterval === 0\n      ) {\n        thumbCtx.drawImage(\n          encodingCanvas as any,\n          0,\n          0,\n          thumbCanvas.width,\n          thumbCanvas.height,\n        );\n      }\n\n      // Progress reporting\n      const currentFrame = frameIndex + 1;\n      const progress = currentFrame / config.totalFrames;\n      const renderedMs = currentFrame * config.frameDurationMs;\n      const elapsedMs = performance.now() - renderStartTime;\n      const msPerFrame = elapsedMs / currentFrame;\n      const remainingFrames = config.totalFrames - currentFrame;\n      const estimatedRemainingMs = remainingFrames * msPerFrame;\n      const speedMultiplier = renderedMs / elapsedMs;\n\n      onProgress?.({\n        progress,\n        currentFrame,\n        totalFrames: config.totalFrames,\n        renderedMs,\n        totalDurationMs: config.renderDurationMs,\n        elapsedMs,\n        estimatedRemainingMs,\n        speedMultiplier,\n        framePreviewCanvas: thumbCanvas || undefined,\n      });\n    }\n\n    // Render remaining audio\n    if (audioSource && lastRenderedAudioEndMs < config.endMs) {\n      try {\n        const audioBuffer = await video.renderAudio(\n          lastRenderedAudioEndMs,\n          config.endMs,\n        );\n        if (audioBuffer && audioBuffer.length > 0) {\n          await audioSource.add(audioBuffer);\n        }\n      } catch (e) {\n        // Audio render failures are non-fatal\n      }\n    }\n\n    // =========================================================================\n    // Finalize\n    // =========================================================================\n    const totalElapsed = performance.now() - renderStartTime;\n    logger.debug(\n      `[renderVideoToVideo] complete: ${config.totalFrames} frames in ${totalElapsed.toFixed(0)}ms ` +\n        `(seek=${totalSeekMs.toFixed(0)}ms, draw=${totalDrawMs.toFixed(0)}ms, encode=${totalEncodeMs.toFixed(0)}ms) ` +\n        `speed=${(config.renderDurationMs / totalElapsed).toFixed(1)}x`,\n    );\n\n    await output.finalize();\n\n    if (useStreaming) {\n      if (fileStream) {\n        await fileStream.close();\n      }\n      return undefined;\n    } else {\n      const bufferTarget = target as BufferTarget;\n      const videoBuffer = bufferTarget.buffer;\n      if (!videoBuffer) {\n        throw new Error(\"Video encoding failed: no buffer produced\");\n      }\n\n      if (config.returnBuffer) {\n        return new Uint8Array(videoBuffer);\n      }\n\n      const videoBlob = new Blob([videoBuffer], { type: \"video/mp4\" });\n      downloadBlob(videoBlob, config.filename);\n      return undefined;\n    }\n  } catch (error) {\n    // Clean up output on failure\n    try {\n      await output?.finalize();\n    } catch {\n      // Ignore finalize errors during cleanup\n    }\n    throw error;\n  }\n}\n"],"mappings":"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"}

package/dist/preview/renderers.d.ts

@@ -0,0 +1,56 @@
+import { RenderMode } from "./previewSettings.js";
+
+//#region src/preview/renderers.d.ts
+
+/**
+ * Options for rendering HTML to an image or canvas.
+ */
+interface RenderOptions {
+  /** Skip device pixel ratio scaling (render at logical pixels) */
+  skipDprScaling?: boolean;
+  /** Scale factor for encoding internal canvases (foreignObject only) */
+  canvasScale?: number;
+  /** Whether to reuse an existing canvas (native only) */
+  reuseCanvas?: HTMLCanvasElement;
+}
+/**
+ * Result of a render operation.
+ * Native path returns a canvas, foreignObject path returns an image.
+ */
+type RenderResult = HTMLCanvasElement | HTMLImageElement;
+/**
+ * Renderer interface for HTML-to-image conversion.
+ */
+interface Renderer {
+  /** The render mode this renderer implements */
+  readonly mode: RenderMode;
+  /**
+   * Render an HTML container to an image or canvas.
+   * @param container - The HTML element to render
+   * @param width - Target width in logical pixels
+   * @param height - Target height in logical pixels
+   * @param options - Rendering options
+   * @returns Promise resolving to a canvas or image element
+   */
+  render(container: HTMLElement, width: number, height: number, options?: RenderOptions): Promise<RenderResult>;
+  /**
+   * Check if this renderer is available in the current environment.
+   */
+  isAvailable(): boolean;
+}
+/**
+ * Get the effective render mode, validating that native is available when selected.
+ * Falls back to foreignObject if native is selected but not available.
+ */
+declare function getEffectiveRenderMode(): RenderMode;
+/**
+ * Check if a render result is a canvas element.
+ */
+declare function isCanvas(result: RenderResult): result is HTMLCanvasElement;
+/**
+ * Check if a render result is an image element.
+ */
+declare function isImage(result: RenderResult): result is HTMLImageElement;
+//#endregion
+export { RenderOptions, RenderResult, Renderer, getEffectiveRenderMode, isCanvas, isImage };
+//# sourceMappingURL=renderers.d.ts.map

package/dist/preview/renderers.js

@@ -10,7 +10,19 @@ function getEffectiveRenderMode() {
 	if (mode === "native" && !isNativeCanvasApiAvailable()) return "foreignObject";
 	return mode;
 }
+/**
+* Check if a render result is a canvas element.
+*/
+function isCanvas(result) {
+	return result instanceof HTMLCanvasElement;
+}
+/**
+* Check if a render result is an image element.
+*/
+function isImage(result) {
+	return result instanceof HTMLImageElement;
+}
 
 //#endregion
-export { getEffectiveRenderMode };
+export { getEffectiveRenderMode, isCanvas, isImage };
 //# sourceMappingURL=renderers.js.map