@editframe/elements 0.33.0-beta → 0.34.5-beta

package/dist/preview/FrameController.js

@@ -0,0 +1,216 @@
+//#region src/preview/FrameController.ts
+/**
+* Priority for video elements.
+* Video renders first as other elements may depend on video frames being ready.
+*/
+const PRIORITY_VIDEO = 1;
+/**
+* Priority for captions elements.
+* Captions render after video so they can overlay correctly.
+*/
+const PRIORITY_CAPTIONS = 2;
+/**
+* Priority for audio elements.
+* Audio renders after captions (no visual dependency, but keeps consistent ordering).
+*/
+const PRIORITY_AUDIO = 3;
+/**
+* Priority for waveform elements.
+* Waveform renders after audio because it depends on audio analysis data.
+*/
+const PRIORITY_WAVEFORM = 4;
+/**
+* Priority for image elements.
+* Images render with low priority as they're typically static.
+*/
+const PRIORITY_IMAGE = 5;
+/**
+* Type guard to check if an element implements FrameRenderable.
+*/
+function isFrameRenderable(element) {
+	return typeof element === "object" && element !== null && "getFrameState" in element && "prepareFrame" in element && "renderFrame" in element && typeof element.getFrameState === "function" && typeof element.prepareFrame === "function" && typeof element.renderFrame === "function";
+}
+/**
+* Central controller for frame rendering.
+* Lives at the root timegroup and orchestrates all element rendering.
+*/
+var FrameController = class {
+	#rootElement;
+	#abortController = null;
+	#renderInProgress = false;
+	#pendingRenderTime = null;
+	constructor(rootElement) {
+		this.#rootElement = rootElement;
+	}
+	/**
+	* Cancel any in-progress render operation.
+	*/
+	abort() {
+		this.#abortController?.abort();
+		this.#abortController = null;
+	}
+	/**
+	* Render a frame at the specified time.
+	*
+	* This is the main entry point for frame rendering. It:
+	* 1. Cancels any previous in-progress render
+	* 2. Queries all visible FrameRenderable elements
+	* 3. Runs preparation in parallel for elements that need it
+	* 4. Runs render in priority order
+	*
+	* @param timeMs - The time in milliseconds to render
+	* @param options - Optional configuration
+	*/
+	async renderFrame(timeMs, options = {}) {
+		const { waitForLitUpdate = true, onAnimationsUpdate } = options;
+		if (this.#renderInProgress) {
+			this.#pendingRenderTime = timeMs;
+			return;
+		}
+		this.#abortController?.abort();
+		this.#abortController = new AbortController();
+		const signal = this.#abortController.signal;
+		this.#renderInProgress = true;
+		try {
+			if (waitForLitUpdate) {
+				await this.#rootElement.updateComplete;
+				signal.throwIfAborted();
+			}
+			const elements = this.#queryVisibleElements(timeMs);
+			signal.throwIfAborted();
+			const elementsNeedingPreparation = elements.filter((el) => el.getFrameState(timeMs).needsPreparation);
+			if (elementsNeedingPreparation.length > 0) {
+				await Promise.all(elementsNeedingPreparation.map((el) => el.prepareFrame(timeMs, signal)));
+				signal.throwIfAborted();
+			}
+			const sortedElements = [...elements].sort((a, b) => a.getFrameState(timeMs).priority - b.getFrameState(timeMs).priority);
+			for (const element of sortedElements) {
+				signal.throwIfAborted();
+				element.renderFrame(timeMs);
+			}
+			if (onAnimationsUpdate) onAnimationsUpdate(this.#rootElement);
+		} finally {
+			this.#renderInProgress = false;
+			if (this.#pendingRenderTime !== null) {
+				const pendingTime = this.#pendingRenderTime;
+				this.#pendingRenderTime = null;
+				this.renderFrame(pendingTime, options).catch(() => {});
+			}
+		}
+	}
+	/**
+	* Query all visible FrameRenderable elements in the tree.
+	* Uses temporal visibility to filter out elements not visible at current time.
+	* 
+	* IMPORTANT: For temporal elements, we use temporal visibility (startTimeMs/endTimeMs)
+	* instead of CSS visibility. This is because updateAnimations sets display:none on
+	* elements outside their time range, but that CSS state is from the PREVIOUS frame.
+	* When seeking, we need to evaluate visibility based on the NEW time, not stale CSS.
+	* 
+	* @param timeMs - The time to use for visibility checks. This should be the target
+	*                 render time, not read from root element (which may be stale).
+	*/
+	#queryVisibleElements(timeMs) {
+		const result = [];
+		const currentTimeMs = timeMs;
+		const walk = (element) => {
+			if ("startTimeMs" in element && "endTimeMs" in element) {
+				const startMs = element.startTimeMs ?? -Infinity;
+				const endMs = element.endTimeMs ?? Infinity;
+				if (!(currentTimeMs >= startMs && currentTimeMs < endMs)) return;
+				if (isFrameRenderable(element)) result.push(element);
+			} else {
+				if (element instanceof HTMLElement) {
+					if (element.style.display === "none") return;
+					const style = getComputedStyle(element);
+					if (style.display === "none" || style.visibility === "hidden") return;
+				}
+				if (isFrameRenderable(element)) result.push(element);
+			}
+			const children = this.#getChildrenIncludingSlotted(element);
+			for (const child of children) walk(child);
+		};
+		walk(this.#rootElement);
+		return result;
+	}
+	/**
+	* Gets all child elements including slotted content for shadow DOM elements.
+	* For elements with shadow DOM that contain slots, this returns the assigned
+	* elements (slotted content) instead of just the shadow DOM children.
+	*/
+	#getChildrenIncludingSlotted(element) {
+		if (element.shadowRoot) {
+			const slots = element.shadowRoot.querySelectorAll("slot");
+			if (slots.length > 0) {
+				const assignedElements = [];
+				for (const slot of slots) assignedElements.push(...slot.assignedElements());
+				for (const child of element.shadowRoot.children) if (child.tagName !== "SLOT") assignedElements.push(child);
+				return assignedElements;
+			}
+		}
+		return Array.from(element.children);
+	}
+	/**
+	* Check if a render is currently in progress.
+	*/
+	get isRendering() {
+		return this.#renderInProgress;
+	}
+};
+/**
+* Create a backwards-compatible frameTask wrapper for a FrameRenderable element.
+* 
+* This factory function creates a frameTask object that:
+* - Manages its own AbortController for cancellation
+* - Calls prepareFrame() then renderFrame() in sequence
+* - Silently ignores AbortErrors (expected during cancellation)
+* - Provides taskComplete promise for awaiting completion
+* 
+* @param element - The element implementing FrameRenderable
+* @param options - Optional configuration
+* @returns A frameTask object compatible with legacy code
+* 
+* @example
+* ```typescript
+* class MyElement extends LitElement implements FrameRenderable {
+*   frameTask = createFrameTaskWrapper(this, {
+*     getTimeMs: () => this.currentSourceTimeMs,
+*   });
+* 
+*   getFrameState(timeMs: number): FrameState { ... }
+*   async prepareFrame(timeMs: number, signal: AbortSignal): Promise<void> { ... }
+*   renderFrame(timeMs: number): void { ... }
+* }
+* ```
+*/
+function createFrameTaskWrapper(element, options = {}) {
+	let frameTaskPromise = Promise.resolve();
+	const getTimeMs = options.getTimeMs ?? (() => {
+		if ("desiredSeekTimeMs" in element && typeof element.desiredSeekTimeMs === "number") return element.desiredSeekTimeMs;
+		if ("ownCurrentTimeMs" in element && typeof element.ownCurrentTimeMs === "number") return element.ownCurrentTimeMs;
+		return 0;
+	});
+	const taskObj = {
+		run: () => {
+			const abortController = new AbortController();
+			const timeMs = getTimeMs();
+			frameTaskPromise = (async () => {
+				try {
+					await element.prepareFrame(timeMs, abortController.signal);
+					element.renderFrame(timeMs);
+				} catch (error) {
+					if (error instanceof DOMException && error.name === "AbortError") return;
+					throw error;
+				}
+			})();
+			taskObj.taskComplete = frameTaskPromise;
+			return frameTaskPromise;
+		},
+		taskComplete: Promise.resolve()
+	};
+	return taskObj;
+}
+
+//#endregion
+export { FrameController, PRIORITY_AUDIO, PRIORITY_CAPTIONS, PRIORITY_IMAGE, PRIORITY_VIDEO, PRIORITY_WAVEFORM, createFrameTaskWrapper };
+//# sourceMappingURL=FrameController.js.map

package/dist/preview/FrameController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameController.js","names":["#rootElement","#abortController","#renderInProgress","#pendingRenderTime","#queryVisibleElements","result: FrameRenderable[]","#getChildrenIncludingSlotted","assignedElements: Element[]","frameTaskPromise: Promise<void>","taskObj: FrameTask"],"sources":["../../src/preview/FrameController.ts"],"sourcesContent":["/**\n * FrameController: Centralized frame rendering control\n *\n * Replaces the distributed Lit Task hierarchy with a single control loop\n * that queries elements and coordinates rendering directly.\n *\n * Benefits over the previous Task-based system:\n * - Single abort controller instead of distributed abort handling\n * - Clear prepare → render phases\n * - All coordination visible in one place\n * - No Lit Task reactivity overhead\n */\n\nimport type { LitElement } from \"lit\";\n\n// ============================================================================\n// Priority Constants\n// ============================================================================\n// Lower numbers render first. Elements with dependencies should have higher\n// priority numbers than their dependencies.\n//\n// Example: Waveform depends on audio analysis data, so it renders after audio.\n// ============================================================================\n\n/**\n * Priority for video elements.\n * Video renders first as other elements may depend on video frames being ready.\n */\nexport const PRIORITY_VIDEO = 1;\n\n/**\n * Priority for captions elements.\n * Captions render after video so they can overlay correctly.\n */\nexport const PRIORITY_CAPTIONS = 2;\n\n/**\n * Priority for audio elements.\n * Audio renders after captions (no visual dependency, but keeps consistent ordering).\n */\nexport const PRIORITY_AUDIO = 3;\n\n/**\n * Priority for waveform elements.\n * Waveform renders after audio because it depends on audio analysis data.\n */\nexport const PRIORITY_WAVEFORM = 4;\n\n/**\n * Priority for image elements.\n * Images render with low priority as they're typically static.\n */\nexport const PRIORITY_IMAGE = 5;\n\n/**\n * Default priority for elements that don't specify one.\n * High number ensures custom elements render after standard elements.\n */\nexport const PRIORITY_DEFAULT = 100;\n\n/**\n * State returned by elements describing their readiness for a given time.\n */\nexport interface FrameState {\n  /**\n   * Whether async preparation is needed before rendering.\n   * Examples: video needs to seek, captions need to load data.\n   */\n  needsPreparation: boolean;\n\n  /**\n   * Whether the element is ready to render synchronously.\n   * True when all async work is complete and renderFrame() can be called.\n   */\n  isReady: boolean;\n\n  /**\n   * Rendering priority hint. Lower numbers render first.\n   * Used to order render calls for elements with dependencies.\n   * \n   * Standard priorities:\n   * - PRIORITY_VIDEO (1): Video elements\n   * - PRIORITY_CAPTIONS (2): Caption overlays\n   * - PRIORITY_AUDIO (3): Audio elements\n   * - PRIORITY_WAVEFORM (4): Audio visualizers (depend on audio)\n   * - PRIORITY_IMAGE (5): Static images\n   * - PRIORITY_DEFAULT (100): Fallback for custom elements\n   */\n  priority: number;\n}\n\n/**\n * Interface that elements implement to participate in centralized frame rendering.\n * Elements keep their rendering logic local but expose a standardized interface.\n */\nexport interface FrameRenderable {\n  /**\n   * Query the element's readiness state for a given time.\n   * Must be synchronous and cheap to call.\n   */\n  getFrameState(timeMs: number): FrameState;\n\n  /**\n   * Async preparation phase. Called when getFrameState().needsPreparation is true.\n   * Performs any async work needed before rendering (seeking, loading, etc.).\n   *\n   * @param timeMs - The time to prepare for\n   * @param signal - Abort signal for cancellation\n   */\n  prepareFrame(timeMs: number, signal: AbortSignal): Promise<void>;\n\n  /**\n   * Synchronous render phase. Called after all preparation is complete.\n   * Performs the actual rendering (paint to canvas, update DOM, etc.).\n   *\n   * @param timeMs - The time to render\n   */\n  renderFrame(timeMs: number): void;\n}\n\n/**\n * Type guard to check if an element implements FrameRenderable.\n */\nexport function isFrameRenderable(element: unknown): element is FrameRenderable {\n  return (\n    typeof element === \"object\" &&\n    element !== null &&\n    \"getFrameState\" in element &&\n    \"prepareFrame\" in element &&\n    \"renderFrame\" in element &&\n    typeof (element as FrameRenderable).getFrameState === \"function\" &&\n    typeof (element as FrameRenderable).prepareFrame === \"function\" &&\n    typeof (element as FrameRenderable).renderFrame === \"function\"\n  );\n}\n\n/**\n * Options for FrameController.renderFrame()\n */\nexport interface RenderFrameOptions {\n  /**\n   * Whether to wait for Lit updateComplete before querying elements.\n   * Default: true\n   */\n  waitForLitUpdate?: boolean;\n\n  /**\n   * Callback to update CSS animations after frame rendering completes.\n   * Called with the root element after all elements have rendered.\n   * This centralizes animation synchronization in one place.\n   */\n  onAnimationsUpdate?: (rootElement: Element) => void;\n}\n\n/**\n * Central controller for frame rendering.\n * Lives at the root timegroup and orchestrates all element rendering.\n */\nexport class FrameController {\n  #rootElement: LitElement & { currentTimeMs: number };\n  #abortController: AbortController | null = null;\n  #renderInProgress = false;\n  #pendingRenderTime: number | null = null;\n\n  constructor(rootElement: LitElement & { currentTimeMs: number }) {\n    this.#rootElement = rootElement;\n  }\n\n  /**\n   * Cancel any in-progress render operation.\n   */\n  abort(): void {\n    this.#abortController?.abort();\n    this.#abortController = null;\n  }\n\n  /**\n   * Render a frame at the specified time.\n   *\n   * This is the main entry point for frame rendering. It:\n   * 1. Cancels any previous in-progress render\n   * 2. Queries all visible FrameRenderable elements\n   * 3. Runs preparation in parallel for elements that need it\n   * 4. Runs render in priority order\n   *\n   * @param timeMs - The time in milliseconds to render\n   * @param options - Optional configuration\n   */\n  async renderFrame(\n    timeMs: number,\n    options: RenderFrameOptions = {}\n  ): Promise<void> {\n    const { waitForLitUpdate = true, onAnimationsUpdate } = options;\n\n    // If a render is in progress, queue this one\n    if (this.#renderInProgress) {\n      this.#pendingRenderTime = timeMs;\n      return;\n    }\n\n    // Cancel any previous render operation\n    this.#abortController?.abort();\n    this.#abortController = new AbortController();\n    const signal = this.#abortController.signal;\n\n    this.#renderInProgress = true;\n\n    try {\n      // Wait for Lit to propagate time changes to children\n      if (waitForLitUpdate) {\n        await this.#rootElement.updateComplete;\n        signal.throwIfAborted();\n      }\n\n      // Query all visible elements that implement FrameRenderable\n      // Pass the timeMs parameter to use for visibility checks (root element's time may be stale)\n      const elements = this.#queryVisibleElements(timeMs);\n      signal.throwIfAborted();\n\n      // Phase 1: Parallel preparation\n      const elementsNeedingPreparation = elements.filter(\n        (el) => el.getFrameState(timeMs).needsPreparation\n      );\n\n      if (elementsNeedingPreparation.length > 0) {\n        await Promise.all(\n          elementsNeedingPreparation.map((el) => el.prepareFrame(timeMs, signal))\n        );\n        signal.throwIfAborted();\n      }\n\n      // Phase 2: Sequential render by priority\n      const sortedElements = [...elements].sort(\n        (a, b) => a.getFrameState(timeMs).priority - b.getFrameState(timeMs).priority\n      );\n\n      for (const element of sortedElements) {\n        signal.throwIfAborted();\n        element.renderFrame(timeMs);\n      }\n\n      // Phase 3: Update CSS animations (centralized)\n      if (onAnimationsUpdate) {\n        onAnimationsUpdate(this.#rootElement);\n      }\n    } finally {\n      this.#renderInProgress = false;\n\n      // Process any queued render\n      if (this.#pendingRenderTime !== null) {\n        const pendingTime = this.#pendingRenderTime;\n        this.#pendingRenderTime = null;\n        // Don't await - fire and forget to avoid recursive waiting\n        this.renderFrame(pendingTime, options).catch(() => {\n          // Silently ignore errors from queued renders (likely aborted)\n        });\n      }\n    }\n  }\n\n  /**\n   * Query all visible FrameRenderable elements in the tree.\n   * Uses temporal visibility to filter out elements not visible at current time.\n   * \n   * IMPORTANT: For temporal elements, we use temporal visibility (startTimeMs/endTimeMs)\n   * instead of CSS visibility. This is because updateAnimations sets display:none on\n   * elements outside their time range, but that CSS state is from the PREVIOUS frame.\n   * When seeking, we need to evaluate visibility based on the NEW time, not stale CSS.\n   * \n   * @param timeMs - The time to use for visibility checks. This should be the target\n   *                 render time, not read from root element (which may be stale).\n   */\n  #queryVisibleElements(timeMs: number): FrameRenderable[] {\n    const result: FrameRenderable[] = [];\n    const currentTimeMs = timeMs;\n\n    const walk = (element: Element): void => {\n      // For temporal elements (ef-timegroup, ef-video, etc.), use temporal visibility\n      // instead of CSS visibility. CSS display:none may be stale from previous frame.\n      const isTemporal = \"startTimeMs\" in element && \"endTimeMs\" in element;\n      \n      if (isTemporal) {\n        // Temporal element: check time-based visibility\n        // Use exclusive end (< not <=) to avoid overlap at boundaries\n        const startMs = (element as { startTimeMs?: number }).startTimeMs ?? -Infinity;\n        const endMs = (element as { endTimeMs?: number }).endTimeMs ?? Infinity;\n        const isTemporallyVisible = currentTimeMs >= startMs && currentTimeMs < endMs;\n        \n        if (!isTemporallyVisible) {\n          // Skip this element AND its children (children's times are relative to parent)\n          return;\n        }\n        \n        // Element is temporally visible - include if it implements FrameRenderable\n        if (isFrameRenderable(element)) {\n          result.push(element);\n        }\n      } else {\n        // Non-temporal element: use CSS visibility\n        if (element instanceof HTMLElement) {\n          // Fast path: check inline display style\n          if (element.style.display === \"none\") {\n            return;\n          }\n          // Slow path: check computed style\n          const style = getComputedStyle(element);\n          if (style.display === \"none\" || style.visibility === \"hidden\") {\n            return;\n          }\n        }\n\n        // Check if this element implements FrameRenderable\n        if (isFrameRenderable(element)) {\n          result.push(element);\n        }\n      }\n\n      // Walk children - handle both regular children and slotted content\n      const children = this.#getChildrenIncludingSlotted(element);\n      for (const child of children) {\n        walk(child);\n      }\n    };\n\n    walk(this.#rootElement);\n    return result;\n  }\n\n  /**\n   * Gets all child elements including slotted content for shadow DOM elements.\n   * For elements with shadow DOM that contain slots, this returns the assigned\n   * elements (slotted content) instead of just the shadow DOM children.\n   */\n  #getChildrenIncludingSlotted(element: Element): Element[] {\n    // If element has shadowRoot with slots, get assigned elements\n    if (element.shadowRoot) {\n      const slots = element.shadowRoot.querySelectorAll('slot');\n      if (slots.length > 0) {\n        const assignedElements: Element[] = [];\n        for (const slot of slots) {\n          assignedElements.push(...slot.assignedElements());\n        }\n        // Also include shadow DOM children that aren't slots (for mixed content)\n        for (const child of element.shadowRoot.children) {\n          if (child.tagName !== 'SLOT') {\n            assignedElements.push(child);\n          }\n        }\n        return assignedElements;\n      }\n    }\n    \n    // Fallback to regular children\n    return Array.from(element.children);\n  }\n\n  /**\n   * Check if a render is currently in progress.\n   */\n  get isRendering(): boolean {\n    return this.#renderInProgress;\n  }\n}\n\n/**\n * Default frame state for elements that don't need special handling.\n * Use this for simple elements that are always ready.\n */\nexport const DEFAULT_FRAME_STATE: FrameState = {\n  needsPreparation: false,\n  isReady: true,\n  priority: PRIORITY_DEFAULT,\n};\n\n/**\n * Helper to create a FrameRenderable mixin for elements.\n * Provides default implementations that can be overridden.\n */\nexport function createFrameRenderableMixin<T extends { new (...args: any[]): HTMLElement }>(\n  Base: T\n) {\n  return class FrameRenderableMixin extends Base implements FrameRenderable {\n    getFrameState(_timeMs: number): FrameState {\n      return DEFAULT_FRAME_STATE;\n    }\n\n    async prepareFrame(_timeMs: number, _signal: AbortSignal): Promise<void> {\n      // Default: no preparation needed\n    }\n\n    renderFrame(_timeMs: number): void {\n      // Default: no explicit render needed\n    }\n  };\n}\n\n// ============================================================================\n// Shared Frame Task Wrapper\n// ============================================================================\n// Creates a backwards-compatible frameTask object from a FrameRenderable element.\n// This eliminates duplicate boilerplate code across all temporal elements.\n// ============================================================================\n\n/**\n * Interface for the legacy frameTask object.\n * Used for backwards compatibility with code expecting the old Task-like API.\n */\nexport interface FrameTask {\n  /**\n   * Run the frame task (prepare + render).\n   * @returns Promise that resolves when the task completes\n   */\n  run(): Promise<void>;\n\n  /**\n   * Promise that resolves when the current task completes.\n   */\n  taskComplete: Promise<void>;\n}\n\n/**\n * Options for creating a frame task wrapper.\n */\nexport interface FrameTaskWrapperOptions {\n  /**\n   * Function to get the current time in milliseconds.\n   * Default uses element's ownCurrentTimeMs if available, otherwise 0.\n   */\n  getTimeMs?: () => number;\n}\n\n/**\n * Create a backwards-compatible frameTask wrapper for a FrameRenderable element.\n * \n * This factory function creates a frameTask object that:\n * - Manages its own AbortController for cancellation\n * - Calls prepareFrame() then renderFrame() in sequence\n * - Silently ignores AbortErrors (expected during cancellation)\n * - Provides taskComplete promise for awaiting completion\n * \n * @param element - The element implementing FrameRenderable\n * @param options - Optional configuration\n * @returns A frameTask object compatible with legacy code\n * \n * @example\n * ```typescript\n * class MyElement extends LitElement implements FrameRenderable {\n *   frameTask = createFrameTaskWrapper(this, {\n *     getTimeMs: () => this.currentSourceTimeMs,\n *   });\n * \n *   getFrameState(timeMs: number): FrameState { ... }\n *   async prepareFrame(timeMs: number, signal: AbortSignal): Promise<void> { ... }\n *   renderFrame(timeMs: number): void { ... }\n * }\n * ```\n */\nexport function createFrameTaskWrapper(\n  element: FrameRenderable & { ownCurrentTimeMs?: number; desiredSeekTimeMs?: number },\n  options: FrameTaskWrapperOptions = {}\n): FrameTask {\n  let frameTaskPromise: Promise<void> = Promise.resolve();\n\n  const getTimeMs = options.getTimeMs ?? (() => {\n    // Try desiredSeekTimeMs first (video), then ownCurrentTimeMs, then 0\n    if (\"desiredSeekTimeMs\" in element && typeof element.desiredSeekTimeMs === \"number\") {\n      return element.desiredSeekTimeMs;\n    }\n    if (\"ownCurrentTimeMs\" in element && typeof element.ownCurrentTimeMs === \"number\") {\n      return element.ownCurrentTimeMs;\n    }\n    return 0;\n  });\n\n  const taskObj: FrameTask = {\n    run: () => {\n      const abortController = new AbortController();\n      const timeMs = getTimeMs();\n      \n      frameTaskPromise = (async () => {\n        try {\n          await element.prepareFrame(timeMs, abortController.signal);\n          element.renderFrame(timeMs);\n        } catch (error) {\n          // Silently ignore AbortErrors - expected when task is cancelled\n          if (error instanceof DOMException && error.name === \"AbortError\") {\n            return;\n          }\n          throw error;\n        }\n      })();\n      \n      taskObj.taskComplete = frameTaskPromise;\n      return frameTaskPromise;\n    },\n    taskComplete: Promise.resolve(),\n  };\n  return taskObj;\n}\n"],"mappings":"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"}

package/dist/preview/RenderContext.d.ts

@@ -0,0 +1 @@
+import "../elements/EFVideo.js";

package/dist/preview/RenderContext.js

@@ -0,0 +1,193 @@
+import { LRUCache } from "../utils/LRUCache.js";
+
+//#region src/preview/RenderContext.ts
+/**
+* Check if an element has a renderVersion property.
+*/
+function hasRenderVersion(element) {
+	return "renderVersion" in element && typeof element.renderVersion === "number";
+}
+/**
+* Module-level counter for generating unique element IDs.
+* This ensures uniqueness across all RenderContext instances.
+*/
+let nextElementId = 1;
+/**
+* WeakMap to store unique IDs for elements.
+* Using WeakMap ensures we don't prevent garbage collection of elements.
+* The ID is stable for the lifetime of the element.
+*/
+const elementUniqueIds = /* @__PURE__ */ new WeakMap();
+/**
+* Get or create a unique ID for an element.
+* This guarantees uniqueness even for elements with the same id attribute
+* or no id attribute at all.
+*/
+function getElementUniqueId(element) {
+	let id = elementUniqueIds.get(element);
+	if (id === void 0) {
+		id = nextElementId++;
+		elementUniqueIds.set(element, id);
+	}
+	return id;
+}
+/**
+* RenderContext provides scoped caching for render operations.
+* 
+* Create at the start of a render, dispose when complete:
+* ```typescript
+* const context = new RenderContext();
+* try {
+*   // ... render operations
+* } finally {
+*   context.dispose();
+* }
+* ```
+*/
+var RenderContext = class {
+	/** Cache for static element canvases (ef-image, ef-waveform) */
+	#canvasCache;
+	/** Cache for video frames by source timestamp */
+	#videoFrameCache;
+	/** Whether this context has been disposed */
+	#disposed = false;
+	/** Metrics for monitoring cache effectiveness */
+	#metrics = {
+		canvasCacheHits: 0,
+		canvasCacheMisses: 0,
+		videoFrameCacheHits: 0,
+		videoFrameCacheMisses: 0
+	};
+	constructor(options = {}) {
+		const { maxCanvasCacheSize = 50, maxVideoFrameCacheSize = 100 } = options;
+		this.#canvasCache = new LRUCache(maxCanvasCacheSize);
+		this.#videoFrameCache = new LRUCache(maxVideoFrameCacheSize);
+	}
+	/**
+	* Check if the context has been disposed.
+	*/
+	get disposed() {
+		return this.#disposed;
+	}
+	/**
+	* Get cache metrics for monitoring.
+	*/
+	get metrics() {
+		return { ...this.#metrics };
+	}
+	/**
+	* Generate a cache key for a static element.
+	* Uses a unique element ID (via WeakMap) to ensure uniqueness even if
+	* multiple elements have the same id attribute.
+	* Returns null if the element doesn't support caching (no renderVersion).
+	*/
+	#getCanvasCacheKey(element) {
+		if (!hasRenderVersion(element)) return null;
+		return `canvas:${getElementUniqueId(element)}:${element.renderVersion}`;
+	}
+	/**
+	* Get a cached dataURL for a static element.
+	* Returns undefined if not cached or element doesn't support caching.
+	*/
+	getCachedCanvasDataUrl(element) {
+		if (this.#disposed) return void 0;
+		const key = this.#getCanvasCacheKey(element);
+		if (!key) return void 0;
+		const cached = this.#canvasCache.get(key);
+		if (cached) this.#metrics.canvasCacheHits++;
+		else this.#metrics.canvasCacheMisses++;
+		return cached;
+	}
+	/**
+	* Cache a dataURL for a static element.
+	* Does nothing if the element doesn't support caching.
+	*/
+	setCachedCanvasDataUrl(element, dataUrl) {
+		if (this.#disposed) return;
+		const key = this.#getCanvasCacheKey(element);
+		if (key) this.#canvasCache.set(key, dataUrl);
+	}
+	/**
+	* Generate a cache key for a video frame.
+	* Uses a unique element ID (via WeakMap) to ensure uniqueness even if
+	* multiple videos have the same id attribute.
+	*/
+	#getVideoFrameCacheKey(videoElement, sourceTimeMs) {
+		return `video:${getElementUniqueId(videoElement)}:${Math.round(sourceTimeMs)}`;
+	}
+	/**
+	* Get a cached video frame.
+	* Returns undefined if not cached.
+	*/
+	getCachedVideoFrame(videoElement, sourceTimeMs) {
+		if (this.#disposed) return void 0;
+		const key = this.#getVideoFrameCacheKey(videoElement, sourceTimeMs);
+		const cached = this.#videoFrameCache.get(key);
+		if (cached) this.#metrics.videoFrameCacheHits++;
+		else this.#metrics.videoFrameCacheMisses++;
+		return cached;
+	}
+	/**
+	* Cache a video frame.
+	*/
+	setCachedVideoFrame(videoElement, sourceTimeMs, frame) {
+		if (this.#disposed) return;
+		const key = this.#getVideoFrameCacheKey(videoElement, sourceTimeMs);
+		this.#videoFrameCache.set(key, frame);
+	}
+	/**
+	* Convenience method to get or capture a video frame.
+	* Checks cache first, then captures if not cached.
+	* 
+	* @param video - The ef-video element
+	* @param sourceTimeMs - Source media timestamp
+	* @param options - Capture options including quality and signal
+	* @returns The captured frame data
+	*/
+	async getOrCaptureVideoFrame(video, sourceTimeMs, options = {}) {
+		const cached = this.getCachedVideoFrame(video, sourceTimeMs);
+		if (cached) return cached;
+		const frame = await video.captureFrameAtSourceTime(sourceTimeMs, options);
+		this.setCachedVideoFrame(video, sourceTimeMs, frame);
+		return frame;
+	}
+	/**
+	* Dispose the context and clear all caches.
+	* Should be called when rendering is complete.
+	*/
+	dispose() {
+		if (this.#disposed) return;
+		this.#canvasCache.clear();
+		this.#videoFrameCache.clear();
+		this.#disposed = true;
+	}
+	/**
+	* Symbol.dispose implementation for use with the `using` keyword.
+	* 
+	* @example
+	* ```typescript
+	* using context = new RenderContext();
+	* // ... render operations
+	* // context is automatically disposed when scope exits
+	* ```
+	*/
+	[Symbol.dispose]() {
+		this.dispose();
+	}
+	/**
+	* Get the current size of the canvas cache.
+	*/
+	get canvasCacheSize() {
+		return this.#canvasCache.size;
+	}
+	/**
+	* Get the current size of the video frame cache.
+	*/
+	get videoFrameCacheSize() {
+		return this.#videoFrameCache.size;
+	}
+};
+
+//#endregion
+export { RenderContext };
+//# sourceMappingURL=RenderContext.js.map

package/dist/preview/RenderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderContext.js","names":["#canvasCache","#videoFrameCache","#disposed","#metrics","#getCanvasCacheKey","#getVideoFrameCacheKey"],"sources":["../../src/preview/RenderContext.ts"],"sourcesContent":["/**\n * RenderContext manages scoped caches for the rendering pipeline.\n * \n * Used during foreignObject serialization to cache:\n * - Video frames by source timestamp (useful for freeze frames, slow-mo)\n * - Static element canvases by element identity + renderVersion\n * \n * The context should be created at the start of a render operation\n * and disposed when the render completes (success or failure).\n */\n\nimport { LRUCache } from \"../utils/LRUCache.js\";\nimport type { EFVideo } from \"../elements/EFVideo.js\";\n\n/**\n * Check if an element has a renderVersion property.\n */\nfunction hasRenderVersion(element: Element): element is Element & { renderVersion: number } {\n  return \"renderVersion\" in element && typeof (element as any).renderVersion === \"number\";\n}\n\n/**\n * Module-level counter for generating unique element IDs.\n * This ensures uniqueness across all RenderContext instances.\n */\nlet nextElementId = 1;\n\n/**\n * WeakMap to store unique IDs for elements.\n * Using WeakMap ensures we don't prevent garbage collection of elements.\n * The ID is stable for the lifetime of the element.\n */\nconst elementUniqueIds = new WeakMap<Element, number>();\n\n/**\n * Get or create a unique ID for an element.\n * This guarantees uniqueness even for elements with the same id attribute\n * or no id attribute at all.\n */\nfunction getElementUniqueId(element: Element): number {\n  let id = elementUniqueIds.get(element);\n  if (id === undefined) {\n    id = nextElementId++;\n    elementUniqueIds.set(element, id);\n  }\n  return id;\n}\n\n/**\n * Result of capturing a video frame.\n */\nexport interface CapturedFrame {\n  dataUrl: string;\n  width: number;\n  height: number;\n}\n\n/**\n * Options for creating a RenderContext.\n */\nexport interface RenderContextOptions {\n  /** Maximum number of canvas dataURLs to cache (default: 50) */\n  maxCanvasCacheSize?: number;\n  /** Maximum number of video frame dataURLs to cache (default: 100) */\n  maxVideoFrameCacheSize?: number;\n}\n\n/**\n * RenderContext provides scoped caching for render operations.\n * \n * Create at the start of a render, dispose when complete:\n * ```typescript\n * const context = new RenderContext();\n * try {\n *   // ... render operations\n * } finally {\n *   context.dispose();\n * }\n * ```\n */\nexport class RenderContext {\n  /** Cache for static element canvases (ef-image, ef-waveform) */\n  #canvasCache: LRUCache<string, string>;\n  \n  /** Cache for video frames by source timestamp */\n  #videoFrameCache: LRUCache<string, CapturedFrame>;\n  \n  /** Whether this context has been disposed */\n  #disposed = false;\n  \n  /** Metrics for monitoring cache effectiveness */\n  #metrics = {\n    canvasCacheHits: 0,\n    canvasCacheMisses: 0,\n    videoFrameCacheHits: 0,\n    videoFrameCacheMisses: 0,\n  };\n\n  constructor(options: RenderContextOptions = {}) {\n    const { maxCanvasCacheSize = 50, maxVideoFrameCacheSize = 100 } = options;\n    this.#canvasCache = new LRUCache(maxCanvasCacheSize);\n    this.#videoFrameCache = new LRUCache(maxVideoFrameCacheSize);\n  }\n\n  /**\n   * Check if the context has been disposed.\n   */\n  get disposed(): boolean {\n    return this.#disposed;\n  }\n\n  /**\n   * Get cache metrics for monitoring.\n   */\n  get metrics() {\n    return { ...this.#metrics };\n  }\n\n  // ============================================================================\n  // Static Element Cache (ef-image, ef-waveform)\n  // ============================================================================\n\n  /**\n   * Generate a cache key for a static element.\n   * Uses a unique element ID (via WeakMap) to ensure uniqueness even if\n   * multiple elements have the same id attribute.\n   * Returns null if the element doesn't support caching (no renderVersion).\n   */\n  #getCanvasCacheKey(element: Element): string | null {\n    if (!hasRenderVersion(element)) {\n      return null;\n    }\n    // Use unique element ID + render version for guaranteed uniqueness\n    const uniqueId = getElementUniqueId(element);\n    return `canvas:${uniqueId}:${element.renderVersion}`;\n  }\n\n  /**\n   * Get a cached dataURL for a static element.\n   * Returns undefined if not cached or element doesn't support caching.\n   */\n  getCachedCanvasDataUrl(element: Element): string | undefined {\n    if (this.#disposed) return undefined;\n    \n    const key = this.#getCanvasCacheKey(element);\n    if (!key) return undefined;\n    \n    const cached = this.#canvasCache.get(key);\n    if (cached) {\n      this.#metrics.canvasCacheHits++;\n    } else {\n      this.#metrics.canvasCacheMisses++;\n    }\n    return cached;\n  }\n\n  /**\n   * Cache a dataURL for a static element.\n   * Does nothing if the element doesn't support caching.\n   */\n  setCachedCanvasDataUrl(element: Element, dataUrl: string): void {\n    if (this.#disposed) return;\n    \n    const key = this.#getCanvasCacheKey(element);\n    if (key) {\n      this.#canvasCache.set(key, dataUrl);\n    }\n  }\n\n  // ============================================================================\n  // Video Frame Cache\n  // ============================================================================\n\n  /**\n   * Generate a cache key for a video frame.\n   * Uses a unique element ID (via WeakMap) to ensure uniqueness even if\n   * multiple videos have the same id attribute.\n   */\n  #getVideoFrameCacheKey(videoElement: Element, sourceTimeMs: number): string {\n    const uniqueId = getElementUniqueId(videoElement);\n    // Round to nearest ms to avoid floating point issues\n    const roundedTime = Math.round(sourceTimeMs);\n    return `video:${uniqueId}:${roundedTime}`;\n  }\n\n  /**\n   * Get a cached video frame.\n   * Returns undefined if not cached.\n   */\n  getCachedVideoFrame(videoElement: Element, sourceTimeMs: number): CapturedFrame | undefined {\n    if (this.#disposed) return undefined;\n    \n    const key = this.#getVideoFrameCacheKey(videoElement, sourceTimeMs);\n    const cached = this.#videoFrameCache.get(key);\n    if (cached) {\n      this.#metrics.videoFrameCacheHits++;\n    } else {\n      this.#metrics.videoFrameCacheMisses++;\n    }\n    return cached;\n  }\n\n  /**\n   * Cache a video frame.\n   */\n  setCachedVideoFrame(videoElement: Element, sourceTimeMs: number, frame: CapturedFrame): void {\n    if (this.#disposed) return;\n    \n    const key = this.#getVideoFrameCacheKey(videoElement, sourceTimeMs);\n    this.#videoFrameCache.set(key, frame);\n  }\n\n  /**\n   * Convenience method to get or capture a video frame.\n   * Checks cache first, then captures if not cached.\n   * \n   * @param video - The ef-video element\n   * @param sourceTimeMs - Source media timestamp\n   * @param options - Capture options including quality and signal\n   * @returns The captured frame data\n   */\n  async getOrCaptureVideoFrame(\n    video: EFVideo,\n    sourceTimeMs: number,\n    options: {\n      quality?: \"auto\" | \"scrub\" | \"main\";\n      signal?: AbortSignal;\n    } = {}\n  ): Promise<CapturedFrame> {\n    // Check cache first\n    const cached = this.getCachedVideoFrame(video, sourceTimeMs);\n    if (cached) {\n      return cached;\n    }\n\n    // Capture frame using direct API\n    const frame = await video.captureFrameAtSourceTime(sourceTimeMs, options);\n    \n    // Cache for future use\n    this.setCachedVideoFrame(video, sourceTimeMs, frame);\n    \n    return frame;\n  }\n\n  // ============================================================================\n  // Cleanup\n  // ============================================================================\n\n  /**\n   * Dispose the context and clear all caches.\n   * Should be called when rendering is complete.\n   */\n  dispose(): void {\n    if (this.#disposed) return;\n    \n    this.#canvasCache.clear();\n    this.#videoFrameCache.clear();\n    this.#disposed = true;\n  }\n\n  /**\n   * Symbol.dispose implementation for use with the `using` keyword.\n   * \n   * @example\n   * ```typescript\n   * using context = new RenderContext();\n   * // ... render operations\n   * // context is automatically disposed when scope exits\n   * ```\n   */\n  [Symbol.dispose](): void {\n    this.dispose();\n  }\n\n  /**\n   * Get the current size of the canvas cache.\n   */\n  get canvasCacheSize(): number {\n    return this.#canvasCache.size;\n  }\n\n  /**\n   * Get the current size of the video frame cache.\n   */\n  get videoFrameCacheSize(): number {\n    return this.#videoFrameCache.size;\n  }\n}\n"],"mappings":";;;;;;AAiBA,SAAS,iBAAiB,SAAkE;AAC1F,QAAO,mBAAmB,WAAW,OAAQ,QAAgB,kBAAkB;;;;;;AAOjF,IAAI,gBAAgB;;;;;;AAOpB,MAAM,mCAAmB,IAAI,SAA0B;;;;;;AAOvD,SAAS,mBAAmB,SAA0B;CACpD,IAAI,KAAK,iBAAiB,IAAI,QAAQ;AACtC,KAAI,OAAO,QAAW;AACpB,OAAK;AACL,mBAAiB,IAAI,SAAS,GAAG;;AAEnC,QAAO;;;;;;;;;;;;;;;AAmCT,IAAa,gBAAb,MAA2B;;CAEzB;;CAGA;;CAGA,YAAY;;CAGZ,WAAW;EACT,iBAAiB;EACjB,mBAAmB;EACnB,qBAAqB;EACrB,uBAAuB;EACxB;CAED,YAAY,UAAgC,EAAE,EAAE;EAC9C,MAAM,EAAE,qBAAqB,IAAI,yBAAyB,QAAQ;AAClE,QAAKA,cAAe,IAAI,SAAS,mBAAmB;AACpD,QAAKC,kBAAmB,IAAI,SAAS,uBAAuB;;;;;CAM9D,IAAI,WAAoB;AACtB,SAAO,MAAKC;;;;;CAMd,IAAI,UAAU;AACZ,SAAO,EAAE,GAAG,MAAKC,SAAU;;;;;;;;CAa7B,mBAAmB,SAAiC;AAClD,MAAI,CAAC,iBAAiB,QAAQ,CAC5B,QAAO;AAIT,SAAO,UADU,mBAAmB,QAAQ,CAClB,GAAG,QAAQ;;;;;;CAOvC,uBAAuB,SAAsC;AAC3D,MAAI,MAAKD,SAAW,QAAO;EAE3B,MAAM,MAAM,MAAKE,kBAAmB,QAAQ;AAC5C,MAAI,CAAC,IAAK,QAAO;EAEjB,MAAM,SAAS,MAAKJ,YAAa,IAAI,IAAI;AACzC,MAAI,OACF,OAAKG,QAAS;MAEd,OAAKA,QAAS;AAEhB,SAAO;;;;;;CAOT,uBAAuB,SAAkB,SAAuB;AAC9D,MAAI,MAAKD,SAAW;EAEpB,MAAM,MAAM,MAAKE,kBAAmB,QAAQ;AAC5C,MAAI,IACF,OAAKJ,YAAa,IAAI,KAAK,QAAQ;;;;;;;CAavC,uBAAuB,cAAuB,cAA8B;AAI1E,SAAO,SAHU,mBAAmB,aAAa,CAGxB,GADL,KAAK,MAAM,aAAa;;;;;;CAQ9C,oBAAoB,cAAuB,cAAiD;AAC1F,MAAI,MAAKE,SAAW,QAAO;EAE3B,MAAM,MAAM,MAAKG,sBAAuB,cAAc,aAAa;EACnE,MAAM,SAAS,MAAKJ,gBAAiB,IAAI,IAAI;AAC7C,MAAI,OACF,OAAKE,QAAS;MAEd,OAAKA,QAAS;AAEhB,SAAO;;;;;CAMT,oBAAoB,cAAuB,cAAsB,OAA4B;AAC3F,MAAI,MAAKD,SAAW;EAEpB,MAAM,MAAM,MAAKG,sBAAuB,cAAc,aAAa;AACnE,QAAKJ,gBAAiB,IAAI,KAAK,MAAM;;;;;;;;;;;CAYvC,MAAM,uBACJ,OACA,cACA,UAGI,EAAE,EACkB;EAExB,MAAM,SAAS,KAAK,oBAAoB,OAAO,aAAa;AAC5D,MAAI,OACF,QAAO;EAIT,MAAM,QAAQ,MAAM,MAAM,yBAAyB,cAAc,QAAQ;AAGzE,OAAK,oBAAoB,OAAO,cAAc,MAAM;AAEpD,SAAO;;;;;;CAWT,UAAgB;AACd,MAAI,MAAKC,SAAW;AAEpB,QAAKF,YAAa,OAAO;AACzB,QAAKC,gBAAiB,OAAO;AAC7B,QAAKC,WAAY;;;;;;;;;;;;CAanB,CAAC,OAAO,WAAiB;AACvB,OAAK,SAAS;;;;;CAMhB,IAAI,kBAA0B;AAC5B,SAAO,MAAKF,YAAa;;;;;CAM3B,IAAI,sBAA8B;AAChC,SAAO,MAAKC,gBAAiB"}

package/dist/preview/encoding/canvasEncoder.js

@@ -0,0 +1,166 @@
+import { logger } from "../logger.js";
+import { WorkerPool } from "../workers/WorkerPool.js";
+import { getEncoderWorkerUrl } from "../workers/encoderWorkerInline.js";
+import { encodeCanvasOnMainThread } from "./mainThreadEncoder.js";
+import { encodeCanvasInWorker } from "./workerEncoder.js";
+
+//#region src/preview/encoding/canvasEncoder.ts
+let _workerPool = null;
+let _workerPoolWarningLogged = false;
+/**
+* Get or create the worker pool for canvas encoding.
+* Returns null if workers are not available.
+*/
+function getWorkerPool() {
+	if (_workerPool) return _workerPool;
+	if (typeof Worker === "undefined" || typeof OffscreenCanvas === "undefined" || typeof createImageBitmap === "undefined") {
+		if (!_workerPoolWarningLogged) {
+			_workerPoolWarningLogged = true;
+			logger.warn("[canvasEncoder] Web Workers or OffscreenCanvas not available, using main thread fallback");
+		}
+		return null;
+	}
+	try {
+		_workerPool = new WorkerPool(getEncoderWorkerUrl());
+		if (!_workerPool.isAvailable()) {
+			const reason = _workerPool.workerCount === 0 ? "no workers created (check console for errors)" : "workers not available";
+			_workerPool = null;
+			if (!_workerPoolWarningLogged) {
+				_workerPoolWarningLogged = true;
+				logger.warn(`[canvasEncoder] Worker pool initialization failed (${reason}), using main thread fallback`);
+			}
+		}
+	} catch (error) {
+		_workerPool = null;
+		if (!_workerPoolWarningLogged) {
+			_workerPoolWarningLogged = true;
+			const errorMessage = error instanceof Error ? error.message : String(error);
+			logger.warn(`[canvasEncoder] Failed to create worker pool: ${errorMessage} - using main thread fallback`);
+		}
+	}
+	return _workerPool;
+}
+/**
+* Check if an element is an EFVideo.
+*/
+function isEFVideo(element) {
+	return element.tagName === "EF-VIDEO";
+}
+/**
+* Check if an element is an EFSurface.
+*/
+function isEFSurface(element) {
+	return element.tagName === "EF-SURFACE";
+}
+/**
+* Encode canvases to data URLs in parallel using worker pool.
+* Falls back to main thread encoding if workers are unavailable.
+* 
+* When RenderContext and sourceMap are provided:
+* - Checks cache for static elements (ef-image, ef-waveform)
+* - Uses direct capture API for ef-video elements
+* - Shares cached frames for ef-surface elements targeting ef-video
+* 
+* @param canvases - Array of canvases to encode
+* @param options - Encoding options including optional renderContext and sourceMap
+* @returns Promise resolving to array of encoded results
+*/
+async function encodeCanvasesInParallel(canvases, options = {}) {
+	const { scale: canvasScale = 1, renderContext, sourceMap } = options;
+	const workerPool = getWorkerPool();
+	const encodeCanvas = async (canvas) => {
+		try {
+			if (canvas.width === 0 || canvas.height === 0) return null;
+			const preserveAlpha = canvas.dataset.preserveAlpha === "true";
+			const sourceElement = sourceMap?.get(canvas);
+			if (renderContext && sourceElement) {
+				if (isEFVideo(sourceElement)) {
+					const sourceTimeMs = sourceElement.currentSourceTimeMs;
+					try {
+						return {
+							canvas,
+							dataUrl: (await sourceElement.captureFrameAtSourceTime(sourceTimeMs, { quality: "main" })).dataUrl,
+							preserveAlpha: false
+						};
+					} catch (e) {
+						logger.warn("[canvasEncoder] Direct capture failed, falling back to canvas encoding:", e);
+					}
+				}
+				if (isEFSurface(sourceElement)) {
+					const target = sourceElement.targetElement;
+					if (target && isEFVideo(target)) {
+						const videoTarget = target;
+						const sourceTimeMs = videoTarget.currentSourceTimeMs;
+						const cached = renderContext.getCachedVideoFrame(videoTarget, sourceTimeMs);
+						if (cached) return {
+							canvas,
+							dataUrl: cached.dataUrl,
+							preserveAlpha: false
+						};
+						try {
+							const frame = await videoTarget.captureFrameAtSourceTime(sourceTimeMs, { quality: "main" });
+							renderContext.setCachedVideoFrame(videoTarget, sourceTimeMs, frame);
+							return {
+								canvas,
+								dataUrl: frame.dataUrl,
+								preserveAlpha: false
+							};
+						} catch (e) {
+							logger.warn("[canvasEncoder] Direct capture for surface target failed:", e);
+						}
+					}
+				}
+				const cachedDataUrl = renderContext.getCachedCanvasDataUrl(sourceElement);
+				if (cachedDataUrl) return {
+					canvas,
+					dataUrl: cachedDataUrl,
+					preserveAlpha
+				};
+			}
+			let sourceCanvas = canvas;
+			if (canvasScale < 1) {
+				const scaledWidth = Math.floor(canvas.width * canvasScale);
+				const scaledHeight = Math.floor(canvas.height * canvasScale);
+				const scaledCanvas = document.createElement("canvas");
+				scaledCanvas.width = scaledWidth;
+				scaledCanvas.height = scaledHeight;
+				const scaledCtx = scaledCanvas.getContext("2d");
+				if (scaledCtx) {
+					scaledCtx.drawImage(canvas, 0, 0, scaledWidth, scaledHeight);
+					sourceCanvas = scaledCanvas;
+				}
+			}
+			let dataUrl;
+			if (workerPool) dataUrl = await workerPool.execute((worker) => encodeCanvasInWorker(worker, sourceCanvas, preserveAlpha));
+			else {
+				const encoded = encodeCanvasOnMainThread(sourceCanvas, canvasScale);
+				if (!encoded) return null;
+				dataUrl = encoded.dataUrl;
+			}
+			if (renderContext && sourceElement) renderContext.setCachedCanvasDataUrl(sourceElement, dataUrl);
+			return {
+				canvas,
+				dataUrl,
+				preserveAlpha
+			};
+		} catch (error) {
+			logger.warn("[canvasEncoder] Worker encoding failed, using main thread fallback:", error);
+			const encoded = encodeCanvasOnMainThread(canvas, canvasScale);
+			if (encoded) {
+				logger.warn("[canvasEncoder] Main thread fallback succeeded");
+				return {
+					canvas,
+					...encoded
+				};
+			}
+			logger.warn("[canvasEncoder] Main thread encoding also failed, skipping canvas:", error);
+			return null;
+		}
+	};
+	const encodingTasks = canvases.map(encodeCanvas);
+	return (await Promise.all(encodingTasks)).filter((r) => r !== null);
+}
+
+//#endregion
+export { encodeCanvasesInParallel };
+//# sourceMappingURL=canvasEncoder.js.map