@editframe/elements 0.45.2 → 0.45.4

package/dist/elements/EFVideo.d.ts

@@ -2,10 +2,10 @@ import { FrameRenderable, FrameState } from "../preview/FrameController.js";
 import { EFFramegen } from "../EF_FRAMEGEN.js";
 import { EFMedia } from "./EFMedia.js";
 import { RenderToVideoOptions } from "../preview/renderTimegroupToVideo.types.js";
-import * as lit4 from "lit";
+import * as lit3 from "lit";
 import { PropertyValueMap } from "lit";
 import { VideoSample } from "mediabunny";
-import * as lit_html4 from "lit-html";
+import * as lit_html3 from "lit-html";
 import * as lit_html_directives_ref0 from "lit-html/directives/ref";
 
 //#region src/elements/EFVideo.d.ts
@@ -34,7 +34,7 @@ declare class VideoSeekTask {
 declare const EFVideo_base: typeof EFMedia;
 declare class EFVideo extends EFVideo_base implements FrameRenderable {
   #private;
-  static styles: lit4.CSSResult[];
+  static styles: lit3.CSSResult[];
   canvasRef: lit_html_directives_ref0.Ref<HTMLCanvasElement>;
   unifiedVideoSeekTask: VideoSeekTask;
   /**
@@ -78,7 +78,7 @@ declare class EFVideo extends EFVideo_base implements FrameRenderable {
   };
   constructor();
   protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-  render(): lit_html4.TemplateResult<1>;
+  render(): lit_html3.TemplateResult<1>;
   get canvasElement(): HTMLCanvasElement | undefined;
   /**
    * Start a delayed loading operation for testing

package/dist/elements/EFVideo.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFVideo.js","names":["#resolve","EFVideo","#currentRenditionId","#cachedVideoSample","#cachedVideoSampleTimeMs","#delayedLoadingState","#fetchVideoSampleForFrame","#getMainVideoSampleForFrame","#getScrubVideoSampleForFrame","#maybeScheduleQualityUpgrade","initSegment: ArrayBuffer | undefined","mediaSegment: ArrayBuffer | undefined","#invalidateUpgradeState","#prewarmQualityUpgrade","videoSample: any","#renderingToVideo","#upgradeState","#upgradeOwnerId","scheduler","#computeLookaheadSegments","#fetchStandalone","results: { segmentId: number; deadlineMs: number }[]","#standaloneUpgradeController"],"sources":["../../src/elements/EFVideo.ts"],"sourcesContent":["import { context, trace } from \"@opentelemetry/api\";\nimport debug from \"debug\";\nimport { css, html, type PropertyValueMap } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport type { VideoSample } from \"mediabunny\";\nimport { DelayedLoadingState } from \"../DelayedLoadingState.js\";\nimport { TWMixin } from \"../gui/TWMixin.js\";\nimport { withSpanSync } from \"../otel/tracingHelpers.js\";\nimport {\n  type FrameRenderable,\n  type FrameState,\n  PRIORITY_VIDEO,\n} from \"../preview/FrameController.js\";\nimport type { MediaEngine } from \"../transcoding/types/index.ts\";\nimport { MainVideoInputCache } from \"./EFMedia/videoTasks/MainVideoInputCache.ts\";\nimport { ScrubInputCache } from \"./EFMedia/videoTasks/ScrubInputCache.ts\";\nimport { EFMedia } from \"./EFMedia.js\";\nimport { updateAnimations } from \"./updateAnimations.js\";\n\n// Shared caches for video seeking\nconst mainVideoInputCache = new MainVideoInputCache();\nconst scrubInputCache = new ScrubInputCache();\n\n// EF_FRAMEGEN is a global instance created in EF_FRAMEGEN.ts\ndeclare global {\n  var EF_FRAMEGEN: import(\"../EF_FRAMEGEN.js\").EFFramegen;\n}\n\nconst log = debug(\"ef:elements:EFVideo\");\n\ninterface LoadingState {\n  isLoading: boolean;\n  operation: \"scrub-segment\" | \"video-segment\" | \"seeking\" | \"decoding\" | null;\n  message: string;\n}\n\n/**\n * Event detail for scrub segment loading progress.\n * Dispatched during prefetchScrubSegments to indicate network activity.\n */\nexport interface ScrubSegmentLoadingDetail {\n  /** The segment ID being loaded (0-indexed) */\n  segmentId: number;\n  /** Time range covered by this segment [startMs, endMs] */\n  timeRangeMs: [number, number];\n  /** Number of segments loaded so far */\n  loaded: number;\n  /** Total number of segments to load */\n  total: number;\n  /** Current status: \"loading\" or \"loaded\" */\n  status: \"loading\" | \"loaded\";\n}\n\nclass VideoSeekTask {\n  value: VideoSample | undefined = undefined;\n  task: ((...args: any[]) => any) | undefined = undefined;\n\n  #resolve: ((v: VideoSample | undefined) => void) | undefined;\n  taskComplete: Promise<VideoSample | undefined> = Promise.resolve(undefined);\n\n  begin(): void {\n    this.taskComplete = new Promise<VideoSample | undefined>((resolve) => {\n      this.#resolve = resolve;\n    });\n  }\n\n  complete(sample: VideoSample | undefined): void {\n    this.value = sample;\n    this.#resolve?.(sample);\n  }\n\n  abort(): void {\n    this.#resolve?.(undefined);\n  }\n}\n\n@customElement(\"ef-video\")\nexport class EFVideo extends TWMixin(EFMedia) implements FrameRenderable {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        object-fit: contain;\n        object-position: center;\n      }\n      canvas {\n        overflow: hidden;\n        position: static;\n        width: 100%;\n        height: 100%;\n        object-fit: inherit;\n        object-position: inherit;\n        margin: 0;\n        padding: 0;\n        border: none;\n        outline: none;\n        box-shadow: none;\n      }\n      .loading-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 2px;\n        overflow: hidden;\n        z-index: 10;\n        pointer-events: none;\n        background: var(--ef-color-loading-spinner-track, rgba(255, 255, 255, 0.1));\n      }\n      .loading-bar {\n        position: absolute;\n        top: 0;\n        height: 100%;\n        width: 40%;\n        background: var(--ef-color-loading-spinner-fill, rgba(255, 255, 255, 0.8));\n        animation: loading-sweep 1.4s ease-in-out infinite;\n      }\n      @keyframes loading-sweep {\n        0% { left: -40%; }\n        100% { left: 140%; }\n      }\n    `,\n  ];\n  canvasRef = createRef<HTMLCanvasElement>();\n  unifiedVideoSeekTask = new VideoSeekTask();\n\n  // ============================================================================\n  // FrameRenderable Implementation\n  // Centralized frame control - no more Lit Tasks\n  // ============================================================================\n\n  /**\n   * Cached video sample for the current frame.\n   * Set by prepareFrame(), consumed by renderFrame().\n   */\n  #cachedVideoSample: VideoSample | undefined = undefined;\n  #cachedVideoSampleTimeMs: number | undefined = undefined;\n\n  /**\n   * Quality upgrade intent tracking.\n   * Tracks what upgrade tasks were last submitted to avoid redundant scheduler calls.\n   */\n  #upgradeState: {\n    sourceTimeMs: number;\n    segmentId: number;\n    startTimeMs: number;\n    submittedKeys: Set<string>;\n  } | null = null;\n\n  /**\n   * Standalone upgrade controller for elements without a timegroup.\n   */\n  #standaloneUpgradeController: AbortController | null = null;\n\n  /**\n   * Set to true while renderToVideo is executing to suppress background\n   * quality upgrade tasks that would race with the render pipeline.\n   */\n  #renderingToVideo = false;\n\n  /**\n   * Stable per-instance identifier for the quality upgrade scheduler.\n   * Uses this.id when available; falls back to a generated unique string so\n   * elements without an id attribute never collide with each other.\n   */\n  #upgradeOwnerId: string = crypto.randomUUID();\n\n  /**\n   * Current rendition being displayed (for observability).\n   */\n  #currentRenditionId: \"main\" | \"scrub\" | undefined = undefined;\n\n  /**\n   * Get the current rendition being displayed.\n   * @public\n   */\n  get currentRenditionId(): \"main\" | \"scrub\" | undefined {\n    return this.#currentRenditionId;\n  }\n\n  /**\n   * Query readiness state for a given time.\n   * @implements FrameRenderable\n   *\n   * Note: The timeMs parameter is the root timegroup's time. We check against\n   * this.currentSourceTimeMs since that's what we cache in prepareFrame.\n   */\n  getFrameState(_timeMs: number): FrameState {\n    // Use element's source time to match what prepareFrame caches\n    const sourceTimeMs = this.currentSourceTimeMs;\n\n    // Check if we have a cached sample for this exact source time\n    const hasCache =\n      this.#cachedVideoSample !== undefined &&\n      this.#cachedVideoSampleTimeMs === sourceTimeMs;\n\n    return {\n      needsPreparation: !hasCache,\n      isReady: hasCache,\n      priority: PRIORITY_VIDEO,\n    };\n  }\n\n  /**\n   * Async preparation - seeks video and caches the sample.\n   * @implements FrameRenderable\n   *\n   * Note: The timeMs parameter is the root timegroup's time. We ignore it and\n   * use this.currentSourceTimeMs instead, which accounts for:\n   * - Our position within the parent timegroup (ownCurrentTimeMs)\n   * - Source trimming (sourceIn/sourceOut or trimStart/trimEnd)\n   */\n  async prepareFrame(_timeMs: number, signal: AbortSignal): Promise<void> {\n    signal.throwIfAborted();\n    this.unifiedVideoSeekTask.begin();\n    this.#delayedLoadingState.startLoading(\"prepare-frame\", \"\");\n\n    try {\n      // Use element's source time, not the passed root timegroup time.\n      // currentSourceTimeMs = ownCurrentTimeMs + (sourceIn || trimStart || 0)\n      // This correctly maps timeline position to actual media time.\n      const sourceTimeMs = this.currentSourceTimeMs;\n\n      const mediaEngine = await this.getMediaEngine(signal);\n      if (!mediaEngine) {\n        this.#cachedVideoSample = undefined;\n        this.#cachedVideoSampleTimeMs = sourceTimeMs;\n        this.unifiedVideoSeekTask.complete(undefined);\n        return;\n      }\n\n      signal.throwIfAborted();\n\n      // Fetch video sample at the correct source time\n      // Handle errors gracefully so one failed seek doesn't break subsequent frames\n      try {\n        const videoSample = await this.#fetchVideoSampleForFrame(\n          mediaEngine,\n          sourceTimeMs,\n          signal,\n        );\n\n        signal.throwIfAborted();\n\n        // Cache the result\n        this.#cachedVideoSample = videoSample;\n        this.#cachedVideoSampleTimeMs = sourceTimeMs;\n        this.unifiedVideoSeekTask.complete(videoSample);\n      } catch (error) {\n        // Re-throw abort errors to properly handle cancellation\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          this.unifiedVideoSeekTask.abort();\n          throw error;\n        }\n\n        // For seek errors (NoSample, out of bounds, etc.), just clear cache\n        // This allows subsequent frames to retry instead of being stuck\n        console.warn(`Video seek error at ${sourceTimeMs}ms:`, error);\n        this.#cachedVideoSample = undefined;\n        this.#cachedVideoSampleTimeMs = sourceTimeMs;\n        this.unifiedVideoSeekTask.complete(undefined);\n      }\n    } finally {\n      this.#delayedLoadingState.clearLoading(\"prepare-frame\");\n    }\n  }\n\n  /**\n   * Synchronous render - paints cached video sample to canvas.\n   * @implements FrameRenderable\n   *\n   * Note: The timeMs parameter is the root timegroup's time. We use\n   * this.currentSourceTimeMs to match what prepareFrame cached.\n   */\n  renderFrame(_timeMs: number): void {\n    // Use element's source time to match what was cached in prepareFrame\n    const sourceTimeMs = this.currentSourceTimeMs;\n\n    // Use cached sample if available for this source time\n    if (\n      this.#cachedVideoSampleTimeMs === sourceTimeMs &&\n      this.#cachedVideoSample\n    ) {\n      const videoFrame = this.#cachedVideoSample.toVideoFrame();\n      try {\n        this.displayFrame(videoFrame, sourceTimeMs);\n      } finally {\n        videoFrame.close();\n      }\n    }\n\n    // Update animations if not in parent timegroup\n    if (!this.parentTimegroup) {\n      updateAnimations(this);\n    }\n  }\n\n  /**\n   * Fetch video sample for a given time.\n   *\n   * Uses a quality routing strategy:\n   * - In production rendering: always use main (full quality) track\n   * - In preview mode: try scrub track first for faster scrubbing, fall back to main\n   * - If main track segment is already cached: use it (avoid redundant lower-quality fetch)\n   */\n  async #fetchVideoSampleForFrame(\n    mediaEngine: MediaEngine,\n    desiredSeekTimeMs: number,\n    signal: AbortSignal,\n  ): Promise<VideoSample | undefined> {\n    const mainTrack = mediaEngine.tracks.video;\n\n    // FIRST: Check if main quality content is already cached - use it if so\n    if (mainTrack) {\n      const mainSegmentId = mediaEngine.index.segmentAt(\n        desiredSeekTimeMs,\n        mainTrack,\n      );\n      if (\n        mainSegmentId !== undefined &&\n        mediaEngine.transport.isCached(mainSegmentId, mainTrack)\n      ) {\n        this.#currentRenditionId = \"main\";\n        return this.#getMainVideoSampleForFrame(\n          mediaEngine,\n          desiredSeekTimeMs,\n          signal,\n        );\n      }\n    }\n\n    // SECOND: In production rendering mode, always use main (full quality) track\n    if (this.isInProductionRenderingMode()) {\n      this.#currentRenditionId = \"main\";\n      return this.#getMainVideoSampleForFrame(\n        mediaEngine,\n        desiredSeekTimeMs,\n        signal,\n      );\n    }\n\n    // THIRD: In preview mode, try scrub track first for faster scrubbing\n    const scrubTrack = mediaEngine.tracks.scrub;\n    if (scrubTrack) {\n      const scrubSample = await this.#getScrubVideoSampleForFrame(\n        mediaEngine,\n        desiredSeekTimeMs,\n        signal,\n      );\n      if (scrubSample) {\n        this.#currentRenditionId = \"scrub\";\n        // Got scrub - schedule background quality upgrade\n        this.#maybeScheduleQualityUpgrade(mediaEngine, desiredSeekTimeMs);\n        return scrubSample;\n      }\n    }\n\n    // FOURTH: Fall back to main video path\n    this.#currentRenditionId = \"main\";\n    return this.#getMainVideoSampleForFrame(\n      mediaEngine,\n      desiredSeekTimeMs,\n      signal,\n    );\n  }\n\n  /**\n   * Get scrub (low-resolution) video sample for fast preview scrubbing.\n   * Used in preview mode for faster response during timeline scrubbing.\n   */\n  async #getScrubVideoSampleForFrame(\n    mediaEngine: MediaEngine,\n    desiredSeekTimeMs: number,\n    signal: AbortSignal,\n  ): Promise<VideoSample | undefined> {\n    const scrubTrack = mediaEngine.tracks.scrub;\n    if (!scrubTrack) {\n      return undefined;\n    }\n\n    const segmentId = mediaEngine.index.segmentAt(\n      desiredSeekTimeMs,\n      scrubTrack,\n    );\n    if (segmentId === undefined) {\n      return undefined;\n    }\n\n    const scrubInput = await scrubInputCache.getOrCreateInput(\n      mediaEngine.src,\n      segmentId,\n      async () => {\n        let initSegment: ArrayBuffer | undefined;\n        let mediaSegment: ArrayBuffer | undefined;\n\n        try {\n          const initP = mediaEngine.transport.fetchInitSegment(\n            scrubTrack,\n            signal,\n          );\n          const mediaP = mediaEngine.transport.fetchMediaSegment(\n            segmentId,\n            scrubTrack,\n            signal,\n          );\n          initP.catch(() => {});\n          mediaP.catch(() => {});\n          [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);\n        } catch (error) {\n          if (error instanceof DOMException && error.name === \"AbortError\") {\n            throw error;\n          }\n          return undefined;\n        }\n\n        if (!initSegment || !mediaSegment) {\n          return undefined;\n        }\n        signal.throwIfAborted();\n\n        const combinedBlob = new Blob([initSegment, mediaSegment]);\n        signal.throwIfAborted();\n\n        const arrayBuffer = await combinedBlob.arrayBuffer();\n        signal.throwIfAborted();\n\n        const { BufferedSeekingInput } =\n          await import(\"./EFMedia/BufferedSeekingInput.js\");\n\n        return new BufferedSeekingInput(arrayBuffer, {\n          videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,\n          audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,\n          startTimeOffsetMs: scrubTrack.startTimeOffsetMs,\n        });\n      },\n    );\n\n    if (!scrubInput) {\n      return undefined;\n    }\n\n    signal.throwIfAborted();\n\n    const videoTrack = await scrubInput.getFirstVideoTrack();\n    if (!videoTrack) {\n      return undefined;\n    }\n\n    signal.throwIfAborted();\n\n    return scrubInput.seek(videoTrack.id, desiredSeekTimeMs) as Promise<\n      VideoSample | undefined\n    >;\n  }\n\n  /**\n   * Get main video sample for a given time.\n   */\n  async #getMainVideoSampleForFrame(\n    mediaEngine: MediaEngine,\n    desiredSeekTimeMs: number,\n    signal: AbortSignal,\n  ): Promise<VideoSample | undefined> {\n    const videoTrack = mediaEngine.tracks.video;\n    if (!videoTrack) {\n      return undefined;\n    }\n\n    const segmentId = mediaEngine.index.segmentAt(\n      desiredSeekTimeMs,\n      videoTrack,\n    );\n    if (segmentId === undefined) {\n      return undefined;\n    }\n\n    const mainInput = await mainVideoInputCache.getOrCreateInput(\n      mediaEngine.src,\n      segmentId,\n      String(videoTrack.id),\n      async () => {\n        let initSegment: ArrayBuffer | undefined;\n        let mediaSegment: ArrayBuffer | undefined;\n\n        try {\n          const initP = mediaEngine.transport.fetchInitSegment(\n            videoTrack,\n            signal,\n          );\n          const mediaP = mediaEngine.transport.fetchMediaSegment(\n            segmentId,\n            videoTrack,\n            signal,\n          );\n          initP.catch(() => {});\n          mediaP.catch(() => {});\n          [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);\n        } catch (error) {\n          if (error instanceof DOMException && error.name === \"AbortError\") {\n            throw error;\n          }\n          if (\n            error instanceof Error &&\n            (error.message.includes(\"401\") ||\n              error.message.includes(\"UNAUTHORIZED\") ||\n              error.message.includes(\"Failed to fetch\") ||\n              error.message.includes(\"File not found\") ||\n              error.message.includes(\"Media segment not found\") ||\n              error.message.includes(\"Init segment not found\") ||\n              error.message.includes(\"Track not found\"))\n          ) {\n            return undefined;\n          }\n          throw error;\n        }\n\n        if (!initSegment || !mediaSegment) {\n          return undefined;\n        }\n        signal.throwIfAborted();\n\n        const combinedBlob = new Blob([initSegment, mediaSegment]);\n        signal.throwIfAborted();\n\n        const arrayBuffer = await combinedBlob.arrayBuffer();\n        signal.throwIfAborted();\n\n        const { BufferedSeekingInput } =\n          await import(\"./EFMedia/BufferedSeekingInput.js\");\n\n        return new BufferedSeekingInput(arrayBuffer, {\n          videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,\n          audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,\n          startTimeOffsetMs: videoTrack.startTimeOffsetMs,\n        });\n      },\n    );\n\n    if (!mainInput) {\n      return undefined;\n    }\n\n    signal.throwIfAborted();\n\n    const videoTrackInfo = await mainInput.getFirstVideoTrack();\n    if (!videoTrackInfo) {\n      return undefined;\n    }\n\n    signal.throwIfAborted();\n\n    const sample = (await mainInput.seek(\n      videoTrackInfo.id,\n      desiredSeekTimeMs,\n    )) as VideoSample | undefined;\n    return sample;\n  }\n\n  // ============================================================================\n  // End FrameRenderable Implementation\n  // ============================================================================\n\n  /**\n   * Delayed loading state manager for user feedback\n   */\n  #delayedLoadingState: DelayedLoadingState;\n\n  /**\n   * Loading state for user feedback\n   */\n  @state()\n  loadingState = {\n    isLoading: false,\n    operation: null as LoadingState[\"operation\"],\n    message: \"\",\n  };\n\n  constructor() {\n    super();\n\n    // Initialize delayed loading state with callback to update UI\n    this.#delayedLoadingState = new DelayedLoadingState(\n      100,\n      (isLoading, message) => {\n        this.setLoadingState(isLoading, null, message);\n      },\n    );\n  }\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties);\n\n    // Invalidate upgrade state on src/fileId change\n    if (changedProperties.has(\"src\") || changedProperties.has(\"fileId\")) {\n      this.#invalidateUpgradeState(\"src-change\");\n      this.#prewarmQualityUpgrade();\n    }\n\n    // Invalidate upgrade state on trim/source changes\n    const durationAffectingProps = [\n      \"_trimStartMs\",\n      \"_trimEndMs\",\n      \"_sourceInMs\",\n      \"_sourceOutMs\",\n    ];\n    const hasDurationChange = durationAffectingProps.some((prop) =>\n      changedProperties.has(prop),\n    );\n    if (hasDurationChange) {\n      this.#invalidateUpgradeState(\"bounds-change\");\n      this.#prewarmQualityUpgrade();\n    }\n\n    // No need to clear canvas - displayFrame() overwrites it completely\n    // and clearing creates blank frame gaps during transitions\n  }\n\n  /**\n   * Eagerly load the media engine and pre-warm main-quality segments for the\n   * start of this clip. Called when src/fileId or source bounds change so that\n   * segments are already in cache by the time the element first becomes visible.\n   *\n   * Without pre-warming, quality upgrade only begins after the first scrub frame\n   * is displayed, causing ~12 frames of blur at the cold-start of every clip.\n   */\n  #prewarmQualityUpgrade(): void {\n    if (this.isInProductionRenderingMode()) return;\n    if (!this.src && !this.fileId) return;\n\n    this.getMediaEngine()\n      .then((engine) => {\n        if (!engine) return;\n        const sourceInMs = this.sourceInMs ?? 0;\n        this.#maybeScheduleQualityUpgrade(engine, sourceInMs);\n      })\n      .catch(() => {});\n  }\n\n  render() {\n    return html`\n      <canvas ${ref(this.canvasRef)}></canvas>\n      ${\n        this.loadingState.isLoading\n          ? html`<div class=\"loading-overlay\"><div class=\"loading-bar\"></div></div>`\n          : \"\"\n      }\n    `;\n  }\n\n  get canvasElement() {\n    const referencedCanvas = this.canvasRef.value;\n    if (referencedCanvas) {\n      return referencedCanvas;\n    }\n    const shadowCanvas = this.shadowRoot?.querySelector(\"canvas\");\n    if (shadowCanvas) {\n      return shadowCanvas;\n    }\n    return undefined;\n  }\n\n  /**\n   * Start a delayed loading operation for testing\n   */\n  startDelayedLoading(\n    operationId: string,\n    message: string,\n    options: { background?: boolean } = {},\n  ): void {\n    this.#delayedLoadingState.startLoading(operationId, message, options);\n  }\n\n  /**\n   * Clear a delayed loading operation for testing\n   */\n  clearDelayedLoading(operationId: string): void {\n    this.#delayedLoadingState.clearLoading(operationId);\n  }\n\n  /**\n   * Set loading state for user feedback\n   */\n  private setLoadingState(\n    isLoading: boolean,\n    operation: LoadingState[\"operation\"] = null,\n    message = \"\",\n  ): void {\n    this.loadingState = {\n      isLoading,\n      operation,\n      message,\n    };\n  }\n\n  /**\n   * Paint the current video frame to canvas\n   */\n  paint(seekToMs: number, parentSpan?: any): void {\n    const parentContext = parentSpan\n      ? trace.setSpan(context.active(), parentSpan)\n      : undefined;\n\n    withSpanSync(\n      \"video.paint\",\n      {\n        elementId: this.id || \"unknown\",\n        seekToMs,\n        src: this.src || \"none\",\n      },\n      parentContext,\n      (span) => {\n        const t0 = performance.now();\n\n        // Check if we're in production rendering mode vs preview mode\n        const isProductionRendering = this.isInProductionRenderingMode();\n        const t1 = performance.now();\n        span.setAttribute(\"isProductionRendering\", isProductionRendering);\n        span.setAttribute(\"modeCheckMs\", t1 - t0);\n\n        // Use cached video sample from prepareFrame\n        try {\n          const t2 = performance.now();\n          const videoSample = this.#cachedVideoSample;\n          span.setAttribute(\"hasVideoSample\", !!videoSample);\n          span.setAttribute(\"valueAccessMs\", t2 - t1);\n\n          if (videoSample) {\n            const t3 = performance.now();\n            const videoFrame = videoSample.toVideoFrame();\n            const t4 = performance.now();\n            span.setAttribute(\"toVideoFrameMs\", t4 - t3);\n\n            try {\n              const t5 = performance.now();\n              this.displayFrame(videoFrame, seekToMs, span);\n              const t6 = performance.now();\n              span.setAttribute(\"displayFrameMs\", t6 - t5);\n            } finally {\n              videoFrame.close();\n            }\n          }\n        } catch (error) {\n          console.warn(\"Video pipeline error:\", error);\n        }\n\n        // EF_FRAMEGEN-aware rendering mode detection\n        if (!isProductionRendering) {\n          // Preview mode: always render\n          // Visibility is handled by the phase/visibility system (CSS display:none)\n          // No need to skip initialization frames - if element shouldn't be visible,\n          // it will be hidden by CSS\n        } else {\n          // Production rendering mode: only render when EF_FRAMEGEN has explicitly started frame rendering\n          // This prevents initialization frames before the actual render sequence begins\n          if (!this.rootTimegroup) {\n            span.setAttribute(\"skipped\", \"no-root-timegroup\");\n            return;\n          }\n\n          if (!this.isFrameRenderingActive()) {\n            span.setAttribute(\"skipped\", \"frame-rendering-not-active\");\n            return; // Wait for EF_FRAMEGEN to start frame sequence\n          }\n\n          // Production mode: EF_FRAMEGEN has started frame sequence, proceed with rendering\n        }\n\n        const tEnd = performance.now();\n        span.setAttribute(\"totalPaintMs\", tEnd - t0);\n      },\n    );\n  }\n\n  /**\n   * Clear the canvas when element becomes inactive\n   */\n  clearCanvas(): void {\n    if (!this.canvasElement) return;\n\n    const ctx = this.canvasElement.getContext(\"2d\", {\n      willReadFrequently: true,\n    });\n    if (ctx) {\n      ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n    }\n  }\n\n  /**\n   * Display a video frame on the canvas\n   */\n  displayFrame(frame: VideoFrame, seekToMs: number, parentSpan?: any): void {\n    const parentContext = parentSpan\n      ? trace.setSpan(context.active(), parentSpan)\n      : undefined;\n\n    withSpanSync(\n      \"video.displayFrame\",\n      {\n        elementId: this.id || \"unknown\",\n        seekToMs,\n        format: frame.format || \"unknown\",\n        width: frame.codedWidth,\n        height: frame.codedHeight,\n      },\n      parentContext,\n      (span) => {\n        const t0 = performance.now();\n\n        log(\"trace: displayFrame start\", {\n          seekToMs,\n          frameFormat: frame.format,\n        });\n\n        if (!this.canvasElement) {\n          log(\"trace: displayFrame aborted - no canvas element\");\n          throw new Error(\n            `Frame display failed: Canvas element is not available at time ${seekToMs}ms. The video component may not be properly initialized.`,\n          );\n        }\n        const t1 = performance.now();\n        span.setAttribute(\"getCanvasMs\", Math.round((t1 - t0) * 100) / 100);\n\n        const ctx = this.canvasElement.getContext(\"2d\", {\n          willReadFrequently: true,\n        });\n        const t2 = performance.now();\n        span.setAttribute(\"getCtxMs\", Math.round((t2 - t1) * 100) / 100);\n\n        if (!ctx) {\n          log(\"trace: displayFrame aborted - no canvas context\");\n          throw new Error(\n            `Frame display failed: Unable to get 2D canvas context at time ${seekToMs}ms. This may indicate a browser compatibility issue or canvas corruption.`,\n          );\n        }\n\n        const frameWidth = frame.displayWidth;\n        const frameHeight = frame.displayHeight;\n\n        let resized = false;\n        if (frameWidth && frameHeight) {\n          const needsResize =\n            frameWidth > this.canvasElement.width ||\n            frameHeight > this.canvasElement.height;\n          if (needsResize) {\n            const newWidth = Math.max(this.canvasElement.width, frameWidth);\n            const newHeight = Math.max(this.canvasElement.height, frameHeight);\n            log(\"trace: updating canvas dimensions\", {\n              width: newWidth,\n              height: newHeight,\n            });\n            this.canvasElement.width = newWidth;\n            this.canvasElement.height = newHeight;\n            resized = true;\n            const t3 = performance.now();\n            span.setAttribute(\"resizeMs\", Math.round((t3 - t2) * 100) / 100);\n          }\n        }\n        span.setAttribute(\"canvasResized\", resized);\n\n        if (frame.format === null) {\n          log(\"trace: displayFrame aborted - null frame format\");\n          throw new Error(\n            `Frame display failed: Video frame has null format at time ${seekToMs}ms. This indicates corrupted or incompatible video data.`,\n          );\n        }\n\n        const tDrawStart = performance.now();\n        ctx.drawImage(\n          frame,\n          0,\n          0,\n          this.canvasElement.width,\n          this.canvasElement.height,\n        );\n        const tDrawEnd = performance.now();\n        span.setAttribute(\n          \"drawImageMs\",\n          Math.round((tDrawEnd - tDrawStart) * 100) / 100,\n        );\n        span.setAttribute(\n          \"totalDisplayMs\",\n          Math.round((tDrawEnd - t0) * 100) / 100,\n        );\n        span.setAttribute(\"canvasWidth\", this.canvasElement.width);\n        span.setAttribute(\"canvasHeight\", this.canvasElement.height);\n\n        log(\"trace: frame drawn to canvas\", { seekToMs });\n      },\n    );\n  }\n\n  /**\n   * Check if we're in production rendering mode (EF_FRAMEGEN active) vs preview mode\n   */\n  private isInProductionRenderingMode(): boolean {\n    // Check if EF_RENDERING function exists and returns true (production rendering)\n    if (typeof window.EF_RENDERING === \"function\") {\n      return window.EF_RENDERING();\n    }\n\n    // Check if workbench is in rendering mode\n    const workbench = document.querySelector(\"ef-workbench\") as any;\n    if (workbench?.rendering) {\n      return true;\n    }\n\n    // Check if EF_FRAMEGEN exists and has render options (indicates active rendering)\n    if (window.EF_FRAMEGEN?.renderOptions) {\n      return true;\n    }\n\n    // Default to preview mode\n    return false;\n  }\n\n  /**\n   * Check if EF_FRAMEGEN has explicitly started frame rendering (not just initialization)\n   */\n  private isFrameRenderingActive(): boolean {\n    if (!window.EF_FRAMEGEN?.renderOptions) {\n      return false;\n    }\n\n    // In production mode, only render when EF_FRAMEGEN has actually begun frame sequence\n    // Check if we're past the initialization phase by looking for explicit frame control\n    const renderOptions = window.EF_FRAMEGEN.renderOptions;\n    const renderStartTime = renderOptions.encoderOptions.fromMs;\n    const currentTime = this.rootTimegroup?.currentTimeMs || 0;\n\n    // We're in active frame rendering if:\n    // 1. currentTime >= renderStartTime (includes the starting frame)\n    return currentTime >= renderStartTime;\n  }\n\n  /**\n   * Get a decoded VideoFrame at a specific source media timestamp.\n   * Returns a standard WebCodecs VideoFrame — caller MUST call .close() when done.\n   *\n   * Uses the same routing logic as the unified video system:\n   * - \"auto\": main track for production rendering, follows normal routing otherwise\n   * - \"scrub\": force low-res scrub track (for thumbnails)\n   * - \"main\": force full-quality main track\n   *\n   * @param sourceTimeMs - Timestamp in source media coordinates (not timeline)\n   * @param options - Quality and abort signal\n   * @returns VideoFrame that the caller must close()\n   * @public\n   */\n  async getVideoFrameAtSourceTime(\n    sourceTimeMs: number,\n    options: {\n      quality?: \"auto\" | \"scrub\" | \"main\";\n      signal?: AbortSignal;\n    } = {},\n  ): Promise<VideoFrame> {\n    const { quality = \"auto\", signal: providedSignal } = options;\n\n    const signal = providedSignal ?? new AbortController().signal;\n    signal.throwIfAborted();\n\n    this.playbackController?.suspendSelfRender();\n    try {\n      const mediaEngine = await this.getMediaEngine(signal);\n      signal.throwIfAborted();\n\n      if (!mediaEngine) {\n        throw new Error(\"No media engine available for frame capture\");\n      }\n\n      const useMainTrack =\n        quality === \"main\" ||\n        (quality === \"auto\" && this.isInProductionRenderingMode());\n\n      let videoSample: any;\n\n      const { BufferedSeekingInput } =\n        await import(\"./EFMedia/BufferedSeekingInput.js\");\n      signal.throwIfAborted();\n\n      if (useMainTrack) {\n        const videoTrack = mediaEngine.tracks.video;\n        if (!videoTrack) {\n          throw new Error(\"No video rendition available\");\n        }\n\n        const segmentId = mediaEngine.index.segmentAt(sourceTimeMs, videoTrack);\n        if (segmentId === undefined) {\n          throw new Error(\n            `Cannot compute segment ID for time ${sourceTimeMs}ms`,\n          );\n        }\n\n        const seekingInput = await mainVideoInputCache.getOrCreateInput(\n          mediaEngine.src,\n          segmentId,\n          String(videoTrack.id),\n          async () => {\n            const initP = mediaEngine.transport.fetchInitSegment(\n              videoTrack,\n              signal,\n            );\n            const mediaP = mediaEngine.transport.fetchMediaSegment(\n              segmentId,\n              videoTrack,\n              signal,\n            );\n            initP.catch(() => {});\n            mediaP.catch(() => {});\n            const [initSegment, mediaSegment] = await Promise.all([\n              initP,\n              mediaP,\n            ]);\n\n            if (!initSegment || !mediaSegment) {\n              return undefined;\n            }\n\n            const combinedBlob = new Blob([initSegment, mediaSegment]);\n            const arrayBuffer = await combinedBlob.arrayBuffer();\n\n            return new BufferedSeekingInput(arrayBuffer, {\n              videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,\n              audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,\n              startTimeOffsetMs: videoTrack.startTimeOffsetMs,\n            });\n          },\n        );\n        signal.throwIfAborted();\n\n        if (!seekingInput) {\n          throw new Error(\n            `Failed to fetch video segments for time ${sourceTimeMs}ms`,\n          );\n        }\n\n        const seekingVideoTrack = await seekingInput.getFirstVideoTrack();\n        signal.throwIfAborted();\n\n        if (!seekingVideoTrack) {\n          throw new Error(\"No video track found in segment\");\n        }\n\n        videoSample = await seekingInput.seek(\n          seekingVideoTrack.id,\n          sourceTimeMs,\n        );\n        signal.throwIfAborted();\n      } else {\n        const scrubTrack = mediaEngine.tracks.scrub;\n        if (!scrubTrack) {\n          return this.getVideoFrameAtSourceTime(sourceTimeMs, {\n            quality: \"main\",\n            signal,\n          });\n        }\n\n        const segmentId = mediaEngine.index.segmentAt(sourceTimeMs, scrubTrack);\n\n        if (segmentId === undefined) {\n          throw new Error(\n            `Cannot compute scrub segment ID for time ${sourceTimeMs}ms`,\n          );\n        }\n\n        const seekingInput = await scrubInputCache.getOrCreateInput(\n          mediaEngine.src,\n          segmentId,\n          async () => {\n            const initP = mediaEngine.transport.fetchInitSegment(\n              scrubTrack,\n              signal,\n            );\n            const mediaP = mediaEngine.transport.fetchMediaSegment(\n              segmentId,\n              scrubTrack,\n              signal,\n            );\n            initP.catch(() => {});\n            mediaP.catch(() => {});\n            const [initSegment, mediaSegment] = await Promise.all([\n              initP,\n              mediaP,\n            ]);\n\n            if (!initSegment || !mediaSegment) {\n              return undefined;\n            }\n\n            const combinedBlob = new Blob([initSegment, mediaSegment]);\n            const arrayBuffer = await combinedBlob.arrayBuffer();\n\n            return new BufferedSeekingInput(arrayBuffer, {\n              videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,\n              audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,\n              startTimeOffsetMs: scrubTrack.startTimeOffsetMs,\n            });\n          },\n        );\n        signal.throwIfAborted();\n\n        if (!seekingInput) {\n          return this.getVideoFrameAtSourceTime(sourceTimeMs, {\n            quality: \"main\",\n            signal,\n          });\n        }\n\n        const seekingVideoTrack = await seekingInput.getFirstVideoTrack();\n        signal.throwIfAborted();\n\n        if (!seekingVideoTrack) {\n          return this.getVideoFrameAtSourceTime(sourceTimeMs, {\n            quality: \"main\",\n            signal,\n          });\n        }\n\n        videoSample = await seekingInput.seek(\n          seekingVideoTrack.id,\n          sourceTimeMs,\n        );\n        signal.throwIfAborted();\n      }\n\n      if (!videoSample) {\n        throw new Error(`No video sample found at ${sourceTimeMs}ms`);\n      }\n\n      return videoSample.toVideoFrame();\n    } finally {\n      this.playbackController?.resumeSelfRender();\n    }\n  }\n\n  /**\n   * Capture a video frame directly at a source media timestamp.\n   * Designed for export/rendering.\n   * Does NOT paint to the element's internal canvas.\n   *\n   * Uses the same routing logic as unified video system:\n   * - \"auto\": main track for production rendering, follows normal routing otherwise\n   * - \"scrub\": force low-res scrub track (for thumbnails)\n   * - \"main\": force full-quality main track\n   *\n   * @param sourceTimeMs - Timestamp in source media coordinates (not timeline)\n   * @param options - Capture options including quality and abort signal\n   * @returns Frame data for serialization\n   * @public\n   */\n  async captureFrameAtSourceTime(\n    sourceTimeMs: number,\n    options: {\n      quality?: \"auto\" | \"scrub\" | \"main\";\n      signal?: AbortSignal;\n    } = {},\n  ): Promise<{\n    dataUrl: string;\n    width: number;\n    height: number;\n  }> {\n    const videoFrame = await this.getVideoFrameAtSourceTime(\n      sourceTimeMs,\n      options,\n    );\n\n    try {\n      options.signal?.throwIfAborted();\n\n      const canvas = new OffscreenCanvas(\n        videoFrame.codedWidth,\n        videoFrame.codedHeight,\n      );\n      const ctx = canvas.getContext(\"2d\");\n      if (!ctx) {\n        throw new Error(\"Failed to get 2d context from OffscreenCanvas\");\n      }\n      ctx.drawImage(videoFrame, 0, 0);\n\n      options.signal?.throwIfAborted();\n\n      const blob = await canvas.convertToBlob({\n        type: \"image/jpeg\",\n        quality: 0.92,\n      });\n      options.signal?.throwIfAborted();\n\n      const dataUrl = await new Promise<string>((resolve, reject) => {\n        const reader = new FileReader();\n        reader.onload = () => resolve(reader.result as string);\n        reader.onerror = reject;\n        reader.readAsDataURL(blob);\n      });\n      options.signal?.throwIfAborted();\n\n      return {\n        dataUrl,\n        width: videoFrame.codedWidth,\n        height: videoFrame.codedHeight,\n      };\n    } finally {\n      videoFrame.close();\n    }\n  }\n\n  /**\n   * Pre-fetch scrub segments for given timestamps.\n   * Loads 30-second segments sequentially, emitting progress events.\n   * This ensures scrub track is cached for fast thumbnail generation.\n   *\n   * @param timestamps - Array of timestamps (in ms) that will be captured\n   * @param onProgress - Optional callback for loading progress\n   * @param signal - Optional AbortSignal for cancellation\n   * @returns Promise that resolves when all segments are cached\n   * @public\n   */\n  async prefetchScrubSegments(\n    timestamps: number[],\n    onProgress?: (\n      loaded: number,\n      total: number,\n      segmentTimeRange: [number, number],\n    ) => void,\n    signal?: AbortSignal,\n  ): Promise<void> {\n    // Wait for media engine to be ready\n    const mediaEngine = await this.getMediaEngine(signal);\n    if (!mediaEngine) {\n      log(\"prefetchScrubSegments: no media engine available\");\n      return;\n    }\n\n    const scrubTrack = mediaEngine.tracks.scrub;\n    if (!scrubTrack) {\n      log(\"prefetchScrubSegments: no scrub rendition available\");\n      return;\n    }\n\n    // Compute unique segment IDs needed for all timestamps\n    const segmentIds = new Set<number>();\n    for (const ts of timestamps) {\n      const segmentId = mediaEngine.index.segmentAt(ts, scrubTrack);\n      if (segmentId !== undefined) {\n        segmentIds.add(segmentId);\n      }\n    }\n\n    if (segmentIds.size === 0) {\n      log(\"prefetchScrubSegments: no segments to prefetch\");\n      return;\n    }\n\n    // Check if ANY segment is already cached (meaning the file is loaded).\n    const firstSegmentId = Array.from(segmentIds)[0]!;\n    if (mediaEngine.transport.isCached(firstSegmentId, scrubTrack)) {\n      log(\"prefetchScrubSegments: scrub track already cached\");\n      return;\n    }\n\n    log(\n      `prefetchScrubSegments: fetching scrub track for ${segmentIds.size} segments...`,\n    );\n\n    const durationMs = mediaEngine.durationMs || 0;\n    this.dispatchEvent(\n      new CustomEvent(\"scrub-segment-loading\", {\n        detail: {\n          segmentId: 0,\n          timeRangeMs: [0, durationMs] as [number, number],\n          loaded: 0,\n          total: 1,\n          status: \"loading\",\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n\n    const fetchSignal = signal ?? new AbortController().signal;\n    try {\n      await mediaEngine.transport.fetchMediaSegment(\n        firstSegmentId,\n        scrubTrack,\n        fetchSignal,\n      );\n      log(`prefetchScrubSegments: scrub track loaded`);\n    } catch (error) {\n      log(`prefetchScrubSegments: failed to load scrub track`, error);\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(\"scrub-segment-loading\", {\n        detail: {\n          segmentId: 0,\n          timeRangeMs: [0, durationMs] as [number, number],\n          loaded: 1,\n          total: 1,\n          status: \"loaded\",\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n\n    onProgress?.(1, 1, [0, durationMs]);\n    log(`prefetchScrubSegments: complete`);\n  }\n\n  /**\n   * Maybe schedule quality upgrade tasks for this element.\n   * Called when returning a scrub sample - checks if state has changed and submits tasks.\n   */\n  #maybeScheduleQualityUpgrade(\n    mediaEngine: MediaEngine,\n    sourceTimeMs: number,\n  ): void {\n    if (this.#renderingToVideo) return;\n    const mainTrack = mediaEngine.tracks.video;\n    if (!mainTrack) return;\n\n    const segmentId = mediaEngine.index.segmentAt(sourceTimeMs, mainTrack);\n    if (segmentId === undefined) return;\n\n    const startTimeMs = this.startTimeMs;\n\n    const stateChanged =\n      this.#upgradeState === null ||\n      this.#upgradeState.segmentId !== segmentId ||\n      this.#upgradeState.startTimeMs !== startTimeMs;\n\n    if (!stateChanged) {\n      // State matches what we previously submitted. Check if the task is still\n      // active or waiting in the queue — either way it will populate the cache.\n      const currentTaskKey = `${this.#upgradeOwnerId}:${segmentId}:${mainTrack.id}`;\n      const scheduler = this.rootTimegroup?.qualityUpgradeScheduler;\n      if (\n        scheduler?.isActive(currentTaskKey) ||\n        scheduler?.isPending(currentTaskKey)\n      ) {\n        return;\n      }\n      // Task is neither running nor queued — it completed (or failed) and the\n      // segment may have been evicted. Re-submit.\n      this.rootTimegroup?.qualityUpgradeScheduler?.cancelForOwner(\n        this.#upgradeOwnerId,\n      );\n      this.#upgradeState = null;\n      // Fall through to re-submit\n    }\n\n    const segments = this.#computeLookaheadSegments(\n      mediaEngine,\n      sourceTimeMs,\n      mainTrack,\n    );\n    if (segments.length === 0) return;\n\n    const tasks = segments.map((seg) => ({\n      key: `${this.#upgradeOwnerId}:${seg.segmentId}:${mainTrack.id}`,\n      fetch: async (signal: AbortSignal) => {\n        await mediaEngine.transport.fetchInitSegment(mainTrack, signal);\n        await mediaEngine.transport.fetchMediaSegment(\n          seg.segmentId,\n          mainTrack,\n          signal,\n        );\n      },\n      deadlineMs: seg.deadlineMs,\n      owner: this.#upgradeOwnerId,\n    }));\n\n    const scheduler = this.rootTimegroup?.qualityUpgradeScheduler;\n    if (scheduler) {\n      scheduler.replaceForOwner(this.#upgradeOwnerId, tasks);\n    } else {\n      this.#fetchStandalone(tasks);\n    }\n\n    this.#upgradeState = {\n      sourceTimeMs,\n      segmentId,\n      startTimeMs,\n      submittedKeys: new Set(tasks.map((t) => t.key)),\n    };\n  }\n\n  /**\n   * Compute lookahead segments with deadlines in timeline space.\n   */\n  #computeLookaheadSegments(\n    mediaEngine: MediaEngine,\n    currentSourceTimeMs: number,\n    track: import(\"./EFMedia/SegmentIndex.js\").TrackRef,\n    maxLookahead: number = 5,\n  ): { segmentId: number; deadlineMs: number }[] {\n    const results: { segmentId: number; deadlineMs: number }[] = [];\n    const playheadMs = this.rootTimegroup?.currentTimeMs ?? 0;\n    const seen = new Set<number>();\n\n    let probeTimeMs = currentSourceTimeMs;\n\n    while (seen.size < maxLookahead) {\n      const segmentId = mediaEngine.index.segmentAt(probeTimeMs, track);\n      if (segmentId === undefined) break;\n      if (seen.has(segmentId)) break;\n\n      seen.add(segmentId);\n\n      if (!mediaEngine.transport.isCached(segmentId, track)) {\n        const offsetFromCurrentMs = probeTimeMs - currentSourceTimeMs;\n        const deadlineMs = playheadMs + offsetFromCurrentMs;\n        results.push({ segmentId, deadlineMs });\n      }\n\n      const thisDuration =\n        track.segmentDurationsMs?.[segmentId - 1] ??\n        track.segmentDurationMs ??\n        2000;\n      probeTimeMs += thisDuration;\n    }\n\n    return results;\n  }\n\n  /**\n   * Standalone mode: fetch tasks sequentially without scheduler.\n   */\n  #fetchStandalone(tasks: any[]): void {\n    // Abort any previous standalone batch (e.g., after seek)\n    this.#standaloneUpgradeController?.abort();\n    this.#standaloneUpgradeController = new AbortController();\n    const signal = this.#standaloneUpgradeController.signal;\n\n    // Process sequentially\n    (async () => {\n      for (const task of tasks) {\n        if (signal.aborted) break;\n        try {\n          await task.fetch(signal);\n        } catch {\n          // Continue on error\n        }\n      }\n      // After all tasks complete, trigger re-render\n      if (!signal.aborted) {\n        this.playbackController?.runThrottledFrameTask().catch(() => {});\n      }\n    })().catch(() => {});\n  }\n\n  /**\n   * Invalidate upgrade state and optionally cancel queued tasks.\n   */\n  #invalidateUpgradeState(\n    reason: \"src-change\" | \"bounds-change\" | \"disconnect\",\n  ): void {\n    if (reason === \"src-change\" || reason === \"disconnect\") {\n      // Full cancel - old tasks reference a stale media engine\n      this.rootTimegroup?.qualityUpgradeScheduler?.cancelForOwner(\n        this.#upgradeOwnerId,\n      );\n    }\n    // For bounds-change, don't cancel - old tasks may still be valid segments,\n    // just with stale deadlines. replaceForOwner on next prepareFrame handles it.\n    this.#upgradeState = null;\n  }\n\n  /**\n   * Clean up resources when component is disconnected\n   */\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    // Clean up delayed loading state\n    this.#delayedLoadingState.clearAllLoading();\n\n    // Cancel upgrade tasks (centralized or standalone)\n    this.#invalidateUpgradeState(\"disconnect\");\n    this.#standaloneUpgradeController?.abort();\n    this.#standaloneUpgradeController = null;\n  }\n\n  didBecomeRoot() {\n    super.didBecomeRoot();\n  }\n  didBecomeChild() {\n    super.didBecomeChild();\n  }\n\n  /**\n   * Get the natural dimensions of the video (coded width and height).\n   * Returns null if the video hasn't loaded yet or canvas isn't available.\n   *\n   * @public\n   */\n  getNaturalDimensions(): { width: number; height: number } | null {\n    const canvas = this.canvasElement;\n    if (!canvas || canvas.width === 0 || canvas.height === 0) {\n      return null;\n    }\n    return {\n      width: canvas.width,\n      height: canvas.height,\n    };\n  }\n\n  /**\n   * Render this video element to an MP4 using the direct video-to-video fast path.\n   * Bypasses DOM serialization — decodes frames directly and re-encodes to MP4.\n   * Respects trim, CSS filter, and opacity.\n   *\n   * @param options - Rendering options (fps, codec, bitrate, etc.)\n   * @returns Promise resolving to video buffer (if returnBuffer), or undefined\n   * @public\n   */\n  async renderToVideo(\n    options?: import(\"../preview/renderTimegroupToVideo.types.js\").RenderToVideoOptions,\n  ): Promise<Uint8Array | undefined> {\n    this.#renderingToVideo = true;\n    try {\n      const { renderVideoToVideo } =\n        await import(\"../preview/renderVideoToVideo.js\");\n      return await renderVideoToVideo(this, options);\n    } finally {\n      this.#renderingToVideo = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-video\": EFVideo;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"EFVideo.js","names":["#resolve","EFVideo","#currentRenditionId","#cachedVideoSample","#cachedVideoSampleTimeMs","#delayedLoadingState","#fetchVideoSampleForFrame","#getMainVideoSampleForFrame","#getScrubVideoSampleForFrame","#maybeScheduleQualityUpgrade","initSegment: ArrayBuffer | undefined","mediaSegment: ArrayBuffer | undefined","#invalidateUpgradeState","#prewarmQualityUpgrade","videoSample: any","#renderingToVideo","#upgradeState","#upgradeOwnerId","scheduler","#computeLookaheadSegments","#fetchStandalone","results: { segmentId: number; deadlineMs: number }[]","#standaloneUpgradeController"],"sources":["../../src/elements/EFVideo.ts"],"sourcesContent":["import { context, trace } from \"@opentelemetry/api\";\nimport debug from \"debug\";\nimport { css, html, type PropertyValueMap } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport type { VideoSample } from \"mediabunny\";\nimport { DelayedLoadingState } from \"../DelayedLoadingState.js\";\nimport { TWMixin } from \"../gui/TWMixin.js\";\nimport { withSpanSync } from \"../otel/tracingHelpers.js\";\nimport {\n  type FrameRenderable,\n  type FrameState,\n  PRIORITY_VIDEO,\n} from \"../preview/FrameController.js\";\nimport type { MediaEngine } from \"../transcoding/types/index.ts\";\nimport { MainVideoInputCache } from \"./EFMedia/videoTasks/MainVideoInputCache.ts\";\nimport { ScrubInputCache } from \"./EFMedia/videoTasks/ScrubInputCache.ts\";\nimport { EFMedia } from \"./EFMedia.js\";\nimport { updateAnimations } from \"./updateAnimations.js\";\n\n// Shared caches for video seeking\nconst mainVideoInputCache = new MainVideoInputCache();\nconst scrubInputCache = new ScrubInputCache();\n\n// EF_FRAMEGEN is a global instance created in EF_FRAMEGEN.ts\ndeclare global {\n  var EF_FRAMEGEN: import(\"../EF_FRAMEGEN.js\").EFFramegen;\n}\n\nconst log = debug(\"ef:elements:EFVideo\");\n\ninterface LoadingState {\n  isLoading: boolean;\n  operation: \"scrub-segment\" | \"video-segment\" | \"seeking\" | \"decoding\" | null;\n  message: string;\n}\n\n/**\n * Event detail for scrub segment loading progress.\n * Dispatched during prefetchScrubSegments to indicate network activity.\n */\nexport interface ScrubSegmentLoadingDetail {\n  /** The segment ID being loaded (0-indexed) */\n  segmentId: number;\n  /** Time range covered by this segment [startMs, endMs] */\n  timeRangeMs: [number, number];\n  /** Number of segments loaded so far */\n  loaded: number;\n  /** Total number of segments to load */\n  total: number;\n  /** Current status: \"loading\" or \"loaded\" */\n  status: \"loading\" | \"loaded\";\n}\n\nclass VideoSeekTask {\n  value: VideoSample | undefined = undefined;\n  task: ((...args: any[]) => any) | undefined = undefined;\n\n  #resolve: ((v: VideoSample | undefined) => void) | undefined;\n  taskComplete: Promise<VideoSample | undefined> = Promise.resolve(undefined);\n\n  begin(): void {\n    this.taskComplete = new Promise<VideoSample | undefined>((resolve) => {\n      this.#resolve = resolve;\n    });\n  }\n\n  complete(sample: VideoSample | undefined): void {\n    this.value = sample;\n    this.#resolve?.(sample);\n  }\n\n  abort(): void {\n    this.#resolve?.(undefined);\n  }\n}\n\n@customElement(\"ef-video\")\nexport class EFVideo extends TWMixin(EFMedia) implements FrameRenderable {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        object-fit: contain;\n        object-position: center;\n      }\n      canvas {\n        overflow: hidden;\n        position: static;\n        width: 100%;\n        height: 100%;\n        object-fit: inherit;\n        object-position: inherit;\n        margin: 0;\n        padding: 0;\n        border: none;\n        outline: none;\n        box-shadow: none;\n      }\n      .loading-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 2px;\n        overflow: hidden;\n        z-index: 10;\n        pointer-events: none;\n        background: var(--ef-color-loading-spinner-track, rgba(255, 255, 255, 0.1));\n      }\n      .loading-bar {\n        position: absolute;\n        top: 0;\n        height: 100%;\n        width: 40%;\n        background: var(--ef-color-loading-spinner-fill, rgba(255, 255, 255, 0.8));\n        animation: loading-sweep 1.4s ease-in-out infinite;\n      }\n      @keyframes loading-sweep {\n        0% { left: -40%; }\n        100% { left: 140%; }\n      }\n    `,\n  ];\n  canvasRef = createRef<HTMLCanvasElement>();\n  unifiedVideoSeekTask = new VideoSeekTask();\n\n  // ============================================================================\n  // FrameRenderable Implementation\n  // Centralized frame control - no more Lit Tasks\n  // ============================================================================\n\n  /**\n   * Cached video sample for the current frame.\n   * Set by prepareFrame(), consumed by renderFrame().\n   */\n  #cachedVideoSample: VideoSample | undefined = undefined;\n  #cachedVideoSampleTimeMs: number | undefined = undefined;\n\n  /**\n   * Quality upgrade intent tracking.\n   * Tracks what upgrade tasks were last submitted to avoid redundant scheduler calls.\n   */\n  #upgradeState: {\n    sourceTimeMs: number;\n    segmentId: number;\n    startTimeMs: number;\n    submittedKeys: Set<string>;\n  } | null = null;\n\n  /**\n   * Standalone upgrade controller for elements without a timegroup.\n   */\n  #standaloneUpgradeController: AbortController | null = null;\n\n  /**\n   * Set to true while renderToVideo is executing to suppress background\n   * quality upgrade tasks that would race with the render pipeline.\n   */\n  #renderingToVideo = false;\n\n  /**\n   * Stable per-instance identifier for the quality upgrade scheduler.\n   * Uses this.id when available; falls back to a generated unique string so\n   * elements without an id attribute never collide with each other.\n   */\n  #upgradeOwnerId: string = crypto.randomUUID();\n\n  /**\n   * Current rendition being displayed (for observability).\n   */\n  #currentRenditionId: \"main\" | \"scrub\" | undefined = undefined;\n\n  /**\n   * Get the current rendition being displayed.\n   * @public\n   */\n  get currentRenditionId(): \"main\" | \"scrub\" | undefined {\n    return this.#currentRenditionId;\n  }\n\n  /**\n   * Query readiness state for a given time.\n   * @implements FrameRenderable\n   *\n   * Note: The timeMs parameter is the root timegroup's time. We check against\n   * this.currentSourceTimeMs since that's what we cache in prepareFrame.\n   */\n  getFrameState(_timeMs: number): FrameState {\n    // Use element's source time to match what prepareFrame caches\n    const sourceTimeMs = this.currentSourceTimeMs;\n\n    // Check if we have a cached sample for this exact source time\n    const hasCache =\n      this.#cachedVideoSample !== undefined && this.#cachedVideoSampleTimeMs === sourceTimeMs;\n\n    return {\n      needsPreparation: !hasCache,\n      isReady: hasCache,\n      priority: PRIORITY_VIDEO,\n    };\n  }\n\n  /**\n   * Async preparation - seeks video and caches the sample.\n   * @implements FrameRenderable\n   *\n   * Note: The timeMs parameter is the root timegroup's time. We ignore it and\n   * use this.currentSourceTimeMs instead, which accounts for:\n   * - Our position within the parent timegroup (ownCurrentTimeMs)\n   * - Source trimming (sourceIn/sourceOut or trimStart/trimEnd)\n   */\n  async prepareFrame(_timeMs: number, signal: AbortSignal): Promise<void> {\n    signal.throwIfAborted();\n    this.unifiedVideoSeekTask.begin();\n    this.#delayedLoadingState.startLoading(\"prepare-frame\", \"\");\n\n    try {\n      // Use element's source time, not the passed root timegroup time.\n      // currentSourceTimeMs = ownCurrentTimeMs + (sourceIn || trimStart || 0)\n      // This correctly maps timeline position to actual media time.\n      const sourceTimeMs = this.currentSourceTimeMs;\n\n      const mediaEngine = await this.getMediaEngine(signal);\n      if (!mediaEngine) {\n        this.#cachedVideoSample = undefined;\n        this.#cachedVideoSampleTimeMs = sourceTimeMs;\n        this.unifiedVideoSeekTask.complete(undefined);\n        return;\n      }\n\n      signal.throwIfAborted();\n\n      // Fetch video sample at the correct source time\n      // Handle errors gracefully so one failed seek doesn't break subsequent frames\n      try {\n        const videoSample = await this.#fetchVideoSampleForFrame(mediaEngine, sourceTimeMs, signal);\n\n        signal.throwIfAborted();\n\n        // Cache the result\n        this.#cachedVideoSample = videoSample;\n        this.#cachedVideoSampleTimeMs = sourceTimeMs;\n        this.unifiedVideoSeekTask.complete(videoSample);\n      } catch (error) {\n        // Re-throw abort errors to properly handle cancellation\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          this.unifiedVideoSeekTask.abort();\n          throw error;\n        }\n\n        // For seek errors (NoSample, out of bounds, etc.), just clear cache\n        // This allows subsequent frames to retry instead of being stuck\n        console.warn(`Video seek error at ${sourceTimeMs}ms:`, error);\n        this.#cachedVideoSample = undefined;\n        this.#cachedVideoSampleTimeMs = sourceTimeMs;\n        this.unifiedVideoSeekTask.complete(undefined);\n      }\n    } finally {\n      this.#delayedLoadingState.clearLoading(\"prepare-frame\");\n    }\n  }\n\n  /**\n   * Synchronous render - paints cached video sample to canvas.\n   * @implements FrameRenderable\n   *\n   * Note: The timeMs parameter is the root timegroup's time. We use\n   * this.currentSourceTimeMs to match what prepareFrame cached.\n   */\n  renderFrame(_timeMs: number): void {\n    // Use element's source time to match what was cached in prepareFrame\n    const sourceTimeMs = this.currentSourceTimeMs;\n\n    // Use cached sample if available for this source time\n    if (this.#cachedVideoSampleTimeMs === sourceTimeMs && this.#cachedVideoSample) {\n      const videoFrame = this.#cachedVideoSample.toVideoFrame();\n      try {\n        this.displayFrame(videoFrame, sourceTimeMs);\n      } finally {\n        videoFrame.close();\n      }\n    }\n\n    // Update animations if not in parent timegroup\n    if (!this.parentTimegroup) {\n      updateAnimations(this);\n    }\n  }\n\n  /**\n   * Fetch video sample for a given time.\n   *\n   * Uses a quality routing strategy:\n   * - In production rendering: always use main (full quality) track\n   * - In preview mode: try scrub track first for faster scrubbing, fall back to main\n   * - If main track segment is already cached: use it (avoid redundant lower-quality fetch)\n   */\n  async #fetchVideoSampleForFrame(\n    mediaEngine: MediaEngine,\n    desiredSeekTimeMs: number,\n    signal: AbortSignal,\n  ): Promise<VideoSample | undefined> {\n    const mainTrack = mediaEngine.tracks.video;\n\n    // FIRST: Check if main quality content is already cached - use it if so\n    if (mainTrack) {\n      const mainSegmentId = mediaEngine.index.segmentAt(desiredSeekTimeMs, mainTrack);\n      if (mainSegmentId !== undefined && mediaEngine.transport.isCached(mainSegmentId, mainTrack)) {\n        this.#currentRenditionId = \"main\";\n        return this.#getMainVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal);\n      }\n    }\n\n    // SECOND: In production rendering mode, always use main (full quality) track\n    if (this.isInProductionRenderingMode()) {\n      this.#currentRenditionId = \"main\";\n      return this.#getMainVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal);\n    }\n\n    // THIRD: In preview mode, try scrub track first for faster scrubbing\n    const scrubTrack = mediaEngine.tracks.scrub;\n    if (scrubTrack) {\n      const scrubSample = await this.#getScrubVideoSampleForFrame(\n        mediaEngine,\n        desiredSeekTimeMs,\n        signal,\n      );\n      if (scrubSample) {\n        this.#currentRenditionId = \"scrub\";\n        // Got scrub - schedule background quality upgrade\n        this.#maybeScheduleQualityUpgrade(mediaEngine, desiredSeekTimeMs);\n        return scrubSample;\n      }\n    }\n\n    // FOURTH: Fall back to main video path\n    this.#currentRenditionId = \"main\";\n    return this.#getMainVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal);\n  }\n\n  /**\n   * Get scrub (low-resolution) video sample for fast preview scrubbing.\n   * Used in preview mode for faster response during timeline scrubbing.\n   */\n  async #getScrubVideoSampleForFrame(\n    mediaEngine: MediaEngine,\n    desiredSeekTimeMs: number,\n    signal: AbortSignal,\n  ): Promise<VideoSample | undefined> {\n    const scrubTrack = mediaEngine.tracks.scrub;\n    if (!scrubTrack) {\n      return undefined;\n    }\n\n    const segmentId = mediaEngine.index.segmentAt(desiredSeekTimeMs, scrubTrack);\n    if (segmentId === undefined) {\n      return undefined;\n    }\n\n    const scrubInput = await scrubInputCache.getOrCreateInput(\n      mediaEngine.src,\n      segmentId,\n      async () => {\n        let initSegment: ArrayBuffer | undefined;\n        let mediaSegment: ArrayBuffer | undefined;\n\n        try {\n          const initP = mediaEngine.transport.fetchInitSegment(scrubTrack, signal);\n          const mediaP = mediaEngine.transport.fetchMediaSegment(segmentId, scrubTrack, signal);\n          initP.catch(() => {});\n          mediaP.catch(() => {});\n          [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);\n        } catch (error) {\n          if (error instanceof DOMException && error.name === \"AbortError\") {\n            throw error;\n          }\n          return undefined;\n        }\n\n        if (!initSegment || !mediaSegment) {\n          return undefined;\n        }\n        signal.throwIfAborted();\n\n        const combinedBlob = new Blob([initSegment, mediaSegment]);\n        signal.throwIfAborted();\n\n        const arrayBuffer = await combinedBlob.arrayBuffer();\n        signal.throwIfAborted();\n\n        const { BufferedSeekingInput } = await import(\"./EFMedia/BufferedSeekingInput.js\");\n\n        return new BufferedSeekingInput(arrayBuffer, {\n          videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,\n          audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,\n          startTimeOffsetMs: scrubTrack.startTimeOffsetMs,\n        });\n      },\n    );\n\n    if (!scrubInput) {\n      return undefined;\n    }\n\n    signal.throwIfAborted();\n\n    const videoTrack = await scrubInput.getFirstVideoTrack();\n    if (!videoTrack) {\n      return undefined;\n    }\n\n    signal.throwIfAborted();\n\n    return scrubInput.seek(videoTrack.id, desiredSeekTimeMs) as Promise<VideoSample | undefined>;\n  }\n\n  /**\n   * Get main video sample for a given time.\n   */\n  async #getMainVideoSampleForFrame(\n    mediaEngine: MediaEngine,\n    desiredSeekTimeMs: number,\n    signal: AbortSignal,\n  ): Promise<VideoSample | undefined> {\n    const videoTrack = mediaEngine.tracks.video;\n    if (!videoTrack) {\n      return undefined;\n    }\n\n    const segmentId = mediaEngine.index.segmentAt(desiredSeekTimeMs, videoTrack);\n    if (segmentId === undefined) {\n      return undefined;\n    }\n\n    const mainInput = await mainVideoInputCache.getOrCreateInput(\n      mediaEngine.src,\n      segmentId,\n      String(videoTrack.id),\n      async () => {\n        let initSegment: ArrayBuffer | undefined;\n        let mediaSegment: ArrayBuffer | undefined;\n\n        try {\n          const initP = mediaEngine.transport.fetchInitSegment(videoTrack, signal);\n          const mediaP = mediaEngine.transport.fetchMediaSegment(segmentId, videoTrack, signal);\n          initP.catch(() => {});\n          mediaP.catch(() => {});\n          [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);\n        } catch (error) {\n          if (error instanceof DOMException && error.name === \"AbortError\") {\n            throw error;\n          }\n          if (\n            error instanceof Error &&\n            (error.message.includes(\"401\") ||\n              error.message.includes(\"UNAUTHORIZED\") ||\n              error.message.includes(\"Failed to fetch\") ||\n              error.message.includes(\"File not found\") ||\n              error.message.includes(\"Media segment not found\") ||\n              error.message.includes(\"Init segment not found\") ||\n              error.message.includes(\"Track not found\"))\n          ) {\n            return undefined;\n          }\n          throw error;\n        }\n\n        if (!initSegment || !mediaSegment) {\n          return undefined;\n        }\n        signal.throwIfAborted();\n\n        const combinedBlob = new Blob([initSegment, mediaSegment]);\n        signal.throwIfAborted();\n\n        const arrayBuffer = await combinedBlob.arrayBuffer();\n        signal.throwIfAborted();\n\n        const { BufferedSeekingInput } = await import(\"./EFMedia/BufferedSeekingInput.js\");\n\n        return new BufferedSeekingInput(arrayBuffer, {\n          videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,\n          audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,\n          startTimeOffsetMs: videoTrack.startTimeOffsetMs,\n        });\n      },\n    );\n\n    if (!mainInput) {\n      return undefined;\n    }\n\n    signal.throwIfAborted();\n\n    const videoTrackInfo = await mainInput.getFirstVideoTrack();\n    if (!videoTrackInfo) {\n      return undefined;\n    }\n\n    signal.throwIfAborted();\n\n    const sample = (await mainInput.seek(videoTrackInfo.id, desiredSeekTimeMs)) as\n      | VideoSample\n      | undefined;\n    return sample;\n  }\n\n  // ============================================================================\n  // End FrameRenderable Implementation\n  // ============================================================================\n\n  /**\n   * Delayed loading state manager for user feedback\n   */\n  #delayedLoadingState: DelayedLoadingState;\n\n  /**\n   * Loading state for user feedback\n   */\n  @state()\n  loadingState = {\n    isLoading: false,\n    operation: null as LoadingState[\"operation\"],\n    message: \"\",\n  };\n\n  constructor() {\n    super();\n\n    // Initialize delayed loading state with callback to update UI\n    this.#delayedLoadingState = new DelayedLoadingState(100, (isLoading, message) => {\n      this.setLoadingState(isLoading, null, message);\n    });\n  }\n\n  protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    super.updated(changedProperties);\n\n    // Invalidate upgrade state on src/fileId change\n    if (changedProperties.has(\"src\") || changedProperties.has(\"fileId\")) {\n      this.#invalidateUpgradeState(\"src-change\");\n      this.#prewarmQualityUpgrade();\n    }\n\n    // Invalidate upgrade state on trim/source changes\n    const durationAffectingProps = [\"_trimStartMs\", \"_trimEndMs\", \"_sourceInMs\", \"_sourceOutMs\"];\n    const hasDurationChange = durationAffectingProps.some((prop) => changedProperties.has(prop));\n    if (hasDurationChange) {\n      this.#invalidateUpgradeState(\"bounds-change\");\n      this.#prewarmQualityUpgrade();\n    }\n\n    // No need to clear canvas - displayFrame() overwrites it completely\n    // and clearing creates blank frame gaps during transitions\n  }\n\n  /**\n   * Eagerly load the media engine and pre-warm main-quality segments for the\n   * start of this clip. Called when src/fileId or source bounds change so that\n   * segments are already in cache by the time the element first becomes visible.\n   *\n   * Without pre-warming, quality upgrade only begins after the first scrub frame\n   * is displayed, causing ~12 frames of blur at the cold-start of every clip.\n   */\n  #prewarmQualityUpgrade(): void {\n    if (this.isInProductionRenderingMode()) return;\n    if (!this.src && !this.fileId) return;\n\n    this.getMediaEngine()\n      .then((engine) => {\n        if (!engine) return;\n        const sourceInMs = this.sourceInMs ?? 0;\n        this.#maybeScheduleQualityUpgrade(engine, sourceInMs);\n      })\n      .catch(() => {});\n  }\n\n  render() {\n    return html`\n      <canvas ${ref(this.canvasRef)}></canvas>\n      ${\n        this.loadingState.isLoading\n          ? html`<div class=\"loading-overlay\"><div class=\"loading-bar\"></div></div>`\n          : \"\"\n      }\n    `;\n  }\n\n  get canvasElement() {\n    const referencedCanvas = this.canvasRef.value;\n    if (referencedCanvas) {\n      return referencedCanvas;\n    }\n    const shadowCanvas = this.shadowRoot?.querySelector(\"canvas\");\n    if (shadowCanvas) {\n      return shadowCanvas;\n    }\n    return undefined;\n  }\n\n  /**\n   * Start a delayed loading operation for testing\n   */\n  startDelayedLoading(\n    operationId: string,\n    message: string,\n    options: { background?: boolean } = {},\n  ): void {\n    this.#delayedLoadingState.startLoading(operationId, message, options);\n  }\n\n  /**\n   * Clear a delayed loading operation for testing\n   */\n  clearDelayedLoading(operationId: string): void {\n    this.#delayedLoadingState.clearLoading(operationId);\n  }\n\n  /**\n   * Set loading state for user feedback\n   */\n  private setLoadingState(\n    isLoading: boolean,\n    operation: LoadingState[\"operation\"] = null,\n    message = \"\",\n  ): void {\n    this.loadingState = {\n      isLoading,\n      operation,\n      message,\n    };\n  }\n\n  /**\n   * Paint the current video frame to canvas\n   */\n  paint(seekToMs: number, parentSpan?: any): void {\n    const parentContext = parentSpan ? trace.setSpan(context.active(), parentSpan) : undefined;\n\n    withSpanSync(\n      \"video.paint\",\n      {\n        elementId: this.id || \"unknown\",\n        seekToMs,\n        src: this.src || \"none\",\n      },\n      parentContext,\n      (span) => {\n        const t0 = performance.now();\n\n        // Check if we're in production rendering mode vs preview mode\n        const isProductionRendering = this.isInProductionRenderingMode();\n        const t1 = performance.now();\n        span.setAttribute(\"isProductionRendering\", isProductionRendering);\n        span.setAttribute(\"modeCheckMs\", t1 - t0);\n\n        // Use cached video sample from prepareFrame\n        try {\n          const t2 = performance.now();\n          const videoSample = this.#cachedVideoSample;\n          span.setAttribute(\"hasVideoSample\", !!videoSample);\n          span.setAttribute(\"valueAccessMs\", t2 - t1);\n\n          if (videoSample) {\n            const t3 = performance.now();\n            const videoFrame = videoSample.toVideoFrame();\n            const t4 = performance.now();\n            span.setAttribute(\"toVideoFrameMs\", t4 - t3);\n\n            try {\n              const t5 = performance.now();\n              this.displayFrame(videoFrame, seekToMs, span);\n              const t6 = performance.now();\n              span.setAttribute(\"displayFrameMs\", t6 - t5);\n            } finally {\n              videoFrame.close();\n            }\n          }\n        } catch (error) {\n          console.warn(\"Video pipeline error:\", error);\n        }\n\n        // EF_FRAMEGEN-aware rendering mode detection\n        if (!isProductionRendering) {\n          // Preview mode: always render\n          // Visibility is handled by the phase/visibility system (CSS display:none)\n          // No need to skip initialization frames - if element shouldn't be visible,\n          // it will be hidden by CSS\n        } else {\n          // Production rendering mode: only render when EF_FRAMEGEN has explicitly started frame rendering\n          // This prevents initialization frames before the actual render sequence begins\n          if (!this.rootTimegroup) {\n            span.setAttribute(\"skipped\", \"no-root-timegroup\");\n            return;\n          }\n\n          if (!this.isFrameRenderingActive()) {\n            span.setAttribute(\"skipped\", \"frame-rendering-not-active\");\n            return; // Wait for EF_FRAMEGEN to start frame sequence\n          }\n\n          // Production mode: EF_FRAMEGEN has started frame sequence, proceed with rendering\n        }\n\n        const tEnd = performance.now();\n        span.setAttribute(\"totalPaintMs\", tEnd - t0);\n      },\n    );\n  }\n\n  /**\n   * Clear the canvas when element becomes inactive\n   */\n  clearCanvas(): void {\n    if (!this.canvasElement) return;\n\n    const ctx = this.canvasElement.getContext(\"2d\", {\n      willReadFrequently: true,\n    });\n    if (ctx) {\n      ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n    }\n  }\n\n  /**\n   * Display a video frame on the canvas\n   */\n  displayFrame(frame: VideoFrame, seekToMs: number, parentSpan?: any): void {\n    const parentContext = parentSpan ? trace.setSpan(context.active(), parentSpan) : undefined;\n\n    withSpanSync(\n      \"video.displayFrame\",\n      {\n        elementId: this.id || \"unknown\",\n        seekToMs,\n        format: frame.format || \"unknown\",\n        width: frame.codedWidth,\n        height: frame.codedHeight,\n      },\n      parentContext,\n      (span) => {\n        const t0 = performance.now();\n\n        log(\"trace: displayFrame start\", {\n          seekToMs,\n          frameFormat: frame.format,\n        });\n\n        if (!this.canvasElement) {\n          log(\"trace: displayFrame aborted - no canvas element\");\n          throw new Error(\n            `Frame display failed: Canvas element is not available at time ${seekToMs}ms. The video component may not be properly initialized.`,\n          );\n        }\n        const t1 = performance.now();\n        span.setAttribute(\"getCanvasMs\", Math.round((t1 - t0) * 100) / 100);\n\n        const ctx = this.canvasElement.getContext(\"2d\", {\n          willReadFrequently: true,\n        });\n        const t2 = performance.now();\n        span.setAttribute(\"getCtxMs\", Math.round((t2 - t1) * 100) / 100);\n\n        if (!ctx) {\n          log(\"trace: displayFrame aborted - no canvas context\");\n          throw new Error(\n            `Frame display failed: Unable to get 2D canvas context at time ${seekToMs}ms. This may indicate a browser compatibility issue or canvas corruption.`,\n          );\n        }\n\n        const frameWidth = frame.displayWidth;\n        const frameHeight = frame.displayHeight;\n\n        let resized = false;\n        if (frameWidth && frameHeight) {\n          const needsResize =\n            frameWidth > this.canvasElement.width || frameHeight > this.canvasElement.height;\n          if (needsResize) {\n            const newWidth = Math.max(this.canvasElement.width, frameWidth);\n            const newHeight = Math.max(this.canvasElement.height, frameHeight);\n            log(\"trace: updating canvas dimensions\", {\n              width: newWidth,\n              height: newHeight,\n            });\n            this.canvasElement.width = newWidth;\n            this.canvasElement.height = newHeight;\n            resized = true;\n            const t3 = performance.now();\n            span.setAttribute(\"resizeMs\", Math.round((t3 - t2) * 100) / 100);\n          }\n        }\n        span.setAttribute(\"canvasResized\", resized);\n\n        if (frame.format === null) {\n          log(\"trace: displayFrame aborted - null frame format\");\n          throw new Error(\n            `Frame display failed: Video frame has null format at time ${seekToMs}ms. This indicates corrupted or incompatible video data.`,\n          );\n        }\n\n        const tDrawStart = performance.now();\n        ctx.drawImage(frame, 0, 0, this.canvasElement.width, this.canvasElement.height);\n        const tDrawEnd = performance.now();\n        span.setAttribute(\"drawImageMs\", Math.round((tDrawEnd - tDrawStart) * 100) / 100);\n        span.setAttribute(\"totalDisplayMs\", Math.round((tDrawEnd - t0) * 100) / 100);\n        span.setAttribute(\"canvasWidth\", this.canvasElement.width);\n        span.setAttribute(\"canvasHeight\", this.canvasElement.height);\n\n        log(\"trace: frame drawn to canvas\", { seekToMs });\n      },\n    );\n  }\n\n  /**\n   * Check if we're in production rendering mode (EF_FRAMEGEN active) vs preview mode\n   */\n  private isInProductionRenderingMode(): boolean {\n    // Check if EF_RENDERING function exists and returns true (production rendering)\n    if (typeof window.EF_RENDERING === \"function\") {\n      return window.EF_RENDERING();\n    }\n\n    // Check if workbench is in rendering mode\n    const workbench = document.querySelector(\"ef-workbench\") as any;\n    if (workbench?.rendering) {\n      return true;\n    }\n\n    // Check if EF_FRAMEGEN exists and has render options (indicates active rendering)\n    if (window.EF_FRAMEGEN?.renderOptions) {\n      return true;\n    }\n\n    // Default to preview mode\n    return false;\n  }\n\n  /**\n   * Check if EF_FRAMEGEN has explicitly started frame rendering (not just initialization)\n   */\n  private isFrameRenderingActive(): boolean {\n    if (!window.EF_FRAMEGEN?.renderOptions) {\n      return false;\n    }\n\n    // In production mode, only render when EF_FRAMEGEN has actually begun frame sequence\n    // Check if we're past the initialization phase by looking for explicit frame control\n    const renderOptions = window.EF_FRAMEGEN.renderOptions;\n    const renderStartTime = renderOptions.encoderOptions.fromMs;\n    const currentTime = this.rootTimegroup?.currentTimeMs || 0;\n\n    // We're in active frame rendering if:\n    // 1. currentTime >= renderStartTime (includes the starting frame)\n    return currentTime >= renderStartTime;\n  }\n\n  /**\n   * Get a decoded VideoFrame at a specific source media timestamp.\n   * Returns a standard WebCodecs VideoFrame — caller MUST call .close() when done.\n   *\n   * Uses the same routing logic as the unified video system:\n   * - \"auto\": main track for production rendering, follows normal routing otherwise\n   * - \"scrub\": force low-res scrub track (for thumbnails)\n   * - \"main\": force full-quality main track\n   *\n   * @param sourceTimeMs - Timestamp in source media coordinates (not timeline)\n   * @param options - Quality and abort signal\n   * @returns VideoFrame that the caller must close()\n   * @public\n   */\n  async getVideoFrameAtSourceTime(\n    sourceTimeMs: number,\n    options: {\n      quality?: \"auto\" | \"scrub\" | \"main\";\n      signal?: AbortSignal;\n    } = {},\n  ): Promise<VideoFrame> {\n    const { quality = \"auto\", signal: providedSignal } = options;\n\n    const signal = providedSignal ?? new AbortController().signal;\n    signal.throwIfAborted();\n\n    this.playbackController?.suspendSelfRender();\n    try {\n      const mediaEngine = await this.getMediaEngine(signal);\n      signal.throwIfAborted();\n\n      if (!mediaEngine) {\n        throw new Error(\"No media engine available for frame capture\");\n      }\n\n      const useMainTrack =\n        quality === \"main\" || (quality === \"auto\" && this.isInProductionRenderingMode());\n\n      let videoSample: any;\n\n      const { BufferedSeekingInput } = await import(\"./EFMedia/BufferedSeekingInput.js\");\n      signal.throwIfAborted();\n\n      if (useMainTrack) {\n        const videoTrack = mediaEngine.tracks.video;\n        if (!videoTrack) {\n          throw new Error(\"No video rendition available\");\n        }\n\n        const segmentId = mediaEngine.index.segmentAt(sourceTimeMs, videoTrack);\n        if (segmentId === undefined) {\n          throw new Error(`Cannot compute segment ID for time ${sourceTimeMs}ms`);\n        }\n\n        const seekingInput = await mainVideoInputCache.getOrCreateInput(\n          mediaEngine.src,\n          segmentId,\n          String(videoTrack.id),\n          async () => {\n            const initP = mediaEngine.transport.fetchInitSegment(videoTrack, signal);\n            const mediaP = mediaEngine.transport.fetchMediaSegment(segmentId, videoTrack, signal);\n            initP.catch(() => {});\n            mediaP.catch(() => {});\n            const [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);\n\n            if (!initSegment || !mediaSegment) {\n              return undefined;\n            }\n\n            const combinedBlob = new Blob([initSegment, mediaSegment]);\n            const arrayBuffer = await combinedBlob.arrayBuffer();\n\n            return new BufferedSeekingInput(arrayBuffer, {\n              videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,\n              audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,\n              startTimeOffsetMs: videoTrack.startTimeOffsetMs,\n            });\n          },\n        );\n        signal.throwIfAborted();\n\n        if (!seekingInput) {\n          throw new Error(`Failed to fetch video segments for time ${sourceTimeMs}ms`);\n        }\n\n        const seekingVideoTrack = await seekingInput.getFirstVideoTrack();\n        signal.throwIfAborted();\n\n        if (!seekingVideoTrack) {\n          throw new Error(\"No video track found in segment\");\n        }\n\n        videoSample = await seekingInput.seek(seekingVideoTrack.id, sourceTimeMs);\n        signal.throwIfAborted();\n      } else {\n        const scrubTrack = mediaEngine.tracks.scrub;\n        if (!scrubTrack) {\n          return this.getVideoFrameAtSourceTime(sourceTimeMs, {\n            quality: \"main\",\n            signal,\n          });\n        }\n\n        const segmentId = mediaEngine.index.segmentAt(sourceTimeMs, scrubTrack);\n\n        if (segmentId === undefined) {\n          throw new Error(`Cannot compute scrub segment ID for time ${sourceTimeMs}ms`);\n        }\n\n        const seekingInput = await scrubInputCache.getOrCreateInput(\n          mediaEngine.src,\n          segmentId,\n          async () => {\n            const initP = mediaEngine.transport.fetchInitSegment(scrubTrack, signal);\n            const mediaP = mediaEngine.transport.fetchMediaSegment(segmentId, scrubTrack, signal);\n            initP.catch(() => {});\n            mediaP.catch(() => {});\n            const [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);\n\n            if (!initSegment || !mediaSegment) {\n              return undefined;\n            }\n\n            const combinedBlob = new Blob([initSegment, mediaSegment]);\n            const arrayBuffer = await combinedBlob.arrayBuffer();\n\n            return new BufferedSeekingInput(arrayBuffer, {\n              videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,\n              audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,\n              startTimeOffsetMs: scrubTrack.startTimeOffsetMs,\n            });\n          },\n        );\n        signal.throwIfAborted();\n\n        if (!seekingInput) {\n          return this.getVideoFrameAtSourceTime(sourceTimeMs, {\n            quality: \"main\",\n            signal,\n          });\n        }\n\n        const seekingVideoTrack = await seekingInput.getFirstVideoTrack();\n        signal.throwIfAborted();\n\n        if (!seekingVideoTrack) {\n          return this.getVideoFrameAtSourceTime(sourceTimeMs, {\n            quality: \"main\",\n            signal,\n          });\n        }\n\n        videoSample = await seekingInput.seek(seekingVideoTrack.id, sourceTimeMs);\n        signal.throwIfAborted();\n      }\n\n      if (!videoSample) {\n        throw new Error(`No video sample found at ${sourceTimeMs}ms`);\n      }\n\n      return videoSample.toVideoFrame();\n    } finally {\n      this.playbackController?.resumeSelfRender();\n    }\n  }\n\n  /**\n   * Capture a video frame directly at a source media timestamp.\n   * Designed for export/rendering.\n   * Does NOT paint to the element's internal canvas.\n   *\n   * Uses the same routing logic as unified video system:\n   * - \"auto\": main track for production rendering, follows normal routing otherwise\n   * - \"scrub\": force low-res scrub track (for thumbnails)\n   * - \"main\": force full-quality main track\n   *\n   * @param sourceTimeMs - Timestamp in source media coordinates (not timeline)\n   * @param options - Capture options including quality and abort signal\n   * @returns Frame data for serialization\n   * @public\n   */\n  async captureFrameAtSourceTime(\n    sourceTimeMs: number,\n    options: {\n      quality?: \"auto\" | \"scrub\" | \"main\";\n      signal?: AbortSignal;\n    } = {},\n  ): Promise<{\n    dataUrl: string;\n    width: number;\n    height: number;\n  }> {\n    const videoFrame = await this.getVideoFrameAtSourceTime(sourceTimeMs, options);\n\n    try {\n      options.signal?.throwIfAborted();\n\n      const canvas = new OffscreenCanvas(videoFrame.codedWidth, videoFrame.codedHeight);\n      const ctx = canvas.getContext(\"2d\");\n      if (!ctx) {\n        throw new Error(\"Failed to get 2d context from OffscreenCanvas\");\n      }\n      ctx.drawImage(videoFrame, 0, 0);\n\n      options.signal?.throwIfAborted();\n\n      const blob = await canvas.convertToBlob({\n        type: \"image/jpeg\",\n        quality: 0.92,\n      });\n      options.signal?.throwIfAborted();\n\n      const dataUrl = await new Promise<string>((resolve, reject) => {\n        const reader = new FileReader();\n        reader.onload = () => resolve(reader.result as string);\n        reader.onerror = reject;\n        reader.readAsDataURL(blob);\n      });\n      options.signal?.throwIfAborted();\n\n      return {\n        dataUrl,\n        width: videoFrame.codedWidth,\n        height: videoFrame.codedHeight,\n      };\n    } finally {\n      videoFrame.close();\n    }\n  }\n\n  /**\n   * Pre-fetch scrub segments for given timestamps.\n   * Loads 30-second segments sequentially, emitting progress events.\n   * This ensures scrub track is cached for fast thumbnail generation.\n   *\n   * @param timestamps - Array of timestamps (in ms) that will be captured\n   * @param onProgress - Optional callback for loading progress\n   * @param signal - Optional AbortSignal for cancellation\n   * @returns Promise that resolves when all segments are cached\n   * @public\n   */\n  async prefetchScrubSegments(\n    timestamps: number[],\n    onProgress?: (loaded: number, total: number, segmentTimeRange: [number, number]) => void,\n    signal?: AbortSignal,\n  ): Promise<void> {\n    // Wait for media engine to be ready\n    const mediaEngine = await this.getMediaEngine(signal);\n    if (!mediaEngine) {\n      log(\"prefetchScrubSegments: no media engine available\");\n      return;\n    }\n\n    const scrubTrack = mediaEngine.tracks.scrub;\n    if (!scrubTrack) {\n      log(\"prefetchScrubSegments: no scrub rendition available\");\n      return;\n    }\n\n    // Compute unique segment IDs needed for all timestamps\n    const segmentIds = new Set<number>();\n    for (const ts of timestamps) {\n      const segmentId = mediaEngine.index.segmentAt(ts, scrubTrack);\n      if (segmentId !== undefined) {\n        segmentIds.add(segmentId);\n      }\n    }\n\n    if (segmentIds.size === 0) {\n      log(\"prefetchScrubSegments: no segments to prefetch\");\n      return;\n    }\n\n    // Check if ANY segment is already cached (meaning the file is loaded).\n    const firstSegmentId = Array.from(segmentIds)[0]!;\n    if (mediaEngine.transport.isCached(firstSegmentId, scrubTrack)) {\n      log(\"prefetchScrubSegments: scrub track already cached\");\n      return;\n    }\n\n    log(`prefetchScrubSegments: fetching scrub track for ${segmentIds.size} segments...`);\n\n    const durationMs = mediaEngine.durationMs || 0;\n    this.dispatchEvent(\n      new CustomEvent(\"scrub-segment-loading\", {\n        detail: {\n          segmentId: 0,\n          timeRangeMs: [0, durationMs] as [number, number],\n          loaded: 0,\n          total: 1,\n          status: \"loading\",\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n\n    const fetchSignal = signal ?? new AbortController().signal;\n    try {\n      await mediaEngine.transport.fetchMediaSegment(firstSegmentId, scrubTrack, fetchSignal);\n      log(`prefetchScrubSegments: scrub track loaded`);\n    } catch (error) {\n      log(`prefetchScrubSegments: failed to load scrub track`, error);\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(\"scrub-segment-loading\", {\n        detail: {\n          segmentId: 0,\n          timeRangeMs: [0, durationMs] as [number, number],\n          loaded: 1,\n          total: 1,\n          status: \"loaded\",\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n\n    onProgress?.(1, 1, [0, durationMs]);\n    log(`prefetchScrubSegments: complete`);\n  }\n\n  /**\n   * Maybe schedule quality upgrade tasks for this element.\n   * Called when returning a scrub sample - checks if state has changed and submits tasks.\n   */\n  #maybeScheduleQualityUpgrade(mediaEngine: MediaEngine, sourceTimeMs: number): void {\n    if (this.#renderingToVideo) return;\n    const mainTrack = mediaEngine.tracks.video;\n    if (!mainTrack) return;\n\n    const segmentId = mediaEngine.index.segmentAt(sourceTimeMs, mainTrack);\n    if (segmentId === undefined) return;\n\n    const startTimeMs = this.startTimeMs;\n\n    const stateChanged =\n      this.#upgradeState === null ||\n      this.#upgradeState.segmentId !== segmentId ||\n      this.#upgradeState.startTimeMs !== startTimeMs;\n\n    if (!stateChanged) {\n      // State matches what we previously submitted. Check if the task is still\n      // active or waiting in the queue — either way it will populate the cache.\n      const currentTaskKey = `${this.#upgradeOwnerId}:${segmentId}:${mainTrack.id}`;\n      const scheduler = this.rootTimegroup?.qualityUpgradeScheduler;\n      if (scheduler?.isActive(currentTaskKey) || scheduler?.isPending(currentTaskKey)) {\n        return;\n      }\n      // Task is neither running nor queued — it completed (or failed) and the\n      // segment may have been evicted. Re-submit.\n      this.rootTimegroup?.qualityUpgradeScheduler?.cancelForOwner(this.#upgradeOwnerId);\n      this.#upgradeState = null;\n      // Fall through to re-submit\n    }\n\n    const segments = this.#computeLookaheadSegments(mediaEngine, sourceTimeMs, mainTrack);\n    if (segments.length === 0) return;\n\n    const tasks = segments.map((seg) => ({\n      key: `${this.#upgradeOwnerId}:${seg.segmentId}:${mainTrack.id}`,\n      fetch: async (signal: AbortSignal) => {\n        await mediaEngine.transport.fetchInitSegment(mainTrack, signal);\n        await mediaEngine.transport.fetchMediaSegment(seg.segmentId, mainTrack, signal);\n      },\n      deadlineMs: seg.deadlineMs,\n      owner: this.#upgradeOwnerId,\n    }));\n\n    const scheduler = this.rootTimegroup?.qualityUpgradeScheduler;\n    if (scheduler) {\n      scheduler.replaceForOwner(this.#upgradeOwnerId, tasks);\n    } else {\n      this.#fetchStandalone(tasks);\n    }\n\n    this.#upgradeState = {\n      sourceTimeMs,\n      segmentId,\n      startTimeMs,\n      submittedKeys: new Set(tasks.map((t) => t.key)),\n    };\n  }\n\n  /**\n   * Compute lookahead segments with deadlines in timeline space.\n   */\n  #computeLookaheadSegments(\n    mediaEngine: MediaEngine,\n    currentSourceTimeMs: number,\n    track: import(\"./EFMedia/SegmentIndex.js\").TrackRef,\n    maxLookahead: number = 5,\n  ): { segmentId: number; deadlineMs: number }[] {\n    const results: { segmentId: number; deadlineMs: number }[] = [];\n    const playheadMs = this.rootTimegroup?.currentTimeMs ?? 0;\n    const seen = new Set<number>();\n\n    let probeTimeMs = currentSourceTimeMs;\n\n    while (seen.size < maxLookahead) {\n      const segmentId = mediaEngine.index.segmentAt(probeTimeMs, track);\n      if (segmentId === undefined) break;\n      if (seen.has(segmentId)) break;\n\n      seen.add(segmentId);\n\n      if (!mediaEngine.transport.isCached(segmentId, track)) {\n        const offsetFromCurrentMs = probeTimeMs - currentSourceTimeMs;\n        const deadlineMs = playheadMs + offsetFromCurrentMs;\n        results.push({ segmentId, deadlineMs });\n      }\n\n      const thisDuration =\n        track.segmentDurationsMs?.[segmentId - 1] ?? track.segmentDurationMs ?? 2000;\n      probeTimeMs += thisDuration;\n    }\n\n    return results;\n  }\n\n  /**\n   * Standalone mode: fetch tasks sequentially without scheduler.\n   */\n  #fetchStandalone(tasks: any[]): void {\n    // Abort any previous standalone batch (e.g., after seek)\n    this.#standaloneUpgradeController?.abort();\n    this.#standaloneUpgradeController = new AbortController();\n    const signal = this.#standaloneUpgradeController.signal;\n\n    // Process sequentially\n    (async () => {\n      for (const task of tasks) {\n        if (signal.aborted) break;\n        try {\n          await task.fetch(signal);\n        } catch {\n          // Continue on error\n        }\n      }\n      // After all tasks complete, trigger re-render\n      if (!signal.aborted) {\n        this.playbackController?.runThrottledFrameTask().catch(() => {});\n      }\n    })().catch(() => {});\n  }\n\n  /**\n   * Invalidate upgrade state and optionally cancel queued tasks.\n   */\n  #invalidateUpgradeState(reason: \"src-change\" | \"bounds-change\" | \"disconnect\"): void {\n    if (reason === \"src-change\" || reason === \"disconnect\") {\n      // Full cancel - old tasks reference a stale media engine\n      this.rootTimegroup?.qualityUpgradeScheduler?.cancelForOwner(this.#upgradeOwnerId);\n    }\n    // For bounds-change, don't cancel - old tasks may still be valid segments,\n    // just with stale deadlines. replaceForOwner on next prepareFrame handles it.\n    this.#upgradeState = null;\n  }\n\n  /**\n   * Clean up resources when component is disconnected\n   */\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    // Clean up delayed loading state\n    this.#delayedLoadingState.clearAllLoading();\n\n    // Cancel upgrade tasks (centralized or standalone)\n    this.#invalidateUpgradeState(\"disconnect\");\n    this.#standaloneUpgradeController?.abort();\n    this.#standaloneUpgradeController = null;\n  }\n\n  didBecomeRoot() {\n    super.didBecomeRoot();\n  }\n  didBecomeChild() {\n    super.didBecomeChild();\n  }\n\n  /**\n   * Get the natural dimensions of the video (coded width and height).\n   * Returns null if the video hasn't loaded yet or canvas isn't available.\n   *\n   * @public\n   */\n  getNaturalDimensions(): { width: number; height: number } | null {\n    const canvas = this.canvasElement;\n    if (!canvas || canvas.width === 0 || canvas.height === 0) {\n      return null;\n    }\n    return {\n      width: canvas.width,\n      height: canvas.height,\n    };\n  }\n\n  /**\n   * Render this video element to an MP4 using the direct video-to-video fast path.\n   * Bypasses DOM serialization — decodes frames directly and re-encodes to MP4.\n   * Respects trim, CSS filter, and opacity.\n   *\n   * @param options - Rendering options (fps, codec, bitrate, etc.)\n   * @returns Promise resolving to video buffer (if returnBuffer), or undefined\n   * @public\n   */\n  async renderToVideo(\n    options?: import(\"../preview/renderTimegroupToVideo.types.js\").RenderToVideoOptions,\n  ): Promise<Uint8Array | undefined> {\n    this.#renderingToVideo = true;\n    try {\n      const { renderVideoToVideo } = await import(\"../preview/renderVideoToVideo.js\");\n      return await renderVideoToVideo(this, options);\n    } finally {\n      this.#renderingToVideo = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-video\": EFVideo;\n  }\n}\n"],"mappings":"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"}

package/dist/elements/EFWaveform.d.ts

@@ -3,16 +3,16 @@ import { TemporalMixinInterface } from "./EFTemporal.js";
 import { EFAudio } from "./EFAudio.js";
 import { EFVideo } from "./EFVideo.js";
 import { TargetController } from "./TargetController.js";
-import * as lit7 from "lit";
+import * as lit6 from "lit";
 import { LitElement, PropertyValueMap } from "lit";
 import { Ref } from "lit/directives/ref.js";
-import * as lit_html7 from "lit-html";
+import * as lit_html6 from "lit-html";
 
 //#region src/elements/EFWaveform.d.ts
 declare const EFWaveform_base: (new (...args: any[]) => TemporalMixinInterface) & typeof LitElement;
 declare class EFWaveform extends EFWaveform_base implements FrameRenderable {
   #private;
-  static styles: lit7.CSSResult;
+  static styles: lit6.CSSResult;
   canvasRef: Ref<HTMLCanvasElement>;
   private ctx;
   private styleObserver;
@@ -24,7 +24,7 @@ declare class EFWaveform extends EFWaveform_base implements FrameRenderable {
    * @public
    */
   get renderVersion(): number;
-  render(): lit_html7.TemplateResult<1>;
+  render(): lit_html6.TemplateResult<1>;
   mode: "roundBars" | "bars" | "bricks" | "line" | "curve" | "pixel" | "wave" | "spikes";
   color: string;
   target: string;

package/dist/elements/EFWaveform.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFWaveform.js","names":["EFWaveform","#renderVersion","#dataTimeMs","#frequencyData","#timeDomainData"],"sources":["../../src/elements/EFWaveform.ts"],"sourcesContent":["import { CSSStyleObserver } from \"@bramus/style-observer\";\nimport { css, html, LitElement, type PropertyValueMap } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { createRef, type Ref, ref } from \"lit/directives/ref.js\";\nimport { EF_RENDERING } from \"../EF_RENDERING.js\";\nimport { TWMixin } from \"../gui/TWMixin.js\";\nimport {\n  type FrameRenderable,\n  type FrameState,\n  PRIORITY_WAVEFORM,\n} from \"../preview/FrameController.js\";\nimport { CrossUpdateController } from \"./CrossUpdateController.js\";\nimport type { EFAudio } from \"./EFAudio.js\";\nimport { EFTemporal } from \"./EFTemporal.js\";\nimport type { EFVideo } from \"./EFVideo.js\";\nimport { TargetController } from \"./TargetController.ts\";\n\n@customElement(\"ef-waveform\")\nexport class EFWaveform\n  extends EFTemporal(TWMixin(LitElement))\n  implements FrameRenderable\n{\n  static styles = css`\n      :host {\n        all: inherit;\n        display: block;\n        position: relative;\n      }\n\n      canvas {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: inherit;\n        object-position: inherit;\n      }\n    `;\n\n  canvasRef: Ref<HTMLCanvasElement> = createRef();\n  private ctx: CanvasRenderingContext2D | null = null;\n  private styleObserver: CSSStyleObserver | null = null;\n\n  private resizeObserver?: ResizeObserver;\n  private mutationObserver?: MutationObserver;\n\n  /**\n   * Render version counter - increments when visual content changes.\n   * Used by RenderContext to cache rendered dataURLs.\n   */\n  #renderVersion = 0;\n\n  /**\n   * Get the current render version.\n   * Version increments when mode, color, barSpacing, lineWidth, or target changes.\n   * @public\n   */\n  get renderVersion(): number {\n    return this.#renderVersion;\n  }\n\n  render() {\n    return html`<canvas ${ref(this.canvasRef)}></canvas>`;\n  }\n\n  @property({\n    type: String,\n    attribute: \"mode\",\n  })\n  mode:\n    | \"roundBars\"\n    | \"bars\"\n    | \"bricks\"\n    | \"line\"\n    | \"curve\"\n    | \"pixel\"\n    | \"wave\"\n    | \"spikes\" = \"bars\";\n\n  @property({ type: String })\n  color = \"currentColor\";\n\n  @property({ type: String, reflect: true })\n  target = \"\";\n\n  @property({ type: Number, attribute: \"bar-spacing\" })\n  barSpacing = 0.5;\n\n  @state()\n  targetElement: EFAudio | EFVideo | null = null;\n\n  @property({ type: Number, attribute: \"line-width\" })\n  lineWidth = 4;\n\n  targetController: TargetController = new TargetController(this);\n\n  connectedCallback() {\n    super.connectedCallback();\n    try {\n      if (this.targetElement) {\n        new CrossUpdateController(this.targetElement, this);\n      }\n    } catch (_error) {\n      // TODO: determine if this is a critical error, or if we should just ignore it\n      // currenty evidence suggests everything still works\n      // no target element, no cross update controller\n    }\n\n    // Initialize ResizeObserver\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeCanvas();\n    });\n\n    // Observe the host element\n    this.resizeObserver.observe(this);\n\n    // Initialize MutationObserver - only for non-style attributes\n    // Style changes are handled by FrameController\n    this.mutationObserver = new MutationObserver((mutationsList) => {\n      for (const mutation of mutationsList) {\n        if (\n          mutation.type === \"attributes\" &&\n          mutation.attributeName !== \"style\"\n        ) {\n          this.requestUpdate();\n        }\n      }\n    });\n\n    // Observe attribute changes on the element\n    this.mutationObserver.observe(this, { attributes: true });\n\n    if (!EF_RENDERING()) {\n      this.styleObserver = new CSSStyleObserver([\"color\"], () => {\n        this.requestUpdate();\n      });\n      this.styleObserver.attach(this);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    // Disconnect the observers when the element is removed from the DOM\n    this.resizeObserver?.disconnect();\n    this.mutationObserver?.disconnect();\n    this.styleObserver?.detach();\n  }\n\n  private resizeCanvas() {\n    this.ctx = this.initCanvas();\n    if (this.ctx) {\n      this.requestUpdate();\n    }\n  }\n\n  protected initCanvas() {\n    const canvas = this.canvasRef.value;\n    if (!canvas) return null;\n\n    const rect = {\n      width: this.offsetWidth,\n      height: this.offsetHeight,\n    };\n    const dpr = window.devicePixelRatio;\n\n    canvas.style.width = `${rect.width}px`;\n    canvas.style.height = `${rect.height}px`;\n\n    canvas.width = rect.width * dpr;\n    canvas.height = rect.height * dpr;\n\n    const ctx = canvas.getContext(\"2d\", { willReadFrequently: true });\n    if (!ctx) return null;\n    ctx.reset();\n\n    // Scale all drawing operations by dpr\n    return ctx;\n  }\n\n  protected drawBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n\n    const totalBars = frequencyData.length;\n    const paddingInner = this.barSpacing;\n    const paddingOuter = 0.01;\n    const availableWidth = waveWidth;\n    const barWidth =\n      availableWidth / (totalBars + (totalBars - 1) * paddingInner);\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    frequencyData.forEach((value, i) => {\n      const normalizedValue = value / 255;\n      const barHeight = normalizedValue * waveHeight;\n      const y = (waveHeight - barHeight) / 2;\n      const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));\n      path.rect(x, y, barWidth, barHeight);\n    });\n\n    ctx.fill(path);\n  }\n\n  protected drawBricks(\n    ctx: CanvasRenderingContext2D,\n    frequencyData: Uint8Array,\n  ) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    const columnWidth = waveWidth / frequencyData.length;\n    const boxSize = columnWidth * 0.9;\n    const verticalGap = boxSize * 0.2; // Add spacing between bricks\n    const maxBricks = Math.floor(waveHeight / (boxSize + verticalGap)); // Account for gaps in height calculation\n\n    frequencyData.forEach((value, i) => {\n      const normalizedValue = value / 255;\n      const brickCount = Math.floor(normalizedValue * maxBricks);\n\n      for (let j = 0; j < brickCount; j++) {\n        const x = columnWidth * i;\n        const y = waveHeight - (j + 1) * (boxSize + verticalGap); // Include gap in position calculation\n        path.rect(x, y, boxSize, boxSize);\n      }\n    });\n\n    ctx.fill(path);\n  }\n\n  protected drawRoundBars(\n    ctx: CanvasRenderingContext2D,\n    frequencyData: Uint8Array,\n  ) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n\n    // Similar padding calculation as drawBars\n    const totalBars = frequencyData.length;\n    const paddingInner = this.barSpacing;\n    const paddingOuter = 0.01;\n    const availableWidth = waveWidth;\n    const barWidth =\n      availableWidth / (totalBars + (totalBars - 1) * paddingInner);\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n\n    // Create a single Path2D object for all rounded bars\n    const path = new Path2D();\n\n    frequencyData.forEach((value, i) => {\n      const normalizedValue = value / 255;\n      const height = normalizedValue * waveHeight; // Use full wave height like in drawBars\n      const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));\n      const y = (waveHeight - height) / 2; // Center vertically\n\n      // Add rounded rectangle to path\n      path.roundRect(x, y, barWidth, height, barWidth / 2);\n    });\n\n    // Single fill operation for all bars\n    ctx.fill(path);\n  }\n\n  protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    // Sample fewer points to make sharp angles more visible\n    const sampleRate = 1; // Only use every 4th point\n\n    for (let i = 0; i < frequencyData.length; i += sampleRate) {\n      const x = (i / frequencyData.length) * waveWidth;\n      const y = (1 - (frequencyData[i] ?? 0) / 255) * waveHeight;\n\n      if (i === 0) {\n        path.moveTo(x, y);\n      } else {\n        path.lineTo(x, y);\n      }\n    }\n    // Ensure we draw to the end\n    const lastX = waveWidth;\n    const lastY =\n      (1 - (frequencyData[frequencyData.length - 1] ?? 0) / 255) * waveHeight;\n    path.lineTo(lastX, lastY);\n\n    ctx.lineWidth = this.lineWidth;\n    ctx.stroke(path);\n  }\n\n  protected drawCurve(\n    ctx: CanvasRenderingContext2D,\n    frequencyData: Uint8Array,\n  ) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    // Draw smooth curves between points using quadratic curves\n    frequencyData.forEach((value, i) => {\n      const x = (i / frequencyData.length) * waveWidth;\n      const y = (1 - value / 255) * waveHeight;\n\n      if (i === 0) {\n        path.moveTo(x, y);\n      } else {\n        const prevX = ((i - 1) / frequencyData.length) * waveWidth;\n        const prevY = (1 - (frequencyData[i - 1] ?? 0) / 255) * waveHeight;\n        const xc = (prevX + x) / 2;\n        const yc = (prevY + y) / 2;\n        path.quadraticCurveTo(prevX, prevY, xc, yc);\n      }\n    });\n\n    ctx.lineWidth = this.lineWidth;\n    ctx.stroke(path);\n  }\n\n  protected drawPixel(\n    ctx: CanvasRenderingContext2D,\n    frequencyData: Uint8Array,\n  ) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n    const baseline = waveHeight / 2;\n    const barWidth = waveWidth / frequencyData.length;\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    frequencyData.forEach((value, i) => {\n      const normalizedValue = value / 255;\n      const x = i * (waveWidth / frequencyData.length);\n      const barHeight = normalizedValue * (waveHeight / 2); // Half height since we extend both ways\n      const y = baseline - barHeight;\n      path.rect(x, y, barWidth, barHeight * 2); // Double height to extend both ways\n    });\n\n    ctx.fill(path);\n  }\n\n  protected drawWave(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n    const paddingOuter = 0.01;\n    const availableWidth = waveWidth * (1 - 2 * paddingOuter);\n    const startX = waveWidth * paddingOuter;\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    // Draw top curve\n    const firstValue = Math.min(((frequencyData[0] ?? 0) / 255) * 2, 1);\n    const firstY = (waveHeight - firstValue * waveHeight) / 2;\n    path.moveTo(startX, firstY);\n\n    // Draw top half\n    frequencyData.forEach((value, i) => {\n      const normalizedValue = Math.min((value / 255) * 2, 1);\n      const x = startX + (i / (frequencyData.length - 1)) * availableWidth;\n      const barHeight = normalizedValue * waveHeight;\n      const y = (waveHeight - barHeight) / 2;\n\n      if (i === 0) {\n        path.moveTo(x, y);\n      } else {\n        const prevX =\n          startX + ((i - 1) / (frequencyData.length - 1)) * availableWidth;\n        const prevValue = Math.min(((frequencyData[i - 1] ?? 0) / 255) * 2, 1);\n        const prevBarHeight = prevValue * waveHeight;\n        const prevY = (waveHeight - prevBarHeight) / 2;\n        const xc = (prevX + x) / 2;\n        const yc = (prevY + y) / 2;\n        path.quadraticCurveTo(prevX, prevY, xc, yc);\n      }\n    });\n\n    // Draw bottom half\n    for (let i = frequencyData.length - 1; i >= 0; i--) {\n      const normalizedValue = Math.min(((frequencyData[i] ?? 0) / 255) * 2, 1);\n      const x = startX + (i / (frequencyData.length - 1)) * availableWidth;\n      const barHeight = normalizedValue * waveHeight;\n      const y = (waveHeight + barHeight) / 2;\n\n      if (i === frequencyData.length - 1) {\n        path.lineTo(x, y);\n      } else {\n        const nextX =\n          startX + ((i + 1) / (frequencyData.length - 1)) * availableWidth;\n        const nextValue = Math.min(((frequencyData[i + 1] ?? 0) / 255) * 2, 1);\n        const nextBarHeight = nextValue * waveHeight;\n        const nextY = (waveHeight + nextBarHeight) / 2;\n        const xc = (nextX + x) / 2;\n        const yc = (nextY + y) / 2;\n        path.quadraticCurveTo(nextX, nextY, xc, yc);\n      }\n    }\n\n    // Close the path with a smooth curve back to start\n    const lastY = (waveHeight + firstValue * waveHeight) / 2;\n    const controlX = startX;\n    const controlY = (lastY + firstY) / 2;\n    path.quadraticCurveTo(controlX, controlY, startX, firstY);\n\n    ctx.fill(path);\n  }\n\n  protected drawSpikes(\n    ctx: CanvasRenderingContext2D,\n    frequencyData: Uint8Array,\n  ) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n    const paddingOuter = 0.01;\n    const availableWidth = waveWidth * (1 - 2 * paddingOuter);\n    const startX = waveWidth * paddingOuter;\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    // Draw top curve\n    const firstValue = (frequencyData[0] ?? 0) / 255;\n    const firstY = (waveHeight - firstValue * waveHeight) / 2;\n    path.moveTo(startX, firstY);\n\n    // Draw top half\n    frequencyData.forEach((value, i) => {\n      const normalizedValue = Math.min((value / 255) * 2, 1);\n      const x = startX + (i / (frequencyData.length - 1)) * availableWidth;\n      const barHeight = normalizedValue * (waveHeight / 2);\n      const y = (waveHeight - barHeight * 2) / 2;\n\n      if (i === 0) {\n        path.moveTo(x, y);\n      } else {\n        const prevX =\n          startX + ((i - 1) / (frequencyData.length - 1)) * availableWidth;\n        const prevValue = (frequencyData[i - 1] ?? 0) / 255;\n        const prevBarHeight = prevValue * (waveHeight / 2);\n        const prevY = (waveHeight - prevBarHeight * 2) / 2;\n        const xc = (prevX + x) / 2;\n        const yc = (prevY + y) / 2;\n        path.quadraticCurveTo(prevX, prevY, xc, yc);\n      }\n    });\n\n    // Draw bottom half\n    for (let i = frequencyData.length - 1; i >= 0; i--) {\n      const normalizedValue = Math.min(((frequencyData[i] ?? 0) / 255) * 2, 1);\n      const x = startX + (i / (frequencyData.length - 1)) * availableWidth;\n      const barHeight = normalizedValue * (waveHeight / 2);\n      const y = (waveHeight + barHeight * 2) / 2;\n\n      if (i === frequencyData.length - 1) {\n        path.lineTo(x, y);\n      } else {\n        const nextX =\n          startX + ((i + 1) / (frequencyData.length - 1)) * availableWidth;\n        const nextValue = (frequencyData[i + 1] ?? 0) / 255;\n        const nextBarHeight = nextValue * (waveHeight / 2);\n        const nextY = (waveHeight + nextBarHeight * 2) / 2;\n        const xc = (nextX + x) / 2;\n        const yc = (nextY + y) / 2;\n        path.quadraticCurveTo(nextX, nextY, xc, yc);\n      }\n    }\n\n    // Close the path with a smooth curve\n    const lastY = (waveHeight + firstValue * waveHeight) / 2;\n    const controlX = startX;\n    const controlY = (lastY + firstY) / 2;\n    path.quadraticCurveTo(controlX, controlY, startX, firstY);\n\n    ctx.fill(path);\n  }\n\n  // ============================================================================\n  // FrameRenderable Implementation\n  // ============================================================================\n\n  /**\n   * Cached audio analysis data\n   */\n  #frequencyData: Uint8Array | null = null;\n  #timeDomainData: Uint8Array | null = null;\n  #dataTimeMs: number | undefined = undefined;\n\n  /**\n   * Query readiness state for a given time.\n   * @implements FrameRenderable\n   */\n  getFrameState(timeMs: number): FrameState {\n    // Waveform is ready when we have cached data for this time\n    const hasTarget = !!this.targetElement;\n    const hasData =\n      hasTarget && this.#dataTimeMs === timeMs && this.#frequencyData !== null;\n\n    return {\n      needsPreparation: hasTarget && !hasData,\n      isReady: hasData,\n      priority: PRIORITY_WAVEFORM,\n    };\n  }\n\n  /**\n   * Async preparation - fetches frequency data from target and initializes canvas.\n   * @implements FrameRenderable\n   */\n  async prepareFrame(timeMs: number, signal: AbortSignal): Promise<void> {\n    if (!this.targetElement) return;\n\n    // Ensure canvas is initialized before rendering\n    // This must happen in prepareFrame (not renderFrame) to ensure layout is stable\n    if (!this.ctx) {\n      // Force layout computation\n      void this.offsetWidth;\n\n      // Wait for next frame to ensure layout is fully stable\n      await new Promise((resolve) => requestAnimationFrame(resolve));\n      signal.throwIfAborted();\n\n      this.ctx = this.initCanvas();\n    }\n\n    // Get audio analysis data directly from target\n    const [frequencyData, timeDomainData] = await Promise.all([\n      this.targetElement.getFrequencyData(timeMs, signal),\n      this.targetElement.getTimeDomainData(timeMs, signal),\n    ]);\n\n    signal.throwIfAborted();\n\n    // Cache results\n    this.#frequencyData = frequencyData;\n    this.#timeDomainData = timeDomainData;\n    this.#dataTimeMs = timeMs;\n  }\n\n  /**\n   * Synchronous render - draws waveform to canvas.\n   * @implements FrameRenderable\n   */\n  renderFrame(_timeMs: number): void {\n    if (!this.targetElement) return;\n\n    // Canvas should already be initialized in prepareFrame\n    // Fall back to lazy initialization for compatibility with non-FrameController contexts\n    if (!this.ctx) {\n      this.ctx = this.initCanvas();\n    }\n\n    const ctx = this.ctx;\n    if (!ctx) return;\n\n    const frequencyData = this.#frequencyData;\n    const byteTimeData = this.#timeDomainData;\n    if (!frequencyData || !byteTimeData) return;\n\n    ctx.save();\n    if (this.color === \"currentColor\") {\n      const computedStyle = getComputedStyle(this);\n      const currentColor = computedStyle.color;\n      ctx.strokeStyle = currentColor;\n      ctx.fillStyle = currentColor;\n    } else {\n      ctx.strokeStyle = this.color;\n      ctx.fillStyle = this.color;\n    }\n\n    switch (this.mode) {\n      case \"bars\":\n        this.drawBars(ctx, frequencyData);\n        break;\n      case \"bricks\":\n        this.drawBricks(ctx, frequencyData);\n        break;\n      case \"line\":\n        this.drawLine(ctx, byteTimeData);\n        break;\n      case \"curve\":\n        this.drawCurve(ctx, byteTimeData);\n        break;\n      case \"pixel\":\n        this.drawPixel(ctx, frequencyData);\n        break;\n      case \"wave\":\n        this.drawWave(ctx, frequencyData);\n        break;\n      case \"spikes\":\n        this.drawSpikes(ctx, frequencyData);\n        break;\n      case \"roundBars\":\n        this.drawRoundBars(ctx, frequencyData);\n        break;\n    }\n\n    ctx.restore();\n\n    this.#renderVersion++;\n  }\n\n  // ============================================================================\n  // End FrameRenderable Implementation\n  // ============================================================================\n\n  get durationMs() {\n    if (!this.targetElement) return 0;\n    return this.targetElement.durationMs;\n  }\n\n  protected updated(changedProperties: PropertyValueMap<this>): void {\n    super.updated(changedProperties);\n\n    // Increment render version on any property change.\n    // This is intentionally broad to avoid cache staleness - the cache is\n    // per-render-session so within a render the version will be stable.\n    if (changedProperties.size > 0) {\n      this.#renderVersion++;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-waveform\": EFWaveform & Element;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"EFWaveform.js","names":["EFWaveform","#renderVersion","#dataTimeMs","#frequencyData","#timeDomainData"],"sources":["../../src/elements/EFWaveform.ts"],"sourcesContent":["import { CSSStyleObserver } from \"@bramus/style-observer\";\nimport { css, html, LitElement, type PropertyValueMap } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { createRef, type Ref, ref } from \"lit/directives/ref.js\";\nimport { EF_RENDERING } from \"../EF_RENDERING.js\";\nimport { TWMixin } from \"../gui/TWMixin.js\";\nimport {\n  type FrameRenderable,\n  type FrameState,\n  PRIORITY_WAVEFORM,\n} from \"../preview/FrameController.js\";\nimport { CrossUpdateController } from \"./CrossUpdateController.js\";\nimport type { EFAudio } from \"./EFAudio.js\";\nimport { EFTemporal } from \"./EFTemporal.js\";\nimport type { EFVideo } from \"./EFVideo.js\";\nimport { TargetController } from \"./TargetController.ts\";\n\n@customElement(\"ef-waveform\")\nexport class EFWaveform extends EFTemporal(TWMixin(LitElement)) implements FrameRenderable {\n  static styles = css`\n      :host {\n        all: inherit;\n        display: block;\n        position: relative;\n      }\n\n      canvas {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: inherit;\n        object-position: inherit;\n      }\n    `;\n\n  canvasRef: Ref<HTMLCanvasElement> = createRef();\n  private ctx: CanvasRenderingContext2D | null = null;\n  private styleObserver: CSSStyleObserver | null = null;\n\n  private resizeObserver?: ResizeObserver;\n  private mutationObserver?: MutationObserver;\n\n  /**\n   * Render version counter - increments when visual content changes.\n   * Used by RenderContext to cache rendered dataURLs.\n   */\n  #renderVersion = 0;\n\n  /**\n   * Get the current render version.\n   * Version increments when mode, color, barSpacing, lineWidth, or target changes.\n   * @public\n   */\n  get renderVersion(): number {\n    return this.#renderVersion;\n  }\n\n  render() {\n    return html`<canvas ${ref(this.canvasRef)}></canvas>`;\n  }\n\n  @property({\n    type: String,\n    attribute: \"mode\",\n  })\n  mode: \"roundBars\" | \"bars\" | \"bricks\" | \"line\" | \"curve\" | \"pixel\" | \"wave\" | \"spikes\" = \"bars\";\n\n  @property({ type: String })\n  color = \"currentColor\";\n\n  @property({ type: String, reflect: true })\n  target = \"\";\n\n  @property({ type: Number, attribute: \"bar-spacing\" })\n  barSpacing = 0.5;\n\n  @state()\n  targetElement: EFAudio | EFVideo | null = null;\n\n  @property({ type: Number, attribute: \"line-width\" })\n  lineWidth = 4;\n\n  targetController: TargetController = new TargetController(this);\n\n  connectedCallback() {\n    super.connectedCallback();\n    try {\n      if (this.targetElement) {\n        new CrossUpdateController(this.targetElement, this);\n      }\n    } catch (_error) {\n      // TODO: determine if this is a critical error, or if we should just ignore it\n      // currenty evidence suggests everything still works\n      // no target element, no cross update controller\n    }\n\n    // Initialize ResizeObserver\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeCanvas();\n    });\n\n    // Observe the host element\n    this.resizeObserver.observe(this);\n\n    // Initialize MutationObserver - only for non-style attributes\n    // Style changes are handled by FrameController\n    this.mutationObserver = new MutationObserver((mutationsList) => {\n      for (const mutation of mutationsList) {\n        if (mutation.type === \"attributes\" && mutation.attributeName !== \"style\") {\n          this.requestUpdate();\n        }\n      }\n    });\n\n    // Observe attribute changes on the element\n    this.mutationObserver.observe(this, { attributes: true });\n\n    if (!EF_RENDERING()) {\n      this.styleObserver = new CSSStyleObserver([\"color\"], () => {\n        this.requestUpdate();\n      });\n      this.styleObserver.attach(this);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    // Disconnect the observers when the element is removed from the DOM\n    this.resizeObserver?.disconnect();\n    this.mutationObserver?.disconnect();\n    this.styleObserver?.detach();\n  }\n\n  private resizeCanvas() {\n    this.ctx = this.initCanvas();\n    if (this.ctx) {\n      this.requestUpdate();\n    }\n  }\n\n  protected initCanvas() {\n    const canvas = this.canvasRef.value;\n    if (!canvas) return null;\n\n    const rect = {\n      width: this.offsetWidth,\n      height: this.offsetHeight,\n    };\n    const dpr = window.devicePixelRatio;\n\n    canvas.style.width = `${rect.width}px`;\n    canvas.style.height = `${rect.height}px`;\n\n    canvas.width = rect.width * dpr;\n    canvas.height = rect.height * dpr;\n\n    const ctx = canvas.getContext(\"2d\", { willReadFrequently: true });\n    if (!ctx) return null;\n    ctx.reset();\n\n    // Scale all drawing operations by dpr\n    return ctx;\n  }\n\n  protected drawBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n\n    const totalBars = frequencyData.length;\n    const paddingInner = this.barSpacing;\n    const paddingOuter = 0.01;\n    const availableWidth = waveWidth;\n    const barWidth = availableWidth / (totalBars + (totalBars - 1) * paddingInner);\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    frequencyData.forEach((value, i) => {\n      const normalizedValue = value / 255;\n      const barHeight = normalizedValue * waveHeight;\n      const y = (waveHeight - barHeight) / 2;\n      const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));\n      path.rect(x, y, barWidth, barHeight);\n    });\n\n    ctx.fill(path);\n  }\n\n  protected drawBricks(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    const columnWidth = waveWidth / frequencyData.length;\n    const boxSize = columnWidth * 0.9;\n    const verticalGap = boxSize * 0.2; // Add spacing between bricks\n    const maxBricks = Math.floor(waveHeight / (boxSize + verticalGap)); // Account for gaps in height calculation\n\n    frequencyData.forEach((value, i) => {\n      const normalizedValue = value / 255;\n      const brickCount = Math.floor(normalizedValue * maxBricks);\n\n      for (let j = 0; j < brickCount; j++) {\n        const x = columnWidth * i;\n        const y = waveHeight - (j + 1) * (boxSize + verticalGap); // Include gap in position calculation\n        path.rect(x, y, boxSize, boxSize);\n      }\n    });\n\n    ctx.fill(path);\n  }\n\n  protected drawRoundBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n\n    // Similar padding calculation as drawBars\n    const totalBars = frequencyData.length;\n    const paddingInner = this.barSpacing;\n    const paddingOuter = 0.01;\n    const availableWidth = waveWidth;\n    const barWidth = availableWidth / (totalBars + (totalBars - 1) * paddingInner);\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n\n    // Create a single Path2D object for all rounded bars\n    const path = new Path2D();\n\n    frequencyData.forEach((value, i) => {\n      const normalizedValue = value / 255;\n      const height = normalizedValue * waveHeight; // Use full wave height like in drawBars\n      const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));\n      const y = (waveHeight - height) / 2; // Center vertically\n\n      // Add rounded rectangle to path\n      path.roundRect(x, y, barWidth, height, barWidth / 2);\n    });\n\n    // Single fill operation for all bars\n    ctx.fill(path);\n  }\n\n  protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    // Sample fewer points to make sharp angles more visible\n    const sampleRate = 1; // Only use every 4th point\n\n    for (let i = 0; i < frequencyData.length; i += sampleRate) {\n      const x = (i / frequencyData.length) * waveWidth;\n      const y = (1 - (frequencyData[i] ?? 0) / 255) * waveHeight;\n\n      if (i === 0) {\n        path.moveTo(x, y);\n      } else {\n        path.lineTo(x, y);\n      }\n    }\n    // Ensure we draw to the end\n    const lastX = waveWidth;\n    const lastY = (1 - (frequencyData[frequencyData.length - 1] ?? 0) / 255) * waveHeight;\n    path.lineTo(lastX, lastY);\n\n    ctx.lineWidth = this.lineWidth;\n    ctx.stroke(path);\n  }\n\n  protected drawCurve(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    // Draw smooth curves between points using quadratic curves\n    frequencyData.forEach((value, i) => {\n      const x = (i / frequencyData.length) * waveWidth;\n      const y = (1 - value / 255) * waveHeight;\n\n      if (i === 0) {\n        path.moveTo(x, y);\n      } else {\n        const prevX = ((i - 1) / frequencyData.length) * waveWidth;\n        const prevY = (1 - (frequencyData[i - 1] ?? 0) / 255) * waveHeight;\n        const xc = (prevX + x) / 2;\n        const yc = (prevY + y) / 2;\n        path.quadraticCurveTo(prevX, prevY, xc, yc);\n      }\n    });\n\n    ctx.lineWidth = this.lineWidth;\n    ctx.stroke(path);\n  }\n\n  protected drawPixel(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n    const baseline = waveHeight / 2;\n    const barWidth = waveWidth / frequencyData.length;\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    frequencyData.forEach((value, i) => {\n      const normalizedValue = value / 255;\n      const x = i * (waveWidth / frequencyData.length);\n      const barHeight = normalizedValue * (waveHeight / 2); // Half height since we extend both ways\n      const y = baseline - barHeight;\n      path.rect(x, y, barWidth, barHeight * 2); // Double height to extend both ways\n    });\n\n    ctx.fill(path);\n  }\n\n  protected drawWave(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n    const paddingOuter = 0.01;\n    const availableWidth = waveWidth * (1 - 2 * paddingOuter);\n    const startX = waveWidth * paddingOuter;\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    // Draw top curve\n    const firstValue = Math.min(((frequencyData[0] ?? 0) / 255) * 2, 1);\n    const firstY = (waveHeight - firstValue * waveHeight) / 2;\n    path.moveTo(startX, firstY);\n\n    // Draw top half\n    frequencyData.forEach((value, i) => {\n      const normalizedValue = Math.min((value / 255) * 2, 1);\n      const x = startX + (i / (frequencyData.length - 1)) * availableWidth;\n      const barHeight = normalizedValue * waveHeight;\n      const y = (waveHeight - barHeight) / 2;\n\n      if (i === 0) {\n        path.moveTo(x, y);\n      } else {\n        const prevX = startX + ((i - 1) / (frequencyData.length - 1)) * availableWidth;\n        const prevValue = Math.min(((frequencyData[i - 1] ?? 0) / 255) * 2, 1);\n        const prevBarHeight = prevValue * waveHeight;\n        const prevY = (waveHeight - prevBarHeight) / 2;\n        const xc = (prevX + x) / 2;\n        const yc = (prevY + y) / 2;\n        path.quadraticCurveTo(prevX, prevY, xc, yc);\n      }\n    });\n\n    // Draw bottom half\n    for (let i = frequencyData.length - 1; i >= 0; i--) {\n      const normalizedValue = Math.min(((frequencyData[i] ?? 0) / 255) * 2, 1);\n      const x = startX + (i / (frequencyData.length - 1)) * availableWidth;\n      const barHeight = normalizedValue * waveHeight;\n      const y = (waveHeight + barHeight) / 2;\n\n      if (i === frequencyData.length - 1) {\n        path.lineTo(x, y);\n      } else {\n        const nextX = startX + ((i + 1) / (frequencyData.length - 1)) * availableWidth;\n        const nextValue = Math.min(((frequencyData[i + 1] ?? 0) / 255) * 2, 1);\n        const nextBarHeight = nextValue * waveHeight;\n        const nextY = (waveHeight + nextBarHeight) / 2;\n        const xc = (nextX + x) / 2;\n        const yc = (nextY + y) / 2;\n        path.quadraticCurveTo(nextX, nextY, xc, yc);\n      }\n    }\n\n    // Close the path with a smooth curve back to start\n    const lastY = (waveHeight + firstValue * waveHeight) / 2;\n    const controlX = startX;\n    const controlY = (lastY + firstY) / 2;\n    path.quadraticCurveTo(controlX, controlY, startX, firstY);\n\n    ctx.fill(path);\n  }\n\n  protected drawSpikes(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n    const paddingOuter = 0.01;\n    const availableWidth = waveWidth * (1 - 2 * paddingOuter);\n    const startX = waveWidth * paddingOuter;\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    // Draw top curve\n    const firstValue = (frequencyData[0] ?? 0) / 255;\n    const firstY = (waveHeight - firstValue * waveHeight) / 2;\n    path.moveTo(startX, firstY);\n\n    // Draw top half\n    frequencyData.forEach((value, i) => {\n      const normalizedValue = Math.min((value / 255) * 2, 1);\n      const x = startX + (i / (frequencyData.length - 1)) * availableWidth;\n      const barHeight = normalizedValue * (waveHeight / 2);\n      const y = (waveHeight - barHeight * 2) / 2;\n\n      if (i === 0) {\n        path.moveTo(x, y);\n      } else {\n        const prevX = startX + ((i - 1) / (frequencyData.length - 1)) * availableWidth;\n        const prevValue = (frequencyData[i - 1] ?? 0) / 255;\n        const prevBarHeight = prevValue * (waveHeight / 2);\n        const prevY = (waveHeight - prevBarHeight * 2) / 2;\n        const xc = (prevX + x) / 2;\n        const yc = (prevY + y) / 2;\n        path.quadraticCurveTo(prevX, prevY, xc, yc);\n      }\n    });\n\n    // Draw bottom half\n    for (let i = frequencyData.length - 1; i >= 0; i--) {\n      const normalizedValue = Math.min(((frequencyData[i] ?? 0) / 255) * 2, 1);\n      const x = startX + (i / (frequencyData.length - 1)) * availableWidth;\n      const barHeight = normalizedValue * (waveHeight / 2);\n      const y = (waveHeight + barHeight * 2) / 2;\n\n      if (i === frequencyData.length - 1) {\n        path.lineTo(x, y);\n      } else {\n        const nextX = startX + ((i + 1) / (frequencyData.length - 1)) * availableWidth;\n        const nextValue = (frequencyData[i + 1] ?? 0) / 255;\n        const nextBarHeight = nextValue * (waveHeight / 2);\n        const nextY = (waveHeight + nextBarHeight * 2) / 2;\n        const xc = (nextX + x) / 2;\n        const yc = (nextY + y) / 2;\n        path.quadraticCurveTo(nextX, nextY, xc, yc);\n      }\n    }\n\n    // Close the path with a smooth curve\n    const lastY = (waveHeight + firstValue * waveHeight) / 2;\n    const controlX = startX;\n    const controlY = (lastY + firstY) / 2;\n    path.quadraticCurveTo(controlX, controlY, startX, firstY);\n\n    ctx.fill(path);\n  }\n\n  // ============================================================================\n  // FrameRenderable Implementation\n  // ============================================================================\n\n  /**\n   * Cached audio analysis data\n   */\n  #frequencyData: Uint8Array | null = null;\n  #timeDomainData: Uint8Array | null = null;\n  #dataTimeMs: number | undefined = undefined;\n\n  /**\n   * Query readiness state for a given time.\n   * @implements FrameRenderable\n   */\n  getFrameState(timeMs: number): FrameState {\n    // Waveform is ready when we have cached data for this time\n    const hasTarget = !!this.targetElement;\n    const hasData = hasTarget && this.#dataTimeMs === timeMs && this.#frequencyData !== null;\n\n    return {\n      needsPreparation: hasTarget && !hasData,\n      isReady: hasData,\n      priority: PRIORITY_WAVEFORM,\n    };\n  }\n\n  /**\n   * Async preparation - fetches frequency data from target and initializes canvas.\n   * @implements FrameRenderable\n   */\n  async prepareFrame(timeMs: number, signal: AbortSignal): Promise<void> {\n    if (!this.targetElement) return;\n\n    // Ensure canvas is initialized before rendering\n    // This must happen in prepareFrame (not renderFrame) to ensure layout is stable\n    if (!this.ctx) {\n      // Force layout computation\n      void this.offsetWidth;\n\n      // Wait for next frame to ensure layout is fully stable\n      await new Promise((resolve) => requestAnimationFrame(resolve));\n      signal.throwIfAborted();\n\n      this.ctx = this.initCanvas();\n    }\n\n    // Get audio analysis data directly from target\n    const [frequencyData, timeDomainData] = await Promise.all([\n      this.targetElement.getFrequencyData(timeMs, signal),\n      this.targetElement.getTimeDomainData(timeMs, signal),\n    ]);\n\n    signal.throwIfAborted();\n\n    // Cache results\n    this.#frequencyData = frequencyData;\n    this.#timeDomainData = timeDomainData;\n    this.#dataTimeMs = timeMs;\n  }\n\n  /**\n   * Synchronous render - draws waveform to canvas.\n   * @implements FrameRenderable\n   */\n  renderFrame(_timeMs: number): void {\n    if (!this.targetElement) return;\n\n    // Canvas should already be initialized in prepareFrame\n    // Fall back to lazy initialization for compatibility with non-FrameController contexts\n    if (!this.ctx) {\n      this.ctx = this.initCanvas();\n    }\n\n    const ctx = this.ctx;\n    if (!ctx) return;\n\n    const frequencyData = this.#frequencyData;\n    const byteTimeData = this.#timeDomainData;\n    if (!frequencyData || !byteTimeData) return;\n\n    ctx.save();\n    if (this.color === \"currentColor\") {\n      const computedStyle = getComputedStyle(this);\n      const currentColor = computedStyle.color;\n      ctx.strokeStyle = currentColor;\n      ctx.fillStyle = currentColor;\n    } else {\n      ctx.strokeStyle = this.color;\n      ctx.fillStyle = this.color;\n    }\n\n    switch (this.mode) {\n      case \"bars\":\n        this.drawBars(ctx, frequencyData);\n        break;\n      case \"bricks\":\n        this.drawBricks(ctx, frequencyData);\n        break;\n      case \"line\":\n        this.drawLine(ctx, byteTimeData);\n        break;\n      case \"curve\":\n        this.drawCurve(ctx, byteTimeData);\n        break;\n      case \"pixel\":\n        this.drawPixel(ctx, frequencyData);\n        break;\n      case \"wave\":\n        this.drawWave(ctx, frequencyData);\n        break;\n      case \"spikes\":\n        this.drawSpikes(ctx, frequencyData);\n        break;\n      case \"roundBars\":\n        this.drawRoundBars(ctx, frequencyData);\n        break;\n    }\n\n    ctx.restore();\n\n    this.#renderVersion++;\n  }\n\n  // ============================================================================\n  // End FrameRenderable Implementation\n  // ============================================================================\n\n  get durationMs() {\n    if (!this.targetElement) return 0;\n    return this.targetElement.durationMs;\n  }\n\n  protected updated(changedProperties: PropertyValueMap<this>): void {\n    super.updated(changedProperties);\n\n    // Increment render version on any property change.\n    // This is intentionally broad to avoid cache staleness - the cache is\n    // per-render-session so within a render the version will be stable.\n    if (changedProperties.size > 0) {\n      this.#renderVersion++;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-waveform\": EFWaveform & Element;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAkBO,uBAAMA,qBAAmB,WAAW,QAAQ,WAAW,CAAC,CAA4B;;;mBAmBrD,WAAW;aACA;uBACE;cA4BwC;eAGjF;gBAGC;oBAGI;uBAG6B;mBAG9B;0BAEyB,IAAI,iBAAiB,KAAK;;;gBAjE/C,GAAG;;;;;;;;;;;;;;;;;;;;;;CA6BnB,iBAAiB;;;;;;CAOjB,IAAI,gBAAwB;AAC1B,SAAO,MAAKC;;CAGd,SAAS;AACP,SAAO,IAAI,WAAW,IAAI,KAAK,UAAU,CAAC;;CA0B5C,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,MAAI;AACF,OAAI,KAAK,cACP,KAAI,sBAAsB,KAAK,eAAe,KAAK;WAE9C,QAAQ;AAOjB,OAAK,iBAAiB,IAAI,qBAAqB;AAC7C,QAAK,cAAc;IACnB;AAGF,OAAK,eAAe,QAAQ,KAAK;AAIjC,OAAK,mBAAmB,IAAI,kBAAkB,kBAAkB;AAC9D,QAAK,MAAM,YAAY,cACrB,KAAI,SAAS,SAAS,gBAAgB,SAAS,kBAAkB,QAC/D,MAAK,eAAe;IAGxB;AAGF,OAAK,iBAAiB,QAAQ,MAAM,EAAE,YAAY,MAAM,CAAC;AAEzD,MAAI,CAAC,cAAc,EAAE;AACnB,QAAK,gBAAgB,IAAI,iBAAiB,CAAC,QAAQ,QAAQ;AACzD,SAAK,eAAe;KACpB;AACF,QAAK,cAAc,OAAO,KAAK;;;CAInC,uBAAuB;AACrB,QAAM,sBAAsB;AAE5B,OAAK,gBAAgB,YAAY;AACjC,OAAK,kBAAkB,YAAY;AACnC,OAAK,eAAe,QAAQ;;CAG9B,AAAQ,eAAe;AACrB,OAAK,MAAM,KAAK,YAAY;AAC5B,MAAI,KAAK,IACP,MAAK,eAAe;;CAIxB,AAAU,aAAa;EACrB,MAAM,SAAS,KAAK,UAAU;AAC9B,MAAI,CAAC,OAAQ,QAAO;EAEpB,MAAM,OAAO;GACX,OAAO,KAAK;GACZ,QAAQ,KAAK;GACd;EACD,MAAM,MAAM,OAAO;AAEnB,SAAO,MAAM,QAAQ,GAAG,KAAK,MAAM;AACnC,SAAO,MAAM,SAAS,GAAG,KAAK,OAAO;AAErC,SAAO,QAAQ,KAAK,QAAQ;AAC5B,SAAO,SAAS,KAAK,SAAS;EAE9B,MAAM,MAAM,OAAO,WAAW,MAAM,EAAE,oBAAoB,MAAM,CAAC;AACjE,MAAI,CAAC,IAAK,QAAO;AACjB,MAAI,OAAO;AAGX,SAAO;;CAGT,AAAU,SAAS,KAA+B,eAA2B;EAC3E,MAAM,SAAS,IAAI;EACnB,MAAM,YAAY,OAAO;EACzB,MAAM,aAAa,OAAO;EAE1B,MAAM,YAAY,cAAc;EAChC,MAAM,eAAe,KAAK;EAC1B,MAAM,eAAe;EAErB,MAAM,WADiB,aACY,aAAa,YAAY,KAAK;AAEjE,MAAI,UAAU,GAAG,GAAG,WAAW,WAAW;EAC1C,MAAM,OAAO,IAAI,QAAQ;AAEzB,gBAAc,SAAS,OAAO,MAAM;GAElC,MAAM,YADkB,QAAQ,MACI;GACpC,MAAM,KAAK,aAAa,aAAa;GACrC,MAAM,IAAI,YAAY,eAAe,KAAK,YAAY,IAAI;AAC1D,QAAK,KAAK,GAAG,GAAG,UAAU,UAAU;IACpC;AAEF,MAAI,KAAK,KAAK;;CAGhB,AAAU,WAAW,KAA+B,eAA2B;EAC7E,MAAM,SAAS,IAAI;EACnB,MAAM,YAAY,OAAO;EACzB,MAAM,aAAa,OAAO;AAC1B,MAAI,UAAU,GAAG,GAAG,WAAW,WAAW;EAC1C,MAAM,OAAO,IAAI,QAAQ;EAEzB,MAAM,cAAc,YAAY,cAAc;EAC9C,MAAM,UAAU,cAAc;EAC9B,MAAM,cAAc,UAAU;EAC9B,MAAM,YAAY,KAAK,MAAM,cAAc,UAAU,aAAa;AAElE,gBAAc,SAAS,OAAO,MAAM;GAClC,MAAM,kBAAkB,QAAQ;GAChC,MAAM,aAAa,KAAK,MAAM,kBAAkB,UAAU;AAE1D,QAAK,IAAI,IAAI,GAAG,IAAI,YAAY,KAAK;IACnC,MAAM,IAAI,cAAc;IACxB,MAAM,IAAI,cAAc,IAAI,MAAM,UAAU;AAC5C,SAAK,KAAK,GAAG,GAAG,SAAS,QAAQ;;IAEnC;AAEF,MAAI,KAAK,KAAK;;CAGhB,AAAU,cAAc,KAA+B,eAA2B;EAChF,MAAM,SAAS,IAAI;EACnB,MAAM,YAAY,OAAO;EACzB,MAAM,aAAa,OAAO;EAG1B,MAAM,YAAY,cAAc;EAChC,MAAM,eAAe,KAAK;EAC1B,MAAM,eAAe;EAErB,MAAM,WADiB,aACY,aAAa,YAAY,KAAK;AAEjE,MAAI,UAAU,GAAG,GAAG,WAAW,WAAW;EAG1C,MAAM,OAAO,IAAI,QAAQ;AAEzB,gBAAc,SAAS,OAAO,MAAM;GAElC,MAAM,SADkB,QAAQ,MACC;GACjC,MAAM,IAAI,YAAY,eAAe,KAAK,YAAY,IAAI;GAC1D,MAAM,KAAK,aAAa,UAAU;AAGlC,QAAK,UAAU,GAAG,GAAG,UAAU,QAAQ,WAAW,EAAE;IACpD;AAGF,MAAI,KAAK,KAAK;;CAGhB,AAAU,SAAS,KAA+B,eAA2B;EAC3E,MAAM,SAAS,IAAI;EACnB,MAAM,YAAY,OAAO;EACzB,MAAM,aAAa,OAAO;AAE1B,MAAI,UAAU,GAAG,GAAG,WAAW,WAAW;EAC1C,MAAM,OAAO,IAAI,QAAQ;EAGzB,MAAM,aAAa;AAEnB,OAAK,IAAI,IAAI,GAAG,IAAI,cAAc,QAAQ,KAAK,YAAY;GACzD,MAAM,IAAK,IAAI,cAAc,SAAU;GACvC,MAAM,KAAK,KAAK,cAAc,MAAM,KAAK,OAAO;AAEhD,OAAI,MAAM,EACR,MAAK,OAAO,GAAG,EAAE;OAEjB,MAAK,OAAO,GAAG,EAAE;;EAIrB,MAAM,QAAQ;EACd,MAAM,SAAS,KAAK,cAAc,cAAc,SAAS,MAAM,KAAK,OAAO;AAC3E,OAAK,OAAO,OAAO,MAAM;AAEzB,MAAI,YAAY,KAAK;AACrB,MAAI,OAAO,KAAK;;CAGlB,AAAU,UAAU,KAA+B,eAA2B;EAC5E,MAAM,SAAS,IAAI;EACnB,MAAM,YAAY,OAAO;EACzB,MAAM,aAAa,OAAO;AAE1B,MAAI,UAAU,GAAG,GAAG,WAAW,WAAW;EAC1C,MAAM,OAAO,IAAI,QAAQ;AAGzB,gBAAc,SAAS,OAAO,MAAM;GAClC,MAAM,IAAK,IAAI,cAAc,SAAU;GACvC,MAAM,KAAK,IAAI,QAAQ,OAAO;AAE9B,OAAI,MAAM,EACR,MAAK,OAAO,GAAG,EAAE;QACZ;IACL,MAAM,SAAU,IAAI,KAAK,cAAc,SAAU;IACjD,MAAM,SAAS,KAAK,cAAc,IAAI,MAAM,KAAK,OAAO;IACxD,MAAM,MAAM,QAAQ,KAAK;IACzB,MAAM,MAAM,QAAQ,KAAK;AACzB,SAAK,iBAAiB,OAAO,OAAO,IAAI,GAAG;;IAE7C;AAEF,MAAI,YAAY,KAAK;AACrB,MAAI,OAAO,KAAK;;CAGlB,AAAU,UAAU,KAA+B,eAA2B;EAC5E,MAAM,SAAS,IAAI;EACnB,MAAM,YAAY,OAAO;EACzB,MAAM,aAAa,OAAO;EAC1B,MAAM,WAAW,aAAa;EAC9B,MAAM,WAAW,YAAY,cAAc;AAE3C,MAAI,UAAU,GAAG,GAAG,WAAW,WAAW;EAC1C,MAAM,OAAO,IAAI,QAAQ;AAEzB,gBAAc,SAAS,OAAO,MAAM;GAClC,MAAM,kBAAkB,QAAQ;GAChC,MAAM,IAAI,KAAK,YAAY,cAAc;GACzC,MAAM,YAAY,mBAAmB,aAAa;GAClD,MAAM,IAAI,WAAW;AACrB,QAAK,KAAK,GAAG,GAAG,UAAU,YAAY,EAAE;IACxC;AAEF,MAAI,KAAK,KAAK;;CAGhB,AAAU,SAAS,KAA+B,eAA2B;EAC3E,MAAM,SAAS,IAAI;EACnB,MAAM,YAAY,OAAO;EACzB,MAAM,aAAa,OAAO;EAC1B,MAAM,eAAe;EACrB,MAAM,iBAAiB,aAAa,IAAI,IAAI;EAC5C,MAAM,SAAS,YAAY;AAE3B,MAAI,UAAU,GAAG,GAAG,WAAW,WAAW;EAC1C,MAAM,OAAO,IAAI,QAAQ;EAGzB,MAAM,aAAa,KAAK,KAAM,cAAc,MAAM,KAAK,MAAO,GAAG,EAAE;EACnE,MAAM,UAAU,aAAa,aAAa,cAAc;AACxD,OAAK,OAAO,QAAQ,OAAO;AAG3B,gBAAc,SAAS,OAAO,MAAM;GAClC,MAAM,kBAAkB,KAAK,IAAK,QAAQ,MAAO,GAAG,EAAE;GACtD,MAAM,IAAI,SAAU,KAAK,cAAc,SAAS,KAAM;GAEtD,MAAM,KAAK,aADO,kBAAkB,cACC;AAErC,OAAI,MAAM,EACR,MAAK,OAAO,GAAG,EAAE;QACZ;IACL,MAAM,QAAQ,UAAW,IAAI,MAAM,cAAc,SAAS,KAAM;IAGhE,MAAM,SAAS,aAFG,KAAK,KAAM,cAAc,IAAI,MAAM,KAAK,MAAO,GAAG,EAAE,GACpC,cACW;IAC7C,MAAM,MAAM,QAAQ,KAAK;IACzB,MAAM,MAAM,QAAQ,KAAK;AACzB,SAAK,iBAAiB,OAAO,OAAO,IAAI,GAAG;;IAE7C;AAGF,OAAK,IAAI,IAAI,cAAc,SAAS,GAAG,KAAK,GAAG,KAAK;GAClD,MAAM,kBAAkB,KAAK,KAAM,cAAc,MAAM,KAAK,MAAO,GAAG,EAAE;GACxE,MAAM,IAAI,SAAU,KAAK,cAAc,SAAS,KAAM;GAEtD,MAAM,KAAK,aADO,kBAAkB,cACC;AAErC,OAAI,MAAM,cAAc,SAAS,EAC/B,MAAK,OAAO,GAAG,EAAE;QACZ;IACL,MAAM,QAAQ,UAAW,IAAI,MAAM,cAAc,SAAS,KAAM;IAGhE,MAAM,SAAS,aAFG,KAAK,KAAM,cAAc,IAAI,MAAM,KAAK,MAAO,GAAG,EAAE,GACpC,cACW;IAC7C,MAAM,MAAM,QAAQ,KAAK;IACzB,MAAM,MAAM,QAAQ,KAAK;AACzB,SAAK,iBAAiB,OAAO,OAAO,IAAI,GAAG;;;EAK/C,MAAM,SAAS,aAAa,aAAa,cAAc;EACvD,MAAM,WAAW;EACjB,MAAM,YAAY,QAAQ,UAAU;AACpC,OAAK,iBAAiB,UAAU,UAAU,QAAQ,OAAO;AAEzD,MAAI,KAAK,KAAK;;CAGhB,AAAU,WAAW,KAA+B,eAA2B;EAC7E,MAAM,SAAS,IAAI;EACnB,MAAM,YAAY,OAAO;EACzB,MAAM,aAAa,OAAO;EAC1B,MAAM,eAAe;EACrB,MAAM,iBAAiB,aAAa,IAAI,IAAI;EAC5C,MAAM,SAAS,YAAY;AAE3B,MAAI,UAAU,GAAG,GAAG,WAAW,WAAW;EAC1C,MAAM,OAAO,IAAI,QAAQ;EAGzB,MAAM,cAAc,cAAc,MAAM,KAAK;EAC7C,MAAM,UAAU,aAAa,aAAa,cAAc;AACxD,OAAK,OAAO,QAAQ,OAAO;AAG3B,gBAAc,SAAS,OAAO,MAAM;GAClC,MAAM,kBAAkB,KAAK,IAAK,QAAQ,MAAO,GAAG,EAAE;GACtD,MAAM,IAAI,SAAU,KAAK,cAAc,SAAS,KAAM;GAEtD,MAAM,KAAK,aADO,mBAAmB,aAAa,KACd,KAAK;AAEzC,OAAI,MAAM,EACR,MAAK,OAAO,GAAG,EAAE;QACZ;IACL,MAAM,QAAQ,UAAW,IAAI,MAAM,cAAc,SAAS,KAAM;IAGhE,MAAM,SAAS,cAFI,cAAc,IAAI,MAAM,KAAK,OACb,aAAa,KACJ,KAAK;IACjD,MAAM,MAAM,QAAQ,KAAK;IACzB,MAAM,MAAM,QAAQ,KAAK;AACzB,SAAK,iBAAiB,OAAO,OAAO,IAAI,GAAG;;IAE7C;AAGF,OAAK,IAAI,IAAI,cAAc,SAAS,GAAG,KAAK,GAAG,KAAK;GAClD,MAAM,kBAAkB,KAAK,KAAM,cAAc,MAAM,KAAK,MAAO,GAAG,EAAE;GACxE,MAAM,IAAI,SAAU,KAAK,cAAc,SAAS,KAAM;GAEtD,MAAM,KAAK,aADO,mBAAmB,aAAa,KACd,KAAK;AAEzC,OAAI,MAAM,cAAc,SAAS,EAC/B,MAAK,OAAO,GAAG,EAAE;QACZ;IACL,MAAM,QAAQ,UAAW,IAAI,MAAM,cAAc,SAAS,KAAM;IAGhE,MAAM,SAAS,cAFI,cAAc,IAAI,MAAM,KAAK,OACb,aAAa,KACJ,KAAK;IACjD,MAAM,MAAM,QAAQ,KAAK;IACzB,MAAM,MAAM,QAAQ,KAAK;AACzB,SAAK,iBAAiB,OAAO,OAAO,IAAI,GAAG;;;EAK/C,MAAM,SAAS,aAAa,aAAa,cAAc;EACvD,MAAM,WAAW;EACjB,MAAM,YAAY,QAAQ,UAAU;AACpC,OAAK,iBAAiB,UAAU,UAAU,QAAQ,OAAO;AAEzD,MAAI,KAAK,KAAK;;;;;CAUhB,iBAAoC;CACpC,kBAAqC;CACrC,cAAkC;;;;;CAMlC,cAAc,QAA4B;EAExC,MAAM,YAAY,CAAC,CAAC,KAAK;EACzB,MAAM,UAAU,aAAa,MAAKC,eAAgB,UAAU,MAAKC,kBAAmB;AAEpF,SAAO;GACL,kBAAkB,aAAa,CAAC;GAChC,SAAS;GACT,UAAU;GACX;;;;;;CAOH,MAAM,aAAa,QAAgB,QAAoC;AACrE,MAAI,CAAC,KAAK,cAAe;AAIzB,MAAI,CAAC,KAAK,KAAK;AAEb,GAAK,KAAK;AAGV,SAAM,IAAI,SAAS,YAAY,sBAAsB,QAAQ,CAAC;AAC9D,UAAO,gBAAgB;AAEvB,QAAK,MAAM,KAAK,YAAY;;EAI9B,MAAM,CAAC,eAAe,kBAAkB,MAAM,QAAQ,IAAI,CACxD,KAAK,cAAc,iBAAiB,QAAQ,OAAO,EACnD,KAAK,cAAc,kBAAkB,QAAQ,OAAO,CACrD,CAAC;AAEF,SAAO,gBAAgB;AAGvB,QAAKA,gBAAiB;AACtB,QAAKC,iBAAkB;AACvB,QAAKF,aAAc;;;;;;CAOrB,YAAY,SAAuB;AACjC,MAAI,CAAC,KAAK,cAAe;AAIzB,MAAI,CAAC,KAAK,IACR,MAAK,MAAM,KAAK,YAAY;EAG9B,MAAM,MAAM,KAAK;AACjB,MAAI,CAAC,IAAK;EAEV,MAAM,gBAAgB,MAAKC;EAC3B,MAAM,eAAe,MAAKC;AAC1B,MAAI,CAAC,iBAAiB,CAAC,aAAc;AAErC,MAAI,MAAM;AACV,MAAI,KAAK,UAAU,gBAAgB;GAEjC,MAAM,eADgB,iBAAiB,KAAK,CACT;AACnC,OAAI,cAAc;AAClB,OAAI,YAAY;SACX;AACL,OAAI,cAAc,KAAK;AACvB,OAAI,YAAY,KAAK;;AAGvB,UAAQ,KAAK,MAAb;GACE,KAAK;AACH,SAAK,SAAS,KAAK,cAAc;AACjC;GACF,KAAK;AACH,SAAK,WAAW,KAAK,cAAc;AACnC;GACF,KAAK;AACH,SAAK,SAAS,KAAK,aAAa;AAChC;GACF,KAAK;AACH,SAAK,UAAU,KAAK,aAAa;AACjC;GACF,KAAK;AACH,SAAK,UAAU,KAAK,cAAc;AAClC;GACF,KAAK;AACH,SAAK,SAAS,KAAK,cAAc;AACjC;GACF,KAAK;AACH,SAAK,WAAW,KAAK,cAAc;AACnC;GACF,KAAK;AACH,SAAK,cAAc,KAAK,cAAc;AACtC;;AAGJ,MAAI,SAAS;AAEb,QAAKH;;CAOP,IAAI,aAAa;AACf,MAAI,CAAC,KAAK,cAAe,QAAO;AAChC,SAAO,KAAK,cAAc;;CAG5B,AAAU,QAAQ,mBAAiD;AACjE,QAAM,QAAQ,kBAAkB;AAKhC,MAAI,kBAAkB,OAAO,EAC3B,OAAKA;;;YAthBR,SAAS;CACR,MAAM;CACN,WAAW;CACZ,CAAC;YAGD,SAAS,EAAE,MAAM,QAAQ,CAAC;YAG1B,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC;YAGzC,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,CAAC;YAGpD,OAAO;YAGP,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAc,CAAC;yBAhErD,cAAc,cAAc"}

package/dist/elements/ElementPositionInfo.js.map

@@ -1 +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>>(\n  superClass: T,\n) {\n  class PositionInfoElement extends superClass {\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,kBACd,YACA;CACA,MAAM,4BAA4B,WAAW;;;;;;;EAO3C,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"}
+{"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     * 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;;;;;;;EAO3C,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.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          // 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          // 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 =\n            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,UAChB,MAAM,SAAS,gBACd,MAAM,QAAQ,SAAS,oBAAoB,IAC3C,MAAM,QAAQ,SAAS,6BAA6B;MAKxD,MAAM,iBAAiB,CAAC,KAAK;MAK7B,MAAM,oBACJ,kBACA,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"}
+{"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          // 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 =\n            isDisconnected && error instanceof TypeError && 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(\"FetchMixin fetch error\", url, error, window.location.href);\n\n          // Create a new error with the URL in the message, preserving the original error type\n          const ErrorConstructor = 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,UAChB,MAAM,SAAS,gBACd,MAAM,QAAQ,SAAS,oBAAoB,IAC3C,MAAM,QAAQ,SAAS,6BAA6B;MAKxD,MAAM,iBAAiB,CAAC,KAAK;MAK7B,MAAM,oBACJ,kBAAkB,iBAAiB,aAAa,MAAM,YAAY;AAIpE,UAAI,gBAAgB,qBAAqB,eACvC,OAAM;AAIR,cAAQ,MAAM,0BAA0B,KAAK,OAAO,OAAO,SAAS,KAAK;MAIzE,MAAM,gBAAgB,KADG,iBAAiB,QAAQ,MAAM,cAAc,OAEpE,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/SampleBuffer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SampleBuffer.js","names":[],"sources":["../../src/elements/SampleBuffer.ts"],"sourcesContent":["import type { AudioSample, VideoSample } from \"mediabunny\";\nimport { roundToMilliseconds } from \"./EFMedia/shared/PrecisionUtils\";\nexport type MediaSample = VideoSample | AudioSample;\n\n// Generic sample buffer that works with both VideoSample and AudioSample\nexport class SampleBuffer {\n  private buffer: MediaSample[] = [];\n  private bufferSize: number;\n\n  constructor(bufferSize = 10) {\n    this.bufferSize = bufferSize;\n  }\n\n  push(sample: MediaSample) {\n    // Defensive copy to avoid concurrent modification during iteration\n    const currentBuffer = [...this.buffer];\n    currentBuffer.push(sample);\n\n    if (currentBuffer.length > this.bufferSize) {\n      const shifted = currentBuffer.shift();\n      if (shifted) {\n        try {\n          shifted.close();\n        } catch (_error) {\n          // Sample already closed, continue\n        }\n      }\n    }\n\n    // Update buffer atomically\n    this.buffer = currentBuffer;\n  }\n\n  clear() {\n    // Get current buffer and clear atomically\n    const toClose = this.buffer;\n    this.buffer = [];\n\n    // Close samples after clearing to avoid holding references\n    for (const sample of toClose) {\n      try {\n        sample.close();\n      } catch (_error) {\n        // Sample already closed, continue\n      }\n    }\n  }\n\n  peek(): MediaSample | undefined {\n    // Defensive read - get current buffer state\n    const currentBuffer = this.buffer;\n    return currentBuffer[0];\n  }\n\n  find(desiredSeekTimeMs: number): MediaSample | undefined {\n    const currentBuffer = [...this.buffer];\n\n    if (currentBuffer.length === 0) return undefined;\n\n    // Use consistent precision handling across the entire pipeline\n    const targetTimeMs = roundToMilliseconds(desiredSeekTimeMs);\n\n    // Find the sample that contains the target time\n    for (const sample of currentBuffer) {\n      const sampleStartMs = roundToMilliseconds((sample.timestamp || 0) * 1000);\n      const sampleDurationMs = roundToMilliseconds(\n        (sample.duration || 0) * 1000,\n      );\n      const sampleEndMs = roundToMilliseconds(sampleStartMs + sampleDurationMs);\n\n      // Check if the desired time falls within this sample's time span [start, end], inclusive of end\n      if (targetTimeMs >= sampleStartMs && targetTimeMs < sampleEndMs) {\n        return sample;\n      }\n    }\n\n    return undefined; // No sample contains the target time\n  }\n\n  get length() {\n    return this.buffer.length;\n  }\n\n  get firstTimestamp() {\n    // Defensive read - get current buffer state\n    const currentBuffer = this.buffer;\n    return currentBuffer[0]?.timestamp || 0;\n  }\n\n  getContents(): MediaSample[] {\n    // Defensive copy to avoid concurrent modification during iteration\n    return [...this.buffer];\n  }\n}\n"],"mappings":";;;AAKA,IAAa,eAAb,MAA0B;CAIxB,YAAY,aAAa,IAAI;gBAHG,EAAE;AAIhC,OAAK,aAAa;;CAGpB,KAAK,QAAqB;EAExB,MAAM,gBAAgB,CAAC,GAAG,KAAK,OAAO;AACtC,gBAAc,KAAK,OAAO;AAE1B,MAAI,cAAc,SAAS,KAAK,YAAY;GAC1C,MAAM,UAAU,cAAc,OAAO;AACrC,OAAI,QACF,KAAI;AACF,YAAQ,OAAO;YACR,QAAQ;;AAOrB,OAAK,SAAS;;CAGhB,QAAQ;EAEN,MAAM,UAAU,KAAK;AACrB,OAAK,SAAS,EAAE;AAGhB,OAAK,MAAM,UAAU,QACnB,KAAI;AACF,UAAO,OAAO;WACP,QAAQ;;CAMrB,OAAgC;AAG9B,SADsB,KAAK,OACN;;CAGvB,KAAK,mBAAoD;EACvD,MAAM,gBAAgB,CAAC,GAAG,KAAK,OAAO;AAEtC,MAAI,cAAc,WAAW,EAAG,QAAO;EAGvC,MAAM,eAAe,oBAAoB,kBAAkB;AAG3D,OAAK,MAAM,UAAU,eAAe;GAClC,MAAM,gBAAgB,qBAAqB,OAAO,aAAa,KAAK,IAAK;GAIzE,MAAM,cAAc,oBAAoB,gBAHf,qBACtB,OAAO,YAAY,KAAK,IAC1B,CACwE;AAGzE,OAAI,gBAAgB,iBAAiB,eAAe,YAClD,QAAO;;;CAOb,IAAI,SAAS;AACX,SAAO,KAAK,OAAO;;CAGrB,IAAI,iBAAiB;AAGnB,SADsB,KAAK,OACN,IAAI,aAAa;;CAGxC,cAA6B;AAE3B,SAAO,CAAC,GAAG,KAAK,OAAO"}
+{"version":3,"file":"SampleBuffer.js","names":[],"sources":["../../src/elements/SampleBuffer.ts"],"sourcesContent":["import type { AudioSample, VideoSample } from \"mediabunny\";\nimport { roundToMilliseconds } from \"./EFMedia/shared/PrecisionUtils\";\nexport type MediaSample = VideoSample | AudioSample;\n\n// Generic sample buffer that works with both VideoSample and AudioSample\nexport class SampleBuffer {\n  private buffer: MediaSample[] = [];\n  private bufferSize: number;\n\n  constructor(bufferSize = 10) {\n    this.bufferSize = bufferSize;\n  }\n\n  push(sample: MediaSample) {\n    // Defensive copy to avoid concurrent modification during iteration\n    const currentBuffer = [...this.buffer];\n    currentBuffer.push(sample);\n\n    if (currentBuffer.length > this.bufferSize) {\n      const shifted = currentBuffer.shift();\n      if (shifted) {\n        try {\n          shifted.close();\n        } catch (_error) {\n          // Sample already closed, continue\n        }\n      }\n    }\n\n    // Update buffer atomically\n    this.buffer = currentBuffer;\n  }\n\n  clear() {\n    // Get current buffer and clear atomically\n    const toClose = this.buffer;\n    this.buffer = [];\n\n    // Close samples after clearing to avoid holding references\n    for (const sample of toClose) {\n      try {\n        sample.close();\n      } catch (_error) {\n        // Sample already closed, continue\n      }\n    }\n  }\n\n  peek(): MediaSample | undefined {\n    // Defensive read - get current buffer state\n    const currentBuffer = this.buffer;\n    return currentBuffer[0];\n  }\n\n  find(desiredSeekTimeMs: number): MediaSample | undefined {\n    const currentBuffer = [...this.buffer];\n\n    if (currentBuffer.length === 0) return undefined;\n\n    // Use consistent precision handling across the entire pipeline\n    const targetTimeMs = roundToMilliseconds(desiredSeekTimeMs);\n\n    // Find the sample that contains the target time\n    for (const sample of currentBuffer) {\n      const sampleStartMs = roundToMilliseconds((sample.timestamp || 0) * 1000);\n      const sampleDurationMs = roundToMilliseconds((sample.duration || 0) * 1000);\n      const sampleEndMs = roundToMilliseconds(sampleStartMs + sampleDurationMs);\n\n      // Check if the desired time falls within this sample's time span [start, end], inclusive of end\n      if (targetTimeMs >= sampleStartMs && targetTimeMs < sampleEndMs) {\n        return sample;\n      }\n    }\n\n    return undefined; // No sample contains the target time\n  }\n\n  get length() {\n    return this.buffer.length;\n  }\n\n  get firstTimestamp() {\n    // Defensive read - get current buffer state\n    const currentBuffer = this.buffer;\n    return currentBuffer[0]?.timestamp || 0;\n  }\n\n  getContents(): MediaSample[] {\n    // Defensive copy to avoid concurrent modification during iteration\n    return [...this.buffer];\n  }\n}\n"],"mappings":";;;AAKA,IAAa,eAAb,MAA0B;CAIxB,YAAY,aAAa,IAAI;gBAHG,EAAE;AAIhC,OAAK,aAAa;;CAGpB,KAAK,QAAqB;EAExB,MAAM,gBAAgB,CAAC,GAAG,KAAK,OAAO;AACtC,gBAAc,KAAK,OAAO;AAE1B,MAAI,cAAc,SAAS,KAAK,YAAY;GAC1C,MAAM,UAAU,cAAc,OAAO;AACrC,OAAI,QACF,KAAI;AACF,YAAQ,OAAO;YACR,QAAQ;;AAOrB,OAAK,SAAS;;CAGhB,QAAQ;EAEN,MAAM,UAAU,KAAK;AACrB,OAAK,SAAS,EAAE;AAGhB,OAAK,MAAM,UAAU,QACnB,KAAI;AACF,UAAO,OAAO;WACP,QAAQ;;CAMrB,OAAgC;AAG9B,SADsB,KAAK,OACN;;CAGvB,KAAK,mBAAoD;EACvD,MAAM,gBAAgB,CAAC,GAAG,KAAK,OAAO;AAEtC,MAAI,cAAc,WAAW,EAAG,QAAO;EAGvC,MAAM,eAAe,oBAAoB,kBAAkB;AAG3D,OAAK,MAAM,UAAU,eAAe;GAClC,MAAM,gBAAgB,qBAAqB,OAAO,aAAa,KAAK,IAAK;GAEzE,MAAM,cAAc,oBAAoB,gBADf,qBAAqB,OAAO,YAAY,KAAK,IAAK,CACF;AAGzE,OAAI,gBAAgB,iBAAiB,eAAe,YAClD,QAAO;;;CAOb,IAAI,SAAS;AACX,SAAO,KAAK,OAAO;;CAGrB,IAAI,iBAAiB;AAGnB,SADsB,KAAK,OACN,IAAI,aAAa;;CAGxC,cAA6B;AAE3B,SAAO,CAAC,GAAG,KAAK,OAAO"}