@editframe/elements 0.20.4-beta.0 → 0.21.0-beta.0

package/dist/elements/EFThumbnailStrip.js

@@ -1,16 +1,11 @@
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
 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) => {
+var thumbnailImageCache = new OrderedLRUCache(200, (a, b) => {
 	const partsA = a.split(":");
 	const partsB = b.split(":");
 	const timeA = Number.parseFloat(partsA[partsA.length - 1] || "0");
@@ -18,27 +13,16 @@ const thumbnailImageCache = new OrderedLRUCache(200, (a, b) => {
 	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
-*/
+var THUMBNAIL_GAP = 1;
+var STRIP_BORDER_PADDING = 4;
 function calculateThumbnailLayout(stripWidth, thumbnailWidth, startTimeMs, endTimeMs, scrubSegmentDurationMs) {
 	if (stripWidth <= 0 || thumbnailWidth <= 0 || endTimeMs <= startTimeMs) return {
 		count: 0,
@@ -68,7 +52,7 @@ function calculateThumbnailLayout(stripWidth, thumbnailWidth, startTimeMs, endTi
 		segments
 	};
 }
-let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
+var EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.canvasRef = createRef();
@@ -221,9 +205,6 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 	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);
@@ -236,9 +217,6 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 		}
 		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;
@@ -257,9 +235,6 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 			}
 		});
 	}
-	/**
-	* Calculate layout with a ready media engine
-	*/
 	calculateLayoutWithMediaEngine(stripWidth, thumbnailWidth, targetElement, startTimeMs, endTimeMs, useIntrinsicDuration, mediaEngine) {
 		if (useIntrinsicDuration) {
 			const effectiveStartMs$1 = startTimeMs ?? 0;
@@ -272,17 +247,10 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 		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;
+		return calculateThumbnailLayout(stripWidth, thumbnailWidth, effectiveStartMs, effectiveEndMs, scrubSegmentDurationMs);
 	}
-	/**
-	* Render thumbnails with provided layout (main rendering logic)
-	*/
 	async renderThumbnails(layout, targetElement, thumbnailWidth) {
 		if (!layout || !targetElement || layout.count === 0) return [];
 		const videoSrc = targetElement.src;
@@ -299,8 +267,7 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 				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}:`));
+				const sameVideoHits = thumbnailImageCache.findRange(rangeStartKey, rangeEndKey).filter((hit) => hit.key.startsWith(`${videoSrc}:`));
 				if (sameVideoHits.length > 0) {
 					const nearestHit = sameVideoHits.reduce((closest, current) => {
 						const currentParts = current.key.split(":");
@@ -338,8 +305,7 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 		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._stripHeight = (entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0]?.blockSize : entry.contentRect.height) ?? 0;
 				this.stripWidth = width ?? 0;
 			}
 		});
@@ -358,9 +324,6 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 		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;
@@ -414,9 +377,6 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 			ctx.setLineDash([]);
 		}
 	}
-	/**
-	* Load missing thumbnails using MediaEngine batch extraction
-	*/
 	async loadMissingThumbnails(thumbnails, targetElement) {
 		const mediaEngine = targetElement.mediaEngineTask?.value;
 		if (!mediaEngine) return;
@@ -440,9 +400,6 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 		}
 		await this.drawThumbnails(thumbnails);
 	}
-	/**
-	* Convert Canvas to ImageData for caching
-	*/
 	canvasToImageData(canvas) {
 		const ctx = canvas.getContext("2d");
 		if (!ctx) return null;
@@ -459,21 +416,21 @@ let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
     `;
 	}
 };
-_decorate([state()], EFThumbnailStrip.prototype, "targetElement", null);
-_decorate([property({ type: String })], EFThumbnailStrip.prototype, "target", void 0);
-_decorate([property({
+__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({
+__decorate([property({
 	type: Number,
 	attribute: "start-time-ms"
 })], EFThumbnailStrip.prototype, "startTimeMs", void 0);
-_decorate([property({
+__decorate([property({
 	type: Number,
 	attribute: "end-time-ms"
 })], EFThumbnailStrip.prototype, "endTimeMs", void 0);
-_decorate([property({
+__decorate([property({
 	type: Boolean,
 	attribute: "use-intrinsic-duration",
 	reflect: true,
@@ -485,6 +442,6 @@ _decorate([property({
 		toAttribute: (value) => value ? "true" : null
 	}
 })], EFThumbnailStrip.prototype, "useIntrinsicDuration", void 0);
-_decorate([state()], EFThumbnailStrip.prototype, "stripWidth", null);
-EFThumbnailStrip = _decorate([customElement("ef-thumbnail-strip")], EFThumbnailStrip);
+__decorate([state()], EFThumbnailStrip.prototype, "stripWidth", null);
+EFThumbnailStrip = __decorate([customElement("ef-thumbnail-strip")], EFThumbnailStrip);
 export { EFThumbnailStrip };

package/dist/elements/EFTimegroup.js

@@ -1,5 +1,7 @@
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
 import { isContextMixin } from "../gui/ContextMixin.js";
+import { isTracingEnabled, withSpan } from "../otel/tracingHelpers.js";
 import { durationConverter } from "./durationConverter.js";
 import { EFTemporal, deepGetElementsWithFrameTasks, flushStartTimeMsCache, resetTemporalCache, shallowGetTemporalElements, timegroupContext } from "./EFTemporal.js";
 import { deepGetMediaElements } from "./EFMedia.js";
@@ -10,10 +12,9 @@ import { Task, TaskStatus } from "@lit/task";
 import debug from "debug";
 import { LitElement, css, html } from "lit";
 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();
+var log = debug("ef:elements:EFTimegroup");
+var sequenceDurationCache = /* @__PURE__ */ new WeakMap();
 const flushSequenceDurationCache = () => {
 	sequenceDurationCache = /* @__PURE__ */ new WeakMap();
 };
@@ -22,7 +23,7 @@ const shallowGetTimegroups = (element, groups = []) => {
 	else shallowGetTimegroups(child, groups);
 	return groups;
 };
-let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
+var EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	static {
 		_EFTimegroup = this;
 	}
@@ -36,11 +37,15 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		this.frameTask = new Task(this, {
 			autoRun: false,
 			args: () => [this.ownCurrentTimeMs, this.currentTimeMs],
-			task: async ([]) => {
-				if (this.isRootTimegroup) {
+			task: async ([ownCurrentTimeMs, currentTimeMs]) => {
+				if (this.isRootTimegroup) await withSpan("timegroup.frameTask", {
+					timegroupId: this.id || "unknown",
+					ownCurrentTimeMs,
+					currentTimeMs
+				}, void 0, async () => {
 					await this.waitForFrameTasks();
 					updateAnimations(this);
-				}
+				});
 			}
 		});
 		this.seekTask = new Task(this, {
@@ -49,14 +54,21 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 			onComplete: () => {},
 			task: async ([targetTime]) => {
 				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.runThrottledFrameTask();
-				this.#saveTimeToLocalStorage(this.#currentTime);
-				this.#seekInProgress = false;
-				return newTime;
+				return withSpan("timegroup.seekTask", {
+					timegroupId: this.id || "unknown",
+					targetTime: targetTime ?? 0,
+					durationMs: this.durationMs
+				}, void 0, async (span) => {
+					await this.waitForMediaDurations();
+					const newTime = Math.max(0, Math.min(targetTime ?? 0, this.durationMs / 1e3));
+					if (isTracingEnabled()) span.setAttribute("newTime", newTime);
+					this.#currentTime = newTime;
+					this.requestUpdate("currentTime");
+					await this.runThrottledFrameTask();
+					this.#saveTimeToLocalStorage(this.#currentTime);
+					this.#seekInProgress = false;
+					return newTime;
+				});
 			}
 		});
 	}
@@ -94,9 +106,6 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	#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;
@@ -154,15 +163,9 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	get currentTimeMs() {
 		return this.currentTime * 1e3;
 	}
-	/**
-	* Determines if this is a root timegroup (no parent timegroups)
-	*/
 	get isRootTimegroup() {
 		return !this.parentTimegroup;
 	}
-	/**
-	* Saves time to localStorage (extracted for reuse)
-	*/
 	#saveTimeToLocalStorage(time) {
 		try {
 			if (this.id && this.isConnected && !Number.isNaN(time)) localStorage.setItem(this.storageKey, time.toString());
@@ -182,7 +185,7 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	maybeLoadTimeFromLocalStorage() {
 		if (this.id) try {
 			const storedValue = localStorage.getItem(this.storageKey);
-			if (storedValue === null) return void 0;
+			if (storedValue === null) return;
 			return Number.parseFloat(storedValue);
 		} catch (error) {
 			log("Failed to load time from localStorage", error);
@@ -217,17 +220,15 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	}
 	get intrinsicDurationMs() {
 		if (this.hasExplicitDuration) return this.explicitDurationMs;
-		return void 0;
 	}
 	get hasOwnDuration() {
 		return this.mode === "contain" || this.mode === "sequence" || this.mode === "fixed" && this.hasExplicitDuration;
 	}
 	get durationMs() {
 		switch (this.mode) {
-			case "fit": {
+			case "fit":
 				if (!this.parentTimegroup) return 0;
 				return this.parentTimegroup.durationMs;
-			}
 			case "fixed": return super.durationMs;
 			case "sequence": {
 				const cachedDuration = sequenceDurationCache.get(this);
@@ -258,18 +259,15 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		signal?.throwIfAborted();
 		const temporals = deepGetElementsWithFrameTasks(this);
 		const timelineTimeMs = (this.#pendingSeekTime ?? this.#currentTime ?? 0) * 1e3;
-		const activeTemporals = temporals.filter((temporal) => {
+		const frameTasks = 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 isRootTimegroup = temporal.tagName.toLowerCase() === "ef-timegroup" && !temporal.parentTimegroup;
-			const useInclusiveEnd = isRootTimegroup;
-			const elementEndsAfterStart = useInclusiveEnd ? endTimeMs >= timelineTimeMs : endTimeMs > timelineTimeMs;
+			const elementEndsAfterStart = temporal.tagName.toLowerCase() === "ef-timegroup" && !temporal.parentTimegroup ? endTimeMs >= timelineTimeMs : endTimeMs > timelineTimeMs;
 			return elementStartsBeforeEnd && elementEndsAfterStart;
-		});
-		const frameTasks = activeTemporals.map((temporal) => temporal.frameTask);
+		}).map((temporal) => temporal.frameTask);
 		frameTasks.forEach((task) => {
 			task.run();
 		});
@@ -288,31 +286,45 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		}
 	}
 	async waitForFrameTasks() {
-		const temporalElements = deepGetElementsWithFrameTasks(this);
-		const visibleElements = temporalElements.filter((element) => {
-			const animationState = evaluateTemporalStateForAnimation(element);
-			return animationState.isVisible;
+		return await withSpan("timegroup.waitForFrameTasks", {
+			timegroupId: this.id || "unknown",
+			mode: this.mode
+		}, void 0, async (span) => {
+			const innerStart = performance.now();
+			const temporalElements = deepGetElementsWithFrameTasks(this);
+			if (isTracingEnabled()) span.setAttribute("temporalElementsCount", temporalElements.length);
+			const visibleElements = temporalElements.filter((element) => {
+				return evaluateTemporalStateForAnimation(element).isVisible;
+			});
+			if (isTracingEnabled()) span.setAttribute("visibleElementsCount", visibleElements.length);
+			const promiseStart = performance.now();
+			await Promise.all(visibleElements.map((element) => element.frameTask.run()));
+			const promiseEnd = performance.now();
+			const innerEnd = performance.now();
+			if (isTracingEnabled()) {
+				span.setAttribute("actualInnerMs", innerEnd - innerStart);
+				span.setAttribute("promiseAwaitMs", promiseEnd - promiseStart);
+			}
 		});
-		await Promise.all(visibleElements.map((element) => 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.
-	* Ideally we would only need the extracted index json data, but
-	* that caused issues with constructing audio data. We had negative durations
-	* in calculations and it was not clear why.
-	*/
 	async #waitForMediaDurations() {
-		await this.updateComplete;
-		const mediaElements = deepGetMediaElements(this);
-		await Promise.all(mediaElements.map((m) => m.mediaEngineTask.value ? Promise.resolve() : m.mediaEngineTask.run()));
-		flushStartTimeMsCache();
-		flushSequenceDurationCache();
-		this.requestUpdate("currentTime");
-		await this.updateComplete;
+		return withSpan("timegroup.waitForMediaDurations", {
+			timegroupId: this.id || "unknown",
+			mode: this.mode
+		}, void 0, async (span) => {
+			await this.updateComplete;
+			const mediaElements = deepGetMediaElements(this);
+			if (isTracingEnabled()) span.setAttribute("mediaElementsCount", mediaElements.length);
+			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);
@@ -325,15 +337,6 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		}
 		return null;
 	}
-	/**
-	* Returns true if the timegroup should be wrapped with a workbench.
-	*
-	* A timegroup should be wrapped with a workbench if it is the root-most timegroup
-	* and EF_INTERACTIVE is true.
-	*
-	* If the timegroup is already wrappedin a context provider like ef-preview,
-	* it should NOT be wrapped in a workbench.
-	*/
 	shouldWrapWithWorkbench() {
 		return EF_INTERACTIVE && this.closest("ef-timegroup") === this && this.closest("ef-preview") === null && this.closest("ef-workbench") === null && this.closest("test-context") === null;
 	}
@@ -358,8 +361,7 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 			if (mediaElement.mute) return;
 			const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
 			const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
-			const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
-			if (!mediaOverlaps) return;
+			if (!(mediaStartsBeforeEnd && mediaEndsAfterStart)) return;
 			const mediaLocalFromMs = Math.max(0, fromMs - mediaElement.startTimeMs);
 			const mediaLocalToMs = Math.min(mediaElement.endTimeMs - mediaElement.startTimeMs, toMs - mediaElement.startTimeMs);
 			if (mediaLocalFromMs >= mediaLocalToMs) return;
@@ -390,27 +392,30 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		}));
 	}
 	async renderAudio(fromMs, toMs) {
-		const durationMs = toMs - fromMs;
-		const duration = durationMs / 1e3;
-		const exactSamples = 48e3 * duration;
-		const aacFrames = exactSamples / 1024;
-		const alignedFrames = Math.round(aacFrames);
-		const contextSize = alignedFrames * 1024;
-		if (contextSize <= 0) throw new Error(`Duration must be greater than 0 when rendering audio. ${contextSize}ms`);
-		let audioContext;
-		try {
-			audioContext = new OfflineAudioContext(2, contextSize, 48e3);
-		} catch (error) {
-			throw new Error(`[EFTimegroup.renderAudio] Failed to create OfflineAudioContext(2, ${contextSize}, 48000) for renderAudio(${fromMs}, ${toMs}) with contextSize=${contextSize}: ${error instanceof Error ? error.message : String(error)}. This typically happens when audio parameters are invalid (e.g., contextSize <= 0).`);
-		}
-		await this.#addAudioToContext(audioContext, fromMs, toMs);
-		const renderedBuffer = await audioContext.startRendering();
-		return renderedBuffer;
-	}
-	/**
-	* TEMPORARY TEST METHOD: Renders audio and immediately plays it back
-	* Usage: timegroup.testPlayAudio(0, 5000) // Play first 5 seconds
-	*/
+		return withSpan("timegroup.renderAudio", {
+			timegroupId: this.id || "unknown",
+			fromMs,
+			toMs,
+			durationMs: toMs - fromMs
+		}, void 0, async (span) => {
+			const aacFrames = 48e3 * ((toMs - fromMs) / 1e3) / 1024;
+			const alignedFrames = Math.round(aacFrames);
+			const contextSize = alignedFrames * 1024;
+			if (isTracingEnabled()) {
+				span.setAttribute("contextSize", contextSize);
+				span.setAttribute("alignedFrames", alignedFrames);
+			}
+			if (contextSize <= 0) throw new Error(`Duration must be greater than 0 when rendering audio. ${contextSize}ms`);
+			let audioContext;
+			try {
+				audioContext = new OfflineAudioContext(2, contextSize, 48e3);
+			} catch (error) {
+				throw new Error(`[EFTimegroup.renderAudio] Failed to create OfflineAudioContext(2, ${contextSize}, 48000) for renderAudio(${fromMs}, ${toMs}) with contextSize=${contextSize}: ${error instanceof Error ? error.message : String(error)}. This typically happens when audio parameters are invalid (e.g., contextSize <= 0).`);
+			}
+			await this.#addAudioToContext(audioContext, fromMs, toMs);
+			return await audioContext.startRendering();
+		});
+	}
 	async testPlayAudio(fromMs, toMs) {
 		const renderedBuffer = await this.renderAudio(fromMs, toMs);
 		const playbackContext = new AudioContext();
@@ -441,20 +446,20 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		});
 	}
 };
-_decorate([provide({ context: timegroupContext })], EFTimegroup.prototype, "_timeGroupContext", void 0);
-_decorate([property({
+__decorate([provide({ context: timegroupContext })], EFTimegroup.prototype, "_timeGroupContext", void 0);
+__decorate([property({
 	type: String,
 	attribute: "mode"
 })], EFTimegroup.prototype, "mode", null);
-_decorate([property({
+__decorate([property({
 	type: Number,
 	converter: durationConverter,
 	attribute: "overlap"
 })], EFTimegroup.prototype, "overlapMs", null);
-_decorate([property({ type: String })], EFTimegroup.prototype, "fit", void 0);
-_decorate([property({
+__decorate([property({ type: String })], EFTimegroup.prototype, "fit", void 0);
+__decorate([property({
 	type: Number,
 	attribute: "currenttime"
 })], EFTimegroup.prototype, "currentTime", null);
-EFTimegroup = _EFTimegroup = _decorate([customElement("ef-timegroup")], EFTimegroup);
+EFTimegroup = _EFTimegroup = __decorate([customElement("ef-timegroup")], EFTimegroup);
 export { EFTimegroup, flushSequenceDurationCache, shallowGetTimegroups };

package/dist/elements/EFVideo.d.ts

@@ -67,7 +67,11 @@ export declare class EFVideo extends EFVideo_base {
      * Set loading state for user feedback
      */
     private setLoadingState;
-    paintTask: Task<readonly [number], void>;
+    /**
+     * Paint the current video frame to canvas
+     * Called by frameTask after seek is complete
+     */
+    paint(seekToMs: number, parentSpan?: any): void;
     /**
      * Clear the canvas when element becomes inactive
      */
@@ -75,7 +79,7 @@ export declare class EFVideo extends EFVideo_base {
     /**
      * Display a video frame on the canvas
      */
-    displayFrame(frame: VideoFrame, seekToMs: number): number;
+    displayFrame(frame: VideoFrame, seekToMs: number, parentSpan?: any): void;
     /**
      * Check if we're in production rendering mode (EF_FRAMEGEN active) vs preview mode
      */