@editframe/elements 0.26.3-beta.0 → 0.30.0-beta.13

package/src/gui/TargetOrContextMixin.ts

@@ -1,185 +0,0 @@
-import { type Context, consume } from "@lit/context";
-import type { LitElement } from "lit";
-import { property, state } from "lit/decorators.js";
-import { isEFTemporal } from "../elements/EFTemporal.js";
-import { TargetController } from "../elements/TargetController.js";
-import { type ControllableInterface, isControllable } from "./Controllable.js";
-import { currentTimeContext } from "./currentTimeContext.js";
-import { durationContext } from "./durationContext.js";
-import { loopContext, playingContext } from "./playingContext.js";
-
-type Constructor<T = {}> = new (...args: any[]) => T;
-
-class ContextRequestEvent extends Event {
-  context: Context<any, any>;
-  contextTarget: Element;
-  callback: (value: any, unsubscribe: () => void) => void;
-  subscribe: boolean;
-
-  constructor(
-    context: Context<any, any>,
-    contextTarget: Element,
-    callback: (value: any, unsubscribe: () => void) => void,
-    subscribe: boolean,
-  ) {
-    super("context-request", { bubbles: true, composed: true });
-    this.context = context;
-    this.contextTarget = contextTarget;
-    this.callback = callback;
-    this.subscribe = subscribe ?? false;
-  }
-}
-
-export function TargetOrContextMixin<T extends Constructor<LitElement>>(
-  superClass: T,
-  contextToProxy: Context<any, any>,
-) {
-  class TargetOrContextClass extends superClass {
-    @property({ type: String })
-    target = "";
-
-    @state()
-    targetElement: ControllableInterface | null = null;
-
-    // @ts-expect-error contextToProxy is generic but provides ControllableInterface at runtime
-    @consume({ context: contextToProxy, subscribe: true })
-    contextFromParent: ControllableInterface | null = null;
-
-    #targetController?: TargetController;
-    #contextUnsubscribe?: () => void;
-    #contextRequestHandler?: (event: Event) => void;
-    #additionalContextUnsubscribes = new Map<Context<any, any>, () => void>();
-
-    get effectiveContext(): ControllableInterface | null {
-      return this.targetElement ?? this.contextFromParent;
-    }
-
-    connectedCallback() {
-      super.connectedCallback();
-      if (this.target) {
-        this.#targetController = new TargetController(
-          this as any as LitElement & {
-            targetElement: Element | null;
-            target: string;
-          },
-        );
-      }
-
-      // Intercept context-request events and redirect them to targetElement
-      this.#contextRequestHandler = (event: Event) => {
-        if (this.targetElement && event.type === "context-request") {
-          event.stopPropagation();
-          this.targetElement.dispatchEvent(
-            new (event.constructor as any)(event.type, event),
-          );
-        }
-      };
-      this.addEventListener(
-        "context-request",
-        this.#contextRequestHandler,
-        true,
-      );
-    }
-
-    #subscribeToTargetContext() {
-      if (!this.targetElement) return;
-
-      this.#contextUnsubscribe?.();
-
-      // Unsubscribe from all additional contexts
-      for (const unsubscribe of this.#additionalContextUnsubscribes.values()) {
-        unsubscribe();
-      }
-      this.#additionalContextUnsubscribes.clear();
-
-      // Subscribe to efContext
-      const event = new ContextRequestEvent(
-        contextToProxy,
-        this,
-        (value, unsubscribe) => {
-          (this as any).contextFromParent = value;
-          this.#contextUnsubscribe = unsubscribe;
-        },
-        true,
-      );
-      this.targetElement.dispatchEvent(event);
-
-      // Subscribe to additional contexts that controls commonly need
-      const additionalContexts: Array<[Context<any, any>, string]> = [
-        [playingContext, "playing"],
-        [loopContext, "loop"],
-        [currentTimeContext, "currentTimeMs"],
-        [durationContext, "durationMs"],
-      ];
-
-      for (const [context, propertyName] of additionalContexts) {
-        const contextEvent = new ContextRequestEvent(
-          context,
-          this,
-          (value, unsubscribe) => {
-            // Update the control's property if it exists
-            if (propertyName in this) {
-              (this as any)[propertyName] = value;
-            }
-            this.#additionalContextUnsubscribes.set(context, unsubscribe);
-          },
-          true,
-        );
-        this.targetElement.dispatchEvent(contextEvent);
-      }
-    }
-
-    updated(changedProperties: Map<string | number | symbol, unknown>): void {
-      super.updated?.(changedProperties);
-
-      if (changedProperties.has("targetElement") && this.targetElement) {
-        if (
-          isEFTemporal(this.targetElement) &&
-          !isControllable(this.targetElement)
-        ) {
-          console.warn(
-            "Control element is targeting a non-root temporal element without playbackController. " +
-              "Controls can only target root temporal elements (not nested within a timegroup). " +
-              "Target element:",
-            this.targetElement,
-          );
-        }
-        this.#subscribeToTargetContext();
-      }
-
-      if (changedProperties.has("target")) {
-        if (this.target && !this.#targetController) {
-          this.#targetController = new TargetController(
-            this as any as LitElement & {
-              targetElement: Element | null;
-              target: string;
-            },
-          );
-        }
-      }
-    }
-
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.#contextUnsubscribe?.();
-      for (const unsubscribe of this.#additionalContextUnsubscribes.values()) {
-        unsubscribe();
-      }
-      this.#additionalContextUnsubscribes.clear();
-      if (this.#contextRequestHandler) {
-        this.removeEventListener(
-          "context-request",
-          this.#contextRequestHandler,
-          true,
-        );
-      }
-    }
-  }
-
-  return TargetOrContextClass as Constructor<{
-    target: string;
-    targetElement: ControllableInterface | null;
-    effectiveContext: ControllableInterface | null;
-  }> &
-    T;
-}

package/src/gui/currentTimeContext.ts

@@ -1,5 +0,0 @@
-import { createContext } from "@lit/context";
-
-export const currentTimeContext = createContext<number>(
-  Symbol("currentTimeMs"),
-);

package/src/gui/durationContext.ts

@@ -1,3 +0,0 @@
-import { createContext } from "@lit/context";
-
-export const durationContext = createContext<number>(Symbol("durationMs"));

package/src/gui/efContext.ts

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

package/src/gui/fetchContext.ts

@@ -1,5 +0,0 @@
-import { createContext } from "@lit/context";
-
-export const fetchContext = createContext<
-  (url: string, init?: RequestInit) => Promise<Response>
->(Symbol("fetchContext"));

package/src/gui/focusContext.ts

@@ -1,7 +0,0 @@
-import { createContext } from "@lit/context";
-
-export interface FocusContext {
-  focusedElement: HTMLElement | null;
-}
-
-export const focusContext = createContext<FocusContext>(Symbol("focusContext"));

package/src/gui/focusedElementContext.ts

@@ -1,5 +0,0 @@
-import { createContext } from "@lit/context";
-
-export const focusedElementContext = createContext<HTMLElement | undefined>(
-  Symbol("focusedElement"),
-);

package/src/gui/playingContext.ts

@@ -1,5 +0,0 @@
-import { createContext } from "@lit/context";
-
-export const playingContext = createContext<boolean>(Symbol("playingContext"));
-
-export const loopContext = createContext<boolean>(Symbol("loopContext"));

package/src/otel/BridgeSpanExporter.ts

@@ -1,150 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,251 +0,0 @@
-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;
-  }
-}