@editframe/elements 0.42.5 → 0.42.8

package/dist/elements/EFWaveform.d.ts

@@ -3,16 +3,16 @@ import { TemporalMixinInterface } from "./EFTemporal.js";
 import { EFAudio } from "./EFAudio.js";
 import { EFVideo } from "./EFVideo.js";
 import { TargetController } from "./TargetController.js";
-import * as lit6 from "lit";
+import * as lit7 from "lit";
 import { LitElement, PropertyValueMap } from "lit";
 import { Ref } from "lit/directives/ref.js";
-import * as lit_html6 from "lit-html";
+import * as lit_html7 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: lit6.CSSResult;
+  static styles: lit7.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_html6.TemplateResult<1>;
+  render(): lit_html7.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 lit21 from "lit";
+import * as lit22 from "lit";
 import { LitElement } from "lit";
-import * as lit_html20 from "lit-html";
+import * as lit_html21 from "lit-html";
 
 //#region src/gui/EFActiveRootTemporal.d.ts
 
@@ -14,7 +14,7 @@ import * as lit_html20 from "lit-html";
  * ```
  */
 declare class EFActiveRootTemporal extends LitElement {
-  static styles: lit21.CSSResult;
+  static styles: lit22.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_html20.TemplateResult<1>;
+  render(): lit_html21.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFConfiguration.d.ts

@@ -1,14 +1,14 @@
-import * as lit7 from "lit";
+import * as lit8 from "lit";
 import { LitElement } from "lit";
-import * as lit_html7 from "lit-html";
+import * as lit_html8 from "lit-html";
 
 //#region src/gui/EFConfiguration.d.ts
 declare class EFConfiguration extends LitElement {
-  static styles: lit7.CSSResult[];
+  static styles: lit8.CSSResult[];
   efConfiguration: this;
   apiHost?: string;
   signingURL: string;
-  render(): lit_html7.TemplateResult<1>;
+  render(): lit_html8.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFDial.d.ts

@@ -1,6 +1,6 @@
-import * as lit22 from "lit";
+import * as lit2 from "lit";
 import { LitElement } from "lit";
-import * as lit_html21 from "lit-html";
+import * as lit_html1 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: lit22.CSSResult;
+  static styles: lit2.CSSResult;
   private getAngleFromPoint;
   private handlePointerDown;
   private handlePointerMove;
   private handlePointerUp;
-  render(): lit_html21.TemplateResult<1>;
+  render(): lit_html1.TemplateResult<1>;
 }
 //#endregion
 export { DialChangeDetail, EFDial };

package/dist/gui/EFFilmstrip.d.ts

@@ -1,15 +1,15 @@
 import { TemporalMixinInterface } from "../elements/EFTemporal.js";
 import "./timeline/EFTimeline.js";
-import * as lit10 from "lit";
+import * as lit11 from "lit";
 import { LitElement } from "lit";
-import * as lit_html10 from "lit-html";
+import * as lit_html11 from "lit-html";
 import * as lit_html_directives_ref0 from "lit-html/directives/ref";
 
 //#region src/gui/EFFilmstrip.d.ts
 declare const EFFilmstrip_base: typeof LitElement;
 declare class EFFilmstrip extends EFFilmstrip_base {
   #private;
-  static styles: lit10.CSSResult[];
+  static styles: lit11.CSSResult[];
   target: string;
   pixelsPerMs: number;
   hidePlayhead: boolean;
@@ -24,7 +24,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_html10.TemplateResult<1>;
+  render(): lit_html11.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFOverlayItem.d.ts

@@ -1,6 +1,6 @@
-import * as lit32 from "lit";
+import * as lit33 from "lit";
 import { LitElement } from "lit";
-import * as lit_html30 from "lit-html";
+import * as lit_html31 from "lit-html";
 
 //#region src/gui/EFOverlayItem.d.ts
 /**
@@ -23,7 +23,7 @@ interface OverlayItemPosition {
  * ensures transforms are applied before positions are read.
  */
 declare class EFOverlayItem extends LitElement {
-  static styles: lit32.CSSResult[];
+  static styles: lit33.CSSResult[];
   elementId?: string;
   target?: HTMLElement | string;
   private currentPosition;
@@ -36,7 +36,7 @@ declare class EFOverlayItem extends LitElement {
   updatePosition(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  render(): lit_html30.TemplateResult<1>;
+  render(): lit_html31.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFOverlayLayer.d.ts

@@ -1,8 +1,8 @@
 import { PanZoomTransform } from "../elements/EFPanZoom.js";
 import { EFOverlayItem } from "./EFOverlayItem.js";
-import * as lit31 from "lit";
+import * as lit32 from "lit";
 import { LitElement } from "lit";
-import * as lit_html29 from "lit-html";
+import * as lit_html30 from "lit-html";
 
 //#region src/gui/EFOverlayLayer.d.ts
 
@@ -26,7 +26,7 @@ import * as lit_html29 from "lit-html";
  * 2. EFOverlayItem can use this rect for coordinate calculations
  */
 declare class EFOverlayLayer extends LitElement {
-  static styles: lit31.CSSResult[];
+  static styles: lit32.CSSResult[];
   panZoomTransformFromContext?: PanZoomTransform;
   /**
    * Pan/zoom transform as fallback for when context or sibling PanZoom is not available.
@@ -58,7 +58,7 @@ declare class EFOverlayLayer extends LitElement {
   connectedCallback(): void;
   disconnectedCallback(): void;
   updated(): void;
-  render(): lit_html29.TemplateResult<1>;
+  render(): lit_html30.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFPause.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit17 from "lit";
+import * as lit18 from "lit";
 import { LitElement } from "lit";
-import * as lit_html16 from "lit-html";
+import * as lit_html17 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: lit17.CSSResult[];
+  static styles: lit18.CSSResult[];
   playing: boolean;
   get efContext(): ControllableInterface | null;
   connectedCallback(): void;
   disconnectedCallback(): void;
   updated(changedProperties: Map<string | number | symbol, unknown>): void;
-  render(): lit_html16.TemplateResult<1>;
+  render(): lit_html17.TemplateResult<1>;
   handleClick: () => void;
 }
 declare global {

package/dist/gui/EFPlay.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit16 from "lit";
+import * as lit17 from "lit";
 import { LitElement } from "lit";
-import * as lit_html15 from "lit-html";
+import * as lit_html16 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: lit16.CSSResult[];
+  static styles: lit17.CSSResult[];
   playing: boolean;
   get efContext(): ControllableInterface | null;
   connectedCallback(): void;
   disconnectedCallback(): void;
   updated(changedProperties: Map<string | number | symbol, unknown>): void;
-  render(): lit_html15.TemplateResult<1>;
+  render(): lit_html16.TemplateResult<1>;
   handleClick: () => void;
 }
 declare global {

package/dist/gui/EFPreview.d.ts

@@ -1,19 +1,19 @@
 import { ContextMixinInterface } from "./ContextMixin.js";
-import * as lit9 from "lit";
+import * as lit10 from "lit";
 import { LitElement } from "lit";
-import * as lit_html9 from "lit-html";
+import * as lit_html10 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: lit9.CSSResult[];
+  static styles: lit10.CSSResult[];
   focusedElement?: HTMLElement;
   /**
    * Find the closest temporal element (timegroup, video, audio, etc.)
    */
   private findClosestTemporal;
   constructor();
-  render(): lit_html9.TemplateResult<1>;
+  render(): lit_html10.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFScrubber.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit19 from "lit";
+import * as lit20 from "lit";
 import { LitElement } from "lit";
-import * as lit_html18 from "lit-html";
+import * as lit_html19 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: lit19.CSSResult[];
+  static styles: lit20.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_html18.TemplateResult<1>;
+  render(): lit_html19.TemplateResult<1>;
   connectedCallback(): void;
   disconnectedCallback(): void;
 }

package/dist/gui/EFTimeDisplay.d.ts

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

package/dist/gui/EFTimelineRuler.d.ts

@@ -1,7 +1,7 @@
 import { TimelineState } from "./timeline/timelineStateContext.js";
-import * as lit33 from "lit";
+import * as lit34 from "lit";
 import { LitElement } from "lit";
-import * as lit_html31 from "lit-html";
+import * as lit_html32 from "lit-html";
 
 //#region src/gui/EFTimelineRuler.d.ts
 /**
@@ -25,7 +25,7 @@ declare function calculatePixelsPerFrame(frameIntervalMs: number, pixelsPerMs: n
  */
 declare function shouldShowFrameMarkers(pixelsPerFrame: number, minSpacing?: number): boolean;
 declare class EFTimelineRuler extends LitElement {
-  static styles: lit33.CSSResult[];
+  static styles: lit34.CSSResult[];
   durationMs: number;
   contextDurationMs: number;
   timelineState?: TimelineState;
@@ -59,7 +59,7 @@ declare class EFTimelineRuler extends LitElement {
   private calculateLabelInterval;
   private getVisibleLabels;
   private renderCanvas;
-  render(): lit_html31.TemplateResult<1>;
+  render(): lit_html32.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFToggleLoop.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit18 from "lit";
+import * as lit19 from "lit";
 import { LitElement } from "lit";
-import * as lit_html17 from "lit-html";
+import * as lit_html18 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: lit18.CSSResult[];
+  static styles: lit19.CSSResult[];
   get context(): ControllableInterface | null;
-  render(): lit_html17.TemplateResult<1>;
+  render(): lit_html18.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFTogglePlay.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit15 from "lit";
+import * as lit16 from "lit";
 import { LitElement } from "lit";
-import * as lit_html14 from "lit-html";
+import * as lit_html15 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: lit15.CSSResult[];
+  static styles: lit16.CSSResult[];
   playing: boolean;
   get efContext(): ControllableInterface | null;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  render(): lit_html14.TemplateResult<1>;
+  render(): lit_html15.TemplateResult<1>;
   togglePlay: () => void;
   private getPlaybackController;
 }

package/dist/gui/EFWorkbench.d.ts

@@ -1,16 +1,16 @@
 import { ContextMixinInterface } from "./ContextMixin.js";
 import { RenderToVideoOptions } from "../preview/renderTimegroupToVideo.types.js";
 import "./EFFitScale.js";
-import * as lit8 from "lit";
+import * as lit9 from "lit";
 import { LitElement, PropertyValueMap } from "lit";
-import * as lit_html8 from "lit-html";
+import * as lit_html9 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 {
   #private;
-  static styles: lit8.CSSResult[];
+  static styles: lit9.CSSResult[];
   rendering: boolean;
   private panZoomTransform;
   private isExporting;
@@ -200,7 +200,7 @@ declare class EFWorkbench extends EFWorkbench_base {
   updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
   drawOverlays: () => void;
   private renderPlaybackStats;
-  render(): lit_html8.TemplateResult<1>;
+  render(): lit_html9.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 lit11 from "lit";
+import * as lit12 from "lit";
 import { LitElement, PropertyValues } from "lit";
-import * as lit_html11 from "lit-html";
+import * as lit_html12 from "lit-html";
 
 //#region src/gui/hierarchy/EFHierarchy.d.ts
 declare const EFHierarchy_base: typeof LitElement;
 declare class EFHierarchy extends EFHierarchy_base {
-  static styles: lit11.CSSResult[];
+  static styles: lit12.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_html11.TemplateResult<1>;
+  render(): lit_html12.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -4,13 +4,13 @@ import { EFVideo } from "../../elements/EFVideo.js";
 import { EFTimegroup } from "../../elements/EFTimegroup.js";
 import { EFImage } from "../../elements/EFImage.js";
 import { HierarchyContext } from "./hierarchyContext.js";
-import * as lit12 from "lit";
+import * as lit13 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: lit12.CSSResult[];
+  static styles: lit13.CSSResult[];
   hierarchyContext?: HierarchyContext;
   canvasSelectionContext?: SelectionContext;
   element: ElementType;

package/dist/gui/timeline/EFTimeline.d.ts

@@ -4,7 +4,7 @@ import { TimelineState } from "./timelineStateContext.js";
 import "./tracks/preloadTracks.js";
 import "./EFTimelineRow.js";
 import "../EFTimelineRuler.js";
-import * as lit34 from "lit";
+import * as lit35 from "lit";
 import { LitElement, PropertyValues, TemplateResult } from "lit";
 
 //#region src/gui/timeline/EFTimeline.d.ts
@@ -17,7 +17,7 @@ declare const EFTimeline_base: typeof LitElement;
  */
 declare class EFTimeline extends EFTimeline_base {
   #private;
-  static styles: lit34.CSSResult[];
+  static styles: lit35.CSSResult[];
   /**
    * Target element ID or "selection" to derive from canvas selection.
    *

package/dist/gui/timeline/EFTimeline.js

@@ -586,6 +586,10 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
 		this.removeScrollListener();
 		this.removeKeyboardListener();
 		this.targetObserver?.disconnect();
+		if (this.#durationChangeTarget) {
+			this.#durationChangeTarget.removeEventListener("durationchange", this.#durationChangeHandler);
+			this.#durationChangeTarget = void 0;
+		}
 		this.resizeObserver?.disconnect();
 		this.unsubscribeFromPlaybackController();
 		if (this.saveZoomScrollDebounceTimer !== null) {
@@ -600,6 +604,10 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
 	*/
 	setupTargetObserver() {
 		this.targetObserver?.disconnect();
+		if (this.#durationChangeTarget) {
+			this.#durationChangeTarget.removeEventListener("durationchange", this.#durationChangeHandler);
+			this.#durationChangeTarget = void 0;
+		}
 		const target = this.targetTemporal;
 		if (target && target instanceof Element) {
 			this.targetObserver = new MutationObserver(() => this.requestUpdate());
@@ -608,8 +616,13 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
 				subtree: true,
 				attributes: true
 			});
+			target.addEventListener("durationchange", this.#durationChangeHandler);
+			this.#durationChangeTarget = target;
 		}
 	}
+	#durationChangeTarget;
+	#durationChangeHandler = () => this.requestUpdate();
+	#previousTargetTemporal = null;
 	willUpdate(changedProperties) {
 		if (changedProperties.has("target") && this.target && !this.targetController) this.targetController = new TargetController(this);
 		this.setupSelectionListener();
@@ -652,11 +665,15 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
 		});
 		if (changedProperties.has("pixelsPerMs") || changedProperties.has("viewportScrollLeft")) this.debouncedSaveTimelineState();
 		if (changedProperties.has("targetElement") || changedProperties.has("target")) {
-			this.setupTargetObserver();
 			this.removeSelectionListener();
 			this.selectionChangeHandler = void 0;
 			this.setupSelectionListener();
 		}
+		const currentTargetTemporal = this.targetTemporal;
+		if (currentTargetTemporal !== this.#previousTargetTemporal) {
+			this.#previousTargetTemporal = currentTargetTemporal;
+			this.setupTargetObserver();
+		}
 		if (this.tracksScrollRef.value && !this.scrollHandler) this.setupScrollListener();
 		else if (!this.tracksScrollRef.value && this.scrollHandler) this.removeScrollListener();
 		if (this.tracksScrollRef.value && !this.resizeObserver) {