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

package/dist/elements/updateAnimations.d.ts

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

package/dist/elements/updateAnimations.js

@@ -1,5 +1,5 @@
-import { deepGetTemporalElements, isEFTemporal } from "./EFTemporal.js";
-const ANIMATION_PRECISION_OFFSET = Number.EPSILON;
+import { deepGetTemporalElements } from "./EFTemporal.js";
+const ANIMATION_PRECISION_OFFSET = .1;
 const DEFAULT_ANIMATION_ITERATIONS = 1;
 const PROGRESS_PROPERTY = "--ef-progress";
 const DURATION_PROPERTY = "--ef-duration";
@@ -12,7 +12,23 @@ const TIMEGROUP_TAGNAME = "ef-timegroup";
 const evaluateTemporalState = (element) => {
 	const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;
 	const progress = element.durationMs <= 0 ? 1 : Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs));
-	const isVisible = element.startTimeMs <= timelineTimeMs && element.endTimeMs > timelineTimeMs;
+	const isRootTimegroup = element.tagName.toLowerCase() === TIMEGROUP_TAGNAME && !element.parentTimegroup;
+	const useInclusiveEnd = isRootTimegroup;
+	const isVisible = element.startTimeMs <= timelineTimeMs && (useInclusiveEnd ? element.endTimeMs >= timelineTimeMs : element.endTimeMs > timelineTimeMs);
+	return {
+		progress,
+		isVisible,
+		timelineTimeMs
+	};
+};
+/**
+* Evaluates element visibility specifically for animation coordination
+* Uses inclusive end boundaries to prevent animation jumps at exact boundaries
+*/
+const evaluateTemporalStateForAnimation = (element) => {
+	const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;
+	const progress = element.durationMs <= 0 ? 1 : Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs));
+	const isVisible = element.startTimeMs <= timelineTimeMs && element.endTimeMs >= timelineTimeMs;
 	return {
 		progress,
 		isVisible,
@@ -34,18 +50,16 @@ const updateVisualState = (element, state) => {
 	element.style.setProperty(TRANSITION_OUT_START_PROPERTY, `${element.durationMs - (element.parentTimegroup?.overlapMs ?? 0)}ms`);
 };
 /**
-* Coordinates animations to match timeline
+* Coordinates animations for a single element and its subtree, using the element as the time source
 */
-const coordinateAnimations = (element) => {
+const coordinateAnimationsForSingleElement = (element) => {
 	const animations = element.getAnimations({ subtree: true });
 	for (const animation of animations) {
 		if (animation.playState === "running") animation.pause();
 		const effect = animation.effect;
 		if (!(effect && effect instanceof KeyframeEffect)) continue;
 		const target = effect.target;
-		if (!target || target.closest(TIMEGROUP_TAGNAME) !== element) continue;
-		const timeTarget = isEFTemporal(target) ? target : target.closest(TIMEGROUP_TAGNAME);
-		if (!timeTarget) continue;
+		if (!target) continue;
 		const timing = effect.getTiming();
 		const duration = Number(timing.duration) || 0;
 		const delay = Number(timing.delay) || 0;
@@ -54,7 +68,7 @@ const coordinateAnimations = (element) => {
 			animation.currentTime = 0;
 			continue;
 		}
-		const currentTime = timeTarget.ownCurrentTimeMs ?? 0;
+		const currentTime = element.ownCurrentTimeMs ?? 0;
 		if (currentTime < delay) {
 			animation.currentTime = 0;
 			continue;
@@ -62,8 +76,13 @@ const coordinateAnimations = (element) => {
 		const adjustedTime = currentTime - delay;
 		const currentIteration = Math.floor(adjustedTime / duration);
 		const currentIterationTime = adjustedTime % duration;
-		if (currentIteration >= iterations) animation.currentTime = duration - ANIMATION_PRECISION_OFFSET;
-		else animation.currentTime = Math.min(currentIterationTime, duration - ANIMATION_PRECISION_OFFSET) + delay;
+		const totalAnimationLength = delay + duration * iterations;
+		const maxSafeCurrentTime = totalAnimationLength - ANIMATION_PRECISION_OFFSET;
+		if (currentIteration >= iterations) animation.currentTime = maxSafeCurrentTime;
+		else {
+			const proposedCurrentTime = Math.min(currentIterationTime, duration - ANIMATION_PRECISION_OFFSET) + delay;
+			animation.currentTime = Math.min(proposedCurrentTime, maxSafeCurrentTime);
+		}
 	}
 };
 /**
@@ -76,6 +95,11 @@ const updateAnimations = (element) => {
 		updateVisualState(temporalElement, temporalState$1);
 	});
 	updateVisualState(element, temporalState);
-	if (temporalState.isVisible) coordinateAnimations(element);
+	const animationState = evaluateTemporalStateForAnimation(element);
+	if (animationState.isVisible) coordinateAnimationsForSingleElement(element);
+	deepGetTemporalElements(element).forEach((temporalElement) => {
+		const childAnimationState = evaluateTemporalStateForAnimation(temporalElement);
+		if (childAnimationState.isVisible) coordinateAnimationsForSingleElement(temporalElement);
+	});
 };
-export { evaluateTemporalState, updateAnimations };
+export { evaluateTemporalStateForAnimation, updateAnimations };

package/dist/getRenderInfo.js

@@ -43,7 +43,7 @@ const getRenderInfo = async () => {
 		case "EF-CAPTIONS": {
 			const src = element.targetElement?.src;
 			console.error("Processing element", element.tagName, src);
-			assets.efCaptions.add(src);
+			assets.efCaptions.add(src ?? "undefined");
 			break;
 		}
 	}

package/dist/gui/ContextMixin.js

@@ -1,5 +1,7 @@
 import { EF_RENDERING } from "../EF_RENDERING.js";
 import { globalURLTokenDeduplicator } from "../transcoding/cache/URLTokenDeduplicator.js";
+import { currentTimeContext } from "./currentTimeContext.js";
+import { durationContext } from "./durationContext.js";
 import { efConfigurationContext } from "./EFConfiguration.js";
 import { efContext } from "./efContext.js";
 import { fetchContext } from "./fetchContext.js";
@@ -22,6 +24,8 @@ function ContextMixin(superClass) {
 			this.focusContext = this;
 			this.efContext = this;
 			this.targetTimegroup = null;
+			this.durationMs = 0;
+			this.endTimeMs = 0;
 			this.fetch = async (url, init = {}) => {
 				init.headers ||= {};
 				Object.assign(init.headers, { "Content-Type": "application/json" });
@@ -67,12 +71,6 @@ function ContextMixin(superClass) {
 		set apiHost(value) {
 			this.#apiHost = value;
 		}
-		get durationMs() {
-			return this.targetTimegroup?.durationMs ?? 0;
-		}
-		get endTimeMs() {
-			return this.targetTimegroup?.endTimeMs ?? 0;
-		}
 		/**
 		* Generate a cache key for URL token based on signing strategy
 		*
@@ -157,16 +155,35 @@ function ContextMixin(superClass) {
 					shouldUpdate = true;
 				} else if (mutation.target instanceof Element && (mutation.target.tagName === "EF-TIMEGROUP" || mutation.target.closest("ef-timegroup"))) shouldUpdate = true;
 			} else if (mutation.type === "attributes") {
-				if (mutation.attributeName === "duration" || mutation.attributeName === "mode" || mutation.target instanceof Element && (mutation.target.tagName === "EF-TIMEGROUP" || mutation.target.closest("ef-timegroup"))) shouldUpdate = true;
+				const durationAffectingAttributes = [
+					"duration",
+					"mode",
+					"trimstart",
+					"trimend",
+					"sourcein",
+					"sourceout"
+				];
+				if (durationAffectingAttributes.includes(mutation.attributeName || "") || mutation.target instanceof Element && (mutation.target.tagName === "EF-TIMEGROUP" || mutation.target.tagName === "EF-VIDEO" || mutation.target.tagName === "EF-AUDIO" || mutation.target.tagName === "EF-CAPTIONS" || mutation.target.closest("ef-timegroup"))) shouldUpdate = true;
 			}
 			if (shouldUpdate) queueMicrotask(() => {
+				this.updateDurationProperties();
 				this.requestUpdate();
 				if (this.targetTimegroup) this.targetTimegroup.requestUpdate();
 			});
 		});
+		/**
+		* Update duration properties when timegroup changes
+		*/
+		updateDurationProperties() {
+			const newDuration = this.targetTimegroup?.durationMs ?? 0;
+			const newEndTime = this.targetTimegroup?.endTimeMs ?? 0;
+			if (this.durationMs !== newDuration) this.durationMs = newDuration;
+			if (this.endTimeMs !== newEndTime) this.endTimeMs = newEndTime;
+		}
 		connectedCallback() {
 			super.connectedCallback();
 			this.targetTimegroup = this.querySelector("ef-timegroup");
+			this.updateDurationProperties();
 			this.#timegroupObserver.observe(this, {
 				childList: true,
 				subtree: true,
@@ -187,10 +204,6 @@ function ContextMixin(superClass) {
 					if (this.isConnected) {
 						if (this.targetTimegroup.currentTimeMs === this.currentTimeMs) return;
 						this.targetTimegroup.currentTimeMs = this.currentTimeMs;
-						this.dispatchEvent(new CustomEvent("timeupdate", { detail: {
-							currentTimeMs: this.currentTimeMs,
-							progress: this.currentTimeMs / this.targetTimegroup.durationMs
-						} }));
 					}
 				}
 			}
@@ -290,8 +303,8 @@ function ContextMixin(superClass) {
 	})], ContextElement.prototype, "apiHost", null);
 	_decorate([provide({ context: efContext })], ContextElement.prototype, "efContext", void 0);
 	_decorate([provide({ context: targetTimegroupContext }), state()], ContextElement.prototype, "targetTimegroup", void 0);
-	_decorate([state()], ContextElement.prototype, "durationMs", null);
-	_decorate([state()], ContextElement.prototype, "endTimeMs", null);
+	_decorate([provide({ context: durationContext }), property({ type: Number })], ContextElement.prototype, "durationMs", void 0);
+	_decorate([property({ type: Number })], ContextElement.prototype, "endTimeMs", void 0);
 	_decorate([provide({ context: fetchContext })], ContextElement.prototype, "fetch", void 0);
 	_decorate([property({
 		type: String,
@@ -306,7 +319,7 @@ function ContextMixin(superClass) {
 		reflect: true
 	})], ContextElement.prototype, "loop", void 0);
 	_decorate([property({ type: Boolean })], ContextElement.prototype, "rendering", void 0);
-	_decorate([state()], ContextElement.prototype, "currentTimeMs", void 0);
+	_decorate([provide({ context: currentTimeContext }), property({ type: Number })], ContextElement.prototype, "currentTimeMs", void 0);
 	return ContextElement;
 }
 export { ContextMixin, isContextMixin, targetTimegroupContext };

package/dist/gui/EFControls.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+import { ContextMixinInterface } from './ContextMixin.js';
+/**
+ * EFControls provides a way to control an ef-preview element that is not a direct ancestor.
+ * It bridges the contexts from a target preview element to its children controls.
+ *
+ * Usage:
+ * ```html
+ * <ef-preview id="my-preview">...</ef-preview>
+ *
+ * <ef-controls target="my-preview">
+ *   <ef-toggle-play>
+ *     <button slot="play">Play</button>
+ *     <button slot="pause">Pause</button>
+ *   </ef-toggle-play>
+ *   <ef-scrubber></ef-scrubber>
+ *   <ef-time-display></ef-time-display>
+ * </ef-controls>
+ * ```
+ */
+export declare class EFControls extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    /**
+     * The ID of the ef-preview element to control
+     */
+    target: string;
+    /**
+     * The target element (set by TargetController)
+     */
+    targetElement: ContextMixinInterface | null;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-controls": EFControls;
+    }
+}

package/dist/gui/EFControls.js

@@ -0,0 +1,51 @@
+import { currentTimeContext } from "./currentTimeContext.js";
+import { durationContext } from "./durationContext.js";
+import { efConfigurationContext } from "./EFConfiguration.js";
+import { efContext } from "./efContext.js";
+import { fetchContext } from "./fetchContext.js";
+import { focusContext } from "./focusContext.js";
+import { focusedElementContext } from "./focusedElementContext.js";
+import { loopContext, playingContext } from "./playingContext.js";
+import { targetTimegroupContext } from "./ContextMixin.js";
+import { TargetController } from "../elements/TargetController.js";
+import { ContextProxyController } from "../elements/ContextProxiesController.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
+let EFControls = class EFControls$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.target = "";
+		this.targetElement = null;
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: block;
+    }
+  `;
+	}
+	#targetController = new TargetController(this);
+	#contextProxyController = new ContextProxyController(this, {
+		target: () => this.targetElement,
+		contexts: [
+			playingContext,
+			loopContext,
+			currentTimeContext,
+			durationContext,
+			targetTimegroupContext,
+			focusedElementContext,
+			efContext,
+			fetchContext,
+			focusContext,
+			efConfigurationContext
+		]
+	});
+	render() {
+		return html`<slot></slot>`;
+	}
+};
+_decorate([property({ type: String })], EFControls.prototype, "target", void 0);
+_decorate([state()], EFControls.prototype, "targetElement", void 0);
+EFControls = _decorate([customElement("ef-controls")], EFControls);
+export { EFControls };

package/dist/gui/EFFilmstrip.d.ts

@@ -1,5 +1,6 @@
 import { LitElement, nothing, PropertyValueMap, ReactiveController, TemplateResult } from 'lit';
 import { EFAudio } from '../elements/EFAudio.js';
+import { Caption } from '../elements/EFCaptions.js';
 import { EFImage } from '../elements/EFImage.js';
 import { TemporalMixinInterface } from '../elements/EFTemporal.js';
 import { EFTimegroup } from '../elements/EFTimegroup.js';
@@ -45,7 +46,41 @@ export declare class EFVideoFilmstrip extends FilmstripItem {
     contents(): TemplateResult<1>;
 }
 export declare class EFCaptionsFilmstrip extends FilmstripItem {
-    contents(): TemplateResult<1>;
+    render(): TemplateResult<1>;
+    renderCaptionsData(captionsData: Caption | null | undefined): TemplateResult<1>;
+    renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing;
+}
+export declare class EFCaptionsActiveWordFilmstrip extends FilmstripItem {
+    get captionsTrackStyles(): {
+        position: string;
+        left: string;
+        width: string;
+    };
+    render(): TemplateResult<1>;
+}
+export declare class EFCaptionsSegmentFilmstrip extends FilmstripItem {
+    get captionsTrackStyles(): {
+        position: string;
+        left: string;
+        width: string;
+    };
+    render(): TemplateResult<1>;
+}
+export declare class EFCaptionsBeforeWordFilmstrip extends FilmstripItem {
+    get captionsTrackStyles(): {
+        position: string;
+        left: string;
+        width: string;
+    };
+    render(): TemplateResult<1>;
+}
+export declare class EFCaptionsAfterWordFilmstrip extends FilmstripItem {
+    get captionsTrackStyles(): {
+        position: string;
+        left: string;
+        width: string;
+    };
+    render(): TemplateResult<1>;
 }
 export declare class EFWaveformFilmstrip extends FilmstripItem {
     contents(): TemplateResult<1>;
@@ -147,6 +182,10 @@ declare global {
         "ef-audio-filmstrip": EFAudioFilmstrip;
         "ef-video-filmstrip": EFVideoFilmstrip;
         "ef-captions-filmstrip": EFCaptionsFilmstrip;
+        "ef-captions-active-word-filmstrip": EFCaptionsActiveWordFilmstrip;
+        "ef-captions-segment-filmstrip": EFCaptionsSegmentFilmstrip;
+        "ef-captions-before-word-filmstrip": EFCaptionsBeforeWordFilmstrip;
+        "ef-captions-after-word-filmstrip": EFCaptionsAfterWordFilmstrip;
         "ef-waveform-filmstrip": EFWaveformFilmstrip;
         "ef-image-filmstrip": EFImageFilmstrip;
         "ef-html-filmstrip": EFHTMLFilmstrip;

package/dist/gui/EFFilmstrip.js

@@ -162,11 +162,232 @@ let EFVideoFilmstrip = class EFVideoFilmstrip$1 extends FilmstripItem {
 };
 EFVideoFilmstrip = _decorate([customElement("ef-video-filmstrip")], EFVideoFilmstrip);
 let EFCaptionsFilmstrip = class EFCaptionsFilmstrip$1 extends FilmstripItem {
-	contents() {
-		return html` 📝 `;
+	render() {
+		const captions = this.element;
+		const captionsData = captions.unifiedCaptionsDataTask.value;
+		return html`<div style=${styleMap(this.gutterStyles)}>
+      <div
+        class="bg-slate-300 relative"
+        ?data-focused=${this.isFocused}
+        @mouseenter=${() => {
+			if (this.focusContext) this.focusContext.focusedElement = this.element;
+		}}
+        @mouseleave=${() => {
+			if (this.focusContext) this.focusContext.focusedElement = null;
+		}}
+      >
+        <div
+          ?data-focused=${this.isFocused}
+          class="border-outset relative mb-[1px] block h-[1.1rem] text-nowrap border border-slate-500 bg-blue-200 text-sm data-[focused]:bg-slate-400 overflow-hidden"
+          style=${styleMap(this.trimPortionStyles)}
+        >
+          📝 ${this.renderCaptionsData(captionsData)}
+        </div>
+      </div>
+      ${this.renderChildren()}
+    </div>`;
+	}
+	renderCaptionsData(captionsData) {
+		if (!captionsData) return html``;
+		const captions = this.element;
+		const rootTimegroup = captions.rootTimegroup;
+		const currentTimeMs = rootTimegroup?.currentTimeMs || 0;
+		const captionsLocalTimeMs = currentTimeMs - captions.startTimeMs;
+		const captionsLocalTimeSec = captionsLocalTimeMs / 1e3;
+		const segmentElements = captionsData.segments.map((segment) => {
+			const isActive = captionsLocalTimeSec >= segment.start && captionsLocalTimeSec < segment.end;
+			return html`<div
+        class="absolute border border-slate-600 text-xs overflow-hidden flex items-center ${isActive ? "bg-green-200 border-green-500 font-bold z-[5]" : "bg-slate-100"}"
+        style=${styleMap({
+				left: `${this.pixelsPerMs * segment.start * 1e3}px`,
+				width: `${this.pixelsPerMs * (segment.end - segment.start) * 1e3}px`,
+				height: "100%",
+				top: "0px"
+			})}
+        title="Segment: '${segment.text}' (${segment.start}s - ${segment.end}s)"
+      >
+        <span class="px-0.5 text-[8px] ${isActive ? "font-bold" : ""}">${segment.text}</span>
+      </div>`;
+		});
+		return html`${segmentElements}`;
+	}
+	renderChildren() {
+		return super.renderChildren();
 	}
 };
 EFCaptionsFilmstrip = _decorate([customElement("ef-captions-filmstrip")], EFCaptionsFilmstrip);
+let EFCaptionsActiveWordFilmstrip = class EFCaptionsActiveWordFilmstrip$1 extends FilmstripItem {
+	get captionsTrackStyles() {
+		const parentCaptions = this.element.closest("ef-captions");
+		return {
+			position: "relative",
+			left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,
+			width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`
+		};
+	}
+	render() {
+		const parentCaptions = this.element.closest("ef-captions");
+		const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;
+		if (!captionsData) return html`<div style=${styleMap(this.captionsTrackStyles)}>
+        <div class="bg-slate-300 border border-slate-500 h-[1.1rem] mb-[1px] text-xs">
+          🗣️ Active Word
+        </div>
+      </div>`;
+		const rootTimegroup = parentCaptions.rootTimegroup;
+		const currentTimeMs = rootTimegroup?.currentTimeMs || 0;
+		const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;
+		const captionsLocalTimeSec = captionsLocalTimeMs / 1e3;
+		return html`<div style=${styleMap(this.captionsTrackStyles)}>
+      <div class="bg-slate-300 relative border border-slate-500 h-[1.1rem] mb-[1px] w-full">
+        ${captionsData.word_segments.map((word) => {
+			const isCurrentlyActive = captionsLocalTimeSec >= word.start && captionsLocalTimeSec < word.end;
+			return html`<div
+            class="absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? "bg-yellow-200 border-yellow-500 font-bold z-[5]" : "bg-blue-50 border-blue-200"}"
+            style=${styleMap({
+				left: `${this.pixelsPerMs * word.start * 1e3}px`,
+				width: `${this.pixelsPerMs * (word.end - word.start) * 1e3}px`,
+				height: "100%",
+				top: "0px"
+			})}
+            title="Word: '${word.text}' (${word.start}s - ${word.end}s)"
+          >
+            ${isCurrentlyActive ? html`<span class="px-0.5 text-[8px] font-bold whitespace-nowrap bg-yellow-200">${word.text.trim()}</span>` : ""}
+          </div>`;
+		})}
+      </div>
+    </div>`;
+	}
+};
+EFCaptionsActiveWordFilmstrip = _decorate([customElement("ef-captions-active-word-filmstrip")], EFCaptionsActiveWordFilmstrip);
+let EFCaptionsSegmentFilmstrip = class EFCaptionsSegmentFilmstrip$1 extends FilmstripItem {
+	get captionsTrackStyles() {
+		const parentCaptions = this.element.closest("ef-captions");
+		return {
+			position: "relative",
+			left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,
+			width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`
+		};
+	}
+	render() {
+		const parentCaptions = this.element.closest("ef-captions");
+		const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;
+		if (!captionsData) return html`<div style=${styleMap(this.captionsTrackStyles)}>
+        <div class="bg-slate-300 border border-slate-500 h-[1.1rem] mb-[1px] text-xs">
+          📄 Segment
+        </div>
+      </div>`;
+		const rootTimegroup = parentCaptions.rootTimegroup;
+		const currentTimeMs = rootTimegroup?.currentTimeMs || 0;
+		const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;
+		const captionsLocalTimeSec = captionsLocalTimeMs / 1e3;
+		return html`<div style=${styleMap(this.captionsTrackStyles)}>
+      <div class="bg-slate-300 relative border border-slate-500 h-[1.1rem] mb-[1px] w-full">
+        ${captionsData.segments.map((segment) => {
+			const isCurrentlyActive = captionsLocalTimeSec >= segment.start && captionsLocalTimeSec < segment.end;
+			return html`<div
+            class="absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? "bg-green-200 border-green-500 font-bold z-[5]" : "bg-green-50 border-green-200"}"
+            style=${styleMap({
+				left: `${this.pixelsPerMs * segment.start * 1e3}px`,
+				width: `${this.pixelsPerMs * (segment.end - segment.start) * 1e3}px`,
+				height: "100%",
+				top: "0px"
+			})}
+            title="Segment: '${segment.text}' (${segment.start}s - ${segment.end}s)"
+          >
+            ${isCurrentlyActive ? html`<span class="px-0.5 text-[8px] font-bold whitespace-nowrap bg-green-200">${segment.text}</span>` : ""}
+          </div>`;
+		})}
+      </div>
+    </div>`;
+	}
+};
+EFCaptionsSegmentFilmstrip = _decorate([customElement("ef-captions-segment-filmstrip")], EFCaptionsSegmentFilmstrip);
+let EFCaptionsBeforeWordFilmstrip = class EFCaptionsBeforeWordFilmstrip$1 extends FilmstripItem {
+	get captionsTrackStyles() {
+		const parentCaptions = this.element.closest("ef-captions");
+		return {
+			position: "relative",
+			left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,
+			width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`
+		};
+	}
+	render() {
+		const parentCaptions = this.element.closest("ef-captions");
+		const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;
+		if (!captionsData) return html`<div style=${styleMap(this.captionsTrackStyles)}>
+        <div class="bg-slate-300 border border-slate-500 h-[1.1rem] mb-[1px] text-xs">
+          ⬅️ Before
+        </div>
+      </div>`;
+		const rootTimegroup = parentCaptions.rootTimegroup;
+		const currentTimeMs = rootTimegroup?.currentTimeMs || 0;
+		const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;
+		const captionsLocalTimeSec = captionsLocalTimeMs / 1e3;
+		return html`<div style=${styleMap(this.captionsTrackStyles)}>
+      <div class="bg-slate-300 relative border border-slate-500 h-[1.1rem] mb-[1px] w-full">
+        ${captionsData.word_segments.map((word) => {
+			const isCurrentlyActive = captionsLocalTimeSec >= word.start && captionsLocalTimeSec < word.end;
+			return html`<div
+            class="absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? "bg-yellow-200 border-yellow-500 font-bold z-[5]" : "bg-purple-50 border-purple-200"}"
+            style=${styleMap({
+				left: `${this.pixelsPerMs * word.start * 1e3}px`,
+				width: `${this.pixelsPerMs * (word.end - word.start) * 1e3}px`,
+				height: "100%",
+				top: "0px"
+			})}
+            title="Word: '${word.text}' (${word.start}s - ${word.end}s)"
+          >
+            <!-- No text for before tracks - they're redundant -->
+          </div>`;
+		})}
+      </div>
+    </div>`;
+	}
+};
+EFCaptionsBeforeWordFilmstrip = _decorate([customElement("ef-captions-before-word-filmstrip")], EFCaptionsBeforeWordFilmstrip);
+let EFCaptionsAfterWordFilmstrip = class EFCaptionsAfterWordFilmstrip$1 extends FilmstripItem {
+	get captionsTrackStyles() {
+		const parentCaptions = this.element.closest("ef-captions");
+		return {
+			position: "relative",
+			left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,
+			width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`
+		};
+	}
+	render() {
+		const parentCaptions = this.element.closest("ef-captions");
+		const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;
+		if (!captionsData) return html`<div style=${styleMap(this.captionsTrackStyles)}>
+        <div class="bg-slate-300 border border-slate-500 h-[1.1rem] mb-[1px] text-xs">
+          ➡️ After
+        </div>
+      </div>`;
+		const rootTimegroup = parentCaptions.rootTimegroup;
+		const currentTimeMs = rootTimegroup?.currentTimeMs || 0;
+		const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;
+		const captionsLocalTimeSec = captionsLocalTimeMs / 1e3;
+		return html`<div style=${styleMap(this.captionsTrackStyles)}>
+      <div class="bg-slate-300 relative border border-slate-500 h-[1.1rem] mb-[1px] w-full">
+        ${captionsData.word_segments.map((word) => {
+			const isCurrentlyActive = captionsLocalTimeSec >= word.start && captionsLocalTimeSec < word.end;
+			return html`<div
+            class="absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? "bg-yellow-200 border-yellow-500 font-bold z-[5]" : "bg-purple-50 border-purple-200"}"
+            style=${styleMap({
+				left: `${this.pixelsPerMs * word.start * 1e3}px`,
+				width: `${this.pixelsPerMs * (word.end - word.start) * 1e3}px`,
+				height: "100%",
+				top: "0px"
+			})}
+            title="Word: '${word.text}' (${word.start}s - ${word.end}s)"
+          >
+            <!-- No text for after tracks - they're redundant -->
+          </div>`;
+		})}
+      </div>
+    </div>`;
+	}
+};
+EFCaptionsAfterWordFilmstrip = _decorate([customElement("ef-captions-after-word-filmstrip")], EFCaptionsAfterWordFilmstrip);
 let EFWaveformFilmstrip = class EFWaveformFilmstrip$1 extends FilmstripItem {
 	contents() {
 		return html` 🌊 `;
@@ -369,6 +590,22 @@ const renderFilmstripChildren = (children, pixelsPerMs) => {
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
       ></ef-captions-filmstrip>`;
+		if (child instanceof EFCaptionsActiveWord) return html`<ef-captions-active-word-filmstrip
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      ></ef-captions-active-word-filmstrip>`;
+		if (child.tagName === "EF-CAPTIONS-SEGMENT") return html`<ef-captions-segment-filmstrip
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      ></ef-captions-segment-filmstrip>`;
+		if (child.tagName === "EF-CAPTIONS-BEFORE-ACTIVE-WORD") return html`<ef-captions-before-word-filmstrip
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      ></ef-captions-before-word-filmstrip>`;
+		if (child.tagName === "EF-CAPTIONS-AFTER-ACTIVE-WORD") return html`<ef-captions-after-word-filmstrip
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      ></ef-captions-after-word-filmstrip>`;
 		if (child instanceof EFWaveform) return html`<ef-waveform-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
@@ -551,7 +788,7 @@ let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
           @mousedown=${this.startScrub}
         >
           <div
-            class="border-red pointer-events-none absolute z-10 h-full w-[2px] border-r-2 border-red-700"
+            class="border-red pointer-events-none absolute z-[20] h-full w-[2px] border-r-2 border-red-700"
             style=${styleMap({
 			left: `${this.pixelsPerMs * this.currentTimeMs}px`,
 			top: `${this.timelineScrolltop}px`

package/dist/gui/EFPreview.js

@@ -1,11 +1,12 @@
 import { focusedElementContext } from "./focusedElementContext.js";
 import { ContextMixin } from "./ContextMixin.js";
+import { EFTargetable } from "../elements/TargetController.js";
 import { TWMixin } from "./TWMixin2.js";
 import { provide } from "@lit/context";
 import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import _decorate from "@oxc-project/runtime/helpers/decorate";
-let EFPreview = class EFPreview$1 extends ContextMixin(TWMixin(LitElement)) {
+let EFPreview = class EFPreview$1 extends EFTargetable(ContextMixin(TWMixin(LitElement))) {
 	static {
 		this.styles = [css`
       :host {

package/dist/gui/EFScrubber.d.ts

@@ -4,14 +4,15 @@ export declare class EFScrubber extends LitElement {
     static styles: import('lit').CSSResult[];
     context?: ContextMixinInterface | null;
     playing: boolean;
-    private lastTimeUpdateProgress;
+    currentTimeMs: number;
+    durationMs: number;
     private scrubProgress;
-    private isDragging;
+    private isMoving;
     private scrubberRef?;
     private updateProgress;
-    private boundHandleMouseDown;
-    private boundHandleMouseMove;
-    private boundHandleMouseUp;
+    private boundHandlePointerDown;
+    private boundHandlePointerMove;
+    private boundHandlePointerUp;
     render(): import('lit-html').TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;