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

package/dist/elements/EFThumbnailStrip.js

@@ -0,0 +1,490 @@
+import { OrderedLRUCache } from "../utils/LRUCache.js";
+import { TargetController } from "./TargetController.js";
+import { Task } from "@lit/task";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
+import { createRef, ref } from "lit/directives/ref.js";
+/**
+* Global thumbnail image cache for smooth resize performance
+* Shared across all thumbnail strip instances
+* Uses OrderedLRUCache for efficient timestamp-based searching
+*/
+const thumbnailImageCache = new OrderedLRUCache(200, (a, b) => {
+	const partsA = a.split(":");
+	const partsB = b.split(":");
+	const timeA = Number.parseFloat(partsA[partsA.length - 1] || "0");
+	const timeB = Number.parseFloat(partsB[partsB.length - 1] || "0");
+	return timeA - timeB;
+});
+globalThis.debugThumbnailCache = thumbnailImageCache;
+/**
+* Quantize timestamp to 30fps frame boundaries for consistent caching
+* This eliminates cache misses from floating point precision differences
+*/
+function quantizeTimestamp(timeMs) {
+	const frameIntervalMs = 1e3 / 30;
+	return Math.round(timeMs / frameIntervalMs) * frameIntervalMs;
+}
+/**
+* Generate cache key for thumbnail image data (dimension-independent, quantized)
+*/
+function getThumbnailCacheKey(videoSrc, timeMs) {
+	const quantizedTimeMs = quantizeTimestamp(timeMs);
+	return `${videoSrc}:${quantizedTimeMs}`;
+}
+const THUMBNAIL_GAP = 1;
+const STRIP_BORDER_PADDING = 4;
+/**
+* Calculate optimal thumbnail count and timestamps for the strip
+* Groups thumbnails by scrub segment ID for efficient caching
+*/
+function calculateThumbnailLayout(stripWidth, thumbnailWidth, startTimeMs, endTimeMs, scrubSegmentDurationMs) {
+	if (stripWidth <= 0 || thumbnailWidth <= 0 || endTimeMs <= startTimeMs) return {
+		count: 0,
+		segments: []
+	};
+	const thumbnailPitch = thumbnailWidth + THUMBNAIL_GAP;
+	const baseFitCount = Math.floor(stripWidth / thumbnailPitch);
+	const count = Math.max(1, baseFitCount + 1);
+	const timestamps = [];
+	const timeRange = endTimeMs - startTimeMs;
+	for (let i = 0; i < count; i++) {
+		const timeMs = count === 1 ? (startTimeMs + endTimeMs) / 2 : startTimeMs + i * timeRange / (count - 1);
+		timestamps.push(timeMs);
+	}
+	const segmentMap = /* @__PURE__ */ new Map();
+	for (const timeMs of timestamps) {
+		const segmentId = scrubSegmentDurationMs ? Math.floor(timeMs / scrubSegmentDurationMs) : 0;
+		if (!segmentMap.has(segmentId)) segmentMap.set(segmentId, []);
+		segmentMap.get(segmentId).push({ timeMs });
+	}
+	const segments = Array.from(segmentMap.entries()).sort(([a], [b]) => a - b).map(([segmentId, thumbnails]) => ({
+		segmentId,
+		thumbnails
+	}));
+	return {
+		count,
+		segments
+	};
+}
+let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.canvasRef = createRef();
+		this._targetController = new TargetController(this);
+		this._targetElement = null;
+		this.target = "";
+		this.thumbnailWidth = 80;
+		this.useIntrinsicDuration = false;
+		this._stripWidth = 0;
+		this._stripHeight = 48;
+		this._thumbnailUpdateInProgress = false;
+		this._pendingThumbnailUpdate = false;
+		this.thumbnailLayoutTask = new Task(this, {
+			autoRun: false,
+			task: async ([stripWidth, thumbnailWidth, targetElement, startTimeMs, endTimeMs, useIntrinsicDuration, mediaEngine]) => {
+				if (stripWidth <= 0 || !targetElement) return {
+					count: 0,
+					segments: []
+				};
+				if (!mediaEngine) {
+					if (targetElement.mediaEngineTask) {
+						await targetElement.mediaEngineTask.taskComplete;
+						const readyMediaEngine = targetElement.mediaEngineTask.value;
+						if (!readyMediaEngine) return {
+							count: 0,
+							segments: []
+						};
+						return this.calculateLayoutWithMediaEngine(stripWidth, thumbnailWidth, targetElement, startTimeMs, endTimeMs, useIntrinsicDuration, readyMediaEngine);
+					}
+					return {
+						count: 0,
+						segments: []
+					};
+				}
+				return this.calculateLayoutWithMediaEngine(stripWidth, thumbnailWidth, targetElement, startTimeMs, endTimeMs, useIntrinsicDuration, mediaEngine);
+			},
+			args: () => [
+				this.stripWidth,
+				this.thumbnailWidth,
+				this.targetElement,
+				this.startTimeMs,
+				this.endTimeMs,
+				this.useIntrinsicDuration,
+				this.targetElement?.mediaEngineTask?.value
+			]
+		});
+		this.thumbnailRenderTask = new Task(this, {
+			autoRun: false,
+			task: async ([layout, targetElement, thumbnailWidth]) => {
+				if (!layout || !targetElement) return [];
+				return this.renderThumbnails(layout, targetElement, thumbnailWidth);
+			},
+			args: () => [
+				this.thumbnailLayoutTask.value || null,
+				this.targetElement,
+				this.thumbnailWidth
+			]
+		});
+	}
+	static {
+		this.styles = [css`
+      :host {
+        display: block;
+        position: relative;
+        width: 100%;
+        height: 48px; /* Default filmstrip height */
+        background: #2a2a2a;
+        border: 2px solid #333;
+        border-radius: 6px;
+        overflow: hidden;
+        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
+      }
+      canvas {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        image-rendering: pixelated; /* Keep thumbnails crisp */
+        /* Width and height set programmatically to prevent CSS scaling */
+      }
+      .loading-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(42, 42, 42, 0.9);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 11px;
+        color: #ccc;
+        font-weight: 500;
+      }
+    `];
+	}
+	get targetElement() {
+		return this._targetElement;
+	}
+	set targetElement(value) {
+		const oldValue = this._targetElement;
+		this._targetElement = value;
+		this._videoPropertyObserver?.disconnect();
+		if (value && value !== oldValue) {
+			this._videoPropertyObserver = new MutationObserver((mutations) => {
+				let shouldUpdate = false;
+				for (const mutation of mutations) if (mutation.type === "attributes" && mutation.attributeName) {
+					const attr = mutation.attributeName;
+					if (attr === "trimstart" || attr === "trimend" || attr === "sourcein" || attr === "sourceout" || attr === "src") {
+						shouldUpdate = true;
+						break;
+					}
+				}
+				if (shouldUpdate) this.runThumbnailUpdate();
+			});
+			this._videoPropertyObserver.observe(value, {
+				attributes: true,
+				attributeFilter: [
+					"trimstart",
+					"trimend",
+					"sourcein",
+					"sourceout",
+					"src"
+				]
+			});
+			if (value.mediaEngineTask) value.mediaEngineTask.taskComplete.then(() => {
+				if (this._stripWidth > 0) this.thumbnailLayoutTask.run();
+			}).catch(() => {});
+		}
+		this.requestUpdate("targetElement", oldValue);
+	}
+	set stripWidth(value) {
+		if (this._thumbnailLayoutTask) {
+			this._pendingStripWidth = value;
+			return;
+		}
+		this._stripWidth = value;
+		if (value > 0) this._thumbnailLayoutTask = this.thumbnailLayoutTask.run().then(async () => {
+			await this.thumbnailLayoutTask.taskComplete;
+			const layout = this.thumbnailLayoutTask.value;
+			return layout ? this.runThumbnailRenderTask(layout) : [];
+		}).finally(() => {
+			this._thumbnailLayoutTask = void 0;
+			if (this._pendingStripWidth) {
+				this.stripWidth = this._pendingStripWidth;
+				this._pendingStripWidth = void 0;
+			}
+		});
+	}
+	get stripWidth() {
+		return this._stripWidth;
+	}
+	/**
+	* Run thumbnail render task directly with provided layout (bypasses task args dependency)
+	*/
+	async runThumbnailRenderTask(layout) {
+		if (!layout || !this.targetElement || layout.count === 0) return [];
+		return this.renderThumbnails(layout, this.targetElement, this.thumbnailWidth);
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (this._stripWidth === 0) {
+			const width = this.clientWidth;
+			if (width > 0) this.stripWidth = width;
+		}
+		if (changedProperties.has("thumbnailWidth") || changedProperties.has("startTimeMs") || changedProperties.has("endTimeMs") || changedProperties.has("useIntrinsicDuration")) this.runThumbnailUpdate();
+	}
+	/**
+	* Run thumbnail update with responsive debouncing (based on EFTimegroup currentTime pattern)
+	*/
+	runThumbnailUpdate() {
+		if (this._thumbnailUpdateInProgress) {
+			this._pendingThumbnailUpdate = true;
+			return;
+		}
+		this._thumbnailUpdateInProgress = true;
+		this.thumbnailLayoutTask.run().then(async () => {
+			await this.thumbnailLayoutTask.taskComplete;
+			const layout = this.thumbnailLayoutTask.value;
+			if (layout) await this.runThumbnailRenderTask(layout);
+		}).catch(() => {}).finally(() => {
+			this._thumbnailUpdateInProgress = false;
+			if (this._pendingThumbnailUpdate) {
+				this._pendingThumbnailUpdate = false;
+				this.runThumbnailUpdate();
+			}
+		});
+	}
+	/**
+	* Calculate layout with a ready media engine
+	*/
+	calculateLayoutWithMediaEngine(stripWidth, thumbnailWidth, targetElement, startTimeMs, endTimeMs, useIntrinsicDuration, mediaEngine) {
+		if (useIntrinsicDuration) {
+			const effectiveStartMs$1 = startTimeMs ?? 0;
+			const effectiveEndMs$1 = endTimeMs ?? targetElement.intrinsicDurationMs ?? 0;
+			return this.generateLayoutFromTimeRange(stripWidth, thumbnailWidth, effectiveStartMs$1, effectiveEndMs$1, mediaEngine);
+		}
+		const sourceStart = targetElement.sourceStartMs ?? 0;
+		const trimmedDuration = targetElement.durationMs ?? 0;
+		const effectiveStartMs = startTimeMs !== void 0 ? sourceStart + startTimeMs : sourceStart;
+		const effectiveEndMs = endTimeMs !== void 0 ? sourceStart + endTimeMs : sourceStart + trimmedDuration;
+		return this.generateLayoutFromTimeRange(stripWidth, thumbnailWidth, effectiveStartMs, effectiveEndMs, mediaEngine);
+	}
+	/**
+	* Generate layout from calculated time range
+	*/
+	generateLayoutFromTimeRange(stripWidth, thumbnailWidth, effectiveStartMs, effectiveEndMs, mediaEngine) {
+		const scrubSegmentDurationMs = mediaEngine && typeof mediaEngine.getScrubVideoRendition === "function" ? mediaEngine.getScrubVideoRendition()?.segmentDurationMs : void 0;
+		const layout = calculateThumbnailLayout(stripWidth, thumbnailWidth, effectiveStartMs, effectiveEndMs, scrubSegmentDurationMs);
+		return layout;
+	}
+	/**
+	* Render thumbnails with provided layout (main rendering logic)
+	*/
+	async renderThumbnails(layout, targetElement, thumbnailWidth) {
+		if (!layout || !targetElement || layout.count === 0) return [];
+		const videoSrc = targetElement.src;
+		const availableHeight = this._stripHeight - STRIP_BORDER_PADDING;
+		const allThumbnails = [];
+		let thumbnailIndex = 0;
+		for (const segment of layout.segments) for (const thumbnail of segment.thumbnails) {
+			const cacheKey = getThumbnailCacheKey(videoSrc, thumbnail.timeMs);
+			let imageData = thumbnailImageCache.get(cacheKey);
+			let status = "exact-hit";
+			let nearHitKey;
+			if (!imageData) {
+				const timeMinus = Math.max(0, thumbnail.timeMs - 5e3);
+				const timePlus = thumbnail.timeMs + 5e3;
+				const rangeStartKey = `${videoSrc}:${timeMinus}`;
+				const rangeEndKey = `${videoSrc}:${timePlus}`;
+				const nearHits = thumbnailImageCache.findRange(rangeStartKey, rangeEndKey);
+				const sameVideoHits = nearHits.filter((hit) => hit.key.startsWith(`${videoSrc}:`));
+				if (sameVideoHits.length > 0) {
+					const nearestHit = sameVideoHits.reduce((closest, current) => {
+						const currentParts = current.key.split(":");
+						const closestParts = closest.key.split(":");
+						const currentTime = Number.parseFloat(currentParts[currentParts.length - 1] || "0");
+						const closestTime = Number.parseFloat(closestParts[closestParts.length - 1] || "0");
+						const currentDiff = Math.abs(currentTime - thumbnail.timeMs);
+						const closestDiff = Math.abs(closestTime - thumbnail.timeMs);
+						return currentDiff < closestDiff ? current : closest;
+					});
+					imageData = nearestHit.value;
+					status = "near-hit";
+					nearHitKey = nearestHit.key;
+				} else status = "missing";
+			}
+			const x = thumbnailIndex * (thumbnailWidth + THUMBNAIL_GAP);
+			allThumbnails.push({
+				timeMs: thumbnail.timeMs,
+				segmentId: segment.segmentId,
+				x,
+				width: thumbnailWidth,
+				height: availableHeight,
+				status,
+				imageData,
+				nearHitKey
+			});
+			thumbnailIndex++;
+		}
+		await this.drawThumbnails(allThumbnails);
+		await this.loadMissingThumbnails(allThumbnails, targetElement);
+		return allThumbnails;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const width = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0]?.inlineSize : entry.contentRect.width;
+				const height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0]?.blockSize : entry.contentRect.height;
+				this._stripHeight = height ?? 0;
+				this.stripWidth = width ?? 0;
+			}
+		});
+		this.resizeObserver.observe(this);
+		this.updateComplete.then(() => {
+			if (this._stripWidth === 0) {
+				const width = this.clientWidth;
+				if (width > 0) this.stripWidth = width ?? 0;
+			}
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.resizeObserver?.disconnect();
+		this.resizeObserver = void 0;
+		this._videoPropertyObserver?.disconnect();
+		this._videoPropertyObserver = void 0;
+	}
+	/**
+	* Draw thumbnails to the canvas with cache hits and placeholders
+	*/
+	async drawThumbnails(thumbnails) {
+		const canvas = this.canvasRef.value;
+		if (!canvas) return;
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+		const dpr = window.devicePixelRatio || 1;
+		canvas.width = this._stripWidth * dpr;
+		canvas.height = this._stripHeight * dpr;
+		canvas.style.width = `${this._stripWidth}px`;
+		canvas.style.height = `${this._stripHeight}px`;
+		ctx.scale(dpr, dpr);
+		ctx.fillStyle = "#2a2a2a";
+		ctx.fillRect(0, 0, this._stripWidth, this._stripHeight);
+		for (const thumb of thumbnails) if (thumb.imageData) {
+			const tempCanvas = document.createElement("canvas");
+			tempCanvas.width = thumb.imageData.width;
+			tempCanvas.height = thumb.imageData.height;
+			const tempCtx = tempCanvas.getContext("2d");
+			if (!tempCtx) continue;
+			tempCtx.putImageData(thumb.imageData, 0, 0);
+			const sourceAspect = thumb.imageData.width / thumb.imageData.height;
+			const containerAspect = thumb.width / thumb.height;
+			let drawWidth;
+			let drawHeight;
+			let drawX;
+			let drawY;
+			if (sourceAspect > containerAspect) {
+				drawWidth = thumb.width;
+				drawHeight = Math.round(thumb.width / sourceAspect);
+				drawX = thumb.x;
+				drawY = Math.round((this._stripHeight - drawHeight) / 2);
+			} else {
+				drawWidth = Math.round(thumb.height * sourceAspect);
+				drawHeight = thumb.height;
+				drawX = thumb.x + Math.round((thumb.width - drawWidth) / 2);
+				drawY = Math.round((this._stripHeight - drawHeight) / 2);
+			}
+			ctx.drawImage(tempCanvas, drawX, drawY, drawWidth, drawHeight);
+			if (thumb.status === "near-hit") {
+				ctx.fillStyle = "rgba(255, 165, 0, 0.3)";
+				ctx.fillRect(thumb.x, 0, thumb.width, 2);
+			}
+		} else {
+			const placeholderY = Math.round((this._stripHeight - thumb.height) / 2);
+			ctx.fillStyle = "#404040";
+			ctx.fillRect(thumb.x, placeholderY, thumb.width, thumb.height);
+			ctx.strokeStyle = "#666";
+			ctx.lineWidth = 1;
+			ctx.setLineDash([2, 2]);
+			ctx.strokeRect(thumb.x, placeholderY, thumb.width, thumb.height);
+			ctx.setLineDash([]);
+		}
+	}
+	/**
+	* Load missing thumbnails using MediaEngine batch extraction
+	*/
+	async loadMissingThumbnails(thumbnails, targetElement) {
+		const mediaEngine = targetElement.mediaEngineTask?.value;
+		if (!mediaEngine) return;
+		const missingThumbnails = thumbnails.filter((t) => t.status === "missing" || t.status === "near-hit");
+		if (missingThumbnails.length === 0) return;
+		for (const thumb of missingThumbnails) thumb.status = "loading";
+		const timestamps = missingThumbnails.map((t) => t.timeMs);
+		const thumbnailResults = await mediaEngine.extractThumbnails(timestamps);
+		for (let i = 0; i < missingThumbnails.length; i++) {
+			const thumb = missingThumbnails[i];
+			const thumbnailResult = thumbnailResults[i];
+			if (thumb && thumbnailResult) {
+				const imageData = this.canvasToImageData(thumbnailResult.thumbnail);
+				if (imageData) {
+					const cacheKey = getThumbnailCacheKey(targetElement.src, thumb.timeMs);
+					thumbnailImageCache.set(cacheKey, imageData);
+					thumb.imageData = imageData;
+					thumb.status = "exact-hit";
+				}
+			}
+		}
+		await this.drawThumbnails(thumbnails);
+	}
+	/**
+	* Convert Canvas to ImageData for caching
+	*/
+	canvasToImageData(canvas) {
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return null;
+		return ctx.getImageData(0, 0, canvas.width, canvas.height);
+	}
+	render() {
+		return html`
+      <canvas ${ref(this.canvasRef)}></canvas>
+      ${this.thumbnailRenderTask.render({
+			pending: () => html``,
+			complete: () => html``,
+			error: (e) => html`<div class="error">Error loading thumbnails: ${e}</div>`
+		})}
+    `;
+	}
+};
+_decorate([state()], EFThumbnailStrip.prototype, "targetElement", null);
+_decorate([property({ type: String })], EFThumbnailStrip.prototype, "target", void 0);
+_decorate([property({
+	type: Number,
+	attribute: "thumbnail-width"
+})], EFThumbnailStrip.prototype, "thumbnailWidth", void 0);
+_decorate([property({
+	type: Number,
+	attribute: "start-time-ms"
+})], EFThumbnailStrip.prototype, "startTimeMs", void 0);
+_decorate([property({
+	type: Number,
+	attribute: "end-time-ms"
+})], EFThumbnailStrip.prototype, "endTimeMs", void 0);
+_decorate([property({
+	type: Boolean,
+	attribute: "use-intrinsic-duration",
+	reflect: true,
+	converter: {
+		fromAttribute: (value) => {
+			if (value === null) return false;
+			return value === "true";
+		},
+		toAttribute: (value) => value ? "true" : null
+	}
+})], EFThumbnailStrip.prototype, "useIntrinsicDuration", void 0);
+_decorate([state()], EFThumbnailStrip.prototype, "stripWidth", null);
+EFThumbnailStrip = _decorate([customElement("ef-thumbnail-strip")], EFThumbnailStrip);
+export { EFThumbnailStrip };

package/dist/elements/EFTimegroup.d.ts

@@ -1,5 +1,5 @@
 import { Task } from '@lit/task';
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 export declare const flushSequenceDurationCache: () => void;
 export declare const shallowGetTimegroups: (element: Element, groups?: EFTimegroup[]) => EFTimegroup[];
 declare const EFTimegroup_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
@@ -14,6 +14,10 @@ export declare class EFTimegroup extends EFTimegroup_base {
     get overlapMs(): number;
     private _overlapMs;
     fit: "none" | "contain" | "cover";
+    /**
+     * Throttles frameTask execution to ensure only one runs at a time while preserving the last request
+     */
+    private runThrottledFrameTask;
     set currentTime(time: number);
     get currentTime(): number;
     set currentTimeMs(ms: number);
@@ -25,6 +29,7 @@ export declare class EFTimegroup extends EFTimegroup_base {
     render(): import('lit-html').TemplateResult<1>;
     maybeLoadTimeFromLocalStorage(): number | undefined;
     connectedCallback(): void;
+    protected updated(_changedProperties: PropertyValues): void;
     disconnectedCallback(): void;
     get storageKey(): string;
     get intrinsicDurationMs(): number | undefined;

package/dist/elements/EFTimegroup.js

@@ -4,7 +4,7 @@ import { durationConverter } from "./durationConverter.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 { evaluateTemporalStateForAnimation, updateAnimations } from "./updateAnimations.js";
 import { provide } from "@lit/context";
 import { Task, TaskStatus } from "@lit/task";
 import debug from "debug";
@@ -51,9 +51,10 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 				if (!this.isRootTimegroup) return;
 				await this.waitForMediaDurations();
 				const newTime = Math.max(0, Math.min(targetTime ?? 0, this.durationMs / 1e3));
+				this.#currentTime = newTime;
 				this.requestUpdate("currentTime");
-				await this.frameTask.run();
-				this.#saveTimeToLocalStorage(newTime);
+				await this.runThrottledFrameTask();
+				this.#saveTimeToLocalStorage(this.#currentTime);
 				this.#seekInProgress = false;
 				return newTime;
 			}
@@ -90,6 +91,34 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	#seekInProgress = false;
 	#pendingSeekTime;
 	#processingPendingSeek = false;
+	#frameTaskInProgress = false;
+	#pendingFrameTaskRun = false;
+	#processingPendingFrameTask = false;
+	/**
+	* Throttles frameTask execution to ensure only one runs at a time while preserving the last request
+	*/
+	async runThrottledFrameTask() {
+		if (this.#frameTaskInProgress) {
+			this.#pendingFrameTaskRun = true;
+			while (this.#frameTaskInProgress) await this.frameTask.taskComplete;
+			return;
+		}
+		this.#frameTaskInProgress = true;
+		try {
+			await this.frameTask.run();
+		} finally {
+			this.#frameTaskInProgress = false;
+			if (this.#pendingFrameTaskRun && !this.#processingPendingFrameTask) {
+				this.#pendingFrameTaskRun = false;
+				this.#processingPendingFrameTask = true;
+				try {
+					await this.runThrottledFrameTask();
+				} finally {
+					this.#processingPendingFrameTask = false;
+				}
+			} else this.#pendingFrameTaskRun = false;
+		}
+	}
 	set currentTime(time) {
 		time = Math.max(0, time);
 		if (!this.isRootTimegroup) return;
@@ -171,6 +200,13 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		if (this.parentTimegroup) new TimegroupController(this.parentTimegroup, this);
 		if (this.shouldWrapWithWorkbench()) this.wrapWithWorkbench();
 	}
+	#previousDurationMs = 0;
+	updated(_changedProperties) {
+		if (this.#previousDurationMs !== this.durationMs) {
+			this.#previousDurationMs = this.durationMs;
+			this.runThrottledFrameTask();
+		}
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#resizeObserver?.disconnect();
@@ -228,7 +264,9 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 			const startTimeMs = temporal.startTimeMs;
 			const endTimeMs = temporal.endTimeMs;
 			const elementStartsBeforeEnd = startTimeMs <= timelineTimeMs + epsilon;
-			const elementEndsAfterStart = endTimeMs > timelineTimeMs;
+			const isRootTimegroup = temporal.tagName.toLowerCase() === "ef-timegroup" && !temporal.parentTimegroup;
+			const useInclusiveEnd = isRootTimegroup;
+			const elementEndsAfterStart = useInclusiveEnd ? endTimeMs >= timelineTimeMs : endTimeMs > timelineTimeMs;
 			return elementStartsBeforeEnd && elementEndsAfterStart;
 		});
 		const frameTasks = activeTemporals.map((temporal) => temporal.frameTask);
@@ -252,12 +290,10 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	async waitForFrameTasks() {
 		const temporalElements = deepGetElementsWithFrameTasks(this);
 		const visibleElements = temporalElements.filter((element) => {
-			const temporalState = evaluateTemporalState(element);
-			return temporalState.isVisible;
+			const animationState = evaluateTemporalStateForAnimation(element);
+			return animationState.isVisible;
 		});
-		await Promise.all(visibleElements.map((element) => {
-			return element.frameTask.run();
-		}));
+		await Promise.all(visibleElements.map((element) => element.frameTask.run()));
 	}
 	async waitForMediaDurations() {
 		if (!this.mediaDurationsPromise) this.mediaDurationsPromise = this.#waitForMediaDurations();
@@ -415,4 +451,4 @@ _decorate([property({
 	attribute: "currenttime"
 })], EFTimegroup.prototype, "currentTime", null);
 EFTimegroup = _EFTimegroup = _decorate([customElement("ef-timegroup")], EFTimegroup);
-export { EFTimegroup, shallowGetTimegroups };
+export { EFTimegroup, flushSequenceDurationCache, shallowGetTimegroups };

package/dist/elements/updateAnimations.browsertest.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+declare const TestTemporalElement_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
+declare class TestTemporalElement extends TestTemporalElement_base {
+    get intrinsicDurationMs(): number;
+    private _durationMs;
+    setDuration(duration: number): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "test-temporal-element": TestTemporalElement;
+    }
+}
+export {};

package/dist/elements/updateAnimations.d.ts

@@ -12,6 +12,11 @@ interface TemporalState {
  * Evaluates what the element's state should be based on the timeline
  */
 export declare const evaluateTemporalState: (element: AnimatableElement) => TemporalState;
+/**
+ * Evaluates element visibility specifically for animation coordination
+ * Uses inclusive end boundaries to prevent animation jumps at exact boundaries
+ */
+export declare const evaluateTemporalStateForAnimation: (element: AnimatableElement) => TemporalState;
 /**
  * Main function: synchronizes DOM element with timeline
  */