@editframe/elements 0.30.1-beta.0 → 0.31.0-beta.0

package/dist/elements/EFThumbnailStrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFThumbnailStrip.js","names":["timestamps: number[]","EFThumbnailStrip","effectiveStartMs","effectiveEndMs","allThumbnails: ThumbnailRenderInfo[]","status: ThumbnailRenderInfo[\"status\"]","nearHitKey: string | undefined","drawWidth: number","drawHeight: number","drawX: number","drawY: number"],"sources":["../../src/elements/EFThumbnailStrip.ts"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport type { MediaEngine as ImportedMediaEngine } from \"../transcoding/types/index.js\";\nimport { OrderedLRUCache } from \"../utils/LRUCache.js\";\nimport type { EFVideo } from \"./EFVideo.js\";\nimport { TargetController } from \"./TargetController.ts\";\n\n/**\n * Global thumbnail image cache for smooth resize performance\n * Shared across all thumbnail strip instances\n * Uses OrderedLRUCache for efficient timestamp-based searching\n */\nconst thumbnailImageCache = new OrderedLRUCache<string, ImageData>(\n  200,\n  (a, b) => {\n    // Extract timestamp from cache key for ordered searching (take last part after splitting on ':')\n    const partsA = a.split(\":\");\n    const partsB = b.split(\":\");\n    const timeA = Number.parseFloat(partsA[partsA.length - 1] || \"0\");\n    const timeB = Number.parseFloat(partsB[partsB.length - 1] || \"0\");\n    return timeA - timeB;\n  },\n);\n\n// Export for debugging (works in both browser and server)\n(\n  globalThis as typeof globalThis & {\n    debugThumbnailCache: typeof thumbnailImageCache;\n  }\n).debugThumbnailCache = thumbnailImageCache;\n\n/**\n * Quantize timestamp to 30fps frame boundaries for consistent caching\n * This eliminates cache misses from floating point precision differences\n */\nfunction quantizeTimestamp(timeMs: number): number {\n  const frameIntervalMs = 1000 / 30; // 33.33ms at 30fps\n  return Math.round(timeMs / frameIntervalMs) * frameIntervalMs;\n}\n\n/**\n * Generate cache key for thumbnail image data (dimension-independent, quantized)\n */\nfunction getThumbnailCacheKey(videoSrc: string, timeMs: number): string {\n  const quantizedTimeMs = quantizeTimestamp(timeMs);\n  return `${videoSrc}:${quantizedTimeMs}`;\n}\n\n// Constants for consistent thumbnail layout\nconst THUMBNAIL_GAP = 1; // 1px gap between thumbnails\nconst STRIP_BORDER_PADDING = 4; // Account for border/padding in available height\n\ninterface ThumbnailSegment {\n  segmentId: number;\n  thumbnails: Array<{\n    timeMs: number;\n  }>;\n}\n\ninterface ThumbnailLayout {\n  count: number;\n  segments: readonly ThumbnailSegment[];\n}\n\n// Use the imported MediaEngine type and mediabunny types\n\ninterface ThumbnailRenderInfo {\n  timeMs: number;\n  segmentId: number;\n  x: number;\n  width: number;\n  height: number;\n  status: \"exact-hit\" | \"near-hit\" | \"missing\" | \"loading\";\n  imageData?: ImageData;\n  nearHitKey?: string;\n}\n\n/**\n * Calculate optimal thumbnail count and timestamps for the strip\n * Groups thumbnails by scrub segment ID for efficient caching\n */\nfunction calculateThumbnailLayout(\n  stripWidth: number,\n  thumbnailWidth: number,\n  startTimeMs: number,\n  endTimeMs: number,\n  scrubSegmentDurationMs?: number,\n): ThumbnailLayout {\n  // Must have positive width and valid time range\n  if (stripWidth <= 0 || thumbnailWidth <= 0 || endTimeMs <= startTimeMs) {\n    return { count: 0, segments: [] };\n  }\n\n  // Simple calculation: how many full thumbnails fit, plus one more to fill the width\n  const thumbnailPitch = thumbnailWidth + THUMBNAIL_GAP;\n  const baseFitCount = Math.floor(stripWidth / thumbnailPitch);\n  const count = Math.max(1, baseFitCount + 1); // Always one extra to fill width\n\n  // Generate timestamps evenly distributed across time range\n  const timestamps: number[] = [];\n  const timeRange = endTimeMs - startTimeMs;\n\n  for (let i = 0; i < count; i++) {\n    const timeMs =\n      count === 1\n        ? (startTimeMs + endTimeMs) / 2\n        : startTimeMs + (i * timeRange) / (count - 1);\n    timestamps.push(timeMs);\n  }\n\n  // Group by segment ID\n  const segmentMap = new Map<number, Array<{ timeMs: number }>>();\n  for (const timeMs of timestamps) {\n    const segmentId = scrubSegmentDurationMs\n      ? Math.floor(timeMs / scrubSegmentDurationMs)\n      : 0;\n    if (!segmentMap.has(segmentId)) {\n      segmentMap.set(segmentId, []);\n    }\n    // biome-ignore lint/style/noNonNullAssertion: Set in line above\n    segmentMap.get(segmentId)!.push({ timeMs });\n  }\n\n  const segments = Array.from(segmentMap.entries())\n    .sort(([a], [b]) => a - b)\n    .map(([segmentId, thumbnails]) => ({ segmentId, thumbnails }));\n\n  return { count, segments };\n}\n\n@customElement(\"ef-thumbnail-strip\")\nexport class EFThumbnailStrip extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        width: 100%;\n        height: 48px; /* Default filmstrip height */\n        background: #2a2a2a;\n        border: 2px solid #333;\n        border-radius: 6px;\n        overflow: hidden;\n        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);\n      }\n      canvas {\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        image-rendering: pixelated; /* Keep thumbnails crisp */\n        /* Width and height set programmatically to prevent CSS scaling */\n      }\n      .loading-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(42, 42, 42, 0.9);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 11px;\n        color: #ccc;\n        font-weight: 500;\n      }\n    `,\n  ];\n\n  canvasRef = createRef<HTMLCanvasElement>();\n\n  // Target video element using the same pattern as EFSurface\n  // @ts-expect-error controller is intentionally not referenced directly to prevent GC\n  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Used for side effects\n  private _targetController: TargetController = new TargetController(\n    this as any,\n  );\n\n  private _targetElement: EFVideo | null = null;\n\n  @state()\n  get targetElement(): EFVideo | null {\n    return this._targetElement;\n  }\n\n  set targetElement(value: EFVideo | null) {\n    const oldValue = this._targetElement;\n    this._targetElement = value;\n\n    // Clean up previous video property observer\n    this._videoPropertyObserver?.disconnect();\n\n    // When target element changes, set up property watching and media engine listener\n    if (value && value !== oldValue) {\n      // Watch for video property changes that affect thumbnails\n      this._videoPropertyObserver = new MutationObserver((mutations) => {\n        let shouldUpdate = false;\n        for (const mutation of mutations) {\n          if (mutation.type === \"attributes\" && mutation.attributeName) {\n            const attr = mutation.attributeName;\n            if (\n              attr === \"trimstart\" ||\n              attr === \"trimend\" ||\n              attr === \"sourcein\" ||\n              attr === \"sourceout\" ||\n              attr === \"src\"\n            ) {\n              shouldUpdate = true;\n              break;\n            }\n          }\n        }\n        if (shouldUpdate) {\n          this.runThumbnailUpdate();\n        }\n      });\n\n      this._videoPropertyObserver.observe(value, {\n        attributes: true,\n        attributeFilter: [\n          \"trimstart\",\n          \"trimend\",\n          \"sourcein\",\n          \"sourceout\",\n          \"src\",\n        ],\n      });\n\n      // Listen for media engine ready\n      if (value.mediaEngineTask) {\n        value.mediaEngineTask.taskComplete\n          .then(() => {\n            // When media engine is ready, retrigger thumbnails if we have width\n            if (this._stripWidth > 0) {\n              this.thumbnailLayoutTask.run();\n            }\n          })\n          .catch(() => {\n            // Ignore media engine errors\n          });\n      }\n    }\n\n    this.requestUpdate(\"targetElement\", oldValue);\n  }\n\n  @property({ type: String })\n  target = \"\";\n\n  /**\n   * Desired thumbnail width in pixels (height is determined by aspect ratio)\n   * Number of thumbnails is derived from this and available strip width\n   */\n  @property({ type: Number, attribute: \"thumbnail-width\" })\n  thumbnailWidth = 80;\n\n  /**\n   * Custom start time in milliseconds relative to trimmed timeline (0 = start of trimmed portion)\n   * In trimmed mode: 0ms = sourceStartMs, 1000ms = sourceStartMs + 1000ms\n   * In intrinsic mode: 0ms = 0ms in source media\n   */\n  @property({ type: Number, attribute: \"start-time-ms\" })\n  startTimeMs?: number;\n\n  /**\n   * Custom end time in milliseconds relative to trimmed timeline\n   * In trimmed mode: relative to sourceStartMs\n   * In intrinsic mode: relative to source media start (0ms)\n   */\n  @property({ type: Number, attribute: \"end-time-ms\" })\n  endTimeMs?: number;\n\n  /**\n   * Use intrinsic duration instead of trimmed duration\n   * Accepts \"true\"/\"false\" string values or boolean\n   */\n  @property({\n    type: Boolean,\n    attribute: \"use-intrinsic-duration\",\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        if (value === null) return false;\n        return value === \"true\";\n      },\n      toAttribute: (value: boolean) => (value ? \"true\" : null),\n    },\n  })\n  useIntrinsicDuration = false;\n\n  private _stripWidth = 0;\n  private _stripHeight = 48; // Default height, updated by ResizeObserver\n  private _pendingStripWidth: number | undefined;\n  private _thumbnailLayoutTask: Promise<ThumbnailRenderInfo[]> | undefined;\n  @state()\n  private set stripWidth(value: number) {\n    if (this._thumbnailLayoutTask) {\n      this._pendingStripWidth = value;\n      return;\n    }\n    this._stripWidth = value;\n\n    if (value > 0) {\n      this._thumbnailLayoutTask = this.thumbnailLayoutTask\n        .run()\n        .then(async () => {\n          // Use taskComplete and .value instead of promise return value\n          await this.thumbnailLayoutTask.taskComplete;\n          const layout = this.thumbnailLayoutTask.value;\n          return layout ? this.runThumbnailRenderTask(layout) : [];\n        })\n        .finally(() => {\n          this._thumbnailLayoutTask = undefined;\n          if (this._pendingStripWidth) {\n            this.stripWidth = this._pendingStripWidth;\n            this._pendingStripWidth = undefined;\n          }\n        });\n    }\n  }\n  private get stripWidth() {\n    return this._stripWidth;\n  }\n\n  /**\n   * Run thumbnail render task directly with provided layout (bypasses task args dependency)\n   */\n  private async runThumbnailRenderTask(\n    layout: ThumbnailLayout,\n  ): Promise<ThumbnailRenderInfo[]> {\n    if (!layout || !this.targetElement || layout.count === 0) {\n      return [];\n    }\n\n    // Run the thumbnail render task logic directly\n    return this.renderThumbnails(\n      layout,\n      this.targetElement,\n      this.thumbnailWidth,\n    );\n  }\n\n  private resizeObserver?: ResizeObserver;\n  private _thumbnailUpdateInProgress = false;\n  private _pendingThumbnailUpdate = false;\n  private _videoPropertyObserver?: MutationObserver;\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n\n    // IMPLEMENTATION GUIDELINES: Fix for initial loading bug - ensure width is detected\n    if (this._stripWidth === 0) {\n      const width = this.clientWidth;\n      if (width > 0) {\n        this.stripWidth = width;\n      }\n    }\n\n    // IMPLEMENTATION GUIDELINES: Responsive debouncing for thumbnail property changes using EFTimegroup pattern\n    if (\n      changedProperties.has(\"thumbnailWidth\") ||\n      changedProperties.has(\"startTimeMs\") ||\n      changedProperties.has(\"endTimeMs\") ||\n      changedProperties.has(\"useIntrinsicDuration\")\n    ) {\n      this.runThumbnailUpdate();\n    }\n  }\n\n  /**\n   * Run thumbnail update with responsive debouncing (based on EFTimegroup currentTime pattern)\n   */\n  private runThumbnailUpdate() {\n    // If update already in progress, just flag that another update is needed\n    if (this._thumbnailUpdateInProgress) {\n      this._pendingThumbnailUpdate = true;\n      return;\n    }\n\n    this._thumbnailUpdateInProgress = true;\n\n    // Trigger full layout→render pipeline immediately for responsiveness\n    this.thumbnailLayoutTask\n      .run()\n      .then(async () => {\n        await this.thumbnailLayoutTask.taskComplete;\n        const layout = this.thumbnailLayoutTask.value;\n        if (layout) {\n          await this.runThumbnailRenderTask(layout);\n        }\n      })\n      .catch(() => {\n        // Ignore errors - thumbnails will show as placeholders\n      })\n      .finally(() => {\n        this._thumbnailUpdateInProgress = false;\n\n        // If more property changes came in while we were processing, run another update\n        if (this._pendingThumbnailUpdate) {\n          this._pendingThumbnailUpdate = false;\n          this.runThumbnailUpdate();\n        }\n      });\n  }\n\n  private thumbnailLayoutTask = new Task(this, {\n    autoRun: false,\n    task: async ([\n      stripWidth,\n      thumbnailWidth,\n      targetElement,\n      startTimeMs,\n      endTimeMs,\n      useIntrinsicDuration,\n      mediaEngine,\n    ]: readonly [\n      number,\n      number,\n      EFVideo | null,\n      number | undefined,\n      number | undefined,\n      boolean,\n      ImportedMediaEngine | null | undefined,\n    ]) => {\n      // Need valid dimensions and target element\n      if (stripWidth <= 0 || !targetElement) {\n        return { count: 0, segments: [] };\n      }\n\n      // IMPLEMENTATION GUIDELINES: Wait for media engine to be ready before generating thumbnails\n      if (!mediaEngine) {\n        // If no media engine yet, wait for it to be ready\n        if (targetElement.mediaEngineTask) {\n          await targetElement.mediaEngineTask.taskComplete;\n          // Get the media engine after it's ready\n          const readyMediaEngine = targetElement.mediaEngineTask.value;\n          if (!readyMediaEngine) {\n            return { count: 0, segments: [] };\n          }\n          // Continue with the ready media engine\n          return this.calculateLayoutWithMediaEngine(\n            stripWidth,\n            thumbnailWidth,\n            targetElement,\n            startTimeMs,\n            endTimeMs,\n            useIntrinsicDuration,\n            readyMediaEngine,\n          );\n        }\n        return { count: 0, segments: [] };\n      }\n\n      // Media engine is ready, proceed with layout calculation\n      return this.calculateLayoutWithMediaEngine(\n        stripWidth,\n        thumbnailWidth,\n        targetElement,\n        startTimeMs,\n        endTimeMs,\n        useIntrinsicDuration,\n        mediaEngine,\n      );\n    },\n    args: () =>\n      [\n        this.stripWidth,\n        this.thumbnailWidth,\n        this.targetElement,\n        this.startTimeMs,\n        this.endTimeMs,\n        this.useIntrinsicDuration,\n        this.targetElement?.mediaEngineTask?.value,\n      ] as const,\n  });\n\n  /**\n   * Calculate layout with a ready media engine\n   */\n  private calculateLayoutWithMediaEngine(\n    stripWidth: number,\n    thumbnailWidth: number,\n    targetElement: EFVideo,\n    startTimeMs: number | undefined,\n    endTimeMs: number | undefined,\n    useIntrinsicDuration: boolean,\n    mediaEngine: ImportedMediaEngine,\n  ) {\n    // Determine time range for thumbnails with correct timeline coordinate handling\n    if (useIntrinsicDuration) {\n      // INTRINSIC MODE: start-time-ms/end-time-ms are relative to source timeline (0 = source start)\n      const effectiveStartMs = startTimeMs ?? 0;\n      const effectiveEndMs =\n        endTimeMs ?? targetElement.intrinsicDurationMs ?? 0;\n\n      return this.generateLayoutFromTimeRange(\n        stripWidth,\n        thumbnailWidth,\n        effectiveStartMs,\n        effectiveEndMs,\n        mediaEngine,\n      );\n    }\n    // TRIMMED MODE: start-time-ms/end-time-ms are relative to trimmed timeline (0 = trim start)\n    const sourceStart = targetElement.sourceStartMs ?? 0;\n    const trimmedDuration = targetElement.durationMs ?? 0;\n\n    // Convert trimmed timeline coordinates to source timeline coordinates\n    const effectiveStartMs =\n      startTimeMs !== undefined\n        ? sourceStart + startTimeMs // Convert from trimmed timeline to source timeline\n        : sourceStart; // Default: start of trimmed portion\n\n    const effectiveEndMs =\n      endTimeMs !== undefined\n        ? sourceStart + endTimeMs // Convert from trimmed timeline to source timeline\n        : sourceStart + trimmedDuration; // Default: end of trimmed portion\n\n    return this.generateLayoutFromTimeRange(\n      stripWidth,\n      thumbnailWidth,\n      effectiveStartMs,\n      effectiveEndMs,\n      mediaEngine,\n    );\n  }\n\n  /**\n   * Generate layout from calculated time range\n   */\n  private generateLayoutFromTimeRange(\n    stripWidth: number,\n    thumbnailWidth: number,\n    effectiveStartMs: number,\n    effectiveEndMs: number,\n    mediaEngine: ImportedMediaEngine,\n  ) {\n    // Get scrub segment duration from media engine if available\n    const scrubSegmentDurationMs =\n      mediaEngine && typeof mediaEngine.getScrubVideoRendition === \"function\"\n        ? mediaEngine.getScrubVideoRendition()?.segmentDurationMs\n        : undefined;\n\n    // Generate layout using our algorithm with segment alignment\n    const layout = calculateThumbnailLayout(\n      stripWidth,\n      thumbnailWidth,\n      effectiveStartMs,\n      effectiveEndMs,\n      scrubSegmentDurationMs,\n    );\n\n    return layout;\n  }\n\n  private thumbnailRenderTask = new Task(this, {\n    autoRun: false,\n    task: async ([layout, targetElement, thumbnailWidth]: readonly [\n      ThumbnailLayout | null,\n      EFVideo | null,\n      number,\n    ]) => {\n      // Simplified task that delegates to renderThumbnails method\n      if (!layout || !targetElement) {\n        return [];\n      }\n      return this.renderThumbnails(layout, targetElement, thumbnailWidth);\n    },\n    args: () =>\n      [\n        this.thumbnailLayoutTask.value || null,\n        this.targetElement,\n        this.thumbnailWidth,\n      ] as const,\n  });\n\n  /**\n   * Render thumbnails with provided layout (main rendering logic)\n   */\n  private async renderThumbnails(\n    layout: ThumbnailLayout,\n    targetElement: EFVideo,\n    thumbnailWidth: number,\n  ): Promise<ThumbnailRenderInfo[]> {\n    if (!layout || !targetElement || layout.count === 0) {\n      return [];\n    }\n\n    const videoSrc = targetElement.src;\n    const availableHeight = this._stripHeight - STRIP_BORDER_PADDING; // Account for border/padding\n\n    const allThumbnails: ThumbnailRenderInfo[] = [];\n    let thumbnailIndex = 0; // Track ordinal position\n\n    // Process each segment\n    for (const segment of layout.segments) {\n      for (const thumbnail of segment.thumbnails) {\n        const cacheKey = getThumbnailCacheKey(videoSrc, thumbnail.timeMs);\n\n        // Try exact cache hit first\n        let imageData = thumbnailImageCache.get(cacheKey);\n        let status: ThumbnailRenderInfo[\"status\"] = \"exact-hit\";\n        let nearHitKey: string | undefined;\n\n        if (!imageData) {\n          // Try near cache hit within 5 seconds using proper range search\n          const timeMinus = Math.max(0, thumbnail.timeMs - 5000);\n          const timePlus = thumbnail.timeMs + 5000;\n\n          // For range bounds, use raw timestamps (don't quantize the search range)\n          const rangeStartKey = `${videoSrc}:${timeMinus}`;\n          const rangeEndKey = `${videoSrc}:${timePlus}`;\n\n          // Use findRange to find any cached items in this time window\n          const nearHits = thumbnailImageCache.findRange(\n            rangeStartKey,\n            rangeEndKey,\n          );\n\n          // Filter to only include the same video source\n          const sameVideoHits = nearHits.filter((hit) =>\n            hit.key.startsWith(`${videoSrc}:`),\n          );\n\n          if (sameVideoHits.length > 0) {\n            // Get the closest match by time from same video\n            const nearestHit = sameVideoHits.reduce((closest, current) => {\n              const currentParts = current.key.split(\":\");\n              const closestParts = closest.key.split(\":\");\n              const currentTime = Number.parseFloat(\n                currentParts[currentParts.length - 1] || \"0\",\n              );\n              const closestTime = Number.parseFloat(\n                closestParts[closestParts.length - 1] || \"0\",\n              );\n              const currentDiff = Math.abs(currentTime - thumbnail.timeMs);\n              const closestDiff = Math.abs(closestTime - thumbnail.timeMs);\n              return currentDiff < closestDiff ? current : closest;\n            });\n\n            imageData = nearestHit.value;\n            status = \"near-hit\";\n            nearHitKey = nearestHit.key;\n          } else {\n            status = \"missing\";\n          }\n        }\n\n        // Fixed integer positioning - no floating point\n        const x = thumbnailIndex * (thumbnailWidth + THUMBNAIL_GAP);\n\n        allThumbnails.push({\n          timeMs: thumbnail.timeMs,\n          segmentId: segment.segmentId,\n          x,\n          width: thumbnailWidth, // Always exactly 80px\n          height: availableHeight, // Always exactly 44px\n          status,\n          imageData,\n          nearHitKey,\n        });\n\n        thumbnailIndex++; // Increment ordinal position\n      }\n    }\n\n    // Draw current state (cache hits and placeholders)\n    await this.drawThumbnails(allThumbnails);\n\n    // Load missing thumbnails from scrub tracks\n    await this.loadMissingThumbnails(allThumbnails, targetElement);\n\n    return allThumbnails;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // Set up ResizeObserver to track element dimensions\n    this.resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        // Use borderBoxSize for accurate dimensions including borders/padding\n        const width =\n          entry.borderBoxSize && entry.borderBoxSize.length > 0\n            ? entry.borderBoxSize[0]?.inlineSize\n            : entry.contentRect.width;\n\n        const height =\n          entry.borderBoxSize && entry.borderBoxSize.length > 0\n            ? entry.borderBoxSize[0]?.blockSize\n            : entry.contentRect.height;\n\n        this._stripHeight = height ?? 0;\n        this.stripWidth = width ?? 0; // This triggers thumbnail layout update\n      }\n    });\n\n    this.resizeObserver.observe(this);\n\n    // Force initial width calculation after element is fully connected\n    this.updateComplete.then(() => {\n      if (this._stripWidth === 0) {\n        const width = this.clientWidth;\n        if (width > 0) {\n          this.stripWidth = width ?? 0;\n        }\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = undefined;\n\n    // Clean up video property observer\n    this._videoPropertyObserver?.disconnect();\n    this._videoPropertyObserver = undefined;\n  }\n\n  /**\n   * Draw thumbnails to the canvas with cache hits and placeholders\n   */\n  private async drawThumbnails(\n    thumbnails: ThumbnailRenderInfo[],\n  ): Promise<void> {\n    const canvas = this.canvasRef.value;\n    if (!canvas) {\n      return;\n    }\n\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) {\n      return;\n    }\n\n    // Set canvas to exact size we're drawing - prevents CSS scaling\n    const dpr = window.devicePixelRatio || 1;\n\n    // Set canvas buffer size for high DPI rendering\n    canvas.width = this._stripWidth * dpr;\n    canvas.height = this._stripHeight * dpr;\n\n    // Set canvas DOM size to exactly what we're drawing - no CSS scaling\n    canvas.style.width = `${this._stripWidth}px`;\n    canvas.style.height = `${this._stripHeight}px`;\n\n    // Scale the drawing context to match device pixel ratio\n    ctx.scale(dpr, dpr);\n\n    // Clear canvas (use logical pixel dimensions since context is scaled)\n    ctx.fillStyle = \"#2a2a2a\";\n    ctx.fillRect(0, 0, this._stripWidth, this._stripHeight);\n\n    // Draw each thumbnail with proper aspect ratio and centering\n    for (const thumb of thumbnails) {\n      if (thumb.imageData) {\n        // Draw cached thumbnail with aspect ratio preservation\n        const tempCanvas = document.createElement(\"canvas\");\n        tempCanvas.width = thumb.imageData.width;\n        tempCanvas.height = thumb.imageData.height;\n        const tempCtx = tempCanvas.getContext(\"2d\");\n        if (!tempCtx) {\n          continue;\n        }\n        tempCtx.putImageData(thumb.imageData, 0, 0);\n\n        // Preserve aspect ratio within fixed container bounds\n        const sourceAspect = thumb.imageData.width / thumb.imageData.height;\n        const containerAspect = thumb.width / thumb.height;\n\n        // Calculate aspect-ratio-preserving dimensions with integer coordinates\n        let drawWidth: number;\n        let drawHeight: number;\n        let drawX: number;\n        let drawY: number;\n\n        if (sourceAspect > containerAspect) {\n          // Source is wider - fit to container width, letterbox top/bottom\n          drawWidth = thumb.width;\n          drawHeight = Math.round(thumb.width / sourceAspect);\n          drawX = thumb.x;\n          drawY = Math.round((this._stripHeight - drawHeight) / 2);\n        } else {\n          // Source is taller - fit to container height, pillarbox left/right\n          drawWidth = Math.round(thumb.height * sourceAspect);\n          drawHeight = thumb.height;\n          drawX = thumb.x + Math.round((thumb.width - drawWidth) / 2);\n          drawY = Math.round((this._stripHeight - drawHeight) / 2);\n        }\n\n        // Draw with proper aspect ratio preservation\n        ctx.drawImage(tempCanvas, drawX, drawY, drawWidth, drawHeight);\n\n        // Add subtle indicator for near hits\n        if (thumb.status === \"near-hit\") {\n          ctx.fillStyle = \"rgba(255, 165, 0, 0.3)\";\n          ctx.fillRect(thumb.x, 0, thumb.width, 2);\n        }\n      } else {\n        // Draw placeholder - center vertically in strip with integer positioning\n        const placeholderY = Math.round((this._stripHeight - thumb.height) / 2);\n        ctx.fillStyle = \"#404040\";\n        ctx.fillRect(thumb.x, placeholderY, thumb.width, thumb.height);\n\n        // Add subtle loading indicator with integer positioning\n        ctx.strokeStyle = \"#666\";\n        ctx.lineWidth = 1;\n        ctx.setLineDash([2, 2]);\n        ctx.strokeRect(thumb.x, placeholderY, thumb.width, thumb.height);\n        ctx.setLineDash([]);\n      }\n    }\n  }\n\n  /**\n   * Load missing thumbnails using MediaEngine batch extraction\n   */\n  private async loadMissingThumbnails(\n    thumbnails: ThumbnailRenderInfo[],\n    targetElement: EFVideo,\n  ): Promise<void> {\n    const mediaEngine = targetElement.mediaEngineTask?.value;\n    if (!mediaEngine) {\n      return;\n    }\n\n    // Get all missing thumbnails\n    const missingThumbnails = thumbnails.filter(\n      (t) => t.status === \"missing\" || t.status === \"near-hit\",\n    );\n\n    if (missingThumbnails.length === 0) {\n      return;\n    }\n\n    // Update status to loading\n    for (const thumb of missingThumbnails) {\n      thumb.status = \"loading\";\n    }\n\n    // Batch extract all missing thumbnails using MediaEngine\n    const timestamps = missingThumbnails.map((t) => t.timeMs);\n\n    const thumbnailResults = await mediaEngine.extractThumbnails(timestamps);\n\n    // Convert canvases to ImageData and update thumbnails\n    for (let i = 0; i < missingThumbnails.length; i++) {\n      const thumb = missingThumbnails[i];\n      const thumbnailResult = thumbnailResults[i];\n\n      if (thumb && thumbnailResult) {\n        // Convert canvas to ImageData\n        const imageData = this.canvasToImageData(thumbnailResult.thumbnail);\n\n        if (imageData) {\n          const cacheKey = getThumbnailCacheKey(\n            targetElement.src,\n            thumb.timeMs,\n          );\n          thumbnailImageCache.set(cacheKey, imageData);\n          thumb.imageData = imageData;\n          thumb.status = \"exact-hit\";\n        }\n      }\n    }\n\n    // Redraw with newly loaded thumbnails\n    await this.drawThumbnails(thumbnails);\n  }\n\n  /**\n   * Convert Canvas to ImageData for caching\n   */\n  private canvasToImageData(\n    canvas: HTMLCanvasElement | OffscreenCanvas,\n  ): ImageData | null {\n    // Extract ImageData from canvas\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) {\n      return null;\n    }\n\n    return ctx.getImageData(0, 0, canvas.width, canvas.height);\n  }\n\n  render() {\n    return html`\n      <canvas ${ref(this.canvasRef)}></canvas>\n      ${this.thumbnailRenderTask.render({\n        pending: () => html``,\n        complete: () => html``,\n        error: (e) =>\n          html`<div class=\"error\">Error loading thumbnails: ${e}</div>`,\n      })}\n    `;\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-thumbnail-strip\": EFThumbnailStrip;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"EFThumbnailStrip.js","names":["EFThumbnailStrip","node: Node | null","parentNode: Node | null","slots: ThumbnailSlot[]"],"sources":["../../src/elements/EFThumbnailStrip.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport type { EFVideo } from \"./EFVideo.js\";\nimport type { EFTimegroup } from \"./EFTimegroup.js\";\nimport { TargetController } from \"./TargetController.ts\";\nimport { timelineStateContext, type TimelineState } from \"../gui/timeline/timelineStateContext.js\";\nimport { sessionThumbnailCache, getCacheKey } from \"./SessionThumbnailCache.js\";\nimport { findRootTemporal } from \"./findRootTemporal.js\";\n\n/** Type guard to check if element is EFVideo */\nfunction isEFVideo(element: Element | null): element is EFVideo {\n  return element?.tagName.toLowerCase() === \"ef-video\";\n}\n\n/** Type guard to check if element is EFTimegroup */\nfunction isEFTimegroup(element: Element | null): element is EFTimegroup {\n  return element?.tagName.toLowerCase() === \"ef-timegroup\";\n}\n\n/**\n * Get identifiers for cache key generation.\n * Returns rootId (for cache isolation) and elementId (for element-specific caching).\n */\nfunction getCacheIdentifiers(element: EFVideo | EFTimegroup): { rootId: string; elementId: string } {\n  // Get root timegroup for cache isolation between projects\n  const rootTemporal = findRootTemporal(element);\n  const rootTimegroup = rootTemporal && isEFTimegroup(rootTemporal) ? rootTemporal : null;\n  const rootId = rootTimegroup?.id || \"default\";\n\n  // Element identifier\n  const elementId = isEFVideo(element)\n    ? element.src || element.id || \"video\"\n    : element.id || \"timegroup\";\n\n  return { rootId, elementId };\n}\n\n/** Padding in pixels for virtual rendering (render extra thumbnails beyond viewport) */\nconst VIRTUAL_RENDER_PADDING_PX = 200;\n\n/** Default gap between thumbnails */\nconst DEFAULT_GAP = 4;\n\n/** Default aspect ratio if unknown */\nconst DEFAULT_ASPECT_RATIO = 16 / 9;\n\n/** Max canvas width for thumbnail captures */\nconst MAX_CAPTURE_WIDTH = 480;\n\n/** Thumbnails to capture per batch */\nconst BATCH_SIZE = 10;\n\ninterface ThumbnailSlot {\n  timeMs: number;\n  x: number; // Absolute position (not scroll-adjusted)\n  width: number;\n  imageData?: ImageData;\n  status: \"cached\" | \"loading\" | \"pending\";\n}\n\n@customElement(\"ef-thumbnail-strip\")\nexport class EFThumbnailStrip extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        background: #1a1a2e;\n        overflow: hidden;\n        width: 100%;\n        height: 100%;\n      }\n      canvas {\n        display: block;\n        /* Absolute positioning - we manually position at visible region */\n        position: absolute;\n        top: 0;\n        /* Left and width set programmatically based on visible portion */\n        height: 100%;\n        image-rendering: auto;\n      }\n    `,\n  ];\n\n  canvasRef = createRef<HTMLCanvasElement>();\n\n  // ─────────────────────────────────────────────────────────────────────────\n  // Public Properties\n  // ─────────────────────────────────────────────────────────────────────────\n\n  @property({ type: String })\n  target = \"\";\n\n  @property({ type: Number, attribute: \"thumbnail-width\" })\n  thumbnailWidth = 0; // 0 = auto (calculate from height using aspect ratio)\n\n  @property({ type: Number, attribute: \"gap\" })\n  gap = DEFAULT_GAP;\n\n  @property({ type: Number, attribute: \"start-time-ms\" })\n  startTimeMs?: number;\n\n  @property({ type: Number, attribute: \"end-time-ms\" })\n  endTimeMs?: number;\n\n  @property({\n    type: Boolean,\n    attribute: \"use-intrinsic-duration\",\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => value === \"true\",\n      toAttribute: (value: boolean) => (value ? \"true\" : null),\n    },\n  })\n  useIntrinsicDuration = false;\n\n  @property({ type: Number, attribute: \"pixels-per-ms\" })\n  pixelsPerMs = 0.1;\n\n  // ─────────────────────────────────────────────────────────────────────────\n  // Internal State\n  // ─────────────────────────────────────────────────────────────────────────\n\n  /** Timeline state context for viewport info */\n  @consume({ context: timelineStateContext, subscribe: true })\n  @state()\n  private _timelineState?: TimelineState;\n\n  /** Target element controller */\n  // @ts-expect-error controller used for side effects\n  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Used for side effects\n  private _targetController: TargetController = new TargetController(this as any);\n\n  private _targetElement: EFVideo | EFTimegroup | null = null;\n\n  @state()\n  get targetElement(): EFVideo | EFTimegroup | null {\n    return this._targetElement;\n  }\n\n  set targetElement(value: EFVideo | EFTimegroup | null) {\n    const oldValue = this._targetElement;\n    this._targetElement = value;\n\n    // Clean up old observer\n    this._mutationObserver?.disconnect();\n\n    // Reset ready state when target changes\n    if (value !== oldValue) {\n      this._hasLoadedThumbnails = false;\n    }\n\n    if (value && value !== oldValue) {\n      this._setupTargetObserver(value);\n    }\n\n    this.requestUpdate(\"targetElement\", oldValue);\n  }\n\n  /** Host element dimensions */\n  private _width = 0;\n  private _height = 0;\n\n  /** Scroll container reference */\n  private _scrollContainer: HTMLElement | null = null;\n  private _currentScrollLeft = 0;\n  \n  /** \n   * Offset from scroll container's left edge to this element's track.\n   * Used for sticky positioning when track doesn't start at x=0 (e.g., labels column).\n   */\n  private _trackLeftOffset = 0;\n\n  /** Current thumbnail slots */\n  private _thumbnailSlots: ThumbnailSlot[] = [];\n\n  /** Capture in progress flag */\n  private _captureInProgress = false;\n\n  /** Resize observer */\n  private _resizeObserver?: ResizeObserver;\n\n  /** Mutation observer for target element changes */\n  private _mutationObserver?: MutationObserver;\n\n  /** Animation frame for scroll updates */\n  private _scrollFrame?: number;\n\n  /** Render request tracking */\n  private _renderRequested = false;\n\n  /** Track if any thumbnails have been loaded (for ready event) */\n  private _hasLoadedThumbnails = false;\n\n  // ─────────────────────────────────────────────────────────────────────────\n  // Lifecycle\n  // ─────────────────────────────────────────────────────────────────────────\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // Set up resize observer\n    this._resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const box = entry.borderBoxSize?.[0];\n        this._width = box?.inlineSize ?? entry.contentRect.width;\n        this._height = box?.blockSize ?? entry.contentRect.height;\n        // Recalculate track offset in case layout changed\n        this._calculateTrackOffset();\n        this._scheduleRender();\n      }\n    });\n    this._resizeObserver.observe(this);\n\n    // Find scroll container after element is ready\n    this.updateComplete.then(() => {\n      this._findScrollContainer();\n      this._scheduleRender();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._resizeObserver?.disconnect();\n    this._mutationObserver?.disconnect();\n    this._detachScrollListener();\n\n    if (this._scrollFrame) {\n      cancelAnimationFrame(this._scrollFrame);\n    }\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n\n    // Re-render on property changes\n    if (\n      changedProperties.has(\"thumbnailWidth\") ||\n      changedProperties.has(\"gap\") ||\n      changedProperties.has(\"startTimeMs\") ||\n      changedProperties.has(\"endTimeMs\") ||\n      changedProperties.has(\"useIntrinsicDuration\") ||\n      changedProperties.has(\"pixelsPerMs\") ||\n      changedProperties.has(\"targetElement\")\n    ) {\n      this._scheduleRender();\n    }\n\n    // Handle timeline context scroll changes\n    if (changedProperties.has(\"_timelineState\")) {\n      this._onContextScroll();\n    }\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────\n  // Scroll Handling\n  // ─────────────────────────────────────────────────────────────────────────\n\n  private _findScrollContainer(): void {\n    // Walk up the DOM tree, crossing shadow boundaries\n    let node: Node | null = this.parentNode;\n    \n    while (node) {\n      // Check if this node is an element with overflow-x: auto or scroll\n      if (node instanceof HTMLElement) {\n        const style = getComputedStyle(node);\n        if (style.overflowX === \"auto\" || style.overflowX === \"scroll\") {\n          this._scrollContainer = node;\n          this._calculateTrackOffset();\n          this._attachScrollListener();\n          return;\n        }\n      }\n      \n      // Move to parent, crossing shadow DOM boundaries\n      if (node.parentNode) {\n        node = node.parentNode;\n      } else if (node instanceof ShadowRoot) {\n        // Cross shadow boundary to the host element\n        node = node.host;\n      } else {\n        break;\n      }\n    }\n  }\n\n  /**\n   * Calculate the horizontal offset from scroll container's left edge to this element's track.\n   * This accounts for sticky labels or other elements that precede the track area.\n   * \n   * We look for our specific timeline elements (ef-timeline-row) and measure their label width.\n   */\n  private _calculateTrackOffset(): void {\n    if (!this._scrollContainer) {\n      this._trackLeftOffset = 0;\n      return;\n    }\n    \n    // Find ef-timeline-row ancestor and get its label width\n    const timelineRow = this._findTimelineRow();\n    if (timelineRow) {\n      const labelWidth = this._getTimelineRowLabelWidth(timelineRow);\n      if (labelWidth > 0) {\n        this._trackLeftOffset = labelWidth;\n        return;\n      }\n    }\n    \n    // No timeline row found - track starts at scroll container's left edge\n    this._trackLeftOffset = 0;\n  }\n  \n  /**\n   * Find the ef-timeline-row ancestor by walking up through shadow DOM boundaries.\n   */\n  private _findTimelineRow(): Element | null {\n    let node: Node | null = this;\n    \n    while (node) {\n      // Check if this is ef-timeline-row\n      if (node instanceof Element && node.tagName.toLowerCase() === 'ef-timeline-row') {\n        return node;\n      }\n      \n      // Move up through shadow DOM boundaries\n      const parentNode: Node | null = node.parentNode;\n      if (parentNode instanceof ShadowRoot) {\n        node = parentNode.host;\n      } else {\n        node = parentNode;\n      }\n    }\n    \n    return null;\n  }\n  \n  /**\n   * Get the label width from an ef-timeline-row element.\n   * Queries the shadow root for .row-label and returns its width.\n   */\n  private _getTimelineRowLabelWidth(timelineRow: Element): number {\n    const shadowRoot = timelineRow.shadowRoot;\n    if (!shadowRoot) return 0;\n    \n    const rowLabel = shadowRoot.querySelector('.row-label');\n    if (!rowLabel) return 0;\n    \n    return rowLabel.getBoundingClientRect().width;\n  }\n  \n  /**\n   * Get this strip's absolute position in the timeline (pixels from timeline origin).\n   * Uses the target element's startTimeMs to determine position.\n   */\n  private _getStripTimelinePosition(): number {\n    const target = this._targetElement;\n    if (!target) return 0;\n    \n    // For videos, use their startTimeMs to get timeline position\n    if (isEFVideo(target)) {\n      const startTimeMs = target.startTimeMs ?? 0;\n      const pixelsPerMs = this._timelineState?.pixelsPerMs ?? 0.1;\n      return startTimeMs * pixelsPerMs;\n    }\n    \n    // For root timegroup, position is 0\n    return 0;\n  }\n\n  private _attachScrollListener(): void {\n    if (!this._scrollContainer) return;\n    this._scrollContainer.addEventListener(\"scroll\", this._onScroll, { passive: true });\n    this._currentScrollLeft = this._scrollContainer.scrollLeft;\n  }\n\n  private _detachScrollListener(): void {\n    if (this._scrollContainer) {\n      this._scrollContainer.removeEventListener(\"scroll\", this._onScroll);\n      this._scrollContainer = null;\n    }\n  }\n\n  private _onScroll = (): void => {\n    if (!this._scrollContainer) return;\n    this._currentScrollLeft = this._scrollContainer.scrollLeft;\n    this._drawCanvas();\n\n    // Schedule loading of newly visible thumbnails\n    if (!this._scrollFrame) {\n      this._scrollFrame = requestAnimationFrame(() => {\n        this._scrollFrame = undefined;\n        this._loadVisibleThumbnails();\n      });\n    }\n  };\n\n  private _onContextScroll(): void {\n    if (!this._timelineState || this._scrollContainer) return;\n    this._currentScrollLeft = this._timelineState.viewportScrollLeft;\n    this._drawCanvas();\n  }\n\n  private get _viewportWidth(): number {\n    if (this._timelineState?.viewportWidth) {\n      return this._timelineState.viewportWidth;\n    }\n    if (this._scrollContainer) {\n      // Subtract track offset to get actual viewport width available for the track\n      return this._scrollContainer.clientWidth - this._trackLeftOffset;\n    }\n    return this._width;\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────\n  // Target Observer\n  // ─────────────────────────────────────────────────────────────────────────\n\n  private _setupTargetObserver(target: EFVideo | EFTimegroup): void {\n    if (isEFVideo(target)) {\n      // Watch video property changes\n      this._mutationObserver = new MutationObserver(() => this._scheduleRender());\n      this._mutationObserver.observe(target, {\n        attributes: true,\n        attributeFilter: [\"trimstart\", \"trimend\", \"sourcein\", \"sourceout\", \"src\"],\n      });\n\n      // Wait for media engine\n      target.updateComplete.then(() => {\n        if (this._targetElement !== target) return;\n        target.mediaEngineTask?.taskComplete.then(() => {\n          if (this._targetElement !== target) return;\n          this._scheduleRender();\n        });\n      });\n    } else if (isEFTimegroup(target)) {\n      // Watch timegroup structure changes\n      this._mutationObserver = new MutationObserver(() => this._scheduleRender());\n      this._mutationObserver.observe(target, {\n        childList: true,\n        subtree: true,\n      });\n\n      // Watch for duration becoming available\n      if (target.durationMs === 0) {\n        const checkDuration = () => {\n          if (this._targetElement !== target) return;\n          if (target.durationMs > 0) {\n            this._scheduleRender();\n          } else {\n            requestAnimationFrame(checkDuration);\n          }\n        };\n        requestAnimationFrame(checkDuration);\n      }\n    }\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────\n  // Rendering Pipeline\n  // ─────────────────────────────────────────────────────────────────────────\n\n  private _scheduleRender(): void {\n    if (this._renderRequested) return;\n    this._renderRequested = true;\n\n    requestAnimationFrame(() => {\n      this._renderRequested = false;\n      this._calculateLayout();\n      this._checkCache();\n      this._drawCanvas();\n      this._loadVisibleThumbnails();\n\n      // Check if we should dispatch ready event\n      // (e.g., all thumbnails were already cached, or nothing to load)\n      this._checkAndDispatchReady();\n    });\n  }\n\n  /**\n   * Check if thumbnails are ready and dispatch event if not already done.\n   */\n  private _checkAndDispatchReady(): void {\n    if (this._hasLoadedThumbnails) return;\n\n    // Consider ready if we have layout and either:\n    // 1. Have some cached thumbnails, or\n    // 2. Have no pending thumbnails (nothing to load)\n    const hasLayout = this._thumbnailSlots.length > 0;\n    const hasAnyCached = this._thumbnailSlots.some((s) => s.status === \"cached\");\n    const hasPending = this._thumbnailSlots.some((s) => s.status === \"pending\");\n\n    if (hasLayout && (hasAnyCached || !hasPending)) {\n      this._hasLoadedThumbnails = true;\n      this.dispatchEvent(new CustomEvent(\"thumbnails-ready\", { bubbles: true }));\n    }\n  }\n\n  /**\n   * Calculate thumbnail layout based on current dimensions and time range.\n   */\n  private _calculateLayout(): void {\n    if (this._width <= 0 || this._height <= 0 || !this._targetElement) {\n      this._thumbnailSlots = [];\n      return;\n    }\n\n    const timeRange = this._getTimeRange();\n    if (timeRange.endMs <= timeRange.startMs) {\n      this._thumbnailSlots = [];\n      return;\n    }\n\n    // Calculate thumbnail dimensions\n    const thumbWidth = this._getEffectiveThumbnailWidth();\n    const gap = this.gap;\n\n    // Calculate how many thumbnails fit\n    const count = Math.max(1, Math.floor((this._width + gap) / (thumbWidth + gap)));\n\n    // Calculate pitch (spacing) for edge-to-edge fill\n    const pitch = count > 1 ? (this._width - thumbWidth) / (count - 1) : 0;\n\n    // Generate slots with timestamps\n    const slots: ThumbnailSlot[] = [];\n    const duration = timeRange.endMs - timeRange.startMs;\n\n    for (let i = 0; i < count; i++) {\n      const timeMs = count === 1\n        ? (timeRange.startMs + timeRange.endMs) / 2\n        : timeRange.startMs + (i * duration) / (count - 1);\n\n      slots.push({\n        timeMs,\n        x: Math.round(i * pitch),\n        width: thumbWidth,\n        status: \"pending\",\n      });\n    }\n\n    this._thumbnailSlots = slots;\n  }\n\n  /**\n   * Get effective time range for thumbnails.\n   */\n  private _getTimeRange(): { startMs: number; endMs: number } {\n    const target = this._targetElement;\n    if (!target) return { startMs: 0, endMs: 0 };\n\n    if (isEFVideo(target)) {\n      if (this.useIntrinsicDuration) {\n        // Intrinsic mode: 0 to full source duration\n        return {\n          startMs: this.startTimeMs ?? 0,\n          endMs: this.endTimeMs ?? target.intrinsicDurationMs ?? 0,\n        };\n      }\n      // Trimmed mode: source coordinates\n      const sourceStart = target.sourceStartMs ?? 0;\n      const trimmedDuration = target.durationMs ?? 0;\n      return {\n        startMs: this.startTimeMs !== undefined ? sourceStart + this.startTimeMs : sourceStart,\n        endMs: this.endTimeMs !== undefined ? sourceStart + this.endTimeMs : sourceStart + trimmedDuration,\n      };\n    }\n\n    // Timegroup\n    return {\n      startMs: this.startTimeMs ?? 0,\n      endMs: (this.endTimeMs && this.endTimeMs > 0) ? this.endTimeMs : target.durationMs ?? 0,\n    };\n  }\n\n  /**\n   * Calculate effective thumbnail width (auto or specified).\n   */\n  private _getEffectiveThumbnailWidth(): number {\n    if (this.thumbnailWidth > 0) return this.thumbnailWidth;\n\n    const target = this._targetElement;\n    let aspectRatio = DEFAULT_ASPECT_RATIO;\n\n    if (isEFVideo(target)) {\n      const w = (target as any).videoWidth || 1920;\n      const h = (target as any).videoHeight || 1080;\n      aspectRatio = w / h;\n    } else if (isEFTimegroup(target)) {\n      const w = target.offsetWidth || 1920;\n      const h = target.offsetHeight || 1080;\n      aspectRatio = w / h;\n    }\n\n    return Math.round(this._height * aspectRatio);\n  }\n\n  /**\n   * Check cache for existing thumbnails.\n   */\n  private _checkCache(): void {\n    if (!this._targetElement) return;\n\n    const { rootId, elementId } = getCacheIdentifiers(this._targetElement);\n\n    for (const slot of this._thumbnailSlots) {\n      const key = getCacheKey(rootId, elementId, slot.timeMs);\n      if (sessionThumbnailCache.has(key)) {\n        slot.imageData = sessionThumbnailCache.get(key);\n        slot.status = \"cached\";\n      }\n    }\n  }\n\n  /**\n   * Draw the canvas with current thumbnail state.\n   * Canvas is absolutely positioned at the visible portion of the strip.\n   * Uses virtual rendering - only draws thumbnails in the visible region.\n   */\n  private _drawCanvas(): void {\n    const canvas = this.canvasRef.value;\n    if (!canvas) return;\n\n    const ctx = canvas.getContext(\"2d\", { willReadFrequently: true });\n    if (!ctx) return;\n\n    const stripWidth = this._width;\n    const height = this._height;\n\n    if (stripWidth <= 0 || height <= 0) return;\n\n    const dpr = window.devicePixelRatio || 1;\n    \n    // Get scroll and viewport info\n    const scrollLeft = this._currentScrollLeft;\n    const viewportWidth = this._viewportWidth;\n    \n    // Get this strip's absolute position in the timeline\n    const stripStartPx = this._getStripTimelinePosition();\n    const stripEndPx = stripStartPx + stripWidth;\n    \n    // Calculate visible region in timeline coordinates (with padding)\n    const visibleLeftPx = scrollLeft - VIRTUAL_RENDER_PADDING_PX;\n    const visibleRightPx = scrollLeft + viewportWidth + VIRTUAL_RENDER_PADDING_PX;\n    \n    // Check if strip is visible at all\n    if (stripEndPx < visibleLeftPx || stripStartPx > visibleRightPx) {\n      canvas.style.display = \"none\";\n      return;\n    }\n    canvas.style.display = \"block\";\n    \n    // Calculate the intersection: what part of the strip is visible\n    // Coordinates relative to strip's left edge (0 = strip start)\n    const visibleStartInStrip = Math.max(0, visibleLeftPx - stripStartPx);\n    const visibleEndInStrip = Math.min(stripWidth, visibleRightPx - stripStartPx);\n    const visibleWidthPx = visibleEndInStrip - visibleStartInStrip;\n    \n    if (visibleWidthPx <= 0) {\n      canvas.style.display = \"none\";\n      return;\n    }\n\n    // Set canvas size with DPR\n    const targetWidth = Math.ceil(visibleWidthPx * dpr);\n    const targetHeight = Math.ceil(height * dpr);\n\n    if (canvas.width !== targetWidth || canvas.height !== targetHeight) {\n      canvas.width = targetWidth;\n      canvas.height = targetHeight;\n    }\n    \n    // Position canvas at the visible portion within the strip\n    canvas.style.left = `${visibleStartInStrip}px`;\n    canvas.style.width = `${visibleWidthPx}px`;\n    canvas.style.height = `${height}px`;\n\n    // Reset transform\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n\n    // Clear with background\n    ctx.fillStyle = \"#1a1a2e\";\n    ctx.fillRect(0, 0, visibleWidthPx, height);\n\n    // Draw each visible thumbnail\n    for (const slot of this._thumbnailSlots) {\n      const slotRight = slot.x + slot.width;\n\n      // Skip if slot is outside visible strip region\n      if (slotRight < visibleStartInStrip || slot.x > visibleEndInStrip) continue;\n\n      // Draw position relative to canvas (canvas starts at visibleStartInStrip)\n      const drawX = slot.x - visibleStartInStrip;\n\n      // Skip if outside canvas bounds\n      if (drawX + slot.width < 0 || drawX > visibleWidthPx) continue;\n\n      if (slot.imageData) {\n        this._drawThumbnailImage(ctx, slot.imageData, drawX, slot.width, height);\n      } else {\n        // Placeholder\n        ctx.fillStyle = slot.status === \"loading\" ? \"#2d2d50\" : \"#2d2d44\";\n        ctx.fillRect(drawX, 0, slot.width, height);\n\n        // Loading indicator\n        if (slot.status === \"loading\") {\n          ctx.fillStyle = \"rgba(59, 130, 246, 0.3)\";\n          ctx.fillRect(drawX, 0, slot.width, 2);\n        }\n      }\n    }\n  }\n\n  /**\n   * Draw a thumbnail image with cover mode scaling.\n   */\n  private _drawThumbnailImage(\n    ctx: CanvasRenderingContext2D,\n    imageData: ImageData,\n    x: number,\n    width: number,\n    height: number,\n  ): void {\n    // Create temp canvas for ImageData\n    const tempCanvas = document.createElement(\"canvas\");\n    tempCanvas.width = imageData.width;\n    tempCanvas.height = imageData.height;\n    const tempCtx = tempCanvas.getContext(\"2d\");\n    if (!tempCtx) return;\n    tempCtx.putImageData(imageData, 0, 0);\n\n    // Cover mode: crop to fill destination\n    const srcAspect = imageData.width / imageData.height;\n    const dstAspect = width / height;\n\n    let srcX = 0, srcY = 0, srcW = imageData.width, srcH = imageData.height;\n\n    if (srcAspect > dstAspect) {\n      srcW = imageData.height * dstAspect;\n      srcX = (imageData.width - srcW) / 2;\n    } else {\n      srcH = imageData.width / dstAspect;\n      srcY = (imageData.height - srcH) / 2;\n    }\n\n    ctx.drawImage(tempCanvas, srcX, srcY, srcW, srcH, x, 0, width, height);\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────\n  // Thumbnail Loading\n  // ─────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Load thumbnails that are visible in the current viewport.\n   */\n  private async _loadVisibleThumbnails(): Promise<void> {\n    if (this._captureInProgress || !this._targetElement) return;\n\n    const viewportWidth = this._viewportWidth;\n    const scrollOffset = this._currentScrollLeft;\n    const stripWidth = this._width;\n    \n    // Get strip's timeline position\n    const stripStartPx = this._getStripTimelinePosition();\n    \n    // Calculate visible region in timeline coordinates\n    const visibleLeftPx = scrollOffset - VIRTUAL_RENDER_PADDING_PX;\n    const visibleRightPx = scrollOffset + viewportWidth + VIRTUAL_RENDER_PADDING_PX;\n    \n    // Convert to strip-local coordinates\n    const visibleStartInStrip = Math.max(0, visibleLeftPx - stripStartPx);\n    const visibleEndInStrip = Math.min(stripWidth, visibleRightPx - stripStartPx);\n\n    // Find pending slots in visible range (using strip-local coordinates)\n    const pending = this._thumbnailSlots.filter((slot) => {\n      if (slot.status !== \"pending\") return false;\n      const slotRight = slot.x + slot.width;\n      return slotRight >= visibleStartInStrip && slot.x <= visibleEndInStrip;\n    });\n\n    if (pending.length === 0) return;\n\n    this._captureInProgress = true;\n\n    // Mark as loading\n    for (const slot of pending) {\n      slot.status = \"loading\";\n    }\n    this._drawCanvas();\n\n    try {\n      if (isEFTimegroup(this._targetElement)) {\n        await this._captureTimegroupThumbnails(pending);\n      } else if (isEFVideo(this._targetElement)) {\n        await this._captureVideoThumbnails(pending);\n      }\n    } catch (error) {\n      console.warn(\"Failed to capture thumbnails:\", error);\n      // Reset failed slots\n      for (const slot of pending) {\n        if (slot.status === \"loading\") {\n          slot.status = \"pending\";\n        }\n      }\n    } finally {\n      this._captureInProgress = false;\n      this._drawCanvas();\n\n      // Dispatch ready event when thumbnails are first loaded\n      const hasAnyLoaded = this._thumbnailSlots.some((s) => s.status === \"cached\");\n      if (hasAnyLoaded && !this._hasLoadedThumbnails) {\n        this._hasLoadedThumbnails = true;\n        this.dispatchEvent(new CustomEvent(\"thumbnails-ready\", { bubbles: true }));\n      }\n    }\n  }\n\n  /**\n   * Capture thumbnails from a timegroup target.\n   */\n  private async _captureTimegroupThumbnails(slots: ThumbnailSlot[]): Promise<void> {\n    const target = this._targetElement as EFTimegroup;\n    const { rootId, elementId } = getCacheIdentifiers(target);\n\n    // Calculate capture scale\n    const timegroupWidth = target.offsetWidth || 1920;\n    const timegroupHeight = target.offsetHeight || 1080;\n    const scale = Math.min(1, this._height / timegroupHeight, MAX_CAPTURE_WIDTH / timegroupWidth);\n\n    // Process in batches\n    for (let i = 0; i < slots.length; i += BATCH_SIZE) {\n      const batch = slots.slice(i, i + BATCH_SIZE);\n      const timestamps = batch.map((s) => s.timeMs);\n\n      try {\n        const canvases = await target.captureBatch(timestamps, {\n          scale,\n          contentReadyMode: \"immediate\",\n        });\n\n        for (let j = 0; j < batch.length; j++) {\n          const slot = batch[j]!;\n          const canvas = canvases[j];\n\n          if (canvas) {\n            const imageData = this._canvasToImageData(canvas);\n            if (imageData) {\n              const key = getCacheKey(rootId, elementId, slot.timeMs);\n              sessionThumbnailCache.set(key, imageData, slot.timeMs, elementId);\n              slot.imageData = imageData;\n              slot.status = \"cached\";\n            }\n          }\n        }\n\n        // Redraw after each batch for progressive feedback\n        this._drawCanvas();\n\n        // Yield to main thread between batches\n        if (i + BATCH_SIZE < slots.length) {\n          await new Promise((r) => requestAnimationFrame(r));\n        }\n      } catch (error) {\n        console.warn(\"Batch capture failed:\", error);\n      }\n    }\n  }\n\n  /**\n   * Capture thumbnails from a video target using MediaEngine.\n   */\n  private async _captureVideoThumbnails(slots: ThumbnailSlot[]): Promise<void> {\n    const target = this._targetElement as EFVideo;\n    const { rootId, elementId } = getCacheIdentifiers(target);\n\n    // Wait for media engine\n    if (target.mediaEngineTask) {\n      await target.mediaEngineTask.taskComplete;\n    }\n\n    const mediaEngine = target.mediaEngineTask?.value;\n    if (!mediaEngine) return;\n\n    // Check for video rendition\n    const videoRendition = mediaEngine.getVideoRendition();\n    const scrubRendition = mediaEngine.getScrubVideoRendition();\n    if (!videoRendition && !scrubRendition) return;\n\n    const timestamps = slots.map((s) => s.timeMs);\n\n    // Create an abort controller for this thumbnail extraction\n    // ThumbnailExtractor requires a signal to properly handle cleanup\n    const abortController = new AbortController();\n\n    try {\n      const results = await mediaEngine.extractThumbnails(timestamps, abortController.signal);\n\n      for (let i = 0; i < slots.length; i++) {\n        const slot = slots[i]!;\n        const result = results[i];\n\n        if (result?.thumbnail) {\n          const imageData = this._canvasToImageData(result.thumbnail);\n          if (imageData) {\n            const key = getCacheKey(rootId, elementId, slot.timeMs);\n            sessionThumbnailCache.set(key, imageData, slot.timeMs, elementId);\n            slot.imageData = imageData;\n            slot.status = \"cached\";\n          }\n        }\n      }\n    } catch (error) {\n      // Abort on error to clean up any in-flight requests\n      abortController.abort();\n      console.warn(\"Video thumbnail extraction failed:\", error);\n    }\n  }\n\n  /**\n   * Convert canvas to ImageData.\n   */\n  private _canvasToImageData(canvas: HTMLCanvasElement | OffscreenCanvas): ImageData | null {\n    const ctx = canvas.getContext(\"2d\", { willReadFrequently: true }) as\n      | CanvasRenderingContext2D\n      | OffscreenCanvasRenderingContext2D\n      | null;\n    if (!ctx) return null;\n    return ctx.getImageData(0, 0, canvas.width, canvas.height);\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────\n  // Public API\n  // ─────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Returns a promise that resolves when thumbnails are ready.\n   * Resolves immediately if thumbnails are already loaded.\n   */\n  whenReady(): Promise<void> {\n    if (this._hasLoadedThumbnails) {\n      return Promise.resolve();\n    }\n    return new Promise((resolve) => {\n      this.addEventListener(\"thumbnails-ready\", () => resolve(), { once: true });\n    });\n  }\n\n  /**\n   * Check if thumbnails have been loaded.\n   */\n  get isReady(): boolean {\n    return this._hasLoadedThumbnails;\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────\n  // Cache Invalidation\n  // ─────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Invalidate cached thumbnails for this element within a time range.\n   * Call this when content changes at specific times.\n   */\n  invalidateTimeRange(startTimeMs: number, endTimeMs: number): void {\n    if (!this._targetElement) return;\n\n    const { rootId, elementId } = getCacheIdentifiers(this._targetElement);\n    sessionThumbnailCache.invalidateTimeRange(rootId, elementId, startTimeMs, endTimeMs);\n\n    // Reset affected slots\n    for (const slot of this._thumbnailSlots) {\n      if (slot.timeMs >= startTimeMs && slot.timeMs <= endTimeMs) {\n        slot.imageData = undefined;\n        slot.status = \"pending\";\n      }\n    }\n\n    this._scheduleRender();\n  }\n\n  /**\n   * Invalidate all cached thumbnails for this element.\n   */\n  invalidateAll(): void {\n    if (!this._targetElement) return;\n\n    const { rootId, elementId } = getCacheIdentifiers(this._targetElement);\n    sessionThumbnailCache.invalidateElement(rootId, elementId);\n\n    // Reset all slots\n    for (const slot of this._thumbnailSlots) {\n      slot.imageData = undefined;\n      slot.status = \"pending\";\n    }\n\n    this._scheduleRender();\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────\n  // Render\n  // ─────────────────────────────────────────────────────────────────────────\n\n  render() {\n    return html`<canvas ${ref(this.canvasRef)}></canvas>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-thumbnail-strip\": EFThumbnailStrip;\n  }\n}\n\n// Re-export cache for backwards compatibility and debugging\nexport { sessionThumbnailCache as thumbnailImageCache } from \"./SessionThumbnailCache.js\";\n"],"mappings":";;;;;;;;;;;;AAYA,SAAS,UAAU,SAA6C;AAC9D,QAAO,SAAS,QAAQ,aAAa,KAAK;;;AAI5C,SAAS,cAAc,SAAiD;AACtE,QAAO,SAAS,QAAQ,aAAa,KAAK;;;;;;AAO5C,SAAS,oBAAoB,SAAuE;CAElG,MAAM,eAAe,iBAAiB,QAAQ;AAS9C,QAAO;EAAE,SARa,gBAAgB,cAAc,aAAa,GAAG,eAAe,OACrD,MAAM;EAOnB,WAJC,UAAU,QAAQ,GAChC,QAAQ,OAAO,QAAQ,MAAM,UAC7B,QAAQ,MAAM;EAEU;;;AAI9B,MAAM,4BAA4B;;AAGlC,MAAM,cAAc;;AAGpB,MAAM,uBAAuB,KAAK;;AAGlC,MAAM,oBAAoB;;AAG1B,MAAM,aAAa;AAWZ,6BAAMA,2BAAyB,WAAW;;;mBAuBnC,WAA8B;gBAOjC;wBAGQ;aAGX;8BAiBiB;qBAGT;2BAcgC,IAAI,iBAAiB,KAAY;wBAExB;gBA2BtC;iBACC;0BAG6B;4BAClB;0BAMF;yBAGgB,EAAE;4BAGhB;0BAYF;8BAGI;yBA8LC;AAC9B,OAAI,CAAC,KAAK,iBAAkB;AAC5B,QAAK,qBAAqB,KAAK,iBAAiB;AAChD,QAAK,aAAa;AAGlB,OAAI,CAAC,KAAK,aACR,MAAK,eAAe,4BAA4B;AAC9C,SAAK,eAAe;AACpB,SAAK,wBAAwB;KAC7B;;;;gBA1UU,CACd,GAAG;;;;;;;;;;;;;;;;;;MAmBJ;;CAqDD,IACI,gBAA8C;AAChD,SAAO,KAAK;;CAGd,IAAI,cAAc,OAAqC;EACrD,MAAM,WAAW,KAAK;AACtB,OAAK,iBAAiB;AAGtB,OAAK,mBAAmB,YAAY;AAGpC,MAAI,UAAU,SACZ,MAAK,uBAAuB;AAG9B,MAAI,SAAS,UAAU,SACrB,MAAK,qBAAqB,MAAM;AAGlC,OAAK,cAAc,iBAAiB,SAAS;;CA0C/C,oBAAoB;AAClB,QAAM,mBAAmB;AAGzB,OAAK,kBAAkB,IAAI,gBAAgB,YAAY;AACrD,QAAK,MAAM,SAAS,SAAS;IAC3B,MAAM,MAAM,MAAM,gBAAgB;AAClC,SAAK,SAAS,KAAK,cAAc,MAAM,YAAY;AACnD,SAAK,UAAU,KAAK,aAAa,MAAM,YAAY;AAEnD,SAAK,uBAAuB;AAC5B,SAAK,iBAAiB;;IAExB;AACF,OAAK,gBAAgB,QAAQ,KAAK;AAGlC,OAAK,eAAe,WAAW;AAC7B,QAAK,sBAAsB;AAC3B,QAAK,iBAAiB;IACtB;;CAGJ,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,OAAK,iBAAiB,YAAY;AAClC,OAAK,mBAAmB,YAAY;AACpC,OAAK,uBAAuB;AAE5B,MAAI,KAAK,aACP,sBAAqB,KAAK,aAAa;;CAI3C,QAAQ,mBAA2D;AACjE,QAAM,QAAQ,kBAAkB;AAGhC,MACE,kBAAkB,IAAI,iBAAiB,IACvC,kBAAkB,IAAI,MAAM,IAC5B,kBAAkB,IAAI,cAAc,IACpC,kBAAkB,IAAI,YAAY,IAClC,kBAAkB,IAAI,uBAAuB,IAC7C,kBAAkB,IAAI,cAAc,IACpC,kBAAkB,IAAI,gBAAgB,CAEtC,MAAK,iBAAiB;AAIxB,MAAI,kBAAkB,IAAI,iBAAiB,CACzC,MAAK,kBAAkB;;CAQ3B,AAAQ,uBAA6B;EAEnC,IAAIC,OAAoB,KAAK;AAE7B,SAAO,MAAM;AAEX,OAAI,gBAAgB,aAAa;IAC/B,MAAM,QAAQ,iBAAiB,KAAK;AACpC,QAAI,MAAM,cAAc,UAAU,MAAM,cAAc,UAAU;AAC9D,UAAK,mBAAmB;AACxB,UAAK,uBAAuB;AAC5B,UAAK,uBAAuB;AAC5B;;;AAKJ,OAAI,KAAK,WACP,QAAO,KAAK;YACH,gBAAgB,WAEzB,QAAO,KAAK;OAEZ;;;;;;;;;CAWN,AAAQ,wBAA8B;AACpC,MAAI,CAAC,KAAK,kBAAkB;AAC1B,QAAK,mBAAmB;AACxB;;EAIF,MAAM,cAAc,KAAK,kBAAkB;AAC3C,MAAI,aAAa;GACf,MAAM,aAAa,KAAK,0BAA0B,YAAY;AAC9D,OAAI,aAAa,GAAG;AAClB,SAAK,mBAAmB;AACxB;;;AAKJ,OAAK,mBAAmB;;;;;CAM1B,AAAQ,mBAAmC;EACzC,IAAIA,OAAoB;AAExB,SAAO,MAAM;AAEX,OAAI,gBAAgB,WAAW,KAAK,QAAQ,aAAa,KAAK,kBAC5D,QAAO;GAIT,MAAMC,aAA0B,KAAK;AACrC,OAAI,sBAAsB,WACxB,QAAO,WAAW;OAElB,QAAO;;AAIX,SAAO;;;;;;CAOT,AAAQ,0BAA0B,aAA8B;EAC9D,MAAM,aAAa,YAAY;AAC/B,MAAI,CAAC,WAAY,QAAO;EAExB,MAAM,WAAW,WAAW,cAAc,aAAa;AACvD,MAAI,CAAC,SAAU,QAAO;AAEtB,SAAO,SAAS,uBAAuB,CAAC;;;;;;CAO1C,AAAQ,4BAAoC;EAC1C,MAAM,SAAS,KAAK;AACpB,MAAI,CAAC,OAAQ,QAAO;AAGpB,MAAI,UAAU,OAAO,CAGnB,SAFoB,OAAO,eAAe,MACtB,KAAK,gBAAgB,eAAe;AAK1D,SAAO;;CAGT,AAAQ,wBAA8B;AACpC,MAAI,CAAC,KAAK,iBAAkB;AAC5B,OAAK,iBAAiB,iBAAiB,UAAU,KAAK,WAAW,EAAE,SAAS,MAAM,CAAC;AACnF,OAAK,qBAAqB,KAAK,iBAAiB;;CAGlD,AAAQ,wBAA8B;AACpC,MAAI,KAAK,kBAAkB;AACzB,QAAK,iBAAiB,oBAAoB,UAAU,KAAK,UAAU;AACnE,QAAK,mBAAmB;;;CAkB5B,AAAQ,mBAAyB;AAC/B,MAAI,CAAC,KAAK,kBAAkB,KAAK,iBAAkB;AACnD,OAAK,qBAAqB,KAAK,eAAe;AAC9C,OAAK,aAAa;;CAGpB,IAAY,iBAAyB;AACnC,MAAI,KAAK,gBAAgB,cACvB,QAAO,KAAK,eAAe;AAE7B,MAAI,KAAK,iBAEP,QAAO,KAAK,iBAAiB,cAAc,KAAK;AAElD,SAAO,KAAK;;CAOd,AAAQ,qBAAqB,QAAqC;AAChE,MAAI,UAAU,OAAO,EAAE;AAErB,QAAK,oBAAoB,IAAI,uBAAuB,KAAK,iBAAiB,CAAC;AAC3E,QAAK,kBAAkB,QAAQ,QAAQ;IACrC,YAAY;IACZ,iBAAiB;KAAC;KAAa;KAAW;KAAY;KAAa;KAAM;IAC1E,CAAC;AAGF,UAAO,eAAe,WAAW;AAC/B,QAAI,KAAK,mBAAmB,OAAQ;AACpC,WAAO,iBAAiB,aAAa,WAAW;AAC9C,SAAI,KAAK,mBAAmB,OAAQ;AACpC,UAAK,iBAAiB;MACtB;KACF;aACO,cAAc,OAAO,EAAE;AAEhC,QAAK,oBAAoB,IAAI,uBAAuB,KAAK,iBAAiB,CAAC;AAC3E,QAAK,kBAAkB,QAAQ,QAAQ;IACrC,WAAW;IACX,SAAS;IACV,CAAC;AAGF,OAAI,OAAO,eAAe,GAAG;IAC3B,MAAM,sBAAsB;AAC1B,SAAI,KAAK,mBAAmB,OAAQ;AACpC,SAAI,OAAO,aAAa,EACtB,MAAK,iBAAiB;SAEtB,uBAAsB,cAAc;;AAGxC,0BAAsB,cAAc;;;;CAS1C,AAAQ,kBAAwB;AAC9B,MAAI,KAAK,iBAAkB;AAC3B,OAAK,mBAAmB;AAExB,8BAA4B;AAC1B,QAAK,mBAAmB;AACxB,QAAK,kBAAkB;AACvB,QAAK,aAAa;AAClB,QAAK,aAAa;AAClB,QAAK,wBAAwB;AAI7B,QAAK,wBAAwB;IAC7B;;;;;CAMJ,AAAQ,yBAA+B;AACrC,MAAI,KAAK,qBAAsB;EAK/B,MAAM,YAAY,KAAK,gBAAgB,SAAS;EAChD,MAAM,eAAe,KAAK,gBAAgB,MAAM,MAAM,EAAE,WAAW,SAAS;EAC5E,MAAM,aAAa,KAAK,gBAAgB,MAAM,MAAM,EAAE,WAAW,UAAU;AAE3E,MAAI,cAAc,gBAAgB,CAAC,aAAa;AAC9C,QAAK,uBAAuB;AAC5B,QAAK,cAAc,IAAI,YAAY,oBAAoB,EAAE,SAAS,MAAM,CAAC,CAAC;;;;;;CAO9E,AAAQ,mBAAyB;AAC/B,MAAI,KAAK,UAAU,KAAK,KAAK,WAAW,KAAK,CAAC,KAAK,gBAAgB;AACjE,QAAK,kBAAkB,EAAE;AACzB;;EAGF,MAAM,YAAY,KAAK,eAAe;AACtC,MAAI,UAAU,SAAS,UAAU,SAAS;AACxC,QAAK,kBAAkB,EAAE;AACzB;;EAIF,MAAM,aAAa,KAAK,6BAA6B;EACrD,MAAM,MAAM,KAAK;EAGjB,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,OAAO,KAAK,SAAS,QAAQ,aAAa,KAAK,CAAC;EAG/E,MAAM,QAAQ,QAAQ,KAAK,KAAK,SAAS,eAAe,QAAQ,KAAK;EAGrE,MAAMC,QAAyB,EAAE;EACjC,MAAM,WAAW,UAAU,QAAQ,UAAU;AAE7C,OAAK,IAAI,IAAI,GAAG,IAAI,OAAO,KAAK;GAC9B,MAAM,SAAS,UAAU,KACpB,UAAU,UAAU,UAAU,SAAS,IACxC,UAAU,UAAW,IAAI,YAAa,QAAQ;AAElD,SAAM,KAAK;IACT;IACA,GAAG,KAAK,MAAM,IAAI,MAAM;IACxB,OAAO;IACP,QAAQ;IACT,CAAC;;AAGJ,OAAK,kBAAkB;;;;;CAMzB,AAAQ,gBAAoD;EAC1D,MAAM,SAAS,KAAK;AACpB,MAAI,CAAC,OAAQ,QAAO;GAAE,SAAS;GAAG,OAAO;GAAG;AAE5C,MAAI,UAAU,OAAO,EAAE;AACrB,OAAI,KAAK,qBAEP,QAAO;IACL,SAAS,KAAK,eAAe;IAC7B,OAAO,KAAK,aAAa,OAAO,uBAAuB;IACxD;GAGH,MAAM,cAAc,OAAO,iBAAiB;GAC5C,MAAM,kBAAkB,OAAO,cAAc;AAC7C,UAAO;IACL,SAAS,KAAK,gBAAgB,SAAY,cAAc,KAAK,cAAc;IAC3E,OAAO,KAAK,cAAc,SAAY,cAAc,KAAK,YAAY,cAAc;IACpF;;AAIH,SAAO;GACL,SAAS,KAAK,eAAe;GAC7B,OAAQ,KAAK,aAAa,KAAK,YAAY,IAAK,KAAK,YAAY,OAAO,cAAc;GACvF;;;;;CAMH,AAAQ,8BAAsC;AAC5C,MAAI,KAAK,iBAAiB,EAAG,QAAO,KAAK;EAEzC,MAAM,SAAS,KAAK;EACpB,IAAI,cAAc;AAElB,MAAI,UAAU,OAAO,CAGnB,gBAFW,OAAe,cAAc,SAC7B,OAAe,eAAe;WAEhC,cAAc,OAAO,CAG9B,gBAFU,OAAO,eAAe,SACtB,OAAO,gBAAgB;AAInC,SAAO,KAAK,MAAM,KAAK,UAAU,YAAY;;;;;CAM/C,AAAQ,cAAoB;AAC1B,MAAI,CAAC,KAAK,eAAgB;EAE1B,MAAM,EAAE,QAAQ,cAAc,oBAAoB,KAAK,eAAe;AAEtE,OAAK,MAAM,QAAQ,KAAK,iBAAiB;GACvC,MAAM,MAAM,YAAY,QAAQ,WAAW,KAAK,OAAO;AACvD,OAAI,sBAAsB,IAAI,IAAI,EAAE;AAClC,SAAK,YAAY,sBAAsB,IAAI,IAAI;AAC/C,SAAK,SAAS;;;;;;;;;CAUpB,AAAQ,cAAoB;EAC1B,MAAM,SAAS,KAAK,UAAU;AAC9B,MAAI,CAAC,OAAQ;EAEb,MAAM,MAAM,OAAO,WAAW,MAAM,EAAE,oBAAoB,MAAM,CAAC;AACjE,MAAI,CAAC,IAAK;EAEV,MAAM,aAAa,KAAK;EACxB,MAAM,SAAS,KAAK;AAEpB,MAAI,cAAc,KAAK,UAAU,EAAG;EAEpC,MAAM,MAAM,OAAO,oBAAoB;EAGvC,MAAM,aAAa,KAAK;EACxB,MAAM,gBAAgB,KAAK;EAG3B,MAAM,eAAe,KAAK,2BAA2B;EACrD,MAAM,aAAa,eAAe;EAGlC,MAAM,gBAAgB,aAAa;EACnC,MAAM,iBAAiB,aAAa,gBAAgB;AAGpD,MAAI,aAAa,iBAAiB,eAAe,gBAAgB;AAC/D,UAAO,MAAM,UAAU;AACvB;;AAEF,SAAO,MAAM,UAAU;EAIvB,MAAM,sBAAsB,KAAK,IAAI,GAAG,gBAAgB,aAAa;EACrE,MAAM,oBAAoB,KAAK,IAAI,YAAY,iBAAiB,aAAa;EAC7E,MAAM,iBAAiB,oBAAoB;AAE3C,MAAI,kBAAkB,GAAG;AACvB,UAAO,MAAM,UAAU;AACvB;;EAIF,MAAM,cAAc,KAAK,KAAK,iBAAiB,IAAI;EACnD,MAAM,eAAe,KAAK,KAAK,SAAS,IAAI;AAE5C,MAAI,OAAO,UAAU,eAAe,OAAO,WAAW,cAAc;AAClE,UAAO,QAAQ;AACf,UAAO,SAAS;;AAIlB,SAAO,MAAM,OAAO,GAAG,oBAAoB;AAC3C,SAAO,MAAM,QAAQ,GAAG,eAAe;AACvC,SAAO,MAAM,SAAS,GAAG,OAAO;AAGhC,MAAI,aAAa,KAAK,GAAG,GAAG,KAAK,GAAG,EAAE;AAGtC,MAAI,YAAY;AAChB,MAAI,SAAS,GAAG,GAAG,gBAAgB,OAAO;AAG1C,OAAK,MAAM,QAAQ,KAAK,iBAAiB;AAIvC,OAHkB,KAAK,IAAI,KAAK,QAGhB,uBAAuB,KAAK,IAAI,kBAAmB;GAGnE,MAAM,QAAQ,KAAK,IAAI;AAGvB,OAAI,QAAQ,KAAK,QAAQ,KAAK,QAAQ,eAAgB;AAEtD,OAAI,KAAK,UACP,MAAK,oBAAoB,KAAK,KAAK,WAAW,OAAO,KAAK,OAAO,OAAO;QACnE;AAEL,QAAI,YAAY,KAAK,WAAW,YAAY,YAAY;AACxD,QAAI,SAAS,OAAO,GAAG,KAAK,OAAO,OAAO;AAG1C,QAAI,KAAK,WAAW,WAAW;AAC7B,SAAI,YAAY;AAChB,SAAI,SAAS,OAAO,GAAG,KAAK,OAAO,EAAE;;;;;;;;CAS7C,AAAQ,oBACN,KACA,WACA,GACA,OACA,QACM;EAEN,MAAM,aAAa,SAAS,cAAc,SAAS;AACnD,aAAW,QAAQ,UAAU;AAC7B,aAAW,SAAS,UAAU;EAC9B,MAAM,UAAU,WAAW,WAAW,KAAK;AAC3C,MAAI,CAAC,QAAS;AACd,UAAQ,aAAa,WAAW,GAAG,EAAE;EAGrC,MAAM,YAAY,UAAU,QAAQ,UAAU;EAC9C,MAAM,YAAY,QAAQ;EAE1B,IAAI,OAAO,GAAG,OAAO,GAAG,OAAO,UAAU,OAAO,OAAO,UAAU;AAEjE,MAAI,YAAY,WAAW;AACzB,UAAO,UAAU,SAAS;AAC1B,WAAQ,UAAU,QAAQ,QAAQ;SAC7B;AACL,UAAO,UAAU,QAAQ;AACzB,WAAQ,UAAU,SAAS,QAAQ;;AAGrC,MAAI,UAAU,YAAY,MAAM,MAAM,MAAM,MAAM,GAAG,GAAG,OAAO,OAAO;;;;;CAUxE,MAAc,yBAAwC;AACpD,MAAI,KAAK,sBAAsB,CAAC,KAAK,eAAgB;EAErD,MAAM,gBAAgB,KAAK;EAC3B,MAAM,eAAe,KAAK;EAC1B,MAAM,aAAa,KAAK;EAGxB,MAAM,eAAe,KAAK,2BAA2B;EAGrD,MAAM,gBAAgB,eAAe;EACrC,MAAM,iBAAiB,eAAe,gBAAgB;EAGtD,MAAM,sBAAsB,KAAK,IAAI,GAAG,gBAAgB,aAAa;EACrE,MAAM,oBAAoB,KAAK,IAAI,YAAY,iBAAiB,aAAa;EAG7E,MAAM,UAAU,KAAK,gBAAgB,QAAQ,SAAS;AACpD,OAAI,KAAK,WAAW,UAAW,QAAO;AAEtC,UADkB,KAAK,IAAI,KAAK,SACZ,uBAAuB,KAAK,KAAK;IACrD;AAEF,MAAI,QAAQ,WAAW,EAAG;AAE1B,OAAK,qBAAqB;AAG1B,OAAK,MAAM,QAAQ,QACjB,MAAK,SAAS;AAEhB,OAAK,aAAa;AAElB,MAAI;AACF,OAAI,cAAc,KAAK,eAAe,CACpC,OAAM,KAAK,4BAA4B,QAAQ;YACtC,UAAU,KAAK,eAAe,CACvC,OAAM,KAAK,wBAAwB,QAAQ;WAEtC,OAAO;AACd,WAAQ,KAAK,iCAAiC,MAAM;AAEpD,QAAK,MAAM,QAAQ,QACjB,KAAI,KAAK,WAAW,UAClB,MAAK,SAAS;YAGV;AACR,QAAK,qBAAqB;AAC1B,QAAK,aAAa;AAIlB,OADqB,KAAK,gBAAgB,MAAM,MAAM,EAAE,WAAW,SAAS,IACxD,CAAC,KAAK,sBAAsB;AAC9C,SAAK,uBAAuB;AAC5B,SAAK,cAAc,IAAI,YAAY,oBAAoB,EAAE,SAAS,MAAM,CAAC,CAAC;;;;;;;CAQhF,MAAc,4BAA4B,OAAuC;EAC/E,MAAM,SAAS,KAAK;EACpB,MAAM,EAAE,QAAQ,cAAc,oBAAoB,OAAO;EAGzD,MAAM,iBAAiB,OAAO,eAAe;EAC7C,MAAM,kBAAkB,OAAO,gBAAgB;EAC/C,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,UAAU,iBAAiB,oBAAoB,eAAe;AAG7F,OAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK,YAAY;GACjD,MAAM,QAAQ,MAAM,MAAM,GAAG,IAAI,WAAW;GAC5C,MAAM,aAAa,MAAM,KAAK,MAAM,EAAE,OAAO;AAE7C,OAAI;IACF,MAAM,WAAW,MAAM,OAAO,aAAa,YAAY;KACrD;KACA,kBAAkB;KACnB,CAAC;AAEF,SAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;KACrC,MAAM,OAAO,MAAM;KACnB,MAAM,SAAS,SAAS;AAExB,SAAI,QAAQ;MACV,MAAM,YAAY,KAAK,mBAAmB,OAAO;AACjD,UAAI,WAAW;OACb,MAAM,MAAM,YAAY,QAAQ,WAAW,KAAK,OAAO;AACvD,6BAAsB,IAAI,KAAK,WAAW,KAAK,QAAQ,UAAU;AACjE,YAAK,YAAY;AACjB,YAAK,SAAS;;;;AAMpB,SAAK,aAAa;AAGlB,QAAI,IAAI,aAAa,MAAM,OACzB,OAAM,IAAI,SAAS,MAAM,sBAAsB,EAAE,CAAC;YAE7C,OAAO;AACd,YAAQ,KAAK,yBAAyB,MAAM;;;;;;;CAQlD,MAAc,wBAAwB,OAAuC;EAC3E,MAAM,SAAS,KAAK;EACpB,MAAM,EAAE,QAAQ,cAAc,oBAAoB,OAAO;AAGzD,MAAI,OAAO,gBACT,OAAM,OAAO,gBAAgB;EAG/B,MAAM,cAAc,OAAO,iBAAiB;AAC5C,MAAI,CAAC,YAAa;EAGlB,MAAM,iBAAiB,YAAY,mBAAmB;EACtD,MAAM,iBAAiB,YAAY,wBAAwB;AAC3D,MAAI,CAAC,kBAAkB,CAAC,eAAgB;EAExC,MAAM,aAAa,MAAM,KAAK,MAAM,EAAE,OAAO;EAI7C,MAAM,kBAAkB,IAAI,iBAAiB;AAE7C,MAAI;GACF,MAAM,UAAU,MAAM,YAAY,kBAAkB,YAAY,gBAAgB,OAAO;AAEvF,QAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;IACrC,MAAM,OAAO,MAAM;IACnB,MAAM,SAAS,QAAQ;AAEvB,QAAI,QAAQ,WAAW;KACrB,MAAM,YAAY,KAAK,mBAAmB,OAAO,UAAU;AAC3D,SAAI,WAAW;MACb,MAAM,MAAM,YAAY,QAAQ,WAAW,KAAK,OAAO;AACvD,4BAAsB,IAAI,KAAK,WAAW,KAAK,QAAQ,UAAU;AACjE,WAAK,YAAY;AACjB,WAAK,SAAS;;;;WAIb,OAAO;AAEd,mBAAgB,OAAO;AACvB,WAAQ,KAAK,sCAAsC,MAAM;;;;;;CAO7D,AAAQ,mBAAmB,QAA+D;EACxF,MAAM,MAAM,OAAO,WAAW,MAAM,EAAE,oBAAoB,MAAM,CAAC;AAIjE,MAAI,CAAC,IAAK,QAAO;AACjB,SAAO,IAAI,aAAa,GAAG,GAAG,OAAO,OAAO,OAAO,OAAO;;;;;;CAW5D,YAA2B;AACzB,MAAI,KAAK,qBACP,QAAO,QAAQ,SAAS;AAE1B,SAAO,IAAI,SAAS,YAAY;AAC9B,QAAK,iBAAiB,0BAA0B,SAAS,EAAE,EAAE,MAAM,MAAM,CAAC;IAC1E;;;;;CAMJ,IAAI,UAAmB;AACrB,SAAO,KAAK;;;;;;CAWd,oBAAoB,aAAqB,WAAyB;AAChE,MAAI,CAAC,KAAK,eAAgB;EAE1B,MAAM,EAAE,QAAQ,cAAc,oBAAoB,KAAK,eAAe;AACtE,wBAAsB,oBAAoB,QAAQ,WAAW,aAAa,UAAU;AAGpF,OAAK,MAAM,QAAQ,KAAK,gBACtB,KAAI,KAAK,UAAU,eAAe,KAAK,UAAU,WAAW;AAC1D,QAAK,YAAY;AACjB,QAAK,SAAS;;AAIlB,OAAK,iBAAiB;;;;;CAMxB,gBAAsB;AACpB,MAAI,CAAC,KAAK,eAAgB;EAE1B,MAAM,EAAE,QAAQ,cAAc,oBAAoB,KAAK,eAAe;AACtE,wBAAsB,kBAAkB,QAAQ,UAAU;AAG1D,OAAK,MAAM,QAAQ,KAAK,iBAAiB;AACvC,QAAK,YAAY;AACjB,QAAK,SAAS;;AAGhB,OAAK,iBAAiB;;CAOxB,SAAS;AACP,SAAO,IAAI,WAAW,IAAI,KAAK,UAAU,CAAC;;;YA94B3C,SAAS,EAAE,MAAM,QAAQ,CAAC;YAG1B,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAmB,CAAC;YAGxD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAO,CAAC;YAG5C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAiB,CAAC;YAGtD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,CAAC;YAGpD,SAAS;CACR,MAAM;CACN,WAAW;CACX,SAAS;CACT,WAAW;EACT,gBAAgB,UAAyB,UAAU;EACnD,cAAc,UAAoB,QAAQ,SAAS;EACpD;CACF,CAAC;YAGD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAiB,CAAC;YAQtD,QAAQ;CAAE,SAAS;CAAsB,WAAW;CAAM,CAAC,EAC3D,OAAO;YAUP,OAAO;+BA3ET,cAAc,qBAAqB"}

package/dist/elements/EFTimegroup.d.ts

@@ -1,15 +1,16 @@
 import { TemporalMixinInterface } from "./EFTemporal.js";
-import { ContextMixinInterface } from "../gui/ContextMixin.js";
 import { EFMedia } from "./EFMedia.js";
+import { ContainerInfo } from "./ContainerInfo.js";
+import { ElementPositionInfo } from "./ElementPositionInfo.js";
+import { CaptureBatchOptions, CaptureOptions } from "../preview/renderTimegroupToCanvas.js";
+import { RenderToVideoOptions } from "../preview/renderTimegroupToVideo.js";
 import { Task } from "@lit/task";
 import * as lit0 from "lit";
 import { LitElement, PropertyValues } from "lit";
 import * as lit_html0 from "lit-html";
 
 //#region src/elements/EFTimegroup.d.ts
-declare global {
-  var EF_DEV_WORKBENCH: boolean | undefined;
-}
+
 type FrameTaskCallback = (info: {
   ownCurrentTimeMs: number;
   currentTimeMs: number;
@@ -17,47 +18,163 @@ type FrameTaskCallback = (info: {
   percentComplete: number;
   element: EFTimegroup;
 }) => void | Promise<void>;
+/**
+ * Result of createRenderClone() - contains the clone, its container, and cleanup function.
+ */
+interface RenderCloneResult {
+  /** The cloned timegroup, fully functional with its own time state */
+  clone: EFTimegroup;
+  /** The offscreen container holding the clone */
+  container: HTMLElement;
+  /** Call this to remove the clone from DOM and clean up */
+  cleanup: () => void;
+}
+/**
+ * Initializer function type for setting up JavaScript behavior on timegroup instances.
+ * This function is called on both the prime timeline and each render clone.
+ *
+ * CONSTRAINTS:
+ * - MUST be synchronous (no async/await, no Promise return)
+ * - MUST complete in <100ms (error) or <10ms (warning)
+ * - Should only register callbacks and set up behavior, not do expensive work
+ */
+type TimegroupInitializer = (timegroup: EFTimegroup) => void;
+/**
+ * The four timegroup modes define how duration is calculated:
+ * - "fit": Inherits duration from parent timegroup
+ * - "fixed": Uses explicit duration attribute
+ * - "sequence": Sum of child durations minus overlaps
+ * - "contain": Maximum of child durations
+ */
+type TimeMode = "fit" | "fixed" | "sequence" | "contain";
 declare const EFTimegroup_base: (new (...args: any[]) => TemporalMixinInterface) & typeof LitElement;
 declare class EFTimegroup extends EFTimegroup_base {
   #private;
   static get observedAttributes(): string[];
   static styles: lit0.CSSResult;
+  /** @internal */
   _timeGroupContext: this;
+  /** @internal */
   efContext: this;
-  mode: "fit" | "fixed" | "sequence" | "contain";
+  /** @public */
+  mode: TimeMode;
+  /** @public */
   overlapMs: number;
+  /**
+   * Initializer function for setting up JavaScript behavior on this timegroup.
+   * This function is called on both the prime timeline and each render clone.
+   *
+   * REQUIRED for render operations (captureBatch, renderToVideo, createRenderClone).
+   *
+   * CONSTRAINTS:
+   * - MUST be synchronous (no async/await, no Promise return)
+   * - MUST complete in <100ms (error thrown) or <10ms (warning logged)
+   * - Should only register callbacks and set up behavior, not do expensive work
+   *
+   * @example
+   * ```javascript
+   * const tg = document.querySelector('ef-timegroup');
+   * tg.initializer = (instance) => {
+   *   instance.addFrameCallback((time) => {
+   *     // Update content based on time
+   *   });
+   * };
+   * ```
+   * @public
+   */
+  initializer?: TimegroupInitializer;
+  /** @public */
   fps: number;
+  /**
+   * When true, automatically seeks to frame 0 after media durations are loaded.
+   * Only applies to root timegroups (timegroups that are not nested inside another timegroup).
+   * This ensures the first frame is rendered immediately on initialization.
+   */
+  autoInit: boolean;
+  /**
+   * When true, automatically wraps this root timegroup with an ef-workbench element.
+   * The workbench provides development UI including hierarchy panel, timeline, and playback controls.
+   * Only applies to root timegroups.
+   * @public
+   */
+  workbench: boolean;
   attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+  /** @public */
   fit: "none" | "contain" | "cover";
+  /** @internal */
+  isRestoringFromLocalStorage(): boolean;
+  /** @internal - Used by PlaybackController to set restoration state */
+  setRestoringFromLocalStorage(value: boolean): void;
   /**
    * Get the effective FPS for this timegroup.
    * During rendering, uses the render options FPS if available.
    * Otherwise uses the configured fps property.
+   * @public
    */
   get effectiveFps(): number;
-  /**
-   * Quantize a time value to the nearest frame boundary based on effectiveFps.
-   * @param timeSeconds - Time in seconds
-   * @returns Time quantized to frame boundaries in seconds
-   */
-  private quantizeToFrameTime;
-  private runThrottledFrameTask;
+  /** @public */
   set currentTime(time: number);
+  /** @public */
   get currentTime(): number;
+  /** @public */
   set currentTimeMs(ms: number);
+  /** @public */
   get currentTimeMs(): number;
+  /**
+   * The time the user last requested via seek/scrub.
+   * Preview systems should use this instead of currentTimeMs to avoid
+   * seeing intermediate times during batch operations (thumbnails, export).
+   * @public
+   */
+  get userTimeMs(): number;
   /**
    * Seek to a specific time and wait for all frames to be ready.
    * This is the recommended way to seek in tests and programmatic control.
    *
+   * Combines seeking (Purpose 3) with frame rendering (Purpose 4) to ensure
+   * all visible elements are ready after the seek completes.
+   *
+   * Updates both the source time AND userTimeMs (what the preview displays).
+   *
    * @param timeMs - Time in milliseconds to seek to
    * @returns Promise that resolves when the seek is complete and all visible children are ready
+   * @public
    */
   seek(timeMs: number): Promise<void>;
+  /**
+   * Optimized seek for render loops.
+   * Unlike `seek()`, this:
+   * - Skips waitForMediaDurations (already loaded at render setup)
+   * - Skips localStorage persistence
+   * - Consolidates awaits to reduce event loop yields
+   *
+   * Still waits for all content to be ready (Lit updates, frame tasks, video frames).
+   *
+   * @param timeMs - Time in milliseconds to seek to
+   * @internal
+   */
+  seekForRender(timeMs: number): Promise<void>;
   /**
    * Determines if this is a root timegroup (no parent timegroups)
+   * @public
    */
   get isRootTimegroup(): boolean;
+  /**
+   * Property-based frame task callback for React integration.
+   * When set, automatically registers the callback as a frame task.
+   * Setting a new value automatically cleans up the previous callback.
+   * Set to null or undefined to remove the callback.
+   *
+   * @example
+   * // React usage:
+   * <Timegroup onFrame={({ ownCurrentTimeMs, percentComplete }) => {
+   *   // Per-frame updates
+   * }} />
+   *
+   * @public
+   */
+  get onFrame(): FrameTaskCallback | null;
+  set onFrame(callback: FrameTaskCallback | null | undefined);
   /**
    * Register a custom frame task callback that will be executed during frame rendering.
    * The callback receives timing information and can be async or sync.
@@ -65,64 +182,143 @@ declare class EFTimegroup extends EFTimegroup_base {
    *
    * @param callback - Function to execute on each frame
    * @returns A cleanup function that removes the callback when called
+   * @public
    */
   addFrameTask(callback: FrameTaskCallback): () => void;
   /**
    * Remove a previously registered custom frame task callback.
    *
    * @param callback - The callback function to remove
+   * @public
    */
   removeFrameTask(callback: FrameTaskCallback): void;
+  /** @internal */
   saveTimeToLocalStorage(time: number): void;
   render(): lit_html0.TemplateResult<1>;
+  /** @internal */
   loadTimeFromLocalStorage(): number | undefined;
   connectedCallback(): void;
+  /**
+   * Called when this timegroup becomes a root (no parent timegroup).
+   * Sets up the playback listener after PlaybackController is created.
+   * @internal
+   */
+  didBecomeRoot(): void;
   protected updated(changedProperties: PropertyValues): void;
   disconnectedCallback(): void;
+  /**
+   * Capture the timegroup at a specific timestamp as a canvas.
+   * Does NOT modify currentTimeMs - captures are rendered independently.
+   *
+   * @param options - Capture options including timeMs, scale, contentReadyMode
+   * @returns Promise resolving to an HTMLCanvasElement with the captured frame
+   * @public
+   */
+  captureAtTime(options: CaptureOptions): Promise<HTMLCanvasElement>;
+  /**
+   * Capture multiple timestamps as canvas thumbnails in a single batch.
+   *
+   * CLONE-TIMELINE ARCHITECTURE:
+   * Creates a single render clone and reuses it across all captures.
+   * Prime-timeline is NEVER seeked - user can continue previewing/editing during capture.
+   *
+   * @param timestamps - Array of timestamps (in milliseconds) to capture
+   * @param options - Capture options (scale, contentReadyMode, blockingTimeoutMs)
+   * @returns Promise resolving to array of HTMLCanvasElements
+   * @public
+   */
+  captureBatch(timestamps: number[], options?: CaptureBatchOptions): Promise<HTMLCanvasElement[]>;
+  /**
+   * Render the timegroup to an MP4 video file and trigger download.
+   * Captures each frame at the specified fps, encodes using WebCodecs via
+   * MediaBunny, and downloads the resulting video.
+   *
+   * @param options - Rendering options (fps, codec, bitrate, filename, etc.)
+   * @returns Promise that resolves when video is downloaded
+   * @public
+   */
+  renderToVideo(options?: RenderToVideoOptions): Promise<Uint8Array | undefined>;
+  /**
+   * Create an independent clone of this timegroup for rendering.
+   * The clone is a fully functional ef-timegroup with its own animations
+   * and time state, isolated from the original (Prime-timeline).
+   *
+   * OPTIONAL: An initializer can be set via `timegroup.initializer = (tg) => { ... }`
+   * to re-run JavaScript setup (frame callbacks, React components) on each clone.
+   *
+   * This enables:
+   * - Rendering without affecting user's preview position
+   * - Concurrent renders with different clones
+   * - Re-running JavaScript setup on each clone (if initializer is provided)
+   *
+   * @returns Promise resolving to clone, container, and cleanup function
+   * @throws Error if initializer is async or takes too long
+   * @public
+   */
+  createRenderClone(): Promise<RenderCloneResult>;
+  /** @internal */
   get storageKey(): string;
+  /** @internal */
   get intrinsicDurationMs(): number | undefined;
+  /** @internal */
   get hasOwnDuration(): boolean;
+  /** @public */
   get durationMs(): number;
-  getPendingFrameTasks(signal?: AbortSignal): Promise<Task<readonly unknown[], unknown>[]>;
-  waitForNestedUpdates(signal?: AbortSignal): Promise<void>;
-  waitForFrameTasks(): Promise<void>;
-  mediaDurationsPromise: Promise<void> | undefined;
-  waitForMediaDurations(): Promise<void>;
+  /** @internal */
+  waitForFrameTasks(signal?: AbortSignal): Promise<void>;
+  /** @internal */
+  waitForMediaDurations(signal?: AbortSignal): Promise<void>;
+  /** @internal */
   get childTemporals(): TemporalMixinInterface[];
-  get contextProvider(): ContextMixinInterface | null;
   /**
    * Returns true if the timegroup should be wrapped with a workbench.
    *
    * A timegroup should be wrapped with a workbench if:
    * - It's being rendered (EF_RENDERING), OR
-   * - It's in interactive mode (EF_INTERACTIVE) with the dev workbench flag set
+   * - The workbench property is set to true
    *
    * If the timegroup is already wrapped in a context provider like ef-preview,
    * it should NOT be wrapped in a workbench.
+   * @internal
    */
   shouldWrapWithWorkbench(): boolean;
+  /** @internal */
   wrapWithWorkbench(): void;
-  get efElements(): Element[];
   /**
    * Returns media elements for playback audio rendering
    * For standalone media, returns [this]; for timegroups, returns all descendants
    * Used by PlaybackController for audio-driven playback
+   * @internal
    */
   getMediaElements(): EFMedia[];
   /**
    * Render audio buffer for playback
    * Called by PlaybackController during live playback
    * Delegates to shared renderTemporalAudio utility for consistent behavior
+   * @internal
    */
-  renderAudio(fromMs: number, toMs: number): Promise<AudioBuffer>;
-  /**
-   * TEMPORARY TEST METHOD: Renders audio and immediately plays it back
-   * Usage: timegroup.testPlayAudio(0, 5000) // Play first 5 seconds
-   */
-  testPlayAudio(fromMs: number, toMs: number): Promise<void>;
-  loadMd5Sums(): Promise<void>;
+  renderAudio(fromMs: number, toMs: number, signal?: AbortSignal): Promise<AudioBuffer>;
+  static readonly TIMEGROUP_FRAME_TASK_THRESHOLD = 100;
+  static readonly TIMEGROUP_FRAME_TASK_RESET_MS = 1000;
+  /** @internal */
   frameTask: Task<readonly [number, number], void>;
+  /** @internal */
   seekTask: Task<readonly [number | undefined], number | undefined>;
+  /**
+   * Get container information for this timegroup.
+   * Timegroups are always containers and can contain children.
+   * Display mode is determined from computed styles.
+   *
+   * @public
+   */
+  getContainerInfo(): ContainerInfo;
+  /**
+   * Get position information for this timegroup.
+   * Returns computed bounds, transform, and rotation.
+   *
+   * @public
+   */
+  getPositionInfo(): ElementPositionInfo | null;
 }
 declare global {
   interface HTMLElementTagNameMap {