@editframe/elements 0.30.2-beta.0 → 0.31.0-beta.0

package/dist/gui/EFFilmstrip.js

@@ -1,909 +1,38 @@
-import { loopContext, playingContext } from "./playingContext.js";
 import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { isEFTemporal } from "../elements/EFTemporal.js";
-import { focusContext } from "./focusContext.js";
-import { focusedElementContext } from "./focusedElementContext.js";
 import { targetTemporalContext } from "./ContextMixin.js";
 import { TWMixin } from "./TWMixin2.js";
 import { TargetController } from "../elements/TargetController.js";
-import { TimegroupController } from "../elements/TimegroupController.js";
-import { EFTimegroup } from "../elements/EFTimegroup.js";
-import { EFImage } from "../elements/EFImage.js";
-import { EFAudio } from "../elements/EFAudio.js";
-import { EFVideo } from "../elements/EFVideo.js";
-import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.js";
-import { EFText } from "../elements/EFText.js";
-import { EFTextSegment } from "../elements/EFTextSegment.js";
-import { EFWaveform } from "../elements/EFWaveform.js";
-import { msToTimeCode } from "../msToTimeCode.js";
+import "./timeline/EFTimeline.js";
 import { consume } from "@lit/context";
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, eventOptions, property, state } from "lit/decorators.js";
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
-import { styleMap } from "lit/directives/style-map.js";
 
 //#region src/gui/EFFilmstrip.ts
-var ElementFilmstripController = class {
-	constructor(host, filmstrip) {
-		this.host = host;
-		this.filmstrip = filmstrip;
-		this.host.addController(this);
-	}
-	remove() {
-		this.host.removeController(this);
-	}
-	hostDisconnected() {
-		this.host.removeController(this);
-	}
-	hostUpdated() {
-		this.filmstrip.requestUpdate();
-	}
-};
-const CommonEffectKeys = new Set([
-	"offset",
-	"easing",
-	"composite",
-	"computedOffset"
-]);
-var FilmstripItem = class extends TWMixin(LitElement) {
+let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
 	constructor(..._args) {
 		super(..._args);
-		this.element = new EFTimegroup();
-		this.pixelsPerMs = .04;
-	}
-	static {
-		this.styles = [css`
-      :host {
-        display: block;
-      }
-    `];
-	}
-	get isFocused() {
-		return this.element && this.focusContext?.focusedElement === this.element;
-	}
-	get gutterStyles() {
-		return {
-			position: "relative",
-			left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.sourceStartMs)}px`,
-			width: `${this.pixelsPerMs * (this.element.intrinsicDurationMs ?? this.element.durationMs)}px`
-		};
-	}
-	get trimPortionStyles() {
-		return {
-			width: `${this.pixelsPerMs * this.element.durationMs}px`,
-			left: `${this.pixelsPerMs * this.element.sourceStartMs}px`
-		};
-	}
-	render() {
-		return html`<div style=${styleMap(this.gutterStyles)}>
-      <div
-        style="background-color: var(--filmstrip-bg);"
-        ?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 text-sm"
-          style=${styleMap({
-			...this.trimPortionStyles,
-			backgroundColor: this.isFocused ? "var(--filmstrip-item-focused)" : "var(--filmstrip-item-bg)",
-			borderColor: "var(--filmstrip-border)"
-		})}
-        >
-          ${this.animations()}
-        </div>
-      </div>
-      ${this.renderChildren()}
-    </div>`;
-	}
-	renderChildren() {
-		return renderFilmstripChildren(Array.from(this.element.children), this.pixelsPerMs, this.hideSelectors, this.showSelectors);
-	}
-	contents() {
-		return html``;
-	}
-	animations() {
-		return this.element.getAnimations().map((animation) => {
-			const effect = animation.effect;
-			if (!(effect instanceof KeyframeEffect)) return nothing;
-			const start = effect.getTiming().delay ?? 0;
-			const duration = effect.getTiming().duration;
-			if (duration === null) return nothing;
-			const firstKeyframe = effect.getKeyframes()[0];
-			if (!firstKeyframe) return nothing;
-			const properties = new Set(Object.keys(firstKeyframe));
-			for (const key of CommonEffectKeys) properties.delete(key);
-			return html`<div
-        class="relative h-[5px] opacity-50"
-        label="animation"
-        style=${styleMap({
-				left: `${this.pixelsPerMs * start}px`,
-				width: `${this.pixelsPerMs * Number(duration)}px`,
-				backgroundColor: "var(--filmstrip-animation-bg)"
-			})}
-      >
-        <!-- <div class="text-nowrap">${Array.from(properties).join(" ")}</div> -->
-        ${effect.getKeyframes().map((keyframe) => {
-				return html`<div
-            class="absolute top-0 h-full w-1"
-            style=${styleMap({
-					left: `${this.pixelsPerMs * keyframe.computedOffset * Number(duration)}px`,
-					backgroundColor: "var(--filmstrip-keyframe-bg)"
-				})}
-          ></div>`;
-			})}
-      </div>`;
-		});
-	}
-	update(changedProperties) {
-		if (changedProperties.has("element") && this.element instanceof LitElement) {
-			this.filmstripController?.remove();
-			this.filmstripController = new ElementFilmstripController(this.element, this);
-		}
-		super.update(changedProperties);
-	}
-};
-__decorate([consume({
-	context: focusContext,
-	subscribe: true
-})], FilmstripItem.prototype, "focusContext", void 0);
-__decorate([consume({
-	context: focusedElementContext,
-	subscribe: true
-})], FilmstripItem.prototype, "focusedElement", void 0);
-__decorate([property({
-	type: Object,
-	attribute: false
-})], FilmstripItem.prototype, "element", void 0);
-__decorate([property({ type: Number })], FilmstripItem.prototype, "pixelsPerMs", void 0);
-__decorate([property({
-	type: Array,
-	attribute: false
-})], FilmstripItem.prototype, "hideSelectors", void 0);
-__decorate([property({
-	type: Array,
-	attribute: false
-})], FilmstripItem.prototype, "showSelectors", void 0);
-let EFAudioFilmstrip = class EFAudioFilmstrip$1 extends FilmstripItem {
-	contents() {
-		return html``;
-	}
-};
-EFAudioFilmstrip = __decorate([customElement("ef-audio-filmstrip")], EFAudioFilmstrip);
-let EFVideoFilmstrip = class EFVideoFilmstrip$1 extends FilmstripItem {
-	contents() {
-		return html` 📼 `;
-	}
-};
-EFVideoFilmstrip = __decorate([customElement("ef-video-filmstrip")], EFVideoFilmstrip);
-let EFCaptionsFilmstrip = class EFCaptionsFilmstrip$1 extends FilmstripItem {
-	render() {
-		const captionsData = this.element.unifiedCaptionsDataTask.value;
-		return html`<div style=${styleMap(this.gutterStyles)}>
-      <div
-        class="relative"
-        style="background-color: var(--filmstrip-bg);"
-        ?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 text-sm overflow-hidden"
-          style=${styleMap({
-			...this.trimPortionStyles,
-			backgroundColor: this.isFocused ? "var(--filmstrip-item-focused)" : "var(--filmstrip-item-bg)",
-			borderColor: "var(--filmstrip-border)"
-		})}
-        >
-          📝 ${this.renderCaptionsData(captionsData)}
-        </div>
-      </div>
-      ${this.renderChildren()}
-    </div>`;
-	}
-	renderCaptionsData(captionsData) {
-		if (!captionsData) return html``;
-		const captions = this.element;
-		const captionsLocalTimeSec = ((captions.rootTimegroup?.currentTimeMs || 0) - captions.startTimeMs) / 1e3;
-		return html`${captionsData.segments.map((segment) => {
-			const isActive = captionsLocalTimeSec >= segment.start && captionsLocalTimeSec < segment.end;
-			return html`<div
-        class="absolute border text-xs overflow-hidden flex items-center ${isActive ? "font-bold z-[5]" : ""}"
-        style=${styleMap({
-				left: `${this.pixelsPerMs * segment.start * 1e3}px`,
-				width: `${this.pixelsPerMs * (segment.end - segment.start) * 1e3}px`,
-				height: "100%",
-				top: "0px",
-				backgroundColor: isActive ? "var(--filmstrip-segment-bg)" : "var(--filmstrip-item-bg)",
-				borderColor: isActive ? "var(--filmstrip-segment-border)" : "var(--filmstrip-border)"
-			})}
-        title="Segment: '${segment.text}' (${segment.start}s - ${segment.end}s)"
-      >
-        <span class="px-0.5 text-[8px] ${isActive ? "font-bold" : ""}">${segment.text}</span>
-      </div>`;
-		})}`;
-	}
-	renderChildren() {
-		return renderFilmstripChildren(Array.from(this.element.children), this.pixelsPerMs, this.hideSelectors, this.showSelectors);
-	}
-};
-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="border h-[1.1rem] mb-[1px] text-xs" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
-          🗣️ Active Word
-        </div>
-      </div>`;
-		const captionsLocalTimeSec = ((parentCaptions.rootTimegroup?.currentTimeMs || 0) - parentCaptions.startTimeMs) / 1e3;
-		return html`<div style=${styleMap(this.captionsTrackStyles)}>
-      <div class="relative border h-[1.1rem] mb-[1px] w-full" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
-        ${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 ? "font-bold z-[5]" : ""}"
-            style=${styleMap({
-				left: `${this.pixelsPerMs * word.start * 1e3}px`,
-				width: `${this.pixelsPerMs * (word.end - word.start) * 1e3}px`,
-				height: "100%",
-				top: "0px",
-				backgroundColor: isCurrentlyActive ? "var(--filmstrip-caption-bg)" : "var(--filmstrip-item-bg)",
-				borderColor: isCurrentlyActive ? "var(--filmstrip-caption-border)" : "var(--filmstrip-border)"
-			})}
-            title="Word: '${word.text}' (${word.start}s - ${word.end}s)"
-          >
-            ${isCurrentlyActive ? html`<span class="px-0.5 text-[8px] font-bold whitespace-nowrap" style="background-color: var(--filmstrip-caption-bg);">${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="border h-[1.1rem] mb-[1px] text-xs" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
-          📄 Segment
-        </div>
-      </div>`;
-		const captionsLocalTimeSec = ((parentCaptions.rootTimegroup?.currentTimeMs || 0) - parentCaptions.startTimeMs) / 1e3;
-		return html`<div style=${styleMap(this.captionsTrackStyles)}>
-      <div class="relative border h-[1.1rem] mb-[1px] w-full" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
-        ${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 ? "font-bold z-[5]" : ""}"
-            style=${styleMap({
-				left: `${this.pixelsPerMs * segment.start * 1e3}px`,
-				width: `${this.pixelsPerMs * (segment.end - segment.start) * 1e3}px`,
-				height: "100%",
-				top: "0px",
-				backgroundColor: isCurrentlyActive ? "var(--filmstrip-segment-bg)" : "var(--filmstrip-item-bg)",
-				borderColor: isCurrentlyActive ? "var(--filmstrip-segment-border)" : "var(--filmstrip-border)"
-			})}
-            title="Segment: '${segment.text}' (${segment.start}s - ${segment.end}s)"
-          >
-            ${isCurrentlyActive ? html`<span class="px-0.5 text-[8px] font-bold whitespace-nowrap" style="background-color: var(--filmstrip-segment-bg);">${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="border h-[1.1rem] mb-[1px] text-xs" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
-          ⬅️ Before
-        </div>
-      </div>`;
-		const captionsLocalTimeSec = ((parentCaptions.rootTimegroup?.currentTimeMs || 0) - parentCaptions.startTimeMs) / 1e3;
-		return html`<div style=${styleMap(this.captionsTrackStyles)}>
-      <div class="relative border h-[1.1rem] mb-[1px] w-full" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
-        ${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 ? "font-bold z-[5]" : ""}"
-            style=${styleMap({
-				left: `${this.pixelsPerMs * word.start * 1e3}px`,
-				width: `${this.pixelsPerMs * (word.end - word.start) * 1e3}px`,
-				height: "100%",
-				top: "0px",
-				backgroundColor: isCurrentlyActive ? "var(--filmstrip-caption-bg)" : "var(--filmstrip-waveform-bg)",
-				borderColor: isCurrentlyActive ? "var(--filmstrip-caption-border)" : "var(--filmstrip-waveform-border)"
-			})}
-            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="border h-[1.1rem] mb-[1px] text-xs" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
-          ➡️ After
-        </div>
-      </div>`;
-		const captionsLocalTimeSec = ((parentCaptions.rootTimegroup?.currentTimeMs || 0) - parentCaptions.startTimeMs) / 1e3;
-		return html`<div style=${styleMap(this.captionsTrackStyles)}>
-      <div class="relative border h-[1.1rem] mb-[1px] w-full" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
-        ${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 ? "font-bold z-[5]" : ""}"
-            style=${styleMap({
-				left: `${this.pixelsPerMs * word.start * 1e3}px`,
-				width: `${this.pixelsPerMs * (word.end - word.start) * 1e3}px`,
-				height: "100%",
-				top: "0px",
-				backgroundColor: isCurrentlyActive ? "var(--filmstrip-caption-bg)" : "var(--filmstrip-waveform-bg)",
-				borderColor: isCurrentlyActive ? "var(--filmstrip-caption-border)" : "var(--filmstrip-waveform-border)"
-			})}
-            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` 🌊 `;
-	}
-	renderChildren() {
-		return nothing;
-	}
-};
-EFWaveformFilmstrip = __decorate([customElement("ef-waveform-filmstrip")], EFWaveformFilmstrip);
-let EFTextFilmstrip = class EFTextFilmstrip$1 extends FilmstripItem {
-	render() {
-		const text = this.element;
-		const segments = Array.from(text.querySelectorAll("ef-text-segment"));
-		return html`<div style=${styleMap(this.gutterStyles)}>
-      <div
-        class="relative"
-        style="background-color: var(--filmstrip-bg);"
-        ?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 text-sm overflow-hidden"
-          style=${styleMap({
-			...this.trimPortionStyles,
-			backgroundColor: this.isFocused ? "var(--filmstrip-item-focused)" : "var(--filmstrip-item-bg)",
-			borderColor: "var(--filmstrip-border)"
-		})}
-        >
-          📄 ${this.renderTextSegments(segments)}
-        </div>
-      </div>
-      ${this.renderChildren()}
-    </div>`;
-	}
-	renderTextSegments(segments) {
-		if (segments.length === 0) return html``;
-		const text = this.element;
-		const textLocalTimeMs = (text.rootTimegroup?.currentTimeMs || 0) - text.startTimeMs;
-		return segments.map((segment) => {
-			const isActive = textLocalTimeMs >= segment.segmentStartMs && textLocalTimeMs < segment.segmentEndMs;
-			return html`<div
-        class="absolute border text-xs overflow-hidden flex items-center ${isActive ? "font-bold z-[5]" : ""}"
-        style=${styleMap({
-				left: `${this.pixelsPerMs * segment.segmentStartMs}px`,
-				width: `${this.pixelsPerMs * (segment.segmentEndMs - segment.segmentStartMs)}px`,
-				height: "100%",
-				top: "0px",
-				backgroundColor: isActive ? "var(--filmstrip-segment-bg)" : "var(--filmstrip-item-bg)",
-				borderColor: isActive ? "var(--filmstrip-segment-border)" : "var(--filmstrip-border)"
-			})}
-        title="Segment: '${segment.segmentText}' (${segment.segmentStartMs}ms - ${segment.segmentEndMs}ms)"
-      >
-        <span class="px-0.5 text-[8px] ${isActive ? "font-bold" : ""}">${segment.segmentText}</span>
-      </div>`;
-		});
-	}
-	renderChildren() {
-		return renderFilmstripChildren(Array.from(this.element.children), this.pixelsPerMs, this.hideSelectors, this.showSelectors);
-	}
-};
-EFTextFilmstrip = __decorate([customElement("ef-text-filmstrip")], EFTextFilmstrip);
-let EFTextSegmentFilmstrip = class EFTextSegmentFilmstrip$1 extends FilmstripItem {
-	get textTrackStyles() {
-		const parentText = this.element.closest("ef-text");
-		return {
-			position: "relative",
-			left: `${this.pixelsPerMs * (parentText?.startTimeWithinParentMs || 0)}px`,
-			width: `${this.pixelsPerMs * (parentText?.durationMs || 0)}px`
-		};
-	}
-	render() {
-		const segment = this.element;
-		const parentText = segment.closest("ef-text");
-		if (!parentText) return html`<div style=${styleMap(this.textTrackStyles)}>
-        <div class="border h-[1.1rem] mb-[1px] text-xs" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
-          📄 Text Segment
-        </div>
-      </div>`;
-		const textLocalTimeMs = (parentText.rootTimegroup?.currentTimeMs || 0) - parentText.startTimeMs;
-		const isCurrentlyActive = textLocalTimeMs >= segment.segmentStartMs && textLocalTimeMs < segment.segmentEndMs;
-		return html`<div style=${styleMap(this.textTrackStyles)}>
-      <div class="relative border h-[1.1rem] mb-[1px] w-full" style="background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);">
-        <div
-          class="absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? "font-bold z-[5]" : ""}"
-          style=${styleMap({
-			left: `${this.pixelsPerMs * segment.segmentStartMs}px`,
-			width: `${this.pixelsPerMs * (segment.segmentEndMs - segment.segmentStartMs)}px`,
-			height: "100%",
-			top: "0px",
-			backgroundColor: isCurrentlyActive ? "var(--filmstrip-caption-bg)" : "var(--filmstrip-item-bg)",
-			borderColor: isCurrentlyActive ? "var(--filmstrip-caption-border)" : "var(--filmstrip-border)"
-		})}
-          title="Segment: '${segment.segmentText}' (${segment.segmentStartMs}ms - ${segment.segmentEndMs}ms)"
-        >
-          ${isCurrentlyActive ? html`<span class="px-0.5 text-[8px] font-bold whitespace-nowrap" style="background-color: var(--filmstrip-caption-bg);">${segment.segmentText}</span>` : ""}
-        </div>
-      </div>
-    </div>`;
-	}
-};
-EFTextSegmentFilmstrip = __decorate([customElement("ef-text-segment-filmstrip")], EFTextSegmentFilmstrip);
-let EFImageFilmstrip = class EFImageFilmstrip$1 extends FilmstripItem {
-	contents() {
-		return html` 🖼️ `;
-	}
-};
-EFImageFilmstrip = __decorate([customElement("ef-image-filmstrip")], EFImageFilmstrip);
-let EFTimegroupFilmstrip = class EFTimegroupFilmstrip$1 extends FilmstripItem {
-	contents() {
-		return html`
-      <span>TIME GROUP</span>
-      ${renderFilmstripChildren(Array.from(this.element.children || []), this.pixelsPerMs, this.hideSelectors, this.showSelectors)}
-    </div>
-    `;
-	}
-};
-EFTimegroupFilmstrip = __decorate([customElement("ef-timegroup-filmstrip")], EFTimegroupFilmstrip);
-let EFHTMLFilmstrip = class EFHTMLFilmstrip$1 extends FilmstripItem {
-	contents() {
-		return html`
-      <span>${this.element.tagName}</span>
-      ${renderFilmstripChildren(Array.from(this.element.children || []), this.pixelsPerMs, this.hideSelectors, this.showSelectors)}
-    `;
-	}
-};
-EFHTMLFilmstrip = __decorate([customElement("ef-html-filmstrip")], EFHTMLFilmstrip);
-let EFHierarchyItem = class EFHierarchyItem$1 extends TWMixin(LitElement) {
-	constructor(..._args2) {
-		super(..._args2);
-		this.element = new EFTimegroup();
-	}
-	get icon() {
-		return "📼";
-	}
-	get isFocused() {
-		return this.element && this.focusContext?.focusedElement === this.element;
-	}
-	displayLabel() {
-		return nothing;
-	}
-	render() {
-		return html` 
-      <div>
-        <div
-          class="peer flex h-[1.1rem] items-center overflow-hidden text-nowrap border pl-2 text-xs font-mono"
-          style=${styleMap({
-			backgroundColor: this.isFocused ? "var(--filmstrip-timegroup-focused)" : "var(--filmstrip-timegroup-bg)",
-			borderColor: "var(--filmstrip-border)"
-		})}
-          ?data-focused=${this.isFocused}
-          @mouseenter=${() => {
-			if (this.focusContext) this.focusContext.focusedElement = this.element;
-		}}
-          @mouseleave=${() => {
-			if (this.focusContext) this.focusContext.focusedElement = null;
-		}}
-        >
-          ${this.icon} ${this.displayLabel()}
-        </div>
-        <div
-          class="p-[1px] pb-0 pl-2 pr-0 peer-hover-container peer-data-container"
-          style=${styleMap({ backgroundColor: this.isFocused ? "var(--filmstrip-bg)" : "transparent" })}
-        >
-          ${this.renderChildren()}
-        </div>
-      </div>`;
-	}
-	renderChildren() {
-		return renderHierarchyChildren(Array.from(this.element.children), this.hideSelectors, this.showSelectors);
-	}
-};
-__decorate([property({
-	type: Object,
-	attribute: false
-})], EFHierarchyItem.prototype, "element", void 0);
-__decorate([consume({ context: focusContext })], EFHierarchyItem.prototype, "focusContext", void 0);
-__decorate([consume({
-	context: focusedElementContext,
-	subscribe: true
-})], EFHierarchyItem.prototype, "focusedElement", void 0);
-__decorate([property({
-	type: Array,
-	attribute: false
-})], EFHierarchyItem.prototype, "hideSelectors", void 0);
-__decorate([property({
-	type: Array,
-	attribute: false
-})], EFHierarchyItem.prototype, "showSelectors", void 0);
-EFHierarchyItem = __decorate([customElement("ef-hierarchy-item")], EFHierarchyItem);
-let EFTimegroupHierarchyItem = class EFTimegroupHierarchyItem$1 extends EFHierarchyItem {
-	get icon() {
-		return "🕒";
-	}
-	displayLabel() {
-		return this.element.mode ?? "(no mode)";
-	}
-};
-EFTimegroupHierarchyItem = __decorate([customElement("ef-timegroup-hierarchy-item")], EFTimegroupHierarchyItem);
-let EFAudioHierarchyItem = class EFAudioHierarchyItem$1 extends EFHierarchyItem {
-	get icon() {
-		return "🔊";
-	}
-	displayLabel() {
-		return this.element.src ?? "(no src)";
-	}
-};
-EFAudioHierarchyItem = __decorate([customElement("ef-audio-hierarchy-item")], EFAudioHierarchyItem);
-let EFVideoHierarchyItem = class EFVideoHierarchyItem$1 extends EFHierarchyItem {
-	get icon() {
-		return "📼";
-	}
-	displayLabel() {
-		return this.element.src ?? "(no src)";
-	}
-};
-EFVideoHierarchyItem = __decorate([customElement("ef-video-hierarchy-item")], EFVideoHierarchyItem);
-let EFCaptionsHierarchyItem = class EFCaptionsHierarchyItem$1 extends EFHierarchyItem {
-	get icon() {
-		return "📝 Captions";
-	}
-};
-EFCaptionsHierarchyItem = __decorate([customElement("ef-captions-hierarchy-item")], EFCaptionsHierarchyItem);
-let EFCaptionsActiveWordHierarchyItem = class EFCaptionsActiveWordHierarchyItem$1 extends EFHierarchyItem {
-	get icon() {
-		return "🗣️ Active Word";
-	}
-};
-EFCaptionsActiveWordHierarchyItem = __decorate([customElement("ef-captions-active-word-hierarchy-item")], EFCaptionsActiveWordHierarchyItem);
-let EFTextHierarchyItem = class EFTextHierarchyItem$1 extends EFHierarchyItem {
-	get icon() {
-		return "📄 Text";
-	}
-};
-EFTextHierarchyItem = __decorate([customElement("ef-text-hierarchy-item")], EFTextHierarchyItem);
-let EFTextSegmentHierarchyItem = class EFTextSegmentHierarchyItem$1 extends EFHierarchyItem {
-	get icon() {
-		return "📄 Segment";
-	}
-};
-EFTextSegmentHierarchyItem = __decorate([customElement("ef-text-segment-hierarchy-item")], EFTextSegmentHierarchyItem);
-let EFWaveformHierarchyItem = class EFWaveformHierarchyItem$1 extends EFHierarchyItem {
-	get icon() {
-		return "🌊";
-	}
-	renderChildren() {
-		return nothing;
-	}
-};
-EFWaveformHierarchyItem = __decorate([customElement("ef-waveform-hierarchy-item")], EFWaveformHierarchyItem);
-let EFImageHierarchyItem = class EFImageHierarchyItem$1 extends EFHierarchyItem {
-	get icon() {
-		return "🖼️";
-	}
-	displayLabel() {
-		return this.element.src ?? "(no src)";
-	}
-};
-EFImageHierarchyItem = __decorate([customElement("ef-image-hierarchy-item")], EFImageHierarchyItem);
-let EFHTMLHierarchyItem = class EFHTMLHierarchyItem$1 extends EFHierarchyItem {
-	get icon() {
-		return html`<code>${`<${this.element.tagName.toLowerCase()}>`}</code>`;
-	}
-};
-EFHTMLHierarchyItem = __decorate([customElement("ef-html-hierarchy-item")], EFHTMLHierarchyItem);
-const shouldRenderElement = (element, hideSelectors, showSelectors) => {
-	if (element instanceof HTMLElement && element.dataset?.efHidden) return false;
-	if (showSelectors && showSelectors.length > 0) return showSelectors.some((selector) => {
-		try {
-			return element.matches(selector);
-		} catch {
-			return false;
-		}
-	});
-	if (hideSelectors && hideSelectors.length > 0) return !hideSelectors.some((selector) => {
-		try {
-			return element.matches(selector);
-		} catch {
-			return false;
-		}
-	});
-	return true;
-};
-const renderHierarchyChildren = (children, hideSelectors, showSelectors, skipRootFiltering = false) => {
-	return children.map((child) => {
-		if (!skipRootFiltering && !shouldRenderElement(child, hideSelectors, showSelectors)) return nothing;
-		if (child instanceof EFTimegroup) return html`<ef-timegroup-hierarchy-item
-        .element=${child}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-timegroup-hierarchy-item>`;
-		if (child instanceof EFImage) return html`<ef-image-hierarchy-item
-        .element=${child}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-image-hierarchy-item>`;
-		if (child instanceof EFAudio) return html`<ef-audio-hierarchy-item
-        .element=${child}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-audio-hierarchy-item>`;
-		if (child instanceof EFVideo) return html`<ef-video-hierarchy-item
-        .element=${child}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-video-hierarchy-item>`;
-		if (child instanceof EFCaptions) return html`<ef-captions-hierarchy-item
-        .element=${child}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-captions-hierarchy-item>`;
-		if (child instanceof EFCaptionsActiveWord) return html`<ef-captions-active-word-hierarchy-item
-        .element=${child}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-captions-active-word-hierarchy-item>`;
-		if (child instanceof EFText) return html`<ef-text-hierarchy-item
-        .element=${child}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-text-hierarchy-item>`;
-		if (child instanceof EFTextSegment) return html`<ef-text-segment-hierarchy-item
-        .element=${child}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-text-segment-hierarchy-item>`;
-		if (child instanceof EFWaveform) return html`<ef-waveform-hierarchy-item
-        .element=${child}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-waveform-hierarchy-item>`;
-		return html`<ef-html-hierarchy-item
-      .element=${child}
-      .hideSelectors=${hideSelectors}
-      .showSelectors=${showSelectors}
-    ></ef-html-hierarchy-item>`;
-	});
-};
-const renderFilmstripChildren = (children, pixelsPerMs, hideSelectors, showSelectors, skipRootFiltering = false) => {
-	return children.map((child) => {
-		if (!skipRootFiltering && !shouldRenderElement(child, hideSelectors, showSelectors)) return nothing;
-		if (child instanceof EFTimegroup) return html`<ef-timegroup-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      >
-      </ef-timegroup-filmstrip>`;
-		if (child instanceof EFImage) return html`<ef-image-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-image-filmstrip>`;
-		if (child instanceof EFAudio) return html`<ef-audio-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-audio-filmstrip>`;
-		if (child instanceof EFVideo) return html`<ef-video-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-video-filmstrip>`;
-		if (child instanceof EFCaptions) return html`<ef-captions-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-captions-filmstrip>`;
-		if (child instanceof EFCaptionsActiveWord) return html`<ef-captions-active-word-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-captions-active-word-filmstrip>`;
-		if (child instanceof EFText) return html`<ef-text-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-text-filmstrip>`;
-		if (child instanceof EFTextSegment) return html`<ef-text-segment-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-text-segment-filmstrip>`;
-		if (child.tagName === "EF-CAPTIONS-SEGMENT") return html`<ef-captions-segment-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-captions-segment-filmstrip>`;
-		if (child.tagName === "EF-CAPTIONS-BEFORE-ACTIVE-WORD") return html`<ef-captions-before-word-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-captions-before-word-filmstrip>`;
-		if (child.tagName === "EF-CAPTIONS-AFTER-ACTIVE-WORD") return html`<ef-captions-after-word-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-captions-after-word-filmstrip>`;
-		if (child instanceof EFWaveform) return html`<ef-waveform-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-        .hideSelectors=${hideSelectors}
-        .showSelectors=${showSelectors}
-      ></ef-waveform-filmstrip>`;
-		return html`<ef-html-filmstrip
-      .element=${child}
-      .pixelsPerMs=${pixelsPerMs}
-      .hideSelectors=${hideSelectors}
-      .showSelectors=${showSelectors}
-    ></ef-html-filmstrip>`;
-	});
-};
-let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
-	constructor(..._args3) {
-		super(..._args3);
+		this.target = "";
 		this.pixelsPerMs = .04;
+		this.hidePlayhead = false;
+		this.disableInternalScroll = false;
 		this.hide = "";
 		this.show = "";
-		this.scrubbing = false;
-		this.capturedPointerId = null;
-		this.timelineScrolltop = 0;
-		this.currentTimeMs = 0;
-		this.autoScale = false;
-		this.resizeObserver = new ResizeObserver(() => {
-			if (this.autoScale) this.updatePixelsPerMs();
-		});
-		this.gutterRef = createRef();
-		this.hierarchyRef = createRef();
-		this.playheadRef = createRef();
-		this.target = "";
 		this.targetElement = null;
+		this.timelineRef = createRef();
 	}
-	static {
-		this.styles = [css`
-      :host {
-        display: block;
-        overflow: hidden;
-        width: 100%;
-        height: 100%;
-        
-        /* Light mode colors */
-        --filmstrip-bg: rgb(203 213 225); /* slate-300 */
-        --filmstrip-border: rgb(100 116 139); /* slate-500 */
-        --filmstrip-item-bg: rgb(191 219 254); /* blue-200 */
-        --filmstrip-item-focused: rgb(148 163 184); /* slate-400 */
-        --filmstrip-animation-bg: rgb(59 130 246); /* blue-500 */
-        --filmstrip-keyframe-bg: rgb(239 68 68); /* red-500 */
-        --filmstrip-caption-bg: rgb(254 240 138); /* yellow-200 */
-        --filmstrip-caption-border: rgb(234 179 8); /* yellow-500 */
-        --filmstrip-segment-bg: rgb(187 247 208); /* green-200 */
-        --filmstrip-segment-border: rgb(34 197 94); /* green-500 */
-        --filmstrip-waveform-bg: rgb(250 245 255); /* purple-50 */
-        --filmstrip-waveform-border: rgb(233 213 255); /* purple-200 */
-        --filmstrip-timegroup-bg: rgb(226 232 240); /* slate-200 */
-        --filmstrip-timegroup-hover: rgb(148 163 184); /* slate-400 */
-        --filmstrip-timegroup-focused: rgb(148 163 184); /* slate-400 */
-        --filmstrip-gutter-bg: rgb(241 245 249); /* slate-100 */
-        --filmstrip-timeline-bg: rgb(226 232 240); /* slate-200 */
-        --filmstrip-playhead: rgb(185 28 28); /* red-700 */
-      }
-      
-      :host(.dark), :host-context(.dark) {
-        /* Dark mode colors */
-        --filmstrip-bg: rgb(71 85 105); /* slate-600 */
-        --filmstrip-border: rgb(148 163 184); /* slate-400 */
-        --filmstrip-item-bg: rgb(30 64 175); /* blue-800 */
-        --filmstrip-item-focused: rgb(100 116 139); /* slate-500 */
-        --filmstrip-animation-bg: rgb(96 165 250); /* blue-400 */
-        --filmstrip-keyframe-bg: rgb(248 113 113); /* red-400 */
-        --filmstrip-caption-bg: rgb(133 77 14); /* yellow-800 */
-        --filmstrip-caption-border: rgb(250 204 21); /* yellow-400 */
-        --filmstrip-segment-bg: rgb(22 101 52); /* green-800 */
-        --filmstrip-segment-border: rgb(74 222 128); /* green-400 */
-        --filmstrip-waveform-bg: rgb(88 28 135); /* purple-900 */
-        --filmstrip-waveform-border: rgb(126 34 206); /* purple-700 */
-        --filmstrip-timegroup-bg: rgb(51 65 85); /* slate-700 */
-        --filmstrip-timegroup-hover: rgb(100 116 139); /* slate-500 */
-        --filmstrip-timegroup-focused: rgb(100 116 139); /* slate-500 */
-        --filmstrip-gutter-bg: rgb(30 41 59); /* slate-800 */
-        --filmstrip-timeline-bg: rgb(51 65 85); /* slate-700 */
-        --filmstrip-playhead: rgb(239 68 68); /* red-500 */
-      }
-    `];
+	#targetController;
+	#lastTargetTemporal;
+	get targetTemporal() {
+		const fromTarget = this.targetElement && isEFTemporal(this.targetElement) ? this.targetElement : null;
+		const fromContext = this._contextProvidedTemporal;
+		if (fromTarget && fromContext && fromTarget !== fromContext) console.warn("EFFilmstrip: Both target attribute and parent context found. Using target attribute.", {
+			target: this.target,
+			fromTarget,
+			fromContext
+		});
+		return fromTarget ?? fromContext ?? null;
 	}
 	get hideSelectors() {
 		if (!this.hide) return void 0;
@@ -915,280 +44,52 @@ let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		this.#bindToTargetTimegroup();
-		window.addEventListener("keypress", this.#handleKeyPress);
-		this.resizeObserver.observe(this);
 		if (this.target) this.#targetController = new TargetController(this);
 	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		window.removeEventListener("keypress", this.#handleKeyPress);
-		this.resizeObserver.disconnect();
-	}
-	updatePixelsPerMs() {
-		const target = this.targetTemporal;
-		const gutter = this.gutterRef.value;
-		if (target && gutter && gutter.clientWidth > 0) this.pixelsPerMs = gutter.clientWidth / (target.durationMs || 1);
-	}
-	#bindToTargetTimegroup() {
-		if (this.timegroupController) this.timegroupController.remove();
-		const target = this.targetTemporal;
-		if (target) {
-			this.timegroupController = new TimegroupController(target, this);
-			this.currentTimeMs = target.currentTimeMs;
-		}
-	}
-	#handleKeyPress = (event) => {
-		if (event.key === " ") {
-			const [target] = event.composedPath();
-			if (target?.closest("input, textarea, button, select, a, [contenteditable]")) return;
-			event.preventDefault();
-			if (this.#contextElement) this.#contextElement.playing = !this.#contextElement.playing;
-		}
-	};
-	syncGutterScroll() {
-		if (this.gutter && this.hierarchyRef.value) {
-			this.hierarchyRef.value.scrollTop = this.gutter.scrollTop;
-			this.timelineScrolltop = this.gutter.scrollTop;
-		}
-	}
-	syncHierarchyScroll() {
-		if (this.gutter && this.hierarchyRef.value) {
-			this.gutter.scrollTop = this.hierarchyRef.value.scrollTop;
-			this.timelineScrolltop = this.hierarchyRef.value.scrollTop;
-		}
-	}
-	scrub(e) {
-		if (this.playing) return;
-		if (!this.scrubbing) return;
-		if (this.capturedPointerId !== null && e.pointerId !== this.capturedPointerId) return;
-		e.preventDefault();
-		e.stopPropagation();
-		this.applyScrub(e);
-	}
-	startScrub(e) {
-		e.preventDefault();
-		e.stopPropagation();
-		this.scrubbing = true;
-		this.capturedPointerId = e.pointerId;
-		const target = e.currentTarget;
-		if (target) try {
-			target.setPointerCapture(e.pointerId);
-		} catch (err) {
-			console.warn("Failed to set pointer capture:", err);
-		}
-		queueMicrotask(() => {
-			this.applyScrub(e);
-		});
-		const handlePointerUp = (upEvent) => {
-			if (upEvent.pointerId === this.capturedPointerId) {
-				upEvent.preventDefault();
-				upEvent.stopPropagation();
-				if (target) try {
-					target.releasePointerCapture(upEvent.pointerId);
-				} catch (_err) {}
-				this.capturedPointerId = null;
-				this.scrubbing = false;
-				removeEventListener("pointerup", handlePointerUp);
-			}
-		};
-		const handlePointerCancel = (cancelEvent) => {
-			if (cancelEvent.pointerId === this.capturedPointerId) {
-				if (target) try {
-					target.releasePointerCapture(cancelEvent.pointerId);
-				} catch (_err) {}
-				this.capturedPointerId = null;
-				this.scrubbing = false;
-				removeEventListener("pointercancel", handlePointerCancel);
-			}
-		};
-		addEventListener("pointerup", handlePointerUp, {
-			once: true,
-			passive: false
-		});
-		addEventListener("pointercancel", handlePointerCancel, {
-			once: true,
-			passive: false
-		});
-	}
-	handleContextMenu(e) {
-		if (this.scrubbing) {
-			e.preventDefault();
-			e.stopPropagation();
-		}
-	}
-	applyScrub(e) {
-		const gutter = this.shadowRoot?.querySelector("#gutter");
-		if (!gutter) return;
-		const rect = gutter.getBoundingClientRect();
-		if (this.targetTemporal) {
-			const scrubTimeMs = (e.pageX - rect.left + gutter.scrollLeft) / this.pixelsPerMs;
-			this.targetTemporal.currentTimeMs = scrubTimeMs;
-		}
-	}
-	scrollScrub(e) {
-		if (this.targetTemporal && this.gutter && !this.playing) {
-			if (e.deltaX !== 0) e.preventDefault();
-			if (this.gutterRef.value && this.gutterRef.value.scrollLeft === 0 && e.deltaX < 0) {
-				this.gutter.scrollBy(0, e.deltaY);
-				return;
-			}
-			if (this.gutter.scrollWidth - this.gutter.scrollLeft === this.gutter.clientWidth && e.deltaX > 0) {
-				this.gutter.scrollBy(0, e.deltaY);
-				return;
-			}
-			if (this) {
-				this.gutter.scrollBy(e.deltaX, e.deltaY);
-				this.targetTemporal.currentTimeMs += e.deltaX / this.pixelsPerMs;
-			}
-		}
-	}
-	get gutter() {
-		return this.gutterRef.value;
-	}
-	render() {
-		const target = this.targetTemporal;
-		return html` <div
-      class="grid h-full"
-      style=${styleMap({
-			gridTemplateColumns: "200px 1fr",
-			gridTemplateRows: "1.5rem 1fr",
-			backgroundColor: "var(--filmstrip-gutter-bg)"
-		})}
-    >
-      <div
-        class="z-20 col-span-2 shadow"
-        style="background-color: var(--filmstrip-gutter-bg); border-bottom-color: var(--filmstrip-border);"
-      >
-        ${!this.autoScale ? html`<input
-              type="range"
-              .value=${this.pixelsPerMs}
-              min="0.01"
-              max="0.1"
-              step="0.001"
-              @input=${(e) => {
-			const target$1 = e.target;
-			this.pixelsPerMs = Number.parseFloat(target$1.value);
-		}}
-            />` : nothing}
-        <code>${msToTimeCode(this.currentTimeMs, true)} </code> /
-        <code>${msToTimeCode(target?.durationMs ?? 0, true)}</code>
-        <ef-toggle-play class="inline-block mx-2">
-          <div slot="pause"> 
-            <button>⏸️</button>
-          </div>
-          <div slot="play">
-            <button>▶️</button>
-          </div>
-        </ef-toggle-play>
-        <ef-toggle-loop><button>${this.loop ? "🔁" : html`<span class="opacity-50 line-through">🔁</span>`}</button></ef-toggle-loop>
-      </div>
-      <div
-        class="z-10 pl-1 pr-1 pt-[8px] shadow overflow-auto"
-        ${ref(this.hierarchyRef)}
-        @scroll=${this.syncHierarchyScroll}
-      >
-        ${renderHierarchyChildren(target ? [target] : [], this.hideSelectors, this.showSelectors, true)}
-      </div>
-      <div
-        class="flex h-full w-full cursor-crosshair overflow-auto pt-[8px] touch-pan-x"
-        style="background-color: var(--filmstrip-timeline-bg);"
-        id="gutter"
-        ${ref(this.gutterRef)}
-        @scroll=${this.syncGutterScroll}
-        @wheel=${this.scrollScrub}
-      >
-        <div
-          class="relative h-full w-full touch-none"
-          style="width: ${this.pixelsPerMs * (target?.durationMs ?? 0)}px; touch-action: none; user-select: none;"
-          @pointermove=${this.scrub}
-          @pointerdown=${this.startScrub}
-          @contextmenu=${this.handleContextMenu}
-        >
-          <div
-            class="border-red pointer-events-none absolute z-[20] h-full w-[2px] border-r-2"
-            style=${styleMap({
-			left: `${this.pixelsPerMs * this.currentTimeMs}px`,
-			top: `${this.timelineScrolltop}px`,
-			borderColor: "var(--filmstrip-playhead)"
-		})}
-            ${ref(this.playheadRef)}
-          ></div>
-
-          ${renderFilmstripChildren(target ? [target] : [], this.pixelsPerMs, this.hideSelectors, this.showSelectors, true)}
-        </div>
-      </div>
-    </div>`;
-	}
-	updated(changes) {
-		if (!this.targetTemporal) return;
-		if (changes.has("currentTimeMs")) {
-			if (this.targetTemporal.currentTimeMs !== this.currentTimeMs) this.targetTemporal.currentTimeMs = this.currentTimeMs;
-		}
-	}
-	get #contextElement() {
-		return this.closest("ef-workbench, ef-preview");
-	}
-	#targetController;
-	#lastTargetTemporal;
-	get targetTemporal() {
-		const fromTarget = this.targetElement && isEFTemporal(this.targetElement) ? this.targetElement : null;
-		const fromContext = this._contextProvidedTemporal;
-		if (fromTarget && fromContext && fromTarget !== fromContext) console.warn("EFFilmstrip: Both target attribute and parent context found. Using target attribute.", {
-			target: this.target,
-			fromTarget,
-			fromContext
-		});
-		return fromTarget ?? fromContext ?? null;
-	}
 	willUpdate(changedProperties) {
 		if (changedProperties.has("target")) {
 			if (this.target && !this.#targetController) this.#targetController = new TargetController(this);
 		}
 		const currentTargetTemporal = this.targetTemporal;
-		if (this.#lastTargetTemporal !== currentTargetTemporal) {
-			this.#bindToTargetTimegroup();
-			this.#lastTargetTemporal = currentTargetTemporal;
-		}
-		if (this.autoScale) this.updatePixelsPerMs();
+		if (this.#lastTargetTemporal !== currentTargetTemporal) this.#lastTargetTemporal = currentTargetTemporal;
 		super.willUpdate(changedProperties);
 	}
+	render() {
+		const targetId = this.targetTemporal ? this.targetTemporal.id || this.target : this.target;
+		return html`
+      <ef-timeline
+        ${ref(this.timelineRef)}
+        target=${targetId}
+        control-target=${targetId}
+        pixels-per-ms=${this.pixelsPerMs}
+        ?show-playhead=${!this.hidePlayhead}
+        ?show-controls=${false}
+        ?show-ruler=${false}
+        ?show-hierarchy=${true}
+        ?show-playback-controls=${false}
+        ?show-zoom-controls=${false}
+        ?show-time-display=${false}
+        hide=${this.hide}
+        show=${this.show}
+      ></ef-timeline>
+    `;
+	}
 };
-__decorate([property({ type: Number })], EFFilmstrip.prototype, "pixelsPerMs", void 0);
-__decorate([property({ type: String })], EFFilmstrip.prototype, "hide", void 0);
-__decorate([property({ type: String })], EFFilmstrip.prototype, "show", void 0);
-__decorate([state()], EFFilmstrip.prototype, "scrubbing", void 0);
-__decorate([state()], EFFilmstrip.prototype, "timelineScrolltop", void 0);
-__decorate([consume({
-	context: playingContext,
-	subscribe: true
-}), state()], EFFilmstrip.prototype, "playing", void 0);
-__decorate([consume({
-	context: loopContext,
-	subscribe: true
-}), state()], EFFilmstrip.prototype, "loop", void 0);
-__decorate([state()], EFFilmstrip.prototype, "currentTimeMs", void 0);
+__decorate([property({ type: String })], EFFilmstrip.prototype, "target", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "pixels-per-ms"
+})], EFFilmstrip.prototype, "pixelsPerMs", void 0);
 __decorate([property({
 	type: Boolean,
-	reflect: true,
-	attribute: "auto-scale"
-})], EFFilmstrip.prototype, "autoScale", void 0);
-__decorate([eventOptions({ passive: false })], EFFilmstrip.prototype, "syncGutterScroll", null);
-__decorate([eventOptions({ passive: false })], EFFilmstrip.prototype, "syncHierarchyScroll", null);
-__decorate([eventOptions({
-	capture: false,
-	passive: false
-})], EFFilmstrip.prototype, "scrub", null);
-__decorate([eventOptions({
-	capture: false,
-	passive: false
-})], EFFilmstrip.prototype, "startScrub", null);
-__decorate([eventOptions({
-	passive: false,
-	capture: false
-})], EFFilmstrip.prototype, "handleContextMenu", null);
-__decorate([eventOptions({ passive: false })], EFFilmstrip.prototype, "scrollScrub", null);
-__decorate([property({ type: String })], EFFilmstrip.prototype, "target", void 0);
+	attribute: "hide-playhead"
+})], EFFilmstrip.prototype, "hidePlayhead", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "disable-internal-scroll"
+})], EFFilmstrip.prototype, "disableInternalScroll", void 0);
+__decorate([property({ type: String })], EFFilmstrip.prototype, "hide", void 0);
+__decorate([property({ type: String })], EFFilmstrip.prototype, "show", void 0);
 __decorate([state()], EFFilmstrip.prototype, "targetElement", void 0);
 __decorate([consume({
 	context: targetTemporalContext,