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

package/dist/gui/EFFilmstrip.js

@@ -1,11 +1,14 @@
+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 { loopContext, playingContext } from "./playingContext.js";
-import { targetTimegroupContext } from "./ContextMixin.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 { TWMixin } from "./TWMixin2.js";
 import { EFAudio } from "../elements/EFAudio.js";
 import { EFVideo } from "../elements/EFVideo.js";
 import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.js";
@@ -14,7 +17,6 @@ import { msToTimeCode } from "../msToTimeCode.js";
 import { consume } from "@lit/context";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, eventOptions, property, state } from "lit/decorators.js";
-import _decorate from "@oxc-project/runtime/helpers/decorate";
 import { createRef, ref } from "lit/directives/ref.js";
 import { styleMap } from "lit/directives/style-map.js";
 var ElementFilmstripController = class {
@@ -33,7 +35,7 @@ var ElementFilmstripController = class {
 		this.filmstrip.requestUpdate();
 	}
 };
-const CommonEffectKeys = new Set([
+var CommonEffectKeys = new Set([
 	"offset",
 	"easing",
 	"composite",
@@ -92,21 +94,19 @@ var FilmstripItem = class extends TWMixin(LitElement) {
     </div>`;
 	}
 	renderChildren() {
-		return renderFilmstripChildren(Array.from(this.element.children), this.pixelsPerMs);
+		return renderFilmstripChildren(Array.from(this.element.children), this.pixelsPerMs, this.hideSelectors, this.showSelectors);
 	}
 	contents() {
 		return html``;
 	}
 	animations() {
-		const animations = this.element.getAnimations();
-		return animations.map((animation) => {
+		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 keyframes = effect.getKeyframes();
-			const firstKeyframe = keyframes[0];
+			const firstKeyframe = effect.getKeyframes()[0];
 			if (!firstKeyframe) return nothing;
 			const properties = new Set(Object.keys(firstKeyframe));
 			for (const key of CommonEffectKeys) properties.delete(key);
@@ -136,35 +136,42 @@ var FilmstripItem = class extends TWMixin(LitElement) {
 		super.update(changedProperties);
 	}
 };
-_decorate([consume({
+__decorate([consume({
 	context: focusContext,
 	subscribe: true
 })], FilmstripItem.prototype, "focusContext", void 0);
-_decorate([consume({
+__decorate([consume({
 	context: focusedElementContext,
 	subscribe: true
 })], FilmstripItem.prototype, "focusedElement", void 0);
-_decorate([property({
+__decorate([property({
 	type: Object,
 	attribute: false
 })], FilmstripItem.prototype, "element", void 0);
-_decorate([property({ type: Number })], FilmstripItem.prototype, "pixelsPerMs", void 0);
-let EFAudioFilmstrip = class EFAudioFilmstrip$1 extends FilmstripItem {
+__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);
+var EFAudioFilmstrip = class EFAudioFilmstrip$1 extends FilmstripItem {
 	contents() {
 		return html``;
 	}
 };
-EFAudioFilmstrip = _decorate([customElement("ef-audio-filmstrip")], EFAudioFilmstrip);
-let EFVideoFilmstrip = class EFVideoFilmstrip$1 extends FilmstripItem {
+EFAudioFilmstrip = __decorate([customElement("ef-audio-filmstrip")], EFAudioFilmstrip);
+var EFVideoFilmstrip = class EFVideoFilmstrip$1 extends FilmstripItem {
 	contents() {
 		return html` 📼 `;
 	}
 };
-EFVideoFilmstrip = _decorate([customElement("ef-video-filmstrip")], EFVideoFilmstrip);
-let EFCaptionsFilmstrip = class EFCaptionsFilmstrip$1 extends FilmstripItem {
+EFVideoFilmstrip = __decorate([customElement("ef-video-filmstrip")], EFVideoFilmstrip);
+var EFCaptionsFilmstrip = class EFCaptionsFilmstrip$1 extends FilmstripItem {
 	render() {
-		const captions = this.element;
-		const captionsData = captions.unifiedCaptionsDataTask.value;
+		const captionsData = this.element.unifiedCaptionsDataTask.value;
 		return html`<div style=${styleMap(this.gutterStyles)}>
       <div
         class="bg-slate-300 relative"
@@ -190,11 +197,8 @@ let EFCaptionsFilmstrip = class EFCaptionsFilmstrip$1 extends FilmstripItem {
 	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 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 border-slate-600 text-xs overflow-hidden flex items-center ${isActive ? "bg-green-200 border-green-500 font-bold z-[5]" : "bg-slate-100"}"
@@ -208,15 +212,14 @@ let EFCaptionsFilmstrip = class EFCaptionsFilmstrip$1 extends FilmstripItem {
       >
         <span class="px-0.5 text-[8px] ${isActive ? "font-bold" : ""}">${segment.text}</span>
       </div>`;
-		});
-		return html`${segmentElements}`;
+		})}`;
 	}
 	renderChildren() {
-		return super.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 {
+EFCaptionsFilmstrip = __decorate([customElement("ef-captions-filmstrip")], EFCaptionsFilmstrip);
+var EFCaptionsActiveWordFilmstrip = class EFCaptionsActiveWordFilmstrip$1 extends FilmstripItem {
 	get captionsTrackStyles() {
 		const parentCaptions = this.element.closest("ef-captions");
 		return {
@@ -233,10 +236,7 @@ let EFCaptionsActiveWordFilmstrip = class EFCaptionsActiveWordFilmstrip$1 extend
           🗣️ Active Word
         </div>
       </div>`;
-		const rootTimegroup = parentCaptions.rootTimegroup;
-		const currentTimeMs = rootTimegroup?.currentTimeMs || 0;
-		const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;
-		const captionsLocalTimeSec = captionsLocalTimeMs / 1e3;
+		const captionsLocalTimeSec = ((parentCaptions.rootTimegroup?.currentTimeMs || 0) - parentCaptions.startTimeMs) / 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) => {
@@ -258,8 +258,8 @@ let EFCaptionsActiveWordFilmstrip = class EFCaptionsActiveWordFilmstrip$1 extend
     </div>`;
 	}
 };
-EFCaptionsActiveWordFilmstrip = _decorate([customElement("ef-captions-active-word-filmstrip")], EFCaptionsActiveWordFilmstrip);
-let EFCaptionsSegmentFilmstrip = class EFCaptionsSegmentFilmstrip$1 extends FilmstripItem {
+EFCaptionsActiveWordFilmstrip = __decorate([customElement("ef-captions-active-word-filmstrip")], EFCaptionsActiveWordFilmstrip);
+var EFCaptionsSegmentFilmstrip = class EFCaptionsSegmentFilmstrip$1 extends FilmstripItem {
 	get captionsTrackStyles() {
 		const parentCaptions = this.element.closest("ef-captions");
 		return {
@@ -276,10 +276,7 @@ let EFCaptionsSegmentFilmstrip = class EFCaptionsSegmentFilmstrip$1 extends Film
           📄 Segment
         </div>
       </div>`;
-		const rootTimegroup = parentCaptions.rootTimegroup;
-		const currentTimeMs = rootTimegroup?.currentTimeMs || 0;
-		const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;
-		const captionsLocalTimeSec = captionsLocalTimeMs / 1e3;
+		const captionsLocalTimeSec = ((parentCaptions.rootTimegroup?.currentTimeMs || 0) - parentCaptions.startTimeMs) / 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) => {
@@ -301,8 +298,8 @@ let EFCaptionsSegmentFilmstrip = class EFCaptionsSegmentFilmstrip$1 extends Film
     </div>`;
 	}
 };
-EFCaptionsSegmentFilmstrip = _decorate([customElement("ef-captions-segment-filmstrip")], EFCaptionsSegmentFilmstrip);
-let EFCaptionsBeforeWordFilmstrip = class EFCaptionsBeforeWordFilmstrip$1 extends FilmstripItem {
+EFCaptionsSegmentFilmstrip = __decorate([customElement("ef-captions-segment-filmstrip")], EFCaptionsSegmentFilmstrip);
+var EFCaptionsBeforeWordFilmstrip = class EFCaptionsBeforeWordFilmstrip$1 extends FilmstripItem {
 	get captionsTrackStyles() {
 		const parentCaptions = this.element.closest("ef-captions");
 		return {
@@ -319,16 +316,12 @@ let EFCaptionsBeforeWordFilmstrip = class EFCaptionsBeforeWordFilmstrip$1 extend
           ⬅️ Before
         </div>
       </div>`;
-		const rootTimegroup = parentCaptions.rootTimegroup;
-		const currentTimeMs = rootTimegroup?.currentTimeMs || 0;
-		const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;
-		const captionsLocalTimeSec = captionsLocalTimeMs / 1e3;
+		const captionsLocalTimeSec = ((parentCaptions.rootTimegroup?.currentTimeMs || 0) - parentCaptions.startTimeMs) / 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"}"
+            class="absolute border text-xs overflow-visible flex items-center ${captionsLocalTimeSec >= word.start && captionsLocalTimeSec < word.end ? "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`,
@@ -344,8 +337,8 @@ let EFCaptionsBeforeWordFilmstrip = class EFCaptionsBeforeWordFilmstrip$1 extend
     </div>`;
 	}
 };
-EFCaptionsBeforeWordFilmstrip = _decorate([customElement("ef-captions-before-word-filmstrip")], EFCaptionsBeforeWordFilmstrip);
-let EFCaptionsAfterWordFilmstrip = class EFCaptionsAfterWordFilmstrip$1 extends FilmstripItem {
+EFCaptionsBeforeWordFilmstrip = __decorate([customElement("ef-captions-before-word-filmstrip")], EFCaptionsBeforeWordFilmstrip);
+var EFCaptionsAfterWordFilmstrip = class EFCaptionsAfterWordFilmstrip$1 extends FilmstripItem {
 	get captionsTrackStyles() {
 		const parentCaptions = this.element.closest("ef-captions");
 		return {
@@ -362,16 +355,12 @@ let EFCaptionsAfterWordFilmstrip = class EFCaptionsAfterWordFilmstrip$1 extends
           ➡️ After
         </div>
       </div>`;
-		const rootTimegroup = parentCaptions.rootTimegroup;
-		const currentTimeMs = rootTimegroup?.currentTimeMs || 0;
-		const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;
-		const captionsLocalTimeSec = captionsLocalTimeMs / 1e3;
+		const captionsLocalTimeSec = ((parentCaptions.rootTimegroup?.currentTimeMs || 0) - parentCaptions.startTimeMs) / 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"}"
+            class="absolute border text-xs overflow-visible flex items-center ${captionsLocalTimeSec >= word.start && captionsLocalTimeSec < word.end ? "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`,
@@ -387,8 +376,8 @@ let EFCaptionsAfterWordFilmstrip = class EFCaptionsAfterWordFilmstrip$1 extends
     </div>`;
 	}
 };
-EFCaptionsAfterWordFilmstrip = _decorate([customElement("ef-captions-after-word-filmstrip")], EFCaptionsAfterWordFilmstrip);
-let EFWaveformFilmstrip = class EFWaveformFilmstrip$1 extends FilmstripItem {
+EFCaptionsAfterWordFilmstrip = __decorate([customElement("ef-captions-after-word-filmstrip")], EFCaptionsAfterWordFilmstrip);
+var EFWaveformFilmstrip = class EFWaveformFilmstrip$1 extends FilmstripItem {
 	contents() {
 		return html` 🌊 `;
 	}
@@ -396,33 +385,33 @@ let EFWaveformFilmstrip = class EFWaveformFilmstrip$1 extends FilmstripItem {
 		return nothing;
 	}
 };
-EFWaveformFilmstrip = _decorate([customElement("ef-waveform-filmstrip")], EFWaveformFilmstrip);
-let EFImageFilmstrip = class EFImageFilmstrip$1 extends FilmstripItem {
+EFWaveformFilmstrip = __decorate([customElement("ef-waveform-filmstrip")], EFWaveformFilmstrip);
+var EFImageFilmstrip = class EFImageFilmstrip$1 extends FilmstripItem {
 	contents() {
 		return html` 🖼️ `;
 	}
 };
-EFImageFilmstrip = _decorate([customElement("ef-image-filmstrip")], EFImageFilmstrip);
-let EFTimegroupFilmstrip = class EFTimegroupFilmstrip$1 extends FilmstripItem {
+EFImageFilmstrip = __decorate([customElement("ef-image-filmstrip")], EFImageFilmstrip);
+var EFTimegroupFilmstrip = class EFTimegroupFilmstrip$1 extends FilmstripItem {
 	contents() {
 		return html`
       <span>TIME GROUP</span>
-      ${renderFilmstripChildren(Array.from(this.element.children || []), this.pixelsPerMs)}
+      ${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 {
+EFTimegroupFilmstrip = __decorate([customElement("ef-timegroup-filmstrip")], EFTimegroupFilmstrip);
+var EFHTMLFilmstrip = class EFHTMLFilmstrip$1 extends FilmstripItem {
 	contents() {
 		return html`
       <span>${this.element.tagName}</span>
-      ${renderFilmstripChildren(Array.from(this.element.children || []), this.pixelsPerMs)}
+      ${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) {
+EFHTMLFilmstrip = __decorate([customElement("ef-html-filmstrip")], EFHTMLFilmstrip);
+var EFHierarchyItem = class EFHierarchyItem$1 extends TWMixin(LitElement) {
 	constructor(..._args2) {
 		super(..._args2);
 		this.element = new EFTimegroup();
@@ -461,20 +450,28 @@ let EFHierarchyItem = class EFHierarchyItem$1 extends TWMixin(LitElement) {
       </div>`;
 	}
 	renderChildren() {
-		return renderHierarchyChildren(Array.from(this.element.children));
+		return renderHierarchyChildren(Array.from(this.element.children), this.hideSelectors, this.showSelectors);
 	}
 };
-_decorate([property({
+__decorate([property({
 	type: Object,
 	attribute: false
 })], EFHierarchyItem.prototype, "element", void 0);
-_decorate([consume({ context: focusContext })], EFHierarchyItem.prototype, "focusContext", void 0);
-_decorate([consume({
+__decorate([consume({ context: focusContext })], EFHierarchyItem.prototype, "focusContext", void 0);
+__decorate([consume({
 	context: focusedElementContext,
 	subscribe: true
 })], EFHierarchyItem.prototype, "focusedElement", void 0);
-EFHierarchyItem = _decorate([customElement("ef-hierarchy-item")], EFHierarchyItem);
-let EFTimegroupHierarchyItem = class EFTimegroupHierarchyItem$1 extends EFHierarchyItem {
+__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);
+var EFTimegroupHierarchyItem = class EFTimegroupHierarchyItem$1 extends EFHierarchyItem {
 	get icon() {
 		return "🕒";
 	}
@@ -482,8 +479,8 @@ let EFTimegroupHierarchyItem = class EFTimegroupHierarchyItem$1 extends EFHierar
 		return this.element.mode ?? "(no mode)";
 	}
 };
-EFTimegroupHierarchyItem = _decorate([customElement("ef-timegroup-hierarchy-item")], EFTimegroupHierarchyItem);
-let EFAudioHierarchyItem = class EFAudioHierarchyItem$1 extends EFHierarchyItem {
+EFTimegroupHierarchyItem = __decorate([customElement("ef-timegroup-hierarchy-item")], EFTimegroupHierarchyItem);
+var EFAudioHierarchyItem = class EFAudioHierarchyItem$1 extends EFHierarchyItem {
 	get icon() {
 		return "🔊";
 	}
@@ -491,8 +488,8 @@ let EFAudioHierarchyItem = class EFAudioHierarchyItem$1 extends EFHierarchyItem
 		return this.element.src ?? "(no src)";
 	}
 };
-EFAudioHierarchyItem = _decorate([customElement("ef-audio-hierarchy-item")], EFAudioHierarchyItem);
-let EFVideoHierarchyItem = class EFVideoHierarchyItem$1 extends EFHierarchyItem {
+EFAudioHierarchyItem = __decorate([customElement("ef-audio-hierarchy-item")], EFAudioHierarchyItem);
+var EFVideoHierarchyItem = class EFVideoHierarchyItem$1 extends EFHierarchyItem {
 	get icon() {
 		return "📼";
 	}
@@ -500,20 +497,20 @@ let EFVideoHierarchyItem = class EFVideoHierarchyItem$1 extends EFHierarchyItem
 		return this.element.src ?? "(no src)";
 	}
 };
-EFVideoHierarchyItem = _decorate([customElement("ef-video-hierarchy-item")], EFVideoHierarchyItem);
-let EFCaptionsHierarchyItem = class EFCaptionsHierarchyItem$1 extends EFHierarchyItem {
+EFVideoHierarchyItem = __decorate([customElement("ef-video-hierarchy-item")], EFVideoHierarchyItem);
+var 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 {
+EFCaptionsHierarchyItem = __decorate([customElement("ef-captions-hierarchy-item")], EFCaptionsHierarchyItem);
+var EFCaptionsActiveWordHierarchyItem = class EFCaptionsActiveWordHierarchyItem$1 extends EFHierarchyItem {
 	get icon() {
 		return "🗣️ Active Word";
 	}
 };
-EFCaptionsActiveWordHierarchyItem = _decorate([customElement("ef-captions-active-word-hierarchy-item")], EFCaptionsActiveWordHierarchyItem);
-let EFWaveformHierarchyItem = class EFWaveformHierarchyItem$1 extends EFHierarchyItem {
+EFCaptionsActiveWordHierarchyItem = __decorate([customElement("ef-captions-active-word-hierarchy-item")], EFCaptionsActiveWordHierarchyItem);
+var EFWaveformHierarchyItem = class EFWaveformHierarchyItem$1 extends EFHierarchyItem {
 	get icon() {
 		return "🌊";
 	}
@@ -521,8 +518,8 @@ let EFWaveformHierarchyItem = class EFWaveformHierarchyItem$1 extends EFHierarch
 		return nothing;
 	}
 };
-EFWaveformHierarchyItem = _decorate([customElement("ef-waveform-hierarchy-item")], EFWaveformHierarchyItem);
-let EFImageHierarchyItem = class EFImageHierarchyItem$1 extends EFHierarchyItem {
+EFWaveformHierarchyItem = __decorate([customElement("ef-waveform-hierarchy-item")], EFWaveformHierarchyItem);
+var EFImageHierarchyItem = class EFImageHierarchyItem$1 extends EFHierarchyItem {
 	get icon() {
 		return "🖼️";
 	}
@@ -530,96 +527,154 @@ let EFImageHierarchyItem = class EFImageHierarchyItem$1 extends EFHierarchyItem
 		return this.element.src ?? "(no src)";
 	}
 };
-EFImageHierarchyItem = _decorate([customElement("ef-image-hierarchy-item")], EFImageHierarchyItem);
-let EFHTMLHierarchyItem = class EFHTMLHierarchyItem$1 extends EFHierarchyItem {
+EFImageHierarchyItem = __decorate([customElement("ef-image-hierarchy-item")], EFImageHierarchyItem);
+var 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 renderHierarchyChildren = (children) => {
+EFHTMLHierarchyItem = __decorate([customElement("ef-html-hierarchy-item")], EFHTMLHierarchyItem);
+var 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;
+};
+var renderHierarchyChildren = (children, hideSelectors, showSelectors, skipRootFiltering = false) => {
 	return children.map((child) => {
-		if (child instanceof HTMLElement && child.dataset?.efHidden) return nothing;
+		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 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) => {
+var renderFilmstripChildren = (children, pixelsPerMs, hideSelectors, showSelectors, skipRootFiltering = false) => {
 	return children.map((child) => {
-		if (child instanceof HTMLElement && child.dataset?.efHidden) return nothing;
+		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.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) {
+var EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
 	constructor(..._args3) {
 		super(..._args3);
 		this.pixelsPerMs = .04;
+		this.hide = "";
+		this.show = "";
 		this.scrubbing = false;
 		this.timelineScrolltop = 0;
 		this.currentTimeMs = 0;
@@ -630,6 +685,8 @@ let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
 		this.gutterRef = createRef();
 		this.hierarchyRef = createRef();
 		this.playheadRef = createRef();
+		this.target = "";
+		this.targetElement = null;
 	}
 	static {
 		this.styles = [css`
@@ -641,11 +698,20 @@ let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
       }
     `];
 	}
+	get hideSelectors() {
+		if (!this.hide) return void 0;
+		return this.hide.split(",").map((s) => s.trim()).filter((s) => s.length > 0);
+	}
+	get showSelectors() {
+		if (!this.show) return void 0;
+		return this.show.split(",").map((s) => s.trim()).filter((s) => s.length > 0);
+	}
 	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();
@@ -653,13 +719,13 @@ let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
 		this.resizeObserver.disconnect();
 	}
 	updatePixelsPerMs() {
-		const target = this.targetTimegroup;
+		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.targetTimegroup;
+		const target = this.targetTemporal;
 		if (target) {
 			this.timegroupController = new TimegroupController(target, this);
 			this.currentTimeMs = target.currentTimeMs;
@@ -668,9 +734,7 @@ let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
 	#handleKeyPress = (event) => {
 		if (event.key === " ") {
 			const [target] = event.composedPath();
-			const interactiveSelector = "input, textarea, button, select, a, [contenteditable]";
-			const closestInteractive = target?.closest(interactiveSelector);
-			if (closestInteractive) return;
+			if (target?.closest("input, textarea, button, select, a, [contenteditable]")) return;
 			event.preventDefault();
 			if (this.#contextElement) this.#contextElement.playing = !this.#contextElement.playing;
 		}
@@ -706,14 +770,13 @@ let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
 		const gutter = this.shadowRoot?.querySelector("#gutter");
 		if (!gutter) return;
 		const rect = gutter.getBoundingClientRect();
-		if (this.targetTimegroup) {
-			const layerX = e.pageX - rect.left + gutter.scrollLeft;
-			const scrubTimeMs = layerX / this.pixelsPerMs;
-			this.targetTimegroup.currentTimeMs = scrubTimeMs;
+		if (this.targetTemporal) {
+			const scrubTimeMs = (e.pageX - rect.left + gutter.scrollLeft) / this.pixelsPerMs;
+			this.targetTemporal.currentTimeMs = scrubTimeMs;
 		}
 	}
 	scrollScrub(e) {
-		if (this.targetTimegroup && this.gutter && !this.playing) {
+		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);
@@ -725,7 +788,7 @@ let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
 			}
 			if (this) {
 				this.gutter.scrollBy(e.deltaX, e.deltaY);
-				this.targetTimegroup.currentTimeMs += e.deltaX / this.pixelsPerMs;
+				this.targetTemporal.currentTimeMs += e.deltaX / this.pixelsPerMs;
 			}
 		}
 	}
@@ -733,7 +796,7 @@ let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
 		return this.gutterRef.value;
 	}
 	render() {
-		const target = this.targetTimegroup;
+		const target = this.targetTemporal;
 		return html` <div
       class="grid h-full bg-slate-100"
       style=${styleMap({
@@ -772,7 +835,7 @@ let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
         ${ref(this.hierarchyRef)}
         @scroll=${this.syncHierarchyScroll}
       >
-        ${renderHierarchyChildren(target ? [target] : [])}
+        ${renderHierarchyChildren(target ? [target] : [], this.hideSelectors, this.showSelectors, true)}
       </div>
       <div
         class="flex h-full w-full cursor-crosshair overflow-auto bg-slate-200 pt-[8px]"
@@ -796,52 +859,74 @@ let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
             ${ref(this.playheadRef)}
           ></div>
 
-          ${renderFilmstripChildren(target ? [target] : [], this.pixelsPerMs)}
+          ${renderFilmstripChildren(target ? [target] : [], this.pixelsPerMs, this.hideSelectors, this.showSelectors, true)}
         </div>
       </div>
     </div>`;
 	}
 	updated(changes) {
-		if (!this.targetTimegroup) return;
+		if (!this.targetTemporal) return;
 		if (changes.has("currentTimeMs")) {
-			if (this.targetTimegroup.currentTimeMs !== this.currentTimeMs) this.targetTimegroup.currentTimeMs = this.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("targetTimegroup")) this.#bindToTargetTimegroup();
+		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();
 		super.willUpdate(changedProperties);
 	}
 };
-_decorate([property({ type: Number })], EFFilmstrip.prototype, "pixelsPerMs", void 0);
-_decorate([state()], EFFilmstrip.prototype, "scrubbing", void 0);
-_decorate([state()], EFFilmstrip.prototype, "timelineScrolltop", void 0);
-_decorate([consume({
+__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({
+__decorate([consume({
 	context: loopContext,
 	subscribe: true
 }), state()], EFFilmstrip.prototype, "loop", void 0);
-_decorate([state()], EFFilmstrip.prototype, "currentTimeMs", void 0);
-_decorate([property({
+__decorate([state()], EFFilmstrip.prototype, "currentTimeMs", 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 })], EFFilmstrip.prototype, "scrub", null);
-_decorate([eventOptions({ capture: false })], EFFilmstrip.prototype, "startScrub", null);
-_decorate([eventOptions({ passive: false })], EFFilmstrip.prototype, "scrollScrub", null);
-_decorate([property({ type: String })], EFFilmstrip.prototype, "target", void 0);
-_decorate([consume({
-	context: targetTimegroupContext,
+__decorate([eventOptions({ passive: false })], EFFilmstrip.prototype, "syncGutterScroll", null);
+__decorate([eventOptions({ passive: false })], EFFilmstrip.prototype, "syncHierarchyScroll", null);
+__decorate([eventOptions({ capture: false })], EFFilmstrip.prototype, "scrub", null);
+__decorate([eventOptions({ capture: false })], EFFilmstrip.prototype, "startScrub", null);
+__decorate([eventOptions({ passive: false })], EFFilmstrip.prototype, "scrollScrub", null);
+__decorate([property({ type: String })], EFFilmstrip.prototype, "target", void 0);
+__decorate([state()], EFFilmstrip.prototype, "targetElement", void 0);
+__decorate([consume({
+	context: targetTemporalContext,
 	subscribe: true
-}), state()], EFFilmstrip.prototype, "targetTimegroup", void 0);
-EFFilmstrip = _decorate([customElement("ef-filmstrip")], EFFilmstrip);
+}), state()], EFFilmstrip.prototype, "_contextProvidedTemporal", void 0);
+EFFilmstrip = __decorate([customElement("ef-filmstrip")], EFFilmstrip);
 export { EFFilmstrip };