@editframe/elements 0.20.4-beta.0 → 0.23.6-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,12 +1,13 @@
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.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";
-import _decorate from "@oxc-project/runtime/helpers/decorate";
 const timegroupContext = createContext(Symbol("timeGroupContext"));
 const isEFTemporal = (obj) => obj[EF_TEMPORAL];
-const EF_TEMPORAL = Symbol("EF_TEMPORAL");
+var EF_TEMPORAL = Symbol("EF_TEMPORAL");
 const deepGetTemporalElements = (element, temporals = []) => {
 	for (const child of element.children) {
 		if (isEFTemporal(child)) temporals.push(child);
@@ -21,7 +22,7 @@ const deepGetElementsWithFrameTasks = (element, elements = []) => {
 	}
 	return elements;
 };
-let temporalCache;
+var temporalCache;
 const resetTemporalCache = () => {
 	temporalCache = /* @__PURE__ */ new Map();
 	if (typeof requestAnimationFrame !== "undefined") requestAnimationFrame(resetTemporalCache);
@@ -48,8 +49,8 @@ var OwnCurrentTimeController = class {
 		this.host.removeController(this);
 	}
 };
-let startTimeMsCache = /* @__PURE__ */ new WeakMap();
-const resetStartTimeMsCache = () => {
+var startTimeMsCache = /* @__PURE__ */ new WeakMap();
+var resetStartTimeMsCache = () => {
 	startTimeMsCache = /* @__PURE__ */ new WeakMap();
 	if (typeof requestAnimationFrame !== "undefined") requestAnimationFrame(resetStartTimeMsCache);
 };
@@ -79,45 +80,90 @@ 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");
 		}
 		get trimStartMs() {
-			if (this._trimStartMs === void 0) return void 0;
+			if (this._trimStartMs === void 0) return;
 			return Math.min(Math.max(this._trimStartMs, 0), this.intrinsicDurationMs ?? 0);
 		}
 		set trimStartMs(value) {
 			this._trimStartMs = value;
 		}
 		get trimEndMs() {
-			if (this._trimEndMs === void 0) return void 0;
+			if (this._trimEndMs === void 0) return;
 			return Math.min(this._trimEndMs, this.intrinsicDurationMs ?? 0);
 		}
 		set trimEndMs(value) {
 			this._trimEndMs = value;
 		}
 		get sourceInMs() {
-			if (this._sourceInMs === void 0) return void 0;
+			if (this._sourceInMs === void 0) return;
 			return Math.max(this._sourceInMs, 0);
 		}
 		set sourceInMs(value) {
 			this._sourceInMs = value;
 		}
 		get sourceOutMs() {
-			if (this._sourceOutMs === void 0) return void 0;
+			if (this._sourceOutMs === void 0) return;
 			if (this.intrinsicDurationMs && this._sourceOutMs > this.intrinsicDurationMs) return this.intrinsicDurationMs;
 			return Math.max(this._sourceOutMs, 0);
 		}
@@ -137,14 +183,11 @@ const EFTemporal = (superClass) => {
 		}
 		get explicitDurationMs() {
 			if (this.hasExplicitDuration) return this._durationMs;
-			return void 0;
 		}
 		get hasOwnDuration() {
 			return this.intrinsicDurationMs !== void 0 || this.hasExplicitDuration;
 		}
-		get intrinsicDurationMs() {
-			return void 0;
-		}
+		get intrinsicDurationMs() {}
 		get durationMs() {
 			const baseDurationMs = this.intrinsicDurationMs ?? this._durationMs ?? this.parentTimegroup?.durationMs ?? 0;
 			if (baseDurationMs === 0) return 0;
@@ -172,13 +215,11 @@ const EFTemporal = (superClass) => {
 			while (parent && !isEFTemporal(parent)) parent = parent.parentElement;
 			return parent;
 		}
-		/**
-		* The start time of the element within its parent timegroup.
-		*/
 		get startTimeWithinParentMs() {
 			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;
@@ -218,71 +259,89 @@ const EFTemporal = (superClass) => {
 		get endTimeMs() {
 			return this.startTimeMs + this.durationMs;
 		}
-		/**
-		* The current time of the element within itself.
-		* Compare with `currentTimeMs` to see the current time with respect to the root timegroup
-		*/
+		#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);
 		}
-		/**
-		* Element's current time for progress calculation.
-		* Non-timegroup temporal elements use their local time (ownCurrentTimeMs)
-		*/
 		get currentTimeMs() {
 			return this.ownCurrentTimeMs;
 		}
-		/**
-		* Used to calculate the internal currentTimeMs of the element. This is useful
-		* for mapping to internal media time codes for audio/video elements.
-		*/
+		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({
+	__decorate([consume({
 		context: timegroupContext,
 		subscribe: true
-	}), property({ attribute: false })], TemporalMixinClass.prototype, "parentTimegroup", null);
-	_decorate([property({
+	})], TemporalMixinClass.prototype, "parentTimegroup", null);
+	__decorate([property({
+		type: Boolean,
+		reflect: true,
+		attribute: "loop"
+	})], TemporalMixinClass.prototype, "loop", null);
+	__decorate([property({
 		type: String,
 		attribute: "offset",
 		converter: durationConverter
 	})], TemporalMixinClass.prototype, "_offsetMs", void 0);
-	_decorate([property({
+	__decorate([property({
 		type: Number,
 		attribute: "duration",
 		converter: durationConverter
 	})], TemporalMixinClass.prototype, "_durationMs", void 0);
-	_decorate([property({
+	__decorate([property({
 		type: Number,
 		attribute: "trimstart",
 		converter: durationConverter
 	})], TemporalMixinClass.prototype, "_trimStartMs", void 0);
-	_decorate([property({
+	__decorate([property({
 		type: Number,
 		attribute: "trimend",
 		converter: durationConverter
 	})], TemporalMixinClass.prototype, "_trimEndMs", void 0);
-	_decorate([property({
+	__decorate([property({
 		type: Number,
 		attribute: "sourcein",
 		converter: durationConverter
 	})], TemporalMixinClass.prototype, "_sourceInMs", void 0);
-	_decorate([property({
+	__decorate([property({
 		type: Number,
 		attribute: "sourceout",
 		converter: durationConverter
 	})], TemporalMixinClass.prototype, "_sourceOutMs", void 0);
-	_decorate([property({
+	__decorate([property({
 		type: Number,
 		attribute: "startoffset",
 		converter: durationConverter
 	})], TemporalMixinClass.prototype, "_startOffsetMs", void 0);
-	_decorate([state()], TemporalMixinClass.prototype, "rootTimegroup", void 0);
+	__decorate([state()], TemporalMixinClass.prototype, "rootTimegroup", void 0);
 	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,44 +1,25 @@
+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";
 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");
-	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;
-/**
-* 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}`;
+	return `${videoSrc}:${quantizeTimestamp(timeMs)}`;
 }
-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,
@@ -59,16 +40,15 @@ 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
+		}))
 	};
 }
-let EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
+var EFThumbnailStrip = class EFThumbnailStrip$1 extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.canvasRef = createRef();
@@ -221,9 +201,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 +213,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 +231,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 +243,9 @@ 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, mediaEngine && typeof mediaEngine.getScrubVideoRendition === "function" ? mediaEngine.getScrubVideoRendition()?.segmentDurationMs : void 0);
 	}
-	/**
-	* 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,17 +262,14 @@ 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(":");
 						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";
@@ -338,8 +298,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 +317,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 +370,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 +393,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 +409,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 +435,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.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