@editframe/elements 0.26.4-beta.0 → 0.30.0-beta.14

package/dist/gui/EFFilmstrip.js

@@ -12,6 +12,8 @@ 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 { consume } from "@lit/context";
@@ -75,7 +77,7 @@ var FilmstripItem = class extends TWMixin(LitElement) {
 	render() {
 		return html`<div style=${styleMap(this.gutterStyles)}>
       <div
-        class="bg-slate-300"
+        style="background-color: var(--filmstrip-bg);"
         ?data-focused=${this.isFocused}
         @mouseenter=${() => {
 			if (this.focusContext) this.focusContext.focusedElement = this.element;
@@ -86,8 +88,12 @@ var FilmstripItem = class extends TWMixin(LitElement) {
       >
         <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"
-          style=${styleMap(this.trimPortionStyles)}
+          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>
@@ -113,18 +119,22 @@ var FilmstripItem = class extends TWMixin(LitElement) {
 			const properties = new Set(Object.keys(firstKeyframe));
 			for (const key of CommonEffectKeys) properties.delete(key);
 			return html`<div
-        class="relative h-[5px] bg-blue-500 opacity-50"
+        class="relative h-[5px] opacity-50"
         label="animation"
         style=${styleMap({
 				left: `${this.pixelsPerMs * start}px`,
-				width: `${this.pixelsPerMs * Number(duration)}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 bg-red-500"
-            style=${styleMap({ left: `${this.pixelsPerMs * keyframe.computedOffset * Number(duration)}px` })}
+            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>`;
@@ -176,7 +186,8 @@ let EFCaptionsFilmstrip = class EFCaptionsFilmstrip$1 extends FilmstripItem {
 		const captionsData = this.element.unifiedCaptionsDataTask.value;
 		return html`<div style=${styleMap(this.gutterStyles)}>
       <div
-        class="bg-slate-300 relative"
+        class="relative"
+        style="background-color: var(--filmstrip-bg);"
         ?data-focused=${this.isFocused}
         @mouseenter=${() => {
 			if (this.focusContext) this.focusContext.focusedElement = this.element;
@@ -187,8 +198,12 @@ let EFCaptionsFilmstrip = class EFCaptionsFilmstrip$1 extends FilmstripItem {
       >
         <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)}
+          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>
@@ -203,12 +218,14 @@ let EFCaptionsFilmstrip = class EFCaptionsFilmstrip$1 extends FilmstripItem {
 		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"}"
+        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"
+				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)"
       >
@@ -234,26 +251,28 @@ let EFCaptionsActiveWordFilmstrip = class EFCaptionsActiveWordFilmstrip$1 extend
 		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">
+        <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="bg-slate-300 relative border border-slate-500 h-[1.1rem] mb-[1px] w-full">
+      <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 ? "bg-yellow-200 border-yellow-500 font-bold z-[5]" : "bg-blue-50 border-blue-200"}"
+            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"
+				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 bg-yellow-200">${word.text.trim()}</span>` : ""}
+            ${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>
@@ -274,26 +293,28 @@ let EFCaptionsSegmentFilmstrip = class EFCaptionsSegmentFilmstrip$1 extends Film
 		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">
+        <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="bg-slate-300 relative border border-slate-500 h-[1.1rem] mb-[1px] w-full">
+      <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 ? "bg-green-200 border-green-500 font-bold z-[5]" : "bg-green-50 border-green-200"}"
+            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"
+				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 bg-green-200">${segment.text}</span>` : ""}
+            ${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>
@@ -314,21 +335,24 @@ let EFCaptionsBeforeWordFilmstrip = class EFCaptionsBeforeWordFilmstrip$1 extend
 		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">
+        <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="bg-slate-300 relative border border-slate-500 h-[1.1rem] mb-[1px] w-full">
+      <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 ${captionsLocalTimeSec >= word.start && captionsLocalTimeSec < word.end ? "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 ${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"
+				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)"
           >
@@ -353,21 +377,24 @@ let EFCaptionsAfterWordFilmstrip = class EFCaptionsAfterWordFilmstrip$1 extends
 		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">
+        <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="bg-slate-300 relative border border-slate-500 h-[1.1rem] mb-[1px] w-full">
+      <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 ${captionsLocalTimeSec >= word.start && captionsLocalTimeSec < word.end ? "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 ${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"
+				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)"
           >
@@ -388,6 +415,104 @@ let EFWaveformFilmstrip = class EFWaveformFilmstrip$1 extends FilmstripItem {
 	}
 };
 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` 🖼️ `;
@@ -431,9 +556,11 @@ let EFHierarchyItem = class EFHierarchyItem$1 extends TWMixin(LitElement) {
 		return html` 
       <div>
         <div
-          class="peer 
-            flex h-[1.1rem] items-center overflow-hidden text-nowrap  border border-slate-500
-          bg-slate-200 pl-2 text-xs font-mono hover:bg-slate-400 data-[focused]:bg-slate-400"
+          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;
@@ -445,7 +572,8 @@ let EFHierarchyItem = class EFHierarchyItem$1 extends TWMixin(LitElement) {
           ${this.icon} ${this.displayLabel()}
         </div>
         <div
-          class="p-[1px] pb-0 pl-2 pr-0 peer-hover:bg-slate-300 peer-data-[focused]:bg-slate-300 peer-hover:border-slate-400 peer-data-[focused]:border-slate-400""
+          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>
@@ -512,6 +640,18 @@ let EFCaptionsActiveWordHierarchyItem = class EFCaptionsActiveWordHierarchyItem$
 	}
 };
 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 "🌊";
@@ -587,6 +727,16 @@ const renderHierarchyChildren = (children, hideSelectors, showSelectors, skipRoo
         .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}
@@ -639,6 +789,18 @@ const renderFilmstripChildren = (children, pixelsPerMs, hideSelectors, showSelec
         .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}
@@ -678,6 +840,7 @@ let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
 		this.hide = "";
 		this.show = "";
 		this.scrubbing = false;
+		this.capturedPointerId = null;
 		this.timelineScrolltop = 0;
 		this.currentTimeMs = 0;
 		this.autoScale = false;
@@ -697,6 +860,48 @@ let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
         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 */
       }
     `];
 	}
@@ -756,17 +961,61 @@ let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
 	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);
 		});
-		addEventListener("mouseup", () => {
-			this.scrubbing = false;
-		}, { once: true });
+		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");
@@ -800,14 +1049,16 @@ let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
 	render() {
 		const target = this.targetTemporal;
 		return html` <div
-      class="grid h-full bg-slate-100"
+      class="grid h-full"
       style=${styleMap({
 			gridTemplateColumns: "200px 1fr",
-			gridTemplateRows: "1.5rem 1fr"
+			gridTemplateRows: "1.5rem 1fr",
+			backgroundColor: "var(--filmstrip-gutter-bg)"
 		})}
     >
       <div
-        class="z-20 col-span-2 border-b-slate-600 bg-slate-100 shadow shadow-slate-300"
+        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"
@@ -833,30 +1084,33 @@ let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
         <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 shadow-slate-600 overflow-auto"
+        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 bg-slate-200 pt-[8px]"
+        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"
-          style="width: ${this.pixelsPerMs * (target?.durationMs ?? 0)}px;"
-          @mousemove=${this.scrub}
-          @mousedown=${this.startScrub}
+          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 border-red-700"
+            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`
+			top: `${this.timelineScrolltop}px`,
+			borderColor: "var(--filmstrip-playhead)"
 		})}
             ${ref(this.playheadRef)}
           ></div>
@@ -921,8 +1175,18 @@ __decorate([property({
 })], 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({
+	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);
 __decorate([state()], EFFilmstrip.prototype, "targetElement", void 0);