@editframe/elements 0.38.0 → 0.39.0

package/dist/canvas/EFCanvas.d.ts

@@ -5,9 +5,9 @@ import { PanZoomTransform } from "../elements/EFPanZoom.js";
 import "./overlays/SelectionOverlay.js";
 import "../gui/EFOverlayLayer.js";
 import "../gui/EFTransformHandles.js";
-import * as lit30 from "lit";
+import * as lit29 from "lit";
 import { LitElement } from "lit";
-import * as lit_html28 from "lit-html";
+import * as lit_html27 from "lit-html";
 
 //#region src/canvas/EFCanvas.d.ts
 declare const EFCanvas_base: typeof LitElement;
@@ -87,7 +87,7 @@ declare const EFCanvas_base: typeof LitElement;
  * Manages existing elements (EF* elements, divs, etc.) and provides selection functionality.
  */
 declare class EFCanvas extends EFCanvas_base {
-  static styles: lit30.CSSResult[];
+  static styles: lit29.CSSResult[];
   panZoomTransform?: PanZoomTransform;
   elementIdAttribute: string;
   enableTransformHandles: boolean;
@@ -309,7 +309,7 @@ declare class EFCanvas extends EFCanvas_base {
    * Cleanup transform handles.
    */
   private cleanupTransformHandles;
-  render(): lit_html28.TemplateResult<1>;
+  render(): lit_html27.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/canvas/EFCanvasItem.d.ts

@@ -1,6 +1,6 @@
-import * as lit33 from "lit";
+import * as lit30 from "lit";
 import { LitElement } from "lit";
-import * as lit_html31 from "lit-html";
+import * as lit_html28 from "lit-html";
 
 //#region src/canvas/EFCanvasItem.d.ts
 
@@ -28,7 +28,7 @@ import * as lit_html31 from "lit-html";
  * ```
  */
 declare class EFCanvasItem extends LitElement {
-  static styles: lit33.CSSResult;
+  static styles: lit30.CSSResult;
   id: string;
   private canvas;
   private api;
@@ -43,7 +43,7 @@ declare class EFCanvasItem extends LitElement {
    * Unregister this element from the canvas.
    */
   private unregister;
-  render(): lit_html31.TemplateResult<1>;
+  render(): lit_html28.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/canvas/overlays/SelectionOverlay.d.ts

@@ -1,6 +1,6 @@
 import { SelectionContext } from "../selection/selectionContext.js";
 import { PanZoomTransform } from "../../elements/EFPanZoom.js";
-import * as lit38 from "lit";
+import * as lit37 from "lit";
 import { LitElement } from "lit";
 import * as lit_html34 from "lit-html";
 
@@ -10,7 +10,7 @@ import * as lit_html34 from "lit-html";
  * Uses fixed positioning to ensure 1:1 pixel ratio regardless of zoom level.
  */
 declare class SelectionOverlay extends LitElement {
-  static styles: lit38.CSSResult[];
+  static styles: lit37.CSSResult[];
   createRenderRoot(): this;
   firstUpdated(changedProperties: Map<string | number | symbol, unknown>): void;
   selectionFromContext?: SelectionContext;

package/dist/canvas/overlays/SelectionOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionOverlay.js","names":["SelectionOverlay","panZoom","current: Node | null","canvasWithMetadata: CanvasWithMetadata"],"sources":["../../../src/canvas/overlays/SelectionOverlay.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport {\n  selectionContext,\n  type SelectionContext,\n} from \"../selection/selectionContext.js\";\nimport { panZoomTransformContext } from \"../../gui/panZoomTransformContext.js\";\nimport type { PanZoomTransform } from \"../../elements/EFPanZoom.js\";\nimport {\n  type OverlayState,\n  type CanvasWithMetadata,\n  getOverlayTargets,\n  calculateOverlayState,\n} from \"./overlayState.js\";\n\n/**\n * Selection overlay that renders unscaled selection indicators.\n * Uses fixed positioning to ensure 1:1 pixel ratio regardless of zoom level.\n */\n@customElement(\"ef-canvas-selection-overlay\")\nexport class SelectionOverlay extends LitElement {\n  static styles = [\n    css`\n      :host {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100vw;\n        height: 100vh;\n        pointer-events: none;\n        z-index: 1000;\n      }\n      .box-select {\n        position: absolute;\n        border: 2px dashed rgb(59, 130, 246);\n        background: rgba(59, 130, 246, 0.05);\n        pointer-events: none;\n      }\n      .highlight-box {\n        position: absolute;\n        border: 2px solid rgb(148, 163, 184);\n        background: rgba(148, 163, 184, 0.1);\n        pointer-events: none;\n        box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.3);\n      }\n    `,\n  ];\n\n  createRenderRoot() {\n    // Return this to render directly to the element (no shadow DOM)\n    // This allows the overlay to use fixed positioning relative to viewport\n    // Lit will inject styles as a <style> element when createRenderRoot returns this\n    return this;\n  }\n\n  firstUpdated(\n    changedProperties: Map<string | number | symbol, unknown>,\n  ): void {\n    super.firstUpdated?.(changedProperties);\n\n  }\n\n  @consume({ context: selectionContext, subscribe: true })\n  selectionFromContext?: SelectionContext;\n\n  @consume({ context: panZoomTransformContext, subscribe: true })\n  panZoomTransformFromContext?: PanZoomTransform;\n\n  /**\n   * Selection context as fallback for when overlay is outside context providers (e.g., sibling of pan-zoom).\n   */\n  @property({ type: Object })\n  selection?: SelectionContext;\n\n  /**\n   * Pan/zoom transform as fallback for when overlay is outside context providers (e.g., sibling of pan-zoom).\n   */\n  @property({ type: Object })\n  panZoomTransform?: PanZoomTransform;\n\n  @state()\n  private canvasElement: HTMLElement | null = null;\n\n  /**\n   * Canvas element property - can be set directly when overlay is outside context providers.\n   */\n  @property({ type: Object })\n  canvas?: HTMLElement;\n\n  /**\n   * Complete overlay state - calculated from targets using the abstraction layer.\n   * This is the SINGLE source of truth for overlay bounds.\n   */\n  @state()\n  private overlayState: OverlayState = {\n    selection: null,\n    boxSelect: null,\n    highlight: null,\n  };\n\n  @state()\n  private lastSelectionMode: string | null = null;\n\n  /**\n   * When true, the RAF loop skips all work. Used during playback to avoid\n   * layout-thrashing getBoundingClientRect/getComputedStyle calls that\n   * compete with the canvas render pipeline.\n   */\n  @property({ type: Boolean }) paused = false;\n\n  private animationFrame?: number;\n  private rafLoopActive = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    // Apply styles directly since :host doesn't work in light DOM\n    // These styles are critical for proper positioning relative to viewport\n    this.style.position = \"fixed\";\n    this.style.top = \"0\";\n    this.style.left = \"0\";\n    this.style.width = \"100vw\";\n    this.style.height = \"100vh\";\n    this.style.pointerEvents = \"none\";\n    this.style.zIndex = \"1000\";\n    // Add a data attribute for easier debugging\n    this.setAttribute(\"data-selection-overlay\", \"true\");\n    // Use requestAnimationFrame to ensure DOM is ready\n    requestAnimationFrame(() => {\n      // Use canvas property if provided, otherwise try to find it\n      if (this.canvas) {\n        this.canvasElement = this.canvas;\n      } else {\n        this.findCanvasElement();\n      }\n      // Always start RAF loop if we have a canvas element (needed for highlight updates)\n      if (this.canvasElement) {\n        this.startRafLoop();\n      }\n    });\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.stopRafLoop();\n  }\n\n  /**\n   * React to selection context changes to ensure box selection visual updates.\n   * This is called whenever Lit detects a property change, including context updates.\n   * Note: We don't call requestUpdate() here to avoid the Lit warning about scheduling\n   * updates after an update completes. The RAF loop handles all updates.\n   */\n  updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    super.updated?.(changedProperties);\n    // Check if selection mode changed (context updates might not show in changedProperties)\n    const selection = this.effectiveSelection;\n    const currentMode = selection?.selectionMode ?? null;\n    if (currentMode !== this.lastSelectionMode) {\n      this.lastSelectionMode = currentMode;\n    }\n    // Ensure RAF loop is running when box selecting (in case it stopped)\n    if (currentMode === \"box-selecting\" && !this.rafLoopActive) {\n      this.startRafLoop();\n    }\n    // Ensure RAF loop is running when canvas property is set (for highlight updates)\n    if (changedProperties.has(\"canvas\") && this.canvas) {\n      this.canvasElement = this.canvas;\n      if (!this.rafLoopActive) {\n        this.startRafLoop();\n      }\n    }\n    // Start RAF loop if we have a canvas but loop isn't running\n    if (this.canvasElement && !this.rafLoopActive) {\n      this.startRafLoop();\n    }\n    // On unpause, force an immediate overlay update to sync stale state\n    if (changedProperties.has(\"paused\") && !this.paused) {\n      this.updateOverlayData();\n    }\n  }\n\n  /**\n   * Find the EFCanvas element.\n   * Handles both cases:\n   * 1. Overlay is inside EFCanvas's shadow DOM (old case)\n   * 2. Overlay is a sibling of ef-pan-zoom (new case - outside transform)\n   */\n  private findCanvasElement(): void {\n    // First, try to find ef-canvas as a sibling or descendant of ef-pan-zoom\n    // (when overlay is outside the transform)\n    // Since overlay is a sibling of ef-pan-zoom, we need to search in the parent\n    const parent = this.parentElement;\n    if (parent) {\n      // Look for ef-pan-zoom sibling\n      const panZoom = parent.querySelector(\"ef-pan-zoom\") as HTMLElement | null;\n      if (panZoom) {\n        // Look for ef-canvas inside ef-pan-zoom\n        const canvas = panZoom.querySelector(\"ef-canvas\") as HTMLElement | null;\n        if (canvas) {\n          this.canvasElement = canvas;\n          return;\n        }\n      }\n    }\n\n    // Also try closest in case overlay is inside pan-zoom somehow\n    const panZoom = this.closest(\"ef-pan-zoom\") as HTMLElement | null;\n    if (panZoom) {\n      const canvas = panZoom.querySelector(\"ef-canvas\") as HTMLElement | null;\n      if (canvas) {\n        this.canvasElement = canvas;\n        return;\n      }\n    }\n\n    // Fallback: traverse up the DOM tree (for when overlay is inside canvas shadow DOM)\n    let current: Node | null = this;\n    while (current) {\n      if (current instanceof ShadowRoot) {\n        current = (current as ShadowRoot).host;\n      } else if (current instanceof HTMLElement) {\n        // Check if this is the EFCanvas element (case-insensitive check)\n        if (\n          current.tagName === \"EF-CANVAS\" ||\n          current.tagName.toLowerCase() === \"ef-canvas\"\n        ) {\n          this.canvasElement = current;\n          return;\n        }\n        // Check parent element or shadow root host\n        const rootNode = current.getRootNode();\n        if (rootNode instanceof ShadowRoot) {\n          current = rootNode.host;\n        } else {\n          current = current.parentElement;\n        }\n      } else {\n        const rootNode = (current as Node).getRootNode();\n        if (rootNode instanceof ShadowRoot) {\n          current = rootNode.host;\n        } else {\n          current = (current as Node).parentElement;\n        }\n      }\n    }\n  }\n\n  /**\n   * Start continuous RAF loop for smooth overlay updates.\n   */\n  private startRafLoop(): void {\n    if (this.rafLoopActive) {\n      return;\n    }\n    this.rafLoopActive = true;\n    this.rafLoop();\n  }\n\n  /**\n   * Stop RAF loop.\n   */\n  private stopRafLoop(): void {\n    this.rafLoopActive = false;\n    if (this.animationFrame) {\n      cancelAnimationFrame(this.animationFrame);\n      this.animationFrame = undefined;\n    }\n  }\n\n  /**\n   * Continuous RAF loop to update overlays every frame using Lit render cycle.\n   * When paused, the loop keeps running (for quick resume) but skips all\n   * expensive layout queries.\n   */\n  private rafLoop = (): void => {\n    if (!this.rafLoopActive) {\n      return;\n    }\n\n    // Skip all work when paused to avoid layout-thrashing during playback\n    if (!this.paused) {\n      this.updateOverlayData();\n    }\n\n    // Schedule next frame\n    this.animationFrame = requestAnimationFrame(this.rafLoop);\n  };\n\n  /**\n   * Get the effective selection context (from context or property).\n   */\n  private get effectiveSelection(): SelectionContext | undefined {\n    return this.selectionFromContext ?? this.selection;\n  }\n\n  /**\n   * Get the effective pan-zoom transform (from context or property).\n   */\n  private get effectivePanZoomTransform(): PanZoomTransform | undefined {\n    return this.panZoomTransformFromContext ?? this.panZoomTransform;\n  }\n\n  /**\n   * Update overlay data state using the abstraction layer.\n   *\n   * This method now uses the clean separation of:\n   * - SEMANTICS: getOverlayTargets() determines WHAT should be shown\n   * - MECHANISM: calculateOverlayState() determines HOW to show it\n   */\n  private updateOverlayData(): void {\n    // Ensure canvas element reference is up-to-date\n    if (this.canvas && this.canvas !== this.canvasElement) {\n      this.canvasElement = this.canvas;\n    }\n\n    // Get canvas element - required for all overlay calculations\n    const effectiveCanvas = this.canvasElement || this.canvas;\n    if (!effectiveCanvas) {\n      this.overlayState = { selection: null, boxSelect: null, highlight: null };\n      return;\n    }\n\n    // Get canvas rect (try .canvas-content first for accurate positioning)\n    let canvasRect = effectiveCanvas.getBoundingClientRect();\n    if (effectiveCanvas.shadowRoot) {\n      const canvasContent = effectiveCanvas.shadowRoot.querySelector(\n        \".canvas-content\",\n      ) as HTMLElement;\n      if (canvasContent) {\n        canvasRect = canvasContent.getBoundingClientRect();\n      }\n    }\n\n    // Get pan-zoom element for box-select coordinate conversion\n    const panZoomElement = effectiveCanvas.closest(\n      \"ef-pan-zoom\",\n    ) as HTMLElement | null;\n\n    // Get highlighted element from canvas\n    const canvas = effectiveCanvas as any;\n    const highlightedElement = canvas?.highlightedElement as HTMLElement | null;\n\n    // SEMANTICS: What should be shown?\n    const targets = getOverlayTargets(\n      this.effectiveSelection,\n      highlightedElement,\n    );\n\n    // Adapt canvas to CanvasWithMetadata interface\n    const canvasWithMetadata: CanvasWithMetadata = {\n      getElementData: (id: string) => canvas?.getElementData?.(id),\n      getElement: (id: string) => canvas?.elementRegistry?.get(id),\n      querySelector: (selector: string) =>\n        effectiveCanvas.querySelector(selector),\n      shadowRoot: effectiveCanvas.shadowRoot,\n    };\n\n    // Read current transform directly from panzoom element (not stale property/context)\n    // This ensures we always have the current scale/pan values\n    const currentTransform = this.readCurrentTransform(panZoomElement);\n\n    // MECHANISM: Calculate screen bounds\n    this.overlayState = calculateOverlayState(\n      targets,\n      canvasWithMetadata,\n      canvasRect,\n      panZoomElement,\n      currentTransform,\n    );\n  }\n\n  /**\n   * Read current transform directly from panzoom element.\n   * This ensures we always have fresh values instead of stale property/context.\n   */\n  private readCurrentTransform(\n    panZoomElement: HTMLElement | null,\n  ): PanZoomTransform | undefined {\n    // Try reading from panzoom element directly (most accurate)\n    if (panZoomElement) {\n      const pz = panZoomElement as any;\n      if (\n        typeof pz.x === \"number\" &&\n        typeof pz.y === \"number\" &&\n        typeof pz.scale === \"number\"\n      ) {\n        return { x: pz.x, y: pz.y, scale: pz.scale };\n      }\n    }\n\n    // Fall back to context/property\n    return this.effectivePanZoomTransform;\n  }\n\n  render() {\n    // We only need canvasElement to render overlays\n    const effectiveCanvas = this.canvasElement || this.canvas;\n    if (!effectiveCanvas) {\n      return html``;\n    }\n\n    // NOTE: Selection visualization is handled by EFTransformHandles (with rotation support).\n    // This overlay only renders:\n    // - box-select: marquee during drag-to-select\n    // - highlight-box: hover indication for non-selected elements\n    const { boxSelect, highlight } = this.overlayState;\n\n    return html`\n      ${\n        boxSelect\n          ? html`\n            <div\n              class=\"box-select\"\n              style=\"left: ${boxSelect.x}px; top: ${boxSelect.y}px; width: ${boxSelect.width}px; height: ${boxSelect.height}px; position: absolute; border: 2px dashed rgb(59, 130, 246); background: rgba(59, 130, 246, 0.05); pointer-events: none;\"\n            ></div>\n          `\n          : html``\n      }\n      ${\n        highlight\n          ? html`\n            <div\n              class=\"highlight-box\"\n              style=\"left: ${highlight.x}px; top: ${highlight.y}px; width: ${highlight.width}px; height: ${highlight.height}px; position: absolute; border: 2px solid rgb(148, 163, 184); background: rgba(148, 163, 184, 0.1); pointer-events: none; box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.3);\"\n            ></div>\n          `\n          : html``\n      }\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-canvas-selection-overlay\": SelectionOverlay;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"SelectionOverlay.js","names":["SelectionOverlay","panZoom","current: Node | null","canvasWithMetadata: CanvasWithMetadata"],"sources":["../../../src/canvas/overlays/SelectionOverlay.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport {\n  selectionContext,\n  type SelectionContext,\n} from \"../selection/selectionContext.js\";\nimport { panZoomTransformContext } from \"../../gui/panZoomTransformContext.js\";\nimport type { PanZoomTransform } from \"../../elements/EFPanZoom.js\";\nimport {\n  type OverlayState,\n  type CanvasWithMetadata,\n  getOverlayTargets,\n  calculateOverlayState,\n} from \"./overlayState.js\";\n\n/**\n * Selection overlay that renders unscaled selection indicators.\n * Uses fixed positioning to ensure 1:1 pixel ratio regardless of zoom level.\n */\n@customElement(\"ef-canvas-selection-overlay\")\nexport class SelectionOverlay extends LitElement {\n  static styles = [\n    css`\n      :host {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100vw;\n        height: 100vh;\n        pointer-events: none;\n        z-index: 1000;\n      }\n      .box-select {\n        position: absolute;\n        border: 2px dashed rgb(59, 130, 246);\n        background: rgba(59, 130, 246, 0.05);\n        pointer-events: none;\n      }\n      .highlight-box {\n        position: absolute;\n        border: 2px solid rgb(148, 163, 184);\n        background: rgba(148, 163, 184, 0.1);\n        pointer-events: none;\n        box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.3);\n      }\n    `,\n  ];\n\n  createRenderRoot() {\n    // Return this to render directly to the element (no shadow DOM)\n    // This allows the overlay to use fixed positioning relative to viewport\n    // Lit will inject styles as a <style> element when createRenderRoot returns this\n    return this;\n  }\n\n  firstUpdated(\n    changedProperties: Map<string | number | symbol, unknown>,\n  ): void {\n    super.firstUpdated?.(changedProperties);\n  }\n\n  @consume({ context: selectionContext, subscribe: true })\n  selectionFromContext?: SelectionContext;\n\n  @consume({ context: panZoomTransformContext, subscribe: true })\n  panZoomTransformFromContext?: PanZoomTransform;\n\n  /**\n   * Selection context as fallback for when overlay is outside context providers (e.g., sibling of pan-zoom).\n   */\n  @property({ type: Object })\n  selection?: SelectionContext;\n\n  /**\n   * Pan/zoom transform as fallback for when overlay is outside context providers (e.g., sibling of pan-zoom).\n   */\n  @property({ type: Object })\n  panZoomTransform?: PanZoomTransform;\n\n  @state()\n  private canvasElement: HTMLElement | null = null;\n\n  /**\n   * Canvas element property - can be set directly when overlay is outside context providers.\n   */\n  @property({ type: Object })\n  canvas?: HTMLElement;\n\n  /**\n   * Complete overlay state - calculated from targets using the abstraction layer.\n   * This is the SINGLE source of truth for overlay bounds.\n   */\n  @state()\n  private overlayState: OverlayState = {\n    selection: null,\n    boxSelect: null,\n    highlight: null,\n  };\n\n  @state()\n  private lastSelectionMode: string | null = null;\n\n  /**\n   * When true, the RAF loop skips all work. Used during playback to avoid\n   * layout-thrashing getBoundingClientRect/getComputedStyle calls that\n   * compete with the canvas render pipeline.\n   */\n  @property({ type: Boolean }) paused = false;\n\n  private animationFrame?: number;\n  private rafLoopActive = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    // Apply styles directly since :host doesn't work in light DOM\n    // These styles are critical for proper positioning relative to viewport\n    this.style.position = \"fixed\";\n    this.style.top = \"0\";\n    this.style.left = \"0\";\n    this.style.width = \"100vw\";\n    this.style.height = \"100vh\";\n    this.style.pointerEvents = \"none\";\n    this.style.zIndex = \"1000\";\n    // Add a data attribute for easier debugging\n    this.setAttribute(\"data-selection-overlay\", \"true\");\n    // Use requestAnimationFrame to ensure DOM is ready\n    requestAnimationFrame(() => {\n      // Use canvas property if provided, otherwise try to find it\n      if (this.canvas) {\n        this.canvasElement = this.canvas;\n      } else {\n        this.findCanvasElement();\n      }\n      // Always start RAF loop if we have a canvas element (needed for highlight updates)\n      if (this.canvasElement) {\n        this.startRafLoop();\n      }\n    });\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.stopRafLoop();\n  }\n\n  /**\n   * React to selection context changes to ensure box selection visual updates.\n   * This is called whenever Lit detects a property change, including context updates.\n   * Note: We don't call requestUpdate() here to avoid the Lit warning about scheduling\n   * updates after an update completes. The RAF loop handles all updates.\n   */\n  updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    super.updated?.(changedProperties);\n    // Check if selection mode changed (context updates might not show in changedProperties)\n    const selection = this.effectiveSelection;\n    const currentMode = selection?.selectionMode ?? null;\n    if (currentMode !== this.lastSelectionMode) {\n      this.lastSelectionMode = currentMode;\n    }\n    // Ensure RAF loop is running when box selecting (in case it stopped)\n    if (currentMode === \"box-selecting\" && !this.rafLoopActive) {\n      this.startRafLoop();\n    }\n    // Ensure RAF loop is running when canvas property is set (for highlight updates)\n    if (changedProperties.has(\"canvas\") && this.canvas) {\n      this.canvasElement = this.canvas;\n      if (!this.rafLoopActive) {\n        this.startRafLoop();\n      }\n    }\n    // Start RAF loop if we have a canvas but loop isn't running\n    if (this.canvasElement && !this.rafLoopActive) {\n      this.startRafLoop();\n    }\n    // On unpause, force an immediate overlay update to sync stale state\n    if (changedProperties.has(\"paused\") && !this.paused) {\n      this.updateOverlayData();\n    }\n  }\n\n  /**\n   * Find the EFCanvas element.\n   * Handles both cases:\n   * 1. Overlay is inside EFCanvas's shadow DOM (old case)\n   * 2. Overlay is a sibling of ef-pan-zoom (new case - outside transform)\n   */\n  private findCanvasElement(): void {\n    // First, try to find ef-canvas as a sibling or descendant of ef-pan-zoom\n    // (when overlay is outside the transform)\n    // Since overlay is a sibling of ef-pan-zoom, we need to search in the parent\n    const parent = this.parentElement;\n    if (parent) {\n      // Look for ef-pan-zoom sibling\n      const panZoom = parent.querySelector(\"ef-pan-zoom\") as HTMLElement | null;\n      if (panZoom) {\n        // Look for ef-canvas inside ef-pan-zoom\n        const canvas = panZoom.querySelector(\"ef-canvas\") as HTMLElement | null;\n        if (canvas) {\n          this.canvasElement = canvas;\n          return;\n        }\n      }\n    }\n\n    // Also try closest in case overlay is inside pan-zoom somehow\n    const panZoom = this.closest(\"ef-pan-zoom\") as HTMLElement | null;\n    if (panZoom) {\n      const canvas = panZoom.querySelector(\"ef-canvas\") as HTMLElement | null;\n      if (canvas) {\n        this.canvasElement = canvas;\n        return;\n      }\n    }\n\n    // Fallback: traverse up the DOM tree (for when overlay is inside canvas shadow DOM)\n    let current: Node | null = this;\n    while (current) {\n      if (current instanceof ShadowRoot) {\n        current = (current as ShadowRoot).host;\n      } else if (current instanceof HTMLElement) {\n        // Check if this is the EFCanvas element (case-insensitive check)\n        if (\n          current.tagName === \"EF-CANVAS\" ||\n          current.tagName.toLowerCase() === \"ef-canvas\"\n        ) {\n          this.canvasElement = current;\n          return;\n        }\n        // Check parent element or shadow root host\n        const rootNode = current.getRootNode();\n        if (rootNode instanceof ShadowRoot) {\n          current = rootNode.host;\n        } else {\n          current = current.parentElement;\n        }\n      } else {\n        const rootNode = (current as Node).getRootNode();\n        if (rootNode instanceof ShadowRoot) {\n          current = rootNode.host;\n        } else {\n          current = (current as Node).parentElement;\n        }\n      }\n    }\n  }\n\n  /**\n   * Start continuous RAF loop for smooth overlay updates.\n   */\n  private startRafLoop(): void {\n    if (this.rafLoopActive) {\n      return;\n    }\n    this.rafLoopActive = true;\n    this.rafLoop();\n  }\n\n  /**\n   * Stop RAF loop.\n   */\n  private stopRafLoop(): void {\n    this.rafLoopActive = false;\n    if (this.animationFrame) {\n      cancelAnimationFrame(this.animationFrame);\n      this.animationFrame = undefined;\n    }\n  }\n\n  /**\n   * Continuous RAF loop to update overlays every frame using Lit render cycle.\n   * When paused, the loop keeps running (for quick resume) but skips all\n   * expensive layout queries.\n   */\n  private rafLoop = (): void => {\n    if (!this.rafLoopActive) {\n      return;\n    }\n\n    // Skip all work when paused to avoid layout-thrashing during playback\n    if (!this.paused) {\n      this.updateOverlayData();\n    }\n\n    // Schedule next frame\n    this.animationFrame = requestAnimationFrame(this.rafLoop);\n  };\n\n  /**\n   * Get the effective selection context (from context or property).\n   */\n  private get effectiveSelection(): SelectionContext | undefined {\n    return this.selectionFromContext ?? this.selection;\n  }\n\n  /**\n   * Get the effective pan-zoom transform (from context or property).\n   */\n  private get effectivePanZoomTransform(): PanZoomTransform | undefined {\n    return this.panZoomTransformFromContext ?? this.panZoomTransform;\n  }\n\n  /**\n   * Update overlay data state using the abstraction layer.\n   *\n   * This method now uses the clean separation of:\n   * - SEMANTICS: getOverlayTargets() determines WHAT should be shown\n   * - MECHANISM: calculateOverlayState() determines HOW to show it\n   */\n  private updateOverlayData(): void {\n    // Ensure canvas element reference is up-to-date\n    if (this.canvas && this.canvas !== this.canvasElement) {\n      this.canvasElement = this.canvas;\n    }\n\n    // Get canvas element - required for all overlay calculations\n    const effectiveCanvas = this.canvasElement || this.canvas;\n    if (!effectiveCanvas) {\n      this.overlayState = { selection: null, boxSelect: null, highlight: null };\n      return;\n    }\n\n    // Get canvas rect (try .canvas-content first for accurate positioning)\n    let canvasRect = effectiveCanvas.getBoundingClientRect();\n    if (effectiveCanvas.shadowRoot) {\n      const canvasContent = effectiveCanvas.shadowRoot.querySelector(\n        \".canvas-content\",\n      ) as HTMLElement;\n      if (canvasContent) {\n        canvasRect = canvasContent.getBoundingClientRect();\n      }\n    }\n\n    // Get pan-zoom element for box-select coordinate conversion\n    const panZoomElement = effectiveCanvas.closest(\n      \"ef-pan-zoom\",\n    ) as HTMLElement | null;\n\n    // Get highlighted element from canvas\n    const canvas = effectiveCanvas as any;\n    const highlightedElement = canvas?.highlightedElement as HTMLElement | null;\n\n    // SEMANTICS: What should be shown?\n    const targets = getOverlayTargets(\n      this.effectiveSelection,\n      highlightedElement,\n    );\n\n    // Adapt canvas to CanvasWithMetadata interface\n    const canvasWithMetadata: CanvasWithMetadata = {\n      getElementData: (id: string) => canvas?.getElementData?.(id),\n      getElement: (id: string) => canvas?.elementRegistry?.get(id),\n      querySelector: (selector: string) =>\n        effectiveCanvas.querySelector(selector),\n      shadowRoot: effectiveCanvas.shadowRoot,\n    };\n\n    // Read current transform directly from panzoom element (not stale property/context)\n    // This ensures we always have the current scale/pan values\n    const currentTransform = this.readCurrentTransform(panZoomElement);\n\n    // MECHANISM: Calculate screen bounds\n    this.overlayState = calculateOverlayState(\n      targets,\n      canvasWithMetadata,\n      canvasRect,\n      panZoomElement,\n      currentTransform,\n    );\n  }\n\n  /**\n   * Read current transform directly from panzoom element.\n   * This ensures we always have fresh values instead of stale property/context.\n   */\n  private readCurrentTransform(\n    panZoomElement: HTMLElement | null,\n  ): PanZoomTransform | undefined {\n    // Try reading from panzoom element directly (most accurate)\n    if (panZoomElement) {\n      const pz = panZoomElement as any;\n      if (\n        typeof pz.x === \"number\" &&\n        typeof pz.y === \"number\" &&\n        typeof pz.scale === \"number\"\n      ) {\n        return { x: pz.x, y: pz.y, scale: pz.scale };\n      }\n    }\n\n    // Fall back to context/property\n    return this.effectivePanZoomTransform;\n  }\n\n  render() {\n    // We only need canvasElement to render overlays\n    const effectiveCanvas = this.canvasElement || this.canvas;\n    if (!effectiveCanvas) {\n      return html``;\n    }\n\n    // NOTE: Selection visualization is handled by EFTransformHandles (with rotation support).\n    // This overlay only renders:\n    // - box-select: marquee during drag-to-select\n    // - highlight-box: hover indication for non-selected elements\n    const { boxSelect, highlight } = this.overlayState;\n\n    return html`\n      ${\n        boxSelect\n          ? html`\n            <div\n              class=\"box-select\"\n              style=\"left: ${boxSelect.x}px; top: ${boxSelect.y}px; width: ${boxSelect.width}px; height: ${boxSelect.height}px; position: absolute; border: 2px dashed rgb(59, 130, 246); background: rgba(59, 130, 246, 0.05); pointer-events: none;\"\n            ></div>\n          `\n          : html``\n      }\n      ${\n        highlight\n          ? html`\n            <div\n              class=\"highlight-box\"\n              style=\"left: ${highlight.x}px; top: ${highlight.y}px; width: ${highlight.width}px; height: ${highlight.height}px; position: absolute; border: 2px solid rgb(148, 163, 184); background: rgba(148, 163, 184, 0.1); pointer-events: none; box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.3);\"\n            ></div>\n          `\n          : html``\n      }\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-canvas-selection-overlay\": SelectionOverlay;\n  }\n}\n"],"mappings":"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"}

package/dist/elements/EFCaptions.js

@@ -138,7 +138,7 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		const targetSrc = this.targetElement.src;
 		let normalizedSrc = targetSrc.startsWith("/") ? targetSrc.slice(1) : targetSrc;
 		normalizedSrc = normalizedSrc.replace(/^\/+/, "");
-		return `/api/v1/assets/local/captions?src=${encodeURIComponent(normalizedSrc)}`;
+		return `/api/v1/assets/captions?src=${encodeURIComponent(normalizedSrc)}`;
 	}
 	#captionsDataLoaded = false;
 	#captionsDataPromise = null;

package/dist/elements/EFCaptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFCaptions.js","names":["EFCaptionsActiveWord","#wordText","#wordIndex","EFCaptionsSegment","#segmentText","EFCaptionsBeforeActiveWord","EFCaptionsAfterActiveWord","EFCaptions","#captionsDataLoaded","#captionsDataValue","#captionsDataPromise","#doLoadCaptionsData","#findElementById","#transcriptionData","#loadTranscriptionFragment","#rootTimegroupUpdateController","#cachedIntrinsicDurationMs","captionsData: Caption | null","result: number"],"sources":["../../src/elements/EFCaptions.ts"],"sourcesContent":["import { css, html, LitElement, type PropertyValueMap } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport type { ReactiveController } from \"lit\";\nimport type { GetISOBMFFFileTranscriptionResult } from \"../../../api/src/index.js\";\nimport {\n  type FrameRenderable,\n  type FrameState,\n  PRIORITY_CAPTIONS,\n} from \"../preview/FrameController.js\";\nimport { AsyncValue } from \"./EFMedia.js\";\nimport { CrossUpdateController } from \"./CrossUpdateController.js\";\nimport { EFAudio } from \"./EFAudio.js\";\nimport { EFSourceMixin } from \"./EFSourceMixin.js\";\nimport { EFTemporal, flushStartTimeMsCache } from \"./EFTemporal.js\";\nimport { flushSequenceDurationCache, EFTimegroup } from \"./EFTimegroup.js\";\nimport { EFVideo } from \"./EFVideo.js\";\nimport { FetchMixin } from \"./FetchMixin.js\";\n\nexport interface WordSegment {\n  text: string;\n  start: number;\n  end: number;\n}\n\nexport interface Segment {\n  start: number;\n  end: number;\n  text: string;\n}\n\nexport interface Caption {\n  segments: Segment[];\n  word_segments: WordSegment[];\n}\n\nconst stopWords = new Set([\"\", \".\", \"!\", \"?\", \",\"]);\n\n/**\n * Caption active word element - displays the currently spoken word.\n * Uses light DOM for simplicity - parent sets textContent directly.\n */\n@customElement(\"ef-captions-active-word\")\nexport class EFCaptionsActiveWord extends LitElement {\n  #wordText = \"\";\n  #wordIndex = 0;\n\n  set wordText(text: string) {\n    this.#wordText = text;\n    // Hide element if no content or only stop words\n    if (!text || stopWords.has(text)) {\n      this.hidden = true;\n      this.textContent = \"\";\n    } else {\n      this.hidden = false;\n      // Add trailing space to maintain consistent spacing with surrounding words\n      this.textContent = text + \" \";\n    }\n  }\n\n  get wordText(): string {\n    return this.#wordText;\n  }\n\n  set wordIndex(index: number) {\n    this.#wordIndex = index;\n    // Set deterministic --ef-word-seed value based on word index\n    const seed = (index * 9007) % 233; // Prime numbers for better distribution\n    const seedValue = seed / 233; // Normalize to 0-1 range\n    this.style.setProperty(\"--ef-word-seed\", seedValue.toString());\n  }\n\n  get wordIndex(): number {\n    return this.#wordIndex;\n  }\n}\n\n/**\n * Caption segment element - displays a full caption segment.\n * Uses light DOM for simplicity - parent sets textContent directly.\n */\n@customElement(\"ef-captions-segment\")\nexport class EFCaptionsSegment extends LitElement {\n  #segmentText = \"\";\n\n  set segmentText(text: string) {\n    this.#segmentText = text;\n    // Hide element if no content or only stop words\n    if (!text || stopWords.has(text)) {\n      this.hidden = true;\n      this.textContent = \"\";\n    } else {\n      this.hidden = false;\n      this.textContent = text;\n    }\n  }\n\n  get segmentText(): string {\n    return this.#segmentText;\n  }\n}\n\n/**\n * Caption before-active-word element - displays words before the current word.\n * Uses light DOM for simplicity - parent sets textContent directly.\n */\n@customElement(\"ef-captions-before-active-word\")\nexport class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {\n  set segmentText(text: string) {\n    // Check if there's an active word by looking for sibling active word element\n    const activeWord = this.closest(\"ef-captions\")?.querySelector(\n      \"ef-captions-active-word\",\n    ) as EFCaptionsActiveWord;\n    const hasActiveWord = activeWord?.wordText;\n\n    // Add trailing space if there's an active word coming after us\n    const finalText = text && hasActiveWord ? text + \" \" : text;\n\n    // Hide element if no content or only stop words\n    if (!finalText || stopWords.has(finalText)) {\n      this.hidden = true;\n      this.textContent = \"\";\n    } else {\n      this.hidden = false;\n      this.textContent = finalText;\n    }\n  }\n}\n\n/**\n * Caption after-active-word element - displays words after the current word.\n * Uses light DOM for simplicity - parent sets textContent directly.\n */\n@customElement(\"ef-captions-after-active-word\")\nexport class EFCaptionsAfterActiveWord extends EFCaptionsSegment {\n  set segmentText(text: string) {\n    // No leading space - active word will add trailing space\n    const finalText = text;\n\n    // Hide element if no content or only stop words\n    if (!finalText || stopWords.has(finalText)) {\n      this.hidden = true;\n      this.textContent = \"\";\n    } else {\n      this.hidden = false;\n      this.textContent = finalText;\n    }\n  }\n}\n\n@customElement(\"ef-captions\")\nexport class EFCaptions\n  extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {\n    assetType: \"caption_files\",\n  })\n  implements FrameRenderable\n{\n  static styles = [\n    css`\n      :host {\n        display: block;\n        white-space: normal;\n        line-height: 1;\n        gap: 0;\n      }\n      ::slotted(*) {\n        display: inline;\n        margin: 0;\n        padding: 0;\n      }\n    `,\n  ];\n\n  @property({ type: String, attribute: \"target\", reflect: true })\n  targetSelector = \"\";\n\n  set target(value: string) {\n    this.targetSelector = value;\n  }\n\n  @property({ attribute: \"word-style\" })\n  wordStyle = \"\";\n\n  /**\n   * URL or path to a JSON file containing custom captions data.\n   * The JSON should conform to the Caption interface with 'segments' and 'word_segments' arrays.\n   */\n  @property({ type: String, attribute: \"captions-src\", reflect: true })\n  captionsSrc = \"\";\n\n  /**\n   * Direct captions data object. Takes priority over captions-src and captions-script.\n   * Should conform to the Caption interface with 'segments' and 'word_segments' arrays.\n   */\n  @property({ type: Object, attribute: false })\n  captionsData: Caption | null = null;\n\n  /**\n   * ID of a <script> element containing JSON captions data.\n   * The script's textContent should be valid JSON conforming to the Caption interface.\n   */\n  @property({ type: String, attribute: \"captions-script\", reflect: true })\n  captionsScript = \"\";\n\n  activeWordContainers = this.getElementsByTagName(\"ef-captions-active-word\");\n  segmentContainers = this.getElementsByTagName(\"ef-captions-segment\");\n  beforeActiveWordContainers = this.getElementsByTagName(\n    \"ef-captions-before-active-word\",\n  );\n  afterActiveWordContainers = this.getElementsByTagName(\n    \"ef-captions-after-active-word\",\n  );\n\n  // Cache for intrinsicDurationMs to avoid expensive O(n) recalculation every frame\n  #cachedIntrinsicDurationMs: number | undefined | null = null; // null = not computed, undefined = no duration\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  transcriptionsPath() {\n    if (!this.targetElement) {\n      return null;\n    }\n    const fileId = this.targetElement.fileId ?? this.targetElement.assetId;\n    if (fileId) {\n      return `${this.apiHost}/api/v1/files/${fileId}/transcription`;\n    }\n    return null;\n  }\n\n  captionsPath() {\n    if (!this.targetElement) {\n      return null;\n    }\n    const fileId = this.targetElement.fileId ?? this.targetElement.assetId;\n    if (fileId) {\n      return `${this.apiHost}/api/v1/files/${fileId}`;\n    }\n    const targetSrc = this.targetElement.src;\n    // Normalize the path: remove leading slash and any double slashes\n    let normalizedSrc = targetSrc.startsWith(\"/\")\n      ? targetSrc.slice(1)\n      : targetSrc;\n    normalizedSrc = normalizedSrc.replace(/^\\/+/, \"\");\n    // Use production API format for local files\n    return `/api/v1/assets/local/captions?src=${encodeURIComponent(normalizedSrc)}`;\n  }\n\n  // ============================================================================\n  // Captions Data Loading - async methods instead of Tasks\n  // ============================================================================\n\n  #captionsDataLoaded = false;\n  #captionsDataPromise: Promise<Caption | null> | null = null;\n  #captionsDataValue: Caption | null = null;\n  #transcriptionData: GetISOBMFFFileTranscriptionResult | null = null;\n\n  /**\n   * AsyncValue wrapper for backwards compatibility\n   */\n  unifiedCaptionsDataTask = new AsyncValue<Caption | null>();\n\n  override shouldAutoReady(): boolean {\n    return false;\n  }\n\n  /**\n   * Load captions data from all possible sources\n   */\n  async loadCaptionsData(signal?: AbortSignal): Promise<Caption | null> {\n    // Return cached if already loaded\n    if (this.#captionsDataLoaded && this.#captionsDataValue) {\n      this.setContentReadyState(\"ready\");\n      return this.#captionsDataValue;\n    }\n\n    // Return in-flight promise\n    if (this.#captionsDataPromise) {\n      return this.#captionsDataPromise;\n    }\n\n    this.unifiedCaptionsDataTask.startPending();\n    this.setContentReadyState(\"loading\");\n    this.#captionsDataPromise = this.#doLoadCaptionsData(signal);\n\n    try {\n      this.#captionsDataValue = await this.#captionsDataPromise;\n      this.#captionsDataLoaded = true;\n      if (this.#captionsDataValue) {\n        this.unifiedCaptionsDataTask.setValue(this.#captionsDataValue);\n      }\n      this.setContentReadyState(\"ready\");\n      return this.#captionsDataValue;\n    } catch (error) {\n      if (error instanceof DOMException && error.name === \"AbortError\") {\n        throw error;\n      }\n      console.error(\"Failed to load captions data:\", error);\n      this.setContentReadyState(\"error\");\n      return null;\n    } finally {\n      this.#captionsDataPromise = null;\n    }\n  }\n\n  async #doLoadCaptionsData(signal?: AbortSignal): Promise<Caption | null> {\n    // Priority 1: Direct captionsData property\n    if (this.captionsData) {\n      return this.captionsData;\n    }\n\n    // Priority 2: Script element reference\n    if (this.captionsScript) {\n      const scriptElement = this.#findElementById(this.captionsScript);\n      if (scriptElement?.textContent) {\n        try {\n          return JSON.parse(scriptElement.textContent) as Caption;\n        } catch (error) {\n          console.error(\n            `Failed to parse captions from script #${this.captionsScript}:`,\n            error,\n          );\n        }\n      }\n    }\n\n    // Priority 3: External captions file\n    if (this.captionsSrc) {\n      try {\n        const response = await this.fetch(this.captionsSrc, { signal });\n        return (await response.json()) as Caption;\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          throw error;\n        }\n        console.error(\n          `Failed to load captions from ${this.captionsSrc}:`,\n          error,\n        );\n      }\n    }\n\n    // Priority 4: Transcription from target element\n    if (this.targetElement && !this.hasCustomCaptionsData) {\n      const transcriptionPath = this.transcriptionsPath();\n      if (transcriptionPath) {\n        try {\n          const response = await this.fetch(transcriptionPath, { signal });\n          this.#transcriptionData =\n            (await response.json()) as GetISOBMFFFileTranscriptionResult;\n          signal?.throwIfAborted();\n\n          // Load fragment for current time\n          if (this.#transcriptionData) {\n            return this.#loadTranscriptionFragment(signal);\n          }\n        } catch (error) {\n          if (error instanceof DOMException && error.name === \"AbortError\") {\n            throw error;\n          }\n          // Transcription not available - not an error\n        }\n      }\n    }\n\n    return null;\n  }\n\n  async #loadTranscriptionFragment(\n    signal?: AbortSignal,\n  ): Promise<Caption | null> {\n    if (!this.#transcriptionData) return null;\n\n    const fragmentIndex = Math.floor(\n      this.ownCurrentTimeMs / this.#transcriptionData.work_slice_ms,\n    );\n    const fragmentPath = `${this.apiHost}/api/v1/transcriptions/${this.#transcriptionData.id}/fragments/${fragmentIndex}`;\n\n    try {\n      const response = await this.fetch(fragmentPath, { signal });\n      return (await response.json()) as Caption;\n    } catch (error) {\n      if (error instanceof DOMException && error.name === \"AbortError\") {\n        throw error;\n      }\n      console.error(\"Failed to load transcription fragment:\", error);\n      return null;\n    }\n  }\n\n  // ============================================================================\n  // FrameRenderable Implementation\n  // ============================================================================\n\n  /**\n   * Query readiness state for a given time.\n   * @implements FrameRenderable\n   */\n  getFrameState(_timeMs: number): FrameState {\n    // Check if captions data is loaded\n    const hasData =\n      this.#captionsDataLoaded && this.#captionsDataValue !== null;\n\n    return {\n      needsPreparation: !hasData,\n      isReady: hasData,\n      priority: PRIORITY_CAPTIONS,\n    };\n  }\n\n  /**\n   * Async preparation - waits for captions data to load.\n   * @implements FrameRenderable\n   */\n  async prepareFrame(_timeMs: number, signal: AbortSignal): Promise<void> {\n    await this.loadCaptionsData(signal);\n    signal.throwIfAborted();\n  }\n\n  /**\n   * Synchronous render - updates caption text containers.\n   * Sets textContent directly on child elements (light DOM).\n   * @implements FrameRenderable\n   */\n  renderFrame(_timeMs: number): void {\n    // Update text containers by setting properties\n    // Child elements update their textContent directly (light DOM)\n    this.updateTextContainers();\n  }\n\n  // ============================================================================\n  // End FrameRenderable Implementation\n  // ============================================================================\n\n  #rootTimegroupUpdateController?: ReactiveController;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // Start loading captions data\n    this.loadCaptionsData().catch(() => {});\n\n    // Try to get target element safely\n    const target = this.targetSelector\n      ? this.#findElementById(this.targetSelector)\n      : null;\n    if (target && (target instanceof EFAudio || target instanceof EFVideo)) {\n      new CrossUpdateController(target, this);\n    }\n    // For standalone captions with custom data, ensure proper timeline sync\n    else if (this.hasCustomCaptionsData && this.rootTimegroup) {\n      new CrossUpdateController(this.rootTimegroup, this);\n    }\n\n    // Ensure captions update when root timegroup's currentTimeMs changes\n    if (this.rootTimegroup) {\n      this.#rootTimegroupUpdateController = {\n        hostUpdated: () => {\n          Promise.resolve().then(() => {\n            this.updateTextContainers();\n          });\n        },\n        hostDisconnected: () => {\n          this.#rootTimegroupUpdateController = undefined;\n        },\n      };\n      this.rootTimegroup.addController(this.#rootTimegroupUpdateController);\n    }\n\n    // Prevent display:none from being set on the parent caption element.\n    // IMPORTANT: This only applies to the parent <ef-captions> element, NOT to\n    // caption child elements (<ef-captions-segment>, <ef-captions-active-word>, etc.).\n    // Child elements MUST respect display:none for proper temporal visibility\n    // in video rendering. Video export relies on display:none to hide elements\n    // outside their time range.\n    const observer = new MutationObserver(() => {\n      if (this.style.display === \"none\") {\n        this.style.removeProperty(\"display\");\n        this.style.opacity = \"0\";\n        this.style.pointerEvents = \"none\";\n      } else if (!this.style.display || this.style.display === \"\") {\n        this.style.removeProperty(\"opacity\");\n        this.style.removeProperty(\"pointer-events\");\n      }\n    });\n    observer.observe(this, { attributes: true, attributeFilter: [\"style\"] });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.#rootTimegroupUpdateController && this.rootTimegroup) {\n      this.rootTimegroup.removeController(this.#rootTimegroupUpdateController);\n      this.#rootTimegroupUpdateController = undefined;\n    }\n  }\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    // Set up root timegroup controller if rootTimegroup is now available\n    if (this.rootTimegroup && !this.#rootTimegroupUpdateController) {\n      this.#rootTimegroupUpdateController = {\n        hostUpdated: () => {\n          Promise.resolve().then(() => {\n            this.updateTextContainers();\n          });\n        },\n        hostDisconnected: () => {\n          this.#rootTimegroupUpdateController = undefined;\n        },\n      };\n      this.rootTimegroup.addController(this.#rootTimegroupUpdateController);\n    }\n\n    // Clean up controller if rootTimegroup changed\n    if (\n      changedProperties.has(\"rootTimegroup\") &&\n      this.#rootTimegroupUpdateController\n    ) {\n      const oldRootTimegroup = changedProperties.get(\"rootTimegroup\") as\n        | EFTimegroup\n        | undefined;\n      if (oldRootTimegroup && oldRootTimegroup !== this.rootTimegroup) {\n        oldRootTimegroup.removeController(this.#rootTimegroupUpdateController);\n        this.#rootTimegroupUpdateController = undefined;\n      }\n    }\n\n    this.updateTextContainers();\n\n    // Force duration recalculation when custom captions data changes\n    if (\n      changedProperties.has(\"captionsData\") ||\n      changedProperties.has(\"captionsSrc\") ||\n      changedProperties.has(\"captionsScript\")\n    ) {\n      this.emitContentChange(\"source\");\n      this.#cachedIntrinsicDurationMs = null;\n      this.#captionsDataLoaded = false;\n      this.#captionsDataValue = null;\n      this.loadCaptionsData().catch(() => {});\n\n      this.requestUpdate(\"intrinsicDurationMs\");\n\n      flushSequenceDurationCache();\n      flushStartTimeMsCache();\n\n      if (this.parentTimegroup) {\n        this.parentTimegroup.requestUpdate(\"durationMs\");\n        this.parentTimegroup.requestUpdate(\"currentTime\");\n      }\n    }\n\n    // Update captions when timeline position changes\n    if (changedProperties.has(\"ownCurrentTimeMs\")) {\n      this.updateTextContainers();\n    }\n  }\n\n  updateTextContainers() {\n    const captionsData = this.#captionsDataValue;\n    if (!captionsData) {\n      return;\n    }\n\n    // For captions with custom data, try to use the video's source time\n    let currentTimeMs = this.ownCurrentTimeMs;\n    if (this.hasCustomCaptionsData && this.parentTimegroup) {\n      const videoElement = Array.from(this.parentTimegroup.children).find(\n        (child): child is EFVideo => child instanceof EFVideo,\n      );\n      if (videoElement) {\n        const sourceInMs = videoElement.sourceInMs ?? 0;\n        currentTimeMs = videoElement.currentSourceTimeMs - sourceInMs;\n        currentTimeMs = Math.max(0, Math.min(currentTimeMs, this.durationMs));\n      }\n    }\n\n    const currentTimeSec = currentTimeMs / 1000;\n\n    // Find the current word from word_segments\n    const currentWord = captionsData.word_segments.find(\n      (word) => currentTimeSec >= word.start && currentTimeSec < word.end,\n    );\n\n    // Find the current segment\n    const currentSegment = captionsData.segments.find(\n      (segment) =>\n        currentTimeSec >= segment.start && currentTimeSec < segment.end,\n    );\n\n    for (const wordContainer of this.activeWordContainers) {\n      if (currentWord) {\n        const wordIndex = captionsData.word_segments.findIndex(\n          (w) =>\n            w.start === currentWord.start &&\n            w.end === currentWord.end &&\n            w.text === currentWord.text,\n        );\n        wordContainer.wordIndex = wordIndex >= 0 ? wordIndex : 0;\n        wordContainer.wordText = currentWord.text; // Sets textContent directly\n      } else {\n        wordContainer.wordText = \"\"; // Hides element\n      }\n    }\n\n    for (const segmentContainer of this.segmentContainers) {\n      if (currentSegment) {\n        segmentContainer.segmentText = currentSegment.text; // Sets textContent directly\n      } else {\n        segmentContainer.segmentText = \"\"; // Hides element\n      }\n    }\n\n    // Process context for both word and segment cases\n    if (currentWord && currentSegment) {\n      const segmentWords = captionsData.word_segments.filter(\n        (word) =>\n          word.start >= currentSegment.start && word.end <= currentSegment.end,\n      );\n\n      const currentWordIndex = segmentWords.findIndex(\n        (word) =>\n          word.start === currentWord.start && word.end === currentWord.end,\n      );\n\n      if (currentWordIndex !== -1) {\n        const beforeWords = segmentWords\n          .slice(0, currentWordIndex)\n          .map((w) => w.text.trim())\n          .join(\" \");\n\n        const afterWords = segmentWords\n          .slice(currentWordIndex + 1)\n          .map((w) => w.text.trim())\n          .join(\" \");\n\n        for (const container of this.beforeActiveWordContainers) {\n          container.segmentText = beforeWords; // Sets textContent directly\n        }\n\n        for (const container of this.afterActiveWordContainers) {\n          container.segmentText = afterWords; // Sets textContent directly\n        }\n      }\n    } else if (currentSegment) {\n      const segmentWords = captionsData.word_segments.filter(\n        (word) =>\n          word.start >= currentSegment.start && word.end <= currentSegment.end,\n      );\n\n      const firstWord = segmentWords[0];\n      const isBeforeFirstWord = firstWord && currentTimeSec < firstWord.start;\n\n      if (isBeforeFirstWord) {\n        const allWords = segmentWords.map((w) => w.text.trim()).join(\" \");\n\n        for (const container of this.beforeActiveWordContainers) {\n          container.segmentText = \"\"; // Hides element\n        }\n\n        for (const container of this.afterActiveWordContainers) {\n          container.segmentText = allWords; // Sets textContent directly\n        }\n      } else {\n        const allCompletedWords = segmentWords\n          .map((w) => w.text.trim())\n          .join(\" \");\n\n        for (const container of this.beforeActiveWordContainers) {\n          container.segmentText = allCompletedWords; // Sets textContent directly\n        }\n\n        for (const container of this.afterActiveWordContainers) {\n          container.segmentText = \"\"; // Hides element\n        }\n      }\n    } else {\n      for (const container of this.beforeActiveWordContainers) {\n        container.segmentText = \"\"; // Hides element\n      }\n\n      for (const container of this.afterActiveWordContainers) {\n        container.segmentText = \"\"; // Hides element\n      }\n    }\n  }\n\n  get targetElement() {\n    const target = this.targetSelector\n      ? this.#findElementById(this.targetSelector)\n      : null;\n    if (target instanceof EFAudio || target instanceof EFVideo) {\n      return target;\n    }\n    if (this.hasCustomCaptionsData) {\n      return null;\n    }\n    return null;\n  }\n\n  get hasCustomCaptionsData(): boolean {\n    return !!(this.captionsData || this.captionsSrc || this.captionsScript);\n  }\n\n  /**\n   * Find element by ID, searching within clone scope first to avoid cross-boundary references.\n   * @private\n   */\n  #findElementById(id: string): Element | null {\n    // Search within nearest timegroup or configuration container first\n    const container = this.closest(\"ef-timegroup, ef-configuration\");\n    if (container) {\n      const result = container.querySelector(`#${CSS.escape(id)}`);\n      if (result) return result;\n    }\n\n    // Fall back to document-wide search\n    return document.getElementById(id);\n  }\n\n  get intrinsicDurationMs(): number | undefined {\n    if (this.#cachedIntrinsicDurationMs !== null) {\n      return this.#cachedIntrinsicDurationMs;\n    }\n\n    let captionsData: Caption | null = null;\n\n    if (this.captionsData) {\n      captionsData = this.captionsData;\n    } else if (this.captionsScript) {\n      const scriptElement = this.#findElementById(this.captionsScript);\n      if (scriptElement?.textContent) {\n        try {\n          captionsData = JSON.parse(scriptElement.textContent) as Caption;\n        } catch {\n          // Invalid JSON\n        }\n      }\n    } else if (this.#captionsDataValue) {\n      captionsData = this.#captionsDataValue;\n    }\n\n    if (!captionsData) {\n      if (!this.captionsData && !this.captionsScript && !this.captionsSrc) {\n        this.#cachedIntrinsicDurationMs = undefined;\n      }\n      return undefined;\n    }\n\n    let result: number;\n    if (\n      captionsData.segments.length === 0 &&\n      captionsData.word_segments.length === 0\n    ) {\n      result = 0;\n    } else {\n      const maxSegmentEnd =\n        captionsData.segments.length > 0\n          ? captionsData.segments.reduce(\n              (max, s) => (s.end > max ? s.end : max),\n              0,\n            )\n          : 0;\n      const maxWordEnd =\n        captionsData.word_segments.length > 0\n          ? captionsData.word_segments.reduce(\n              (max, w) => (w.end > max ? w.end : max),\n              0,\n            )\n          : 0;\n\n      result = Math.max(maxSegmentEnd, maxWordEnd) * 1000;\n    }\n\n    this.#cachedIntrinsicDurationMs = result;\n    return result;\n  }\n\n  get hasOwnDuration(): boolean {\n    return !!(\n      this.captionsData ||\n      this.captionsScript ||\n      this.#captionsDataValue\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-captions\": EFCaptions;\n    \"ef-captions-active-word\": EFCaptionsActiveWord;\n    \"ef-captions-segment\": EFCaptionsSegment;\n    \"ef-captions-before-active-word\": EFCaptionsBeforeActiveWord;\n    \"ef-captions-after-active-word\": EFCaptionsAfterActiveWord;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"EFCaptions.js","names":["EFCaptionsActiveWord","#wordText","#wordIndex","EFCaptionsSegment","#segmentText","EFCaptionsBeforeActiveWord","EFCaptionsAfterActiveWord","EFCaptions","#captionsDataLoaded","#captionsDataValue","#captionsDataPromise","#doLoadCaptionsData","#findElementById","#transcriptionData","#loadTranscriptionFragment","#rootTimegroupUpdateController","#cachedIntrinsicDurationMs","captionsData: Caption | null","result: number"],"sources":["../../src/elements/EFCaptions.ts"],"sourcesContent":["import { css, html, LitElement, type PropertyValueMap } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport type { ReactiveController } from \"lit\";\nimport type { GetISOBMFFFileTranscriptionResult } from \"../../../api/src/index.js\";\nimport {\n  type FrameRenderable,\n  type FrameState,\n  PRIORITY_CAPTIONS,\n} from \"../preview/FrameController.js\";\nimport { AsyncValue } from \"./EFMedia.js\";\nimport { CrossUpdateController } from \"./CrossUpdateController.js\";\nimport { EFAudio } from \"./EFAudio.js\";\nimport { EFSourceMixin } from \"./EFSourceMixin.js\";\nimport { EFTemporal, flushStartTimeMsCache } from \"./EFTemporal.js\";\nimport { flushSequenceDurationCache, EFTimegroup } from \"./EFTimegroup.js\";\nimport { EFVideo } from \"./EFVideo.js\";\nimport { FetchMixin } from \"./FetchMixin.js\";\n\nexport interface WordSegment {\n  text: string;\n  start: number;\n  end: number;\n}\n\nexport interface Segment {\n  start: number;\n  end: number;\n  text: string;\n}\n\nexport interface Caption {\n  segments: Segment[];\n  word_segments: WordSegment[];\n}\n\nconst stopWords = new Set([\"\", \".\", \"!\", \"?\", \",\"]);\n\n/**\n * Caption active word element - displays the currently spoken word.\n * Uses light DOM for simplicity - parent sets textContent directly.\n */\n@customElement(\"ef-captions-active-word\")\nexport class EFCaptionsActiveWord extends LitElement {\n  #wordText = \"\";\n  #wordIndex = 0;\n\n  set wordText(text: string) {\n    this.#wordText = text;\n    // Hide element if no content or only stop words\n    if (!text || stopWords.has(text)) {\n      this.hidden = true;\n      this.textContent = \"\";\n    } else {\n      this.hidden = false;\n      // Add trailing space to maintain consistent spacing with surrounding words\n      this.textContent = text + \" \";\n    }\n  }\n\n  get wordText(): string {\n    return this.#wordText;\n  }\n\n  set wordIndex(index: number) {\n    this.#wordIndex = index;\n    // Set deterministic --ef-word-seed value based on word index\n    const seed = (index * 9007) % 233; // Prime numbers for better distribution\n    const seedValue = seed / 233; // Normalize to 0-1 range\n    this.style.setProperty(\"--ef-word-seed\", seedValue.toString());\n  }\n\n  get wordIndex(): number {\n    return this.#wordIndex;\n  }\n}\n\n/**\n * Caption segment element - displays a full caption segment.\n * Uses light DOM for simplicity - parent sets textContent directly.\n */\n@customElement(\"ef-captions-segment\")\nexport class EFCaptionsSegment extends LitElement {\n  #segmentText = \"\";\n\n  set segmentText(text: string) {\n    this.#segmentText = text;\n    // Hide element if no content or only stop words\n    if (!text || stopWords.has(text)) {\n      this.hidden = true;\n      this.textContent = \"\";\n    } else {\n      this.hidden = false;\n      this.textContent = text;\n    }\n  }\n\n  get segmentText(): string {\n    return this.#segmentText;\n  }\n}\n\n/**\n * Caption before-active-word element - displays words before the current word.\n * Uses light DOM for simplicity - parent sets textContent directly.\n */\n@customElement(\"ef-captions-before-active-word\")\nexport class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {\n  set segmentText(text: string) {\n    // Check if there's an active word by looking for sibling active word element\n    const activeWord = this.closest(\"ef-captions\")?.querySelector(\n      \"ef-captions-active-word\",\n    ) as EFCaptionsActiveWord;\n    const hasActiveWord = activeWord?.wordText;\n\n    // Add trailing space if there's an active word coming after us\n    const finalText = text && hasActiveWord ? text + \" \" : text;\n\n    // Hide element if no content or only stop words\n    if (!finalText || stopWords.has(finalText)) {\n      this.hidden = true;\n      this.textContent = \"\";\n    } else {\n      this.hidden = false;\n      this.textContent = finalText;\n    }\n  }\n}\n\n/**\n * Caption after-active-word element - displays words after the current word.\n * Uses light DOM for simplicity - parent sets textContent directly.\n */\n@customElement(\"ef-captions-after-active-word\")\nexport class EFCaptionsAfterActiveWord extends EFCaptionsSegment {\n  set segmentText(text: string) {\n    // No leading space - active word will add trailing space\n    const finalText = text;\n\n    // Hide element if no content or only stop words\n    if (!finalText || stopWords.has(finalText)) {\n      this.hidden = true;\n      this.textContent = \"\";\n    } else {\n      this.hidden = false;\n      this.textContent = finalText;\n    }\n  }\n}\n\n@customElement(\"ef-captions\")\nexport class EFCaptions\n  extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {\n    assetType: \"caption_files\",\n  })\n  implements FrameRenderable\n{\n  static styles = [\n    css`\n      :host {\n        display: block;\n        white-space: normal;\n        line-height: 1;\n        gap: 0;\n      }\n      ::slotted(*) {\n        display: inline;\n        margin: 0;\n        padding: 0;\n      }\n    `,\n  ];\n\n  @property({ type: String, attribute: \"target\", reflect: true })\n  targetSelector = \"\";\n\n  set target(value: string) {\n    this.targetSelector = value;\n  }\n\n  @property({ attribute: \"word-style\" })\n  wordStyle = \"\";\n\n  /**\n   * URL or path to a JSON file containing custom captions data.\n   * The JSON should conform to the Caption interface with 'segments' and 'word_segments' arrays.\n   */\n  @property({ type: String, attribute: \"captions-src\", reflect: true })\n  captionsSrc = \"\";\n\n  /**\n   * Direct captions data object. Takes priority over captions-src and captions-script.\n   * Should conform to the Caption interface with 'segments' and 'word_segments' arrays.\n   */\n  @property({ type: Object, attribute: false })\n  captionsData: Caption | null = null;\n\n  /**\n   * ID of a <script> element containing JSON captions data.\n   * The script's textContent should be valid JSON conforming to the Caption interface.\n   */\n  @property({ type: String, attribute: \"captions-script\", reflect: true })\n  captionsScript = \"\";\n\n  activeWordContainers = this.getElementsByTagName(\"ef-captions-active-word\");\n  segmentContainers = this.getElementsByTagName(\"ef-captions-segment\");\n  beforeActiveWordContainers = this.getElementsByTagName(\n    \"ef-captions-before-active-word\",\n  );\n  afterActiveWordContainers = this.getElementsByTagName(\n    \"ef-captions-after-active-word\",\n  );\n\n  // Cache for intrinsicDurationMs to avoid expensive O(n) recalculation every frame\n  #cachedIntrinsicDurationMs: number | undefined | null = null; // null = not computed, undefined = no duration\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  transcriptionsPath() {\n    if (!this.targetElement) {\n      return null;\n    }\n    const fileId = this.targetElement.fileId ?? this.targetElement.assetId;\n    if (fileId) {\n      return `${this.apiHost}/api/v1/files/${fileId}/transcription`;\n    }\n    return null;\n  }\n\n  captionsPath() {\n    if (!this.targetElement) {\n      return null;\n    }\n    const fileId = this.targetElement.fileId ?? this.targetElement.assetId;\n    if (fileId) {\n      return `${this.apiHost}/api/v1/files/${fileId}`;\n    }\n    const targetSrc = this.targetElement.src;\n    // Normalize the path: remove leading slash and any double slashes\n    let normalizedSrc = targetSrc.startsWith(\"/\")\n      ? targetSrc.slice(1)\n      : targetSrc;\n    normalizedSrc = normalizedSrc.replace(/^\\/+/, \"\");\n    // Use production API format for local files\n    return `/api/v1/assets/captions?src=${encodeURIComponent(normalizedSrc)}`;\n  }\n\n  // ============================================================================\n  // Captions Data Loading - async methods instead of Tasks\n  // ============================================================================\n\n  #captionsDataLoaded = false;\n  #captionsDataPromise: Promise<Caption | null> | null = null;\n  #captionsDataValue: Caption | null = null;\n  #transcriptionData: GetISOBMFFFileTranscriptionResult | null = null;\n\n  /**\n   * AsyncValue wrapper for backwards compatibility\n   */\n  unifiedCaptionsDataTask = new AsyncValue<Caption | null>();\n\n  override shouldAutoReady(): boolean {\n    return false;\n  }\n\n  /**\n   * Load captions data from all possible sources\n   */\n  async loadCaptionsData(signal?: AbortSignal): Promise<Caption | null> {\n    // Return cached if already loaded\n    if (this.#captionsDataLoaded && this.#captionsDataValue) {\n      this.setContentReadyState(\"ready\");\n      return this.#captionsDataValue;\n    }\n\n    // Return in-flight promise\n    if (this.#captionsDataPromise) {\n      return this.#captionsDataPromise;\n    }\n\n    this.unifiedCaptionsDataTask.startPending();\n    this.setContentReadyState(\"loading\");\n    this.#captionsDataPromise = this.#doLoadCaptionsData(signal);\n\n    try {\n      this.#captionsDataValue = await this.#captionsDataPromise;\n      this.#captionsDataLoaded = true;\n      if (this.#captionsDataValue) {\n        this.unifiedCaptionsDataTask.setValue(this.#captionsDataValue);\n      }\n      this.setContentReadyState(\"ready\");\n      return this.#captionsDataValue;\n    } catch (error) {\n      if (error instanceof DOMException && error.name === \"AbortError\") {\n        throw error;\n      }\n      console.error(\"Failed to load captions data:\", error);\n      this.setContentReadyState(\"error\");\n      return null;\n    } finally {\n      this.#captionsDataPromise = null;\n    }\n  }\n\n  async #doLoadCaptionsData(signal?: AbortSignal): Promise<Caption | null> {\n    // Priority 1: Direct captionsData property\n    if (this.captionsData) {\n      return this.captionsData;\n    }\n\n    // Priority 2: Script element reference\n    if (this.captionsScript) {\n      const scriptElement = this.#findElementById(this.captionsScript);\n      if (scriptElement?.textContent) {\n        try {\n          return JSON.parse(scriptElement.textContent) as Caption;\n        } catch (error) {\n          console.error(\n            `Failed to parse captions from script #${this.captionsScript}:`,\n            error,\n          );\n        }\n      }\n    }\n\n    // Priority 3: External captions file\n    if (this.captionsSrc) {\n      try {\n        const response = await this.fetch(this.captionsSrc, { signal });\n        return (await response.json()) as Caption;\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          throw error;\n        }\n        console.error(\n          `Failed to load captions from ${this.captionsSrc}:`,\n          error,\n        );\n      }\n    }\n\n    // Priority 4: Transcription from target element\n    if (this.targetElement && !this.hasCustomCaptionsData) {\n      const transcriptionPath = this.transcriptionsPath();\n      if (transcriptionPath) {\n        try {\n          const response = await this.fetch(transcriptionPath, { signal });\n          this.#transcriptionData =\n            (await response.json()) as GetISOBMFFFileTranscriptionResult;\n          signal?.throwIfAborted();\n\n          // Load fragment for current time\n          if (this.#transcriptionData) {\n            return this.#loadTranscriptionFragment(signal);\n          }\n        } catch (error) {\n          if (error instanceof DOMException && error.name === \"AbortError\") {\n            throw error;\n          }\n          // Transcription not available - not an error\n        }\n      }\n    }\n\n    return null;\n  }\n\n  async #loadTranscriptionFragment(\n    signal?: AbortSignal,\n  ): Promise<Caption | null> {\n    if (!this.#transcriptionData) return null;\n\n    const fragmentIndex = Math.floor(\n      this.ownCurrentTimeMs / this.#transcriptionData.work_slice_ms,\n    );\n    const fragmentPath = `${this.apiHost}/api/v1/transcriptions/${this.#transcriptionData.id}/fragments/${fragmentIndex}`;\n\n    try {\n      const response = await this.fetch(fragmentPath, { signal });\n      return (await response.json()) as Caption;\n    } catch (error) {\n      if (error instanceof DOMException && error.name === \"AbortError\") {\n        throw error;\n      }\n      console.error(\"Failed to load transcription fragment:\", error);\n      return null;\n    }\n  }\n\n  // ============================================================================\n  // FrameRenderable Implementation\n  // ============================================================================\n\n  /**\n   * Query readiness state for a given time.\n   * @implements FrameRenderable\n   */\n  getFrameState(_timeMs: number): FrameState {\n    // Check if captions data is loaded\n    const hasData =\n      this.#captionsDataLoaded && this.#captionsDataValue !== null;\n\n    return {\n      needsPreparation: !hasData,\n      isReady: hasData,\n      priority: PRIORITY_CAPTIONS,\n    };\n  }\n\n  /**\n   * Async preparation - waits for captions data to load.\n   * @implements FrameRenderable\n   */\n  async prepareFrame(_timeMs: number, signal: AbortSignal): Promise<void> {\n    await this.loadCaptionsData(signal);\n    signal.throwIfAborted();\n  }\n\n  /**\n   * Synchronous render - updates caption text containers.\n   * Sets textContent directly on child elements (light DOM).\n   * @implements FrameRenderable\n   */\n  renderFrame(_timeMs: number): void {\n    // Update text containers by setting properties\n    // Child elements update their textContent directly (light DOM)\n    this.updateTextContainers();\n  }\n\n  // ============================================================================\n  // End FrameRenderable Implementation\n  // ============================================================================\n\n  #rootTimegroupUpdateController?: ReactiveController;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // Start loading captions data\n    this.loadCaptionsData().catch(() => {});\n\n    // Try to get target element safely\n    const target = this.targetSelector\n      ? this.#findElementById(this.targetSelector)\n      : null;\n    if (target && (target instanceof EFAudio || target instanceof EFVideo)) {\n      new CrossUpdateController(target, this);\n    }\n    // For standalone captions with custom data, ensure proper timeline sync\n    else if (this.hasCustomCaptionsData && this.rootTimegroup) {\n      new CrossUpdateController(this.rootTimegroup, this);\n    }\n\n    // Ensure captions update when root timegroup's currentTimeMs changes\n    if (this.rootTimegroup) {\n      this.#rootTimegroupUpdateController = {\n        hostUpdated: () => {\n          Promise.resolve().then(() => {\n            this.updateTextContainers();\n          });\n        },\n        hostDisconnected: () => {\n          this.#rootTimegroupUpdateController = undefined;\n        },\n      };\n      this.rootTimegroup.addController(this.#rootTimegroupUpdateController);\n    }\n\n    // Prevent display:none from being set on the parent caption element.\n    // IMPORTANT: This only applies to the parent <ef-captions> element, NOT to\n    // caption child elements (<ef-captions-segment>, <ef-captions-active-word>, etc.).\n    // Child elements MUST respect display:none for proper temporal visibility\n    // in video rendering. Video export relies on display:none to hide elements\n    // outside their time range.\n    const observer = new MutationObserver(() => {\n      if (this.style.display === \"none\") {\n        this.style.removeProperty(\"display\");\n        this.style.opacity = \"0\";\n        this.style.pointerEvents = \"none\";\n      } else if (!this.style.display || this.style.display === \"\") {\n        this.style.removeProperty(\"opacity\");\n        this.style.removeProperty(\"pointer-events\");\n      }\n    });\n    observer.observe(this, { attributes: true, attributeFilter: [\"style\"] });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.#rootTimegroupUpdateController && this.rootTimegroup) {\n      this.rootTimegroup.removeController(this.#rootTimegroupUpdateController);\n      this.#rootTimegroupUpdateController = undefined;\n    }\n  }\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    // Set up root timegroup controller if rootTimegroup is now available\n    if (this.rootTimegroup && !this.#rootTimegroupUpdateController) {\n      this.#rootTimegroupUpdateController = {\n        hostUpdated: () => {\n          Promise.resolve().then(() => {\n            this.updateTextContainers();\n          });\n        },\n        hostDisconnected: () => {\n          this.#rootTimegroupUpdateController = undefined;\n        },\n      };\n      this.rootTimegroup.addController(this.#rootTimegroupUpdateController);\n    }\n\n    // Clean up controller if rootTimegroup changed\n    if (\n      changedProperties.has(\"rootTimegroup\") &&\n      this.#rootTimegroupUpdateController\n    ) {\n      const oldRootTimegroup = changedProperties.get(\"rootTimegroup\") as\n        | EFTimegroup\n        | undefined;\n      if (oldRootTimegroup && oldRootTimegroup !== this.rootTimegroup) {\n        oldRootTimegroup.removeController(this.#rootTimegroupUpdateController);\n        this.#rootTimegroupUpdateController = undefined;\n      }\n    }\n\n    this.updateTextContainers();\n\n    // Force duration recalculation when custom captions data changes\n    if (\n      changedProperties.has(\"captionsData\") ||\n      changedProperties.has(\"captionsSrc\") ||\n      changedProperties.has(\"captionsScript\")\n    ) {\n      this.emitContentChange(\"source\");\n      this.#cachedIntrinsicDurationMs = null;\n      this.#captionsDataLoaded = false;\n      this.#captionsDataValue = null;\n      this.loadCaptionsData().catch(() => {});\n\n      this.requestUpdate(\"intrinsicDurationMs\");\n\n      flushSequenceDurationCache();\n      flushStartTimeMsCache();\n\n      if (this.parentTimegroup) {\n        this.parentTimegroup.requestUpdate(\"durationMs\");\n        this.parentTimegroup.requestUpdate(\"currentTime\");\n      }\n    }\n\n    // Update captions when timeline position changes\n    if (changedProperties.has(\"ownCurrentTimeMs\")) {\n      this.updateTextContainers();\n    }\n  }\n\n  updateTextContainers() {\n    const captionsData = this.#captionsDataValue;\n    if (!captionsData) {\n      return;\n    }\n\n    // For captions with custom data, try to use the video's source time\n    let currentTimeMs = this.ownCurrentTimeMs;\n    if (this.hasCustomCaptionsData && this.parentTimegroup) {\n      const videoElement = Array.from(this.parentTimegroup.children).find(\n        (child): child is EFVideo => child instanceof EFVideo,\n      );\n      if (videoElement) {\n        const sourceInMs = videoElement.sourceInMs ?? 0;\n        currentTimeMs = videoElement.currentSourceTimeMs - sourceInMs;\n        currentTimeMs = Math.max(0, Math.min(currentTimeMs, this.durationMs));\n      }\n    }\n\n    const currentTimeSec = currentTimeMs / 1000;\n\n    // Find the current word from word_segments\n    const currentWord = captionsData.word_segments.find(\n      (word) => currentTimeSec >= word.start && currentTimeSec < word.end,\n    );\n\n    // Find the current segment\n    const currentSegment = captionsData.segments.find(\n      (segment) =>\n        currentTimeSec >= segment.start && currentTimeSec < segment.end,\n    );\n\n    for (const wordContainer of this.activeWordContainers) {\n      if (currentWord) {\n        const wordIndex = captionsData.word_segments.findIndex(\n          (w) =>\n            w.start === currentWord.start &&\n            w.end === currentWord.end &&\n            w.text === currentWord.text,\n        );\n        wordContainer.wordIndex = wordIndex >= 0 ? wordIndex : 0;\n        wordContainer.wordText = currentWord.text; // Sets textContent directly\n      } else {\n        wordContainer.wordText = \"\"; // Hides element\n      }\n    }\n\n    for (const segmentContainer of this.segmentContainers) {\n      if (currentSegment) {\n        segmentContainer.segmentText = currentSegment.text; // Sets textContent directly\n      } else {\n        segmentContainer.segmentText = \"\"; // Hides element\n      }\n    }\n\n    // Process context for both word and segment cases\n    if (currentWord && currentSegment) {\n      const segmentWords = captionsData.word_segments.filter(\n        (word) =>\n          word.start >= currentSegment.start && word.end <= currentSegment.end,\n      );\n\n      const currentWordIndex = segmentWords.findIndex(\n        (word) =>\n          word.start === currentWord.start && word.end === currentWord.end,\n      );\n\n      if (currentWordIndex !== -1) {\n        const beforeWords = segmentWords\n          .slice(0, currentWordIndex)\n          .map((w) => w.text.trim())\n          .join(\" \");\n\n        const afterWords = segmentWords\n          .slice(currentWordIndex + 1)\n          .map((w) => w.text.trim())\n          .join(\" \");\n\n        for (const container of this.beforeActiveWordContainers) {\n          container.segmentText = beforeWords; // Sets textContent directly\n        }\n\n        for (const container of this.afterActiveWordContainers) {\n          container.segmentText = afterWords; // Sets textContent directly\n        }\n      }\n    } else if (currentSegment) {\n      const segmentWords = captionsData.word_segments.filter(\n        (word) =>\n          word.start >= currentSegment.start && word.end <= currentSegment.end,\n      );\n\n      const firstWord = segmentWords[0];\n      const isBeforeFirstWord = firstWord && currentTimeSec < firstWord.start;\n\n      if (isBeforeFirstWord) {\n        const allWords = segmentWords.map((w) => w.text.trim()).join(\" \");\n\n        for (const container of this.beforeActiveWordContainers) {\n          container.segmentText = \"\"; // Hides element\n        }\n\n        for (const container of this.afterActiveWordContainers) {\n          container.segmentText = allWords; // Sets textContent directly\n        }\n      } else {\n        const allCompletedWords = segmentWords\n          .map((w) => w.text.trim())\n          .join(\" \");\n\n        for (const container of this.beforeActiveWordContainers) {\n          container.segmentText = allCompletedWords; // Sets textContent directly\n        }\n\n        for (const container of this.afterActiveWordContainers) {\n          container.segmentText = \"\"; // Hides element\n        }\n      }\n    } else {\n      for (const container of this.beforeActiveWordContainers) {\n        container.segmentText = \"\"; // Hides element\n      }\n\n      for (const container of this.afterActiveWordContainers) {\n        container.segmentText = \"\"; // Hides element\n      }\n    }\n  }\n\n  get targetElement() {\n    const target = this.targetSelector\n      ? this.#findElementById(this.targetSelector)\n      : null;\n    if (target instanceof EFAudio || target instanceof EFVideo) {\n      return target;\n    }\n    if (this.hasCustomCaptionsData) {\n      return null;\n    }\n    return null;\n  }\n\n  get hasCustomCaptionsData(): boolean {\n    return !!(this.captionsData || this.captionsSrc || this.captionsScript);\n  }\n\n  /**\n   * Find element by ID, searching within clone scope first to avoid cross-boundary references.\n   * @private\n   */\n  #findElementById(id: string): Element | null {\n    // Search within nearest timegroup or configuration container first\n    const container = this.closest(\"ef-timegroup, ef-configuration\");\n    if (container) {\n      const result = container.querySelector(`#${CSS.escape(id)}`);\n      if (result) return result;\n    }\n\n    // Fall back to document-wide search\n    return document.getElementById(id);\n  }\n\n  get intrinsicDurationMs(): number | undefined {\n    if (this.#cachedIntrinsicDurationMs !== null) {\n      return this.#cachedIntrinsicDurationMs;\n    }\n\n    let captionsData: Caption | null = null;\n\n    if (this.captionsData) {\n      captionsData = this.captionsData;\n    } else if (this.captionsScript) {\n      const scriptElement = this.#findElementById(this.captionsScript);\n      if (scriptElement?.textContent) {\n        try {\n          captionsData = JSON.parse(scriptElement.textContent) as Caption;\n        } catch {\n          // Invalid JSON\n        }\n      }\n    } else if (this.#captionsDataValue) {\n      captionsData = this.#captionsDataValue;\n    }\n\n    if (!captionsData) {\n      if (!this.captionsData && !this.captionsScript && !this.captionsSrc) {\n        this.#cachedIntrinsicDurationMs = undefined;\n      }\n      return undefined;\n    }\n\n    let result: number;\n    if (\n      captionsData.segments.length === 0 &&\n      captionsData.word_segments.length === 0\n    ) {\n      result = 0;\n    } else {\n      const maxSegmentEnd =\n        captionsData.segments.length > 0\n          ? captionsData.segments.reduce(\n              (max, s) => (s.end > max ? s.end : max),\n              0,\n            )\n          : 0;\n      const maxWordEnd =\n        captionsData.word_segments.length > 0\n          ? captionsData.word_segments.reduce(\n              (max, w) => (w.end > max ? w.end : max),\n              0,\n            )\n          : 0;\n\n      result = Math.max(maxSegmentEnd, maxWordEnd) * 1000;\n    }\n\n    this.#cachedIntrinsicDurationMs = result;\n    return result;\n  }\n\n  get hasOwnDuration(): boolean {\n    return !!(\n      this.captionsData ||\n      this.captionsScript ||\n      this.#captionsDataValue\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-captions\": EFCaptions;\n    \"ef-captions-active-word\": EFCaptionsActiveWord;\n    \"ef-captions-segment\": EFCaptionsSegment;\n    \"ef-captions-before-active-word\": EFCaptionsBeforeActiveWord;\n    \"ef-captions-after-active-word\": EFCaptionsAfterActiveWord;\n  }\n}\n"],"mappings":"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"}

package/dist/elements/EFImage.js

@@ -86,14 +86,13 @@ let EFImage = class EFImage$1 extends EFTemporal(EFSourceMixin(FetchMixin(LitEle
 	}
 	isDirectUrl(src) {
 		if (this.fileId) return false;
-		return src.startsWith("http://") || src.startsWith("https://") || src.startsWith("data:");
+		return src.startsWith("data:");
 	}
 	assetPath() {
 		if (this.fileId) return `${this.apiHost}/api/v1/files/${this.fileId}`;
 		if (this.isDirectUrl(this.src)) return this.src;
-		let normalizedSrc = this.src.startsWith("/") ? this.src.slice(1) : this.src;
-		normalizedSrc = normalizedSrc.replace(/^\/+/, "");
-		return `/api/v1/assets/local/image?src=${encodeURIComponent(normalizedSrc)}`;
+		const normalizedSrc = this.src.startsWith("/") ? this.src.replace(/^\/+/, "") : this.src;
+		return `/api/v1/assets/image?src=${encodeURIComponent(normalizedSrc)}`;
 	}
 	get hasOwnDuration() {
 		return this.hasExplicitDuration;

package/dist/elements/EFImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFImage.js","names":["EFImage","#renderVersion","#hasAlpha","#fileId","#imageLoaded","#lastLoadedPath","#imageLoadPromise","#waitForImageElement","#doLoadImage","#currentObjectUrl"],"sources":["../../src/elements/EFImage.ts"],"sourcesContent":["import { css, html, LitElement, type PropertyValueMap } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport {\n  type FrameRenderable,\n  type FrameState,\n  PRIORITY_IMAGE,\n} from \"../preview/FrameController.js\";\nimport { EFSourceMixin } from \"./EFSourceMixin.js\";\nimport { EFTemporal } from \"./EFTemporal.js\";\nimport { FetchMixin } from \"./FetchMixin.js\";\n\n@customElement(\"ef-image\")\nexport class EFImage\n  extends EFTemporal(\n    EFSourceMixin(FetchMixin(LitElement), {\n      assetType: \"image_files\",\n    }),\n  )\n  implements FrameRenderable\n{\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        object-fit: contain;\n        object-position: center;\n      }\n      canvas, img {\n        width: 100%;\n        height: 100%;\n        object-fit: inherit;\n        object-position: inherit;\n      }\n    `,\n  ];\n\n  static get observedAttributes() {\n    // biome-ignore lint/complexity/noThisInStatic: We need to access super\n    const parentAttributes = super.observedAttributes || [];\n    return [...parentAttributes, \"asset-id\"];\n  }\n\n  attributeChangedCallback(\n    name: string,\n    oldValue: string | null,\n    newValue: string | null,\n  ): void {\n    if (name === \"asset-id\") {\n      this.fileId = newValue;\n      return;\n    }\n    super.attributeChangedCallback(name, oldValue, newValue);\n  }\n\n  imageRef = createRef<HTMLImageElement>();\n  canvasRef = createRef<HTMLCanvasElement>();\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 src or fileId changes.\n   * @public\n   */\n  get renderVersion(): number {\n    return this.#renderVersion;\n  }\n\n  /**\n   * Whether the loaded image has an alpha channel.\n   * JPEG images don't have alpha, PNG/WebP may have alpha.\n   */\n  #hasAlpha = true; // Default to true (preserve alpha) until we know otherwise\n\n  /**\n   * Get whether the image has an alpha channel.\n   * Used to determine if we should encode as PNG (alpha) or JPEG (no alpha).\n   * @public\n   */\n  get hasAlpha(): boolean {\n    return this.#hasAlpha;\n  }\n\n  #fileId: string | null = null;\n\n  @property({ type: String, attribute: \"file-id\", reflect: true })\n  set fileId(value: string | null) {\n    this.#fileId = value;\n  }\n\n  get fileId() {\n    return (\n      this.#fileId ??\n      this.getAttribute(\"file-id\") ??\n      this.getAttribute(\"asset-id\")\n    );\n  }\n\n  /** @deprecated Use fileId instead */\n  get assetId(): string | null {\n    return this.fileId;\n  }\n  set assetId(value: string | null) {\n    this.fileId = value;\n  }\n\n  render() {\n    const assetPath = this.assetPath();\n    const isDirectUrl = this.isDirectUrl(assetPath);\n    return isDirectUrl\n      ? html`<img ${ref(this.imageRef)} src=${assetPath} />`\n      : html`<canvas ${ref(this.canvasRef)}></canvas>`;\n  }\n\n  private isDirectUrl(src: string): boolean {\n    // For file-id based URLs (via apiHost), always use fetch+canvas instead of img element\n    // This ensures proper rendering in all contexts (server, browser-full-video, browser-frame-by-frame)\n    if (this.fileId) {\n      return false;\n    }\n    return (\n      src.startsWith(\"http://\") ||\n      src.startsWith(\"https://\") ||\n      src.startsWith(\"data:\")\n    );\n  }\n\n  assetPath() {\n    if (this.fileId) {\n      const path = `${this.apiHost}/api/v1/files/${this.fileId}`;\n      return path;\n    }\n    if (this.isDirectUrl(this.src)) {\n      return this.src;\n    }\n    // Normalize the path: remove leading slash and any double slashes\n    let normalizedSrc = this.src.startsWith(\"/\") ? this.src.slice(1) : this.src;\n    normalizedSrc = normalizedSrc.replace(/^\\/+/, \"\");\n    // Use production API format for local files\n    return `/api/v1/assets/local/image?src=${encodeURIComponent(normalizedSrc)}`;\n  }\n\n  get hasOwnDuration() {\n    return this.hasExplicitDuration;\n  }\n\n  // ============================================================================\n  // Image Loading - async method instead of Task\n  // ============================================================================\n\n  #imageLoaded = false;\n  #imageLoadPromise: Promise<void> | null = null;\n  #lastLoadedPath: string | null = null;\n  #currentObjectUrl: string | null = null;\n\n  override shouldAutoReady(): boolean {\n    return !this.src && !this.fileId;\n  }\n\n  /**\n   * Load image from the configured source\n   */\n  async loadImage(signal?: AbortSignal): Promise<void> {\n    const assetPath = this.assetPath();\n\n    // Skip if no source\n    if (!this.src && !this.fileId) {\n      return;\n    }\n\n    // Return cached if path hasn't changed\n    if (this.#imageLoaded && this.#lastLoadedPath === assetPath) {\n      this.setContentReadyState(\"ready\");\n      return;\n    }\n\n    // Return in-flight promise\n    if (this.#imageLoadPromise && this.#lastLoadedPath === assetPath) {\n      return this.#imageLoadPromise;\n    }\n\n    this.setContentReadyState(\"loading\");\n\n    // For direct URLs, wait for the img element to load\n    if (this.isDirectUrl(assetPath)) {\n      this.#lastLoadedPath = assetPath;\n      this.#imageLoadPromise = this.#waitForImageElement(signal);\n\n      try {\n        await this.#imageLoadPromise;\n        this.#imageLoaded = true;\n        this.setContentReadyState(\"ready\");\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          throw error;\n        }\n        console.error(\"EFImage img element load error\", error);\n        this.setContentReadyState(\"error\");\n        throw error;\n      } finally {\n        this.#imageLoadPromise = null;\n      }\n      return;\n    }\n\n    this.#lastLoadedPath = assetPath;\n    this.#imageLoadPromise = this.#doLoadImage(assetPath, signal);\n\n    try {\n      await this.#imageLoadPromise;\n      this.#imageLoaded = true;\n      this.setContentReadyState(\"ready\");\n    } catch (error) {\n      if (error instanceof DOMException && error.name === \"AbortError\") {\n        throw error;\n      }\n      // Canvas not ready errors are expected during lifecycle\n      if (error instanceof Error && error.message === \"Canvas not ready\") {\n        return;\n      }\n      console.error(\"EFImage load error\", error);\n      this.setContentReadyState(\"error\");\n    } finally {\n      this.#imageLoadPromise = null;\n    }\n  }\n\n  async #waitForImageElement(signal?: AbortSignal): Promise<void> {\n    if (!this.imageRef.value) {\n      throw new Error(\"Image element not ready\");\n    }\n\n    const img = this.imageRef.value;\n\n    // If already loaded (cached), return immediately\n    if (img.complete && img.naturalHeight !== 0) {\n      return;\n    }\n\n    return new Promise<void>((resolve, reject) => {\n      if (signal?.aborted) {\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n        return;\n      }\n\n      const abortHandler = () => {\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n      };\n      signal?.addEventListener(\"abort\", abortHandler, { once: true });\n\n      img.onload = () => {\n        signal?.removeEventListener(\"abort\", abortHandler);\n        resolve();\n      };\n      img.onerror = (error) => {\n        signal?.removeEventListener(\"abort\", abortHandler);\n        reject(error);\n      };\n    });\n  }\n\n  async #doLoadImage(assetPath: string, signal?: AbortSignal): Promise<void> {\n    const response = await this.fetch(assetPath, { signal });\n    signal?.throwIfAborted();\n\n    const image = new Image();\n    const blob = await response.blob();\n    signal?.throwIfAborted();\n\n    // Detect if image has alpha channel based on MIME type\n    // JPEG images don't have alpha, PNG/WebP may have alpha\n    const mimeType = blob.type.toLowerCase();\n    this.#hasAlpha = !mimeType.includes(\"jpeg\") && !mimeType.includes(\"jpg\");\n\n    image.src = URL.createObjectURL(blob);\n\n    await new Promise<void>((resolve, reject) => {\n      if (signal?.aborted) {\n        URL.revokeObjectURL(image.src);\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n        return;\n      }\n\n      const abortHandler = () => {\n        URL.revokeObjectURL(image.src);\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n      };\n      signal?.addEventListener(\"abort\", abortHandler, { once: true });\n\n      image.onload = () => {\n        signal?.removeEventListener(\"abort\", abortHandler);\n        resolve();\n      };\n      image.onerror = (error) => {\n        signal?.removeEventListener(\"abort\", abortHandler);\n        URL.revokeObjectURL(image.src);\n        reject(error);\n      };\n    });\n\n    signal?.throwIfAborted();\n\n    if (!this.canvasRef.value) throw new Error(\"Canvas not ready\");\n    const ctx = this.canvasRef.value.getContext(\"2d\", {\n      willReadFrequently: true,\n    });\n    if (!ctx) throw new Error(\"Canvas 2d context not ready\");\n\n    // Determine canvas dimensions\n    // For SVG images without explicit dimensions, image.width/height may be 0\n    // In that case, fall back to naturalWidth/naturalHeight or element's computed size\n    let canvasWidth = image.width || image.naturalWidth;\n    let canvasHeight = image.height || image.naturalHeight;\n\n    // If still zero (common with SVGs that only have viewBox), use element's computed size\n    if (canvasWidth === 0 || canvasHeight === 0) {\n      const computedStyle = getComputedStyle(this);\n      const elementWidth = parseFloat(computedStyle.width);\n      const elementHeight = parseFloat(computedStyle.height);\n\n      // Use element dimensions if available, otherwise use a reasonable default\n      if (elementWidth > 0 && elementHeight > 0) {\n        canvasWidth = elementWidth;\n        canvasHeight = elementHeight;\n      } else {\n        // Default to 300x150 (standard canvas default size)\n        canvasWidth = 300;\n        canvasHeight = 150;\n      }\n    }\n\n    this.canvasRef.value.width = canvasWidth;\n    this.canvasRef.value.height = canvasHeight;\n\n    // Ensure the image is fully decoded before drawing\n    // This is especially important for SVGs\n    try {\n      await image.decode();\n    } catch (decodeError) {\n      // Image decode failed, attempting to draw anyway\n    }\n\n    // Clear canvas first to ensure we're starting fresh\n    ctx.clearRect(0, 0, canvasWidth, canvasHeight);\n\n    try {\n      ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);\n    } catch (drawError) {\n      console.error(`[EFImage] drawImage failed:`, drawError);\n      throw drawError;\n    }\n\n    // DON'T revoke the URL yet - keep it alive in case we need to redraw\n    // URL.revokeObjectURL(image.src);\n\n    // Store the object URL for cleanup later\n    if (this.#currentObjectUrl && this.#currentObjectUrl !== image.src) {\n      URL.revokeObjectURL(this.#currentObjectUrl);\n    }\n    this.#currentObjectUrl = image.src;\n  }\n\n  // ============================================================================\n  // FrameRenderable Implementation\n  // ============================================================================\n\n  /**\n   * Query readiness state for a given time.\n   * @implements FrameRenderable\n   */\n  getFrameState(_timeMs: number): FrameState {\n    return {\n      needsPreparation: !this.#imageLoaded,\n      isReady: this.#imageLoaded,\n      priority: PRIORITY_IMAGE,\n    };\n  }\n\n  /**\n   * Async preparation - waits for image to load.\n   * @implements FrameRenderable\n   */\n  async prepareFrame(_timeMs: number, signal: AbortSignal): Promise<void> {\n    await this.loadImage(signal);\n    signal.throwIfAborted();\n  }\n\n  /**\n   * Synchronous render - image is already displayed via img element or canvas.\n   * @implements FrameRenderable\n   */\n  renderFrame(_timeMs: number): void {\n    // Image is already displayed - no explicit render action needed\n  }\n\n  // ============================================================================\n  // End FrameRenderable Implementation\n  // ============================================================================\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has(\"src\") || changedProperties.has(\"fileId\")) {\n      this.#imageLoaded = false;\n      if (\n        changedProperties.get(\"src\") !== undefined ||\n        changedProperties.get(\"fileId\") !== undefined\n      ) {\n        this.emitContentChange(\"source\");\n      }\n      this.loadImage().catch(() => {});\n      this.#renderVersion++;\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    // Clean up object URL when element is removed\n    if (this.#currentObjectUrl) {\n      URL.revokeObjectURL(this.#currentObjectUrl);\n      this.#currentObjectUrl = null;\n    }\n  }\n\n  /**\n   * Get the natural dimensions of the image.\n   * Returns null if the image hasn't loaded yet.\n   *\n   * @public\n   */\n  getNaturalDimensions(): { width: number; height: number } | null {\n    // For direct URLs, check img element\n    const img = this.imageRef.value;\n    if (img && img.naturalWidth > 0 && img.naturalHeight > 0) {\n      return {\n        width: img.naturalWidth,\n        height: img.naturalHeight,\n      };\n    }\n\n    // For canvas-based images, check canvas dimensions\n    const canvas = this.canvasRef.value;\n    if (canvas && canvas.width > 0 && canvas.height > 0) {\n      return {\n        width: canvas.width,\n        height: canvas.height,\n      };\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-image\": EFImage;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"EFImage.js","names":["EFImage","#renderVersion","#hasAlpha","#fileId","#imageLoaded","#lastLoadedPath","#imageLoadPromise","#waitForImageElement","#doLoadImage","#currentObjectUrl"],"sources":["../../src/elements/EFImage.ts"],"sourcesContent":["import { css, html, LitElement, type PropertyValueMap } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport {\n  type FrameRenderable,\n  type FrameState,\n  PRIORITY_IMAGE,\n} from \"../preview/FrameController.js\";\nimport { EFSourceMixin } from \"./EFSourceMixin.js\";\nimport { EFTemporal } from \"./EFTemporal.js\";\nimport { FetchMixin } from \"./FetchMixin.js\";\n\n@customElement(\"ef-image\")\nexport class EFImage\n  extends EFTemporal(\n    EFSourceMixin(FetchMixin(LitElement), {\n      assetType: \"image_files\",\n    }),\n  )\n  implements FrameRenderable\n{\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        object-fit: contain;\n        object-position: center;\n      }\n      canvas, img {\n        width: 100%;\n        height: 100%;\n        object-fit: inherit;\n        object-position: inherit;\n      }\n    `,\n  ];\n\n  static get observedAttributes() {\n    // biome-ignore lint/complexity/noThisInStatic: We need to access super\n    const parentAttributes = super.observedAttributes || [];\n    return [...parentAttributes, \"asset-id\"];\n  }\n\n  attributeChangedCallback(\n    name: string,\n    oldValue: string | null,\n    newValue: string | null,\n  ): void {\n    if (name === \"asset-id\") {\n      this.fileId = newValue;\n      return;\n    }\n    super.attributeChangedCallback(name, oldValue, newValue);\n  }\n\n  imageRef = createRef<HTMLImageElement>();\n  canvasRef = createRef<HTMLCanvasElement>();\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 src or fileId changes.\n   * @public\n   */\n  get renderVersion(): number {\n    return this.#renderVersion;\n  }\n\n  /**\n   * Whether the loaded image has an alpha channel.\n   * JPEG images don't have alpha, PNG/WebP may have alpha.\n   */\n  #hasAlpha = true; // Default to true (preserve alpha) until we know otherwise\n\n  /**\n   * Get whether the image has an alpha channel.\n   * Used to determine if we should encode as PNG (alpha) or JPEG (no alpha).\n   * @public\n   */\n  get hasAlpha(): boolean {\n    return this.#hasAlpha;\n  }\n\n  #fileId: string | null = null;\n\n  @property({ type: String, attribute: \"file-id\", reflect: true })\n  set fileId(value: string | null) {\n    this.#fileId = value;\n  }\n\n  get fileId() {\n    return (\n      this.#fileId ??\n      this.getAttribute(\"file-id\") ??\n      this.getAttribute(\"asset-id\")\n    );\n  }\n\n  /** @deprecated Use fileId instead */\n  get assetId(): string | null {\n    return this.fileId;\n  }\n  set assetId(value: string | null) {\n    this.fileId = value;\n  }\n\n  render() {\n    const assetPath = this.assetPath();\n    const isDirectUrl = this.isDirectUrl(assetPath);\n    return isDirectUrl\n      ? html`<img ${ref(this.imageRef)} src=${assetPath} />`\n      : html`<canvas ${ref(this.canvasRef)}></canvas>`;\n  }\n\n  private isDirectUrl(src: string): boolean {\n    if (this.fileId) {\n      return false;\n    }\n    return src.startsWith(\"data:\");\n  }\n\n  assetPath() {\n    if (this.fileId) {\n      const path = `${this.apiHost}/api/v1/files/${this.fileId}`;\n      return path;\n    }\n    if (this.isDirectUrl(this.src)) {\n      return this.src;\n    }\n    // Normalize local paths: remove leading slashes (remote URLs are passed as-is)\n    const normalizedSrc = this.src.startsWith(\"/\")\n      ? this.src.replace(/^\\/+/, \"\")\n      : this.src;\n    return `/api/v1/assets/image?src=${encodeURIComponent(normalizedSrc)}`;\n  }\n\n  get hasOwnDuration() {\n    return this.hasExplicitDuration;\n  }\n\n  // ============================================================================\n  // Image Loading - async method instead of Task\n  // ============================================================================\n\n  #imageLoaded = false;\n  #imageLoadPromise: Promise<void> | null = null;\n  #lastLoadedPath: string | null = null;\n  #currentObjectUrl: string | null = null;\n\n  override shouldAutoReady(): boolean {\n    return !this.src && !this.fileId;\n  }\n\n  /**\n   * Load image from the configured source\n   */\n  async loadImage(signal?: AbortSignal): Promise<void> {\n    const assetPath = this.assetPath();\n\n    // Skip if no source\n    if (!this.src && !this.fileId) {\n      return;\n    }\n\n    // Return cached if path hasn't changed\n    if (this.#imageLoaded && this.#lastLoadedPath === assetPath) {\n      this.setContentReadyState(\"ready\");\n      return;\n    }\n\n    // Return in-flight promise\n    if (this.#imageLoadPromise && this.#lastLoadedPath === assetPath) {\n      return this.#imageLoadPromise;\n    }\n\n    this.setContentReadyState(\"loading\");\n\n    // For direct URLs, wait for the img element to load\n    if (this.isDirectUrl(assetPath)) {\n      this.#lastLoadedPath = assetPath;\n      this.#imageLoadPromise = this.#waitForImageElement(signal);\n\n      try {\n        await this.#imageLoadPromise;\n        this.#imageLoaded = true;\n        this.setContentReadyState(\"ready\");\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          throw error;\n        }\n        console.error(\"EFImage img element load error\", error);\n        this.setContentReadyState(\"error\");\n        throw error;\n      } finally {\n        this.#imageLoadPromise = null;\n      }\n      return;\n    }\n\n    this.#lastLoadedPath = assetPath;\n    this.#imageLoadPromise = this.#doLoadImage(assetPath, signal);\n\n    try {\n      await this.#imageLoadPromise;\n      this.#imageLoaded = true;\n      this.setContentReadyState(\"ready\");\n    } catch (error) {\n      if (error instanceof DOMException && error.name === \"AbortError\") {\n        throw error;\n      }\n      // Canvas not ready errors are expected during lifecycle\n      if (error instanceof Error && error.message === \"Canvas not ready\") {\n        return;\n      }\n      console.error(\"EFImage load error\", error);\n      this.setContentReadyState(\"error\");\n    } finally {\n      this.#imageLoadPromise = null;\n    }\n  }\n\n  async #waitForImageElement(signal?: AbortSignal): Promise<void> {\n    if (!this.imageRef.value) {\n      throw new Error(\"Image element not ready\");\n    }\n\n    const img = this.imageRef.value;\n\n    // If already loaded (cached), return immediately\n    if (img.complete && img.naturalHeight !== 0) {\n      return;\n    }\n\n    return new Promise<void>((resolve, reject) => {\n      if (signal?.aborted) {\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n        return;\n      }\n\n      const abortHandler = () => {\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n      };\n      signal?.addEventListener(\"abort\", abortHandler, { once: true });\n\n      img.onload = () => {\n        signal?.removeEventListener(\"abort\", abortHandler);\n        resolve();\n      };\n      img.onerror = (error) => {\n        signal?.removeEventListener(\"abort\", abortHandler);\n        reject(error);\n      };\n    });\n  }\n\n  async #doLoadImage(assetPath: string, signal?: AbortSignal): Promise<void> {\n    const response = await this.fetch(assetPath, { signal });\n    signal?.throwIfAborted();\n\n    const image = new Image();\n    const blob = await response.blob();\n    signal?.throwIfAborted();\n\n    // Detect if image has alpha channel based on MIME type\n    // JPEG images don't have alpha, PNG/WebP may have alpha\n    const mimeType = blob.type.toLowerCase();\n    this.#hasAlpha = !mimeType.includes(\"jpeg\") && !mimeType.includes(\"jpg\");\n\n    image.src = URL.createObjectURL(blob);\n\n    await new Promise<void>((resolve, reject) => {\n      if (signal?.aborted) {\n        URL.revokeObjectURL(image.src);\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n        return;\n      }\n\n      const abortHandler = () => {\n        URL.revokeObjectURL(image.src);\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n      };\n      signal?.addEventListener(\"abort\", abortHandler, { once: true });\n\n      image.onload = () => {\n        signal?.removeEventListener(\"abort\", abortHandler);\n        resolve();\n      };\n      image.onerror = (error) => {\n        signal?.removeEventListener(\"abort\", abortHandler);\n        URL.revokeObjectURL(image.src);\n        reject(error);\n      };\n    });\n\n    signal?.throwIfAborted();\n\n    if (!this.canvasRef.value) throw new Error(\"Canvas not ready\");\n    const ctx = this.canvasRef.value.getContext(\"2d\", {\n      willReadFrequently: true,\n    });\n    if (!ctx) throw new Error(\"Canvas 2d context not ready\");\n\n    // Determine canvas dimensions\n    // For SVG images without explicit dimensions, image.width/height may be 0\n    // In that case, fall back to naturalWidth/naturalHeight or element's computed size\n    let canvasWidth = image.width || image.naturalWidth;\n    let canvasHeight = image.height || image.naturalHeight;\n\n    // If still zero (common with SVGs that only have viewBox), use element's computed size\n    if (canvasWidth === 0 || canvasHeight === 0) {\n      const computedStyle = getComputedStyle(this);\n      const elementWidth = parseFloat(computedStyle.width);\n      const elementHeight = parseFloat(computedStyle.height);\n\n      // Use element dimensions if available, otherwise use a reasonable default\n      if (elementWidth > 0 && elementHeight > 0) {\n        canvasWidth = elementWidth;\n        canvasHeight = elementHeight;\n      } else {\n        // Default to 300x150 (standard canvas default size)\n        canvasWidth = 300;\n        canvasHeight = 150;\n      }\n    }\n\n    this.canvasRef.value.width = canvasWidth;\n    this.canvasRef.value.height = canvasHeight;\n\n    // Ensure the image is fully decoded before drawing\n    // This is especially important for SVGs\n    try {\n      await image.decode();\n    } catch (decodeError) {\n      // Image decode failed, attempting to draw anyway\n    }\n\n    // Clear canvas first to ensure we're starting fresh\n    ctx.clearRect(0, 0, canvasWidth, canvasHeight);\n\n    try {\n      ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);\n    } catch (drawError) {\n      console.error(`[EFImage] drawImage failed:`, drawError);\n      throw drawError;\n    }\n\n    // DON'T revoke the URL yet - keep it alive in case we need to redraw\n    // URL.revokeObjectURL(image.src);\n\n    // Store the object URL for cleanup later\n    if (this.#currentObjectUrl && this.#currentObjectUrl !== image.src) {\n      URL.revokeObjectURL(this.#currentObjectUrl);\n    }\n    this.#currentObjectUrl = image.src;\n  }\n\n  // ============================================================================\n  // FrameRenderable Implementation\n  // ============================================================================\n\n  /**\n   * Query readiness state for a given time.\n   * @implements FrameRenderable\n   */\n  getFrameState(_timeMs: number): FrameState {\n    return {\n      needsPreparation: !this.#imageLoaded,\n      isReady: this.#imageLoaded,\n      priority: PRIORITY_IMAGE,\n    };\n  }\n\n  /**\n   * Async preparation - waits for image to load.\n   * @implements FrameRenderable\n   */\n  async prepareFrame(_timeMs: number, signal: AbortSignal): Promise<void> {\n    await this.loadImage(signal);\n    signal.throwIfAborted();\n  }\n\n  /**\n   * Synchronous render - image is already displayed via img element or canvas.\n   * @implements FrameRenderable\n   */\n  renderFrame(_timeMs: number): void {\n    // Image is already displayed - no explicit render action needed\n  }\n\n  // ============================================================================\n  // End FrameRenderable Implementation\n  // ============================================================================\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has(\"src\") || changedProperties.has(\"fileId\")) {\n      this.#imageLoaded = false;\n      if (\n        changedProperties.get(\"src\") !== undefined ||\n        changedProperties.get(\"fileId\") !== undefined\n      ) {\n        this.emitContentChange(\"source\");\n      }\n      this.loadImage().catch(() => {});\n      this.#renderVersion++;\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    // Clean up object URL when element is removed\n    if (this.#currentObjectUrl) {\n      URL.revokeObjectURL(this.#currentObjectUrl);\n      this.#currentObjectUrl = null;\n    }\n  }\n\n  /**\n   * Get the natural dimensions of the image.\n   * Returns null if the image hasn't loaded yet.\n   *\n   * @public\n   */\n  getNaturalDimensions(): { width: number; height: number } | null {\n    // For direct URLs, check img element\n    const img = this.imageRef.value;\n    if (img && img.naturalWidth > 0 && img.naturalHeight > 0) {\n      return {\n        width: img.naturalWidth,\n        height: img.naturalHeight,\n      };\n    }\n\n    // For canvas-based images, check canvas dimensions\n    const canvas = this.canvasRef.value;\n    if (canvas && canvas.width > 0 && canvas.height > 0) {\n      return {\n        width: canvas.width,\n        height: canvas.height,\n      };\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-image\": EFImage;\n  }\n}\n"],"mappings":"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"}

package/dist/elements/EFMedia/BufferedSeekingInput.js

@@ -1,6 +1,6 @@
 import { withSpan } from "../../otel/tracingHelpers.js";
-import { DEFAULT_MEDIABUNNY_TIMEOUT_MS, withTimeout } from "./shared/timeoutUtils.js";
 import { roundToMilliseconds } from "./shared/PrecisionUtils.js";
+import { DEFAULT_MEDIABUNNY_TIMEOUT_MS, withTimeout } from "./shared/timeoutUtils.js";
 import { SampleBuffer } from "../SampleBuffer.js";
 import { AudioSampleSink, BufferSource, Input, InputAudioTrack, InputVideoTrack, MP4, VideoSampleSink } from "mediabunny";
 

package/dist/elements/EFMedia/CachedFetcher.js

@@ -0,0 +1,99 @@
+import { withSpan } from "../../otel/tracingHelpers.js";
+import { RequestDeduplicator } from "../../transcoding/cache/RequestDeduplicator.js";
+import { SizeAwareLRUCache } from "../../utils/LRUCache.js";
+
+//#region src/elements/EFMedia/CachedFetcher.ts
+const mediaCache = new SizeAwareLRUCache(100 * 1024 * 1024);
+const globalRequestDeduplicator = new RequestDeduplicator();
+var CachedFetcher = class {
+	#fetchFn;
+	constructor(fetchFn) {
+		this.#fetchFn = fetchFn;
+	}
+	has(key) {
+		return mediaCache.has(key);
+	}
+	async fetchArrayBuffer(url, signal) {
+		if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+		return this.#fetchWithCache(url, {
+			responseType: "arrayBuffer",
+			signal
+		});
+	}
+	async fetchJson(url, signal) {
+		if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+		return this.#fetchWithCache(url, {
+			responseType: "json",
+			signal
+		});
+	}
+	async #fetchWithCache(url, options) {
+		return withSpan("cachedFetcher.fetchWithCache", {
+			url: url.length > 100 ? `${url.substring(0, 100)}...` : url,
+			responseType: options.responseType
+		}, void 0, async (span) => {
+			const { responseType, headers, signal } = options;
+			const cacheKey = headers ? `${url}:${JSON.stringify(headers)}` : url;
+			const cached = mediaCache.get(cacheKey);
+			if (cached) {
+				span.setAttribute("cacheHit", true);
+				if (signal) return this.#handleAbortForCachedRequest(cached, signal);
+				return cached;
+			}
+			span.setAttribute("cacheHit", false);
+			const promise = globalRequestDeduplicator.executeRequest(cacheKey, async () => {
+				try {
+					const response = await this.#fetchFn(url, {
+						headers,
+						signal
+					});
+					const contentType = response.headers.get("content-type");
+					if (responseType === "json") {
+						if (!response.ok || contentType && !contentType.includes("application/json") && !contentType.includes("text/json")) {
+							const text = await response.clone().text();
+							if (!response.ok) throw new Error(`Failed to fetch: ${response.status} ${text.substring(0, 100)}`);
+							throw new Error(`Expected JSON but got ${contentType}: ${text.substring(0, 100)}`);
+						}
+						try {
+							return await response.json();
+						} catch (error) {
+							throw new Error(`Failed to parse JSON response: ${error instanceof Error ? error.message : String(error)}`);
+						}
+					}
+					if (!response.ok) {
+						const text = await response.clone().text();
+						throw new Error(`Failed to fetch: ${response.status} ${text.substring(0, 100)}`);
+					}
+					const buffer = await response.arrayBuffer();
+					span.setAttribute("sizeBytes", buffer.byteLength);
+					return buffer;
+				} catch (error) {
+					if (error instanceof DOMException && error.name === "AbortError") mediaCache.delete(cacheKey);
+					throw error;
+				}
+			});
+			mediaCache.set(cacheKey, promise);
+			promise.catch((error) => {
+				if (error instanceof DOMException && error.name === "AbortError") mediaCache.delete(cacheKey);
+			});
+			if (signal) return this.#handleAbortForCachedRequest(promise, signal);
+			return promise;
+		});
+	}
+	#handleAbortForCachedRequest(promise, signal) {
+		if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+		const abortPromise = new Promise((_, reject) => {
+			signal.addEventListener("abort", () => {
+				reject(new DOMException("Aborted", "AbortError"));
+			});
+		});
+		abortPromise.catch(() => {});
+		const racePromise = Promise.race([promise, abortPromise]);
+		racePromise.catch(() => {});
+		return racePromise;
+	}
+};
+
+//#endregion
+export { CachedFetcher };
+//# sourceMappingURL=CachedFetcher.js.map

package/dist/elements/EFMedia/CachedFetcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CachedFetcher.js","names":["#fetchFn","#fetchWithCache","#handleAbortForCachedRequest"],"sources":["../../../src/elements/EFMedia/CachedFetcher.ts"],"sourcesContent":["import { withSpan } from \"../../otel/tracingHelpers.js\";\nimport { RequestDeduplicator } from \"../../transcoding/cache/RequestDeduplicator.js\";\nimport { SizeAwareLRUCache } from \"../../utils/LRUCache.js\";\n\nexport const mediaCache = new SizeAwareLRUCache<string>(100 * 1024 * 1024);\nexport const globalRequestDeduplicator = new RequestDeduplicator();\n\nexport interface FetchFn {\n  (\n    url: string,\n    init?: { headers?: Record<string, string>; signal?: AbortSignal },\n  ): Promise<Response>;\n}\n\nexport class CachedFetcher {\n  #fetchFn: FetchFn;\n\n  constructor(fetchFn: FetchFn) {\n    this.#fetchFn = fetchFn;\n  }\n\n  has(key: string): boolean {\n    return mediaCache.has(key);\n  }\n\n  async fetchArrayBuffer(\n    url: string,\n    signal?: AbortSignal,\n  ): Promise<ArrayBuffer> {\n    if (signal?.aborted) {\n      throw new DOMException(\"Aborted\", \"AbortError\");\n    }\n    return this.#fetchWithCache(url, { responseType: \"arrayBuffer\", signal });\n  }\n\n  async fetchJson(url: string, signal?: AbortSignal): Promise<any> {\n    if (signal?.aborted) {\n      throw new DOMException(\"Aborted\", \"AbortError\");\n    }\n    return this.#fetchWithCache(url, { responseType: \"json\", signal });\n  }\n\n  async #fetchWithCache(\n    url: string,\n    options: {\n      responseType: \"arrayBuffer\" | \"json\";\n      headers?: Record<string, string>;\n      signal?: AbortSignal;\n    },\n  ): Promise<any> {\n    return withSpan(\n      \"cachedFetcher.fetchWithCache\",\n      {\n        url: url.length > 100 ? `${url.substring(0, 100)}...` : url,\n        responseType: options.responseType,\n      },\n      undefined,\n      async (span) => {\n        const { responseType, headers, signal } = options;\n\n        const cacheKey = headers ? `${url}:${JSON.stringify(headers)}` : url;\n\n        const cached = mediaCache.get(cacheKey);\n        if (cached) {\n          span.setAttribute(\"cacheHit\", true);\n          if (signal) {\n            return this.#handleAbortForCachedRequest(cached, signal);\n          }\n          return cached;\n        }\n\n        span.setAttribute(\"cacheHit\", false);\n\n        const promise = globalRequestDeduplicator.executeRequest(\n          cacheKey,\n          async () => {\n            try {\n              const response = await this.#fetchFn(url, { headers, signal });\n              const contentType = response.headers.get(\"content-type\");\n\n              if (responseType === \"json\") {\n                if (\n                  !response.ok ||\n                  (contentType &&\n                    !contentType.includes(\"application/json\") &&\n                    !contentType.includes(\"text/json\"))\n                ) {\n                  const text = await response.clone().text();\n                  if (!response.ok) {\n                    throw new Error(\n                      `Failed to fetch: ${response.status} ${text.substring(0, 100)}`,\n                    );\n                  }\n                  throw new Error(\n                    `Expected JSON but got ${contentType}: ${text.substring(0, 100)}`,\n                  );\n                }\n                try {\n                  return await response.json();\n                } catch (error) {\n                  throw new Error(\n                    `Failed to parse JSON response: ${error instanceof Error ? error.message : String(error)}`,\n                  );\n                }\n              }\n\n              if (!response.ok) {\n                const text = await response.clone().text();\n                throw new Error(\n                  `Failed to fetch: ${response.status} ${text.substring(0, 100)}`,\n                );\n              }\n\n              const buffer = await response.arrayBuffer();\n              span.setAttribute(\"sizeBytes\", buffer.byteLength);\n              return buffer;\n            } catch (error) {\n              if (\n                error instanceof DOMException &&\n                error.name === \"AbortError\"\n              ) {\n                mediaCache.delete(cacheKey);\n              }\n              throw error;\n            }\n          },\n        );\n\n        mediaCache.set(cacheKey, promise);\n\n        promise.catch((error) => {\n          if (error instanceof DOMException && error.name === \"AbortError\") {\n            mediaCache.delete(cacheKey);\n          }\n        });\n\n        if (signal) {\n          return this.#handleAbortForCachedRequest(promise, signal);\n        }\n\n        return promise;\n      },\n    );\n  }\n\n  #handleAbortForCachedRequest<T>(\n    promise: Promise<T>,\n    signal: AbortSignal,\n  ): Promise<T> {\n    if (signal.aborted) {\n      throw new DOMException(\"Aborted\", \"AbortError\");\n    }\n\n    const abortPromise = new Promise<never>((_, reject) => {\n      signal.addEventListener(\"abort\", () => {\n        reject(new DOMException(\"Aborted\", \"AbortError\"));\n      });\n    });\n    abortPromise.catch(() => {});\n\n    const racePromise = Promise.race([promise, abortPromise]);\n    racePromise.catch(() => {});\n    return racePromise;\n  }\n}\n"],"mappings":";;;;;AAIA,MAAa,aAAa,IAAI,kBAA0B,MAAM,OAAO,KAAK;AAC1E,MAAa,4BAA4B,IAAI,qBAAqB;AASlE,IAAa,gBAAb,MAA2B;CACzB;CAEA,YAAY,SAAkB;AAC5B,QAAKA,UAAW;;CAGlB,IAAI,KAAsB;AACxB,SAAO,WAAW,IAAI,IAAI;;CAG5B,MAAM,iBACJ,KACA,QACsB;AACtB,MAAI,QAAQ,QACV,OAAM,IAAI,aAAa,WAAW,aAAa;AAEjD,SAAO,MAAKC,eAAgB,KAAK;GAAE,cAAc;GAAe;GAAQ,CAAC;;CAG3E,MAAM,UAAU,KAAa,QAAoC;AAC/D,MAAI,QAAQ,QACV,OAAM,IAAI,aAAa,WAAW,aAAa;AAEjD,SAAO,MAAKA,eAAgB,KAAK;GAAE,cAAc;GAAQ;GAAQ,CAAC;;CAGpE,OAAMA,eACJ,KACA,SAKc;AACd,SAAO,SACL,gCACA;GACE,KAAK,IAAI,SAAS,MAAM,GAAG,IAAI,UAAU,GAAG,IAAI,CAAC,OAAO;GACxD,cAAc,QAAQ;GACvB,EACD,QACA,OAAO,SAAS;GACd,MAAM,EAAE,cAAc,SAAS,WAAW;GAE1C,MAAM,WAAW,UAAU,GAAG,IAAI,GAAG,KAAK,UAAU,QAAQ,KAAK;GAEjE,MAAM,SAAS,WAAW,IAAI,SAAS;AACvC,OAAI,QAAQ;AACV,SAAK,aAAa,YAAY,KAAK;AACnC,QAAI,OACF,QAAO,MAAKC,4BAA6B,QAAQ,OAAO;AAE1D,WAAO;;AAGT,QAAK,aAAa,YAAY,MAAM;GAEpC,MAAM,UAAU,0BAA0B,eACxC,UACA,YAAY;AACV,QAAI;KACF,MAAM,WAAW,MAAM,MAAKF,QAAS,KAAK;MAAE;MAAS;MAAQ,CAAC;KAC9D,MAAM,cAAc,SAAS,QAAQ,IAAI,eAAe;AAExD,SAAI,iBAAiB,QAAQ;AAC3B,UACE,CAAC,SAAS,MACT,eACC,CAAC,YAAY,SAAS,mBAAmB,IACzC,CAAC,YAAY,SAAS,YAAY,EACpC;OACA,MAAM,OAAO,MAAM,SAAS,OAAO,CAAC,MAAM;AAC1C,WAAI,CAAC,SAAS,GACZ,OAAM,IAAI,MACR,oBAAoB,SAAS,OAAO,GAAG,KAAK,UAAU,GAAG,IAAI,GAC9D;AAEH,aAAM,IAAI,MACR,yBAAyB,YAAY,IAAI,KAAK,UAAU,GAAG,IAAI,GAChE;;AAEH,UAAI;AACF,cAAO,MAAM,SAAS,MAAM;eACrB,OAAO;AACd,aAAM,IAAI,MACR,kCAAkC,iBAAiB,QAAQ,MAAM,UAAU,OAAO,MAAM,GACzF;;;AAIL,SAAI,CAAC,SAAS,IAAI;MAChB,MAAM,OAAO,MAAM,SAAS,OAAO,CAAC,MAAM;AAC1C,YAAM,IAAI,MACR,oBAAoB,SAAS,OAAO,GAAG,KAAK,UAAU,GAAG,IAAI,GAC9D;;KAGH,MAAM,SAAS,MAAM,SAAS,aAAa;AAC3C,UAAK,aAAa,aAAa,OAAO,WAAW;AACjD,YAAO;aACA,OAAO;AACd,SACE,iBAAiB,gBACjB,MAAM,SAAS,aAEf,YAAW,OAAO,SAAS;AAE7B,WAAM;;KAGX;AAED,cAAW,IAAI,UAAU,QAAQ;AAEjC,WAAQ,OAAO,UAAU;AACvB,QAAI,iBAAiB,gBAAgB,MAAM,SAAS,aAClD,YAAW,OAAO,SAAS;KAE7B;AAEF,OAAI,OACF,QAAO,MAAKE,4BAA6B,SAAS,OAAO;AAG3D,UAAO;IAEV;;CAGH,6BACE,SACA,QACY;AACZ,MAAI,OAAO,QACT,OAAM,IAAI,aAAa,WAAW,aAAa;EAGjD,MAAM,eAAe,IAAI,SAAgB,GAAG,WAAW;AACrD,UAAO,iBAAiB,eAAe;AACrC,WAAO,IAAI,aAAa,WAAW,aAAa,CAAC;KACjD;IACF;AACF,eAAa,YAAY,GAAG;EAE5B,MAAM,cAAc,QAAQ,KAAK,CAAC,SAAS,aAAa,CAAC;AACzD,cAAY,YAAY,GAAG;AAC3B,SAAO"}