@editframe/elements 0.18.27-beta.0 → 0.19.4-beta.0

package/dist/elements/EFTimegroup.js

@@ -1,10 +1,10 @@
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { isContextMixin } from "../gui/ContextMixin.js";
 import { durationConverter } from "./durationConverter.js";
-import { EFTemporal, deepGetElementsWithFrameTasks, flushStartTimeMsCache, shallowGetTemporalElements, timegroupContext } from "./EFTemporal.js";
-import { updateAnimations } from "./updateAnimations.js";
+import { EFTemporal, deepGetElementsWithFrameTasks, flushStartTimeMsCache, resetTemporalCache, shallowGetTemporalElements, timegroupContext } from "./EFTemporal.js";
 import { deepGetMediaElements } from "./EFMedia.js";
 import { TimegroupController } from "./TimegroupController.js";
+import { evaluateTemporalState, updateAnimations } from "./updateAnimations.js";
 import { provide } from "@lit/context";
 import { Task, TaskStatus } from "@lit/task";
 import debug from "debug";
@@ -13,6 +13,10 @@ import { customElement, property } from "lit/decorators.js";
 import _decorate from "@oxc-project/runtime/helpers/decorate";
 var _EFTimegroup;
 const log = debug("ef:elements:EFTimegroup");
+let sequenceDurationCache = /* @__PURE__ */ new WeakMap();
+const flushSequenceDurationCache = () => {
+	sequenceDurationCache = /* @__PURE__ */ new WeakMap();
+};
 const shallowGetTimegroups = (element, groups = []) => {
 	for (const child of Array.from(element.children)) if (child instanceof EFTimegroup) groups.push(child);
 	else shallowGetTimegroups(child, groups);
@@ -25,28 +29,33 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._timeGroupContext = this;
-		this.mode = "contain";
-		this.overlapMs = 0;
+		this._mode = "contain";
+		this._overlapMs = 0;
 		this.fit = "none";
+		this.mediaDurationsPromise = void 0;
 		this.frameTask = new Task(this, {
-			autoRun: EF_INTERACTIVE,
+			autoRun: false,
 			args: () => [this.ownCurrentTimeMs, this.currentTimeMs],
-			task: async ([], { signal }) => {
-				if (this.isRootTimegroup) await this.waitForFrameTasks(signal);
+			task: async ([]) => {
+				if (this.isRootTimegroup) {
+					await this.waitForFrameTasks();
+					updateAnimations(this);
+				}
 			}
 		});
 		this.seekTask = new Task(this, {
+			autoRun: false,
 			args: () => [this.#pendingSeekTime ?? this.#currentTime],
-			task: async ([targetTime], { signal }) => {
-				const newTime = Math.max(0, Math.min(targetTime, this.durationMs / 1e3));
-				this.#currentTime = newTime;
+			onComplete: () => {},
+			task: async ([targetTime]) => {
+				if (!this.isRootTimegroup) return;
+				await this.waitForMediaDurations();
+				const newTime = Math.max(0, Math.min(targetTime ?? 0, this.durationMs / 1e3));
 				this.requestUpdate("currentTime");
-				await this.updateComplete;
-				signal.throwIfAborted();
-				const videoElements = this.querySelectorAll("ef-video");
-				for (const video of videoElements) if (video.videoSeekTask) video.videoSeekTask.run();
 				await this.frameTask.run();
 				this.#saveTimeToLocalStorage(newTime);
+				this.#seekInProgress = false;
+				return newTime;
 			}
 		});
 	}
@@ -62,72 +71,105 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
     }
   `;
 	}
-	#currentTime = 0;
+	#currentTime = void 0;
+	set mode(value) {
+		sequenceDurationCache.delete(this);
+		this._mode = value;
+	}
+	get mode() {
+		return this._mode;
+	}
+	set overlapMs(value) {
+		sequenceDurationCache.delete(this);
+		this._overlapMs = value;
+	}
+	get overlapMs() {
+		return this._overlapMs;
+	}
 	#resizeObserver;
 	#seekInProgress = false;
 	#pendingSeekTime;
+	#processingPendingSeek = false;
 	set currentTime(time) {
+		time = Math.max(0, time);
+		if (!this.isRootTimegroup) return;
+		if (Number.isNaN(time)) return;
+		if (time === this.#currentTime && !this.#processingPendingSeek) return;
+		if (this.#pendingSeekTime === time) return;
 		if (this.#seekInProgress) {
 			this.#pendingSeekTime = time;
+			this.#currentTime = time;
 			return;
 		}
+		this.#currentTime = time;
 		this.#seekInProgress = true;
-		this.#pendingSeekTime = time;
 		this.seekTask.run().finally(() => {
-			this.#seekInProgress = false;
 			if (this.#pendingSeekTime !== void 0 && this.#pendingSeekTime !== time) {
 				const pendingTime = this.#pendingSeekTime;
 				this.#pendingSeekTime = void 0;
-				this.currentTime = pendingTime;
+				this.#processingPendingSeek = true;
+				try {
+					this.currentTime = pendingTime;
+				} finally {
+					this.#processingPendingSeek = false;
+				}
 			} else this.#pendingSeekTime = void 0;
 		});
 	}
 	get currentTime() {
-		return this.#currentTime;
-	}
-	get currentTimeMs() {
-		return this.currentTime * 1e3;
+		return this.#currentTime ?? 0;
 	}
 	set currentTimeMs(ms) {
 		this.currentTime = ms / 1e3;
 	}
+	get currentTimeMs() {
+		return this.currentTime * 1e3;
+	}
 	/**
 	* Determines if this is a root timegroup (no parent timegroups)
 	*/
 	get isRootTimegroup() {
-		return this.closest("ef-timegroup") === this;
+		return !this.parentTimegroup;
 	}
 	/**
 	* Saves time to localStorage (extracted for reuse)
 	*/
 	#saveTimeToLocalStorage(time) {
 		try {
-			if (this.id && this.isConnected) localStorage.setItem(this.storageKey, time.toString());
+			if (this.id && this.isConnected && !Number.isNaN(time)) localStorage.setItem(this.storageKey, time.toString());
 		} catch (error) {
 			log("Failed to save time to localStorage", error);
 		}
 	}
 	render() {
-		return html`<slot></slot> `;
+		return html`<slot @slotchange=${this.#handleSlotChange}></slot> `;
 	}
+	#handleSlotChange = () => {
+		resetTemporalCache();
+		flushSequenceDurationCache();
+		flushStartTimeMsCache();
+		this.requestUpdate();
+	};
 	maybeLoadTimeFromLocalStorage() {
 		if (this.id) try {
-			return Number.parseFloat(localStorage.getItem(this.storageKey) || "0");
+			const storedValue = localStorage.getItem(this.storageKey);
+			if (storedValue === null) return void 0;
+			return Number.parseFloat(storedValue);
 		} catch (error) {
 			log("Failed to load time from localStorage", error);
 		}
-		return 0;
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		if (this.id) this.waitForMediaDurations().then(() => {
-			this.currentTime = this.maybeLoadTimeFromLocalStorage();
+		this.waitForMediaDurations().then(() => {
+			if (this.id) {
+				const maybeLoadedTime = this.maybeLoadTimeFromLocalStorage();
+				if (maybeLoadedTime !== void 0) this.currentTime = maybeLoadedTime;
+			}
+			if (EF_INTERACTIVE && this.seekTask.status === TaskStatus.INITIAL) this.seekTask.run();
 		});
 		if (this.parentTimegroup) new TimegroupController(this.parentTimegroup, this);
 		if (this.shouldWrapWithWorkbench()) this.wrapWithWorkbench();
-		requestAnimationFrame(() => {
-			this.updateAnimations();
-		});
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -152,12 +194,15 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 			}
 			case "fixed": return super.durationMs;
 			case "sequence": {
+				const cachedDuration = sequenceDurationCache.get(this);
+				if (cachedDuration !== void 0) return cachedDuration;
 				let duration = 0;
 				this.childTemporals.forEach((child, index) => {
 					if (child instanceof _EFTimegroup && child.mode === "fit") return;
 					if (index > 0) duration -= this.overlapMs;
 					duration += child.durationMs;
 				});
+				sequenceDurationCache.set(this, duration);
 				return duration;
 			}
 			case "contain": {
@@ -176,7 +221,21 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		await this.waitForNestedUpdates(signal);
 		signal?.throwIfAborted();
 		const temporals = deepGetElementsWithFrameTasks(this);
-		return temporals.map((temporal) => temporal.frameTask).filter((task) => task.status < TaskStatus.COMPLETE);
+		const timelineTimeMs = (this.#pendingSeekTime ?? this.#currentTime ?? 0) * 1e3;
+		const activeTemporals = temporals.filter((temporal) => {
+			if (!("startTimeMs" in temporal) || !("endTimeMs" in temporal)) return true;
+			const epsilon = .001;
+			const startTimeMs = temporal.startTimeMs;
+			const endTimeMs = temporal.endTimeMs;
+			const elementStartsBeforeEnd = startTimeMs <= timelineTimeMs + epsilon;
+			const elementEndsAfterStart = endTimeMs > timelineTimeMs;
+			return elementStartsBeforeEnd && elementEndsAfterStart;
+		});
+		const frameTasks = activeTemporals.map((temporal) => temporal.frameTask);
+		frameTasks.forEach((task) => {
+			task.run();
+		});
+		return frameTasks.filter((task) => task.status < TaskStatus.COMPLETE);
 	}
 	async waitForNestedUpdates(signal) {
 		const limit = 10;
@@ -190,21 +249,19 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 			if (isComplete) break;
 		}
 	}
-	async waitForFrameTasks(signal) {
-		const limit = 10;
-		let step = 0;
-		await this.waitForNestedUpdates(signal);
-		while (step < limit) {
-			step++;
-			let pendingTasks = await this.getPendingFrameTasks(signal);
-			signal?.throwIfAborted();
-			await Promise.all(pendingTasks.map((task) => task.taskComplete));
-			signal?.throwIfAborted();
-			await this.updateComplete;
-			signal?.throwIfAborted();
-			pendingTasks = await this.getPendingFrameTasks(signal);
-			if (pendingTasks.length === 0) break;
-		}
+	async waitForFrameTasks() {
+		const temporalElements = deepGetElementsWithFrameTasks(this);
+		const visibleElements = temporalElements.filter((element) => {
+			const temporalState = evaluateTemporalState(element);
+			return temporalState.isVisible;
+		});
+		await Promise.all(visibleElements.map((element) => {
+			return element.frameTask.run();
+		}));
+	}
+	async waitForMediaDurations() {
+		if (!this.mediaDurationsPromise) this.mediaDurationsPromise = this.#waitForMediaDurations();
+		return this.mediaDurationsPromise;
 	}
 	/**
 	* Wait for all media elements to load their initial segments.
@@ -212,24 +269,18 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	* that caused issues with constructing audio data. We had negative durations
 	* in calculations and it was not clear why.
 	*/
-	async waitForMediaDurations() {
+	async #waitForMediaDurations() {
 		await this.updateComplete;
 		const mediaElements = deepGetMediaElements(this);
-		await Promise.all(mediaElements.map((m) => m.mediaEngineTask.taskComplete));
+		await Promise.all(mediaElements.map((m) => m.mediaEngineTask.value ? Promise.resolve() : m.mediaEngineTask.run()));
 		flushStartTimeMsCache();
+		flushSequenceDurationCache();
 		this.requestUpdate("currentTime");
 		await this.updateComplete;
 	}
 	get childTemporals() {
 		return shallowGetTemporalElements(this);
 	}
-	updated(changedProperties) {
-		super.updated(changedProperties);
-		if (changedProperties.has("currentTime") || changedProperties.has("ownCurrentTimeMs")) this.updateAnimations();
-	}
-	updateAnimations() {
-		updateAnimations(this);
-	}
 	get contextProvider() {
 		let parent = this.parentNode;
 		while (parent) {
@@ -276,19 +327,24 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 			const mediaLocalFromMs = Math.max(0, fromMs - mediaElement.startTimeMs);
 			const mediaLocalToMs = Math.min(mediaElement.endTimeMs - mediaElement.startTimeMs, toMs - mediaElement.startTimeMs);
 			if (mediaLocalFromMs >= mediaLocalToMs) return;
-			const audio = await mediaElement.fetchAudioSpanningTime(mediaLocalFromMs, mediaLocalToMs, abortController.signal);
+			const sourceInMs = mediaElement.sourceInMs || mediaElement.trimStartMs || 0;
+			const mediaSourceFromMs = mediaLocalFromMs + sourceInMs;
+			const mediaSourceToMs = mediaLocalToMs + sourceInMs;
+			const audio = await mediaElement.fetchAudioSpanningTime(mediaSourceFromMs, mediaSourceToMs, abortController.signal);
 			if (!audio) throw new Error("Failed to fetch audio");
 			const bufferSource = audioContext.createBufferSource();
 			bufferSource.buffer = await audioContext.decodeAudioData(await audio.blob.arrayBuffer());
 			bufferSource.connect(audioContext.destination);
 			const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
-			const ctxEndMs = mediaElement.endTimeMs - fromMs;
-			const ctxDurationMs = ctxEndMs - ctxStartMs;
-			const requestedOffsetInMedia = mediaLocalFromMs;
-			const actualOffsetInBuffer = requestedOffsetInMedia - audio.startMs;
-			const safeOffset = Math.max(0, actualOffsetInBuffer);
-			if (safeOffset !== actualOffsetInBuffer) {}
-			bufferSource.start(ctxStartMs / 1e3, safeOffset / 1e3, ctxDurationMs / 1e3);
+			const requestedSourceFromMs = mediaSourceFromMs;
+			const actualSourceStartMs = audio.startMs;
+			const offsetInBufferMs = requestedSourceFromMs - actualSourceStartMs;
+			const safeOffsetMs = Math.max(0, offsetInBufferMs);
+			const requestedDurationMs = mediaSourceToMs - mediaSourceFromMs;
+			const availableAudioMs = audio.endMs - audio.startMs;
+			const actualDurationMs = Math.min(requestedDurationMs, availableAudioMs - safeOffsetMs);
+			if (actualDurationMs <= 0) return;
+			bufferSource.start(ctxStartMs / 1e3, safeOffsetMs / 1e3, actualDurationMs / 1e3);
 		}));
 	}
 	async renderAudio(fromMs, toMs) {
@@ -347,12 +403,12 @@ _decorate([provide({ context: timegroupContext })], EFTimegroup.prototype, "_tim
 _decorate([property({
 	type: String,
 	attribute: "mode"
-})], EFTimegroup.prototype, "mode", void 0);
+})], EFTimegroup.prototype, "mode", null);
 _decorate([property({
 	type: Number,
 	converter: durationConverter,
 	attribute: "overlap"
-})], EFTimegroup.prototype, "overlapMs", void 0);
+})], EFTimegroup.prototype, "overlapMs", null);
 _decorate([property({ type: String })], EFTimegroup.prototype, "fit", void 0);
 _decorate([property({
 	type: Number,

package/dist/elements/EFVideo.d.ts

@@ -49,10 +49,10 @@ export declare class EFVideo extends EFVideo_base {
         message: string;
     };
     constructor();
+    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     render(): import('lit-html').TemplateResult<1>;
     get canvasElement(): HTMLCanvasElement | undefined;
     frameTask: Task<readonly [number], void>;
-    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     /**
      * Start a delayed loading operation for testing
      */
@@ -68,6 +68,10 @@ export declare class EFVideo extends EFVideo_base {
      */
     private setLoadingState;
     paintTask: Task<readonly [number], void>;
+    /**
+     * Clear the canvas when element becomes inactive
+     */
+    clearCanvas(): void;
     /**
      * Display a video frame on the canvas
      */

package/dist/elements/EFVideo.js

@@ -1,4 +1,3 @@
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { EFMedia } from "./EFMedia.js";
 import { TWMixin } from "../gui/TWMixin2.js";
 import { DelayedLoadingState } from "../DelayedLoadingState.js";
@@ -99,19 +98,21 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			message: ""
 		};
 		this.frameTask = new Task(this, {
-			autoRun: EF_INTERACTIVE,
+			autoRun: false,
 			args: () => [this.desiredSeekTimeMs],
 			onError: (error) => {
 				console.error("frameTask error", error);
 			},
 			onComplete: () => {},
-			task: async ([_desiredSeekTimeMs], { signal }) => {
+			task: async ([_desiredSeekTimeMs]) => {
+				this.unifiedVideoSeekTask.run();
 				await this.unifiedVideoSeekTask.taskComplete;
+				this.paintTask.run();
 				await this.paintTask.taskComplete;
-				if (signal.aborted) return;
 			}
 		});
 		this.paintTask = new Task(this, {
+			autoRun: false,
 			args: () => [this.desiredSeekTimeMs],
 			onError: (error) => {
 				console.error("paintTask error", error);
@@ -146,6 +147,9 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			this.setLoadingState(isLoading, null, message);
 		});
 	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+	}
 	render() {
 		return html`
       <canvas ${ref(this.canvasRef)}></canvas>
@@ -169,9 +173,6 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 		if (shadowCanvas) return shadowCanvas;
 		return void 0;
 	}
-	updated(changedProperties) {
-		super.updated(changedProperties);
-	}
 	/**
 	* Start a delayed loading operation for testing
 	*/
@@ -195,6 +196,14 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 		};
 	}
 	/**
+	* Clear the canvas when element becomes inactive
+	*/
+	clearCanvas() {
+		if (!this.canvasElement) return;
+		const ctx = this.canvasElement.getContext("2d");
+		if (ctx) ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);
+	}
+	/**
 	* Display a video frame on the canvas
 	*/
 	displayFrame(frame, seekToMs) {
@@ -225,7 +234,6 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			log("trace: displayFrame aborted - null frame format");
 			throw new Error(`Frame display failed: Video frame has null format at time ${seekToMs}ms. This indicates corrupted or incompatible video data.`);
 		}
-		log("trace: drawing frame to canvas", frame.timestamp / 1e3);
 		ctx.drawImage(frame, 0, 0, this.canvasElement.width, this.canvasElement.height);
 		log("trace: frame drawn to canvas", { seekToMs });
 		return seekToMs;

package/dist/elements/EFWaveform.js

@@ -1,4 +1,3 @@
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { EF_RENDERING } from "../EF_RENDERING.js";
 import { EFTemporal } from "./EFTemporal.js";
 import { TargetController } from "./TargetController.js";
@@ -24,7 +23,7 @@ let EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 		this.lineWidth = 4;
 		this.targetController = new TargetController(this);
 		this.frameTask = new Task(this, {
-			autoRun: EF_INTERACTIVE,
+			autoRun: false,
 			args: () => {
 				return [this.targetElement, this.targetElement?.frequencyDataTask.value];
 			},
@@ -95,7 +94,7 @@ let EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
     `;
 	}
 	render() {
-		return html`<canvas ${ref(this.canvasRef)}></canvas><div class="text-5xl inline-block bg-red-500">`;
+		return html`<canvas ${ref(this.canvasRef)}></canvas>`;
 	}
 	connectedCallback() {
 		super.connectedCallback();

package/dist/elements/FetchMixin.js

@@ -1,18 +1,23 @@
-import { fetchContext } from "../gui/fetchContext.js";
-import { consume } from "@lit/context";
-import _decorate from "@oxc-project/runtime/helpers/decorate";
-import { state } from "lit/decorators/state.js";
 function FetchMixin(superClass) {
 	class FetchElement extends superClass {
 		constructor(..._args) {
 			super(..._args);
-			this.fetch = fetch.bind(window);
+			this.fetch = (url, init) => {
+				try {
+					const workbench = this.closest("ef-workbench");
+					if (workbench?.fetch) return workbench.fetch(url, init);
+					const preview = this.closest("ef-preview");
+					if (preview?.fetch) return preview.fetch(url, init);
+					const configuration = this.closest("ef-configuration");
+					if (configuration?.fetch) return configuration.fetch(url, init);
+					return window.fetch(url, init);
+				} catch (error) {
+					console.error("FetchMixin error", url, error);
+					throw error;
+				}
+			};
 		}
 	}
-	_decorate([consume({
-		context: fetchContext,
-		subscribe: true
-	}), state()], FetchElement.prototype, "fetch", void 0);
 	return FetchElement;
 }
 export { FetchMixin };

package/dist/elements/TimegroupController.js

@@ -12,7 +12,8 @@ var TimegroupController = class {
 	}
 	hostUpdated() {
 		this.child.requestUpdate();
-		this.child.currentTimeMs = this.host.currentTimeMs - (this.child.startTimeMs ?? 0);
+		const newChildTimeMs = this.host.currentTimeMs - (this.child.startTimeMs ?? 0);
+		this.child.currentTimeMs = newChildTimeMs;
 	}
 };
 export { TimegroupController };

package/dist/elements/updateAnimations.d.ts

@@ -1,9 +1,19 @@
-import { EFTimegroup } from './EFTimegroup.ts';
-export declare const updateAnimations: (element: HTMLElement & {
-    currentTimeMs: number;
-    durationMs: number;
-    rootTimegroup?: EFTimegroup;
-    parentTimegroup?: EFTimegroup;
-    startTimeMs: number;
-    endTimeMs: number;
-}) => void;
+import { TemporalMixinInterface } from './EFTemporal.ts';
+export type AnimatableElement = TemporalMixinInterface & HTMLElement;
+/**
+ * Represents the temporal state of an element relative to the timeline
+ */
+interface TemporalState {
+    progress: number;
+    isVisible: boolean;
+    timelineTimeMs: number;
+}
+/**
+ * Evaluates what the element's state should be based on the timeline
+ */
+export declare const evaluateTemporalState: (element: AnimatableElement) => TemporalState;
+/**
+ * Main function: synchronizes DOM element with timeline
+ */
+export declare const updateAnimations: (element: AnimatableElement) => void;
+export {};

package/dist/elements/updateAnimations.js

@@ -1,42 +1,81 @@
-import { isEFTemporal } from "./EFTemporal.js";
-const updateAnimations = (element) => {
-	element.style.setProperty("--ef-progress", `${Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs)) * 100}%`);
+import { deepGetTemporalElements, isEFTemporal } from "./EFTemporal.js";
+const ANIMATION_PRECISION_OFFSET = .001;
+const DEFAULT_ANIMATION_ITERATIONS = 1;
+const PROGRESS_PROPERTY = "--ef-progress";
+const DURATION_PROPERTY = "--ef-duration";
+const TRANSITION_DURATION_PROPERTY = "--ef-transition-duration";
+const TRANSITION_OUT_START_PROPERTY = "--ef-transition-out-start";
+const TIMEGROUP_TAGNAME = "ef-timegroup";
+/**
+* Evaluates what the element's state should be based on the timeline
+*/
+const evaluateTemporalState = (element) => {
 	const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;
-	if (element.startTimeMs > timelineTimeMs || element.endTimeMs < timelineTimeMs) {
-		element.style.display = "none";
+	const progress = element.durationMs <= 0 ? 1 : Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs));
+	const isVisible = element.startTimeMs <= timelineTimeMs && element.endTimeMs > timelineTimeMs;
+	return {
+		progress,
+		isVisible,
+		timelineTimeMs
+	};
+};
+/**
+* Updates the visual state (CSS + display) to match temporal state
+*/
+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;
 	}
-	element.style.display = "";
-	if (typeof element.getAnimations !== "function") return;
+	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`);
+};
+/**
+* Coordinates animations to match timeline
+*/
+const coordinateAnimations = (element) => {
 	const animations = element.getAnimations({ subtree: true });
-	element.style.setProperty("--ef-duration", `${element.durationMs}ms`);
-	element.style.setProperty("--ef-transition-duration", `${element.parentTimegroup?.overlapMs ?? 0}ms`);
-	element.style.setProperty("--ef-transition-out-start", `${element.durationMs - (element.parentTimegroup?.overlapMs ?? 0)}ms`);
 	for (const animation of animations) {
 		if (animation.playState === "running") animation.pause();
 		const effect = animation.effect;
 		if (!(effect && effect instanceof KeyframeEffect)) continue;
 		const target = effect.target;
-		if (!target) continue;
-		if (target.closest("ef-timegroup") !== element) continue;
-		const timing = effect.getTiming();
-		const duration = Number(timing.duration) ?? 0;
-		const delay = Number(timing.delay) ?? 0;
-		const iterations = Number(timing.iterations) ?? 1;
-		const timeTarget = isEFTemporal(target) ? target : target.closest("ef-timegroup");
+		if (!target || target.closest(TIMEGROUP_TAGNAME) !== element) continue;
+		const timeTarget = isEFTemporal(target) ? target : target.closest(TIMEGROUP_TAGNAME);
 		if (!timeTarget) continue;
-		const currentTime = timeTarget.ownCurrentTimeMs;
-		if (currentTime < delay) {
+		const timing = effect.getTiming();
+		const duration = Number(timing.duration) || 0;
+		const delay = Number(timing.delay) || 0;
+		const iterations = Number(timing.iterations) || DEFAULT_ANIMATION_ITERATIONS;
+		if (duration <= 0) {
 			animation.currentTime = 0;
 			continue;
 		}
-		const currentIteration = Math.floor((currentTime - delay) / duration);
-		const currentIterationTime = (currentTime - delay) % duration;
-		if (currentIteration >= iterations) {
-			animation.currentTime = duration - .01;
+		const currentTime = timeTarget.ownCurrentTimeMs ?? 0;
+		if (currentTime < delay) {
+			animation.currentTime = 0;
 			continue;
 		}
-		animation.currentTime = Math.min(currentIterationTime, duration - .01) + delay;
+		const adjustedTime = currentTime - delay;
+		const currentIteration = Math.floor(adjustedTime / duration);
+		const currentIterationTime = adjustedTime % duration;
+		if (currentIteration >= iterations) animation.currentTime = duration - ANIMATION_PRECISION_OFFSET;
+		else animation.currentTime = Math.min(currentIterationTime, duration - ANIMATION_PRECISION_OFFSET) + delay;
 	}
 };
-export { updateAnimations };
+/**
+* Main function: synchronizes DOM element with timeline
+*/
+const updateAnimations = (element) => {
+	const temporalState = evaluateTemporalState(element);
+	deepGetTemporalElements(element).forEach((temporalElement) => {
+		const temporalState$1 = evaluateTemporalState(temporalElement);
+		updateVisualState(temporalElement, temporalState$1);
+	});
+	updateVisualState(element, temporalState);
+	if (temporalState.isVisible) coordinateAnimations(element);
+};
+export { evaluateTemporalState, updateAnimations };