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

package/dist/elements/EFTemporal.d.ts

@@ -1,10 +1,16 @@
 import { Task } from '@lit/task';
 import { LitElement, ReactiveController } from 'lit';
+import { PlaybackController } from '../gui/PlaybackController.js';
 import { EFTimegroup } from './EFTimegroup.js';
 export declare const timegroupContext: {
     __context__: EFTimegroup;
 };
 export declare class TemporalMixinInterface {
+    playbackController?: PlaybackController;
+    playing: boolean;
+    loop: boolean;
+    play(): void;
+    pause(): void;
     get hasOwnDuration(): boolean;
     /**
      * Whether the element has a duration set as an attribute.
@@ -137,6 +143,7 @@ export declare class TemporalMixinInterface {
      * For other temporal elements: their ownCurrentTimeMs
      */
     get currentTimeMs(): number;
+    set currentTimeMs(value: number);
     /**
      * The current time of the element in milliseconds, adjusted for trimming.
      *
@@ -185,6 +192,9 @@ export declare class TemporalMixinInterface {
      */
     rootTimegroup?: EFTimegroup;
     frameTask: Task<readonly unknown[], unknown>;
+    didBecomeRoot(): void;
+    didBecomeChild(): void;
+    updateComplete: Promise<boolean>;
 }
 export declare const isEFTemporal: (obj: any) => obj is TemporalMixinInterface;
 export declare const deepGetTemporalElements: (element: Element, temporals?: Array<TemporalMixinInterface & HTMLElement>) => (TemporalMixinInterface & HTMLElement)[];

package/dist/elements/EFTemporal.js

@@ -1,6 +1,7 @@
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
+import { PlaybackController } from "../gui/PlaybackController.js";
 import { durationConverter } from "./durationConverter.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { consume, createContext } from "@lit/context";
 import { Task } from "@lit/task";
 import { property, state } from "lit/decorators.js";
@@ -79,18 +80,63 @@ const EFTemporal = (superClass) => {
 		}
 		#parentTimegroup;
 		set parentTimegroup(value) {
+			const oldParent = this.#parentTimegroup;
 			this.#parentTimegroup = value;
 			this.ownCurrentTimeController?.remove();
 			this.rootTimegroup = this.getRootTimegroup();
 			if (this.rootTimegroup) this.ownCurrentTimeController = new OwnCurrentTimeController(this.rootTimegroup, this);
+			if (oldParent !== value) if (!value) this.didBecomeRoot();
+			else this.didBecomeChild();
 		}
 		disconnectedCallback() {
 			super.disconnectedCallback();
 			this.ownCurrentTimeController?.remove();
+			if (this.playbackController) {
+				this.playbackController.remove();
+				this.playbackController = void 0;
+			}
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			if (!this.parentTimegroup) this.didBecomeRoot();
 		}
 		get parentTimegroup() {
 			return this.#parentTimegroup;
 		}
+		get playing() {
+			if (!this.playbackController) return false;
+			return this.playbackController.playing;
+		}
+		set playing(value) {
+			if (!this.playbackController) {
+				console.warn("Cannot set playing on non-root temporal element", this);
+				return;
+			}
+			this.playbackController.setPlaying(value);
+		}
+		play() {
+			if (!this.playbackController) {
+				console.warn("play() called on non-root temporal element", this);
+				return;
+			}
+			this.playbackController.play();
+		}
+		pause() {
+			if (!this.playbackController) {
+				console.warn("pause() called on non-root temporal element", this);
+				return;
+			}
+			this.playbackController.pause();
+		}
+		get loop() {
+			return this.playbackController?.loop ?? this.#loop;
+		}
+		set loop(value) {
+			const oldValue = this.#loop;
+			this.#loop = value;
+			if (this.playbackController) this.playbackController.setLoop(value);
+			this.requestUpdate("loop", oldValue);
+		}
 		set duration(value) {
 			if (value !== void 0) this.setAttribute("duration", value);
 			else this.removeAttribute("duration");
@@ -173,6 +219,7 @@ const EFTemporal = (superClass) => {
 			if (!this.parentTemporal) return 0;
 			return this.startTimeMs - this.parentTemporal.startTimeMs;
 		}
+		#loop = false;
 		get startTimeMs() {
 			const cachedStartTime = startTimeMsCache.get(this);
 			if (cachedStartTime !== void 0) return cachedStartTime;
@@ -212,22 +259,52 @@ const EFTemporal = (superClass) => {
 		get endTimeMs() {
 			return this.startTimeMs + this.durationMs;
 		}
+		#currentTimeMs = 0;
 		get ownCurrentTimeMs() {
-			if (this.rootTimegroup) return Math.min(Math.max(0, this.rootTimegroup.currentTimeMs - this.startTimeMs), this.durationMs);
-			return 0;
+			if (this.playbackController) return Math.min(Math.max(0, this.playbackController.currentTimeMs), this.durationMs);
+			if (this.rootTimegroup && this.rootTimegroup !== this) return Math.min(Math.max(0, this.rootTimegroup.currentTimeMs - this.startTimeMs), this.durationMs);
+			return Math.min(Math.max(0, this.#currentTimeMs), this.durationMs);
 		}
 		get currentTimeMs() {
 			return this.ownCurrentTimeMs;
 		}
+		set currentTimeMs(value) {
+			if (this.playbackController) {
+				this.playbackController.currentTime = value / 1e3;
+				return;
+			}
+			if (this.rootTimegroup && this.rootTimegroup !== this) this.rootTimegroup.currentTimeMs = value;
+			else {
+				this.#currentTimeMs = value;
+				this.requestUpdate("currentTimeMs");
+			}
+		}
 		get currentSourceTimeMs() {
 			const leadingTrimMs = this.sourceInMs || this.trimStartMs || 0;
 			return this.ownCurrentTimeMs + leadingTrimMs;
 		}
+		didBecomeRoot() {
+			if (!this.playbackController) {
+				this.playbackController = new PlaybackController(this);
+				if (this.#loop) this.playbackController.setLoop(this.#loop);
+			}
+		}
+		didBecomeChild() {
+			if (this.playbackController) {
+				this.playbackController.remove();
+				this.playbackController = void 0;
+			}
+		}
 	}
 	__decorate([consume({
 		context: timegroupContext,
 		subscribe: true
-	}), property({ attribute: false })], TemporalMixinClass.prototype, "parentTimegroup", null);
+	})], TemporalMixinClass.prototype, "parentTimegroup", null);
+	__decorate([property({
+		type: Boolean,
+		reflect: true,
+		attribute: "loop"
+	})], TemporalMixinClass.prototype, "loop", null);
 	__decorate([property({
 		type: String,
 		attribute: "offset",
@@ -267,4 +344,4 @@ const EFTemporal = (superClass) => {
 	Object.defineProperty(TemporalMixinClass.prototype, EF_TEMPORAL, { value: true });
 	return TemporalMixinClass;
 };
-export { EFTemporal, deepGetElementsWithFrameTasks, deepGetTemporalElements, flushStartTimeMsCache, resetTemporalCache, shallowGetTemporalElements, timegroupContext };
+export { EFTemporal, deepGetElementsWithFrameTasks, deepGetTemporalElements, flushStartTimeMsCache, isEFTemporal, resetTemporalCache, shallowGetTemporalElements, timegroupContext };

package/dist/elements/EFThumbnailStrip.js

@@ -1,4 +1,4 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { OrderedLRUCache } from "../utils/LRUCache.js";
 import { TargetController } from "./TargetController.js";
 import { Task } from "@lit/task";
@@ -8,9 +8,7 @@ import { createRef, ref } from "lit/directives/ref.js";
 var 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;
+	return Number.parseFloat(partsA[partsA.length - 1] || "0") - Number.parseFloat(partsB[partsB.length - 1] || "0");
 });
 globalThis.debugThumbnailCache = thumbnailImageCache;
 function quantizeTimestamp(timeMs) {
@@ -18,8 +16,7 @@ function quantizeTimestamp(timeMs) {
 	return Math.round(timeMs / frameIntervalMs) * frameIntervalMs;
 }
 function getThumbnailCacheKey(videoSrc, timeMs) {
-	const quantizedTimeMs = quantizeTimestamp(timeMs);
-	return `${videoSrc}:${quantizedTimeMs}`;
+	return `${videoSrc}:${quantizeTimestamp(timeMs)}`;
 }
 var THUMBNAIL_GAP = 1;
 var STRIP_BORDER_PADDING = 4;
@@ -43,13 +40,12 @@ function calculateThumbnailLayout(stripWidth, thumbnailWidth, startTimeMs, endTi
 		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
+		segments: Array.from(segmentMap.entries()).sort(([a], [b]) => a - b).map(([segmentId, thumbnails]) => ({
+			segmentId,
+			thumbnails
+		}))
 	};
 }
 var EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
@@ -248,8 +244,7 @@ var EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 		return this.generateLayoutFromTimeRange(stripWidth, thumbnailWidth, effectiveStartMs, effectiveEndMs, mediaEngine);
 	}
 	generateLayoutFromTimeRange(stripWidth, thumbnailWidth, effectiveStartMs, effectiveEndMs, mediaEngine) {
-		const scrubSegmentDurationMs = mediaEngine && typeof mediaEngine.getScrubVideoRendition === "function" ? mediaEngine.getScrubVideoRendition()?.segmentDurationMs : void 0;
-		return calculateThumbnailLayout(stripWidth, thumbnailWidth, effectiveStartMs, effectiveEndMs, scrubSegmentDurationMs);
+		return calculateThumbnailLayout(stripWidth, thumbnailWidth, effectiveStartMs, effectiveEndMs, mediaEngine && typeof mediaEngine.getScrubVideoRendition === "function" ? mediaEngine.getScrubVideoRendition()?.segmentDurationMs : void 0);
 	}
 	async renderThumbnails(layout, targetElement, thumbnailWidth) {
 		if (!layout || !targetElement || layout.count === 0) return [];
@@ -274,9 +269,7 @@ var EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 						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;
+						return Math.abs(currentTime - thumbnail.timeMs) < Math.abs(closestTime - thumbnail.timeMs) ? current : closest;
 					});
 					imageData = nearestHit.value;
 					status = "near-hit";

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

@@ -12,17 +12,17 @@ declare class TimegroupTestMedia extends EFMedia {
 declare const TestFrameTaskA_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
 declare class TestFrameTaskA extends TestFrameTaskA_base {
     frameTaskCount: number;
-    frameTask: Task<never[], void>;
+    frameTask: Task<readonly [], void>;
 }
 declare const TestFrameTaskB_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
 declare class TestFrameTaskB extends TestFrameTaskB_base {
     frameTaskCount: number;
-    frameTask: Task<never[], void>;
+    frameTask: Task<readonly [], void>;
 }
 declare const TestFrameTaskC_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
 declare class TestFrameTaskC extends TestFrameTaskC_base {
     frameTaskCount: number;
-    frameTask: Task<never[], void>;
+    frameTask: Task<readonly [], void>;
 }
 declare const TestTemporal_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
 declare class TestTemporal extends TestTemporal_base {

package/dist/elements/EFTimegroup.d.ts

@@ -1,35 +1,44 @@
 import { Task } from '@lit/task';
 import { LitElement, PropertyValues } from 'lit';
+import { EFMedia } from './EFMedia.js';
+declare global {
+    var EF_DEV_WORKBENCH: boolean | undefined;
+}
 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;
 export declare class EFTimegroup extends EFTimegroup_base {
     #private;
+    static get observedAttributes(): string[];
     static styles: import('lit').CSSResult;
     _timeGroupContext: this;
-    set mode(value: "fit" | "fixed" | "sequence" | "contain");
-    get mode(): "fit" | "fixed" | "sequence" | "contain";
-    private _mode;
-    set overlapMs(value: number);
-    get overlapMs(): number;
-    private _overlapMs;
+    efContext: this;
+    mode: "fit" | "fixed" | "sequence" | "contain";
+    overlapMs: number;
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
     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);
     get currentTimeMs(): number;
+    /**
+     * Seek to a specific time and wait for all frames to be ready.
+     * This is the recommended way to seek in tests and programmatic control.
+     *
+     * @param timeMs - Time in milliseconds to seek to
+     * @returns Promise that resolves when the seek is complete and all visible children are ready
+     */
+    seek(timeMs: number): Promise<void>;
     /**
      * Determines if this is a root timegroup (no parent timegroups)
      */
     get isRootTimegroup(): boolean;
+    saveTimeToLocalStorage(time: number): void;
     render(): import('lit-html').TemplateResult<1>;
-    maybeLoadTimeFromLocalStorage(): number | undefined;
+    loadTimeFromLocalStorage(): number | undefined;
     connectedCallback(): void;
-    protected updated(_changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
     disconnectedCallback(): void;
     get storageKey(): string;
     get intrinsicDurationMs(): number | undefined;
@@ -45,15 +54,27 @@ export declare class EFTimegroup extends EFTimegroup_base {
     /**
      * 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.
+     * A timegroup should be wrapped with a workbench if:
+     * - It's being rendered (EF_RENDERING), OR
+     * - It's in interactive mode (EF_INTERACTIVE) with the dev workbench flag set
      *
-     * If the timegroup is already wrappedin a context provider like ef-preview,
+     * If the timegroup is already wrapped in a context provider like ef-preview,
      * it should NOT be wrapped in a workbench.
      */
     shouldWrapWithWorkbench(): boolean;
     wrapWithWorkbench(): void;
     get efElements(): Element[];
+    /**
+     * 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>;
     /**
      * TEMPORARY TEST METHOD: Renders audio and immediately plays it back

package/dist/elements/EFTimegroup.js

@@ -1,9 +1,14 @@
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
+import { EF_RENDERING } from "../EF_RENDERING.js";
+import { parseTimeToMs } from "./parseTimeToMs.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { EFTemporal, deepGetElementsWithFrameTasks, flushStartTimeMsCache, resetTemporalCache, shallowGetTemporalElements, timegroupContext } from "./EFTemporal.js";
+import { efContext } from "../gui/efContext.js";
 import { isContextMixin } from "../gui/ContextMixin.js";
+import { TWMixin } from "../gui/TWMixin2.js";
 import { isTracingEnabled, withSpan } from "../otel/tracingHelpers.js";
-import { durationConverter } from "./durationConverter.js";
-import { EFTemporal, deepGetElementsWithFrameTasks, flushStartTimeMsCache, resetTemporalCache, shallowGetTemporalElements, timegroupContext } from "./EFTemporal.js";
+import { renderTemporalAudio } from "./renderTemporalAudio.js";
+import { EFTargetable } from "./TargetController.js";
 import { deepGetMediaElements } from "./EFMedia.js";
 import { TimegroupController } from "./TimegroupController.js";
 import { evaluateTemporalStateForAnimation, updateAnimations } from "./updateAnimations.js";
@@ -23,15 +28,16 @@ const shallowGetTimegroups = (element, groups = []) => {
 	else shallowGetTimegroups(child, groups);
 	return groups;
 };
-var EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
+var EFTimegroup = class EFTimegroup$1 extends EFTargetable(EFTemporal(TWMixin(LitElement))) {
 	static {
 		_EFTimegroup = this;
 	}
 	constructor(..._args) {
 		super(..._args);
 		this._timeGroupContext = this;
-		this._mode = "contain";
-		this._overlapMs = 0;
+		this.efContext = this;
+		this.mode = "contain";
+		this.overlapMs = 0;
 		this.fit = "none";
 		this.mediaDurationsPromise = void 0;
 		this.frameTask = new Task(this, {
@@ -53,6 +59,10 @@ var EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 			args: () => [this.#pendingSeekTime ?? this.#currentTime],
 			onComplete: () => {},
 			task: async ([targetTime]) => {
+				if (this.playbackController) {
+					await this.playbackController.seekTask.taskComplete;
+					return this.currentTime;
+				}
 				if (!this.isRootTimegroup) return;
 				return withSpan("timegroup.seekTask", {
 					timegroupId: this.id || "unknown",
@@ -65,71 +75,60 @@ var EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 					this.#currentTime = newTime;
 					this.requestUpdate("currentTime");
 					await this.runThrottledFrameTask();
-					this.#saveTimeToLocalStorage(this.#currentTime);
+					this.saveTimeToLocalStorage(this.#currentTime);
 					this.#seekInProgress = false;
 					return newTime;
 				});
 			}
 		});
 	}
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes || [],
+			"mode",
+			"overlap",
+			"currenttime",
+			"fit"
+		];
+	}
 	static {
 		this.styles = css`
     :host {
       display: block;
+      position: relative;
+      overflow: hidden;
+    }
+
+    ::slotted(ef-timegroup) {
+      position: absolute;
       width: 100%;
       height: 100%;
-      position: absolute;
       top: 0;
       left: 0;
+      overflow: initial;
     }
   `;
 	}
-	#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;
+	attributeChangedCallback(name, old, value) {
+		if (name === "mode" && value) this.mode = value;
+		if (name === "overlap" && value) this.overlapMs = parseTimeToMs(value);
+		super.attributeChangedCallback(name, old, value);
 	}
 	#resizeObserver;
+	#currentTime = void 0;
 	#seekInProgress = false;
 	#pendingSeekTime;
 	#processingPendingSeek = false;
-	#frameTaskInProgress = false;
-	#pendingFrameTaskRun = false;
-	#processingPendingFrameTask = false;
 	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;
-		}
+		if (this.playbackController) return this.playbackController.runThrottledFrameTask();
+		await this.frameTask.run();
 	}
 	set currentTime(time) {
-		time = Math.max(0, time);
+		if (this.playbackController) {
+			this.playbackController.currentTime = time;
+			return;
+		}
+		time = Math.max(0, Math.min(this.durationMs / 1e3, time));
 		if (!this.isRootTimegroup) return;
 		if (Number.isNaN(time)) return;
 		if (time === this.#currentTime && !this.#processingPendingSeek) return;
@@ -155,6 +154,7 @@ var EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		});
 	}
 	get currentTime() {
+		if (this.playbackController) return this.playbackController.currentTime;
 		return this.#currentTime ?? 0;
 	}
 	set currentTimeMs(ms) {
@@ -163,10 +163,23 @@ var EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	get currentTimeMs() {
 		return this.currentTime * 1e3;
 	}
+	async seek(timeMs) {
+		this.currentTimeMs = timeMs;
+		await this.seekTask.taskComplete;
+		if (this.playbackController) this.saveTimeToLocalStorage(this.currentTime);
+		await this.frameTask.taskComplete;
+		const visibleElements = deepGetElementsWithFrameTasks(this).filter((element) => {
+			return evaluateTemporalStateForAnimation(element).isVisible;
+		});
+		await Promise.all(visibleElements.map(async (element) => {
+			if ("waitForFrameReady" in element && typeof element.waitForFrameReady === "function") await element.waitForFrameReady();
+			else await element.updateComplete;
+		}));
+	}
 	get isRootTimegroup() {
 		return !this.parentTimegroup;
 	}
-	#saveTimeToLocalStorage(time) {
+	saveTimeToLocalStorage(time) {
 		try {
 			if (this.id && this.isConnected && !Number.isNaN(time)) localStorage.setItem(this.storageKey, time.toString());
 		} catch (error) {
@@ -182,7 +195,7 @@ var EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		flushStartTimeMsCache();
 		this.requestUpdate();
 	};
-	maybeLoadTimeFromLocalStorage() {
+	loadTimeFromLocalStorage() {
 		if (this.id) try {
 			const storedValue = localStorage.getItem(this.storageKey);
 			if (storedValue === null) return;
@@ -193,9 +206,9 @@ var EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		this.waitForMediaDurations().then(() => {
+		if (!this.playbackController) this.waitForMediaDurations().then(() => {
 			if (this.id) {
-				const maybeLoadedTime = this.maybeLoadTimeFromLocalStorage();
+				const maybeLoadedTime = this.loadTimeFromLocalStorage();
 				if (maybeLoadedTime !== void 0) this.currentTime = maybeLoadedTime;
 			}
 			if (EF_INTERACTIVE && this.seekTask.status === TaskStatus.INITIAL) this.seekTask.run();
@@ -204,7 +217,9 @@ var EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		if (this.shouldWrapWithWorkbench()) this.wrapWithWorkbench();
 	}
 	#previousDurationMs = 0;
-	updated(_changedProperties) {
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("mode") || changedProperties.has("overlapMs")) sequenceDurationCache.delete(this);
 		if (this.#previousDurationMs !== this.durationMs) {
 			this.#previousDurationMs = this.durationMs;
 			this.runThrottledFrameTask();
@@ -338,6 +353,8 @@ var EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		return null;
 	}
 	shouldWrapWithWorkbench() {
+		if (EF_RENDERING?.() === true) return this.closest("ef-timegroup") === this && this.closest("ef-preview") === null && this.closest("ef-workbench") === null && this.closest("test-context") === null;
+		if (!globalThis.EF_DEV_WORKBENCH) return false;
 		return EF_INTERACTIVE && this.closest("ef-timegroup") === this && this.closest("ef-preview") === null && this.closest("ef-workbench") === null && this.closest("test-context") === null;
 	}
 	wrapWithWorkbench() {
@@ -354,67 +371,11 @@ var EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	get efElements() {
 		return Array.from(this.querySelectorAll("ef-audio, ef-video, ef-image, ef-captions, ef-waveform"));
 	}
-	async #addAudioToContext(audioContext, fromMs, toMs) {
-		await this.waitForMediaDurations();
-		const abortController = new AbortController();
-		await Promise.all(deepGetMediaElements(this).map(async (mediaElement) => {
-			if (mediaElement.mute) return;
-			const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
-			const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
-			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;
-			const sourceInMs = mediaElement.sourceInMs || mediaElement.trimStartMs || 0;
-			const mediaSourceFromMs = mediaLocalFromMs + sourceInMs;
-			const mediaSourceToMs = mediaLocalToMs + sourceInMs;
-			let audio;
-			try {
-				audio = await mediaElement.fetchAudioSpanningTime(mediaSourceFromMs, mediaSourceToMs, abortController.signal);
-			} catch (error) {
-				if (error instanceof Error && error.message.includes("No audio track available")) return;
-				throw error;
-			}
-			if (!audio) return;
-			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 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);
-		}));
+	getMediaElements() {
+		return deepGetMediaElements(this);
 	}
 	async renderAudio(fromMs, toMs) {
-		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();
-		});
+		return renderTemporalAudio(this, fromMs, toMs);
 	}
 	async testPlayAudio(fromMs, toMs) {
 		const renderedBuffer = await this.renderAudio(fromMs, toMs);
@@ -441,21 +402,13 @@ var EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 			}
 		}
 		await Promise.all(loaderTasks);
-		efElements.map((el) => {
+		efElements.forEach((el) => {
 			if ("productionSrc" in el && el.productionSrc instanceof Function) el.setAttribute("src", el.productionSrc());
 		});
 	}
 };
 __decorate([provide({ context: timegroupContext })], EFTimegroup.prototype, "_timeGroupContext", void 0);
-__decorate([property({
-	type: String,
-	attribute: "mode"
-})], EFTimegroup.prototype, "mode", null);
-__decorate([property({
-	type: Number,
-	converter: durationConverter,
-	attribute: "overlap"
-})], EFTimegroup.prototype, "overlapMs", null);
+__decorate([provide({ context: efContext })], EFTimegroup.prototype, "efContext", void 0);
 __decorate([property({ type: String })], EFTimegroup.prototype, "fit", void 0);
 __decorate([property({
 	type: Number,