@editframe/elements 0.37.3-beta → 0.38.1

package/dist/elements/FetchMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"FetchMixin.js","names":["fetchPromise: Promise<Response>"],"sources":["../../src/elements/FetchMixin.ts"],"sourcesContent":["import type { LitElement } from \"lit\";\n\nexport declare class FetchMixinInterface {\n  fetch: typeof fetch;\n}\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\nexport function FetchMixin<T extends Constructor<LitElement>>(superClass: T) {\n  class FetchElement extends superClass {\n    fetch = (url: string, init?: RequestInit): Promise<Response> => {\n      try {\n        let fetchPromise: Promise<Response>;\n\n        // Look for context providers up the DOM tree\n        const workbench = this.closest(\"ef-workbench\") as any;\n        if (workbench?.fetch) {\n          fetchPromise = workbench.fetch(url, init);\n        } else {\n          const preview = this.closest(\"ef-preview\") as any;\n          if (preview?.fetch) {\n            fetchPromise = preview.fetch(url, init);\n          } else {\n            const configuration = this.closest(\"ef-configuration\") as any;\n            if (configuration?.fetch) {\n              fetchPromise = configuration.fetch(url, init);\n            } else {\n              // Fallback to window.fetch\n              fetchPromise = window.fetch(url, init);\n            }\n          }\n        }\n\n        // Wrap the promise to catch rejections and log the URL\n        // Return the promise chain so errors are logged but still propagate\n        return fetchPromise.catch((error) => {\n          // Don't log AbortError - these are intentional request cancellations\n          const isAbortError = \n            error instanceof Error && (\n              error.name === \"AbortError\" ||\n              error.message.includes(\"signal is aborted\") ||\n              error.message.includes(\"The user aborted a request\")\n            );\n          \n          // Don't log errors if element is disconnected from DOM\n          // This happens during scenario transitions when elements are removed mid-fetch\n          // The browser throws TypeError: \"Failed to fetch\" when the page navigates\n          const isDisconnected = !this.isConnected;\n          \n          // Also suppress \"Failed to fetch\" TypeError when disconnected\n          // These occur when the browser aborts a request due to page navigation,\n          // but doesn't throw a proper AbortError\n          const isNavigationAbort = isDisconnected && \n            error instanceof TypeError && \n            error.message === \"Failed to fetch\";\n          \n          // For AbortErrors, navigation aborts, and disconnected elements,\n          // re-throw the original error without enhancement to preserve error type\n          if (isAbortError || isNavigationAbort || isDisconnected) {\n            throw error;\n          }\n          \n          // Log unexpected errors\n          console.error(\n            \"FetchMixin fetch error\",\n            url,\n            error,\n            window.location.href,\n          );\n          \n          // Create a new error with the URL in the message, preserving the original error type\n          const ErrorConstructor =\n            error instanceof Error ? error.constructor : Error;\n          const enhancedError = new (ErrorConstructor as typeof Error)(\n            `Failed to fetch: ${url}. Original error: ${error instanceof Error ? error.message : String(error)}`,\n          );\n          // Preserve the original error's properties\n          if (error instanceof Error) {\n            // Some error types (like DOMException) have read-only name property\n            // Use try-catch to handle cases where name cannot be set\n            try {\n              enhancedError.name = error.name;\n            } catch {\n              // If name is read-only, use Object.defineProperty as fallback\n              try {\n                Object.defineProperty(enhancedError, \"name\", {\n                  value: error.name,\n                  writable: true,\n                  enumerable: false,\n                  configurable: true,\n                });\n              } catch {\n                // If that also fails, just skip setting name\n              }\n            }\n            enhancedError.stack = error.stack;\n            // Copy any additional properties from the original error\n            Object.assign(enhancedError, error);\n          }\n          throw enhancedError;\n        });\n      } catch (error) {\n        console.error(\"FetchMixin error (synchronous)\", url, error);\n        throw error;\n      }\n    };\n  }\n\n  return FetchElement as Constructor<FetchMixinInterface> & T;\n}\n"],"mappings":";AAOA,SAAgB,WAA8C,YAAe;CAC3E,MAAM,qBAAqB,WAAW;;;iBAC3B,KAAa,SAA0C;AAC9D,QAAI;KACF,IAAIA;KAGJ,MAAM,YAAY,KAAK,QAAQ,eAAe;AAC9C,SAAI,WAAW,MACb,gBAAe,UAAU,MAAM,KAAK,KAAK;UACpC;MACL,MAAM,UAAU,KAAK,QAAQ,aAAa;AAC1C,UAAI,SAAS,MACX,gBAAe,QAAQ,MAAM,KAAK,KAAK;WAClC;OACL,MAAM,gBAAgB,KAAK,QAAQ,mBAAmB;AACtD,WAAI,eAAe,MACjB,gBAAe,cAAc,MAAM,KAAK,KAAK;WAG7C,gBAAe,OAAO,MAAM,KAAK,KAAK;;;AAO5C,YAAO,aAAa,OAAO,UAAU;MAEnC,MAAM,eACJ,iBAAiB,UACf,MAAM,SAAS,gBACf,MAAM,QAAQ,SAAS,oBAAoB,IAC3C,MAAM,QAAQ,SAAS,6BAA6B;MAMxD,MAAM,iBAAiB,CAAC,KAAK;MAK7B,MAAM,oBAAoB,kBACxB,iBAAiB,aACjB,MAAM,YAAY;AAIpB,UAAI,gBAAgB,qBAAqB,eACvC,OAAM;AAIR,cAAQ,MACN,0BACA,KACA,OACA,OAAO,SAAS,KACjB;MAKD,MAAM,gBAAgB,KADpB,iBAAiB,QAAQ,MAAM,cAAc,OAE7C,oBAAoB,IAAI,oBAAoB,iBAAiB,QAAQ,MAAM,UAAU,OAAO,MAAM,GACnG;AAED,UAAI,iBAAiB,OAAO;AAG1B,WAAI;AACF,sBAAc,OAAO,MAAM;eACrB;AAEN,YAAI;AACF,gBAAO,eAAe,eAAe,QAAQ;UAC3C,OAAO,MAAM;UACb,UAAU;UACV,YAAY;UACZ,cAAc;UACf,CAAC;gBACI;;AAIV,qBAAc,QAAQ,MAAM;AAE5B,cAAO,OAAO,eAAe,MAAM;;AAErC,YAAM;OACN;aACK,OAAO;AACd,aAAQ,MAAM,kCAAkC,KAAK,MAAM;AAC3D,WAAM;;;;;AAKZ,QAAO"}
+{"version":3,"file":"FetchMixin.js","names":["fetchPromise: Promise<Response>"],"sources":["../../src/elements/FetchMixin.ts"],"sourcesContent":["import type { LitElement } from \"lit\";\n\nexport declare class FetchMixinInterface {\n  fetch: typeof fetch;\n}\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\nexport function FetchMixin<T extends Constructor<LitElement>>(superClass: T) {\n  class FetchElement extends superClass {\n    fetch = (url: string, init?: RequestInit): Promise<Response> => {\n      try {\n        let fetchPromise: Promise<Response>;\n\n        // Look for context providers up the DOM tree\n        const workbench = this.closest(\"ef-workbench\") as any;\n        if (workbench?.fetch) {\n          fetchPromise = workbench.fetch(url, init);\n        } else {\n          const preview = this.closest(\"ef-preview\") as any;\n          if (preview?.fetch) {\n            fetchPromise = preview.fetch(url, init);\n          } else {\n            const configuration = this.closest(\"ef-configuration\") as any;\n            if (configuration?.fetch) {\n              fetchPromise = configuration.fetch(url, init);\n            } else {\n              // Fallback to window.fetch\n              fetchPromise = window.fetch(url, init);\n            }\n          }\n        }\n\n        // Wrap the promise to catch rejections and log the URL\n        // Return the promise chain so errors are logged but still propagate\n        return fetchPromise.catch((error) => {\n          // Don't log AbortError - these are intentional request cancellations\n          const isAbortError =\n            error instanceof Error &&\n            (error.name === \"AbortError\" ||\n              error.message.includes(\"signal is aborted\") ||\n              error.message.includes(\"The user aborted a request\"));\n\n          // Don't log errors if element is disconnected from DOM\n          // This happens during scenario transitions when elements are removed mid-fetch\n          // The browser throws TypeError: \"Failed to fetch\" when the page navigates\n          const isDisconnected = !this.isConnected;\n\n          // Also suppress \"Failed to fetch\" TypeError when disconnected\n          // These occur when the browser aborts a request due to page navigation,\n          // but doesn't throw a proper AbortError\n          const isNavigationAbort =\n            isDisconnected &&\n            error instanceof TypeError &&\n            error.message === \"Failed to fetch\";\n\n          // For AbortErrors, navigation aborts, and disconnected elements,\n          // re-throw the original error without enhancement to preserve error type\n          if (isAbortError || isNavigationAbort || isDisconnected) {\n            throw error;\n          }\n\n          // Log unexpected errors\n          console.error(\n            \"FetchMixin fetch error\",\n            url,\n            error,\n            window.location.href,\n          );\n\n          // Create a new error with the URL in the message, preserving the original error type\n          const ErrorConstructor =\n            error instanceof Error ? error.constructor : Error;\n          const enhancedError = new (ErrorConstructor as typeof Error)(\n            `Failed to fetch: ${url}. Original error: ${error instanceof Error ? error.message : String(error)}`,\n          );\n          // Preserve the original error's properties\n          if (error instanceof Error) {\n            // Some error types (like DOMException) have read-only name property\n            // Use try-catch to handle cases where name cannot be set\n            try {\n              enhancedError.name = error.name;\n            } catch {\n              // If name is read-only, use Object.defineProperty as fallback\n              try {\n                Object.defineProperty(enhancedError, \"name\", {\n                  value: error.name,\n                  writable: true,\n                  enumerable: false,\n                  configurable: true,\n                });\n              } catch {\n                // If that also fails, just skip setting name\n              }\n            }\n            enhancedError.stack = error.stack;\n            // Copy any additional properties from the original error\n            Object.assign(enhancedError, error);\n          }\n          throw enhancedError;\n        });\n      } catch (error) {\n        console.error(\"FetchMixin error (synchronous)\", url, error);\n        throw error;\n      }\n    };\n  }\n\n  return FetchElement as Constructor<FetchMixinInterface> & T;\n}\n"],"mappings":";AAOA,SAAgB,WAA8C,YAAe;CAC3E,MAAM,qBAAqB,WAAW;;;iBAC3B,KAAa,SAA0C;AAC9D,QAAI;KACF,IAAIA;KAGJ,MAAM,YAAY,KAAK,QAAQ,eAAe;AAC9C,SAAI,WAAW,MACb,gBAAe,UAAU,MAAM,KAAK,KAAK;UACpC;MACL,MAAM,UAAU,KAAK,QAAQ,aAAa;AAC1C,UAAI,SAAS,MACX,gBAAe,QAAQ,MAAM,KAAK,KAAK;WAClC;OACL,MAAM,gBAAgB,KAAK,QAAQ,mBAAmB;AACtD,WAAI,eAAe,MACjB,gBAAe,cAAc,MAAM,KAAK,KAAK;WAG7C,gBAAe,OAAO,MAAM,KAAK,KAAK;;;AAO5C,YAAO,aAAa,OAAO,UAAU;MAEnC,MAAM,eACJ,iBAAiB,UAChB,MAAM,SAAS,gBACd,MAAM,QAAQ,SAAS,oBAAoB,IAC3C,MAAM,QAAQ,SAAS,6BAA6B;MAKxD,MAAM,iBAAiB,CAAC,KAAK;MAK7B,MAAM,oBACJ,kBACA,iBAAiB,aACjB,MAAM,YAAY;AAIpB,UAAI,gBAAgB,qBAAqB,eACvC,OAAM;AAIR,cAAQ,MACN,0BACA,KACA,OACA,OAAO,SAAS,KACjB;MAKD,MAAM,gBAAgB,KADpB,iBAAiB,QAAQ,MAAM,cAAc,OAE7C,oBAAoB,IAAI,oBAAoB,iBAAiB,QAAQ,MAAM,UAAU,OAAO,MAAM,GACnG;AAED,UAAI,iBAAiB,OAAO;AAG1B,WAAI;AACF,sBAAc,OAAO,MAAM;eACrB;AAEN,YAAI;AACF,gBAAO,eAAe,eAAe,QAAQ;UAC3C,OAAO,MAAM;UACb,UAAU;UACV,YAAY;UACZ,cAAc;UACf,CAAC;gBACI;;AAIV,qBAAc,QAAQ,MAAM;AAE5B,cAAO,OAAO,eAAe,MAAM;;AAErC,YAAM;OACN;aACK,OAAO;AACd,aAAQ,MAAM,kCAAkC,KAAK,MAAM;AAC3D,WAAM;;;;;AAKZ,QAAO"}

package/dist/elements/TargetController.d.ts

@@ -4,7 +4,6 @@ import { LitElement, ReactiveController } from "lit";
 
 declare class TargetController implements ReactiveController {
   private host;
-  private targetController;
   private currentTargetString;
   constructor(host: LitElement & {
     targetElement: Element | null;
@@ -12,8 +11,6 @@ declare class TargetController implements ReactiveController {
   });
   private registryCallback;
   private updateTarget;
-  private connectToTarget;
-  private disconnectFromTarget;
   private get registry();
   hostDisconnected(): void;
   hostConnected(): void;

package/dist/elements/TargetController.js

@@ -1,5 +1,3 @@
-import { LitElement } from "lit";
-
 //#region src/elements/TargetController.ts
 const EF_TARGETABLE = Symbol("EF_TARGETABLE");
 var TargetRegistry = class {
@@ -73,23 +71,8 @@ const EFTargetable = (superClass) => {
 	Object.defineProperty(TargetableElement.prototype, EF_TARGETABLE, { value: true });
 	return TargetableElement;
 };
-var TargetUpdateController = class {
-	constructor(host) {
-		this.host = host;
-	}
-	hostConnected() {
-		this.host.requestUpdate();
-	}
-	hostDisconnected() {
-		this.host.requestUpdate();
-	}
-	hostUpdate() {
-		this.host.requestUpdate();
-	}
-};
 var TargetController = class {
 	constructor(host) {
-		this.targetController = null;
 		this.currentTargetString = null;
 		this.registryCallback = (target) => {
 			this.host.targetElement = target ?? null;
@@ -100,34 +83,28 @@ var TargetController = class {
 		if (this.currentTargetString) this.registry.subscribe(this.currentTargetString, this.registryCallback);
 	}
 	updateTarget() {
-		if (!this.host.target) return;
+		if (!this.host.target) {
+			if (this.host.targetElement !== null) {
+				this.host.targetElement = null;
+				this.host.requestUpdate("targetElement");
+			}
+			return;
+		}
 		let newTarget = this.registry.get(this.host.target);
+		if (!newTarget) {
+			const container = this.host.closest("ef-timegroup, ef-configuration") || this.host.getRootNode();
+			if (container && "querySelector" in container) newTarget = container.querySelector(`#${CSS.escape(this.host.target)}`);
+		}
 		if (!newTarget) newTarget = document.getElementById(this.host.target);
 		if (this.host.targetElement !== newTarget) {
-			this.disconnectFromTarget();
 			this.host.targetElement = newTarget ?? null;
-			this.connectToTarget();
 			this.host.requestUpdate("targetElement");
 		}
 	}
-	connectToTarget() {
-		if (this.host.targetElement instanceof LitElement) {
-			this.targetController = new TargetUpdateController(this.host);
-			this.host.targetElement.addController(this.targetController);
-		}
-	}
-	disconnectFromTarget() {
-		if (this.host.targetElement instanceof LitElement && this.targetController) {
-			this.host.targetElement.removeController(this.targetController);
-			this.targetController = null;
-		}
-	}
 	get registry() {
 		return getRegistry(this.host.getRootNode());
 	}
-	hostDisconnected() {
-		this.disconnectFromTarget();
-	}
+	hostDisconnected() {}
 	hostConnected() {
 		this.updateTarget();
 	}

package/dist/elements/TargetController.js.map

@@ -1 +1 @@
-{"version":3,"file":"TargetController.js","names":["#registry","host: LitElement"],"sources":["../../src/elements/TargetController.ts"],"sourcesContent":["import { LitElement, type ReactiveController } from \"lit\";\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\n// Symbol to identify elements that can be targeted\nconst EF_TARGETABLE = Symbol(\"EF_TARGETABLE\");\n\nclass TargetRegistry {\n  private idMap = new Map<string, LitElement>();\n  private callbacks = new Map<\n    string,\n    Set<(target: LitElement | undefined) => void>\n  >();\n\n  subscribe(id: string, callback: (target: LitElement | undefined) => void) {\n    this.callbacks.set(id, this.callbacks.get(id) ?? new Set());\n    this.callbacks.get(id)?.add(callback);\n  }\n\n  unsubscribe(\n    id: string | null,\n    callback: (target: LitElement | undefined) => void,\n  ) {\n    if (id === null) {\n      return;\n    }\n    this.callbacks.get(id)?.delete(callback);\n    if (this.callbacks.get(id)?.size === 0) {\n      this.callbacks.delete(id);\n    }\n  }\n\n  get(id: string) {\n    return this.idMap.get(id);\n  }\n\n  register(id: string, target: LitElement) {\n    this.idMap.set(id, target);\n    for (const callback of this.callbacks.get(id) ?? []) {\n      callback(target);\n    }\n  }\n\n  unregister(id: string, target: LitElement) {\n    if (this.idMap.get(id) !== target) {\n      // Avoid unregistering a target that is not the current target\n      return;\n    }\n    for (const callback of this.callbacks.get(id) ?? []) {\n      callback(undefined);\n    }\n    this.idMap.delete(id);\n    this.callbacks.delete(id);\n  }\n}\n\n// Map of root nodes to their target registries\nconst documentRegistries = new WeakMap<Node, TargetRegistry>();\n\nconst getRegistry = (root: Node) => {\n  let registry = documentRegistries.get(root);\n  if (!registry) {\n    registry = new TargetRegistry();\n    documentRegistries.set(root, registry);\n  }\n  return registry;\n};\n\nexport declare class TargetableMixinInterface {\n  id: string;\n}\n\nexport const isEFTargetable = (obj: any): obj is TargetableMixinInterface =>\n  obj[EF_TARGETABLE];\n\nexport const EFTargetable = <T extends Constructor<LitElement>>(\n  superClass: T,\n) => {\n  class TargetableElement extends superClass {\n    #registry: TargetRegistry | null = null;\n\n    static get observedAttributes(): string[] {\n      // Get parent's observed attributes\n      const parentAttributes = (superClass as any).observedAttributes || [];\n      // Add 'id' if not already present\n      return [...new Set([...parentAttributes, \"id\"])];\n    }\n\n    private updateRegistry(oldValue: string, newValue: string) {\n      if (!this.#registry) return;\n      if (oldValue === newValue) return;\n\n      if (oldValue) {\n        this.#registry.unregister(oldValue, this);\n      }\n      if (newValue) {\n        this.#registry.register(newValue, this);\n      }\n    }\n\n    connectedCallback() {\n      super.connectedCallback();\n      this.#registry = getRegistry(this.getRootNode());\n      const initialId = this.getAttribute(\"id\");\n      if (initialId) {\n        this.updateRegistry(\"\", initialId);\n      }\n    }\n\n    attributeChangedCallback(\n      name: string,\n      old: string | null,\n      value: string | null,\n    ) {\n      super.attributeChangedCallback(name, old, value);\n      if (name === \"id\") {\n        this.updateRegistry(old ?? \"\", value ?? \"\");\n      }\n    }\n\n    disconnectedCallback() {\n      if (this.#registry) {\n        this.updateRegistry(this.id, \"\");\n        this.#registry = null;\n      }\n      super.disconnectedCallback();\n    }\n  }\n\n  Object.defineProperty(TargetableElement.prototype, EF_TARGETABLE, {\n    value: true,\n  });\n\n  return TargetableElement as T;\n};\n\nclass TargetUpdateController implements ReactiveController {\n  constructor(private host: LitElement) {}\n\n  hostConnected() {\n    this.host.requestUpdate();\n  }\n\n  hostDisconnected() {\n    this.host.requestUpdate();\n  }\n\n  hostUpdate() {\n    this.host.requestUpdate();\n  }\n}\n\nexport class TargetController implements ReactiveController {\n  private host: LitElement & { targetElement: Element | null; target: string };\n  private targetController: ReactiveController | null = null;\n  private currentTargetString: string | null = null;\n\n  constructor(\n    host: LitElement & { targetElement: Element | null; target: string },\n  ) {\n    this.host = host;\n    this.host.addController(this);\n    this.currentTargetString = this.host.target;\n    if (this.currentTargetString) {\n      this.registry.subscribe(this.currentTargetString, this.registryCallback);\n    }\n  }\n\n  private registryCallback = (target: LitElement | undefined) => {\n    this.host.targetElement = target ?? null;\n  };\n\n  private updateTarget() {\n    // Only look up by ID if target string is non-empty\n    // This preserves direct object bindings via .targetElement=${obj}\n    if (!this.host.target) {\n      return;\n    }\n\n    // First try the local registry (same root node)\n    let newTarget = this.registry.get(this.host.target);\n\n    // Fall back to document.getElementById for cross-shadow-root targeting\n    if (!newTarget) {\n      newTarget = document.getElementById(this.host.target) as LitElement | undefined;\n    }\n\n    if (this.host.targetElement !== newTarget) {\n      this.disconnectFromTarget();\n      this.host.targetElement = newTarget ?? (null as Element | null);\n      this.connectToTarget();\n      this.host.requestUpdate(\"targetElement\");\n    }\n  }\n\n  private connectToTarget() {\n    if (this.host.targetElement instanceof LitElement) {\n      this.targetController = new TargetUpdateController(this.host);\n      this.host.targetElement.addController(this.targetController);\n    }\n  }\n\n  private disconnectFromTarget() {\n    if (\n      this.host.targetElement instanceof LitElement &&\n      this.targetController\n    ) {\n      this.host.targetElement.removeController(this.targetController);\n      this.targetController = null;\n    }\n  }\n\n  private get registry() {\n    const root = this.host.getRootNode();\n    return getRegistry(root);\n  }\n\n  hostDisconnected() {\n    this.disconnectFromTarget();\n  }\n\n  hostConnected() {\n    this.updateTarget();\n  }\n\n  hostUpdate() {\n    if (this.currentTargetString !== this.host.target) {\n      this.registry.unsubscribe(\n        this.currentTargetString,\n        this.registryCallback,\n      );\n      this.registry.subscribe(this.host.target, this.registryCallback);\n      this.updateTarget();\n      this.currentTargetString = this.host.target;\n    }\n  }\n}\n"],"mappings":";;;AAKA,MAAM,gBAAgB,OAAO,gBAAgB;AAE7C,IAAM,iBAAN,MAAqB;;+BACH,IAAI,KAAyB;mCACzB,IAAI,KAGrB;;CAEH,UAAU,IAAY,UAAoD;AACxE,OAAK,UAAU,IAAI,IAAI,KAAK,UAAU,IAAI,GAAG,oBAAI,IAAI,KAAK,CAAC;AAC3D,OAAK,UAAU,IAAI,GAAG,EAAE,IAAI,SAAS;;CAGvC,YACE,IACA,UACA;AACA,MAAI,OAAO,KACT;AAEF,OAAK,UAAU,IAAI,GAAG,EAAE,OAAO,SAAS;AACxC,MAAI,KAAK,UAAU,IAAI,GAAG,EAAE,SAAS,EACnC,MAAK,UAAU,OAAO,GAAG;;CAI7B,IAAI,IAAY;AACd,SAAO,KAAK,MAAM,IAAI,GAAG;;CAG3B,SAAS,IAAY,QAAoB;AACvC,OAAK,MAAM,IAAI,IAAI,OAAO;AAC1B,OAAK,MAAM,YAAY,KAAK,UAAU,IAAI,GAAG,IAAI,EAAE,CACjD,UAAS,OAAO;;CAIpB,WAAW,IAAY,QAAoB;AACzC,MAAI,KAAK,MAAM,IAAI,GAAG,KAAK,OAEzB;AAEF,OAAK,MAAM,YAAY,KAAK,UAAU,IAAI,GAAG,IAAI,EAAE,CACjD,UAAS,OAAU;AAErB,OAAK,MAAM,OAAO,GAAG;AACrB,OAAK,UAAU,OAAO,GAAG;;;AAK7B,MAAM,qCAAqB,IAAI,SAA+B;AAE9D,MAAM,eAAe,SAAe;CAClC,IAAI,WAAW,mBAAmB,IAAI,KAAK;AAC3C,KAAI,CAAC,UAAU;AACb,aAAW,IAAI,gBAAgB;AAC/B,qBAAmB,IAAI,MAAM,SAAS;;AAExC,QAAO;;AAUT,MAAa,gBACX,eACG;CACH,MAAM,0BAA0B,WAAW;EACzC,YAAmC;EAEnC,WAAW,qBAA+B;GAExC,MAAM,mBAAoB,WAAmB,sBAAsB,EAAE;AAErE,UAAO,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,kBAAkB,KAAK,CAAC,CAAC;;EAGlD,AAAQ,eAAe,UAAkB,UAAkB;AACzD,OAAI,CAAC,MAAKA,SAAW;AACrB,OAAI,aAAa,SAAU;AAE3B,OAAI,SACF,OAAKA,SAAU,WAAW,UAAU,KAAK;AAE3C,OAAI,SACF,OAAKA,SAAU,SAAS,UAAU,KAAK;;EAI3C,oBAAoB;AAClB,SAAM,mBAAmB;AACzB,SAAKA,WAAY,YAAY,KAAK,aAAa,CAAC;GAChD,MAAM,YAAY,KAAK,aAAa,KAAK;AACzC,OAAI,UACF,MAAK,eAAe,IAAI,UAAU;;EAItC,yBACE,MACA,KACA,OACA;AACA,SAAM,yBAAyB,MAAM,KAAK,MAAM;AAChD,OAAI,SAAS,KACX,MAAK,eAAe,OAAO,IAAI,SAAS,GAAG;;EAI/C,uBAAuB;AACrB,OAAI,MAAKA,UAAW;AAClB,SAAK,eAAe,KAAK,IAAI,GAAG;AAChC,UAAKA,WAAY;;AAEnB,SAAM,sBAAsB;;;AAIhC,QAAO,eAAe,kBAAkB,WAAW,eAAe,EAChE,OAAO,MACR,CAAC;AAEF,QAAO;;AAGT,IAAM,yBAAN,MAA2D;CACzD,YAAY,AAAQC,MAAkB;EAAlB;;CAEpB,gBAAgB;AACd,OAAK,KAAK,eAAe;;CAG3B,mBAAmB;AACjB,OAAK,KAAK,eAAe;;CAG3B,aAAa;AACX,OAAK,KAAK,eAAe;;;AAI7B,IAAa,mBAAb,MAA4D;CAK1D,YACE,MACA;0BALoD;6BACT;2BAajB,WAAmC;AAC7D,QAAK,KAAK,gBAAgB,UAAU;;AATpC,OAAK,OAAO;AACZ,OAAK,KAAK,cAAc,KAAK;AAC7B,OAAK,sBAAsB,KAAK,KAAK;AACrC,MAAI,KAAK,oBACP,MAAK,SAAS,UAAU,KAAK,qBAAqB,KAAK,iBAAiB;;CAQ5E,AAAQ,eAAe;AAGrB,MAAI,CAAC,KAAK,KAAK,OACb;EAIF,IAAI,YAAY,KAAK,SAAS,IAAI,KAAK,KAAK,OAAO;AAGnD,MAAI,CAAC,UACH,aAAY,SAAS,eAAe,KAAK,KAAK,OAAO;AAGvD,MAAI,KAAK,KAAK,kBAAkB,WAAW;AACzC,QAAK,sBAAsB;AAC3B,QAAK,KAAK,gBAAgB,aAAc;AACxC,QAAK,iBAAiB;AACtB,QAAK,KAAK,cAAc,gBAAgB;;;CAI5C,AAAQ,kBAAkB;AACxB,MAAI,KAAK,KAAK,yBAAyB,YAAY;AACjD,QAAK,mBAAmB,IAAI,uBAAuB,KAAK,KAAK;AAC7D,QAAK,KAAK,cAAc,cAAc,KAAK,iBAAiB;;;CAIhE,AAAQ,uBAAuB;AAC7B,MACE,KAAK,KAAK,yBAAyB,cACnC,KAAK,kBACL;AACA,QAAK,KAAK,cAAc,iBAAiB,KAAK,iBAAiB;AAC/D,QAAK,mBAAmB;;;CAI5B,IAAY,WAAW;AAErB,SAAO,YADM,KAAK,KAAK,aAAa,CACZ;;CAG1B,mBAAmB;AACjB,OAAK,sBAAsB;;CAG7B,gBAAgB;AACd,OAAK,cAAc;;CAGrB,aAAa;AACX,MAAI,KAAK,wBAAwB,KAAK,KAAK,QAAQ;AACjD,QAAK,SAAS,YACZ,KAAK,qBACL,KAAK,iBACN;AACD,QAAK,SAAS,UAAU,KAAK,KAAK,QAAQ,KAAK,iBAAiB;AAChE,QAAK,cAAc;AACnB,QAAK,sBAAsB,KAAK,KAAK"}
+{"version":3,"file":"TargetController.js","names":["#registry"],"sources":["../../src/elements/TargetController.ts"],"sourcesContent":["import { LitElement, type ReactiveController } from \"lit\";\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\n// Symbol to identify elements that can be targeted\nconst EF_TARGETABLE = Symbol(\"EF_TARGETABLE\");\n\nclass TargetRegistry {\n  private idMap = new Map<string, LitElement>();\n  private callbacks = new Map<\n    string,\n    Set<(target: LitElement | undefined) => void>\n  >();\n\n  subscribe(id: string, callback: (target: LitElement | undefined) => void) {\n    this.callbacks.set(id, this.callbacks.get(id) ?? new Set());\n    this.callbacks.get(id)?.add(callback);\n  }\n\n  unsubscribe(\n    id: string | null,\n    callback: (target: LitElement | undefined) => void,\n  ) {\n    if (id === null) {\n      return;\n    }\n    this.callbacks.get(id)?.delete(callback);\n    if (this.callbacks.get(id)?.size === 0) {\n      this.callbacks.delete(id);\n    }\n  }\n\n  get(id: string) {\n    return this.idMap.get(id);\n  }\n\n  register(id: string, target: LitElement) {\n    this.idMap.set(id, target);\n    for (const callback of this.callbacks.get(id) ?? []) {\n      callback(target);\n    }\n  }\n\n  unregister(id: string, target: LitElement) {\n    if (this.idMap.get(id) !== target) {\n      // Avoid unregistering a target that is not the current target\n      return;\n    }\n    for (const callback of this.callbacks.get(id) ?? []) {\n      callback(undefined);\n    }\n    this.idMap.delete(id);\n    this.callbacks.delete(id);\n  }\n}\n\n// Map of root nodes to their target registries\nconst documentRegistries = new WeakMap<Node, TargetRegistry>();\n\nconst getRegistry = (root: Node) => {\n  let registry = documentRegistries.get(root);\n  if (!registry) {\n    registry = new TargetRegistry();\n    documentRegistries.set(root, registry);\n  }\n  return registry;\n};\n\nexport declare class TargetableMixinInterface {\n  id: string;\n}\n\nexport const isEFTargetable = (obj: any): obj is TargetableMixinInterface =>\n  obj[EF_TARGETABLE];\n\nexport const EFTargetable = <T extends Constructor<LitElement>>(\n  superClass: T,\n) => {\n  class TargetableElement extends superClass {\n    #registry: TargetRegistry | null = null;\n\n    static get observedAttributes(): string[] {\n      // Get parent's observed attributes\n      const parentAttributes = (superClass as any).observedAttributes || [];\n      // Add 'id' if not already present\n      return [...new Set([...parentAttributes, \"id\"])];\n    }\n\n    private updateRegistry(oldValue: string, newValue: string) {\n      if (!this.#registry) return;\n      if (oldValue === newValue) return;\n\n      if (oldValue) {\n        this.#registry.unregister(oldValue, this);\n      }\n      if (newValue) {\n        this.#registry.register(newValue, this);\n      }\n    }\n\n    connectedCallback() {\n      super.connectedCallback();\n      this.#registry = getRegistry(this.getRootNode());\n      const initialId = this.getAttribute(\"id\");\n      if (initialId) {\n        this.updateRegistry(\"\", initialId);\n      }\n    }\n\n    attributeChangedCallback(\n      name: string,\n      old: string | null,\n      value: string | null,\n    ) {\n      super.attributeChangedCallback(name, old, value);\n      if (name === \"id\") {\n        this.updateRegistry(old ?? \"\", value ?? \"\");\n      }\n    }\n\n    disconnectedCallback() {\n      if (this.#registry) {\n        this.updateRegistry(this.id, \"\");\n        this.#registry = null;\n      }\n      super.disconnectedCallback();\n    }\n  }\n\n  Object.defineProperty(TargetableElement.prototype, EF_TARGETABLE, {\n    value: true,\n  });\n\n  return TargetableElement as T;\n};\n\nexport class TargetController implements ReactiveController {\n  private host: LitElement & { targetElement: Element | null; target: string };\n  private currentTargetString: string | null = null;\n\n  constructor(\n    host: LitElement & { targetElement: Element | null; target: string },\n  ) {\n    this.host = host;\n    this.host.addController(this);\n    this.currentTargetString = this.host.target;\n    if (this.currentTargetString) {\n      this.registry.subscribe(this.currentTargetString, this.registryCallback);\n    }\n  }\n\n  private registryCallback = (target: LitElement | undefined) => {\n    this.host.targetElement = target ?? null;\n  };\n\n  private updateTarget() {\n    if (!this.host.target) {\n      if (this.host.targetElement !== null) {\n        this.host.targetElement = null;\n        this.host.requestUpdate(\"targetElement\");\n      }\n      return;\n    }\n\n    let newTarget = this.registry.get(this.host.target);\n\n    if (!newTarget) {\n      const container =\n        (this.host as Element).closest(\"ef-timegroup, ef-configuration\") ||\n        (this.host as Element).getRootNode();\n\n      if (container && \"querySelector\" in container) {\n        newTarget = (container as Element).querySelector(\n          `#${CSS.escape(this.host.target)}`,\n        ) as LitElement | undefined;\n      }\n    }\n\n    if (!newTarget) {\n      newTarget = document.getElementById(this.host.target) as\n        | LitElement\n        | undefined;\n    }\n\n    if (this.host.targetElement !== newTarget) {\n      this.host.targetElement = newTarget ?? (null as Element | null);\n      this.host.requestUpdate(\"targetElement\");\n    }\n  }\n\n  private get registry() {\n    const root = this.host.getRootNode();\n    return getRegistry(root);\n  }\n\n  hostDisconnected() {}\n\n  hostConnected() {\n    this.updateTarget();\n  }\n\n  hostUpdate() {\n    if (this.currentTargetString !== this.host.target) {\n      this.registry.unsubscribe(\n        this.currentTargetString,\n        this.registryCallback,\n      );\n      this.registry.subscribe(this.host.target, this.registryCallback);\n      this.updateTarget();\n      this.currentTargetString = this.host.target;\n    }\n  }\n}\n"],"mappings":";AAKA,MAAM,gBAAgB,OAAO,gBAAgB;AAE7C,IAAM,iBAAN,MAAqB;;+BACH,IAAI,KAAyB;mCACzB,IAAI,KAGrB;;CAEH,UAAU,IAAY,UAAoD;AACxE,OAAK,UAAU,IAAI,IAAI,KAAK,UAAU,IAAI,GAAG,oBAAI,IAAI,KAAK,CAAC;AAC3D,OAAK,UAAU,IAAI,GAAG,EAAE,IAAI,SAAS;;CAGvC,YACE,IACA,UACA;AACA,MAAI,OAAO,KACT;AAEF,OAAK,UAAU,IAAI,GAAG,EAAE,OAAO,SAAS;AACxC,MAAI,KAAK,UAAU,IAAI,GAAG,EAAE,SAAS,EACnC,MAAK,UAAU,OAAO,GAAG;;CAI7B,IAAI,IAAY;AACd,SAAO,KAAK,MAAM,IAAI,GAAG;;CAG3B,SAAS,IAAY,QAAoB;AACvC,OAAK,MAAM,IAAI,IAAI,OAAO;AAC1B,OAAK,MAAM,YAAY,KAAK,UAAU,IAAI,GAAG,IAAI,EAAE,CACjD,UAAS,OAAO;;CAIpB,WAAW,IAAY,QAAoB;AACzC,MAAI,KAAK,MAAM,IAAI,GAAG,KAAK,OAEzB;AAEF,OAAK,MAAM,YAAY,KAAK,UAAU,IAAI,GAAG,IAAI,EAAE,CACjD,UAAS,OAAU;AAErB,OAAK,MAAM,OAAO,GAAG;AACrB,OAAK,UAAU,OAAO,GAAG;;;AAK7B,MAAM,qCAAqB,IAAI,SAA+B;AAE9D,MAAM,eAAe,SAAe;CAClC,IAAI,WAAW,mBAAmB,IAAI,KAAK;AAC3C,KAAI,CAAC,UAAU;AACb,aAAW,IAAI,gBAAgB;AAC/B,qBAAmB,IAAI,MAAM,SAAS;;AAExC,QAAO;;AAUT,MAAa,gBACX,eACG;CACH,MAAM,0BAA0B,WAAW;EACzC,YAAmC;EAEnC,WAAW,qBAA+B;GAExC,MAAM,mBAAoB,WAAmB,sBAAsB,EAAE;AAErE,UAAO,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,kBAAkB,KAAK,CAAC,CAAC;;EAGlD,AAAQ,eAAe,UAAkB,UAAkB;AACzD,OAAI,CAAC,MAAKA,SAAW;AACrB,OAAI,aAAa,SAAU;AAE3B,OAAI,SACF,OAAKA,SAAU,WAAW,UAAU,KAAK;AAE3C,OAAI,SACF,OAAKA,SAAU,SAAS,UAAU,KAAK;;EAI3C,oBAAoB;AAClB,SAAM,mBAAmB;AACzB,SAAKA,WAAY,YAAY,KAAK,aAAa,CAAC;GAChD,MAAM,YAAY,KAAK,aAAa,KAAK;AACzC,OAAI,UACF,MAAK,eAAe,IAAI,UAAU;;EAItC,yBACE,MACA,KACA,OACA;AACA,SAAM,yBAAyB,MAAM,KAAK,MAAM;AAChD,OAAI,SAAS,KACX,MAAK,eAAe,OAAO,IAAI,SAAS,GAAG;;EAI/C,uBAAuB;AACrB,OAAI,MAAKA,UAAW;AAClB,SAAK,eAAe,KAAK,IAAI,GAAG;AAChC,UAAKA,WAAY;;AAEnB,SAAM,sBAAsB;;;AAIhC,QAAO,eAAe,kBAAkB,WAAW,eAAe,EAChE,OAAO,MACR,CAAC;AAEF,QAAO;;AAGT,IAAa,mBAAb,MAA4D;CAI1D,YACE,MACA;6BAJ2C;2BAajB,WAAmC;AAC7D,QAAK,KAAK,gBAAgB,UAAU;;AATpC,OAAK,OAAO;AACZ,OAAK,KAAK,cAAc,KAAK;AAC7B,OAAK,sBAAsB,KAAK,KAAK;AACrC,MAAI,KAAK,oBACP,MAAK,SAAS,UAAU,KAAK,qBAAqB,KAAK,iBAAiB;;CAQ5E,AAAQ,eAAe;AACrB,MAAI,CAAC,KAAK,KAAK,QAAQ;AACrB,OAAI,KAAK,KAAK,kBAAkB,MAAM;AACpC,SAAK,KAAK,gBAAgB;AAC1B,SAAK,KAAK,cAAc,gBAAgB;;AAE1C;;EAGF,IAAI,YAAY,KAAK,SAAS,IAAI,KAAK,KAAK,OAAO;AAEnD,MAAI,CAAC,WAAW;GACd,MAAM,YACH,KAAK,KAAiB,QAAQ,iCAAiC,IAC/D,KAAK,KAAiB,aAAa;AAEtC,OAAI,aAAa,mBAAmB,UAClC,aAAa,UAAsB,cACjC,IAAI,IAAI,OAAO,KAAK,KAAK,OAAO,GACjC;;AAIL,MAAI,CAAC,UACH,aAAY,SAAS,eAAe,KAAK,KAAK,OAAO;AAKvD,MAAI,KAAK,KAAK,kBAAkB,WAAW;AACzC,QAAK,KAAK,gBAAgB,aAAc;AACxC,QAAK,KAAK,cAAc,gBAAgB;;;CAI5C,IAAY,WAAW;AAErB,SAAO,YADM,KAAK,KAAK,aAAa,CACZ;;CAG1B,mBAAmB;CAEnB,gBAAgB;AACd,OAAK,cAAc;;CAGrB,aAAa;AACX,MAAI,KAAK,wBAAwB,KAAK,KAAK,QAAQ;AACjD,QAAK,SAAS,YACZ,KAAK,qBACL,KAAK,iBACN;AACD,QAAK,SAAS,UAAU,KAAK,KAAK,QAAQ,KAAK,iBAAiB;AAChE,QAAK,cAAc;AACnB,QAAK,sBAAsB,KAAK,KAAK"}

package/dist/elements/TimegroupController.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimegroupController.js","names":["host: EFTimegroup","child: { currentTimeMs: number; startTimeMs?: number } & LitElement"],"sources":["../../src/elements/TimegroupController.ts"],"sourcesContent":["import type { LitElement, ReactiveController } from \"lit\";\nimport type { EFTimegroup } from \"./EFTimegroup.js\";\n\nexport class TimegroupController implements ReactiveController {\n  constructor(\n    private host: EFTimegroup,\n    private child: { currentTimeMs: number; startTimeMs?: number } & LitElement,\n  ) {\n    this.host.addController(this);\n  }\n\n  remove() {\n    this.host.removeController(this);\n  }\n\n  hostDisconnected(): void {\n    this.host.removeController(this);\n  }\n\n  hostUpdated(): void {\n    // Defer update to avoid Lit warning about scheduling updates after update completed\n    // This batches updates and prevents cascading update cycles\n    Promise.resolve().then(() => {\n      // Skip setting currentTimeMs for timegroup children - they compute ownCurrentTimeMs\n      // from the root timegroup via EFTemporal. Setting it directly causes an infinite loop\n      // because the @property decorator on currentTime triggers reactive updates.\n      if ('mode' in this.child && 'isRootTimegroup' in this.child) {\n        // Child is a timegroup - just request update, don't set currentTimeMs\n        this.child.requestUpdate();\n        return;\n      }\n\n      this.child.requestUpdate();\n      const newChildTimeMs =\n        this.host.currentTimeMs - (this.child.startTimeMs ?? 0);\n      this.child.currentTimeMs = newChildTimeMs;\n    });\n  }\n}\n"],"mappings":";AAGA,IAAa,sBAAb,MAA+D;CAC7D,YACE,AAAQA,MACR,AAAQC,OACR;EAFQ;EACA;AAER,OAAK,KAAK,cAAc,KAAK;;CAG/B,SAAS;AACP,OAAK,KAAK,iBAAiB,KAAK;;CAGlC,mBAAyB;AACvB,OAAK,KAAK,iBAAiB,KAAK;;CAGlC,cAAoB;AAGlB,UAAQ,SAAS,CAAC,WAAW;AAI3B,OAAI,UAAU,KAAK,SAAS,qBAAqB,KAAK,OAAO;AAE3D,SAAK,MAAM,eAAe;AAC1B;;AAGF,QAAK,MAAM,eAAe;GAC1B,MAAM,iBACJ,KAAK,KAAK,iBAAiB,KAAK,MAAM,eAAe;AACvD,QAAK,MAAM,gBAAgB;IAC3B"}
+{"version":3,"file":"TimegroupController.js","names":["host: EFTimegroup","child: { currentTimeMs: number; startTimeMs?: number } & LitElement"],"sources":["../../src/elements/TimegroupController.ts"],"sourcesContent":["import type { LitElement, ReactiveController } from \"lit\";\nimport type { EFTimegroup } from \"./EFTimegroup.js\";\n\nexport class TimegroupController implements ReactiveController {\n  constructor(\n    private host: EFTimegroup,\n    private child: { currentTimeMs: number; startTimeMs?: number } & LitElement,\n  ) {\n    this.host.addController(this);\n  }\n\n  remove() {\n    this.host.removeController(this);\n  }\n\n  hostDisconnected(): void {\n    this.host.removeController(this);\n  }\n\n  hostUpdated(): void {\n    // Defer update to avoid Lit warning about scheduling updates after update completed\n    // This batches updates and prevents cascading update cycles\n    Promise.resolve().then(() => {\n      // Skip setting currentTimeMs for timegroup children - they compute ownCurrentTimeMs\n      // from the root timegroup via EFTemporal. Setting it directly causes an infinite loop\n      // because the @property decorator on currentTime triggers reactive updates.\n      if (\"mode\" in this.child && \"isRootTimegroup\" in this.child) {\n        // Child is a timegroup - just request update, don't set currentTimeMs\n        this.child.requestUpdate();\n        return;\n      }\n\n      this.child.requestUpdate();\n      const newChildTimeMs =\n        this.host.currentTimeMs - (this.child.startTimeMs ?? 0);\n      this.child.currentTimeMs = newChildTimeMs;\n    });\n  }\n}\n"],"mappings":";AAGA,IAAa,sBAAb,MAA+D;CAC7D,YACE,AAAQA,MACR,AAAQC,OACR;EAFQ;EACA;AAER,OAAK,KAAK,cAAc,KAAK;;CAG/B,SAAS;AACP,OAAK,KAAK,iBAAiB,KAAK;;CAGlC,mBAAyB;AACvB,OAAK,KAAK,iBAAiB,KAAK;;CAGlC,cAAoB;AAGlB,UAAQ,SAAS,CAAC,WAAW;AAI3B,OAAI,UAAU,KAAK,SAAS,qBAAqB,KAAK,OAAO;AAE3D,SAAK,MAAM,eAAe;AAC1B;;AAGF,QAAK,MAAM,eAAe;GAC1B,MAAM,iBACJ,KAAK,KAAK,iBAAiB,KAAK,MAAM,eAAe;AACvD,QAAK,MAAM,gBAAgB;IAC3B"}

package/dist/elements/cloneFactoryRegistry.d.ts

@@ -0,0 +1,14 @@
+import { EFTimegroup } from "./EFTimegroup.js";
+
+//#region src/elements/cloneFactoryRegistry.d.ts
+type CloneFactoryResult = {
+  timegroup: EFTimegroup;
+  cleanup: () => void;
+};
+type CloneFactory = (container: HTMLElement) => CloneFactoryResult;
+declare function registerCloneFactory(element: EFTimegroup, factory: CloneFactory): void;
+declare function unregisterCloneFactory(element: EFTimegroup): void;
+declare function getCloneFactory(element: EFTimegroup): CloneFactory | undefined;
+//#endregion
+export { CloneFactory, CloneFactoryResult, getCloneFactory, registerCloneFactory, unregisterCloneFactory };
+//# sourceMappingURL=cloneFactoryRegistry.d.ts.map

package/dist/elements/cloneFactoryRegistry.js

@@ -0,0 +1,15 @@
+//#region src/elements/cloneFactoryRegistry.ts
+const registry = /* @__PURE__ */ new WeakMap();
+function registerCloneFactory(element, factory) {
+	registry.set(element, factory);
+}
+function unregisterCloneFactory(element) {
+	registry.delete(element);
+}
+function getCloneFactory(element) {
+	return registry.get(element);
+}
+
+//#endregion
+export { getCloneFactory, registerCloneFactory, unregisterCloneFactory };
+//# sourceMappingURL=cloneFactoryRegistry.js.map

package/dist/elements/cloneFactoryRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cloneFactoryRegistry.js","names":[],"sources":["../../src/elements/cloneFactoryRegistry.ts"],"sourcesContent":["import type { EFTimegroup } from \"./EFTimegroup.js\";\n\nexport type CloneFactoryResult = {\n  timegroup: EFTimegroup;\n  cleanup: () => void;\n};\n\nexport type CloneFactory = (container: HTMLElement) => CloneFactoryResult;\n\nconst registry = new WeakMap<EFTimegroup, CloneFactory>();\n\nexport function registerCloneFactory(\n  element: EFTimegroup,\n  factory: CloneFactory,\n): void {\n  registry.set(element, factory);\n}\n\nexport function unregisterCloneFactory(element: EFTimegroup): void {\n  registry.delete(element);\n}\n\nexport function getCloneFactory(\n  element: EFTimegroup,\n): CloneFactory | undefined {\n  return registry.get(element);\n}\n"],"mappings":";AASA,MAAM,2BAAW,IAAI,SAAoC;AAEzD,SAAgB,qBACd,SACA,SACM;AACN,UAAS,IAAI,SAAS,QAAQ;;AAGhC,SAAgB,uBAAuB,SAA4B;AACjE,UAAS,OAAO,QAAQ;;AAG1B,SAAgB,gBACd,SAC0B;AAC1B,QAAO,SAAS,IAAI,QAAQ"}

package/dist/elements/renderTemporalAudio.js

@@ -1,3 +1,5 @@
+import { logger } from "../preview/logger.js";
+
 //#region src/elements/renderTemporalAudio.ts
 async function renderTemporalAudio(host, fromMs, toMs, signal) {
 	const aacFrames = 48e3 * ((toMs - fromMs) / 1e3) / 1024;
@@ -10,14 +12,14 @@ async function renderTemporalAudio(host, fromMs, toMs, signal) {
 		signal?.throwIfAborted();
 	}
 	const mediaElements = host.getMediaElements();
-	console.log(`[renderTemporalAudio] Found ${mediaElements.length} media elements, time range: ${fromMs}-${toMs}ms`);
+	logger.debug(`[renderTemporalAudio] Found ${mediaElements.length} media elements, time range: ${fromMs}-${toMs}ms`);
 	await Promise.all(mediaElements.map(async (mediaElement) => {
-		console.log(`[renderTemporalAudio] Checking ${mediaElement.tagName} at ${mediaElement.startTimeMs}-${mediaElement.endTimeMs}ms, mute=${mediaElement.mute}`);
+		logger.debug(`[renderTemporalAudio] Checking ${mediaElement.tagName} at ${mediaElement.startTimeMs}-${mediaElement.endTimeMs}ms, mute=${mediaElement.mute}`);
 		if (mediaElement.mute) return;
 		const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
 		const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
 		if (!(mediaStartsBeforeEnd && mediaEndsAfterStart)) {
-			console.log(`[renderTemporalAudio] ${mediaElement.tagName} does not overlap`);
+			logger.debug(`[renderTemporalAudio] ${mediaElement.tagName} does not overlap`);
 			return;
 		}
 		const mediaLocalFromMs = Math.max(0, fromMs - mediaElement.startTimeMs);
@@ -27,13 +29,13 @@ async function renderTemporalAudio(host, fromMs, toMs, signal) {
 		const mediaSourceFromMs = mediaLocalFromMs + sourceInMs;
 		const mediaSourceToMs = mediaLocalToMs + sourceInMs;
 		signal?.throwIfAborted();
-		console.log(`[renderTemporalAudio] Fetching audio for ${mediaElement.tagName} from ${mediaSourceFromMs}-${mediaSourceToMs}ms`);
+		logger.debug(`[renderTemporalAudio] Fetching audio for ${mediaElement.tagName} from ${mediaSourceFromMs}-${mediaSourceToMs}ms`);
 		const audio = await mediaElement.fetchAudioSpanningTime(mediaSourceFromMs, mediaSourceToMs, signal);
 		if (!audio) {
-			console.log(`[renderTemporalAudio] No audio returned for ${mediaElement.tagName}`);
+			logger.debug(`[renderTemporalAudio] No audio returned for ${mediaElement.tagName}`);
 			return;
 		}
-		console.log(`[renderTemporalAudio] Got audio blob size: ${audio.blob.size}, range: ${audio.startMs}-${audio.endMs}ms`);
+		logger.debug(`[renderTemporalAudio] Got audio blob size: ${audio.blob.size}, range: ${audio.startMs}-${audio.endMs}ms`);
 		const bufferSource = audioContext.createBufferSource();
 		let decodedBuffer;
 		try {

package/dist/elements/renderTemporalAudio.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderTemporalAudio.js","names":[],"sources":["../../src/elements/renderTemporalAudio.ts"],"sourcesContent":["import type { EFMedia } from \"./EFMedia.js\";\n\ninterface TemporalAudioHost {\n  startTimeMs: number;\n  endTimeMs: number;\n  durationMs: number;\n  getMediaElements(): EFMedia[];\n  waitForMediaDurations?(): Promise<void>;\n}\n\nexport async function renderTemporalAudio(\n  host: TemporalAudioHost,\n  fromMs: number,\n  toMs: number,\n  signal?: AbortSignal,\n): Promise<AudioBuffer> {\n  const durationMs = toMs - fromMs;\n  const duration = durationMs / 1000;\n  const exactSamples = 48000 * duration;\n  const aacFrames = exactSamples / 1024;\n  const alignedFrames = Math.round(aacFrames);\n  const contextSize = alignedFrames * 1024;\n\n  if (contextSize <= 0) {\n    throw new Error(\n      `Duration must be greater than 0 when rendering audio. ${contextSize}ms`,\n    );\n  }\n\n  // Check abort before starting\n  signal?.throwIfAborted();\n\n  const audioContext = new OfflineAudioContext(2, contextSize, 48000);\n\n  if (host.waitForMediaDurations) {\n    await host.waitForMediaDurations();\n    // Check abort after potentially slow operation\n    signal?.throwIfAborted();\n  }\n\n  const mediaElements = host.getMediaElements();\n  console.log(`[renderTemporalAudio] Found ${mediaElements.length} media elements, time range: ${fromMs}-${toMs}ms`);\n  \n  await Promise.all(\n    mediaElements.map(async (mediaElement) => {\n      console.log(`[renderTemporalAudio] Checking ${mediaElement.tagName} at ${mediaElement.startTimeMs}-${mediaElement.endTimeMs}ms, mute=${mediaElement.mute}`);\n      \n      if (mediaElement.mute) {\n        return;\n      }\n\n      const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;\n      const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;\n      const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;\n      if (!mediaOverlaps) {\n        console.log(`[renderTemporalAudio] ${mediaElement.tagName} does not overlap`);\n        return;\n      }\n\n      const mediaLocalFromMs = Math.max(0, fromMs - mediaElement.startTimeMs);\n      const mediaLocalToMs = Math.min(\n        mediaElement.endTimeMs - mediaElement.startTimeMs,\n        toMs - mediaElement.startTimeMs,\n      );\n\n      if (mediaLocalFromMs >= mediaLocalToMs) {\n        return;\n      }\n\n      const sourceInMs =\n        mediaElement.sourceInMs || mediaElement.trimStartMs || 0;\n      const mediaSourceFromMs = mediaLocalFromMs + sourceInMs;\n      const mediaSourceToMs = mediaLocalToMs + sourceInMs;\n\n      // Check abort before processing each media element\n      signal?.throwIfAborted();\n      \n      console.log(`[renderTemporalAudio] Fetching audio for ${mediaElement.tagName} from ${mediaSourceFromMs}-${mediaSourceToMs}ms`);\n      const audio = await mediaElement.fetchAudioSpanningTime(\n        mediaSourceFromMs,\n        mediaSourceToMs,\n        signal,\n      );\n      if (!audio) {\n        console.log(`[renderTemporalAudio] No audio returned for ${mediaElement.tagName}`);\n        return;\n      }\n      console.log(`[renderTemporalAudio] Got audio blob size: ${audio.blob.size}, range: ${audio.startMs}-${audio.endMs}ms`);\n\n      const bufferSource = audioContext.createBufferSource();\n      \n      // Decode audio data with error handling for invalid/incomplete audio\n      let decodedBuffer;\n      try {\n        const arrayBuffer = await audio.blob.arrayBuffer();\n        // Skip if buffer is too small to be valid audio\n        if (arrayBuffer.byteLength < 100) {\n          return;\n        }\n        decodedBuffer = await audioContext.decodeAudioData(arrayBuffer);\n      } catch (decodeError) {\n        // Unable to decode audio data - skip this segment silently\n        // This can happen with corrupted/incomplete audio segments\n        if (decodeError instanceof Error && \n            decodeError.message.includes(\"Unable to decode audio data\")) {\n          return;\n        }\n        throw decodeError;\n      }\n      \n      bufferSource.buffer = decodedBuffer;\n      bufferSource.connect(audioContext.destination);\n\n      const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);\n\n      const requestedSourceFromMs = mediaSourceFromMs;\n      const actualSourceStartMs = audio.startMs;\n      const offsetInBufferMs = requestedSourceFromMs - actualSourceStartMs;\n\n      const safeOffsetMs = Math.max(0, offsetInBufferMs);\n\n      const requestedDurationMs = mediaSourceToMs - mediaSourceFromMs;\n      const availableAudioMs = audio.endMs - audio.startMs;\n      const actualDurationMs = Math.min(\n        requestedDurationMs,\n        availableAudioMs - safeOffsetMs,\n      );\n\n      if (actualDurationMs <= 0) {\n        return;\n      }\n\n      bufferSource.start(\n        ctxStartMs / 1000,\n        safeOffsetMs / 1000,\n        actualDurationMs / 1000,\n      );\n    }),\n  );\n\n  return audioContext.startRendering();\n}\n"],"mappings":";AAUA,eAAsB,oBACpB,MACA,QACA,MACA,QACsB;CAItB,MAAM,YADe,SAFF,OAAO,UACI,OAEG;CAEjC,MAAM,cADgB,KAAK,MAAM,UAAU,GACP;AAEpC,KAAI,eAAe,EACjB,OAAM,IAAI,MACR,yDAAyD,YAAY,IACtE;AAIH,SAAQ,gBAAgB;CAExB,MAAM,eAAe,IAAI,oBAAoB,GAAG,aAAa,KAAM;AAEnE,KAAI,KAAK,uBAAuB;AAC9B,QAAM,KAAK,uBAAuB;AAElC,UAAQ,gBAAgB;;CAG1B,MAAM,gBAAgB,KAAK,kBAAkB;AAC7C,SAAQ,IAAI,+BAA+B,cAAc,OAAO,+BAA+B,OAAO,GAAG,KAAK,IAAI;AAElH,OAAM,QAAQ,IACZ,cAAc,IAAI,OAAO,iBAAiB;AACxC,UAAQ,IAAI,kCAAkC,aAAa,QAAQ,MAAM,aAAa,YAAY,GAAG,aAAa,UAAU,WAAW,aAAa,OAAO;AAE3J,MAAI,aAAa,KACf;EAGF,MAAM,uBAAuB,aAAa,eAAe;EACzD,MAAM,sBAAsB,aAAa,aAAa;AAEtD,MAAI,EADkB,wBAAwB,sBAC1B;AAClB,WAAQ,IAAI,yBAAyB,aAAa,QAAQ,mBAAmB;AAC7E;;EAGF,MAAM,mBAAmB,KAAK,IAAI,GAAG,SAAS,aAAa,YAAY;EACvE,MAAM,iBAAiB,KAAK,IAC1B,aAAa,YAAY,aAAa,aACtC,OAAO,aAAa,YACrB;AAED,MAAI,oBAAoB,eACtB;EAGF,MAAM,aACJ,aAAa,cAAc,aAAa,eAAe;EACzD,MAAM,oBAAoB,mBAAmB;EAC7C,MAAM,kBAAkB,iBAAiB;AAGzC,UAAQ,gBAAgB;AAExB,UAAQ,IAAI,4CAA4C,aAAa,QAAQ,QAAQ,kBAAkB,GAAG,gBAAgB,IAAI;EAC9H,MAAM,QAAQ,MAAM,aAAa,uBAC/B,mBACA,iBACA,OACD;AACD,MAAI,CAAC,OAAO;AACV,WAAQ,IAAI,+CAA+C,aAAa,UAAU;AAClF;;AAEF,UAAQ,IAAI,8CAA8C,MAAM,KAAK,KAAK,WAAW,MAAM,QAAQ,GAAG,MAAM,MAAM,IAAI;EAEtH,MAAM,eAAe,aAAa,oBAAoB;EAGtD,IAAI;AACJ,MAAI;GACF,MAAM,cAAc,MAAM,MAAM,KAAK,aAAa;AAElD,OAAI,YAAY,aAAa,IAC3B;AAEF,mBAAgB,MAAM,aAAa,gBAAgB,YAAY;WACxD,aAAa;AAGpB,OAAI,uBAAuB,SACvB,YAAY,QAAQ,SAAS,8BAA8B,CAC7D;AAEF,SAAM;;AAGR,eAAa,SAAS;AACtB,eAAa,QAAQ,aAAa,YAAY;EAE9C,MAAM,aAAa,KAAK,IAAI,GAAG,aAAa,cAAc,OAAO;EAIjE,MAAM,mBAFwB,oBACF,MAAM;EAGlC,MAAM,eAAe,KAAK,IAAI,GAAG,iBAAiB;EAElD,MAAM,sBAAsB,kBAAkB;EAC9C,MAAM,mBAAmB,MAAM,QAAQ,MAAM;EAC7C,MAAM,mBAAmB,KAAK,IAC5B,qBACA,mBAAmB,aACpB;AAED,MAAI,oBAAoB,EACtB;AAGF,eAAa,MACX,aAAa,KACb,eAAe,KACf,mBAAmB,IACpB;GACD,CACH;AAED,QAAO,aAAa,gBAAgB"}
+{"version":3,"file":"renderTemporalAudio.js","names":[],"sources":["../../src/elements/renderTemporalAudio.ts"],"sourcesContent":["import type { EFMedia } from \"./EFMedia.js\";\nimport { logger } from \"../preview/logger.js\";\n\ninterface TemporalAudioHost {\n  startTimeMs: number;\n  endTimeMs: number;\n  durationMs: number;\n  getMediaElements(): EFMedia[];\n  waitForMediaDurations?(): Promise<void>;\n}\n\nexport async function renderTemporalAudio(\n  host: TemporalAudioHost,\n  fromMs: number,\n  toMs: number,\n  signal?: AbortSignal,\n): Promise<AudioBuffer> {\n  const durationMs = toMs - fromMs;\n  const duration = durationMs / 1000;\n  const exactSamples = 48000 * duration;\n  const aacFrames = exactSamples / 1024;\n  const alignedFrames = Math.round(aacFrames);\n  const contextSize = alignedFrames * 1024;\n\n  if (contextSize <= 0) {\n    throw new Error(\n      `Duration must be greater than 0 when rendering audio. ${contextSize}ms`,\n    );\n  }\n\n  // Check abort before starting\n  signal?.throwIfAborted();\n\n  const audioContext = new OfflineAudioContext(2, contextSize, 48000);\n\n  if (host.waitForMediaDurations) {\n    await host.waitForMediaDurations();\n    // Check abort after potentially slow operation\n    signal?.throwIfAborted();\n  }\n\n  const mediaElements = host.getMediaElements();\n  logger.debug(\n    `[renderTemporalAudio] Found ${mediaElements.length} media elements, time range: ${fromMs}-${toMs}ms`,\n  );\n\n  await Promise.all(\n    mediaElements.map(async (mediaElement) => {\n      logger.debug(\n        `[renderTemporalAudio] Checking ${mediaElement.tagName} at ${mediaElement.startTimeMs}-${mediaElement.endTimeMs}ms, mute=${mediaElement.mute}`,\n      );\n\n      if (mediaElement.mute) {\n        return;\n      }\n\n      const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;\n      const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;\n      const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;\n      if (!mediaOverlaps) {\n        logger.debug(\n          `[renderTemporalAudio] ${mediaElement.tagName} does not overlap`,\n        );\n        return;\n      }\n\n      const mediaLocalFromMs = Math.max(0, fromMs - mediaElement.startTimeMs);\n      const mediaLocalToMs = Math.min(\n        mediaElement.endTimeMs - mediaElement.startTimeMs,\n        toMs - mediaElement.startTimeMs,\n      );\n\n      if (mediaLocalFromMs >= mediaLocalToMs) {\n        return;\n      }\n\n      const sourceInMs =\n        mediaElement.sourceInMs || mediaElement.trimStartMs || 0;\n      const mediaSourceFromMs = mediaLocalFromMs + sourceInMs;\n      const mediaSourceToMs = mediaLocalToMs + sourceInMs;\n\n      // Check abort before processing each media element\n      signal?.throwIfAborted();\n\n      logger.debug(\n        `[renderTemporalAudio] Fetching audio for ${mediaElement.tagName} from ${mediaSourceFromMs}-${mediaSourceToMs}ms`,\n      );\n      const audio = await mediaElement.fetchAudioSpanningTime(\n        mediaSourceFromMs,\n        mediaSourceToMs,\n        signal,\n      );\n      if (!audio) {\n        logger.debug(\n          `[renderTemporalAudio] No audio returned for ${mediaElement.tagName}`,\n        );\n        return;\n      }\n      logger.debug(\n        `[renderTemporalAudio] Got audio blob size: ${audio.blob.size}, range: ${audio.startMs}-${audio.endMs}ms`,\n      );\n\n      const bufferSource = audioContext.createBufferSource();\n\n      // Decode audio data with error handling for invalid/incomplete audio\n      let decodedBuffer;\n      try {\n        const arrayBuffer = await audio.blob.arrayBuffer();\n        // Skip if buffer is too small to be valid audio\n        if (arrayBuffer.byteLength < 100) {\n          return;\n        }\n        decodedBuffer = await audioContext.decodeAudioData(arrayBuffer);\n      } catch (decodeError) {\n        // Unable to decode audio data - skip this segment silently\n        // This can happen with corrupted/incomplete audio segments\n        if (\n          decodeError instanceof Error &&\n          decodeError.message.includes(\"Unable to decode audio data\")\n        ) {\n          return;\n        }\n        throw decodeError;\n      }\n\n      bufferSource.buffer = decodedBuffer;\n      bufferSource.connect(audioContext.destination);\n\n      const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);\n\n      const requestedSourceFromMs = mediaSourceFromMs;\n      const actualSourceStartMs = audio.startMs;\n      const offsetInBufferMs = requestedSourceFromMs - actualSourceStartMs;\n\n      const safeOffsetMs = Math.max(0, offsetInBufferMs);\n\n      const requestedDurationMs = mediaSourceToMs - mediaSourceFromMs;\n      const availableAudioMs = audio.endMs - audio.startMs;\n      const actualDurationMs = Math.min(\n        requestedDurationMs,\n        availableAudioMs - safeOffsetMs,\n      );\n\n      if (actualDurationMs <= 0) {\n        return;\n      }\n\n      bufferSource.start(\n        ctxStartMs / 1000,\n        safeOffsetMs / 1000,\n        actualDurationMs / 1000,\n      );\n    }),\n  );\n\n  return audioContext.startRendering();\n}\n"],"mappings":";;;AAWA,eAAsB,oBACpB,MACA,QACA,MACA,QACsB;CAItB,MAAM,YADe,SAFF,OAAO,UACI,OAEG;CAEjC,MAAM,cADgB,KAAK,MAAM,UAAU,GACP;AAEpC,KAAI,eAAe,EACjB,OAAM,IAAI,MACR,yDAAyD,YAAY,IACtE;AAIH,SAAQ,gBAAgB;CAExB,MAAM,eAAe,IAAI,oBAAoB,GAAG,aAAa,KAAM;AAEnE,KAAI,KAAK,uBAAuB;AAC9B,QAAM,KAAK,uBAAuB;AAElC,UAAQ,gBAAgB;;CAG1B,MAAM,gBAAgB,KAAK,kBAAkB;AAC7C,QAAO,MACL,+BAA+B,cAAc,OAAO,+BAA+B,OAAO,GAAG,KAAK,IACnG;AAED,OAAM,QAAQ,IACZ,cAAc,IAAI,OAAO,iBAAiB;AACxC,SAAO,MACL,kCAAkC,aAAa,QAAQ,MAAM,aAAa,YAAY,GAAG,aAAa,UAAU,WAAW,aAAa,OACzI;AAED,MAAI,aAAa,KACf;EAGF,MAAM,uBAAuB,aAAa,eAAe;EACzD,MAAM,sBAAsB,aAAa,aAAa;AAEtD,MAAI,EADkB,wBAAwB,sBAC1B;AAClB,UAAO,MACL,yBAAyB,aAAa,QAAQ,mBAC/C;AACD;;EAGF,MAAM,mBAAmB,KAAK,IAAI,GAAG,SAAS,aAAa,YAAY;EACvE,MAAM,iBAAiB,KAAK,IAC1B,aAAa,YAAY,aAAa,aACtC,OAAO,aAAa,YACrB;AAED,MAAI,oBAAoB,eACtB;EAGF,MAAM,aACJ,aAAa,cAAc,aAAa,eAAe;EACzD,MAAM,oBAAoB,mBAAmB;EAC7C,MAAM,kBAAkB,iBAAiB;AAGzC,UAAQ,gBAAgB;AAExB,SAAO,MACL,4CAA4C,aAAa,QAAQ,QAAQ,kBAAkB,GAAG,gBAAgB,IAC/G;EACD,MAAM,QAAQ,MAAM,aAAa,uBAC/B,mBACA,iBACA,OACD;AACD,MAAI,CAAC,OAAO;AACV,UAAO,MACL,+CAA+C,aAAa,UAC7D;AACD;;AAEF,SAAO,MACL,8CAA8C,MAAM,KAAK,KAAK,WAAW,MAAM,QAAQ,GAAG,MAAM,MAAM,IACvG;EAED,MAAM,eAAe,aAAa,oBAAoB;EAGtD,IAAI;AACJ,MAAI;GACF,MAAM,cAAc,MAAM,MAAM,KAAK,aAAa;AAElD,OAAI,YAAY,aAAa,IAC3B;AAEF,mBAAgB,MAAM,aAAa,gBAAgB,YAAY;WACxD,aAAa;AAGpB,OACE,uBAAuB,SACvB,YAAY,QAAQ,SAAS,8BAA8B,CAE3D;AAEF,SAAM;;AAGR,eAAa,SAAS;AACtB,eAAa,QAAQ,aAAa,YAAY;EAE9C,MAAM,aAAa,KAAK,IAAI,GAAG,aAAa,cAAc,OAAO;EAIjE,MAAM,mBAFwB,oBACF,MAAM;EAGlC,MAAM,eAAe,KAAK,IAAI,GAAG,iBAAiB;EAElD,MAAM,sBAAsB,kBAAkB;EAC9C,MAAM,mBAAmB,MAAM,QAAQ,MAAM;EAC7C,MAAM,mBAAmB,KAAK,IAC5B,qBACA,mBAAmB,aACpB;AAED,MAAI,oBAAoB,EACtB;AAGF,eAAa,MACX,aAAa,KACb,eAAe,KACf,mBAAmB,IACpB;GACD,CACH;AAED,QAAO,aAAa,gBAAgB"}

package/dist/elements/setupTemporalHierarchy.js

@@ -0,0 +1,62 @@
+//#region src/elements/setupTemporalHierarchy.ts
+/**
+* Manually wire up the temporal element hierarchy (parent/root timegroup references).
+*
+* ## Why this is needed
+*
+* Lit Context (`@provide`/`@consume`) relies on `context-request` DOM events. When a consumer
+* connects, it dispatches a `context-request` event that bubbles up to find a provider.
+*
+* **The problem:** When HTML is loaded via `loadURL()` (our rendering path), custom elements
+* connect in depth-first order - children BEFORE parents. This means:
+* 1. `ef-video` connects → dispatches `context-request` event
+* 2. `ef-timegroup` hasn't connected yet → no provider listening → event is lost
+* 3. `ef-timegroup` connects → creates provider → but too late
+*
+* DOM events are point-in-time; once missed, they're gone. There's no retroactive discovery.
+*
+* Without proper parent/root timegroup references:
+* - Child temporal elements can't compute their `ownCurrentTimeMs` (stays at 0)
+* - Video/audio elements can't seek to correct timestamps
+* - Nested timegroups can't calculate their start times correctly
+*
+* ## When to use
+*
+* Call this function after:
+* 1. All elements are connected to DOM (`connectedCallback` has fired)
+* 2. All custom elements have upgraded (`updateComplete` has resolved)
+* 3. Before any time-based operations (seeking, rendering)
+*
+* ## Implementation
+*
+* This function manually traverses the DOM tree and sets:
+* - `parentTimegroup`: The immediate parent timegroup (used for start time calculations)
+* - `rootTimegroup`: The root timegroup (used for ownCurrentTimeMs calculations)
+*
+* This replicates what Lit Context's `@provide`/`@consume` decorators would do if elements
+* connected in parent-first order (as happens with declarative HTML parsing).
+*
+* @param searchRoot - The root element to search within (typically document.body or ef-workbench)
+* @param rootTimegroup - The root timegroup element that should be the hierarchy root
+*
+* @example
+* ```typescript
+* const rootTimegroup = document.querySelector('ef-timegroup');
+* await rootTimegroup.updateComplete;
+* setupTemporalHierarchy(document.body, rootTimegroup);
+* await rootTimegroup.seekForRender(100); // Now all children can compute correct times
+* ```
+*/
+function setupTemporalHierarchy(searchRoot, rootTimegroup) {
+	const temporals = searchRoot.querySelectorAll("ef-video, ef-audio, ef-image, ef-text, ef-waveform, ef-timegroup");
+	for (const el of temporals) {
+		if (el === rootTimegroup || !el.isConnected) continue;
+		const parentTg = el.parentElement?.closest("ef-timegroup") || rootTimegroup;
+		if ("parentTimegroup" in el) el.parentTimegroup = parentTg;
+		if ("rootTimegroup" in el) el.rootTimegroup = rootTimegroup;
+	}
+}
+
+//#endregion
+export { setupTemporalHierarchy };
+//# sourceMappingURL=setupTemporalHierarchy.js.map

package/dist/elements/setupTemporalHierarchy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setupTemporalHierarchy.js","names":[],"sources":["../../src/elements/setupTemporalHierarchy.ts"],"sourcesContent":["/**\n * Manually wire up the temporal element hierarchy (parent/root timegroup references).\n *\n * ## Why this is needed\n *\n * Lit Context (`@provide`/`@consume`) relies on `context-request` DOM events. When a consumer\n * connects, it dispatches a `context-request` event that bubbles up to find a provider.\n *\n * **The problem:** When HTML is loaded via `loadURL()` (our rendering path), custom elements\n * connect in depth-first order - children BEFORE parents. This means:\n * 1. `ef-video` connects → dispatches `context-request` event\n * 2. `ef-timegroup` hasn't connected yet → no provider listening → event is lost\n * 3. `ef-timegroup` connects → creates provider → but too late\n *\n * DOM events are point-in-time; once missed, they're gone. There's no retroactive discovery.\n *\n * Without proper parent/root timegroup references:\n * - Child temporal elements can't compute their `ownCurrentTimeMs` (stays at 0)\n * - Video/audio elements can't seek to correct timestamps\n * - Nested timegroups can't calculate their start times correctly\n *\n * ## When to use\n *\n * Call this function after:\n * 1. All elements are connected to DOM (`connectedCallback` has fired)\n * 2. All custom elements have upgraded (`updateComplete` has resolved)\n * 3. Before any time-based operations (seeking, rendering)\n *\n * ## Implementation\n *\n * This function manually traverses the DOM tree and sets:\n * - `parentTimegroup`: The immediate parent timegroup (used for start time calculations)\n * - `rootTimegroup`: The root timegroup (used for ownCurrentTimeMs calculations)\n *\n * This replicates what Lit Context's `@provide`/`@consume` decorators would do if elements\n * connected in parent-first order (as happens with declarative HTML parsing).\n *\n * @param searchRoot - The root element to search within (typically document.body or ef-workbench)\n * @param rootTimegroup - The root timegroup element that should be the hierarchy root\n *\n * @example\n * ```typescript\n * const rootTimegroup = document.querySelector('ef-timegroup');\n * await rootTimegroup.updateComplete;\n * setupTemporalHierarchy(document.body, rootTimegroup);\n * await rootTimegroup.seekForRender(100); // Now all children can compute correct times\n * ```\n */\nexport function setupTemporalHierarchy(\n  searchRoot: Element,\n  rootTimegroup: any,\n): void {\n  const temporalSelectors =\n    \"ef-video, ef-audio, ef-image, ef-text, ef-waveform, ef-timegroup\";\n  const temporals = searchRoot.querySelectorAll(temporalSelectors);\n\n  for (const el of temporals) {\n    // Skip the root timegroup itself and disconnected elements\n    if (el === rootTimegroup || !(el as any).isConnected) {\n      continue;\n    }\n\n    // Find immediate parent timegroup (may be nested, e.g., timegroup within timegroup)\n    // Use closest() starting from parentElement to avoid matching the element itself\n    const parentTg =\n      (el.parentElement?.closest(\"ef-timegroup\") as any) || rootTimegroup;\n\n    // Set both parent and root references\n    // - parentTimegroup: Used for start time calculations (evaluateStartTime)\n    // - rootTimegroup: Used for ownCurrentTimeMs calculations (determineCurrentTimeSource)\n    if (\"parentTimegroup\" in el) {\n      (el as any).parentTimegroup = parentTg;\n    }\n    if (\"rootTimegroup\" in el) {\n      (el as any).rootTimegroup = rootTimegroup;\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,SAAgB,uBACd,YACA,eACM;CAGN,MAAM,YAAY,WAAW,iBAD3B,mEAC8D;AAEhE,MAAK,MAAM,MAAM,WAAW;AAE1B,MAAI,OAAO,iBAAiB,CAAE,GAAW,YACvC;EAKF,MAAM,WACH,GAAG,eAAe,QAAQ,eAAe,IAAY;AAKxD,MAAI,qBAAqB,GACvB,CAAC,GAAW,kBAAkB;AAEhC,MAAI,mBAAmB,GACrB,CAAC,GAAW,gBAAgB"}

package/dist/elements/updateAnimations.js

@@ -26,15 +26,9 @@ const domStructureChanged = /* @__PURE__ */ new WeakMap();
 const lastAnimationCount = /* @__PURE__ */ new WeakMap();
 /**
 * Tracks which animations have already been validated to avoid duplicate warnings.
+* Uses animation name + duration as the unique key.
 */
-const validatedAnimations = /* @__PURE__ */ new WeakSet();
-/**
-* Checks if an element is in a render clone (static DOM context).
-* Render clones are in containers with class "ef-render-clone-container".
-*/
-const isRenderClone = (element) => {
-	return element.closest(".ef-render-clone-container") !== null;
-};
+const validatedAnimations = /* @__PURE__ */ new Set();
 /**
 * Validates that an animation is still valid and controllable.
 * Animations become invalid when:
@@ -65,22 +59,14 @@ const isAnimationValid = (animation, currentAnimations) => {
 * For prime timeline (interactive), discovery is responsive to DOM changes.
 *
 * Also cleans up invalid animations (cancelled, removed from DOM, etc.)
-* 
+*
 * @param providedAnimations - Optional pre-discovered animations to avoid redundant getAnimations() calls
 */
 const discoverAndTrackAnimations = (element, providedAnimations) => {
-	const isClone = isRenderClone(element);
-	const hasTrackedAnimations = animationTracker.has(element);
+	animationTracker.has(element);
 	const structureChanged = domStructureChanged.get(element) ?? true;
-	if (isClone && hasTrackedAnimations && !structureChanged) {
-		const rootTracked$1 = animationTracker.get(element);
-		return {
-			tracked: rootTracked$1,
-			current: Array.from(rootTracked$1)
-		};
-	}
 	const currentAnimations = providedAnimations ?? element.getAnimations({ subtree: true });
-	if (isClone) domStructureChanged.set(element, false);
+	domStructureChanged.set(element, false);
 	lastAnimationCount.set(element, currentAnimations.length);
 	for (const animation of currentAnimations) {
 		const effect = animation.effect;
@@ -114,13 +100,11 @@ const discoverAndTrackAnimations = (element, providedAnimations) => {
 			anims.push(animation);
 		}
 	}
-	const subtreeElements = element.querySelectorAll("*");
-	for (const el of subtreeElements) {
-		const tracked = animationTracker.get(el);
-		if (tracked) {
-			const currentElAnimations = elementAnimationsMap.get(el) || [];
-			for (const animation of tracked) if (!isAnimationValid(animation, currentElAnimations)) tracked.delete(animation);
-			if (tracked.size === 0) animationTracker.delete(el);
+	if (structureChanged) for (const [el, tracked] of elementAnimationsMap) {
+		const existingTracked = animationTracker.get(el);
+		if (existingTracked) {
+			for (const animation of existingTracked) if (!isAnimationValid(animation, tracked)) existingTracked.delete(animation);
+			if (existingTracked.size === 0) animationTracker.delete(el);
 		}
 	}
 	return {
@@ -187,21 +171,7 @@ var VisibilityPolicy = class {
 		return element.tagName === "EF-TEXT-SEGMENT";
 	}
 };
-/**
-* Animation policy: determines when animations should be coordinated.
-*
-* WHY: When an animation reaches exactly the end time of an element, using exclusive
-* end would make the element invisible, causing the animation to be removed from the
-* DOM and creating a visual jump. By using inclusive end, we ensure animations remain
-* coordinated even at exact boundary times, providing smooth visual transitions.
-*/
-var AnimationPolicy = class {
-	shouldIncludeEndBoundary(_element) {
-		return true;
-	}
-};
 const visibilityPolicy = new VisibilityPolicy();
-const animationPolicy = new AnimationPolicy();
 /**
 * Determines if an element should be visible based on its phase and visibility policy.
 */
@@ -212,11 +182,20 @@ const shouldBeVisible = (phase, element) => {
 };
 /**
 * Determines if animations should be coordinated based on element phase and animation policy.
+*
+* CRITICAL: Always returns true to support scrubbing to arbitrary times.
+*
+* Previously, this function skipped coordination for before-start and after-end phases as an
+* optimization for live playback. However, this broke scrubbing scenarios where we seek to
+* arbitrary times (timeline scrubbing, thumbnails, video export).
+*
+* The performance cost of always coordinating is minimal:
+* - Animations only update when element time changes
+* - Paused animation updates are optimized by the browser
+* - The benefit is correct animation state at all times, regardless of phase
 */
-const shouldCoordinateAnimations = (phase, element) => {
-	if (phase === "before-start" || phase === "after-end") return false;
-	if (phase === "active") return true;
-	return animationPolicy.shouldIncludeEndBoundary(element);
+const shouldCoordinateAnimations = (_phase, _element) => {
+	return true;
 };
 /**
 * Evaluates what the element's state should be based on the timeline.
@@ -236,21 +215,6 @@ const evaluateTemporalState = (element) => {
 	};
 };
 /**
-* Evaluates element visibility state specifically for animation coordination.
-* Uses inclusive end boundaries to prevent animation jumps at exact boundaries.
-*
-* This is exported for external use cases that need animation-specific visibility
-* evaluation without the full ElementUpdateContext.
-*/
-const evaluateAnimationVisibilityState = (element) => {
-	const state = evaluateTemporalState(element);
-	const shouldCoordinate = shouldCoordinateAnimations(state.phase, element);
-	return {
-		...state,
-		isVisible: shouldCoordinate
-	};
-};
-/**
 * Capability check: determines if an element supports stagger offset.
 * Encapsulates the knowledge of which element types support this feature.
 */
@@ -422,22 +386,20 @@ const hasTransformAnimation = (keyframes) => {
 };
 /**
 * Validates CSS animation fill-mode to prevent flashing issues.
-* 
+*
 * CRITICAL: Editframe's timeline system pauses animations and manually controls them
 * via animation.currentTime. This means elements exist in the DOM before their animations
 * start. Without proper fill-mode, elements will "flash" to their natural state before
 * the animation begins.
-* 
+*
 * Common issues:
 * - Delayed animations without 'backwards': Element shows natural state during delay
 * - Fade-in without 'backwards': Element visible before fade starts
 * - Fade-out without 'forwards': Element snaps back after fade completes
-* 
+*
 * Only runs in development mode to avoid performance impact in production.
 */
 const validateAnimationFillMode = (animation, timing) => {
-	if (validatedAnimations.has(animation)) return;
-	validatedAnimations.add(animation);
 	const effect = animation.effect;
 	if (!validateAnimationEffect(effect)) return;
 	const fill = effect.getTiming().fill || "none";
@@ -448,18 +410,21 @@ const validateAnimationFillMode = (animation, timing) => {
 		const animationNameValue = window.getComputedStyle(target).animationName;
 		if (animationNameValue && animationNameValue !== "none") animationName = animationNameValue.split(",")[0]?.trim() || "unknown";
 	}
+	const validationKey = `${animationName}-${timing.duration}`;
+	if (validatedAnimations.has(validationKey)) return;
+	validatedAnimations.add(validationKey);
 	const warnings = [];
 	if (timing.delay > 0 && fill !== "backwards" && fill !== "both") warnings.push(`⚠️  Animation "${animationName}" has a ${timing.delay}ms delay but no 'backwards' fill-mode.`, `   This will cause the element to show its natural state during the delay, then suddenly jump when the animation starts.`, `   Fix: Add 'backwards' or 'both' to the animation shorthand.`, `   Example: animation: ${animationName} ${timing.duration}ms ${timing.delay}ms backwards;`);
 	try {
 		const keyframes = effect.getKeyframes();
 		const fadePattern = detectFadePattern(keyframes);
 		const hasTransform = hasTransformAnimation(keyframes);
-		if ((fadePattern === "fade-in" || hasTransform) && fill !== "backwards" && fill !== "both") warnings.push(`⚠️  Animation "${animationName}" appears to be a fade-in or slide-in effect but lacks 'backwards' fill-mode.`, `   The element will be visible in its natural state before the animation starts.`, `   Fix: Add 'backwards' or 'both' to the animation.`, `   Example: animation: ${animationName} ${timing.duration}ms backwards;`);
-		if (fadePattern === "fade-out" && fill !== "forwards" && fill !== "both") warnings.push(`⚠️  Animation "${animationName}" appears to be a fade-out effect but lacks 'forwards' fill-mode.`, `   The element will snap back to its natural state after the animation completes.`, `   Fix: Add 'forwards' or 'both' to the animation.`, `   Example: animation: ${animationName} ${timing.duration}ms forwards;`);
-		if (fadePattern === "both" && fill !== "both") warnings.push(`⚠️  Animation "${animationName}" has both fade-in and fade-out keyframes but doesn't use 'both' fill-mode.`, `   Fix: Use 'both' to apply initial and final states.`, `   Example: animation: ${animationName} ${timing.duration}ms both;`);
+		if ((fadePattern === "fade-in" || hasTransform) && fill !== "backwards" && fill !== "both") warnings.push(`⚠️  Animation "${animationName}" modifies initial state but lacks 'backwards' fill-mode.`, `   The element will be visible in its natural state before the animation starts.`, `   Fix: Add 'backwards' or 'both' to the animation.`, `   Example: animation: ${animationName} ${timing.duration}ms backwards;`);
+		if (fadePattern === "fade-out" && fill !== "forwards" && fill !== "both") warnings.push(`⚠️  Animation "${animationName}" modifies final state but lacks 'forwards' fill-mode.`, `   The element will snap back to its natural state after the animation completes.`, `   Fix: Add 'forwards' or 'both' to the animation.`, `   Example: animation: ${animationName} ${timing.duration}ms forwards;`);
+		if (fadePattern === "both" && fill !== "both") warnings.push(`⚠️  Animation "${animationName}" modifies both initial and final state but doesn't use 'both' fill-mode.`, `   Fix: Use 'both' to apply initial and final states.`, `   Example: animation: ${animationName} ${timing.duration}ms both;`);
 	} catch (e) {}
-	if (warnings.length > 0) {
-		console.group("%c🎬 Editframe Animation Fill-Mode Warning", "color: #f59e0b; font-weight: bold");
+	if (warnings.length > 0 && typeof window !== "undefined" && window.__EDITFRAME_FILL_MODE_WARNINGS__) {
+		console.groupCollapsed("%c🎬 Editframe Animation Fill-Mode Warning", "color: #f59e0b; font-weight: bold");
 		warnings.forEach((warning) => console.log(warning));
 		console.log("\n📚 Learn more: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode");
 		console.groupEnd();
@@ -602,31 +567,41 @@ const evaluateElementState = (element) => {
 */
 const updateAnimations = (element) => {
 	const allAnimations = element.getAnimations({ subtree: true });
-	const animationsByElement = /* @__PURE__ */ new Map();
+	const rootContext = evaluateElementState(element);
+	const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;
+	const { elements: collectedElements, pruned } = deepGetTemporalElements(element, timelineTimeMs);
+	for (const prunedElement of pruned) prunedElement.style.setProperty("display", "none");
+	const childContexts = [];
+	for (const temporalElement of collectedElements) if (!pruned.has(temporalElement)) childContexts.push(evaluateElementState(temporalElement));
+	const visibleChildContexts = [];
+	for (const ctx of childContexts) if (shouldBeVisible(ctx.state.phase, ctx.element)) visibleChildContexts.push(ctx);
+	const temporalSet = new Set(visibleChildContexts.map((c) => c.element));
+	temporalSet.add(element);
+	const childAnimations = /* @__PURE__ */ new Map();
 	for (const animation of allAnimations) {
 		const effect = animation.effect;
-		if (effect && effect instanceof KeyframeEffect && effect.target) {
-			const target = effect.target;
-			let anims = animationsByElement.get(target);
-			if (!anims) {
-				anims = [];
-				animationsByElement.set(target, anims);
+		const target = effect && effect instanceof KeyframeEffect ? effect.target : null;
+		if (!target || !(target instanceof Element)) continue;
+		let node = target;
+		while (node) {
+			if (temporalSet.has(node)) {
+				let anims = childAnimations.get(node);
+				if (!anims) {
+					anims = [];
+					childAnimations.set(node, anims);
+				}
+				anims.push(animation);
+				break;
 			}
-			anims.push(animation);
+			node = node.parentElement;
 		}
 	}
-	const rootContext = evaluateElementState(element);
-	const childContexts = deepGetTemporalElements(element).map((temporalElement) => evaluateElementState(temporalElement));
-	applyAnimationCoordination(rootContext.element, rootContext.state.phase, animationsByElement.get(rootContext.element));
-	childContexts.forEach((context) => {
-		applyAnimationCoordination(context.element, context.state.phase, animationsByElement.get(context.element));
-	});
+	applyAnimationCoordination(rootContext.element, rootContext.state.phase, allAnimations);
+	for (const context of visibleChildContexts) applyAnimationCoordination(context.element, context.state.phase, childAnimations.get(context.element) || []);
 	applyVisualState(rootContext.element, rootContext.state);
-	childContexts.forEach((context) => {
-		applyVisualState(context.element, context.state);
-	});
+	for (const context of childContexts) applyVisualState(context.element, context.state);
 };
 
 //#endregion
-export { cleanupTrackedAnimations, evaluateAnimationVisibilityState, updateAnimations };
+export { cleanupTrackedAnimations, updateAnimations };
 //# sourceMappingURL=updateAnimations.js.map