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

package/dist/elements/EFMedia/videoTasks/makeScrubVideoSeekTask.js

@@ -1,6 +1,6 @@
 import { ScrubInputCache } from "./ScrubInputCache.js";
 import { Task } from "@lit/task";
-const scrubInputCache = new ScrubInputCache();
+var scrubInputCache = new ScrubInputCache();
 const makeScrubVideoSeekTask = (host) => {
 	return new Task(host, {
 		args: () => [host.desiredSeekTimeMs],
@@ -11,22 +11,21 @@ const makeScrubVideoSeekTask = (host) => {
 		task: async ([desiredSeekTimeMs], { signal }) => {
 			signal.throwIfAborted();
 			const mediaEngine = host.mediaEngineTask.value;
-			if (!mediaEngine) return void 0;
+			if (!mediaEngine) return;
 			const scrubRendition = mediaEngine.getScrubVideoRendition();
-			if (!scrubRendition) return void 0;
+			if (!scrubRendition) return;
 			const scrubRenditionWithSrc = {
 				...scrubRendition,
 				src: mediaEngine.src
 			};
 			const segmentId = mediaEngine.computeSegmentId(desiredSeekTimeMs, scrubRenditionWithSrc);
-			if (segmentId === void 0) return void 0;
-			const isCached = mediaEngine.isSegmentCached(segmentId, scrubRenditionWithSrc);
-			if (!isCached) return void 0;
+			if (segmentId === void 0) return;
+			if (!mediaEngine.isSegmentCached(segmentId, scrubRenditionWithSrc)) return;
 			signal.throwIfAborted();
 			try {
 				const scrubInput = await scrubInputCache.getOrCreateInput(segmentId, async () => {
 					const [initSegment, mediaSegment] = await Promise.all([mediaEngine.fetchInitSegment(scrubRenditionWithSrc, signal), mediaEngine.fetchMediaSegment(segmentId, scrubRenditionWithSrc)]);
-					if (!initSegment || !mediaSegment || signal.aborted) return void 0;
+					if (!initSegment || !mediaSegment || signal.aborted) return;
 					const { BufferedSeekingInput } = await import("../BufferedSeekingInput.js");
 					const { EFMedia } = await import("../../EFMedia.js");
 					return new BufferedSeekingInput(await new Blob([initSegment, mediaSegment]).arrayBuffer(), {
@@ -35,16 +34,16 @@ const makeScrubVideoSeekTask = (host) => {
 						startTimeOffsetMs: scrubRendition.startTimeOffsetMs
 					});
 				});
-				if (!scrubInput) return void 0;
+				if (!scrubInput) return;
+				if (signal.aborted) return;
 				const videoTrack = await scrubInput.getFirstVideoTrack();
-				if (!videoTrack) return void 0;
-				signal.throwIfAborted();
-				const sample = await scrubInput.seek(videoTrack.id, desiredSeekTimeMs);
-				return sample;
+				if (!videoTrack) return;
+				if (signal.aborted) return;
+				return await scrubInput.seek(videoTrack.id, desiredSeekTimeMs);
 			} catch (error) {
 				if (signal.aborted) return void 0;
 				console.warn("Failed to get scrub video sample:", error);
-				return void 0;
+				return;
 			}
 		}
 	});

package/dist/elements/EFMedia/videoTasks/makeScrubVideoSegmentIdTask.js

@@ -11,7 +11,7 @@ const makeScrubVideoSegmentIdTask = (host) => {
 			const mediaEngine = await getLatestMediaEngine(host, signal);
 			signal.throwIfAborted();
 			const scrubRendition = mediaEngine.getScrubVideoRendition();
-			if (!scrubRendition) return void 0;
+			if (!scrubRendition) return;
 			return mediaEngine.computeSegmentId(targetSeekTimeMs, {
 				...scrubRendition,
 				src: mediaEngine.src

package/dist/elements/EFMedia/videoTasks/makeUnifiedVideoSeekTask.js

@@ -1,7 +1,12 @@
+import { withSpan } from "../../../otel/tracingHelpers.js";
 import { getLatestMediaEngine } from "../tasks/makeMediaEngineTask.js";
+import { BufferedSeekingInput } from "../BufferedSeekingInput.js";
+import { EFMedia } from "../../EFMedia.js";
 import { ScrubInputCache } from "./ScrubInputCache.js";
+import { MainVideoInputCache } from "./MainVideoInputCache.js";
 import { Task } from "@lit/task";
-const scrubInputCache = new ScrubInputCache();
+var scrubInputCache = new ScrubInputCache();
+var mainVideoInputCache = new MainVideoInputCache();
 const makeUnifiedVideoSeekTask = (host) => {
 	return new Task(host, {
 		autoRun: false,
@@ -12,92 +17,151 @@ const makeUnifiedVideoSeekTask = (host) => {
 		onComplete: (_value) => {},
 		task: async ([desiredSeekTimeMs], { signal }) => {
 			const mediaEngine = await getLatestMediaEngine(host, signal);
-			if (!mediaEngine) return void 0;
+			if (!mediaEngine || signal.aborted) return void 0;
 			const mainRendition = mediaEngine.videoRendition;
 			if (mainRendition) {
 				const mainSegmentId = mediaEngine.computeSegmentId(desiredSeekTimeMs, mainRendition);
-				if (mainSegmentId !== void 0 && mediaEngine.isSegmentCached(mainSegmentId, mainRendition)) return await getMainVideoSample(host, mediaEngine, desiredSeekTimeMs, signal);
+				if (mainSegmentId !== void 0 && mediaEngine.isSegmentCached(mainSegmentId, mainRendition)) {
+					const result$1 = await getMainVideoSample(host, mediaEngine, desiredSeekTimeMs, signal);
+					if (signal.aborted) return;
+					return result$1;
+				}
 			}
 			const scrubSample = await tryGetScrubSample(mediaEngine, desiredSeekTimeMs, signal);
 			if (scrubSample || signal.aborted) {
+				if (signal.aborted) return;
 				if (scrubSample) startMainQualityUpgrade(host, mediaEngine, desiredSeekTimeMs, signal).catch(() => {});
 				return scrubSample;
 			}
-			return await getMainVideoSample(host, mediaEngine, desiredSeekTimeMs, signal);
+			const result = await getMainVideoSample(host, mediaEngine, desiredSeekTimeMs, signal);
+			if (signal.aborted) return;
+			return result;
 		}
 	});
 };
-/**
-* Try to get scrub sample from cache (instant if available)
-*/
 async function tryGetScrubSample(mediaEngine, desiredSeekTimeMs, signal) {
-	try {
-		let scrubRendition;
-		if (typeof mediaEngine.getScrubVideoRendition === "function") scrubRendition = mediaEngine.getScrubVideoRendition();
-		else if ("data" in mediaEngine && mediaEngine.data?.videoRenditions) scrubRendition = mediaEngine.data.videoRenditions.find((r) => r.id === "scrub");
-		if (!scrubRendition) return void 0;
-		const scrubRenditionWithSrc = {
-			...scrubRendition,
-			src: mediaEngine.src
-		};
-		const segmentId = mediaEngine.computeSegmentId(desiredSeekTimeMs, scrubRenditionWithSrc);
-		if (segmentId === void 0) return void 0;
-		const isCached = mediaEngine.isSegmentCached(segmentId, scrubRenditionWithSrc);
-		if (!isCached) return void 0;
-		const scrubInput = await scrubInputCache.getOrCreateInput(segmentId, async () => {
-			const [initSegment, mediaSegment] = await Promise.all([mediaEngine.fetchInitSegment(scrubRenditionWithSrc, signal), mediaEngine.fetchMediaSegment(segmentId, scrubRenditionWithSrc)]);
-			if (!initSegment || !mediaSegment || signal.aborted) return void 0;
-			const { BufferedSeekingInput } = await import("../BufferedSeekingInput.js");
-			const { EFMedia } = await import("../../EFMedia.js");
-			return new BufferedSeekingInput(await new Blob([initSegment, mediaSegment]).arrayBuffer(), {
-				videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
-				audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
-				startTimeOffsetMs: scrubRendition.startTimeOffsetMs
+	return withSpan("video.tryGetScrubSample", {
+		desiredSeekTimeMs,
+		src: mediaEngine.src || "unknown"
+	}, void 0, async (span) => {
+		try {
+			let scrubRendition;
+			if (typeof mediaEngine.getScrubVideoRendition === "function") scrubRendition = mediaEngine.getScrubVideoRendition();
+			else if ("data" in mediaEngine && mediaEngine.data?.videoRenditions) scrubRendition = mediaEngine.data.videoRenditions.find((r) => r.id === "scrub");
+			if (!scrubRendition) {
+				span.setAttribute("result", "no-scrub-rendition");
+				return;
+			}
+			const scrubRenditionWithSrc = {
+				...scrubRendition,
+				src: mediaEngine.src
+			};
+			const segmentId = mediaEngine.computeSegmentId(desiredSeekTimeMs, scrubRenditionWithSrc);
+			if (segmentId === void 0) {
+				span.setAttribute("result", "no-segment-id");
+				return;
+			}
+			const isCached = mediaEngine.isSegmentCached(segmentId, scrubRenditionWithSrc);
+			span.setAttribute("isCached", isCached);
+			if (!isCached) {
+				span.setAttribute("result", "not-cached");
+				return;
+			}
+			const scrubInput = await scrubInputCache.getOrCreateInput(segmentId, async () => {
+				const [initSegment, mediaSegment] = await Promise.all([mediaEngine.fetchInitSegment(scrubRenditionWithSrc, signal), mediaEngine.fetchMediaSegment(segmentId, scrubRenditionWithSrc)]);
+				if (!initSegment || !mediaSegment || signal.aborted) return void 0;
+				const { BufferedSeekingInput: BufferedSeekingInput$1 } = await import("../BufferedSeekingInput.js");
+				const { EFMedia: EFMedia$1 } = await import("../../EFMedia.js");
+				return new BufferedSeekingInput$1(await new Blob([initSegment, mediaSegment]).arrayBuffer(), {
+					videoBufferSize: EFMedia$1.VIDEO_SAMPLE_BUFFER_SIZE,
+					audioBufferSize: EFMedia$1.AUDIO_SAMPLE_BUFFER_SIZE,
+					startTimeOffsetMs: scrubRendition.startTimeOffsetMs
+				});
 			});
-		});
-		if (!scrubInput) return void 0;
-		const videoTrack = await scrubInput.getFirstVideoTrack();
-		if (!videoTrack) return void 0;
-		const sample = await scrubInput.seek(videoTrack.id, desiredSeekTimeMs);
-		return sample;
-	} catch (_error) {
-		if (signal.aborted) return void 0;
-		return void 0;
-	}
+			if (!scrubInput) {
+				span.setAttribute("result", "no-scrub-input");
+				return;
+			}
+			if (signal.aborted) {
+				span.setAttribute("result", "aborted-after-scrub-input");
+				return;
+			}
+			const videoTrack = await scrubInput.getFirstVideoTrack();
+			if (!videoTrack) {
+				span.setAttribute("result", "no-video-track");
+				return;
+			}
+			if (signal.aborted) {
+				span.setAttribute("result", "aborted-after-scrub-track");
+				return;
+			}
+			const sample = await scrubInput.seek(videoTrack.id, desiredSeekTimeMs);
+			span.setAttribute("result", sample ? "success" : "no-sample");
+			return sample;
+		} catch (_error) {
+			if (signal.aborted) {
+				span.setAttribute("result", "aborted");
+				return;
+			}
+			span.setAttribute("result", "error");
+			return;
+		}
+	});
 }
-/**
-* Get main video sample (slower path with fetching)
-*/
 async function getMainVideoSample(_host, mediaEngine, desiredSeekTimeMs, signal) {
-	try {
-		const videoRendition = mediaEngine.getVideoRendition();
-		if (!videoRendition) throw new Error("Video rendition unavailable after checking videoRendition exists");
-		const segmentId = mediaEngine.computeSegmentId(desiredSeekTimeMs, videoRendition);
-		if (segmentId === void 0) return void 0;
-		const [initSegment, mediaSegment] = await Promise.all([mediaEngine.fetchInitSegment(videoRendition, signal), mediaEngine.fetchMediaSegment(segmentId, videoRendition, signal)]);
-		if (!initSegment || !mediaSegment) return void 0;
-		signal.throwIfAborted();
-		const { BufferedSeekingInput } = await import("../BufferedSeekingInput.js");
-		const { EFMedia } = await import("../../EFMedia.js");
-		const startTimeOffsetMs = videoRendition?.startTimeOffsetMs;
-		const mainInput = new BufferedSeekingInput(await new Blob([initSegment, mediaSegment]).arrayBuffer(), {
-			videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
-			audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
-			startTimeOffsetMs
-		});
-		const videoTrack = await mainInput.getFirstVideoTrack();
-		if (!videoTrack) return void 0;
-		signal.throwIfAborted();
-		const sample = await mainInput.seek(videoTrack.id, desiredSeekTimeMs);
-		return sample;
-	} catch (error) {
-		if (signal.aborted) return void 0;
-		throw error;
-	}
+	return withSpan("video.getMainVideoSample", {
+		desiredSeekTimeMs,
+		src: mediaEngine.src || "unknown"
+	}, void 0, async (span) => {
+		try {
+			const videoRendition = mediaEngine.getVideoRendition();
+			if (!videoRendition) throw new Error("Video rendition unavailable after checking videoRendition exists");
+			const segmentId = mediaEngine.computeSegmentId(desiredSeekTimeMs, videoRendition);
+			if (segmentId === void 0) {
+				span.setAttribute("result", "no-segment-id");
+				return;
+			}
+			span.setAttribute("segmentId", segmentId);
+			const mainInput = await mainVideoInputCache.getOrCreateInput(mediaEngine.src, segmentId, videoRendition.id, async () => {
+				const [initSegment, mediaSegment] = await Promise.all([mediaEngine.fetchInitSegment(videoRendition, signal), mediaEngine.fetchMediaSegment(segmentId, videoRendition, signal)]);
+				if (!initSegment || !mediaSegment) return;
+				signal.throwIfAborted();
+				const startTimeOffsetMs = videoRendition?.startTimeOffsetMs;
+				return new BufferedSeekingInput(await new Blob([initSegment, mediaSegment]).arrayBuffer(), {
+					videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
+					audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
+					startTimeOffsetMs
+				});
+			});
+			if (!mainInput) {
+				span.setAttribute("result", "no-segments");
+				return;
+			}
+			if (signal.aborted) {
+				span.setAttribute("result", "aborted-after-input");
+				return;
+			}
+			const videoTrack = await mainInput.getFirstVideoTrack();
+			if (!videoTrack) {
+				span.setAttribute("result", "no-video-track");
+				return;
+			}
+			if (signal.aborted) {
+				span.setAttribute("result", "aborted-after-track");
+				return;
+			}
+			const sample = await mainInput.seek(videoTrack.id, desiredSeekTimeMs);
+			span.setAttribute("result", sample ? "success" : "no-sample");
+			return sample;
+		} catch (error) {
+			if (signal.aborted) {
+				span.setAttribute("result", "aborted");
+				return;
+			}
+			throw error;
+		}
+	});
 }
-/**
-* Start background upgrade to main quality (non-blocking)
-*/
 async function startMainQualityUpgrade(host, mediaEngine, targetSeekTimeMs, signal) {
 	await new Promise((resolve) => setTimeout(resolve, 50));
 	if (signal.aborted || host.desiredSeekTimeMs !== targetSeekTimeMs) return;

package/dist/elements/EFMedia/videoTasks/makeVideoBufferTask.js

@@ -21,32 +21,25 @@ const makeVideoBufferTask = (host) => {
 		},
 		task: async ([seekTimeMs], { signal }) => {
 			if (EF_RENDERING()) return currentState;
-			const mediaEngine = await getLatestMediaEngine(host, signal);
-			const engineConfig = mediaEngine.getBufferConfig();
-			const bufferDurationMs = engineConfig.videoBufferDurationMs;
-			const maxParallelFetches = engineConfig.maxVideoBufferFetches;
-			const currentConfig = {
-				bufferDurationMs,
-				maxParallelFetches,
+			const engineConfig = (await getLatestMediaEngine(host, signal)).getBufferConfig();
+			return manageMediaBuffer(seekTimeMs, {
+				bufferDurationMs: engineConfig.videoBufferDurationMs,
+				maxParallelFetches: engineConfig.maxVideoBufferFetches,
 				enableBuffering: host.enableVideoBuffering
-			};
-			return manageMediaBuffer(seekTimeMs, currentConfig, currentState, host.intrinsicDurationMs || 1e4, signal, {
+			}, currentState, host.intrinsicDurationMs || 1e4, signal, {
 				computeSegmentId: async (timeMs, rendition) => {
-					const mediaEngine$1 = await getLatestMediaEngine(host, signal);
-					return mediaEngine$1.computeSegmentId(timeMs, rendition);
+					return (await getLatestMediaEngine(host, signal)).computeSegmentId(timeMs, rendition);
 				},
 				prefetchSegment: async (segmentId, rendition) => {
-					const mediaEngine$1 = await getLatestMediaEngine(host, signal);
-					await mediaEngine$1.fetchMediaSegment(segmentId, rendition);
+					await (await getLatestMediaEngine(host, signal)).fetchMediaSegment(segmentId, rendition);
 				},
 				isSegmentCached: (segmentId, rendition) => {
-					const mediaEngine$1 = host.mediaEngineTask.value;
-					if (!mediaEngine$1) return false;
-					return mediaEngine$1.isSegmentCached(segmentId, rendition);
+					const mediaEngine = host.mediaEngineTask.value;
+					if (!mediaEngine) return false;
+					return mediaEngine.isSegmentCached(segmentId, rendition);
 				},
 				getRendition: async () => {
-					const mediaEngine$1 = await getLatestMediaEngine(host, signal);
-					return mediaEngine$1.getVideoRendition();
+					return (await getLatestMediaEngine(host, signal)).getVideoRendition();
 				},
 				logError: console.error
 			});

package/dist/elements/EFMedia.d.ts

@@ -1,4 +1,5 @@
 import { LitElement, PropertyValueMap } from 'lit';
+import { ControllableInterface } from '../gui/Controllable.js';
 import { AudioSpan } from '../transcoding/types/index.ts';
 import { UrlGenerator } from '../transcoding/utils/UrlGenerator.ts';
 declare global {
@@ -9,6 +10,7 @@ export declare class IgnorableError extends Error {
 export declare const deepGetMediaElements: (element: Element, medias?: EFMedia[]) => EFMedia[];
 declare const EFMedia_base: (new (...args: any[]) => import('./EFSourceMixin.js').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin.js').FetchMixinInterface) & typeof LitElement;
 export declare class EFMedia extends EFMedia_base {
+    get efContext(): ControllableInterface | null;
     static readonly VIDEO_SAMPLE_BUFFER_SIZE = 30;
     static readonly AUDIO_SAMPLE_BUFFER_SIZE = 120;
     static get observedAttributes(): string[];
@@ -84,5 +86,22 @@ export declare class EFMedia extends EFMedia_base {
      * Returns undefined if no audio rendition is available
      */
     fetchAudioSpanningTime(fromMs: number, toMs: number, signal?: AbortSignal): Promise<AudioSpan | undefined>;
+    /**
+     * Wait for media engine to load and determine duration
+     * Ensures media is ready for playback
+     */
+    waitForMediaDurations(): Promise<void>;
+    /**
+     * Returns media elements for playback audio rendering
+     * For standalone media, returns [this]; for timegroups, returns all descendants
+     * Used by PlaybackController for audio-driven playback
+     */
+    getMediaElements(): EFMedia[];
+    /**
+     * Render audio buffer for playback
+     * Called by PlaybackController during live playback
+     * Delegates to shared renderTemporalAudio utility for consistent behavior
+     */
+    renderAudio(fromMs: number, toMs: number): Promise<AudioBuffer>;
 }
 export {};

package/dist/elements/EFMedia.js

@@ -1,4 +1,8 @@
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { EFTemporal } from "./EFTemporal.js";
+import { efContext } from "../gui/efContext.js";
 import { isContextMixin } from "../gui/ContextMixin.js";
+import { withSpan } from "../otel/tracingHelpers.js";
 import { UrlGenerator } from "../transcoding/utils/UrlGenerator.js";
 import { makeMediaEngineTask } from "./EFMedia/tasks/makeMediaEngineTask.js";
 import { makeAudioBufferTask } from "./EFMedia/audioTasks/makeAudioBufferTask.js";
@@ -11,13 +15,13 @@ import { makeAudioSegmentIdTask } from "./EFMedia/audioTasks/makeAudioSegmentIdT
 import { makeAudioTimeDomainAnalysisTask } from "./EFMedia/audioTasks/makeAudioTimeDomainAnalysisTask.js";
 import { fetchAudioSpanningTime } from "./EFMedia/shared/AudioSpanUtils.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
-import { EFTemporal } from "./EFTemporal.js";
 import { FetchMixin } from "./FetchMixin.js";
+import { renderTemporalAudio } from "./renderTemporalAudio.js";
 import { EFTargetable } from "./TargetController.js";
+import { provide } from "@lit/context";
 import { LitElement, css } from "lit";
 import { property, state } from "lit/decorators.js";
-import _decorate from "@oxc-project/runtime/helpers/decorate";
-const freqWeightsCache = /* @__PURE__ */ new Map();
+var freqWeightsCache = /* @__PURE__ */ new Map();
 var IgnorableError = class extends Error {};
 const deepGetMediaElements = (element, medias = []) => {
 	for (const child of Array.from(element.children)) if (child instanceof EFMedia) medias.push(child);
@@ -47,6 +51,9 @@ var EFMedia = class extends EFTargetable(EFSourceMixin(EFTemporal(FetchMixin(Lit
 		this.assetId = null;
 		this._desiredSeekTimeMs = 0;
 	}
+	get efContext() {
+		return this.rootTimegroup ?? this;
+	}
 	static {
 		this.VIDEO_SAMPLE_BUFFER_SIZE = 30;
 	}
@@ -54,9 +61,8 @@ var EFMedia = class extends EFTargetable(EFSourceMixin(EFTemporal(FetchMixin(Lit
 		this.AUDIO_SAMPLE_BUFFER_SIZE = 120;
 	}
 	static get observedAttributes() {
-		const parentAttributes = super.observedAttributes || [];
 		return [
-			...parentAttributes,
+			...super.observedAttributes || [],
 			"mute",
 			"fft-size",
 			"fft-decay",
@@ -108,14 +114,12 @@ var EFMedia = class extends EFTargetable(EFSourceMixin(EFTemporal(FetchMixin(Lit
 		const newCurrentSourceTimeMs = this.currentSourceTimeMs;
 		if (newCurrentSourceTimeMs !== this.desiredSeekTimeMs) this.executeSeek(newCurrentSourceTimeMs);
 		if (changedProperties.has("ownCurrentTimeMs")) this.executeSeek(this.currentSourceTimeMs);
-		const durationAffectingProps = [
+		if ([
 			"_trimStartMs",
 			"_trimEndMs",
 			"_sourceInMs",
 			"_sourceOutMs"
-		];
-		const hasDurationChange = durationAffectingProps.some((prop) => changedProperties.has(prop));
-		if (hasDurationChange) {
+		].some((prop) => changedProperties.has(prop))) {
 			if (this.parentTimegroup) {
 				this.parentTimegroup.requestUpdate("durationMs");
 				this.parentTimegroup.requestUpdate("currentTime");
@@ -142,56 +146,71 @@ var EFMedia = class extends EFTargetable(EFSourceMixin(EFTemporal(FetchMixin(Lit
 	async executeSeek(seekToMs) {
 		this.desiredSeekTimeMs = seekToMs;
 	}
-	/**
-	* Main integration method for EFTimegroup audio playback
-	* Now powered by clean, testable utility functions
-	* Returns undefined if no audio rendition is available
-	*/
 	async fetchAudioSpanningTime(fromMs, toMs, signal = new AbortController().signal) {
-		return fetchAudioSpanningTime(this, fromMs, toMs, signal);
+		return withSpan("media.fetchAudioSpanningTime", {
+			elementId: this.id || "unknown",
+			tagName: this.tagName.toLowerCase(),
+			fromMs,
+			toMs,
+			durationMs: toMs - fromMs,
+			src: this.src || "none"
+		}, void 0, async () => {
+			return fetchAudioSpanningTime(this, fromMs, toMs, signal);
+		});
+	}
+	async waitForMediaDurations() {
+		if (this.mediaEngineTask.value) return;
+		await this.mediaEngineTask.run();
+	}
+	getMediaElements() {
+		return [this];
+	}
+	async renderAudio(fromMs, toMs) {
+		return renderTemporalAudio(this, fromMs, toMs);
 	}
 };
-_decorate([property({
+__decorate([provide({ context: efContext })], EFMedia.prototype, "efContext", null);
+__decorate([property({
 	type: Number,
 	attribute: "audio-buffer-duration"
 })], EFMedia.prototype, "audioBufferDurationMs", void 0);
-_decorate([property({
+__decorate([property({
 	type: Number,
 	attribute: "max-audio-buffer-fetches"
 })], EFMedia.prototype, "maxAudioBufferFetches", void 0);
-_decorate([property({
+__decorate([property({
 	type: Boolean,
 	attribute: "enable-audio-buffering"
 })], EFMedia.prototype, "enableAudioBuffering", void 0);
-_decorate([property({
+__decorate([property({
 	type: Boolean,
 	attribute: "mute",
 	reflect: true
 })], EFMedia.prototype, "mute", void 0);
-_decorate([property({
+__decorate([property({
 	type: Number,
 	attribute: "fft-size",
 	reflect: true
 })], EFMedia.prototype, "fftSize", void 0);
-_decorate([property({
+__decorate([property({
 	type: Number,
 	attribute: "fft-decay",
 	reflect: true
 })], EFMedia.prototype, "fftDecay", void 0);
-_decorate([property({
+__decorate([property({
 	type: Number,
 	attribute: "fft-gain",
 	reflect: true
 })], EFMedia.prototype, "fftGain", void 0);
-_decorate([property({
+__decorate([property({
 	type: Boolean,
 	attribute: "interpolate-frequencies",
 	reflect: true
 })], EFMedia.prototype, "interpolateFrequencies", void 0);
-_decorate([property({
+__decorate([property({
 	type: String,
 	attribute: "asset-id",
 	reflect: true
 })], EFMedia.prototype, "assetId", void 0);
-_decorate([state()], EFMedia.prototype, "_desiredSeekTimeMs", void 0);
+__decorate([state()], EFMedia.prototype, "_desiredSeekTimeMs", void 0);
 export { EFMedia, IgnorableError, deepGetMediaElements };

package/dist/elements/EFSourceMixin.js

@@ -1,5 +1,5 @@
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { Task } from "@lit/task";
-import _decorate from "@oxc-project/runtime/helpers/decorate";
 import { property } from "lit/decorators/property.js";
 function EFSourceMixin(superClass, options) {
 	class EFSourceElement extends superClass {
@@ -11,17 +11,15 @@ function EFSourceMixin(superClass, options) {
 				args: () => [this.src],
 				task: async ([src], { signal }) => {
 					const md5Path = `/@ef-asset/${src}`;
-					const response = await fetch(md5Path, {
+					return (await fetch(md5Path, {
 						method: "HEAD",
 						signal
-					});
-					return response.headers.get("etag") ?? void 0;
+					})).headers.get("etag") ?? void 0;
 				}
 			});
 		}
 		get apiHost() {
-			const apiHost = this.closest("ef-configuration")?.apiHost ?? this.closest("ef-workbench")?.apiHost ?? this.closest("ef-preview")?.apiHost;
-			return apiHost || "https://editframe.dev";
+			return (this.closest("ef-configuration")?.apiHost ?? this.closest("ef-workbench")?.apiHost ?? this.closest("ef-preview")?.apiHost) || "https://editframe.dev";
 		}
 		productionSrc() {
 			if (!this.md5SumLoader.value) throw new Error(`MD5 sum not available for ${this}. Cannot generate production URL`);
@@ -29,7 +27,7 @@ function EFSourceMixin(superClass, options) {
 			return `${this.apiHost}/api/v1/${options.assetType}/${this.md5SumLoader.value}`;
 		}
 	}
-	_decorate([property({ type: String })], EFSourceElement.prototype, "src", void 0);
+	__decorate([property({ type: String })], EFSourceElement.prototype, "src", void 0);
 	return EFSourceElement;
 }
 export { EFSourceMixin };

package/dist/elements/EFSurface.js

@@ -1,10 +1,10 @@
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.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";
-let EFSurface = class EFSurface$1 extends LitElement {
+var EFSurface = class EFSurface$1 extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.canvasRef = createRef();
@@ -70,10 +70,7 @@ let EFSurface = class EFSurface$1 extends LitElement {
 		const anyEl = from;
 		if ("canvasElement" in anyEl) return anyEl.canvasElement ?? null;
 		const sr = from.shadowRoot;
-		if (sr) {
-			const c = sr.querySelector("canvas");
-			return c ?? null;
-		}
+		if (sr) return sr.querySelector("canvas") ?? null;
 		return null;
 	}
 	copyFromTarget(target) {
@@ -90,7 +87,7 @@ let EFSurface = class EFSurface$1 extends LitElement {
 		ctx.drawImage(src, 0, 0, dst.width, dst.height);
 	}
 };
-_decorate([state()], EFSurface.prototype, "targetElement", void 0);
-_decorate([property({ type: String })], EFSurface.prototype, "target", void 0);
-EFSurface = _decorate([customElement("ef-surface")], EFSurface);
+__decorate([state()], EFSurface.prototype, "targetElement", void 0);
+__decorate([property({ type: String })], EFSurface.prototype, "target", void 0);
+EFSurface = __decorate([customElement("ef-surface")], EFSurface);
 export { EFSurface };

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

@@ -8,4 +8,15 @@ declare global {
         "ten-seconds": TenSeconds;
     }
 }
+declare const TestLifecycleChild_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
+declare class TestLifecycleChild extends TestLifecycleChild_base {
+    role: "root" | "child" | null;
+    didBecomeRoot(): void;
+    didBecomeChild(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "test-root-lifecycle": TestLifecycleChild;
+    }
+}
 export {};