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

package/dist/gui/EFFilmstrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFFilmstrip.js","names":["host: LitElement","filmstrip: FilmstripItem","EFAudioFilmstrip","EFVideoFilmstrip","EFCaptionsFilmstrip","EFCaptionsActiveWordFilmstrip","EFCaptionsSegmentFilmstrip","EFCaptionsBeforeWordFilmstrip","EFCaptionsAfterWordFilmstrip","EFWaveformFilmstrip","EFImageFilmstrip","EFTimegroupFilmstrip","EFHTMLFilmstrip","EFHierarchyItem","EFTimegroupHierarchyItem","EFAudioHierarchyItem","EFVideoHierarchyItem","EFCaptionsHierarchyItem","EFCaptionsActiveWordHierarchyItem","EFWaveformHierarchyItem","EFImageHierarchyItem","EFHTMLHierarchyItem","EFFilmstrip","#bindToTargetTimegroup","#handleKeyPress","#targetController","#contextElement","target","#lastTargetTemporal"],"sources":["../../src/gui/EFFilmstrip.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport {\n  css,\n  html,\n  LitElement,\n  nothing,\n  type PropertyValueMap,\n  type ReactiveController,\n  type TemplateResult,\n} from \"lit\";\nimport {\n  customElement,\n  eventOptions,\n  property,\n  state,\n} from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport { EFAudio } from \"../elements/EFAudio.js\";\nimport {\n  type Caption,\n  EFCaptions,\n  EFCaptionsActiveWord,\n} from \"../elements/EFCaptions.js\";\nimport { EFImage } from \"../elements/EFImage.js\";\nimport {\n  isEFTemporal,\n  type TemporalMixinInterface,\n} from \"../elements/EFTemporal.js\";\nimport { EFTimegroup } from \"../elements/EFTimegroup.js\";\nimport { EFVideo } from \"../elements/EFVideo.js\";\nimport { EFWaveform } from \"../elements/EFWaveform.js\";\nimport { TargetController } from \"../elements/TargetController.js\";\nimport { TimegroupController } from \"../elements/TimegroupController.js\";\nimport { msToTimeCode } from \"../msToTimeCode.js\";\nimport { targetTemporalContext } from \"./ContextMixin.ts\";\nimport type { EFPreview } from \"./EFPreview.js\";\nimport type { EFWorkbench } from \"./EFWorkbench.js\";\nimport { type FocusContext, focusContext } from \"./focusContext.js\";\nimport { focusedElementContext } from \"./focusedElementContext.js\";\nimport { loopContext, playingContext } from \"./playingContext.js\";\nimport { TWMixin } from \"./TWMixin.js\";\n\nclass ElementFilmstripController implements ReactiveController {\n  constructor(\n    private host: LitElement,\n    private filmstrip: FilmstripItem,\n  ) {\n    this.host.addController(this);\n  }\n\n  remove() {\n    this.host.removeController(this);\n  }\n\n  hostDisconnected() {\n    this.host.removeController(this);\n  }\n\n  hostUpdated(): void {\n    this.filmstrip.requestUpdate();\n  }\n}\n\nconst CommonEffectKeys = new Set([\n  \"offset\",\n  \"easing\",\n  \"composite\",\n  \"computedOffset\",\n]);\n\nclass FilmstripItem extends TWMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n    `,\n  ];\n\n  @consume({ context: focusContext, subscribe: true })\n  focusContext?: FocusContext;\n\n  @consume({ context: focusedElementContext, subscribe: true })\n  focusedElement?: HTMLElement | null;\n\n  get isFocused() {\n    return this.element && this.focusContext?.focusedElement === this.element;\n  }\n\n  @property({ type: Object, attribute: false })\n  element: TemporalMixinInterface & LitElement = new EFTimegroup();\n\n  @property({ type: Number })\n  pixelsPerMs = 0.04;\n\n  // Gutter styles represent the entire source media.\n  // If there is no trim, then the gutter and trim portion are the same.\n  get gutterStyles() {\n    return {\n      position: \"relative\",\n      left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.sourceStartMs)}px`,\n      width: `${this.pixelsPerMs * (this.element.intrinsicDurationMs ?? this.element.durationMs)}px`,\n    };\n  }\n\n  // Trim portion is the section of source that will be placed in the timeline\n  // If there is no trim, then the gutter and trim portion are the same.\n  get trimPortionStyles() {\n    return {\n      width: `${this.pixelsPerMs * this.element.durationMs}px`,\n      left: `${this.pixelsPerMs * this.element.sourceStartMs}px`,\n    };\n  }\n\n  render() {\n    return html`<div style=${styleMap(this.gutterStyles)}>\n      <div\n        class=\"bg-slate-300\"\n        ?data-focused=${this.isFocused}\n        @mouseenter=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = this.element;\n          }\n        }}\n        @mouseleave=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = null;\n          }\n        }}\n      >\n        <div\n          ?data-focused=${this.isFocused}\n          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\"\n          style=${styleMap(this.trimPortionStyles)}\n        >\n          ${this.animations()}\n        </div>\n      </div>\n      ${this.renderChildren()}\n    </div>`;\n  }\n\n  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {\n    return renderFilmstripChildren(\n      Array.from(this.element.children),\n      this.pixelsPerMs,\n      this.hideSelectors,\n      this.showSelectors,\n    );\n  }\n\n  @property({ type: Array, attribute: false })\n  hideSelectors?: string[];\n\n  @property({ type: Array, attribute: false })\n  showSelectors?: string[];\n\n  contents() {\n    return html``;\n  }\n\n  animations() {\n    const animations = this.element.getAnimations();\n    return animations.map((animation) => {\n      const effect = animation.effect;\n      if (!(effect instanceof KeyframeEffect)) {\n        return nothing;\n      }\n      const start = effect.getTiming().delay ?? 0;\n      const duration = effect.getTiming().duration;\n      if (duration === null) {\n        return nothing;\n      }\n      const keyframes = effect.getKeyframes();\n      const firstKeyframe = keyframes[0];\n      if (!firstKeyframe) {\n        return nothing;\n      }\n      const properties = new Set(Object.keys(firstKeyframe));\n      for (const key of CommonEffectKeys) {\n        properties.delete(key);\n      }\n\n      return html`<div\n        class=\"relative h-[5px] bg-blue-500 opacity-50\"\n        label=\"animation\"\n        style=${styleMap({\n          left: `${this.pixelsPerMs * start}px`,\n          width: `${this.pixelsPerMs * Number(duration)}px`,\n        })}\n      >\n        <!-- <div class=\"text-nowrap\">${Array.from(properties).join(\" \")}</div> -->\n        ${effect.getKeyframes().map((keyframe) => {\n          return html`<div\n            class=\"absolute top-0 h-full w-1 bg-red-500\"\n            style=${styleMap({\n              left: `${\n                this.pixelsPerMs * keyframe.computedOffset * Number(duration)\n              }px`,\n            })}\n          ></div>`;\n        })}\n      </div>`;\n    });\n  }\n\n  protected filmstripController?: ElementFilmstripController;\n\n  update(changedProperties: Map<string | number | symbol, unknown>) {\n    if (\n      changedProperties.has(\"element\") &&\n      this.element instanceof LitElement\n    ) {\n      this.filmstripController?.remove();\n      this.filmstripController = new ElementFilmstripController(\n        this.element,\n        this,\n      );\n    }\n    super.update(changedProperties);\n  }\n}\n\n@customElement(\"ef-audio-filmstrip\")\nexport class EFAudioFilmstrip extends FilmstripItem {\n  contents() {\n    return html``;\n  }\n}\n\n@customElement(\"ef-video-filmstrip\")\nexport class EFVideoFilmstrip extends FilmstripItem {\n  contents() {\n    return html` 📼 `;\n  }\n}\n\n@customElement(\"ef-captions-filmstrip\")\nexport class EFCaptionsFilmstrip extends FilmstripItem {\n  render() {\n    const captions = this.element as EFCaptions;\n    const captionsData = captions.unifiedCaptionsDataTask.value;\n\n    return html`<div style=${styleMap(this.gutterStyles)}>\n      <div\n        class=\"bg-slate-300 relative\"\n        ?data-focused=${this.isFocused}\n        @mouseenter=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = this.element;\n          }\n        }}\n        @mouseleave=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = null;\n          }\n        }}\n      >\n        <div\n          ?data-focused=${this.isFocused}\n          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\"\n          style=${styleMap(this.trimPortionStyles)}\n        >\n          📝 ${this.renderCaptionsData(captionsData)}\n        </div>\n      </div>\n      ${this.renderChildren()}\n    </div>`;\n  }\n\n  renderCaptionsData(captionsData: Caption | null | undefined) {\n    if (!captionsData) {\n      return html``;\n    }\n\n    // Get current time for highlighting active elements\n    const captions = this.element as EFCaptions;\n    const rootTimegroup = captions.rootTimegroup;\n    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;\n    const captionsLocalTimeMs = currentTimeMs - captions.startTimeMs;\n    const captionsLocalTimeSec = captionsLocalTimeMs / 1000;\n\n    // Show all segments with text content, let them clip naturally\n    const segmentElements = captionsData.segments.map((segment) => {\n      const isActive =\n        captionsLocalTimeSec >= segment.start &&\n        captionsLocalTimeSec < segment.end;\n\n      return html`<div\n        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\"}\"\n        style=${styleMap({\n          left: `${this.pixelsPerMs * segment.start * 1000}px`,\n          width: `${this.pixelsPerMs * (segment.end - segment.start) * 1000}px`,\n          height: \"100%\",\n          top: \"0px\",\n        })}\n        title=\"Segment: '${segment.text}' (${segment.start}s - ${segment.end}s)\"\n      >\n        <span class=\"px-0.5 text-[8px] ${isActive ? \"font-bold\" : \"\"}\">${segment.text}</span>\n      </div>`;\n    });\n\n    return html`${segmentElements}`;\n  }\n\n  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {\n    // Also render normal DOM children (like ef-captions-active-word elements)\n    return renderFilmstripChildren(\n      Array.from(this.element.children),\n      this.pixelsPerMs,\n      this.hideSelectors,\n      this.showSelectors,\n    );\n  }\n}\n\n@customElement(\"ef-captions-active-word-filmstrip\")\nexport class EFCaptionsActiveWordFilmstrip extends FilmstripItem {\n  get captionsTrackStyles() {\n    const parentCaptions = this.element.closest(\"ef-captions\") as EFCaptions;\n    return {\n      position: \"relative\",\n      left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,\n      width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`,\n    };\n  }\n\n  render() {\n    // Get parent captions element and its data\n    const parentCaptions = this.element.closest(\"ef-captions\") as EFCaptions;\n    const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;\n\n    if (!captionsData) {\n      return html`<div style=${styleMap(this.captionsTrackStyles)}>\n        <div class=\"bg-slate-300 border border-slate-500 h-[1.1rem] mb-[1px] text-xs\">\n          🗣️ Active Word\n        </div>\n      </div>`;\n    }\n\n    // Get current time for highlighting\n    const rootTimegroup = parentCaptions.rootTimegroup;\n    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;\n    const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;\n    const captionsLocalTimeSec = captionsLocalTimeMs / 1000;\n\n    return html`<div style=${styleMap(this.captionsTrackStyles)}>\n      <div class=\"bg-slate-300 relative border border-slate-500 h-[1.1rem] mb-[1px] w-full\">\n        ${captionsData.word_segments.map((word) => {\n          const isCurrentlyActive =\n            captionsLocalTimeSec >= word.start &&\n            captionsLocalTimeSec < word.end;\n\n          return html`<div\n            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\"}\"\n            style=${styleMap({\n              left: `${this.pixelsPerMs * word.start * 1000}px`,\n              width: `${this.pixelsPerMs * (word.end - word.start) * 1000}px`,\n              height: \"100%\",\n              top: \"0px\",\n            })}\n            title=\"Word: '${word.text}' (${word.start}s - ${word.end}s)\"\n          >\n            ${isCurrentlyActive ? html`<span class=\"px-0.5 text-[8px] font-bold whitespace-nowrap bg-yellow-200\">${word.text.trim()}</span>` : \"\"}\n          </div>`;\n        })}\n      </div>\n    </div>`;\n  }\n}\n\n@customElement(\"ef-captions-segment-filmstrip\")\nexport class EFCaptionsSegmentFilmstrip extends FilmstripItem {\n  get captionsTrackStyles() {\n    const parentCaptions = this.element.closest(\"ef-captions\") as EFCaptions;\n    return {\n      position: \"relative\",\n      left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,\n      width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`,\n    };\n  }\n\n  render() {\n    // Get parent captions element and its data\n    const parentCaptions = this.element.closest(\"ef-captions\") as EFCaptions;\n    const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;\n\n    if (!captionsData) {\n      return html`<div style=${styleMap(this.captionsTrackStyles)}>\n        <div class=\"bg-slate-300 border border-slate-500 h-[1.1rem] mb-[1px] text-xs\">\n          📄 Segment\n        </div>\n      </div>`;\n    }\n\n    // Get current time for highlighting\n    const rootTimegroup = parentCaptions.rootTimegroup;\n    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;\n    const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;\n    const captionsLocalTimeSec = captionsLocalTimeMs / 1000;\n\n    return html`<div style=${styleMap(this.captionsTrackStyles)}>\n      <div class=\"bg-slate-300 relative border border-slate-500 h-[1.1rem] mb-[1px] w-full\">\n        ${captionsData.segments.map((segment) => {\n          const isCurrentlyActive =\n            captionsLocalTimeSec >= segment.start &&\n            captionsLocalTimeSec < segment.end;\n\n          return html`<div\n            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\"}\"\n            style=${styleMap({\n              left: `${this.pixelsPerMs * segment.start * 1000}px`,\n              width: `${this.pixelsPerMs * (segment.end - segment.start) * 1000}px`,\n              height: \"100%\",\n              top: \"0px\",\n            })}\n            title=\"Segment: '${segment.text}' (${segment.start}s - ${segment.end}s)\"\n          >\n            ${isCurrentlyActive ? html`<span class=\"px-0.5 text-[8px] font-bold whitespace-nowrap bg-green-200\">${segment.text}</span>` : \"\"}\n          </div>`;\n        })}\n      </div>\n    </div>`;\n  }\n}\n\n@customElement(\"ef-captions-before-word-filmstrip\")\nexport class EFCaptionsBeforeWordFilmstrip extends FilmstripItem {\n  get captionsTrackStyles() {\n    const parentCaptions = this.element.closest(\"ef-captions\") as EFCaptions;\n    return {\n      position: \"relative\",\n      left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,\n      width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`,\n    };\n  }\n\n  render() {\n    // Get parent captions element and its data\n    const parentCaptions = this.element.closest(\"ef-captions\") as EFCaptions;\n    const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;\n\n    if (!captionsData) {\n      return html`<div style=${styleMap(this.captionsTrackStyles)}>\n        <div class=\"bg-slate-300 border border-slate-500 h-[1.1rem] mb-[1px] text-xs\">\n          ⬅️ Before\n        </div>\n      </div>`;\n    }\n\n    // Get current time for highlighting\n    const rootTimegroup = parentCaptions.rootTimegroup;\n    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;\n    const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;\n    const captionsLocalTimeSec = captionsLocalTimeMs / 1000;\n\n    return html`<div style=${styleMap(this.captionsTrackStyles)}>\n      <div class=\"bg-slate-300 relative border border-slate-500 h-[1.1rem] mb-[1px] w-full\">\n        ${captionsData.word_segments.map((word) => {\n          const isCurrentlyActive =\n            captionsLocalTimeSec >= word.start &&\n            captionsLocalTimeSec < word.end;\n\n          return html`<div\n            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\"}\"\n            style=${styleMap({\n              left: `${this.pixelsPerMs * word.start * 1000}px`,\n              width: `${this.pixelsPerMs * (word.end - word.start) * 1000}px`,\n              height: \"100%\",\n              top: \"0px\",\n            })}\n            title=\"Word: '${word.text}' (${word.start}s - ${word.end}s)\"\n          >\n            <!-- No text for before tracks - they're redundant -->\n          </div>`;\n        })}\n      </div>\n    </div>`;\n  }\n}\n\n@customElement(\"ef-captions-after-word-filmstrip\")\nexport class EFCaptionsAfterWordFilmstrip extends FilmstripItem {\n  get captionsTrackStyles() {\n    const parentCaptions = this.element.closest(\"ef-captions\") as EFCaptions;\n    return {\n      position: \"relative\",\n      left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,\n      width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`,\n    };\n  }\n\n  render() {\n    // Get parent captions element and its data\n    const parentCaptions = this.element.closest(\"ef-captions\") as EFCaptions;\n    const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;\n\n    if (!captionsData) {\n      return html`<div style=${styleMap(this.captionsTrackStyles)}>\n        <div class=\"bg-slate-300 border border-slate-500 h-[1.1rem] mb-[1px] text-xs\">\n          ➡️ After\n        </div>\n      </div>`;\n    }\n\n    // Get current time for highlighting\n    const rootTimegroup = parentCaptions.rootTimegroup;\n    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;\n    const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;\n    const captionsLocalTimeSec = captionsLocalTimeMs / 1000;\n\n    return html`<div style=${styleMap(this.captionsTrackStyles)}>\n      <div class=\"bg-slate-300 relative border border-slate-500 h-[1.1rem] mb-[1px] w-full\">\n        ${captionsData.word_segments.map((word) => {\n          const isCurrentlyActive =\n            captionsLocalTimeSec >= word.start &&\n            captionsLocalTimeSec < word.end;\n\n          return html`<div\n            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\"}\"\n            style=${styleMap({\n              left: `${this.pixelsPerMs * word.start * 1000}px`,\n              width: `${this.pixelsPerMs * (word.end - word.start) * 1000}px`,\n              height: \"100%\",\n              top: \"0px\",\n            })}\n            title=\"Word: '${word.text}' (${word.start}s - ${word.end}s)\"\n          >\n            <!-- No text for after tracks - they're redundant -->\n          </div>`;\n        })}\n      </div>\n    </div>`;\n  }\n}\n\n@customElement(\"ef-waveform-filmstrip\")\nexport class EFWaveformFilmstrip extends FilmstripItem {\n  contents() {\n    return html` 🌊 `;\n  }\n\n  renderChildren(): typeof nothing {\n    return nothing;\n  }\n}\n\n@customElement(\"ef-image-filmstrip\")\nexport class EFImageFilmstrip extends FilmstripItem {\n  contents() {\n    return html` 🖼️ `;\n  }\n}\n\n@customElement(\"ef-timegroup-filmstrip\")\nexport class EFTimegroupFilmstrip extends FilmstripItem {\n  contents() {\n    return html`\n      <span>TIME GROUP</span>\n      ${renderFilmstripChildren(\n        Array.from(this.element.children || []),\n        this.pixelsPerMs,\n        this.hideSelectors,\n        this.showSelectors,\n      )}\n    </div>\n    `;\n  }\n}\n\n@customElement(\"ef-html-filmstrip\")\nexport class EFHTMLFilmstrip extends FilmstripItem {\n  contents() {\n    return html`\n      <span>${this.element.tagName}</span>\n      ${renderFilmstripChildren(\n        Array.from(this.element.children || []),\n        this.pixelsPerMs,\n        this.hideSelectors,\n        this.showSelectors,\n      )}\n    `;\n  }\n}\n\n@customElement(\"ef-hierarchy-item\")\nclass EFHierarchyItem<\n  ElementType extends HTMLElement = HTMLElement,\n> extends TWMixin(LitElement) {\n  @property({ type: Object, attribute: false })\n  // @ts-expect-error This could be initialzed with any HTMLElement\n  element: ElementType = new EFTimegroup();\n\n  @consume({ context: focusContext })\n  focusContext?: FocusContext;\n\n  @consume({ context: focusedElementContext, subscribe: true })\n  focusedElement?: HTMLElement | null;\n\n  @property({ type: Array, attribute: false })\n  hideSelectors?: string[];\n\n  @property({ type: Array, attribute: false })\n  showSelectors?: string[];\n\n  get icon(): TemplateResult<1> | string {\n    return \"📼\";\n  }\n\n  get isFocused() {\n    return this.element && this.focusContext?.focusedElement === this.element;\n  }\n\n  displayLabel(): TemplateResult<1> | string | typeof nothing {\n    return nothing;\n  }\n\n  render() {\n    return html` \n      <div>\n        <div\n          class=\"peer \n            flex h-[1.1rem] items-center overflow-hidden text-nowrap  border border-slate-500\n          bg-slate-200 pl-2 text-xs font-mono hover:bg-slate-400 data-[focused]:bg-slate-400\"\n          ?data-focused=${this.isFocused}\n          @mouseenter=${() => {\n            if (this.focusContext) {\n              this.focusContext.focusedElement = this.element;\n            }\n          }}\n          @mouseleave=${() => {\n            if (this.focusContext) {\n              this.focusContext.focusedElement = null;\n            }\n          }}\n        >\n          ${this.icon} ${this.displayLabel()}\n        </div>\n        <div\n          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\"\"\n        >\n          ${this.renderChildren()}\n        </div>\n      </div>`;\n  }\n\n  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {\n    return renderHierarchyChildren(\n      Array.from(this.element.children),\n      this.hideSelectors,\n      this.showSelectors,\n    );\n  }\n}\n\n@customElement(\"ef-timegroup-hierarchy-item\")\nclass EFTimegroupHierarchyItem extends EFHierarchyItem<EFTimegroup> {\n  get icon() {\n    return \"🕒\";\n  }\n\n  displayLabel(): string | TemplateResult<1> | typeof nothing {\n    return this.element.mode ?? \"(no mode)\";\n  }\n}\n\n@customElement(\"ef-audio-hierarchy-item\")\nclass EFAudioHierarchyItem extends EFHierarchyItem<EFAudio> {\n  get icon() {\n    return \"🔊\";\n  }\n\n  displayLabel() {\n    return this.element.src ?? \"(no src)\";\n  }\n}\n\n@customElement(\"ef-video-hierarchy-item\")\nclass EFVideoHierarchyItem extends EFHierarchyItem<EFVideo> {\n  get icon() {\n    return \"📼\";\n  }\n\n  displayLabel() {\n    return this.element.src ?? \"(no src)\";\n  }\n}\n\n@customElement(\"ef-captions-hierarchy-item\")\nclass EFCaptionsHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return \"📝 Captions\";\n  }\n}\n\n@customElement(\"ef-captions-active-word-hierarchy-item\")\nclass EFCaptionsActiveWordHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return \"🗣️ Active Word\";\n  }\n}\n\n@customElement(\"ef-waveform-hierarchy-item\")\nclass EFWaveformHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return \"🌊\";\n  }\n\n  renderChildren(): typeof nothing {\n    return nothing;\n  }\n}\n\n@customElement(\"ef-image-hierarchy-item\")\nclass EFImageHierarchyItem extends EFHierarchyItem<EFImage> {\n  get icon() {\n    return \"🖼️\";\n  }\n\n  displayLabel() {\n    return this.element.src ?? \"(no src)\";\n  }\n}\n\n@customElement(\"ef-html-hierarchy-item\")\nclass EFHTMLHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return html`<code>${`<${this.element.tagName.toLowerCase()}>`}</code>`;\n  }\n}\n\nconst shouldRenderElement = (\n  element: Element,\n  hideSelectors?: string[],\n  showSelectors?: string[],\n): boolean => {\n  if (element instanceof HTMLElement && element.dataset?.efHidden) {\n    return false;\n  }\n\n  // If show selectors are provided (allowlist mode), only render if matches\n  if (showSelectors && showSelectors.length > 0) {\n    return showSelectors.some((selector) => {\n      try {\n        return element.matches(selector);\n      } catch {\n        return false;\n      }\n    });\n  }\n\n  // If hide selectors are provided, don't render if matches\n  if (hideSelectors && hideSelectors.length > 0) {\n    return !hideSelectors.some((selector) => {\n      try {\n        return element.matches(selector);\n      } catch {\n        return false;\n      }\n    });\n  }\n\n  // No filters, render everything\n  return true;\n};\n\nconst renderHierarchyChildren = (\n  children: Element[],\n  hideSelectors?: string[],\n  showSelectors?: string[],\n  skipRootFiltering = false,\n): Array<TemplateResult<1> | typeof nothing> => {\n  return children.map((child) => {\n    if (\n      !skipRootFiltering &&\n      !shouldRenderElement(child, hideSelectors, showSelectors)\n    ) {\n      return nothing;\n    }\n\n    if (child instanceof EFTimegroup) {\n      return html`<ef-timegroup-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-timegroup-hierarchy-item>`;\n    }\n    if (child instanceof EFImage) {\n      return html`<ef-image-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-image-hierarchy-item>`;\n    }\n    if (child instanceof EFAudio) {\n      return html`<ef-audio-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-audio-hierarchy-item>`;\n    }\n    if (child instanceof EFVideo) {\n      return html`<ef-video-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-video-hierarchy-item>`;\n    }\n    if (child instanceof EFCaptions) {\n      return html`<ef-captions-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-hierarchy-item>`;\n    }\n    if (child instanceof EFCaptionsActiveWord) {\n      return html`<ef-captions-active-word-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-active-word-hierarchy-item>`;\n    }\n    if (child instanceof EFWaveform) {\n      return html`<ef-waveform-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-waveform-hierarchy-item>`;\n    }\n    return html`<ef-html-hierarchy-item\n      .element=${child}\n      .hideSelectors=${hideSelectors}\n      .showSelectors=${showSelectors}\n    ></ef-html-hierarchy-item>`;\n  });\n};\n\nconst renderFilmstripChildren = (\n  children: Element[],\n  pixelsPerMs: number,\n  hideSelectors?: string[],\n  showSelectors?: string[],\n  skipRootFiltering = false,\n): Array<TemplateResult<1> | typeof nothing> => {\n  return children.map((child) => {\n    if (\n      !skipRootFiltering &&\n      !shouldRenderElement(child, hideSelectors, showSelectors)\n    ) {\n      return nothing;\n    }\n\n    if (child instanceof EFTimegroup) {\n      return html`<ef-timegroup-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      >\n      </ef-timegroup-filmstrip>`;\n    }\n    if (child instanceof EFImage) {\n      return html`<ef-image-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-image-filmstrip>`;\n    }\n    if (child instanceof EFAudio) {\n      return html`<ef-audio-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-audio-filmstrip>`;\n    }\n    if (child instanceof EFVideo) {\n      return html`<ef-video-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-video-filmstrip>`;\n    }\n    if (child instanceof EFCaptions) {\n      return html`<ef-captions-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-filmstrip>`;\n    }\n    if (child instanceof EFCaptionsActiveWord) {\n      return html`<ef-captions-active-word-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-active-word-filmstrip>`;\n    }\n    if (child.tagName === \"EF-CAPTIONS-SEGMENT\") {\n      return html`<ef-captions-segment-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-segment-filmstrip>`;\n    }\n    if (child.tagName === \"EF-CAPTIONS-BEFORE-ACTIVE-WORD\") {\n      return html`<ef-captions-before-word-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-before-word-filmstrip>`;\n    }\n    if (child.tagName === \"EF-CAPTIONS-AFTER-ACTIVE-WORD\") {\n      return html`<ef-captions-after-word-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-after-word-filmstrip>`;\n    }\n    if (child instanceof EFWaveform) {\n      return html`<ef-waveform-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-waveform-filmstrip>`;\n    }\n    return html`<ef-html-filmstrip\n      .element=${child}\n      .pixelsPerMs=${pixelsPerMs}\n      .hideSelectors=${hideSelectors}\n      .showSelectors=${showSelectors}\n    ></ef-html-filmstrip>`;\n  });\n};\n\n@customElement(\"ef-filmstrip\")\nexport class EFFilmstrip extends TWMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        overflow: hidden;\n        width: 100%;\n        height: 100%;\n      }\n    `,\n  ];\n  @property({ type: Number })\n  pixelsPerMs = 0.04;\n\n  @property({ type: String })\n  hide = \"\";\n\n  @property({ type: String })\n  show = \"\";\n\n  get hideSelectors(): string[] | undefined {\n    if (!this.hide) return undefined;\n    return this.hide\n      .split(\",\")\n      .map((s) => s.trim())\n      .filter((s) => s.length > 0);\n  }\n\n  get showSelectors(): string[] | undefined {\n    if (!this.show) return undefined;\n    return this.show\n      .split(\",\")\n      .map((s) => s.trim())\n      .filter((s) => s.length > 0);\n  }\n\n  @state()\n  scrubbing = false;\n\n  @state()\n  timelineScrolltop = 0;\n\n  @consume({ context: playingContext, subscribe: true })\n  @state()\n  playing?: boolean;\n\n  @consume({ context: loopContext, subscribe: true })\n  @state()\n  loop?: boolean;\n\n  timegroupController?: TimegroupController;\n\n  @state()\n  currentTimeMs = 0;\n\n  @property({ type: Boolean, reflect: true, attribute: \"auto-scale\" })\n  autoScale = false;\n\n  private resizeObserver = new ResizeObserver(() => {\n    if (this.autoScale) {\n      this.updatePixelsPerMs();\n    }\n  });\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.#bindToTargetTimegroup();\n    window.addEventListener(\"keypress\", this.#handleKeyPress);\n\n    this.resizeObserver.observe(this);\n\n    if (this.target) {\n      this.#targetController = new TargetController(this);\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener(\"keypress\", this.#handleKeyPress);\n    this.resizeObserver.disconnect();\n  }\n\n  updatePixelsPerMs() {\n    const target = this.targetTemporal;\n    const gutter = this.gutterRef.value;\n    if (target && gutter && gutter.clientWidth > 0) {\n      this.pixelsPerMs = gutter.clientWidth / (target.durationMs || 1);\n    }\n  }\n\n  #bindToTargetTimegroup() {\n    if (this.timegroupController) {\n      this.timegroupController.remove();\n    }\n    const target = this.targetTemporal;\n    if (target) {\n      this.timegroupController = new TimegroupController(\n        target as EFTimegroup,\n        this,\n      );\n      // Set the current time to the last saved time to avoid a cycle\n      // where the filmstrip clobbers the time loaded from localStorage\n      this.currentTimeMs = target.currentTimeMs;\n    }\n  }\n\n  #handleKeyPress = (event: KeyboardEvent) => {\n    // On spacebar, toggle playback\n    if (event.key === \" \") {\n      const [target] = event.composedPath();\n      // CSS selector to match all interactive elements\n      const interactiveSelector =\n        \"input, textarea, button, select, a, [contenteditable]\";\n\n      // Check if the event target or its ancestor matches an interactive element\n      const closestInteractive = (target as HTMLElement | null)?.closest(\n        interactiveSelector,\n      );\n      if (closestInteractive) {\n        return;\n      }\n      event.preventDefault();\n      if (this.#contextElement) {\n        this.#contextElement.playing = !this.#contextElement.playing;\n      }\n    }\n  };\n\n  @eventOptions({ passive: false })\n  syncGutterScroll() {\n    if (this.gutter && this.hierarchyRef.value) {\n      this.hierarchyRef.value.scrollTop = this.gutter.scrollTop;\n      this.timelineScrolltop = this.gutter.scrollTop;\n    }\n  }\n\n  @eventOptions({ passive: false })\n  syncHierarchyScroll() {\n    if (this.gutter && this.hierarchyRef.value) {\n      this.gutter.scrollTop = this.hierarchyRef.value.scrollTop;\n      this.timelineScrolltop = this.hierarchyRef.value.scrollTop;\n    }\n  }\n\n  @eventOptions({ capture: false })\n  scrub(e: MouseEvent) {\n    if (this.playing) {\n      return;\n    }\n    if (!this.scrubbing) {\n      return;\n    }\n    this.applyScrub(e);\n  }\n\n  @eventOptions({ capture: false })\n  startScrub(e: MouseEvent) {\n    e.preventDefault();\n    this.scrubbing = true;\n    // Running scrub in the current microtask doesn't\n    // result in an actual update. Not sure why.\n    queueMicrotask(() => {\n      this.applyScrub(e);\n    });\n    addEventListener(\n      \"mouseup\",\n      () => {\n        this.scrubbing = false;\n      },\n      { once: true },\n    );\n  }\n\n  applyScrub(e: MouseEvent) {\n    const gutter = this.shadowRoot?.querySelector(\"#gutter\");\n    if (!gutter) {\n      return;\n    }\n    const rect = gutter.getBoundingClientRect();\n    if (this.targetTemporal) {\n      const layerX = e.pageX - rect.left + gutter.scrollLeft;\n      const scrubTimeMs = layerX / this.pixelsPerMs;\n      this.targetTemporal.currentTimeMs = scrubTimeMs;\n    }\n  }\n\n  @eventOptions({ passive: false })\n  scrollScrub(e: WheelEvent) {\n    if (this.targetTemporal && this.gutter && !this.playing) {\n      if (e.deltaX !== 0) {\n        e.preventDefault(); // Prevent default side scroll behavior only\n      }\n      // Avoid over-scrolling to the left\n      if (\n        this.gutterRef.value &&\n        this.gutterRef.value.scrollLeft === 0 &&\n        e.deltaX < 0\n      ) {\n        this.gutter.scrollBy(0, e.deltaY);\n        return;\n      }\n\n      // Avoid over-scrolling to the right\n      if (\n        this.gutter.scrollWidth - this.gutter.scrollLeft ===\n          this.gutter.clientWidth &&\n        e.deltaX > 0\n      ) {\n        this.gutter.scrollBy(0, e.deltaY);\n        return;\n      }\n\n      if (this) {\n        this.gutter.scrollBy(e.deltaX, e.deltaY);\n        this.targetTemporal.currentTimeMs += e.deltaX / this.pixelsPerMs;\n      }\n    }\n  }\n\n  gutterRef = createRef<HTMLDivElement>();\n  hierarchyRef = createRef<HTMLDivElement>();\n  playheadRef = createRef<HTMLDivElement>();\n\n  get gutter() {\n    return this.gutterRef.value;\n  }\n\n  render() {\n    const target = this.targetTemporal;\n\n    return html` <div\n      class=\"grid h-full bg-slate-100\"\n      style=${styleMap({\n        gridTemplateColumns: \"200px 1fr\",\n        gridTemplateRows: \"1.5rem 1fr\",\n      })}\n    >\n      <div\n        class=\"z-20 col-span-2 border-b-slate-600 bg-slate-100 shadow shadow-slate-300\"\n      >\n        ${\n          !this.autoScale\n            ? html`<input\n              type=\"range\"\n              .value=${this.pixelsPerMs}\n              min=\"0.01\"\n              max=\"0.1\"\n              step=\"0.001\"\n              @input=${(e: Event) => {\n                const target = e.target as HTMLInputElement;\n                this.pixelsPerMs = Number.parseFloat(target.value);\n              }}\n            />`\n            : nothing\n        }\n        <code>${msToTimeCode(this.currentTimeMs, true)} </code> /\n        <code>${msToTimeCode(target?.durationMs ?? 0, true)}</code>\n        <ef-toggle-play class=\"inline-block mx-2\">\n          <div slot=\"pause\"> \n            <button>⏸️</button>\n          </div>\n          <div slot=\"play\">\n            <button>▶️</button>\n          </div>\n        </ef-toggle-play>\n        <ef-toggle-loop><button>${this.loop ? \"🔁\" : html`<span class=\"opacity-50 line-through\">🔁</span>`}</button></ef-toggle-loop>\n      </div>\n      <div\n        class=\"z-10 pl-1 pr-1 pt-[8px] shadow shadow-slate-600 overflow-auto\"\n        ${ref(this.hierarchyRef)}\n        @scroll=${this.syncHierarchyScroll}\n      >\n        ${renderHierarchyChildren(\n          target ? ([target] as unknown as Element[]) : [],\n          this.hideSelectors,\n          this.showSelectors,\n          true,\n        )}\n      </div>\n      <div\n        class=\"flex h-full w-full cursor-crosshair overflow-auto bg-slate-200 pt-[8px]\"\n        id=\"gutter\"\n        ${ref(this.gutterRef)}\n        @scroll=${this.syncGutterScroll}\n        @wheel=${this.scrollScrub}\n      >\n        <div\n          class=\"relative h-full w-full\"\n          style=\"width: ${this.pixelsPerMs * (target?.durationMs ?? 0)}px;\"\n          @mousemove=${this.scrub}\n          @mousedown=${this.startScrub}\n        >\n          <div\n            class=\"border-red pointer-events-none absolute z-[20] h-full w-[2px] border-r-2 border-red-700\"\n            style=${styleMap({\n              left: `${this.pixelsPerMs * this.currentTimeMs}px`,\n              top: `${this.timelineScrolltop}px`,\n            })}\n            ${ref(this.playheadRef)}\n          ></div>\n\n          ${renderFilmstripChildren(\n            target ? ([target] as unknown as Element[]) : [],\n            this.pixelsPerMs,\n            this.hideSelectors,\n            this.showSelectors,\n            true,\n          )}\n        </div>\n      </div>\n    </div>`;\n  }\n\n  updated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n    if (!this.targetTemporal) {\n      return;\n    }\n    if (changes.has(\"currentTimeMs\")) {\n      if (this.targetTemporal.currentTimeMs !== this.currentTimeMs) {\n        this.targetTemporal.currentTimeMs = this.currentTimeMs;\n      }\n    }\n  }\n\n  get #contextElement(): EFWorkbench | EFPreview | null {\n    return this.closest(\"ef-workbench, ef-preview\") as EFWorkbench | EFPreview;\n  }\n\n  @property({ type: String })\n  target = \"\";\n\n  @state()\n  targetElement: Element | null = null;\n\n  #targetController?: TargetController;\n  #lastTargetTemporal?: TemporalMixinInterface | null;\n\n  @consume({ context: targetTemporalContext, subscribe: true })\n  @state()\n  private _contextProvidedTemporal?: TemporalMixinInterface | null;\n\n  get targetTemporal(): TemporalMixinInterface | null {\n    const fromTarget =\n      this.targetElement && isEFTemporal(this.targetElement)\n        ? (this.targetElement as TemporalMixinInterface & HTMLElement)\n        : null;\n    const fromContext = this._contextProvidedTemporal;\n\n    if (fromTarget && fromContext && fromTarget !== fromContext) {\n      console.warn(\n        \"EFFilmstrip: Both target attribute and parent context found. Using target attribute.\",\n        { target: this.target, fromTarget, fromContext },\n      );\n    }\n\n    return fromTarget ?? fromContext ?? null;\n  }\n\n  protected willUpdate(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ) {\n    if (changedProperties.has(\"target\")) {\n      if (this.target && !this.#targetController) {\n        this.#targetController = new TargetController(this);\n      }\n    }\n\n    const currentTargetTemporal = this.targetTemporal;\n    if (this.#lastTargetTemporal !== currentTargetTemporal) {\n      this.#bindToTargetTimegroup();\n      this.#lastTargetTemporal = currentTargetTemporal;\n    }\n\n    if (this.autoScale) {\n      this.updatePixelsPerMs();\n    }\n    super.willUpdate(changedProperties);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-filmstrip\": EFFilmstrip;\n    \"ef-timegroup-hierarchy-item\": EFTimegroupHierarchyItem;\n    \"ef-audio-hierarchy-item\": EFAudioHierarchyItem;\n    \"ef-video-hierarchy-item\": EFVideoHierarchyItem;\n    \"ef-captions-hierarchy-item\": EFCaptionsHierarchyItem;\n    \"ef-captions-active-word-hierarchy-item\": EFCaptionsActiveWordHierarchyItem;\n    \"ef-waveform-hierarchy-item\": EFWaveformHierarchyItem;\n    \"ef-image-hierarchy-item\": EFImageHierarchyItem;\n    \"ef-html-hierarchy-item\": EFHTMLHierarchyItem;\n    \"ef-timegroup-filmstrip\": EFTimegroupFilmstrip;\n    \"ef-audio-filmstrip\": EFAudioFilmstrip;\n    \"ef-video-filmstrip\": EFVideoFilmstrip;\n    \"ef-captions-filmstrip\": EFCaptionsFilmstrip;\n    \"ef-captions-active-word-filmstrip\": EFCaptionsActiveWordFilmstrip;\n    \"ef-captions-segment-filmstrip\": EFCaptionsSegmentFilmstrip;\n    \"ef-captions-before-word-filmstrip\": EFCaptionsBeforeWordFilmstrip;\n    \"ef-captions-after-word-filmstrip\": EFCaptionsAfterWordFilmstrip;\n    \"ef-waveform-filmstrip\": EFWaveformFilmstrip;\n    \"ef-image-filmstrip\": EFImageFilmstrip;\n    \"ef-html-filmstrip\": EFHTMLFilmstrip;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"EFFilmstrip.js","names":["host: LitElement","filmstrip: FilmstripItem","EFAudioFilmstrip","EFVideoFilmstrip","EFCaptionsFilmstrip","EFCaptionsActiveWordFilmstrip","EFCaptionsSegmentFilmstrip","EFCaptionsBeforeWordFilmstrip","EFCaptionsAfterWordFilmstrip","EFWaveformFilmstrip","EFTextFilmstrip","EFTextSegmentFilmstrip","EFImageFilmstrip","EFTimegroupFilmstrip","EFHTMLFilmstrip","EFHierarchyItem","EFTimegroupHierarchyItem","EFAudioHierarchyItem","EFVideoHierarchyItem","EFCaptionsHierarchyItem","EFCaptionsActiveWordHierarchyItem","EFTextHierarchyItem","EFTextSegmentHierarchyItem","EFWaveformHierarchyItem","EFImageHierarchyItem","EFHTMLHierarchyItem","EFFilmstrip","#bindToTargetTimegroup","#handleKeyPress","#targetController","#contextElement","target","#lastTargetTemporal"],"sources":["../../src/gui/EFFilmstrip.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport {\n  css,\n  html,\n  LitElement,\n  nothing,\n  type PropertyValueMap,\n  type ReactiveController,\n  type TemplateResult,\n} from \"lit\";\nimport {\n  customElement,\n  eventOptions,\n  property,\n  state,\n} from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport { EFAudio } from \"../elements/EFAudio.js\";\nimport {\n  type Caption,\n  EFCaptions,\n  EFCaptionsActiveWord,\n} from \"../elements/EFCaptions.js\";\nimport { EFImage } from \"../elements/EFImage.js\";\nimport { EFText } from \"../elements/EFText.js\";\nimport { EFTextSegment } from \"../elements/EFTextSegment.js\";\nimport {\n  isEFTemporal,\n  type TemporalMixinInterface,\n} from \"../elements/EFTemporal.js\";\nimport { EFTimegroup } from \"../elements/EFTimegroup.js\";\nimport { EFVideo } from \"../elements/EFVideo.js\";\nimport { EFWaveform } from \"../elements/EFWaveform.js\";\nimport { TargetController } from \"../elements/TargetController.js\";\nimport { TimegroupController } from \"../elements/TimegroupController.js\";\nimport { msToTimeCode } from \"../msToTimeCode.js\";\nimport { targetTemporalContext } from \"./ContextMixin.ts\";\nimport type { EFPreview } from \"./EFPreview.js\";\nimport type { EFWorkbench } from \"./EFWorkbench.js\";\nimport { type FocusContext, focusContext } from \"./focusContext.js\";\nimport { focusedElementContext } from \"./focusedElementContext.js\";\nimport { loopContext, playingContext } from \"./playingContext.js\";\nimport { TWMixin } from \"./TWMixin.js\";\n\nclass ElementFilmstripController implements ReactiveController {\n  constructor(\n    private host: LitElement,\n    private filmstrip: FilmstripItem,\n  ) {\n    this.host.addController(this);\n  }\n\n  remove() {\n    this.host.removeController(this);\n  }\n\n  hostDisconnected() {\n    this.host.removeController(this);\n  }\n\n  hostUpdated(): void {\n    this.filmstrip.requestUpdate();\n  }\n}\n\nconst CommonEffectKeys = new Set([\n  \"offset\",\n  \"easing\",\n  \"composite\",\n  \"computedOffset\",\n]);\n\nclass FilmstripItem extends TWMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n    `,\n  ];\n\n  @consume({ context: focusContext, subscribe: true })\n  focusContext?: FocusContext;\n\n  @consume({ context: focusedElementContext, subscribe: true })\n  focusedElement?: HTMLElement | null;\n\n  get isFocused() {\n    return this.element && this.focusContext?.focusedElement === this.element;\n  }\n\n  @property({ type: Object, attribute: false })\n  element: TemporalMixinInterface & LitElement = new EFTimegroup();\n\n  @property({ type: Number })\n  pixelsPerMs = 0.04;\n\n  // Gutter styles represent the entire source media.\n  // If there is no trim, then the gutter and trim portion are the same.\n  get gutterStyles() {\n    return {\n      position: \"relative\",\n      left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.sourceStartMs)}px`,\n      width: `${this.pixelsPerMs * (this.element.intrinsicDurationMs ?? this.element.durationMs)}px`,\n    };\n  }\n\n  // Trim portion is the section of source that will be placed in the timeline\n  // If there is no trim, then the gutter and trim portion are the same.\n  get trimPortionStyles() {\n    return {\n      width: `${this.pixelsPerMs * this.element.durationMs}px`,\n      left: `${this.pixelsPerMs * this.element.sourceStartMs}px`,\n    };\n  }\n\n  render() {\n    return html`<div style=${styleMap(this.gutterStyles)}>\n      <div\n        style=\"background-color: var(--filmstrip-bg);\"\n        ?data-focused=${this.isFocused}\n        @mouseenter=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = this.element;\n          }\n        }}\n        @mouseleave=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = null;\n          }\n        }}\n      >\n        <div\n          ?data-focused=${this.isFocused}\n          class=\"border-outset relative mb-[1px] block h-[1.1rem] text-nowrap border text-sm\"\n          style=${styleMap({\n            ...this.trimPortionStyles,\n            backgroundColor: this.isFocused\n              ? \"var(--filmstrip-item-focused)\"\n              : \"var(--filmstrip-item-bg)\",\n            borderColor: \"var(--filmstrip-border)\",\n          })}\n        >\n          ${this.animations()}\n        </div>\n      </div>\n      ${this.renderChildren()}\n    </div>`;\n  }\n\n  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {\n    return renderFilmstripChildren(\n      Array.from(this.element.children),\n      this.pixelsPerMs,\n      this.hideSelectors,\n      this.showSelectors,\n    );\n  }\n\n  @property({ type: Array, attribute: false })\n  hideSelectors?: string[];\n\n  @property({ type: Array, attribute: false })\n  showSelectors?: string[];\n\n  contents() {\n    return html``;\n  }\n\n  animations() {\n    const animations = this.element.getAnimations();\n    return animations.map((animation) => {\n      const effect = animation.effect;\n      if (!(effect instanceof KeyframeEffect)) {\n        return nothing;\n      }\n      const start = effect.getTiming().delay ?? 0;\n      const duration = effect.getTiming().duration;\n      if (duration === null) {\n        return nothing;\n      }\n      const keyframes = effect.getKeyframes();\n      const firstKeyframe = keyframes[0];\n      if (!firstKeyframe) {\n        return nothing;\n      }\n      const properties = new Set(Object.keys(firstKeyframe));\n      for (const key of CommonEffectKeys) {\n        properties.delete(key);\n      }\n\n      return html`<div\n        class=\"relative h-[5px] opacity-50\"\n        label=\"animation\"\n        style=${styleMap({\n          left: `${this.pixelsPerMs * start}px`,\n          width: `${this.pixelsPerMs * Number(duration)}px`,\n          backgroundColor: \"var(--filmstrip-animation-bg)\",\n        })}\n      >\n        <!-- <div class=\"text-nowrap\">${Array.from(properties).join(\" \")}</div> -->\n        ${effect.getKeyframes().map((keyframe) => {\n          return html`<div\n            class=\"absolute top-0 h-full w-1\"\n            style=${styleMap({\n              left: `${\n                this.pixelsPerMs * keyframe.computedOffset * Number(duration)\n              }px`,\n              backgroundColor: \"var(--filmstrip-keyframe-bg)\",\n            })}\n          ></div>`;\n        })}\n      </div>`;\n    });\n  }\n\n  protected filmstripController?: ElementFilmstripController;\n\n  update(changedProperties: Map<string | number | symbol, unknown>) {\n    if (\n      changedProperties.has(\"element\") &&\n      this.element instanceof LitElement\n    ) {\n      this.filmstripController?.remove();\n      this.filmstripController = new ElementFilmstripController(\n        this.element,\n        this,\n      );\n    }\n    super.update(changedProperties);\n  }\n}\n\n@customElement(\"ef-audio-filmstrip\")\nexport class EFAudioFilmstrip extends FilmstripItem {\n  contents() {\n    return html``;\n  }\n}\n\n@customElement(\"ef-video-filmstrip\")\nexport class EFVideoFilmstrip extends FilmstripItem {\n  contents() {\n    return html` 📼 `;\n  }\n}\n\n@customElement(\"ef-captions-filmstrip\")\nexport class EFCaptionsFilmstrip extends FilmstripItem {\n  render() {\n    const captions = this.element as EFCaptions;\n    const captionsData = captions.unifiedCaptionsDataTask.value;\n\n    return html`<div style=${styleMap(this.gutterStyles)}>\n      <div\n        class=\"relative\"\n        style=\"background-color: var(--filmstrip-bg);\"\n        ?data-focused=${this.isFocused}\n        @mouseenter=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = this.element;\n          }\n        }}\n        @mouseleave=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = null;\n          }\n        }}\n      >\n        <div\n          ?data-focused=${this.isFocused}\n          class=\"border-outset relative mb-[1px] block h-[1.1rem] text-nowrap border text-sm overflow-hidden\"\n          style=${styleMap({\n            ...this.trimPortionStyles,\n            backgroundColor: this.isFocused\n              ? \"var(--filmstrip-item-focused)\"\n              : \"var(--filmstrip-item-bg)\",\n            borderColor: \"var(--filmstrip-border)\",\n          })}\n        >\n          📝 ${this.renderCaptionsData(captionsData)}\n        </div>\n      </div>\n      ${this.renderChildren()}\n    </div>`;\n  }\n\n  renderCaptionsData(captionsData: Caption | null | undefined) {\n    if (!captionsData) {\n      return html``;\n    }\n\n    // Get current time for highlighting active elements\n    const captions = this.element as EFCaptions;\n    const rootTimegroup = captions.rootTimegroup;\n    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;\n    const captionsLocalTimeMs = currentTimeMs - captions.startTimeMs;\n    const captionsLocalTimeSec = captionsLocalTimeMs / 1000;\n\n    // Show all segments with text content, let them clip naturally\n    const segmentElements = captionsData.segments.map((segment) => {\n      const isActive =\n        captionsLocalTimeSec >= segment.start &&\n        captionsLocalTimeSec < segment.end;\n\n      return html`<div\n        class=\"absolute border text-xs overflow-hidden flex items-center ${isActive ? \"font-bold z-[5]\" : \"\"}\"\n        style=${styleMap({\n          left: `${this.pixelsPerMs * segment.start * 1000}px`,\n          width: `${this.pixelsPerMs * (segment.end - segment.start) * 1000}px`,\n          height: \"100%\",\n          top: \"0px\",\n          backgroundColor: isActive\n            ? \"var(--filmstrip-segment-bg)\"\n            : \"var(--filmstrip-item-bg)\",\n          borderColor: isActive\n            ? \"var(--filmstrip-segment-border)\"\n            : \"var(--filmstrip-border)\",\n        })}\n        title=\"Segment: '${segment.text}' (${segment.start}s - ${segment.end}s)\"\n      >\n        <span class=\"px-0.5 text-[8px] ${isActive ? \"font-bold\" : \"\"}\">${segment.text}</span>\n      </div>`;\n    });\n\n    return html`${segmentElements}`;\n  }\n\n  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {\n    // Also render normal DOM children (like ef-captions-active-word elements)\n    return renderFilmstripChildren(\n      Array.from(this.element.children),\n      this.pixelsPerMs,\n      this.hideSelectors,\n      this.showSelectors,\n    );\n  }\n}\n\n@customElement(\"ef-captions-active-word-filmstrip\")\nexport class EFCaptionsActiveWordFilmstrip extends FilmstripItem {\n  get captionsTrackStyles() {\n    const parentCaptions = this.element.closest(\"ef-captions\") as EFCaptions;\n    return {\n      position: \"relative\",\n      left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,\n      width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`,\n    };\n  }\n\n  render() {\n    // Get parent captions element and its data\n    const parentCaptions = this.element.closest(\"ef-captions\") as EFCaptions;\n    const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;\n\n    if (!captionsData) {\n      return html`<div style=${styleMap(this.captionsTrackStyles)}>\n        <div class=\"border h-[1.1rem] mb-[1px] text-xs\" style=\"background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);\">\n          🗣️ Active Word\n        </div>\n      </div>`;\n    }\n\n    // Get current time for highlighting\n    const rootTimegroup = parentCaptions.rootTimegroup;\n    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;\n    const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;\n    const captionsLocalTimeSec = captionsLocalTimeMs / 1000;\n\n    return html`<div style=${styleMap(this.captionsTrackStyles)}>\n      <div class=\"relative border h-[1.1rem] mb-[1px] w-full\" style=\"background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);\">\n        ${captionsData.word_segments.map((word) => {\n          const isCurrentlyActive =\n            captionsLocalTimeSec >= word.start &&\n            captionsLocalTimeSec < word.end;\n\n          return html`<div\n            class=\"absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? \"font-bold z-[5]\" : \"\"}\"\n            style=${styleMap({\n              left: `${this.pixelsPerMs * word.start * 1000}px`,\n              width: `${this.pixelsPerMs * (word.end - word.start) * 1000}px`,\n              height: \"100%\",\n              top: \"0px\",\n              backgroundColor: isCurrentlyActive\n                ? \"var(--filmstrip-caption-bg)\"\n                : \"var(--filmstrip-item-bg)\",\n              borderColor: isCurrentlyActive\n                ? \"var(--filmstrip-caption-border)\"\n                : \"var(--filmstrip-border)\",\n            })}\n            title=\"Word: '${word.text}' (${word.start}s - ${word.end}s)\"\n          >\n            ${isCurrentlyActive ? html`<span class=\"px-0.5 text-[8px] font-bold whitespace-nowrap\" style=\"background-color: var(--filmstrip-caption-bg);\">${word.text.trim()}</span>` : \"\"}\n          </div>`;\n        })}\n      </div>\n    </div>`;\n  }\n}\n\n@customElement(\"ef-captions-segment-filmstrip\")\nexport class EFCaptionsSegmentFilmstrip extends FilmstripItem {\n  get captionsTrackStyles() {\n    const parentCaptions = this.element.closest(\"ef-captions\") as EFCaptions;\n    return {\n      position: \"relative\",\n      left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,\n      width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`,\n    };\n  }\n\n  render() {\n    // Get parent captions element and its data\n    const parentCaptions = this.element.closest(\"ef-captions\") as EFCaptions;\n    const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;\n\n    if (!captionsData) {\n      return html`<div style=${styleMap(this.captionsTrackStyles)}>\n        <div class=\"border h-[1.1rem] mb-[1px] text-xs\" style=\"background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);\">\n          📄 Segment\n        </div>\n      </div>`;\n    }\n\n    // Get current time for highlighting\n    const rootTimegroup = parentCaptions.rootTimegroup;\n    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;\n    const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;\n    const captionsLocalTimeSec = captionsLocalTimeMs / 1000;\n\n    return html`<div style=${styleMap(this.captionsTrackStyles)}>\n      <div class=\"relative border h-[1.1rem] mb-[1px] w-full\" style=\"background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);\">\n        ${captionsData.segments.map((segment) => {\n          const isCurrentlyActive =\n            captionsLocalTimeSec >= segment.start &&\n            captionsLocalTimeSec < segment.end;\n\n          return html`<div\n            class=\"absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? \"font-bold z-[5]\" : \"\"}\"\n            style=${styleMap({\n              left: `${this.pixelsPerMs * segment.start * 1000}px`,\n              width: `${this.pixelsPerMs * (segment.end - segment.start) * 1000}px`,\n              height: \"100%\",\n              top: \"0px\",\n              backgroundColor: isCurrentlyActive\n                ? \"var(--filmstrip-segment-bg)\"\n                : \"var(--filmstrip-item-bg)\",\n              borderColor: isCurrentlyActive\n                ? \"var(--filmstrip-segment-border)\"\n                : \"var(--filmstrip-border)\",\n            })}\n            title=\"Segment: '${segment.text}' (${segment.start}s - ${segment.end}s)\"\n          >\n            ${isCurrentlyActive ? html`<span class=\"px-0.5 text-[8px] font-bold whitespace-nowrap\" style=\"background-color: var(--filmstrip-segment-bg);\">${segment.text}</span>` : \"\"}\n          </div>`;\n        })}\n      </div>\n    </div>`;\n  }\n}\n\n@customElement(\"ef-captions-before-word-filmstrip\")\nexport class EFCaptionsBeforeWordFilmstrip extends FilmstripItem {\n  get captionsTrackStyles() {\n    const parentCaptions = this.element.closest(\"ef-captions\") as EFCaptions;\n    return {\n      position: \"relative\",\n      left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,\n      width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`,\n    };\n  }\n\n  render() {\n    // Get parent captions element and its data\n    const parentCaptions = this.element.closest(\"ef-captions\") as EFCaptions;\n    const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;\n\n    if (!captionsData) {\n      return html`<div style=${styleMap(this.captionsTrackStyles)}>\n        <div class=\"border h-[1.1rem] mb-[1px] text-xs\" style=\"background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);\">\n          ⬅️ Before\n        </div>\n      </div>`;\n    }\n\n    // Get current time for highlighting\n    const rootTimegroup = parentCaptions.rootTimegroup;\n    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;\n    const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;\n    const captionsLocalTimeSec = captionsLocalTimeMs / 1000;\n\n    return html`<div style=${styleMap(this.captionsTrackStyles)}>\n      <div class=\"relative border h-[1.1rem] mb-[1px] w-full\" style=\"background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);\">\n        ${captionsData.word_segments.map((word) => {\n          const isCurrentlyActive =\n            captionsLocalTimeSec >= word.start &&\n            captionsLocalTimeSec < word.end;\n\n          return html`<div\n            class=\"absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? \"font-bold z-[5]\" : \"\"}\"\n            style=${styleMap({\n              left: `${this.pixelsPerMs * word.start * 1000}px`,\n              width: `${this.pixelsPerMs * (word.end - word.start) * 1000}px`,\n              height: \"100%\",\n              top: \"0px\",\n              backgroundColor: isCurrentlyActive\n                ? \"var(--filmstrip-caption-bg)\"\n                : \"var(--filmstrip-waveform-bg)\",\n              borderColor: isCurrentlyActive\n                ? \"var(--filmstrip-caption-border)\"\n                : \"var(--filmstrip-waveform-border)\",\n            })}\n            title=\"Word: '${word.text}' (${word.start}s - ${word.end}s)\"\n          >\n            <!-- No text for before tracks - they're redundant -->\n          </div>`;\n        })}\n      </div>\n    </div>`;\n  }\n}\n\n@customElement(\"ef-captions-after-word-filmstrip\")\nexport class EFCaptionsAfterWordFilmstrip extends FilmstripItem {\n  get captionsTrackStyles() {\n    const parentCaptions = this.element.closest(\"ef-captions\") as EFCaptions;\n    return {\n      position: \"relative\",\n      left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,\n      width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`,\n    };\n  }\n\n  render() {\n    // Get parent captions element and its data\n    const parentCaptions = this.element.closest(\"ef-captions\") as EFCaptions;\n    const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;\n\n    if (!captionsData) {\n      return html`<div style=${styleMap(this.captionsTrackStyles)}>\n        <div class=\"border h-[1.1rem] mb-[1px] text-xs\" style=\"background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);\">\n          ➡️ After\n        </div>\n      </div>`;\n    }\n\n    // Get current time for highlighting\n    const rootTimegroup = parentCaptions.rootTimegroup;\n    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;\n    const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;\n    const captionsLocalTimeSec = captionsLocalTimeMs / 1000;\n\n    return html`<div style=${styleMap(this.captionsTrackStyles)}>\n      <div class=\"relative border h-[1.1rem] mb-[1px] w-full\" style=\"background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);\">\n        ${captionsData.word_segments.map((word) => {\n          const isCurrentlyActive =\n            captionsLocalTimeSec >= word.start &&\n            captionsLocalTimeSec < word.end;\n\n          return html`<div\n            class=\"absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? \"font-bold z-[5]\" : \"\"}\"\n            style=${styleMap({\n              left: `${this.pixelsPerMs * word.start * 1000}px`,\n              width: `${this.pixelsPerMs * (word.end - word.start) * 1000}px`,\n              height: \"100%\",\n              top: \"0px\",\n              backgroundColor: isCurrentlyActive\n                ? \"var(--filmstrip-caption-bg)\"\n                : \"var(--filmstrip-waveform-bg)\",\n              borderColor: isCurrentlyActive\n                ? \"var(--filmstrip-caption-border)\"\n                : \"var(--filmstrip-waveform-border)\",\n            })}\n            title=\"Word: '${word.text}' (${word.start}s - ${word.end}s)\"\n          >\n            <!-- No text for after tracks - they're redundant -->\n          </div>`;\n        })}\n      </div>\n    </div>`;\n  }\n}\n\n@customElement(\"ef-waveform-filmstrip\")\nexport class EFWaveformFilmstrip extends FilmstripItem {\n  contents() {\n    return html` 🌊 `;\n  }\n\n  renderChildren(): typeof nothing {\n    return nothing;\n  }\n}\n\n@customElement(\"ef-text-filmstrip\")\nexport class EFTextFilmstrip extends FilmstripItem {\n  render() {\n    const text = this.element as EFText;\n    const segments = Array.from(text.querySelectorAll(\"ef-text-segment\"));\n\n    return html`<div style=${styleMap(this.gutterStyles)}>\n      <div\n        class=\"relative\"\n        style=\"background-color: var(--filmstrip-bg);\"\n        ?data-focused=${this.isFocused}\n        @mouseenter=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = this.element;\n          }\n        }}\n        @mouseleave=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = null;\n          }\n        }}\n      >\n        <div\n          ?data-focused=${this.isFocused}\n          class=\"border-outset relative mb-[1px] block h-[1.1rem] text-nowrap border text-sm overflow-hidden\"\n          style=${styleMap({\n            ...this.trimPortionStyles,\n            backgroundColor: this.isFocused\n              ? \"var(--filmstrip-item-focused)\"\n              : \"var(--filmstrip-item-bg)\",\n            borderColor: \"var(--filmstrip-border)\",\n          })}\n        >\n          📄 ${this.renderTextSegments(segments)}\n        </div>\n      </div>\n      ${this.renderChildren()}\n    </div>`;\n  }\n\n  renderTextSegments(segments: EFTextSegment[]) {\n    if (segments.length === 0) {\n      return html``;\n    }\n\n    // Get current time for highlighting active segments\n    const text = this.element as EFText;\n    const rootTimegroup = text.rootTimegroup;\n    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;\n    const textLocalTimeMs = currentTimeMs - text.startTimeMs;\n\n    return segments.map((segment) => {\n      const isActive =\n        textLocalTimeMs >= segment.segmentStartMs &&\n        textLocalTimeMs < segment.segmentEndMs;\n\n      return html`<div\n        class=\"absolute border text-xs overflow-hidden flex items-center ${isActive ? \"font-bold z-[5]\" : \"\"}\"\n        style=${styleMap({\n          left: `${this.pixelsPerMs * segment.segmentStartMs}px`,\n          width: `${this.pixelsPerMs * (segment.segmentEndMs - segment.segmentStartMs)}px`,\n          height: \"100%\",\n          top: \"0px\",\n          backgroundColor: isActive\n            ? \"var(--filmstrip-segment-bg)\"\n            : \"var(--filmstrip-item-bg)\",\n          borderColor: isActive\n            ? \"var(--filmstrip-segment-border)\"\n            : \"var(--filmstrip-border)\",\n        })}\n        title=\"Segment: '${segment.segmentText}' (${segment.segmentStartMs}ms - ${segment.segmentEndMs}ms)\"\n      >\n        <span class=\"px-0.5 text-[8px] ${isActive ? \"font-bold\" : \"\"}\">${segment.segmentText}</span>\n      </div>`;\n    });\n  }\n\n  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {\n    return renderFilmstripChildren(\n      Array.from(this.element.children),\n      this.pixelsPerMs,\n      this.hideSelectors,\n      this.showSelectors,\n    );\n  }\n}\n\n@customElement(\"ef-text-segment-filmstrip\")\nexport class EFTextSegmentFilmstrip extends FilmstripItem {\n  get textTrackStyles() {\n    const parentText = this.element.closest(\"ef-text\") as EFText;\n    return {\n      position: \"relative\",\n      left: `${this.pixelsPerMs * (parentText?.startTimeWithinParentMs || 0)}px`,\n      width: `${this.pixelsPerMs * (parentText?.durationMs || 0)}px`,\n    };\n  }\n\n  render() {\n    const segment = this.element as EFTextSegment;\n    const parentText = segment.closest(\"ef-text\") as EFText;\n\n    if (!parentText) {\n      return html`<div style=${styleMap(this.textTrackStyles)}>\n        <div class=\"border h-[1.1rem] mb-[1px] text-xs\" style=\"background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);\">\n          📄 Text Segment\n        </div>\n      </div>`;\n    }\n\n    // Get current time for highlighting\n    const rootTimegroup = parentText.rootTimegroup;\n    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;\n    const textLocalTimeMs = currentTimeMs - parentText.startTimeMs;\n\n    const isCurrentlyActive =\n      textLocalTimeMs >= segment.segmentStartMs &&\n      textLocalTimeMs < segment.segmentEndMs;\n\n    return html`<div style=${styleMap(this.textTrackStyles)}>\n      <div class=\"relative border h-[1.1rem] mb-[1px] w-full\" style=\"background-color: var(--filmstrip-bg); border-color: var(--filmstrip-border);\">\n        <div\n          class=\"absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? \"font-bold z-[5]\" : \"\"}\"\n          style=${styleMap({\n            left: `${this.pixelsPerMs * segment.segmentStartMs}px`,\n            width: `${this.pixelsPerMs * (segment.segmentEndMs - segment.segmentStartMs)}px`,\n            height: \"100%\",\n            top: \"0px\",\n            backgroundColor: isCurrentlyActive\n              ? \"var(--filmstrip-caption-bg)\"\n              : \"var(--filmstrip-item-bg)\",\n            borderColor: isCurrentlyActive\n              ? \"var(--filmstrip-caption-border)\"\n              : \"var(--filmstrip-border)\",\n          })}\n          title=\"Segment: '${segment.segmentText}' (${segment.segmentStartMs}ms - ${segment.segmentEndMs}ms)\"\n        >\n          ${isCurrentlyActive ? html`<span class=\"px-0.5 text-[8px] font-bold whitespace-nowrap\" style=\"background-color: var(--filmstrip-caption-bg);\">${segment.segmentText}</span>` : \"\"}\n        </div>\n      </div>\n    </div>`;\n  }\n}\n\n@customElement(\"ef-image-filmstrip\")\nexport class EFImageFilmstrip extends FilmstripItem {\n  contents() {\n    return html` 🖼️ `;\n  }\n}\n\n@customElement(\"ef-timegroup-filmstrip\")\nexport class EFTimegroupFilmstrip extends FilmstripItem {\n  contents() {\n    return html`\n      <span>TIME GROUP</span>\n      ${renderFilmstripChildren(\n        Array.from(this.element.children || []),\n        this.pixelsPerMs,\n        this.hideSelectors,\n        this.showSelectors,\n      )}\n    </div>\n    `;\n  }\n}\n\n@customElement(\"ef-html-filmstrip\")\nexport class EFHTMLFilmstrip extends FilmstripItem {\n  contents() {\n    return html`\n      <span>${this.element.tagName}</span>\n      ${renderFilmstripChildren(\n        Array.from(this.element.children || []),\n        this.pixelsPerMs,\n        this.hideSelectors,\n        this.showSelectors,\n      )}\n    `;\n  }\n}\n\n@customElement(\"ef-hierarchy-item\")\nclass EFHierarchyItem<\n  ElementType extends HTMLElement = HTMLElement,\n> extends TWMixin(LitElement) {\n  @property({ type: Object, attribute: false })\n  // @ts-expect-error This could be initialzed with any HTMLElement\n  element: ElementType = new EFTimegroup();\n\n  @consume({ context: focusContext })\n  focusContext?: FocusContext;\n\n  @consume({ context: focusedElementContext, subscribe: true })\n  focusedElement?: HTMLElement | null;\n\n  @property({ type: Array, attribute: false })\n  hideSelectors?: string[];\n\n  @property({ type: Array, attribute: false })\n  showSelectors?: string[];\n\n  get icon(): TemplateResult<1> | string {\n    return \"📼\";\n  }\n\n  get isFocused() {\n    return this.element && this.focusContext?.focusedElement === this.element;\n  }\n\n  displayLabel(): TemplateResult<1> | string | typeof nothing {\n    return nothing;\n  }\n\n  render() {\n    return html` \n      <div>\n        <div\n          class=\"peer flex h-[1.1rem] items-center overflow-hidden text-nowrap border pl-2 text-xs font-mono\"\n          style=${styleMap({\n            backgroundColor: this.isFocused\n              ? \"var(--filmstrip-timegroup-focused)\"\n              : \"var(--filmstrip-timegroup-bg)\",\n            borderColor: \"var(--filmstrip-border)\",\n          })}\n          ?data-focused=${this.isFocused}\n          @mouseenter=${() => {\n            if (this.focusContext) {\n              this.focusContext.focusedElement = this.element;\n            }\n          }}\n          @mouseleave=${() => {\n            if (this.focusContext) {\n              this.focusContext.focusedElement = null;\n            }\n          }}\n        >\n          ${this.icon} ${this.displayLabel()}\n        </div>\n        <div\n          class=\"p-[1px] pb-0 pl-2 pr-0 peer-hover-container peer-data-container\"\n          style=${styleMap({\n            backgroundColor: this.isFocused\n              ? \"var(--filmstrip-bg)\"\n              : \"transparent\",\n          })}\n        >\n          ${this.renderChildren()}\n        </div>\n      </div>`;\n  }\n\n  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {\n    return renderHierarchyChildren(\n      Array.from(this.element.children),\n      this.hideSelectors,\n      this.showSelectors,\n    );\n  }\n}\n\n@customElement(\"ef-timegroup-hierarchy-item\")\nclass EFTimegroupHierarchyItem extends EFHierarchyItem<EFTimegroup> {\n  get icon() {\n    return \"🕒\";\n  }\n\n  displayLabel(): string | TemplateResult<1> | typeof nothing {\n    return this.element.mode ?? \"(no mode)\";\n  }\n}\n\n@customElement(\"ef-audio-hierarchy-item\")\nclass EFAudioHierarchyItem extends EFHierarchyItem<EFAudio> {\n  get icon() {\n    return \"🔊\";\n  }\n\n  displayLabel() {\n    return this.element.src ?? \"(no src)\";\n  }\n}\n\n@customElement(\"ef-video-hierarchy-item\")\nclass EFVideoHierarchyItem extends EFHierarchyItem<EFVideo> {\n  get icon() {\n    return \"📼\";\n  }\n\n  displayLabel() {\n    return this.element.src ?? \"(no src)\";\n  }\n}\n\n@customElement(\"ef-captions-hierarchy-item\")\nclass EFCaptionsHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return \"📝 Captions\";\n  }\n}\n\n@customElement(\"ef-captions-active-word-hierarchy-item\")\nclass EFCaptionsActiveWordHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return \"🗣️ Active Word\";\n  }\n}\n\n@customElement(\"ef-text-hierarchy-item\")\nclass EFTextHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return \"📄 Text\";\n  }\n}\n\n@customElement(\"ef-text-segment-hierarchy-item\")\nclass EFTextSegmentHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return \"📄 Segment\";\n  }\n}\n\n@customElement(\"ef-waveform-hierarchy-item\")\nclass EFWaveformHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return \"🌊\";\n  }\n\n  renderChildren(): typeof nothing {\n    return nothing;\n  }\n}\n\n@customElement(\"ef-image-hierarchy-item\")\nclass EFImageHierarchyItem extends EFHierarchyItem<EFImage> {\n  get icon() {\n    return \"🖼️\";\n  }\n\n  displayLabel() {\n    return this.element.src ?? \"(no src)\";\n  }\n}\n\n@customElement(\"ef-html-hierarchy-item\")\nclass EFHTMLHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return html`<code>${`<${this.element.tagName.toLowerCase()}>`}</code>`;\n  }\n}\n\nconst shouldRenderElement = (\n  element: Element,\n  hideSelectors?: string[],\n  showSelectors?: string[],\n): boolean => {\n  if (element instanceof HTMLElement && element.dataset?.efHidden) {\n    return false;\n  }\n\n  // If show selectors are provided (allowlist mode), only render if matches\n  if (showSelectors && showSelectors.length > 0) {\n    return showSelectors.some((selector) => {\n      try {\n        return element.matches(selector);\n      } catch {\n        return false;\n      }\n    });\n  }\n\n  // If hide selectors are provided, don't render if matches\n  if (hideSelectors && hideSelectors.length > 0) {\n    return !hideSelectors.some((selector) => {\n      try {\n        return element.matches(selector);\n      } catch {\n        return false;\n      }\n    });\n  }\n\n  // No filters, render everything\n  return true;\n};\n\nconst renderHierarchyChildren = (\n  children: Element[],\n  hideSelectors?: string[],\n  showSelectors?: string[],\n  skipRootFiltering = false,\n): Array<TemplateResult<1> | typeof nothing> => {\n  return children.map((child) => {\n    if (\n      !skipRootFiltering &&\n      !shouldRenderElement(child, hideSelectors, showSelectors)\n    ) {\n      return nothing;\n    }\n\n    if (child instanceof EFTimegroup) {\n      return html`<ef-timegroup-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-timegroup-hierarchy-item>`;\n    }\n    if (child instanceof EFImage) {\n      return html`<ef-image-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-image-hierarchy-item>`;\n    }\n    if (child instanceof EFAudio) {\n      return html`<ef-audio-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-audio-hierarchy-item>`;\n    }\n    if (child instanceof EFVideo) {\n      return html`<ef-video-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-video-hierarchy-item>`;\n    }\n    if (child instanceof EFCaptions) {\n      return html`<ef-captions-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-hierarchy-item>`;\n    }\n    if (child instanceof EFCaptionsActiveWord) {\n      return html`<ef-captions-active-word-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-active-word-hierarchy-item>`;\n    }\n    if (child instanceof EFText) {\n      return html`<ef-text-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-text-hierarchy-item>`;\n    }\n    if (child instanceof EFTextSegment) {\n      return html`<ef-text-segment-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-text-segment-hierarchy-item>`;\n    }\n    if (child instanceof EFWaveform) {\n      return html`<ef-waveform-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-waveform-hierarchy-item>`;\n    }\n    return html`<ef-html-hierarchy-item\n      .element=${child}\n      .hideSelectors=${hideSelectors}\n      .showSelectors=${showSelectors}\n    ></ef-html-hierarchy-item>`;\n  });\n};\n\nconst renderFilmstripChildren = (\n  children: Element[],\n  pixelsPerMs: number,\n  hideSelectors?: string[],\n  showSelectors?: string[],\n  skipRootFiltering = false,\n): Array<TemplateResult<1> | typeof nothing> => {\n  return children.map((child) => {\n    if (\n      !skipRootFiltering &&\n      !shouldRenderElement(child, hideSelectors, showSelectors)\n    ) {\n      return nothing;\n    }\n\n    if (child instanceof EFTimegroup) {\n      return html`<ef-timegroup-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      >\n      </ef-timegroup-filmstrip>`;\n    }\n    if (child instanceof EFImage) {\n      return html`<ef-image-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-image-filmstrip>`;\n    }\n    if (child instanceof EFAudio) {\n      return html`<ef-audio-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-audio-filmstrip>`;\n    }\n    if (child instanceof EFVideo) {\n      return html`<ef-video-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-video-filmstrip>`;\n    }\n    if (child instanceof EFCaptions) {\n      return html`<ef-captions-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-filmstrip>`;\n    }\n    if (child instanceof EFCaptionsActiveWord) {\n      return html`<ef-captions-active-word-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-active-word-filmstrip>`;\n    }\n    if (child instanceof EFText) {\n      return html`<ef-text-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-text-filmstrip>`;\n    }\n    if (child instanceof EFTextSegment) {\n      return html`<ef-text-segment-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-text-segment-filmstrip>`;\n    }\n    if (child.tagName === \"EF-CAPTIONS-SEGMENT\") {\n      return html`<ef-captions-segment-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-segment-filmstrip>`;\n    }\n    if (child.tagName === \"EF-CAPTIONS-BEFORE-ACTIVE-WORD\") {\n      return html`<ef-captions-before-word-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-before-word-filmstrip>`;\n    }\n    if (child.tagName === \"EF-CAPTIONS-AFTER-ACTIVE-WORD\") {\n      return html`<ef-captions-after-word-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-captions-after-word-filmstrip>`;\n    }\n    if (child instanceof EFWaveform) {\n      return html`<ef-waveform-filmstrip\n        .element=${child}\n        .pixelsPerMs=${pixelsPerMs}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-waveform-filmstrip>`;\n    }\n    return html`<ef-html-filmstrip\n      .element=${child}\n      .pixelsPerMs=${pixelsPerMs}\n      .hideSelectors=${hideSelectors}\n      .showSelectors=${showSelectors}\n    ></ef-html-filmstrip>`;\n  });\n};\n\n@customElement(\"ef-filmstrip\")\nexport class EFFilmstrip extends TWMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        overflow: hidden;\n        width: 100%;\n        height: 100%;\n        \n        /* Light mode colors */\n        --filmstrip-bg: rgb(203 213 225); /* slate-300 */\n        --filmstrip-border: rgb(100 116 139); /* slate-500 */\n        --filmstrip-item-bg: rgb(191 219 254); /* blue-200 */\n        --filmstrip-item-focused: rgb(148 163 184); /* slate-400 */\n        --filmstrip-animation-bg: rgb(59 130 246); /* blue-500 */\n        --filmstrip-keyframe-bg: rgb(239 68 68); /* red-500 */\n        --filmstrip-caption-bg: rgb(254 240 138); /* yellow-200 */\n        --filmstrip-caption-border: rgb(234 179 8); /* yellow-500 */\n        --filmstrip-segment-bg: rgb(187 247 208); /* green-200 */\n        --filmstrip-segment-border: rgb(34 197 94); /* green-500 */\n        --filmstrip-waveform-bg: rgb(250 245 255); /* purple-50 */\n        --filmstrip-waveform-border: rgb(233 213 255); /* purple-200 */\n        --filmstrip-timegroup-bg: rgb(226 232 240); /* slate-200 */\n        --filmstrip-timegroup-hover: rgb(148 163 184); /* slate-400 */\n        --filmstrip-timegroup-focused: rgb(148 163 184); /* slate-400 */\n        --filmstrip-gutter-bg: rgb(241 245 249); /* slate-100 */\n        --filmstrip-timeline-bg: rgb(226 232 240); /* slate-200 */\n        --filmstrip-playhead: rgb(185 28 28); /* red-700 */\n      }\n      \n      :host(.dark), :host-context(.dark) {\n        /* Dark mode colors */\n        --filmstrip-bg: rgb(71 85 105); /* slate-600 */\n        --filmstrip-border: rgb(148 163 184); /* slate-400 */\n        --filmstrip-item-bg: rgb(30 64 175); /* blue-800 */\n        --filmstrip-item-focused: rgb(100 116 139); /* slate-500 */\n        --filmstrip-animation-bg: rgb(96 165 250); /* blue-400 */\n        --filmstrip-keyframe-bg: rgb(248 113 113); /* red-400 */\n        --filmstrip-caption-bg: rgb(133 77 14); /* yellow-800 */\n        --filmstrip-caption-border: rgb(250 204 21); /* yellow-400 */\n        --filmstrip-segment-bg: rgb(22 101 52); /* green-800 */\n        --filmstrip-segment-border: rgb(74 222 128); /* green-400 */\n        --filmstrip-waveform-bg: rgb(88 28 135); /* purple-900 */\n        --filmstrip-waveform-border: rgb(126 34 206); /* purple-700 */\n        --filmstrip-timegroup-bg: rgb(51 65 85); /* slate-700 */\n        --filmstrip-timegroup-hover: rgb(100 116 139); /* slate-500 */\n        --filmstrip-timegroup-focused: rgb(100 116 139); /* slate-500 */\n        --filmstrip-gutter-bg: rgb(30 41 59); /* slate-800 */\n        --filmstrip-timeline-bg: rgb(51 65 85); /* slate-700 */\n        --filmstrip-playhead: rgb(239 68 68); /* red-500 */\n      }\n    `,\n  ];\n  @property({ type: Number })\n  pixelsPerMs = 0.04;\n\n  @property({ type: String })\n  hide = \"\";\n\n  @property({ type: String })\n  show = \"\";\n\n  get hideSelectors(): string[] | undefined {\n    if (!this.hide) return undefined;\n    return this.hide\n      .split(\",\")\n      .map((s) => s.trim())\n      .filter((s) => s.length > 0);\n  }\n\n  get showSelectors(): string[] | undefined {\n    if (!this.show) return undefined;\n    return this.show\n      .split(\",\")\n      .map((s) => s.trim())\n      .filter((s) => s.length > 0);\n  }\n\n  @state()\n  scrubbing = false;\n\n  private capturedPointerId: number | null = null;\n\n  @state()\n  timelineScrolltop = 0;\n\n  @consume({ context: playingContext, subscribe: true })\n  @state()\n  playing?: boolean;\n\n  @consume({ context: loopContext, subscribe: true })\n  @state()\n  loop?: boolean;\n\n  timegroupController?: TimegroupController;\n\n  @state()\n  currentTimeMs = 0;\n\n  @property({ type: Boolean, reflect: true, attribute: \"auto-scale\" })\n  autoScale = false;\n\n  private resizeObserver = new ResizeObserver(() => {\n    if (this.autoScale) {\n      this.updatePixelsPerMs();\n    }\n  });\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.#bindToTargetTimegroup();\n    window.addEventListener(\"keypress\", this.#handleKeyPress);\n\n    this.resizeObserver.observe(this);\n\n    if (this.target) {\n      this.#targetController = new TargetController(this);\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener(\"keypress\", this.#handleKeyPress);\n    this.resizeObserver.disconnect();\n  }\n\n  updatePixelsPerMs() {\n    const target = this.targetTemporal;\n    const gutter = this.gutterRef.value;\n    if (target && gutter && gutter.clientWidth > 0) {\n      this.pixelsPerMs = gutter.clientWidth / (target.durationMs || 1);\n    }\n  }\n\n  #bindToTargetTimegroup() {\n    if (this.timegroupController) {\n      this.timegroupController.remove();\n    }\n    const target = this.targetTemporal;\n    if (target) {\n      this.timegroupController = new TimegroupController(\n        target as EFTimegroup,\n        this,\n      );\n      // Set the current time to the last saved time to avoid a cycle\n      // where the filmstrip clobbers the time loaded from localStorage\n      this.currentTimeMs = target.currentTimeMs;\n    }\n  }\n\n  #handleKeyPress = (event: KeyboardEvent) => {\n    // On spacebar, toggle playback\n    if (event.key === \" \") {\n      const [target] = event.composedPath();\n      // CSS selector to match all interactive elements\n      const interactiveSelector =\n        \"input, textarea, button, select, a, [contenteditable]\";\n\n      // Check if the event target or its ancestor matches an interactive element\n      const closestInteractive = (target as HTMLElement | null)?.closest(\n        interactiveSelector,\n      );\n      if (closestInteractive) {\n        return;\n      }\n      event.preventDefault();\n      if (this.#contextElement) {\n        this.#contextElement.playing = !this.#contextElement.playing;\n      }\n    }\n  };\n\n  @eventOptions({ passive: false })\n  syncGutterScroll() {\n    if (this.gutter && this.hierarchyRef.value) {\n      this.hierarchyRef.value.scrollTop = this.gutter.scrollTop;\n      this.timelineScrolltop = this.gutter.scrollTop;\n    }\n  }\n\n  @eventOptions({ passive: false })\n  syncHierarchyScroll() {\n    if (this.gutter && this.hierarchyRef.value) {\n      this.gutter.scrollTop = this.hierarchyRef.value.scrollTop;\n      this.timelineScrolltop = this.hierarchyRef.value.scrollTop;\n    }\n  }\n\n  @eventOptions({ capture: false, passive: false })\n  scrub(e: PointerEvent) {\n    if (this.playing) {\n      return;\n    }\n    if (!this.scrubbing) {\n      return;\n    }\n    if (\n      this.capturedPointerId !== null &&\n      e.pointerId !== this.capturedPointerId\n    ) {\n      return;\n    }\n    e.preventDefault();\n    e.stopPropagation();\n    this.applyScrub(e);\n  }\n\n  @eventOptions({ capture: false, passive: false })\n  startScrub(e: PointerEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    this.scrubbing = true;\n    this.capturedPointerId = e.pointerId;\n\n    const target = e.currentTarget as HTMLElement;\n    if (target) {\n      try {\n        target.setPointerCapture(e.pointerId);\n      } catch (err) {\n        // setPointerCapture may fail in some cases, continue anyway\n        console.warn(\"Failed to set pointer capture:\", err);\n      }\n    }\n\n    // Running scrub in the current microtask doesn't\n    // result in an actual update. Not sure why.\n    queueMicrotask(() => {\n      this.applyScrub(e);\n    });\n\n    const handlePointerUp = (upEvent: PointerEvent) => {\n      if (upEvent.pointerId === this.capturedPointerId) {\n        upEvent.preventDefault();\n        upEvent.stopPropagation();\n        if (target) {\n          try {\n            target.releasePointerCapture(upEvent.pointerId);\n          } catch (_err) {\n            // releasePointerCapture may fail if capture was already lost\n          }\n        }\n        this.capturedPointerId = null;\n        this.scrubbing = false;\n        removeEventListener(\"pointerup\", handlePointerUp);\n      }\n    };\n\n    const handlePointerCancel = (cancelEvent: PointerEvent) => {\n      if (cancelEvent.pointerId === this.capturedPointerId) {\n        if (target) {\n          try {\n            target.releasePointerCapture(cancelEvent.pointerId);\n          } catch (_err) {\n            // releasePointerCapture may fail if capture was already lost\n          }\n        }\n        this.capturedPointerId = null;\n        this.scrubbing = false;\n        removeEventListener(\"pointercancel\", handlePointerCancel);\n      }\n    };\n\n    addEventListener(\"pointerup\", handlePointerUp, {\n      once: true,\n      passive: false,\n    });\n    addEventListener(\"pointercancel\", handlePointerCancel, {\n      once: true,\n      passive: false,\n    });\n  }\n\n  @eventOptions({ passive: false, capture: false })\n  handleContextMenu(e: Event) {\n    if (this.scrubbing) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  }\n\n  applyScrub(e: PointerEvent) {\n    const gutter = this.shadowRoot?.querySelector(\"#gutter\");\n    if (!gutter) {\n      return;\n    }\n    const rect = gutter.getBoundingClientRect();\n    if (this.targetTemporal) {\n      const layerX = e.pageX - rect.left + gutter.scrollLeft;\n      const scrubTimeMs = layerX / this.pixelsPerMs;\n      this.targetTemporal.currentTimeMs = scrubTimeMs;\n    }\n  }\n\n  @eventOptions({ passive: false })\n  scrollScrub(e: WheelEvent) {\n    if (this.targetTemporal && this.gutter && !this.playing) {\n      if (e.deltaX !== 0) {\n        e.preventDefault(); // Prevent default side scroll behavior only\n      }\n      // Avoid over-scrolling to the left\n      if (\n        this.gutterRef.value &&\n        this.gutterRef.value.scrollLeft === 0 &&\n        e.deltaX < 0\n      ) {\n        this.gutter.scrollBy(0, e.deltaY);\n        return;\n      }\n\n      // Avoid over-scrolling to the right\n      if (\n        this.gutter.scrollWidth - this.gutter.scrollLeft ===\n          this.gutter.clientWidth &&\n        e.deltaX > 0\n      ) {\n        this.gutter.scrollBy(0, e.deltaY);\n        return;\n      }\n\n      if (this) {\n        this.gutter.scrollBy(e.deltaX, e.deltaY);\n        this.targetTemporal.currentTimeMs += e.deltaX / this.pixelsPerMs;\n      }\n    }\n  }\n\n  gutterRef = createRef<HTMLDivElement>();\n  hierarchyRef = createRef<HTMLDivElement>();\n  playheadRef = createRef<HTMLDivElement>();\n\n  get gutter() {\n    return this.gutterRef.value;\n  }\n\n  render() {\n    const target = this.targetTemporal;\n\n    return html` <div\n      class=\"grid h-full\"\n      style=${styleMap({\n        gridTemplateColumns: \"200px 1fr\",\n        gridTemplateRows: \"1.5rem 1fr\",\n        backgroundColor: \"var(--filmstrip-gutter-bg)\",\n      })}\n    >\n      <div\n        class=\"z-20 col-span-2 shadow\"\n        style=\"background-color: var(--filmstrip-gutter-bg); border-bottom-color: var(--filmstrip-border);\"\n      >\n        ${\n          !this.autoScale\n            ? html`<input\n              type=\"range\"\n              .value=${this.pixelsPerMs}\n              min=\"0.01\"\n              max=\"0.1\"\n              step=\"0.001\"\n              @input=${(e: Event) => {\n                const target = e.target as HTMLInputElement;\n                this.pixelsPerMs = Number.parseFloat(target.value);\n              }}\n            />`\n            : nothing\n        }\n        <code>${msToTimeCode(this.currentTimeMs, true)} </code> /\n        <code>${msToTimeCode(target?.durationMs ?? 0, true)}</code>\n        <ef-toggle-play class=\"inline-block mx-2\">\n          <div slot=\"pause\"> \n            <button>⏸️</button>\n          </div>\n          <div slot=\"play\">\n            <button>▶️</button>\n          </div>\n        </ef-toggle-play>\n        <ef-toggle-loop><button>${this.loop ? \"🔁\" : html`<span class=\"opacity-50 line-through\">🔁</span>`}</button></ef-toggle-loop>\n      </div>\n      <div\n        class=\"z-10 pl-1 pr-1 pt-[8px] shadow overflow-auto\"\n        ${ref(this.hierarchyRef)}\n        @scroll=${this.syncHierarchyScroll}\n      >\n        ${renderHierarchyChildren(\n          target ? ([target] as unknown as Element[]) : [],\n          this.hideSelectors,\n          this.showSelectors,\n          true,\n        )}\n      </div>\n      <div\n        class=\"flex h-full w-full cursor-crosshair overflow-auto pt-[8px] touch-pan-x\"\n        style=\"background-color: var(--filmstrip-timeline-bg);\"\n        id=\"gutter\"\n        ${ref(this.gutterRef)}\n        @scroll=${this.syncGutterScroll}\n        @wheel=${this.scrollScrub}\n      >\n        <div\n          class=\"relative h-full w-full touch-none\"\n          style=\"width: ${this.pixelsPerMs * (target?.durationMs ?? 0)}px; touch-action: none; user-select: none;\"\n          @pointermove=${this.scrub}\n          @pointerdown=${this.startScrub}\n          @contextmenu=${this.handleContextMenu}\n        >\n          <div\n            class=\"border-red pointer-events-none absolute z-[20] h-full w-[2px] border-r-2\"\n            style=${styleMap({\n              left: `${this.pixelsPerMs * this.currentTimeMs}px`,\n              top: `${this.timelineScrolltop}px`,\n              borderColor: \"var(--filmstrip-playhead)\",\n            })}\n            ${ref(this.playheadRef)}\n          ></div>\n\n          ${renderFilmstripChildren(\n            target ? ([target] as unknown as Element[]) : [],\n            this.pixelsPerMs,\n            this.hideSelectors,\n            this.showSelectors,\n            true,\n          )}\n        </div>\n      </div>\n    </div>`;\n  }\n\n  updated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n    if (!this.targetTemporal) {\n      return;\n    }\n    if (changes.has(\"currentTimeMs\")) {\n      if (this.targetTemporal.currentTimeMs !== this.currentTimeMs) {\n        this.targetTemporal.currentTimeMs = this.currentTimeMs;\n      }\n    }\n  }\n\n  get #contextElement(): EFWorkbench | EFPreview | null {\n    return this.closest(\"ef-workbench, ef-preview\") as EFWorkbench | EFPreview;\n  }\n\n  @property({ type: String })\n  target = \"\";\n\n  @state()\n  targetElement: Element | null = null;\n\n  #targetController?: TargetController;\n  #lastTargetTemporal?: TemporalMixinInterface | null;\n\n  @consume({ context: targetTemporalContext, subscribe: true })\n  @state()\n  private _contextProvidedTemporal?: TemporalMixinInterface | null;\n\n  get targetTemporal(): TemporalMixinInterface | null {\n    const fromTarget =\n      this.targetElement && isEFTemporal(this.targetElement)\n        ? (this.targetElement as TemporalMixinInterface & HTMLElement)\n        : null;\n    const fromContext = this._contextProvidedTemporal;\n\n    if (fromTarget && fromContext && fromTarget !== fromContext) {\n      console.warn(\n        \"EFFilmstrip: Both target attribute and parent context found. Using target attribute.\",\n        { target: this.target, fromTarget, fromContext },\n      );\n    }\n\n    return fromTarget ?? fromContext ?? null;\n  }\n\n  protected willUpdate(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ) {\n    if (changedProperties.has(\"target\")) {\n      if (this.target && !this.#targetController) {\n        this.#targetController = new TargetController(this);\n      }\n    }\n\n    const currentTargetTemporal = this.targetTemporal;\n    if (this.#lastTargetTemporal !== currentTargetTemporal) {\n      this.#bindToTargetTimegroup();\n      this.#lastTargetTemporal = currentTargetTemporal;\n    }\n\n    if (this.autoScale) {\n      this.updatePixelsPerMs();\n    }\n    super.willUpdate(changedProperties);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-filmstrip\": EFFilmstrip;\n    \"ef-timegroup-hierarchy-item\": EFTimegroupHierarchyItem;\n    \"ef-audio-hierarchy-item\": EFAudioHierarchyItem;\n    \"ef-video-hierarchy-item\": EFVideoHierarchyItem;\n    \"ef-captions-hierarchy-item\": EFCaptionsHierarchyItem;\n    \"ef-captions-active-word-hierarchy-item\": EFCaptionsActiveWordHierarchyItem;\n    \"ef-waveform-hierarchy-item\": EFWaveformHierarchyItem;\n    \"ef-image-hierarchy-item\": EFImageHierarchyItem;\n    \"ef-html-hierarchy-item\": EFHTMLHierarchyItem;\n    \"ef-timegroup-filmstrip\": EFTimegroupFilmstrip;\n    \"ef-audio-filmstrip\": EFAudioFilmstrip;\n    \"ef-video-filmstrip\": EFVideoFilmstrip;\n    \"ef-captions-filmstrip\": EFCaptionsFilmstrip;\n    \"ef-captions-active-word-filmstrip\": EFCaptionsActiveWordFilmstrip;\n    \"ef-captions-segment-filmstrip\": EFCaptionsSegmentFilmstrip;\n    \"ef-captions-before-word-filmstrip\": EFCaptionsBeforeWordFilmstrip;\n    \"ef-captions-after-word-filmstrip\": EFCaptionsAfterWordFilmstrip;\n    \"ef-text-filmstrip\": EFTextFilmstrip;\n    \"ef-text-segment-filmstrip\": EFTextSegmentFilmstrip;\n    \"ef-text-hierarchy-item\": EFTextHierarchyItem;\n    \"ef-text-segment-hierarchy-item\": EFTextSegmentHierarchyItem;\n    \"ef-waveform-filmstrip\": EFWaveformFilmstrip;\n    \"ef-image-filmstrip\": EFImageFilmstrip;\n    \"ef-html-filmstrip\": EFHTMLFilmstrip;\n  }\n}\n"],"mappings":"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"}

package/dist/gui/EFFitScale.js

@@ -61,23 +61,47 @@ let EFFitScale = class EFFitScale$1 extends LitElement {
 		return this;
 	}
 	get contentChild() {
-		const firstElement = this.children[0];
-		if (!firstElement) return null;
-		let current = firstElement;
-		while (current) {
-			if (current instanceof HTMLSlotElement) {
-				const assigned = current.assignedElements()[0];
-				if (!assigned) break;
-				current = assigned;
-				continue;
+		if (!this.children.length) return null;
+		const isNonContentElement = (element) => {
+			const tagName = element.tagName.toLowerCase();
+			if ([
+				"style",
+				"script",
+				"meta",
+				"link",
+				"title",
+				"noscript"
+			].includes(tagName)) return true;
+			try {
+				const display = window.getComputedStyle(element).display;
+				return display === "none" || display === "contents";
+			} catch {
+				return false;
 			}
-			const display = window.getComputedStyle(current).display;
-			if (display !== "contents" && display !== "none") return current;
-			const firstChild = current.children[0];
-			if (!firstChild) break;
-			current = firstChild;
+		};
+		const findAllContentElements = (element) => {
+			const results = [];
+			if (element instanceof HTMLSlotElement) {
+				const assigned = element.assignedElements()[0];
+				if (assigned) results.push(...findAllContentElements(assigned));
+				return results;
+			}
+			if (!isNonContentElement(element)) results.push(element);
+			const children$1 = Array.from(element.children);
+			for (let i = 0; i < children$1.length; i++) {
+				const child = children$1[i];
+				if (child) results.push(...findAllContentElements(child));
+			}
+			return results;
+		};
+		const children = Array.from(this.children);
+		const allContentElements = [];
+		for (let i = 0; i < children.length; i++) {
+			const child = children[i];
+			if (child) allContentElements.push(...findAllContentElements(child));
 		}
-		return firstElement;
+		if (allContentElements.length === 0) return null;
+		return allContentElements[0] ?? null;
 	}
 	get scaleInfo() {
 		if (!this.contentChild) return {

package/dist/gui/EFFitScale.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFFitScale.js","names":["EFFitScale","current: Element"],"sources":["../../src/gui/EFFitScale.ts"],"sourcesContent":["import { LitElement } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { createRef } from \"lit/directives/ref.js\";\n\n@customElement(\"ef-fit-scale\")\nexport class EFFitScale extends LitElement {\n  containerRef = createRef<HTMLDivElement>();\n  contentRef = createRef<HTMLSlotElement>();\n\n  createRenderRoot() {\n    Object.assign(this.style, {\n      display: \"grid\",\n      width: \"100%\",\n      height: \"100%\",\n      gridTemplateColumns: \"100%\",\n      gridTemplateRows: \"100%\",\n      overflow: \"hidden\",\n      boxSizing: \"border-box\",\n      contain: \"strict\",\n      position: \"relative\",\n    });\n    this.id = `${this.uniqueId}`;\n    return this;\n  }\n\n  uniqueId = Math.random().toString(36).substring(2, 15);\n\n  @state()\n  private scale = 1;\n\n  private animationFrameId?: number;\n\n  get contentChild() {\n    const firstElement = this.children[0];\n    if (!firstElement) return null;\n\n    let current: Element = firstElement;\n    while (current) {\n      if (current instanceof HTMLSlotElement) {\n        const assigned = current.assignedElements()[0];\n        if (!assigned) break;\n        current = assigned;\n        continue;\n      }\n\n      const display = window.getComputedStyle(current).display;\n      if (display !== \"contents\" && display !== \"none\") {\n        return current as HTMLElement;\n      }\n      const firstChild = current.children[0];\n      if (!firstChild) break;\n      current = firstChild;\n    }\n    return firstElement as HTMLElement; // Fallback to first element if no non-contents found\n  }\n\n  get scaleInfo() {\n    if (!this.contentChild) {\n      return {\n        scale: 1,\n        containerWidth: 0,\n        containerHeight: 0,\n        contentWidth: 0,\n        contentHeight: 0,\n      };\n    }\n\n    const containerWidth = this.clientWidth;\n    const containerHeight = this.clientHeight;\n    const contentWidth = this.contentChild.clientWidth;\n    const contentHeight = this.contentChild.clientHeight;\n\n    const containerRatio = containerWidth / containerHeight;\n    const contentRatio = contentWidth / contentHeight;\n\n    const scale =\n      containerRatio > contentRatio\n        ? containerHeight / contentHeight\n        : containerWidth / contentWidth;\n\n    return {\n      scale,\n      containerWidth,\n      containerHeight,\n      contentWidth,\n      contentHeight,\n    };\n  }\n\n  scaleLastSetOn: HTMLElement | null = null;\n\n  setScale = () => {\n    if (this.isConnected) {\n      const { scale } = this.scaleInfo;\n      if (this.contentChild) {\n        const containerRect = this.getBoundingClientRect();\n        const contentRect = this.contentChild.getBoundingClientRect();\n\n        const unscaledWidth = contentRect.width / this.scale;\n        const unscaledHeight = contentRect.height / this.scale;\n        const scaledWidth = unscaledWidth * scale;\n        const scaledHeight = unscaledHeight * scale;\n        const translateX = (containerRect.width - scaledWidth) / 2;\n        const translateY = (containerRect.height - scaledHeight) / 2;\n\n        // In the rare event that the content child is changed, we need to remove the scale\n        // because we don't want to have a scale on the old content child that is somewhere else in the DOM\n        if (this.scaleLastSetOn !== this.contentChild) {\n          this.removeScale();\n        }\n        // Use toFixed to avoid floating point precision issues\n        // this will update every frame with sub-pixel changes if we don't pin it down\n        Object.assign(this.contentChild.style, {\n          transform: `translate(${translateX.toFixed(4)}px, ${translateY.toFixed(4)}px) scale(${scale.toFixed(4)})`,\n          transformOrigin: \"top left\",\n        });\n        this.scale = scale;\n        this.scaleLastSetOn = this.contentChild;\n      }\n      this.animationFrameId = requestAnimationFrame(this.setScale);\n    }\n  };\n\n  removeScale = () => {\n    if (this.scaleLastSetOn) {\n      Object.assign(this.scaleLastSetOn.style, {\n        transform: \"\",\n        transformOrigin: \"\",\n      });\n      this.scaleLastSetOn = null;\n    }\n  };\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.animationFrameId = requestAnimationFrame(this.setScale);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeScale();\n    if (this.animationFrameId) {\n      cancelAnimationFrame(this.animationFrameId);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-fit-scale\": EFFitScale;\n  }\n}\n"],"mappings":";;;;;;AAKO,uBAAMA,qBAAmB,WAAW;;;sBAC1B,WAA2B;oBAC7B,WAA4B;kBAkB9B,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,UAAU,GAAG,GAAG;eAGtC;wBA6DqB;wBAEpB;AACf,OAAI,KAAK,aAAa;IACpB,MAAM,EAAE,UAAU,KAAK;AACvB,QAAI,KAAK,cAAc;KACrB,MAAM,gBAAgB,KAAK,uBAAuB;KAClD,MAAM,cAAc,KAAK,aAAa,uBAAuB;KAE7D,MAAM,gBAAgB,YAAY,QAAQ,KAAK;KAC/C,MAAM,iBAAiB,YAAY,SAAS,KAAK;KACjD,MAAM,cAAc,gBAAgB;KACpC,MAAM,eAAe,iBAAiB;KACtC,MAAM,cAAc,cAAc,QAAQ,eAAe;KACzD,MAAM,cAAc,cAAc,SAAS,gBAAgB;AAI3D,SAAI,KAAK,mBAAmB,KAAK,aAC/B,MAAK,aAAa;AAIpB,YAAO,OAAO,KAAK,aAAa,OAAO;MACrC,WAAW,aAAa,WAAW,QAAQ,EAAE,CAAC,MAAM,WAAW,QAAQ,EAAE,CAAC,YAAY,MAAM,QAAQ,EAAE,CAAC;MACvG,iBAAiB;MAClB,CAAC;AACF,UAAK,QAAQ;AACb,UAAK,iBAAiB,KAAK;;AAE7B,SAAK,mBAAmB,sBAAsB,KAAK,SAAS;;;2BAI5C;AAClB,OAAI,KAAK,gBAAgB;AACvB,WAAO,OAAO,KAAK,eAAe,OAAO;KACvC,WAAW;KACX,iBAAiB;KAClB,CAAC;AACF,SAAK,iBAAiB;;;;CAxH1B,mBAAmB;AACjB,SAAO,OAAO,KAAK,OAAO;GACxB,SAAS;GACT,OAAO;GACP,QAAQ;GACR,qBAAqB;GACrB,kBAAkB;GAClB,UAAU;GACV,WAAW;GACX,SAAS;GACT,UAAU;GACX,CAAC;AACF,OAAK,KAAK,GAAG,KAAK;AAClB,SAAO;;CAUT,IAAI,eAAe;EACjB,MAAM,eAAe,KAAK,SAAS;AACnC,MAAI,CAAC,aAAc,QAAO;EAE1B,IAAIC,UAAmB;AACvB,SAAO,SAAS;AACd,OAAI,mBAAmB,iBAAiB;IACtC,MAAM,WAAW,QAAQ,kBAAkB,CAAC;AAC5C,QAAI,CAAC,SAAU;AACf,cAAU;AACV;;GAGF,MAAM,UAAU,OAAO,iBAAiB,QAAQ,CAAC;AACjD,OAAI,YAAY,cAAc,YAAY,OACxC,QAAO;GAET,MAAM,aAAa,QAAQ,SAAS;AACpC,OAAI,CAAC,WAAY;AACjB,aAAU;;AAEZ,SAAO;;CAGT,IAAI,YAAY;AACd,MAAI,CAAC,KAAK,aACR,QAAO;GACL,OAAO;GACP,gBAAgB;GAChB,iBAAiB;GACjB,cAAc;GACd,eAAe;GAChB;EAGH,MAAM,iBAAiB,KAAK;EAC5B,MAAM,kBAAkB,KAAK;EAC7B,MAAM,eAAe,KAAK,aAAa;EACvC,MAAM,gBAAgB,KAAK,aAAa;AAUxC,SAAO;GACL,OATqB,iBAAiB,kBACnB,eAAe,gBAI9B,kBAAkB,gBAClB,iBAAiB;GAIrB;GACA;GACA;GACA;GACD;;CA+CH,oBAA0B;AACxB,QAAM,mBAAmB;AACzB,OAAK,mBAAmB,sBAAsB,KAAK,SAAS;;CAG9D,uBAA6B;AAC3B,QAAM,sBAAsB;AAC5B,OAAK,aAAa;AAClB,MAAI,KAAK,iBACP,sBAAqB,KAAK,iBAAiB;;;YAnH9C,OAAO;yBAvBT,cAAc,eAAe"}
+{"version":3,"file":"EFFitScale.js","names":["EFFitScale","results: HTMLElement[]","children","allContentElements: HTMLElement[]"],"sources":["../../src/gui/EFFitScale.ts"],"sourcesContent":["import { LitElement } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { createRef } from \"lit/directives/ref.js\";\n\n@customElement(\"ef-fit-scale\")\nexport class EFFitScale extends LitElement {\n  containerRef = createRef<HTMLDivElement>();\n  contentRef = createRef<HTMLSlotElement>();\n\n  createRenderRoot() {\n    Object.assign(this.style, {\n      display: \"grid\",\n      width: \"100%\",\n      height: \"100%\",\n      gridTemplateColumns: \"100%\",\n      gridTemplateRows: \"100%\",\n      overflow: \"hidden\",\n      boxSizing: \"border-box\",\n      contain: \"strict\",\n      position: \"relative\",\n    });\n    this.id = `${this.uniqueId}`;\n    return this;\n  }\n\n  uniqueId = Math.random().toString(36).substring(2, 15);\n\n  @state()\n  private scale = 1;\n\n  private animationFrameId?: number;\n\n  get contentChild() {\n    if (!this.children.length) return null;\n\n    const isNonContentElement = (element: Element): boolean => {\n      const tagName = element.tagName.toLowerCase();\n      const nonContentTags = [\n        \"style\",\n        \"script\",\n        \"meta\",\n        \"link\",\n        \"title\",\n        \"noscript\",\n      ];\n      if (nonContentTags.includes(tagName)) return true;\n\n      try {\n        const display = window.getComputedStyle(element).display;\n        return display === \"none\" || display === \"contents\";\n      } catch {\n        return false;\n      }\n    };\n\n    const findAllContentElements = (element: Element): HTMLElement[] => {\n      const results: HTMLElement[] = [];\n\n      if (element instanceof HTMLSlotElement) {\n        const assigned = element.assignedElements()[0];\n        if (assigned) {\n          results.push(...findAllContentElements(assigned));\n        }\n        return results;\n      }\n\n      if (!isNonContentElement(element)) {\n        results.push(element as HTMLElement);\n      }\n\n      const children = Array.from(element.children);\n      for (let i = 0; i < children.length; i++) {\n        const child = children[i];\n        if (child) {\n          results.push(...findAllContentElements(child));\n        }\n      }\n\n      return results;\n    };\n\n    const children = Array.from(this.children);\n    const allContentElements: HTMLElement[] = [];\n    for (let i = 0; i < children.length; i++) {\n      const child = children[i];\n      if (child) {\n        allContentElements.push(...findAllContentElements(child));\n      }\n    }\n\n    if (allContentElements.length === 0) return null;\n\n    return allContentElements[0] ?? null;\n  }\n\n  get scaleInfo() {\n    if (!this.contentChild) {\n      return {\n        scale: 1,\n        containerWidth: 0,\n        containerHeight: 0,\n        contentWidth: 0,\n        contentHeight: 0,\n      };\n    }\n\n    const containerWidth = this.clientWidth;\n    const containerHeight = this.clientHeight;\n    const contentWidth = this.contentChild.clientWidth;\n    const contentHeight = this.contentChild.clientHeight;\n\n    const containerRatio = containerWidth / containerHeight;\n    const contentRatio = contentWidth / contentHeight;\n\n    const scale =\n      containerRatio > contentRatio\n        ? containerHeight / contentHeight\n        : containerWidth / contentWidth;\n\n    return {\n      scale,\n      containerWidth,\n      containerHeight,\n      contentWidth,\n      contentHeight,\n    };\n  }\n\n  scaleLastSetOn: HTMLElement | null = null;\n\n  setScale = () => {\n    if (this.isConnected) {\n      const { scale } = this.scaleInfo;\n      if (this.contentChild) {\n        const containerRect = this.getBoundingClientRect();\n        const contentRect = this.contentChild.getBoundingClientRect();\n\n        const unscaledWidth = contentRect.width / this.scale;\n        const unscaledHeight = contentRect.height / this.scale;\n        const scaledWidth = unscaledWidth * scale;\n        const scaledHeight = unscaledHeight * scale;\n        const translateX = (containerRect.width - scaledWidth) / 2;\n        const translateY = (containerRect.height - scaledHeight) / 2;\n\n        // In the rare event that the content child is changed, we need to remove the scale\n        // because we don't want to have a scale on the old content child that is somewhere else in the DOM\n        if (this.scaleLastSetOn !== this.contentChild) {\n          this.removeScale();\n        }\n        // Use toFixed to avoid floating point precision issues\n        // this will update every frame with sub-pixel changes if we don't pin it down\n        Object.assign(this.contentChild.style, {\n          transform: `translate(${translateX.toFixed(4)}px, ${translateY.toFixed(4)}px) scale(${scale.toFixed(4)})`,\n          transformOrigin: \"top left\",\n        });\n        this.scale = scale;\n        this.scaleLastSetOn = this.contentChild;\n      }\n      this.animationFrameId = requestAnimationFrame(this.setScale);\n    }\n  };\n\n  removeScale = () => {\n    if (this.scaleLastSetOn) {\n      Object.assign(this.scaleLastSetOn.style, {\n        transform: \"\",\n        transformOrigin: \"\",\n      });\n      this.scaleLastSetOn = null;\n    }\n  };\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.animationFrameId = requestAnimationFrame(this.setScale);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeScale();\n    if (this.animationFrameId) {\n      cancelAnimationFrame(this.animationFrameId);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-fit-scale\": EFFitScale;\n  }\n}\n"],"mappings":"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"}

package/dist/gui/EFFocusOverlay.d.ts

@@ -1,16 +1,16 @@
-import * as lit22 from "lit";
+import * as lit24 from "lit";
 import { LitElement } from "lit";
-import * as lit_html19 from "lit-html";
+import * as lit_html21 from "lit-html";
 import * as lit_html_directives_ref_js3 from "lit-html/directives/ref.js";
 
 //#region src/gui/EFFocusOverlay.d.ts
 declare class EFFocusOverlay extends LitElement {
-  static styles: lit22.CSSResult;
+  static styles: lit24.CSSResult;
   focusedElement?: HTMLElement | null;
   overlay: lit_html_directives_ref_js3.Ref<HTMLDivElement>;
   private animationFrame?;
   drawOverlay: () => void;
-  render(): lit_html19.TemplateResult<1>;
+  render(): lit_html21.TemplateResult<1>;
   connectedCallback(): void;
   disconnectedCallback(): void;
   protected updated(): void;

package/dist/gui/EFPause.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit16 from "lit";
+import * as lit18 from "lit";
 import { LitElement } from "lit";
-import * as lit_html14 from "lit-html";
+import * as lit_html16 from "lit-html";
 
 //#region src/gui/EFPause.d.ts
 declare const EFPause_base: (new (...args: any[]) => {
@@ -10,13 +10,13 @@ declare const EFPause_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFPause extends EFPause_base {
-  static styles: lit16.CSSResult[];
+  static styles: lit18.CSSResult[];
   playing: boolean;
   get efContext(): ControllableInterface | null;
   connectedCallback(): void;
   disconnectedCallback(): void;
   updated(changedProperties: Map<string | number | symbol, unknown>): void;
-  render(): lit_html14.TemplateResult<1>;
+  render(): lit_html16.TemplateResult<1>;
   handleClick: () => void;
 }
 declare global {

package/dist/gui/EFPlay.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit15 from "lit";
+import * as lit17 from "lit";
 import { LitElement } from "lit";
-import * as lit_html13 from "lit-html";
+import * as lit_html15 from "lit-html";
 
 //#region src/gui/EFPlay.d.ts
 declare const EFPlay_base: (new (...args: any[]) => {
@@ -10,13 +10,13 @@ declare const EFPlay_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFPlay extends EFPlay_base {
-  static styles: lit15.CSSResult[];
+  static styles: lit17.CSSResult[];
   playing: boolean;
   get efContext(): ControllableInterface | null;
   connectedCallback(): void;
   disconnectedCallback(): void;
   updated(changedProperties: Map<string | number | symbol, unknown>): void;
-  render(): lit_html13.TemplateResult<1>;
+  render(): lit_html15.TemplateResult<1>;
   handleClick: () => void;
 }
 declare global {

package/dist/gui/EFPreview.d.ts

@@ -1,19 +1,19 @@
 import { ContextMixinInterface } from "./ContextMixin.js";
-import * as lit11 from "lit";
+import * as lit13 from "lit";
 import { LitElement } from "lit";
-import * as lit_html11 from "lit-html";
+import * as lit_html13 from "lit-html";
 
 //#region src/gui/EFPreview.d.ts
 declare const EFPreview_base: (new (...args: any[]) => ContextMixinInterface) & typeof LitElement;
 declare class EFPreview extends EFPreview_base {
-  static styles: lit11.CSSResult[];
+  static styles: lit13.CSSResult[];
   focusedElement?: HTMLElement;
   /**
    * Find the closest temporal element (timegroup, video, audio, etc.)
    */
   private findClosestTemporal;
   constructor();
-  render(): lit_html11.TemplateResult<1>;
+  render(): lit_html13.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFPreview.js

@@ -32,12 +32,12 @@ let EFPreview = class EFPreview$1 extends EFTargetable(ContextMixin(TWMixin(LitE
 	}
 	constructor() {
 		super();
-		this.addEventListener("mouseover", (e) => {
+		this.addEventListener("pointerover", (e) => {
 			const target = e.target;
 			const temporal = this.findClosestTemporal(target);
 			if (target !== this && temporal) this.focusedElement = target;
 		});
-		this.addEventListener("mouseout", (e) => {
+		this.addEventListener("pointerout", (e) => {
 			const relatedTarget = e.relatedTarget;
 			const targetingTemporal = this.findClosestTemporal(relatedTarget);
 			if (!this.contains(relatedTarget) || relatedTarget === this || !targetingTemporal) this.focusedElement = void 0;

package/dist/gui/EFPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFPreview.js","names":["EFPreview"],"sources":["../../src/gui/EFPreview.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { isEFTemporal } from \"../elements/EFTemporal.js\";\nimport { EFTargetable } from \"../elements/TargetController.js\";\nimport { ContextMixin } from \"./ContextMixin.js\";\nimport { focusedElementContext } from \"./focusedElementContext.js\";\nimport { TWMixin } from \"./TWMixin.js\";\n\n@customElement(\"ef-preview\")\nexport class EFPreview extends EFTargetable(ContextMixin(TWMixin(LitElement))) {\n  static styles = [\n    css`\n      :host {\n        position: relative;\n        display: block;\n        cursor: crosshair;\n      }\n    `,\n  ];\n\n  @provide({ context: focusedElementContext })\n  focusedElement?: HTMLElement;\n\n  /**\n   * Find the closest temporal element (timegroup, video, audio, etc.)\n   */\n  private findClosestTemporal(element: HTMLElement | null): HTMLElement | null {\n    let current = element;\n    while (current && current !== this) {\n      if (isEFTemporal(current)) {\n        return current;\n      }\n      current = current.parentElement;\n    }\n    return null;\n  }\n\n  constructor() {\n    super();\n    this.addEventListener(\"mouseover\", (e) => {\n      const target = e.target as HTMLElement;\n      const temporal = this.findClosestTemporal(target);\n      if (target !== this && temporal) {\n        this.focusedElement = target;\n      }\n    });\n    this.addEventListener(\"mouseout\", (e) => {\n      const relatedTarget = e.relatedTarget as HTMLElement;\n      const targetingTemporal = this.findClosestTemporal(relatedTarget);\n      // Clear focus if:\n      // 1. Moving outside the preview entirely, or\n      // 2. Moving to the preview itself, or\n      // 3. Moving to an element that's not within a temporal\n      if (\n        !this.contains(relatedTarget) ||\n        relatedTarget === this ||\n        !targetingTemporal\n      ) {\n        this.focusedElement = undefined;\n      }\n    });\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-preview\": EFPreview;\n  }\n}\n"],"mappings":";;;;;;;;;;;AAUO,sBAAMA,oBAAkB,aAAa,aAAa,QAAQ,WAAW,CAAC,CAAC,CAAC;;gBAC7D,CACd,GAAG;;;;;;MAOJ;;;;;CAQD,AAAQ,oBAAoB,SAAiD;EAC3E,IAAI,UAAU;AACd,SAAO,WAAW,YAAY,MAAM;AAClC,OAAI,aAAa,QAAQ,CACvB,QAAO;AAET,aAAU,QAAQ;;AAEpB,SAAO;;CAGT,cAAc;AACZ,SAAO;AACP,OAAK,iBAAiB,cAAc,MAAM;GACxC,MAAM,SAAS,EAAE;GACjB,MAAM,WAAW,KAAK,oBAAoB,OAAO;AACjD,OAAI,WAAW,QAAQ,SACrB,MAAK,iBAAiB;IAExB;AACF,OAAK,iBAAiB,aAAa,MAAM;GACvC,MAAM,gBAAgB,EAAE;GACxB,MAAM,oBAAoB,KAAK,oBAAoB,cAAc;AAKjE,OACE,CAAC,KAAK,SAAS,cAAc,IAC7B,kBAAkB,QAClB,CAAC,kBAED,MAAK,iBAAiB;IAExB;;CAGJ,SAAS;AACP,SAAO,IAAI;;;YA5CZ,QAAQ,EAAE,SAAS,uBAAuB,CAAC;wBAZ7C,cAAc,aAAa"}
+{"version":3,"file":"EFPreview.js","names":["EFPreview"],"sources":["../../src/gui/EFPreview.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { isEFTemporal } from \"../elements/EFTemporal.js\";\nimport { EFTargetable } from \"../elements/TargetController.js\";\nimport { ContextMixin } from \"./ContextMixin.js\";\nimport { focusedElementContext } from \"./focusedElementContext.js\";\nimport { TWMixin } from \"./TWMixin.js\";\n\n@customElement(\"ef-preview\")\nexport class EFPreview extends EFTargetable(ContextMixin(TWMixin(LitElement))) {\n  static styles = [\n    css`\n      :host {\n        position: relative;\n        display: block;\n        cursor: crosshair;\n      }\n    `,\n  ];\n\n  @provide({ context: focusedElementContext })\n  focusedElement?: HTMLElement;\n\n  /**\n   * Find the closest temporal element (timegroup, video, audio, etc.)\n   */\n  private findClosestTemporal(element: HTMLElement | null): HTMLElement | null {\n    let current = element;\n    while (current && current !== this) {\n      if (isEFTemporal(current)) {\n        return current;\n      }\n      current = current.parentElement;\n    }\n    return null;\n  }\n\n  constructor() {\n    super();\n    this.addEventListener(\"pointerover\", (e) => {\n      const target = e.target as HTMLElement;\n      const temporal = this.findClosestTemporal(target);\n      if (target !== this && temporal) {\n        this.focusedElement = target;\n      }\n    });\n    this.addEventListener(\"pointerout\", (e) => {\n      const relatedTarget = e.relatedTarget as HTMLElement;\n      const targetingTemporal = this.findClosestTemporal(relatedTarget);\n      // Clear focus if:\n      // 1. Moving outside the preview entirely, or\n      // 2. Moving to the preview itself, or\n      // 3. Moving to an element that's not within a temporal\n      if (\n        !this.contains(relatedTarget) ||\n        relatedTarget === this ||\n        !targetingTemporal\n      ) {\n        this.focusedElement = undefined;\n      }\n    });\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-preview\": EFPreview;\n  }\n}\n"],"mappings":";;;;;;;;;;;AAUO,sBAAMA,oBAAkB,aAAa,aAAa,QAAQ,WAAW,CAAC,CAAC,CAAC;;gBAC7D,CACd,GAAG;;;;;;MAOJ;;;;;CAQD,AAAQ,oBAAoB,SAAiD;EAC3E,IAAI,UAAU;AACd,SAAO,WAAW,YAAY,MAAM;AAClC,OAAI,aAAa,QAAQ,CACvB,QAAO;AAET,aAAU,QAAQ;;AAEpB,SAAO;;CAGT,cAAc;AACZ,SAAO;AACP,OAAK,iBAAiB,gBAAgB,MAAM;GAC1C,MAAM,SAAS,EAAE;GACjB,MAAM,WAAW,KAAK,oBAAoB,OAAO;AACjD,OAAI,WAAW,QAAQ,SACrB,MAAK,iBAAiB;IAExB;AACF,OAAK,iBAAiB,eAAe,MAAM;GACzC,MAAM,gBAAgB,EAAE;GACxB,MAAM,oBAAoB,KAAK,oBAAoB,cAAc;AAKjE,OACE,CAAC,KAAK,SAAS,cAAc,IAC7B,kBAAkB,QAClB,CAAC,kBAED,MAAK,iBAAiB;IAExB;;CAGJ,SAAS;AACP,SAAO,IAAI;;;YA5CZ,QAAQ,EAAE,SAAS,uBAAuB,CAAC;wBAZ7C,cAAc,aAAa"}

package/dist/gui/EFResizableBox.d.ts

@@ -1,6 +1,6 @@
-import * as lit23 from "lit";
+import * as lit25 from "lit";
 import { LitElement } from "lit";
-import * as lit_html20 from "lit-html";
+import * as lit_html22 from "lit-html";
 
 //#region src/gui/EFResizableBox.d.ts
 interface BoxBounds {
@@ -18,7 +18,7 @@ declare class EFResizableBox extends LitElement {
   private dragMode;
   private interaction;
   private modifiers;
-  static styles: lit23.CSSResult;
+  static styles: lit25.CSSResult;
   private resizeObserver?;
   connectedCallback(): void;
   private handlePointerDown;
@@ -33,7 +33,7 @@ declare class EFResizableBox extends LitElement {
   private simpleConstrainBounds;
   private constrainResizeDeltas;
   private dispatchBoundsChange;
-  render(): lit_html20.TemplateResult<1>;
+  render(): lit_html22.TemplateResult<1>;
   private renderHandles;
 }
 //#endregion