@editframe/elements 0.18.8-beta.0 → 0.18.20-beta.0

package/dist/elements/EFMedia/AssetIdMediaEngine.js

@@ -7,9 +7,12 @@ var AssetIdMediaEngine = class AssetIdMediaEngine extends AssetMediaEngine {
 		return new AssetIdMediaEngine(host, assetId, data, apiHost);
 	}
 	constructor(host, assetId, data, apiHost) {
-		super(host, assetId, data);
+		super(host, assetId);
 		this.assetId = assetId;
 		this.apiHost = apiHost;
+		this.data = data;
+		const longestFragment = Object.values(this.data).reduce((max, fragment) => Math.max(max, fragment.duration / fragment.timescale), 0);
+		this.durationMs = longestFragment * 1e3;
 	}
 	get initSegmentPaths() {
 		const paths = {};

package/dist/elements/EFMedia/AssetMediaEngine.d.ts

@@ -5,12 +5,11 @@ import { EFMedia } from '../EFMedia';
 import { BaseMediaEngine } from './BaseMediaEngine';
 import { MediaRendition } from './shared/MediaTaskUtils';
 export declare class AssetMediaEngine extends BaseMediaEngine implements MediaEngine {
-    host: EFMedia;
     src: string;
     protected data: Record<number, TrackFragmentIndex>;
-    static fetch(host: EFMedia, urlGenerator: UrlGenerator, src: string): Promise<AssetMediaEngine>;
     durationMs: number;
-    constructor(host: EFMedia, src: string, data: Record<number, TrackFragmentIndex>);
+    constructor(host: EFMedia, src: string);
+    static fetch(host: EFMedia, urlGenerator: UrlGenerator, src: string): Promise<AssetMediaEngine>;
     get audioTrackIndex(): import('../../../../assets/src/index.ts').AudioTrackFragmentIndex | undefined;
     get videoTrackIndex(): import('../../../../assets/src/index.ts').VideoTrackFragmentIndex | undefined;
     get videoRendition(): {
@@ -33,7 +32,7 @@ export declare class AssetMediaEngine extends BaseMediaEngine implements MediaEn
         trackId: number | undefined;
         src: string;
     }, signal: AbortSignal): Promise<ArrayBuffer>;
-    fetchMediaSegmentImpl(segmentId: number, rendition: {
+    fetchMediaSegment(segmentId: number, rendition: {
         trackId: number | undefined;
         src: string;
     }, signal?: AbortSignal): Promise<ArrayBuffer>;

package/dist/elements/EFMedia/AssetMediaEngine.js

@@ -1,20 +1,21 @@
 import { BaseMediaEngine } from "./BaseMediaEngine.js";
 import { convertToScaledTime, roundToMilliseconds } from "./shared/PrecisionUtils.js";
 var AssetMediaEngine = class AssetMediaEngine extends BaseMediaEngine {
+	constructor(host, src) {
+		super(host);
+		this.data = {};
+		this.durationMs = 0;
+		this.src = src;
+	}
 	static async fetch(host, urlGenerator, src) {
+		const engine = new AssetMediaEngine(host, src);
 		const url = urlGenerator.generateTrackFragmentIndexUrl(src);
-		const response = await host.fetch(url);
-		const data = await response.json();
-		if (src.startsWith("/")) src = src.slice(1);
-		return new AssetMediaEngine(host, src, data);
-	}
-	constructor(host, src, data) {
-		super();
-		this.host = host;
-		this.src = src;
-		this.data = data;
-		const longestFragment = Object.values(data).reduce((max, fragment) => Math.max(max, fragment.duration / fragment.timescale), 0);
-		this.durationMs = longestFragment * 1e3;
+		const data = await engine.fetchManifest(url);
+		engine.data = data;
+		const longestFragment = Object.values(engine.data).reduce((max, fragment) => Math.max(max, fragment.duration / fragment.timescale), 0);
+		engine.durationMs = longestFragment * 1e3;
+		if (src.startsWith("/")) engine.src = src.slice(1);
+		return engine;
 	}
 	get audioTrackIndex() {
 		return Object.values(this.data).find((track) => track.type === "audio");
@@ -67,16 +68,16 @@ var AssetMediaEngine = class AssetMediaEngine extends BaseMediaEngine {
 		const initSegment = this.data[rendition.trackId]?.initSegment;
 		if (!initSegment) throw new Error("Init segment not found");
 		const headers = { Range: `bytes=${initSegment.offset}-${initSegment.offset + initSegment.size - 1}` };
-		return this.fetchMediaCacheWithHeaders(url, headers, signal);
+		return this.fetchMediaWithHeaders(url, headers, signal);
 	}
-	async fetchMediaSegmentImpl(segmentId, rendition, signal) {
+	async fetchMediaSegment(segmentId, rendition, signal) {
 		if (!rendition.trackId) throw new Error("Track ID is required for asset metadata");
 		if (segmentId === void 0) throw new Error("Segment ID is not available");
 		const url = this.buildMediaSegmentUrl(rendition.trackId, segmentId);
 		const mediaSegment = this.data[rendition.trackId]?.segments[segmentId];
 		if (!mediaSegment) throw new Error("Media segment not found");
 		const headers = { Range: `bytes=${mediaSegment.offset}-${mediaSegment.offset + mediaSegment.size - 1}` };
-		return this.fetchMediaCacheWithHeaders(url, headers, signal);
+		return this.fetchMediaWithHeaders(url, headers, signal);
 	}
 	/**
 	* Calculate audio segments for variable-duration segments using track fragment index

package/dist/elements/EFMedia/BaseMediaEngine.d.ts

@@ -1,28 +1,53 @@
+import { RequestDeduplicator } from '../../transcoding/cache/RequestDeduplicator.js';
 import { AudioRendition, SegmentTimeRange, VideoRendition } from '../../transcoding/types';
+import { SizeAwareLRUCache } from '../../utils/LRUCache.js';
 import { EFMedia } from '../EFMedia.js';
+export declare const mediaCache: SizeAwareLRUCache<string>;
+export declare const globalRequestDeduplicator: RequestDeduplicator;
 export declare abstract class BaseMediaEngine {
-    private requestDeduplicator;
+    protected host: EFMedia;
+    constructor(host: EFMedia);
     abstract get videoRendition(): VideoRendition | undefined;
     abstract get audioRendition(): AudioRendition | undefined;
-    abstract get host(): EFMedia;
     getVideoRendition(): VideoRendition;
     getAudioRendition(): AudioRendition;
     /**
      * Generate cache key for segment requests
      */
     private getSegmentCacheKey;
+    /**
+     * Unified fetch method with caching and global deduplication
+     * All requests (media, manifest, init segments) go through this method
+     */
+    protected fetchWithCache(url: string, options: {
+        responseType: "arrayBuffer" | "json";
+        headers?: Record<string, string>;
+        signal?: AbortSignal;
+    }): Promise<any>;
+    /**
+     * Handles abort logic for a cached request without affecting the underlying fetch
+     * This allows multiple instances to share the same cached request while each
+     * manages their own abort behavior
+     */
+    private handleAbortForCachedRequest;
+    fetchMedia(url: string, signal?: AbortSignal): Promise<ArrayBuffer>;
+    fetchManifest(url: string, signal?: AbortSignal): Promise<any>;
+    fetchMediaWithHeaders(url: string, headers: Record<string, string>, signal?: AbortSignal): Promise<ArrayBuffer>;
+    fetchMediaCache(url: string, signal?: AbortSignal): Promise<ArrayBuffer>;
+    fetchManifestCache(url: string, signal?: AbortSignal): Promise<any>;
+    fetchMediaCacheWithHeaders(url: string, headers: Record<string, string>, signal?: AbortSignal): Promise<ArrayBuffer>;
     /**
      * Abstract method for actual segment fetching - implemented by subclasses
      */
-    abstract fetchMediaSegmentImpl(segmentId: number, rendition: {
+    abstract fetchMediaSegment(segmentId: number, rendition: {
         trackId: number | undefined;
         src: string;
     }): Promise<ArrayBuffer>;
     /**
      * Fetch media segment with built-in deduplication
-     * Eliminates the need for separate coordinators - cleaner architecture
+     * Now uses global deduplication for all requests
      */
-    fetchMediaSegment(segmentId: number, rendition: {
+    fetchMediaSegmentWithDeduplication(segmentId: number, rendition: {
         trackId: number | undefined;
         src: string;
     }, _signal?: AbortSignal): Promise<ArrayBuffer>;
@@ -41,12 +66,6 @@ export declare abstract class BaseMediaEngine {
      * Cancel all active segment requests (for cleanup)
      */
     cancelAllSegmentRequests(): void;
-    fetchMediaCache(mediaUrl: string): Promise<ArrayBuffer>;
-    /**
-     * Enhanced caching method that supports custom headers (e.g., Range requests)
-     * Cache key includes both URL and headers for proper cache isolation
-     */
-    fetchMediaCacheWithHeaders(mediaUrl: string, headers?: Record<string, string>, signal?: AbortSignal): Promise<ArrayBuffer>;
     /**
      * Calculate audio segments needed for a time range
      * Each media engine implements this based on their segment structure

package/dist/elements/EFMedia/BaseMediaEngine.js

@@ -1,9 +1,10 @@
 import { RequestDeduplicator } from "../../transcoding/cache/RequestDeduplicator.js";
 import { SizeAwareLRUCache } from "../../utils/LRUCache.js";
 const mediaCache = new SizeAwareLRUCache(100 * 1024 * 1024);
+const globalRequestDeduplicator = new RequestDeduplicator();
 var BaseMediaEngine = class {
-	constructor() {
-		this.requestDeduplicator = new RequestDeduplicator();
+	constructor(host) {
+		this.host = host;
 	}
 	getVideoRendition() {
 		if (!this.videoRendition) throw new Error("No video rendition available");
@@ -20,13 +21,86 @@ var BaseMediaEngine = class {
 		return `${rendition.src}-${rendition.id}-${segmentId}-${rendition.trackId}`;
 	}
 	/**
+	* Unified fetch method with caching and global deduplication
+	* All requests (media, manifest, init segments) go through this method
+	*/
+	async fetchWithCache(url, options) {
+		const { responseType, headers, signal } = options;
+		const cacheKey = headers ? `${url}:${JSON.stringify(headers)}` : url;
+		const cached = mediaCache.get(cacheKey);
+		if (cached) {
+			if (signal) return this.handleAbortForCachedRequest(cached, signal);
+			return cached;
+		}
+		const promise = globalRequestDeduplicator.executeRequest(cacheKey, async () => {
+			try {
+				const response = await this.host.fetch(url, { headers });
+				if (responseType === "json") return response.json();
+				return response.arrayBuffer();
+			} catch (error) {
+				if (error instanceof DOMException && error.name === "AbortError") mediaCache.delete(cacheKey);
+				throw error;
+			}
+		});
+		mediaCache.set(cacheKey, promise);
+		promise.catch((error) => {
+			if (error instanceof DOMException && error.name === "AbortError") mediaCache.delete(cacheKey);
+		});
+		if (signal) return this.handleAbortForCachedRequest(promise, signal);
+		return promise;
+	}
+	/**
+	* Handles abort logic for a cached request without affecting the underlying fetch
+	* This allows multiple instances to share the same cached request while each
+	* manages their own abort behavior
+	*/
+	handleAbortForCachedRequest(promise, signal) {
+		if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+		return Promise.race([promise, new Promise((_, reject) => {
+			signal.addEventListener("abort", () => {
+				reject(new DOMException("Aborted", "AbortError"));
+			});
+		})]);
+	}
+	async fetchMedia(url, signal) {
+		if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+		return this.fetchWithCache(url, {
+			responseType: "arrayBuffer",
+			signal
+		});
+	}
+	async fetchManifest(url, signal) {
+		if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+		return this.fetchWithCache(url, {
+			responseType: "json",
+			signal
+		});
+	}
+	async fetchMediaWithHeaders(url, headers, signal) {
+		if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+		return this.fetchWithCache(url, {
+			responseType: "arrayBuffer",
+			headers,
+			signal
+		});
+	}
+	async fetchMediaCache(url, signal) {
+		return this.fetchMedia(url, signal);
+	}
+	async fetchManifestCache(url, signal) {
+		return this.fetchManifest(url, signal);
+	}
+	async fetchMediaCacheWithHeaders(url, headers, signal) {
+		return this.fetchMediaWithHeaders(url, headers, signal);
+	}
+	/**
 	* Fetch media segment with built-in deduplication
-	* Eliminates the need for separate coordinators - cleaner architecture
+	* Now uses global deduplication for all requests
 	*/
-	async fetchMediaSegment(segmentId, rendition, _signal) {
+	async fetchMediaSegmentWithDeduplication(segmentId, rendition, _signal) {
 		const cacheKey = this.getSegmentCacheKey(segmentId, rendition);
-		return this.requestDeduplicator.executeRequest(cacheKey, async () => {
-			return this.fetchMediaSegmentImpl(segmentId, rendition);
+		return globalRequestDeduplicator.executeRequest(cacheKey, async () => {
+			return this.fetchMediaSegment(segmentId, rendition);
 		});
 	}
 	/**
@@ -34,41 +108,19 @@ var BaseMediaEngine = class {
 	*/
 	isSegmentBeingFetched(segmentId, rendition) {
 		const cacheKey = this.getSegmentCacheKey(segmentId, rendition);
-		return this.requestDeduplicator.isPending(cacheKey);
+		return globalRequestDeduplicator.isPending(cacheKey);
 	}
 	/**
 	* Get count of active segment requests (for debugging/monitoring)
 	*/
 	getActiveSegmentRequestCount() {
-		return this.requestDeduplicator.getPendingCount();
+		return globalRequestDeduplicator.getPendingCount();
 	}
 	/**
 	* Cancel all active segment requests (for cleanup)
 	*/
 	cancelAllSegmentRequests() {
-		this.requestDeduplicator.clear();
-	}
-	async fetchMediaCache(mediaUrl) {
-		const cached = mediaCache.get(mediaUrl);
-		if (cached) return cached;
-		const promise = this.host.fetch(mediaUrl).then((response) => response.arrayBuffer());
-		mediaCache.set(mediaUrl, promise);
-		return promise;
-	}
-	/**
-	* Enhanced caching method that supports custom headers (e.g., Range requests)
-	* Cache key includes both URL and headers for proper cache isolation
-	*/
-	async fetchMediaCacheWithHeaders(mediaUrl, headers, signal) {
-		const cacheKey = headers ? `${mediaUrl}:${JSON.stringify(headers)}` : mediaUrl;
-		const cached = mediaCache.get(cacheKey);
-		if (cached) return cached;
-		const promise = this.host.fetch(mediaUrl, {
-			headers,
-			signal
-		}).then((response) => response.arrayBuffer());
-		mediaCache.set(cacheKey, promise);
-		return promise;
+		globalRequestDeduplicator.clear();
 	}
 	/**
 	* Calculate audio segments needed for a time range

package/dist/elements/EFMedia/JitMediaEngine.d.ts

@@ -1,14 +1,12 @@
 import { AudioRendition, MediaEngine, RenditionId, VideoRendition } from '../../transcoding/types';
-import { ManifestResponse } from '../../transcoding/types/index.js';
 import { UrlGenerator } from '../../transcoding/utils/UrlGenerator';
 import { EFMedia } from '../EFMedia.js';
 import { BaseMediaEngine } from './BaseMediaEngine';
 export declare class JitMediaEngine extends BaseMediaEngine implements MediaEngine {
-    host: EFMedia;
     private urlGenerator;
     private data;
     static fetch(host: EFMedia, urlGenerator: UrlGenerator, url: string): Promise<JitMediaEngine>;
-    constructor(host: EFMedia, urlGenerator: UrlGenerator, data: ManifestResponse);
+    constructor(host: EFMedia, urlGenerator: UrlGenerator);
     get durationMs(): number;
     get src(): string;
     get audioRendition(): AudioRendition | undefined;
@@ -22,7 +20,7 @@ export declare class JitMediaEngine extends BaseMediaEngine implements MediaEngi
         trackId: number | undefined;
         src: string;
     }, signal: AbortSignal): Promise<ArrayBuffer>;
-    fetchMediaSegmentImpl(segmentId: number, rendition: {
+    fetchMediaSegment(segmentId: number, rendition: {
         id?: RenditionId;
         trackId: number | undefined;
         src: string;

package/dist/elements/EFMedia/JitMediaEngine.js

@@ -1,15 +1,15 @@
 import { BaseMediaEngine } from "./BaseMediaEngine.js";
 var JitMediaEngine = class JitMediaEngine extends BaseMediaEngine {
 	static async fetch(host, urlGenerator, url) {
-		const response = await host.fetch(url);
-		const data = await response.json();
-		return new JitMediaEngine(host, urlGenerator, data);
+		const engine = new JitMediaEngine(host, urlGenerator);
+		const data = await engine.fetchManifest(url);
+		engine.data = data;
+		return engine;
 	}
-	constructor(host, urlGenerator, data) {
-		super();
-		this.host = host;
+	constructor(host, urlGenerator) {
+		super(host);
+		this.data = {};
 		this.urlGenerator = urlGenerator;
-		this.data = data;
 	}
 	get durationMs() {
 		return this.data.durationMs;
@@ -18,6 +18,7 @@ var JitMediaEngine = class JitMediaEngine extends BaseMediaEngine {
 		return this.data.sourceUrl;
 	}
 	get audioRendition() {
+		if (!this.data.audioRenditions || this.data.audioRenditions.length === 0) return void 0;
 		const rendition = this.data.audioRenditions[0];
 		if (!rendition) return void 0;
 		return {
@@ -29,6 +30,7 @@ var JitMediaEngine = class JitMediaEngine extends BaseMediaEngine {
 		};
 	}
 	get videoRendition() {
+		if (!this.data.videoRenditions || this.data.videoRenditions.length === 0) return void 0;
 		const rendition = this.data.videoRenditions[0];
 		if (!rendition) return void 0;
 		return {
@@ -45,14 +47,12 @@ var JitMediaEngine = class JitMediaEngine extends BaseMediaEngine {
 	async fetchInitSegment(rendition, signal) {
 		if (!rendition.id) throw new Error("Rendition ID is required for JIT metadata");
 		const url = this.urlGenerator.generateSegmentUrl("init", rendition.id, this);
-		const response = await this.host.fetch(url, { signal });
-		const arrayBuffer = await response.arrayBuffer();
-		return arrayBuffer;
+		return this.fetchMedia(url, signal);
 	}
-	async fetchMediaSegmentImpl(segmentId, rendition) {
+	async fetchMediaSegment(segmentId, rendition) {
 		if (!rendition.id) throw new Error("Rendition ID is required for JIT metadata");
 		const url = this.urlGenerator.generateSegmentUrl(segmentId, rendition.id, this);
-		return this.fetchMediaCache(url);
+		return this.fetchMedia(url);
 	}
 	computeSegmentId(desiredSeekTimeMs, rendition) {
 		if (desiredSeekTimeMs > this.durationMs) return void 0;

package/dist/elements/EFTemporal.d.ts

@@ -187,6 +187,7 @@ export declare const deepGetElementsWithFrameTasks: (element: Element, elements?
 }>) => (HTMLElement & {
     frameTask: Task;
 })[];
+export declare const clearTemporalCacheForElement: (element: Element) => void;
 export declare const shallowGetTemporalElements: (element: Element, temporals?: TemporalMixinInterface[]) => TemporalMixinInterface[];
 export declare class OwnCurrentTimeController implements ReactiveController {
     private host;

package/dist/elements/EFTemporal.js

@@ -15,17 +15,21 @@ const deepGetElementsWithFrameTasks = (element, elements = []) => {
 	return elements;
 };
 let temporalCache;
+let modifiedElements = /* @__PURE__ */ new WeakSet();
 const resetTemporalCache = () => {
 	temporalCache = /* @__PURE__ */ new Map();
+	modifiedElements = /* @__PURE__ */ new WeakSet();
 	if (typeof requestAnimationFrame !== "undefined") requestAnimationFrame(resetTemporalCache);
 };
 resetTemporalCache();
+const clearTemporalCacheForElement = (element) => {
+	temporalCache.delete(element);
+	modifiedElements.add(element);
+};
 const shallowGetTemporalElements = (element, temporals = []) => {
-	const cachedResult = temporalCache.get(element);
-	if (cachedResult) return cachedResult;
+	temporals.length = 0;
 	for (const child of element.children) if (isEFTemporal(child)) temporals.push(child);
 	else shallowGetTemporalElements(child, temporals);
-	temporalCache.set(element, temporals);
 	return temporals;
 };
 var OwnCurrentTimeController = class {
@@ -281,4 +285,4 @@ const EFTemporal = (superClass) => {
 	Object.defineProperty(TemporalMixinClass.prototype, EF_TEMPORAL, { value: true });
 	return TemporalMixinClass;
 };
-export { EFTemporal, deepGetElementsWithFrameTasks, flushStartTimeMsCache, isEFTemporal, shallowGetTemporalElements, timegroupContext };
+export { EFTemporal, clearTemporalCacheForElement, deepGetElementsWithFrameTasks, flushStartTimeMsCache, isEFTemporal, shallowGetTemporalElements, timegroupContext };

package/dist/elements/EFTimegroup.js

@@ -53,6 +53,7 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	}
 	#currentTime = 0;
 	#resizeObserver;
+	#childObserver;
 	set currentTime(time) {
 		const newTime = Math.max(0, Math.min(time, this.durationMs / 1e3));
 		if (this.isRootTimegroup && this.isFrameUpdateInProgress) {
@@ -128,6 +129,25 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		});
 		if (this.parentTimegroup) new TimegroupController(this.parentTimegroup, this);
 		if (this.shouldWrapWithWorkbench()) this.wrapWithWorkbench();
+		this.#childObserver = new MutationObserver((mutations) => {
+			let shouldUpdate = false;
+			for (const mutation of mutations) if (mutation.type === "childList") shouldUpdate = true;
+			else if (mutation.type === "attributes") {
+				if (mutation.attributeName === "duration" || mutation.attributeName === "mode") shouldUpdate = true;
+			}
+			if (shouldUpdate) {
+				import("./EFTemporal.js").then(({ clearTemporalCacheForElement }) => {
+					clearTemporalCacheForElement(this);
+				});
+				this.requestUpdate();
+			}
+		});
+		this.#childObserver.observe(this, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ["duration", "mode"]
+		});
 		requestAnimationFrame(() => {
 			this.updateAnimations();
 		});
@@ -135,6 +155,7 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#resizeObserver?.disconnect();
+		this.#childObserver?.disconnect();
 	}
 	get storageKey() {
 		if (!this.id) throw new Error("Timegroup must have an id to use localStorage.");

package/dist/elements/EFVideo.d.ts

@@ -11,7 +11,6 @@ interface LoadingState {
 }
 declare const EFVideo_base: typeof EFMedia;
 export declare class EFVideo extends EFVideo_base {
-    static get observedAttributes(): string[];
     static styles: import('lit').CSSResult[];
     canvasRef: import('lit-html/directives/ref').Ref<HTMLCanvasElement>;
     /**

package/dist/elements/EFVideo.js

@@ -15,15 +15,6 @@ import _decorate from "@oxc-project/runtime/helpers/decorate";
 import { createRef, ref } from "lit/directives/ref.js";
 const log = debug("ef:elements:EFVideo");
 let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
-	static get observedAttributes() {
-		const parentAttributes = EFMedia.observedAttributes || [];
-		return [
-			...parentAttributes,
-			"video-buffer-duration",
-			"max-video-buffer-fetches",
-			"enable-video-buffering"
-		];
-	}
 	static {
 		this.styles = [css`
       :host {

package/dist/elements/TargetController.js

@@ -21,7 +21,8 @@ var TargetRegistry = class {
 		this.idMap.set(id, target);
 		for (const callback of this.callbacks.get(id) ?? []) callback(target);
 	}
-	unregister(id) {
+	unregister(id, target) {
+		if (this.idMap.get(id) !== target) return;
 		for (const callback of this.callbacks.get(id) ?? []) callback(void 0);
 		this.idMap.delete(id);
 		this.callbacks.delete(id);
@@ -46,7 +47,7 @@ const EFTargetable = (superClass) => {
 		updateRegistry(oldValue, newValue) {
 			if (!this.#registry) return;
 			if (oldValue === newValue) return;
-			if (oldValue) this.#registry.unregister(oldValue);
+			if (oldValue) this.#registry.unregister(oldValue, this);
 			if (newValue) this.#registry.register(newValue, this);
 		}
 		connectedCallback() {

package/dist/getRenderInfo.d.ts

@@ -18,9 +18,9 @@ export declare const RenderInfo: z.ZodObject<{
         efImage: string[];
     }>;
 }, "strip", z.ZodTypeAny, {
+    durationMs: number;
     width: number;
     height: number;
-    durationMs: number;
     fps: number;
     assets: {
         efMedia: Record<string, any>;
@@ -28,9 +28,9 @@ export declare const RenderInfo: z.ZodObject<{
         efImage: string[];
     };
 }, {
+    durationMs: number;
     width: number;
     height: number;
-    durationMs: number;
     fps: number;
     assets: {
         efMedia: Record<string, any>;

package/dist/gui/ContextMixin.browsertest.d.ts

@@ -2,9 +2,14 @@ import { LitElement } from 'lit';
 declare const TestContext_base: (new (...args: any[]) => import('./ContextMixin.js').ContextMixinInterface) & typeof LitElement;
 declare class TestContext extends TestContext_base {
 }
+declare const TestContextElement_base: (new (...args: any[]) => import('./ContextMixin.js').ContextMixinInterface) & typeof LitElement;
+declare class TestContextElement extends TestContextElement_base {
+    render(): import('../elements/EFTimegroup.js').EFTimegroup & Element;
+}
 declare global {
     interface HTMLElementTagNameMap {
         "test-context": TestContext;
+        "test-context-reactivity": TestContextElement;
     }
 }
 export {};