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

package/src/gui/efContext.ts

@@ -1,6 +1,6 @@
 import { createContext } from "@lit/context";
-import type { ContextMixinInterface } from "./ContextMixin.js";
+import type { ControllableInterface } from "./Controllable.js";
 
-export const efContext = createContext<ContextMixinInterface | null>(
+export const efContext = createContext<ControllableInterface | null>(
   Symbol("efContext"),
 );

package/src/otel/BridgeSpanExporter.ts

@@ -0,0 +1,150 @@
+import { type ExportResult, ExportResultCode } from "@opentelemetry/core";
+import type { ReadableSpan, SpanExporter } from "@opentelemetry/sdk-trace-base";
+
+function toHex(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (Array.isArray(value)) {
+    return value
+      .map((b) => {
+        const byte = typeof b === "number" ? b : 0;
+        return byte.toString(16).padStart(2, "0");
+      })
+      .join("");
+  }
+  if (ArrayBuffer.isView(value)) {
+    return Array.from(value as Uint8Array)
+      .map((b) => b.toString(16).padStart(2, "0"))
+      .join("");
+  }
+  return String(value);
+}
+
+interface OtlpAttributeValue {
+  stringValue?: string;
+  intValue?: number;
+  doubleValue?: number;
+  boolValue?: boolean;
+  arrayValue?: { values: OtlpAttributeValue[] };
+}
+
+function convertAttribute(value: unknown): OtlpAttributeValue {
+  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) };
+}
+
+interface BridgeWithSpanExport {
+  exportSpans?: (endpoint: string, payload: string) => void;
+}
+
+export class BridgeSpanExporter implements SpanExporter {
+  private bridge: BridgeWithSpanExport;
+  private endpoint: string;
+
+  constructor(bridge: BridgeWithSpanExport, endpoint: string) {
+    this.bridge = bridge;
+    this.endpoint = endpoint;
+  }
+
+  export(
+    spans: ReadableSpan[],
+    resultCallback: (result: ExportResult) => void,
+  ): void {
+    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)
+                      : undefined,
+                    name: span.name,
+                    kind: span.kind,
+                    startTimeUnixNano: String(
+                      span.startTime[0] * 1_000_000_000 + span.startTime[1],
+                    ),
+                    endTimeUnixNano: String(
+                      span.endTime[0] * 1_000_000_000 + 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] * 1_000_000_000 + 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(): Promise<void> {
+    return Promise.resolve();
+  }
+}

package/src/otel/setupBrowserTracing.ts

@@ -0,0 +1,73 @@
+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";
+import { BridgeSpanExporter } from "./BridgeSpanExporter.js";
+
+let isInitialized = false;
+let provider: WebTracerProvider | null = null;
+
+interface BridgeWithSpanExport {
+  exportSpans?: (endpoint: string, payload: string) => void;
+}
+
+export interface BrowserTracingConfig {
+  otelEndpoint: string;
+  serviceName?: string;
+  bridge?: BridgeWithSpanExport;
+  useBatching?: boolean;
+}
+
+export async function setupBrowserTracing(
+  config: BrowserTracingConfig,
+): Promise<void> {
+  if (isInitialized) {
+    return;
+  }
+
+  try {
+    if (!config.bridge) {
+      throw new Error("Bridge is required for browser tracing");
+    }
+
+    const exporter = new BridgeSpanExporter(config.bridge, config.otelEndpoint);
+
+    let spanProcessor: BatchSpanProcessor | SimpleSpanProcessor;
+    if (config.useBatching) {
+      spanProcessor = new BatchSpanProcessor(exporter, {
+        maxQueueSize: 100,
+        maxExportBatchSize: 10,
+        scheduledDelayMillis: 500,
+      });
+    } else {
+      spanProcessor = new SimpleSpanProcessor(exporter);
+    }
+
+    provider = new WebTracerProvider({
+      resource: new Resource({
+        [ATTR_SERVICE_NAME]: config.serviceName || "telecine-browser",
+      }),
+      spanProcessors: [spanProcessor],
+    });
+
+    // Dynamically import ZoneContextManager only when tracing is enabled
+    // This prevents zone.js from being loaded for users who don't need tracing
+    const { ZoneContextManager } = await import("@opentelemetry/context-zone");
+
+    provider.register({
+      contextManager: new ZoneContextManager(),
+    });
+
+    isInitialized = true;
+  } catch (error) {
+    console.error("Failed to initialize browser tracing:", error);
+    throw error;
+  }
+}
+
+export function isBrowserTracingInitialized(): boolean {
+  return isInitialized;
+}

package/src/otel/tracingHelpers.ts

@@ -0,0 +1,251 @@
+import {
+  type Context,
+  context,
+  propagation,
+  type Span,
+  trace,
+} from "@opentelemetry/api";
+
+export type TraceContext = Record<string, string>;
+
+/**
+ * Global flag to enable/disable tracing.
+ * When false, all tracing functions become no-ops for zero overhead.
+ */
+let tracingEnabled = false;
+
+/**
+ * Enable tracing globally. Call this during initialization if tracing is requested.
+ */
+export function enableTracing(): void {
+  tracingEnabled = true;
+}
+
+/**
+ * Check if tracing is currently enabled.
+ */
+export function isTracingEnabled(): boolean {
+  return tracingEnabled;
+}
+
+/**
+ * Frame-local span storage for rendering.
+ * Since rendering is single-threaded and sequential (one frame at a time),
+ * we store the active frame span directly and use it as parent for orphaned spans.
+ */
+let currentFrameSpan: Span | undefined;
+
+/**
+ * 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 function setCurrentFrameSpan(span: Span): void {
+  currentFrameSpan = span;
+}
+
+/**
+ * Clear the current frame span. Call this when a frame completes.
+ */
+export function clearCurrentFrameSpan(): void {
+  currentFrameSpan = undefined;
+}
+
+export function extractParentContext(traceContext?: TraceContext): Context {
+  if (!traceContext) {
+    return context.active();
+  }
+
+  try {
+    return propagation.extract(context.active(), traceContext);
+  } catch (_error) {
+    return context.active();
+  }
+}
+
+/**
+ * Get the active span's context to pass to child operations
+ * Use this when calling functions that create child spans
+ */
+export function getActiveContext(): Context {
+  return context.active();
+}
+
+/**
+ * Wrapper that passes span context explicitly to the function
+ * Use this for operations that need to store or propagate context across boundaries
+ */
+export async function withSpanAndContext<T>(
+  name: string,
+  attributes: Record<string, string | number | boolean> | undefined,
+  parentContext: Context | undefined,
+  fn: (span: Span, activeContext: Context) => Promise<T>,
+): Promise<T> {
+  // No-op if tracing is disabled
+  if (!tracingEnabled) {
+    // Create a minimal no-op span for compatibility
+    const noopSpan = trace.getTracer("telecine-browser").startSpan(name);
+    const ctx = parentContext || context.active();
+    const result = await fn(noopSpan, ctx);
+    noopSpan.end();
+    return result;
+  }
+
+  const tracer = trace.getTracer("telecine-browser");
+
+  // Same context resolution as withSpan
+  let ctx: Context;
+
+  if (parentContext) {
+    ctx = parentContext;
+  } else {
+    const activeContext = context.active();
+    const activeSpan = trace.getSpan(activeContext);
+
+    if (activeSpan?.isRecording?.()) {
+      ctx = activeContext;
+    } else if (currentFrameSpan) {
+      ctx = trace.setSpan(context.active(), currentFrameSpan);
+    } else {
+      ctx = activeContext;
+    }
+  }
+
+  const span = tracer.startSpan(
+    name,
+    {
+      attributes,
+    },
+    ctx,
+  );
+
+  // Create context with this span as active
+  const spanContext = trace.setSpan(ctx, span);
+
+  try {
+    // Pass the spanContext explicitly to the function
+    const result = await context.with(spanContext, async () => {
+      return fn(span, spanContext);
+    });
+    span.end();
+    return result;
+  } catch (error) {
+    span.recordException(error as Error);
+    span.end();
+    throw error;
+  }
+}
+
+export function createSpan(
+  name: string,
+  attributes?: Record<string, string | number | boolean>,
+  parentContext?: Context,
+): Span {
+  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;
+  });
+}
+
+export async function withSpan<T>(
+  name: string,
+  attributes: Record<string, string | number | boolean> | undefined,
+  parentContext: Context | undefined,
+  fn: (span: Span) => Promise<T>,
+): Promise<T> {
+  // No-op if tracing is disabled
+  if (!tracingEnabled) {
+    // Create a minimal no-op span for compatibility
+    const noopSpan = trace.getTracer("telecine-browser").startSpan(name);
+    const result = await fn(noopSpan);
+    noopSpan.end();
+    return result;
+  }
+
+  const tracer = trace.getTracer("telecine-browser");
+
+  // Context resolution priority:
+  // 1. Explicit parentContext (if provided)
+  // 2. context.active() from Zone.js (if it has a valid span)
+  // 3. Create context from currentFrameSpan (fallback for Lit Task boundaries)
+  let ctx: Context;
+
+  if (parentContext) {
+    ctx = parentContext;
+  } else {
+    const activeContext = context.active();
+    const activeSpan = trace.getSpan(activeContext);
+
+    // Try to use context.active() if it has a real span
+    if (activeSpan?.isRecording?.()) {
+      ctx = activeContext;
+    } else if (currentFrameSpan) {
+      // Create context from the stored frame span
+      ctx = trace.setSpan(context.active(), currentFrameSpan);
+    } else {
+      ctx = activeContext;
+    }
+  }
+
+  // Start span with explicit parent
+  const span = tracer.startSpan(
+    name,
+    {
+      attributes,
+    },
+    ctx,
+  );
+
+  // Create context with this span as active
+  const spanContext = trace.setSpan(ctx, span);
+
+  try {
+    // Execute function with span context
+    const result = await context.with(spanContext, async () => {
+      return fn(span);
+    });
+    span.end();
+    return result;
+  } catch (error) {
+    span.recordException(error as Error);
+    span.end();
+    throw error;
+  }
+}
+
+export function withSpanSync<T>(
+  name: string,
+  attributes: Record<string, string | number | boolean> | undefined,
+  parentContext: Context | undefined,
+  fn: (span: Span) => T,
+): T {
+  // No-op if tracing is disabled
+  if (!tracingEnabled) {
+    // Create a minimal no-op span for compatibility
+    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 as Error);
+    span.end();
+    throw error;
+  }
+}

package/test/cache-integration-verification.browsertest.ts

@@ -22,7 +22,7 @@ const test = baseTest.extend<{
   },
 });
 
-test("buffer cache integration stores and serves segment data", async ({
+test.skip("buffer cache integration stores and serves segment data", async ({
   element,
   expect,
 }) => {