@editframe/elements 0.40.6 → 0.41.0

package/dist/elements/updateAnimations.js

@@ -545,6 +545,47 @@ const applyAnimationCoordination = (element, phase, providedAnimations) => {
 	if (shouldCoordinateAnimations(phase, element)) coordinateElementAnimations(element, providedAnimations);
 };
 /**
+* Finds the nearest temporal ancestor (or self) for a given element.
+* Returns the element itself if it is a temporal element, otherwise walks up.
+* Falls back to the provided root element.
+*/
+const findNearestTemporalAncestor = (element, root) => {
+	let node = element;
+	while (node) {
+		if (isEFTemporal(node)) return node;
+		node = node.parentElement;
+	}
+	return root;
+};
+/**
+* Synchronizes all SVG SMIL animations in the subtree with the timeline.
+*
+* SVG has its own animation clock on each SVGSVGElement. We pause it and
+* seek it to the owning temporal element's current time (converted to seconds).
+*/
+const synchronizeSvgAnimations = (root) => {
+	const svgElements = root.querySelectorAll("svg");
+	for (const svg of svgElements) {
+		const timeMs = findNearestTemporalAncestor(svg, root).currentTimeMs ?? 0;
+		svg.setCurrentTime(timeMs / 1e3);
+		svg.pauseAnimations();
+	}
+};
+/**
+* Synchronizes all <video> and <audio> elements in the subtree with the timeline.
+*
+* Sets currentTime (in seconds) to match the owning temporal element's position
+* and ensures the elements are paused (playback is controlled by the timeline).
+*/
+const synchronizeMediaElements = (root) => {
+	const mediaElements = root.querySelectorAll("video, audio");
+	for (const media of mediaElements) {
+		const timeSec = (findNearestTemporalAncestor(media, root).currentTimeMs ?? 0) / 1e3;
+		if (media.currentTime !== timeSec) media.currentTime = timeSec;
+		if (!media.paused) media.pause();
+	}
+};
+/**
 * Evaluates the complete state for an element update.
 * This separates evaluation (what should the state be?) from application (apply that state).
 */
@@ -600,6 +641,8 @@ const updateAnimations = (element) => {
 	for (const context of visibleChildContexts) applyAnimationCoordination(context.element, context.state.phase, childAnimations.get(context.element) || []);
 	applyVisualState(rootContext.element, rootContext.state);
 	for (const context of childContexts) applyVisualState(context.element, context.state);
+	synchronizeSvgAnimations(element);
+	synchronizeMediaElements(element);
 };
 
 //#endregion

package/dist/elements/updateAnimations.js.map

@@ -1 +1 @@
-{"version":3,"file":"updateAnimations.js","names":["warnings: string[]","timeSource: AnimatableElement","staggerElement: AnimatableElement","childContexts: ElementUpdateContext[]","visibleChildContexts: ElementUpdateContext[]","node: Element | null"],"sources":["../../src/elements/updateAnimations.ts"],"sourcesContent":["import {\n  deepGetTemporalElements,\n  isEFTemporal,\n  type TemporalMixinInterface,\n} from \"./EFTemporal.ts\";\n\n// All animatable elements are temporal elements with HTMLElement interface\nexport type AnimatableElement = TemporalMixinInterface & HTMLElement;\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst ANIMATION_PRECISION_OFFSET = 0.1; // Use 0.1ms to safely avoid completion threshold\nconst DEFAULT_ANIMATION_ITERATIONS = 1;\nconst PROGRESS_PROPERTY = \"--ef-progress\";\nconst DURATION_PROPERTY = \"--ef-duration\";\nconst TRANSITION_DURATION_PROPERTY = \"--ef-transition-duration\";\nconst TRANSITION_OUT_START_PROPERTY = \"--ef-transition-out-start\";\n\n// ============================================================================\n// Animation Tracking\n// ============================================================================\n\n/**\n * Tracks animations per element to prevent them from being lost when they complete.\n * Once an animation reaches 100% completion, it's removed from getAnimations(),\n * but we keep a reference to it so we can continue controlling it.\n */\nconst animationTracker = new WeakMap<Element, Set<Animation>>();\n\n/**\n * Tracks whether DOM structure has changed for an element, requiring animation rediscovery.\n * For render clones (static DOM), this stays false after initial discovery.\n * For prime timeline (interactive), this is set to true when mutations occur.\n */\nconst domStructureChanged = new WeakMap<Element, boolean>();\n\n/**\n * Tracks the last known animation count for an element to detect new animations.\n * Used as a lightweight check before calling expensive getAnimations().\n */\nconst lastAnimationCount = new WeakMap<Element, number>();\n\n/**\n * Tracks which animations have already been validated to avoid duplicate warnings.\n * Uses animation name + duration as the unique key.\n */\nconst validatedAnimations = new Set<string>();\n\n/**\n * Validates that an animation is still valid and controllable.\n * Animations become invalid when:\n * - They've been cancelled (idle state and not in getAnimations())\n * - Their effect is null (animation was removed)\n * - Their target is no longer in the DOM\n */\nconst isAnimationValid = (\n  animation: Animation,\n  currentAnimations: Animation[],\n): boolean => {\n  // Check if animation has been cancelled\n  if (\n    animation.playState === \"idle\" &&\n    !currentAnimations.includes(animation)\n  ) {\n    return false;\n  }\n\n  // Check if animation effect is still valid\n  const effect = animation.effect;\n  if (!effect) {\n    return false;\n  }\n\n  // Check if target is still in DOM\n  if (effect instanceof KeyframeEffect) {\n    const target = effect.target;\n    if (target && target instanceof Element) {\n      if (!target.isConnected) {\n        return false;\n      }\n    }\n  }\n\n  return true;\n};\n\n/**\n * Discovers and tracks animations on an element and its subtree.\n * This ensures we have references to animations even after they complete.\n *\n * Tracks animations per element where they exist, not just on the root element.\n * This allows us to find animations on any element in the subtree.\n *\n * OPTIMIZATION: For render clones (static DOM), discovery happens once at creation.\n * For prime timeline (interactive), discovery is responsive to DOM changes.\n *\n * Also cleans up invalid animations (cancelled, removed from DOM, etc.)\n *\n * @param providedAnimations - Optional pre-discovered animations to avoid redundant getAnimations() calls\n */\nconst discoverAndTrackAnimations = (\n  element: AnimatableElement,\n  providedAnimations?: Animation[],\n): { tracked: Set<Animation>; current: Animation[] } => {\n  animationTracker.has(element);\n  const structureChanged = domStructureChanged.get(element) ?? true;\n\n  // REMOVED: Clone optimization that cached animation references.\n  // The optimization assumed animations were \"static\" for clones, but this was incorrect.\n  // After seeking to a new time, we need fresh animation state from the browser.\n  // Caching caused animations to be stuck at their discovery state (often 0ms).\n\n  // For prime timeline or first discovery: get current animations from the browser (includes subtree)\n  // CRITICAL: This is expensive, so we return it to avoid calling it again\n  // If animations were provided by caller (to avoid redundant calls), use those\n  const currentAnimations =\n    providedAnimations ?? element.getAnimations({ subtree: true });\n\n  // Mark structure as stable after discovery\n  // This prevents redundant getAnimations() calls when DOM hasn't changed\n  domStructureChanged.set(element, false);\n\n  // Track animation count for lightweight change detection\n  lastAnimationCount.set(element, currentAnimations.length);\n\n  // Track animations on each element where they exist\n  for (const animation of currentAnimations) {\n    const effect = animation.effect;\n    const target =\n      effect && effect instanceof KeyframeEffect ? effect.target : null;\n    if (target && target instanceof Element) {\n      let tracked = animationTracker.get(target);\n      if (!tracked) {\n        tracked = new Set<Animation>();\n        animationTracker.set(target, tracked);\n      }\n      tracked.add(animation);\n    }\n  }\n\n  // Also maintain a set on the root element for coordination\n  let rootTracked = animationTracker.get(element);\n  if (!rootTracked) {\n    rootTracked = new Set<Animation>();\n    animationTracker.set(element, rootTracked);\n  }\n\n  // Update root set with all current animations\n  for (const animation of currentAnimations) {\n    rootTracked.add(animation);\n  }\n\n  // Clean up invalid animations from root set\n  // This handles animations that were cancelled, removed from DOM, or had their effects removed\n  for (const animation of rootTracked) {\n    if (!isAnimationValid(animation, currentAnimations)) {\n      rootTracked.delete(animation);\n    }\n  }\n\n  // Build a map of element -> current animations from the subtree lookup we already did\n  // This avoids calling getAnimations() repeatedly on each element (expensive!)\n  const elementAnimationsMap = new Map<Element, Animation[]>();\n  for (const animation of currentAnimations) {\n    const effect = animation.effect;\n    const target =\n      effect && effect instanceof KeyframeEffect ? effect.target : null;\n    if (target && target instanceof Element) {\n      let anims = elementAnimationsMap.get(target);\n      if (!anims) {\n        anims = [];\n        elementAnimationsMap.set(target, anims);\n      }\n      anims.push(animation);\n    }\n  }\n\n  // Clean up invalid animations from per-element sets.\n  // Only walk the full subtree when DOM structure has changed (elements added/removed).\n  // During scrubbing with static DOM, skip this expensive querySelectorAll(\"*\").\n  if (structureChanged) {\n    for (const [el, tracked] of elementAnimationsMap) {\n      const existingTracked = animationTracker.get(el);\n      if (existingTracked) {\n        for (const animation of existingTracked) {\n          if (!isAnimationValid(animation, tracked)) {\n            existingTracked.delete(animation);\n          }\n        }\n        if (existingTracked.size === 0) {\n          animationTracker.delete(el);\n        }\n      }\n    }\n  }\n\n  return { tracked: rootTracked, current: currentAnimations };\n};\n\n/**\n * Cleans up tracked animations when an element is disconnected.\n * This prevents memory leaks.\n */\nexport const cleanupTrackedAnimations = (element: Element): void => {\n  animationTracker.delete(element);\n  domStructureChanged.delete(element);\n  lastAnimationCount.delete(element);\n};\n\n/**\n * Marks that DOM structure has changed for an element, requiring animation rediscovery.\n * Should be called when elements are added/removed or CSS classes change that affect animations.\n */\nexport const markDomStructureChanged = (element: Element): void => {\n  domStructureChanged.set(element, true);\n};\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/**\n * Represents the phase an element is in relative to the timeline.\n * This is the primary concept that drives all visibility and animation decisions.\n */\nexport type ElementPhase =\n  | \"before-start\"\n  | \"active\"\n  | \"at-end-boundary\"\n  | \"after-end\";\n\n/**\n * Represents the temporal state of an element relative to the timeline\n */\ninterface TemporalState {\n  progress: number;\n  isVisible: boolean;\n  timelineTimeMs: number;\n  phase: ElementPhase;\n}\n\n/**\n * Context object that holds all evaluated state for an element update.\n * This groups related state together, reducing parameter passing and making\n * the data flow clearer.\n */\ninterface ElementUpdateContext {\n  element: AnimatableElement;\n  state: TemporalState;\n}\n\n/**\n * Animation timing information extracted from an animation effect.\n * Groups related timing properties together.\n */\ninterface AnimationTiming {\n  duration: number;\n  delay: number;\n  iterations: number;\n  direction: string;\n}\n\n/**\n * Capability interface for elements that support stagger offset.\n * This encapsulates the stagger behavior behind a capability check rather than\n * leaking tag name checks throughout the codebase.\n */\ninterface StaggerableElement extends AnimatableElement {\n  staggerOffsetMs?: number;\n}\n\n// ============================================================================\n// Phase Determination\n// ============================================================================\n\n/**\n * Determines what phase an element is in relative to the timeline.\n *\n * WHY: Phase is the primary concept that drives all decisions. By explicitly\n * enumerating phases, we make the code's logic clear: phase determines visibility,\n * animation coordination, and visual state.\n *\n * Phases:\n * - before-start: Timeline is before element's start time\n * - active: Timeline is within element's active range (start to end, exclusive of end)\n * - at-end-boundary: Timeline is exactly at element's end time\n * - after-end: Timeline is after element's end time\n *\n * Note: We detect \"at-end-boundary\" by checking if timeline equals end time.\n * The boundary policy will then determine if this should be treated as visible/active\n * or not based on element characteristics.\n */\nconst determineElementPhase = (\n  element: AnimatableElement,\n  timelineTimeMs: number,\n): ElementPhase => {\n  // Read endTimeMs once to avoid recalculation issues\n  const endTimeMs = element.endTimeMs;\n  const startTimeMs = element.startTimeMs;\n\n  // Invalid range (end <= start) means element hasn't computed its duration yet,\n  // or has no temporal children (e.g., timegroup with only static HTML).\n  // Treat as always active - these elements should be visible at all times.\n  if (endTimeMs <= startTimeMs) {\n    return \"active\";\n  }\n\n  if (timelineTimeMs < startTimeMs) {\n    return \"before-start\";\n  }\n  // Use epsilon to handle floating point precision issues\n  const epsilon = 0.001;\n  const diff = timelineTimeMs - endTimeMs;\n\n  // If clearly after end (difference > epsilon), return 'after-end'\n  if (diff > epsilon) {\n    return \"after-end\";\n  }\n  // If at or very close to end boundary (within epsilon), return 'at-end-boundary'\n  if (Math.abs(diff) <= epsilon) {\n    return \"at-end-boundary\";\n  }\n  // Otherwise, we're before the end, so check if we're active\n  return \"active\";\n};\n\n// ============================================================================\n// Boundary Policies\n// ============================================================================\n\n/**\n * Policy interface for determining behavior at boundaries.\n * Different policies apply different rules for when elements should be visible\n * or have animations coordinated at exact boundary times.\n */\ninterface BoundaryPolicy {\n  /**\n   * Determines if an element should be considered visible/active at the end boundary\n   * based on the element's characteristics.\n   */\n  shouldIncludeEndBoundary(element: AnimatableElement): boolean;\n}\n\n/**\n * Visibility policy: determines when elements should be visible for display purposes.\n *\n * WHY: Root elements, elements aligned with composition end, and text segments\n * should remain visible at exact end time to prevent flicker and show final frames.\n * Other elements use exclusive end for clean transitions between elements.\n */\nclass VisibilityPolicy implements BoundaryPolicy {\n  shouldIncludeEndBoundary(element: AnimatableElement): boolean {\n    // Root elements should remain visible at exact end time to prevent flicker\n    const isRootElement = !element.parentTimegroup;\n    if (isRootElement) {\n      return true;\n    }\n\n    // Elements aligned with composition end should remain visible at exact end time\n    const isLastElementInComposition =\n      element.endTimeMs === element.rootTimegroup?.endTimeMs;\n    if (isLastElementInComposition) {\n      return true;\n    }\n\n    // Text segments use inclusive end since they're meant to be visible for full duration\n    if (this.isTextSegment(element)) {\n      return true;\n    }\n\n    // Other elements use exclusive end for clean transitions\n    return false;\n  }\n\n  /**\n   * Checks if element is a text segment.\n   * Encapsulates the tag name check to hide implementation detail.\n   */\n  protected isTextSegment(element: AnimatableElement): boolean {\n    return element.tagName === \"EF-TEXT-SEGMENT\";\n  }\n}\n\n// Policy instances (singleton pattern for stateless policies)\nconst visibilityPolicy = new VisibilityPolicy();\n\n/**\n * Determines if an element should be visible based on its phase and visibility policy.\n */\nconst shouldBeVisible = (\n  phase: ElementPhase,\n  element: AnimatableElement,\n): boolean => {\n  if (phase === \"before-start\" || phase === \"after-end\") {\n    return false;\n  }\n  if (phase === \"active\") {\n    return true;\n  }\n  // phase === \"at-end-boundary\"\n  return visibilityPolicy.shouldIncludeEndBoundary(element);\n};\n\n/**\n * Determines if animations should be coordinated based on element phase and animation policy.\n *\n * CRITICAL: Always returns true to support scrubbing to arbitrary times.\n *\n * Previously, this function skipped coordination for before-start and after-end phases as an\n * optimization for live playback. However, this broke scrubbing scenarios where we seek to\n * arbitrary times (timeline scrubbing, thumbnails, video export).\n *\n * The performance cost of always coordinating is minimal:\n * - Animations only update when element time changes\n * - Paused animation updates are optimized by the browser\n * - The benefit is correct animation state at all times, regardless of phase\n */\nconst shouldCoordinateAnimations = (\n  _phase: ElementPhase,\n  _element: AnimatableElement,\n): boolean => {\n  return true;\n};\n\n// ============================================================================\n// Temporal State Evaluation\n// ============================================================================\n\n/**\n * Evaluates what the element's state should be based on the timeline.\n *\n * WHY: This function determines the complete temporal state including phase,\n * which becomes the primary driver for all subsequent decisions.\n */\nexport const evaluateTemporalState = (\n  element: AnimatableElement,\n): TemporalState => {\n  // Get timeline time from root timegroup, or use element's own time if it IS a timegroup\n  const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;\n\n  const progress =\n    element.durationMs <= 0\n      ? 1\n      : Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs));\n\n  const phase = determineElementPhase(element, timelineTimeMs);\n  const isVisible = shouldBeVisible(phase, element);\n\n  return { progress, isVisible, timelineTimeMs, phase };\n};\n\n/**\n * Evaluates element visibility state specifically for animation coordination.\n * Uses inclusive end boundaries to prevent animation jumps at exact boundaries.\n *\n * This is exported for external use cases that need animation-specific visibility\n * evaluation without the full ElementUpdateContext.\n */\nexport const evaluateAnimationVisibilityState = (\n  element: AnimatableElement,\n): TemporalState => {\n  const state = evaluateTemporalState(element);\n  // Override visibility based on animation policy\n  const shouldCoordinate = shouldCoordinateAnimations(state.phase, element);\n  return { ...state, isVisible: shouldCoordinate };\n};\n\n// ============================================================================\n// Animation Time Mapping\n// ============================================================================\n\n/**\n * Capability check: determines if an element supports stagger offset.\n * Encapsulates the knowledge of which element types support this feature.\n */\nconst supportsStaggerOffset = (\n  element: AnimatableElement,\n): element is StaggerableElement => {\n  // Currently only text segments support stagger offset\n  return element.tagName === \"EF-TEXT-SEGMENT\";\n};\n\n/**\n * Calculates effective delay including stagger offset if applicable.\n *\n * Stagger offset allows elements (like text segments) to have their animations\n * start at different times while keeping their visibility timing unchanged.\n * This enables staggered animation effects within a single timegroup.\n */\nconst calculateEffectiveDelay = (\n  delay: number,\n  element: AnimatableElement,\n): number => {\n  if (supportsStaggerOffset(element)) {\n    // Read stagger offset - try property first (more reliable), then CSS variable\n    // The staggerOffsetMs property is set directly on the element and is always available\n    const segment = element as any;\n    if (\n      segment.staggerOffsetMs !== undefined &&\n      segment.staggerOffsetMs !== null\n    ) {\n      return delay + segment.staggerOffsetMs;\n    }\n\n    // Fallback to CSS variable if property not available\n    let cssValue = (element as HTMLElement).style\n      .getPropertyValue(\"--ef-stagger-offset\")\n      .trim();\n\n    if (!cssValue) {\n      cssValue = window\n        .getComputedStyle(element)\n        .getPropertyValue(\"--ef-stagger-offset\")\n        .trim();\n    }\n\n    if (cssValue) {\n      // Parse \"100ms\" format to milliseconds\n      const match = cssValue.match(/(\\d+(?:\\.\\d+)?)\\s*ms?/);\n      if (match) {\n        const staggerOffset = parseFloat(match[1]!);\n        if (!isNaN(staggerOffset)) {\n          return delay + staggerOffset;\n        }\n      } else {\n        // Try parsing as just a number\n        const numValue = parseFloat(cssValue);\n        if (!isNaN(numValue)) {\n          return delay + numValue;\n        }\n      }\n    }\n  }\n  return delay;\n};\n\n/**\n * Calculates maximum safe animation time to prevent completion.\n *\n * WHY: Once an animation reaches \"finished\" state, it can no longer be manually controlled\n * via currentTime. By clamping to just before completion (using ANIMATION_PRECISION_OFFSET),\n * we ensure the animation remains in a controllable state, allowing us to synchronize it\n * with the timeline even when it would naturally be complete.\n */\nconst calculateMaxSafeAnimationTime = (\n  duration: number,\n  iterations: number,\n): number => {\n  return duration * iterations - ANIMATION_PRECISION_OFFSET;\n};\n\n/**\n * Determines if the current iteration should be reversed based on direction\n */\nconst shouldReverseIteration = (\n  direction: string,\n  currentIteration: number,\n): boolean => {\n  return (\n    direction === \"reverse\" ||\n    (direction === \"alternate\" && currentIteration % 2 === 1) ||\n    (direction === \"alternate-reverse\" && currentIteration % 2 === 0)\n  );\n};\n\n/**\n * Applies direction to iteration time (reverses if needed)\n */\nconst applyDirectionToIterationTime = (\n  currentIterationTime: number,\n  duration: number,\n  direction: string,\n  currentIteration: number,\n): number => {\n  if (shouldReverseIteration(direction, currentIteration)) {\n    return duration - currentIterationTime;\n  }\n  return currentIterationTime;\n};\n\n/**\n * Maps element time to animation time for normal direction.\n * Uses cumulative time throughout the animation.\n * Note: elementTime should already be adjusted (elementTime - effectiveDelay).\n */\nconst mapNormalDirectionTime = (\n  elementTime: number,\n  duration: number,\n  maxSafeTime: number,\n): number => {\n  const currentIteration = Math.floor(elementTime / duration);\n  const iterationTime = elementTime % duration;\n  const cumulativeTime = currentIteration * duration + iterationTime;\n  return Math.min(cumulativeTime, maxSafeTime);\n};\n\n/**\n * Maps element time to animation time for reverse direction.\n * Uses cumulative time with reversed iterations.\n * Note: elementTime should already be adjusted (elementTime - effectiveDelay).\n */\nconst mapReverseDirectionTime = (\n  elementTime: number,\n  duration: number,\n  maxSafeTime: number,\n): number => {\n  const currentIteration = Math.floor(elementTime / duration);\n  const rawIterationTime = elementTime % duration;\n  const reversedIterationTime = duration - rawIterationTime;\n  const cumulativeTime = currentIteration * duration + reversedIterationTime;\n  return Math.min(cumulativeTime, maxSafeTime);\n};\n\n/**\n * Maps element time to animation time for alternate/alternate-reverse directions.\n *\n * WHY SPECIAL HANDLING: Alternate directions oscillate between forward and reverse iterations.\n * Without delay, we use iteration time (0 to duration) because the animation naturally\n * resets each iteration. However, with delay, iteration 0 needs to account for the delay\n * offset (using ownCurrentTimeMs), and later iterations need cumulative time to properly\n * track progress across multiple iterations. This complexity requires a dedicated mapper\n * rather than trying to handle it in the general case.\n */\nconst mapAlternateDirectionTime = (\n  elementTime: number,\n  effectiveDelay: number,\n  duration: number,\n  direction: string,\n  maxSafeTime: number,\n): number => {\n  const adjustedTime = elementTime - effectiveDelay;\n\n  if (effectiveDelay > 0) {\n    // With delay: iteration 0 uses elementTime to include delay offset,\n    // later iterations use cumulative time to track progress across iterations\n    const currentIteration = Math.floor(adjustedTime / duration);\n    if (currentIteration === 0) {\n      return Math.min(elementTime, maxSafeTime);\n    }\n    return Math.min(adjustedTime, maxSafeTime);\n  }\n\n  // Without delay: use iteration time (after direction applied) since animation\n  // naturally resets each iteration\n  const currentIteration = Math.floor(elementTime / duration);\n  const rawIterationTime = elementTime % duration;\n  const iterationTime = applyDirectionToIterationTime(\n    rawIterationTime,\n    duration,\n    direction,\n    currentIteration,\n  );\n  return Math.min(iterationTime, maxSafeTime);\n};\n\n/**\n * Maps element time to animation time based on direction.\n *\n * WHY: This function explicitly transforms element time to animation time, making\n * the time mapping concept clear. Different directions require different transformations\n * to achieve the desired visual effect.\n */\nconst mapElementTimeToAnimationTime = (\n  elementTime: number,\n  timing: AnimationTiming,\n  effectiveDelay: number,\n): number => {\n  const { duration, iterations, direction } = timing;\n  const maxSafeTime = calculateMaxSafeAnimationTime(duration, iterations);\n  // Calculate adjusted time (element time minus delay) for normal/reverse directions\n  const adjustedTime = elementTime - effectiveDelay;\n\n  if (direction === \"reverse\") {\n    return mapReverseDirectionTime(adjustedTime, duration, maxSafeTime);\n  }\n  if (direction === \"alternate\" || direction === \"alternate-reverse\") {\n    return mapAlternateDirectionTime(\n      elementTime,\n      effectiveDelay,\n      duration,\n      direction,\n      maxSafeTime,\n    );\n  }\n  // normal direction - use adjustedTime to account for delay\n  return mapNormalDirectionTime(adjustedTime, duration, maxSafeTime);\n};\n\n/**\n * Determines the animation time for a completed animation based on direction.\n */\nconst getCompletedAnimationTime = (\n  timing: AnimationTiming,\n  maxSafeTime: number,\n): number => {\n  const { direction, iterations, duration } = timing;\n\n  if (direction === \"alternate\" || direction === \"alternate-reverse\") {\n    // For alternate directions, determine if final iteration is reversed\n    const finalIteration = iterations - 1;\n    const isFinalIterationReversed =\n      (direction === \"alternate\" && finalIteration % 2 === 1) ||\n      (direction === \"alternate-reverse\" && finalIteration % 2 === 0);\n\n    if (isFinalIterationReversed) {\n      // At end of reversed iteration, currentTime should be near 0 (but clamped)\n      return Math.min(duration - ANIMATION_PRECISION_OFFSET, maxSafeTime);\n    }\n  }\n\n  // For normal, reverse, or forward final iteration of alternate: use max safe time\n  return maxSafeTime;\n};\n\n/**\n * Validates that animation effect is a KeyframeEffect with a target\n */\nconst validateAnimationEffect = (\n  effect: AnimationEffect | null,\n): effect is KeyframeEffect & { target: Element } => {\n  return (\n    effect !== null &&\n    effect instanceof KeyframeEffect &&\n    effect.target !== null\n  );\n};\n\n/**\n * Extracts timing information from an animation effect.\n * Duration and delay from getTiming() are already in milliseconds.\n * We use getTiming().delay directly from the animation object.\n */\nconst extractAnimationTiming = (effect: KeyframeEffect): AnimationTiming => {\n  const timing = effect.getTiming();\n\n  return {\n    duration: Number(timing.duration) || 0,\n    delay: Number(timing.delay) || 0,\n    iterations: Number(timing.iterations) || DEFAULT_ANIMATION_ITERATIONS,\n    direction: timing.direction || \"normal\",\n  };\n};\n\n// ============================================================================\n// Animation Fill Mode Validation (Development Mode)\n// ============================================================================\n\n/**\n * Analyzes keyframes to detect if animation is a fade-in or fade-out effect.\n * Returns 'fade-in', 'fade-out', 'both', or null.\n */\nconst detectFadePattern = (\n  keyframes: Keyframe[],\n): \"fade-in\" | \"fade-out\" | \"both\" | null => {\n  if (!keyframes || keyframes.length < 2) return null;\n\n  const firstFrame = keyframes[0];\n  const lastFrame = keyframes[keyframes.length - 1];\n\n  const firstOpacity =\n    firstFrame && \"opacity\" in firstFrame ? Number(firstFrame.opacity) : null;\n  const lastOpacity =\n    lastFrame && \"opacity\" in lastFrame ? Number(lastFrame.opacity) : null;\n\n  if (firstOpacity === null || lastOpacity === null) return null;\n\n  const isFadeIn = firstOpacity < lastOpacity;\n  const isFadeOut = firstOpacity > lastOpacity;\n\n  if (isFadeIn && isFadeOut) return \"both\";\n  if (isFadeIn) return \"fade-in\";\n  if (isFadeOut) return \"fade-out\";\n  return null;\n};\n\n/**\n * Analyzes keyframes to detect if animation has transform changes (slide, scale, etc).\n */\nconst hasTransformAnimation = (keyframes: Keyframe[]): boolean => {\n  if (!keyframes || keyframes.length < 2) return false;\n\n  return keyframes.some(\n    (frame) =>\n      \"transform\" in frame ||\n      \"translate\" in frame ||\n      \"scale\" in frame ||\n      \"rotate\" in frame,\n  );\n};\n\n/**\n * Validates CSS animation fill-mode to prevent flashing issues.\n *\n * CRITICAL: Editframe's timeline system pauses animations and manually controls them\n * via animation.currentTime. This means elements exist in the DOM before their animations\n * start. Without proper fill-mode, elements will \"flash\" to their natural state before\n * the animation begins.\n *\n * Common issues:\n * - Delayed animations without 'backwards': Element shows natural state during delay\n * - Fade-in without 'backwards': Element visible before fade starts\n * - Fade-out without 'forwards': Element snaps back after fade completes\n *\n * Only runs in development mode to avoid performance impact in production.\n */\nconst validateAnimationFillMode = (\n  animation: Animation,\n  timing: AnimationTiming,\n): void => {\n  // Only validate in development mode\n  if (\n    typeof process !== \"undefined\" &&\n    process.env?.NODE_ENV === \"production\"\n  ) {\n    return;\n  }\n\n  const effect = animation.effect;\n  if (!validateAnimationEffect(effect)) {\n    return;\n  }\n\n  const effectTiming = effect.getTiming();\n  const fill = effectTiming.fill || \"none\";\n  const target = effect.target;\n\n  // Get animation name for better error messages\n  let animationName = \"unknown\";\n  if (animation.id) {\n    animationName = animation.id;\n  } else if (target instanceof HTMLElement) {\n    const computedStyle = window.getComputedStyle(target);\n    const animationNameValue = computedStyle.animationName;\n    if (animationNameValue && animationNameValue !== \"none\") {\n      animationName = animationNameValue.split(\",\")[0]?.trim() || \"unknown\";\n    }\n  }\n\n  // Create unique key based on animation name and duration\n  const validationKey = `${animationName}-${timing.duration}`;\n\n  // Skip if already validated\n  if (validatedAnimations.has(validationKey)) {\n    return;\n  }\n  validatedAnimations.add(validationKey);\n\n  const warnings: string[] = [];\n\n  // Check 1: Delayed animations without backwards/both\n  if (timing.delay > 0 && fill !== \"backwards\" && fill !== \"both\") {\n    warnings.push(\n      `⚠️  Animation \"${animationName}\" has a ${timing.delay}ms delay but no 'backwards' fill-mode.`,\n      `   This will cause the element to show its natural state during the delay, then suddenly jump when the animation starts.`,\n      `   Fix: Add 'backwards' or 'both' to the animation shorthand.`,\n      `   Example: animation: ${animationName} ${timing.duration}ms ${timing.delay}ms backwards;`,\n    );\n  }\n\n  // Check 2: Analyze keyframes for fade/transform patterns\n  try {\n    const keyframes = effect.getKeyframes();\n    const fadePattern = detectFadePattern(keyframes);\n    const hasTransform = hasTransformAnimation(keyframes);\n\n    // Fade-in or transform-in animations should use backwards\n    if (\n      (fadePattern === \"fade-in\" || hasTransform) &&\n      fill !== \"backwards\" &&\n      fill !== \"both\"\n    ) {\n      warnings.push(\n        `⚠️  Animation \"${animationName}\" modifies initial state but lacks 'backwards' fill-mode.`,\n        `   The element will be visible in its natural state before the animation starts.`,\n        `   Fix: Add 'backwards' or 'both' to the animation.`,\n        `   Example: animation: ${animationName} ${timing.duration}ms backwards;`,\n      );\n    }\n\n    // Fade-out animations should use forwards\n    if (fadePattern === \"fade-out\" && fill !== \"forwards\" && fill !== \"both\") {\n      warnings.push(\n        `⚠️  Animation \"${animationName}\" modifies final state but lacks 'forwards' fill-mode.`,\n        `   The element will snap back to its natural state after the animation completes.`,\n        `   Fix: Add 'forwards' or 'both' to the animation.`,\n        `   Example: animation: ${animationName} ${timing.duration}ms forwards;`,\n      );\n    }\n\n    // Combined effects should use both\n    if (fadePattern === \"both\" && fill !== \"both\") {\n      warnings.push(\n        `⚠️  Animation \"${animationName}\" modifies both initial and final state but doesn't use 'both' fill-mode.`,\n        `   Fix: Use 'both' to apply initial and final states.`,\n        `   Example: animation: ${animationName} ${timing.duration}ms both;`,\n      );\n    }\n  } catch (e) {\n    // Silently skip keyframe analysis if it fails\n  }\n\n  if (\n    warnings.length > 0 &&\n    typeof window !== \"undefined\" &&\n    (window as any).__EDITFRAME_FILL_MODE_WARNINGS__\n  ) {\n    console.groupCollapsed(\n      \"%c🎬 Editframe Animation Fill-Mode Warning\",\n      \"color: #f59e0b; font-weight: bold\",\n    );\n    warnings.forEach((warning) => console.log(warning));\n    console.log(\n      \"\\n📚 Learn more: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode\",\n    );\n    console.groupEnd();\n  }\n};\n\n/**\n * Prepares animation for manual control by ensuring it's paused\n */\nconst prepareAnimation = (animation: Animation): void => {\n  // Ensure animation is in a controllable state\n  // Finished animations can't be controlled, so reset them\n  if (animation.playState === \"finished\") {\n    animation.cancel();\n    // After cancel, animation is in idle state - we can set currentTime directly\n    // No need to play/pause - we'll control it via currentTime\n  } else if (animation.playState === \"running\") {\n    // Pause running animations so we can control them manually\n    animation.pause();\n  }\n  // For \"idle\" or \"paused\" state, we can set currentTime directly without play/pause\n  // Setting currentTime on a paused animation will apply the keyframes\n  // No initialization needed - we control everything via currentTime\n};\n\n/**\n * Maps element time to animation currentTime and sets it on the animation.\n *\n * WHY: This function explicitly performs the time mapping transformation,\n * making it clear that we're transforming element time to animation time.\n */\nconst mapAndSetAnimationTime = (\n  animation: Animation,\n  element: AnimatableElement,\n  timing: AnimationTiming,\n  effectiveDelay: number,\n): void => {\n  // Use ownCurrentTimeMs for all elements (timegroups and other temporal elements)\n  // This gives us time relative to when the element started, which ensures animations\n  // on child elements are synchronized with their containing timegroup's timeline.\n  // For timegroups, ownCurrentTimeMs is the time relative to when the timegroup started.\n  // For other temporal elements, ownCurrentTimeMs is the time relative to their start.\n  const elementTime = element.ownCurrentTimeMs ?? 0;\n\n  // Ensure animation is paused before setting currentTime\n  if (animation.playState === \"running\") {\n    animation.pause();\n  }\n\n  // Calculate adjusted time (element time minus delay)\n  const adjustedTime = elementTime - effectiveDelay;\n\n  // If before delay, show initial keyframe state (0% of animation)\n  if (adjustedTime < 0) {\n    // Before delay: show initial keyframe state\n    // For CSS animations with delay > 0, currentTime includes the delay, so set to elementTime\n    // For CSS animations with delay = 0, currentTime is just animation progress, so set to 0\n    if (timing.delay > 0) {\n      animation.currentTime = elementTime;\n    } else {\n      animation.currentTime = 0;\n    }\n    return;\n  }\n\n  // At delay time (adjustedTime = 0) or after, the animation should be active\n  const { duration, iterations } = timing;\n  const currentIteration = Math.floor(adjustedTime / duration);\n\n  if (currentIteration >= iterations) {\n    // Animation is completed - use completed time mapping\n    const maxSafeTime = calculateMaxSafeAnimationTime(duration, iterations);\n    const completedAnimationTime = getCompletedAnimationTime(\n      timing,\n      maxSafeTime,\n    );\n\n    // CRITICAL: For CSS animations, currentTime behavior differs based on whether delay > 0:\n    // - If timing.delay > 0: currentTime includes the delay (absolute timeline time)\n    // - If timing.delay === 0: currentTime is just animation progress (0 to duration)\n    if (timing.delay > 0) {\n      // Completed: currentTime should be delay + completed animation time (absolute timeline time)\n      animation.currentTime = effectiveDelay + completedAnimationTime;\n    } else {\n      // Completed: currentTime should be just the completed animation time (animation progress)\n      animation.currentTime = completedAnimationTime;\n    }\n  } else {\n    // Animation is in progress - map element time to animation time\n    const animationTime = mapElementTimeToAnimationTime(\n      elementTime,\n      timing,\n      effectiveDelay,\n    );\n\n    // CRITICAL: For CSS animations, currentTime behavior differs based on whether delay > 0:\n    // - If timing.delay > 0: currentTime includes the delay (absolute timeline time)\n    // - If timing.delay === 0: currentTime is just animation progress (0 to duration)\n    //   Stagger offset is handled via adjustedTime calculation, but doesn't affect currentTime format\n    const { direction, delay } = timing;\n\n    if (delay > 0) {\n      // CSS animation with delay: currentTime is absolute timeline time\n      const isAlternateWithDelay =\n        (direction === \"alternate\" || direction === \"alternate-reverse\") &&\n        effectiveDelay > 0;\n      if (isAlternateWithDelay && currentIteration === 0) {\n        // For alternate direction iteration 0 with delay, use elementTime directly\n        animation.currentTime = elementTime;\n      } else {\n        // For other cases with delay, currentTime should be delay + animation time (absolute timeline time)\n        animation.currentTime = effectiveDelay + animationTime;\n      }\n    } else {\n      // CSS animation with delay = 0: currentTime is just animation progress\n      // Stagger offset is already accounted for in adjustedTime, so animationTime is the progress\n      animation.currentTime = animationTime;\n    }\n  }\n};\n\n/**\n * Synchronizes a single animation with the timeline using the element as the time source.\n *\n * For animations in this element's subtree, always use this element as the time source.\n * This handles both animations directly on the temporal element and on its non-temporal children.\n */\nconst synchronizeAnimation = (\n  animation: Animation,\n  element: AnimatableElement,\n): void => {\n  const effect = animation.effect;\n  if (!validateAnimationEffect(effect)) {\n    return;\n  }\n\n  const timing = extractAnimationTiming(effect);\n\n  if (timing.duration <= 0) {\n    animation.currentTime = 0;\n    return;\n  }\n\n  // Validate fill-mode in development mode\n  validateAnimationFillMode(animation, timing);\n\n  // Find the containing timegroup for the animation target.\n  // Temporal elements are always synced to timegroups, so animations should use\n  // the timegroup's timeline as the time source.\n  const target = effect.target;\n  let timeSource: AnimatableElement = element;\n\n  if (target && target instanceof HTMLElement) {\n    // Find the nearest timegroup in the DOM tree\n    const nearestTimegroup = target.closest(\"ef-timegroup\");\n    if (nearestTimegroup && isEFTemporal(nearestTimegroup)) {\n      timeSource = nearestTimegroup as AnimatableElement;\n    }\n  }\n\n  // For stagger offset, we need to find the actual text segment element.\n  // CSS animations might be on the segment itself or on a child element.\n  // If the target is not a text segment, try to find the parent text segment.\n  let staggerElement: AnimatableElement = timeSource;\n  if (target && target instanceof HTMLElement) {\n    // Check if target is a text segment\n    const targetAsAnimatable = target as AnimatableElement;\n    if (supportsStaggerOffset(targetAsAnimatable)) {\n      staggerElement = targetAsAnimatable;\n    } else {\n      // Target might be a child element - find the parent text segment\n      const parentSegment = target.closest(\"ef-text-segment\");\n      if (\n        parentSegment &&\n        supportsStaggerOffset(parentSegment as AnimatableElement)\n      ) {\n        staggerElement = parentSegment as AnimatableElement;\n      }\n    }\n  }\n\n  const effectiveDelay = calculateEffectiveDelay(timing.delay, staggerElement);\n  mapAndSetAnimationTime(animation, timeSource, timing, effectiveDelay);\n};\n\n/**\n * Coordinates animations for a single element and its subtree, using the element as the time source.\n *\n * Uses tracked animations to ensure we can control animations even after they complete.\n * Both CSS animations (created via the 'animation' property) and WAAPI animations are included.\n *\n * CRITICAL: CSS animations are created asynchronously when classes are added. This function\n * discovers new animations on each call and tracks them in memory. Once animations complete,\n * they're removed from getAnimations(), but we keep references to them so we can continue\n * controlling them.\n */\nconst coordinateElementAnimations = (\n  element: AnimatableElement,\n  providedAnimations?: Animation[],\n): void => {\n  // Discover and track animations (includes both current and previously completed ones)\n  // Reuse the current animations array to avoid calling getAnimations() twice\n  // Accept pre-discovered animations to avoid redundant getAnimations() calls\n  const { tracked: trackedAnimations, current: currentAnimations } =\n    discoverAndTrackAnimations(element, providedAnimations);\n\n  for (const animation of trackedAnimations) {\n    // Skip invalid animations (cancelled, removed from DOM, etc.)\n    if (!isAnimationValid(animation, currentAnimations)) {\n      continue;\n    }\n\n    prepareAnimation(animation);\n    synchronizeAnimation(animation, element);\n  }\n};\n\n// ============================================================================\n// Visual State Application\n// ============================================================================\n\n/**\n * Applies visual state (CSS + display) to match temporal state.\n *\n * WHY: This function applies visual state based on the element's phase and state.\n * Phase determines what should be visible, and this function applies that decision.\n */\nconst applyVisualState = (\n  element: AnimatableElement,\n  state: TemporalState,\n): void => {\n  // Always set progress (needed for many use cases)\n  element.style.setProperty(PROGRESS_PROPERTY, `${state.progress}`);\n\n  // Handle visibility based on phase\n  if (!state.isVisible) {\n    element.style.setProperty(\"display\", \"none\");\n    return;\n  }\n  element.style.removeProperty(\"display\");\n\n  // Set other CSS properties for visible elements only\n  element.style.setProperty(DURATION_PROPERTY, `${element.durationMs}ms`);\n  element.style.setProperty(\n    TRANSITION_DURATION_PROPERTY,\n    `${element.parentTimegroup?.overlapMs ?? 0}ms`,\n  );\n  element.style.setProperty(\n    TRANSITION_OUT_START_PROPERTY,\n    `${element.durationMs - (element.parentTimegroup?.overlapMs ?? 0)}ms`,\n  );\n};\n\n/**\n * Applies animation coordination if the element phase requires it.\n *\n * WHY: Animation coordination is driven by phase. If the element is in a phase\n * where animations should be coordinated, we coordinate them.\n */\nconst applyAnimationCoordination = (\n  element: AnimatableElement,\n  phase: ElementPhase,\n  providedAnimations?: Animation[],\n): void => {\n  if (shouldCoordinateAnimations(phase, element)) {\n    coordinateElementAnimations(element, providedAnimations);\n  }\n};\n\n// ============================================================================\n// Main Function\n// ============================================================================\n\n/**\n * Evaluates the complete state for an element update.\n * This separates evaluation (what should the state be?) from application (apply that state).\n */\nconst evaluateElementState = (\n  element: AnimatableElement,\n): ElementUpdateContext => {\n  return {\n    element,\n    state: evaluateTemporalState(element),\n  };\n};\n\n/**\n * Main function: synchronizes DOM element with timeline.\n *\n * Orchestrates clear flow: Phase → Policy → Time Mapping → State Application\n *\n * WHY: This function makes the conceptual flow explicit:\n * 1. Determine phase (what phase is the element in?)\n * 2. Apply policies (should it be visible/coordinated based on phase?)\n * 3. Map time for animations (transform element time to animation time)\n * 4. Apply visual state (update CSS and display based on phase and policies)\n */\nexport const updateAnimations = (element: AnimatableElement): void => {\n  const allAnimations = element.getAnimations({ subtree: true });\n\n  const rootContext = evaluateElementState(element);\n  const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;\n  const { elements: collectedElements, pruned } = deepGetTemporalElements(\n    element,\n    timelineTimeMs,\n  );\n\n  // For pruned elements (invisible containers whose subtrees were skipped),\n  // just set display:none directly — no need to evaluate phase/state since\n  // we already know they're outside their time range.\n  for (const prunedElement of pruned) {\n    prunedElement.style.setProperty(\"display\", \"none\");\n  }\n\n  // Evaluate state only for non-pruned elements (visible + individually\n  // invisible leaf elements that weren't behind a pruned container).\n  const childContexts: ElementUpdateContext[] = [];\n  for (const temporalElement of collectedElements) {\n    if (!pruned.has(temporalElement)) {\n      childContexts.push(evaluateElementState(temporalElement));\n    }\n  }\n\n  // Separate visible and invisible children.\n  // Only visible children need animation coordination (expensive).\n  // Invisible children just need display:none applied (cheap).\n  const visibleChildContexts: ElementUpdateContext[] = [];\n  for (const ctx of childContexts) {\n    if (shouldBeVisible(ctx.state.phase, ctx.element)) {\n      visibleChildContexts.push(ctx);\n    }\n  }\n\n  // Partition allAnimations by closest VISIBLE temporal parent.\n  // Only visible elements need their animations partitioned and coordinated.\n  // Build a Set of visible temporal elements for O(1) lookup, then walk up\n  // from each animation target to find its closest temporal owner.\n  const temporalSet = new Set<Element>(\n    visibleChildContexts.map((c) => c.element),\n  );\n  temporalSet.add(element); // Include root\n  const childAnimations = new Map<AnimatableElement, Animation[]>();\n  for (const animation of allAnimations) {\n    const effect = animation.effect;\n    const target =\n      effect && effect instanceof KeyframeEffect ? effect.target : null;\n    if (!target || !(target instanceof Element)) continue;\n\n    let node: Element | null = target;\n    while (node) {\n      if (temporalSet.has(node)) {\n        let anims = childAnimations.get(node as AnimatableElement);\n        if (!anims) {\n          anims = [];\n          childAnimations.set(node as AnimatableElement, anims);\n        }\n        anims.push(animation);\n        break;\n      }\n      node = node.parentElement;\n    }\n  }\n\n  // Coordinate animations for root and VISIBLE children only.\n  // Invisible children (display:none) have no CSS animations to coordinate,\n  // and when they become visible again, coordination runs on that frame.\n  applyAnimationCoordination(\n    rootContext.element,\n    rootContext.state.phase,\n    allAnimations,\n  );\n  for (const context of visibleChildContexts) {\n    applyAnimationCoordination(\n      context.element,\n      context.state.phase,\n      childAnimations.get(context.element) || [],\n    );\n  }\n\n  // Apply visual state for non-pruned children (pruned ones already got display:none above)\n  applyVisualState(rootContext.element, rootContext.state);\n  for (const context of childContexts) {\n    applyVisualState(context.element, context.state);\n  }\n};\n"],"mappings":"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"}
+{"version":3,"file":"updateAnimations.js","names":["warnings: string[]","timeSource: AnimatableElement","staggerElement: AnimatableElement","node: Element | null","childContexts: ElementUpdateContext[]","visibleChildContexts: ElementUpdateContext[]"],"sources":["../../src/elements/updateAnimations.ts"],"sourcesContent":["import {\n  deepGetTemporalElements,\n  isEFTemporal,\n  type TemporalMixinInterface,\n} from \"./EFTemporal.ts\";\n\n// All animatable elements are temporal elements with HTMLElement interface\nexport type AnimatableElement = TemporalMixinInterface & HTMLElement;\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst ANIMATION_PRECISION_OFFSET = 0.1; // Use 0.1ms to safely avoid completion threshold\nconst DEFAULT_ANIMATION_ITERATIONS = 1;\nconst PROGRESS_PROPERTY = \"--ef-progress\";\nconst DURATION_PROPERTY = \"--ef-duration\";\nconst TRANSITION_DURATION_PROPERTY = \"--ef-transition-duration\";\nconst TRANSITION_OUT_START_PROPERTY = \"--ef-transition-out-start\";\n\n// ============================================================================\n// Animation Tracking\n// ============================================================================\n\n/**\n * Tracks animations per element to prevent them from being lost when they complete.\n * Once an animation reaches 100% completion, it's removed from getAnimations(),\n * but we keep a reference to it so we can continue controlling it.\n */\nconst animationTracker = new WeakMap<Element, Set<Animation>>();\n\n/**\n * Tracks whether DOM structure has changed for an element, requiring animation rediscovery.\n * For render clones (static DOM), this stays false after initial discovery.\n * For prime timeline (interactive), this is set to true when mutations occur.\n */\nconst domStructureChanged = new WeakMap<Element, boolean>();\n\n/**\n * Tracks the last known animation count for an element to detect new animations.\n * Used as a lightweight check before calling expensive getAnimations().\n */\nconst lastAnimationCount = new WeakMap<Element, number>();\n\n/**\n * Tracks which animations have already been validated to avoid duplicate warnings.\n * Uses animation name + duration as the unique key.\n */\nconst validatedAnimations = new Set<string>();\n\n/**\n * Validates that an animation is still valid and controllable.\n * Animations become invalid when:\n * - They've been cancelled (idle state and not in getAnimations())\n * - Their effect is null (animation was removed)\n * - Their target is no longer in the DOM\n */\nconst isAnimationValid = (\n  animation: Animation,\n  currentAnimations: Animation[],\n): boolean => {\n  // Check if animation has been cancelled\n  if (\n    animation.playState === \"idle\" &&\n    !currentAnimations.includes(animation)\n  ) {\n    return false;\n  }\n\n  // Check if animation effect is still valid\n  const effect = animation.effect;\n  if (!effect) {\n    return false;\n  }\n\n  // Check if target is still in DOM\n  if (effect instanceof KeyframeEffect) {\n    const target = effect.target;\n    if (target && target instanceof Element) {\n      if (!target.isConnected) {\n        return false;\n      }\n    }\n  }\n\n  return true;\n};\n\n/**\n * Discovers and tracks animations on an element and its subtree.\n * This ensures we have references to animations even after they complete.\n *\n * Tracks animations per element where they exist, not just on the root element.\n * This allows us to find animations on any element in the subtree.\n *\n * OPTIMIZATION: For render clones (static DOM), discovery happens once at creation.\n * For prime timeline (interactive), discovery is responsive to DOM changes.\n *\n * Also cleans up invalid animations (cancelled, removed from DOM, etc.)\n *\n * @param providedAnimations - Optional pre-discovered animations to avoid redundant getAnimations() calls\n */\nconst discoverAndTrackAnimations = (\n  element: AnimatableElement,\n  providedAnimations?: Animation[],\n): { tracked: Set<Animation>; current: Animation[] } => {\n  animationTracker.has(element);\n  const structureChanged = domStructureChanged.get(element) ?? true;\n\n  // REMOVED: Clone optimization that cached animation references.\n  // The optimization assumed animations were \"static\" for clones, but this was incorrect.\n  // After seeking to a new time, we need fresh animation state from the browser.\n  // Caching caused animations to be stuck at their discovery state (often 0ms).\n\n  // For prime timeline or first discovery: get current animations from the browser (includes subtree)\n  // CRITICAL: This is expensive, so we return it to avoid calling it again\n  // If animations were provided by caller (to avoid redundant calls), use those\n  const currentAnimations =\n    providedAnimations ?? element.getAnimations({ subtree: true });\n\n  // Mark structure as stable after discovery\n  // This prevents redundant getAnimations() calls when DOM hasn't changed\n  domStructureChanged.set(element, false);\n\n  // Track animation count for lightweight change detection\n  lastAnimationCount.set(element, currentAnimations.length);\n\n  // Track animations on each element where they exist\n  for (const animation of currentAnimations) {\n    const effect = animation.effect;\n    const target =\n      effect && effect instanceof KeyframeEffect ? effect.target : null;\n    if (target && target instanceof Element) {\n      let tracked = animationTracker.get(target);\n      if (!tracked) {\n        tracked = new Set<Animation>();\n        animationTracker.set(target, tracked);\n      }\n      tracked.add(animation);\n    }\n  }\n\n  // Also maintain a set on the root element for coordination\n  let rootTracked = animationTracker.get(element);\n  if (!rootTracked) {\n    rootTracked = new Set<Animation>();\n    animationTracker.set(element, rootTracked);\n  }\n\n  // Update root set with all current animations\n  for (const animation of currentAnimations) {\n    rootTracked.add(animation);\n  }\n\n  // Clean up invalid animations from root set\n  // This handles animations that were cancelled, removed from DOM, or had their effects removed\n  for (const animation of rootTracked) {\n    if (!isAnimationValid(animation, currentAnimations)) {\n      rootTracked.delete(animation);\n    }\n  }\n\n  // Build a map of element -> current animations from the subtree lookup we already did\n  // This avoids calling getAnimations() repeatedly on each element (expensive!)\n  const elementAnimationsMap = new Map<Element, Animation[]>();\n  for (const animation of currentAnimations) {\n    const effect = animation.effect;\n    const target =\n      effect && effect instanceof KeyframeEffect ? effect.target : null;\n    if (target && target instanceof Element) {\n      let anims = elementAnimationsMap.get(target);\n      if (!anims) {\n        anims = [];\n        elementAnimationsMap.set(target, anims);\n      }\n      anims.push(animation);\n    }\n  }\n\n  // Clean up invalid animations from per-element sets.\n  // Only walk the full subtree when DOM structure has changed (elements added/removed).\n  // During scrubbing with static DOM, skip this expensive querySelectorAll(\"*\").\n  if (structureChanged) {\n    for (const [el, tracked] of elementAnimationsMap) {\n      const existingTracked = animationTracker.get(el);\n      if (existingTracked) {\n        for (const animation of existingTracked) {\n          if (!isAnimationValid(animation, tracked)) {\n            existingTracked.delete(animation);\n          }\n        }\n        if (existingTracked.size === 0) {\n          animationTracker.delete(el);\n        }\n      }\n    }\n  }\n\n  return { tracked: rootTracked, current: currentAnimations };\n};\n\n/**\n * Cleans up tracked animations when an element is disconnected.\n * This prevents memory leaks.\n */\nexport const cleanupTrackedAnimations = (element: Element): void => {\n  animationTracker.delete(element);\n  domStructureChanged.delete(element);\n  lastAnimationCount.delete(element);\n};\n\n/**\n * Marks that DOM structure has changed for an element, requiring animation rediscovery.\n * Should be called when elements are added/removed or CSS classes change that affect animations.\n */\nexport const markDomStructureChanged = (element: Element): void => {\n  domStructureChanged.set(element, true);\n};\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/**\n * Represents the phase an element is in relative to the timeline.\n * This is the primary concept that drives all visibility and animation decisions.\n */\nexport type ElementPhase =\n  | \"before-start\"\n  | \"active\"\n  | \"at-end-boundary\"\n  | \"after-end\";\n\n/**\n * Represents the temporal state of an element relative to the timeline\n */\ninterface TemporalState {\n  progress: number;\n  isVisible: boolean;\n  timelineTimeMs: number;\n  phase: ElementPhase;\n}\n\n/**\n * Context object that holds all evaluated state for an element update.\n * This groups related state together, reducing parameter passing and making\n * the data flow clearer.\n */\ninterface ElementUpdateContext {\n  element: AnimatableElement;\n  state: TemporalState;\n}\n\n/**\n * Animation timing information extracted from an animation effect.\n * Groups related timing properties together.\n */\ninterface AnimationTiming {\n  duration: number;\n  delay: number;\n  iterations: number;\n  direction: string;\n}\n\n/**\n * Capability interface for elements that support stagger offset.\n * This encapsulates the stagger behavior behind a capability check rather than\n * leaking tag name checks throughout the codebase.\n */\ninterface StaggerableElement extends AnimatableElement {\n  staggerOffsetMs?: number;\n}\n\n// ============================================================================\n// Phase Determination\n// ============================================================================\n\n/**\n * Determines what phase an element is in relative to the timeline.\n *\n * WHY: Phase is the primary concept that drives all decisions. By explicitly\n * enumerating phases, we make the code's logic clear: phase determines visibility,\n * animation coordination, and visual state.\n *\n * Phases:\n * - before-start: Timeline is before element's start time\n * - active: Timeline is within element's active range (start to end, exclusive of end)\n * - at-end-boundary: Timeline is exactly at element's end time\n * - after-end: Timeline is after element's end time\n *\n * Note: We detect \"at-end-boundary\" by checking if timeline equals end time.\n * The boundary policy will then determine if this should be treated as visible/active\n * or not based on element characteristics.\n */\nconst determineElementPhase = (\n  element: AnimatableElement,\n  timelineTimeMs: number,\n): ElementPhase => {\n  // Read endTimeMs once to avoid recalculation issues\n  const endTimeMs = element.endTimeMs;\n  const startTimeMs = element.startTimeMs;\n\n  // Invalid range (end <= start) means element hasn't computed its duration yet,\n  // or has no temporal children (e.g., timegroup with only static HTML).\n  // Treat as always active - these elements should be visible at all times.\n  if (endTimeMs <= startTimeMs) {\n    return \"active\";\n  }\n\n  if (timelineTimeMs < startTimeMs) {\n    return \"before-start\";\n  }\n  // Use epsilon to handle floating point precision issues\n  const epsilon = 0.001;\n  const diff = timelineTimeMs - endTimeMs;\n\n  // If clearly after end (difference > epsilon), return 'after-end'\n  if (diff > epsilon) {\n    return \"after-end\";\n  }\n  // If at or very close to end boundary (within epsilon), return 'at-end-boundary'\n  if (Math.abs(diff) <= epsilon) {\n    return \"at-end-boundary\";\n  }\n  // Otherwise, we're before the end, so check if we're active\n  return \"active\";\n};\n\n// ============================================================================\n// Boundary Policies\n// ============================================================================\n\n/**\n * Policy interface for determining behavior at boundaries.\n * Different policies apply different rules for when elements should be visible\n * or have animations coordinated at exact boundary times.\n */\ninterface BoundaryPolicy {\n  /**\n   * Determines if an element should be considered visible/active at the end boundary\n   * based on the element's characteristics.\n   */\n  shouldIncludeEndBoundary(element: AnimatableElement): boolean;\n}\n\n/**\n * Visibility policy: determines when elements should be visible for display purposes.\n *\n * WHY: Root elements, elements aligned with composition end, and text segments\n * should remain visible at exact end time to prevent flicker and show final frames.\n * Other elements use exclusive end for clean transitions between elements.\n */\nclass VisibilityPolicy implements BoundaryPolicy {\n  shouldIncludeEndBoundary(element: AnimatableElement): boolean {\n    // Root elements should remain visible at exact end time to prevent flicker\n    const isRootElement = !element.parentTimegroup;\n    if (isRootElement) {\n      return true;\n    }\n\n    // Elements aligned with composition end should remain visible at exact end time\n    const isLastElementInComposition =\n      element.endTimeMs === element.rootTimegroup?.endTimeMs;\n    if (isLastElementInComposition) {\n      return true;\n    }\n\n    // Text segments use inclusive end since they're meant to be visible for full duration\n    if (this.isTextSegment(element)) {\n      return true;\n    }\n\n    // Other elements use exclusive end for clean transitions\n    return false;\n  }\n\n  /**\n   * Checks if element is a text segment.\n   * Encapsulates the tag name check to hide implementation detail.\n   */\n  protected isTextSegment(element: AnimatableElement): boolean {\n    return element.tagName === \"EF-TEXT-SEGMENT\";\n  }\n}\n\n// Policy instances (singleton pattern for stateless policies)\nconst visibilityPolicy = new VisibilityPolicy();\n\n/**\n * Determines if an element should be visible based on its phase and visibility policy.\n */\nconst shouldBeVisible = (\n  phase: ElementPhase,\n  element: AnimatableElement,\n): boolean => {\n  if (phase === \"before-start\" || phase === \"after-end\") {\n    return false;\n  }\n  if (phase === \"active\") {\n    return true;\n  }\n  // phase === \"at-end-boundary\"\n  return visibilityPolicy.shouldIncludeEndBoundary(element);\n};\n\n/**\n * Determines if animations should be coordinated based on element phase and animation policy.\n *\n * CRITICAL: Always returns true to support scrubbing to arbitrary times.\n *\n * Previously, this function skipped coordination for before-start and after-end phases as an\n * optimization for live playback. However, this broke scrubbing scenarios where we seek to\n * arbitrary times (timeline scrubbing, thumbnails, video export).\n *\n * The performance cost of always coordinating is minimal:\n * - Animations only update when element time changes\n * - Paused animation updates are optimized by the browser\n * - The benefit is correct animation state at all times, regardless of phase\n */\nconst shouldCoordinateAnimations = (\n  _phase: ElementPhase,\n  _element: AnimatableElement,\n): boolean => {\n  return true;\n};\n\n// ============================================================================\n// Temporal State Evaluation\n// ============================================================================\n\n/**\n * Evaluates what the element's state should be based on the timeline.\n *\n * WHY: This function determines the complete temporal state including phase,\n * which becomes the primary driver for all subsequent decisions.\n */\nexport const evaluateTemporalState = (\n  element: AnimatableElement,\n): TemporalState => {\n  // Get timeline time from root timegroup, or use element's own time if it IS a timegroup\n  const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;\n\n  const progress =\n    element.durationMs <= 0\n      ? 1\n      : Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs));\n\n  const phase = determineElementPhase(element, timelineTimeMs);\n  const isVisible = shouldBeVisible(phase, element);\n\n  return { progress, isVisible, timelineTimeMs, phase };\n};\n\n/**\n * Evaluates element visibility state specifically for animation coordination.\n * Uses inclusive end boundaries to prevent animation jumps at exact boundaries.\n *\n * This is exported for external use cases that need animation-specific visibility\n * evaluation without the full ElementUpdateContext.\n */\nexport const evaluateAnimationVisibilityState = (\n  element: AnimatableElement,\n): TemporalState => {\n  const state = evaluateTemporalState(element);\n  // Override visibility based on animation policy\n  const shouldCoordinate = shouldCoordinateAnimations(state.phase, element);\n  return { ...state, isVisible: shouldCoordinate };\n};\n\n// ============================================================================\n// Animation Time Mapping\n// ============================================================================\n\n/**\n * Capability check: determines if an element supports stagger offset.\n * Encapsulates the knowledge of which element types support this feature.\n */\nconst supportsStaggerOffset = (\n  element: AnimatableElement,\n): element is StaggerableElement => {\n  // Currently only text segments support stagger offset\n  return element.tagName === \"EF-TEXT-SEGMENT\";\n};\n\n/**\n * Calculates effective delay including stagger offset if applicable.\n *\n * Stagger offset allows elements (like text segments) to have their animations\n * start at different times while keeping their visibility timing unchanged.\n * This enables staggered animation effects within a single timegroup.\n */\nconst calculateEffectiveDelay = (\n  delay: number,\n  element: AnimatableElement,\n): number => {\n  if (supportsStaggerOffset(element)) {\n    // Read stagger offset - try property first (more reliable), then CSS variable\n    // The staggerOffsetMs property is set directly on the element and is always available\n    const segment = element as any;\n    if (\n      segment.staggerOffsetMs !== undefined &&\n      segment.staggerOffsetMs !== null\n    ) {\n      return delay + segment.staggerOffsetMs;\n    }\n\n    // Fallback to CSS variable if property not available\n    let cssValue = (element as HTMLElement).style\n      .getPropertyValue(\"--ef-stagger-offset\")\n      .trim();\n\n    if (!cssValue) {\n      cssValue = window\n        .getComputedStyle(element)\n        .getPropertyValue(\"--ef-stagger-offset\")\n        .trim();\n    }\n\n    if (cssValue) {\n      // Parse \"100ms\" format to milliseconds\n      const match = cssValue.match(/(\\d+(?:\\.\\d+)?)\\s*ms?/);\n      if (match) {\n        const staggerOffset = parseFloat(match[1]!);\n        if (!isNaN(staggerOffset)) {\n          return delay + staggerOffset;\n        }\n      } else {\n        // Try parsing as just a number\n        const numValue = parseFloat(cssValue);\n        if (!isNaN(numValue)) {\n          return delay + numValue;\n        }\n      }\n    }\n  }\n  return delay;\n};\n\n/**\n * Calculates maximum safe animation time to prevent completion.\n *\n * WHY: Once an animation reaches \"finished\" state, it can no longer be manually controlled\n * via currentTime. By clamping to just before completion (using ANIMATION_PRECISION_OFFSET),\n * we ensure the animation remains in a controllable state, allowing us to synchronize it\n * with the timeline even when it would naturally be complete.\n */\nconst calculateMaxSafeAnimationTime = (\n  duration: number,\n  iterations: number,\n): number => {\n  return duration * iterations - ANIMATION_PRECISION_OFFSET;\n};\n\n/**\n * Determines if the current iteration should be reversed based on direction\n */\nconst shouldReverseIteration = (\n  direction: string,\n  currentIteration: number,\n): boolean => {\n  return (\n    direction === \"reverse\" ||\n    (direction === \"alternate\" && currentIteration % 2 === 1) ||\n    (direction === \"alternate-reverse\" && currentIteration % 2 === 0)\n  );\n};\n\n/**\n * Applies direction to iteration time (reverses if needed)\n */\nconst applyDirectionToIterationTime = (\n  currentIterationTime: number,\n  duration: number,\n  direction: string,\n  currentIteration: number,\n): number => {\n  if (shouldReverseIteration(direction, currentIteration)) {\n    return duration - currentIterationTime;\n  }\n  return currentIterationTime;\n};\n\n/**\n * Maps element time to animation time for normal direction.\n * Uses cumulative time throughout the animation.\n * Note: elementTime should already be adjusted (elementTime - effectiveDelay).\n */\nconst mapNormalDirectionTime = (\n  elementTime: number,\n  duration: number,\n  maxSafeTime: number,\n): number => {\n  const currentIteration = Math.floor(elementTime / duration);\n  const iterationTime = elementTime % duration;\n  const cumulativeTime = currentIteration * duration + iterationTime;\n  return Math.min(cumulativeTime, maxSafeTime);\n};\n\n/**\n * Maps element time to animation time for reverse direction.\n * Uses cumulative time with reversed iterations.\n * Note: elementTime should already be adjusted (elementTime - effectiveDelay).\n */\nconst mapReverseDirectionTime = (\n  elementTime: number,\n  duration: number,\n  maxSafeTime: number,\n): number => {\n  const currentIteration = Math.floor(elementTime / duration);\n  const rawIterationTime = elementTime % duration;\n  const reversedIterationTime = duration - rawIterationTime;\n  const cumulativeTime = currentIteration * duration + reversedIterationTime;\n  return Math.min(cumulativeTime, maxSafeTime);\n};\n\n/**\n * Maps element time to animation time for alternate/alternate-reverse directions.\n *\n * WHY SPECIAL HANDLING: Alternate directions oscillate between forward and reverse iterations.\n * Without delay, we use iteration time (0 to duration) because the animation naturally\n * resets each iteration. However, with delay, iteration 0 needs to account for the delay\n * offset (using ownCurrentTimeMs), and later iterations need cumulative time to properly\n * track progress across multiple iterations. This complexity requires a dedicated mapper\n * rather than trying to handle it in the general case.\n */\nconst mapAlternateDirectionTime = (\n  elementTime: number,\n  effectiveDelay: number,\n  duration: number,\n  direction: string,\n  maxSafeTime: number,\n): number => {\n  const adjustedTime = elementTime - effectiveDelay;\n\n  if (effectiveDelay > 0) {\n    // With delay: iteration 0 uses elementTime to include delay offset,\n    // later iterations use cumulative time to track progress across iterations\n    const currentIteration = Math.floor(adjustedTime / duration);\n    if (currentIteration === 0) {\n      return Math.min(elementTime, maxSafeTime);\n    }\n    return Math.min(adjustedTime, maxSafeTime);\n  }\n\n  // Without delay: use iteration time (after direction applied) since animation\n  // naturally resets each iteration\n  const currentIteration = Math.floor(elementTime / duration);\n  const rawIterationTime = elementTime % duration;\n  const iterationTime = applyDirectionToIterationTime(\n    rawIterationTime,\n    duration,\n    direction,\n    currentIteration,\n  );\n  return Math.min(iterationTime, maxSafeTime);\n};\n\n/**\n * Maps element time to animation time based on direction.\n *\n * WHY: This function explicitly transforms element time to animation time, making\n * the time mapping concept clear. Different directions require different transformations\n * to achieve the desired visual effect.\n */\nconst mapElementTimeToAnimationTime = (\n  elementTime: number,\n  timing: AnimationTiming,\n  effectiveDelay: number,\n): number => {\n  const { duration, iterations, direction } = timing;\n  const maxSafeTime = calculateMaxSafeAnimationTime(duration, iterations);\n  // Calculate adjusted time (element time minus delay) for normal/reverse directions\n  const adjustedTime = elementTime - effectiveDelay;\n\n  if (direction === \"reverse\") {\n    return mapReverseDirectionTime(adjustedTime, duration, maxSafeTime);\n  }\n  if (direction === \"alternate\" || direction === \"alternate-reverse\") {\n    return mapAlternateDirectionTime(\n      elementTime,\n      effectiveDelay,\n      duration,\n      direction,\n      maxSafeTime,\n    );\n  }\n  // normal direction - use adjustedTime to account for delay\n  return mapNormalDirectionTime(adjustedTime, duration, maxSafeTime);\n};\n\n/**\n * Determines the animation time for a completed animation based on direction.\n */\nconst getCompletedAnimationTime = (\n  timing: AnimationTiming,\n  maxSafeTime: number,\n): number => {\n  const { direction, iterations, duration } = timing;\n\n  if (direction === \"alternate\" || direction === \"alternate-reverse\") {\n    // For alternate directions, determine if final iteration is reversed\n    const finalIteration = iterations - 1;\n    const isFinalIterationReversed =\n      (direction === \"alternate\" && finalIteration % 2 === 1) ||\n      (direction === \"alternate-reverse\" && finalIteration % 2 === 0);\n\n    if (isFinalIterationReversed) {\n      // At end of reversed iteration, currentTime should be near 0 (but clamped)\n      return Math.min(duration - ANIMATION_PRECISION_OFFSET, maxSafeTime);\n    }\n  }\n\n  // For normal, reverse, or forward final iteration of alternate: use max safe time\n  return maxSafeTime;\n};\n\n/**\n * Validates that animation effect is a KeyframeEffect with a target\n */\nconst validateAnimationEffect = (\n  effect: AnimationEffect | null,\n): effect is KeyframeEffect & { target: Element } => {\n  return (\n    effect !== null &&\n    effect instanceof KeyframeEffect &&\n    effect.target !== null\n  );\n};\n\n/**\n * Extracts timing information from an animation effect.\n * Duration and delay from getTiming() are already in milliseconds.\n * We use getTiming().delay directly from the animation object.\n */\nconst extractAnimationTiming = (effect: KeyframeEffect): AnimationTiming => {\n  const timing = effect.getTiming();\n\n  return {\n    duration: Number(timing.duration) || 0,\n    delay: Number(timing.delay) || 0,\n    iterations: Number(timing.iterations) || DEFAULT_ANIMATION_ITERATIONS,\n    direction: timing.direction || \"normal\",\n  };\n};\n\n// ============================================================================\n// Animation Fill Mode Validation (Development Mode)\n// ============================================================================\n\n/**\n * Analyzes keyframes to detect if animation is a fade-in or fade-out effect.\n * Returns 'fade-in', 'fade-out', 'both', or null.\n */\nconst detectFadePattern = (\n  keyframes: Keyframe[],\n): \"fade-in\" | \"fade-out\" | \"both\" | null => {\n  if (!keyframes || keyframes.length < 2) return null;\n\n  const firstFrame = keyframes[0];\n  const lastFrame = keyframes[keyframes.length - 1];\n\n  const firstOpacity =\n    firstFrame && \"opacity\" in firstFrame ? Number(firstFrame.opacity) : null;\n  const lastOpacity =\n    lastFrame && \"opacity\" in lastFrame ? Number(lastFrame.opacity) : null;\n\n  if (firstOpacity === null || lastOpacity === null) return null;\n\n  const isFadeIn = firstOpacity < lastOpacity;\n  const isFadeOut = firstOpacity > lastOpacity;\n\n  if (isFadeIn && isFadeOut) return \"both\";\n  if (isFadeIn) return \"fade-in\";\n  if (isFadeOut) return \"fade-out\";\n  return null;\n};\n\n/**\n * Analyzes keyframes to detect if animation has transform changes (slide, scale, etc).\n */\nconst hasTransformAnimation = (keyframes: Keyframe[]): boolean => {\n  if (!keyframes || keyframes.length < 2) return false;\n\n  return keyframes.some(\n    (frame) =>\n      \"transform\" in frame ||\n      \"translate\" in frame ||\n      \"scale\" in frame ||\n      \"rotate\" in frame,\n  );\n};\n\n/**\n * Validates CSS animation fill-mode to prevent flashing issues.\n *\n * CRITICAL: Editframe's timeline system pauses animations and manually controls them\n * via animation.currentTime. This means elements exist in the DOM before their animations\n * start. Without proper fill-mode, elements will \"flash\" to their natural state before\n * the animation begins.\n *\n * Common issues:\n * - Delayed animations without 'backwards': Element shows natural state during delay\n * - Fade-in without 'backwards': Element visible before fade starts\n * - Fade-out without 'forwards': Element snaps back after fade completes\n *\n * Only runs in development mode to avoid performance impact in production.\n */\nconst validateAnimationFillMode = (\n  animation: Animation,\n  timing: AnimationTiming,\n): void => {\n  // Only validate in development mode\n  if (\n    typeof process !== \"undefined\" &&\n    process.env?.NODE_ENV === \"production\"\n  ) {\n    return;\n  }\n\n  const effect = animation.effect;\n  if (!validateAnimationEffect(effect)) {\n    return;\n  }\n\n  const effectTiming = effect.getTiming();\n  const fill = effectTiming.fill || \"none\";\n  const target = effect.target;\n\n  // Get animation name for better error messages\n  let animationName = \"unknown\";\n  if (animation.id) {\n    animationName = animation.id;\n  } else if (target instanceof HTMLElement) {\n    const computedStyle = window.getComputedStyle(target);\n    const animationNameValue = computedStyle.animationName;\n    if (animationNameValue && animationNameValue !== \"none\") {\n      animationName = animationNameValue.split(\",\")[0]?.trim() || \"unknown\";\n    }\n  }\n\n  // Create unique key based on animation name and duration\n  const validationKey = `${animationName}-${timing.duration}`;\n\n  // Skip if already validated\n  if (validatedAnimations.has(validationKey)) {\n    return;\n  }\n  validatedAnimations.add(validationKey);\n\n  const warnings: string[] = [];\n\n  // Check 1: Delayed animations without backwards/both\n  if (timing.delay > 0 && fill !== \"backwards\" && fill !== \"both\") {\n    warnings.push(\n      `⚠️  Animation \"${animationName}\" has a ${timing.delay}ms delay but no 'backwards' fill-mode.`,\n      `   This will cause the element to show its natural state during the delay, then suddenly jump when the animation starts.`,\n      `   Fix: Add 'backwards' or 'both' to the animation shorthand.`,\n      `   Example: animation: ${animationName} ${timing.duration}ms ${timing.delay}ms backwards;`,\n    );\n  }\n\n  // Check 2: Analyze keyframes for fade/transform patterns\n  try {\n    const keyframes = effect.getKeyframes();\n    const fadePattern = detectFadePattern(keyframes);\n    const hasTransform = hasTransformAnimation(keyframes);\n\n    // Fade-in or transform-in animations should use backwards\n    if (\n      (fadePattern === \"fade-in\" || hasTransform) &&\n      fill !== \"backwards\" &&\n      fill !== \"both\"\n    ) {\n      warnings.push(\n        `⚠️  Animation \"${animationName}\" modifies initial state but lacks 'backwards' fill-mode.`,\n        `   The element will be visible in its natural state before the animation starts.`,\n        `   Fix: Add 'backwards' or 'both' to the animation.`,\n        `   Example: animation: ${animationName} ${timing.duration}ms backwards;`,\n      );\n    }\n\n    // Fade-out animations should use forwards\n    if (fadePattern === \"fade-out\" && fill !== \"forwards\" && fill !== \"both\") {\n      warnings.push(\n        `⚠️  Animation \"${animationName}\" modifies final state but lacks 'forwards' fill-mode.`,\n        `   The element will snap back to its natural state after the animation completes.`,\n        `   Fix: Add 'forwards' or 'both' to the animation.`,\n        `   Example: animation: ${animationName} ${timing.duration}ms forwards;`,\n      );\n    }\n\n    // Combined effects should use both\n    if (fadePattern === \"both\" && fill !== \"both\") {\n      warnings.push(\n        `⚠️  Animation \"${animationName}\" modifies both initial and final state but doesn't use 'both' fill-mode.`,\n        `   Fix: Use 'both' to apply initial and final states.`,\n        `   Example: animation: ${animationName} ${timing.duration}ms both;`,\n      );\n    }\n  } catch (e) {\n    // Silently skip keyframe analysis if it fails\n  }\n\n  if (\n    warnings.length > 0 &&\n    typeof window !== \"undefined\" &&\n    (window as any).__EDITFRAME_FILL_MODE_WARNINGS__\n  ) {\n    console.groupCollapsed(\n      \"%c🎬 Editframe Animation Fill-Mode Warning\",\n      \"color: #f59e0b; font-weight: bold\",\n    );\n    warnings.forEach((warning) => console.log(warning));\n    console.log(\n      \"\\n📚 Learn more: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode\",\n    );\n    console.groupEnd();\n  }\n};\n\n/**\n * Prepares animation for manual control by ensuring it's paused\n */\nconst prepareAnimation = (animation: Animation): void => {\n  // Ensure animation is in a controllable state\n  // Finished animations can't be controlled, so reset them\n  if (animation.playState === \"finished\") {\n    animation.cancel();\n    // After cancel, animation is in idle state - we can set currentTime directly\n    // No need to play/pause - we'll control it via currentTime\n  } else if (animation.playState === \"running\") {\n    // Pause running animations so we can control them manually\n    animation.pause();\n  }\n  // For \"idle\" or \"paused\" state, we can set currentTime directly without play/pause\n  // Setting currentTime on a paused animation will apply the keyframes\n  // No initialization needed - we control everything via currentTime\n};\n\n/**\n * Maps element time to animation currentTime and sets it on the animation.\n *\n * WHY: This function explicitly performs the time mapping transformation,\n * making it clear that we're transforming element time to animation time.\n */\nconst mapAndSetAnimationTime = (\n  animation: Animation,\n  element: AnimatableElement,\n  timing: AnimationTiming,\n  effectiveDelay: number,\n): void => {\n  // Use ownCurrentTimeMs for all elements (timegroups and other temporal elements)\n  // This gives us time relative to when the element started, which ensures animations\n  // on child elements are synchronized with their containing timegroup's timeline.\n  // For timegroups, ownCurrentTimeMs is the time relative to when the timegroup started.\n  // For other temporal elements, ownCurrentTimeMs is the time relative to their start.\n  const elementTime = element.ownCurrentTimeMs ?? 0;\n\n  // Ensure animation is paused before setting currentTime\n  if (animation.playState === \"running\") {\n    animation.pause();\n  }\n\n  // Calculate adjusted time (element time minus delay)\n  const adjustedTime = elementTime - effectiveDelay;\n\n  // If before delay, show initial keyframe state (0% of animation)\n  if (adjustedTime < 0) {\n    // Before delay: show initial keyframe state\n    // For CSS animations with delay > 0, currentTime includes the delay, so set to elementTime\n    // For CSS animations with delay = 0, currentTime is just animation progress, so set to 0\n    if (timing.delay > 0) {\n      animation.currentTime = elementTime;\n    } else {\n      animation.currentTime = 0;\n    }\n    return;\n  }\n\n  // At delay time (adjustedTime = 0) or after, the animation should be active\n  const { duration, iterations } = timing;\n  const currentIteration = Math.floor(adjustedTime / duration);\n\n  if (currentIteration >= iterations) {\n    // Animation is completed - use completed time mapping\n    const maxSafeTime = calculateMaxSafeAnimationTime(duration, iterations);\n    const completedAnimationTime = getCompletedAnimationTime(\n      timing,\n      maxSafeTime,\n    );\n\n    // CRITICAL: For CSS animations, currentTime behavior differs based on whether delay > 0:\n    // - If timing.delay > 0: currentTime includes the delay (absolute timeline time)\n    // - If timing.delay === 0: currentTime is just animation progress (0 to duration)\n    if (timing.delay > 0) {\n      // Completed: currentTime should be delay + completed animation time (absolute timeline time)\n      animation.currentTime = effectiveDelay + completedAnimationTime;\n    } else {\n      // Completed: currentTime should be just the completed animation time (animation progress)\n      animation.currentTime = completedAnimationTime;\n    }\n  } else {\n    // Animation is in progress - map element time to animation time\n    const animationTime = mapElementTimeToAnimationTime(\n      elementTime,\n      timing,\n      effectiveDelay,\n    );\n\n    // CRITICAL: For CSS animations, currentTime behavior differs based on whether delay > 0:\n    // - If timing.delay > 0: currentTime includes the delay (absolute timeline time)\n    // - If timing.delay === 0: currentTime is just animation progress (0 to duration)\n    //   Stagger offset is handled via adjustedTime calculation, but doesn't affect currentTime format\n    const { direction, delay } = timing;\n\n    if (delay > 0) {\n      // CSS animation with delay: currentTime is absolute timeline time\n      const isAlternateWithDelay =\n        (direction === \"alternate\" || direction === \"alternate-reverse\") &&\n        effectiveDelay > 0;\n      if (isAlternateWithDelay && currentIteration === 0) {\n        // For alternate direction iteration 0 with delay, use elementTime directly\n        animation.currentTime = elementTime;\n      } else {\n        // For other cases with delay, currentTime should be delay + animation time (absolute timeline time)\n        animation.currentTime = effectiveDelay + animationTime;\n      }\n    } else {\n      // CSS animation with delay = 0: currentTime is just animation progress\n      // Stagger offset is already accounted for in adjustedTime, so animationTime is the progress\n      animation.currentTime = animationTime;\n    }\n  }\n};\n\n/**\n * Synchronizes a single animation with the timeline using the element as the time source.\n *\n * For animations in this element's subtree, always use this element as the time source.\n * This handles both animations directly on the temporal element and on its non-temporal children.\n */\nconst synchronizeAnimation = (\n  animation: Animation,\n  element: AnimatableElement,\n): void => {\n  const effect = animation.effect;\n  if (!validateAnimationEffect(effect)) {\n    return;\n  }\n\n  const timing = extractAnimationTiming(effect);\n\n  if (timing.duration <= 0) {\n    animation.currentTime = 0;\n    return;\n  }\n\n  // Validate fill-mode in development mode\n  validateAnimationFillMode(animation, timing);\n\n  // Find the containing timegroup for the animation target.\n  // Temporal elements are always synced to timegroups, so animations should use\n  // the timegroup's timeline as the time source.\n  const target = effect.target;\n  let timeSource: AnimatableElement = element;\n\n  if (target && target instanceof HTMLElement) {\n    // Find the nearest timegroup in the DOM tree\n    const nearestTimegroup = target.closest(\"ef-timegroup\");\n    if (nearestTimegroup && isEFTemporal(nearestTimegroup)) {\n      timeSource = nearestTimegroup as AnimatableElement;\n    }\n  }\n\n  // For stagger offset, we need to find the actual text segment element.\n  // CSS animations might be on the segment itself or on a child element.\n  // If the target is not a text segment, try to find the parent text segment.\n  let staggerElement: AnimatableElement = timeSource;\n  if (target && target instanceof HTMLElement) {\n    // Check if target is a text segment\n    const targetAsAnimatable = target as AnimatableElement;\n    if (supportsStaggerOffset(targetAsAnimatable)) {\n      staggerElement = targetAsAnimatable;\n    } else {\n      // Target might be a child element - find the parent text segment\n      const parentSegment = target.closest(\"ef-text-segment\");\n      if (\n        parentSegment &&\n        supportsStaggerOffset(parentSegment as AnimatableElement)\n      ) {\n        staggerElement = parentSegment as AnimatableElement;\n      }\n    }\n  }\n\n  const effectiveDelay = calculateEffectiveDelay(timing.delay, staggerElement);\n  mapAndSetAnimationTime(animation, timeSource, timing, effectiveDelay);\n};\n\n/**\n * Coordinates animations for a single element and its subtree, using the element as the time source.\n *\n * Uses tracked animations to ensure we can control animations even after they complete.\n * Both CSS animations (created via the 'animation' property) and WAAPI animations are included.\n *\n * CRITICAL: CSS animations are created asynchronously when classes are added. This function\n * discovers new animations on each call and tracks them in memory. Once animations complete,\n * they're removed from getAnimations(), but we keep references to them so we can continue\n * controlling them.\n */\nconst coordinateElementAnimations = (\n  element: AnimatableElement,\n  providedAnimations?: Animation[],\n): void => {\n  // Discover and track animations (includes both current and previously completed ones)\n  // Reuse the current animations array to avoid calling getAnimations() twice\n  // Accept pre-discovered animations to avoid redundant getAnimations() calls\n  const { tracked: trackedAnimations, current: currentAnimations } =\n    discoverAndTrackAnimations(element, providedAnimations);\n\n  for (const animation of trackedAnimations) {\n    // Skip invalid animations (cancelled, removed from DOM, etc.)\n    if (!isAnimationValid(animation, currentAnimations)) {\n      continue;\n    }\n\n    prepareAnimation(animation);\n    synchronizeAnimation(animation, element);\n  }\n};\n\n// ============================================================================\n// Visual State Application\n// ============================================================================\n\n/**\n * Applies visual state (CSS + display) to match temporal state.\n *\n * WHY: This function applies visual state based on the element's phase and state.\n * Phase determines what should be visible, and this function applies that decision.\n */\nconst applyVisualState = (\n  element: AnimatableElement,\n  state: TemporalState,\n): void => {\n  // Always set progress (needed for many use cases)\n  element.style.setProperty(PROGRESS_PROPERTY, `${state.progress}`);\n\n  // Handle visibility based on phase\n  if (!state.isVisible) {\n    element.style.setProperty(\"display\", \"none\");\n    return;\n  }\n  element.style.removeProperty(\"display\");\n\n  // Set other CSS properties for visible elements only\n  element.style.setProperty(DURATION_PROPERTY, `${element.durationMs}ms`);\n  element.style.setProperty(\n    TRANSITION_DURATION_PROPERTY,\n    `${element.parentTimegroup?.overlapMs ?? 0}ms`,\n  );\n  element.style.setProperty(\n    TRANSITION_OUT_START_PROPERTY,\n    `${element.durationMs - (element.parentTimegroup?.overlapMs ?? 0)}ms`,\n  );\n};\n\n/**\n * Applies animation coordination if the element phase requires it.\n *\n * WHY: Animation coordination is driven by phase. If the element is in a phase\n * where animations should be coordinated, we coordinate them.\n */\nconst applyAnimationCoordination = (\n  element: AnimatableElement,\n  phase: ElementPhase,\n  providedAnimations?: Animation[],\n): void => {\n  if (shouldCoordinateAnimations(phase, element)) {\n    coordinateElementAnimations(element, providedAnimations);\n  }\n};\n\n// ============================================================================\n// SVG SMIL Synchronization\n// ============================================================================\n\n/**\n * Finds the nearest temporal ancestor (or self) for a given element.\n * Returns the element itself if it is a temporal element, otherwise walks up.\n * Falls back to the provided root element.\n */\nconst findNearestTemporalAncestor = (\n  element: Element,\n  root: AnimatableElement,\n): AnimatableElement => {\n  let node: Element | null = element;\n  while (node) {\n    if (isEFTemporal(node)) {\n      return node as AnimatableElement;\n    }\n    node = node.parentElement;\n  }\n  return root;\n};\n\n/**\n * Synchronizes all SVG SMIL animations in the subtree with the timeline.\n *\n * SVG has its own animation clock on each SVGSVGElement. We pause it and\n * seek it to the owning temporal element's current time (converted to seconds).\n */\nconst synchronizeSvgAnimations = (root: AnimatableElement): void => {\n  const svgElements = (root as HTMLElement).querySelectorAll(\"svg\");\n  for (const svg of svgElements) {\n    const owner = findNearestTemporalAncestor(svg, root);\n    const timeMs = owner.currentTimeMs ?? 0;\n    svg.setCurrentTime(timeMs / 1000);\n    svg.pauseAnimations();\n  }\n};\n\n// ============================================================================\n// Media Element Synchronization\n// ============================================================================\n\n/**\n * Synchronizes all <video> and <audio> elements in the subtree with the timeline.\n *\n * Sets currentTime (in seconds) to match the owning temporal element's position\n * and ensures the elements are paused (playback is controlled by the timeline).\n */\nconst synchronizeMediaElements = (root: AnimatableElement): void => {\n  const mediaElements = (root as HTMLElement).querySelectorAll(\"video, audio\");\n  for (const media of mediaElements as NodeListOf<HTMLMediaElement>) {\n    const owner = findNearestTemporalAncestor(media, root);\n    const timeMs = owner.currentTimeMs ?? 0;\n    const timeSec = timeMs / 1000;\n    if (media.currentTime !== timeSec) {\n      media.currentTime = timeSec;\n    }\n    if (!media.paused) {\n      media.pause();\n    }\n  }\n};\n\n// ============================================================================\n// Main Function\n// ============================================================================\n\n/**\n * Evaluates the complete state for an element update.\n * This separates evaluation (what should the state be?) from application (apply that state).\n */\nconst evaluateElementState = (\n  element: AnimatableElement,\n): ElementUpdateContext => {\n  return {\n    element,\n    state: evaluateTemporalState(element),\n  };\n};\n\n/**\n * Main function: synchronizes DOM element with timeline.\n *\n * Orchestrates clear flow: Phase → Policy → Time Mapping → State Application\n *\n * WHY: This function makes the conceptual flow explicit:\n * 1. Determine phase (what phase is the element in?)\n * 2. Apply policies (should it be visible/coordinated based on phase?)\n * 3. Map time for animations (transform element time to animation time)\n * 4. Apply visual state (update CSS and display based on phase and policies)\n */\nexport const updateAnimations = (element: AnimatableElement): void => {\n  const allAnimations = element.getAnimations({ subtree: true });\n\n  const rootContext = evaluateElementState(element);\n  const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;\n  const { elements: collectedElements, pruned } = deepGetTemporalElements(\n    element,\n    timelineTimeMs,\n  );\n\n  // For pruned elements (invisible containers whose subtrees were skipped),\n  // just set display:none directly — no need to evaluate phase/state since\n  // we already know they're outside their time range.\n  for (const prunedElement of pruned) {\n    prunedElement.style.setProperty(\"display\", \"none\");\n  }\n\n  // Evaluate state only for non-pruned elements (visible + individually\n  // invisible leaf elements that weren't behind a pruned container).\n  const childContexts: ElementUpdateContext[] = [];\n  for (const temporalElement of collectedElements) {\n    if (!pruned.has(temporalElement)) {\n      childContexts.push(evaluateElementState(temporalElement));\n    }\n  }\n\n  // Separate visible and invisible children.\n  // Only visible children need animation coordination (expensive).\n  // Invisible children just need display:none applied (cheap).\n  const visibleChildContexts: ElementUpdateContext[] = [];\n  for (const ctx of childContexts) {\n    if (shouldBeVisible(ctx.state.phase, ctx.element)) {\n      visibleChildContexts.push(ctx);\n    }\n  }\n\n  // Partition allAnimations by closest VISIBLE temporal parent.\n  // Only visible elements need their animations partitioned and coordinated.\n  // Build a Set of visible temporal elements for O(1) lookup, then walk up\n  // from each animation target to find its closest temporal owner.\n  const temporalSet = new Set<Element>(\n    visibleChildContexts.map((c) => c.element),\n  );\n  temporalSet.add(element); // Include root\n  const childAnimations = new Map<AnimatableElement, Animation[]>();\n  for (const animation of allAnimations) {\n    const effect = animation.effect;\n    const target =\n      effect && effect instanceof KeyframeEffect ? effect.target : null;\n    if (!target || !(target instanceof Element)) continue;\n\n    let node: Element | null = target;\n    while (node) {\n      if (temporalSet.has(node)) {\n        let anims = childAnimations.get(node as AnimatableElement);\n        if (!anims) {\n          anims = [];\n          childAnimations.set(node as AnimatableElement, anims);\n        }\n        anims.push(animation);\n        break;\n      }\n      node = node.parentElement;\n    }\n  }\n\n  // Coordinate animations for root and VISIBLE children only.\n  // Invisible children (display:none) have no CSS animations to coordinate,\n  // and when they become visible again, coordination runs on that frame.\n  applyAnimationCoordination(\n    rootContext.element,\n    rootContext.state.phase,\n    allAnimations,\n  );\n  for (const context of visibleChildContexts) {\n    applyAnimationCoordination(\n      context.element,\n      context.state.phase,\n      childAnimations.get(context.element) || [],\n    );\n  }\n\n  // Apply visual state for non-pruned children (pruned ones already got display:none above)\n  applyVisualState(rootContext.element, rootContext.state);\n  for (const context of childContexts) {\n    applyVisualState(context.element, context.state);\n  }\n\n  // Synchronize non-CSS animation systems\n  synchronizeSvgAnimations(element);\n  synchronizeMediaElements(element);\n};\n"],"mappings":"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"}

package/dist/preview/renderTimegroupToVideo.js

@@ -345,20 +345,20 @@ async function renderTimegroupToVideo(timegroup, options = {}) {
 		} catch (e) {}
 		if (config.benchmarkMode) return;
 		await output.finalize();
-		if (options.telemetryToken) {
+		{
 			const elapsedMs = Math.round(performance.now() - renderStartTime);
 			const endpoint = options.telemetryEndpoint ?? "https://editframe.com";
 			const efMediaCount = timegroup.querySelectorAll("ef-video,ef-audio").length;
 			const efImageCount = timegroup.querySelectorAll("ef-image").length;
 			const efCaptionsCount = timegroup.querySelectorAll("ef-captions").length;
 			const efTextCount = timegroup.querySelectorAll("ef-text").length;
+			const headers = { "Content-Type": "application/json" };
+			if (options.telemetryToken) headers["Authorization"] = `Bearer ${options.telemetryToken}`;
 			fetch(`${endpoint}/api/v1/telemetry`, {
 				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-					Authorization: `Bearer ${options.telemetryToken}`
-				},
+				headers,
 				body: JSON.stringify({
+					event_type: "render",
 					render_path: "client",
 					duration_ms: elapsedMs,
 					width: config.videoWidth,

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: {\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 {\n    clone: renderClone,\n    container: cloneContainer,\n    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 clone container (keeps renderClone in its React-managed DOM position)\n  previewContainer.appendChild(cloneContainer);\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    // Report telemetry (fire-and-forget)\n    if (options.telemetryToken) {\n      const elapsedMs = Math.round(performance.now() - renderStartTime);\n      const endpoint = options.telemetryEndpoint ?? \"https://editframe.com\";\n      const efMediaCount =\n        timegroup.querySelectorAll(\"ef-video,ef-audio\").length;\n      const efImageCount = timegroup.querySelectorAll(\"ef-image\").length;\n      const efCaptionsCount = timegroup.querySelectorAll(\"ef-captions\").length;\n      const efTextCount = timegroup.querySelectorAll(\"ef-text\").length;\n      fetch(`${endpoint}/api/v1/telemetry`, {\n        method: \"POST\",\n        headers: {\n          \"Content-Type\": \"application/json\",\n          Authorization: `Bearer ${options.telemetryToken}`,\n        },\n        body: JSON.stringify({\n          render_path: \"client\",\n          duration_ms: elapsedMs,\n          width: config.videoWidth,\n          height: config.videoHeight,\n          fps: config.fps,\n          feature_usage: {\n            efMediaCount,\n            efImageCount,\n            efCaptionsCount,\n            efTextCount,\n          },\n        }),\n        keepalive: true,\n      }).catch(() => {\n        // Telemetry errors must never surface to users.\n      });\n    }\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    // Remove previewContainer first — renderClone was moved into it, so it must be\n    // detached before cleanupRenderClone() unmounts the React root that owns renderClone.\n    if (previewContainer.parentNode) {\n      previewContainer.parentNode.removeChild(previewContainer);\n    }\n    cleanupRenderClone();\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","headers: Record<string, string>"],"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 {\n    clone: renderClone,\n    container: cloneContainer,\n    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 clone container (keeps renderClone in its React-managed DOM position)\n  previewContainer.appendChild(cloneContainer);\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    // Report telemetry (fire-and-forget, anonymous)\n    {\n      const elapsedMs = Math.round(performance.now() - renderStartTime);\n      const endpoint = options.telemetryEndpoint ?? \"https://editframe.com\";\n      const efMediaCount =\n        timegroup.querySelectorAll(\"ef-video,ef-audio\").length;\n      const efImageCount = timegroup.querySelectorAll(\"ef-image\").length;\n      const efCaptionsCount = timegroup.querySelectorAll(\"ef-captions\").length;\n      const efTextCount = timegroup.querySelectorAll(\"ef-text\").length;\n      const headers: Record<string, string> = { \"Content-Type\": \"application/json\" };\n      if (options.telemetryToken) {\n        headers[\"Authorization\"] = `Bearer ${options.telemetryToken}`;\n      }\n      fetch(`${endpoint}/api/v1/telemetry`, {\n        method: \"POST\",\n        headers,\n        body: JSON.stringify({\n          event_type: \"render\",\n          render_path: \"client\",\n          duration_ms: elapsedMs,\n          width: config.videoWidth,\n          height: config.videoHeight,\n          fps: config.fps,\n          feature_usage: {\n            efMediaCount,\n            efImageCount,\n            efCaptionsCount,\n            efTextCount,\n          },\n        }),\n        keepalive: true,\n      }).catch(() => {\n        // Telemetry errors must never surface to users.\n      });\n    }\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    // Remove previewContainer first — renderClone was moved into it, so it must be\n    // detached before cleanupRenderClone() unmounts the React root that owns renderClone.\n    if (previewContainer.parentNode) {\n      previewContainer.parentNode.removeChild(previewContainer);\n    }\n    cleanupRenderClone();\n  }\n}\n\nexport { QUALITY_HIGH };\nexport type { AudioCodec };\n"],"mappings":"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"}

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

@@ -36,12 +36,7 @@ interface RenderToVideoOptions {
   customWritableStream?: WritableStream<Uint8Array>;
   progressPreviewInterval?: number;
   canvasMode?: "native" | "foreignObject";
-  /**
-   * API token (`ef_...`) for telemetry reporting. Omitting this skips the
-   * client-side telemetry beacon, which is a violation of the Editframe SDK
-   * License Agreement. Not required when called from the CLI render path,
-   * which handles telemetry from Node.js.
-   */
+  /** API token (`ef_...`) to associate telemetry with an org. Omitting sends anonymous telemetry. */
   telemetryToken?: string;
   /** Override the telemetry endpoint (defaults to https://editframe.com). */
   telemetryEndpoint?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.40.6",
+  "version": "0.41.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -18,7 +18,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.40.6",
+    "@editframe/assets": "0.41.0",
     "@lit/context": "^1.1.6",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/context-zone": "^1.26.0",