@editframe/elements 0.46.4 → 0.47.1

package/dist/preview/QualityUpgradeScheduler.js

@@ -4,13 +4,16 @@ var QualityUpgradeScheduler = class {
 	#queue = [];
 	#activeTasks = /* @__PURE__ */ new Map();
 	#completedTasks = /* @__PURE__ */ new Map();
+	/** Keys of tasks that failed with a non-abort error, mapped to their owner.
+	*  Prevents enqueue() from repeatedly re-queuing the same failing segment
+	*  during lookahead. Cleared by replaceForOwner() (per task key) and
+	*  cancelForOwner() (per owner). */
+	#failedKeys = /* @__PURE__ */ new Map();
 	#abortController;
 	#requestFrameRender;
-	#isCached;
 	constructor(options) {
 		this.#requestFrameRender = options.requestFrameRender;
 		this.#maxConcurrent = options.maxConcurrent ?? 4;
-		this.#isCached = options.isCached;
 		this.#abortController = new AbortController();
 	}
 	/**
@@ -20,7 +23,7 @@ var QualityUpgradeScheduler = class {
 	enqueue(tasks) {
 		if (this.#abortController.signal.aborted) return;
 		for (const task of tasks) {
-			if (this.#queue.some((t) => t.key === task.key) || this.#activeTasks.has(task.key) || this.#completedTasks.has(task.key)) continue;
+			if (this.#queue.some((t) => t.key === task.key) || this.#activeTasks.has(task.key) || this.#completedTasks.has(task.key) || this.#failedKeys.has(task.key)) continue;
 			this.#queue.push(task);
 		}
 		this.#queue.sort((a, b) => a.deadlineMs - b.deadlineMs);
@@ -36,6 +39,11 @@ var QualityUpgradeScheduler = class {
 		this.#queue = this.#queue.filter((t) => t.owner !== owner);
 		for (const task of tasks) {
 			if (this.#activeTasks.has(task.key)) continue;
+			this.#failedKeys.delete(task.key);
+			if (this.#completedTasks.has(task.key)) {
+				if (task.isCached ? task.isCached() : true) continue;
+				this.#completedTasks.delete(task.key);
+			}
 			this.#queue.push(task);
 		}
 		this.#queue.sort((a, b) => a.deadlineMs - b.deadlineMs);
@@ -48,6 +56,7 @@ var QualityUpgradeScheduler = class {
 	cancelForOwner(owner) {
 		this.#queue = this.#queue.filter((t) => t.owner !== owner);
 		for (const [key, task] of this.#completedTasks.entries()) if (task.owner === owner) this.#completedTasks.delete(key);
+		for (const [key, taskOwner] of this.#failedKeys.entries()) if (taskOwner === owner) this.#failedKeys.delete(key);
 	}
 	/**
 	* Process the queue - start tasks up to maxConcurrent limit.
@@ -57,14 +66,6 @@ var QualityUpgradeScheduler = class {
 		while (this.#activeTasks.size < this.#maxConcurrent && this.#queue.length > 0) {
 			const task = this.#queue.shift();
 			if (!task) break;
-			if (this.#isCached?.(task.key)) {
-				this.#completedTasks.set(task.key, {
-					key: task.key,
-					owner: task.owner,
-					status: "completed"
-				});
-				continue;
-			}
 			this.#startTask(task);
 		}
 	}
@@ -83,12 +84,7 @@ var QualityUpgradeScheduler = class {
 			this.#processQueue();
 		}).catch((error) => {
 			this.#activeTasks.delete(task.key);
-			if (!(error instanceof DOMException && error.name === "AbortError")) this.#completedTasks.set(task.key, {
-				key: task.key,
-				owner: task.owner,
-				status: "failed",
-				error: error instanceof Error ? error.message : String(error)
-			});
+			if (!(error instanceof DOMException && error.name === "AbortError")) this.#failedKeys.set(task.key, task.owner);
 			this.#processQueue();
 		});
 		this.#activeTasks.set(task.key, {
@@ -130,8 +126,13 @@ var QualityUpgradeScheduler = class {
 			key,
 			owner: completed.owner,
 			deadlineMs: 0,
-			status: completed.status,
-			error: completed.error
+			status: completed.status
+		});
+		for (const [key, owner] of this.#failedKeys.entries()) results.push({
+			key,
+			owner,
+			deadlineMs: 0,
+			status: "failed"
 		});
 		return results;
 	}
@@ -143,9 +144,9 @@ var QualityUpgradeScheduler = class {
 		let active = 0;
 		for (const activeTask of this.#activeTasks.values()) if (activeTask.task.owner === owner) active++;
 		let completed = 0;
+		for (const task of this.#completedTasks.values()) if (task.owner === owner) completed++;
 		let failed = 0;
-		for (const task of this.#completedTasks.values()) if (task.owner === owner) if (task.status === "completed") completed++;
-		else failed++;
+		for (const taskOwner of this.#failedKeys.values()) if (taskOwner === owner) failed++;
 		return {
 			queued,
 			active,
@@ -162,6 +163,15 @@ var QualityUpgradeScheduler = class {
 		this.#queue = [];
 		this.#activeTasks.clear();
 		this.#completedTasks.clear();
+		this.#failedKeys.clear();
+	}
+	/**
+	* Revive a disposed scheduler so it can accept new tasks after the host
+	* element is reconnected to the DOM (e.g. workbench reparenting).
+	*/
+	revive() {
+		if (!this.#abortController.signal.aborted) return;
+		this.#abortController = new AbortController();
 	}
 };
 

package/dist/preview/QualityUpgradeScheduler.js.map

@@ -1 +1 @@
-{"version":3,"file":"QualityUpgradeScheduler.js","names":["#requestFrameRender","#maxConcurrent","#isCached","#abortController","#queue","#activeTasks","#completedTasks","#processQueue","#startTask","results: UpgradeTaskStatus[]"],"sources":["../../src/preview/QualityUpgradeScheduler.ts"],"sourcesContent":["/**\n * QualityUpgradeScheduler: Centralized deadline-ordered work queue\n *\n * Coordinates main-quality segment fetching across multiple video elements.\n * Generic scheduler that doesn't understand media concepts (segments, renditions, etc.)\n * - only processes { key, deadlineMs, fetch, owner } tuples.\n *\n * Design principles:\n * - Deadline-based ordering: always process nearest deadline first\n * - Ground-truth cache validation: check cache before starting any fetch\n * - In-flight fetches never cancelled: they populate shared cache\n * - Event-driven: elements submit tasks only on state changes, not every frame\n */\n\nexport interface UpgradeTask {\n  /** Opaque dedup key (e.g. \"${owner}:${segmentId}:${renditionId}\") */\n  key: string;\n  /** Fetch function that populates the cache */\n  fetch: (signal: AbortSignal) => Promise<void>;\n  /** Timeline time when this segment will be needed */\n  deadlineMs: number;\n  /** Element ID, for bulk operations */\n  owner: string;\n}\n\nexport interface UpgradeTaskStatus {\n  key: string;\n  owner: string;\n  deadlineMs: number;\n  status: \"queued\" | \"active\" | \"completed\" | \"failed\";\n  error?: string;\n}\n\nexport interface OwnerProgress {\n  queued: number;\n  active: number;\n  completed: number;\n  failed: number;\n}\n\ninterface ActiveTask {\n  task: UpgradeTask;\n  startedAt: number;\n  promise: Promise<void>;\n}\n\ninterface CompletedTask {\n  key: string;\n  owner: string;\n  status: \"completed\" | \"failed\";\n  error?: string;\n}\n\nexport class QualityUpgradeScheduler {\n  #maxConcurrent: number;\n  #queue: UpgradeTask[] = [];\n  #activeTasks = new Map<string, ActiveTask>();\n  #completedTasks = new Map<string, CompletedTask>();\n  #abortController: AbortController;\n  #requestFrameRender: () => void;\n  #isCached?: (key: string) => boolean;\n\n  constructor(options: {\n    requestFrameRender: () => void;\n    maxConcurrent?: number;\n    isCached?: (key: string) => boolean;\n  }) {\n    this.#requestFrameRender = options.requestFrameRender;\n    this.#maxConcurrent = options.maxConcurrent ?? 4;\n    this.#isCached = options.isCached;\n    this.#abortController = new AbortController();\n  }\n\n  /**\n   * Add tasks without affecting existing ones (additive).\n   * Used for lookahead extension during playback.\n   */\n  enqueue(tasks: UpgradeTask[]): void {\n    if (this.#abortController.signal.aborted) return;\n\n    for (const task of tasks) {\n      // Skip if already queued, active, or completed\n      if (\n        this.#queue.some((t) => t.key === task.key) ||\n        this.#activeTasks.has(task.key) ||\n        this.#completedTasks.has(task.key)\n      ) {\n        continue;\n      }\n\n      this.#queue.push(task);\n    }\n\n    // Sort queue by deadline (ascending)\n    this.#queue.sort((a, b) => a.deadlineMs - b.deadlineMs);\n\n    // Start processing if we have capacity\n    this.#processQueue();\n  }\n\n  /**\n   * Replace all queued tasks for an owner.\n   * Used on seeks, trim changes, timeline position changes where old deadlines are stale.\n   * Does NOT cancel in-flight tasks (they populate shared cache).\n   */\n  replaceForOwner(owner: string, tasks: UpgradeTask[]): void {\n    if (this.#abortController.signal.aborted) return;\n\n    // Remove queued (not active) tasks for this owner\n    this.#queue = this.#queue.filter((t) => t.owner !== owner);\n\n    // Add new tasks\n    for (const task of tasks) {\n      // Skip only if the fetch is already in-flight — it will populate the\n      // cache when it completes. Completed tasks are intentionally NOT skipped\n      // here so that cache eviction is handled correctly: if a segment was\n      // previously fetched but has since been evicted from the LRU cache,\n      // #computeLookaheadSegments will include it again and it must re-run.\n      if (this.#activeTasks.has(task.key)) {\n        continue;\n      }\n\n      this.#queue.push(task);\n    }\n\n    // Sort queue by deadline (ascending)\n    this.#queue.sort((a, b) => a.deadlineMs - b.deadlineMs);\n\n    // Start processing if we have capacity\n    this.#processQueue();\n  }\n\n  /**\n   * Cancel all tasks for an owner.\n   * Removes queued tasks. Does NOT abort in-flight fetches.\n   */\n  cancelForOwner(owner: string): void {\n    // Remove from queue\n    this.#queue = this.#queue.filter((t) => t.owner !== owner);\n\n    // Remove from completed tracking (allows resubmission)\n    for (const [key, task] of this.#completedTasks.entries()) {\n      if (task.owner === owner) {\n        this.#completedTasks.delete(key);\n      }\n    }\n\n    // Note: we do NOT cancel active tasks - they populate the shared cache\n  }\n\n  /**\n   * Process the queue - start tasks up to maxConcurrent limit.\n   */\n  #processQueue(): void {\n    if (this.#abortController.signal.aborted) return;\n\n    while (this.#activeTasks.size < this.#maxConcurrent && this.#queue.length > 0) {\n      const task = this.#queue.shift();\n      if (!task) break;\n\n      // Ground-truth cache check before starting\n      if (this.#isCached?.(task.key)) {\n        // Already cached from another path, mark as completed and continue\n        this.#completedTasks.set(task.key, {\n          key: task.key,\n          owner: task.owner,\n          status: \"completed\",\n        });\n        continue;\n      }\n\n      // Start the task\n      this.#startTask(task);\n    }\n  }\n\n  /**\n   * Start a single task.\n   */\n  #startTask(task: UpgradeTask): void {\n    const promise = task\n      .fetch(this.#abortController.signal)\n      .then(() => {\n        // Success\n        this.#activeTasks.delete(task.key);\n        this.#completedTasks.set(task.key, {\n          key: task.key,\n          owner: task.owner,\n          status: \"completed\",\n        });\n\n        // Trigger re-render so upgraded quality gets displayed\n        this.#requestFrameRender();\n\n        // Start next task if available\n        this.#processQueue();\n      })\n      .catch((error) => {\n        // Failure\n        this.#activeTasks.delete(task.key);\n\n        // Don't track AbortError as failure (intentional cancellation)\n        const isAbortError = error instanceof DOMException && error.name === \"AbortError\";\n\n        if (!isAbortError) {\n          this.#completedTasks.set(task.key, {\n            key: task.key,\n            owner: task.owner,\n            status: \"failed\",\n            error: error instanceof Error ? error.message : String(error),\n          });\n        }\n\n        // Continue processing queue even after failure\n        this.#processQueue();\n      });\n\n    this.#activeTasks.set(task.key, {\n      task,\n      startedAt: performance.now(),\n      promise,\n    });\n  }\n\n  /**\n   * Check whether a task is currently in-flight (started, not yet complete).\n   */\n  isActive(key: string): boolean {\n    return this.#activeTasks.has(key);\n  }\n\n  /**\n   * Check whether a task is waiting in the queue (submitted but not yet started).\n   */\n  isPending(key: string): boolean {\n    return this.#queue.some((t) => t.key === key);\n  }\n\n  /**\n   * Get snapshot of current queue state for debugging.\n   */\n  getQueueSnapshot(): UpgradeTaskStatus[] {\n    const results: UpgradeTaskStatus[] = [];\n\n    // Queued tasks\n    for (const task of this.#queue) {\n      results.push({\n        key: task.key,\n        owner: task.owner,\n        deadlineMs: task.deadlineMs,\n        status: \"queued\",\n      });\n    }\n\n    // Active tasks\n    for (const [key, activeTask] of this.#activeTasks.entries()) {\n      results.push({\n        key,\n        owner: activeTask.task.owner,\n        deadlineMs: activeTask.task.deadlineMs,\n        status: \"active\",\n      });\n    }\n\n    // Completed tasks\n    for (const [key, completed] of this.#completedTasks.entries()) {\n      results.push({\n        key,\n        owner: completed.owner,\n        deadlineMs: 0, // No longer relevant\n        status: completed.status as \"completed\" | \"failed\",\n        error: completed.error,\n      });\n    }\n\n    return results;\n  }\n\n  /**\n   * Get progress for a specific owner.\n   */\n  getOwnerProgress(owner: string): OwnerProgress {\n    const queued = this.#queue.filter((t) => t.owner === owner).length;\n\n    let active = 0;\n    for (const activeTask of this.#activeTasks.values()) {\n      if (activeTask.task.owner === owner) {\n        active++;\n      }\n    }\n\n    let completed = 0;\n    let failed = 0;\n    for (const task of this.#completedTasks.values()) {\n      if (task.owner === owner) {\n        if (task.status === \"completed\") {\n          completed++;\n        } else {\n          failed++;\n        }\n      }\n    }\n\n    return { queued, active, completed, failed };\n  }\n\n  /**\n   * Dispose the scheduler - abort all in-flight work.\n   */\n  dispose(): void {\n    // Suppress in-flight task rejections before aborting to avoid unhandled\n    // rejection events from the synchronous abort signal firing.\n    for (const activeTask of this.#activeTasks.values()) {\n      activeTask.promise.catch(() => {});\n    }\n    this.#abortController.abort();\n    this.#queue = [];\n    this.#activeTasks.clear();\n    this.#completedTasks.clear();\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"QualityUpgradeScheduler.js","names":["#requestFrameRender","#maxConcurrent","#abortController","#queue","#activeTasks","#completedTasks","#failedKeys","#processQueue","#startTask","results: UpgradeTaskStatus[]"],"sources":["../../src/preview/QualityUpgradeScheduler.ts"],"sourcesContent":["/**\n * QualityUpgradeScheduler: Centralized deadline-ordered work queue\n *\n * Coordinates main-quality segment fetching across multiple video elements.\n * Generic scheduler that doesn't understand media concepts (segments, renditions, etc.)\n * - only processes { key, deadlineMs, fetch, isCached, owner } tuples.\n *\n * Design principles:\n * - Deadline-based ordering: always process nearest deadline first\n * - Ground-truth cache validation: check cache before starting any fetch\n * - In-flight fetches never cancelled: they populate shared cache\n * - Event-driven: elements submit tasks only on state changes, not every frame\n */\n\nexport interface UpgradeTask {\n  /** Opaque dedup key (e.g. \"${owner}:${segmentId}:${renditionId}\") */\n  key: string;\n  /** Fetch function that populates the cache */\n  fetch: (signal: AbortSignal) => Promise<void>;\n  /** Returns true if the segment is still present in the cache. Used to skip\n   *  re-queuing completed tasks whose segment is still cached, and to allow\n   *  re-queuing when the segment has been LRU-evicted. If absent, a completed\n   *  task is conservatively treated as still cached (skip re-queue). */\n  isCached?: () => boolean;\n  /** Timeline time when this segment will be needed */\n  deadlineMs: number;\n  /** Element ID, for bulk operations */\n  owner: string;\n}\n\nexport interface UpgradeTaskStatus {\n  key: string;\n  owner: string;\n  deadlineMs: number;\n  status: \"queued\" | \"active\" | \"completed\" | \"failed\";\n  error?: string;\n}\n\nexport interface OwnerProgress {\n  queued: number;\n  active: number;\n  completed: number;\n  failed: number;\n}\n\ninterface ActiveTask {\n  task: UpgradeTask;\n  startedAt: number;\n  promise: Promise<void>;\n}\n\ninterface CompletedTask {\n  key: string;\n  owner: string;\n  status: \"completed\";\n}\n\nexport class QualityUpgradeScheduler {\n  #maxConcurrent: number;\n  #queue: UpgradeTask[] = [];\n  #activeTasks = new Map<string, ActiveTask>();\n  #completedTasks = new Map<string, CompletedTask>();\n  /** Keys of tasks that failed with a non-abort error, mapped to their owner.\n   *  Prevents enqueue() from repeatedly re-queuing the same failing segment\n   *  during lookahead. Cleared by replaceForOwner() (per task key) and\n   *  cancelForOwner() (per owner). */\n  #failedKeys = new Map<string, string>(); // key → owner\n  #abortController: AbortController;\n  #requestFrameRender: () => void;\n\n  constructor(options: { requestFrameRender: () => void; maxConcurrent?: number }) {\n    this.#requestFrameRender = options.requestFrameRender;\n    this.#maxConcurrent = options.maxConcurrent ?? 4;\n    this.#abortController = new AbortController();\n  }\n\n  /**\n   * Add tasks without affecting existing ones (additive).\n   * Used for lookahead extension during playback.\n   */\n  enqueue(tasks: UpgradeTask[]): void {\n    if (this.#abortController.signal.aborted) return;\n\n    for (const task of tasks) {\n      // Skip if already queued, active, completed, or previously failed.\n      // Failed tasks are not retried via enqueue (lookahead) — only via\n      // replaceForOwner (explicit seek) which clears #failedKeys for the owner.\n      if (\n        this.#queue.some((t) => t.key === task.key) ||\n        this.#activeTasks.has(task.key) ||\n        this.#completedTasks.has(task.key) ||\n        this.#failedKeys.has(task.key) // previously failed — don't retry via lookahead\n      ) {\n        continue;\n      }\n\n      this.#queue.push(task);\n    }\n\n    // Sort queue by deadline (ascending)\n    this.#queue.sort((a, b) => a.deadlineMs - b.deadlineMs);\n\n    // Start processing if we have capacity\n    this.#processQueue();\n  }\n\n  /**\n   * Replace all queued tasks for an owner.\n   * Used on seeks, trim changes, timeline position changes where old deadlines are stale.\n   * Does NOT cancel in-flight tasks (they populate shared cache).\n   */\n  replaceForOwner(owner: string, tasks: UpgradeTask[]): void {\n    if (this.#abortController.signal.aborted) return;\n\n    // Remove queued (not active) tasks for this owner\n    this.#queue = this.#queue.filter((t) => t.owner !== owner);\n\n    // Add new tasks\n    for (const task of tasks) {\n      if (this.#activeTasks.has(task.key)) {\n        continue;\n      }\n\n      // replaceForOwner is an explicit seek/state change — clear any prior\n      // failure record so the task can be retried.\n      this.#failedKeys.delete(task.key);\n\n      if (this.#completedTasks.has(task.key)) {\n        // If the task reports the segment is still cached, skip re-queuing.\n        // When isCached is absent, conservatively treat as still cached.\n        // When isCached returns false (LRU eviction), remove the stale record and re-queue.\n        const segmentStillCached = task.isCached ? task.isCached() : true;\n        if (segmentStillCached) continue;\n        this.#completedTasks.delete(task.key);\n      }\n\n      this.#queue.push(task);\n    }\n\n    // Sort queue by deadline (ascending)\n    this.#queue.sort((a, b) => a.deadlineMs - b.deadlineMs);\n\n    // Start processing if we have capacity\n    this.#processQueue();\n  }\n\n  /**\n   * Cancel all tasks for an owner.\n   * Removes queued tasks. Does NOT abort in-flight fetches.\n   */\n  cancelForOwner(owner: string): void {\n    // Remove from queue\n    this.#queue = this.#queue.filter((t) => t.owner !== owner);\n\n    // Remove from completed and failed tracking (allows resubmission)\n    for (const [key, task] of this.#completedTasks.entries()) {\n      if (task.owner === owner) {\n        this.#completedTasks.delete(key);\n      }\n    }\n    for (const [key, taskOwner] of this.#failedKeys.entries()) {\n      if (taskOwner === owner) {\n        this.#failedKeys.delete(key);\n      }\n    }\n\n    // Note: we do NOT cancel active tasks - they populate the shared cache\n  }\n\n  /**\n   * Process the queue - start tasks up to maxConcurrent limit.\n   */\n  #processQueue(): void {\n    if (this.#abortController.signal.aborted) return;\n\n    while (this.#activeTasks.size < this.#maxConcurrent && this.#queue.length > 0) {\n      const task = this.#queue.shift();\n      if (!task) break;\n\n      this.#startTask(task);\n    }\n  }\n\n  /**\n   * Start a single task.\n   */\n  #startTask(task: UpgradeTask): void {\n    const promise = task\n      .fetch(this.#abortController.signal)\n      .then(() => {\n        // Success\n        this.#activeTasks.delete(task.key);\n        this.#completedTasks.set(task.key, {\n          key: task.key,\n          owner: task.owner,\n          status: \"completed\",\n        });\n\n        // Trigger re-render so upgraded quality gets displayed. Called\n        // synchronously in the .then() microtask: currentTimeMs is still at\n        // the position where the segment was needed, and resolvedKeys.add()\n        // has already run (earlier in the microtask chain). The FrameController\n        // #pendingRenderTime mechanism coalesces concurrent completions.\n        this.#requestFrameRender();\n\n        // Start next task if available\n        this.#processQueue();\n      })\n      .catch((error) => {\n        this.#activeTasks.delete(task.key);\n\n        // Don't track AbortError as failed (intentional cancellation, not an error).\n        const isAbortError = error instanceof DOMException && error.name === \"AbortError\";\n        if (!isAbortError) {\n          // Record as failed so enqueue() doesn't re-attempt during lookahead.\n          // replaceForOwner() clears this on an explicit seek, allowing retry.\n          this.#failedKeys.set(task.key, task.owner);\n        }\n\n        // Continue processing queue even after failure\n        this.#processQueue();\n      });\n\n    this.#activeTasks.set(task.key, {\n      task,\n      startedAt: performance.now(),\n      promise,\n    });\n  }\n\n  /**\n   * Check whether a task is currently in-flight (started, not yet complete).\n   */\n  isActive(key: string): boolean {\n    return this.#activeTasks.has(key);\n  }\n\n  /**\n   * Check whether a task is waiting in the queue (submitted but not yet started).\n   */\n  isPending(key: string): boolean {\n    return this.#queue.some((t) => t.key === key);\n  }\n\n  /**\n   * Get snapshot of current queue state for debugging.\n   */\n  getQueueSnapshot(): UpgradeTaskStatus[] {\n    const results: UpgradeTaskStatus[] = [];\n\n    // Queued tasks\n    for (const task of this.#queue) {\n      results.push({\n        key: task.key,\n        owner: task.owner,\n        deadlineMs: task.deadlineMs,\n        status: \"queued\",\n      });\n    }\n\n    // Active tasks\n    for (const [key, activeTask] of this.#activeTasks.entries()) {\n      results.push({\n        key,\n        owner: activeTask.task.owner,\n        deadlineMs: activeTask.task.deadlineMs,\n        status: \"active\",\n      });\n    }\n\n    // Completed tasks\n    for (const [key, completed] of this.#completedTasks.entries()) {\n      results.push({\n        key,\n        owner: completed.owner,\n        deadlineMs: 0,\n        status: completed.status,\n      });\n    }\n\n    // Failed tasks\n    for (const [key, owner] of this.#failedKeys.entries()) {\n      results.push({\n        key,\n        owner,\n        deadlineMs: 0,\n        status: \"failed\",\n      });\n    }\n\n    return results;\n  }\n\n  /**\n   * Get progress for a specific owner.\n   */\n  getOwnerProgress(owner: string): OwnerProgress {\n    const queued = this.#queue.filter((t) => t.owner === owner).length;\n\n    let active = 0;\n    for (const activeTask of this.#activeTasks.values()) {\n      if (activeTask.task.owner === owner) {\n        active++;\n      }\n    }\n\n    let completed = 0;\n    for (const task of this.#completedTasks.values()) {\n      if (task.owner === owner) {\n        completed++;\n      }\n    }\n\n    let failed = 0;\n    for (const taskOwner of this.#failedKeys.values()) {\n      if (taskOwner === owner) {\n        failed++;\n      }\n    }\n\n    return { queued, active, completed, failed };\n  }\n\n  /**\n   * Dispose the scheduler - abort all in-flight work.\n   */\n  dispose(): void {\n    // Suppress in-flight task rejections before aborting to avoid unhandled\n    // rejection events from the synchronous abort signal firing.\n    for (const activeTask of this.#activeTasks.values()) {\n      activeTask.promise.catch(() => {});\n    }\n    this.#abortController.abort();\n    this.#queue = [];\n    this.#activeTasks.clear();\n    this.#completedTasks.clear();\n    this.#failedKeys.clear();\n  }\n\n  /**\n   * Revive a disposed scheduler so it can accept new tasks after the host\n   * element is reconnected to the DOM (e.g. workbench reparenting).\n   */\n  revive(): void {\n    if (!this.#abortController.signal.aborted) return;\n    this.#abortController = new AbortController();\n  }\n}\n"],"mappings":"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"}

package/dist/preview/renderTimegroupToCanvas.js

@@ -567,11 +567,15 @@ function renderTimegroupToCanvas(timegroup, scaleOrOptions = DEFAULT_PREVIEW_SCA
 			captureCanvas?.remove();
 		}
 	};
+	const invalidate = () => {
+		lastTimeMs = -1;
+	};
 	refresh();
 	return {
 		container: wrapperContainer,
 		canvas,
 		refresh,
+		invalidate,
 		setResolutionScale,
 		getResolutionScale,
 		dispose

package/dist/preview/renderTimegroupToCanvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderTimegroupToCanvas.js","names":["timeMs: number","timeoutMs: number","blankVideos: string[]","renderState: RenderState","options: CanvasPreviewOptions","pendingResolutionScale: number | null","captureCanvas: HTMLCanvasElement | null","captureCtx: HtmlInCanvasContext | null","originalParent: ParentNode | null","originalNextSibling: ChildNode | null"],"sources":["../../src/preview/renderTimegroupToCanvas.ts"],"sourcesContent":["import type { EFTimegroup } from \"../elements/EFTimegroup.js\";\nimport type {\n  CaptureOptions,\n  CaptureFromCloneOptions,\n  GeneratedThumbnail,\n  GenerateThumbnailsOptions,\n  ThumbnailQueue,\n  CanvasPreviewResult,\n  CanvasPreviewOptions,\n} from \"./renderTimegroupToCanvas.types.js\";\nimport { RenderContext } from \"./RenderContext.js\";\nimport { FrameController } from \"./FrameController.js\";\nimport { captureTimelineToDataUri } from \"./rendering/serializeTimelineDirect.js\";\nimport { updateAnimations, type AnimatableElement } from \"../elements/updateAnimations.js\";\n\n// Re-export renderer types for external use\nexport type { RenderOptions, RenderResult, Renderer } from \"./renderers.js\";\nexport { getEffectiveRenderMode, isCanvas, isImage } from \"./renderers.js\";\nimport {\n  isVisibleAtTime,\n  DEFAULT_WIDTH,\n  DEFAULT_HEIGHT,\n  DEFAULT_CAPTURE_SCALE,\n  DEFAULT_BLOCKING_TIMEOUT_MS,\n} from \"./previewTypes.js\";\nimport { defaultProfiler } from \"./RenderProfiler.js\";\nimport { logger } from \"./logger.js\";\n\n// Import rendering modules\nimport { loadImageFromDataUri } from \"./rendering/loadImage.js\";\nimport { createDprCanvas, renderToImageNative } from \"./rendering/renderToImageNative.js\";\nimport { clearInlineImageCache, getInlineImageCacheSize } from \"./rendering/inlineImages.js\";\nimport { isNativeCanvasApiAvailable, getRenderMode } from \"./previewSettings.js\";\nimport type { HtmlInCanvasContext, HtmlInCanvasElement } from \"./rendering/types.js\";\n\n// Re-export rendering types and functions for external use\nexport { loadImageFromDataUri };\n\n// ============================================================================\n// Constants (module-specific, not shared)\n// ============================================================================\n\n/** Number of rows to sample when checking canvas content */\nconst CANVAS_SAMPLE_STRIP_HEIGHT = 4;\n\n// ============================================================================\n// Types\n// ============================================================================\n\n// Re-export types from type-only module (zero side effects)\nexport type {\n  ContentReadyMode,\n  CaptureOptions,\n  CaptureFromCloneOptions,\n  GeneratedThumbnail,\n  GenerateThumbnailsOptions,\n  ThumbnailQueue,\n  CanvasPreviewResult,\n  CanvasPreviewOptions,\n} from \"./renderTimegroupToCanvas.types.js\";\n\n/**\n * Error thrown when video content is not ready within the blocking timeout.\n */\nexport class ContentNotReadyError extends Error {\n  constructor(\n    public readonly timeMs: number,\n    public readonly timeoutMs: number,\n    public readonly blankVideos: string[],\n  ) {\n    super(\n      `Video content not ready at ${timeMs}ms after ${timeoutMs}ms timeout. Blank videos: ${blankVideos.join(\", \")}`,\n    );\n    this.name = \"ContentNotReadyError\";\n  }\n}\n\n// ============================================================================\n// Module State (reset via resetRenderState)\n// ============================================================================\n\n/**\n * Module-level render state including caches and reusable objects.\n */\ninterface RenderState {\n  inlineImageCache: Map<string, string>;\n  layoutInitializedCanvases: WeakSet<HTMLCanvasElement>;\n  xmlSerializer: XMLSerializer | null;\n  textEncoder: TextEncoder;\n  metrics: {\n    inlineImageCacheHits: number;\n    inlineImageCacheMisses: number;\n    inlineImageCacheEvictions: number;\n  };\n}\n\n/**\n * Module-level state for render operations.\n * Note: xmlSerializer is lazy-initialized for Node.js compatibility\n */\nconst renderState: RenderState = {\n  inlineImageCache: new Map(),\n  layoutInitializedCanvases: new WeakSet(),\n  xmlSerializer: null, // Lazy-initialized in browser context\n  textEncoder: new TextEncoder(),\n  metrics: {\n    inlineImageCacheHits: 0,\n    inlineImageCacheMisses: 0,\n    inlineImageCacheEvictions: 0,\n  },\n};\n\n/**\n * Get the current render state for testing and debugging.\n * @returns The module-level render state object\n */\nexport function getRenderState(): RenderState {\n  return renderState;\n}\n\n/**\n * Get cache metrics for monitoring performance.\n * @returns Object with cache hit/miss/eviction counts\n */\nexport function getCacheMetrics(): RenderState[\"metrics\"] {\n  return { ...renderState.metrics };\n}\n\n/**\n * Reset cache metrics to zero.\n */\nexport function resetCacheMetrics(): void {\n  renderState.metrics.inlineImageCacheHits = 0;\n  renderState.metrics.inlineImageCacheMisses = 0;\n  renderState.metrics.inlineImageCacheEvictions = 0;\n}\n\n/**\n * Reset all module state including profiling counters, caches, and logging flags.\n * Call at the start of export sessions to ensure clean state.\n */\nexport function resetRenderState(): void {\n  defaultProfiler.reset();\n  clearInlineImageCache();\n  resetCacheMetrics();\n}\n\n// Re-export cache management functions\nexport { clearInlineImageCache, getInlineImageCacheSize };\n\n/**\n * DEBUG: Capture a single thumbnail at the current time.\n * Call from console: window.debugCaptureThumbnail()\n */\nif (typeof window !== \"undefined\") {\n  (window as any).debugCaptureThumbnail = async function () {\n    const timegroup = document.querySelector(\"ef-timegroup\") as any;\n    if (!timegroup) {\n      console.error(\"No timegroup found\");\n      return;\n    }\n\n    const currentTime = timegroup.currentTimeMs ?? 0;\n\n    try {\n      const result = await captureTimegroupAtTime(timegroup, {\n        timeMs: currentTime,\n        scale: 0.25,\n        contentReadyMode: \"blocking\",\n        blockingTimeoutMs: 1000,\n      });\n\n      // Create a temporary img element to display the result\n      const img = document.createElement(\"img\");\n      if (result instanceof HTMLCanvasElement) {\n        img.src = result.toDataURL();\n      } else if (result instanceof HTMLImageElement) {\n        img.src = result.src;\n      }\n      img.style.cssText = \"position:fixed;top:10px;right:10px;border:2px solid red;z-index:99999;\";\n      document.body.appendChild(img);\n\n      return result;\n    } catch (err) {\n      console.error(\"[DEBUG] Capture failed:\", err);\n      throw err;\n    }\n  };\n}\n\n// ============================================================================\n// Internal Helpers\n// ============================================================================\n\n/**\n * Wait for next animation frame (allows browser to complete layout)\n */\nfunction waitForFrame(): Promise<void> {\n  return new Promise((resolve) => requestAnimationFrame(() => resolve()));\n}\n\n/**\n * Check if a canvas has any rendered content (not all transparent/uninitialized).\n * Returns true if there's ANY non-transparent pixel.\n */\nfunction canvasHasContent(canvas: HTMLCanvasElement): boolean {\n  const ctx = canvas.getContext(\"2d\", { willReadFrequently: true });\n  if (!ctx) return false;\n\n  try {\n    const width = canvas.width;\n    const height = canvas.height;\n    if (width === 0 || height === 0) return false;\n\n    // Sample a horizontal strip across the middle of the canvas\n    // This catches most video content even if edges are black\n    const stripY = Math.floor(height / 2);\n    const imageData = ctx.getImageData(0, stripY, width, CANVAS_SAMPLE_STRIP_HEIGHT);\n    const data = imageData.data;\n\n    // Check if ANY pixel has non-zero alpha (is not transparent)\n    // A truly blank/uninitialized canvas has all pixels at [0,0,0,0]\n    // A black video frame would have pixels at [0,0,0,255] (opaque black)\n    for (let i = 3; i < data.length; i += 4) {\n      if (data[i] !== 0) {\n        return true;\n      }\n    }\n\n    return false;\n  } catch {\n    // Canvas might be tainted, assume it has content\n    return true;\n  }\n}\n\ninterface WaitForVideoContentResult {\n  ready: boolean;\n  blankVideos: string[];\n}\n\n/**\n * Returns true if the element is visible at the given time and all its\n * ancestor timegroups (up to but not including `timegroup`) are also visible.\n */\nfunction isVisibleInContext(element: Element, timegroup: EFTimegroup, timeMs: number): boolean {\n  if (!isVisibleAtTime(element, timeMs)) return false;\n  let parent = element.parentElement;\n  while (parent && parent !== timegroup) {\n    if (parent.tagName === \"EF-TIMEGROUP\" && !isVisibleAtTime(parent, timeMs)) return false;\n    parent = parent.parentElement;\n  }\n  return true;\n}\n\n/**\n * Wait for media content (videos and images) within a timegroup to be ready.\n * - ef-video: waits for the shadow canvas to have non-transparent pixels.\n * - ef-image: waits for contentReadyState to reach \"ready\" or \"error\".\n * Only checks elements that should be visible at the current time.\n */\nexport async function waitForVideoContent(\n  timegroup: EFTimegroup,\n  timeMs: number,\n  maxWaitMs: number,\n): Promise<WaitForVideoContentResult> {\n  const startTime = performance.now();\n\n  // Collect all media elements that need to be ready\n  const allVideos = Array.from(timegroup.querySelectorAll(\"ef-video\")).filter((el) =>\n    isVisibleInContext(el, timegroup, timeMs),\n  );\n  const allImages = Array.from(timegroup.querySelectorAll(\"ef-image\")).filter((el) =>\n    isVisibleInContext(el, timegroup, timeMs),\n  );\n\n  if (allVideos.length === 0 && allImages.length === 0) return { ready: true, blankVideos: [] };\n\n  const isVideoReady = (video: Element): boolean => {\n    const shadowCanvas = video.shadowRoot?.querySelector(\"canvas\");\n    if (!shadowCanvas || shadowCanvas.width === 0 || shadowCanvas.height === 0) return true;\n    return canvasHasContent(shadowCanvas);\n  };\n\n  const isImageReady = (image: Element): boolean => {\n    const state = (image as any).contentReadyState as string | undefined;\n    return state === \"ready\" || state === \"error\";\n  };\n\n  const getBlankNames = () => [\n    ...allVideos.filter((v) => !isVideoReady(v)).map((v) => (v as any).src || v.id || \"unnamed\"),\n    ...allImages.filter((i) => !isImageReady(i)).map((i) => (i as any).src || i.id || \"unnamed\"),\n  ];\n\n  while (performance.now() - startTime < maxWaitMs) {\n    if (allVideos.every(isVideoReady) && allImages.every(isImageReady)) {\n      return { ready: true, blankVideos: [] };\n    }\n    await waitForFrame();\n  }\n\n  return { ready: false, blankVideos: getBlankNames() };\n}\n\n/**\n * Captures a frame from an already-seeked render clone.\n * Used internally by captureBatch for efficiency (reuses one clone across all captures).\n *\n * @param renderClone - A render clone that has already been seeked to the target time\n * @param renderContainer - The container holding the render clone (from createRenderClone)\n * @param options - Capture options\n * @returns Canvas or Image with the rendered frame (both are CanvasImageSource)\n */\nexport async function captureFromClone(\n  renderClone: EFTimegroup,\n  _renderContainer: HTMLElement,\n  options: CaptureFromCloneOptions = {},\n): Promise<CanvasImageSource> {\n  const {\n    scale = DEFAULT_CAPTURE_SCALE,\n    contentReadyMode = \"immediate\",\n    blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS,\n    originalTimegroup,\n    timeMs: explicitTimeMs,\n    canvasMode,\n  } = options;\n\n  // Use explicit time if provided, otherwise fall back to clone's currentTimeMs\n  // CRITICAL: Using explicit time ensures temporal visibility checks are accurate\n  // NOTE: Must be defined BEFORE any logging that references timeMs\n  const timeMs = explicitTimeMs ?? renderClone.currentTimeMs;\n\n  // Use original timegroup dimensions if available, otherwise clone dimensions\n  const sourceForDimensions = originalTimegroup ?? renderClone;\n  const width = sourceForDimensions.offsetWidth || DEFAULT_WIDTH;\n  const height = sourceForDimensions.offsetHeight || DEFAULT_HEIGHT;\n\n  // NOTE: seekForRender() has already:\n  // 1. Called frameController.renderFrame() to coordinate FrameRenderable elements\n  // 2. Awaited #executeCustomFrameTasks() so frame tasks are complete\n  // No need to call frameController.renderFrame() again - it would fire tasks redundantly\n\n  if (contentReadyMode === \"blocking\") {\n    const result = await waitForVideoContent(renderClone, timeMs, blockingTimeoutMs);\n    if (!result.ready) {\n      throw new ContentNotReadyError(timeMs, blockingTimeoutMs, result.blankVideos);\n    }\n  }\n\n  // Determine effective canvas mode:\n  // 1. If explicitly specified, use that\n  // 2. If \"native\" is requested but not available, fall back to foreignObject\n  // 3. If not specified, default to foreignObject for compatibility\n  const effectiveCanvasMode = (() => {\n    if (!canvasMode) return \"foreignObject\";\n    if (canvasMode === \"native\" && !isNativeCanvasApiAvailable()) {\n      logger.debug(\n        \"[captureFromClone] Native canvas mode requested but not available, falling back to foreignObject\",\n      );\n      return \"foreignObject\";\n    }\n    return canvasMode;\n  })();\n\n  // Create RenderContext for caching during this capture operation (only needed for foreignObject)\n  const renderContext = new RenderContext();\n\n  try {\n    if (effectiveCanvasMode === \"native\") {\n      // NATIVE PATH: Use drawElementImage API (~1.76x faster than foreignObject)\n      // No DOM serialization, no canvas-to-dataURL encoding, no image loading\n      // Direct browser-native rendering\n\n      const t0 = performance.now();\n      const canvas = await renderToImageNative(renderClone, width, height, {\n        skipDprScaling: true, // Use 1x DPR for video export (4x fewer pixels!)\n      });\n      const renderTime = performance.now() - t0;\n\n      logger.debug(\n        `[captureFromClone] native render=${renderTime.toFixed(0)}ms (canvasScale=${scale})`,\n      );\n\n      return canvas;\n    } else {\n      // FOREIGNOBJECT PATH: Serialize DOM → SVG → Image → Canvas\n      // More compatible but slower than native path\n\n      // NOTE: seekForRender() has already ensured rendering is complete, including:\n      // - Lit updates propagated\n      // - All LitElement descendants updated\n      // - frameController.renderFrame() called for FrameRenderable elements\n      // - Layout stabilization complete\n      // No additional RAF wait needed - can serialize immediately\n\n      const t0 = performance.now();\n      const dataUri = await captureTimelineToDataUri(renderClone, width, height, {\n        renderContext,\n        canvasScale: scale,\n        timeMs,\n      });\n      const serializeTime = performance.now() - t0;\n\n      const t1 = performance.now();\n      const image = await loadImageFromDataUri(dataUri);\n      const loadTime = performance.now() - t1;\n\n      logger.debug(\n        `[captureFromClone] foreignObject serialize=${serializeTime.toFixed(0)}ms, load=${loadTime.toFixed(0)}ms (canvasScale=${scale})`,\n      );\n\n      // Return image directly - no copy needed!\n      return image;\n    }\n  } finally {\n    // Ensure RenderContext is disposed even if an error occurs\n    renderContext.dispose();\n  }\n}\n\n/**\n * Captures a single frame from a timegroup at a specific time.\n *\n * CLONE-TIMELINE ARCHITECTURE:\n * Creates an independent render clone, seeks it to the target time, and captures.\n * Prime-timeline is NEVER seeked - user can continue previewing/editing during capture.\n *\n * @param timegroup - The source timegroup\n * @param options - Capture options including timeMs, scale, contentReadyMode\n * @returns Canvas with the rendered frame\n * @throws ContentNotReadyError if blocking mode times out waiting for video content\n */\nexport async function captureTimegroupAtTime(\n  timegroup: EFTimegroup,\n  options: CaptureOptions,\n): Promise<CanvasImageSource> {\n  const {\n    timeMs,\n    scale = DEFAULT_CAPTURE_SCALE,\n    // skipRestore is deprecated with Clone-timeline (Prime is never seeked)\n    contentReadyMode = \"immediate\",\n    blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS,\n    canvasMode,\n    skipClone = false,\n  } = options;\n\n  if (skipClone) {\n    // DIRECT RENDERING: Skip clone creation for headless server rendering\n    // Seek prime timeline directly and capture from it\n    // WARNING: This modifies the prime timeline! Only use in headless contexts.\n\n    const seekStart = performance.now();\n    await timegroup.seekForRender(timeMs);\n    const seekMs = performance.now() - seekStart;\n\n    const renderStart = performance.now();\n    // Use timegroup's actual container (parentElement or document.body as fallback)\n    const container = (timegroup.parentElement || document.body) as HTMLElement;\n    const result = await captureFromClone(timegroup, container, {\n      scale,\n      contentReadyMode,\n      blockingTimeoutMs,\n      originalTimegroup: undefined, // No original since we're rendering the prime\n      canvasMode,\n      timeMs, // Pass explicit time since we're not using a clone\n    });\n    const renderMs = performance.now() - renderStart;\n\n    // Store timing (no clone time since we skipped it)\n    if (typeof result === \"object\" && result !== null) {\n      (result as any).__perfTiming = { cloneMs: 0, seekMs, renderMs };\n    }\n\n    return result;\n  }\n\n  // CLONE-TIMELINE: Create a short-lived render clone for this capture\n  // Prime-timeline is NEVER seeked - clone is fully independent\n  const cloneStart = performance.now();\n  const {\n    clone: renderClone,\n    container: renderContainer,\n    cleanup: cleanupRenderClone,\n  } = await timegroup.createRenderClone();\n  const cloneMs = performance.now() - cloneStart;\n\n  try {\n    // Seek the clone to target time (Prime stays at user position)\n    // Use seekForRender which bypasses duration clamping - render clones may have\n    // zero duration initially until media durations are computed, but we still\n    // want to seek to the requested time for capture purposes.\n    const seekStart = performance.now();\n    await renderClone.seekForRender(timeMs);\n    const seekMs = performance.now() - seekStart;\n\n    // Use the shared capture helper\n    const renderStart = performance.now();\n    const result = await captureFromClone(renderClone, renderContainer, {\n      scale,\n      contentReadyMode,\n      blockingTimeoutMs,\n      originalTimegroup: timegroup,\n      canvasMode,\n    });\n    const renderMs = performance.now() - renderStart;\n\n    // Store timing on the result for access by callers (if they need it)\n    // Note: CanvasImageSource doesn't support custom properties, but we can attach them anyway\n    if (typeof result === \"object\" && result !== null) {\n      (result as any).__perfTiming = { cloneMs, seekMs, renderMs };\n    }\n\n    return result;\n  } finally {\n    // Clean up the render clone\n    cleanupRenderClone();\n  }\n}\n\n/**\n * Generate thumbnails using an existing render clone and mutable queue.\n * The queue can be modified while generation is in progress.\n *\n * @param renderClone - Pre-created render clone to use\n * @param renderContainer - Container for the render clone\n * @param queue - Mutable queue that provides timestamps\n * @param options - Capture options (scale, contentReadyMode, etc.)\n * @yields Objects with { timeMs, canvas } for each captured thumbnail\n *\n * @example\n * ```ts\n * const queue = new MutableTimestampQueue();\n * queue.reset([0, 100, 200]);\n *\n * for await (const { timeMs, canvas } of generateThumbnailsFromClone(clone, container, queue)) {\n *   cache.set(timeMs, canvas);\n *   // Queue can be modified here while generator continues\n * }\n * ```\n */\nexport async function* generateThumbnailsFromClone(\n  renderClone: EFTimegroup,\n  renderContainer: HTMLElement,\n  queue: ThumbnailQueue,\n  options: GenerateThumbnailsOptions = {},\n): AsyncGenerator<GeneratedThumbnail> {\n  const {\n    scale = DEFAULT_CAPTURE_SCALE,\n    contentReadyMode = \"immediate\",\n    blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS,\n    signal,\n  } = options;\n\n  while (true) {\n    // Check if aborted before starting work\n    if (signal?.aborted) {\n      break;\n    }\n\n    const timeMs = queue.shift();\n    if (timeMs === undefined) {\n      // Queue is empty, generator exits\n      break;\n    }\n\n    // Seek the clone to the target time\n    await renderClone.seekForRender(timeMs);\n\n    // Check if aborted after seek (before expensive capture)\n    if (signal?.aborted) {\n      break;\n    }\n\n    // Capture from the seeked clone, passing explicit timeMs\n    const canvas = await captureFromClone(renderClone, renderContainer, {\n      scale,\n      contentReadyMode,\n      blockingTimeoutMs,\n      timeMs, // CRITICAL: Pass explicit time for accurate temporal visibility\n    });\n\n    // Yield the result with explicit timestamp association\n    yield { timeMs, canvas };\n  }\n}\n\n/**\n * Generate thumbnails for multiple timestamps efficiently using a single render clone.\n * This avoids the overhead of creating/destroying a clone for each thumbnail.\n *\n * @param timegroup - The timegroup to capture\n * @param timestamps - Array of timestamps to capture (in milliseconds)\n * @param options - Capture options (scale, contentReadyMode, etc.)\n * @param signal - Optional AbortSignal to cancel generation\n * @yields Objects with { timeMs, canvas } for each captured thumbnail\n *\n * @example\n * ```ts\n * for await (const { timeMs, canvas } of generateThumbnails(tg, [0, 100, 200])) {\n *   console.log(`Got thumbnail for ${timeMs}ms`);\n *   thumbnailCache.set(timeMs, canvas);\n * }\n * ```\n */\nexport async function* generateThumbnails(\n  timegroup: EFTimegroup,\n  timestamps: number[],\n  options: GenerateThumbnailsOptions = {},\n  signal?: AbortSignal,\n): AsyncGenerator<GeneratedThumbnail> {\n  const {\n    scale = DEFAULT_CAPTURE_SCALE,\n    contentReadyMode = \"immediate\",\n    blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS,\n  } = options;\n\n  // Create a single render clone for all thumbnails\n  const {\n    clone: renderClone,\n    container: renderContainer,\n    cleanup: cleanupRenderClone,\n  } = await timegroup.createRenderClone();\n\n  try {\n    for (const timeMs of timestamps) {\n      // Check for abort before each capture\n      signal?.throwIfAborted();\n\n      // Seek the clone to the target time\n      await renderClone.seekForRender(timeMs);\n\n      // Capture from the seeked clone\n      const canvas = await captureFromClone(renderClone, renderContainer, {\n        scale,\n        contentReadyMode,\n        blockingTimeoutMs,\n        originalTimegroup: timegroup,\n      });\n\n      // Yield the result with explicit timestamp association\n      yield { timeMs, canvas };\n    }\n  } finally {\n    // Always clean up the render clone\n    cleanupRenderClone();\n  }\n}\n\n/** Epsilon for comparing time values (ms) - times within this are considered equal */\nconst TIME_EPSILON_MS = 1;\n\n/** Default scale for preview rendering */\nconst DEFAULT_PREVIEW_SCALE = 1;\n\n/** Default resolution scale (full resolution) */\nconst DEFAULT_RESOLUTION_SCALE = 1;\n\n/**\n * Convert relative time to absolute time for a timegroup.\n * Nested timegroup children have ABSOLUTE startTimeMs values,\n * so relative capture times must be converted for temporal culling.\n */\nfunction toAbsoluteTime(timegroup: EFTimegroup, relativeTimeMs: number): number {\n  return relativeTimeMs + (timegroup.startTimeMs ?? 0);\n}\n\n/**\n * Renders a timegroup preview to a canvas using SVG foreignObject.\n *\n * Captures the prime timeline's current visual state including DOM changes\n * from frame tasks (SVG paths, canvas content, text updates, etc.).\n *\n * Optimized with:\n * - Passive clone structure rebuilt each frame from prime's current state\n * - Temporal bucketing for time-based culling\n * - RenderContext for canvas pixel caching across frames\n * - Resolution scaling for performance (renders at lower resolution, CSS upscales)\n *\n * @param timegroup - The source timegroup to preview (prime timeline)\n * @param scaleOrOptions - Scale factor (default 1) or options object\n * @returns Object with canvas and refresh function\n */\nexport function renderTimegroupToCanvas(\n  timegroup: EFTimegroup,\n  scaleOrOptions: number | CanvasPreviewOptions = DEFAULT_PREVIEW_SCALE,\n): CanvasPreviewResult {\n  // Normalize options\n  const options: CanvasPreviewOptions =\n    typeof scaleOrOptions === \"number\" ? { scale: scaleOrOptions } : scaleOrOptions;\n\n  const scale = options.scale ?? DEFAULT_PREVIEW_SCALE;\n  // These are mutable to support dynamic resolution changes\n  let currentResolutionScale = options.resolutionScale ?? DEFAULT_RESOLUTION_SCALE;\n\n  const width = timegroup.offsetWidth || DEFAULT_WIDTH;\n  const height = timegroup.offsetHeight || DEFAULT_HEIGHT;\n  const dpr = (typeof window !== \"undefined\" ? window.devicePixelRatio : 1) || 1;\n\n  // Calculate effective render dimensions (internal resolution) - mutable\n  let renderWidth = Math.floor(width * currentResolutionScale);\n  let renderHeight = Math.floor(height * currentResolutionScale);\n\n  // Create canvas with proper DPR handling\n  const canvas = createDprCanvas({\n    renderWidth,\n    renderHeight,\n    scale,\n    fullWidth: width,\n    fullHeight: height,\n    dpr,\n  });\n\n  // Return canvas directly - no wrapper needed\n  const wrapperContainer = canvas;\n\n  const ctx = canvas.getContext(\"2d\");\n  if (!ctx) {\n    throw new Error(\"Failed to get canvas 2d context\");\n  }\n\n  // Track render state\n  let rendering = false;\n  let lastTimeMs = -1;\n  let disposed = false;\n\n  // Invalidate lastTimeMs when composition structure or attributes change so\n  // refresh() re-renders even when currentTimeMs hasn't changed (e.g. paused edits).\n  const compositionObserver = new MutationObserver(() => {\n    if (!rendering) lastTimeMs = -1;\n  });\n  compositionObserver.observe(timegroup, {\n    attributes: true,\n    childList: true,\n    subtree: true,\n  });\n\n  // Create RenderContext for caching across refresh calls (foreignObject only)\n  const renderContext = new RenderContext();\n\n  // Create FrameController for coordinating element rendering\n  // Cached for the lifetime of this preview instance\n  const frameController = new FrameController(timegroup);\n\n  // Log resolution scale on first render for debugging\n  let hasLoggedScale = false;\n\n  // Pending resolution change - applied at start of next refresh to avoid blanking\n  let pendingResolutionScale: number | null = null;\n\n  // Use the user's render mode preference. Native requires the timegroup to be\n  // inside a <canvas layoutsubtree> for drawElementImage to work.\n  const useNative = getRenderMode() === \"native\" && isNativeCanvasApiAvailable();\n  let captureCanvas: HTMLCanvasElement | null = null;\n  let captureCtx: HtmlInCanvasContext | null = null;\n  let originalParent: ParentNode | null = null;\n  let originalNextSibling: ChildNode | null = null;\n  let savedClipPath = \"\";\n  let savedPointerEvents = \"\";\n\n  if (useNative) {\n    captureCanvas = document.createElement(\"canvas\");\n    captureCanvas.setAttribute(\"layoutsubtree\", \"\");\n    (captureCanvas as HtmlInCanvasElement).layoutSubtree = true;\n    captureCanvas.width = renderWidth;\n    captureCanvas.height = renderHeight;\n    captureCanvas.style.cssText = `position:fixed;left:0;top:0;width:${width}px;height:${height}px;opacity:0;pointer-events:none;z-index:-9999;`;\n    originalParent = timegroup.parentNode;\n    originalNextSibling = timegroup.nextSibling;\n    savedClipPath = timegroup.style.clipPath;\n    savedPointerEvents = timegroup.style.pointerEvents;\n    timegroup.style.clipPath = \"\";\n    timegroup.style.pointerEvents = \"\";\n    captureCanvas.appendChild(timegroup);\n    document.body.appendChild(captureCanvas);\n    captureCtx = captureCanvas.getContext(\"2d\") as HtmlInCanvasContext;\n    void captureCanvas.offsetHeight;\n    void timegroup.offsetHeight;\n  }\n\n  /**\n   * Apply pending resolution scale changes.\n   * Called at the start of refresh() before rendering, so the old content\n   * stays visible until new content is ready to be drawn.\n   */\n  const applyPendingResolutionChange = (): void => {\n    if (pendingResolutionScale === null) return;\n\n    const newScale = pendingResolutionScale;\n    pendingResolutionScale = null;\n\n    currentResolutionScale = newScale;\n    renderWidth = Math.floor(width * currentResolutionScale);\n    renderHeight = Math.floor(height * currentResolutionScale);\n\n    if (captureCanvas) {\n      captureCanvas.width = renderWidth;\n      captureCanvas.height = renderHeight;\n    }\n  };\n\n  /**\n   * Dynamically change resolution scale without rebuilding clone structure.\n   * The actual change is deferred until next refresh() to avoid blanking -\n   * old content stays visible until new content is ready.\n   */\n  const setResolutionScale = (newScale: number): void => {\n    // Clamp to valid range\n    newScale = Math.max(0.1, Math.min(1, newScale));\n\n    if (newScale === currentResolutionScale && pendingResolutionScale === null) return;\n\n    // Queue the change - will be applied at start of next refresh\n    pendingResolutionScale = newScale;\n\n    // Force re-render on next refresh by invalidating lastTimeMs\n    lastTimeMs = -1;\n  };\n\n  const getResolutionScale = (): number => pendingResolutionScale ?? currentResolutionScale;\n\n  const refresh = async (): Promise<void> => {\n    if (disposed) return;\n\n    const sourceTimeMs = timegroup.currentTimeMs ?? 0;\n    const userTimeMs = timegroup.userTimeMs ?? 0;\n\n    if (Math.abs(sourceTimeMs - userTimeMs) > TIME_EPSILON_MS) return;\n    if (userTimeMs === lastTimeMs) return;\n    if (rendering) return;\n\n    lastTimeMs = userTimeMs;\n    rendering = true;\n\n    applyPendingResolutionChange();\n\n    if (!hasLoggedScale) {\n      hasLoggedScale = true;\n      const mode = useNative ? \"native\" : \"foreignObject\";\n      logger.debug(\n        `[renderTimegroupToCanvas] Resolution scale: ${currentResolutionScale} (${width}x${height} → ${renderWidth}x${renderHeight}), canvas buffer: ${canvas.width}x${canvas.height}, CSS size: ${canvas.style.width}x${canvas.style.height}, renderMode: ${mode}`,\n      );\n    }\n\n    try {\n      await frameController.renderFrame(userTimeMs, {\n        waitForLitUpdate: false,\n        onAnimationsUpdate: (root) => {\n          updateAnimations(root as AnimatableElement);\n        },\n      });\n\n      if (useNative && captureCanvas && captureCtx) {\n        if (captureCanvas.width !== width || captureCanvas.height !== height) {\n          captureCtx.save();\n          captureCtx.scale(captureCanvas.width / width, captureCanvas.height / height);\n          captureCtx.drawElementImage(timegroup, 0, 0);\n          captureCtx.restore();\n        } else {\n          captureCtx.drawElementImage(timegroup, 0, 0);\n        }\n        const targetWidth = Math.floor(renderWidth * scale * dpr);\n        const targetHeight = Math.floor(renderHeight * scale * dpr);\n        if (canvas.width !== targetWidth || canvas.height !== targetHeight) {\n          canvas.width = targetWidth;\n          canvas.height = targetHeight;\n        } else {\n          ctx.clearRect(0, 0, canvas.width, canvas.height);\n        }\n        ctx.drawImage(captureCanvas, 0, 0, canvas.width, canvas.height);\n\n        defaultProfiler.incrementRenderCount();\n      } else {\n        const absoluteTimeMs = toAbsoluteTime(timegroup, userTimeMs);\n\n        const dataUri = await captureTimelineToDataUri(timegroup, width, height, {\n          renderContext,\n          canvasScale: currentResolutionScale,\n          timeMs: absoluteTimeMs,\n        });\n        const image = await loadImageFromDataUri(dataUri);\n\n        const targetWidth = Math.floor(renderWidth * scale * dpr);\n        const targetHeight = Math.floor(renderHeight * scale * dpr);\n        if (canvas.width !== targetWidth || canvas.height !== targetHeight) {\n          canvas.width = targetWidth;\n          canvas.height = targetHeight;\n        } else {\n          ctx.clearRect(0, 0, canvas.width, canvas.height);\n        }\n\n        ctx.save();\n        ctx.scale(dpr * scale, dpr * scale);\n        ctx.drawImage(image, 0, 0, renderWidth, renderHeight);\n        ctx.restore();\n\n        defaultProfiler.incrementRenderCount();\n      }\n    } catch (e) {\n      logger.error(\"Canvas preview render failed:\", e);\n    } finally {\n      rendering = false;\n    }\n  };\n\n  /**\n   * Dispose the preview and release resources.\n   */\n  const dispose = (): void => {\n    if (disposed) return;\n    disposed = true;\n    compositionObserver.disconnect();\n    frameController.abort();\n    renderContext.dispose();\n\n    // Restore timegroup to original DOM position if native mode moved it\n    if (useNative && originalParent) {\n      timegroup.style.clipPath = savedClipPath;\n      timegroup.style.pointerEvents = savedPointerEvents;\n      if (originalNextSibling) {\n        originalParent.insertBefore(timegroup, originalNextSibling);\n      } else {\n        originalParent.appendChild(timegroup);\n      }\n      captureCanvas?.remove();\n    }\n  };\n\n  // Do initial render\n  refresh();\n\n  return {\n    container: wrapperContainer,\n    canvas,\n    refresh,\n    setResolutionScale,\n    getResolutionScale,\n    dispose,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"renderTimegroupToCanvas.js","names":["timeMs: number","timeoutMs: number","blankVideos: string[]","renderState: RenderState","options: CanvasPreviewOptions","pendingResolutionScale: number | null","captureCanvas: HTMLCanvasElement | null","captureCtx: HtmlInCanvasContext | null","originalParent: ParentNode | null","originalNextSibling: ChildNode | null"],"sources":["../../src/preview/renderTimegroupToCanvas.ts"],"sourcesContent":["import type { EFTimegroup } from \"../elements/EFTimegroup.js\";\nimport type {\n  CaptureOptions,\n  CaptureFromCloneOptions,\n  GeneratedThumbnail,\n  GenerateThumbnailsOptions,\n  ThumbnailQueue,\n  CanvasPreviewResult,\n  CanvasPreviewOptions,\n} from \"./renderTimegroupToCanvas.types.js\";\nimport { RenderContext } from \"./RenderContext.js\";\nimport { FrameController } from \"./FrameController.js\";\nimport { captureTimelineToDataUri } from \"./rendering/serializeTimelineDirect.js\";\nimport { updateAnimations, type AnimatableElement } from \"../elements/updateAnimations.js\";\n\n// Re-export renderer types for external use\nexport type { RenderOptions, RenderResult, Renderer } from \"./renderers.js\";\nexport { getEffectiveRenderMode, isCanvas, isImage } from \"./renderers.js\";\nimport {\n  isVisibleAtTime,\n  DEFAULT_WIDTH,\n  DEFAULT_HEIGHT,\n  DEFAULT_CAPTURE_SCALE,\n  DEFAULT_BLOCKING_TIMEOUT_MS,\n} from \"./previewTypes.js\";\nimport { defaultProfiler } from \"./RenderProfiler.js\";\nimport { logger } from \"./logger.js\";\n\n// Import rendering modules\nimport { loadImageFromDataUri } from \"./rendering/loadImage.js\";\nimport { createDprCanvas, renderToImageNative } from \"./rendering/renderToImageNative.js\";\nimport { clearInlineImageCache, getInlineImageCacheSize } from \"./rendering/inlineImages.js\";\nimport { isNativeCanvasApiAvailable, getRenderMode } from \"./previewSettings.js\";\nimport type { HtmlInCanvasContext, HtmlInCanvasElement } from \"./rendering/types.js\";\n\n// Re-export rendering types and functions for external use\nexport { loadImageFromDataUri };\n\n// ============================================================================\n// Constants (module-specific, not shared)\n// ============================================================================\n\n/** Number of rows to sample when checking canvas content */\nconst CANVAS_SAMPLE_STRIP_HEIGHT = 4;\n\n// ============================================================================\n// Types\n// ============================================================================\n\n// Re-export types from type-only module (zero side effects)\nexport type {\n  ContentReadyMode,\n  CaptureOptions,\n  CaptureFromCloneOptions,\n  GeneratedThumbnail,\n  GenerateThumbnailsOptions,\n  ThumbnailQueue,\n  CanvasPreviewResult,\n  CanvasPreviewOptions,\n} from \"./renderTimegroupToCanvas.types.js\";\n\n/**\n * Error thrown when video content is not ready within the blocking timeout.\n */\nexport class ContentNotReadyError extends Error {\n  constructor(\n    public readonly timeMs: number,\n    public readonly timeoutMs: number,\n    public readonly blankVideos: string[],\n  ) {\n    super(\n      `Video content not ready at ${timeMs}ms after ${timeoutMs}ms timeout. Blank videos: ${blankVideos.join(\", \")}`,\n    );\n    this.name = \"ContentNotReadyError\";\n  }\n}\n\n// ============================================================================\n// Module State (reset via resetRenderState)\n// ============================================================================\n\n/**\n * Module-level render state including caches and reusable objects.\n */\ninterface RenderState {\n  inlineImageCache: Map<string, string>;\n  layoutInitializedCanvases: WeakSet<HTMLCanvasElement>;\n  xmlSerializer: XMLSerializer | null;\n  textEncoder: TextEncoder;\n  metrics: {\n    inlineImageCacheHits: number;\n    inlineImageCacheMisses: number;\n    inlineImageCacheEvictions: number;\n  };\n}\n\n/**\n * Module-level state for render operations.\n * Note: xmlSerializer is lazy-initialized for Node.js compatibility\n */\nconst renderState: RenderState = {\n  inlineImageCache: new Map(),\n  layoutInitializedCanvases: new WeakSet(),\n  xmlSerializer: null, // Lazy-initialized in browser context\n  textEncoder: new TextEncoder(),\n  metrics: {\n    inlineImageCacheHits: 0,\n    inlineImageCacheMisses: 0,\n    inlineImageCacheEvictions: 0,\n  },\n};\n\n/**\n * Get the current render state for testing and debugging.\n * @returns The module-level render state object\n */\nexport function getRenderState(): RenderState {\n  return renderState;\n}\n\n/**\n * Get cache metrics for monitoring performance.\n * @returns Object with cache hit/miss/eviction counts\n */\nexport function getCacheMetrics(): RenderState[\"metrics\"] {\n  return { ...renderState.metrics };\n}\n\n/**\n * Reset cache metrics to zero.\n */\nexport function resetCacheMetrics(): void {\n  renderState.metrics.inlineImageCacheHits = 0;\n  renderState.metrics.inlineImageCacheMisses = 0;\n  renderState.metrics.inlineImageCacheEvictions = 0;\n}\n\n/**\n * Reset all module state including profiling counters, caches, and logging flags.\n * Call at the start of export sessions to ensure clean state.\n */\nexport function resetRenderState(): void {\n  defaultProfiler.reset();\n  clearInlineImageCache();\n  resetCacheMetrics();\n}\n\n// Re-export cache management functions\nexport { clearInlineImageCache, getInlineImageCacheSize };\n\n/**\n * DEBUG: Capture a single thumbnail at the current time.\n * Call from console: window.debugCaptureThumbnail()\n */\nif (typeof window !== \"undefined\") {\n  (window as any).debugCaptureThumbnail = async function () {\n    const timegroup = document.querySelector(\"ef-timegroup\") as any;\n    if (!timegroup) {\n      console.error(\"No timegroup found\");\n      return;\n    }\n\n    const currentTime = timegroup.currentTimeMs ?? 0;\n\n    try {\n      const result = await captureTimegroupAtTime(timegroup, {\n        timeMs: currentTime,\n        scale: 0.25,\n        contentReadyMode: \"blocking\",\n        blockingTimeoutMs: 1000,\n      });\n\n      // Create a temporary img element to display the result\n      const img = document.createElement(\"img\");\n      if (result instanceof HTMLCanvasElement) {\n        img.src = result.toDataURL();\n      } else if (result instanceof HTMLImageElement) {\n        img.src = result.src;\n      }\n      img.style.cssText = \"position:fixed;top:10px;right:10px;border:2px solid red;z-index:99999;\";\n      document.body.appendChild(img);\n\n      return result;\n    } catch (err) {\n      console.error(\"[DEBUG] Capture failed:\", err);\n      throw err;\n    }\n  };\n}\n\n// ============================================================================\n// Internal Helpers\n// ============================================================================\n\n/**\n * Wait for next animation frame (allows browser to complete layout)\n */\nfunction waitForFrame(): Promise<void> {\n  return new Promise((resolve) => requestAnimationFrame(() => resolve()));\n}\n\n/**\n * Check if a canvas has any rendered content (not all transparent/uninitialized).\n * Returns true if there's ANY non-transparent pixel.\n */\nfunction canvasHasContent(canvas: HTMLCanvasElement): boolean {\n  const ctx = canvas.getContext(\"2d\", { willReadFrequently: true });\n  if (!ctx) return false;\n\n  try {\n    const width = canvas.width;\n    const height = canvas.height;\n    if (width === 0 || height === 0) return false;\n\n    // Sample a horizontal strip across the middle of the canvas\n    // This catches most video content even if edges are black\n    const stripY = Math.floor(height / 2);\n    const imageData = ctx.getImageData(0, stripY, width, CANVAS_SAMPLE_STRIP_HEIGHT);\n    const data = imageData.data;\n\n    // Check if ANY pixel has non-zero alpha (is not transparent)\n    // A truly blank/uninitialized canvas has all pixels at [0,0,0,0]\n    // A black video frame would have pixels at [0,0,0,255] (opaque black)\n    for (let i = 3; i < data.length; i += 4) {\n      if (data[i] !== 0) {\n        return true;\n      }\n    }\n\n    return false;\n  } catch {\n    // Canvas might be tainted, assume it has content\n    return true;\n  }\n}\n\ninterface WaitForVideoContentResult {\n  ready: boolean;\n  blankVideos: string[];\n}\n\n/**\n * Returns true if the element is visible at the given time and all its\n * ancestor timegroups (up to but not including `timegroup`) are also visible.\n */\nfunction isVisibleInContext(element: Element, timegroup: EFTimegroup, timeMs: number): boolean {\n  if (!isVisibleAtTime(element, timeMs)) return false;\n  let parent = element.parentElement;\n  while (parent && parent !== timegroup) {\n    if (parent.tagName === \"EF-TIMEGROUP\" && !isVisibleAtTime(parent, timeMs)) return false;\n    parent = parent.parentElement;\n  }\n  return true;\n}\n\n/**\n * Wait for media content (videos and images) within a timegroup to be ready.\n * - ef-video: waits for the shadow canvas to have non-transparent pixels.\n * - ef-image: waits for contentReadyState to reach \"ready\" or \"error\".\n * Only checks elements that should be visible at the current time.\n */\nexport async function waitForVideoContent(\n  timegroup: EFTimegroup,\n  timeMs: number,\n  maxWaitMs: number,\n): Promise<WaitForVideoContentResult> {\n  const startTime = performance.now();\n\n  // Collect all media elements that need to be ready\n  const allVideos = Array.from(timegroup.querySelectorAll(\"ef-video\")).filter((el) =>\n    isVisibleInContext(el, timegroup, timeMs),\n  );\n  const allImages = Array.from(timegroup.querySelectorAll(\"ef-image\")).filter((el) =>\n    isVisibleInContext(el, timegroup, timeMs),\n  );\n\n  if (allVideos.length === 0 && allImages.length === 0) return { ready: true, blankVideos: [] };\n\n  const isVideoReady = (video: Element): boolean => {\n    const shadowCanvas = video.shadowRoot?.querySelector(\"canvas\");\n    if (!shadowCanvas || shadowCanvas.width === 0 || shadowCanvas.height === 0) return true;\n    return canvasHasContent(shadowCanvas);\n  };\n\n  const isImageReady = (image: Element): boolean => {\n    const state = (image as any).contentReadyState as string | undefined;\n    return state === \"ready\" || state === \"error\";\n  };\n\n  const getBlankNames = () => [\n    ...allVideos.filter((v) => !isVideoReady(v)).map((v) => (v as any).src || v.id || \"unnamed\"),\n    ...allImages.filter((i) => !isImageReady(i)).map((i) => (i as any).src || i.id || \"unnamed\"),\n  ];\n\n  while (performance.now() - startTime < maxWaitMs) {\n    if (allVideos.every(isVideoReady) && allImages.every(isImageReady)) {\n      return { ready: true, blankVideos: [] };\n    }\n    await waitForFrame();\n  }\n\n  return { ready: false, blankVideos: getBlankNames() };\n}\n\n/**\n * Captures a frame from an already-seeked render clone.\n * Used internally by captureBatch for efficiency (reuses one clone across all captures).\n *\n * @param renderClone - A render clone that has already been seeked to the target time\n * @param renderContainer - The container holding the render clone (from createRenderClone)\n * @param options - Capture options\n * @returns Canvas or Image with the rendered frame (both are CanvasImageSource)\n */\nexport async function captureFromClone(\n  renderClone: EFTimegroup,\n  _renderContainer: HTMLElement,\n  options: CaptureFromCloneOptions = {},\n): Promise<CanvasImageSource> {\n  const {\n    scale = DEFAULT_CAPTURE_SCALE,\n    contentReadyMode = \"immediate\",\n    blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS,\n    originalTimegroup,\n    timeMs: explicitTimeMs,\n    canvasMode,\n  } = options;\n\n  // Use explicit time if provided, otherwise fall back to clone's currentTimeMs\n  // CRITICAL: Using explicit time ensures temporal visibility checks are accurate\n  // NOTE: Must be defined BEFORE any logging that references timeMs\n  const timeMs = explicitTimeMs ?? renderClone.currentTimeMs;\n\n  // Use original timegroup dimensions if available, otherwise clone dimensions\n  const sourceForDimensions = originalTimegroup ?? renderClone;\n  const width = sourceForDimensions.offsetWidth || DEFAULT_WIDTH;\n  const height = sourceForDimensions.offsetHeight || DEFAULT_HEIGHT;\n\n  // NOTE: seekForRender() has already:\n  // 1. Called frameController.renderFrame() to coordinate FrameRenderable elements\n  // 2. Awaited #executeCustomFrameTasks() so frame tasks are complete\n  // No need to call frameController.renderFrame() again - it would fire tasks redundantly\n\n  if (contentReadyMode === \"blocking\") {\n    const result = await waitForVideoContent(renderClone, timeMs, blockingTimeoutMs);\n    if (!result.ready) {\n      throw new ContentNotReadyError(timeMs, blockingTimeoutMs, result.blankVideos);\n    }\n  }\n\n  // Determine effective canvas mode:\n  // 1. If explicitly specified, use that\n  // 2. If \"native\" is requested but not available, fall back to foreignObject\n  // 3. If not specified, default to foreignObject for compatibility\n  const effectiveCanvasMode = (() => {\n    if (!canvasMode) return \"foreignObject\";\n    if (canvasMode === \"native\" && !isNativeCanvasApiAvailable()) {\n      logger.debug(\n        \"[captureFromClone] Native canvas mode requested but not available, falling back to foreignObject\",\n      );\n      return \"foreignObject\";\n    }\n    return canvasMode;\n  })();\n\n  // Create RenderContext for caching during this capture operation (only needed for foreignObject)\n  const renderContext = new RenderContext();\n\n  try {\n    if (effectiveCanvasMode === \"native\") {\n      // NATIVE PATH: Use drawElementImage API (~1.76x faster than foreignObject)\n      // No DOM serialization, no canvas-to-dataURL encoding, no image loading\n      // Direct browser-native rendering\n\n      const t0 = performance.now();\n      const canvas = await renderToImageNative(renderClone, width, height, {\n        skipDprScaling: true, // Use 1x DPR for video export (4x fewer pixels!)\n      });\n      const renderTime = performance.now() - t0;\n\n      logger.debug(\n        `[captureFromClone] native render=${renderTime.toFixed(0)}ms (canvasScale=${scale})`,\n      );\n\n      return canvas;\n    } else {\n      // FOREIGNOBJECT PATH: Serialize DOM → SVG → Image → Canvas\n      // More compatible but slower than native path\n\n      // NOTE: seekForRender() has already ensured rendering is complete, including:\n      // - Lit updates propagated\n      // - All LitElement descendants updated\n      // - frameController.renderFrame() called for FrameRenderable elements\n      // - Layout stabilization complete\n      // No additional RAF wait needed - can serialize immediately\n\n      const t0 = performance.now();\n      const dataUri = await captureTimelineToDataUri(renderClone, width, height, {\n        renderContext,\n        canvasScale: scale,\n        timeMs,\n      });\n      const serializeTime = performance.now() - t0;\n\n      const t1 = performance.now();\n      const image = await loadImageFromDataUri(dataUri);\n      const loadTime = performance.now() - t1;\n\n      logger.debug(\n        `[captureFromClone] foreignObject serialize=${serializeTime.toFixed(0)}ms, load=${loadTime.toFixed(0)}ms (canvasScale=${scale})`,\n      );\n\n      // Return image directly - no copy needed!\n      return image;\n    }\n  } finally {\n    // Ensure RenderContext is disposed even if an error occurs\n    renderContext.dispose();\n  }\n}\n\n/**\n * Captures a single frame from a timegroup at a specific time.\n *\n * CLONE-TIMELINE ARCHITECTURE:\n * Creates an independent render clone, seeks it to the target time, and captures.\n * Prime-timeline is NEVER seeked - user can continue previewing/editing during capture.\n *\n * @param timegroup - The source timegroup\n * @param options - Capture options including timeMs, scale, contentReadyMode\n * @returns Canvas with the rendered frame\n * @throws ContentNotReadyError if blocking mode times out waiting for video content\n */\nexport async function captureTimegroupAtTime(\n  timegroup: EFTimegroup,\n  options: CaptureOptions,\n): Promise<CanvasImageSource> {\n  const {\n    timeMs,\n    scale = DEFAULT_CAPTURE_SCALE,\n    // skipRestore is deprecated with Clone-timeline (Prime is never seeked)\n    contentReadyMode = \"immediate\",\n    blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS,\n    canvasMode,\n    skipClone = false,\n  } = options;\n\n  if (skipClone) {\n    // DIRECT RENDERING: Skip clone creation for headless server rendering\n    // Seek prime timeline directly and capture from it\n    // WARNING: This modifies the prime timeline! Only use in headless contexts.\n\n    const seekStart = performance.now();\n    await timegroup.seekForRender(timeMs);\n    const seekMs = performance.now() - seekStart;\n\n    const renderStart = performance.now();\n    // Use timegroup's actual container (parentElement or document.body as fallback)\n    const container = (timegroup.parentElement || document.body) as HTMLElement;\n    const result = await captureFromClone(timegroup, container, {\n      scale,\n      contentReadyMode,\n      blockingTimeoutMs,\n      originalTimegroup: undefined, // No original since we're rendering the prime\n      canvasMode,\n      timeMs, // Pass explicit time since we're not using a clone\n    });\n    const renderMs = performance.now() - renderStart;\n\n    // Store timing (no clone time since we skipped it)\n    if (typeof result === \"object\" && result !== null) {\n      (result as any).__perfTiming = { cloneMs: 0, seekMs, renderMs };\n    }\n\n    return result;\n  }\n\n  // CLONE-TIMELINE: Create a short-lived render clone for this capture\n  // Prime-timeline is NEVER seeked - clone is fully independent\n  const cloneStart = performance.now();\n  const {\n    clone: renderClone,\n    container: renderContainer,\n    cleanup: cleanupRenderClone,\n  } = await timegroup.createRenderClone();\n  const cloneMs = performance.now() - cloneStart;\n\n  try {\n    // Seek the clone to target time (Prime stays at user position)\n    // Use seekForRender which bypasses duration clamping - render clones may have\n    // zero duration initially until media durations are computed, but we still\n    // want to seek to the requested time for capture purposes.\n    const seekStart = performance.now();\n    await renderClone.seekForRender(timeMs);\n    const seekMs = performance.now() - seekStart;\n\n    // Use the shared capture helper\n    const renderStart = performance.now();\n    const result = await captureFromClone(renderClone, renderContainer, {\n      scale,\n      contentReadyMode,\n      blockingTimeoutMs,\n      originalTimegroup: timegroup,\n      canvasMode,\n    });\n    const renderMs = performance.now() - renderStart;\n\n    // Store timing on the result for access by callers (if they need it)\n    // Note: CanvasImageSource doesn't support custom properties, but we can attach them anyway\n    if (typeof result === \"object\" && result !== null) {\n      (result as any).__perfTiming = { cloneMs, seekMs, renderMs };\n    }\n\n    return result;\n  } finally {\n    // Clean up the render clone\n    cleanupRenderClone();\n  }\n}\n\n/**\n * Generate thumbnails using an existing render clone and mutable queue.\n * The queue can be modified while generation is in progress.\n *\n * @param renderClone - Pre-created render clone to use\n * @param renderContainer - Container for the render clone\n * @param queue - Mutable queue that provides timestamps\n * @param options - Capture options (scale, contentReadyMode, etc.)\n * @yields Objects with { timeMs, canvas } for each captured thumbnail\n *\n * @example\n * ```ts\n * const queue = new MutableTimestampQueue();\n * queue.reset([0, 100, 200]);\n *\n * for await (const { timeMs, canvas } of generateThumbnailsFromClone(clone, container, queue)) {\n *   cache.set(timeMs, canvas);\n *   // Queue can be modified here while generator continues\n * }\n * ```\n */\nexport async function* generateThumbnailsFromClone(\n  renderClone: EFTimegroup,\n  renderContainer: HTMLElement,\n  queue: ThumbnailQueue,\n  options: GenerateThumbnailsOptions = {},\n): AsyncGenerator<GeneratedThumbnail> {\n  const {\n    scale = DEFAULT_CAPTURE_SCALE,\n    contentReadyMode = \"immediate\",\n    blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS,\n    signal,\n  } = options;\n\n  while (true) {\n    // Check if aborted before starting work\n    if (signal?.aborted) {\n      break;\n    }\n\n    const timeMs = queue.shift();\n    if (timeMs === undefined) {\n      // Queue is empty, generator exits\n      break;\n    }\n\n    // Seek the clone to the target time\n    await renderClone.seekForRender(timeMs);\n\n    // Check if aborted after seek (before expensive capture)\n    if (signal?.aborted) {\n      break;\n    }\n\n    // Capture from the seeked clone, passing explicit timeMs\n    const canvas = await captureFromClone(renderClone, renderContainer, {\n      scale,\n      contentReadyMode,\n      blockingTimeoutMs,\n      timeMs, // CRITICAL: Pass explicit time for accurate temporal visibility\n    });\n\n    // Yield the result with explicit timestamp association\n    yield { timeMs, canvas };\n  }\n}\n\n/**\n * Generate thumbnails for multiple timestamps efficiently using a single render clone.\n * This avoids the overhead of creating/destroying a clone for each thumbnail.\n *\n * @param timegroup - The timegroup to capture\n * @param timestamps - Array of timestamps to capture (in milliseconds)\n * @param options - Capture options (scale, contentReadyMode, etc.)\n * @param signal - Optional AbortSignal to cancel generation\n * @yields Objects with { timeMs, canvas } for each captured thumbnail\n *\n * @example\n * ```ts\n * for await (const { timeMs, canvas } of generateThumbnails(tg, [0, 100, 200])) {\n *   console.log(`Got thumbnail for ${timeMs}ms`);\n *   thumbnailCache.set(timeMs, canvas);\n * }\n * ```\n */\nexport async function* generateThumbnails(\n  timegroup: EFTimegroup,\n  timestamps: number[],\n  options: GenerateThumbnailsOptions = {},\n  signal?: AbortSignal,\n): AsyncGenerator<GeneratedThumbnail> {\n  const {\n    scale = DEFAULT_CAPTURE_SCALE,\n    contentReadyMode = \"immediate\",\n    blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS,\n  } = options;\n\n  // Create a single render clone for all thumbnails\n  const {\n    clone: renderClone,\n    container: renderContainer,\n    cleanup: cleanupRenderClone,\n  } = await timegroup.createRenderClone();\n\n  try {\n    for (const timeMs of timestamps) {\n      // Check for abort before each capture\n      signal?.throwIfAborted();\n\n      // Seek the clone to the target time\n      await renderClone.seekForRender(timeMs);\n\n      // Capture from the seeked clone\n      const canvas = await captureFromClone(renderClone, renderContainer, {\n        scale,\n        contentReadyMode,\n        blockingTimeoutMs,\n        originalTimegroup: timegroup,\n      });\n\n      // Yield the result with explicit timestamp association\n      yield { timeMs, canvas };\n    }\n  } finally {\n    // Always clean up the render clone\n    cleanupRenderClone();\n  }\n}\n\n/** Epsilon for comparing time values (ms) - times within this are considered equal */\nconst TIME_EPSILON_MS = 1;\n\n/** Default scale for preview rendering */\nconst DEFAULT_PREVIEW_SCALE = 1;\n\n/** Default resolution scale (full resolution) */\nconst DEFAULT_RESOLUTION_SCALE = 1;\n\n/**\n * Convert relative time to absolute time for a timegroup.\n * Nested timegroup children have ABSOLUTE startTimeMs values,\n * so relative capture times must be converted for temporal culling.\n */\nfunction toAbsoluteTime(timegroup: EFTimegroup, relativeTimeMs: number): number {\n  return relativeTimeMs + (timegroup.startTimeMs ?? 0);\n}\n\n/**\n * Renders a timegroup preview to a canvas using SVG foreignObject.\n *\n * Captures the prime timeline's current visual state including DOM changes\n * from frame tasks (SVG paths, canvas content, text updates, etc.).\n *\n * Optimized with:\n * - Passive clone structure rebuilt each frame from prime's current state\n * - Temporal bucketing for time-based culling\n * - RenderContext for canvas pixel caching across frames\n * - Resolution scaling for performance (renders at lower resolution, CSS upscales)\n *\n * @param timegroup - The source timegroup to preview (prime timeline)\n * @param scaleOrOptions - Scale factor (default 1) or options object\n * @returns Object with canvas and refresh function\n */\nexport function renderTimegroupToCanvas(\n  timegroup: EFTimegroup,\n  scaleOrOptions: number | CanvasPreviewOptions = DEFAULT_PREVIEW_SCALE,\n): CanvasPreviewResult {\n  // Normalize options\n  const options: CanvasPreviewOptions =\n    typeof scaleOrOptions === \"number\" ? { scale: scaleOrOptions } : scaleOrOptions;\n\n  const scale = options.scale ?? DEFAULT_PREVIEW_SCALE;\n  // These are mutable to support dynamic resolution changes\n  let currentResolutionScale = options.resolutionScale ?? DEFAULT_RESOLUTION_SCALE;\n\n  const width = timegroup.offsetWidth || DEFAULT_WIDTH;\n  const height = timegroup.offsetHeight || DEFAULT_HEIGHT;\n  const dpr = (typeof window !== \"undefined\" ? window.devicePixelRatio : 1) || 1;\n\n  // Calculate effective render dimensions (internal resolution) - mutable\n  let renderWidth = Math.floor(width * currentResolutionScale);\n  let renderHeight = Math.floor(height * currentResolutionScale);\n\n  // Create canvas with proper DPR handling\n  const canvas = createDprCanvas({\n    renderWidth,\n    renderHeight,\n    scale,\n    fullWidth: width,\n    fullHeight: height,\n    dpr,\n  });\n\n  // Return canvas directly - no wrapper needed\n  const wrapperContainer = canvas;\n\n  const ctx = canvas.getContext(\"2d\");\n  if (!ctx) {\n    throw new Error(\"Failed to get canvas 2d context\");\n  }\n\n  // Track render state\n  let rendering = false;\n  let lastTimeMs = -1;\n  let disposed = false;\n\n  // Invalidate lastTimeMs when composition structure or attributes change so\n  // refresh() re-renders even when currentTimeMs hasn't changed (e.g. paused edits).\n  const compositionObserver = new MutationObserver(() => {\n    if (!rendering) lastTimeMs = -1;\n  });\n  compositionObserver.observe(timegroup, {\n    attributes: true,\n    childList: true,\n    subtree: true,\n  });\n\n  // Create RenderContext for caching across refresh calls (foreignObject only)\n  const renderContext = new RenderContext();\n\n  // Create FrameController for coordinating element rendering\n  // Cached for the lifetime of this preview instance\n  const frameController = new FrameController(timegroup);\n\n  // Log resolution scale on first render for debugging\n  let hasLoggedScale = false;\n\n  // Pending resolution change - applied at start of next refresh to avoid blanking\n  let pendingResolutionScale: number | null = null;\n\n  // Use the user's render mode preference. Native requires the timegroup to be\n  // inside a <canvas layoutsubtree> for drawElementImage to work.\n  const useNative = getRenderMode() === \"native\" && isNativeCanvasApiAvailable();\n  let captureCanvas: HTMLCanvasElement | null = null;\n  let captureCtx: HtmlInCanvasContext | null = null;\n  let originalParent: ParentNode | null = null;\n  let originalNextSibling: ChildNode | null = null;\n  let savedClipPath = \"\";\n  let savedPointerEvents = \"\";\n\n  if (useNative) {\n    captureCanvas = document.createElement(\"canvas\");\n    captureCanvas.setAttribute(\"layoutsubtree\", \"\");\n    (captureCanvas as HtmlInCanvasElement).layoutSubtree = true;\n    captureCanvas.width = renderWidth;\n    captureCanvas.height = renderHeight;\n    captureCanvas.style.cssText = `position:fixed;left:0;top:0;width:${width}px;height:${height}px;opacity:0;pointer-events:none;z-index:-9999;`;\n    originalParent = timegroup.parentNode;\n    originalNextSibling = timegroup.nextSibling;\n    savedClipPath = timegroup.style.clipPath;\n    savedPointerEvents = timegroup.style.pointerEvents;\n    timegroup.style.clipPath = \"\";\n    timegroup.style.pointerEvents = \"\";\n    captureCanvas.appendChild(timegroup);\n    document.body.appendChild(captureCanvas);\n    captureCtx = captureCanvas.getContext(\"2d\") as HtmlInCanvasContext;\n    void captureCanvas.offsetHeight;\n    void timegroup.offsetHeight;\n  }\n\n  /**\n   * Apply pending resolution scale changes.\n   * Called at the start of refresh() before rendering, so the old content\n   * stays visible until new content is ready to be drawn.\n   */\n  const applyPendingResolutionChange = (): void => {\n    if (pendingResolutionScale === null) return;\n\n    const newScale = pendingResolutionScale;\n    pendingResolutionScale = null;\n\n    currentResolutionScale = newScale;\n    renderWidth = Math.floor(width * currentResolutionScale);\n    renderHeight = Math.floor(height * currentResolutionScale);\n\n    if (captureCanvas) {\n      captureCanvas.width = renderWidth;\n      captureCanvas.height = renderHeight;\n    }\n  };\n\n  /**\n   * Dynamically change resolution scale without rebuilding clone structure.\n   * The actual change is deferred until next refresh() to avoid blanking -\n   * old content stays visible until new content is ready.\n   */\n  const setResolutionScale = (newScale: number): void => {\n    // Clamp to valid range\n    newScale = Math.max(0.1, Math.min(1, newScale));\n\n    if (newScale === currentResolutionScale && pendingResolutionScale === null) return;\n\n    // Queue the change - will be applied at start of next refresh\n    pendingResolutionScale = newScale;\n\n    // Force re-render on next refresh by invalidating lastTimeMs\n    lastTimeMs = -1;\n  };\n\n  const getResolutionScale = (): number => pendingResolutionScale ?? currentResolutionScale;\n\n  const refresh = async (): Promise<void> => {\n    if (disposed) return;\n\n    const sourceTimeMs = timegroup.currentTimeMs ?? 0;\n    const userTimeMs = timegroup.userTimeMs ?? 0;\n\n    if (Math.abs(sourceTimeMs - userTimeMs) > TIME_EPSILON_MS) return;\n    if (userTimeMs === lastTimeMs) return;\n    if (rendering) return;\n\n    lastTimeMs = userTimeMs;\n    rendering = true;\n\n    applyPendingResolutionChange();\n\n    if (!hasLoggedScale) {\n      hasLoggedScale = true;\n      const mode = useNative ? \"native\" : \"foreignObject\";\n      logger.debug(\n        `[renderTimegroupToCanvas] Resolution scale: ${currentResolutionScale} (${width}x${height} → ${renderWidth}x${renderHeight}), canvas buffer: ${canvas.width}x${canvas.height}, CSS size: ${canvas.style.width}x${canvas.style.height}, renderMode: ${mode}`,\n      );\n    }\n\n    try {\n      await frameController.renderFrame(userTimeMs, {\n        waitForLitUpdate: false,\n        onAnimationsUpdate: (root) => {\n          updateAnimations(root as AnimatableElement);\n        },\n      });\n\n      if (useNative && captureCanvas && captureCtx) {\n        if (captureCanvas.width !== width || captureCanvas.height !== height) {\n          captureCtx.save();\n          captureCtx.scale(captureCanvas.width / width, captureCanvas.height / height);\n          captureCtx.drawElementImage(timegroup, 0, 0);\n          captureCtx.restore();\n        } else {\n          captureCtx.drawElementImage(timegroup, 0, 0);\n        }\n        const targetWidth = Math.floor(renderWidth * scale * dpr);\n        const targetHeight = Math.floor(renderHeight * scale * dpr);\n        if (canvas.width !== targetWidth || canvas.height !== targetHeight) {\n          canvas.width = targetWidth;\n          canvas.height = targetHeight;\n        } else {\n          ctx.clearRect(0, 0, canvas.width, canvas.height);\n        }\n        ctx.drawImage(captureCanvas, 0, 0, canvas.width, canvas.height);\n\n        defaultProfiler.incrementRenderCount();\n      } else {\n        const absoluteTimeMs = toAbsoluteTime(timegroup, userTimeMs);\n\n        const dataUri = await captureTimelineToDataUri(timegroup, width, height, {\n          renderContext,\n          canvasScale: currentResolutionScale,\n          timeMs: absoluteTimeMs,\n        });\n        const image = await loadImageFromDataUri(dataUri);\n\n        const targetWidth = Math.floor(renderWidth * scale * dpr);\n        const targetHeight = Math.floor(renderHeight * scale * dpr);\n        if (canvas.width !== targetWidth || canvas.height !== targetHeight) {\n          canvas.width = targetWidth;\n          canvas.height = targetHeight;\n        } else {\n          ctx.clearRect(0, 0, canvas.width, canvas.height);\n        }\n\n        ctx.save();\n        ctx.scale(dpr * scale, dpr * scale);\n        ctx.drawImage(image, 0, 0, renderWidth, renderHeight);\n        ctx.restore();\n\n        defaultProfiler.incrementRenderCount();\n      }\n    } catch (e) {\n      logger.error(\"Canvas preview render failed:\", e);\n    } finally {\n      rendering = false;\n    }\n  };\n\n  /**\n   * Dispose the preview and release resources.\n   */\n  const dispose = (): void => {\n    if (disposed) return;\n    disposed = true;\n    compositionObserver.disconnect();\n    frameController.abort();\n    renderContext.dispose();\n\n    // Restore timegroup to original DOM position if native mode moved it\n    if (useNative && originalParent) {\n      timegroup.style.clipPath = savedClipPath;\n      timegroup.style.pointerEvents = savedPointerEvents;\n      if (originalNextSibling) {\n        originalParent.insertBefore(timegroup, originalNextSibling);\n      } else {\n        originalParent.appendChild(timegroup);\n      }\n      captureCanvas?.remove();\n    }\n  };\n\n  const invalidate = (): void => {\n    lastTimeMs = -1;\n  };\n\n  // Do initial render\n  refresh();\n\n  return {\n    container: wrapperContainer,\n    canvas,\n    refresh,\n    invalidate,\n    setResolutionScale,\n    getResolutionScale,\n    dispose,\n  };\n}\n"],"mappings":"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"}

package/dist/preview/renderTimegroupToCanvas.types.d.ts

@@ -38,6 +38,8 @@ interface CanvasPreviewResult {
   container: HTMLCanvasElement;
   canvas: HTMLCanvasElement;
   refresh: () => Promise<void>;
+  /** Marks the current frame stale so the next refresh() re-renders even at the same time. */
+  invalidate: () => void;
   setResolutionScale: (scale: number) => void;
   getResolutionScale: () => number;
   dispose: () => void;

package/dist/preview/renderTimegroupToVideo.js

@@ -5,6 +5,7 @@ import { captureTimelineToDataUri } from "./rendering/serializeTimelineDirect.js
 import { isNativeCanvasApiAvailable } from "./previewSettings.js";
 import { renderToImageNative } from "./rendering/renderToImageNative.js";
 import { resetRenderState, waitForVideoContent } from "./renderTimegroupToCanvas.js";
+import { EFMotionBlur } from "../elements/EFMotionBlur.js";
 import { AudioBufferSource, BufferTarget, CanvasSource, Mp4OutputFormat, Output, QUALITY_HIGH, StreamTarget, canEncodeAudio, getEncodableAudioCodecs } from "mediabunny";
 
 //#region src/preview/renderTimegroupToVideo.ts
@@ -262,6 +263,7 @@ async function renderTimegroupToVideo(timegroup, options = {}) {
 		const pendingFrames = [];
 		let nextSeekFrame = 0;
 		let encodedFrames = 0;
+		EFMotionBlur.renderQuality = "render";
 		while (encodedFrames < config.totalFrames) {
 			checkCancelled();
 			while (nextSeekFrame < config.totalFrames && pendingFrames.length < MAX_AHEAD) {
@@ -383,6 +385,7 @@ async function renderTimegroupToVideo(timegroup, options = {}) {
 			return;
 		}
 	} finally {
+		EFMotionBlur.renderQuality = "preview";
 		renderContext.dispose();
 		if (previewContainer.parentNode) previewContainer.parentNode.removeChild(previewContainer);
 		cleanupRenderClone();