@editframe/elements 0.38.0 → 0.39.0

package/dist/gui/EFTimeDisplay.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit21 from "lit";
+import * as lit20 from "lit";
 import { LitElement } from "lit";
-import * as lit_html20 from "lit-html";
+import * as lit_html19 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: lit21.CSSResult;
+  static styles: lit20.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_html20.TemplateResult<1>;
+  render(): lit_html19.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFTimelineRuler.d.ts

@@ -1,7 +1,7 @@
 import { TimelineState } from "./timeline/timelineStateContext.js";
-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/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: lit32.CSSResult[];
+  static styles: lit33.CSSResult[];
   durationMs: number;
   contextDurationMs: number;
   timelineState?: TimelineState;
@@ -59,7 +59,7 @@ declare class EFTimelineRuler extends LitElement {
   private calculateLabelInterval;
   private getVisibleLabels;
   private renderCanvas;
-  render(): lit_html30.TemplateResult<1>;
+  render(): lit_html31.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 lit18 from "lit";
 import { LitElement } from "lit";
-import * as lit_html18 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: lit18.CSSResult[];
   get context(): ControllableInterface | null;
-  render(): lit_html18.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 lit15 from "lit";
 import { LitElement } from "lit";
-import * as lit_html15 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: lit15.CSSResult[];
   playing: boolean;
   get efContext(): ControllableInterface | null;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  render(): lit_html15.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 lit13 from "lit";
+import * as lit25 from "lit";
 import { LitElement } from "lit";
-import * as lit_html12 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: lit13.CSSResult;
+  static styles: lit25.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_html12.TemplateResult<1>;
+  render(): lit_html23.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFWorkbench.d.ts

@@ -9,6 +9,7 @@ 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[];
   rendering: boolean;
   private panZoomTransform;
@@ -21,6 +22,7 @@ declare class EFWorkbench extends EFWorkbench_base {
   private previewResolutionScale;
   private exportOptions;
   private exportAbortController;
+  private previewIsLoading;
   private isPlaying;
   private isScrubbing;
   private isAtRest;

package/dist/gui/EFWorkbench.js

@@ -49,6 +49,7 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 			outMs: 0
 		};
 		this.exportAbortController = null;
+		this.previewIsLoading = false;
 		this.isPlaying = false;
 		this.isScrubbing = false;
 		this.isAtRest = true;
@@ -273,6 +274,32 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         pointer-events: none;
         z-index: 1;
       }
+
+      .preview-loading-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        overflow: hidden;
+        z-index: 8;
+        pointer-events: none;
+        background: var(--ef-color-loading-spinner-track, rgba(255, 255, 255, 0.1));
+      }
+
+      .preview-loading-bar {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        width: 40%;
+        background: var(--ef-color-loading-spinner-fill, rgba(255, 255, 255, 0.8));
+        animation: preview-sweep 1.4s ease-in-out infinite;
+      }
+
+      @keyframes preview-sweep {
+        0% { left: -40%; }
+        100% { left: 140%; }
+      }
       
       .clone-content {
         position: absolute;
@@ -529,6 +556,8 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
       }
     `];
 	}
+	#trackedTimegroup = null;
+	#readyStateHandler = null;
 	handleStageWheel(event) {
 		event.preventDefault();
 	}
@@ -579,6 +608,11 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 			this.savePanZoomDebounceTimer = null;
 		}
 		this.savePreviewPanZoom();
+		if (this.#trackedTimegroup && this.#readyStateHandler) {
+			this.#trackedTimegroup.removeEventListener("readystatechange", this.#readyStateHandler);
+			this.#trackedTimegroup = null;
+			this.#readyStateHandler = null;
+		}
 	}
 	firstUpdated() {
 		requestAnimationFrame(() => {
@@ -588,6 +622,11 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 			if (this.presentationMode === "dom") this.initDomMode();
 			else if (this.presentationMode === "canvas") this.initCanvasMode();
 		});
+		this.#syncTimegroupListener();
+		const canvasSlot = this.shadowRoot?.querySelector("slot[name=\"canvas\"]");
+		if (canvasSlot) canvasSlot.addEventListener("slotchange", () => {
+			this.#syncTimegroupListener();
+		});
 	}
 	handleTransformChanged(e) {
 		this.panZoomTransform = e.detail;
@@ -615,8 +654,25 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
 	getTimegroup() {
 		const canvas = this.querySelector("[slot='canvas']");
 		if (!canvas) return null;
+		if (canvas instanceof EFTimegroup) return canvas;
 		return canvas.querySelector("ef-timegroup");
 	}
+	#syncTimegroupListener() {
+		const timegroup = this.getTimegroup();
+		if (timegroup === this.#trackedTimegroup) return;
+		if (this.#trackedTimegroup && this.#readyStateHandler) this.#trackedTimegroup.removeEventListener("readystatechange", this.#readyStateHandler);
+		this.#trackedTimegroup = timegroup;
+		if (!timegroup) {
+			this.previewIsLoading = false;
+			this.#readyStateHandler = null;
+			return;
+		}
+		this.#readyStateHandler = () => {
+			this.previewIsLoading = timegroup.contentReadyState === "loading";
+		};
+		timegroup.addEventListener("readystatechange", this.#readyStateHandler);
+		this.previewIsLoading = timegroup.contentReadyState === "loading";
+	}
 	/**
 	* Get the root timegroup ID for localStorage key generation.
 	* Returns null if no root timegroup is found or it has no ID.
@@ -1744,7 +1800,10 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         @wheel=${this.handleStageWheel}
       >
         <!-- Original timegroup (hidden in clone/canvas mode, visible in dom mode) -->
-        <slot name="canvas"></slot>
+        <slot
+          name="canvas"
+          @slotchange=${() => this.#syncTimegroupListener()}
+        ></slot>
         
         <!-- Canvas preview (visible in canvas mode only) -->
         <div 
@@ -1752,6 +1811,13 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
           ${ref(this.canvasPreviewRef)}
           style="display: ${this.presentationMode === "canvas" ? "block" : "none"}"
         ></div>
+
+        <!-- Preview loading overlay (shown when timegroup content is loading) -->
+        ${this.previewIsLoading ? html`
+          <div class="preview-loading-overlay">
+            <div class="preview-loading-bar"></div>
+          </div>
+        ` : ""}
         
         <!-- Playback stats overlay (visible in canvas mode only) -->
         ${this.renderPlaybackStats()}
@@ -1777,6 +1843,7 @@ __decorate([state()], EFWorkbench.prototype, "renderMode", void 0);
 __decorate([state()], EFWorkbench.prototype, "presentationMode", void 0);
 __decorate([state()], EFWorkbench.prototype, "previewResolutionScale", void 0);
 __decorate([state()], EFWorkbench.prototype, "exportOptions", void 0);
+__decorate([state()], EFWorkbench.prototype, "previewIsLoading", void 0);
 __decorate([state()], EFWorkbench.prototype, "isPlaying", void 0);
 __decorate([state()], EFWorkbench.prototype, "isScrubbing", void 0);
 __decorate([state()], EFWorkbench.prototype, "isAtRest", void 0);