@editframe/elements 0.30.1-beta.0 → 0.31.0-beta.0

package/dist/elements/ElementPositionInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementPositionInfo.js","names":[],"sources":["../../src/elements/ElementPositionInfo.ts"],"sourcesContent":["import type { LitElement } from \"lit\";\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\n/**\n * Element position information interface.\n * Provides computed position, bounds, and transform information for elements.\n */\nexport interface ElementPositionInfo {\n  /**\n   * The bounding rectangle of the element in screen coordinates.\n   */\n  bounds: DOMRect;\n\n  /**\n   * The computed transform string (e.g., \"translate(10px, 20px) rotate(45deg)\").\n   */\n  transform: string;\n\n  /**\n   * The rotation angle in degrees, extracted from the transform.\n   */\n  rotation: number;\n}\n\n/**\n * Mixin that adds getPositionInfo() method to LitElement.\n * Elements can use this to expose their position information.\n */\nexport function PositionInfoMixin<T extends Constructor<LitElement>>(superClass: T) {\n  class PositionInfoElement extends superClass {\n\n    /**\n     * Get position information for this element.\n     * Returns computed bounds, transform, and rotation.\n     *\n     * @public\n     */\n    getPositionInfo(): ElementPositionInfo | null {\n      return getPositionInfoFromElement(this as unknown as HTMLElement);\n    }\n  }\n\n  return PositionInfoElement as T;\n}\n\n/**\n * Helper function to get position info from any HTMLElement.\n * Reads computed styles and bounding rect to determine position.\n */\nexport function getPositionInfoFromElement(\n  element: HTMLElement | null,\n): ElementPositionInfo | null {\n  if (!element) {\n    return null;\n  }\n\n  const rect = element.getBoundingClientRect();\n  const computedStyle = window.getComputedStyle(element);\n  const transform = computedStyle.transform;\n\n  // Parse rotation from transform matrix\n  let rotation = 0;\n  if (transform && transform !== \"none\") {\n    // Transform matrix format: matrix(a, b, c, d, e, f)\n    // Rotation = atan2(b, a) * (180 / Math.PI)\n    const matrixMatch = transform.match(/matrix\\(([^)]+)\\)/);\n    if (matrixMatch && matrixMatch[1]) {\n      const values = matrixMatch[1].split(\",\").map((v) => parseFloat(v.trim()));\n      if (values.length >= 4) {\n        const a = values[0]!;\n        const b = values[1]!;\n        rotation = Math.atan2(b, a) * (180 / Math.PI);\n      }\n    }\n  }\n\n  return {\n    bounds: rect,\n    transform: transform || \"none\",\n    rotation,\n  };\n}\n"],"mappings":";;;;;AA6BA,SAAgB,kBAAqD,YAAe;CAClF,MAAM,4BAA4B,WAAW;;;;;;;EAQ3C,kBAA8C;AAC5C,UAAO,2BAA2B,KAA+B;;;AAIrE,QAAO;;;;;;AAOT,SAAgB,2BACd,SAC4B;AAC5B,KAAI,CAAC,QACH,QAAO;CAGT,MAAM,OAAO,QAAQ,uBAAuB;CAE5C,MAAM,YADgB,OAAO,iBAAiB,QAAQ,CACtB;CAGhC,IAAI,WAAW;AACf,KAAI,aAAa,cAAc,QAAQ;EAGrC,MAAM,cAAc,UAAU,MAAM,oBAAoB;AACxD,MAAI,eAAe,YAAY,IAAI;GACjC,MAAM,SAAS,YAAY,GAAG,MAAM,IAAI,CAAC,KAAK,MAAM,WAAW,EAAE,MAAM,CAAC,CAAC;AACzE,OAAI,OAAO,UAAU,GAAG;IACtB,MAAM,IAAI,OAAO;IACjB,MAAM,IAAI,OAAO;AACjB,eAAW,KAAK,MAAM,GAAG,EAAE,IAAI,MAAM,KAAK;;;;AAKhD,QAAO;EACL,QAAQ;EACR,WAAW,aAAa;EACxB;EACD"}

package/dist/elements/FetchMixin.js

@@ -18,10 +18,25 @@ function FetchMixin(superClass) {
 						}
 					}
 					return fetchPromise.catch((error) => {
+						const isAbortError = error instanceof Error && (error.name === "AbortError" || error.message.includes("signal is aborted") || error.message.includes("The user aborted a request"));
+						const isDisconnected = !this.isConnected;
+						const isNavigationAbort = isDisconnected && error instanceof TypeError && error.message === "Failed to fetch";
+						if (isAbortError || isNavigationAbort || isDisconnected) throw error;
 						console.error("FetchMixin fetch error", url, error, window.location.href);
 						const enhancedError = new (error instanceof Error ? error.constructor : Error)(`Failed to fetch: ${url}. Original error: ${error instanceof Error ? error.message : String(error)}`);
 						if (error instanceof Error) {
-							enhancedError.name = error.name;
+							try {
+								enhancedError.name = error.name;
+							} catch {
+								try {
+									Object.defineProperty(enhancedError, "name", {
+										value: error.name,
+										writable: true,
+										enumerable: false,
+										configurable: true
+									});
+								} catch {}
+							}
 							enhancedError.stack = error.stack;
 							Object.assign(enhancedError, error);
 						}

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          console.error(\n            \"FetchMixin fetch error\",\n            url,\n            error,\n            window.location.href,\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            enhancedError.name = error.name;\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;AACnC,cAAQ,MACN,0BACA,KACA,OACA,OAAO,SAAS,KACjB;MAID,MAAM,gBAAgB,KADpB,iBAAiB,QAAQ,MAAM,cAAc,OAE7C,oBAAoB,IAAI,oBAAoB,iBAAiB,QAAQ,MAAM,UAAU,OAAO,MAAM,GACnG;AAED,UAAI,iBAAiB,OAAO;AAC1B,qBAAc,OAAO,MAAM;AAC3B,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          \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"}

package/dist/elements/SessionThumbnailCache.js

@@ -0,0 +1,152 @@
+//#region src/elements/SessionThumbnailCache.ts
+/**
+* Quantize timestamp to 30fps frame boundaries for consistent caching.
+* This eliminates cache misses from floating point precision differences.
+*/
+function quantizeTimestamp(timeMs) {
+	const frameIntervalMs = 1e3 / 30;
+	return Math.round(timeMs / frameIntervalMs) * frameIntervalMs;
+}
+/**
+* Generate cache key for thumbnail image data.
+* Format: "rootId:elementId:quantizedTimeMs"
+*/
+function getCacheKey(rootId, elementId, timeMs) {
+	return `${rootId}:${elementId}:${quantizeTimestamp(timeMs)}`;
+}
+/**
+* Parse a cache key back into its components.
+*/
+function parseCacheKey(key) {
+	const parts = key.split(":");
+	if (parts.length < 3) return null;
+	const timeMs = Number.parseFloat(parts.pop());
+	const rootId = parts[0];
+	parts.shift();
+	const elementId = parts.join(":");
+	if (Number.isNaN(timeMs)) return null;
+	return {
+		rootId,
+		elementId,
+		timeMs
+	};
+}
+/**
+* Session thumbnail cache - simple Map with time-range invalidation.
+*/
+var SessionThumbnailCache = class {
+	constructor(maxSize = 1e3) {
+		this.cache = /* @__PURE__ */ new Map();
+		this.maxSize = maxSize;
+	}
+	/**
+	* Check if a thumbnail exists in cache.
+	*/
+	has(key) {
+		return this.cache.has(key);
+	}
+	/**
+	* Get a thumbnail from cache.
+	*/
+	get(key) {
+		return this.cache.get(key)?.imageData;
+	}
+	/**
+	* Store a thumbnail in cache.
+	*/
+	set(key, imageData, timeMs, elementId) {
+		if (this.cache.size >= this.maxSize) {
+			const firstKey = this.cache.keys().next().value;
+			if (firstKey) this.cache.delete(firstKey);
+		}
+		this.cache.set(key, {
+			imageData,
+			timeMs,
+			elementId
+		});
+	}
+	/**
+	* Invalidate all thumbnails for a specific element.
+	*/
+	invalidateElement(rootId, elementId) {
+		const prefix = `${rootId}:${elementId}:`;
+		let count = 0;
+		for (const key of this.cache.keys()) if (key.startsWith(prefix)) {
+			this.cache.delete(key);
+			count++;
+		}
+		return count;
+	}
+	/**
+	* Invalidate thumbnails within a time range for a specific element.
+	* Used when content changes at specific times.
+	*/
+	invalidateTimeRange(rootId, elementId, startTimeMs, endTimeMs) {
+		const prefix = `${rootId}:${elementId}:`;
+		let count = 0;
+		for (const [key, entry] of this.cache.entries()) if (key.startsWith(prefix)) {
+			if (entry.timeMs >= startTimeMs && entry.timeMs <= endTimeMs) {
+				this.cache.delete(key);
+				count++;
+			}
+		}
+		return count;
+	}
+	/**
+	* Invalidate all thumbnails that overlap with a given time range.
+	* This is more aggressive - invalidates any thumbnail that might show content from the range.
+	*/
+	invalidateOverlappingRange(rootId, startTimeMs, endTimeMs) {
+		let count = 0;
+		for (const [key, entry] of this.cache.entries()) {
+			const parsed = parseCacheKey(key);
+			if (!parsed || parsed.rootId !== rootId) continue;
+			if (entry.timeMs >= startTimeMs && entry.timeMs <= endTimeMs) {
+				this.cache.delete(key);
+				count++;
+			}
+		}
+		return count;
+	}
+	/**
+	* Clear entire cache.
+	*/
+	async clear() {
+		this.cache.clear();
+	}
+	/**
+	* Get current cache size.
+	*/
+	get size() {
+		return this.cache.size;
+	}
+	/**
+	* Set maximum cache size.
+	*/
+	setMaxSize(maxSize) {
+		this.maxSize = maxSize;
+		while (this.cache.size > this.maxSize) {
+			const firstKey = this.cache.keys().next().value;
+			if (firstKey) this.cache.delete(firstKey);
+			else break;
+		}
+	}
+	/**
+	* Get cache statistics.
+	*/
+	async getStats() {
+		let totalSizeBytes = 0;
+		for (const entry of this.cache.values()) totalSizeBytes += entry.imageData.width * entry.imageData.height * 4;
+		return {
+			itemCount: this.cache.size,
+			totalSizeBytes,
+			maxSize: this.maxSize
+		};
+	}
+};
+const sessionThumbnailCache = new SessionThumbnailCache();
+globalThis.debugSessionThumbnailCache = sessionThumbnailCache;
+
+//#endregion
+export { getCacheKey, sessionThumbnailCache };
+//# sourceMappingURL=SessionThumbnailCache.js.map

package/dist/elements/SessionThumbnailCache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionThumbnailCache.js","names":[],"sources":["../../src/elements/SessionThumbnailCache.ts"],"sourcesContent":["/**\n * Session-only thumbnail cache - simple Map-based storage.\n * \n * DESIGN: Memory-only storage for thumbnails during the session.\n * - Fast synchronous access\n * - Automatic invalidation on time-range changes\n * - No persistence between sessions (refresh clears cache)\n * - No workers, no IndexedDB complexity\n */\n\nimport type { ThumbnailCacheStats } from \"./thumbnailCache.js\";\n\n/** Cache key format: \"rootId:elementId:quantizedTimeMs\" */\ntype CacheKey = string;\n\n/** Cache entry with metadata for invalidation */\ninterface CacheEntry {\n  imageData: ImageData;\n  timeMs: number; // Original (non-quantized) time for invalidation checks\n  elementId: string; // Element identifier for scoped invalidation\n}\n\n/**\n * Quantize timestamp to 30fps frame boundaries for consistent caching.\n * This eliminates cache misses from floating point precision differences.\n */\nexport function quantizeTimestamp(timeMs: number): number {\n  const frameIntervalMs = 1000 / 30; // 33.33ms at 30fps\n  return Math.round(timeMs / frameIntervalMs) * frameIntervalMs;\n}\n\n/**\n * Generate cache key for thumbnail image data.\n * Format: \"rootId:elementId:quantizedTimeMs\"\n */\nexport function getCacheKey(rootId: string, elementId: string, timeMs: number): string {\n  const quantizedTimeMs = quantizeTimestamp(timeMs);\n  return `${rootId}:${elementId}:${quantizedTimeMs}`;\n}\n\n/**\n * Parse a cache key back into its components.\n */\nfunction parseCacheKey(key: CacheKey): { rootId: string; elementId: string; timeMs: number } | null {\n  const parts = key.split(\":\");\n  if (parts.length < 3) return null;\n  \n  // Last part is always timeMs\n  const timeMs = Number.parseFloat(parts.pop()!);\n  // Second to last is elementId (may contain colons in URLs)\n  // Actually, we need to be smarter - rootId is first, elementId is middle, timeMs is last\n  // For URL-based elementIds like \"http://example.com/video.mp4\", we need to handle colons\n  \n  // Simpler approach: rootId is first part, timeMs is last, everything else is elementId\n  const rootId = parts[0]!;\n  parts.shift(); // Remove rootId\n  const elementId = parts.join(\":\"); // Rejoin middle parts as elementId\n  \n  if (Number.isNaN(timeMs)) return null;\n  return { rootId, elementId, timeMs };\n}\n\n/**\n * Session thumbnail cache - simple Map with time-range invalidation.\n */\nexport class SessionThumbnailCache {\n  private cache: Map<CacheKey, CacheEntry> = new Map();\n  private maxSize: number;\n\n  constructor(maxSize = 1000) {\n    this.maxSize = maxSize;\n  }\n\n  /**\n   * Check if a thumbnail exists in cache.\n   */\n  has(key: CacheKey): boolean {\n    return this.cache.has(key);\n  }\n\n  /**\n   * Get a thumbnail from cache.\n   */\n  get(key: CacheKey): ImageData | undefined {\n    return this.cache.get(key)?.imageData;\n  }\n\n  /**\n   * Store a thumbnail in cache.\n   */\n  set(key: CacheKey, imageData: ImageData, timeMs: number, elementId: string): void {\n    // Enforce max size with simple FIFO eviction\n    if (this.cache.size >= this.maxSize) {\n      const firstKey = this.cache.keys().next().value;\n      if (firstKey) {\n        this.cache.delete(firstKey);\n      }\n    }\n\n    this.cache.set(key, { imageData, timeMs, elementId });\n  }\n\n  /**\n   * Invalidate all thumbnails for a specific element.\n   */\n  invalidateElement(rootId: string, elementId: string): number {\n    const prefix = `${rootId}:${elementId}:`;\n    let count = 0;\n    \n    for (const key of this.cache.keys()) {\n      if (key.startsWith(prefix)) {\n        this.cache.delete(key);\n        count++;\n      }\n    }\n    \n    return count;\n  }\n\n  /**\n   * Invalidate thumbnails within a time range for a specific element.\n   * Used when content changes at specific times.\n   */\n  invalidateTimeRange(rootId: string, elementId: string, startTimeMs: number, endTimeMs: number): number {\n    const prefix = `${rootId}:${elementId}:`;\n    let count = 0;\n    \n    for (const [key, entry] of this.cache.entries()) {\n      if (key.startsWith(prefix)) {\n        // Check if this thumbnail's time falls within the invalidated range\n        if (entry.timeMs >= startTimeMs && entry.timeMs <= endTimeMs) {\n          this.cache.delete(key);\n          count++;\n        }\n      }\n    }\n    \n    return count;\n  }\n\n  /**\n   * Invalidate all thumbnails that overlap with a given time range.\n   * This is more aggressive - invalidates any thumbnail that might show content from the range.\n   */\n  invalidateOverlappingRange(rootId: string, startTimeMs: number, endTimeMs: number): number {\n    let count = 0;\n    \n    for (const [key, entry] of this.cache.entries()) {\n      const parsed = parseCacheKey(key);\n      if (!parsed || parsed.rootId !== rootId) continue;\n      \n      // Invalidate if the thumbnail's time overlaps with the changed range\n      if (entry.timeMs >= startTimeMs && entry.timeMs <= endTimeMs) {\n        this.cache.delete(key);\n        count++;\n      }\n    }\n    \n    return count;\n  }\n\n  /**\n   * Clear entire cache.\n   */\n  async clear(): Promise<void> {\n    this.cache.clear();\n  }\n\n  /**\n   * Get current cache size.\n   */\n  get size(): number {\n    return this.cache.size;\n  }\n\n  /**\n   * Set maximum cache size.\n   */\n  setMaxSize(maxSize: number): void {\n    this.maxSize = maxSize;\n    \n    // Evict entries if over new limit\n    while (this.cache.size > this.maxSize) {\n      const firstKey = this.cache.keys().next().value;\n      if (firstKey) {\n        this.cache.delete(firstKey);\n      } else {\n        break;\n      }\n    }\n  }\n\n  /**\n   * Get cache statistics.\n   */\n  async getStats(): Promise<ThumbnailCacheStats> {\n    // Calculate total size by summing all ImageData sizes\n    let totalSizeBytes = 0;\n    for (const entry of this.cache.values()) {\n      // ImageData size = width * height * 4 bytes (RGBA)\n      totalSizeBytes += entry.imageData.width * entry.imageData.height * 4;\n    }\n\n    return {\n      itemCount: this.cache.size,\n      totalSizeBytes,\n      maxSize: this.maxSize,\n    };\n  }\n}\n\n// Global singleton cache instance for all thumbnail strips\nexport const sessionThumbnailCache = new SessionThumbnailCache();\n\n// Export for debugging\n(globalThis as any).debugSessionThumbnailCache = sessionThumbnailCache;\n"],"mappings":";;;;;AA0BA,SAAgB,kBAAkB,QAAwB;CACxD,MAAM,kBAAkB,MAAO;AAC/B,QAAO,KAAK,MAAM,SAAS,gBAAgB,GAAG;;;;;;AAOhD,SAAgB,YAAY,QAAgB,WAAmB,QAAwB;AAErF,QAAO,GAAG,OAAO,GAAG,UAAU,GADN,kBAAkB,OAAO;;;;;AAOnD,SAAS,cAAc,KAA6E;CAClG,MAAM,QAAQ,IAAI,MAAM,IAAI;AAC5B,KAAI,MAAM,SAAS,EAAG,QAAO;CAG7B,MAAM,SAAS,OAAO,WAAW,MAAM,KAAK,CAAE;CAM9C,MAAM,SAAS,MAAM;AACrB,OAAM,OAAO;CACb,MAAM,YAAY,MAAM,KAAK,IAAI;AAEjC,KAAI,OAAO,MAAM,OAAO,CAAE,QAAO;AACjC,QAAO;EAAE;EAAQ;EAAW;EAAQ;;;;;AAMtC,IAAa,wBAAb,MAAmC;CAIjC,YAAY,UAAU,KAAM;+BAHe,IAAI,KAAK;AAIlD,OAAK,UAAU;;;;;CAMjB,IAAI,KAAwB;AAC1B,SAAO,KAAK,MAAM,IAAI,IAAI;;;;;CAM5B,IAAI,KAAsC;AACxC,SAAO,KAAK,MAAM,IAAI,IAAI,EAAE;;;;;CAM9B,IAAI,KAAe,WAAsB,QAAgB,WAAyB;AAEhF,MAAI,KAAK,MAAM,QAAQ,KAAK,SAAS;GACnC,MAAM,WAAW,KAAK,MAAM,MAAM,CAAC,MAAM,CAAC;AAC1C,OAAI,SACF,MAAK,MAAM,OAAO,SAAS;;AAI/B,OAAK,MAAM,IAAI,KAAK;GAAE;GAAW;GAAQ;GAAW,CAAC;;;;;CAMvD,kBAAkB,QAAgB,WAA2B;EAC3D,MAAM,SAAS,GAAG,OAAO,GAAG,UAAU;EACtC,IAAI,QAAQ;AAEZ,OAAK,MAAM,OAAO,KAAK,MAAM,MAAM,CACjC,KAAI,IAAI,WAAW,OAAO,EAAE;AAC1B,QAAK,MAAM,OAAO,IAAI;AACtB;;AAIJ,SAAO;;;;;;CAOT,oBAAoB,QAAgB,WAAmB,aAAqB,WAA2B;EACrG,MAAM,SAAS,GAAG,OAAO,GAAG,UAAU;EACtC,IAAI,QAAQ;AAEZ,OAAK,MAAM,CAAC,KAAK,UAAU,KAAK,MAAM,SAAS,CAC7C,KAAI,IAAI,WAAW,OAAO,EAExB;OAAI,MAAM,UAAU,eAAe,MAAM,UAAU,WAAW;AAC5D,SAAK,MAAM,OAAO,IAAI;AACtB;;;AAKN,SAAO;;;;;;CAOT,2BAA2B,QAAgB,aAAqB,WAA2B;EACzF,IAAI,QAAQ;AAEZ,OAAK,MAAM,CAAC,KAAK,UAAU,KAAK,MAAM,SAAS,EAAE;GAC/C,MAAM,SAAS,cAAc,IAAI;AACjC,OAAI,CAAC,UAAU,OAAO,WAAW,OAAQ;AAGzC,OAAI,MAAM,UAAU,eAAe,MAAM,UAAU,WAAW;AAC5D,SAAK,MAAM,OAAO,IAAI;AACtB;;;AAIJ,SAAO;;;;;CAMT,MAAM,QAAuB;AAC3B,OAAK,MAAM,OAAO;;;;;CAMpB,IAAI,OAAe;AACjB,SAAO,KAAK,MAAM;;;;;CAMpB,WAAW,SAAuB;AAChC,OAAK,UAAU;AAGf,SAAO,KAAK,MAAM,OAAO,KAAK,SAAS;GACrC,MAAM,WAAW,KAAK,MAAM,MAAM,CAAC,MAAM,CAAC;AAC1C,OAAI,SACF,MAAK,MAAM,OAAO,SAAS;OAE3B;;;;;;CAQN,MAAM,WAAyC;EAE7C,IAAI,iBAAiB;AACrB,OAAK,MAAM,SAAS,KAAK,MAAM,QAAQ,CAErC,mBAAkB,MAAM,UAAU,QAAQ,MAAM,UAAU,SAAS;AAGrE,SAAO;GACL,WAAW,KAAK,MAAM;GACtB;GACA,SAAS,KAAK;GACf;;;AAKL,MAAa,wBAAwB,IAAI,uBAAuB;AAGhE,AAAC,WAAmB,6BAA6B"}

package/dist/elements/TargetController.js

@@ -100,7 +100,9 @@ var TargetController = class {
 		if (this.currentTargetString) this.registry.subscribe(this.currentTargetString, this.registryCallback);
 	}
 	updateTarget() {
-		const newTarget = this.registry.get(this.host.target);
+		if (!this.host.target) return;
+		let newTarget = this.registry.get(this.host.target);
+		if (!newTarget) newTarget = document.getElementById(this.host.target);
 		if (this.host.targetElement !== newTarget) {
 			this.disconnectFromTarget();
 			this.host.targetElement = newTarget ?? null;

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    const newTarget = this.registry.get(this.host.target);\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":"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"}
+{"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":"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"}

package/dist/elements/TimegroupController.js

@@ -12,9 +12,15 @@ var TimegroupController = class {
 		this.host.removeController(this);
 	}
 	hostUpdated() {
-		this.child.requestUpdate();
-		const newChildTimeMs = this.host.currentTimeMs - (this.child.startTimeMs ?? 0);
-		this.child.currentTimeMs = newChildTimeMs;
+		Promise.resolve().then(() => {
+			if ("mode" in this.child && "isRootTimegroup" in this.child) {
+				this.child.requestUpdate();
+				return;
+			}
+			this.child.requestUpdate();
+			const newChildTimeMs = this.host.currentTimeMs - (this.child.startTimeMs ?? 0);
+			this.child.currentTimeMs = newChildTimeMs;
+		});
 	}
 };
 

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    this.child.requestUpdate();\n    const newChildTimeMs =\n      this.host.currentTimeMs - (this.child.startTimeMs ?? 0);\n    this.child.currentTimeMs = newChildTimeMs;\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;AAClB,OAAK,MAAM,eAAe;EAC1B,MAAM,iBACJ,KAAK,KAAK,iBAAiB,KAAK,MAAM,eAAe;AACvD,OAAK,MAAM,gBAAgB"}
+{"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/findRootTemporal.js

@@ -0,0 +1,30 @@
+import { isEFTemporal } from "./EFTemporal.js";
+
+//#region src/elements/findRootTemporal.ts
+/**
+* Finds the outermost temporal element in the DOM ancestry of the given element.
+*
+* Walks up from the element toward the document root, collecting all temporal
+* elements (ef-timegroup, ef-video, ef-audio) in the ancestry, and returns
+* the outermost one (closest to document root).
+*
+* This is a pure function - no caching, no stored state. Called fresh whenever
+* the root temporal is needed.
+*
+* @param element - The element to start searching from
+* @returns The outermost temporal element, or null if none found
+*/
+function findRootTemporal(element) {
+	if (!element) return null;
+	let current = element;
+	let outermostTemporal = null;
+	while (current && current !== document) {
+		if (current instanceof HTMLElement && isEFTemporal(current)) outermostTemporal = current;
+		current = current.parentNode;
+	}
+	return outermostTemporal;
+}
+
+//#endregion
+export { findRootTemporal };
+//# sourceMappingURL=findRootTemporal.js.map

package/dist/elements/findRootTemporal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"findRootTemporal.js","names":["current: Node | null","outermostTemporal: (TemporalMixinInterface & HTMLElement) | null"],"sources":["../../src/elements/findRootTemporal.ts"],"sourcesContent":["import { isEFTemporal, type TemporalMixinInterface } from \"./EFTemporal.js\";\n\n/**\n * Finds the outermost temporal element in the DOM ancestry of the given element.\n *\n * Walks up from the element toward the document root, collecting all temporal\n * elements (ef-timegroup, ef-video, ef-audio) in the ancestry, and returns\n * the outermost one (closest to document root).\n *\n * This is a pure function - no caching, no stored state. Called fresh whenever\n * the root temporal is needed.\n *\n * @param element - The element to start searching from\n * @returns The outermost temporal element, or null if none found\n */\nexport function findRootTemporal(\n  element: Element | null,\n): (TemporalMixinInterface & HTMLElement) | null {\n  if (!element) {\n    return null;\n  }\n\n  let current: Node | null = element;\n  let outermostTemporal: (TemporalMixinInterface & HTMLElement) | null = null;\n\n  // Walk up the DOM tree toward document root\n  while (current && current !== document) {\n    // Check if current node is a temporal element\n    if (current instanceof HTMLElement && isEFTemporal(current)) {\n      outermostTemporal = current as TemporalMixinInterface & HTMLElement;\n    }\n    current = current.parentNode;\n  }\n\n  return outermostTemporal;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,SAAgB,iBACd,SAC+C;AAC/C,KAAI,CAAC,QACH,QAAO;CAGT,IAAIA,UAAuB;CAC3B,IAAIC,oBAAmE;AAGvE,QAAO,WAAW,YAAY,UAAU;AAEtC,MAAI,mBAAmB,eAAe,aAAa,QAAQ,CACzD,qBAAoB;AAEtB,YAAU,QAAQ;;AAGpB,QAAO"}

package/dist/elements/renderTemporalAudio.js

@@ -1,11 +1,14 @@
 //#region src/elements/renderTemporalAudio.ts
-async function renderTemporalAudio(host, fromMs, toMs) {
+async function renderTemporalAudio(host, fromMs, toMs, signal) {
 	const aacFrames = 48e3 * ((toMs - fromMs) / 1e3) / 1024;
 	const contextSize = Math.round(aacFrames) * 1024;
 	if (contextSize <= 0) throw new Error(`Duration must be greater than 0 when rendering audio. ${contextSize}ms`);
+	signal?.throwIfAborted();
 	const audioContext = new OfflineAudioContext(2, contextSize, 48e3);
-	if (host.waitForMediaDurations) await host.waitForMediaDurations();
-	const abortController = new AbortController();
+	if (host.waitForMediaDurations) {
+		await host.waitForMediaDurations();
+		signal?.throwIfAborted();
+	}
 	await Promise.all(host.getMediaElements().map(async (mediaElement) => {
 		if (mediaElement.mute) return;
 		const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
@@ -17,10 +20,20 @@ async function renderTemporalAudio(host, fromMs, toMs) {
 		const sourceInMs = mediaElement.sourceInMs || mediaElement.trimStartMs || 0;
 		const mediaSourceFromMs = mediaLocalFromMs + sourceInMs;
 		const mediaSourceToMs = mediaLocalToMs + sourceInMs;
-		const audio = await mediaElement.fetchAudioSpanningTime(mediaSourceFromMs, mediaSourceToMs, abortController.signal);
+		signal?.throwIfAborted();
+		const audio = await mediaElement.fetchAudioSpanningTime(mediaSourceFromMs, mediaSourceToMs, signal);
 		if (!audio) return;
 		const bufferSource = audioContext.createBufferSource();
-		bufferSource.buffer = await audioContext.decodeAudioData(await audio.blob.arrayBuffer());
+		let decodedBuffer;
+		try {
+			const arrayBuffer = await audio.blob.arrayBuffer();
+			if (arrayBuffer.byteLength < 100) return;
+			decodedBuffer = await audioContext.decodeAudioData(arrayBuffer);
+		} catch (decodeError) {
+			if (decodeError instanceof Error && decodeError.message.includes("Unable to decode audio data")) return;
+			throw decodeError;
+		}
+		bufferSource.buffer = decodedBuffer;
 		bufferSource.connect(audioContext.destination);
 		const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
 		const offsetInBufferMs = mediaSourceFromMs - audio.startMs;

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): 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  const audioContext = new OfflineAudioContext(2, contextSize, 48000);\n\n  if (host.waitForMediaDurations) {\n    await host.waitForMediaDurations();\n  }\n\n  const abortController = new AbortController();\n\n  await Promise.all(\n    host.getMediaElements().map(async (mediaElement) => {\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        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      const audio = await mediaElement.fetchAudioSpanningTime(\n        mediaSourceFromMs,\n        mediaSourceToMs,\n        abortController.signal,\n      );\n      if (!audio) {\n        return;\n      }\n\n      const bufferSource = audioContext.createBufferSource();\n      bufferSource.buffer = await audioContext.decodeAudioData(\n        await audio.blob.arrayBuffer(),\n      );\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,MACsB;CAItB,MAAM,YADe,SAFF,OAAO,UACI,OAEG;CAEjC,MAAM,cADgB,KAAK,MAAM,UAAU,GACP;AAEpC,KAAI,eAAe,EACjB,OAAM,IAAI,MACR,yDAAyD,YAAY,IACtE;CAGH,MAAM,eAAe,IAAI,oBAAoB,GAAG,aAAa,KAAM;AAEnE,KAAI,KAAK,sBACP,OAAM,KAAK,uBAAuB;CAGpC,MAAM,kBAAkB,IAAI,iBAAiB;AAE7C,OAAM,QAAQ,IACZ,KAAK,kBAAkB,CAAC,IAAI,OAAO,iBAAiB;AAClD,MAAI,aAAa,KACf;EAGF,MAAM,uBAAuB,aAAa,eAAe;EACzD,MAAM,sBAAsB,aAAa,aAAa;AAEtD,MAAI,EADkB,wBAAwB,qBAE5C;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;EAEzC,MAAM,QAAQ,MAAM,aAAa,uBAC/B,mBACA,iBACA,gBAAgB,OACjB;AACD,MAAI,CAAC,MACH;EAGF,MAAM,eAAe,aAAa,oBAAoB;AACtD,eAAa,SAAS,MAAM,aAAa,gBACvC,MAAM,MAAM,KAAK,aAAa,CAC/B;AACD,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\";\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  await Promise.all(\n    host.getMediaElements().map(async (mediaElement) => {\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        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      const audio = await mediaElement.fetchAudioSpanningTime(\n        mediaSourceFromMs,\n        mediaSourceToMs,\n        signal,\n      );\n      if (!audio) {\n        return;\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 (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;;AAG1B,OAAM,QAAQ,IACZ,KAAK,kBAAkB,CAAC,IAAI,OAAO,iBAAiB;AAClD,MAAI,aAAa,KACf;EAGF,MAAM,uBAAuB,aAAa,eAAe;EACzD,MAAM,sBAAsB,aAAa,aAAa;AAEtD,MAAI,EADkB,wBAAwB,qBAE5C;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;EAExB,MAAM,QAAQ,MAAM,aAAa,uBAC/B,mBACA,iBACA,OACD;AACD,MAAI,CAAC,MACH;EAGF,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"}