@editframe/elements 0.38.0 → 0.38.1

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/EFMedia/shared/ThumbnailExtractor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThumbnailExtractor.js","names":["mediaEngine: BaseMediaEngine"],"sources":["../../../../src/elements/EFMedia/shared/ThumbnailExtractor.ts"],"sourcesContent":["import { ALL_FORMATS, BlobSource, CanvasSink, Input } from \"mediabunny\";\nimport type {\n  ThumbnailResult,\n  VideoRendition,\n} from \"../../../transcoding/types/index.js\";\nimport type { BaseMediaEngine } from \"../BaseMediaEngine.js\";\nimport { globalInputCache } from \"./GlobalInputCache.js\";\nimport { withTimeout, DEFAULT_MEDIABUNNY_TIMEOUT_MS } from \"./timeoutUtils.js\";\n\n/**\n * Shared thumbnail extraction logic for all MediaEngine implementations\n * Eliminates code duplication and provides consistent behavior\n */\nexport class ThumbnailExtractor {\n  constructor(private mediaEngine: BaseMediaEngine) {}\n\n  /**\n   * Extract thumbnails at multiple timestamps efficiently using segment batching\n   */\n  async extractThumbnails(\n    timestamps: number[],\n    rendition: VideoRendition,\n    durationMs: number,\n    signal?: AbortSignal,\n  ): Promise<(ThumbnailResult | null)[]> {\n    if (timestamps.length === 0) {\n      return [];\n    }\n\n    // Validate and filter timestamps within bounds\n    const validTimestamps = timestamps.filter(\n      (timeMs) => timeMs >= 0 && timeMs <= durationMs,\n    );\n\n    if (validTimestamps.length === 0) {\n      console.warn(\n        `ThumbnailExtractor: All timestamps out of bounds (0-${durationMs}ms)`,\n      );\n      return timestamps.map(() => null);\n    }\n\n    // Group timestamps by segment for batch processing\n    const segmentGroups = this.groupTimestampsBySegment(\n      validTimestamps,\n      rendition,\n    );\n\n    // Extract batched by segment using CanvasSink\n    const results = new Map<number, ThumbnailResult | null>();\n\n    for (const [segmentId, segmentTimestamps] of segmentGroups) {\n      // Check abort before processing each segment\n      signal?.throwIfAborted();\n\n      try {\n        const segmentResults = await this.extractSegmentThumbnails(\n          segmentId,\n          segmentTimestamps,\n          rendition,\n          signal,\n        );\n\n        for (const [timestamp, thumbnail] of segmentResults) {\n          results.set(timestamp, thumbnail);\n        }\n      } catch (error) {\n        // If aborted, re-throw to propagate cancellation\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          throw error;\n        }\n        console.warn(\n          `ThumbnailExtractor: Failed to extract thumbnails for segment ${segmentId}:`,\n          error,\n        );\n        // Mark all timestamps in this segment as failed\n        for (const timestamp of segmentTimestamps) {\n          results.set(timestamp, null);\n        }\n      }\n    }\n\n    // Return in original order, null for any that failed or were out of bounds\n    return timestamps.map((t) => {\n      // If timestamp was out of bounds, return null\n      if (t < 0 || t > durationMs) {\n        return null;\n      }\n      return results.get(t) || null;\n    });\n  }\n\n  /**\n   * Group timestamps by segment ID for efficient batch processing\n   */\n  private groupTimestampsBySegment(\n    timestamps: number[],\n    rendition: VideoRendition,\n  ): Map<number, number[]> {\n    const segmentGroups = new Map<number, number[]>();\n\n    for (const timeMs of timestamps) {\n      try {\n        const segmentId = this.mediaEngine.computeSegmentId(timeMs, rendition);\n        if (segmentId !== undefined) {\n          if (!segmentGroups.has(segmentId)) {\n            segmentGroups.set(segmentId, []);\n          }\n          const segmentGroup = segmentGroups.get(segmentId) ?? [];\n          if (!segmentGroup) {\n            segmentGroups.set(segmentId, []);\n          }\n          segmentGroup.push(timeMs);\n        }\n      } catch (error) {\n        console.warn(\n          `ThumbnailExtractor: Could not compute segment for timestamp ${timeMs}:`,\n          error,\n        );\n      }\n    }\n\n    return segmentGroups;\n  }\n\n  /**\n   * Extract thumbnails for a specific segment using CanvasSink\n   */\n  private async extractSegmentThumbnails(\n    segmentId: number,\n    timestamps: number[],\n    rendition: VideoRendition,\n    signal?: AbortSignal,\n  ): Promise<Map<number, ThumbnailResult | null>> {\n    const results = new Map<number, ThumbnailResult | null>();\n\n    try {\n      // Check abort before starting segment fetch\n      signal?.throwIfAborted();\n\n      const initP = this.mediaEngine.fetchInitSegment(rendition, signal!);\n      const mediaP = this.mediaEngine.fetchMediaSegment(segmentId, rendition, signal!);\n      initP.catch(() => {});\n      mediaP.catch(() => {});\n      const [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);\n\n      // Check abort after potentially slow network operations\n      signal?.throwIfAborted();\n\n      // Create Input for this segment using global shared cache\n      const segmentBlob = new Blob([initSegment, mediaSegment]);\n\n      let input = globalInputCache.get(rendition.src, segmentId, rendition.id);\n      if (!input) {\n        input = new Input({\n          formats: ALL_FORMATS,\n          source: new BlobSource(segmentBlob),\n        });\n        globalInputCache.set(rendition.src, segmentId, input, rendition.id);\n      }\n\n      // Set up CanvasSink for batched extraction\n      const videoTrack = await withTimeout(\n        input.getPrimaryVideoTrack(),\n        5000,\n        \"ThumbnailExtractor.getPrimaryVideoTrack\",\n        signal,\n      );\n      if (!videoTrack) {\n        // No video track - return nulls for all timestamps\n        for (const timestamp of timestamps) {\n          results.set(timestamp, null);\n        }\n        return results;\n      }\n\n      const sink = new CanvasSink(videoTrack);\n\n      // IMPORTANT: Sort timestamps for mediabunny - it expects monotonically sorted timestamps\n      // Create array of {original, sorted} to map back after extraction\n      const sortedTimestamps = [...timestamps].sort((a, b) => a - b);\n\n      // Convert sorted global timestamps to segment-relative (in seconds for mediabunny)\n      const relativeTimestamps = this.convertToSegmentRelativeTimestamps(\n        sortedTimestamps,\n        segmentId,\n        rendition,\n      );\n\n      // Batch extract all thumbnails for this segment (in sorted order)\n      const timestampResults = [];\n      const canvasIterator = sink.canvasesAtTimestamps(relativeTimestamps);\n      for await (const result of canvasIterator) {\n        // Wrap each iteration with timeout to prevent hangs\n        const canvasResult = await withTimeout(\n          Promise.resolve(result),\n          DEFAULT_MEDIABUNNY_TIMEOUT_MS,\n          \"ThumbnailExtractor canvasesAtTimestamps iteration\",\n          signal,\n        );\n        timestampResults.push(canvasResult);\n      }\n\n      // Map results back to original (sorted) timestamps\n      for (let i = 0; i < sortedTimestamps.length; i++) {\n        const globalTimestamp = sortedTimestamps[i];\n        if (globalTimestamp === undefined) {\n          continue;\n        }\n\n        const result = timestampResults[i];\n\n        if (result?.canvas) {\n          const canvas = result.canvas;\n          if (\n            canvas instanceof HTMLCanvasElement ||\n            canvas instanceof OffscreenCanvas\n          ) {\n            results.set(globalTimestamp, {\n              timestamp: globalTimestamp,\n              thumbnail: canvas,\n            });\n          } else {\n            results.set(globalTimestamp, null);\n          }\n        } else {\n          results.set(globalTimestamp, null);\n        }\n      }\n    } catch (error) {\n      // If aborted, re-throw to propagate cancellation\n      if (error instanceof DOMException && error.name === \"AbortError\") {\n        throw error;\n      }\n      // Thumbnail extraction can fail for various non-fatal reasons (network issues,\n      // missing segments, transcoding not ready). Log as warning and return nulls.\n      console.warn(\n        `ThumbnailExtractor: Failed to extract thumbnails for segment ${segmentId}:`,\n        error,\n      );\n      // Return nulls for all timestamps on error\n      for (const timestamp of timestamps) {\n        results.set(timestamp, null);\n      }\n    }\n\n    return results;\n  }\n\n  /**\n   * Convert global timestamps to segment-relative timestamps for mediabunny\n   * This is where the main difference between JIT and Asset engines lies\n   */\n  private convertToSegmentRelativeTimestamps(\n    globalTimestamps: number[],\n    segmentId: number,\n    rendition: VideoRendition,\n  ): number[] {\n    return this.mediaEngine.convertToSegmentRelativeTimestamps(\n      globalTimestamps,\n      segmentId,\n      rendition,\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"ThumbnailExtractor.js","names":["mediaEngine: BaseMediaEngine"],"sources":["../../../../src/elements/EFMedia/shared/ThumbnailExtractor.ts"],"sourcesContent":["import { ALL_FORMATS, BlobSource, CanvasSink, Input } from \"mediabunny\";\nimport type {\n  ThumbnailResult,\n  VideoRendition,\n} from \"../../../transcoding/types/index.js\";\nimport type { BaseMediaEngine } from \"../BaseMediaEngine.js\";\nimport { globalInputCache } from \"./GlobalInputCache.js\";\nimport { withTimeout, DEFAULT_MEDIABUNNY_TIMEOUT_MS } from \"./timeoutUtils.js\";\n\n/**\n * Shared thumbnail extraction logic for all MediaEngine implementations\n * Eliminates code duplication and provides consistent behavior\n */\nexport class ThumbnailExtractor {\n  constructor(private mediaEngine: BaseMediaEngine) {}\n\n  /**\n   * Extract thumbnails at multiple timestamps efficiently using segment batching\n   */\n  async extractThumbnails(\n    timestamps: number[],\n    rendition: VideoRendition,\n    durationMs: number,\n    signal?: AbortSignal,\n  ): Promise<(ThumbnailResult | null)[]> {\n    if (timestamps.length === 0) {\n      return [];\n    }\n\n    // Validate and filter timestamps within bounds\n    const validTimestamps = timestamps.filter(\n      (timeMs) => timeMs >= 0 && timeMs <= durationMs,\n    );\n\n    if (validTimestamps.length === 0) {\n      console.warn(\n        `ThumbnailExtractor: All timestamps out of bounds (0-${durationMs}ms)`,\n      );\n      return timestamps.map(() => null);\n    }\n\n    // Group timestamps by segment for batch processing\n    const segmentGroups = this.groupTimestampsBySegment(\n      validTimestamps,\n      rendition,\n    );\n\n    // Extract batched by segment using CanvasSink\n    const results = new Map<number, ThumbnailResult | null>();\n\n    for (const [segmentId, segmentTimestamps] of segmentGroups) {\n      // Check abort before processing each segment\n      signal?.throwIfAborted();\n\n      try {\n        const segmentResults = await this.extractSegmentThumbnails(\n          segmentId,\n          segmentTimestamps,\n          rendition,\n          signal,\n        );\n\n        for (const [timestamp, thumbnail] of segmentResults) {\n          results.set(timestamp, thumbnail);\n        }\n      } catch (error) {\n        // If aborted, re-throw to propagate cancellation\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          throw error;\n        }\n        console.warn(\n          `ThumbnailExtractor: Failed to extract thumbnails for segment ${segmentId}:`,\n          error,\n        );\n        // Mark all timestamps in this segment as failed\n        for (const timestamp of segmentTimestamps) {\n          results.set(timestamp, null);\n        }\n      }\n    }\n\n    // Return in original order, null for any that failed or were out of bounds\n    return timestamps.map((t) => {\n      // If timestamp was out of bounds, return null\n      if (t < 0 || t > durationMs) {\n        return null;\n      }\n      return results.get(t) || null;\n    });\n  }\n\n  /**\n   * Group timestamps by segment ID for efficient batch processing\n   */\n  private groupTimestampsBySegment(\n    timestamps: number[],\n    rendition: VideoRendition,\n  ): Map<number, number[]> {\n    const segmentGroups = new Map<number, number[]>();\n\n    for (const timeMs of timestamps) {\n      try {\n        const segmentId = this.mediaEngine.computeSegmentId(timeMs, rendition);\n        if (segmentId !== undefined) {\n          if (!segmentGroups.has(segmentId)) {\n            segmentGroups.set(segmentId, []);\n          }\n          const segmentGroup = segmentGroups.get(segmentId) ?? [];\n          if (!segmentGroup) {\n            segmentGroups.set(segmentId, []);\n          }\n          segmentGroup.push(timeMs);\n        }\n      } catch (error) {\n        console.warn(\n          `ThumbnailExtractor: Could not compute segment for timestamp ${timeMs}:`,\n          error,\n        );\n      }\n    }\n\n    return segmentGroups;\n  }\n\n  /**\n   * Extract thumbnails for a specific segment using CanvasSink\n   */\n  private async extractSegmentThumbnails(\n    segmentId: number,\n    timestamps: number[],\n    rendition: VideoRendition,\n    signal?: AbortSignal,\n  ): Promise<Map<number, ThumbnailResult | null>> {\n    const results = new Map<number, ThumbnailResult | null>();\n\n    try {\n      // Check abort before starting segment fetch\n      signal?.throwIfAborted();\n\n      const initP = this.mediaEngine.fetchInitSegment(rendition, signal!);\n      const mediaP = this.mediaEngine.fetchMediaSegment(\n        segmentId,\n        rendition,\n        signal!,\n      );\n      initP.catch(() => {});\n      mediaP.catch(() => {});\n      const [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);\n\n      // Check abort after potentially slow network operations\n      signal?.throwIfAborted();\n\n      // Create Input for this segment using global shared cache\n      const segmentBlob = new Blob([initSegment, mediaSegment]);\n\n      let input = globalInputCache.get(rendition.src, segmentId, rendition.id);\n      if (!input) {\n        input = new Input({\n          formats: ALL_FORMATS,\n          source: new BlobSource(segmentBlob),\n        });\n        globalInputCache.set(rendition.src, segmentId, input, rendition.id);\n      }\n\n      // Set up CanvasSink for batched extraction\n      const videoTrack = await withTimeout(\n        input.getPrimaryVideoTrack(),\n        5000,\n        \"ThumbnailExtractor.getPrimaryVideoTrack\",\n        signal,\n      );\n      if (!videoTrack) {\n        // No video track - return nulls for all timestamps\n        for (const timestamp of timestamps) {\n          results.set(timestamp, null);\n        }\n        return results;\n      }\n\n      const sink = new CanvasSink(videoTrack);\n\n      // IMPORTANT: Sort timestamps for mediabunny - it expects monotonically sorted timestamps\n      // Create array of {original, sorted} to map back after extraction\n      const sortedTimestamps = [...timestamps].sort((a, b) => a - b);\n\n      // Convert sorted global timestamps to segment-relative (in seconds for mediabunny)\n      const relativeTimestamps = this.convertToSegmentRelativeTimestamps(\n        sortedTimestamps,\n        segmentId,\n        rendition,\n      );\n\n      // Batch extract all thumbnails for this segment (in sorted order)\n      const timestampResults = [];\n      const canvasIterator = sink.canvasesAtTimestamps(relativeTimestamps);\n      for await (const result of canvasIterator) {\n        // Wrap each iteration with timeout to prevent hangs\n        const canvasResult = await withTimeout(\n          Promise.resolve(result),\n          DEFAULT_MEDIABUNNY_TIMEOUT_MS,\n          \"ThumbnailExtractor canvasesAtTimestamps iteration\",\n          signal,\n        );\n        timestampResults.push(canvasResult);\n      }\n\n      // Map results back to original (sorted) timestamps\n      for (let i = 0; i < sortedTimestamps.length; i++) {\n        const globalTimestamp = sortedTimestamps[i];\n        if (globalTimestamp === undefined) {\n          continue;\n        }\n\n        const result = timestampResults[i];\n\n        if (result?.canvas) {\n          const canvas = result.canvas;\n          if (\n            canvas instanceof HTMLCanvasElement ||\n            canvas instanceof OffscreenCanvas\n          ) {\n            results.set(globalTimestamp, {\n              timestamp: globalTimestamp,\n              thumbnail: canvas,\n            });\n          } else {\n            results.set(globalTimestamp, null);\n          }\n        } else {\n          results.set(globalTimestamp, null);\n        }\n      }\n    } catch (error) {\n      // If aborted, re-throw to propagate cancellation\n      if (error instanceof DOMException && error.name === \"AbortError\") {\n        throw error;\n      }\n      // Thumbnail extraction can fail for various non-fatal reasons (network issues,\n      // missing segments, transcoding not ready). Log as warning and return nulls.\n      console.warn(\n        `ThumbnailExtractor: Failed to extract thumbnails for segment ${segmentId}:`,\n        error,\n      );\n      // Return nulls for all timestamps on error\n      for (const timestamp of timestamps) {\n        results.set(timestamp, null);\n      }\n    }\n\n    return results;\n  }\n\n  /**\n   * Convert global timestamps to segment-relative timestamps for mediabunny\n   * This is where the main difference between JIT and Asset engines lies\n   */\n  private convertToSegmentRelativeTimestamps(\n    globalTimestamps: number[],\n    segmentId: number,\n    rendition: VideoRendition,\n  ): number[] {\n    return this.mediaEngine.convertToSegmentRelativeTimestamps(\n      globalTimestamps,\n      segmentId,\n      rendition,\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/elements/EFPanZoom.d.ts

@@ -1,6 +1,6 @@
-import * as lit29 from "lit";
+import * as lit28 from "lit";
 import { LitElement } from "lit";
-import * as lit_html27 from "lit-html";
+import * as lit_html26 from "lit-html";
 
 //#region src/elements/EFPanZoom.d.ts
 interface PanZoomTransform {
@@ -9,7 +9,7 @@ interface PanZoomTransform {
   scale: number;
 }
 declare class EFPanZoom extends LitElement {
-  static styles: lit29.CSSResult[];
+  static styles: lit28.CSSResult[];
   x: number;
   y: number;
   scale: number;
@@ -89,7 +89,7 @@ declare class EFPanZoom extends LitElement {
    * @param padding - Padding factor (0-1), e.g., 0.1 = 10% padding on each side. Default: 0.05
    */
   fitToContent(padding?: number): void;
-  render(): lit_html27.TemplateResult<1>;
+  render(): lit_html26.TemplateResult<1>;
 }
 //#endregion
 export { EFPanZoom, PanZoomTransform };

package/dist/elements/EFSourceMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFSourceMixin.js","names":["#md5Value","#md5LastSrc","#md5Promise","#doLoadMd5"],"sources":["../../src/elements/EFSourceMixin.ts"],"sourcesContent":["import type { LitElement } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\n\nexport declare class EFSourceMixinInterface {\n  apiHost?: string;\n  productionSrc(): string;\n  src: string;\n}\n\ninterface EFSourceMixinOptions {\n  assetType: string;\n}\ntype Constructor<T = {}> = new (...args: any[]) => T;\nexport function EFSourceMixin<T extends Constructor<LitElement>>(\n  superClass: T,\n  options: EFSourceMixinOptions,\n) {\n  class EFSourceElement extends superClass {\n    get apiHost() {\n      const apiHost =\n        (this.closest(\"ef-configuration\") as any)?.apiHost ??\n        (this.closest(\"ef-workbench\") as any)?.apiHost ??\n        (this.closest(\"ef-preview\") as any)?.apiHost;\n\n      // Return undefined instead of defaulting to external URL\n      // This allows components to use current origin when apiHost is not set\n      return apiHost;\n    }\n\n    @property({ type: String, reflect: true })\n    src = \"\";\n\n    #md5Value: string | undefined = undefined;\n    #md5Promise: Promise<string | undefined> | null = null;\n    #md5LastSrc: string | null = null;\n\n    productionSrc() {\n      if (!this.#md5Value) {\n        throw new Error(\n          `MD5 sum not available for ${this}. Cannot generate production URL`,\n        );\n      }\n\n      if (!this.apiHost) {\n        throw new Error(\n          `apiHost not available for ${this}. Cannot generate production URL`,\n        );\n      }\n\n      return `${this.apiHost}/api/v1/${options.assetType}/${this.#md5Value}`;\n    }\n\n    /**\n     * Load MD5 sum for the current source\n     */\n    async loadMd5Sum(signal?: AbortSignal): Promise<string | undefined> {\n      if (this.#md5LastSrc === this.src && this.#md5Value) {\n        return this.#md5Value;\n      }\n\n      if (this.#md5Promise && this.#md5LastSrc === this.src) {\n        return this.#md5Promise;\n      }\n\n      this.#md5LastSrc = this.src;\n      this.#md5Promise = this.#doLoadMd5(this.src, signal);\n\n      try {\n        this.#md5Value = await this.#md5Promise;\n        return this.#md5Value;\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          throw error;\n        }\n        console.error(\"EFSourceMixin md5Sum error\", error);\n        return undefined;\n      } finally {\n        this.#md5Promise = null;\n      }\n    }\n\n    async #doLoadMd5(\n      src: string,\n      signal?: AbortSignal,\n    ): Promise<string | undefined> {\n      // Normalize the path: remove leading slash and any double slashes\n      let normalizedSrc = src.startsWith(\"/\") ? src.slice(1) : src;\n      normalizedSrc = normalizedSrc.replace(/^\\/+/, \"\");\n      // Use production API format for local files\n      const md5Path = `/api/v1/files/local/md5?src=${encodeURIComponent(normalizedSrc)}`;\n      const response = await fetch(md5Path, { signal });\n      if (!response.ok) {\n        return undefined;\n      }\n      const data = await response.json();\n      return data.md5 ?? undefined;\n    }\n\n    /** @internal Exposes md5 state for md5SumLoader proxy without private field access in handler */\n    _getMd5Value(): string | undefined {\n      return this.#md5Value;\n    }\n\n    /** @internal Exposes md5 promise state for md5SumLoader proxy */\n    _getMd5Promise(): Promise<string | undefined> | null {\n      return this.#md5Promise;\n    }\n\n    /**\n     * Compatibility wrapper for code expecting md5SumLoader.value\n     */\n    md5SumLoader = new Proxy(\n      {\n        run: () => this.loadMd5Sum(),\n        host: this,\n      } as unknown as {\n        run: () => Promise<string | undefined>;\n        host: { _getMd5Value: () => string | undefined; _getMd5Promise: () => Promise<string | undefined> | null };\n        value: string | undefined;\n        taskComplete: Promise<string | undefined>;\n      },\n      {\n        get(target, prop) {\n          if (prop === \"value\") {\n            return target.host._getMd5Value();\n          }\n          if (prop === \"taskComplete\") {\n            const p = target.host._getMd5Promise();\n            return p || Promise.resolve(target.host._getMd5Value());\n          }\n          return (target as any)[prop];\n        },\n      },\n    );\n  }\n\n  return EFSourceElement as Constructor<EFSourceMixinInterface> & T;\n}\n"],"mappings":";;;;AAaA,SAAgB,cACd,YACA,SACA;CACA,MAAM,wBAAwB,WAAW;;;cAajC;uBAiFS,IAAI,MACjB;IACE,WAAW,KAAK,YAAY;IAC5B,MAAM;IACP,EAMD,EACE,IAAI,QAAQ,MAAM;AAChB,QAAI,SAAS,QACX,QAAO,OAAO,KAAK,cAAc;AAEnC,QAAI,SAAS,eAEX,QADU,OAAO,KAAK,gBAAgB,IAC1B,QAAQ,QAAQ,OAAO,KAAK,cAAc,CAAC;AAEzD,WAAQ,OAAe;MAE1B,CACF;;EAnHD,IAAI,UAAU;AAQZ,UANG,KAAK,QAAQ,mBAAmB,EAAU,WAC1C,KAAK,QAAQ,eAAe,EAAU,WACtC,KAAK,QAAQ,aAAa,EAAU;;EAUzC,YAAgC;EAChC,cAAkD;EAClD,cAA6B;EAE7B,gBAAgB;AACd,OAAI,CAAC,MAAKA,SACR,OAAM,IAAI,MACR,6BAA6B,KAAK,kCACnC;AAGH,OAAI,CAAC,KAAK,QACR,OAAM,IAAI,MACR,6BAA6B,KAAK,kCACnC;AAGH,UAAO,GAAG,KAAK,QAAQ,UAAU,QAAQ,UAAU,GAAG,MAAKA;;;;;EAM7D,MAAM,WAAW,QAAmD;AAClE,OAAI,MAAKC,eAAgB,KAAK,OAAO,MAAKD,SACxC,QAAO,MAAKA;AAGd,OAAI,MAAKE,cAAe,MAAKD,eAAgB,KAAK,IAChD,QAAO,MAAKC;AAGd,SAAKD,aAAc,KAAK;AACxB,SAAKC,aAAc,MAAKC,UAAW,KAAK,KAAK,OAAO;AAEpD,OAAI;AACF,UAAKH,WAAY,MAAM,MAAKE;AAC5B,WAAO,MAAKF;YACL,OAAO;AACd,QAAI,iBAAiB,gBAAgB,MAAM,SAAS,aAClD,OAAM;AAER,YAAQ,MAAM,8BAA8B,MAAM;AAClD;aACQ;AACR,UAAKE,aAAc;;;EAIvB,OAAMC,UACJ,KACA,QAC6B;GAE7B,IAAI,gBAAgB,IAAI,WAAW,IAAI,GAAG,IAAI,MAAM,EAAE,GAAG;AACzD,mBAAgB,cAAc,QAAQ,QAAQ,GAAG;GAEjD,MAAM,UAAU,+BAA+B,mBAAmB,cAAc;GAChF,MAAM,WAAW,MAAM,MAAM,SAAS,EAAE,QAAQ,CAAC;AACjD,OAAI,CAAC,SAAS,GACZ;AAGF,WADa,MAAM,SAAS,MAAM,EACtB,OAAO;;;EAIrB,eAAmC;AACjC,UAAO,MAAKH;;;EAId,iBAAqD;AACnD,UAAO,MAAKE;;;aA5Eb,SAAS;EAAE,MAAM;EAAQ,SAAS;EAAM,CAAC;AA2G5C,QAAO"}
+{"version":3,"file":"EFSourceMixin.js","names":["#md5Value","#md5LastSrc","#md5Promise","#doLoadMd5"],"sources":["../../src/elements/EFSourceMixin.ts"],"sourcesContent":["import type { LitElement } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\n\nexport declare class EFSourceMixinInterface {\n  apiHost?: string;\n  productionSrc(): string;\n  src: string;\n}\n\ninterface EFSourceMixinOptions {\n  assetType: string;\n}\ntype Constructor<T = {}> = new (...args: any[]) => T;\nexport function EFSourceMixin<T extends Constructor<LitElement>>(\n  superClass: T,\n  options: EFSourceMixinOptions,\n) {\n  class EFSourceElement extends superClass {\n    get apiHost() {\n      const apiHost =\n        (this.closest(\"ef-configuration\") as any)?.apiHost ??\n        (this.closest(\"ef-workbench\") as any)?.apiHost ??\n        (this.closest(\"ef-preview\") as any)?.apiHost;\n\n      // Return undefined instead of defaulting to external URL\n      // This allows components to use current origin when apiHost is not set\n      return apiHost;\n    }\n\n    @property({ type: String, reflect: true })\n    src = \"\";\n\n    #md5Value: string | undefined = undefined;\n    #md5Promise: Promise<string | undefined> | null = null;\n    #md5LastSrc: string | null = null;\n\n    productionSrc() {\n      if (!this.#md5Value) {\n        throw new Error(\n          `MD5 sum not available for ${this}. Cannot generate production URL`,\n        );\n      }\n\n      if (!this.apiHost) {\n        throw new Error(\n          `apiHost not available for ${this}. Cannot generate production URL`,\n        );\n      }\n\n      return `${this.apiHost}/api/v1/${options.assetType}/${this.#md5Value}`;\n    }\n\n    /**\n     * Load MD5 sum for the current source\n     */\n    async loadMd5Sum(signal?: AbortSignal): Promise<string | undefined> {\n      if (this.#md5LastSrc === this.src && this.#md5Value) {\n        return this.#md5Value;\n      }\n\n      if (this.#md5Promise && this.#md5LastSrc === this.src) {\n        return this.#md5Promise;\n      }\n\n      this.#md5LastSrc = this.src;\n      this.#md5Promise = this.#doLoadMd5(this.src, signal);\n\n      try {\n        this.#md5Value = await this.#md5Promise;\n        return this.#md5Value;\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          throw error;\n        }\n        console.error(\"EFSourceMixin md5Sum error\", error);\n        return undefined;\n      } finally {\n        this.#md5Promise = null;\n      }\n    }\n\n    async #doLoadMd5(\n      src: string,\n      signal?: AbortSignal,\n    ): Promise<string | undefined> {\n      // Normalize the path: remove leading slash and any double slashes\n      let normalizedSrc = src.startsWith(\"/\") ? src.slice(1) : src;\n      normalizedSrc = normalizedSrc.replace(/^\\/+/, \"\");\n      // Use production API format for local files\n      const md5Path = `/api/v1/files/local/md5?src=${encodeURIComponent(normalizedSrc)}`;\n      const response = await fetch(md5Path, { signal });\n      if (!response.ok) {\n        return undefined;\n      }\n      const data = await response.json();\n      return data.md5 ?? undefined;\n    }\n\n    /** @internal Exposes md5 state for md5SumLoader proxy without private field access in handler */\n    _getMd5Value(): string | undefined {\n      return this.#md5Value;\n    }\n\n    /** @internal Exposes md5 promise state for md5SumLoader proxy */\n    _getMd5Promise(): Promise<string | undefined> | null {\n      return this.#md5Promise;\n    }\n\n    /**\n     * Compatibility wrapper for code expecting md5SumLoader.value\n     */\n    md5SumLoader = new Proxy(\n      {\n        run: () => this.loadMd5Sum(),\n        host: this,\n      } as unknown as {\n        run: () => Promise<string | undefined>;\n        host: {\n          _getMd5Value: () => string | undefined;\n          _getMd5Promise: () => Promise<string | undefined> | null;\n        };\n        value: string | undefined;\n        taskComplete: Promise<string | undefined>;\n      },\n      {\n        get(target, prop) {\n          if (prop === \"value\") {\n            return target.host._getMd5Value();\n          }\n          if (prop === \"taskComplete\") {\n            const p = target.host._getMd5Promise();\n            return p || Promise.resolve(target.host._getMd5Value());\n          }\n          return (target as any)[prop];\n        },\n      },\n    );\n  }\n\n  return EFSourceElement as Constructor<EFSourceMixinInterface> & T;\n}\n"],"mappings":";;;;AAaA,SAAgB,cACd,YACA,SACA;CACA,MAAM,wBAAwB,WAAW;;;cAajC;uBAiFS,IAAI,MACjB;IACE,WAAW,KAAK,YAAY;IAC5B,MAAM;IACP,EASD,EACE,IAAI,QAAQ,MAAM;AAChB,QAAI,SAAS,QACX,QAAO,OAAO,KAAK,cAAc;AAEnC,QAAI,SAAS,eAEX,QADU,OAAO,KAAK,gBAAgB,IAC1B,QAAQ,QAAQ,OAAO,KAAK,cAAc,CAAC;AAEzD,WAAQ,OAAe;MAE1B,CACF;;EAtHD,IAAI,UAAU;AAQZ,UANG,KAAK,QAAQ,mBAAmB,EAAU,WAC1C,KAAK,QAAQ,eAAe,EAAU,WACtC,KAAK,QAAQ,aAAa,EAAU;;EAUzC,YAAgC;EAChC,cAAkD;EAClD,cAA6B;EAE7B,gBAAgB;AACd,OAAI,CAAC,MAAKA,SACR,OAAM,IAAI,MACR,6BAA6B,KAAK,kCACnC;AAGH,OAAI,CAAC,KAAK,QACR,OAAM,IAAI,MACR,6BAA6B,KAAK,kCACnC;AAGH,UAAO,GAAG,KAAK,QAAQ,UAAU,QAAQ,UAAU,GAAG,MAAKA;;;;;EAM7D,MAAM,WAAW,QAAmD;AAClE,OAAI,MAAKC,eAAgB,KAAK,OAAO,MAAKD,SACxC,QAAO,MAAKA;AAGd,OAAI,MAAKE,cAAe,MAAKD,eAAgB,KAAK,IAChD,QAAO,MAAKC;AAGd,SAAKD,aAAc,KAAK;AACxB,SAAKC,aAAc,MAAKC,UAAW,KAAK,KAAK,OAAO;AAEpD,OAAI;AACF,UAAKH,WAAY,MAAM,MAAKE;AAC5B,WAAO,MAAKF;YACL,OAAO;AACd,QAAI,iBAAiB,gBAAgB,MAAM,SAAS,aAClD,OAAM;AAER,YAAQ,MAAM,8BAA8B,MAAM;AAClD;aACQ;AACR,UAAKE,aAAc;;;EAIvB,OAAMC,UACJ,KACA,QAC6B;GAE7B,IAAI,gBAAgB,IAAI,WAAW,IAAI,GAAG,IAAI,MAAM,EAAE,GAAG;AACzD,mBAAgB,cAAc,QAAQ,QAAQ,GAAG;GAEjD,MAAM,UAAU,+BAA+B,mBAAmB,cAAc;GAChF,MAAM,WAAW,MAAM,MAAM,SAAS,EAAE,QAAQ,CAAC;AACjD,OAAI,CAAC,SAAS,GACZ;AAGF,WADa,MAAM,SAAS,MAAM,EACtB,OAAO;;;EAIrB,eAAmC;AACjC,UAAO,MAAKH;;;EAId,iBAAqD;AACnD,UAAO,MAAKE;;;aA5Eb,SAAS;EAAE,MAAM;EAAQ,SAAS;EAAM,CAAC;AA8G5C,QAAO"}

package/dist/elements/EFSurface.d.ts

@@ -1,18 +1,18 @@
 import { FrameRenderable, FrameState } from "../preview/FrameController.js";
 import { ContextMixinInterface } from "../gui/ContextMixin.js";
-import * as lit28 from "lit";
+import * as lit27 from "lit";
 import { LitElement } from "lit";
-import * as lit_html26 from "lit-html";
+import * as lit_html25 from "lit-html";
 import * as lit_html_directives_ref3 from "lit-html/directives/ref";
 
 //#region src/elements/EFSurface.d.ts
 declare class EFSurface extends LitElement implements FrameRenderable {
   #private;
-  static styles: lit28.CSSResult[];
+  static styles: lit27.CSSResult[];
   canvasRef: lit_html_directives_ref3.Ref<HTMLCanvasElement>;
   targetElement: ContextMixinInterface | null;
   target: string;
-  render(): lit_html26.TemplateResult<1>;
+  render(): lit_html25.TemplateResult<1>;
   get rootTimegroup(): any;
   get currentTimeMs(): number;
   get durationMs(): number;