@editframe/elements 0.33.0-beta → 0.34.5-beta

package/dist/elements/EFPanZoom.d.ts

@@ -1,6 +1,6 @@
-import * as lit32 from "lit";
+import * as lit28 from "lit";
 import { LitElement } from "lit";
-import * as lit_html31 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: lit32.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_html31.TemplateResult<1>;
+  render(): lit_html27.TemplateResult<1>;
 }
 //#endregion
 export { EFPanZoom, PanZoomTransform };

package/dist/elements/EFPanZoom.js

@@ -1,4 +1,4 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { panZoomTransformContext } from "../gui/panZoomTransformContext.js";
 import { provide } from "@lit/context";
 import { LitElement, css, html } from "lit";

package/dist/elements/EFSourceMixin.js

@@ -1,5 +1,4 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
-import { Task } from "@lit/task";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { property } from "lit/decorators/property.js";
 
 //#region src/elements/EFSourceMixin.ts
@@ -8,26 +7,55 @@ function EFSourceMixin(superClass, options) {
 		constructor(..._args) {
 			super(..._args);
 			this.src = "";
-			this.md5SumLoader = new Task(this, {
-				autoRun: false,
-				args: () => [this.src],
-				task: async ([src], { signal }) => {
-					let normalizedSrc = src.startsWith("/") ? src.slice(1) : src;
-					normalizedSrc = normalizedSrc.replace(/^\/+/, "");
-					const md5Path = `/api/v1/isobmff_files/local/md5?src=${encodeURIComponent(normalizedSrc)}`;
-					const response = await fetch(md5Path, { signal });
-					if (!response.ok) return;
-					return (await response.json()).md5 ?? void 0;
+			this.md5SumLoader = new Proxy({
+				run: () => this.loadMd5Sum(),
+				_host: this
+			}, { get(target, prop) {
+				if (prop === "value") return target._host.#md5Value;
+				if (prop === "taskComplete") {
+					const host = target._host;
+					return host.#md5Promise || Promise.resolve(host.#md5Value);
 				}
-			});
+				return target[prop];
+			} });
 		}
 		get apiHost() {
 			return this.closest("ef-configuration")?.apiHost ?? this.closest("ef-workbench")?.apiHost ?? this.closest("ef-preview")?.apiHost;
 		}
+		#md5Value = void 0;
+		#md5Promise = null;
+		#md5LastSrc = null;
 		productionSrc() {
-			if (!this.md5SumLoader.value) throw new Error(`MD5 sum not available for ${this}. Cannot generate production URL`);
+			if (!this.#md5Value) throw new Error(`MD5 sum not available for ${this}. Cannot generate production URL`);
 			if (!this.apiHost) throw new Error(`apiHost not available for ${this}. Cannot generate production URL`);
-			return `${this.apiHost}/api/v1/${options.assetType}/${this.md5SumLoader.value}`;
+			return `${this.apiHost}/api/v1/${options.assetType}/${this.#md5Value}`;
+		}
+		/**
+		* Load MD5 sum for the current source
+		*/
+		async loadMd5Sum(signal) {
+			if (this.#md5LastSrc === this.src && this.#md5Value) return this.#md5Value;
+			if (this.#md5Promise && this.#md5LastSrc === this.src) return this.#md5Promise;
+			this.#md5LastSrc = this.src;
+			this.#md5Promise = this.#doLoadMd5(this.src, signal);
+			try {
+				this.#md5Value = await this.#md5Promise;
+				return this.#md5Value;
+			} catch (error) {
+				if (error instanceof DOMException && error.name === "AbortError") throw error;
+				console.error("EFSourceMixin md5Sum error", error);
+				return;
+			} finally {
+				this.#md5Promise = null;
+			}
+		}
+		async #doLoadMd5(src, signal) {
+			let normalizedSrc = src.startsWith("/") ? src.slice(1) : src;
+			normalizedSrc = normalizedSrc.replace(/^\/+/, "");
+			const md5Path = `/api/v1/isobmff_files/local/md5?src=${encodeURIComponent(normalizedSrc)}`;
+			const response = await fetch(md5Path, { signal });
+			if (!response.ok) return;
+			return (await response.json()).md5 ?? void 0;
 		}
 	}
 	__decorate([property({ type: String })], EFSourceElement.prototype, "src", void 0);

package/dist/elements/EFSourceMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFSourceMixin.js","names":[],"sources":["../../src/elements/EFSourceMixin.ts"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport type { LitElement } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\n\nexport declare class EFSourceMixinInterface {\n  apiHost?: string;\n  productionSrc(): string;\n  src: string;\n}\n\ninterface EFSourceMixinOptions {\n  assetType: string;\n}\ntype Constructor<T = {}> = new (...args: any[]) => T;\nexport function EFSourceMixin<T extends Constructor<LitElement>>(\n  superClass: T,\n  options: EFSourceMixinOptions,\n) {\n  class EFSourceElement extends superClass {\n    get apiHost() {\n      const apiHost =\n        this.closest(\"ef-configuration\")?.apiHost ??\n        this.closest(\"ef-workbench\")?.apiHost ??\n        this.closest(\"ef-preview\")?.apiHost;\n\n      // Return undefined instead of defaulting to external URL\n      // This allows components to use current origin when apiHost is not set\n      return apiHost;\n    }\n\n    @property({ type: String })\n    src = \"\";\n\n    productionSrc() {\n      if (!this.md5SumLoader.value) {\n        throw new Error(\n          `MD5 sum not available for ${this}. Cannot generate production URL`,\n        );\n      }\n\n      if (!this.apiHost) {\n        throw new Error(\n          `apiHost not available for ${this}. Cannot generate production URL`,\n        );\n      }\n\n      return `${this.apiHost}/api/v1/${options.assetType}/${this.md5SumLoader.value}`;\n    }\n\n    md5SumLoader = new Task(this, {\n      autoRun: false,\n      args: () => [this.src] as const,\n      task: async ([src], { signal }) => {\n        // Normalize the path: remove leading slash and any double slashes\n        let normalizedSrc = src.startsWith(\"/\")\n          ? src.slice(1)\n          : src;\n        normalizedSrc = normalizedSrc.replace(/^\\/+/, \"\");\n        // Use production API format for local files\n        const md5Path = `/api/v1/isobmff_files/local/md5?src=${encodeURIComponent(normalizedSrc)}`;\n        const response = await fetch(md5Path, { signal });\n        if (!response.ok) {\n          return undefined;\n        }\n        const data = await response.json();\n        return data.md5 ?? undefined;\n      },\n    });\n  }\n\n  return EFSourceElement as Constructor<EFSourceMixinInterface> & T;\n}\n"],"mappings":";;;;;AAcA,SAAgB,cACd,YACA,SACA;CACA,MAAM,wBAAwB,WAAW;;;cAajC;uBAkBS,IAAI,KAAK,MAAM;IAC5B,SAAS;IACT,YAAY,CAAC,KAAK,IAAI;IACtB,MAAM,OAAO,CAAC,MAAM,EAAE,aAAa;KAEjC,IAAI,gBAAgB,IAAI,WAAW,IAAI,GACnC,IAAI,MAAM,EAAE,GACZ;AACJ,qBAAgB,cAAc,QAAQ,QAAQ,GAAG;KAEjD,MAAM,UAAU,uCAAuC,mBAAmB,cAAc;KACxF,MAAM,WAAW,MAAM,MAAM,SAAS,EAAE,QAAQ,CAAC;AACjD,SAAI,CAAC,SAAS,GACZ;AAGF,aADa,MAAM,SAAS,MAAM,EACtB,OAAO;;IAEtB,CAAC;;EAhDF,IAAI,UAAU;AAQZ,UANE,KAAK,QAAQ,mBAAmB,EAAE,WAClC,KAAK,QAAQ,eAAe,EAAE,WAC9B,KAAK,QAAQ,aAAa,EAAE;;EAUhC,gBAAgB;AACd,OAAI,CAAC,KAAK,aAAa,MACrB,OAAM,IAAI,MACR,6BAA6B,KAAK,kCACnC;AAGH,OAAI,CAAC,KAAK,QACR,OAAM,IAAI,MACR,6BAA6B,KAAK,kCACnC;AAGH,UAAO,GAAG,KAAK,QAAQ,UAAU,QAAQ,UAAU,GAAG,KAAK,aAAa;;;aAhBzE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAwC7B,QAAO"}
+{"version":3,"file":"EFSourceMixin.js","names":["#md5Value","#md5Promise","#md5LastSrc","#doLoadMd5"],"sources":["../../src/elements/EFSourceMixin.ts"],"sourcesContent":["import type { LitElement } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\n\nexport declare class EFSourceMixinInterface {\n  apiHost?: string;\n  productionSrc(): string;\n  src: string;\n}\n\ninterface EFSourceMixinOptions {\n  assetType: string;\n}\ntype Constructor<T = {}> = new (...args: any[]) => T;\nexport function EFSourceMixin<T extends Constructor<LitElement>>(\n  superClass: T,\n  options: EFSourceMixinOptions,\n) {\n  class EFSourceElement extends superClass {\n    get apiHost() {\n      const apiHost =\n        this.closest(\"ef-configuration\")?.apiHost ??\n        this.closest(\"ef-workbench\")?.apiHost ??\n        this.closest(\"ef-preview\")?.apiHost;\n\n      // Return undefined instead of defaulting to external URL\n      // This allows components to use current origin when apiHost is not set\n      return apiHost;\n    }\n\n    @property({ type: String })\n    src = \"\";\n\n    #md5Value: string | undefined = undefined;\n    #md5Promise: Promise<string | undefined> | null = null;\n    #md5LastSrc: string | null = null;\n\n    productionSrc() {\n      if (!this.#md5Value) {\n        throw new Error(\n          `MD5 sum not available for ${this}. Cannot generate production URL`,\n        );\n      }\n\n      if (!this.apiHost) {\n        throw new Error(\n          `apiHost not available for ${this}. Cannot generate production URL`,\n        );\n      }\n\n      return `${this.apiHost}/api/v1/${options.assetType}/${this.#md5Value}`;\n    }\n\n    /**\n     * Load MD5 sum for the current source\n     */\n    async loadMd5Sum(signal?: AbortSignal): Promise<string | undefined> {\n      if (this.#md5LastSrc === this.src && this.#md5Value) {\n        return this.#md5Value;\n      }\n\n      if (this.#md5Promise && this.#md5LastSrc === this.src) {\n        return this.#md5Promise;\n      }\n\n      this.#md5LastSrc = this.src;\n      this.#md5Promise = this.#doLoadMd5(this.src, signal);\n\n      try {\n        this.#md5Value = await this.#md5Promise;\n        return this.#md5Value;\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          throw error;\n        }\n        console.error(\"EFSourceMixin md5Sum error\", error);\n        return undefined;\n      } finally {\n        this.#md5Promise = null;\n      }\n    }\n\n    async #doLoadMd5(src: string, signal?: AbortSignal): Promise<string | undefined> {\n      // Normalize the path: remove leading slash and any double slashes\n      let normalizedSrc = src.startsWith(\"/\")\n        ? src.slice(1)\n        : src;\n      normalizedSrc = normalizedSrc.replace(/^\\/+/, \"\");\n      // Use production API format for local files\n      const md5Path = `/api/v1/isobmff_files/local/md5?src=${encodeURIComponent(normalizedSrc)}`;\n      const response = await fetch(md5Path, { signal });\n      if (!response.ok) {\n        return undefined;\n      }\n      const data = await response.json();\n      return data.md5 ?? undefined;\n    }\n\n    /**\n     * Compatibility wrapper for code expecting md5SumLoader.value\n     */\n    md5SumLoader = new Proxy({\n      run: () => this.loadMd5Sum(),\n      _host: this,\n    } as {\n      run: () => Promise<string | undefined>;\n      value: string | undefined;\n      taskComplete: Promise<string | undefined>;\n      _host: typeof this;\n    }, {\n      get(target, prop) {\n        if (prop === 'value') {\n          return (target._host as any).#md5Value;\n        }\n        if (prop === 'taskComplete') {\n          const host = target._host as any;\n          return host.#md5Promise || Promise.resolve(host.#md5Value);\n        }\n        return (target as any)[prop];\n      },\n    });\n  }\n\n  return EFSourceElement as Constructor<EFSourceMixinInterface> & T;\n}\n"],"mappings":";;;;AAaA,SAAgB,cACd,YACA,SACA;CACA,MAAM,wBAAwB,WAAW;;;cAajC;uBAsES,IAAI,MAAM;IACvB,WAAW,KAAK,YAAY;IAC5B,OAAO;IACR,EAKE,EACD,IAAI,QAAQ,MAAM;AAChB,QAAI,SAAS,QACX,QAAQ,OAAO,OAAcA;AAE/B,QAAI,SAAS,gBAAgB;KAC3B,MAAM,OAAO,OAAO;AACpB,YAAO,MAAKC,cAAe,QAAQ,QAAQ,MAAKD,SAAU;;AAE5D,WAAQ,OAAe;MAE1B,CAAC;;EArGF,IAAI,UAAU;AAQZ,UANE,KAAK,QAAQ,mBAAmB,EAAE,WAClC,KAAK,QAAQ,eAAe,EAAE,WAC9B,KAAK,QAAQ,aAAa,EAAE;;EAUhC,YAAgC;EAChC,cAAkD;EAClD,cAA6B;EAE7B,gBAAgB;AACd,OAAI,CAAC,MAAKA,SACR,OAAM,IAAI,MACR,6BAA6B,KAAK,kCACnC;AAGH,OAAI,CAAC,KAAK,QACR,OAAM,IAAI,MACR,6BAA6B,KAAK,kCACnC;AAGH,UAAO,GAAG,KAAK,QAAQ,UAAU,QAAQ,UAAU,GAAG,MAAKA;;;;;EAM7D,MAAM,WAAW,QAAmD;AAClE,OAAI,MAAKE,eAAgB,KAAK,OAAO,MAAKF,SACxC,QAAO,MAAKA;AAGd,OAAI,MAAKC,cAAe,MAAKC,eAAgB,KAAK,IAChD,QAAO,MAAKD;AAGd,SAAKC,aAAc,KAAK;AACxB,SAAKD,aAAc,MAAKE,UAAW,KAAK,KAAK,OAAO;AAEpD,OAAI;AACF,UAAKH,WAAY,MAAM,MAAKC;AAC5B,WAAO,MAAKD;YACL,OAAO;AACd,QAAI,iBAAiB,gBAAgB,MAAM,SAAS,aAClD,OAAM;AAER,YAAQ,MAAM,8BAA8B,MAAM;AAClD;aACQ;AACR,UAAKC,aAAc;;;EAIvB,OAAME,UAAW,KAAa,QAAmD;GAE/E,IAAI,gBAAgB,IAAI,WAAW,IAAI,GACnC,IAAI,MAAM,EAAE,GACZ;AACJ,mBAAgB,cAAc,QAAQ,QAAQ,GAAG;GAEjD,MAAM,UAAU,uCAAuC,mBAAmB,cAAc;GACxF,MAAM,WAAW,MAAM,MAAM,SAAS,EAAE,QAAQ,CAAC;AACjD,OAAI,CAAC,SAAS,GACZ;AAGF,WADa,MAAM,SAAS,MAAM,EACtB,OAAO;;;aAjEpB,SAAS,EAAE,MAAM,QAAQ,CAAC;AA6F7B,QAAO"}

package/dist/elements/EFSurface.d.ts

@@ -1,29 +1,42 @@
+import { FrameRenderable, FrameState } from "../preview/FrameController.js";
 import { ContextMixinInterface } from "../gui/ContextMixin.js";
-import { Task } from "@lit/task";
-import * as lit30 from "lit";
+import * as lit26 from "lit";
 import { LitElement } from "lit";
-import * as lit_html29 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 {
+declare class EFSurface extends LitElement implements FrameRenderable {
   #private;
-  static styles: lit30.CSSResult[];
+  static styles: lit26.CSSResult[];
   canvasRef: lit_html_directives_ref3.Ref<HTMLCanvasElement>;
   targetElement: ContextMixinInterface | null;
   target: string;
-  render(): lit_html29.TemplateResult<1>;
+  render(): lit_html25.TemplateResult<1>;
   get rootTimegroup(): any;
   get currentTimeMs(): number;
   get durationMs(): number;
   get startTimeMs(): number;
   get endTimeMs(): number;
+  frameTask: {
+    run(): void | Promise<void>;
+    taskComplete: Promise<void>;
+  };
   /**
-   * Minimal integration with EFTimegroup's frame scheduling:
-   * - Waits for the target video element's frameTask to complete (ensuring it painted)
-   * - Copies the target's canvas into this element's canvas
+   * Query readiness state for a given time.
+   * @implements FrameRenderable
    */
-  frameTask: Task<readonly [ContextMixinInterface | null], void>;
+  getFrameState(_timeMs: number): FrameState;
+  /**
+   * Async preparation - waits for target element's frameTask.
+   * @implements FrameRenderable
+   */
+  prepareFrame(_timeMs: number, signal: AbortSignal): Promise<void>;
+  /**
+   * Synchronous render - copies canvas from target element.
+   * @implements FrameRenderable
+   */
+  renderFrame(_timeMs: number): void;
   protected updated(): void;
   private getSourceCanvas;
   private copyFromTarget;

package/dist/elements/EFSurface.js

@@ -1,6 +1,5 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { TargetController } from "./TargetController.js";
-import { Task } from "@lit/task";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
@@ -12,26 +11,28 @@ let EFSurface = class EFSurface$1 extends LitElement {
 		this.canvasRef = createRef();
 		this.targetElement = null;
 		this.target = "";
-		this.frameTask = new Task(this, {
-			autoRun: false,
-			args: () => [this.targetElement],
-			task: async ([target], { signal }) => {
-				signal?.throwIfAborted();
-				if (!target) return;
-				try {
-					const maybeTask = target.frameTask;
-					if (maybeTask && typeof maybeTask.run === "function") {
-						maybeTask.run();
-						await maybeTask.taskComplete;
-						signal?.throwIfAborted();
-					}
-				} catch (error) {
-					if (error instanceof DOMException && error.name === "AbortError") throw error;
-				}
-				signal?.throwIfAborted();
-				this.copyFromTarget(target);
-			}
-		});
+		this.frameTask = (() => {
+			const self = this;
+			const taskObj = {
+				run: () => {
+					const abortController = new AbortController();
+					const timeMs = self.currentTimeMs;
+					self.#frameTaskPromise = (async () => {
+						try {
+							await self.prepareFrame(timeMs, abortController.signal);
+							self.renderFrame(timeMs);
+						} catch (error) {
+							if (error instanceof DOMException && error.name === "AbortError") return;
+							throw error;
+						}
+					})();
+					taskObj.taskComplete = self.#frameTaskPromise;
+					return self.#frameTaskPromise;
+				},
+				taskComplete: Promise.resolve()
+			};
+			return taskObj;
+		})();
 	}
 	static {
 		this.styles = [css`
@@ -70,6 +71,47 @@ let EFSurface = class EFSurface$1 extends LitElement {
 	get endTimeMs() {
 		return this.startTimeMs + this.durationMs;
 	}
+	/**
+	* @deprecated Use FrameRenderable methods (prepareFrame, renderFrame) via FrameController instead.
+	* This is a compatibility wrapper that delegates to the new system.
+	*/
+	#frameTaskPromise = Promise.resolve();
+	/**
+	* Query readiness state for a given time.
+	* @implements FrameRenderable
+	*/
+	getFrameState(_timeMs) {
+		return {
+			needsPreparation: false,
+			isReady: !!this.targetElement,
+			priority: 10
+		};
+	}
+	/**
+	* Async preparation - waits for target element's frameTask.
+	* @implements FrameRenderable
+	*/
+	async prepareFrame(_timeMs, signal) {
+		if (!this.targetElement) return;
+		const maybeTask = this.targetElement.frameTask;
+		if (maybeTask && typeof maybeTask.run === "function") try {
+			maybeTask.run().catch(() => {});
+			await maybeTask.taskComplete;
+		} catch (error) {
+			if (error instanceof DOMException && error.name === "AbortError") {
+				signal.throwIfAborted();
+				return;
+			}
+		}
+		signal.throwIfAborted();
+	}
+	/**
+	* Synchronous render - copies canvas from target element.
+	* @implements FrameRenderable
+	*/
+	renderFrame(_timeMs) {
+		if (this.targetElement) this.copyFromTarget(this.targetElement);
+	}
 	updated() {
 		if (this.targetElement) this.copyFromTarget(this.targetElement);
 	}

package/dist/elements/EFSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFSurface.js","names":["EFSurface","target: any","root: any"],"sources":["../../src/elements/EFSurface.ts"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport type { ContextMixinInterface } from \"../gui/ContextMixin.ts\";\nimport { TargetController } from \"./TargetController.ts\";\n\n@customElement(\"ef-surface\")\nexport class EFSurface extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n      }\n      canvas {\n        all: inherit;\n        width: 100%;\n        height: 100%;\n        display: block;\n      }\n    `,\n  ];\n\n  canvasRef = createRef<HTMLCanvasElement>();\n\n  // @ts-expect-error controller is intentionally not referenced directly\n  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Used for side effects\n  #targetController: TargetController = new TargetController(this);\n\n  @state()\n  targetElement: ContextMixinInterface | null = null;\n\n  @property({ type: String })\n  target = \"\";\n\n  render() {\n    return html`<canvas ${ref(this.canvasRef)}></canvas>`;\n  }\n\n  // Provide minimal temporal-like properties so EFTimegroup can schedule us\n  get rootTimegroup(): any {\n    // Prefer the target element's root timegroup if available\n    const target: any = this.targetElement;\n    if (target && \"rootTimegroup\" in target) {\n      return target.rootTimegroup;\n    }\n    // Fallback: nearest containing timegroup if any\n    let root: any = this.closest(\"ef-timegroup\");\n    while (root?.parentTimegroup) {\n      root = root.parentTimegroup;\n    }\n    return root;\n  }\n\n  get currentTimeMs(): number {\n    return this.rootTimegroup?.currentTimeMs ?? 0;\n  }\n\n  get durationMs(): number {\n    return this.rootTimegroup?.durationMs ?? 0;\n  }\n\n  get startTimeMs(): number {\n    return this.rootTimegroup?.startTimeMs ?? 0;\n  }\n\n  get endTimeMs(): number {\n    return this.startTimeMs + this.durationMs;\n  }\n\n  /**\n   * Minimal integration with EFTimegroup's frame scheduling:\n   * - Waits for the target video element's frameTask to complete (ensuring it painted)\n   * - Copies the target's canvas into this element's canvas\n   */\n  frameTask = new Task(this, {\n    autoRun: false,\n    args: () => [this.targetElement] as const,\n    task: async ([target], { signal }) => {\n      // Check abort before starting\n      signal?.throwIfAborted();\n      \n      if (!target) return;\n\n      // Ensure the target has painted its frame for this tick\n      try {\n        const maybeTask = (target as any).frameTask;\n        if (maybeTask && typeof maybeTask.run === \"function\") {\n          // Run (idempotent) and then wait for completion\n          maybeTask.run();\n          await maybeTask.taskComplete;\n          // Check abort after async operation\n          signal?.throwIfAborted();\n        }\n      } catch (error) {\n        // Re-throw AbortError to propagate cancellation\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          throw error;\n        }\n        // Best-effort; continue to attempt copy for other errors\n      }\n\n      // Check abort before copy operation\n      signal?.throwIfAborted();\n      \n      this.copyFromTarget(target);\n    },\n  });\n\n  protected updated(): void {\n    if (this.targetElement) {\n      this.copyFromTarget(this.targetElement);\n    }\n  }\n\n  // Target resolution is handled by TargetController. No implicit discovery.\n\n  private getSourceCanvas(from: Element): HTMLCanvasElement | null {\n    const anyEl = from as any;\n    if (\"canvasElement\" in anyEl) {\n      return anyEl.canvasElement ?? null;\n    }\n    const sr = (from as HTMLElement).shadowRoot;\n    if (sr) {\n      const c = sr.querySelector(\"canvas\");\n      return (c as HTMLCanvasElement) ?? null;\n    }\n    return null;\n  }\n\n  private copyFromTarget(target: Element) {\n    const dst = this.canvasRef.value;\n    const src = this.getSourceCanvas(target);\n    if (!dst || !src) return;\n    if (!src.width || !src.height) return;\n\n    // Match source pixel size for a faithful mirror; layout scaling is handled by CSS\n    if (dst.width !== src.width || dst.height !== src.height) {\n      dst.width = src.width;\n      dst.height = src.height;\n    }\n\n    const ctx = dst.getContext(\"2d\");\n    if (!ctx) return;\n    ctx.drawImage(src, 0, 0, dst.width, dst.height);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-surface\": EFSurface;\n  }\n}\n"],"mappings":";;;;;;;;AAQO,sBAAMA,oBAAkB,WAAW;;;mBAgB5B,WAA8B;uBAOI;gBAGrC;mBA0CG,IAAI,KAAK,MAAM;GACzB,SAAS;GACT,YAAY,CAAC,KAAK,cAAc;GAChC,MAAM,OAAO,CAAC,SAAS,EAAE,aAAa;AAEpC,YAAQ,gBAAgB;AAExB,QAAI,CAAC,OAAQ;AAGb,QAAI;KACF,MAAM,YAAa,OAAe;AAClC,SAAI,aAAa,OAAO,UAAU,QAAQ,YAAY;AAEpD,gBAAU,KAAK;AACf,YAAM,UAAU;AAEhB,cAAQ,gBAAgB;;aAEnB,OAAO;AAEd,SAAI,iBAAiB,gBAAgB,MAAM,SAAS,aAClD,OAAM;;AAMV,YAAQ,gBAAgB;AAExB,SAAK,eAAe,OAAO;;GAE9B,CAAC;;;gBAnGc,CACd,GAAG;;;;;;;;;;;MAYJ;;CAMD,oBAAsC,IAAI,iBAAiB,KAAK;CAQhE,SAAS;AACP,SAAO,IAAI,WAAW,IAAI,KAAK,UAAU,CAAC;;CAI5C,IAAI,gBAAqB;EAEvB,MAAMC,SAAc,KAAK;AACzB,MAAI,UAAU,mBAAmB,OAC/B,QAAO,OAAO;EAGhB,IAAIC,OAAY,KAAK,QAAQ,eAAe;AAC5C,SAAO,MAAM,gBACX,QAAO,KAAK;AAEd,SAAO;;CAGT,IAAI,gBAAwB;AAC1B,SAAO,KAAK,eAAe,iBAAiB;;CAG9C,IAAI,aAAqB;AACvB,SAAO,KAAK,eAAe,cAAc;;CAG3C,IAAI,cAAsB;AACxB,SAAO,KAAK,eAAe,eAAe;;CAG5C,IAAI,YAAoB;AACtB,SAAO,KAAK,cAAc,KAAK;;CA0CjC,AAAU,UAAgB;AACxB,MAAI,KAAK,cACP,MAAK,eAAe,KAAK,cAAc;;CAM3C,AAAQ,gBAAgB,MAAyC;EAC/D,MAAM,QAAQ;AACd,MAAI,mBAAmB,MACrB,QAAO,MAAM,iBAAiB;EAEhC,MAAM,KAAM,KAAqB;AACjC,MAAI,GAEF,QADU,GAAG,cAAc,SAAS,IACD;AAErC,SAAO;;CAGT,AAAQ,eAAe,QAAiB;EACtC,MAAM,MAAM,KAAK,UAAU;EAC3B,MAAM,MAAM,KAAK,gBAAgB,OAAO;AACxC,MAAI,CAAC,OAAO,CAAC,IAAK;AAClB,MAAI,CAAC,IAAI,SAAS,CAAC,IAAI,OAAQ;AAG/B,MAAI,IAAI,UAAU,IAAI,SAAS,IAAI,WAAW,IAAI,QAAQ;AACxD,OAAI,QAAQ,IAAI;AAChB,OAAI,SAAS,IAAI;;EAGnB,MAAM,MAAM,IAAI,WAAW,KAAK;AAChC,MAAI,CAAC,IAAK;AACV,MAAI,UAAU,KAAK,GAAG,GAAG,IAAI,OAAO,IAAI,OAAO;;;YAnHhD,OAAO;YAGP,SAAS,EAAE,MAAM,QAAQ,CAAC;wBA1B5B,cAAc,aAAa"}
+{"version":3,"file":"EFSurface.js","names":["EFSurface","taskObj: { run(): void | Promise<void>; taskComplete: Promise<void> }","#frameTaskPromise","target: any","root: any"],"sources":["../../src/elements/EFSurface.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport type { ContextMixinInterface } from \"../gui/ContextMixin.ts\";\nimport type { FrameRenderable, FrameState } from \"../preview/FrameController.js\";\nimport { TargetController } from \"./TargetController.ts\";\n\n@customElement(\"ef-surface\")\nexport class EFSurface extends LitElement implements FrameRenderable {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n      }\n      canvas {\n        all: inherit;\n        width: 100%;\n        height: 100%;\n        display: block;\n      }\n    `,\n  ];\n\n  canvasRef = createRef<HTMLCanvasElement>();\n\n  // @ts-expect-error controller is intentionally not referenced directly\n  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Used for side effects\n  #targetController: TargetController = new TargetController(this);\n\n  @state()\n  targetElement: ContextMixinInterface | null = null;\n\n  @property({ type: String })\n  target = \"\";\n\n  render() {\n    return html`<canvas ${ref(this.canvasRef)}></canvas>`;\n  }\n\n  // Provide minimal temporal-like properties so EFTimegroup can schedule us\n  get rootTimegroup(): any {\n    // Prefer the target element's root timegroup if available\n    const target: any = this.targetElement;\n    if (target && \"rootTimegroup\" in target) {\n      return target.rootTimegroup;\n    }\n    // Fallback: nearest containing timegroup if any\n    let root: any = this.closest(\"ef-timegroup\");\n    while (root?.parentTimegroup) {\n      root = root.parentTimegroup;\n    }\n    return root;\n  }\n\n  get currentTimeMs(): number {\n    return this.rootTimegroup?.currentTimeMs ?? 0;\n  }\n\n  get durationMs(): number {\n    return this.rootTimegroup?.durationMs ?? 0;\n  }\n\n  get startTimeMs(): number {\n    return this.rootTimegroup?.startTimeMs ?? 0;\n  }\n\n  get endTimeMs(): number {\n    return this.startTimeMs + this.durationMs;\n  }\n\n  /**\n   * @deprecated Use FrameRenderable methods (prepareFrame, renderFrame) via FrameController instead.\n   * This is a compatibility wrapper that delegates to the new system.\n   */\n  #frameTaskPromise: Promise<void> = Promise.resolve();\n  \n  frameTask = (() => {\n    const self = this;\n    const taskObj: { run(): void | Promise<void>; taskComplete: Promise<void> } = {\n      run: () => {\n        const abortController = new AbortController();\n        const timeMs = self.currentTimeMs;\n        self.#frameTaskPromise = (async () => {\n          try {\n            await self.prepareFrame(timeMs, abortController.signal);\n            self.renderFrame(timeMs);\n          } catch (error) {\n            if (error instanceof DOMException && error.name === \"AbortError\") {\n              return;\n            }\n            throw error;\n          }\n        })();\n        taskObj.taskComplete = self.#frameTaskPromise;\n        return self.#frameTaskPromise;\n      },\n      taskComplete: Promise.resolve(),\n    };\n    return taskObj;\n  })();\n\n  // ============================================================================\n  // FrameRenderable Implementation\n  // Centralized frame control - replaces distributed Lit Task system\n  // ============================================================================\n\n  /**\n   * Query readiness state for a given time.\n   * @implements FrameRenderable\n   */\n  getFrameState(_timeMs: number): FrameState {\n    // Surface is ready when target element exists\n    const hasTarget = !!this.targetElement;\n\n    return {\n      needsPreparation: false, // Surface just copies, no async prep needed\n      isReady: hasTarget,\n      priority: 10, // Surface renders last (depends on other elements)\n    };\n  }\n\n  /**\n   * Async preparation - waits for target element's frameTask.\n   * @implements FrameRenderable\n   */\n  async prepareFrame(_timeMs: number, signal: AbortSignal): Promise<void> {\n    if (!this.targetElement) return;\n\n    // Wait for target's frame to be ready\n    const maybeTask = (this.targetElement as any).frameTask;\n    if (maybeTask && typeof maybeTask.run === \"function\") {\n      try {\n        maybeTask.run().catch(() => {});\n        await maybeTask.taskComplete;\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          signal.throwIfAborted();\n          return;\n        }\n        // Best-effort; continue to copy for other errors\n      }\n    }\n    signal.throwIfAborted();\n  }\n\n  /**\n   * Synchronous render - copies canvas from target element.\n   * @implements FrameRenderable\n   */\n  renderFrame(_timeMs: number): void {\n    if (this.targetElement) {\n      this.copyFromTarget(this.targetElement);\n    }\n  }\n\n  // ============================================================================\n  // End FrameRenderable Implementation\n  // ============================================================================\n\n  protected updated(): void {\n    if (this.targetElement) {\n      this.copyFromTarget(this.targetElement);\n    }\n  }\n\n  // Target resolution is handled by TargetController. No implicit discovery.\n\n  private getSourceCanvas(from: Element): HTMLCanvasElement | null {\n    const anyEl = from as any;\n    if (\"canvasElement\" in anyEl) {\n      return anyEl.canvasElement ?? null;\n    }\n    const sr = (from as HTMLElement).shadowRoot;\n    if (sr) {\n      const c = sr.querySelector(\"canvas\");\n      return (c as HTMLCanvasElement) ?? null;\n    }\n    return null;\n  }\n\n  private copyFromTarget(target: Element) {\n    const dst = this.canvasRef.value;\n    const src = this.getSourceCanvas(target);\n    if (!dst || !src) return;\n    if (!src.width || !src.height) return;\n\n    // Match source pixel size for a faithful mirror; layout scaling is handled by CSS\n    if (dst.width !== src.width || dst.height !== src.height) {\n      dst.width = src.width;\n      dst.height = src.height;\n    }\n\n    const ctx = dst.getContext(\"2d\");\n    if (!ctx) return;\n    ctx.drawImage(src, 0, 0, dst.width, dst.height);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-surface\": EFSurface;\n  }\n}\n"],"mappings":";;;;;;;AAQO,sBAAMA,oBAAkB,WAAsC;;;mBAgBvD,WAA8B;uBAOI;gBAGrC;0BA2CU;GACjB,MAAM,OAAO;GACb,MAAMC,UAAwE;IAC5E,WAAW;KACT,MAAM,kBAAkB,IAAI,iBAAiB;KAC7C,MAAM,SAAS,KAAK;AACpB,WAAKC,oBAAqB,YAAY;AACpC,UAAI;AACF,aAAM,KAAK,aAAa,QAAQ,gBAAgB,OAAO;AACvD,YAAK,YAAY,OAAO;eACjB,OAAO;AACd,WAAI,iBAAiB,gBAAgB,MAAM,SAAS,aAClD;AAEF,aAAM;;SAEN;AACJ,aAAQ,eAAe,MAAKA;AAC5B,YAAO,MAAKA;;IAEd,cAAc,QAAQ,SAAS;IAChC;AACD,UAAO;MACL;;;gBA3FY,CACd,GAAG;;;;;;;;;;;MAYJ;;CAMD,oBAAsC,IAAI,iBAAiB,KAAK;CAQhE,SAAS;AACP,SAAO,IAAI,WAAW,IAAI,KAAK,UAAU,CAAC;;CAI5C,IAAI,gBAAqB;EAEvB,MAAMC,SAAc,KAAK;AACzB,MAAI,UAAU,mBAAmB,OAC/B,QAAO,OAAO;EAGhB,IAAIC,OAAY,KAAK,QAAQ,eAAe;AAC5C,SAAO,MAAM,gBACX,QAAO,KAAK;AAEd,SAAO;;CAGT,IAAI,gBAAwB;AAC1B,SAAO,KAAK,eAAe,iBAAiB;;CAG9C,IAAI,aAAqB;AACvB,SAAO,KAAK,eAAe,cAAc;;CAG3C,IAAI,cAAsB;AACxB,SAAO,KAAK,eAAe,eAAe;;CAG5C,IAAI,YAAoB;AACtB,SAAO,KAAK,cAAc,KAAK;;;;;;CAOjC,oBAAmC,QAAQ,SAAS;;;;;CAoCpD,cAAc,SAA6B;AAIzC,SAAO;GACL,kBAAkB;GAClB,SAJgB,CAAC,CAAC,KAAK;GAKvB,UAAU;GACX;;;;;;CAOH,MAAM,aAAa,SAAiB,QAAoC;AACtE,MAAI,CAAC,KAAK,cAAe;EAGzB,MAAM,YAAa,KAAK,cAAsB;AAC9C,MAAI,aAAa,OAAO,UAAU,QAAQ,WACxC,KAAI;AACF,aAAU,KAAK,CAAC,YAAY,GAAG;AAC/B,SAAM,UAAU;WACT,OAAO;AACd,OAAI,iBAAiB,gBAAgB,MAAM,SAAS,cAAc;AAChE,WAAO,gBAAgB;AACvB;;;AAKN,SAAO,gBAAgB;;;;;;CAOzB,YAAY,SAAuB;AACjC,MAAI,KAAK,cACP,MAAK,eAAe,KAAK,cAAc;;CAQ3C,AAAU,UAAgB;AACxB,MAAI,KAAK,cACP,MAAK,eAAe,KAAK,cAAc;;CAM3C,AAAQ,gBAAgB,MAAyC;EAC/D,MAAM,QAAQ;AACd,MAAI,mBAAmB,MACrB,QAAO,MAAM,iBAAiB;EAEhC,MAAM,KAAM,KAAqB;AACjC,MAAI,GAEF,QADU,GAAG,cAAc,SAAS,IACD;AAErC,SAAO;;CAGT,AAAQ,eAAe,QAAiB;EACtC,MAAM,MAAM,KAAK,UAAU;EAC3B,MAAM,MAAM,KAAK,gBAAgB,OAAO;AACxC,MAAI,CAAC,OAAO,CAAC,IAAK;AAClB,MAAI,CAAC,IAAI,SAAS,CAAC,IAAI,OAAQ;AAG/B,MAAI,IAAI,UAAU,IAAI,SAAS,IAAI,WAAW,IAAI,QAAQ;AACxD,OAAI,QAAQ,IAAI;AAChB,OAAI,SAAS,IAAI;;EAGnB,MAAM,MAAM,IAAI,WAAW,KAAK;AAChC,MAAI,CAAC,IAAK;AACV,MAAI,UAAU,KAAK,GAAG,GAAG,IAAI,OAAO,IAAI,OAAO;;;YArKhD,OAAO;YAGP,SAAS,EAAE,MAAM,QAAQ,CAAC;wBA1B5B,cAAc,aAAa"}

package/dist/elements/EFTemporal.d.ts

@@ -1,6 +1,5 @@
 import { PlaybackController } from "../gui/PlaybackController.js";
 import { EFTimegroup } from "./EFTimegroup.js";
-import { Task } from "@lit/task";
 import { LitElement, ReactiveController } from "lit";
 
 //#region src/elements/EFTemporal.d.ts
@@ -191,7 +190,14 @@ declare class TemporalMixinInterface {
    * A convenience property for getting the root timegroup of the media element.
    */
   rootTimegroup?: EFTimegroup;
-  frameTask: Task<readonly unknown[], unknown>;
+  /**
+   * Frame task interface. Can be a Lit Task or a simple object with run() and taskComplete.
+   * @deprecated Prefer using FrameRenderable interface via FrameController.
+   */
+  frameTask: {
+    run(): void | Promise<void>;
+    taskComplete: Promise<unknown>;
+  };
   didBecomeRoot(): void;
   didBecomeChild(): void;
   updateComplete: Promise<boolean>;

package/dist/elements/EFTemporal.js

@@ -1,9 +1,7 @@
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { PlaybackController } from "../gui/PlaybackController.js";
 import { durationConverter } from "./durationConverter.js";
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { consume, createContext } from "@lit/context";
-import { Task } from "@lit/task";
 import { property, state } from "lit/decorators.js";
 
 //#region src/elements/EFTemporal.ts
@@ -124,15 +122,34 @@ function determineCurrentTimeSource(playbackController, rootTimegroup, isRootTim
 const isEFTemporal = (obj) => obj[EF_TEMPORAL];
 const EF_TEMPORAL = Symbol("EF_TEMPORAL");
 const deepGetTemporalElements = (element, temporals = []) => {
-	for (const child of element.children) {
+	const children = getChildrenIncludingSlotted(element);
+	for (const child of children) {
 		if (isEFTemporal(child)) temporals.push(child);
 		deepGetTemporalElements(child, temporals);
 	}
 	return temporals;
 };
+/**
+* Gets all child elements including slotted content for shadow DOM elements.
+* For elements with shadow DOM that contain slots, this returns the assigned
+* elements (slotted content) instead of just the shadow DOM children.
+*/
+const getChildrenIncludingSlotted = (element) => {
+	if (element.shadowRoot) {
+		const slots = element.shadowRoot.querySelectorAll("slot");
+		if (slots.length > 0) {
+			const assignedElements = [];
+			for (const slot of slots) assignedElements.push(...slot.assignedElements());
+			for (const child of element.shadowRoot.children) if (child.tagName !== "SLOT") assignedElements.push(child);
+			return assignedElements;
+		}
+	}
+	return Array.from(element.children);
+};
 const deepGetElementsWithFrameTasks = (element, elements = []) => {
-	for (const child of element.children) {
-		if ("frameTask" in child && child.frameTask instanceof Task) elements.push(child);
+	const children = getChildrenIncludingSlotted(element);
+	for (const child of children) {
+		if ("frameTask" in child && child.frameTask != null && typeof child.frameTask.run === "function") elements.push(child);
 		deepGetElementsWithFrameTasks(child, elements);
 	}
 	return elements;
@@ -153,7 +170,8 @@ resetTemporalCache();
 const shallowGetTemporalElements = (element, temporals = []) => {
 	const cachedResult = temporalCache.get(element);
 	if (cachedResult) return cachedResult;
-	for (const child of element.children) if (isEFTemporal(child)) temporals.push(child);
+	const children = getChildrenIncludingSlotted(element);
+	for (const child of children) if (isEFTemporal(child)) temporals.push(child);
 	else shallowGetTemporalElements(child, temporals);
 	temporalCache.set(element, temporals);
 	return temporals;
@@ -204,30 +222,18 @@ const EFTemporal = (superClass) => {
 			this._sourceOutMs = void 0;
 			this._startOffsetMs = 0;
 			this.rootTimegroup = this.getRootTimegroup();
-			this.frameTask = new Task(this, {
-				autoRun: EF_INTERACTIVE,
-				args: () => [this.ownCurrentTimeMs],
-				onError: (error) => {
-					this.frameTask.taskComplete.catch(() => {});
-					if (error instanceof DOMException && error.name === "AbortError" || error instanceof Error && (error.name === "AbortError" || error.message?.includes("signal is aborted") || error.message?.includes("The user aborted a request"))) return;
-					console.error("EFTemporal frameTask error", error);
-				},
-				task: async ([], { signal }) => {
-					let fullyUpdated = await this.updateComplete;
-					signal?.throwIfAborted();
-					let loopCount = 0;
-					const MAX_LOOP_ITERATIONS = 100;
-					while (!fullyUpdated) {
-						loopCount++;
-						if (loopCount > MAX_LOOP_ITERATIONS) {
-							console.error(`[EFTemporal] frameTask while loop exceeded ${MAX_LOOP_ITERATIONS} iterations, breaking. Element:`, this.tagName, this.id || "unnamed");
-							break;
-						}
-						fullyUpdated = await this.updateComplete;
-						signal?.throwIfAborted();
-					}
-				}
-			});
+			this.frameTask = (() => {
+				const self = this;
+				const taskObj = {
+					run: () => {
+						self.#frameTaskPromise = self.updateComplete.then(() => {});
+						taskObj.taskComplete = self.#frameTaskPromise;
+						return self.#frameTaskPromise;
+					},
+					taskComplete: Promise.resolve()
+				};
+				return taskObj;
+			})();
 		}
 		#ownCurrentTimeController;
 		#parentTimegroup;
@@ -435,6 +441,11 @@ const EFTemporal = (superClass) => {
 			const leadingTrimMs = this.sourceInMs || this.trimStartMs || 0;
 			return this.ownCurrentTimeMs + leadingTrimMs;
 		}
+		/**
+		* @deprecated Use FrameRenderable interface via FrameController instead.
+		* This is a compatibility wrapper - base class just waits for updateComplete.
+		*/
+		#frameTaskPromise = Promise.resolve();
 		didBecomeRoot() {
 			if (!this.playbackController) {
 				this.playbackController = new PlaybackController(this);