@editframe/elements 0.23.8-beta.0 → 0.25.0-beta.0

package/dist/gui/EFFilmstrip.js.map

@@ -0,0 +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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"}

package/dist/gui/EFFitScale.d.ts

@@ -1,27 +1,33 @@
-import { LitElement } from 'lit';
-export declare class EFFitScale extends LitElement {
-    containerRef: import('lit-html/directives/ref').Ref<HTMLDivElement>;
-    contentRef: import('lit-html/directives/ref').Ref<HTMLSlotElement>;
-    createRenderRoot(): this;
-    uniqueId: string;
-    private scale;
-    private animationFrameId?;
-    get contentChild(): HTMLElement | null;
-    get scaleInfo(): {
-        scale: number;
-        containerWidth: number;
-        containerHeight: number;
-        contentWidth: number;
-        contentHeight: number;
-    };
-    scaleLastSetOn: HTMLElement | null;
-    setScale: () => void;
-    removeScale: () => void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+import { LitElement } from "lit";
+import * as lit_html_directives_ref3 from "lit-html/directives/ref";
+
+//#region src/gui/EFFitScale.d.ts
+declare class EFFitScale extends LitElement {
+  containerRef: lit_html_directives_ref3.Ref<HTMLDivElement>;
+  contentRef: lit_html_directives_ref3.Ref<HTMLSlotElement>;
+  createRenderRoot(): this;
+  uniqueId: string;
+  private scale;
+  private animationFrameId?;
+  get contentChild(): HTMLElement | null;
+  get scaleInfo(): {
+    scale: number;
+    containerWidth: number;
+    containerHeight: number;
+    contentWidth: number;
+    contentHeight: number;
+  };
+  scaleLastSetOn: HTMLElement | null;
+  setScale: () => void;
+  removeScale: () => void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        "ef-fit-scale": EFFitScale;
-    }
+  interface HTMLElementTagNameMap {
+    "ef-fit-scale": EFFitScale;
+  }
 }
+//#endregion
+export { EFFitScale };
+//# sourceMappingURL=EFFitScale.d.ts.map

package/dist/gui/EFFitScale.js

@@ -2,7 +2,9 @@ import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/dec
 import { LitElement } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { createRef } from "lit/directives/ref.js";
-var EFFitScale = class EFFitScale$1 extends LitElement {
+
+//#region src/gui/EFFitScale.ts
+let EFFitScale = class EFFitScale$1 extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.containerRef = createRef();
@@ -109,4 +111,7 @@ var EFFitScale = class EFFitScale$1 extends LitElement {
 };
 __decorate([state()], EFFitScale.prototype, "scale", void 0);
 EFFitScale = __decorate([customElement("ef-fit-scale")], EFFitScale);
+
+//#endregion
 export { EFFitScale };
+//# sourceMappingURL=EFFitScale.js.map

package/dist/gui/EFFitScale.js.map

@@ -0,0 +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"}

package/dist/gui/EFFocusOverlay.d.ts

@@ -1,17 +1,25 @@
-import { LitElement } from 'lit';
-export declare class EFFocusOverlay extends LitElement {
-    static styles: import('lit').CSSResult;
-    focusedElement?: HTMLElement | null;
-    overlay: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
-    private animationFrame?;
-    drawOverlay: () => void;
-    render(): import('lit-html').TemplateResult<1>;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(): void;
+import * as lit22 from "lit";
+import { LitElement } from "lit";
+import * as lit_html19 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;
+  focusedElement?: HTMLElement | null;
+  overlay: lit_html_directives_ref_js3.Ref<HTMLDivElement>;
+  private animationFrame?;
+  drawOverlay: () => void;
+  render(): lit_html19.TemplateResult<1>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected updated(): void;
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        "ef-focus-overlay": EFFocusOverlay;
-    }
+  interface HTMLElementTagNameMap {
+    "ef-focus-overlay": EFFocusOverlay;
+  }
 }
+//#endregion
+export { EFFocusOverlay };
+//# sourceMappingURL=EFFocusOverlay.d.ts.map

package/dist/gui/EFFocusOverlay.js

@@ -4,7 +4,9 @@ import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
-var EFFocusOverlay = class EFFocusOverlay$1 extends LitElement {
+
+//#region src/gui/EFFocusOverlay.ts
+let EFFocusOverlay = class EFFocusOverlay$1 extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.overlay = createRef();
@@ -63,4 +65,7 @@ __decorate([consume({
 	subscribe: true
 })], EFFocusOverlay.prototype, "focusedElement", void 0);
 EFFocusOverlay = __decorate([customElement("ef-focus-overlay")], EFFocusOverlay);
+
+//#endregion
 export { EFFocusOverlay };
+//# sourceMappingURL=EFFocusOverlay.js.map

package/dist/gui/EFFocusOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFFocusOverlay.js","names":["EFFocusOverlay"],"sources":["../../src/gui/EFFocusOverlay.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport { focusedElementContext } from \"./focusedElementContext.js\";\n\n@customElement(\"ef-focus-overlay\")\nexport class EFFocusOverlay extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      position: relative;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n    }\n    .overlay {\n      position: fixed;\n      outline: 2px solid var(--ef-focus-overlay-color, rgb(59, 130, 246));\n      background: var(--ef-focus-overlay-background, rgb(59, 130, 246));\n      outline: 2px solid var(--ef-focus-overlay-color, rgb(59, 130, 246));\n      mix-blend-mode: multiply;\n      opacity: 0.4;\n      display: none;\n    }\n  `;\n\n  @consume({ context: focusedElementContext, subscribe: true })\n  focusedElement?: HTMLElement | null;\n\n  overlay = createRef<HTMLDivElement>();\n\n  private animationFrame?: number;\n\n  drawOverlay = () => {\n    const overlay = this.overlay.value;\n    if (overlay) {\n      if (this.focusedElement) {\n        overlay.style.display = \"block\";\n        const rect = this.focusedElement.getBoundingClientRect();\n        Object.assign(overlay.style, {\n          top: `${rect.top}px`,\n          left: `${rect.left}px`,\n          width: `${rect.width}px`,\n          height: `${rect.height}px`,\n        });\n        this.animationFrame = requestAnimationFrame(this.drawOverlay);\n      } else {\n        overlay.style.display = \"none\";\n      }\n    }\n  };\n\n  render() {\n    return html`<div ${ref(this.overlay)} class=\"overlay\"></div>`;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.drawOverlay();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.animationFrame) {\n      cancelAnimationFrame(this.animationFrame);\n    }\n  }\n\n  protected updated(): void {\n    this.drawOverlay();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-focus-overlay\": EFFocusOverlay;\n  }\n}\n"],"mappings":";;;;;;;;AAOO,2BAAMA,yBAAuB,WAAW;;;iBAuBnC,WAA2B;2BAIjB;GAClB,MAAM,UAAU,KAAK,QAAQ;AAC7B,OAAI,QACF,KAAI,KAAK,gBAAgB;AACvB,YAAQ,MAAM,UAAU;IACxB,MAAM,OAAO,KAAK,eAAe,uBAAuB;AACxD,WAAO,OAAO,QAAQ,OAAO;KAC3B,KAAK,GAAG,KAAK,IAAI;KACjB,MAAM,GAAG,KAAK,KAAK;KACnB,OAAO,GAAG,KAAK,MAAM;KACrB,QAAQ,GAAG,KAAK,OAAO;KACxB,CAAC;AACF,SAAK,iBAAiB,sBAAsB,KAAK,YAAY;SAE7D,SAAQ,MAAM,UAAU;;;;gBAxCd,GAAG;;;;;;;;;;;;;;;;;;;CA6CnB,SAAS;AACP,SAAO,IAAI,QAAQ,IAAI,KAAK,QAAQ,CAAC;;CAGvC,oBAA0B;AACxB,QAAM,mBAAmB;AACzB,OAAK,aAAa;;CAGpB,uBAA6B;AAC3B,QAAM,sBAAsB;AAC5B,MAAI,KAAK,eACP,sBAAqB,KAAK,eAAe;;CAI7C,AAAU,UAAgB;AACxB,OAAK,aAAa;;;YA3CnB,QAAQ;CAAE,SAAS;CAAuB,WAAW;CAAM,CAAC;6BArB9D,cAAc,mBAAmB"}

package/dist/gui/EFPause.d.ts

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

package/dist/gui/EFPause.js

@@ -6,8 +6,10 @@ import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
 import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
+
+//#region src/gui/EFPause.ts
 attachContextRoot();
-var EFPause = class EFPause$1 extends TargetOrContextMixin(LitElement, efContext) {
+let EFPause = class EFPause$1 extends TargetOrContextMixin(LitElement, efContext) {
 	constructor(..._args) {
 		super(..._args);
 		this.playing = false;
@@ -56,4 +58,7 @@ __decorate([consume({
 	subscribe: true
 }), state()], EFPause.prototype, "playing", void 0);
 EFPause = __decorate([customElement("ef-pause")], EFPause);
+
+//#endregion
 export { EFPause };
+//# sourceMappingURL=EFPause.js.map

package/dist/gui/EFPause.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFPause.js","names":["EFPause"],"sources":["../../src/gui/EFPause.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { attachContextRoot } from \"../attachContextRoot.js\";\nimport type { ControllableInterface } from \"./Controllable.js\";\nimport { efContext } from \"./efContext.js\";\nimport { playingContext } from \"./playingContext.js\";\nimport { TargetOrContextMixin } from \"./TargetOrContextMixin.js\";\n\nattachContextRoot();\n\n@customElement(\"ef-pause\")\nexport class EFPause extends TargetOrContextMixin(LitElement, efContext) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n      :host([hidden]) {\n        display: none;\n      }\n      div {\n        all: inherit;\n      }\n    `,\n  ];\n\n  @consume({ context: playingContext, subscribe: true })\n  @state()\n  playing = false;\n\n  get efContext(): ControllableInterface | null {\n    return this.effectiveContext;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this.handleClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this.handleClick);\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has(\"playing\")) {\n      this.style.display = this.playing ? \"\" : \"none\";\n    }\n  }\n\n  render() {\n    return html`\n      <div>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  handleClick = () => {\n    if (this.efContext) {\n      this.efContext.pause();\n    }\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-pause\": EFPause;\n  }\n}\n"],"mappings":";;;;;;;;;;AASA,mBAAmB;AAGZ,oBAAMA,kBAAgB,qBAAqB,YAAY,UAAU,CAAC;;;iBAiB7D;2BAgCU;AAClB,OAAI,KAAK,UACP,MAAK,UAAU,OAAO;;;;gBAlDV,CACd,GAAG;;;;;;;;;;MAWJ;;CAMD,IAAI,YAA0C;AAC5C,SAAO,KAAK;;CAGd,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,OAAK,iBAAiB,SAAS,KAAK,YAAY;;CAGlD,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,OAAK,oBAAoB,SAAS,KAAK,YAAY;;CAGrD,QAAQ,mBAAiE;AACvE,QAAM,QAAQ,kBAAkB;AAEhC,MAAI,kBAAkB,IAAI,UAAU,CAClC,MAAK,MAAM,UAAU,KAAK,UAAU,KAAK;;CAI7C,SAAS;AACP,SAAO,IAAI;;;;;;;YA3BZ,QAAQ;CAAE,SAAS;CAAgB,WAAW;CAAM,CAAC,EACrD,OAAO;sBAjBT,cAAc,WAAW"}

package/dist/gui/EFPlay.d.ts

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

package/dist/gui/EFPlay.js

@@ -6,8 +6,10 @@ import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
 import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
+
+//#region src/gui/EFPlay.ts
 attachContextRoot();
-var EFPlay = class EFPlay$1 extends TargetOrContextMixin(LitElement, efContext) {
+let EFPlay = class EFPlay$1 extends TargetOrContextMixin(LitElement, efContext) {
 	constructor(..._args) {
 		super(..._args);
 		this.playing = false;
@@ -56,4 +58,7 @@ __decorate([consume({
 	subscribe: true
 }), state()], EFPlay.prototype, "playing", void 0);
 EFPlay = __decorate([customElement("ef-play")], EFPlay);
+
+//#endregion
 export { EFPlay };
+//# sourceMappingURL=EFPlay.js.map

package/dist/gui/EFPlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFPlay.js","names":["EFPlay"],"sources":["../../src/gui/EFPlay.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { attachContextRoot } from \"../attachContextRoot.js\";\nimport type { ControllableInterface } from \"./Controllable.js\";\nimport { efContext } from \"./efContext.js\";\nimport { playingContext } from \"./playingContext.js\";\nimport { TargetOrContextMixin } from \"./TargetOrContextMixin.js\";\n\nattachContextRoot();\n\n@customElement(\"ef-play\")\nexport class EFPlay extends TargetOrContextMixin(LitElement, efContext) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n      :host([hidden]) {\n        display: none;\n      }\n      div {\n        all: inherit;\n      }\n    `,\n  ];\n\n  @consume({ context: playingContext, subscribe: true })\n  @state()\n  playing = false;\n\n  get efContext(): ControllableInterface | null {\n    return this.effectiveContext;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this.handleClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this.handleClick);\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has(\"playing\")) {\n      this.style.display = this.playing ? \"none\" : \"\";\n    }\n  }\n\n  render() {\n    return html`\n      <div>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  handleClick = () => {\n    if (this.efContext) {\n      this.efContext.play();\n    }\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-play\": EFPlay;\n  }\n}\n"],"mappings":";;;;;;;;;;AASA,mBAAmB;AAGZ,mBAAMA,iBAAe,qBAAqB,YAAY,UAAU,CAAC;;;iBAiB5D;2BAgCU;AAClB,OAAI,KAAK,UACP,MAAK,UAAU,MAAM;;;;gBAlDT,CACd,GAAG;;;;;;;;;;MAWJ;;CAMD,IAAI,YAA0C;AAC5C,SAAO,KAAK;;CAGd,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,OAAK,iBAAiB,SAAS,KAAK,YAAY;;CAGlD,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,OAAK,oBAAoB,SAAS,KAAK,YAAY;;CAGrD,QAAQ,mBAAiE;AACvE,QAAM,QAAQ,kBAAkB;AAEhC,MAAI,kBAAkB,IAAI,UAAU,CAClC,MAAK,MAAM,UAAU,KAAK,UAAU,SAAS;;CAIjD,SAAS;AACP,SAAO,IAAI;;;;;;;YA3BZ,QAAQ;CAAE,SAAS;CAAgB,WAAW;CAAM,CAAC,EACrD,OAAO;qBAjBT,cAAc,UAAU"}

package/dist/gui/EFPreview.d.ts

@@ -1,18 +1,25 @@
-import { LitElement } from 'lit';
-declare const EFPreview_base: (new (...args: any[]) => import('./ContextMixin.js').ContextMixinInterface) & typeof LitElement;
-export declare class EFPreview extends EFPreview_base {
-    static styles: import('lit').CSSResult[];
-    focusedElement?: HTMLElement;
-    /**
-     * Find the closest temporal element (timegroup, video, audio, etc.)
-     */
-    private findClosestTemporal;
-    constructor();
-    render(): import('lit-html').TemplateResult<1>;
+import { ContextMixinInterface } from "./ContextMixin.js";
+import * as lit11 from "lit";
+import { LitElement } from "lit";
+import * as lit_html11 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[];
+  focusedElement?: HTMLElement;
+  /**
+   * Find the closest temporal element (timegroup, video, audio, etc.)
+   */
+  private findClosestTemporal;
+  constructor();
+  render(): lit_html11.TemplateResult<1>;
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        "ef-preview": EFPreview;
-    }
+  interface HTMLElementTagNameMap {
+    "ef-preview": EFPreview;
+  }
 }
-export {};
+//#endregion
+export { EFPreview };
+//# sourceMappingURL=EFPreview.d.ts.map

package/dist/gui/EFPreview.js

@@ -7,7 +7,9 @@ import { EFTargetable } from "../elements/TargetController.js";
 import { provide } from "@lit/context";
 import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
-var EFPreview = class EFPreview$1 extends EFTargetable(ContextMixin(TWMixin(LitElement))) {
+
+//#region src/gui/EFPreview.ts
+let EFPreview = class EFPreview$1 extends EFTargetable(ContextMixin(TWMixin(LitElement))) {
 	static {
 		this.styles = [css`
       :host {
@@ -17,6 +19,9 @@ var EFPreview = class EFPreview$1 extends EFTargetable(ContextMixin(TWMixin(LitE
       }
     `];
 	}
+	/**
+	* Find the closest temporal element (timegroup, video, audio, etc.)
+	*/
 	findClosestTemporal(element) {
 		let current = element;
 		while (current && current !== this) {
@@ -44,4 +49,7 @@ var EFPreview = class EFPreview$1 extends EFTargetable(ContextMixin(TWMixin(LitE
 };
 __decorate([provide({ context: focusedElementContext })], EFPreview.prototype, "focusedElement", void 0);
 EFPreview = __decorate([customElement("ef-preview")], EFPreview);
+
+//#endregion
 export { EFPreview };
+//# sourceMappingURL=EFPreview.js.map

package/dist/gui/EFPreview.js.map

@@ -0,0 +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"}

package/dist/gui/EFResizableBox.d.ts

@@ -1,34 +1,41 @@
-import { LitElement } from 'lit';
-export interface BoxBounds {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
+import * as lit23 from "lit";
+import { LitElement } from "lit";
+import * as lit_html20 from "lit-html";
+
+//#region src/gui/EFResizableBox.d.ts
+interface BoxBounds {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
 }
-export declare class EFResizableBox extends LitElement {
-    bounds: BoxBounds;
-    private containerWidth;
-    private containerHeight;
-    minSize: number;
-    private isDragging;
-    private dragMode;
-    private interaction;
-    private modifiers;
-    static styles: import('lit').CSSResult;
-    private resizeObserver?;
-    connectedCallback(): void;
-    private handlePointerDown;
-    private handlePointerMove;
-    private handlePointerUp;
-    private calculateBoundsWithModeAwareConstraints;
-    private constrainBoundsForMode;
-    private isValidBounds;
-    private constrainWithAspectRatio;
-    private constrainCenterResize;
-    private constrainCenterResizeWithAspectRatio;
-    private simpleConstrainBounds;
-    private constrainResizeDeltas;
-    private dispatchBoundsChange;
-    render(): import('lit-html').TemplateResult<1>;
-    private renderHandles;
+declare class EFResizableBox extends LitElement {
+  bounds: BoxBounds;
+  private containerWidth;
+  private containerHeight;
+  minSize: number;
+  private isDragging;
+  private dragMode;
+  private interaction;
+  private modifiers;
+  static styles: lit23.CSSResult;
+  private resizeObserver?;
+  connectedCallback(): void;
+  private handlePointerDown;
+  private handlePointerMove;
+  private handlePointerUp;
+  private calculateBoundsWithModeAwareConstraints;
+  private constrainBoundsForMode;
+  private isValidBounds;
+  private constrainWithAspectRatio;
+  private constrainCenterResize;
+  private constrainCenterResizeWithAspectRatio;
+  private simpleConstrainBounds;
+  private constrainResizeDeltas;
+  private dispatchBoundsChange;
+  render(): lit_html20.TemplateResult<1>;
+  private renderHandles;
 }
+//#endregion
+export { BoxBounds, EFResizableBox };
+//# sourceMappingURL=EFResizableBox.d.ts.map