@editframe/elements 0.37.3-beta → 0.38.1

package/dist/preview/renderTimegroupToCanvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderTimegroupToCanvas.js","names":["timeMs: number","timeoutMs: number","blankVideos: string[]","renderState: RenderState","scaleColors: Record<number, string>","image: HTMLCanvasElement | HTMLImageElement","container","options: CanvasPreviewOptions","pendingResolutionScale: number | null"],"sources":["../../src/preview/renderTimegroupToCanvas.ts"],"sourcesContent":["import type { EFTimegroup } from \"../elements/EFTimegroup.js\";\nimport {\n  buildCloneStructure,\n  syncStyles,\n  collectDocumentStyles,\n  overrideRootCloneStyles,\n  removeHiddenNodesForSerialization,\n  restoreHiddenNodes,\n  type SyncState,\n} from \"./renderTimegroupPreview.js\";\nimport { getEffectiveRenderMode } from \"./renderers.js\";\nimport { RenderContext } from \"./RenderContext.js\";\nimport { FrameController } from \"./FrameController.js\";\n\n// Re-export renderer types for external use\nexport type { RenderOptions, RenderResult, Renderer } from \"./renderers.js\";\nexport { getEffectiveRenderMode, isCanvas, isImage } from \"./renderers.js\";\nimport {\n  type TemporalElement,\n  isVisibleAtTime,\n  DEFAULT_WIDTH,\n  DEFAULT_HEIGHT,\n  DEFAULT_THUMBNAIL_SCALE,\n  DEFAULT_BLOCKING_TIMEOUT_MS,\n  createPreviewContainer,\n} from \"./previewTypes.js\";\nimport { defaultProfiler } from \"./RenderProfiler.js\";\nimport { logger } from \"./logger.js\";\n\n// Import rendering modules\nimport {\n  renderToImage,\n  renderToImageDirect,\n  prepareFrameDataUri,\n  loadImageFromDataUri,\n} from \"./rendering/renderToImage.js\";\nimport { renderToImageNative, createDprCanvas } from \"./rendering/renderToImageNative.js\";\nimport { clearInlineImageCache, getInlineImageCacheSize } from \"./rendering/inlineImages.js\";\n\n// Re-export rendering types and functions for external use\nexport type {\n  NativeRenderOptions,\n  ForeignObjectRenderOptions,\n} from \"./rendering/types.js\";\nexport {\n  renderToImage,\n  renderToImageNative,\n  renderToImageDirect,\n  prepareFrameDataUri,\n  loadImageFromDataUri,\n};\n\n// ============================================================================\n// Constants (module-specific, not shared)\n// ============================================================================\n\n/** Number of rows to sample when checking canvas content */\nconst CANVAS_SAMPLE_STRIP_HEIGHT = 4;\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/**\n * Content readiness strategy for capture operations.\n * - \"immediate\": Capture NOW, skip all waits. May have blank video frames.\n * - \"blocking\": Wait for video content to be ready. Throws on timeout.\n */\nexport type ContentReadyMode = \"immediate\" | \"blocking\";\n\n/**\n * Options for capturing a timegroup frame.\n */\nexport interface CaptureOptions {\n  /** Time to capture at in milliseconds (required) */\n  timeMs: number;\n  /** Scale factor (default: 0.25 for captureTimegroupAtTime) */\n  scale?: number;\n  /** Skip restoring original time after capture (for batch operations) */\n  skipRestore?: boolean;\n  /** Content readiness strategy (default: \"immediate\") */\n  contentReadyMode?: ContentReadyMode;\n  /** Max wait time for blocking mode before throwing (default: 5000ms) */\n  blockingTimeoutMs?: number;\n}\n\n/**\n * Options for batch capture operations, excluding timeMs which is provided per-timestamp.\n */\nexport interface CaptureBatchOptions {\n  /** Scale factor for thumbnails (default: 0.25) */\n  scale?: number;\n  /** Content readiness strategy (default: \"immediate\") */\n  contentReadyMode?: ContentReadyMode;\n  /** Max wait time for blocking mode before throwing (default: 5000ms) */\n  blockingTimeoutMs?: number;\n}\n\n/**\n * Error thrown when video content is not ready within the blocking timeout.\n */\nexport class ContentNotReadyError extends Error {\n  constructor(\n    public readonly timeMs: number,\n    public readonly timeoutMs: number,\n    public readonly blankVideos: string[],\n  ) {\n    super(`Video content not ready at ${timeMs}ms after ${timeoutMs}ms timeout. Blank videos: ${blankVideos.join(', ')}`);\n    this.name = 'ContentNotReadyError';\n  }\n}\n\n// ============================================================================\n// Module State (reset via resetRenderState)\n// ============================================================================\n\n/**\n * Module-level render state including caches and reusable objects.\n */\ninterface RenderState {\n  inlineImageCache: Map<string, string>;\n  layoutInitializedCanvases: WeakSet<HTMLCanvasElement>;\n  xmlSerializer: XMLSerializer | null;\n  textEncoder: TextEncoder;\n  metrics: {\n    inlineImageCacheHits: number;\n    inlineImageCacheMisses: number;\n    inlineImageCacheEvictions: number;\n  };\n}\n\n/**\n * Module-level state for render operations.\n * Note: xmlSerializer is lazy-initialized for Node.js compatibility\n */\nconst renderState: RenderState = {\n  inlineImageCache: new Map(),\n  layoutInitializedCanvases: new WeakSet(),\n  xmlSerializer: null, // Lazy-initialized in browser context\n  textEncoder: new TextEncoder(),\n  metrics: {\n    inlineImageCacheHits: 0,\n    inlineImageCacheMisses: 0,\n    inlineImageCacheEvictions: 0,\n  },\n};\n\n/**\n * Get the current render state for testing and debugging.\n * @returns The module-level render state object\n */\nexport function getRenderState(): RenderState {\n  return renderState;\n}\n\n/**\n * Get cache metrics for monitoring performance.\n * @returns Object with cache hit/miss/eviction counts\n */\nexport function getCacheMetrics(): RenderState['metrics'] {\n  return { ...renderState.metrics };\n}\n\n/**\n * Reset cache metrics to zero.\n */\nexport function resetCacheMetrics(): void {\n  renderState.metrics.inlineImageCacheHits = 0;\n  renderState.metrics.inlineImageCacheMisses = 0;\n  renderState.metrics.inlineImageCacheEvictions = 0;\n}\n\n/**\n * Reset all module state including profiling counters, caches, and logging flags.\n * Call at the start of export sessions to ensure clean state.\n */\nexport function resetRenderState(): void {\n  defaultProfiler.reset();\n  clearInlineImageCache();\n  resetCacheMetrics();\n}\n\n// Re-export cache management functions\nexport { clearInlineImageCache, getInlineImageCacheSize };\n\n// ============================================================================\n// Internal Helpers\n// ============================================================================\n\n/**\n * Create a debug label for showing render info.\n */\nfunction createDebugLabel(): HTMLDivElement {\n  const debugLabel = document.createElement(\"div\");\n  debugLabel.style.cssText = `\n    position: absolute;\n    top: -24px;\n    left: 0;\n    padding: 2px 8px;\n    font: bold 12px monospace;\n    background: rgba(0, 0, 0, 0.8);\n    border-radius: 3px;\n    white-space: nowrap;\n    z-index: 1000;\n    pointer-events: none;\n  `;\n  return debugLabel;\n}\n\n/**\n * Update debug label with resolution info.\n */\nfunction updateDebugLabel(\n  label: HTMLDivElement,\n  renderWidth: number,\n  renderHeight: number,\n  resolutionScale: number,\n): void {\n  const scaleColors: Record<number, string> = {\n    1: \"#00ff00\",\n    0.75: \"#ffff00\",\n    0.5: \"#ff8800\",\n    0.25: \"#ff0000\",\n  };\n  label.style.color = scaleColors[resolutionScale] || \"#ffffff\";\n  label.textContent = `Render: ${renderWidth}x${renderHeight} (${Math.round(resolutionScale * 100)}%)`;\n}\n\n/**\n * Wait for next animation frame (allows browser to complete layout)\n */\nfunction waitForFrame(): Promise<void> {\n  return new Promise(resolve => requestAnimationFrame(() => resolve()));\n}\n\n/**\n * Check if a canvas has any rendered content (not all transparent/uninitialized).\n * Returns true if there's ANY non-transparent pixel.\n */\nfunction canvasHasContent(canvas: HTMLCanvasElement): boolean {\n  const ctx = canvas.getContext(\"2d\");\n  if (!ctx) return false;\n  \n  try {\n    const width = canvas.width;\n    const height = canvas.height;\n    if (width === 0 || height === 0) return false;\n    \n    // Sample a horizontal strip across the middle of the canvas\n    // This catches most video content even if edges are black\n    const stripY = Math.floor(height / 2);\n    const imageData = ctx.getImageData(0, stripY, width, CANVAS_SAMPLE_STRIP_HEIGHT);\n    const data = imageData.data;\n    \n    // Check if ANY pixel has non-zero alpha (is not transparent)\n    // A truly blank/uninitialized canvas has all pixels at [0,0,0,0]\n    // A black video frame would have pixels at [0,0,0,255] (opaque black)\n    for (let i = 3; i < data.length; i += 4) {\n      if (data[i] !== 0) {\n        return true;\n      }\n    }\n    \n    return false;\n  } catch {\n    // Canvas might be tainted, assume it has content\n    return true;\n  }\n}\n\ninterface WaitForVideoContentResult {\n  ready: boolean;\n  blankVideos: string[];\n}\n\n/**\n * Wait for video canvases within a timegroup to have content.\n * Only checks videos that should be visible at the current time.\n * Returns result with ready status and list of blank video names.\n */\nasync function waitForVideoContent(\n  timegroup: EFTimegroup,\n  timeMs: number,\n  maxWaitMs: number,\n): Promise<WaitForVideoContentResult> {\n  const startTime = performance.now();\n  \n  // Find all video elements in the timegroup (including nested)\n  const allVideos = timegroup.querySelectorAll(\"ef-video\");\n  if (allVideos.length === 0) return { ready: true, blankVideos: [] };\n  \n  // Filter to only videos that should be visible at this time\n  const visibleVideos = Array.from(allVideos).filter(video => {\n    // Check if video itself is in time range\n    if (!isVisibleAtTime(video, timeMs)) return false;\n    \n    // Check if all ancestor timegroups are in time range\n    let parent = video.parentElement;\n    while (parent && parent !== timegroup) {\n      if (parent.tagName === 'EF-TIMEGROUP' && !isVisibleAtTime(parent, timeMs)) {\n        return false;\n      }\n      parent = parent.parentElement;\n    }\n    return true;\n  });\n  \n  if (visibleVideos.length === 0) return { ready: true, blankVideos: [] };\n  \n  const getBlankVideoNames = () => visibleVideos\n    .filter(video => {\n      const shadowCanvas = video.shadowRoot?.querySelector(\"canvas\");\n      return shadowCanvas && !canvasHasContent(shadowCanvas);\n    })\n    .map(v => (v as TemporalElement).src || v.id || 'unnamed');\n  \n  while (performance.now() - startTime < maxWaitMs) {\n    let allHaveContent = true;\n    \n    for (const video of visibleVideos) {\n      const shadowCanvas = video.shadowRoot?.querySelector(\"canvas\");\n      if (shadowCanvas && shadowCanvas.width > 0 && shadowCanvas.height > 0) {\n        if (!canvasHasContent(shadowCanvas)) {\n          allHaveContent = false;\n          break;\n        }\n      }\n    }\n    \n    if (allHaveContent) return { ready: true, blankVideos: [] };\n    \n    // Wait a bit and check again\n    await waitForFrame();\n  }\n  \n  return { ready: false, blankVideos: getBlankVideoNames() };\n}\n\n/**\n * Options for capturing from an existing render clone.\n */\nexport interface CaptureFromCloneOptions {\n  /** Scale factor for the output canvas (default: 0.25) */\n  scale?: number;\n  /** Content readiness strategy (default: \"immediate\") */\n  contentReadyMode?: ContentReadyMode;\n  /** Max wait time for blocking mode before throwing (default: 5000ms) */\n  blockingTimeoutMs?: number;\n  /** Original timegroup (for dimension and background reference) */\n  originalTimegroup?: EFTimegroup;\n}\n\n/**\n * Captures a frame from an already-seeked render clone.\n * Used internally by captureBatch for efficiency (reuses one clone across all captures).\n * \n * @param renderClone - A render clone that has already been seeked to the target time\n * @param renderContainer - The container holding the render clone (from createRenderClone)\n * @param options - Capture options\n * @returns Canvas with the rendered frame\n */\nexport async function captureFromClone(\n  renderClone: EFTimegroup,\n  renderContainer: HTMLElement,\n  options: CaptureFromCloneOptions = {},\n): Promise<HTMLCanvasElement> {\n  const {\n    scale = DEFAULT_THUMBNAIL_SCALE,\n    contentReadyMode = \"immediate\",\n    blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS,\n    originalTimegroup,\n  } = options;\n\n  // Use original timegroup dimensions if available, otherwise clone dimensions\n  const sourceForDimensions = originalTimegroup ?? renderClone;\n  const width = sourceForDimensions.offsetWidth || DEFAULT_WIDTH;\n  const height = sourceForDimensions.offsetHeight || DEFAULT_HEIGHT;\n\n  // Create canvas at scaled size\n  const dpr = window.devicePixelRatio || 1;\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = Math.floor(width * scale * dpr);\n  canvas.height = Math.floor(height * scale * dpr);\n  canvas.style.width = `${Math.floor(width * scale)}px`;\n  canvas.style.height = `${Math.floor(height * scale)}px`;\n\n  const ctx = canvas.getContext(\"2d\");\n  if (!ctx) {\n    throw new Error(\"Failed to get canvas 2d context\");\n  }\n\n  // Handle content readiness based on mode\n  const timeMs = renderClone.currentTimeMs;\n  \n  // NOTE: seekForRender() has already:\n  // 1. Called frameController.renderFrame() to coordinate FrameRenderable elements\n  // 2. Awaited #executeCustomFrameTasks() so frame tasks are complete\n  // No need to call frameController.renderFrame() again - it would fire tasks redundantly\n  \n  if (contentReadyMode === \"blocking\") {\n    const result = await waitForVideoContent(renderClone, timeMs, blockingTimeoutMs);\n    if (!result.ready) {\n      throw new ContentNotReadyError(timeMs, blockingTimeoutMs, result.blankVideos);\n    }\n  }\n\n  // Create RenderContext for caching during this capture operation\n  const renderContext = new RenderContext();\n  \n  try {\n    let image: HTMLCanvasElement | HTMLImageElement;\n    const renderMode = getEffectiveRenderMode();\n    \n    if (renderMode === \"native\") {\n      // NATIVE PATH: Render the seeked renderClone directly from live DOM\n      // The clone is already at the correct time, so drawElementImage captures its current\n      // visual state including video frames at the correct position.\n      // \n      // Position render container properly for capture\n      renderContainer.style.cssText = `\n        position: fixed;\n        left: 0;\n        top: 0;\n        width: ${width}px;\n        height: ${height}px;\n        pointer-events: none;\n        overflow: hidden;\n      `;\n      \n      // OPTIMIZATION: Always skip DPR scaling for captures (thumbnails and video export).\n      // Retina quality isn't needed for captured frames, and DPR=2 means 4x more pixels.\n      // Live preview uses a different code path (renderTimegroupToCanvas) which handles DPR properly.\n      image = await renderToImageNative(renderContainer, width, height, { skipDprScaling: true });\n    } else {\n      // FOREIGNOBJECT PATH: Build passive structure from the SEEKED render clone\n      // The clone is already at the correct time, so getComputedStyle captures the right values.\n      // Styles are synced during clone building in a single pass.\n      const t0 = performance.now();\n      const { container, syncState } = buildCloneStructure(renderClone, timeMs);\n      const buildTime = performance.now() - t0;\n\n      // Create wrapper using shared helper\n      const bgSource = originalTimegroup ?? renderClone;\n      const previewContainer = createPreviewContainer({\n        width,\n        height,\n        background: getComputedStyle(bgSource).background || \"#000\",\n      });\n      \n      const t1 = performance.now();\n      const styleEl = document.createElement(\"style\");\n      styleEl.textContent = collectDocumentStyles();\n      const stylesTime = performance.now() - t1;\n      previewContainer.appendChild(styleEl);\n      previewContainer.appendChild(container);\n      \n      // Ensure clone root is visible\n      overrideRootCloneStyles(syncState, true);\n\n      // Render using foreignObject serialization\n      // Pass scale, renderContext, and sourceMap for caching optimization\n      const t2 = performance.now();\n      image = await renderToImage(previewContainer, width, height, { \n        canvasScale: scale,\n        renderContext,\n        sourceMap: syncState.canvasSourceMap,\n      });\n      const renderTime = performance.now() - t2;\n      \n      logger.debug(`[captureFromClone] build=${buildTime.toFixed(0)}ms, styles=${stylesTime.toFixed(0)}ms, render=${renderTime.toFixed(0)}ms (canvasScale=${scale})`);\n    }\n\n    // Draw to canvas (may need scaling for native path which is at DPR)\n    const srcWidth = image.width;\n    const srcHeight = image.height;\n    ctx.drawImage(\n      image,\n      0, 0, srcWidth, srcHeight,\n      0, 0, canvas.width, canvas.height\n    );\n\n    return canvas;\n  } finally {\n    // Ensure RenderContext is disposed even if an error occurs\n    renderContext.dispose();\n  }\n}\n\n/**\n * Captures a single frame from a timegroup at a specific time.\n * \n * CLONE-TIMELINE ARCHITECTURE:\n * Creates an independent render clone, seeks it to the target time, and captures.\n * Prime-timeline is NEVER seeked - user can continue previewing/editing during capture.\n * \n * @param timegroup - The source timegroup\n * @param options - Capture options including timeMs, scale, contentReadyMode\n * @returns Canvas with the rendered frame\n * @throws ContentNotReadyError if blocking mode times out waiting for video content\n */\nexport async function captureTimegroupAtTime(\n  timegroup: EFTimegroup,\n  options: CaptureOptions,\n): Promise<HTMLCanvasElement> {\n  const {\n    timeMs,\n    scale = DEFAULT_THUMBNAIL_SCALE,\n    // skipRestore is deprecated with Clone-timeline (Prime is never seeked)\n    contentReadyMode = \"immediate\",\n    blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS,\n  } = options;\n\n  // CLONE-TIMELINE: Create a short-lived render clone for this capture\n  // Prime-timeline is NEVER seeked - clone is fully independent\n  const { clone: renderClone, container: renderContainer, cleanup: cleanupRenderClone } = \n    await timegroup.createRenderClone();\n  \n  try {\n    // Seek the clone to target time (Prime stays at user position)\n    // Use seekForRender which bypasses duration clamping - render clones may have\n    // zero duration initially until media durations are computed, but we still\n    // want to seek to the requested time for capture purposes.\n    await renderClone.seekForRender(timeMs);\n    \n    // Use the shared capture helper\n    return await captureFromClone(renderClone, renderContainer, {\n      scale,\n      contentReadyMode,\n      blockingTimeoutMs,\n      originalTimegroup: timegroup,\n    });\n  } finally {\n    // Clean up the render clone\n    cleanupRenderClone();\n  }\n}\n\n/** Epsilon for comparing time values (ms) - times within this are considered equal */\nconst TIME_EPSILON_MS = 1;\n\n/** Default scale for preview rendering */\nconst DEFAULT_PREVIEW_SCALE = 1;\n\n/** Default resolution scale (full resolution) */\nconst DEFAULT_RESOLUTION_SCALE = 1;\n\n/**\n * Convert relative time to absolute time for a timegroup.\n * Nested timegroup children have ABSOLUTE startTimeMs values,\n * so relative capture times must be converted for temporal culling.\n */\nfunction toAbsoluteTime(timegroup: EFTimegroup, relativeTimeMs: number): number {\n  return relativeTimeMs + (timegroup.startTimeMs ?? 0);\n}\n\nexport interface CanvasPreviewResult {\n  /**\n   * Wrapper container holding the canvas and debug label.\n   * Append this to your DOM - the canvas inside will receive transforms.\n   */\n  container: HTMLDivElement;\n  canvas: HTMLCanvasElement;\n  /**\n   * Call this to re-render the timegroup to canvas at current visual state.\n   * Returns a promise that resolves when rendering is complete.\n   */\n  refresh: () => Promise<void>;\n  /**\n   * Dynamically change the resolution scale without rebuilding the clone structure.\n   * This is nearly instant - just updates CSS and internal variables.\n   * The next refresh() call will render at the new resolution.\n   */\n  setResolutionScale: (scale: number) => void;\n  /**\n   * Get the current resolution scale.\n   */\n  getResolutionScale: () => number;\n  /**\n   * Dispose the preview and release resources.\n   * Call this when the preview is no longer needed.\n   */\n  dispose: () => void;\n}\n\n/**\n * Options for canvas preview rendering.\n */\nexport interface CanvasPreviewOptions {\n  /**\n   * Output scale factor (default: 1).\n   * Scales the final canvas size.\n   */\n  scale?: number;\n  \n  /**\n   * Resolution scale for internal rendering (default: 1).\n   * Reduces the internal render resolution for better performance.\n   * The canvas CSS size remains the same (browser upscales).\n   * - 1: Full resolution\n   * - 0.75: 3/4 resolution\n   * - 0.5: Half resolution\n   * - 0.25: Quarter resolution\n   */\n  resolutionScale?: number;\n}\n\n/**\n * Renders a timegroup preview to a canvas using SVG foreignObject.\n * \n * Captures the prime timeline's current visual state including DOM changes\n * from frame tasks (SVG paths, canvas content, text updates, etc.).\n * \n * Optimized with:\n * - Passive clone structure rebuilt each frame from prime's current state\n * - Temporal bucketing for time-based culling\n * - RenderContext for canvas pixel caching across frames\n * - Resolution scaling for performance (renders at lower resolution, CSS upscales)\n *\n * @param timegroup - The source timegroup to preview (prime timeline)\n * @param scaleOrOptions - Scale factor (default 1) or options object\n * @returns Object with canvas and refresh function\n */\nexport function renderTimegroupToCanvas(\n  timegroup: EFTimegroup,\n  scaleOrOptions: number | CanvasPreviewOptions = DEFAULT_PREVIEW_SCALE,\n): CanvasPreviewResult {\n  // Normalize options\n  const options: CanvasPreviewOptions = typeof scaleOrOptions === \"number\"\n    ? { scale: scaleOrOptions }\n    : scaleOrOptions;\n  \n  const scale = options.scale ?? DEFAULT_PREVIEW_SCALE;\n  // These are mutable to support dynamic resolution changes\n  let currentResolutionScale = options.resolutionScale ?? DEFAULT_RESOLUTION_SCALE;\n  \n  const width = timegroup.offsetWidth || DEFAULT_WIDTH;\n  const height = timegroup.offsetHeight || DEFAULT_HEIGHT;\n  const dpr = window.devicePixelRatio || 1;\n  \n  // Calculate effective render dimensions (internal resolution) - mutable\n  let renderWidth = Math.floor(width * currentResolutionScale);\n  let renderHeight = Math.floor(height * currentResolutionScale);\n\n  // Create canvas with proper DPR handling\n  const canvas = createDprCanvas({\n    renderWidth,\n    renderHeight,\n    scale,\n    fullWidth: width,\n    fullHeight: height,\n    dpr,\n  });\n  \n  // Create wrapper container with debug label\n  const wrapperContainer = document.createElement(\"div\");\n  wrapperContainer.style.cssText = \"position: relative; display: inline-block;\";\n  const debugLabel = createDebugLabel();\n  wrapperContainer.appendChild(debugLabel);\n  wrapperContainer.appendChild(canvas);\n\n  const ctx = canvas.getContext(\"2d\");\n  if (!ctx) {\n    throw new Error(\"Failed to get canvas 2d context\");\n  }\n\n  // Track render state\n  let rendering = false;\n  let lastTimeMs = -1;\n  let disposed = false;\n\n  // Create RenderContext for caching across refresh calls\n  const renderContext = new RenderContext();\n  \n  // Create FrameController for coordinating element rendering\n  // Cached for the lifetime of this preview instance\n  const frameController = new FrameController(timegroup);\n  \n  // Reusable preview container and style element\n  // Container gets new content each frame but CSS styles are cached\n  const previewContainer = createPreviewContainer({\n    width: renderWidth,\n    height: renderHeight,\n    background: getComputedStyle(timegroup).background || \"#000\",\n  });\n  \n  const styleEl = document.createElement(\"style\");\n  styleEl.textContent = collectDocumentStyles();\n  previewContainer.appendChild(styleEl);\n\n  // Log resolution scale on first render for debugging\n  let hasLoggedScale = false;\n  \n  // Pending resolution change - applied at start of next refresh to avoid blanking\n  let pendingResolutionScale: number | null = null;\n  \n  /**\n   * Apply pending resolution scale changes.\n   * Called at the start of refresh() before rendering, so the old content\n   * stays visible until new content is ready to be drawn.\n   */\n  const applyPendingResolutionChange = (): void => {\n    if (pendingResolutionScale === null) return;\n    \n    const newScale = pendingResolutionScale;\n    pendingResolutionScale = null;\n    \n    currentResolutionScale = newScale;\n    renderWidth = Math.floor(width * currentResolutionScale);\n    renderHeight = Math.floor(height * currentResolutionScale);\n    \n    // Update previewContainer dimensions (affects what renderToImage produces)\n    previewContainer.style.width = `${renderWidth}px`;\n    previewContainer.style.height = `${renderHeight}px`;\n    \n    // Update clone transform\n    if (currentResolutionScale < 1) {\n      container.style.transform = `scale(${currentResolutionScale})`;\n      container.style.transformOrigin = \"top left\";\n    } else {\n      container.style.transform = \"\";\n    }\n    \n    // Canvas dimensions will be updated right before drawing (in refresh)\n    // to avoid clearing the canvas until new content is ready\n  };\n  \n  /**\n   * Dynamically change resolution scale without rebuilding clone structure.\n   * The actual change is deferred until next refresh() to avoid blanking -\n   * old content stays visible until new content is ready.\n   */\n  const setResolutionScale = (newScale: number): void => {\n    // Clamp to valid range\n    newScale = Math.max(0.1, Math.min(1, newScale));\n    \n    if (newScale === currentResolutionScale && pendingResolutionScale === null) return;\n    \n    // Queue the change - will be applied at start of next refresh\n    pendingResolutionScale = newScale;\n    \n    // Force re-render on next refresh by invalidating lastTimeMs\n    lastTimeMs = -1;\n  };\n  \n  const getResolutionScale = (): number => pendingResolutionScale ?? currentResolutionScale;\n  \n  const refresh = async (): Promise<void> => {\n    if (rendering || disposed) return;\n    // Clone-timeline: captures use separate clones, Prime-timeline is never locked\n    \n    const sourceTimeMs = timegroup.currentTimeMs ?? 0;\n    const userTimeMs = timegroup.userTimeMs ?? 0;\n    if (Math.abs(sourceTimeMs - userTimeMs) > TIME_EPSILON_MS) return;\n    \n    if (userTimeMs === lastTimeMs) return;\n    lastTimeMs = userTimeMs;\n    \n    rendering = true;\n    \n    // Apply any pending resolution changes before rendering\n    // This updates previewContainer and clone transform, but NOT canvas dimensions yet\n    applyPendingResolutionChange();\n    \n    // Log scale info once per initialization\n    if (!hasLoggedScale) {\n      hasLoggedScale = true;\n      const mode = getEffectiveRenderMode();\n      logger.debug(`[renderTimegroupToCanvas] Resolution scale: ${currentResolutionScale} (${width}x${height} → ${renderWidth}x${renderHeight}), canvas buffer: ${canvas.width}x${canvas.height}, CSS size: ${canvas.style.width}x${canvas.style.height}, renderMode: ${mode}`);\n    }\n\n    try {\n      // Use FrameController to ensure all FrameRenderable elements are ready\n      // This coordinates prepare → render phases before we capture their state\n      await frameController.renderFrame(userTimeMs);\n      \n      // Build passive structure from prime timeline's CURRENT state\n      // Frame tasks have already run above, so DOM changes are captured\n      const absoluteTimeMs = toAbsoluteTime(timegroup, userTimeMs);\n      const { container, syncState } = buildCloneStructure(timegroup, absoluteTimeMs);\n      \n      // Apply CSS transform to scale down the content within the container\n      // This makes the clone render at reduced complexity\n      if (currentResolutionScale < 1) {\n        container.style.transform = `scale(${currentResolutionScale})`;\n        container.style.transformOrigin = \"top left\";\n      }\n      \n      // Clear previous container content and add new structure\n      while (previewContainer.firstChild !== styleEl && previewContainer.firstChild) {\n        previewContainer.removeChild(previewContainer.firstChild);\n      }\n      previewContainer.appendChild(container);\n      overrideRootCloneStyles(syncState);\n\n      // Remove hidden nodes from DOM for serialization - they won't be serialized\n      // or have their canvases encoded. This is a significant optimization.\n      const removedNodes = removeHiddenNodesForSerialization(syncState);\n\n      // Render at scaled dimensions with canvas scaling for internal video frames\n      // Pass renderContext and sourceMap for caching optimization\n      const t0 = performance.now();\n      const image = await renderToImage(previewContainer, renderWidth, renderHeight, {\n        canvasScale: currentResolutionScale,\n        renderContext,\n        sourceMap: syncState.canvasSourceMap,\n      });\n      const renderTime = performance.now() - t0;\n      \n      // Restore hidden nodes for next frame's delta tracking\n      restoreHiddenNodes(removedNodes);\n\n      // Update canvas buffer dimensions NOW, right before drawing\n      // This clears the canvas, but we immediately draw new content\n      const targetWidth = Math.floor(renderWidth * scale * dpr);\n      const targetHeight = Math.floor(renderHeight * scale * dpr);\n      if (canvas.width !== targetWidth || canvas.height !== targetHeight) {\n        canvas.width = targetWidth;\n        canvas.height = targetHeight;\n      } else {\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n      }\n      \n      ctx.save();\n      ctx.scale(dpr * scale, dpr * scale);\n      ctx.drawImage(image, 0, 0);\n      ctx.restore();\n      \n      // Log render time periodically (every 60 frames)\n      defaultProfiler.incrementRenderCount();\n      if (defaultProfiler.shouldLogByFrameCount(60)) {\n        logger.debug(`[renderTimegroupToCanvas] Frame render: ${renderTime.toFixed(1)}ms (resolutionScale=${currentResolutionScale}, image=${image.width}x${image.height})`);\n      }\n      \n      // Update debug label\n      updateDebugLabel(debugLabel, renderWidth, renderHeight, currentResolutionScale);\n    } catch (e) {\n      logger.error(\"Canvas preview render failed:\", e);\n    } finally {\n      rendering = false;\n    }\n  };\n\n  /**\n   * Dispose the preview and release resources.\n   */\n  const dispose = (): void => {\n    if (disposed) return;\n    disposed = true;\n    frameController.abort();\n    renderContext.dispose();\n  };\n\n  // Do initial render\n  refresh();\n\n  return { container: wrapperContainer, canvas, refresh, setResolutionScale, getResolutionScale, dispose };\n}\n"],"mappings":"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"}
+{"version":3,"file":"renderTimegroupToCanvas.js","names":["timeMs: number","timeoutMs: number","blankVideos: string[]","renderState: RenderState","options: CanvasPreviewOptions","pendingResolutionScale: number | null","captureCanvas: HTMLCanvasElement | null","captureCtx: HtmlInCanvasContext | null","originalParent: ParentNode | null","originalNextSibling: ChildNode | null"],"sources":["../../src/preview/renderTimegroupToCanvas.ts"],"sourcesContent":["import type { EFTimegroup } from \"../elements/EFTimegroup.js\";\nimport type {\n  CaptureOptions,\n  CaptureFromCloneOptions,\n  GeneratedThumbnail,\n  GenerateThumbnailsOptions,\n  ThumbnailQueue,\n  CanvasPreviewResult,\n  CanvasPreviewOptions,\n} from \"./renderTimegroupToCanvas.types.js\";\nimport { RenderContext } from \"./RenderContext.js\";\nimport { FrameController } from \"./FrameController.js\";\nimport { captureTimelineToDataUri } from \"./rendering/serializeTimelineDirect.js\";\nimport {\n  updateAnimations,\n  type AnimatableElement,\n} from \"../elements/updateAnimations.js\";\n\n// Re-export renderer types for external use\nexport type { RenderOptions, RenderResult, Renderer } from \"./renderers.js\";\nexport { getEffectiveRenderMode, isCanvas, isImage } from \"./renderers.js\";\nimport {\n  type TemporalElement,\n  isVisibleAtTime,\n  DEFAULT_WIDTH,\n  DEFAULT_HEIGHT,\n  DEFAULT_CAPTURE_SCALE,\n  DEFAULT_BLOCKING_TIMEOUT_MS,\n} from \"./previewTypes.js\";\nimport { defaultProfiler } from \"./RenderProfiler.js\";\nimport { logger } from \"./logger.js\";\n\n// Import rendering modules\nimport { loadImageFromDataUri } from \"./rendering/loadImage.js\";\nimport {\n  createDprCanvas,\n  renderToImageNative,\n} from \"./rendering/renderToImageNative.js\";\nimport {\n  clearInlineImageCache,\n  getInlineImageCacheSize,\n} from \"./rendering/inlineImages.js\";\nimport {\n  isNativeCanvasApiAvailable,\n  getRenderMode,\n} from \"./previewSettings.js\";\nimport type {\n  HtmlInCanvasContext,\n  HtmlInCanvasElement,\n} from \"./rendering/types.js\";\n\n// Re-export rendering types and functions for external use\nexport { loadImageFromDataUri };\n\n// ============================================================================\n// Constants (module-specific, not shared)\n// ============================================================================\n\n/** Number of rows to sample when checking canvas content */\nconst CANVAS_SAMPLE_STRIP_HEIGHT = 4;\n\n// ============================================================================\n// Types\n// ============================================================================\n\n// Re-export types from type-only module (zero side effects)\nexport type {\n  ContentReadyMode,\n  CaptureOptions,\n  CaptureFromCloneOptions,\n  GeneratedThumbnail,\n  GenerateThumbnailsOptions,\n  ThumbnailQueue,\n  CanvasPreviewResult,\n  CanvasPreviewOptions,\n} from \"./renderTimegroupToCanvas.types.js\";\n\n/**\n * Error thrown when video content is not ready within the blocking timeout.\n */\nexport class ContentNotReadyError extends Error {\n  constructor(\n    public readonly timeMs: number,\n    public readonly timeoutMs: number,\n    public readonly blankVideos: string[],\n  ) {\n    super(\n      `Video content not ready at ${timeMs}ms after ${timeoutMs}ms timeout. Blank videos: ${blankVideos.join(\", \")}`,\n    );\n    this.name = \"ContentNotReadyError\";\n  }\n}\n\n// ============================================================================\n// Module State (reset via resetRenderState)\n// ============================================================================\n\n/**\n * Module-level render state including caches and reusable objects.\n */\ninterface RenderState {\n  inlineImageCache: Map<string, string>;\n  layoutInitializedCanvases: WeakSet<HTMLCanvasElement>;\n  xmlSerializer: XMLSerializer | null;\n  textEncoder: TextEncoder;\n  metrics: {\n    inlineImageCacheHits: number;\n    inlineImageCacheMisses: number;\n    inlineImageCacheEvictions: number;\n  };\n}\n\n/**\n * Module-level state for render operations.\n * Note: xmlSerializer is lazy-initialized for Node.js compatibility\n */\nconst renderState: RenderState = {\n  inlineImageCache: new Map(),\n  layoutInitializedCanvases: new WeakSet(),\n  xmlSerializer: null, // Lazy-initialized in browser context\n  textEncoder: new TextEncoder(),\n  metrics: {\n    inlineImageCacheHits: 0,\n    inlineImageCacheMisses: 0,\n    inlineImageCacheEvictions: 0,\n  },\n};\n\n/**\n * Get the current render state for testing and debugging.\n * @returns The module-level render state object\n */\nexport function getRenderState(): RenderState {\n  return renderState;\n}\n\n/**\n * Get cache metrics for monitoring performance.\n * @returns Object with cache hit/miss/eviction counts\n */\nexport function getCacheMetrics(): RenderState[\"metrics\"] {\n  return { ...renderState.metrics };\n}\n\n/**\n * Reset cache metrics to zero.\n */\nexport function resetCacheMetrics(): void {\n  renderState.metrics.inlineImageCacheHits = 0;\n  renderState.metrics.inlineImageCacheMisses = 0;\n  renderState.metrics.inlineImageCacheEvictions = 0;\n}\n\n/**\n * Reset all module state including profiling counters, caches, and logging flags.\n * Call at the start of export sessions to ensure clean state.\n */\nexport function resetRenderState(): void {\n  defaultProfiler.reset();\n  clearInlineImageCache();\n  resetCacheMetrics();\n}\n\n// Re-export cache management functions\nexport { clearInlineImageCache, getInlineImageCacheSize };\n\n/**\n * DEBUG: Capture a single thumbnail at the current time.\n * Call from console: window.debugCaptureThumbnail()\n */\nif (typeof window !== \"undefined\") {\n  (window as any).debugCaptureThumbnail = async function () {\n    const timegroup = document.querySelector(\"ef-timegroup\") as any;\n    if (!timegroup) {\n      console.error(\"No timegroup found\");\n      return;\n    }\n\n    const currentTime = timegroup.currentTimeMs ?? 0;\n\n    try {\n      const result = await captureTimegroupAtTime(timegroup, {\n        timeMs: currentTime,\n        scale: 0.25,\n        contentReadyMode: \"blocking\",\n        blockingTimeoutMs: 1000,\n      });\n\n      // Create a temporary img element to display the result\n      const img = document.createElement(\"img\");\n      if (result instanceof HTMLCanvasElement) {\n        img.src = result.toDataURL();\n      } else if (result instanceof HTMLImageElement) {\n        img.src = result.src;\n      }\n      img.style.cssText =\n        \"position:fixed;top:10px;right:10px;border:2px solid red;z-index:99999;\";\n      document.body.appendChild(img);\n\n      return result;\n    } catch (err) {\n      console.error(\"[DEBUG] Capture failed:\", err);\n      throw err;\n    }\n  };\n}\n\n// ============================================================================\n// Internal Helpers\n// ============================================================================\n\n/**\n * Wait for next animation frame (allows browser to complete layout)\n */\nfunction waitForFrame(): Promise<void> {\n  return new Promise((resolve) => requestAnimationFrame(() => resolve()));\n}\n\n/**\n * Check if a canvas has any rendered content (not all transparent/uninitialized).\n * Returns true if there's ANY non-transparent pixel.\n */\nfunction canvasHasContent(canvas: HTMLCanvasElement): boolean {\n  const ctx = canvas.getContext(\"2d\", { willReadFrequently: true });\n  if (!ctx) return false;\n\n  try {\n    const width = canvas.width;\n    const height = canvas.height;\n    if (width === 0 || height === 0) return false;\n\n    // Sample a horizontal strip across the middle of the canvas\n    // This catches most video content even if edges are black\n    const stripY = Math.floor(height / 2);\n    const imageData = ctx.getImageData(\n      0,\n      stripY,\n      width,\n      CANVAS_SAMPLE_STRIP_HEIGHT,\n    );\n    const data = imageData.data;\n\n    // Check if ANY pixel has non-zero alpha (is not transparent)\n    // A truly blank/uninitialized canvas has all pixels at [0,0,0,0]\n    // A black video frame would have pixels at [0,0,0,255] (opaque black)\n    for (let i = 3; i < data.length; i += 4) {\n      if (data[i] !== 0) {\n        return true;\n      }\n    }\n\n    return false;\n  } catch {\n    // Canvas might be tainted, assume it has content\n    return true;\n  }\n}\n\ninterface WaitForVideoContentResult {\n  ready: boolean;\n  blankVideos: string[];\n}\n\n/**\n * Wait for video canvases within a timegroup to have content.\n * Only checks videos that should be visible at the current time.\n * Returns result with ready status and list of blank video names.\n */\nexport async function waitForVideoContent(\n  timegroup: EFTimegroup,\n  timeMs: number,\n  maxWaitMs: number,\n): Promise<WaitForVideoContentResult> {\n  const startTime = performance.now();\n\n  // Find all video elements in the timegroup (including nested)\n  const allVideos = timegroup.querySelectorAll(\"ef-video\");\n  if (allVideos.length === 0) return { ready: true, blankVideos: [] };\n\n  // Filter to only videos that should be visible at this time\n  const visibleVideos = Array.from(allVideos).filter((video) => {\n    // Check if video itself is in time range\n    if (!isVisibleAtTime(video, timeMs)) return false;\n\n    // Check if all ancestor timegroups are in time range\n    let parent = video.parentElement;\n    while (parent && parent !== timegroup) {\n      if (\n        parent.tagName === \"EF-TIMEGROUP\" &&\n        !isVisibleAtTime(parent, timeMs)\n      ) {\n        return false;\n      }\n      parent = parent.parentElement;\n    }\n    return true;\n  });\n\n  if (visibleVideos.length === 0) return { ready: true, blankVideos: [] };\n\n  const getBlankVideoNames = () =>\n    visibleVideos\n      .filter((video) => {\n        const shadowCanvas = video.shadowRoot?.querySelector(\"canvas\");\n        return shadowCanvas && !canvasHasContent(shadowCanvas);\n      })\n      .map((v) => (v as TemporalElement).src || v.id || \"unnamed\");\n\n  while (performance.now() - startTime < maxWaitMs) {\n    let allHaveContent = true;\n\n    for (const video of visibleVideos) {\n      const shadowCanvas = video.shadowRoot?.querySelector(\"canvas\");\n      if (shadowCanvas && shadowCanvas.width > 0 && shadowCanvas.height > 0) {\n        if (!canvasHasContent(shadowCanvas)) {\n          allHaveContent = false;\n          break;\n        }\n      }\n    }\n\n    if (allHaveContent) return { ready: true, blankVideos: [] };\n\n    // Wait a bit and check again\n    await waitForFrame();\n  }\n\n  return { ready: false, blankVideos: getBlankVideoNames() };\n}\n\n/**\n * Captures a frame from an already-seeked render clone.\n * Used internally by captureBatch for efficiency (reuses one clone across all captures).\n *\n * @param renderClone - A render clone that has already been seeked to the target time\n * @param renderContainer - The container holding the render clone (from createRenderClone)\n * @param options - Capture options\n * @returns Canvas or Image with the rendered frame (both are CanvasImageSource)\n */\nexport async function captureFromClone(\n  renderClone: EFTimegroup,\n  _renderContainer: HTMLElement,\n  options: CaptureFromCloneOptions = {},\n): Promise<CanvasImageSource> {\n  const {\n    scale = DEFAULT_CAPTURE_SCALE,\n    contentReadyMode = \"immediate\",\n    blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS,\n    originalTimegroup,\n    timeMs: explicitTimeMs,\n    canvasMode,\n  } = options;\n\n  // Use explicit time if provided, otherwise fall back to clone's currentTimeMs\n  // CRITICAL: Using explicit time ensures temporal visibility checks are accurate\n  // NOTE: Must be defined BEFORE any logging that references timeMs\n  const timeMs = explicitTimeMs ?? renderClone.currentTimeMs;\n\n  // Use original timegroup dimensions if available, otherwise clone dimensions\n  const sourceForDimensions = originalTimegroup ?? renderClone;\n  const width = sourceForDimensions.offsetWidth || DEFAULT_WIDTH;\n  const height = sourceForDimensions.offsetHeight || DEFAULT_HEIGHT;\n\n  // NOTE: seekForRender() has already:\n  // 1. Called frameController.renderFrame() to coordinate FrameRenderable elements\n  // 2. Awaited #executeCustomFrameTasks() so frame tasks are complete\n  // No need to call frameController.renderFrame() again - it would fire tasks redundantly\n\n  if (contentReadyMode === \"blocking\") {\n    const result = await waitForVideoContent(\n      renderClone,\n      timeMs,\n      blockingTimeoutMs,\n    );\n    if (!result.ready) {\n      throw new ContentNotReadyError(\n        timeMs,\n        blockingTimeoutMs,\n        result.blankVideos,\n      );\n    }\n  }\n\n  // Determine effective canvas mode:\n  // 1. If explicitly specified, use that\n  // 2. If \"native\" is requested but not available, fall back to foreignObject\n  // 3. If not specified, default to foreignObject for compatibility\n  const effectiveCanvasMode = (() => {\n    if (!canvasMode) return \"foreignObject\";\n    if (canvasMode === \"native\" && !isNativeCanvasApiAvailable()) {\n      logger.debug(\n        \"[captureFromClone] Native canvas mode requested but not available, falling back to foreignObject\",\n      );\n      return \"foreignObject\";\n    }\n    return canvasMode;\n  })();\n\n  // Create RenderContext for caching during this capture operation (only needed for foreignObject)\n  const renderContext = new RenderContext();\n\n  try {\n    if (effectiveCanvasMode === \"native\") {\n      // NATIVE PATH: Use drawElementImage API (~1.76x faster than foreignObject)\n      // No DOM serialization, no canvas-to-dataURL encoding, no image loading\n      // Direct browser-native rendering\n\n      const t0 = performance.now();\n      const canvas = await renderToImageNative(renderClone, width, height, {\n        skipDprScaling: true, // Use 1x DPR for video export (4x fewer pixels!)\n      });\n      const renderTime = performance.now() - t0;\n\n      logger.debug(\n        `[captureFromClone] native render=${renderTime.toFixed(0)}ms (canvasScale=${scale})`,\n      );\n\n      return canvas;\n    } else {\n      // FOREIGNOBJECT PATH: Serialize DOM → SVG → Image → Canvas\n      // More compatible but slower than native path\n\n      // NOTE: seekForRender() has already ensured rendering is complete, including:\n      // - Lit updates propagated\n      // - All LitElement descendants updated\n      // - frameController.renderFrame() called for FrameRenderable elements\n      // - Layout stabilization complete\n      // No additional RAF wait needed - can serialize immediately\n\n      const t0 = performance.now();\n      const dataUri = await captureTimelineToDataUri(\n        renderClone,\n        width,\n        height,\n        {\n          renderContext,\n          canvasScale: scale,\n          timeMs,\n        },\n      );\n      const serializeTime = performance.now() - t0;\n\n      const t1 = performance.now();\n      const image = await loadImageFromDataUri(dataUri);\n      const loadTime = performance.now() - t1;\n\n      logger.debug(\n        `[captureFromClone] foreignObject serialize=${serializeTime.toFixed(0)}ms, load=${loadTime.toFixed(0)}ms (canvasScale=${scale})`,\n      );\n\n      // Return image directly - no copy needed!\n      return image;\n    }\n  } finally {\n    // Ensure RenderContext is disposed even if an error occurs\n    renderContext.dispose();\n  }\n}\n\n/**\n * Captures a single frame from a timegroup at a specific time.\n *\n * CLONE-TIMELINE ARCHITECTURE:\n * Creates an independent render clone, seeks it to the target time, and captures.\n * Prime-timeline is NEVER seeked - user can continue previewing/editing during capture.\n *\n * @param timegroup - The source timegroup\n * @param options - Capture options including timeMs, scale, contentReadyMode\n * @returns Canvas with the rendered frame\n * @throws ContentNotReadyError if blocking mode times out waiting for video content\n */\nexport async function captureTimegroupAtTime(\n  timegroup: EFTimegroup,\n  options: CaptureOptions,\n): Promise<CanvasImageSource> {\n  const {\n    timeMs,\n    scale = DEFAULT_CAPTURE_SCALE,\n    // skipRestore is deprecated with Clone-timeline (Prime is never seeked)\n    contentReadyMode = \"immediate\",\n    blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS,\n    canvasMode,\n    skipClone = false,\n  } = options;\n\n  if (skipClone) {\n    // DIRECT RENDERING: Skip clone creation for headless server rendering\n    // Seek prime timeline directly and capture from it\n    // WARNING: This modifies the prime timeline! Only use in headless contexts.\n\n    const seekStart = performance.now();\n    await timegroup.seekForRender(timeMs);\n    const seekMs = performance.now() - seekStart;\n\n    const renderStart = performance.now();\n    // Use timegroup's actual container (parentElement or document.body as fallback)\n    const container = (timegroup.parentElement || document.body) as HTMLElement;\n    const result = await captureFromClone(timegroup, container, {\n      scale,\n      contentReadyMode,\n      blockingTimeoutMs,\n      originalTimegroup: undefined, // No original since we're rendering the prime\n      canvasMode,\n      timeMs, // Pass explicit time since we're not using a clone\n    });\n    const renderMs = performance.now() - renderStart;\n\n    // Store timing (no clone time since we skipped it)\n    if (typeof result === \"object\" && result !== null) {\n      (result as any).__perfTiming = { cloneMs: 0, seekMs, renderMs };\n    }\n\n    return result;\n  }\n\n  // CLONE-TIMELINE: Create a short-lived render clone for this capture\n  // Prime-timeline is NEVER seeked - clone is fully independent\n  const cloneStart = performance.now();\n  const {\n    clone: renderClone,\n    container: renderContainer,\n    cleanup: cleanupRenderClone,\n  } = await timegroup.createRenderClone();\n  const cloneMs = performance.now() - cloneStart;\n\n  try {\n    // Seek the clone to target time (Prime stays at user position)\n    // Use seekForRender which bypasses duration clamping - render clones may have\n    // zero duration initially until media durations are computed, but we still\n    // want to seek to the requested time for capture purposes.\n    const seekStart = performance.now();\n    await renderClone.seekForRender(timeMs);\n    const seekMs = performance.now() - seekStart;\n\n    // Use the shared capture helper\n    const renderStart = performance.now();\n    const result = await captureFromClone(renderClone, renderContainer, {\n      scale,\n      contentReadyMode,\n      blockingTimeoutMs,\n      originalTimegroup: timegroup,\n      canvasMode,\n    });\n    const renderMs = performance.now() - renderStart;\n\n    // Store timing on the result for access by callers (if they need it)\n    // Note: CanvasImageSource doesn't support custom properties, but we can attach them anyway\n    if (typeof result === \"object\" && result !== null) {\n      (result as any).__perfTiming = { cloneMs, seekMs, renderMs };\n    }\n\n    return result;\n  } finally {\n    // Clean up the render clone\n    cleanupRenderClone();\n  }\n}\n\n/**\n * Generate thumbnails using an existing render clone and mutable queue.\n * The queue can be modified while generation is in progress.\n *\n * @param renderClone - Pre-created render clone to use\n * @param renderContainer - Container for the render clone\n * @param queue - Mutable queue that provides timestamps\n * @param options - Capture options (scale, contentReadyMode, etc.)\n * @yields Objects with { timeMs, canvas } for each captured thumbnail\n *\n * @example\n * ```ts\n * const queue = new MutableTimestampQueue();\n * queue.reset([0, 100, 200]);\n *\n * for await (const { timeMs, canvas } of generateThumbnailsFromClone(clone, container, queue)) {\n *   cache.set(timeMs, canvas);\n *   // Queue can be modified here while generator continues\n * }\n * ```\n */\nexport async function* generateThumbnailsFromClone(\n  renderClone: EFTimegroup,\n  renderContainer: HTMLElement,\n  queue: ThumbnailQueue,\n  options: GenerateThumbnailsOptions = {},\n): AsyncGenerator<GeneratedThumbnail> {\n  const {\n    scale = DEFAULT_CAPTURE_SCALE,\n    contentReadyMode = \"immediate\",\n    blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS,\n    signal,\n  } = options;\n\n  while (true) {\n    // Check if aborted before starting work\n    if (signal?.aborted) {\n      break;\n    }\n\n    const timeMs = queue.shift();\n    if (timeMs === undefined) {\n      // Queue is empty, generator exits\n      break;\n    }\n\n    // Seek the clone to the target time\n    await renderClone.seekForRender(timeMs);\n\n    // Check if aborted after seek (before expensive capture)\n    if (signal?.aborted) {\n      break;\n    }\n\n    // Capture from the seeked clone, passing explicit timeMs\n    const canvas = await captureFromClone(renderClone, renderContainer, {\n      scale,\n      contentReadyMode,\n      blockingTimeoutMs,\n      timeMs, // CRITICAL: Pass explicit time for accurate temporal visibility\n    });\n\n    // Yield the result with explicit timestamp association\n    yield { timeMs, canvas };\n  }\n}\n\n/**\n * Generate thumbnails for multiple timestamps efficiently using a single render clone.\n * This avoids the overhead of creating/destroying a clone for each thumbnail.\n *\n * @param timegroup - The timegroup to capture\n * @param timestamps - Array of timestamps to capture (in milliseconds)\n * @param options - Capture options (scale, contentReadyMode, etc.)\n * @param signal - Optional AbortSignal to cancel generation\n * @yields Objects with { timeMs, canvas } for each captured thumbnail\n *\n * @example\n * ```ts\n * for await (const { timeMs, canvas } of generateThumbnails(tg, [0, 100, 200])) {\n *   console.log(`Got thumbnail for ${timeMs}ms`);\n *   thumbnailCache.set(timeMs, canvas);\n * }\n * ```\n */\nexport async function* generateThumbnails(\n  timegroup: EFTimegroup,\n  timestamps: number[],\n  options: GenerateThumbnailsOptions = {},\n  signal?: AbortSignal,\n): AsyncGenerator<GeneratedThumbnail> {\n  const {\n    scale = DEFAULT_CAPTURE_SCALE,\n    contentReadyMode = \"immediate\",\n    blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS,\n  } = options;\n\n  // Create a single render clone for all thumbnails\n  const {\n    clone: renderClone,\n    container: renderContainer,\n    cleanup: cleanupRenderClone,\n  } = await timegroup.createRenderClone();\n\n  try {\n    for (const timeMs of timestamps) {\n      // Check for abort before each capture\n      signal?.throwIfAborted();\n\n      // Seek the clone to the target time\n      await renderClone.seekForRender(timeMs);\n\n      // Capture from the seeked clone\n      const canvas = await captureFromClone(renderClone, renderContainer, {\n        scale,\n        contentReadyMode,\n        blockingTimeoutMs,\n        originalTimegroup: timegroup,\n      });\n\n      // Yield the result with explicit timestamp association\n      yield { timeMs, canvas };\n    }\n  } finally {\n    // Always clean up the render clone\n    cleanupRenderClone();\n  }\n}\n\n/** Epsilon for comparing time values (ms) - times within this are considered equal */\nconst TIME_EPSILON_MS = 1;\n\n/** Default scale for preview rendering */\nconst DEFAULT_PREVIEW_SCALE = 1;\n\n/** Default resolution scale (full resolution) */\nconst DEFAULT_RESOLUTION_SCALE = 1;\n\n/**\n * Convert relative time to absolute time for a timegroup.\n * Nested timegroup children have ABSOLUTE startTimeMs values,\n * so relative capture times must be converted for temporal culling.\n */\nfunction toAbsoluteTime(\n  timegroup: EFTimegroup,\n  relativeTimeMs: number,\n): number {\n  return relativeTimeMs + (timegroup.startTimeMs ?? 0);\n}\n\n/**\n * Renders a timegroup preview to a canvas using SVG foreignObject.\n *\n * Captures the prime timeline's current visual state including DOM changes\n * from frame tasks (SVG paths, canvas content, text updates, etc.).\n *\n * Optimized with:\n * - Passive clone structure rebuilt each frame from prime's current state\n * - Temporal bucketing for time-based culling\n * - RenderContext for canvas pixel caching across frames\n * - Resolution scaling for performance (renders at lower resolution, CSS upscales)\n *\n * @param timegroup - The source timegroup to preview (prime timeline)\n * @param scaleOrOptions - Scale factor (default 1) or options object\n * @returns Object with canvas and refresh function\n */\nexport function renderTimegroupToCanvas(\n  timegroup: EFTimegroup,\n  scaleOrOptions: number | CanvasPreviewOptions = DEFAULT_PREVIEW_SCALE,\n): CanvasPreviewResult {\n  // Normalize options\n  const options: CanvasPreviewOptions =\n    typeof scaleOrOptions === \"number\"\n      ? { scale: scaleOrOptions }\n      : scaleOrOptions;\n\n  const scale = options.scale ?? DEFAULT_PREVIEW_SCALE;\n  // These are mutable to support dynamic resolution changes\n  let currentResolutionScale =\n    options.resolutionScale ?? DEFAULT_RESOLUTION_SCALE;\n\n  const width = timegroup.offsetWidth || DEFAULT_WIDTH;\n  const height = timegroup.offsetHeight || DEFAULT_HEIGHT;\n  const dpr =\n    (typeof window !== \"undefined\" ? window.devicePixelRatio : 1) || 1;\n\n  // Calculate effective render dimensions (internal resolution) - mutable\n  let renderWidth = Math.floor(width * currentResolutionScale);\n  let renderHeight = Math.floor(height * currentResolutionScale);\n\n  // Create canvas with proper DPR handling\n  const canvas = createDprCanvas({\n    renderWidth,\n    renderHeight,\n    scale,\n    fullWidth: width,\n    fullHeight: height,\n    dpr,\n  });\n\n  // Return canvas directly - no wrapper needed\n  const wrapperContainer = canvas;\n\n  const ctx = canvas.getContext(\"2d\");\n  if (!ctx) {\n    throw new Error(\"Failed to get canvas 2d context\");\n  }\n\n  // Track render state\n  let rendering = false;\n  let lastTimeMs = -1;\n  let disposed = false;\n\n  // Create RenderContext for caching across refresh calls (foreignObject only)\n  const renderContext = new RenderContext();\n\n  // Create FrameController for coordinating element rendering\n  // Cached for the lifetime of this preview instance\n  const frameController = new FrameController(timegroup);\n\n  // Log resolution scale on first render for debugging\n  let hasLoggedScale = false;\n\n  // Pending resolution change - applied at start of next refresh to avoid blanking\n  let pendingResolutionScale: number | null = null;\n\n  // Use the user's render mode preference. Native requires the timegroup to be\n  // inside a <canvas layoutsubtree> for drawElementImage to work.\n  const useNative =\n    getRenderMode() === \"native\" && isNativeCanvasApiAvailable();\n  let captureCanvas: HTMLCanvasElement | null = null;\n  let captureCtx: HtmlInCanvasContext | null = null;\n  let originalParent: ParentNode | null = null;\n  let originalNextSibling: ChildNode | null = null;\n  let savedClipPath = \"\";\n  let savedPointerEvents = \"\";\n\n  if (useNative) {\n    captureCanvas = document.createElement(\"canvas\");\n    captureCanvas.setAttribute(\"layoutsubtree\", \"\");\n    (captureCanvas as HtmlInCanvasElement).layoutSubtree = true;\n    captureCanvas.width = renderWidth;\n    captureCanvas.height = renderHeight;\n    captureCanvas.style.cssText = `position:fixed;left:0;top:0;width:${width}px;height:${height}px;opacity:0;pointer-events:none;z-index:-9999;`;\n    originalParent = timegroup.parentNode;\n    originalNextSibling = timegroup.nextSibling;\n    savedClipPath = timegroup.style.clipPath;\n    savedPointerEvents = timegroup.style.pointerEvents;\n    timegroup.style.clipPath = \"\";\n    timegroup.style.pointerEvents = \"\";\n    captureCanvas.appendChild(timegroup);\n    document.body.appendChild(captureCanvas);\n    captureCtx = captureCanvas.getContext(\"2d\") as HtmlInCanvasContext;\n    void captureCanvas.offsetHeight;\n    void timegroup.offsetHeight;\n  }\n\n  /**\n   * Apply pending resolution scale changes.\n   * Called at the start of refresh() before rendering, so the old content\n   * stays visible until new content is ready to be drawn.\n   */\n  const applyPendingResolutionChange = (): void => {\n    if (pendingResolutionScale === null) return;\n\n    const newScale = pendingResolutionScale;\n    pendingResolutionScale = null;\n\n    currentResolutionScale = newScale;\n    renderWidth = Math.floor(width * currentResolutionScale);\n    renderHeight = Math.floor(height * currentResolutionScale);\n\n    if (captureCanvas) {\n      captureCanvas.width = renderWidth;\n      captureCanvas.height = renderHeight;\n    }\n  };\n\n  /**\n   * Dynamically change resolution scale without rebuilding clone structure.\n   * The actual change is deferred until next refresh() to avoid blanking -\n   * old content stays visible until new content is ready.\n   */\n  const setResolutionScale = (newScale: number): void => {\n    // Clamp to valid range\n    newScale = Math.max(0.1, Math.min(1, newScale));\n\n    if (newScale === currentResolutionScale && pendingResolutionScale === null)\n      return;\n\n    // Queue the change - will be applied at start of next refresh\n    pendingResolutionScale = newScale;\n\n    // Force re-render on next refresh by invalidating lastTimeMs\n    lastTimeMs = -1;\n  };\n\n  const getResolutionScale = (): number =>\n    pendingResolutionScale ?? currentResolutionScale;\n\n  // Rolling timing stats for per-phase profiling\n  let frameCount = 0;\n  let totalFrameControllerMs = 0;\n  let totalCaptureMs = 0;\n  let totalCopyMs = 0;\n  let totalFrameMs = 0;\n\n  const refresh = async (): Promise<void> => {\n    if (disposed) return;\n\n    const sourceTimeMs = timegroup.currentTimeMs ?? 0;\n    const userTimeMs = timegroup.userTimeMs ?? 0;\n\n    if (Math.abs(sourceTimeMs - userTimeMs) > TIME_EPSILON_MS) return;\n    if (userTimeMs === lastTimeMs) return;\n    if (rendering) return;\n\n    lastTimeMs = userTimeMs;\n    rendering = true;\n\n    applyPendingResolutionChange();\n\n    if (!hasLoggedScale) {\n      hasLoggedScale = true;\n      const mode = useNative ? \"native\" : \"foreignObject\";\n      logger.debug(\n        `[renderTimegroupToCanvas] Resolution scale: ${currentResolutionScale} (${width}x${height} → ${renderWidth}x${renderHeight}), canvas buffer: ${canvas.width}x${canvas.height}, CSS size: ${canvas.style.width}x${canvas.style.height}, renderMode: ${mode}`,\n      );\n    }\n\n    try {\n      const tFrame = performance.now();\n\n      const tFC0 = performance.now();\n      await frameController.renderFrame(userTimeMs, {\n        waitForLitUpdate: false,\n        onAnimationsUpdate: (root) => {\n          updateAnimations(root as AnimatableElement);\n        },\n      });\n      const fcMs = performance.now() - tFC0;\n\n      const tCapture0 = performance.now();\n\n      if (useNative && captureCanvas && captureCtx) {\n        if (captureCanvas.width !== width || captureCanvas.height !== height) {\n          captureCtx.save();\n          captureCtx.scale(\n            captureCanvas.width / width,\n            captureCanvas.height / height,\n          );\n          captureCtx.drawElementImage(timegroup, 0, 0);\n          captureCtx.restore();\n        } else {\n          captureCtx.drawElementImage(timegroup, 0, 0);\n        }\n        const captureMs = performance.now() - tCapture0;\n\n        const tCopy0 = performance.now();\n        const targetWidth = Math.floor(renderWidth * scale * dpr);\n        const targetHeight = Math.floor(renderHeight * scale * dpr);\n        if (canvas.width !== targetWidth || canvas.height !== targetHeight) {\n          canvas.width = targetWidth;\n          canvas.height = targetHeight;\n        } else {\n          ctx.clearRect(0, 0, canvas.width, canvas.height);\n        }\n        ctx.drawImage(captureCanvas, 0, 0, canvas.width, canvas.height);\n        const copyMs = performance.now() - tCopy0;\n\n        const frameMs = performance.now() - tFrame;\n        frameCount++;\n        totalFrameControllerMs += fcMs;\n        totalCaptureMs += captureMs;\n        totalCopyMs += copyMs;\n        totalFrameMs += frameMs;\n\n        defaultProfiler.incrementRenderCount();\n        if (defaultProfiler.shouldLogByFrameCount(60)) {\n          frameCount = 0;\n          totalFrameControllerMs = 0;\n          totalCaptureMs = 0;\n          totalCopyMs = 0;\n          totalFrameMs = 0;\n        }\n      } else {\n        const absoluteTimeMs = toAbsoluteTime(timegroup, userTimeMs);\n\n        const dataUri = await captureTimelineToDataUri(\n          timegroup,\n          width,\n          height,\n          {\n            renderContext,\n            canvasScale: currentResolutionScale,\n            timeMs: absoluteTimeMs,\n          },\n        );\n        const captureMs = performance.now() - tCapture0;\n\n        const tCopy0 = performance.now();\n        const image = await loadImageFromDataUri(dataUri);\n        const copyMs = performance.now() - tCopy0;\n\n        const targetWidth = Math.floor(renderWidth * scale * dpr);\n        const targetHeight = Math.floor(renderHeight * scale * dpr);\n        if (canvas.width !== targetWidth || canvas.height !== targetHeight) {\n          canvas.width = targetWidth;\n          canvas.height = targetHeight;\n        } else {\n          ctx.clearRect(0, 0, canvas.width, canvas.height);\n        }\n\n        ctx.save();\n        ctx.scale(dpr * scale, dpr * scale);\n        ctx.drawImage(image, 0, 0, renderWidth, renderHeight);\n        ctx.restore();\n\n        const frameMs = performance.now() - tFrame;\n        frameCount++;\n        totalFrameControllerMs += fcMs;\n        totalCaptureMs += captureMs;\n        totalCopyMs += copyMs;\n        totalFrameMs += frameMs;\n\n        defaultProfiler.incrementRenderCount();\n        if (defaultProfiler.shouldLogByFrameCount(60)) {\n          frameCount = 0;\n          totalFrameControllerMs = 0;\n          totalCaptureMs = 0;\n          totalCopyMs = 0;\n          totalFrameMs = 0;\n        }\n      }\n    } catch (e) {\n      logger.error(\"Canvas preview render failed:\", e);\n    } finally {\n      rendering = false;\n    }\n  };\n\n  /**\n   * Dispose the preview and release resources.\n   */\n  const dispose = (): void => {\n    if (disposed) return;\n    disposed = true;\n    frameController.abort();\n    renderContext.dispose();\n\n    // Restore timegroup to original DOM position if native mode moved it\n    if (useNative && originalParent) {\n      timegroup.style.clipPath = savedClipPath;\n      timegroup.style.pointerEvents = savedPointerEvents;\n      if (originalNextSibling) {\n        originalParent.insertBefore(timegroup, originalNextSibling);\n      } else {\n        originalParent.appendChild(timegroup);\n      }\n      captureCanvas?.remove();\n    }\n  };\n\n  // Do initial render\n  refresh();\n\n  return {\n    container: wrapperContainer,\n    canvas,\n    refresh,\n    setResolutionScale,\n    getResolutionScale,\n    dispose,\n  };\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,51 @@
+//#region src/preview/renderTimegroupToCanvas.types.d.ts
+/**
+ * Type definitions for canvas rendering.
+ * This file has ZERO imports and ZERO side effects - safe for SSR.
+ */
+type ContentReadyMode = "immediate" | "blocking";
+interface CaptureOptions {
+  timeMs: number;
+  scale?: number;
+  skipRestore?: boolean;
+  contentReadyMode?: ContentReadyMode;
+  blockingTimeoutMs?: number;
+  canvasMode?: "native" | "foreignObject";
+  skipClone?: boolean;
+}
+interface CaptureFromCloneOptions {
+  scale?: number;
+  contentReadyMode?: ContentReadyMode;
+  blockingTimeoutMs?: number;
+  originalTimegroup?: any;
+  timeMs?: number;
+  canvasMode?: "native" | "foreignObject";
+}
+interface GeneratedThumbnail {
+  timeMs: number;
+  canvas: CanvasImageSource;
+}
+interface GenerateThumbnailsOptions {
+  scale?: number;
+  contentReadyMode?: ContentReadyMode;
+  blockingTimeoutMs?: number;
+  signal?: AbortSignal;
+}
+interface ThumbnailQueue {
+  shift(): number | undefined;
+}
+interface CanvasPreviewResult {
+  container: HTMLCanvasElement;
+  canvas: HTMLCanvasElement;
+  refresh: () => Promise<void>;
+  setResolutionScale: (scale: number) => void;
+  getResolutionScale: () => number;
+  dispose: () => void;
+}
+interface CanvasPreviewOptions {
+  scale?: number;
+  resolutionScale?: number;
+}
+//#endregion
+export { CanvasPreviewOptions, CanvasPreviewResult, CaptureFromCloneOptions, CaptureOptions, ContentReadyMode, GenerateThumbnailsOptions, GeneratedThumbnail, ThumbnailQueue };
+//# sourceMappingURL=renderTimegroupToCanvas.types.d.ts.map

package/dist/preview/renderTimegroupToVideo.d.ts

@@ -1,42 +1,27 @@
-import { ContentReadyMode } from "./renderTimegroupToCanvas.js";
-import "../elements/EFTimegroup.js";
-import { AudioCodec } from "mediabunny";
+import { RenderProgress, RenderToVideoOptions } from "./renderTimegroupToVideo.types.js";
+import { EFTimegroup } from "../elements/EFTimegroup.js";
+import { AudioCodec, QUALITY_HIGH } from "mediabunny";
 
 //#region src/preview/renderTimegroupToVideo.d.ts
 
-interface RenderProgress {
-  progress: number;
-  currentFrame: number;
-  totalFrames: number;
-  renderedMs: number;
-  totalDurationMs: number;
-  elapsedMs: number;
-  estimatedRemainingMs: number;
-  speedMultiplier: number;
-  framePreviewCanvas?: HTMLCanvasElement;
+declare class NoSupportedAudioCodecError extends Error {
+  constructor(requestedCodecs: AudioCodec[], availableCodecs: AudioCodec[]);
 }
-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?: ContentReadyMode;
-  blockingTimeoutMs?: number;
-  returnBuffer?: boolean;
-  preferredAudioCodecs?: AudioCodec[];
-  benchmarkMode?: boolean;
-  customWritableStream?: WritableStream<Uint8Array>;
-  progressPreviewInterval?: number;
+declare class RenderCancelledError extends Error {
+  constructor();
 }
+declare function getSupportedAudioCodecs(options?: {
+  numberOfChannels?: number;
+  sampleRate?: number;
+  bitrate?: number;
+}): Promise<AudioCodec[]>;
+/**
+ * Renders a timegroup to an MP4 video file.
+ *
+ * Uses the EXACT same code path as thumbnail generation (captureFromClone).
+ * This ensures consistency - if thumbnails work, video export works.
+ */
+declare function renderTimegroupToVideo(timegroup: EFTimegroup, options?: RenderToVideoOptions): Promise<Uint8Array | undefined>;
 //#endregion
-export { RenderProgress, RenderToVideoOptions };
+export { type AudioCodec, NoSupportedAudioCodecError, QUALITY_HIGH, RenderCancelledError, type RenderProgress, type RenderToVideoOptions, getSupportedAudioCodecs, renderTimegroupToVideo };
 //# sourceMappingURL=renderTimegroupToVideo.d.ts.map

package/dist/preview/renderTimegroupToVideo.js

@@ -1,9 +1,11 @@
 import { logger } from "./logger.js";
-import { createPreviewContainer } from "./previewTypes.js";
 import { RenderContext } from "./RenderContext.js";
-import { resetRenderState } from "./renderTimegroupToCanvas.js";
-import { serializeTimelineToDataUri } from "./rendering/serializeTimelineDirect.js";
-import { AudioBufferSource, BufferTarget, CanvasSource, Mp4OutputFormat, Output, StreamTarget, canEncodeAudio, getEncodableAudioCodecs } from "mediabunny";
+import { createPreviewContainer } from "./previewTypes.js";
+import { captureTimelineToDataUri } from "./rendering/serializeTimelineDirect.js";
+import { isNativeCanvasApiAvailable } from "./previewSettings.js";
+import { renderToImageNative } from "./rendering/renderToImageNative.js";
+import { resetRenderState, waitForVideoContent } from "./renderTimegroupToCanvas.js";
+import { AudioBufferSource, BufferTarget, CanvasSource, Mp4OutputFormat, Output, QUALITY_HIGH, StreamTarget, canEncodeAudio, getEncodableAudioCodecs } from "mediabunny";
 
 //#region src/preview/renderTimegroupToVideo.ts
 var NoSupportedAudioCodecError = class extends Error {
@@ -18,7 +20,7 @@ var RenderCancelledError = class extends Error {
 		this.name = "RenderCancelledError";
 	}
 };
-function resolveConfig(timegroup, options) {
+function resolveConfig(timegroup, options = {}) {
 	const fps = options.fps ?? timegroup.effectiveFps ?? 30;
 	const codec = options.codec ?? "avc";
 	const bitrate = options.bitrate ?? 8e6;
@@ -41,11 +43,24 @@ function resolveConfig(timegroup, options) {
 	const renderDurationMs = endMs - startMs;
 	if (renderDurationMs <= 0) throw new Error(`Invalid render range: from ${startMs}ms to ${endMs}ms`);
 	timegroup.offsetHeight;
-	const timegroupWidth = timegroup.offsetWidth;
-	const timegroupHeight = timegroup.offsetHeight;
-	console.log(`[renderTimegroupToVideo] Timegroup dimensions: ${timegroupWidth}x${timegroupHeight}`);
-	console.log(`[renderTimegroupToVideo] Computed style:`, getComputedStyle(timegroup).width, getComputedStyle(timegroup).height);
-	console.log(`[renderTimegroupToVideo] BoundingClientRect:`, timegroup.getBoundingClientRect());
+	let timegroupWidth = timegroup.offsetWidth;
+	let timegroupHeight = timegroup.offsetHeight;
+	if (!timegroupWidth || !timegroupHeight) {
+		const rect = timegroup.getBoundingClientRect();
+		if (rect.width > 0 && rect.height > 0) {
+			timegroupWidth = rect.width;
+			timegroupHeight = rect.height;
+		}
+	}
+	if (!timegroupWidth || !timegroupHeight) {
+		const computed = getComputedStyle(timegroup);
+		const cw = parseFloat(computed.width);
+		const ch = parseFloat(computed.height);
+		if (cw > 0 && ch > 0) {
+			timegroupWidth = cw;
+			timegroupHeight = ch;
+		}
+	}
 	if (!timegroupWidth || !timegroupHeight) throw new Error(`Timegroup has no dimensions (${timegroupWidth}x${timegroupHeight}). Ensure the timegroup element is in the document and has explicit width/height styles (e.g., class="w-[1920px] h-[1080px]")`);
 	const width = Math.floor(timegroupWidth * scale);
 	const height = Math.floor(timegroupHeight * scale);
@@ -77,7 +92,16 @@ function resolveConfig(timegroup, options) {
 		returnBuffer,
 		preferredAudioCodecs,
 		benchmarkMode,
-		progressPreviewInterval
+		progressPreviewInterval,
+		canvasMode: (() => {
+			const requested = options.canvasMode;
+			if (!requested) return "foreignObject";
+			if (requested === "native" && !isNativeCanvasApiAvailable()) {
+				logger.debug("[renderTimegroupToVideo] Native canvas mode requested but not available, falling back to foreignObject");
+				return "foreignObject";
+			}
+			return requested;
+		})()
 	};
 }
 function isFileSystemAccessSupported() {
@@ -122,9 +146,17 @@ function downloadBlob(blob, filename) {
 	document.body.removeChild(a);
 	URL.revokeObjectURL(url);
 }
+async function getSupportedAudioCodecs(options) {
+	const { numberOfChannels = 2, sampleRate = 48e3, bitrate = 128e3 } = options ?? {};
+	return getEncodableAudioCodecs(void 0, {
+		numberOfChannels,
+		sampleRate,
+		bitrate
+	});
+}
 /**
 * Renders a timegroup to an MP4 video file.
-* 
+*
 * Uses the EXACT same code path as thumbnail generation (captureFromClone).
 * This ensures consistency - if thumbnails work, video export works.
 */
@@ -138,12 +170,6 @@ async function renderTimegroupToVideo(timegroup, options = {}) {
 	const { clone: renderClone, cleanup: cleanupRenderClone } = await timegroup.createRenderClone();
 	const timestamps = [];
 	for (let i = 0; i < config.totalFrames; i++) timestamps.push(config.startMs + i * config.frameDurationMs);
-	const videoElements = renderClone.querySelectorAll("ef-video");
-	if (videoElements.length > 0) {
-		logger.debug(`[renderTimegroupToVideo] Prefetching main video segments for ${videoElements.length} video(s)...`);
-		await Promise.all(Array.from(videoElements).map((video) => video.prefetchMainVideoSegments(timestamps)));
-		logger.debug(`[renderTimegroupToVideo] Prefetch complete`);
-	}
 	let output = null;
 	let videoSource = null;
 	let audioSource = null;
@@ -211,13 +237,13 @@ async function renderTimegroupToVideo(timegroup, options = {}) {
 		height: timegroup.offsetHeight || 1080,
 		background: getComputedStyle(timegroup).background || "#000"
 	});
-	console.log(`[renderTimegroupToVideo] Using direct timeline serialization`);
+	logger.debug(`[renderTimegroupToVideo] Using direct timeline serialization`);
 	previewContainer.appendChild(renderClone);
 	previewContainer.classList.add("ef-render-clone-container");
 	previewContainer.style.cssText += ";position:fixed;left:-99999px;top:-99999px;pointer-events:none;";
 	document.body.appendChild(previewContainer);
 	renderClone.offsetHeight;
-	console.log(`[renderTimegroupToVideo] Attached previewContainer to document.body (off-screen) for style computation`);
+	logger.debug(`[renderTimegroupToVideo] Attached previewContainer to document.body (off-screen) for style computation`);
 	const renderStartTime = performance.now();
 	let lastRenderedAudioEndMs = config.startMs;
 	const audioChunkDurationMs = 2e3;
@@ -231,95 +257,76 @@ async function renderTimegroupToVideo(timegroup, options = {}) {
 		thumbCanvas.height = previewHeight;
 		thumbCtx = thumbCanvas.getContext("2d");
 	}
-	let totalSeekMs = 0;
-	let totalSyncMs = 0;
-	let totalRenderMs = 0;
-	let totalEncodeMs = 0;
 	try {
-		const seekQueue = [];
-		const renderTasks = [];
-		const MAX_SEEK = 1;
-		const MAX_RENDER = 4;
+		const MAX_AHEAD = 2;
+		const pendingFrames = [];
 		let nextSeekFrame = 0;
-		let nextRenderFrame = 0;
-		for (let completedFrames = 0; completedFrames < config.totalFrames; completedFrames++) {
+		let encodedFrames = 0;
+		while (encodedFrames < config.totalFrames) {
 			checkCancelled();
-			const frameIndex = completedFrames;
-			const timeMs = timestamps[frameIndex];
-			const timestampS = frameIndex * config.frameDurationMs / 1e3;
-			while (seekQueue.length < MAX_SEEK && nextSeekFrame < config.totalFrames) {
-				const seekTimeMs = timestamps[nextSeekFrame];
-				const seekStart = performance.now();
-				const seekPromise = renderClone.seekForRender(seekTimeMs).then(() => {
-					totalSeekMs += performance.now() - seekStart;
-				});
-				seekQueue.push(seekPromise);
-				nextSeekFrame++;
-			}
-			while (renderTasks.length < MAX_RENDER && seekQueue.length > 0 && nextRenderFrame < config.totalFrames) {
-				const renderFrameIndex = nextRenderFrame;
-				const renderTimeMs = timestamps[renderFrameIndex];
-				const renderTimestampS = renderFrameIndex * config.frameDurationMs / 1e3;
-				const renderPromise = seekQueue.shift().then(async () => {
-					const syncStart = performance.now();
-					const dataUri = await serializeTimelineToDataUri(renderClone, config.width, config.height, {
-						renderContext,
-						canvasScale: config.scale,
-						timeMs: renderTimeMs
-					});
-					const syncTime = performance.now() - syncStart;
-					totalSyncMs += syncTime;
-					const renderStart = performance.now();
-					const image$1 = new Image();
-					await new Promise((resolve, reject) => {
-						image$1.onload = () => resolve();
+			while (nextSeekFrame < config.totalFrames && pendingFrames.length < MAX_AHEAD) {
+				const fi = nextSeekFrame;
+				const timeMs = timestamps[fi];
+				const timestampS = fi * config.frameDurationMs / 1e3;
+				await renderClone.seekForRender(timeMs);
+				const entry = {
+					frameIndex: fi,
+					timeMs,
+					timestampS,
+					resolved: null,
+					promise: null
+				};
+				if (config.contentReadyMode === "blocking") await waitForVideoContent(renderClone, timeMs, config.blockingTimeoutMs);
+				if (config.canvasMode === "native") {
+					entry.resolved = await renderToImageNative(renderClone, config.width, config.height, { skipDprScaling: true });
+					entry.promise = Promise.resolve(entry.resolved);
+				} else entry.promise = captureTimelineToDataUri(renderClone, config.width, config.height, {
+					renderContext,
+					canvasScale: config.scale,
+					timeMs
+				}).then((dataUri) => {
+					return new Promise((resolve, reject) => {
+						const image$1 = new Image();
+						image$1.onload = () => {
+							entry.resolved = image$1;
+							resolve(image$1);
+						};
 						image$1.onerror = (e) => {
-							console.error(`[Frame ${renderFrameIndex}] Image load error:`, e);
-							console.error(`[Frame ${renderFrameIndex}] Data URI preview:`, dataUri.substring(0, 200) + "...");
+							console.error(`[Render] frame ${fi} image load error:`, e);
 							reject(/* @__PURE__ */ new Error(`Failed to load image from data URI`));
 						};
 						image$1.src = dataUri;
 					});
-					const renderTime = performance.now() - renderStart;
-					totalRenderMs += renderTime;
-					if (renderFrameIndex % 30 === 0) console.log(`[Frame ${renderFrameIndex}] Image loaded: ${image$1.width}x${image$1.height}`);
-					if (renderFrameIndex % 30 === 0) console.log(`[Frame ${renderFrameIndex}] serialize=${syncTime.toFixed(1)}ms`);
-					return image$1;
 				});
-				renderTasks.push({
-					frameIndex: renderFrameIndex,
-					timeMs: renderTimeMs,
-					timestampS: renderTimestampS,
-					promise: renderPromise
-				});
-				nextRenderFrame++;
+				pendingFrames.push(entry);
+				nextSeekFrame++;
 			}
-			const taskIndex = renderTasks.findIndex((t) => t.frameIndex === frameIndex);
-			if (taskIndex === -1) throw new Error(`No render task found for frame ${frameIndex}`);
-			const image = await renderTasks[taskIndex].promise;
-			renderTasks.splice(taskIndex, 1);
-			if (audioSource && timeMs >= lastRenderedAudioEndMs + audioChunkDurationMs) {
-				const chunkEndMs = Math.min(timeMs + audioChunkDurationMs, config.endMs);
+			const head = pendingFrames.shift();
+			const preloaded = head.resolved !== null;
+			let image;
+			if (preloaded) image = head.resolved;
+			else image = await head.promise;
+			if (audioSource && head.timeMs >= lastRenderedAudioEndMs + audioChunkDurationMs) {
+				const chunkEndMs = Math.min(head.timeMs + audioChunkDurationMs, config.endMs);
 				try {
-					const audioBuffer = await timegroup.renderAudio(lastRenderedAudioEndMs, chunkEndMs);
+					const audioBuffer = await timegroup.renderAudio(lastRenderedAudioEndMs, chunkEndMs, signal);
 					if (audioBuffer && audioBuffer.length > 0) await audioSource.add(audioBuffer);
 				} catch (e) {}
 				lastRenderedAudioEndMs = chunkEndMs;
 			}
 			if (videoSource && output && encodingCtx) {
-				const encodeStart = performance.now();
 				encodingCtx.drawImage(image, 0, 0, image.width, image.height, 0, 0, config.videoWidth, config.videoHeight);
-				await videoSource.add(timestampS, config.frameDurationS);
-				totalEncodeMs += performance.now() - encodeStart;
+				await videoSource.add(head.timestampS, config.frameDurationS);
 			}
-			const currentFrame = frameIndex + 1;
+			encodedFrames++;
+			const currentFrame = encodedFrames;
 			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;
-			if (thumbCanvas && thumbCtx && frameIndex % config.progressPreviewInterval === 0) thumbCtx.drawImage(image, 0, 0, thumbCanvas.width, thumbCanvas.height);
+			if (thumbCanvas && thumbCtx && head.frameIndex % config.progressPreviewInterval === 0) thumbCtx.drawImage(image, 0, 0, thumbCanvas.width, thumbCanvas.height);
 			onProgress?.({
 				progress,
 				currentFrame,
@@ -333,28 +340,9 @@ async function renderTimegroupToVideo(timegroup, options = {}) {
 			});
 		}
 		if (audioSource && lastRenderedAudioEndMs < config.endMs) try {
-			const audioBuffer = await timegroup.renderAudio(lastRenderedAudioEndMs, config.endMs);
+			const audioBuffer = await timegroup.renderAudio(lastRenderedAudioEndMs, config.endMs, signal);
 			if (audioBuffer && audioBuffer.length > 0) await audioSource.add(audioBuffer);
 		} catch (e) {}
-		const totalTime = performance.now() - renderStartTime;
-		const avgSeek = totalSeekMs / config.totalFrames;
-		const avgSync = totalSyncMs / config.totalFrames;
-		const avgRender = totalRenderMs / config.totalFrames;
-		const avgEncode = totalEncodeMs / config.totalFrames;
-		const avgTotal = totalTime / config.totalFrames;
-		const untracked = totalTime - (totalSeekMs + totalSyncMs + totalRenderMs + totalEncodeMs);
-		console.log(`\n=== Video Export Performance Breakdown ===`);
-		console.log(`Mode: Direct Serialization`);
-		console.log(`Total frames: ${config.totalFrames}`);
-		console.log(`Total time: ${totalTime.toFixed(0)}ms (${avgTotal.toFixed(1)}ms/frame)`);
-		console.log(`\nPer-stage totals:`);
-		console.log(`  Seek:      ${totalSeekMs.toFixed(0)}ms (${(totalSeekMs / totalTime * 100).toFixed(1)}%) - avg ${avgSeek.toFixed(1)}ms/frame`);
-		console.log(`  Serialize: ${totalSyncMs.toFixed(0)}ms (${(totalSyncMs / totalTime * 100).toFixed(1)}%) - avg ${avgSync.toFixed(1)}ms/frame`);
-		console.log(`  Render: ${totalRenderMs.toFixed(0)}ms (${(totalRenderMs / totalTime * 100).toFixed(1)}%) - avg ${avgRender.toFixed(1)}ms/frame`);
-		console.log(`  Encode: ${totalEncodeMs.toFixed(0)}ms (${(totalEncodeMs / totalTime * 100).toFixed(1)}%) - avg ${avgEncode.toFixed(1)}ms/frame`);
-		console.log(`  Other:  ${untracked.toFixed(0)}ms (${(untracked / totalTime * 100).toFixed(1)}%)`);
-		console.log(`==========================================\n`);
-		logger.debug(`[renderTimegroupToVideo] ${config.totalFrames} frames: seek=${totalSeekMs.toFixed(0)}ms, sync=${totalSyncMs.toFixed(0)}ms, render=${totalRenderMs.toFixed(0)}ms, encode=${totalEncodeMs.toFixed(0)}ms, total=${totalTime.toFixed(0)}ms`);
 		if (config.benchmarkMode) return;
 		await output.finalize();
 		if (useStreaming) return;
@@ -373,5 +361,5 @@ async function renderTimegroupToVideo(timegroup, options = {}) {
 }
 
 //#endregion
-export { RenderCancelledError, renderTimegroupToVideo };
+export { NoSupportedAudioCodecError, QUALITY_HIGH, RenderCancelledError, getSupportedAudioCodecs, renderTimegroupToVideo };
 //# sourceMappingURL=renderTimegroupToVideo.js.map