@editframe/elements 0.20.4-beta.0 → 0.21.0-beta.0

package/dist/gui/EFWorkbench.js

@@ -1,10 +1,10 @@
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
 import { ContextMixin } from "./ContextMixin.js";
 import { TWMixin } from "./TWMixin2.js";
 import { LitElement, css, html } from "lit";
 import { customElement, eventOptions, property } from "lit/decorators.js";
-import _decorate from "@oxc-project/runtime/helpers/decorate";
 import { createRef, ref } from "lit/directives/ref.js";
-let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement)) {
+var EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement)) {
 	constructor(..._args) {
 		super(..._args);
 		this.rendering = false;
@@ -82,10 +82,10 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
     `;
 	}
 };
-_decorate([property({ type: Boolean })], EFWorkbench.prototype, "rendering", void 0);
-_decorate([eventOptions({
+__decorate([property({ type: Boolean })], EFWorkbench.prototype, "rendering", void 0);
+__decorate([eventOptions({
 	passive: false,
 	capture: true
 })], EFWorkbench.prototype, "handleStageWheel", null);
-EFWorkbench = _decorate([customElement("ef-workbench")], EFWorkbench);
+EFWorkbench = __decorate([customElement("ef-workbench")], EFWorkbench);
 export { EFWorkbench };

package/dist/gui/TWMixin2.js

@@ -1,5 +1,5 @@
 import TWMixin_default from "./TWMixin.js";
-let twSheet = null;
+var twSheet = null;
 if (typeof window !== "undefined" && typeof CSSStyleSheet !== "undefined") try {
 	twSheet = new CSSStyleSheet();
 	if (typeof twSheet.replaceSync === "function") twSheet.replaceSync(TWMixin_default);

package/dist/index.d.ts

@@ -19,3 +19,4 @@ export { EFFitScale } from './gui/EFFitScale.js';
 export { EFSurface } from './elements/EFSurface.ts';
 export { EFThumbnailStrip } from './elements/EFThumbnailStrip.ts';
 export { getRenderInfo, RenderInfo } from './getRenderInfo.js';
+export type { TraceContext } from './otel/tracingHelpers.js';

package/dist/otel/BridgeSpanExporter.d.ts

@@ -0,0 +1,13 @@
+import { ExportResult } from '@opentelemetry/core';
+import { ReadableSpan, SpanExporter } from '@opentelemetry/sdk-trace-base';
+interface BridgeWithSpanExport {
+    exportSpans?: (endpoint: string, payload: string) => void;
+}
+export declare class BridgeSpanExporter implements SpanExporter {
+    private bridge;
+    private endpoint;
+    constructor(bridge: BridgeWithSpanExport, endpoint: string);
+    export(spans: ReadableSpan[], resultCallback: (result: ExportResult) => void): void;
+    shutdown(): Promise<void>;
+}
+export {};

package/dist/otel/BridgeSpanExporter.js

@@ -0,0 +1,87 @@
+import { ExportResultCode } from "@opentelemetry/core";
+function toHex(value) {
+	if (typeof value === "string") return value;
+	if (Array.isArray(value)) return value.map((b) => {
+		return (typeof b === "number" ? b : 0).toString(16).padStart(2, "0");
+	}).join("");
+	if (ArrayBuffer.isView(value)) return Array.from(value).map((b) => b.toString(16).padStart(2, "0")).join("");
+	return String(value);
+}
+function convertAttribute(value) {
+	if (typeof value === "string") return { stringValue: value };
+	if (typeof value === "number") return Number.isInteger(value) ? { intValue: value } : { doubleValue: value };
+	if (typeof value === "boolean") return { boolValue: value };
+	if (Array.isArray(value)) return { arrayValue: { values: value.map(convertAttribute) } };
+	return { stringValue: String(value) };
+}
+var BridgeSpanExporter = class {
+	constructor(bridge, endpoint) {
+		this.bridge = bridge;
+		this.endpoint = endpoint;
+	}
+	export(spans, resultCallback) {
+		if (!this.bridge?.exportSpans) {
+			resultCallback({ code: ExportResultCode.FAILED });
+			return;
+		}
+		try {
+			const otlpPayload = { resourceSpans: [{
+				resource: { attributes: Object.entries(spans[0]?.resource?.attributes || {}).map(([key, value]) => ({
+					key,
+					value: convertAttribute(value)
+				})) },
+				scopeSpans: [{
+					scope: {
+						name: "telecine-browser",
+						version: "1.0.0"
+					},
+					spans: spans.map((span) => {
+						const ctx = span.spanContext();
+						return {
+							traceId: toHex(ctx.traceId),
+							spanId: toHex(ctx.spanId),
+							parentSpanId: span.parentSpanId ? toHex(span.parentSpanId) : void 0,
+							name: span.name,
+							kind: span.kind,
+							startTimeUnixNano: String(span.startTime[0] * 1e9 + span.startTime[1]),
+							endTimeUnixNano: String(span.endTime[0] * 1e9 + span.endTime[1]),
+							attributes: Object.entries(span.attributes).map(([key, value]) => ({
+								key,
+								value: convertAttribute(value)
+							})),
+							status: span.status,
+							events: span.events.map((event) => ({
+								timeUnixNano: String(event.time[0] * 1e9 + event.time[1]),
+								name: event.name,
+								attributes: Object.entries(event.attributes || {}).map(([key, value]) => ({
+									key,
+									value: convertAttribute(value)
+								}))
+							})),
+							links: span.links.map((link) => ({
+								traceId: toHex(link.context.traceId),
+								spanId: toHex(link.context.spanId),
+								attributes: Object.entries(link.attributes || {}).map(([key, value]) => ({
+									key,
+									value: convertAttribute(value)
+								}))
+							}))
+						};
+					})
+				}]
+			}] };
+			const serializedPayload = JSON.stringify(otlpPayload);
+			this.bridge.exportSpans(this.endpoint, serializedPayload);
+			resultCallback({ code: ExportResultCode.SUCCESS });
+		} catch (error) {
+			resultCallback({
+				code: ExportResultCode.FAILED,
+				error: error instanceof Error ? error : new Error(String(error))
+			});
+		}
+	}
+	shutdown() {
+		return Promise.resolve();
+	}
+};
+export { BridgeSpanExporter };

package/dist/otel/setupBrowserTracing.d.ts

@@ -0,0 +1,12 @@
+interface BridgeWithSpanExport {
+    exportSpans?: (endpoint: string, payload: string) => void;
+}
+export interface BrowserTracingConfig {
+    otelEndpoint: string;
+    serviceName?: string;
+    bridge?: BridgeWithSpanExport;
+    useBatching?: boolean;
+}
+export declare function setupBrowserTracing(config: BrowserTracingConfig): void;
+export declare function isBrowserTracingInitialized(): boolean;
+export {};

package/dist/otel/setupBrowserTracing.js

@@ -0,0 +1,30 @@
+import { BridgeSpanExporter } from "./BridgeSpanExporter.js";
+import { ZoneContextManager } from "@opentelemetry/context-zone";
+import { Resource } from "@opentelemetry/resources";
+import { BatchSpanProcessor, SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
+import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";
+import { ATTR_SERVICE_NAME } from "@opentelemetry/semantic-conventions";
+var isInitialized = false;
+var provider = null;
+function setupBrowserTracing(config) {
+	if (isInitialized) return;
+	try {
+		if (!config.bridge) throw new Error("Bridge is required for browser tracing");
+		const exporter = new BridgeSpanExporter(config.bridge, config.otelEndpoint);
+		const spanProcessor = config.useBatching ? new BatchSpanProcessor(exporter, {
+			maxQueueSize: 100,
+			maxExportBatchSize: 10,
+			scheduledDelayMillis: 500
+		}) : new SimpleSpanProcessor(exporter);
+		provider = new WebTracerProvider({
+			resource: new Resource({ [ATTR_SERVICE_NAME]: config.serviceName || "telecine-browser" }),
+			spanProcessors: [spanProcessor]
+		});
+		provider.register({ contextManager: new ZoneContextManager() });
+		isInitialized = true;
+	} catch (error) {
+		console.error("Failed to initialize browser tracing:", error);
+		throw error;
+	}
+}
+export { setupBrowserTracing };

package/dist/otel/tracingHelpers.d.ts

@@ -0,0 +1,34 @@
+import { Context, Span } from '@opentelemetry/api';
+export type TraceContext = Record<string, string>;
+/**
+ * Enable tracing globally. Call this during initialization if tracing is requested.
+ */
+export declare function enableTracing(): void;
+/**
+ * Check if tracing is currently enabled.
+ */
+export declare function isTracingEnabled(): boolean;
+/**
+ * Set the current frame's span. Call this when starting a frame render.
+ * All spans created during this frame will use this as parent if
+ * Zone.js doesn't provide one via context.active()
+ */
+export declare function setCurrentFrameSpan(span: Span): void;
+/**
+ * Clear the current frame span. Call this when a frame completes.
+ */
+export declare function clearCurrentFrameSpan(): void;
+export declare function extractParentContext(traceContext?: TraceContext): Context;
+/**
+ * Get the active span's context to pass to child operations
+ * Use this when calling functions that create child spans
+ */
+export declare function getActiveContext(): Context;
+/**
+ * Wrapper that passes span context explicitly to the function
+ * Use this for operations that need to store or propagate context across boundaries
+ */
+export declare function withSpanAndContext<T>(name: string, attributes: Record<string, string | number | boolean> | undefined, parentContext: Context | undefined, fn: (span: Span, activeContext: Context) => Promise<T>): Promise<T>;
+export declare function createSpan(name: string, attributes?: Record<string, string | number | boolean>, parentContext?: Context): Span;
+export declare function withSpan<T>(name: string, attributes: Record<string, string | number | boolean> | undefined, parentContext: Context | undefined, fn: (span: Span) => Promise<T>): Promise<T>;
+export declare function withSpanSync<T>(name: string, attributes: Record<string, string | number | boolean> | undefined, parentContext: Context | undefined, fn: (span: Span) => T): T;

package/dist/otel/tracingHelpers.js

@@ -0,0 +1,113 @@
+import { context, propagation, trace } from "@opentelemetry/api";
+var tracingEnabled = false;
+function enableTracing() {
+	tracingEnabled = true;
+}
+function isTracingEnabled() {
+	return tracingEnabled;
+}
+var currentFrameSpan;
+function setCurrentFrameSpan(span) {
+	currentFrameSpan = span;
+}
+function clearCurrentFrameSpan() {
+	currentFrameSpan = void 0;
+}
+function extractParentContext(traceContext) {
+	if (!traceContext) return context.active();
+	try {
+		return propagation.extract(context.active(), traceContext);
+	} catch (_error) {
+		return context.active();
+	}
+}
+async function withSpanAndContext(name, attributes, parentContext, fn) {
+	if (!tracingEnabled) {
+		const noopSpan = trace.getTracer("telecine-browser").startSpan(name);
+		const ctx$1 = parentContext || context.active();
+		const result = await fn(noopSpan, ctx$1);
+		noopSpan.end();
+		return result;
+	}
+	const tracer = trace.getTracer("telecine-browser");
+	let ctx;
+	if (parentContext) ctx = parentContext;
+	else {
+		const activeContext = context.active();
+		if (trace.getSpan(activeContext)?.isRecording?.()) ctx = activeContext;
+		else if (currentFrameSpan) ctx = trace.setSpan(context.active(), currentFrameSpan);
+		else ctx = activeContext;
+	}
+	const span = tracer.startSpan(name, { attributes }, ctx);
+	const spanContext = trace.setSpan(ctx, span);
+	try {
+		const result = await context.with(spanContext, async () => {
+			return fn(span, spanContext);
+		});
+		span.end();
+		return result;
+	} catch (error) {
+		span.recordException(error);
+		span.end();
+		throw error;
+	}
+}
+function createSpan(name, attributes, parentContext) {
+	const tracer = trace.getTracer("telecine-browser");
+	const ctx = parentContext || context.active();
+	return context.with(ctx, () => {
+		const span = tracer.startSpan(name);
+		if (attributes) span.setAttributes(attributes);
+		return span;
+	});
+}
+async function withSpan(name, attributes, parentContext, fn) {
+	if (!tracingEnabled) {
+		const noopSpan = trace.getTracer("telecine-browser").startSpan(name);
+		const result = await fn(noopSpan);
+		noopSpan.end();
+		return result;
+	}
+	const tracer = trace.getTracer("telecine-browser");
+	let ctx;
+	if (parentContext) ctx = parentContext;
+	else {
+		const activeContext = context.active();
+		if (trace.getSpan(activeContext)?.isRecording?.()) ctx = activeContext;
+		else if (currentFrameSpan) ctx = trace.setSpan(context.active(), currentFrameSpan);
+		else ctx = activeContext;
+	}
+	const span = tracer.startSpan(name, { attributes }, ctx);
+	const spanContext = trace.setSpan(ctx, span);
+	try {
+		const result = await context.with(spanContext, async () => {
+			return fn(span);
+		});
+		span.end();
+		return result;
+	} catch (error) {
+		span.recordException(error);
+		span.end();
+		throw error;
+	}
+}
+function withSpanSync(name, attributes, parentContext, fn) {
+	if (!tracingEnabled) {
+		const noopSpan = trace.getTracer("telecine-browser").startSpan(name);
+		const result = fn(noopSpan);
+		noopSpan.end();
+		return result;
+	}
+	const span = createSpan(name, attributes, parentContext);
+	const ctx = parentContext || context.active();
+	try {
+		const result = context.with(trace.setSpan(ctx, span), () => fn(span));
+		span.end();
+		return result;
+	} catch (error) {
+		span.recordException(error);
+		span.end();
+		throw error;
+	}
+}
+export { clearCurrentFrameSpan, enableTracing, extractParentContext, isTracingEnabled, setCurrentFrameSpan, withSpan, withSpanAndContext, withSpanSync };

package/dist/transcoding/cache/RequestDeduplicator.js

@@ -1,16 +1,7 @@
-/**
-* Request deduplication utility
-* Manages pending requests to prevent concurrent duplicate requests
-*/
 var RequestDeduplicator = class {
 	constructor() {
 		this.pendingRequests = /* @__PURE__ */ new Map();
 	}
-	/**
-	* Execute a request with deduplication
-	* If a request with the same key is already pending, return the existing promise
-	* Otherwise, execute the request factory and track the promise
-	*/
 	async executeRequest(key, requestFactory) {
 		const existingRequest = this.pendingRequests.get(key);
 		if (existingRequest) return existingRequest;
@@ -25,27 +16,15 @@ var RequestDeduplicator = class {
 			throw error;
 		}
 	}
-	/**
-	* Clear all pending requests (used in cache clearing)
-	*/
 	clear() {
 		this.pendingRequests.clear();
 	}
-	/**
-	* Get number of pending requests
-	*/
 	getPendingCount() {
 		return this.pendingRequests.size;
 	}
-	/**
-	* Check if a request is pending
-	*/
 	isPending(key) {
 		return this.pendingRequests.has(key);
 	}
-	/**
-	* Get all pending request keys
-	*/
 	getPendingKeys() {
 		return Array.from(this.pendingRequests.keys());
 	}

package/dist/transcoding/cache/URLTokenDeduplicator.js

@@ -2,10 +2,6 @@ var URLTokenDeduplicator = class {
 	constructor() {
 		this.tokenCache = /* @__PURE__ */ new Map();
 	}
-	/**
-	* Get or create a URL token with global deduplication
-	* Multiple requests for the same cache key will share the same token promise
-	*/
 	async getToken(cacheKey, tokenFactory, parseExpiration) {
 		const now = Date.now();
 		const cached = this.tokenCache.get(cacheKey);
@@ -27,36 +23,20 @@ var URLTokenDeduplicator = class {
 		});
 		return tokenPromise;
 	}
-	/**
-	* Clear all cached tokens (used in testing)
-	*/
 	clear() {
 		this.tokenCache.clear();
 	}
-	/**
-	* Get number of cached tokens
-	*/
 	getCachedCount() {
 		return this.tokenCache.size;
 	}
-	/**
-	* Check if a token is cached and valid
-	*/
 	hasValidToken(cacheKey) {
 		const cached = this.tokenCache.get(cacheKey);
 		if (!cached) return false;
-		const now = Date.now();
-		return now < cached.expiration;
+		return Date.now() < cached.expiration;
 	}
-	/**
-	* Get all cached token keys
-	*/
 	getCachedKeys() {
 		return Array.from(this.tokenCache.keys());
 	}
-	/**
-	* Remove expired tokens from cache
-	*/
 	cleanup() {
 		const now = Date.now();
 		for (const [key, entry] of this.tokenCache.entries()) if (now >= entry.expiration) this.tokenCache.delete(key);

package/dist/transcoding/utils/UrlGenerator.js

@@ -2,9 +2,6 @@ var UrlGenerator = class {
 	constructor(baseUrl) {
 		this.baseUrl = baseUrl;
 	}
-	/**
-	* Generate video segment URL
-	*/
 	generateSegmentUrl(segmentId, renditionId, metadata) {
 		const audioRendition = metadata.audioRendition;
 		const videoRendition = metadata.videoRendition;
@@ -13,31 +10,17 @@ var UrlGenerator = class {
 			console.error("Rendition not found", metadata);
 			throw new Error(`Rendition ${renditionId} not found`);
 		}
-		const template = segmentId === "init" ? metadata.templates.initSegment : metadata.templates.mediaSegment;
-		return template.replace("{rendition}", renditionId).replace("{segmentId}", segmentId.toString()).replace("{src}", metadata.src).replace("{trackId}", rendition.trackId?.toString() ?? "");
+		return (segmentId === "init" ? metadata.templates.initSegment : metadata.templates.mediaSegment).replace("{rendition}", renditionId).replace("{segmentId}", segmentId.toString()).replace("{src}", metadata.src).replace("{trackId}", rendition.trackId?.toString() ?? "");
 	}
-	/**
-	* Generate init segment URL
-	*/
 	generateInitSegmentUrl(mediaUrl, rendition) {
 		return `${this.baseUrl()}/api/v1/transcode/${rendition}/init.m4s?url=${encodeURIComponent(mediaUrl)}`;
 	}
-	/**
-	* Generate manifest URL
-	*/
 	generateManifestUrl(mediaUrl) {
 		return `${this.baseUrl()}/api/v1/transcode/manifest.json?url=${encodeURIComponent(mediaUrl)}`;
 	}
-	/**
-	* Generate track fragment index URL
-	*/
 	generateTrackFragmentIndexUrl(mediaUrl) {
-		const normalizedSrc = mediaUrl.startsWith("/") ? mediaUrl.slice(1) : mediaUrl;
-		return `/@ef-track-fragment-index/${normalizedSrc}`;
+		return `/@ef-track-fragment-index/${mediaUrl.startsWith("/") ? mediaUrl.slice(1) : mediaUrl}`;
 	}
-	/**
-	* Generate quality presets URL
-	*/
 	generatePresetsUrl() {
 		return `${this.baseUrl()}/api/v1/transcode/presets`;
 	}

package/dist/utils/LRUCache.js

@@ -1,6 +1,3 @@
-/**
-* A simple LRU (Least Recently Used) cache implementation
-*/
 var LRUCache = class {
 	constructor(maxSize) {
 		this.cache = /* @__PURE__ */ new Map();
@@ -35,10 +32,6 @@ var LRUCache = class {
 		return this.cache.size;
 	}
 };
-/**
-* Size-aware LRU cache that tracks memory usage in bytes
-* Evicts entries when total size exceeds the maximum
-*/
 var SizeAwareLRUCache = class {
 	constructor(maxSizeBytes) {
 		this.cache = /* @__PURE__ */ new Map();
@@ -112,17 +105,11 @@ var SizeAwareLRUCache = class {
 		return this.maxSizeBytes;
 	}
 };
-/**
-* Red-Black Tree node colors
-*/
 var Color = /* @__PURE__ */ function(Color$1) {
 	Color$1["RED"] = "RED";
 	Color$1["BLACK"] = "BLACK";
 	return Color$1;
 }(Color || {});
-/**
-* Red-Black Tree node for ordered key storage
-*/
 var RBTreeNode = class {
 	constructor(key, color = Color.RED, left = null, right = null, parent = null) {
 		this.key = key;
@@ -132,10 +119,6 @@ var RBTreeNode = class {
 		this.parent = parent;
 	}
 };
-/**
-* Red-Black Tree implementation for O(log n) operations
-* Supports insert, delete, search, range queries, and nearest neighbor
-*/
 var RedBlackTree = class {
 	constructor(compareFn) {
 		this.root = null;
@@ -198,16 +181,12 @@ var RedBlackTree = class {
 		let current = this.root;
 		while (current) {
 			parent = current;
-			const cmp = this.compareFn(node.key, current.key);
-			current = cmp < 0 ? current.left : current.right;
+			current = this.compareFn(node.key, current.key) < 0 ? current.left : current.right;
 		}
 		node.parent = parent;
 		if (!parent) this.root = node;
-		else {
-			const cmp = this.compareFn(node.key, parent.key);
-			if (cmp < 0) parent.left = node;
-			else parent.right = node;
-		}
+		else if (this.compareFn(node.key, parent.key) < 0) parent.left = node;
+		else parent.right = node;
 	}
 	fixInsert(node) {
 		while (node.parent && node.parent.color === Color.RED) if (node.parent === node.parent.parent?.left) {
@@ -392,10 +371,6 @@ var RedBlackTree = class {
 		if (endCmp < 0) this.inorderRange(node.right, start, end, result);
 	}
 };
-/**
-* LRU cache with binary search capabilities using Red-Black tree
-* All operations are O(log n) for ordered queries and O(1) for LRU operations
-*/
 var OrderedLRUCache = class {
 	constructor(maxSize, compareFn) {
 		this.cache = /* @__PURE__ */ new Map();
@@ -403,9 +378,6 @@ var OrderedLRUCache = class {
 		this.compareFn = compareFn || ((a, b) => a < b ? -1 : a > b ? 1 : 0);
 		this.tree = new RedBlackTree(this.compareFn);
 	}
-	/**
-	* Get value by exact key (O(1))
-	*/
 	get(key) {
 		const value = this.cache.get(key);
 		if (value) {
@@ -414,12 +386,8 @@ var OrderedLRUCache = class {
 		}
 		return value;
 	}
-	/**
-	* Set key-value pair (O(log n) for tree operations, O(1) for cache)
-	*/
 	set(key, value) {
-		const isUpdate = this.cache.has(key);
-		if (isUpdate) this.cache.delete(key);
+		if (this.cache.has(key)) this.cache.delete(key);
 		else {
 			if (this.cache.size >= this.maxSize) {
 				const firstKey = this.cache.keys().next().value;
@@ -432,18 +400,9 @@ var OrderedLRUCache = class {
 		}
 		this.cache.set(key, value);
 	}
-	/**
-	* Find exact key using tree search (O(log n))
-	*/
 	findExact(key) {
-		const foundKey = this.tree.find(key);
-		if (foundKey !== null) return this.get(key);
-		return void 0;
-	}
-	/**
-	* Find keys within distance of center point (O(log n + k) where k is result count)
-	* Returns empty array if no keys found in range
-	*/
+		if (this.tree.find(key) !== null) return this.get(key);
+	}
 	findNearestInRange(center, distance) {
 		const nearestKeys = this.tree.findNearestInRange(center, distance);
 		const result = [];
@@ -456,9 +415,6 @@ var OrderedLRUCache = class {
 		}
 		return result;
 	}
-	/**
-	* Find all key-value pairs in range [start, end] (O(log n + k) where k is result count)
-	*/
 	findRange(start, end) {
 		const keys = this.tree.findRange(start, end);
 		const result = [];
@@ -471,9 +427,6 @@ var OrderedLRUCache = class {
 		}
 		return result;
 	}
-	/**
-	* Get all keys in sorted order (O(n))
-	*/
 	getSortedKeys() {
 		return this.tree.getAllSorted();
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.20.4-beta.0",
+  "version": "0.21.0-beta.0",
   "description": "",
   "exports": {
     ".": {
@@ -27,9 +27,17 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.20.4-beta.0",
+    "@editframe/assets": "0.21.0-beta.0",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
+    "@opentelemetry/api": "^1.9.0",
+    "@opentelemetry/context-zone": "^1.26.0",
+    "@opentelemetry/core": "^1.26.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.53.0",
+    "@opentelemetry/resources": "^1.26.0",
+    "@opentelemetry/sdk-trace-base": "^1.26.0",
+    "@opentelemetry/sdk-trace-web": "^1.26.0",
+    "@opentelemetry/semantic-conventions": "^1.37.0",
     "d3": "^7.9.0",
     "debug": "^4.3.5",
     "lit": "^3.1.4",

package/src/elements/EFCaptions.browsertest.ts

@@ -853,6 +853,7 @@ describe("EFCaptions", () => {
       // Test at exact boundary 2.6s - should show " test" (the starting word)
       timegroup.currentTimeMs = 2600;
       await timegroup.seekTask.taskComplete;
+      await captions.updateComplete;
       await wordContainer.updateComplete;
 
       console.log(`At 2600ms: wordText="${wordContainer.wordText}"`);
@@ -861,6 +862,7 @@ describe("EFCaptions", () => {
       // Test just before boundary 2.599s - should show " timing"
       timegroup.currentTimeMs = 2599;
       await timegroup.seekTask.taskComplete;
+      await captions.updateComplete;
       await wordContainer.updateComplete;
 
       console.log(`At 2599ms: wordText="${wordContainer.wordText}"`);