@editframe/elements 0.30.1-beta.0 → 0.30.2-beta.0

package/dist/elements/updateAnimations.js

@@ -1,4 +1,4 @@
-import { deepGetTemporalElements } from "./EFTemporal.js";
+import { deepGetTemporalElements, isEFTemporal } from "./EFTemporal.js";
 
 //#region src/elements/updateAnimations.ts
 const ANIMATION_PRECISION_OFFSET = .1;
@@ -8,144 +8,384 @@ const DURATION_PROPERTY = "--ef-duration";
 const TRANSITION_DURATION_PROPERTY = "--ef-transition-duration";
 const TRANSITION_OUT_START_PROPERTY = "--ef-transition-out-start";
 /**
-* Evaluates what the element's state should be based on the timeline
+* Determines what phase an element is in relative to the timeline.
+*
+* WHY: Phase is the primary concept that drives all decisions. By explicitly
+* enumerating phases, we make the code's logic clear: phase determines visibility,
+* animation coordination, and visual state.
+*
+* Phases:
+* - before-start: Timeline is before element's start time
+* - active: Timeline is within element's active range (start to end, exclusive of end)
+* - at-end-boundary: Timeline is exactly at element's end time
+* - after-end: Timeline is after element's end time
+*
+* Note: We detect "at-end-boundary" by checking if timeline equals end time.
+* The boundary policy will then determine if this should be treated as visible/active
+* or not based on element characteristics.
+*/
+const determineElementPhase = (element, timelineTimeMs) => {
+	const endTimeMs = element.endTimeMs;
+	if (timelineTimeMs < element.startTimeMs) return "before-start";
+	const epsilon = .001;
+	const diff = timelineTimeMs - endTimeMs;
+	if (diff > epsilon) return "after-end";
+	if (Math.abs(diff) <= epsilon) return "at-end-boundary";
+	return "active";
+};
+/**
+* Visibility policy: determines when elements should be visible for display purposes.
+*
+* WHY: Root elements, elements aligned with composition end, and text segments
+* should remain visible at exact end time to prevent flicker and show final frames.
+* Other elements use exclusive end for clean transitions between elements.
+*/
+var VisibilityPolicy = class {
+	shouldIncludeEndBoundary(element) {
+		if (!element.parentTimegroup) return true;
+		if (element.endTimeMs === element.rootTimegroup?.endTimeMs) return true;
+		if (this.isTextSegment(element)) return true;
+		return false;
+	}
+	/**
+	* Checks if element is a text segment.
+	* Encapsulates the tag name check to hide implementation detail.
+	*/
+	isTextSegment(element) {
+		return element.tagName === "EF-TEXT-SEGMENT";
+	}
+};
+/**
+* Animation policy: determines when animations should be coordinated.
+*
+* WHY: When an animation reaches exactly the end time of an element, using exclusive
+* end would make the element invisible, causing the animation to be removed from the
+* DOM and creating a visual jump. By using inclusive end, we ensure animations remain
+* coordinated even at exact boundary times, providing smooth visual transitions.
+*/
+var AnimationPolicy = class {
+	shouldIncludeEndBoundary(_element) {
+		return true;
+	}
+};
+const visibilityPolicy = new VisibilityPolicy();
+const animationPolicy = new AnimationPolicy();
+/**
+* Determines if an element should be visible based on its phase and visibility policy.
+*/
+const shouldBeVisible = (phase, element) => {
+	if (phase === "before-start" || phase === "after-end") return false;
+	if (phase === "active") return true;
+	return visibilityPolicy.shouldIncludeEndBoundary(element);
+};
+/**
+* Determines if animations should be coordinated based on element phase and animation policy.
+*/
+const shouldCoordinateAnimations = (phase, element) => {
+	if (phase === "before-start" || phase === "after-end") return false;
+	if (phase === "active") return true;
+	return animationPolicy.shouldIncludeEndBoundary(element);
+};
+/**
+* Evaluates what the element's state should be based on the timeline.
+*
+* WHY: This function determines the complete temporal state including phase,
+* which becomes the primary driver for all subsequent decisions.
 */
 const evaluateTemporalState = (element) => {
 	const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;
 	const progress = element.durationMs <= 0 ? 1 : Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs));
-	const isRootElement = !element.parentTimegroup;
-	const isLastElementInComposition = element.endTimeMs === element.rootTimegroup?.endTimeMs;
-	const isTextSegment = element.tagName === "EF-TEXT-SEGMENT";
-	const useInclusiveEnd = isRootElement || isLastElementInComposition || isTextSegment;
+	const phase = determineElementPhase(element, timelineTimeMs);
 	return {
 		progress,
-		isVisible: element.startTimeMs <= timelineTimeMs && (useInclusiveEnd ? element.endTimeMs >= timelineTimeMs : element.endTimeMs > timelineTimeMs),
-		timelineTimeMs
+		isVisible: shouldBeVisible(phase, element),
+		timelineTimeMs,
+		phase
 	};
 };
 /**
-* Evaluates element visibility specifically for animation coordination
-* Uses inclusive end boundaries to prevent animation jumps at exact boundaries
+* Evaluates element visibility state specifically for animation coordination.
+* Uses inclusive end boundaries to prevent animation jumps at exact boundaries.
+*
+* This is exported for external use cases that need animation-specific visibility
+* evaluation without the full ElementUpdateContext.
 */
-const evaluateTemporalStateForAnimation = (element) => {
-	const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;
+const evaluateAnimationVisibilityState = (element) => {
+	const state = evaluateTemporalState(element);
+	const shouldCoordinate = shouldCoordinateAnimations(state.phase, element);
 	return {
-		progress: element.durationMs <= 0 ? 1 : Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs)),
-		isVisible: element.startTimeMs <= timelineTimeMs && element.endTimeMs >= timelineTimeMs,
-		timelineTimeMs
+		...state,
+		isVisible: shouldCoordinate
 	};
 };
 /**
-* Updates the visual state (CSS + display) to match temporal state
+* Capability check: determines if an element supports stagger offset.
+* Encapsulates the knowledge of which element types support this feature.
 */
-const updateVisualState = (element, state) => {
-	element.style.setProperty(PROGRESS_PROPERTY, `${state.progress * 100}%`);
-	if (!state.isVisible) {
-		if (element.style.display !== "none") element.style.display = "none";
-		return;
+const supportsStaggerOffset = (element) => {
+	return element.tagName === "EF-TEXT-SEGMENT";
+};
+/**
+* Calculates effective delay including stagger offset if applicable.
+*
+* Stagger offset allows elements (like text segments) to have their animations
+* start at different times while keeping their visibility timing unchanged.
+* This enables staggered animation effects within a single timegroup.
+*/
+const calculateEffectiveDelay = (delay, element) => {
+	if (supportsStaggerOffset(element) && element.staggerOffsetMs !== void 0) return delay + element.staggerOffsetMs;
+	return delay;
+};
+/**
+* Calculates maximum safe animation time to prevent completion.
+*
+* WHY: Once an animation reaches "finished" state, it can no longer be manually controlled
+* via currentTime. By clamping to just before completion (using ANIMATION_PRECISION_OFFSET),
+* we ensure the animation remains in a controllable state, allowing us to synchronize it
+* with the timeline even when it would naturally be complete.
+*/
+const calculateMaxSafeAnimationTime = (duration, iterations) => {
+	return duration * iterations - ANIMATION_PRECISION_OFFSET;
+};
+/**
+* Determines if the current iteration should be reversed based on direction
+*/
+const shouldReverseIteration = (direction, currentIteration) => {
+	return direction === "reverse" || direction === "alternate" && currentIteration % 2 === 1 || direction === "alternate-reverse" && currentIteration % 2 === 0;
+};
+/**
+* Applies direction to iteration time (reverses if needed)
+*/
+const applyDirectionToIterationTime = (currentIterationTime, duration, direction, currentIteration) => {
+	if (shouldReverseIteration(direction, currentIteration)) return duration - currentIterationTime;
+	return currentIterationTime;
+};
+/**
+* Maps element time to animation time for normal direction.
+* Uses cumulative time throughout the animation.
+* Note: elementTime should already be adjusted (elementTime - effectiveDelay).
+*/
+const mapNormalDirectionTime = (elementTime, duration, maxSafeTime) => {
+	const currentIteration = Math.floor(elementTime / duration);
+	const iterationTime = elementTime % duration;
+	const cumulativeTime = currentIteration * duration + iterationTime;
+	return Math.min(cumulativeTime, maxSafeTime);
+};
+/**
+* Maps element time to animation time for reverse direction.
+* Uses cumulative time with reversed iterations.
+* Note: elementTime should already be adjusted (elementTime - effectiveDelay).
+*/
+const mapReverseDirectionTime = (elementTime, duration, maxSafeTime) => {
+	const currentIteration = Math.floor(elementTime / duration);
+	const reversedIterationTime = duration - elementTime % duration;
+	const cumulativeTime = currentIteration * duration + reversedIterationTime;
+	return Math.min(cumulativeTime, maxSafeTime);
+};
+/**
+* Maps element time to animation time for alternate/alternate-reverse directions.
+*
+* WHY SPECIAL HANDLING: Alternate directions oscillate between forward and reverse iterations.
+* Without delay, we use iteration time (0 to duration) because the animation naturally
+* resets each iteration. However, with delay, iteration 0 needs to account for the delay
+* offset (using ownCurrentTimeMs), and later iterations need cumulative time to properly
+* track progress across multiple iterations. This complexity requires a dedicated mapper
+* rather than trying to handle it in the general case.
+*/
+const mapAlternateDirectionTime = (elementTime, effectiveDelay, duration, direction, maxSafeTime) => {
+	const adjustedTime = elementTime - effectiveDelay;
+	if (effectiveDelay > 0) {
+		if (Math.floor(adjustedTime / duration) === 0) return Math.min(elementTime, maxSafeTime);
+		return Math.min(adjustedTime, maxSafeTime);
 	}
-	if (element.style.display === "none") element.style.display = "";
-	element.style.setProperty(DURATION_PROPERTY, `${element.durationMs}ms`);
-	element.style.setProperty(TRANSITION_DURATION_PROPERTY, `${element.parentTimegroup?.overlapMs ?? 0}ms`);
-	element.style.setProperty(TRANSITION_OUT_START_PROPERTY, `${element.durationMs - (element.parentTimegroup?.overlapMs ?? 0)}ms`);
+	const currentIteration = Math.floor(elementTime / duration);
+	const iterationTime = applyDirectionToIterationTime(elementTime % duration, duration, direction, currentIteration);
+	return Math.min(iterationTime, maxSafeTime);
 };
 /**
-* Coordinates animations for a single element and its subtree, using the element as the time source
+* Maps element time to animation time based on direction.
+*
+* WHY: This function explicitly transforms element time to animation time, making
+* the time mapping concept clear. Different directions require different transformations
+* to achieve the desired visual effect.
 */
-const coordinateAnimationsForSingleElement = (element) => {
-	const animations = element.getAnimations({ subtree: true });
-	for (const animation of animations) {
-		if (animation.playState === "finished") {
-			animation.cancel();
+const mapElementTimeToAnimationTime = (elementTime, timing, effectiveDelay) => {
+	const { duration, iterations, direction } = timing;
+	const maxSafeTime = calculateMaxSafeAnimationTime(duration, iterations);
+	const adjustedTime = elementTime - effectiveDelay;
+	if (direction === "reverse") return mapReverseDirectionTime(adjustedTime, duration, maxSafeTime);
+	if (direction === "alternate" || direction === "alternate-reverse") return mapAlternateDirectionTime(elementTime, effectiveDelay, duration, direction, maxSafeTime);
+	return mapNormalDirectionTime(adjustedTime, duration, maxSafeTime);
+};
+/**
+* Determines the animation time for a completed animation based on direction.
+*/
+const getCompletedAnimationTime = (timing, maxSafeTime) => {
+	const { direction, iterations, duration } = timing;
+	if (direction === "alternate" || direction === "alternate-reverse") {
+		const finalIteration = iterations - 1;
+		if (direction === "alternate" && finalIteration % 2 === 1 || direction === "alternate-reverse" && finalIteration % 2 === 0) return Math.min(duration - ANIMATION_PRECISION_OFFSET, maxSafeTime);
+	}
+	return maxSafeTime;
+};
+/**
+* Validates that animation effect is a KeyframeEffect with a target
+*/
+const validateAnimationEffect = (effect) => {
+	return effect !== null && effect instanceof KeyframeEffect && effect.target !== null;
+};
+/**
+* Extracts timing information from an animation effect.
+* Duration and delay from getTiming() are already in milliseconds.
+* We use getTiming().delay directly from the animation object.
+*/
+const extractAnimationTiming = (effect) => {
+	const timing = effect.getTiming();
+	return {
+		duration: Number(timing.duration) || 0,
+		delay: Number(timing.delay) || 0,
+		iterations: Number(timing.iterations) || DEFAULT_ANIMATION_ITERATIONS,
+		direction: timing.direction || "normal"
+	};
+};
+/**
+* Prepares animation for manual control by ensuring it's paused
+*/
+const prepareAnimation = (animation) => {
+	if (animation.playState === "finished") {
+		animation.cancel();
+		animation.play();
+		animation.pause();
+	} else if (animation.playState === "running") animation.pause();
+	else {
+		if (animation.currentTime === null) {
 			animation.play();
 			animation.pause();
-		} else if (animation.playState === "running") animation.pause();
-		const effect = animation.effect;
-		if (!(effect && effect instanceof KeyframeEffect)) continue;
-		const target = effect.target;
-		if (!target) continue;
-		const timing = effect.getTiming();
-		const duration = Number(timing.duration) || 0;
-		let delay = Number(timing.delay) || 0;
-		if (target instanceof HTMLElement) {
-			const animationDelays = window.getComputedStyle(target).animationDelay.split(", ").map((s) => s.trim());
-			const parseDelay = (delayStr) => {
-				if (delayStr === "0s" || delayStr === "0ms") return 0;
-				const delayMatch = delayStr.match(/^([\d.]+)(s|ms)$/);
-				if (delayMatch?.[1] && delayMatch[2]) {
-					const value = Number.parseFloat(delayMatch[1]);
-					return delayMatch[2] === "s" ? value * 1e3 : value;
-				}
-				return 0;
-			};
-			if (animationDelays.length === 1 && animationDelays[0]) {
-				const parsedDelay = parseDelay(animationDelays[0]);
-				if (parsedDelay > 0) delay = parsedDelay;
-				else if ((animationDelays[0] === "0s" || animationDelays[0] === "0ms") && delay === 0) delay = 0;
-			} else if (animationDelays.length > 1) {
-				const animationIndex = Array.from(target.getAnimations()).indexOf(animation);
-				if (animationIndex >= 0 && animationIndex < animationDelays.length && animationDelays[animationIndex]) {
-					const parsedDelay = parseDelay(animationDelays[animationIndex]);
-					if (parsedDelay > 0) delay = parsedDelay;
-				}
-			}
 		}
-		const iterations = Number(timing.iterations) || DEFAULT_ANIMATION_ITERATIONS;
-		if (duration <= 0) {
+		if (animation.playState === "idle") {
 			animation.currentTime = 0;
-			continue;
-		}
-		const currentTime = element.ownCurrentTimeMs ?? 0;
-		let effectiveDelay = delay;
-		if (element.tagName === "EF-TEXT-SEGMENT" && element.staggerOffsetMs !== void 0) {
-			const staggerOffsetMs = element.staggerOffsetMs;
-			effectiveDelay = delay + staggerOffsetMs;
-		}
-		if (currentTime < effectiveDelay) {
-			animation.currentTime = 0;
-			continue;
-		}
-		const adjustedTime = currentTime - effectiveDelay;
-		const currentIteration = Math.floor(adjustedTime / duration);
-		let currentIterationTime = adjustedTime % duration;
-		const direction = timing.direction || "normal";
-		const isAlternate = direction === "alternate" || direction === "alternate-reverse";
-		if (direction === "reverse" || direction === "alternate" && currentIteration % 2 === 1 || direction === "alternate-reverse" && currentIteration % 2 === 0) currentIterationTime = duration - currentIterationTime;
-		if (currentIteration >= iterations) {
-			const maxSafeAnimationTime = duration * iterations - ANIMATION_PRECISION_OFFSET;
-			if (isAlternate) {
-				const finalIteration = iterations - 1;
-				if (direction === "alternate" && finalIteration % 2 === 1 || direction === "alternate-reverse" && finalIteration % 2 === 0) animation.currentTime = Math.min(duration - ANIMATION_PRECISION_OFFSET, maxSafeAnimationTime);
-				else animation.currentTime = maxSafeAnimationTime;
-			} else animation.currentTime = maxSafeAnimationTime;
-		} else if (isAlternate) if (effectiveDelay > 0) if (currentIteration === 0) animation.currentTime = currentTime;
-		else {
-			const maxSafeAnimationTime = duration * iterations - ANIMATION_PRECISION_OFFSET;
-			animation.currentTime = Math.min(adjustedTime, maxSafeAnimationTime);
-		}
-		else animation.currentTime = currentIterationTime;
-		else {
-			const timeWithinAnimation = currentIteration * duration + currentIterationTime;
-			const maxSafeAnimationTime = duration * iterations - ANIMATION_PRECISION_OFFSET;
-			animation.currentTime = Math.min(timeWithinAnimation, maxSafeAnimationTime);
+			animation.pause();
 		}
 	}
 };
 /**
-* Main function: synchronizes DOM element with timeline
+* Maps element time to animation currentTime and sets it on the animation.
+*
+* WHY: This function explicitly performs the time mapping transformation,
+* making it clear that we're transforming element time to animation time.
+*/
+const mapAndSetAnimationTime = (animation, element, timing, effectiveDelay) => {
+	const elementTime = element.ownCurrentTimeMs ?? 0;
+	if (animation.playState === "running") animation.pause();
+	const adjustedTime = elementTime - effectiveDelay;
+	if (adjustedTime < 0) {
+		animation.currentTime = elementTime;
+		return;
+	}
+	const { duration, iterations } = timing;
+	const currentIteration = Math.floor(adjustedTime / duration);
+	if (currentIteration >= iterations) animation.currentTime = effectiveDelay + getCompletedAnimationTime(timing, calculateMaxSafeAnimationTime(duration, iterations));
+	else {
+		const animationTime = mapElementTimeToAnimationTime(elementTime, timing, effectiveDelay);
+		const { direction } = timing;
+		if ((direction === "alternate" || direction === "alternate-reverse") && effectiveDelay > 0 && currentIteration === 0) animation.currentTime = elementTime;
+		else animation.currentTime = effectiveDelay + animationTime;
+	}
+};
+/**
+* Synchronizes a single animation with the timeline using the element as the time source.
+*
+* For animations in this element's subtree, always use this element as the time source.
+* This handles both animations directly on the temporal element and on its non-temporal children.
+*/
+const synchronizeAnimation = (animation, element) => {
+	const effect = animation.effect;
+	if (!validateAnimationEffect(effect)) return;
+	const timing = extractAnimationTiming(effect);
+	if (timing.duration <= 0) {
+		animation.currentTime = 0;
+		return;
+	}
+	const target = effect.target;
+	let timeSource = element;
+	if (target && target instanceof HTMLElement) {
+		const nearestTimegroup = target.closest("ef-timegroup");
+		if (nearestTimegroup && isEFTemporal(nearestTimegroup)) timeSource = nearestTimegroup;
+	}
+	const effectiveDelay = calculateEffectiveDelay(timing.delay, timeSource);
+	mapAndSetAnimationTime(animation, timeSource, timing, effectiveDelay);
+};
+/**
+* Coordinates animations for a single element and its subtree, using the element as the time source.
+*
+* Gets animations on the element itself and its subtree.
+* Both CSS animations (created via the 'animation' property) and WAAPI animations are included.
+*/
+const coordinateElementAnimations = (element) => {
+	const animations = element.getAnimations({ subtree: true });
+	for (const animation of animations) {
+		prepareAnimation(animation);
+		synchronizeAnimation(animation, element);
+	}
+};
+/**
+* Applies visual state (CSS + display) to match temporal state.
+*
+* WHY: This function applies visual state based on the element's phase and state.
+* Phase determines what should be visible, and this function applies that decision.
+*/
+const applyVisualState = (element, state) => {
+	element.style.setProperty(PROGRESS_PROPERTY, `${state.progress * 100}%`);
+	if (!state.isVisible) {
+		element.style.setProperty("display", "none");
+		return;
+	}
+	element.style.removeProperty("display");
+	element.style.setProperty(DURATION_PROPERTY, `${element.durationMs}ms`);
+	element.style.setProperty(TRANSITION_DURATION_PROPERTY, `${element.parentTimegroup?.overlapMs ?? 0}ms`);
+	element.style.setProperty(TRANSITION_OUT_START_PROPERTY, `${element.durationMs - (element.parentTimegroup?.overlapMs ?? 0)}ms`);
+};
+/**
+* Applies animation coordination if the element phase requires it.
+*
+* WHY: Animation coordination is driven by phase. If the element is in a phase
+* where animations should be coordinated, we coordinate them.
+*/
+const applyAnimationCoordination = (element, phase) => {
+	if (shouldCoordinateAnimations(phase, element)) coordinateElementAnimations(element);
+};
+/**
+* Evaluates the complete state for an element update.
+* This separates evaluation (what should the state be?) from application (apply that state).
+*/
+const evaluateElementState = (element) => {
+	return {
+		element,
+		state: evaluateTemporalState(element)
+	};
+};
+/**
+* Main function: synchronizes DOM element with timeline.
+*
+* Orchestrates clear flow: Phase → Policy → Time Mapping → State Application
+*
+* WHY: This function makes the conceptual flow explicit:
+* 1. Determine phase (what phase is the element in?)
+* 2. Apply policies (should it be visible/coordinated based on phase?)
+* 3. Map time for animations (transform element time to animation time)
+* 4. Apply visual state (update CSS and display based on phase and policies)
 */
 const updateAnimations = (element) => {
-	const temporalState = evaluateTemporalState(element);
-	deepGetTemporalElements(element).forEach((temporalElement) => {
-		updateVisualState(temporalElement, evaluateTemporalState(temporalElement));
-	});
-	updateVisualState(element, temporalState);
-	if (evaluateTemporalStateForAnimation(element).isVisible) coordinateAnimationsForSingleElement(element);
-	deepGetTemporalElements(element).forEach((temporalElement) => {
-		if (evaluateTemporalStateForAnimation(temporalElement).isVisible) coordinateAnimationsForSingleElement(temporalElement);
+	const rootContext = evaluateElementState(element);
+	const childContexts = deepGetTemporalElements(element).map((temporalElement) => evaluateElementState(temporalElement));
+	applyVisualState(rootContext.element, rootContext.state);
+	applyAnimationCoordination(rootContext.element, rootContext.state.phase);
+	childContexts.forEach((context) => {
+		applyVisualState(context.element, context.state);
+		applyAnimationCoordination(context.element, context.state.phase);
 	});
 };
 
 //#endregion
-export { evaluateTemporalStateForAnimation, updateAnimations };
+export { evaluateAnimationVisibilityState, updateAnimations };
 //# sourceMappingURL=updateAnimations.js.map

package/dist/elements/updateAnimations.js.map

@@ -1 +1 @@
-{"version":3,"file":"updateAnimations.js","names":[],"sources":["../../src/elements/updateAnimations.ts"],"sourcesContent":["import {\n  deepGetTemporalElements,\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// Constants\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 * Represents the temporal state of an element relative to the timeline\n */\ninterface TemporalState {\n  progress: number;\n  isVisible: boolean;\n  timelineTimeMs: number;\n}\n\n/**\n * Evaluates what the element's state should be based on the timeline\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  // Root elements and elements aligned with composition end should remain visible at exact end time\n  // Text segments should also use inclusive end since they're meant to be visible for full duration\n  // Other elements use exclusive end for clean transitions\n  const isRootElement = !(element as any).parentTimegroup;\n  const isLastElementInComposition =\n    element.endTimeMs === element.rootTimegroup?.endTimeMs;\n  const isTextSegment = element.tagName === \"EF-TEXT-SEGMENT\";\n  const useInclusiveEnd =\n    isRootElement || isLastElementInComposition || isTextSegment;\n\n  const isVisible =\n    element.startTimeMs <= timelineTimeMs &&\n    (useInclusiveEnd\n      ? element.endTimeMs >= timelineTimeMs\n      : element.endTimeMs > timelineTimeMs);\n\n  return { progress, isVisible, timelineTimeMs };\n};\n\n/**\n * Evaluates element visibility specifically for animation coordination\n * Uses inclusive end boundaries to prevent animation jumps at exact boundaries\n */\nexport const evaluateTemporalStateForAnimation = (\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  // For animation coordination, use inclusive end for ALL elements to prevent visual jumps\n  const isVisible =\n    element.startTimeMs <= timelineTimeMs &&\n    element.endTimeMs >= timelineTimeMs;\n\n  return { progress, isVisible, timelineTimeMs };\n};\n\n/**\n * Updates the visual state (CSS + display) to match temporal state\n */\nconst updateVisualState = (\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 * 100}%`);\n\n  // Handle visibility\n  if (!state.isVisible) {\n    if (element.style.display !== \"none\") {\n      element.style.display = \"none\";\n    }\n    return;\n  }\n\n  if (element.style.display === \"none\") {\n    element.style.display = \"\";\n  }\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 * Coordinates animations for a single element and its subtree, using the element as the time source\n */\nconst coordinateAnimationsForSingleElement = (\n  element: AnimatableElement,\n): void => {\n  // Get animations on the element itself and its subtree\n  // CSS animations created via the 'animation' property are included\n  const animations = element.getAnimations({ subtree: true });\n\n  for (const animation of animations) {\n    // Ensure animation is in a playable state (not finished)\n    // Finished animations can't be controlled, so reset them\n    if (animation.playState === \"finished\") {\n      animation.cancel();\n      // Re-initialize the animation so it can be controlled\n      animation.play();\n      animation.pause();\n    } else if (animation.playState === \"running\") {\n      // Pause running animations so we can control them manually\n      animation.pause();\n    }\n\n    const effect = animation.effect;\n    if (!(effect && effect instanceof KeyframeEffect)) {\n      continue;\n    }\n\n    const target = effect.target;\n    if (!target) {\n      continue;\n    }\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    const timing = effect.getTiming();\n    // Duration and delay from getTiming() are already in milliseconds\n    // They include CSS animation-duration and animation-delay values\n    const duration = Number(timing.duration) || 0;\n    let delay = Number(timing.delay) || 0;\n\n    // For Web Animations API animations, getTiming().delay is always correct.\n    // For CSS animations, we may need to read from computed styles.\n    // Try to read delay from computed styles as a fallback/override for CSS animations\n    if (target instanceof HTMLElement) {\n      const computedStyle = window.getComputedStyle(target);\n      const animationDelays = computedStyle.animationDelay\n        .split(\", \")\n        .map((s) => s.trim());\n\n      // Parse CSS delay value\n      const parseDelay = (delayStr: string): number => {\n        if (delayStr === \"0s\" || delayStr === \"0ms\") {\n          return 0;\n        }\n        const delayMatch = delayStr.match(/^([\\d.]+)(s|ms)$/);\n        if (delayMatch?.[1] && delayMatch[2]) {\n          const value = Number.parseFloat(delayMatch[1]);\n          const unit = delayMatch[2];\n          return unit === \"s\" ? value * 1000 : value;\n        }\n        return 0;\n      };\n\n      // Only override delay from computed styles if:\n      // 1. We have a valid parsed delay value, OR\n      // 2. The computed style explicitly says \"0s\" or \"0ms\" (meaning no CSS delay)\n      // This ensures we don't override WAAPI delay with 0 from computed styles when there's no CSS animation\n      if (animationDelays.length === 1 && animationDelays[0]) {\n        const parsedDelay = parseDelay(animationDelays[0]);\n        // Only override if we got a valid parse AND it's not just a default \"0s\" from computed styles\n        // OR if it's explicitly \"0s\"/\"0ms\" and getTiming().delay is also 0 (CSS animation with no delay)\n        if (parsedDelay > 0) {\n          delay = parsedDelay;\n        } else if (\n          (animationDelays[0] === \"0s\" || animationDelays[0] === \"0ms\") &&\n          delay === 0\n        ) {\n          // Both are 0, so keep 0\n          delay = 0;\n        }\n        // Otherwise, keep getTiming().delay (for WAAPI animations)\n      } else if (animationDelays.length > 1) {\n        // Multiple animations: try to match by index\n        const allAnimations = Array.from(target.getAnimations());\n        const animationIndex = allAnimations.indexOf(animation);\n        if (\n          animationIndex >= 0 &&\n          animationIndex < animationDelays.length &&\n          animationDelays[animationIndex]\n        ) {\n          const parsedDelay = parseDelay(animationDelays[animationIndex]);\n          if (parsedDelay > 0) {\n            delay = parsedDelay;\n          }\n          // Otherwise, keep getTiming().delay\n        }\n      }\n      // If no computed styles match, keep getTiming().delay (for WAAPI animations)\n    }\n\n    const iterations =\n      Number(timing.iterations) || DEFAULT_ANIMATION_ITERATIONS;\n\n    if (duration <= 0) {\n      animation.currentTime = 0;\n      continue;\n    }\n\n    // Use the element itself as the time source (it's guaranteed to be temporal)\n    const currentTime = element.ownCurrentTimeMs ?? 0;\n\n    // Special case for ef-text-segment: apply stagger offset for animation timing\n    // This allows staggered animations while keeping visibility timing unchanged\n    // We ADD the stagger offset to the delay, so animations start later for later segments\n    let effectiveDelay = delay;\n    if (\n      element.tagName === \"EF-TEXT-SEGMENT\" &&\n      (element as any).staggerOffsetMs !== undefined\n    ) {\n      const staggerOffsetMs = (element as any).staggerOffsetMs as number;\n      effectiveDelay = delay + staggerOffsetMs;\n    }\n\n    // If before delay, show initial keyframe state (0% of animation)\n    // Use strict < instead of <= so animations can start immediately when delay is reached\n    if (currentTime < effectiveDelay) {\n      // Set to 0 to show initial keyframe (animation time, not including delay)\n      // When manually controlling animation.currentTime, 0 represents the start of the animation\n      animation.currentTime = 0;\n      continue;\n    }\n\n    const adjustedTime = currentTime - effectiveDelay;\n    const currentIteration = Math.floor(adjustedTime / duration);\n    let currentIterationTime = adjustedTime % duration;\n\n    // Handle animation-direction\n    const direction = timing.direction || \"normal\";\n    const isAlternate =\n      direction === \"alternate\" || direction === \"alternate-reverse\";\n    const shouldReverse =\n      direction === \"reverse\" ||\n      (direction === \"alternate\" && currentIteration % 2 === 1) ||\n      (direction === \"alternate-reverse\" && currentIteration % 2 === 0);\n\n    if (shouldReverse) {\n      currentIterationTime = duration - currentIterationTime;\n    }\n\n    if (currentIteration >= iterations) {\n      // Animation would be complete - clamp to just before completion\n      // This prevents the animation from being removed from the element\n      // animation.currentTime is the time within the animation (not including delay)\n      const maxSafeAnimationTime =\n        duration * iterations - ANIMATION_PRECISION_OFFSET;\n\n      // For alternate directions at completion, we need to set currentTime based on the final iteration\n      // The final iteration for alternate is iteration (iterations - 1), which is forward if iterations is odd\n      if (isAlternate) {\n        const finalIteration = iterations - 1;\n        const isFinalIterationReversed =\n          (direction === \"alternate\" && finalIteration % 2 === 1) ||\n          (direction === \"alternate-reverse\" && finalIteration % 2 === 0);\n        if (isFinalIterationReversed) {\n          // At end of reversed iteration, currentTime should be near 0 (but clamped)\n          animation.currentTime = Math.min(\n            duration - ANIMATION_PRECISION_OFFSET,\n            maxSafeAnimationTime,\n          );\n        } else {\n          // At end of forward iteration, currentTime should be near duration (but clamped)\n          animation.currentTime = maxSafeAnimationTime;\n        }\n      } else {\n        animation.currentTime = maxSafeAnimationTime;\n      }\n    } else {\n      // Animation in progress\n      // For alternate/alternate-reverse directions, currentTime should be set to the time within\n      // the current iteration (after applying direction), not cumulative time.\n      // However, when there's a delay, we need to use cumulative time (adjustedTime) instead.\n      // For normal/reverse directions, currentTime is always cumulative time.\n      if (isAlternate) {\n        // For alternate directions without delay, use iteration time (after direction applied)\n        // For alternate directions with delay:\n        //   - Iteration 0: use ownCurrentTimeMs (which equals adjustedTime + delay for iteration 0)\n        //   - Iteration 1+: use cumulative time (adjustedTime)\n        if (effectiveDelay > 0) {\n          if (currentIteration === 0) {\n            // For iteration 0 with delay, use ownCurrentTimeMs (matches test expectations)\n            animation.currentTime = currentTime;\n          } else {\n            // With delay and iteration > 0, use cumulative time\n            const maxSafeAnimationTime =\n              duration * iterations - ANIMATION_PRECISION_OFFSET;\n            animation.currentTime = Math.min(\n              adjustedTime,\n              maxSafeAnimationTime,\n            );\n          }\n        } else {\n          // Without delay: use iteration time (after direction applied)\n          animation.currentTime = currentIterationTime;\n        }\n      } else {\n        // For normal/reverse directions, use cumulative time\n        const timeWithinAnimation =\n          currentIteration * duration + currentIterationTime;\n        const maxSafeAnimationTime =\n          duration * iterations - ANIMATION_PRECISION_OFFSET;\n        animation.currentTime = Math.min(\n          timeWithinAnimation,\n          maxSafeAnimationTime,\n        );\n      }\n    }\n  }\n};\n\n/**\n * Main function: synchronizes DOM element with timeline\n */\nexport const updateAnimations = (element: AnimatableElement): void => {\n  const temporalState = evaluateTemporalState(element);\n  deepGetTemporalElements(element).forEach((temporalElement) => {\n    const temporalState = evaluateTemporalState(temporalElement);\n    updateVisualState(temporalElement, temporalState);\n  });\n  updateVisualState(element, temporalState);\n\n  // Coordinate animations - use animation-specific visibility to prevent jumps at exact boundaries\n  const animationState = evaluateTemporalStateForAnimation(element);\n  if (animationState.isVisible) {\n    coordinateAnimationsForSingleElement(element);\n  }\n\n  // Coordinate animations for child elements using animation-specific visibility\n  deepGetTemporalElements(element).forEach((temporalElement) => {\n    const childAnimationState =\n      evaluateTemporalStateForAnimation(temporalElement);\n    if (childAnimationState.isVisible) {\n      coordinateAnimationsForSingleElement(temporalElement);\n    }\n  });\n};\n"],"mappings":"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"}
+{"version":3,"file":"updateAnimations.js","names":["timeSource: AnimatableElement"],"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// 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  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/**\n * Animation policy: determines when animations should be coordinated.\n *\n * WHY: When an animation reaches exactly the end time of an element, using exclusive\n * end would make the element invisible, causing the animation to be removed from the\n * DOM and creating a visual jump. By using inclusive end, we ensure animations remain\n * coordinated even at exact boundary times, providing smooth visual transitions.\n */\nclass AnimationPolicy implements BoundaryPolicy {\n  shouldIncludeEndBoundary(_element: AnimatableElement): boolean {\n    return true;\n  }\n}\n\n// Policy instances (singleton pattern for stateless policies)\nconst visibilityPolicy = new VisibilityPolicy();\nconst animationPolicy = new AnimationPolicy();\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 */\nconst shouldCoordinateAnimations = (\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 animationPolicy.shouldIncludeEndBoundary(element);\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) && element.staggerOffsetMs !== undefined) {\n    // Apply stagger offset for animation timing\n    // We ADD the stagger offset to the delay, so animations start later for later segments\n    return delay + element.staggerOffsetMs;\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 * Prepares animation for manual control by ensuring it's paused\n */\nconst prepareAnimation = (animation: Animation): void => {\n  // Ensure animation is in a playable state (not finished)\n  // Finished animations can't be controlled, so reset them\n  if (animation.playState === \"finished\") {\n    animation.cancel();\n    // Re-initialize the animation so it can be controlled\n    animation.play();\n    animation.pause();\n  } else if (animation.playState === \"running\") {\n    // Pause running animations so we can control them manually\n    animation.pause();\n  } else {\n    // For animations in \"idle\" or \"paused\" state, ensure they're initialized\n    // by playing and pausing. This ensures they're in a state where currentTime\n    // changes will actually apply keyframes.\n    // Only do this if currentTime is null (hasn't been set yet) to avoid\n    // disrupting animations that are already being controlled\n    if (animation.currentTime === null) {\n      animation.play();\n      animation.pause();\n    }\n    // Also ensure playState is \"paused\" (not \"idle\")\n    // Some animations might be in \"idle\" state even after play/pause\n    if (animation.playState === \"idle\") {\n      // Force to paused state by setting currentTime to 0 then pausing\n      animation.currentTime = 0;\n      animation.pause();\n    }\n  }\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  // CRITICAL: Ensure animation is paused before setting currentTime\n  // Animations in \"running\" state won't apply keyframes when currentTime is set manually\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  // Use strict < 0 so that at exactly the delay time (adjustedTime = 0), we start animating\n  if (adjustedTime < 0) {\n    // Before delay: currentTime should be at the absolute timeline time\n    // This ensures the animation is \"caught up\" with the delay\n    animation.currentTime = elementTime;\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    // Completed: currentTime should be delay + completed animation time (absolute timeline time)\n    animation.currentTime = effectiveDelay + completedAnimationTime;\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    // For alternate direction with delay in iteration 0, mapAlternateDirectionTime returns elementTime directly\n    // For other cases, currentTime should be delay + animation time (absolute timeline time)\n    // Check if this is alternate direction with delay in iteration 0\n    const { direction } = timing;\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, currentTime should be delay + animation time (absolute timeline time)\n      animation.currentTime = effectiveDelay + 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  // 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  const effectiveDelay = calculateEffectiveDelay(timing.delay, timeSource);\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 * Gets animations on the element itself and its subtree.\n * Both CSS animations (created via the 'animation' property) and WAAPI animations are included.\n */\nconst coordinateElementAnimations = (element: AnimatableElement): void => {\n  const animations = element.getAnimations({ subtree: true });\n\n  for (const animation of animations) {\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 * 100}%`);\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): void => {\n  if (shouldCoordinateAnimations(phase, element)) {\n    coordinateElementAnimations(element);\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  // Evaluate all states\n  const rootContext = evaluateElementState(element);\n  const childContexts = deepGetTemporalElements(element).map(\n    (temporalElement) => evaluateElementState(temporalElement),\n  );\n\n  // Apply visual state and animation coordination for root element\n  applyVisualState(rootContext.element, rootContext.state);\n  applyAnimationCoordination(rootContext.element, rootContext.state.phase);\n\n  // Apply visual state and animation coordination for all temporal child elements\n  childContexts.forEach((context) => {\n    applyVisualState(context.element, context.state);\n    applyAnimationCoordination(context.element, context.state.phase);\n  });\n};\n"],"mappings":"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"}

package/dist/gui/EFFilmstrip.d.ts

@@ -7,7 +7,7 @@ import { Caption } from "../elements/EFCaptions.js";
 import { EFTextSegment } from "../elements/EFTextSegment.js";
 import { TimegroupController } from "../elements/TimegroupController.js";
 import { FocusContext } from "./focusContext.js";
-import * as lit15 from "lit";
+import * as lit14 from "lit";
 import { LitElement, PropertyValueMap, ReactiveController, TemplateResult, nothing } from "lit";
 import * as lit_html_directives_ref0 from "lit-html/directives/ref";
 
@@ -22,7 +22,7 @@ declare class ElementFilmstripController implements ReactiveController {
 }
 declare const FilmstripItem_base: typeof LitElement;
 declare class FilmstripItem extends FilmstripItem_base {
-  static styles: lit15.CSSResult[];
+  static styles: lit14.CSSResult[];
   focusContext?: FocusContext;
   focusedElement?: HTMLElement | null;
   get isFocused(): boolean;
@@ -166,7 +166,7 @@ declare class EFHTMLHierarchyItem extends EFHierarchyItem {
 declare const EFFilmstrip_base: typeof LitElement;
 declare class EFFilmstrip extends EFFilmstrip_base {
   #private;
-  static styles: lit15.CSSResult[];
+  static styles: lit14.CSSResult[];
   pixelsPerMs: number;
   hide: string;
   show: string;