@editframe/elements 0.45.1 → 0.45.3

package/dist/elements/EFPanZoom.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFPanZoom.js","names":["EFPanZoom","panZoom: Element | null"],"sources":["../../src/elements/EFPanZoom.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { provide } from \"@lit/context\";\nimport { panZoomTransformContext } from \"../gui/panZoomTransformContext.js\";\n\nexport interface PanZoomTransform {\n  x: number;\n  y: number;\n  scale: number;\n}\n\n@customElement(\"ef-pan-zoom\")\nexport class EFPanZoom extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        overflow: hidden;\n        position: relative;\n        touch-action: none;\n      }\n      .content-wrapper {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        transform-origin: 0 0;\n      }\n    `,\n  ];\n\n  @property({ type: Number, reflect: true })\n  x = 0;\n\n  @property({ type: Number, reflect: true })\n  y = 0;\n\n  @property({ type: Number, reflect: true })\n  scale = 1;\n\n  /**\n   * When true, automatically fits content to view on first render.\n   * Centers content and scales it to fit within the container with padding.\n   */\n  @property({ type: Boolean, attribute: \"auto-fit\" })\n  autoFit = false;\n\n  @provide({ context: panZoomTransformContext })\n  panZoomTransform: PanZoomTransform = { x: 0, y: 0, scale: 1 };\n\n  private _isDragging = false;\n  private _dragStartPointerPos: { x: number; y: number } | null = null;\n  private _dragStartTransform: PanZoomTransform | null = null;\n  private _capturedPointerId: number | null = null;\n\n  /**\n   * Document-level wheel handler in capture phase to prevent browser navigation.\n   * This prevents back/forward navigation on two-finger swipe gestures.\n   * We use capture phase to catch events before they bubble, but only prevent default\n   * (not stop propagation) so the normal wheel handler can still process them.\n   */\n  private _onDocumentWheelCapture = (e: WheelEvent) => {\n    // Check if event is over this panzoom element or its children\n    let panZoom: Element | null = null;\n    if (e.target instanceof Element) {\n      panZoom = e.target.closest(\"ef-pan-zoom\");\n      // Also check if target is an overlay sibling (selection overlay, etc.)\n      // Overlays have pointer-events: none but can still be the event target\n      if (!panZoom && e.target.closest(\"ef-canvas-selection-overlay\")) {\n        // Event is over selection overlay - check if it's over this panzoom's area\n        const rect = this.getBoundingClientRect();\n        if (\n          e.clientX >= rect.left &&\n          e.clientX <= rect.right &&\n          e.clientY >= rect.top &&\n          e.clientY <= rect.bottom\n        ) {\n          panZoom = this;\n        }\n      }\n    }\n    if (panZoom === this) {\n      // Prevent browser navigation gestures (back/forward on swipe)\n      // Don't stop propagation - let the normal wheel handler process the event\n      e.preventDefault();\n    }\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Add document-level capture listener to prevent browser navigation\n    document.addEventListener(\"wheel\", this._onDocumentWheelCapture, {\n      passive: false,\n      capture: true,\n    });\n    // Add element-level event listeners\n    this.addEventListener(\"wheel\", this._onWheel, { passive: false });\n    this.addEventListener(\"pointerdown\", this._onPointerDown);\n    this.addEventListener(\"pointermove\", this._onPointerMove);\n    this.addEventListener(\"pointerup\", this._onPointerUp);\n    this.addEventListener(\"pointercancel\", this._onPointerUp);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    // Remove document-level capture listener\n    document.removeEventListener(\"wheel\", this._onDocumentWheelCapture, {\n      capture: true,\n    });\n    // Remove element-level event listeners\n    this.removeEventListener(\"wheel\", this._onWheel);\n    this.removeEventListener(\"pointerdown\", this._onPointerDown);\n    this.removeEventListener(\"pointermove\", this._onPointerMove);\n    this.removeEventListener(\"pointerup\", this._onPointerUp);\n    this.removeEventListener(\"pointercancel\", this._onPointerUp);\n    // Clean up pointer capture if dragging\n    if (this._isDragging && this._capturedPointerId !== null) {\n      try {\n        this.releasePointerCapture(this._capturedPointerId);\n      } catch (err) {\n        // Ignore pointer capture errors (e.g., in test environments)\n      }\n    }\n  }\n\n  private _updateTransform(updates: Partial<PanZoomTransform>) {\n    const newTransform = {\n      x: updates.x !== undefined ? updates.x : this.x,\n      y: updates.y !== undefined ? updates.y : this.y,\n      scale:\n        updates.scale !== undefined\n          ? Math.max(0.1, Math.min(5, updates.scale))\n          : this.scale,\n    };\n\n    const changed =\n      newTransform.x !== this.x ||\n      newTransform.y !== this.y ||\n      newTransform.scale !== this.scale;\n\n    if (changed) {\n      this.x = newTransform.x;\n      this.y = newTransform.y;\n      this.scale = newTransform.scale;\n\n      // Update context for overlay components\n      this.panZoomTransform = { ...newTransform };\n\n      this.dispatchEvent(\n        new CustomEvent<PanZoomTransform>(\"transform-changed\", {\n          detail: { ...newTransform },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n  }\n\n  private _onPointerDown = (e: PointerEvent) => {\n    if (e.button !== 0) return;\n\n    this._isDragging = true;\n    this._capturedPointerId = e.pointerId;\n    this._dragStartPointerPos = { x: e.clientX, y: e.clientY };\n    this._dragStartTransform = {\n      x: this.x,\n      y: this.y,\n      scale: this.scale,\n    };\n\n    try {\n      this.setPointerCapture(e.pointerId);\n    } catch (err) {\n      // Ignore pointer capture errors (e.g., in test environments)\n    }\n  };\n\n  private _onPointerMove = (e: PointerEvent) => {\n    if (\n      !this._isDragging ||\n      !this._dragStartPointerPos ||\n      !this._dragStartTransform\n    )\n      return;\n\n    const deltaX = e.clientX - this._dragStartPointerPos.x;\n    const deltaY = e.clientY - this._dragStartPointerPos.y;\n\n    this._updateTransform({\n      x: this._dragStartTransform.x - deltaX,\n      y: this._dragStartTransform.y - deltaY,\n    });\n  };\n\n  private _onPointerUp = (e: PointerEvent) => {\n    if (!this._isDragging) return;\n    if (this._capturedPointerId !== null) {\n      try {\n        this.releasePointerCapture(e.pointerId);\n      } catch (err) {\n        // Ignore pointer capture errors (e.g., in test environments)\n      }\n    }\n\n    this._isDragging = false;\n    this._capturedPointerId = null;\n    this._dragStartPointerPos = null;\n    this._dragStartTransform = null;\n  };\n\n  private _onWheel = (e: WheelEvent) => {\n    // Always prevent default to prevent browser navigation (back/forward on swipe)\n    // This is critical for full-page app interfaces\n    e.preventDefault();\n    e.stopPropagation();\n\n    const isZoom = e.metaKey || e.ctrlKey;\n\n    if (isZoom) {\n      const containerRect = this.getBoundingClientRect();\n      const pointerX = e.clientX - containerRect.left;\n      const pointerY = e.clientY - containerRect.top;\n\n      const currentX = this.x;\n      const currentY = this.y;\n      const currentScale = this.scale;\n\n      const canvasX = (pointerX - currentX) / currentScale;\n      const canvasY = (pointerY - currentY) / currentScale;\n\n      const delta = e.deltaY > 0 ? 0.95 : 1.05;\n      const newScale = Math.max(0.1, Math.min(5, currentScale * delta));\n\n      const newX = pointerX - canvasX * newScale;\n      const newY = pointerY - canvasY * newScale;\n\n      this._updateTransform({\n        x: newX,\n        y: newY,\n        scale: newScale,\n      });\n    } else {\n      const deltaX = -e.deltaX;\n      const deltaY = -e.deltaY;\n\n      this._updateTransform({\n        x: this.x + deltaX,\n        y: this.y + deltaY,\n      });\n    }\n  };\n\n  firstUpdated(changedProperties: Map<PropertyKey, unknown>) {\n    super.firstUpdated(changedProperties);\n    // Initialize context with current transform\n    this.panZoomTransform = { x: this.x, y: this.y, scale: this.scale };\n\n    // Auto-fit content if enabled (use RAF to ensure content is rendered)\n    if (this.autoFit) {\n      requestAnimationFrame(() => {\n        this.fitToContent();\n      });\n    }\n  }\n\n  /**\n   * Convert screen coordinates (e.g., mouse event clientX/clientY) to canvas coordinates.\n   * This handles all pan/zoom transformations automatically.\n   *\n   * @param screenX - X coordinate in screen space (e.g., event.clientX)\n   * @param screenY - Y coordinate in screen space (e.g., event.clientY)\n   * @returns Object with x, y in canvas coordinate space\n   *\n   * @example\n   * handleClick(e: MouseEvent) {\n   *   const canvasPos = panZoom.screenToCanvas(e.clientX, e.clientY);\n   *   console.log(`Clicked at canvas position: ${canvasPos.x}, ${canvasPos.y}`);\n   * }\n   */\n  screenToCanvas(screenX: number, screenY: number): { x: number; y: number } {\n    const rect = this.getBoundingClientRect();\n    return {\n      x: (screenX - rect.left - this.x) / this.scale,\n      y: (screenY - rect.top - this.y) / this.scale,\n    };\n  }\n\n  /**\n   * Convert canvas coordinates to screen coordinates.\n   * Useful for positioning overlays or tooltips relative to canvas elements.\n   *\n   * @param canvasX - X coordinate in canvas space\n   * @param canvasY - Y coordinate in canvas space\n   * @returns Object with x, y in screen coordinate space\n   *\n   * @example\n   * const screenPos = panZoom.canvasToScreen(element.x, element.y);\n   * tooltip.style.left = `${screenPos.x}px`;\n   * tooltip.style.top = `${screenPos.y}px`;\n   */\n  canvasToScreen(canvasX: number, canvasY: number): { x: number; y: number } {\n    const rect = this.getBoundingClientRect();\n    return {\n      x: rect.left + canvasX * this.scale + this.x,\n      y: rect.top + canvasY * this.scale + this.y,\n    };\n  }\n\n  /**\n   * Reset the pan-zoom transform to its default values (x: 0, y: 0, scale: 1).\n   * This method can be called programmatically to reset the view.\n   *\n   * @example\n   * const panZoomRef = useRef(null);\n   * <button onClick={() => panZoomRef.current.reset()}>Reset View</button>\n   */\n  reset(): void {\n    this._updateTransform({ x: 0, y: 0, scale: 1 });\n  }\n\n  /**\n   * Fit content to the container, centering it and scaling to fit.\n   * Uses a padding factor to leave some margin around the content.\n   *\n   * @param padding - Padding factor (0-1), e.g., 0.1 = 10% padding on each side. Default: 0.05\n   */\n  fitToContent(padding = 0.05): void {\n    const containerRect = this.getBoundingClientRect();\n    if (containerRect.width === 0 || containerRect.height === 0) return;\n\n    // Find the first child element to measure\n    const contentWrapper = this.shadowRoot?.querySelector(\".content-wrapper\");\n    const slottedContent = contentWrapper\n      ?.querySelector(\"slot\")\n      ?.assignedElements()[0] as HTMLElement | undefined;\n\n    if (!slottedContent) return;\n\n    // Get content dimensions\n    const contentRect = slottedContent.getBoundingClientRect();\n    const contentWidth = contentRect.width / this.scale;\n    const contentHeight = contentRect.height / this.scale;\n\n    if (contentWidth === 0 || contentHeight === 0) return;\n\n    // Calculate available space with padding\n    const availableWidth = containerRect.width * (1 - 2 * padding);\n    const availableHeight = containerRect.height * (1 - 2 * padding);\n\n    // Calculate scale to fit\n    const scaleX = availableWidth / contentWidth;\n    const scaleY = availableHeight / contentHeight;\n    const newScale = Math.min(scaleX, scaleY);\n\n    // Calculate position to center\n    const scaledWidth = contentWidth * newScale;\n    const scaledHeight = contentHeight * newScale;\n    const newX = (containerRect.width - scaledWidth) / 2;\n    const newY = (containerRect.height - scaledHeight) / 2;\n\n    this._updateTransform({\n      x: newX,\n      y: newY,\n      scale: newScale,\n    });\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"content-wrapper\"\n        style=\"transform: translate(${this.x}px, ${this.y}px) scale(${this.scale});\"\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"EFPanZoom.js","names":["EFPanZoom"],"sources":["../../src/elements/EFPanZoom.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { provide } from \"@lit/context\";\nimport { panZoomTransformContext } from \"../gui/panZoomTransformContext.js\";\n\nexport interface PanZoomTransform {\n  x: number;\n  y: number;\n  scale: number;\n}\n\n@customElement(\"ef-pan-zoom\")\nexport class EFPanZoom extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        overflow: hidden;\n        position: relative;\n        touch-action: none;\n      }\n      .content-wrapper {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        transform-origin: 0 0;\n      }\n    `,\n  ];\n\n  @property({ type: Number, reflect: true })\n  x = 0;\n\n  @property({ type: Number, reflect: true })\n  y = 0;\n\n  @property({ type: Number, reflect: true })\n  scale = 1;\n\n  /**\n   * When true, automatically fits content to view on first render.\n   * Centers content and scales it to fit within the container with padding.\n   */\n  @property({ type: Boolean, attribute: \"auto-fit\" })\n  autoFit = false;\n\n  @provide({ context: panZoomTransformContext })\n  panZoomTransform: PanZoomTransform = { x: 0, y: 0, scale: 1 };\n\n  private _isDragging = false;\n  private _dragStartPointerPos: { x: number; y: number } | null = null;\n  private _dragStartTransform: PanZoomTransform | null = null;\n  private _capturedPointerId: number | null = null;\n\n  /**\n   * Document-level wheel handler in capture phase to prevent browser navigation.\n   * This prevents back/forward navigation on two-finger swipe gestures.\n   * We use capture phase to catch events before they bubble, but only prevent default\n   * (not stop propagation) so the normal wheel handler can still process them.\n   */\n  private _onDocumentWheelCapture = (e: WheelEvent) => {\n    // Check if event is over this panzoom element or its children\n    let isOverThisPanZoom = false;\n    if (e.target instanceof Element) {\n      const targetPanZoom = e.target.closest(\"ef-pan-zoom\");\n      if (targetPanZoom === this) {\n        isOverThisPanZoom = true;\n      } else if (!targetPanZoom && e.target.closest(\"ef-canvas-selection-overlay\")) {\n        // Also check if target is an overlay sibling (selection overlay, etc.)\n        // Overlays have pointer-events: none but can still be the event target\n        // Event is over selection overlay - check if it's over this panzoom's area\n        const rect = this.getBoundingClientRect();\n        if (\n          e.clientX >= rect.left &&\n          e.clientX <= rect.right &&\n          e.clientY >= rect.top &&\n          e.clientY <= rect.bottom\n        ) {\n          isOverThisPanZoom = true;\n        }\n      }\n    }\n    if (isOverThisPanZoom) {\n      // Prevent browser navigation gestures (back/forward on swipe)\n      // Don't stop propagation - let the normal wheel handler process the event\n      e.preventDefault();\n    }\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Add document-level capture listener to prevent browser navigation\n    document.addEventListener(\"wheel\", this._onDocumentWheelCapture, {\n      passive: false,\n      capture: true,\n    });\n    // Add element-level event listeners\n    this.addEventListener(\"wheel\", this._onWheel, { passive: false });\n    this.addEventListener(\"pointerdown\", this._onPointerDown);\n    this.addEventListener(\"pointermove\", this._onPointerMove);\n    this.addEventListener(\"pointerup\", this._onPointerUp);\n    this.addEventListener(\"pointercancel\", this._onPointerUp);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    // Remove document-level capture listener\n    document.removeEventListener(\"wheel\", this._onDocumentWheelCapture, {\n      capture: true,\n    });\n    // Remove element-level event listeners\n    this.removeEventListener(\"wheel\", this._onWheel);\n    this.removeEventListener(\"pointerdown\", this._onPointerDown);\n    this.removeEventListener(\"pointermove\", this._onPointerMove);\n    this.removeEventListener(\"pointerup\", this._onPointerUp);\n    this.removeEventListener(\"pointercancel\", this._onPointerUp);\n    // Clean up pointer capture if dragging\n    if (this._isDragging && this._capturedPointerId !== null) {\n      try {\n        this.releasePointerCapture(this._capturedPointerId);\n      } catch (_err) {\n        // Ignore pointer capture errors (e.g., in test environments)\n      }\n    }\n  }\n\n  private _updateTransform(updates: Partial<PanZoomTransform>) {\n    const newTransform = {\n      x: updates.x !== undefined ? updates.x : this.x,\n      y: updates.y !== undefined ? updates.y : this.y,\n      scale: updates.scale !== undefined ? Math.max(0.1, Math.min(5, updates.scale)) : this.scale,\n    };\n\n    const changed =\n      newTransform.x !== this.x || newTransform.y !== this.y || newTransform.scale !== this.scale;\n\n    if (changed) {\n      this.x = newTransform.x;\n      this.y = newTransform.y;\n      this.scale = newTransform.scale;\n\n      // Update context for overlay components\n      this.panZoomTransform = { ...newTransform };\n\n      this.dispatchEvent(\n        new CustomEvent<PanZoomTransform>(\"transform-changed\", {\n          detail: { ...newTransform },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n  }\n\n  private _onPointerDown = (e: PointerEvent) => {\n    if (e.button !== 0) return;\n\n    this._isDragging = true;\n    this._capturedPointerId = e.pointerId;\n    this._dragStartPointerPos = { x: e.clientX, y: e.clientY };\n    this._dragStartTransform = {\n      x: this.x,\n      y: this.y,\n      scale: this.scale,\n    };\n\n    try {\n      this.setPointerCapture(e.pointerId);\n    } catch (_err) {\n      // Ignore pointer capture errors (e.g., in test environments)\n    }\n  };\n\n  private _onPointerMove = (e: PointerEvent) => {\n    if (!this._isDragging || !this._dragStartPointerPos || !this._dragStartTransform) return;\n\n    const deltaX = e.clientX - this._dragStartPointerPos.x;\n    const deltaY = e.clientY - this._dragStartPointerPos.y;\n\n    this._updateTransform({\n      x: this._dragStartTransform.x - deltaX,\n      y: this._dragStartTransform.y - deltaY,\n    });\n  };\n\n  private _onPointerUp = (e: PointerEvent) => {\n    if (!this._isDragging) return;\n    if (this._capturedPointerId !== null) {\n      try {\n        this.releasePointerCapture(e.pointerId);\n      } catch (_err) {\n        // Ignore pointer capture errors (e.g., in test environments)\n      }\n    }\n\n    this._isDragging = false;\n    this._capturedPointerId = null;\n    this._dragStartPointerPos = null;\n    this._dragStartTransform = null;\n  };\n\n  private _onWheel = (e: WheelEvent) => {\n    // Always prevent default to prevent browser navigation (back/forward on swipe)\n    // This is critical for full-page app interfaces\n    e.preventDefault();\n    e.stopPropagation();\n\n    const isZoom = e.metaKey || e.ctrlKey;\n\n    if (isZoom) {\n      const containerRect = this.getBoundingClientRect();\n      const pointerX = e.clientX - containerRect.left;\n      const pointerY = e.clientY - containerRect.top;\n\n      const currentX = this.x;\n      const currentY = this.y;\n      const currentScale = this.scale;\n\n      const canvasX = (pointerX - currentX) / currentScale;\n      const canvasY = (pointerY - currentY) / currentScale;\n\n      const delta = e.deltaY > 0 ? 0.95 : 1.05;\n      const newScale = Math.max(0.1, Math.min(5, currentScale * delta));\n\n      const newX = pointerX - canvasX * newScale;\n      const newY = pointerY - canvasY * newScale;\n\n      this._updateTransform({\n        x: newX,\n        y: newY,\n        scale: newScale,\n      });\n    } else {\n      const deltaX = -e.deltaX;\n      const deltaY = -e.deltaY;\n\n      this._updateTransform({\n        x: this.x + deltaX,\n        y: this.y + deltaY,\n      });\n    }\n  };\n\n  firstUpdated(changedProperties: Map<PropertyKey, unknown>) {\n    super.firstUpdated(changedProperties);\n    // Initialize context with current transform\n    this.panZoomTransform = { x: this.x, y: this.y, scale: this.scale };\n\n    // Auto-fit content if enabled (use RAF to ensure content is rendered)\n    if (this.autoFit) {\n      requestAnimationFrame(() => {\n        this.fitToContent();\n      });\n    }\n  }\n\n  /**\n   * Convert screen coordinates (e.g., mouse event clientX/clientY) to canvas coordinates.\n   * This handles all pan/zoom transformations automatically.\n   *\n   * @param screenX - X coordinate in screen space (e.g., event.clientX)\n   * @param screenY - Y coordinate in screen space (e.g., event.clientY)\n   * @returns Object with x, y in canvas coordinate space\n   *\n   * @example\n   * handleClick(e: MouseEvent) {\n   *   const canvasPos = panZoom.screenToCanvas(e.clientX, e.clientY);\n   *   console.log(`Clicked at canvas position: ${canvasPos.x}, ${canvasPos.y}`);\n   * }\n   */\n  screenToCanvas(screenX: number, screenY: number): { x: number; y: number } {\n    const rect = this.getBoundingClientRect();\n    return {\n      x: (screenX - rect.left - this.x) / this.scale,\n      y: (screenY - rect.top - this.y) / this.scale,\n    };\n  }\n\n  /**\n   * Convert canvas coordinates to screen coordinates.\n   * Useful for positioning overlays or tooltips relative to canvas elements.\n   *\n   * @param canvasX - X coordinate in canvas space\n   * @param canvasY - Y coordinate in canvas space\n   * @returns Object with x, y in screen coordinate space\n   *\n   * @example\n   * const screenPos = panZoom.canvasToScreen(element.x, element.y);\n   * tooltip.style.left = `${screenPos.x}px`;\n   * tooltip.style.top = `${screenPos.y}px`;\n   */\n  canvasToScreen(canvasX: number, canvasY: number): { x: number; y: number } {\n    const rect = this.getBoundingClientRect();\n    return {\n      x: rect.left + canvasX * this.scale + this.x,\n      y: rect.top + canvasY * this.scale + this.y,\n    };\n  }\n\n  /**\n   * Reset the pan-zoom transform to its default values (x: 0, y: 0, scale: 1).\n   * This method can be called programmatically to reset the view.\n   *\n   * @example\n   * const panZoomRef = useRef(null);\n   * <button onClick={() => panZoomRef.current.reset()}>Reset View</button>\n   */\n  reset(): void {\n    this._updateTransform({ x: 0, y: 0, scale: 1 });\n  }\n\n  /**\n   * Fit content to the container, centering it and scaling to fit.\n   * Uses a padding factor to leave some margin around the content.\n   *\n   * @param padding - Padding factor (0-1), e.g., 0.1 = 10% padding on each side. Default: 0.05\n   */\n  fitToContent(padding = 0.05): void {\n    const containerRect = this.getBoundingClientRect();\n    if (containerRect.width === 0 || containerRect.height === 0) return;\n\n    // Find the first child element to measure\n    const contentWrapper = this.shadowRoot?.querySelector(\".content-wrapper\");\n    const slottedContent = contentWrapper?.querySelector(\"slot\")?.assignedElements()[0] as\n      | HTMLElement\n      | undefined;\n\n    if (!slottedContent) return;\n\n    // Get content dimensions\n    const contentRect = slottedContent.getBoundingClientRect();\n    const contentWidth = contentRect.width / this.scale;\n    const contentHeight = contentRect.height / this.scale;\n\n    if (contentWidth === 0 || contentHeight === 0) return;\n\n    // Calculate available space with padding\n    const availableWidth = containerRect.width * (1 - 2 * padding);\n    const availableHeight = containerRect.height * (1 - 2 * padding);\n\n    // Calculate scale to fit\n    const scaleX = availableWidth / contentWidth;\n    const scaleY = availableHeight / contentHeight;\n    const newScale = Math.min(scaleX, scaleY);\n\n    // Calculate position to center\n    const scaledWidth = contentWidth * newScale;\n    const scaledHeight = contentHeight * newScale;\n    const newX = (containerRect.width - scaledWidth) / 2;\n    const newY = (containerRect.height - scaledHeight) / 2;\n\n    this._updateTransform({\n      x: newX,\n      y: newY,\n      scale: newScale,\n    });\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"content-wrapper\"\n        style=\"transform: translate(${this.x}px, ${this.y}px) scale(${this.scale});\"\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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"}

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      return (\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        window.location.origin\n      );\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      const md5Path = `/api/v1/files/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;;;cAWjC;uBAgFS,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;;EAnHD,IAAI,UAAU;AACZ,UACG,KAAK,QAAQ,mBAAmB,EAAU,WAC1C,KAAK,QAAQ,eAAe,EAAU,WACtC,KAAK,QAAQ,aAAa,EAAU,WACrC,OAAO,SAAS;;EAOpB,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;GACjD,MAAM,UAAU,yBAAyB,mBAAmB,cAAc;GAC1E,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;;;aA3Eb,SAAS;EAAE,MAAM;EAAQ,SAAS;EAAM,CAAC;AA6G5C,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      return (\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        window.location.origin\n      );\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(`MD5 sum not available for ${this}. Cannot generate production URL`);\n      }\n\n      if (!this.apiHost) {\n        throw new Error(`apiHost not available for ${this}. Cannot generate production URL`);\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(src: string, signal?: AbortSignal): 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      const md5Path = `/api/v1/files/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;;;cAWjC;uBAyES,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;;EA5GD,IAAI,UAAU;AACZ,UACG,KAAK,QAAQ,mBAAmB,EAAU,WAC1C,KAAK,QAAQ,eAAe,EAAU,WACtC,KAAK,QAAQ,aAAa,EAAU,WACrC,OAAO,SAAS;;EAOpB,YAAgC;EAChC,cAAkD;EAClD,cAA6B;EAE7B,gBAAgB;AACd,OAAI,CAAC,MAAKA,SACR,OAAM,IAAI,MAAM,6BAA6B,KAAK,kCAAkC;AAGtF,OAAI,CAAC,KAAK,QACR,OAAM,IAAI,MAAM,6BAA6B,KAAK,kCAAkC;AAGtF,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,UAAW,KAAa,QAAmD;GAE/E,IAAI,gBAAgB,IAAI,WAAW,IAAI,GAAG,IAAI,MAAM,EAAE,GAAG;AACzD,mBAAgB,cAAc,QAAQ,QAAQ,GAAG;GACjD,MAAM,UAAU,yBAAyB,mBAAmB,cAAc;GAC1E,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;;;aApEb,SAAS;EAAE,MAAM;EAAQ,SAAS;EAAM,CAAC;AAsG5C,QAAO"}

package/dist/elements/EFSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFSurface.js","names":["EFSurface","target: any","root: any"],"sources":["../../src/elements/EFSurface.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport type { ContextMixinInterface } from \"../gui/ContextMixin.ts\";\nimport type {\n  FrameRenderable,\n  FrameState,\n} from \"../preview/FrameController.js\";\nimport { TargetController } from \"./TargetController.ts\";\n\n@customElement(\"ef-surface\")\nexport class EFSurface extends LitElement implements FrameRenderable {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n      }\n      canvas {\n        all: inherit;\n        width: 100%;\n        height: 100%;\n        display: block;\n      }\n    `,\n  ];\n\n  canvasRef = createRef<HTMLCanvasElement>();\n\n  // @ts-expect-error controller is intentionally not referenced directly\n  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Used for side effects\n  #targetController: TargetController = new TargetController(this);\n\n  @state()\n  targetElement: ContextMixinInterface | null = null;\n\n  @property({ type: String })\n  target = \"\";\n\n  render() {\n    return html`<canvas ${ref(this.canvasRef)}></canvas>`;\n  }\n\n  // Provide minimal temporal-like properties so EFTimegroup can schedule us\n  get rootTimegroup(): any {\n    // Prefer the target element's root timegroup if available\n    const target: any = this.targetElement;\n    if (target && \"rootTimegroup\" in target) {\n      return target.rootTimegroup;\n    }\n    // Fallback: nearest containing timegroup if any\n    let root: any = this.closest(\"ef-timegroup\");\n    while (root?.parentTimegroup) {\n      root = root.parentTimegroup;\n    }\n    return root;\n  }\n\n  get currentTimeMs(): number {\n    return this.rootTimegroup?.currentTimeMs ?? 0;\n  }\n\n  get durationMs(): number {\n    return this.rootTimegroup?.durationMs ?? 0;\n  }\n\n  get startTimeMs(): number {\n    return this.rootTimegroup?.startTimeMs ?? 0;\n  }\n\n  get endTimeMs(): number {\n    return this.startTimeMs + this.durationMs;\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    // Surface is ready when target element exists\n    const hasTarget = !!this.targetElement;\n\n    return {\n      needsPreparation: false, // Surface just copies, no async prep needed\n      isReady: hasTarget,\n      priority: 10, // Surface renders last (depends on other elements)\n    };\n  }\n\n  /**\n   * Async preparation - no preparation needed.\n   * FrameController's priority system ensures dependencies render first.\n   * @implements FrameRenderable\n   */\n  async prepareFrame(_timeMs: number, _signal: AbortSignal): Promise<void> {\n    // No preparation needed - FrameController handles dependencies via priority\n  }\n\n  /**\n   * Synchronous render - copies canvas from target element.\n   * @implements FrameRenderable\n   */\n  renderFrame(_timeMs: number): void {\n    if (this.targetElement) {\n      this.copyFromTarget(this.targetElement);\n    }\n  }\n\n  // ============================================================================\n  // End FrameRenderable Implementation\n  // ============================================================================\n\n  protected updated(): void {\n    if (this.targetElement) {\n      this.copyFromTarget(this.targetElement);\n    }\n  }\n\n  // Target resolution is handled by TargetController. No implicit discovery.\n\n  private getSourceCanvas(from: Element): HTMLCanvasElement | null {\n    const anyEl = from as any;\n    if (\"canvasElement\" in anyEl) {\n      return anyEl.canvasElement ?? null;\n    }\n    const sr = (from as HTMLElement).shadowRoot;\n    if (sr) {\n      const c = sr.querySelector(\"canvas\");\n      return (c as HTMLCanvasElement) ?? null;\n    }\n    return null;\n  }\n\n  private copyFromTarget(target: Element) {\n    const dst = this.canvasRef.value;\n    const src = this.getSourceCanvas(target);\n    if (!dst || !src) return;\n    if (!src.width || !src.height) return;\n\n    // Match source pixel size for a faithful mirror; layout scaling is handled by CSS\n    if (dst.width !== src.width || dst.height !== src.height) {\n      dst.width = src.width;\n      dst.height = src.height;\n    }\n\n    const ctx = dst.getContext(\"2d\", { willReadFrequently: true });\n    if (!ctx) return;\n    ctx.drawImage(src, 0, 0, dst.width, dst.height);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-surface\": EFSurface;\n  }\n}\n"],"mappings":";;;;;;;AAWO,sBAAMA,oBAAkB,WAAsC;;;mBAgBvD,WAA8B;uBAOI;gBAGrC;;;gBAzBO,CACd,GAAG;;;;;;;;;;;MAYJ;;CAMD,oBAAsC,IAAI,iBAAiB,KAAK;CAQhE,SAAS;AACP,SAAO,IAAI,WAAW,IAAI,KAAK,UAAU,CAAC;;CAI5C,IAAI,gBAAqB;EAEvB,MAAMC,SAAc,KAAK;AACzB,MAAI,UAAU,mBAAmB,OAC/B,QAAO,OAAO;EAGhB,IAAIC,OAAY,KAAK,QAAQ,eAAe;AAC5C,SAAO,MAAM,gBACX,QAAO,KAAK;AAEd,SAAO;;CAGT,IAAI,gBAAwB;AAC1B,SAAO,KAAK,eAAe,iBAAiB;;CAG9C,IAAI,aAAqB;AACvB,SAAO,KAAK,eAAe,cAAc;;CAG3C,IAAI,cAAsB;AACxB,SAAO,KAAK,eAAe,eAAe;;CAG5C,IAAI,YAAoB;AACtB,SAAO,KAAK,cAAc,KAAK;;;;;;CAWjC,cAAc,SAA6B;AAIzC,SAAO;GACL,kBAAkB;GAClB,SAJgB,CAAC,CAAC,KAAK;GAKvB,UAAU;GACX;;;;;;;CAQH,MAAM,aAAa,SAAiB,SAAqC;;;;;CAQzE,YAAY,SAAuB;AACjC,MAAI,KAAK,cACP,MAAK,eAAe,KAAK,cAAc;;CAQ3C,AAAU,UAAgB;AACxB,MAAI,KAAK,cACP,MAAK,eAAe,KAAK,cAAc;;CAM3C,AAAQ,gBAAgB,MAAyC;EAC/D,MAAM,QAAQ;AACd,MAAI,mBAAmB,MACrB,QAAO,MAAM,iBAAiB;EAEhC,MAAM,KAAM,KAAqB;AACjC,MAAI,GAEF,QADU,GAAG,cAAc,SAAS,IACD;AAErC,SAAO;;CAGT,AAAQ,eAAe,QAAiB;EACtC,MAAM,MAAM,KAAK,UAAU;EAC3B,MAAM,MAAM,KAAK,gBAAgB,OAAO;AACxC,MAAI,CAAC,OAAO,CAAC,IAAK;AAClB,MAAI,CAAC,IAAI,SAAS,CAAC,IAAI,OAAQ;AAG/B,MAAI,IAAI,UAAU,IAAI,SAAS,IAAI,WAAW,IAAI,QAAQ;AACxD,OAAI,QAAQ,IAAI;AAChB,OAAI,SAAS,IAAI;;EAGnB,MAAM,MAAM,IAAI,WAAW,MAAM,EAAE,oBAAoB,MAAM,CAAC;AAC9D,MAAI,CAAC,IAAK;AACV,MAAI,UAAU,KAAK,GAAG,GAAG,IAAI,OAAO,IAAI,OAAO;;;YAtHhD,OAAO;YAGP,SAAS,EAAE,MAAM,QAAQ,CAAC;wBA1B5B,cAAc,aAAa"}
+{"version":3,"file":"EFSurface.js","names":["EFSurface","target: any","root: any"],"sources":["../../src/elements/EFSurface.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport type { ContextMixinInterface } from \"../gui/ContextMixin.ts\";\nimport type { FrameRenderable, FrameState } from \"../preview/FrameController.js\";\nimport { TargetController } from \"./TargetController.ts\";\n\n@customElement(\"ef-surface\")\nexport class EFSurface extends LitElement implements FrameRenderable {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n      }\n      canvas {\n        all: inherit;\n        width: 100%;\n        height: 100%;\n        display: block;\n      }\n    `,\n  ];\n\n  canvasRef = createRef<HTMLCanvasElement>();\n\n  // @ts-expect-error controller is intentionally not referenced directly\n  // oxlint-disable-next-line no-unused-private-class-members -- retained for constructor side effects\n  #targetController: TargetController = new TargetController(this);\n\n  @state()\n  targetElement: ContextMixinInterface | null = null;\n\n  @property({ type: String })\n  target = \"\";\n\n  render() {\n    return html`<canvas ${ref(this.canvasRef)}></canvas>`;\n  }\n\n  // Provide minimal temporal-like properties so EFTimegroup can schedule us\n  get rootTimegroup(): any {\n    // Prefer the target element's root timegroup if available\n    const target: any = this.targetElement;\n    if (target && \"rootTimegroup\" in target) {\n      return target.rootTimegroup;\n    }\n    // Fallback: nearest containing timegroup if any\n    let root: any = this.closest(\"ef-timegroup\");\n    while (root?.parentTimegroup) {\n      root = root.parentTimegroup;\n    }\n    return root;\n  }\n\n  get currentTimeMs(): number {\n    return this.rootTimegroup?.currentTimeMs ?? 0;\n  }\n\n  get durationMs(): number {\n    return this.rootTimegroup?.durationMs ?? 0;\n  }\n\n  get startTimeMs(): number {\n    return this.rootTimegroup?.startTimeMs ?? 0;\n  }\n\n  get endTimeMs(): number {\n    return this.startTimeMs + this.durationMs;\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    // Surface is ready when target element exists\n    const hasTarget = !!this.targetElement;\n\n    return {\n      needsPreparation: false, // Surface just copies, no async prep needed\n      isReady: hasTarget,\n      priority: 10, // Surface renders last (depends on other elements)\n    };\n  }\n\n  /**\n   * Async preparation - no preparation needed.\n   * FrameController's priority system ensures dependencies render first.\n   * @implements FrameRenderable\n   */\n  async prepareFrame(_timeMs: number, _signal: AbortSignal): Promise<void> {\n    // No preparation needed - FrameController handles dependencies via priority\n  }\n\n  /**\n   * Synchronous render - copies canvas from target element.\n   * @implements FrameRenderable\n   */\n  renderFrame(_timeMs: number): void {\n    if (this.targetElement) {\n      this.copyFromTarget(this.targetElement);\n    }\n  }\n\n  // ============================================================================\n  // End FrameRenderable Implementation\n  // ============================================================================\n\n  protected updated(): void {\n    if (this.targetElement) {\n      this.copyFromTarget(this.targetElement);\n    }\n  }\n\n  // Target resolution is handled by TargetController. No implicit discovery.\n\n  private getSourceCanvas(from: Element): HTMLCanvasElement | null {\n    const anyEl = from as any;\n    if (\"canvasElement\" in anyEl) {\n      return anyEl.canvasElement ?? null;\n    }\n    const sr = (from as HTMLElement).shadowRoot;\n    if (sr) {\n      const c = sr.querySelector(\"canvas\");\n      return (c as HTMLCanvasElement) ?? null;\n    }\n    return null;\n  }\n\n  private copyFromTarget(target: Element) {\n    const dst = this.canvasRef.value;\n    const src = this.getSourceCanvas(target);\n    if (!dst || !src) return;\n    if (!src.width || !src.height) return;\n\n    // Match source pixel size for a faithful mirror; layout scaling is handled by CSS\n    if (dst.width !== src.width || dst.height !== src.height) {\n      dst.width = src.width;\n      dst.height = src.height;\n    }\n\n    const ctx = dst.getContext(\"2d\", { willReadFrequently: true });\n    if (!ctx) return;\n    ctx.drawImage(src, 0, 0, dst.width, dst.height);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-surface\": EFSurface;\n  }\n}\n"],"mappings":";;;;;;;AAQO,sBAAMA,oBAAkB,WAAsC;;;mBAgBvD,WAA8B;uBAOI;gBAGrC;;;gBAzBO,CACd,GAAG;;;;;;;;;;;MAYJ;;CAMD,oBAAsC,IAAI,iBAAiB,KAAK;CAQhE,SAAS;AACP,SAAO,IAAI,WAAW,IAAI,KAAK,UAAU,CAAC;;CAI5C,IAAI,gBAAqB;EAEvB,MAAMC,SAAc,KAAK;AACzB,MAAI,UAAU,mBAAmB,OAC/B,QAAO,OAAO;EAGhB,IAAIC,OAAY,KAAK,QAAQ,eAAe;AAC5C,SAAO,MAAM,gBACX,QAAO,KAAK;AAEd,SAAO;;CAGT,IAAI,gBAAwB;AAC1B,SAAO,KAAK,eAAe,iBAAiB;;CAG9C,IAAI,aAAqB;AACvB,SAAO,KAAK,eAAe,cAAc;;CAG3C,IAAI,cAAsB;AACxB,SAAO,KAAK,eAAe,eAAe;;CAG5C,IAAI,YAAoB;AACtB,SAAO,KAAK,cAAc,KAAK;;;;;;CAWjC,cAAc,SAA6B;AAIzC,SAAO;GACL,kBAAkB;GAClB,SAJgB,CAAC,CAAC,KAAK;GAKvB,UAAU;GACX;;;;;;;CAQH,MAAM,aAAa,SAAiB,SAAqC;;;;;CAQzE,YAAY,SAAuB;AACjC,MAAI,KAAK,cACP,MAAK,eAAe,KAAK,cAAc;;CAQ3C,AAAU,UAAgB;AACxB,MAAI,KAAK,cACP,MAAK,eAAe,KAAK,cAAc;;CAM3C,AAAQ,gBAAgB,MAAyC;EAC/D,MAAM,QAAQ;AACd,MAAI,mBAAmB,MACrB,QAAO,MAAM,iBAAiB;EAEhC,MAAM,KAAM,KAAqB;AACjC,MAAI,GAEF,QADU,GAAG,cAAc,SAAS,IACD;AAErC,SAAO;;CAGT,AAAQ,eAAe,QAAiB;EACtC,MAAM,MAAM,KAAK,UAAU;EAC3B,MAAM,MAAM,KAAK,gBAAgB,OAAO;AACxC,MAAI,CAAC,OAAO,CAAC,IAAK;AAClB,MAAI,CAAC,IAAI,SAAS,CAAC,IAAI,OAAQ;AAG/B,MAAI,IAAI,UAAU,IAAI,SAAS,IAAI,WAAW,IAAI,QAAQ;AACxD,OAAI,QAAQ,IAAI;AAChB,OAAI,SAAS,IAAI;;EAGnB,MAAM,MAAM,IAAI,WAAW,MAAM,EAAE,oBAAoB,MAAM,CAAC;AAC9D,MAAI,CAAC,IAAK;AACV,MAAI,UAAU,KAAK,GAAG,GAAG,IAAI,OAAO,IAAI,OAAO;;;YAtHhD,OAAO;YAGP,SAAS,EAAE,MAAM,QAAQ,CAAC;wBA1B5B,cAAc,aAAa"}

package/dist/elements/EFTemporal.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFTemporal.js","names":["isTimegroupCalculatingDurationFn:\n  | ((timegroup: EFTimegroup | undefined) => boolean)\n  | null","fallbackFn: (timegroup: EFTimegroup | undefined) => boolean","elements: Array<TemporalMixinInterface & HTMLElement>","assignedElements: Element[]","temporalCache: Map<Element, TemporalMixinInterface[]>","host: EFTimegroup","temporal: TemporalMixinInterface & LitElement","#lastKnownTimeMs","#contentReadyState","state","#parentTimegroup","#ownCurrentTimeController","#rootTimegroupLocked","#loop","#parentTemporal","#offsetMs","#currentTimeMs"],"sources":["../../src/elements/EFTemporal.ts"],"sourcesContent":["import { consume, createContext } from \"@lit/context\";\nimport type { LitElement, ReactiveController } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { PlaybackController } from \"../gui/PlaybackController.js\";\nimport { durationConverter } from \"./durationConverter.js\";\nimport type { EFTimegroup } from \"./EFTimegroup.js\";\n// Lazy import to break circular dependency: EFTemporal -> EFTimegroup -> EFMedia -> EFTemporal\n// isTimegroupCalculatingDuration is only used at runtime in a getter, so we can import it lazily\n// Use a module-level variable that gets set when EFTimegroup module loads\nlet isTimegroupCalculatingDurationFn:\n  | ((timegroup: EFTimegroup | undefined) => boolean)\n  | null = null;\n\n// This function will be called by EFTimegroup when it loads to register the function\nexport const registerIsTimegroupCalculatingDuration = (\n  fn: (timegroup: EFTimegroup | undefined) => boolean,\n) => {\n  isTimegroupCalculatingDurationFn = fn;\n};\n\nconst getIsTimegroupCalculatingDuration = (): ((\n  timegroup: EFTimegroup | undefined,\n) => boolean) => {\n  if (isTimegroupCalculatingDurationFn) {\n    return isTimegroupCalculatingDurationFn as (\n      timegroup: EFTimegroup | undefined,\n    ) => boolean;\n  }\n\n  // If not registered yet, try to import synchronously (only works if module is already loaded)\n  // This is a fallback for cases where EFTimegroup hasn't called registerIsTimegroupCalculatingDuration\n  // In practice, EFTimegroup will call registerIsTimegroupCalculatingDuration when it loads\n  let fallbackFn: (timegroup: EFTimegroup | undefined) => boolean = () => false;\n  try {\n    // Access the function via a global or try to get it from the module cache\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const efTimegroupModule = (globalThis as any).__EFTimegroupModule;\n    if (efTimegroupModule?.isTimegroupCalculatingDuration) {\n      fallbackFn = efTimegroupModule.isTimegroupCalculatingDuration;\n    }\n  } catch {\n    // Use default fallback\n  }\n  isTimegroupCalculatingDurationFn = fallbackFn;\n  return fallbackFn;\n};\n\nexport const timegroupContext = createContext<EFTimegroup>(\n  Symbol(\"timeGroupContext\"),\n);\n\n// ============================================================================\n// Core Concept 1: Temporal Role\n// ============================================================================\n// A temporal element is either a root (controls its own playback) or a child\n// (delegates playback to its root timegroup). This is the fundamental invariant.\n// ============================================================================\n\n// ============================================================================\n// Core Concept 0: Content Readiness Protocol\n// ============================================================================\n// Every temporal element exposes a contentReadyState property and two events:\n//   readystatechange — fires on state transitions (idle, loading, ready, error)\n//   contentchange   — fires when renderable output is invalidated\n//\n// The property solves late-subscriber: consumers check it on subscribe.\n// Events are non-bubbling: containers (timegroups) explicitly aggregate.\n// ============================================================================\n\nexport type ContentReadyState = \"idle\" | \"loading\" | \"ready\" | \"error\";\nexport type ContentChangeReason = \"source\" | \"bounds\" | \"structure\" | \"content\";\n\ntype TemporalRole = \"root\" | \"child\";\n\nfunction determineTemporalRole(\n  parentTimegroup: EFTimegroup | undefined,\n): TemporalRole {\n  return parentTimegroup === undefined ? \"root\" : \"child\";\n}\n\n// ============================================================================\n// Core Concept 2: Duration Source\n// ============================================================================\n// Duration comes from one of three sources: intrinsic (media-based),\n// explicit (attribute), or inherited (from parent). This determines the base\n// duration before any modifications.\n// ============================================================================\n\ntype DurationSource = \"intrinsic\" | \"explicit\" | \"inherited\";\n\ninterface DurationSourceResult {\n  source: DurationSource;\n  baseDurationMs: number;\n}\n\nfunction determineDurationSource(\n  intrinsicDurationMs: number | undefined,\n  explicitDurationMs: number | undefined,\n  parentDurationMs: number | undefined,\n): DurationSourceResult {\n  if (intrinsicDurationMs !== undefined) {\n    return { source: \"intrinsic\", baseDurationMs: intrinsicDurationMs };\n  }\n  if (explicitDurationMs !== undefined) {\n    return { source: \"explicit\", baseDurationMs: explicitDurationMs };\n  }\n  if (parentDurationMs !== undefined) {\n    return { source: \"inherited\", baseDurationMs: parentDurationMs };\n  }\n  return { source: \"inherited\", baseDurationMs: 0 };\n}\n\n// ============================================================================\n// Core Concept 3: Duration Modification Strategy\n// ============================================================================\n// Duration can be modified by trimming (removing from edges) or source\n// manipulation (selecting a portion of the source). These are mutually\n// exclusive strategies.\n// ============================================================================\n\ntype DurationModificationStrategy = \"none\" | \"trimming\" | \"source-manipulation\";\n\ninterface DurationModificationState {\n  strategy: DurationModificationStrategy;\n  trimStartMs: number | undefined;\n  trimEndMs: number | undefined;\n  sourceInMs: number | undefined;\n  sourceOutMs: number | undefined;\n}\n\nfunction determineDurationModificationStrategy(\n  trimStartMs: number | undefined,\n  trimEndMs: number | undefined,\n  sourceInMs: number | undefined,\n  sourceOutMs: number | undefined,\n): DurationModificationState {\n  if (trimStartMs !== undefined || trimEndMs !== undefined) {\n    return {\n      strategy: \"trimming\",\n      trimStartMs,\n      trimEndMs,\n      sourceInMs: undefined,\n      sourceOutMs: undefined,\n    };\n  }\n  if (sourceInMs !== undefined || sourceOutMs !== undefined) {\n    return {\n      strategy: \"source-manipulation\",\n      trimStartMs: undefined,\n      trimEndMs: undefined,\n      sourceInMs,\n      sourceOutMs,\n    };\n  }\n  return {\n    strategy: \"none\",\n    trimStartMs: undefined,\n    trimEndMs: undefined,\n    sourceInMs: undefined,\n    sourceOutMs: undefined,\n  };\n}\n\nfunction evaluateModifiedDuration(\n  baseDurationMs: number,\n  modification: DurationModificationState,\n): number {\n  if (baseDurationMs === 0) {\n    return 0;\n  }\n\n  switch (modification.strategy) {\n    case \"trimming\": {\n      const trimmedDurationMs =\n        baseDurationMs -\n        (modification.trimStartMs ?? 0) -\n        (modification.trimEndMs ?? 0);\n      return Math.max(0, trimmedDurationMs);\n    }\n    case \"source-manipulation\": {\n      const sourceInMs = modification.sourceInMs ?? 0;\n      const sourceOutMs = modification.sourceOutMs ?? baseDurationMs;\n      if (sourceInMs >= sourceOutMs) {\n        return 0;\n      }\n      return sourceOutMs - sourceInMs;\n    }\n    case \"none\":\n      return baseDurationMs;\n  }\n}\n\n// ============================================================================\n// Core Concept 4: Start Time Calculation Strategy\n// ============================================================================\n// Start time is calculated differently based on parent timegroup mode:\n// - Sequence mode: based on previous sibling\n// - Other modes: based on parent start + offset\n// ============================================================================\n\ntype StartTimeStrategy = \"sequence\" | \"offset\";\n\nfunction determineStartTimeStrategy(\n  parentTimegroup: EFTimegroup | undefined,\n): StartTimeStrategy {\n  if (!parentTimegroup) {\n    return \"offset\";\n  }\n  return parentTimegroup.mode === \"sequence\" ? \"sequence\" : \"offset\";\n}\n\nfunction evaluateStartTimeForSequence(\n  _element: TemporalMixinInterface & HTMLElement,\n  parentTimegroup: EFTimegroup,\n  siblingTemporals: TemporalMixinInterface[],\n  ownIndex: number,\n): number {\n  if (ownIndex === 0) {\n    return parentTimegroup.startTimeMs;\n  }\n  const previous = siblingTemporals[ownIndex - 1];\n  if (!previous) {\n    throw new Error(\"Previous temporal element not found\");\n  }\n  return previous.startTimeMs + previous.durationMs - parentTimegroup.overlapMs;\n}\n\nfunction evaluateStartTimeForOffset(\n  parentTimegroup: EFTimegroup,\n  offsetMs: number,\n): number {\n  return parentTimegroup.startTimeMs + offsetMs;\n}\n\nfunction evaluateStartTime(\n  element: TemporalMixinInterface & HTMLElement,\n  parentTimegroup: EFTimegroup | undefined,\n  offsetMs: number,\n  getSiblingTemporals: (parent: EFTimegroup) => TemporalMixinInterface[],\n): number {\n  if (!parentTimegroup) {\n    return 0;\n  }\n\n  const strategy = determineStartTimeStrategy(parentTimegroup);\n  switch (strategy) {\n    case \"sequence\": {\n      const siblingTemporals = getSiblingTemporals(parentTimegroup);\n      const ownIndex = siblingTemporals.indexOf(element);\n      if (ownIndex === -1) {\n        return 0;\n      }\n      return evaluateStartTimeForSequence(\n        element,\n        parentTimegroup,\n        siblingTemporals,\n        ownIndex,\n      );\n    }\n    case \"offset\":\n      return evaluateStartTimeForOffset(parentTimegroup, offsetMs);\n  }\n}\n\n// ============================================================================\n// Core Concept 5: Current Time Source\n// ============================================================================\n// Current time comes from one of three sources: playback controller (root\n// elements), root timegroup (child elements), or local storage (fallback).\n// ============================================================================\n\ntype CurrentTimeSource = \"playback-controller\" | \"root-timegroup\" | \"local\";\n\ninterface CurrentTimeSourceResult {\n  source: CurrentTimeSource;\n  timeMs: number;\n}\n\nfunction determineCurrentTimeSource(\n  playbackController: PlaybackController | undefined,\n  rootTimegroup: EFTimegroup | undefined,\n  isRootTimegroup: boolean,\n  localTimeMs: number,\n  startTimeMs: number,\n  durationMs: number,\n): CurrentTimeSourceResult {\n  if (playbackController) {\n    const timeMs = Math.min(\n      Math.max(0, playbackController.currentTimeMs),\n      durationMs,\n    );\n    return { source: \"playback-controller\", timeMs };\n  }\n\n  if (rootTimegroup && !isRootTimegroup) {\n    const timeMs = Math.min(\n      Math.max(0, rootTimegroup.currentTimeMs - startTimeMs),\n      durationMs,\n    );\n    return { source: \"root-timegroup\", timeMs };\n  }\n\n  const timeMs = Math.min(Math.max(0, localTimeMs), durationMs);\n  return { source: \"local\", timeMs };\n}\n\nexport declare class TemporalMixinInterface {\n  playbackController?: PlaybackController;\n  playing: boolean;\n  loop: boolean;\n  play(): void;\n  pause(): void;\n\n  get hasOwnDuration(): boolean;\n  /**\n   * Whether the element has a duration set as an attribute.\n   */\n  get hasExplicitDuration(): boolean;\n\n  get sourceStartMs(): number;\n\n  /**\n   * Used to trim the start of the media.\n   *\n   * This can be set in either seconds or milliseconds.\n   *\n   * For example, `trimstart=\"10s\"` is equivalent to `trimstart=\"10000ms\"`.\n   *\n   * @domAttribute \"trimstart\"\n   */\n  get trimStartMs(): number | undefined;\n\n  /**\n   * Used to trim the end of the media.\n   *\n   * This can be set in either seconds or milliseconds.\n   *\n   * For example, `trimend=\"10s\"` is equivalent to `trimend=\"10000ms\"`.\n   *\n   * @domAttribute \"trimend\"\n   */\n  get trimEndMs(): number;\n\n  set trimStartMs(value: number | undefined);\n  set trimEndMs(value: number | undefined);\n  set trimstart(value: string | undefined);\n  set trimend(value: string | undefined);\n\n  /**\n   * The source in time of the element.\n   *\n   * This is an amount of time to trim off the beginning of the media.\n   *\n   * This can be set in either seconds or milliseconds.\n   *\n   * For example, `sourcein=\"10s\"` is equivalent to `sourcein=\"10000ms\"`.\n   *\n   * If the sourcein time is greater than the duration of the media, the media\n   * will not be played.\n   *\n   * If the media is 20 seconds long, and the `sourcein` value is set to `10s`, the\n   * media will play for 10 seconds, starting at the 10 second mark.\n   *\n   * Can be used in conjunction with `sourceout` to create a trimmed media.\n   *\n   * @domAttribute \"sourcein\"\n   */\n  get sourceInMs(): number | undefined;\n\n  /**\n   * The source out time of the element.\n   *\n   * This is the point in time in the media that will be treated as the end of\n   * the media.\n   *\n   * This can be set in either seconds or milliseconds.\n   *\n   * For example, `sourceout=\"10s\"` is equivalent to `sourceout=\"10000ms\"`.\n   *\n   * If the sourceout time is greater than the duration of the media, the media\n   * will play until the end of the media.\n   *\n   * If the media is 20 seconds long, and the `sourceout` value is set to `10s`,\n   * the media will play for 10 seconds, starting at zero seconds and ending at\n   * the 10 second mark.\n   *\n   * Can be used in conjunction with `sourcein` to create a trimmed media.\n   *\n   * @domAttribute \"sourceout\"\n   */\n  get sourceOutMs(): number | undefined;\n\n  set sourceInMs(value: number | undefined);\n  set sourceOutMs(value: number | undefined);\n  set sourcein(value: string | undefined);\n  set sourceout(value: string | undefined);\n\n  /**\n   * @domAttribute \"duration\"\n   */\n  get durationMs(): number;\n\n  get explicitDurationMs(): number | undefined;\n\n  get intrinsicDurationMs(): number | undefined;\n\n  /**\n   * The start time of the element within its root timegroup in milliseconds.\n   *\n   * This is an absolute time according to the highest scoped timegroup the media element is contained within.\n   *\n   * The calculated value will depend on the mode of the timegroup and the offset of the media element.\n   *\n   * If the parent time group is in `sequence` mode, the start time will be the\n   * start time of the previous sibling element plus the previous sibling's duration\n   * minus the overlap of the previous sibling and the current sibling.\n   *\n   * If the parent time group is in `contain` or `fixed` mode, the start time will be\n   * the start time of the parent time group plus the offset of the media element.\n   */\n  get startTimeMs(): number;\n  /**\n   * The end time of the element within its root timegroup in milliseconds.\n   *\n   * This is an absolute time according to the highest scoped timegroup the media\n   * element is contained within. Computed by adding the media's duration to its\n   * start time.\n   *\n   * If the media element has been trimmed, its end time will be calculated according it\n   * its trimmed duration, not its original duration.\n   */\n  get endTimeMs(): number;\n  /**\n   * The start time of the element within its parent timegroup in milliseconds.\n   *\n   * This is a relative time according to the closest timegroup the media element\n   * is contained within. Unless the media element has been given any kind of specific offset\n   * it is common for this time to be zero.\n   */\n  get startTimeWithinParentMs(): number;\n\n  /**\n   * The current time of the element in milliseconds.\n   *\n   * This is a relative time according to the closest timegroup the media element\n   * is contained within.\n   *\n   * This is suitable for determining the percentage of the media that has been\n   * played.\n   */\n  get ownCurrentTimeMs(): number;\n\n  /**\n   * Set the base local time (ms) used by ownCurrentTimeMs when no playback\n   * controller is present. Used by seekForRender() on render clones.\n   * @internal\n   */\n  _setLocalTimeMs(value: number): void;\n\n  /**\n   * Element's current time for progress calculation.\n   * For timegroups: their timeline currentTimeMs\n   * For other temporal elements: their ownCurrentTimeMs\n   */\n  get currentTimeMs(): number;\n  set currentTimeMs(value: number);\n  /**\n   * The current time of the element in milliseconds, adjusted for trimming.\n   *\n   * This is suitable for mapping to internal media time codes for audio/video\n   * elements.\n   *\n   * For example, if the media has a `sourcein` value of 10s, when `ownCurrentTimeMs` is 0s,\n   * `currentSourceTimeMs` will be 10s.\n   *\n   *            sourcein=10s     sourceout=10s\n   * /         /                /\n   * |--------|=================|---------|\n   *          ^\n   *          |_\n   *            currentSourceTimeMs === 10s\n   *          |_\n   *            ownCurrentTimeMs === 0s\n   */\n  get currentSourceTimeMs(): number;\n\n  set duration(value: string);\n  get duration(): string;\n\n  /**\n   * The offset of the element within its parent timegroup in milliseconds.\n   *\n   * This can be set in either seconds or milliseconds.\n   *\n   * For example, `offset=\"10s\"` is equivalent to `offset=\"10000ms\"`.\n   *\n   * This can be used to create a negative or positive offset for the start time of the media.\n   *\n   * This will change the start time of the media relative to it's otherwise normal start time.\n   *\n   * The duration of the element, or it's parent, or the start and end time of it's temporal siblings will not\n   * be affected by this offset.\n   *\n   * @domAttribute \"offset\"\n   */\n  set offset(value: string);\n  get offset(): string;\n\n  /**\n   * A convenience property for getting the nearest containing timegroup of the media element.\n   */\n  parentTimegroup?: EFTimegroup;\n\n  /**\n   * A convenience property for getting the root timegroup of the media element.\n   */\n  rootTimegroup?: EFTimegroup;\n\n  didBecomeRoot(): void;\n  didBecomeChild(): void;\n\n  /**\n   * The readiness state of this element's content.\n   * \"idle\" — no content / not connected\n   * \"loading\" — async resources are loading\n   * \"ready\" — element can render / extract frames\n   * \"error\" — resource loading failed\n   *\n   * @domAttribute \"content-ready-state\"\n   */\n  contentReadyState: ContentReadyState;\n\n  /**\n   * Transition to a new readiness state.\n   * Dispatches a non-bubbling `readystatechange` CustomEvent if the state changed.\n   */\n  setContentReadyState(state: ContentReadyState): void;\n\n  /**\n   * Dispatch a non-bubbling `contentchange` CustomEvent.\n   * Signals that cached renderable output is stale.\n   */\n  emitContentChange(reason: ContentChangeReason): void;\n\n  /**\n   * Whether this element should auto-transition to \"ready\" after first update.\n   * Override to return false for elements with async loading (EFMedia, EFCaptions).\n   */\n  shouldAutoReady(): boolean;\n\n  updateComplete: Promise<boolean>;\n}\n\nexport const isEFTemporal = (obj: any): obj is TemporalMixinInterface =>\n  obj[EF_TEMPORAL];\n\nconst EF_TEMPORAL = Symbol(\"EF_TEMPORAL\");\n\nexport interface TemporalCollectionResult {\n  /** Temporal elements to process (visible + pruned roots). */\n  elements: Array<TemporalMixinInterface & HTMLElement>;\n  /** Temporal elements whose subtrees were pruned (invisible containers). */\n  pruned: Set<TemporalMixinInterface & HTMLElement>;\n}\n\nexport const deepGetTemporalElements = (\n  element: Element,\n  timeMs?: number,\n): TemporalCollectionResult => {\n  const elements: Array<TemporalMixinInterface & HTMLElement> = [];\n  const pruned = new Set<TemporalMixinInterface & HTMLElement>();\n\n  const walk = (el: Element) => {\n    const children = getChildrenIncludingSlotted(el);\n\n    for (const child of children) {\n      if (isEFTemporal(child)) {\n        const temporal = child as TemporalMixinInterface & HTMLElement;\n        elements.push(temporal);\n\n        // Prune: if a time was provided and this temporal element is outside\n        // its time range, skip its entire subtree. The caller is responsible\n        // for setting display:none on these pruned roots; their children are\n        // hidden by containment and never visited.\n        if (timeMs !== undefined) {\n          const startMs = temporal.startTimeMs;\n          const endMs = temporal.endTimeMs;\n          if (endMs > startMs && (timeMs < startMs || timeMs >= endMs)) {\n            pruned.add(temporal);\n            continue; // skip subtree\n          }\n        }\n      }\n      walk(child);\n    }\n  };\n\n  walk(element);\n  return { elements, pruned };\n};\n\n/**\n * Gets all child elements including slotted content for shadow DOM elements.\n * For elements with shadow DOM that contain slots, this returns the assigned\n * elements (slotted content) instead of just the shadow DOM children.\n */\nconst getChildrenIncludingSlotted = (element: Element): Element[] => {\n  // If element has shadowRoot with slots, get assigned elements\n  if (element.shadowRoot) {\n    const slots = element.shadowRoot.querySelectorAll(\"slot\");\n    if (slots.length > 0) {\n      const assignedElements: Element[] = [];\n      for (const slot of slots) {\n        assignedElements.push(...slot.assignedElements());\n      }\n      // Also include shadow DOM children that aren't slots (for mixed content)\n      for (const child of element.shadowRoot.children) {\n        if (child.tagName !== \"SLOT\") {\n          assignedElements.push(child);\n        }\n      }\n      return assignedElements;\n    }\n  }\n\n  // Fallback to regular children\n  return Array.from(element.children);\n};\n\nlet temporalCache: Map<Element, TemporalMixinInterface[]>;\nlet temporalCacheResetScheduled = false;\nexport const resetTemporalCache = () => {\n  temporalCache = new Map();\n  if (\n    typeof requestAnimationFrame !== \"undefined\" &&\n    !temporalCacheResetScheduled\n  ) {\n    temporalCacheResetScheduled = true;\n    requestAnimationFrame(() => {\n      temporalCacheResetScheduled = false;\n      resetTemporalCache();\n    });\n  }\n};\nresetTemporalCache();\n\nexport const shallowGetTemporalElements = (\n  element: Element,\n  temporals: TemporalMixinInterface[] = [],\n) => {\n  const cachedResult = temporalCache.get(element);\n  if (cachedResult) {\n    return cachedResult;\n  }\n  // Get children to walk - handle both regular children and slotted content\n  const children = getChildrenIncludingSlotted(element);\n\n  for (const child of children) {\n    if (isEFTemporal(child)) {\n      temporals.push(child);\n    } else {\n      shallowGetTemporalElements(child, temporals);\n    }\n  }\n  temporalCache.set(element, temporals);\n  return temporals;\n};\n\nexport class OwnCurrentTimeController implements ReactiveController {\n  #lastKnownTimeMs: number | undefined = undefined;\n\n  constructor(\n    private host: EFTimegroup,\n    private temporal: TemporalMixinInterface & LitElement,\n  ) {\n    host.addController(this);\n  }\n\n  hostUpdated() {\n    // CRITICAL FIX: Only trigger child updates when root's currentTimeMs actually changes.\n    // Previously, this fired on EVERY root update, causing 40+ child updates per root update.\n    // With nested timegroups, this created cascading updates that locked up the main thread.\n    const currentTimeMs = this.host.currentTimeMs;\n    if (this.#lastKnownTimeMs === currentTimeMs) {\n      return; // Time hasn't changed, no need to update children\n    }\n    this.#lastKnownTimeMs = currentTimeMs;\n\n    // Defer update via queueMicrotask to avoid Lit warning about scheduling\n    // updates during hostUpdated. Unlike setTimeout(0) this fires as a microtask,\n    // so it resolves between await points without yielding a full macrotask turn\n    // (eliminating 4-16ms dead time per frame in the render pipeline).\n    queueMicrotask(() => {\n      this.temporal.requestUpdate(\"ownCurrentTimeMs\");\n    });\n  }\n\n  remove() {\n    this.host.removeController(this);\n  }\n}\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\nlet startTimeMsCache = new WeakMap<Element, number>();\nlet startTimeMsCacheResetScheduled = false;\nconst resetStartTimeMsCache = () => {\n  startTimeMsCache = new WeakMap();\n  if (\n    typeof requestAnimationFrame !== \"undefined\" &&\n    !startTimeMsCacheResetScheduled\n  ) {\n    startTimeMsCacheResetScheduled = true;\n    requestAnimationFrame(() => {\n      startTimeMsCacheResetScheduled = false;\n      resetStartTimeMsCache();\n    });\n  }\n};\nresetStartTimeMsCache();\n\nexport const flushStartTimeMsCache = () => {\n  startTimeMsCache = new WeakMap();\n};\n\nexport const EFTemporal = <T extends Constructor<LitElement>>(\n  superClass: T,\n) => {\n  class TemporalMixinClass extends superClass {\n    // ---- Content Readiness Protocol ----\n\n    #contentReadyState: ContentReadyState = \"idle\";\n\n    @property({ type: String, reflect: true, attribute: \"content-ready-state\" })\n    get contentReadyState(): ContentReadyState {\n      return this.#contentReadyState;\n    }\n\n    set contentReadyState(value: ContentReadyState) {\n      this.setContentReadyState(value);\n    }\n\n    setContentReadyState(state: ContentReadyState): void {\n      if (state === this.#contentReadyState) return;\n      const old = this.#contentReadyState;\n      this.#contentReadyState = state;\n      this.requestUpdate(\"contentReadyState\", old);\n      this.dispatchEvent(\n        new CustomEvent(\"readystatechange\", {\n          detail: { state },\n          bubbles: false,\n          composed: false,\n        }),\n      );\n    }\n\n    emitContentChange(reason: ContentChangeReason): void {\n      this.dispatchEvent(\n        new CustomEvent(\"contentchange\", {\n          detail: { reason },\n          bubbles: false,\n          composed: false,\n        }),\n      );\n    }\n\n    shouldAutoReady(): boolean {\n      return true;\n    }\n\n    // ---- End Content Readiness Protocol ----\n\n    #ownCurrentTimeController?: OwnCurrentTimeController;\n\n    #parentTimegroup?: EFTimegroup;\n    #rootTimegroupLocked = false; // When true, rootTimegroup won't be auto-recalculated\n\n    @consume({ context: timegroupContext, subscribe: true })\n    set parentTimegroup(value: EFTimegroup | undefined) {\n      const oldParent = this.#parentTimegroup;\n      const oldRole = determineTemporalRole(oldParent);\n      const newRole = determineTemporalRole(value);\n\n      this.#parentTimegroup = value;\n\n      this.#ownCurrentTimeController?.remove();\n      // Only auto-calculate rootTimegroup if it hasn't been locked\n      // (locked means it was manually set, e.g., for render clones)\n      if (!this.#rootTimegroupLocked) {\n        this.rootTimegroup = this.getRootTimegroup();\n      }\n      if (this.rootTimegroup) {\n        this.#ownCurrentTimeController = new OwnCurrentTimeController(\n          this.rootTimegroup,\n          this as InstanceType<Constructor<TemporalMixinInterface> & T>,\n        );\n      }\n\n      // Only trigger callbacks if role actually changed\n      if (oldRole !== newRole) {\n        if (newRole === \"root\") {\n          this.didBecomeRoot();\n        } else {\n          this.didBecomeChild();\n        }\n      }\n    }\n\n    /**\n     * Lock the rootTimegroup to prevent auto-recalculation.\n     * Used for render clones where the root must be fixed.\n     * @internal\n     */\n    lockRootTimegroup() {\n      this.#rootTimegroupLocked = true;\n    }\n\n    disconnectedCallback() {\n      super.disconnectedCallback();\n\n      // Skip teardown when being moved for canvas preview capture.\n      // The element is temporarily reparented to a capture canvas for native\n      // rendering but must retain its PlaybackController and animation state.\n      if ((this as any).canvasPreviewActive) return;\n\n      this.#ownCurrentTimeController?.remove();\n\n      if (this.playbackController) {\n        this.playbackController.remove();\n        this.playbackController = undefined;\n      }\n\n      // Clean up tracked animations to prevent memory leaks\n      // Use dynamic import to avoid circular dependency with updateAnimations\n      import(\"./updateAnimations.js\").then(({ cleanupTrackedAnimations }) => {\n        cleanupTrackedAnimations(this);\n      });\n    }\n\n    connectedCallback() {\n      super.connectedCallback();\n\n      // Skip re-initialization when being moved for canvas preview capture.\n      // The element is temporarily reparented to a capture canvas for native\n      // rendering — root detection and PlaybackController creation must be\n      // skipped to avoid an infinite wrapWithWorkbench → initCanvasMode loop.\n      if ((this as any).canvasPreviewActive) return;\n\n      this.#ownCurrentTimeController?.remove();\n\n      // Root detection: Check DOM structure to determine if this is truly a root.\n      //\n      // We can't rely on Lit Context (parentTimegroup) because context propagates\n      // asynchronously during update cycles. Children may complete their first update\n      // before ancestors have provided context, causing them to incorrectly think\n      // they're roots.\n      //\n      // Instead, we check if there's an ancestor ef-timegroup in the DOM. This is\n      // reliable because DOM structure is established synchronously at connection time.\n      //\n      // If there's NO ancestor timegroup, this is a true root → create PlaybackController.\n      // If there IS an ancestor, wait for context to propagate (handled by parentTimegroup setter).\n      // Note: closest() includes self, so we check from parentElement to find true ancestors.\n      const hasAncestorTimegroup =\n        this.parentElement?.closest(\"ef-timegroup\") != null;\n\n      if (!hasAncestorTimegroup && !this.playbackController) {\n        // True root: no ancestor timegroup in DOM\n        // Defer slightly to allow element to fully initialize\n        this.updateComplete.then(() => {\n          if (!this.isConnected) return;\n          if (!this.playbackController) {\n            this.didBecomeRoot();\n          }\n        });\n      }\n      // For elements WITH ancestors, the parentTimegroup setter will be called\n      // when Lit Context propagates, and if the role changes, didBecomeRoot/didBecomeChild\n      // will be called appropriately.\n\n      // Default readiness: trivially-ready elements (no async loading)\n      // transition to \"ready\" after first update. Subclasses with async\n      // loading (EFMedia, EFCaptions) override shouldAutoReady() to return\n      // false and manage their own readiness lifecycle.\n      if (this.shouldAutoReady()) {\n        this.updateComplete.then(() => {\n          if (!this.isConnected) return;\n          if (this.#contentReadyState === \"idle\") {\n            this.setContentReadyState(\"ready\");\n          }\n        });\n      }\n    }\n\n    get parentTimegroup() {\n      return this.#parentTimegroup;\n    }\n\n    playbackController?: PlaybackController;\n\n    get playing(): boolean {\n      if (!this.playbackController) {\n        return false;\n      }\n      return this.playbackController.playing;\n    }\n\n    set playing(value: boolean) {\n      if (!this.playbackController) {\n        console.warn(\"Cannot set playing on non-root temporal element\", this);\n        return;\n      }\n      this.playbackController.setPlaying(value);\n    }\n\n    play(): void {\n      if (!this.playbackController) {\n        console.warn(\"play() called on non-root temporal element\", this);\n        return;\n      }\n      this.playbackController.play();\n    }\n\n    pause(): void {\n      if (!this.playbackController) {\n        console.warn(\"pause() called on non-root temporal element\", this);\n        return;\n      }\n      this.playbackController.pause();\n    }\n\n    @property({ type: Boolean, reflect: true, attribute: \"loop\" })\n    get loop(): boolean {\n      return this.playbackController?.loop ?? this.#loop;\n    }\n\n    set loop(value: boolean) {\n      const oldValue = this.#loop;\n      this.#loop = value;\n      if (this.playbackController) {\n        this.playbackController.setLoop(value);\n      }\n      this.requestUpdate(\"loop\", oldValue);\n    }\n\n    @property({\n      type: String,\n      attribute: \"offset\",\n      converter: durationConverter,\n    })\n    private _offsetMs = 0;\n\n    @property({\n      type: Number,\n      attribute: \"duration\",\n      converter: durationConverter,\n    })\n    private _durationMs?: number;\n\n    set duration(value: string | undefined) {\n      if (value !== undefined) {\n        this.setAttribute(\"duration\", value);\n      } else {\n        this.removeAttribute(\"duration\");\n      }\n    }\n\n    @property({\n      type: Number,\n      attribute: \"trimstart\",\n      converter: durationConverter,\n    })\n    private _trimStartMs: number | undefined = undefined;\n\n    get trimStartMs() {\n      if (this._trimStartMs === undefined) {\n        return undefined;\n      }\n      return Math.min(\n        Math.max(this._trimStartMs, 0),\n        this.intrinsicDurationMs ?? 0,\n      );\n    }\n\n    set trimStartMs(value: number | undefined) {\n      this._trimStartMs = value;\n    }\n\n    @property({\n      type: Number,\n      attribute: \"trimend\",\n      converter: durationConverter,\n    })\n    private _trimEndMs: number | undefined = undefined;\n\n    get trimEndMs() {\n      if (this._trimEndMs === undefined) {\n        return undefined;\n      }\n      return Math.min(this._trimEndMs, this.intrinsicDurationMs ?? 0);\n    }\n\n    set trimEndMs(value: number | undefined) {\n      this._trimEndMs = value;\n    }\n\n    @property({\n      type: Number,\n      attribute: \"sourcein\",\n      converter: durationConverter,\n    })\n    private _sourceInMs: number | undefined = undefined;\n\n    get sourceInMs() {\n      if (this._sourceInMs === undefined) {\n        return undefined;\n      }\n      return Math.max(this._sourceInMs, 0);\n    }\n\n    set sourceInMs(value: number | undefined) {\n      this._sourceInMs = value;\n    }\n\n    @property({\n      type: Number,\n      attribute: \"sourceout\",\n      converter: durationConverter,\n    })\n    private _sourceOutMs: number | undefined = undefined;\n\n    get sourceOutMs() {\n      if (this._sourceOutMs === undefined) {\n        return undefined;\n      }\n      if (\n        this.intrinsicDurationMs &&\n        this._sourceOutMs > this.intrinsicDurationMs\n      ) {\n        return this.intrinsicDurationMs;\n      }\n      return Math.max(this._sourceOutMs, 0);\n    }\n\n    set sourceOutMs(value: number | undefined) {\n      this._sourceOutMs = value;\n    }\n\n    override updated(changedProperties: Map<PropertyKey, unknown>): void {\n      super.updated?.(changedProperties);\n\n      // Re-render the current frame when source-mapping, trim, offset, or duration\n      // properties change (the visible frame changes even though currentTimeMs hasn't).\n      // Also render the initial frame when a standalone root becomes ready.\n      const sourceChanged =\n        changedProperties.has(\"_sourceInMs\") ||\n        changedProperties.has(\"_sourceOutMs\");\n      const trimChanged =\n        changedProperties.has(\"_trimStartMs\") ||\n        changedProperties.has(\"_trimEndMs\");\n      const becameReady =\n        changedProperties.has(\"contentReadyState\") &&\n        changedProperties.get(\"contentReadyState\") !== \"ready\" &&\n        this.contentReadyState === \"ready\";\n      const offsetChanged = changedProperties.has(\"_offsetMs\");\n      const durationChanged = changedProperties.has(\"_durationMs\");\n\n      if (\n        sourceChanged ||\n        trimChanged ||\n        becameReady ||\n        offsetChanged ||\n        durationChanged\n      ) {\n        // Render clones are sequenced via seekForRender — don't trigger autonomous re-renders,\n        // which would abort the in-progress seekForRender FrameController signal.\n        const isRenderClone = this.rootTimegroup?.hasAttribute(\n          \"data-no-playback-controller\",\n        );\n        if (this.rootTimegroup && !isRenderClone) {\n          this.rootTimegroup.requestFrameRender();\n        } else if (this.playbackController) {\n          this.playbackController.runThrottledFrameTask();\n        }\n      }\n    }\n\n    @property({\n      type: Number,\n      attribute: \"startoffset\",\n      converter: durationConverter,\n    })\n    private _startOffsetMs = 0;\n    public get startOffsetMs(): number {\n      return this._startOffsetMs;\n    }\n\n    @state()\n    rootTimegroup?: EFTimegroup = this.getRootTimegroup();\n\n    private getRootTimegroup(): EFTimegroup | undefined {\n      let parent =\n        this.tagName === \"EF-TIMEGROUP\" ? this : this.parentTimegroup;\n      while (parent?.parentTimegroup) {\n        parent = parent.parentTimegroup;\n      }\n      return parent as EFTimegroup | undefined;\n    }\n\n    get hasExplicitDuration() {\n      return this._durationMs !== undefined;\n    }\n\n    get explicitDurationMs() {\n      if (this.hasExplicitDuration) {\n        return this._durationMs;\n      }\n      return undefined;\n    }\n\n    get hasOwnDuration() {\n      return this.intrinsicDurationMs !== undefined || this.hasExplicitDuration;\n    }\n\n    get intrinsicDurationMs() {\n      return undefined;\n    }\n\n    get durationMs() {\n      // Prevent infinite loops: don't call parent.durationMs if parent is currently calculating\n      // Lazy import to break circular dependency: EFTemporal -> EFTimegroup -> EFMedia -> EFTemporal\n      const isTimegroupCalculatingDuration =\n        getIsTimegroupCalculatingDuration();\n      const parentDurationMs = isTimegroupCalculatingDuration(\n        this.parentTimegroup,\n      )\n        ? undefined\n        : this.parentTimegroup?.durationMs;\n      const durationSource = determineDurationSource(\n        this.intrinsicDurationMs,\n        this._durationMs,\n        parentDurationMs,\n      );\n\n      const modification = determineDurationModificationStrategy(\n        this.trimStartMs,\n        this.trimEndMs,\n        this.sourceInMs,\n        this.sourceOutMs,\n      );\n\n      return evaluateModifiedDuration(\n        durationSource.baseDurationMs,\n        modification,\n      );\n    }\n\n    get sourceStartMs() {\n      return this.trimStartMs ?? this.sourceInMs ?? 0;\n    }\n\n    #offsetMs() {\n      return this._offsetMs || 0;\n    }\n\n    #parentTemporal() {\n      let parent = this.parentElement;\n      while (parent && !isEFTemporal(parent)) {\n        parent = parent.parentElement;\n      }\n      return parent;\n    }\n\n    /**\n     * The start time of the element within its parent timegroup.\n     */\n    get startTimeWithinParentMs() {\n      const parent = this.#parentTemporal();\n      if (!parent) {\n        return 0;\n      }\n      return this.startTimeMs - parent.startTimeMs;\n    }\n\n    #loop = false;\n\n    get startTimeMs(): number {\n      const cachedStartTime = startTimeMsCache.get(this);\n      if (cachedStartTime !== undefined) {\n        return cachedStartTime;\n      }\n\n      const startTime = evaluateStartTime(\n        this as InstanceType<Constructor<TemporalMixinInterface> & T>,\n        this.parentTimegroup,\n        this.#offsetMs(),\n        (parent) => shallowGetTemporalElements(parent),\n      );\n\n      startTimeMsCache.set(this, startTime);\n      return startTime;\n    }\n\n    get endTimeMs(): number {\n      return this.startTimeMs + this.durationMs;\n    }\n\n    #currentTimeMs = 0;\n\n    /**\n     * Set the base local time (ms) used by ownCurrentTimeMs when no playback\n     * controller is present. Called by EFTimegroup.seekForRender() to keep the\n     * mixin's internal time in sync with the timegroup's own time state.\n     * @internal\n     */\n    _setLocalTimeMs(value: number) {\n      this.#currentTimeMs = value;\n    }\n\n    /**\n     * The current time of the element within itself.\n     * Compare with `currentTimeMs` to see the current time with respect to the root timegroup\n     */\n    get ownCurrentTimeMs(): number {\n      const timeSource = determineCurrentTimeSource(\n        this.playbackController,\n        this.rootTimegroup,\n        this.rootTimegroup === (this as any as EFTimegroup),\n        this.#currentTimeMs,\n        this.startTimeMs,\n        this.durationMs,\n      );\n      return timeSource.timeMs;\n    }\n\n    /**\n     * Element's current time for progress calculation.\n     * Non-timegroup temporal elements use their local time (ownCurrentTimeMs)\n     */\n    get currentTimeMs() {\n      return this.ownCurrentTimeMs;\n    }\n\n    set currentTimeMs(value: number) {\n      const role = determineTemporalRole(this.parentTimegroup);\n\n      // Apply current time based on role\n      switch (role) {\n        case \"root\":\n          if (this.playbackController) {\n            this.playbackController.currentTime = value / 1000;\n          } else {\n            this.#currentTimeMs = value;\n            this.requestUpdate(\"currentTimeMs\");\n          }\n          break;\n        case \"child\":\n          if (\n            this.rootTimegroup &&\n            this.rootTimegroup !== (this as any as EFTimegroup)\n          ) {\n            this.rootTimegroup.currentTimeMs = value;\n          } else {\n            this.#currentTimeMs = value;\n            this.requestUpdate(\"currentTimeMs\");\n          }\n          break;\n      }\n    }\n\n    /**\n     * Used to calculate the internal currentTimeMs of the element. This is useful\n     * for mapping to internal media time codes for audio/video elements.\n     */\n    get currentSourceTimeMs() {\n      const leadingTrimMs = this.sourceInMs || this.trimStartMs || 0;\n      return this.ownCurrentTimeMs + leadingTrimMs;\n    }\n\n    didBecomeRoot() {\n      // Don't create PlaybackController if:\n      // 1. Explicitly disabled via attribute (e.g., for render clones)\n      // 2. Already exists\n      // 3. In headless rendering mode (EF_FRAMEGEN active)\n      const noPlayback = (this as any).hasAttribute?.(\n        \"data-no-playback-controller\",\n      );\n      const isRendering =\n        typeof window !== \"undefined\" && \"FRAMEGEN_BRIDGE\" in window;\n      if (noPlayback || this.playbackController || isRendering) {\n        return;\n      }\n\n      this.playbackController = new PlaybackController(this as any);\n      if (this.#loop) {\n        this.playbackController.setLoop(this.#loop);\n      }\n    }\n\n    didBecomeChild() {\n      if (this.playbackController) {\n        this.playbackController.remove();\n        this.playbackController = undefined;\n      }\n    }\n  }\n\n  Object.defineProperty(TemporalMixinClass.prototype, EF_TEMPORAL, {\n    value: true,\n  });\n\n  return TemporalMixinClass as unknown as Constructor<TemporalMixinInterface> &\n    T;\n};\n"],"mappings":"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"}
+{"version":3,"file":"EFTemporal.js","names":["isTimegroupCalculatingDurationFn: ((timegroup: EFTimegroup | undefined) => boolean) | null","fallbackFn: (timegroup: EFTimegroup | undefined) => boolean","elements: Array<TemporalMixinInterface & HTMLElement>","assignedElements: Element[]","temporalCache: Map<Element, TemporalMixinInterface[]>","host: EFTimegroup","temporal: TemporalMixinInterface & LitElement","#lastKnownTimeMs","#contentReadyState","state","#parentTimegroup","#ownCurrentTimeController","#rootTimegroupLocked","#loop","#parentTemporal","#offsetMs","#currentTimeMs"],"sources":["../../src/elements/EFTemporal.ts"],"sourcesContent":["import { consume, createContext } from \"@lit/context\";\nimport type { LitElement, ReactiveController } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { PlaybackController } from \"../gui/PlaybackController.js\";\nimport { durationConverter } from \"./durationConverter.js\";\nimport type { EFTimegroup } from \"./EFTimegroup.js\";\n// Lazy import to break circular dependency: EFTemporal -> EFTimegroup -> EFMedia -> EFTemporal\n// isTimegroupCalculatingDuration is only used at runtime in a getter, so we can import it lazily\n// Use a module-level variable that gets set when EFTimegroup module loads\nlet isTimegroupCalculatingDurationFn: ((timegroup: EFTimegroup | undefined) => boolean) | null =\n  null;\n\n// This function will be called by EFTimegroup when it loads to register the function\nexport const registerIsTimegroupCalculatingDuration = (\n  fn: (timegroup: EFTimegroup | undefined) => boolean,\n) => {\n  isTimegroupCalculatingDurationFn = fn;\n};\n\nconst getIsTimegroupCalculatingDuration = (): ((timegroup: EFTimegroup | undefined) => boolean) => {\n  if (isTimegroupCalculatingDurationFn) {\n    return isTimegroupCalculatingDurationFn as (timegroup: EFTimegroup | undefined) => boolean;\n  }\n\n  // If not registered yet, try to import synchronously (only works if module is already loaded)\n  // This is a fallback for cases where EFTimegroup hasn't called registerIsTimegroupCalculatingDuration\n  // In practice, EFTimegroup will call registerIsTimegroupCalculatingDuration when it loads\n  let fallbackFn: (timegroup: EFTimegroup | undefined) => boolean = () => false;\n  try {\n    // Access the function via a global or try to get it from the module cache\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const efTimegroupModule = (globalThis as any).__EFTimegroupModule;\n    if (efTimegroupModule?.isTimegroupCalculatingDuration) {\n      fallbackFn = efTimegroupModule.isTimegroupCalculatingDuration;\n    }\n  } catch {\n    // Use default fallback\n  }\n  isTimegroupCalculatingDurationFn = fallbackFn;\n  return fallbackFn;\n};\n\nexport const timegroupContext = createContext<EFTimegroup>(Symbol(\"timeGroupContext\"));\n\n// ============================================================================\n// Core Concept 1: Temporal Role\n// ============================================================================\n// A temporal element is either a root (controls its own playback) or a child\n// (delegates playback to its root timegroup). This is the fundamental invariant.\n// ============================================================================\n\n// ============================================================================\n// Core Concept 0: Content Readiness Protocol\n// ============================================================================\n// Every temporal element exposes a contentReadyState property and two events:\n//   readystatechange — fires on state transitions (idle, loading, ready, error)\n//   contentchange   — fires when renderable output is invalidated\n//\n// The property solves late-subscriber: consumers check it on subscribe.\n// Events are non-bubbling: containers (timegroups) explicitly aggregate.\n// ============================================================================\n\nexport type ContentReadyState = \"idle\" | \"loading\" | \"ready\" | \"error\";\nexport type ContentChangeReason = \"source\" | \"bounds\" | \"structure\" | \"content\";\n\ntype TemporalRole = \"root\" | \"child\";\n\nfunction determineTemporalRole(parentTimegroup: EFTimegroup | undefined): TemporalRole {\n  return parentTimegroup === undefined ? \"root\" : \"child\";\n}\n\n// ============================================================================\n// Core Concept 2: Duration Source\n// ============================================================================\n// Duration comes from one of three sources: intrinsic (media-based),\n// explicit (attribute), or inherited (from parent). This determines the base\n// duration before any modifications.\n// ============================================================================\n\ntype DurationSource = \"intrinsic\" | \"explicit\" | \"inherited\";\n\ninterface DurationSourceResult {\n  source: DurationSource;\n  baseDurationMs: number;\n}\n\nfunction determineDurationSource(\n  intrinsicDurationMs: number | undefined,\n  explicitDurationMs: number | undefined,\n  parentDurationMs: number | undefined,\n): DurationSourceResult {\n  if (intrinsicDurationMs !== undefined) {\n    return { source: \"intrinsic\", baseDurationMs: intrinsicDurationMs };\n  }\n  if (explicitDurationMs !== undefined) {\n    return { source: \"explicit\", baseDurationMs: explicitDurationMs };\n  }\n  if (parentDurationMs !== undefined) {\n    return { source: \"inherited\", baseDurationMs: parentDurationMs };\n  }\n  return { source: \"inherited\", baseDurationMs: 0 };\n}\n\n// ============================================================================\n// Core Concept 3: Duration Modification Strategy\n// ============================================================================\n// Duration can be modified by trimming (removing from edges) or source\n// manipulation (selecting a portion of the source). These are mutually\n// exclusive strategies.\n// ============================================================================\n\ntype DurationModificationStrategy = \"none\" | \"trimming\" | \"source-manipulation\";\n\ninterface DurationModificationState {\n  strategy: DurationModificationStrategy;\n  trimStartMs: number | undefined;\n  trimEndMs: number | undefined;\n  sourceInMs: number | undefined;\n  sourceOutMs: number | undefined;\n}\n\nfunction determineDurationModificationStrategy(\n  trimStartMs: number | undefined,\n  trimEndMs: number | undefined,\n  sourceInMs: number | undefined,\n  sourceOutMs: number | undefined,\n): DurationModificationState {\n  if (trimStartMs !== undefined || trimEndMs !== undefined) {\n    return {\n      strategy: \"trimming\",\n      trimStartMs,\n      trimEndMs,\n      sourceInMs: undefined,\n      sourceOutMs: undefined,\n    };\n  }\n  if (sourceInMs !== undefined || sourceOutMs !== undefined) {\n    return {\n      strategy: \"source-manipulation\",\n      trimStartMs: undefined,\n      trimEndMs: undefined,\n      sourceInMs,\n      sourceOutMs,\n    };\n  }\n  return {\n    strategy: \"none\",\n    trimStartMs: undefined,\n    trimEndMs: undefined,\n    sourceInMs: undefined,\n    sourceOutMs: undefined,\n  };\n}\n\nfunction evaluateModifiedDuration(\n  baseDurationMs: number,\n  modification: DurationModificationState,\n): number {\n  if (baseDurationMs === 0) {\n    return 0;\n  }\n\n  switch (modification.strategy) {\n    case \"trimming\": {\n      const trimmedDurationMs =\n        baseDurationMs - (modification.trimStartMs ?? 0) - (modification.trimEndMs ?? 0);\n      return Math.max(0, trimmedDurationMs);\n    }\n    case \"source-manipulation\": {\n      const sourceInMs = modification.sourceInMs ?? 0;\n      const sourceOutMs = modification.sourceOutMs ?? baseDurationMs;\n      if (sourceInMs >= sourceOutMs) {\n        return 0;\n      }\n      return sourceOutMs - sourceInMs;\n    }\n    case \"none\":\n      return baseDurationMs;\n  }\n}\n\n// ============================================================================\n// Core Concept 4: Start Time Calculation Strategy\n// ============================================================================\n// Start time is calculated differently based on parent timegroup mode:\n// - Sequence mode: based on previous sibling\n// - Other modes: based on parent start + offset\n// ============================================================================\n\ntype StartTimeStrategy = \"sequence\" | \"offset\";\n\nfunction determineStartTimeStrategy(parentTimegroup: EFTimegroup | undefined): StartTimeStrategy {\n  if (!parentTimegroup) {\n    return \"offset\";\n  }\n  return parentTimegroup.mode === \"sequence\" ? \"sequence\" : \"offset\";\n}\n\nfunction evaluateStartTimeForSequence(\n  _element: TemporalMixinInterface & HTMLElement,\n  parentTimegroup: EFTimegroup,\n  siblingTemporals: TemporalMixinInterface[],\n  ownIndex: number,\n): number {\n  if (ownIndex === 0) {\n    return parentTimegroup.startTimeMs;\n  }\n  const previous = siblingTemporals[ownIndex - 1];\n  if (!previous) {\n    throw new Error(\"Previous temporal element not found\");\n  }\n  return previous.startTimeMs + previous.durationMs - parentTimegroup.overlapMs;\n}\n\nfunction evaluateStartTimeForOffset(parentTimegroup: EFTimegroup, offsetMs: number): number {\n  return parentTimegroup.startTimeMs + offsetMs;\n}\n\nfunction evaluateStartTime(\n  element: TemporalMixinInterface & HTMLElement,\n  parentTimegroup: EFTimegroup | undefined,\n  offsetMs: number,\n  getSiblingTemporals: (parent: EFTimegroup) => TemporalMixinInterface[],\n): number {\n  if (!parentTimegroup) {\n    return 0;\n  }\n\n  const strategy = determineStartTimeStrategy(parentTimegroup);\n  switch (strategy) {\n    case \"sequence\": {\n      const siblingTemporals = getSiblingTemporals(parentTimegroup);\n      const ownIndex = siblingTemporals.indexOf(element);\n      if (ownIndex === -1) {\n        return 0;\n      }\n      return evaluateStartTimeForSequence(element, parentTimegroup, siblingTemporals, ownIndex);\n    }\n    case \"offset\":\n      return evaluateStartTimeForOffset(parentTimegroup, offsetMs);\n  }\n}\n\n// ============================================================================\n// Core Concept 5: Current Time Source\n// ============================================================================\n// Current time comes from one of three sources: playback controller (root\n// elements), root timegroup (child elements), or local storage (fallback).\n// ============================================================================\n\ntype CurrentTimeSource = \"playback-controller\" | \"root-timegroup\" | \"local\";\n\ninterface CurrentTimeSourceResult {\n  source: CurrentTimeSource;\n  timeMs: number;\n}\n\nfunction determineCurrentTimeSource(\n  playbackController: PlaybackController | undefined,\n  rootTimegroup: EFTimegroup | undefined,\n  isRootTimegroup: boolean,\n  localTimeMs: number,\n  startTimeMs: number,\n  durationMs: number,\n): CurrentTimeSourceResult {\n  if (playbackController) {\n    const timeMs = Math.min(Math.max(0, playbackController.currentTimeMs), durationMs);\n    return { source: \"playback-controller\", timeMs };\n  }\n\n  if (rootTimegroup && !isRootTimegroup) {\n    const timeMs = Math.min(Math.max(0, rootTimegroup.currentTimeMs - startTimeMs), durationMs);\n    return { source: \"root-timegroup\", timeMs };\n  }\n\n  const timeMs = Math.min(Math.max(0, localTimeMs), durationMs);\n  return { source: \"local\", timeMs };\n}\n\nexport declare class TemporalMixinInterface {\n  playbackController?: PlaybackController;\n  playing: boolean;\n  loop: boolean;\n  play(): void;\n  pause(): void;\n\n  get hasOwnDuration(): boolean;\n  /**\n   * Whether the element has a duration set as an attribute.\n   */\n  get hasExplicitDuration(): boolean;\n\n  get sourceStartMs(): number;\n\n  /**\n   * Used to trim the start of the media.\n   *\n   * This can be set in either seconds or milliseconds.\n   *\n   * For example, `trimstart=\"10s\"` is equivalent to `trimstart=\"10000ms\"`.\n   *\n   * @domAttribute \"trimstart\"\n   */\n  get trimStartMs(): number | undefined;\n\n  /**\n   * Used to trim the end of the media.\n   *\n   * This can be set in either seconds or milliseconds.\n   *\n   * For example, `trimend=\"10s\"` is equivalent to `trimend=\"10000ms\"`.\n   *\n   * @domAttribute \"trimend\"\n   */\n  get trimEndMs(): number;\n\n  set trimStartMs(value: number | undefined);\n  set trimEndMs(value: number | undefined);\n  set trimstart(value: string | undefined);\n  set trimend(value: string | undefined);\n\n  /**\n   * The source in time of the element.\n   *\n   * This is an amount of time to trim off the beginning of the media.\n   *\n   * This can be set in either seconds or milliseconds.\n   *\n   * For example, `sourcein=\"10s\"` is equivalent to `sourcein=\"10000ms\"`.\n   *\n   * If the sourcein time is greater than the duration of the media, the media\n   * will not be played.\n   *\n   * If the media is 20 seconds long, and the `sourcein` value is set to `10s`, the\n   * media will play for 10 seconds, starting at the 10 second mark.\n   *\n   * Can be used in conjunction with `sourceout` to create a trimmed media.\n   *\n   * @domAttribute \"sourcein\"\n   */\n  get sourceInMs(): number | undefined;\n\n  /**\n   * The source out time of the element.\n   *\n   * This is the point in time in the media that will be treated as the end of\n   * the media.\n   *\n   * This can be set in either seconds or milliseconds.\n   *\n   * For example, `sourceout=\"10s\"` is equivalent to `sourceout=\"10000ms\"`.\n   *\n   * If the sourceout time is greater than the duration of the media, the media\n   * will play until the end of the media.\n   *\n   * If the media is 20 seconds long, and the `sourceout` value is set to `10s`,\n   * the media will play for 10 seconds, starting at zero seconds and ending at\n   * the 10 second mark.\n   *\n   * Can be used in conjunction with `sourcein` to create a trimmed media.\n   *\n   * @domAttribute \"sourceout\"\n   */\n  get sourceOutMs(): number | undefined;\n\n  set sourceInMs(value: number | undefined);\n  set sourceOutMs(value: number | undefined);\n  set sourcein(value: string | undefined);\n  set sourceout(value: string | undefined);\n\n  /**\n   * @domAttribute \"duration\"\n   */\n  get durationMs(): number;\n\n  get explicitDurationMs(): number | undefined;\n\n  get intrinsicDurationMs(): number | undefined;\n\n  /**\n   * The start time of the element within its root timegroup in milliseconds.\n   *\n   * This is an absolute time according to the highest scoped timegroup the media element is contained within.\n   *\n   * The calculated value will depend on the mode of the timegroup and the offset of the media element.\n   *\n   * If the parent time group is in `sequence` mode, the start time will be the\n   * start time of the previous sibling element plus the previous sibling's duration\n   * minus the overlap of the previous sibling and the current sibling.\n   *\n   * If the parent time group is in `contain` or `fixed` mode, the start time will be\n   * the start time of the parent time group plus the offset of the media element.\n   */\n  get startTimeMs(): number;\n  /**\n   * The end time of the element within its root timegroup in milliseconds.\n   *\n   * This is an absolute time according to the highest scoped timegroup the media\n   * element is contained within. Computed by adding the media's duration to its\n   * start time.\n   *\n   * If the media element has been trimmed, its end time will be calculated according it\n   * its trimmed duration, not its original duration.\n   */\n  get endTimeMs(): number;\n  /**\n   * The start time of the element within its parent timegroup in milliseconds.\n   *\n   * This is a relative time according to the closest timegroup the media element\n   * is contained within. Unless the media element has been given any kind of specific offset\n   * it is common for this time to be zero.\n   */\n  get startTimeWithinParentMs(): number;\n\n  /**\n   * The current time of the element in milliseconds.\n   *\n   * This is a relative time according to the closest timegroup the media element\n   * is contained within.\n   *\n   * This is suitable for determining the percentage of the media that has been\n   * played.\n   */\n  get ownCurrentTimeMs(): number;\n\n  /**\n   * Set the base local time (ms) used by ownCurrentTimeMs when no playback\n   * controller is present. Used by seekForRender() on render clones.\n   * @internal\n   */\n  _setLocalTimeMs(value: number): void;\n\n  /**\n   * Element's current time for progress calculation.\n   * For timegroups: their timeline currentTimeMs\n   * For other temporal elements: their ownCurrentTimeMs\n   */\n  get currentTimeMs(): number;\n  set currentTimeMs(value: number);\n  /**\n   * The current time of the element in milliseconds, adjusted for trimming.\n   *\n   * This is suitable for mapping to internal media time codes for audio/video\n   * elements.\n   *\n   * For example, if the media has a `sourcein` value of 10s, when `ownCurrentTimeMs` is 0s,\n   * `currentSourceTimeMs` will be 10s.\n   *\n   *            sourcein=10s     sourceout=10s\n   * /         /                /\n   * |--------|=================|---------|\n   *          ^\n   *          |_\n   *            currentSourceTimeMs === 10s\n   *          |_\n   *            ownCurrentTimeMs === 0s\n   */\n  get currentSourceTimeMs(): number;\n\n  set duration(value: string);\n  get duration(): string;\n\n  /**\n   * The offset of the element within its parent timegroup in milliseconds.\n   *\n   * This can be set in either seconds or milliseconds.\n   *\n   * For example, `offset=\"10s\"` is equivalent to `offset=\"10000ms\"`.\n   *\n   * This can be used to create a negative or positive offset for the start time of the media.\n   *\n   * This will change the start time of the media relative to it's otherwise normal start time.\n   *\n   * The duration of the element, or it's parent, or the start and end time of it's temporal siblings will not\n   * be affected by this offset.\n   *\n   * @domAttribute \"offset\"\n   */\n  set offset(value: string);\n  get offset(): string;\n\n  /**\n   * A convenience property for getting the nearest containing timegroup of the media element.\n   */\n  parentTimegroup?: EFTimegroup;\n\n  /**\n   * A convenience property for getting the root timegroup of the media element.\n   */\n  rootTimegroup?: EFTimegroup;\n\n  didBecomeRoot(): void;\n  didBecomeChild(): void;\n\n  /**\n   * The readiness state of this element's content.\n   * \"idle\" — no content / not connected\n   * \"loading\" — async resources are loading\n   * \"ready\" — element can render / extract frames\n   * \"error\" — resource loading failed\n   *\n   * @domAttribute \"content-ready-state\"\n   */\n  contentReadyState: ContentReadyState;\n\n  /**\n   * Transition to a new readiness state.\n   * Dispatches a non-bubbling `readystatechange` CustomEvent if the state changed.\n   */\n  setContentReadyState(state: ContentReadyState): void;\n\n  /**\n   * Dispatch a non-bubbling `contentchange` CustomEvent.\n   * Signals that cached renderable output is stale.\n   */\n  emitContentChange(reason: ContentChangeReason): void;\n\n  /**\n   * Whether this element should auto-transition to \"ready\" after first update.\n   * Override to return false for elements with async loading (EFMedia, EFCaptions).\n   */\n  shouldAutoReady(): boolean;\n\n  updateComplete: Promise<boolean>;\n}\n\nexport const isEFTemporal = (obj: any): obj is TemporalMixinInterface => obj[EF_TEMPORAL];\n\nconst EF_TEMPORAL = Symbol(\"EF_TEMPORAL\");\n\nexport interface TemporalCollectionResult {\n  /** Temporal elements to process (visible + pruned roots). */\n  elements: Array<TemporalMixinInterface & HTMLElement>;\n  /** Temporal elements whose subtrees were pruned (invisible containers). */\n  pruned: Set<TemporalMixinInterface & HTMLElement>;\n}\n\nexport const deepGetTemporalElements = (\n  element: Element,\n  timeMs?: number,\n): TemporalCollectionResult => {\n  const elements: Array<TemporalMixinInterface & HTMLElement> = [];\n  const pruned = new Set<TemporalMixinInterface & HTMLElement>();\n\n  const walk = (el: Element) => {\n    const children = getChildrenIncludingSlotted(el);\n\n    for (const child of children) {\n      if (isEFTemporal(child)) {\n        const temporal = child as TemporalMixinInterface & HTMLElement;\n        elements.push(temporal);\n\n        // Prune: if a time was provided and this temporal element is outside\n        // its time range, skip its entire subtree. The caller is responsible\n        // for setting display:none on these pruned roots; their children are\n        // hidden by containment and never visited.\n        if (timeMs !== undefined) {\n          const startMs = temporal.startTimeMs;\n          const endMs = temporal.endTimeMs;\n          if (endMs > startMs && (timeMs < startMs || timeMs >= endMs)) {\n            pruned.add(temporal);\n            continue; // skip subtree\n          }\n        }\n      }\n      walk(child);\n    }\n  };\n\n  walk(element);\n  return { elements, pruned };\n};\n\n/**\n * Gets all child elements including slotted content for shadow DOM elements.\n * For elements with shadow DOM that contain slots, this returns the assigned\n * elements (slotted content) instead of just the shadow DOM children.\n */\nconst getChildrenIncludingSlotted = (element: Element): Element[] => {\n  // If element has shadowRoot with slots, get assigned elements\n  if (element.shadowRoot) {\n    const slots = element.shadowRoot.querySelectorAll(\"slot\");\n    if (slots.length > 0) {\n      const assignedElements: Element[] = [];\n      for (const slot of slots) {\n        assignedElements.push(...slot.assignedElements());\n      }\n      // Also include shadow DOM children that aren't slots (for mixed content)\n      for (const child of element.shadowRoot.children) {\n        if (child.tagName !== \"SLOT\") {\n          assignedElements.push(child);\n        }\n      }\n      return assignedElements;\n    }\n  }\n\n  // Fallback to regular children\n  return Array.from(element.children);\n};\n\nlet temporalCache: Map<Element, TemporalMixinInterface[]>;\nlet temporalCacheResetScheduled = false;\nexport const resetTemporalCache = () => {\n  temporalCache = new Map();\n  if (typeof requestAnimationFrame !== \"undefined\" && !temporalCacheResetScheduled) {\n    temporalCacheResetScheduled = true;\n    requestAnimationFrame(() => {\n      temporalCacheResetScheduled = false;\n      resetTemporalCache();\n    });\n  }\n};\nresetTemporalCache();\n\nexport const shallowGetTemporalElements = (\n  element: Element,\n  temporals: TemporalMixinInterface[] = [],\n) => {\n  const cachedResult = temporalCache.get(element);\n  if (cachedResult) {\n    return cachedResult;\n  }\n  // Get children to walk - handle both regular children and slotted content\n  const children = getChildrenIncludingSlotted(element);\n\n  for (const child of children) {\n    if (isEFTemporal(child)) {\n      temporals.push(child);\n    } else {\n      shallowGetTemporalElements(child, temporals);\n    }\n  }\n  temporalCache.set(element, temporals);\n  return temporals;\n};\n\nexport class OwnCurrentTimeController implements ReactiveController {\n  #lastKnownTimeMs: number | undefined = undefined;\n\n  constructor(\n    private host: EFTimegroup,\n    private temporal: TemporalMixinInterface & LitElement,\n  ) {\n    host.addController(this);\n  }\n\n  hostUpdated() {\n    // CRITICAL FIX: Only trigger child updates when root's currentTimeMs actually changes.\n    // Previously, this fired on EVERY root update, causing 40+ child updates per root update.\n    // With nested timegroups, this created cascading updates that locked up the main thread.\n    const currentTimeMs = this.host.currentTimeMs;\n    if (this.#lastKnownTimeMs === currentTimeMs) {\n      return; // Time hasn't changed, no need to update children\n    }\n    this.#lastKnownTimeMs = currentTimeMs;\n\n    // Defer update via queueMicrotask to avoid Lit warning about scheduling\n    // updates during hostUpdated. Unlike setTimeout(0) this fires as a microtask,\n    // so it resolves between await points without yielding a full macrotask turn\n    // (eliminating 4-16ms dead time per frame in the render pipeline).\n    queueMicrotask(() => {\n      this.temporal.requestUpdate(\"ownCurrentTimeMs\");\n    });\n  }\n\n  remove() {\n    this.host.removeController(this);\n  }\n}\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\nlet startTimeMsCache = new WeakMap<Element, number>();\nlet startTimeMsCacheResetScheduled = false;\nconst resetStartTimeMsCache = () => {\n  startTimeMsCache = new WeakMap();\n  if (typeof requestAnimationFrame !== \"undefined\" && !startTimeMsCacheResetScheduled) {\n    startTimeMsCacheResetScheduled = true;\n    requestAnimationFrame(() => {\n      startTimeMsCacheResetScheduled = false;\n      resetStartTimeMsCache();\n    });\n  }\n};\nresetStartTimeMsCache();\n\nexport const flushStartTimeMsCache = () => {\n  startTimeMsCache = new WeakMap();\n};\n\nexport const EFTemporal = <T extends Constructor<LitElement>>(superClass: T) => {\n  class TemporalMixinClass extends superClass {\n    // ---- Content Readiness Protocol ----\n\n    #contentReadyState: ContentReadyState = \"idle\";\n\n    @property({ type: String, reflect: true, attribute: \"content-ready-state\" })\n    get contentReadyState(): ContentReadyState {\n      return this.#contentReadyState;\n    }\n\n    set contentReadyState(value: ContentReadyState) {\n      this.setContentReadyState(value);\n    }\n\n    setContentReadyState(state: ContentReadyState): void {\n      if (state === this.#contentReadyState) return;\n      const old = this.#contentReadyState;\n      this.#contentReadyState = state;\n      this.requestUpdate(\"contentReadyState\", old);\n      this.dispatchEvent(\n        new CustomEvent(\"readystatechange\", {\n          detail: { state },\n          bubbles: false,\n          composed: false,\n        }),\n      );\n    }\n\n    emitContentChange(reason: ContentChangeReason): void {\n      this.dispatchEvent(\n        new CustomEvent(\"contentchange\", {\n          detail: { reason },\n          bubbles: false,\n          composed: false,\n        }),\n      );\n    }\n\n    shouldAutoReady(): boolean {\n      return true;\n    }\n\n    // ---- End Content Readiness Protocol ----\n\n    #ownCurrentTimeController?: OwnCurrentTimeController;\n\n    #parentTimegroup?: EFTimegroup;\n    #rootTimegroupLocked = false; // When true, rootTimegroup won't be auto-recalculated\n\n    @consume({ context: timegroupContext, subscribe: true })\n    set parentTimegroup(value: EFTimegroup | undefined) {\n      const oldParent = this.#parentTimegroup;\n      const oldRole = determineTemporalRole(oldParent);\n      const newRole = determineTemporalRole(value);\n\n      this.#parentTimegroup = value;\n\n      this.#ownCurrentTimeController?.remove();\n      // Only auto-calculate rootTimegroup if it hasn't been locked\n      // (locked means it was manually set, e.g., for render clones)\n      if (!this.#rootTimegroupLocked) {\n        this.rootTimegroup = this.getRootTimegroup();\n      }\n      if (this.rootTimegroup) {\n        this.#ownCurrentTimeController = new OwnCurrentTimeController(\n          this.rootTimegroup,\n          this as InstanceType<Constructor<TemporalMixinInterface> & T>,\n        );\n      }\n\n      // Only trigger callbacks if role actually changed\n      if (oldRole !== newRole) {\n        if (newRole === \"root\") {\n          this.didBecomeRoot();\n        } else {\n          this.didBecomeChild();\n        }\n      }\n    }\n\n    /**\n     * Lock the rootTimegroup to prevent auto-recalculation.\n     * Used for render clones where the root must be fixed.\n     * @internal\n     */\n    lockRootTimegroup() {\n      this.#rootTimegroupLocked = true;\n    }\n\n    disconnectedCallback() {\n      super.disconnectedCallback();\n\n      // Skip teardown when being moved for canvas preview capture.\n      // The element is temporarily reparented to a capture canvas for native\n      // rendering but must retain its PlaybackController and animation state.\n      if ((this as any).canvasPreviewActive) return;\n\n      this.#ownCurrentTimeController?.remove();\n\n      if (this.playbackController) {\n        this.playbackController.remove();\n        this.playbackController = undefined;\n      }\n\n      // Clean up tracked animations to prevent memory leaks\n      // Use dynamic import to avoid circular dependency with updateAnimations\n      import(\"./updateAnimations.js\").then(({ cleanupTrackedAnimations }) => {\n        cleanupTrackedAnimations(this);\n      });\n    }\n\n    connectedCallback() {\n      super.connectedCallback();\n\n      // Skip re-initialization when being moved for canvas preview capture.\n      // The element is temporarily reparented to a capture canvas for native\n      // rendering — root detection and PlaybackController creation must be\n      // skipped to avoid an infinite wrapWithWorkbench → initCanvasMode loop.\n      if ((this as any).canvasPreviewActive) return;\n\n      this.#ownCurrentTimeController?.remove();\n\n      // Root detection: Check DOM structure to determine if this is truly a root.\n      //\n      // We can't rely on Lit Context (parentTimegroup) because context propagates\n      // asynchronously during update cycles. Children may complete their first update\n      // before ancestors have provided context, causing them to incorrectly think\n      // they're roots.\n      //\n      // Instead, we check if there's an ancestor ef-timegroup in the DOM. This is\n      // reliable because DOM structure is established synchronously at connection time.\n      //\n      // If there's NO ancestor timegroup, this is a true root → create PlaybackController.\n      // If there IS an ancestor, wait for context to propagate (handled by parentTimegroup setter).\n      // Note: closest() includes self, so we check from parentElement to find true ancestors.\n      const hasAncestorTimegroup = this.parentElement?.closest(\"ef-timegroup\") != null;\n\n      if (!hasAncestorTimegroup && !this.playbackController) {\n        // True root: no ancestor timegroup in DOM\n        // Defer slightly to allow element to fully initialize\n        this.updateComplete.then(() => {\n          if (!this.isConnected) return;\n          if (!this.playbackController) {\n            this.didBecomeRoot();\n          }\n        });\n      }\n      // For elements WITH ancestors, the parentTimegroup setter will be called\n      // when Lit Context propagates, and if the role changes, didBecomeRoot/didBecomeChild\n      // will be called appropriately.\n\n      // Default readiness: trivially-ready elements (no async loading)\n      // transition to \"ready\" after first update. Subclasses with async\n      // loading (EFMedia, EFCaptions) override shouldAutoReady() to return\n      // false and manage their own readiness lifecycle.\n      if (this.shouldAutoReady()) {\n        this.updateComplete.then(() => {\n          if (!this.isConnected) return;\n          if (this.#contentReadyState === \"idle\") {\n            this.setContentReadyState(\"ready\");\n          }\n        });\n      }\n    }\n\n    get parentTimegroup() {\n      return this.#parentTimegroup;\n    }\n\n    playbackController?: PlaybackController;\n\n    get playing(): boolean {\n      if (!this.playbackController) {\n        return false;\n      }\n      return this.playbackController.playing;\n    }\n\n    set playing(value: boolean) {\n      if (!this.playbackController) {\n        console.warn(\"Cannot set playing on non-root temporal element\", this);\n        return;\n      }\n      this.playbackController.setPlaying(value);\n    }\n\n    play(): void {\n      if (!this.playbackController) {\n        console.warn(\"play() called on non-root temporal element\", this);\n        return;\n      }\n      this.playbackController.play();\n    }\n\n    pause(): void {\n      if (!this.playbackController) {\n        console.warn(\"pause() called on non-root temporal element\", this);\n        return;\n      }\n      this.playbackController.pause();\n    }\n\n    @property({ type: Boolean, reflect: true, attribute: \"loop\" })\n    get loop(): boolean {\n      return this.playbackController?.loop ?? this.#loop;\n    }\n\n    set loop(value: boolean) {\n      const oldValue = this.#loop;\n      this.#loop = value;\n      if (this.playbackController) {\n        this.playbackController.setLoop(value);\n      }\n      this.requestUpdate(\"loop\", oldValue);\n    }\n\n    @property({\n      type: String,\n      attribute: \"offset\",\n      converter: durationConverter,\n    })\n    private _offsetMs = 0;\n\n    @property({\n      type: Number,\n      attribute: \"duration\",\n      converter: durationConverter,\n    })\n    private _durationMs?: number;\n\n    set duration(value: string | undefined) {\n      if (value !== undefined) {\n        this.setAttribute(\"duration\", value);\n      } else {\n        this.removeAttribute(\"duration\");\n      }\n    }\n\n    @property({\n      type: Number,\n      attribute: \"trimstart\",\n      converter: durationConverter,\n    })\n    private _trimStartMs: number | undefined = undefined;\n\n    get trimStartMs() {\n      if (this._trimStartMs === undefined) {\n        return undefined;\n      }\n      return Math.min(Math.max(this._trimStartMs, 0), this.intrinsicDurationMs ?? 0);\n    }\n\n    set trimStartMs(value: number | undefined) {\n      this._trimStartMs = value;\n    }\n\n    @property({\n      type: Number,\n      attribute: \"trimend\",\n      converter: durationConverter,\n    })\n    private _trimEndMs: number | undefined = undefined;\n\n    get trimEndMs() {\n      if (this._trimEndMs === undefined) {\n        return undefined;\n      }\n      return Math.min(this._trimEndMs, this.intrinsicDurationMs ?? 0);\n    }\n\n    set trimEndMs(value: number | undefined) {\n      this._trimEndMs = value;\n    }\n\n    @property({\n      type: Number,\n      attribute: \"sourcein\",\n      converter: durationConverter,\n    })\n    private _sourceInMs: number | undefined = undefined;\n\n    get sourceInMs() {\n      if (this._sourceInMs === undefined) {\n        return undefined;\n      }\n      return Math.max(this._sourceInMs, 0);\n    }\n\n    set sourceInMs(value: number | undefined) {\n      this._sourceInMs = value;\n    }\n\n    @property({\n      type: Number,\n      attribute: \"sourceout\",\n      converter: durationConverter,\n    })\n    private _sourceOutMs: number | undefined = undefined;\n\n    get sourceOutMs() {\n      if (this._sourceOutMs === undefined) {\n        return undefined;\n      }\n      if (this.intrinsicDurationMs && this._sourceOutMs > this.intrinsicDurationMs) {\n        return this.intrinsicDurationMs;\n      }\n      return Math.max(this._sourceOutMs, 0);\n    }\n\n    set sourceOutMs(value: number | undefined) {\n      this._sourceOutMs = value;\n    }\n\n    override updated(changedProperties: Map<PropertyKey, unknown>): void {\n      super.updated?.(changedProperties);\n\n      // Re-render the current frame when source-mapping, trim, offset, or duration\n      // properties change (the visible frame changes even though currentTimeMs hasn't).\n      // Also render the initial frame when a standalone root becomes ready.\n      const sourceChanged =\n        changedProperties.has(\"_sourceInMs\") || changedProperties.has(\"_sourceOutMs\");\n      const trimChanged =\n        changedProperties.has(\"_trimStartMs\") || changedProperties.has(\"_trimEndMs\");\n      const becameReady =\n        changedProperties.has(\"contentReadyState\") &&\n        changedProperties.get(\"contentReadyState\") !== \"ready\" &&\n        this.contentReadyState === \"ready\";\n      const offsetChanged = changedProperties.has(\"_offsetMs\");\n      const durationChanged = changedProperties.has(\"_durationMs\");\n\n      if (sourceChanged || trimChanged || becameReady || offsetChanged || durationChanged) {\n        // Render clones are sequenced via seekForRender — don't trigger autonomous re-renders,\n        // which would abort the in-progress seekForRender FrameController signal.\n        const isRenderClone = this.rootTimegroup?.hasAttribute(\"data-no-playback-controller\");\n        if (this.rootTimegroup && !isRenderClone) {\n          this.rootTimegroup.requestFrameRender();\n        } else if (this.playbackController) {\n          this.playbackController.runThrottledFrameTask();\n        }\n      }\n    }\n\n    @property({\n      type: Number,\n      attribute: \"startoffset\",\n      converter: durationConverter,\n    })\n    private _startOffsetMs = 0;\n    public get startOffsetMs(): number {\n      return this._startOffsetMs;\n    }\n\n    @state()\n    rootTimegroup?: EFTimegroup = this.getRootTimegroup();\n\n    private getRootTimegroup(): EFTimegroup | undefined {\n      let parent = this.tagName === \"EF-TIMEGROUP\" ? this : this.parentTimegroup;\n      while (parent?.parentTimegroup) {\n        parent = parent.parentTimegroup;\n      }\n      return parent as EFTimegroup | undefined;\n    }\n\n    get hasExplicitDuration() {\n      return this._durationMs !== undefined;\n    }\n\n    get explicitDurationMs() {\n      if (this.hasExplicitDuration) {\n        return this._durationMs;\n      }\n      return undefined;\n    }\n\n    get hasOwnDuration() {\n      return this.intrinsicDurationMs !== undefined || this.hasExplicitDuration;\n    }\n\n    get intrinsicDurationMs() {\n      return undefined;\n    }\n\n    get durationMs() {\n      // Prevent infinite loops: don't call parent.durationMs if parent is currently calculating\n      // Lazy import to break circular dependency: EFTemporal -> EFTimegroup -> EFMedia -> EFTemporal\n      const isTimegroupCalculatingDuration = getIsTimegroupCalculatingDuration();\n      const parentDurationMs = isTimegroupCalculatingDuration(this.parentTimegroup)\n        ? undefined\n        : this.parentTimegroup?.durationMs;\n      const durationSource = determineDurationSource(\n        this.intrinsicDurationMs,\n        this._durationMs,\n        parentDurationMs,\n      );\n\n      const modification = determineDurationModificationStrategy(\n        this.trimStartMs,\n        this.trimEndMs,\n        this.sourceInMs,\n        this.sourceOutMs,\n      );\n\n      return evaluateModifiedDuration(durationSource.baseDurationMs, modification);\n    }\n\n    get sourceStartMs() {\n      return this.trimStartMs ?? this.sourceInMs ?? 0;\n    }\n\n    #offsetMs() {\n      return this._offsetMs || 0;\n    }\n\n    #parentTemporal() {\n      let parent = this.parentElement;\n      while (parent && !isEFTemporal(parent)) {\n        parent = parent.parentElement;\n      }\n      return parent;\n    }\n\n    /**\n     * The start time of the element within its parent timegroup.\n     */\n    get startTimeWithinParentMs() {\n      const parent = this.#parentTemporal();\n      if (!parent) {\n        return 0;\n      }\n      return this.startTimeMs - parent.startTimeMs;\n    }\n\n    #loop = false;\n\n    get startTimeMs(): number {\n      const cachedStartTime = startTimeMsCache.get(this);\n      if (cachedStartTime !== undefined) {\n        return cachedStartTime;\n      }\n\n      const startTime = evaluateStartTime(\n        this as InstanceType<Constructor<TemporalMixinInterface> & T>,\n        this.parentTimegroup,\n        this.#offsetMs(),\n        (parent) => shallowGetTemporalElements(parent),\n      );\n\n      startTimeMsCache.set(this, startTime);\n      return startTime;\n    }\n\n    get endTimeMs(): number {\n      return this.startTimeMs + this.durationMs;\n    }\n\n    #currentTimeMs = 0;\n\n    /**\n     * Set the base local time (ms) used by ownCurrentTimeMs when no playback\n     * controller is present. Called by EFTimegroup.seekForRender() to keep the\n     * mixin's internal time in sync with the timegroup's own time state.\n     * @internal\n     */\n    _setLocalTimeMs(value: number) {\n      this.#currentTimeMs = value;\n    }\n\n    /**\n     * The current time of the element within itself.\n     * Compare with `currentTimeMs` to see the current time with respect to the root timegroup\n     */\n    get ownCurrentTimeMs(): number {\n      const timeSource = determineCurrentTimeSource(\n        this.playbackController,\n        this.rootTimegroup,\n        this.rootTimegroup === (this as any as EFTimegroup),\n        this.#currentTimeMs,\n        this.startTimeMs,\n        this.durationMs,\n      );\n      return timeSource.timeMs;\n    }\n\n    /**\n     * Element's current time for progress calculation.\n     * Non-timegroup temporal elements use their local time (ownCurrentTimeMs)\n     */\n    get currentTimeMs() {\n      return this.ownCurrentTimeMs;\n    }\n\n    set currentTimeMs(value: number) {\n      const role = determineTemporalRole(this.parentTimegroup);\n\n      // Apply current time based on role\n      switch (role) {\n        case \"root\":\n          if (this.playbackController) {\n            this.playbackController.currentTime = value / 1000;\n          } else {\n            this.#currentTimeMs = value;\n            this.requestUpdate(\"currentTimeMs\");\n          }\n          break;\n        case \"child\":\n          if (this.rootTimegroup && this.rootTimegroup !== (this as any as EFTimegroup)) {\n            this.rootTimegroup.currentTimeMs = value;\n          } else {\n            this.#currentTimeMs = value;\n            this.requestUpdate(\"currentTimeMs\");\n          }\n          break;\n      }\n    }\n\n    /**\n     * Used to calculate the internal currentTimeMs of the element. This is useful\n     * for mapping to internal media time codes for audio/video elements.\n     */\n    get currentSourceTimeMs() {\n      const leadingTrimMs = this.sourceInMs || this.trimStartMs || 0;\n      return this.ownCurrentTimeMs + leadingTrimMs;\n    }\n\n    didBecomeRoot() {\n      // Don't create PlaybackController if:\n      // 1. Explicitly disabled via attribute (e.g., for render clones)\n      // 2. Already exists\n      // 3. In headless rendering mode (EF_FRAMEGEN active)\n      const noPlayback = (this as any).hasAttribute?.(\"data-no-playback-controller\");\n      const isRendering = typeof window !== \"undefined\" && \"FRAMEGEN_BRIDGE\" in window;\n      if (noPlayback || this.playbackController || isRendering) {\n        return;\n      }\n\n      this.playbackController = new PlaybackController(this as any);\n      if (this.#loop) {\n        this.playbackController.setLoop(this.#loop);\n      }\n    }\n\n    didBecomeChild() {\n      if (this.playbackController) {\n        this.playbackController.remove();\n        this.playbackController = undefined;\n      }\n    }\n  }\n\n  Object.defineProperty(TemporalMixinClass.prototype, EF_TEMPORAL, {\n    value: true,\n  });\n\n  return TemporalMixinClass as unknown as Constructor<TemporalMixinInterface> & T;\n};\n"],"mappings":"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"}

package/dist/elements/EFText.d.ts

@@ -1,15 +1,15 @@
 import { TemporalMixinInterface } from "./EFTemporal.js";
 import { EFTextSegment } from "./EFTextSegment.js";
-import * as lit5 from "lit";
+import * as lit4 from "lit";
 import { LitElement, PropertyValueMap } from "lit";
-import * as lit_html5 from "lit-html";
+import * as lit_html4 from "lit-html";
 
 //#region src/elements/EFText.d.ts
 type SplitMode = "line" | "word" | "char";
 declare const EFText_base: (new (...args: any[]) => TemporalMixinInterface) & typeof LitElement;
 declare class EFText extends EFText_base {
   #private;
-  static styles: lit5.CSSResult[];
+  static styles: lit4.CSSResult[];
   split: SplitMode;
   private validateSplit;
   staggerMs?: number;
@@ -21,7 +21,7 @@ declare class EFText extends EFText_base {
   private _textContent;
   private _templateElement;
   private _segmentsReadyResolvers;
-  render(): lit_html5.TemplateResult<1>;
+  render(): lit_html4.TemplateResult<1>;
   set textContent(value: string | null);
   get textContent(): string;
   /**