@editframe/elements 0.34.7-beta → 0.34.8-beta

package/dist/canvas/EFCanvas.d.ts

@@ -5,9 +5,9 @@ import { PanZoomTransform } from "../elements/EFPanZoom.js";
 import "./overlays/SelectionOverlay.js";
 import "../gui/EFOverlayLayer.js";
 import "../gui/EFTransformHandles.js";
-import * as lit4 from "lit";
+import * as lit29 from "lit";
 import { LitElement } from "lit";
-import * as lit_html3 from "lit-html";
+import * as lit_html28 from "lit-html";
 
 //#region src/canvas/EFCanvas.d.ts
 declare const EFCanvas_base: typeof LitElement;
@@ -87,7 +87,7 @@ declare const EFCanvas_base: typeof LitElement;
  * Manages existing elements (EF* elements, divs, etc.) and provides selection functionality.
  */
 declare class EFCanvas extends EFCanvas_base {
-  static styles: lit4.CSSResult[];
+  static styles: lit29.CSSResult[];
   panZoomTransform?: PanZoomTransform;
   elementIdAttribute: string;
   enableTransformHandles: boolean;
@@ -302,7 +302,7 @@ declare class EFCanvas extends EFCanvas_base {
    * Cleanup transform handles.
    */
   private cleanupTransformHandles;
-  render(): lit_html3.TemplateResult<1>;
+  render(): lit_html28.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/elements/EFAudio.d.ts

@@ -1,7 +1,7 @@
 import { FrameRenderable, FrameState, FrameTask } from "../preview/FrameController.js";
 import { EFMedia } from "./EFMedia.js";
-import * as lit_html7 from "lit-html";
-import * as lit_html_directives_ref_js2 from "lit-html/directives/ref.js";
+import * as lit_html2 from "lit-html";
+import * as lit_html_directives_ref_js1 from "lit-html/directives/ref.js";
 
 //#region src/elements/EFAudio.d.ts
 declare const EFAudio_base: typeof EFMedia;
@@ -17,9 +17,9 @@ declare class EFAudio extends EFAudio_base implements FrameRenderable {
    * @domAttribute "volume"
    */
   volume: number;
-  audioElementRef: lit_html_directives_ref_js2.Ref<HTMLAudioElement>;
+  audioElementRef: lit_html_directives_ref_js1.Ref<HTMLAudioElement>;
   protected updated(changedProperties: Map<PropertyKey, unknown>): void;
-  render(): lit_html7.TemplateResult<1>;
+  render(): lit_html2.TemplateResult<1>;
   /**
    * @deprecated Use FrameRenderable methods (prepareFrame, renderFrame) via FrameController instead.
    * This is a compatibility wrapper that delegates to the new system.

package/dist/elements/EFMedia/JitMediaEngine.js

@@ -23,6 +23,12 @@ var JitMediaEngine = class JitMediaEngine extends BaseMediaEngine {
 	}
 	#cachedVideoRendition = null;
 	#cachedAudioRendition = null;
+	getVideoRenditionInternal() {
+		return this.videoRendition;
+	}
+	getAudioRenditionInternal() {
+		return this.audioRendition;
+	}
 	get audioRendition() {
 		if (this.#cachedAudioRendition !== null) return this.#cachedAudioRendition;
 		if (!this.data.audioRenditions || this.data.audioRenditions.length === 0) {

package/dist/elements/EFMedia/JitMediaEngine.js.map

@@ -1 +1 @@
-{"version":3,"file":"JitMediaEngine.js","names":["#cachedAudioRendition","#cachedVideoRendition","rendition: VideoRendition"],"sources":["../../../src/elements/EFMedia/JitMediaEngine.ts"],"sourcesContent":["import type {\n  AudioRendition,\n  MediaEngine,\n  RenditionId,\n  ThumbnailResult,\n  VideoRendition,\n} from \"../../transcoding/types\";\nimport type { ManifestResponse } from \"../../transcoding/types/index.js\";\nimport type { UrlGenerator } from \"../../transcoding/utils/UrlGenerator\";\nimport type { EFMedia } from \"../EFMedia.js\";\nimport { BaseMediaEngine } from \"./BaseMediaEngine\";\nimport { ThumbnailExtractor } from \"./shared/ThumbnailExtractor.js\";\n\nexport class JitMediaEngine extends BaseMediaEngine implements MediaEngine {\n  private urlGenerator: UrlGenerator;\n  private data: ManifestResponse = {} as ManifestResponse;\n  private thumbnailExtractor: ThumbnailExtractor;\n\n  static async fetch(host: EFMedia, urlGenerator: UrlGenerator, url: string, signal?: AbortSignal) {\n    const engine = new JitMediaEngine(host, urlGenerator);\n    const data = await engine.fetchManifest(url, signal);\n    \n    // Check for abort after potentially slow network operation\n    signal?.throwIfAborted();\n    \n    engine.data = data;\n    // Set MediaEngine interface properties\n    engine.durationMs = data.durationMs;\n    engine.src = data.sourceUrl;\n    engine.templates = data.endpoints;\n    return engine;\n  }\n\n  // MediaEngine interface properties\n  durationMs = 0;\n  src = \"\";\n  templates!: { initSegment: string; mediaSegment: string };\n\n  constructor(host: EFMedia, urlGenerator: UrlGenerator) {\n    super(host);\n    this.urlGenerator = urlGenerator;\n    this.thumbnailExtractor = new ThumbnailExtractor(this);\n  }\n\n  // Cache renditions to avoid recomputing on every access\n  #cachedVideoRendition: VideoRendition | undefined | null = null;\n  #cachedAudioRendition: AudioRendition | undefined | null = null;\n\n  get audioRendition(): AudioRendition | undefined {\n    if (this.#cachedAudioRendition !== null) {\n      return this.#cachedAudioRendition;\n    }\n    if (!this.data.audioRenditions || this.data.audioRenditions.length === 0) {\n      this.#cachedAudioRendition = undefined;\n      return undefined;\n    }\n\n    const rendition = this.data.audioRenditions[0];\n    if (!rendition) {\n      this.#cachedAudioRendition = undefined;\n      return undefined;\n    }\n\n    this.#cachedAudioRendition = {\n      id: rendition.id as RenditionId,\n      trackId: undefined,\n      src: this.data.sourceUrl,\n      segmentDurationMs: rendition.segmentDurationMs,\n      segmentDurationsMs: rendition.segmentDurationsMs,\n      startTimeOffsetMs: rendition.startTimeOffsetMs,\n    };\n    return this.#cachedAudioRendition;\n  }\n\n  get videoRendition(): VideoRendition | undefined {\n    if (this.#cachedVideoRendition !== null) {\n      return this.#cachedVideoRendition;\n    }\n    if (!this.data.videoRenditions || this.data.videoRenditions.length === 0) {\n      this.#cachedVideoRendition = undefined;\n      return undefined;\n    }\n\n    const rendition = this.data.videoRenditions[0];\n    if (!rendition) {\n      this.#cachedVideoRendition = undefined;\n      return undefined;\n    }\n\n    this.#cachedVideoRendition = {\n      id: rendition.id as RenditionId,\n      trackId: undefined,\n      src: this.data.sourceUrl,\n      segmentDurationMs: rendition.segmentDurationMs,\n      segmentDurationsMs: rendition.segmentDurationsMs,\n      startTimeOffsetMs: rendition.startTimeOffsetMs,\n    };\n    return this.#cachedVideoRendition;\n  }\n\n\n\n  async fetchInitSegment(\n    rendition: { id?: RenditionId; trackId: number | undefined; src: string },\n    signal?: AbortSignal,\n  ) {\n    if (!rendition.id) {\n      throw new Error(\"Rendition ID is required for JIT metadata\");\n    }\n    const url = this.urlGenerator.generateSegmentUrl(\n      \"init\",\n      rendition.id,\n      this,\n    );\n\n    // Use unified fetch method\n    return this.fetchMedia(url, signal);\n  }\n\n  async fetchMediaSegment(\n    segmentId: number,\n    rendition: { id?: RenditionId; trackId: number | undefined; src: string },\n    signal?: AbortSignal,\n  ) {\n    if (!rendition.id) {\n      throw new Error(\"Rendition ID is required for JIT metadata\");\n    }\n    const url = this.urlGenerator.generateSegmentUrl(\n      segmentId,\n      rendition.id,\n      this,\n    );\n    return this.fetchMedia(url, signal);\n  }\n\n  computeSegmentId(\n    desiredSeekTimeMs: number,\n    rendition: VideoRendition | AudioRendition,\n  ) {\n    // Don't request segments beyond the actual file duration\n    // Note: seeking to exactly durationMs should be allowed (it's the last moment of the file)\n    if (desiredSeekTimeMs > this.durationMs) {\n      return undefined;\n    }\n\n    // Use actual segment durations if available (more accurate)\n    if (\n      rendition.segmentDurationsMs &&\n      rendition.segmentDurationsMs.length > 0\n    ) {\n      let cumulativeTime = 0;\n\n      for (let i = 0; i < rendition.segmentDurationsMs.length; i++) {\n        const segmentDuration = rendition.segmentDurationsMs[i];\n        if (segmentDuration === undefined) {\n          throw new Error(\"Segment duration is required for JIT metadata\");\n        }\n        const segmentStartMs = cumulativeTime;\n        const segmentEndMs = cumulativeTime + segmentDuration;\n\n        // Check if the desired seek time falls within this segment\n        // Special case: for the last segment, include the exact end time\n        const isLastSegment = i === rendition.segmentDurationsMs.length - 1;\n        const includesEndTime =\n          isLastSegment && desiredSeekTimeMs === this.durationMs;\n\n        if (\n          desiredSeekTimeMs >= segmentStartMs &&\n          (desiredSeekTimeMs < segmentEndMs || includesEndTime)\n        ) {\n          return i + 1; // Convert 0-based to 1-based segment ID\n        }\n\n        cumulativeTime += segmentDuration;\n\n        // If we've reached or exceeded file duration, stop\n        if (cumulativeTime >= this.durationMs) {\n          break;\n        }\n      }\n\n      // If we didn't find a segment, return undefined\n      return undefined;\n    }\n\n    // Fall back to fixed duration calculation for backward compatibility\n    if (!rendition.segmentDurationMs) {\n      throw new Error(\"Segment duration is required for JIT metadata\");\n    }\n\n    const segmentIndex = Math.floor(\n      desiredSeekTimeMs / rendition.segmentDurationMs,\n    );\n\n    // Calculate the actual segment start time\n    const segmentStartMs = segmentIndex * rendition.segmentDurationMs;\n\n    // If this segment would start at or beyond file duration, it doesn't exist\n    if (segmentStartMs >= this.durationMs) {\n      return undefined;\n    }\n\n    return segmentIndex + 1; // Convert 0-based to 1-based\n  }\n\n  getScrubVideoRendition(): VideoRendition | undefined {\n    if (!this.data.videoRenditions) return undefined;\n\n    const scrubManifestRendition = this.data.videoRenditions.find(\n      (r) => r.id === \"scrub\",\n    );\n\n    if (!scrubManifestRendition) return this.getVideoRenditionInternal(); // Fallback to main\n\n    return {\n      id: scrubManifestRendition.id as any,\n      trackId: undefined,\n      src: this.src,\n      segmentDurationMs: scrubManifestRendition.segmentDurationMs,\n      segmentDurationsMs: scrubManifestRendition.segmentDurationsMs,\n    };\n  }\n\n  /**\n   * Get preferred buffer configuration for JIT transcoding\n   * Uses higher buffering since transcoding introduces latency\n   */\n  getBufferConfig() {\n    return {\n      // Buffer more aggressively for JIT transcoding to smooth over latency\n      videoBufferDurationMs: 8000,\n      audioBufferDurationMs: 8000,\n      maxVideoBufferFetches: 3,\n      maxAudioBufferFetches: 3,\n      bufferThresholdMs: 30000, // Timeline-aware buffering threshold\n    };\n  }\n\n  /**\n   * Extract thumbnail canvases using same rendition priority as video playback for frame alignment\n   */\n  async extractThumbnails(\n    timestamps: number[],\n    signal?: AbortSignal,\n  ): Promise<(ThumbnailResult | null)[]> {\n    // Use same rendition priority as video: try main rendition first for frame alignment\n    let rendition: VideoRendition;\n    try {\n      const mainRendition = this.getVideoRenditionInternal();\n      if (mainRendition) {\n        rendition = mainRendition;\n      } else {\n        const scrubRendition = this.getScrubVideoRendition();\n        if (scrubRendition) {\n          rendition = scrubRendition;\n        } else {\n          throw new Error(\"No video rendition available\");\n        }\n      }\n    } catch (error) {\n      console.warn(\n        \"JitMediaEngine: No video rendition available for thumbnails\",\n        error,\n      );\n      return timestamps.map(() => null);\n    }\n\n    // Use shared thumbnail extraction logic\n    return this.thumbnailExtractor.extractThumbnails(\n      timestamps,\n      rendition,\n      this.durationMs,\n      signal,\n    );\n  }\n\n  convertToSegmentRelativeTimestamps(\n    globalTimestamps: number[],\n    _segmentId: number,\n    _rendition: VideoRendition,\n  ): number[] {\n    return globalTimestamps.map((timestamp) => timestamp / 1000);\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"JitMediaEngine.js","names":["#cachedAudioRendition","#cachedVideoRendition","rendition: VideoRendition"],"sources":["../../../src/elements/EFMedia/JitMediaEngine.ts"],"sourcesContent":["import type {\n  AudioRendition,\n  MediaEngine,\n  RenditionId,\n  ThumbnailResult,\n  VideoRendition,\n} from \"../../transcoding/types\";\nimport type { ManifestResponse } from \"../../transcoding/types/index.js\";\nimport type { UrlGenerator } from \"../../transcoding/utils/UrlGenerator\";\nimport type { EFMedia } from \"../EFMedia.js\";\nimport { BaseMediaEngine } from \"./BaseMediaEngine\";\nimport { ThumbnailExtractor } from \"./shared/ThumbnailExtractor.js\";\n\nexport class JitMediaEngine extends BaseMediaEngine implements MediaEngine {\n  private urlGenerator: UrlGenerator;\n  private data: ManifestResponse = {} as ManifestResponse;\n  private thumbnailExtractor: ThumbnailExtractor;\n\n  static async fetch(host: EFMedia, urlGenerator: UrlGenerator, url: string, signal?: AbortSignal) {\n    const engine = new JitMediaEngine(host, urlGenerator);\n    const data = await engine.fetchManifest(url, signal);\n    \n    // Check for abort after potentially slow network operation\n    signal?.throwIfAborted();\n    \n    engine.data = data;\n    // Set MediaEngine interface properties\n    engine.durationMs = data.durationMs;\n    engine.src = data.sourceUrl;\n    engine.templates = data.endpoints;\n    return engine;\n  }\n\n  // MediaEngine interface properties\n  durationMs = 0;\n  src = \"\";\n  templates!: { initSegment: string; mediaSegment: string };\n\n  constructor(host: EFMedia, urlGenerator: UrlGenerator) {\n    super(host);\n    this.urlGenerator = urlGenerator;\n    this.thumbnailExtractor = new ThumbnailExtractor(this);\n  }\n\n  // Cache renditions to avoid recomputing on every access\n  #cachedVideoRendition: VideoRendition | undefined | null = null;\n  #cachedAudioRendition: AudioRendition | undefined | null = null;\n\n  // Implement abstract methods required by BaseMediaEngine\n  protected getVideoRenditionInternal(): VideoRendition | undefined {\n    return this.videoRendition;\n  }\n\n  protected getAudioRenditionInternal(): AudioRendition | undefined {\n    return this.audioRendition;\n  }\n\n  get audioRendition(): AudioRendition | undefined {\n    if (this.#cachedAudioRendition !== null) {\n      return this.#cachedAudioRendition;\n    }\n    if (!this.data.audioRenditions || this.data.audioRenditions.length === 0) {\n      this.#cachedAudioRendition = undefined;\n      return undefined;\n    }\n\n    const rendition = this.data.audioRenditions[0];\n    if (!rendition) {\n      this.#cachedAudioRendition = undefined;\n      return undefined;\n    }\n\n    this.#cachedAudioRendition = {\n      id: rendition.id as RenditionId,\n      trackId: undefined,\n      src: this.data.sourceUrl,\n      segmentDurationMs: rendition.segmentDurationMs,\n      segmentDurationsMs: rendition.segmentDurationsMs,\n      startTimeOffsetMs: rendition.startTimeOffsetMs,\n    };\n    return this.#cachedAudioRendition;\n  }\n\n  get videoRendition(): VideoRendition | undefined {\n    if (this.#cachedVideoRendition !== null) {\n      return this.#cachedVideoRendition;\n    }\n    if (!this.data.videoRenditions || this.data.videoRenditions.length === 0) {\n      this.#cachedVideoRendition = undefined;\n      return undefined;\n    }\n\n    const rendition = this.data.videoRenditions[0];\n    if (!rendition) {\n      this.#cachedVideoRendition = undefined;\n      return undefined;\n    }\n\n    this.#cachedVideoRendition = {\n      id: rendition.id as RenditionId,\n      trackId: undefined,\n      src: this.data.sourceUrl,\n      segmentDurationMs: rendition.segmentDurationMs,\n      segmentDurationsMs: rendition.segmentDurationsMs,\n      startTimeOffsetMs: rendition.startTimeOffsetMs,\n    };\n    return this.#cachedVideoRendition;\n  }\n\n\n\n  async fetchInitSegment(\n    rendition: { id?: RenditionId; trackId: number | undefined; src: string },\n    signal?: AbortSignal,\n  ) {\n    if (!rendition.id) {\n      throw new Error(\"Rendition ID is required for JIT metadata\");\n    }\n    const url = this.urlGenerator.generateSegmentUrl(\n      \"init\",\n      rendition.id,\n      this,\n    );\n\n    // Use unified fetch method\n    return this.fetchMedia(url, signal);\n  }\n\n  async fetchMediaSegment(\n    segmentId: number,\n    rendition: { id?: RenditionId; trackId: number | undefined; src: string },\n    signal?: AbortSignal,\n  ) {\n    if (!rendition.id) {\n      throw new Error(\"Rendition ID is required for JIT metadata\");\n    }\n    const url = this.urlGenerator.generateSegmentUrl(\n      segmentId,\n      rendition.id,\n      this,\n    );\n    return this.fetchMedia(url, signal);\n  }\n\n  computeSegmentId(\n    desiredSeekTimeMs: number,\n    rendition: VideoRendition | AudioRendition,\n  ) {\n    // Don't request segments beyond the actual file duration\n    // Note: seeking to exactly durationMs should be allowed (it's the last moment of the file)\n    if (desiredSeekTimeMs > this.durationMs) {\n      return undefined;\n    }\n\n    // Use actual segment durations if available (more accurate)\n    if (\n      rendition.segmentDurationsMs &&\n      rendition.segmentDurationsMs.length > 0\n    ) {\n      let cumulativeTime = 0;\n\n      for (let i = 0; i < rendition.segmentDurationsMs.length; i++) {\n        const segmentDuration = rendition.segmentDurationsMs[i];\n        if (segmentDuration === undefined) {\n          throw new Error(\"Segment duration is required for JIT metadata\");\n        }\n        const segmentStartMs = cumulativeTime;\n        const segmentEndMs = cumulativeTime + segmentDuration;\n\n        // Check if the desired seek time falls within this segment\n        // Special case: for the last segment, include the exact end time\n        const isLastSegment = i === rendition.segmentDurationsMs.length - 1;\n        const includesEndTime =\n          isLastSegment && desiredSeekTimeMs === this.durationMs;\n\n        if (\n          desiredSeekTimeMs >= segmentStartMs &&\n          (desiredSeekTimeMs < segmentEndMs || includesEndTime)\n        ) {\n          return i + 1; // Convert 0-based to 1-based segment ID\n        }\n\n        cumulativeTime += segmentDuration;\n\n        // If we've reached or exceeded file duration, stop\n        if (cumulativeTime >= this.durationMs) {\n          break;\n        }\n      }\n\n      // If we didn't find a segment, return undefined\n      return undefined;\n    }\n\n    // Fall back to fixed duration calculation for backward compatibility\n    if (!rendition.segmentDurationMs) {\n      throw new Error(\"Segment duration is required for JIT metadata\");\n    }\n\n    const segmentIndex = Math.floor(\n      desiredSeekTimeMs / rendition.segmentDurationMs,\n    );\n\n    // Calculate the actual segment start time\n    const segmentStartMs = segmentIndex * rendition.segmentDurationMs;\n\n    // If this segment would start at or beyond file duration, it doesn't exist\n    if (segmentStartMs >= this.durationMs) {\n      return undefined;\n    }\n\n    return segmentIndex + 1; // Convert 0-based to 1-based\n  }\n\n  getScrubVideoRendition(): VideoRendition | undefined {\n    if (!this.data.videoRenditions) return undefined;\n\n    const scrubManifestRendition = this.data.videoRenditions.find(\n      (r) => r.id === \"scrub\",\n    );\n\n    if (!scrubManifestRendition) return this.getVideoRenditionInternal(); // Fallback to main\n\n    return {\n      id: scrubManifestRendition.id as any,\n      trackId: undefined,\n      src: this.src,\n      segmentDurationMs: scrubManifestRendition.segmentDurationMs,\n      segmentDurationsMs: scrubManifestRendition.segmentDurationsMs,\n    };\n  }\n\n  /**\n   * Get preferred buffer configuration for JIT transcoding\n   * Uses higher buffering since transcoding introduces latency\n   */\n  getBufferConfig() {\n    return {\n      // Buffer more aggressively for JIT transcoding to smooth over latency\n      videoBufferDurationMs: 8000,\n      audioBufferDurationMs: 8000,\n      maxVideoBufferFetches: 3,\n      maxAudioBufferFetches: 3,\n      bufferThresholdMs: 30000, // Timeline-aware buffering threshold\n    };\n  }\n\n  /**\n   * Extract thumbnail canvases using same rendition priority as video playback for frame alignment\n   */\n  async extractThumbnails(\n    timestamps: number[],\n    signal?: AbortSignal,\n  ): Promise<(ThumbnailResult | null)[]> {\n    // Use same rendition priority as video: try main rendition first for frame alignment\n    let rendition: VideoRendition;\n    try {\n      const mainRendition = this.getVideoRenditionInternal();\n      if (mainRendition) {\n        rendition = mainRendition;\n      } else {\n        const scrubRendition = this.getScrubVideoRendition();\n        if (scrubRendition) {\n          rendition = scrubRendition;\n        } else {\n          throw new Error(\"No video rendition available\");\n        }\n      }\n    } catch (error) {\n      console.warn(\n        \"JitMediaEngine: No video rendition available for thumbnails\",\n        error,\n      );\n      return timestamps.map(() => null);\n    }\n\n    // Use shared thumbnail extraction logic\n    return this.thumbnailExtractor.extractThumbnails(\n      timestamps,\n      rendition,\n      this.durationMs,\n      signal,\n    );\n  }\n\n  convertToSegmentRelativeTimestamps(\n    globalTimestamps: number[],\n    _segmentId: number,\n    _rendition: VideoRendition,\n  ): number[] {\n    return globalTimestamps.map((timestamp) => timestamp / 1000);\n  }\n}\n"],"mappings":"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"}

package/dist/elements/EFPanZoom.d.ts

@@ -1,6 +1,6 @@
-import * as lit3 from "lit";
+import * as lit28 from "lit";
 import { LitElement } from "lit";
-import * as lit_html2 from "lit-html";
+import * as lit_html27 from "lit-html";
 
 //#region src/elements/EFPanZoom.d.ts
 interface PanZoomTransform {
@@ -9,7 +9,7 @@ interface PanZoomTransform {
   scale: number;
 }
 declare class EFPanZoom extends LitElement {
-  static styles: lit3.CSSResult[];
+  static styles: lit28.CSSResult[];
   x: number;
   y: number;
   scale: number;
@@ -89,7 +89,7 @@ declare class EFPanZoom extends LitElement {
    * @param padding - Padding factor (0-1), e.g., 0.1 = 10% padding on each side. Default: 0.05
    */
   fitToContent(padding?: number): void;
-  render(): lit_html2.TemplateResult<1>;
+  render(): lit_html27.TemplateResult<1>;
 }
 //#endregion
 export { EFPanZoom, PanZoomTransform };

package/dist/elements/EFSurface.d.ts

@@ -1,18 +1,18 @@
 import { FrameRenderable, FrameState } from "../preview/FrameController.js";
 import { ContextMixinInterface } from "../gui/ContextMixin.js";
-import * as lit28 from "lit";
+import * as lit26 from "lit";
 import { LitElement } from "lit";
-import * as lit_html27 from "lit-html";
+import * as lit_html25 from "lit-html";
 import * as lit_html_directives_ref3 from "lit-html/directives/ref";
 
 //#region src/elements/EFSurface.d.ts
 declare class EFSurface extends LitElement implements FrameRenderable {
   #private;
-  static styles: lit28.CSSResult[];
+  static styles: lit26.CSSResult[];
   canvasRef: lit_html_directives_ref3.Ref<HTMLCanvasElement>;
   targetElement: ContextMixinInterface | null;
   target: string;
-  render(): lit_html27.TemplateResult<1>;
+  render(): lit_html25.TemplateResult<1>;
   get rootTimegroup(): any;
   get currentTimeMs(): number;
   get durationMs(): number;

package/dist/elements/EFText.d.ts

@@ -1,15 +1,15 @@
 import { TemporalMixinInterface } from "./EFTemporal.js";
 import { EFTextSegment } from "./EFTextSegment.js";
-import * as lit8 from "lit";
+import * as lit4 from "lit";
 import { LitElement, PropertyValueMap } from "lit";
-import * as lit_html9 from "lit-html";
+import * as lit_html4 from "lit-html";
 
 //#region src/elements/EFText.d.ts
 type SplitMode = "line" | "word" | "char";
 declare const EFText_base: (new (...args: any[]) => TemporalMixinInterface) & typeof LitElement;
 declare class EFText extends EFText_base {
   #private;
-  static styles: lit8.CSSResult[];
+  static styles: lit4.CSSResult[];
   split: SplitMode;
   private validateSplit;
   staggerMs?: number;
@@ -20,7 +20,7 @@ declare class EFText extends EFText_base {
   private _textContent;
   private _templateElement;
   private _segmentsReadyResolvers;
-  render(): lit_html9.TemplateResult<1>;
+  render(): lit_html4.TemplateResult<1>;
   set textContent(value: string | null);
   get textContent(): string;
   /**

package/dist/elements/EFTextSegment.d.ts

@@ -1,12 +1,12 @@
 import { TemporalMixinInterface } from "./EFTemporal.js";
-import * as lit9 from "lit";
+import * as lit5 from "lit";
 import { LitElement } from "lit";
-import * as lit_html10 from "lit-html";
+import * as lit_html5 from "lit-html";
 
 //#region src/elements/EFTextSegment.d.ts
 declare const EFTextSegment_base: (new (...args: any[]) => TemporalMixinInterface) & typeof LitElement;
 declare class EFTextSegment extends EFTextSegment_base {
-  static styles: lit9.CSSResult[];
+  static styles: lit5.CSSResult[];
   /**
    * Registers animation styles that should be shared across all text segments.
    * This is the correct way to inject animation styles for segments - not via innerHTML.
@@ -32,7 +32,7 @@ declare class EFTextSegment extends EFTextSegment_base {
    * @param id The identifier of the stylesheet to remove
    */
   static unregisterAnimations(id: string): void;
-  render(): lit_html10.TemplateResult<1>;
+  render(): lit_html5.TemplateResult<1>;
   private setCSSVariables;
   protected firstUpdated(): void;
   protected updated(): void;

package/dist/elements/EFThumbnailStrip.d.ts

@@ -1,13 +1,13 @@
 import { EFVideo } from "./EFVideo.js";
 import { EFTimegroup } from "./EFTimegroup.js";
-import * as lit29 from "lit";
+import * as lit27 from "lit";
 import { LitElement } from "lit";
-import * as lit_html28 from "lit-html";
+import * as lit_html26 from "lit-html";
 import * as lit_html_directives_ref4 from "lit-html/directives/ref";
 
 //#region src/elements/EFThumbnailStrip.d.ts
 declare class EFThumbnailStrip extends LitElement {
-  static styles: lit29.CSSResult[];
+  static styles: lit27.CSSResult[];
   canvasRef: lit_html_directives_ref4.Ref<HTMLCanvasElement>;
   target: string;
   thumbnailWidth: number;
@@ -155,7 +155,7 @@ declare class EFThumbnailStrip extends LitElement {
    * Invalidate all cached thumbnails for this element.
    */
   invalidateAll(): void;
-  render(): lit_html28.TemplateResult<1>;
+  render(): lit_html26.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/elements/EFVideo.d.ts

@@ -1,10 +1,10 @@
 import { FrameRenderable, FrameState, FrameTask } from "../preview/FrameController.js";
 import { EFFramegen } from "../EF_FRAMEGEN.js";
 import { EFMedia } from "./EFMedia.js";
-import * as lit7 from "lit";
+import * as lit3 from "lit";
 import { PropertyValueMap } from "lit";
-import * as lit_html8 from "lit-html";
-import * as lit_html_directives_ref2 from "lit-html/directives/ref";
+import * as lit_html3 from "lit-html";
+import * as lit_html_directives_ref0 from "lit-html/directives/ref";
 
 //#region src/elements/EFVideo.d.ts
 declare global {
@@ -23,8 +23,8 @@ interface LoadingState {
 declare const EFVideo_base: typeof EFMedia;
 declare class EFVideo extends EFVideo_base implements FrameRenderable {
   #private;
-  static styles: lit7.CSSResult[];
-  canvasRef: lit_html_directives_ref2.Ref<HTMLCanvasElement>;
+  static styles: lit3.CSSResult[];
+  canvasRef: lit_html_directives_ref0.Ref<HTMLCanvasElement>;
   /**
    * Duration in milliseconds for video buffering ahead of current time
    * @domAttribute "video-buffer-duration"
@@ -76,7 +76,7 @@ declare class EFVideo extends EFVideo_base implements FrameRenderable {
   };
   constructor();
   protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-  render(): lit_html8.TemplateResult<1>;
+  render(): lit_html3.TemplateResult<1>;
   get canvasElement(): HTMLCanvasElement | undefined;
   /**
    * @deprecated Use FrameRenderable methods (prepareFrame, renderFrame) via FrameController instead.

package/dist/elements/EFWaveform.d.ts

@@ -3,16 +3,16 @@ import { TemporalMixinInterface } from "./EFTemporal.js";
 import { EFVideo } from "./EFVideo.js";
 import { EFAudio } from "./EFAudio.js";
 import { TargetController } from "./TargetController.js";
-import * as lit10 from "lit";
+import * as lit6 from "lit";
 import { LitElement, PropertyValueMap } from "lit";
 import { Ref } from "lit/directives/ref.js";
-import * as lit_html11 from "lit-html";
+import * as lit_html6 from "lit-html";
 
 //#region src/elements/EFWaveform.d.ts
 declare const EFWaveform_base: (new (...args: any[]) => TemporalMixinInterface) & typeof LitElement;
 declare class EFWaveform extends EFWaveform_base implements FrameRenderable {
   #private;
-  static styles: lit10.CSSResult;
+  static styles: lit6.CSSResult;
   canvasRef: Ref<HTMLCanvasElement>;
   private ctx;
   private styleObserver;
@@ -24,7 +24,7 @@ declare class EFWaveform extends EFWaveform_base implements FrameRenderable {
    * @public
    */
   get renderVersion(): number;
-  render(): lit_html11.TemplateResult<1>;
+  render(): lit_html6.TemplateResult<1>;
   mode: "roundBars" | "bars" | "bricks" | "line" | "curve" | "pixel" | "wave" | "spikes";
   color: string;
   target: string;

package/dist/gui/EFActiveRootTemporal.d.ts

@@ -1,6 +1,6 @@
-import * as lit22 from "lit";
+import * as lit20 from "lit";
 import { LitElement } from "lit";
-import * as lit_html22 from "lit-html";
+import * as lit_html20 from "lit-html";
 
 //#region src/gui/EFActiveRootTemporal.d.ts
 
@@ -14,7 +14,7 @@ import * as lit_html22 from "lit-html";
  * ```
  */
 declare class EFActiveRootTemporal extends LitElement {
-  static styles: lit22.CSSResult;
+  static styles: lit20.CSSResult;
   /**
    * Canvas element ID or selector to bind to.
    * If not specified, will search for the nearest ef-canvas ancestor.
@@ -38,7 +38,7 @@ declare class EFActiveRootTemporal extends LitElement {
    * Remove event listener.
    */
   private removeListener;
-  render(): lit_html22.TemplateResult<1>;
+  render(): lit_html20.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFConfiguration.d.ts

@@ -1,10 +1,10 @@
-import * as lit11 from "lit";
+import * as lit7 from "lit";
 import { LitElement } from "lit";
-import * as lit_html12 from "lit-html";
+import * as lit_html7 from "lit-html";
 
 //#region src/gui/EFConfiguration.d.ts
 declare class EFConfiguration extends LitElement {
-  static styles: lit11.CSSResult[];
+  static styles: lit7.CSSResult[];
   efConfiguration: this;
   apiHost?: string;
   signingURL: string;
@@ -15,7 +15,7 @@ declare class EFConfiguration extends LitElement {
    * - "jit": Force JitMediaEngine for all sources (uses /api/v1/transcode/* URLs)
    */
   mediaEngine?: "cloud" | "local" | "jit";
-  render(): lit_html12.TemplateResult<1>;
+  render(): lit_html7.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFControls.d.ts

@@ -1,7 +1,7 @@
 import { TemporalMixinInterface } from "../elements/EFTemporal.js";
 import { ControllableInterface } from "./Controllable.js";
 import { FocusContext } from "./focusContext.js";
-import * as lit24 from "lit";
+import * as lit22 from "lit";
 import { LitElement, PropertyValueMap } from "lit";
 
 //#region src/gui/EFControls.d.ts
@@ -26,7 +26,7 @@ import { LitElement, PropertyValueMap } from "lit";
  */
 declare class EFControls extends LitElement {
   #private;
-  static styles: lit24.CSSResult;
+  static styles: lit22.CSSResult;
   createRenderRoot(): this;
   /**
    * The ID of the ef-preview element to control

package/dist/gui/EFDial.d.ts

@@ -1,6 +1,6 @@
-import * as lit23 from "lit";
+import * as lit21 from "lit";
 import { LitElement } from "lit";
-import * as lit_html23 from "lit-html";
+import * as lit_html21 from "lit-html";
 
 //#region src/gui/EFDial.d.ts
 interface DialChangeDetail {
@@ -13,12 +13,12 @@ declare class EFDial extends LitElement {
   private isDragging;
   private dragStartAngle;
   private dragStartValue;
-  static styles: lit23.CSSResult;
+  static styles: lit21.CSSResult;
   private getAngleFromPoint;
   private handlePointerDown;
   private handlePointerMove;
   private handlePointerUp;
-  render(): lit_html23.TemplateResult<1>;
+  render(): lit_html21.TemplateResult<1>;
 }
 //#endregion
 export { DialChangeDetail, EFDial };

package/dist/gui/EFFilmstrip.d.ts

@@ -1,7 +1,7 @@
 import { TemporalMixinInterface } from "../elements/EFTemporal.js";
 import "./timeline/EFTimeline.js";
 import { LitElement } from "lit";
-import * as lit_html5 from "lit-html";
+import * as lit_html10 from "lit-html";
 import * as lit_html_directives_ref0 from "lit-html/directives/ref";
 
 //#region src/gui/EFFilmstrip.d.ts
@@ -22,7 +22,7 @@ declare class EFFilmstrip extends EFFilmstrip_base {
   timelineRef: lit_html_directives_ref0.Ref<HTMLElement>;
   connectedCallback(): void;
   protected willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
-  render(): lit_html5.TemplateResult<1>;
+  render(): lit_html10.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFFitScale.d.ts

@@ -1,10 +1,10 @@
 import { LitElement } from "lit";
-import * as lit_html_directives_ref0 from "lit-html/directives/ref";
+import * as lit_html_directives_ref1 from "lit-html/directives/ref";
 
 //#region src/gui/EFFitScale.d.ts
 declare class EFFitScale extends LitElement {
-  containerRef: lit_html_directives_ref0.Ref<HTMLDivElement>;
-  contentRef: lit_html_directives_ref0.Ref<HTMLSlotElement>;
+  containerRef: lit_html_directives_ref1.Ref<HTMLDivElement>;
+  contentRef: lit_html_directives_ref1.Ref<HTMLSlotElement>;
   createRenderRoot(): this;
   uniqueId: string;
   private scale;

package/dist/gui/EFFocusOverlay.d.ts

@@ -1,16 +1,16 @@
-import * as lit25 from "lit";
+import * as lit23 from "lit";
 import { LitElement } from "lit";
-import * as lit_html24 from "lit-html";
+import * as lit_html22 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: lit25.CSSResult;
+  static styles: lit23.CSSResult;
   focusedElement?: HTMLElement | null;
   overlay: lit_html_directives_ref_js3.Ref<HTMLDivElement>;
   private animationFrame?;
   drawOverlay: () => void;
-  render(): lit_html24.TemplateResult<1>;
+  render(): lit_html22.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 lit18 from "lit";
+import * as lit16 from "lit";
 import { LitElement } from "lit";
-import * as lit_html18 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: lit18.CSSResult[];
+  static styles: lit16.CSSResult[];
   playing: boolean;
   get efContext(): ControllableInterface | null;
   connectedCallback(): void;
   disconnectedCallback(): void;
   updated(changedProperties: Map<string | number | symbol, unknown>): void;
-  render(): lit_html18.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 lit17 from "lit";
+import * as lit15 from "lit";
 import { LitElement } from "lit";
-import * as lit_html17 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: lit17.CSSResult[];
+  static styles: lit15.CSSResult[];
   playing: boolean;
   get efContext(): ControllableInterface | null;
   connectedCallback(): void;
   disconnectedCallback(): void;
   updated(changedProperties: Map<string | number | symbol, unknown>): void;
-  render(): lit_html17.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 lit12 from "lit";
+import * as lit9 from "lit";
 import { LitElement } from "lit";
-import * as lit_html13 from "lit-html";
+import * as lit_html9 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: lit12.CSSResult[];
+  static styles: lit9.CSSResult[];
   focusedElement?: HTMLElement;
   /**
    * Find the closest temporal element (timegroup, video, audio, etc.)
    */
   private findClosestTemporal;
   constructor();
-  render(): lit_html13.TemplateResult<1>;
+  render(): lit_html9.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFResizableBox.d.ts

@@ -1,6 +1,6 @@
-import * as lit27 from "lit";
+import * as lit25 from "lit";
 import { LitElement } from "lit";
-import * as lit_html26 from "lit-html";
+import * as lit_html24 from "lit-html";
 
 //#region src/gui/EFResizableBox.d.ts
 interface BoxBounds {
@@ -21,7 +21,7 @@ declare class EFResizableBox extends LitElement {
   private resizeStartCorner;
   private resizeStartSize;
   private resizeStartPosition;
-  static styles: lit27.CSSResult;
+  static styles: lit25.CSSResult;
   private resizeObserver?;
   connectedCallback(): void;
   disconnectedCallback(): void;
@@ -30,7 +30,7 @@ declare class EFResizableBox extends LitElement {
   private handlePointerUp;
   private cleanup;
   private dispatchBoundsChange;
-  render(): lit_html26.TemplateResult<1>;
+  render(): lit_html24.TemplateResult<1>;
 }
 //#endregion
 export { BoxBounds, EFResizableBox };

package/dist/gui/EFScrubber.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit20 from "lit";
+import * as lit18 from "lit";
 import { LitElement } from "lit";
-import * as lit_html20 from "lit-html";
+import * as lit_html18 from "lit-html";
 
 //#region src/gui/EFScrubber.d.ts
 declare const EFScrubber_base: (new (...args: any[]) => {
@@ -10,7 +10,7 @@ declare const EFScrubber_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFScrubber extends EFScrubber_base {
-  static styles: lit20.CSSResult[];
+  static styles: lit18.CSSResult[];
   playing: boolean;
   contextCurrentTimeMs: number;
   contextDurationMs: number;
@@ -50,7 +50,7 @@ declare class EFScrubber extends EFScrubber_base {
   private boundHandlePointerUp;
   private boundHandlePointerCancel;
   private boundHandleContextMenu;
-  render(): lit_html20.TemplateResult<1>;
+  render(): lit_html18.TemplateResult<1>;
   connectedCallback(): void;
   disconnectedCallback(): void;
 }

package/dist/gui/EFTimeDisplay.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit21 from "lit";
+import * as lit19 from "lit";
 import { LitElement } from "lit";
-import * as lit_html21 from "lit-html";
+import * as lit_html19 from "lit-html";
 
 //#region src/gui/EFTimeDisplay.d.ts
 declare const EFTimeDisplay_base: (new (...args: any[]) => {
@@ -10,11 +10,11 @@ declare const EFTimeDisplay_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFTimeDisplay extends EFTimeDisplay_base {
-  static styles: lit21.CSSResult;
+  static styles: lit19.CSSResult;
   currentTimeMs: number;
   durationMs: number;
   private formatTime;
-  render(): lit_html21.TemplateResult<1>;
+  render(): lit_html19.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFToggleLoop.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit19 from "lit";
+import * as lit17 from "lit";
 import { LitElement } from "lit";
-import * as lit_html19 from "lit-html";
+import * as lit_html17 from "lit-html";
 
 //#region src/gui/EFToggleLoop.d.ts
 declare const EFToggleLoop_base: (new (...args: any[]) => {
@@ -10,9 +10,9 @@ declare const EFToggleLoop_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFToggleLoop extends EFToggleLoop_base {
-  static styles: lit19.CSSResult[];
+  static styles: lit17.CSSResult[];
   get context(): ControllableInterface | null;
-  render(): lit_html19.TemplateResult<1>;
+  render(): lit_html17.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFTogglePlay.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit16 from "lit";
+import * as lit14 from "lit";
 import { LitElement } from "lit";
-import * as lit_html16 from "lit-html";
+import * as lit_html14 from "lit-html";
 
 //#region src/gui/EFTogglePlay.d.ts
 declare const EFTogglePlay_base: (new (...args: any[]) => {
@@ -10,12 +10,12 @@ declare const EFTogglePlay_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFTogglePlay extends EFTogglePlay_base {
-  static styles: lit16.CSSResult[];
+  static styles: lit14.CSSResult[];
   playing: boolean;
   get efContext(): ControllableInterface | null;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  render(): lit_html16.TemplateResult<1>;
+  render(): lit_html14.TemplateResult<1>;
   togglePlay: () => void;
   private getPlaybackController;
 }

package/dist/gui/EFTransformHandles.d.ts

@@ -1,7 +1,7 @@
 import { PanZoomTransform } from "../elements/EFPanZoom.js";
-import * as lit26 from "lit";
+import * as lit24 from "lit";
 import { LitElement } from "lit";
-import * as lit_html25 from "lit-html";
+import * as lit_html23 from "lit-html";
 
 //#region src/gui/EFTransformHandles.d.ts
 interface TransformBounds {
@@ -49,7 +49,7 @@ declare class EFTransformHandles extends LitElement {
    * Note: Not a @state() property to avoid re-renders during interaction.
    */
   private initialBounds;
-  static styles: lit26.CSSResult;
+  static styles: lit24.CSSResult;
   private resizeObserver?;
   /**
    * Single source of truth for zoom scale.
@@ -79,7 +79,7 @@ declare class EFTransformHandles extends LitElement {
   private handleMouseMove;
   private handleMouseUp;
   private cleanup;
-  render(): lit_html25.TemplateResult<1>;
+  render(): lit_html23.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFWorkbench.d.ts

@@ -1,15 +1,15 @@
 import { ContextMixinInterface } from "./ContextMixin.js";
 import { RenderToVideoOptions } from "../preview/renderTimegroupToVideo.js";
 import "./EFFitScale.js";
-import * as lit6 from "lit";
+import * as lit8 from "lit";
 import { LitElement, PropertyValueMap } from "lit";
-import * as lit_html6 from "lit-html";
-import * as lit_html_directives_ref_js1 from "lit-html/directives/ref.js";
+import * as lit_html8 from "lit-html";
+import * as lit_html_directives_ref_js2 from "lit-html/directives/ref.js";
 
 //#region src/gui/EFWorkbench.d.ts
 declare const EFWorkbench_base: (new (...args: any[]) => ContextMixinInterface) & typeof LitElement;
 declare class EFWorkbench extends EFWorkbench_base {
-  static styles: lit6.CSSResult[];
+  static styles: lit8.CSSResult[];
   rendering: boolean;
   private panZoomTransform;
   private isExporting;
@@ -61,7 +61,7 @@ declare class EFWorkbench extends EFWorkbench_base {
   private canvasPreviewResult;
   private canvasAnimationFrame;
   private boundHandleTransformChanged;
-  focusOverlay: lit_html_directives_ref_js1.Ref<HTMLDivElement>;
+  focusOverlay: lit_html_directives_ref_js2.Ref<HTMLDivElement>;
   handleStageWheel(event: WheelEvent): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
@@ -194,7 +194,7 @@ declare class EFWorkbench extends EFWorkbench_base {
   updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
   drawOverlays: () => void;
   private renderPlaybackStats;
-  render(): lit_html6.TemplateResult<1>;
+  render(): lit_html8.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/hierarchy/EFHierarchy.d.ts

@@ -1,12 +1,12 @@
 import { SelectionContext } from "../../canvas/selection/selectionContext.js";
-import * as lit5 from "lit";
+import * as lit10 from "lit";
 import { LitElement, PropertyValues } from "lit";
-import * as lit_html4 from "lit-html";
+import * as lit_html11 from "lit-html";
 
 //#region src/gui/hierarchy/EFHierarchy.d.ts
 declare const EFHierarchy_base: typeof LitElement;
 declare class EFHierarchy extends EFHierarchy_base {
-  static styles: lit5.CSSResult[];
+  static styles: lit10.CSSResult[];
   target: string;
   header: string;
   showHeader: boolean;
@@ -53,7 +53,7 @@ declare class EFHierarchy extends EFHierarchy_base {
   private autoSelectFirstRootTimegroup;
   private setupSelectionListener;
   private removeSelectionListener;
-  render(): lit_html4.TemplateResult<1>;
+  render(): lit_html11.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/hierarchy/EFHierarchyItem.d.ts

@@ -4,13 +4,13 @@ import { EFAudio } from "../../elements/EFAudio.js";
 import { EFTimegroup } from "../../elements/EFTimegroup.js";
 import { EFImage } from "../../elements/EFImage.js";
 import { HierarchyContext } from "./hierarchyContext.js";
-import * as lit13 from "lit";
+import * as lit11 from "lit";
 import { LitElement, PropertyValues, TemplateResult, nothing } from "lit";
 
 //#region src/gui/hierarchy/EFHierarchyItem.d.ts
 declare const EFHierarchyItem_base: typeof LitElement;
 declare class EFHierarchyItem<ElementType extends HTMLElement = HTMLElement> extends EFHierarchyItem_base {
-  static styles: lit13.CSSResult[];
+  static styles: lit11.CSSResult[];
   hierarchyContext?: HierarchyContext;
   canvasSelectionContext?: SelectionContext;
   element: ElementType;

package/dist/gui/tree/EFTree.d.ts

@@ -1,8 +1,8 @@
 import { TreeItem } from "./treeContext.js";
 import "./EFTreeItem.js";
-import * as lit14 from "lit";
+import * as lit12 from "lit";
 import { LitElement, PropertyValues } from "lit";
-import * as lit_html14 from "lit-html";
+import * as lit_html12 from "lit-html";
 
 //#region src/gui/tree/EFTree.d.ts
 
@@ -29,7 +29,7 @@ import * as lit_html14 from "lit-html";
  * ```
  */
 declare class EFTree extends LitElement {
-  static styles: lit14.CSSResult;
+  static styles: lit12.CSSResult;
   /** Tree items to display */
   items: TreeItem[];
   /** Optional header text */
@@ -48,7 +48,7 @@ declare class EFTree extends LitElement {
   protected willUpdate(changedProperties: PropertyValues): void;
   protected updated(changedProperties: PropertyValues): void;
   connectedCallback(): void;
-  render(): lit_html14.TemplateResult<1>;
+  render(): lit_html12.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/tree/EFTreeItem.d.ts

@@ -1,7 +1,7 @@
 import { TreeContext, TreeItem } from "./treeContext.js";
-import * as lit15 from "lit";
+import * as lit13 from "lit";
 import { LitElement, nothing } from "lit";
-import * as lit_html15 from "lit-html";
+import * as lit_html13 from "lit-html";
 
 //#region src/gui/tree/EFTreeItem.d.ts
 
@@ -17,7 +17,7 @@ import * as lit_html15 from "lit-html";
  * @fires tree-item-click - When item is clicked (for selection)
  */
 declare class EFTreeItem extends LitElement {
-  static styles: lit15.CSSResult;
+  static styles: lit13.CSSResult;
   treeContext?: TreeContext;
   item: TreeItem;
   private localExpanded;
@@ -26,7 +26,7 @@ declare class EFTreeItem extends LitElement {
   get hasChildren(): boolean;
   private handleClick;
   private handleExpandClick;
-  render(): lit_html15.TemplateResult<1> | typeof nothing;
+  render(): lit_html13.TemplateResult<1> | typeof nothing;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.34.7-beta",
+  "version": "0.34.8-beta",
   "description": "",
   "type": "module",
   "scripts": {
@@ -13,7 +13,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.34.7-beta",
+    "@editframe/assets": "0.34.8-beta",
     "@lit/context": "^1.1.6",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/context-zone": "^1.26.0",