@editframe/elements 0.37.3-beta → 0.38.1

package/dist/preview/renderTimegroupToCanvas.js

@@ -1,13 +1,15 @@
 import { FrameController } from "./FrameController.js";
+import { updateAnimations } from "../elements/updateAnimations.js";
 import { logger } from "./logger.js";
-import { DEFAULT_BLOCKING_TIMEOUT_MS, DEFAULT_HEIGHT, DEFAULT_THUMBNAIL_SCALE, DEFAULT_WIDTH, createPreviewContainer, isVisibleAtTime } from "./previewTypes.js";
-import { buildCloneStructure, collectDocumentStyles, overrideRootCloneStyles, removeHiddenNodesForSerialization, restoreHiddenNodes } from "./renderTimegroupPreview.js";
-import { getEffectiveRenderMode } from "./renderers.js";
 import { RenderContext } from "./RenderContext.js";
+import { DEFAULT_BLOCKING_TIMEOUT_MS, DEFAULT_CAPTURE_SCALE, DEFAULT_HEIGHT, DEFAULT_WIDTH, isVisibleAtTime } from "./previewTypes.js";
+import { captureTimelineToDataUri } from "./rendering/serializeTimelineDirect.js";
+import { getRenderMode, isNativeCanvasApiAvailable } from "./previewSettings.js";
+import { getEffectiveRenderMode, isCanvas, isImage } from "./renderers.js";
 import { defaultProfiler } from "./RenderProfiler.js";
+import { loadImageFromDataUri } from "./rendering/loadImage.js";
 import { createDprCanvas, renderToImageNative } from "./rendering/renderToImageNative.js";
-import { clearInlineImageCache } from "./rendering/inlineImages.js";
-import { loadImageFromDataUri, renderToImage } from "./rendering/renderToImage.js";
+import { clearInlineImageCache, getInlineImageCacheSize } from "./rendering/inlineImages.js";
 
 //#region src/preview/renderTimegroupToCanvas.ts
 /** Number of rows to sample when checking canvas content */
@@ -40,6 +42,20 @@ const renderState = {
 	}
 };
 /**
+* Get the current render state for testing and debugging.
+* @returns The module-level render state object
+*/
+function getRenderState() {
+	return renderState;
+}
+/**
+* Get cache metrics for monitoring performance.
+* @returns Object with cache hit/miss/eviction counts
+*/
+function getCacheMetrics() {
+	return { ...renderState.metrics };
+}
+/**
 * Reset cache metrics to zero.
 */
 function resetCacheMetrics() {
@@ -57,37 +73,34 @@ function resetRenderState() {
 	resetCacheMetrics();
 }
 /**
-* Create a debug label for showing render info.
+* DEBUG: Capture a single thumbnail at the current time.
+* Call from console: window.debugCaptureThumbnail()
 */
-function createDebugLabel() {
-	const debugLabel = document.createElement("div");
-	debugLabel.style.cssText = `
-    position: absolute;
-    top: -24px;
-    left: 0;
-    padding: 2px 8px;
-    font: bold 12px monospace;
-    background: rgba(0, 0, 0, 0.8);
-    border-radius: 3px;
-    white-space: nowrap;
-    z-index: 1000;
-    pointer-events: none;
-  `;
-	return debugLabel;
-}
-/**
-* Update debug label with resolution info.
-*/
-function updateDebugLabel(label, renderWidth, renderHeight, resolutionScale) {
-	const scaleColors = {
-		1: "#00ff00",
-		.75: "#ffff00",
-		.5: "#ff8800",
-		.25: "#ff0000"
-	};
-	label.style.color = scaleColors[resolutionScale] || "#ffffff";
-	label.textContent = `Render: ${renderWidth}x${renderHeight} (${Math.round(resolutionScale * 100)}%)`;
-}
+if (typeof window !== "undefined") window.debugCaptureThumbnail = async function() {
+	const timegroup = document.querySelector("ef-timegroup");
+	if (!timegroup) {
+		console.error("No timegroup found");
+		return;
+	}
+	const currentTime = timegroup.currentTimeMs ?? 0;
+	try {
+		const result = await captureTimegroupAtTime(timegroup, {
+			timeMs: currentTime,
+			scale: .25,
+			contentReadyMode: "blocking",
+			blockingTimeoutMs: 1e3
+		});
+		const img = document.createElement("img");
+		if (result instanceof HTMLCanvasElement) img.src = result.toDataURL();
+		else if (result instanceof HTMLImageElement) img.src = result.src;
+		img.style.cssText = "position:fixed;top:10px;right:10px;border:2px solid red;z-index:99999;";
+		document.body.appendChild(img);
+		return result;
+	} catch (err) {
+		console.error("[DEBUG] Capture failed:", err);
+		throw err;
+	}
+};
 /**
 * Wait for next animation frame (allows browser to complete layout)
 */
@@ -99,7 +112,7 @@ function waitForFrame() {
 * Returns true if there's ANY non-transparent pixel.
 */
 function canvasHasContent(canvas) {
-	const ctx = canvas.getContext("2d");
+	const ctx = canvas.getContext("2d", { willReadFrequently: true });
 	if (!ctx) return false;
 	try {
 		const width = canvas.width;
@@ -167,101 +180,192 @@ async function waitForVideoContent(timegroup, timeMs, maxWaitMs) {
 /**
 * Captures a frame from an already-seeked render clone.
 * Used internally by captureBatch for efficiency (reuses one clone across all captures).
-* 
+*
 * @param renderClone - A render clone that has already been seeked to the target time
 * @param renderContainer - The container holding the render clone (from createRenderClone)
 * @param options - Capture options
-* @returns Canvas with the rendered frame
+* @returns Canvas or Image with the rendered frame (both are CanvasImageSource)
 */
-async function captureFromClone(renderClone, renderContainer, options = {}) {
-	const { scale = DEFAULT_THUMBNAIL_SCALE, contentReadyMode = "immediate", blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS, originalTimegroup } = options;
+async function captureFromClone(renderClone, _renderContainer, options = {}) {
+	const { scale = DEFAULT_CAPTURE_SCALE, contentReadyMode = "immediate", blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS, originalTimegroup, timeMs: explicitTimeMs, canvasMode } = options;
+	const timeMs = explicitTimeMs ?? renderClone.currentTimeMs;
 	const sourceForDimensions = originalTimegroup ?? renderClone;
 	const width = sourceForDimensions.offsetWidth || DEFAULT_WIDTH;
 	const height = sourceForDimensions.offsetHeight || DEFAULT_HEIGHT;
-	const dpr = window.devicePixelRatio || 1;
-	const canvas = document.createElement("canvas");
-	canvas.width = Math.floor(width * scale * dpr);
-	canvas.height = Math.floor(height * scale * dpr);
-	canvas.style.width = `${Math.floor(width * scale)}px`;
-	canvas.style.height = `${Math.floor(height * scale)}px`;
-	const ctx = canvas.getContext("2d");
-	if (!ctx) throw new Error("Failed to get canvas 2d context");
-	const timeMs = renderClone.currentTimeMs;
 	if (contentReadyMode === "blocking") {
 		const result = await waitForVideoContent(renderClone, timeMs, blockingTimeoutMs);
 		if (!result.ready) throw new ContentNotReadyError(timeMs, blockingTimeoutMs, result.blankVideos);
 	}
+	const effectiveCanvasMode = (() => {
+		if (!canvasMode) return "foreignObject";
+		if (canvasMode === "native" && !isNativeCanvasApiAvailable()) {
+			logger.debug("[captureFromClone] Native canvas mode requested but not available, falling back to foreignObject");
+			return "foreignObject";
+		}
+		return canvasMode;
+	})();
 	const renderContext = new RenderContext();
 	try {
-		let image;
-		if (getEffectiveRenderMode() === "native") {
-			renderContainer.style.cssText = `
-        position: fixed;
-        left: 0;
-        top: 0;
-        width: ${width}px;
-        height: ${height}px;
-        pointer-events: none;
-        overflow: hidden;
-      `;
-			image = await renderToImageNative(renderContainer, width, height, { skipDprScaling: true });
+		if (effectiveCanvasMode === "native") {
+			const t0 = performance.now();
+			const canvas = await renderToImageNative(renderClone, width, height, { skipDprScaling: true });
+			const renderTime = performance.now() - t0;
+			logger.debug(`[captureFromClone] native render=${renderTime.toFixed(0)}ms (canvasScale=${scale})`);
+			return canvas;
 		} else {
 			const t0 = performance.now();
-			const { container: container$1, syncState } = buildCloneStructure(renderClone, timeMs);
-			const buildTime = performance.now() - t0;
-			const bgSource = originalTimegroup ?? renderClone;
-			const previewContainer = createPreviewContainer({
-				width,
-				height,
-				background: getComputedStyle(bgSource).background || "#000"
-			});
-			const t1 = performance.now();
-			const styleEl = document.createElement("style");
-			styleEl.textContent = collectDocumentStyles();
-			const stylesTime = performance.now() - t1;
-			previewContainer.appendChild(styleEl);
-			previewContainer.appendChild(container$1);
-			overrideRootCloneStyles(syncState, true);
-			const t2 = performance.now();
-			image = await renderToImage(previewContainer, width, height, {
-				canvasScale: scale,
+			const dataUri = await captureTimelineToDataUri(renderClone, width, height, {
 				renderContext,
-				sourceMap: syncState.canvasSourceMap
+				canvasScale: scale,
+				timeMs
 			});
-			const renderTime = performance.now() - t2;
-			logger.debug(`[captureFromClone] build=${buildTime.toFixed(0)}ms, styles=${stylesTime.toFixed(0)}ms, render=${renderTime.toFixed(0)}ms (canvasScale=${scale})`);
+			const serializeTime = performance.now() - t0;
+			const t1 = performance.now();
+			const image = await loadImageFromDataUri(dataUri);
+			const loadTime = performance.now() - t1;
+			logger.debug(`[captureFromClone] foreignObject serialize=${serializeTime.toFixed(0)}ms, load=${loadTime.toFixed(0)}ms (canvasScale=${scale})`);
+			return image;
 		}
-		const srcWidth = image.width;
-		const srcHeight = image.height;
-		ctx.drawImage(image, 0, 0, srcWidth, srcHeight, 0, 0, canvas.width, canvas.height);
-		return canvas;
 	} finally {
 		renderContext.dispose();
 	}
 }
 /**
 * Captures a single frame from a timegroup at a specific time.
-* 
+*
 * CLONE-TIMELINE ARCHITECTURE:
 * Creates an independent render clone, seeks it to the target time, and captures.
 * Prime-timeline is NEVER seeked - user can continue previewing/editing during capture.
-* 
+*
 * @param timegroup - The source timegroup
 * @param options - Capture options including timeMs, scale, contentReadyMode
 * @returns Canvas with the rendered frame
 * @throws ContentNotReadyError if blocking mode times out waiting for video content
 */
 async function captureTimegroupAtTime(timegroup, options) {
-	const { timeMs, scale = DEFAULT_THUMBNAIL_SCALE, contentReadyMode = "immediate", blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS } = options;
+	const { timeMs, scale = DEFAULT_CAPTURE_SCALE, contentReadyMode = "immediate", blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS, canvasMode, skipClone = false } = options;
+	if (skipClone) {
+		const seekStart = performance.now();
+		await timegroup.seekForRender(timeMs);
+		const seekMs = performance.now() - seekStart;
+		const renderStart = performance.now();
+		const result = await captureFromClone(timegroup, timegroup.parentElement || document.body, {
+			scale,
+			contentReadyMode,
+			blockingTimeoutMs,
+			originalTimegroup: void 0,
+			canvasMode,
+			timeMs
+		});
+		const renderMs = performance.now() - renderStart;
+		if (typeof result === "object" && result !== null) result.__perfTiming = {
+			cloneMs: 0,
+			seekMs,
+			renderMs
+		};
+		return result;
+	}
+	const cloneStart = performance.now();
 	const { clone: renderClone, container: renderContainer, cleanup: cleanupRenderClone } = await timegroup.createRenderClone();
+	const cloneMs = performance.now() - cloneStart;
 	try {
+		const seekStart = performance.now();
 		await renderClone.seekForRender(timeMs);
-		return await captureFromClone(renderClone, renderContainer, {
+		const seekMs = performance.now() - seekStart;
+		const renderStart = performance.now();
+		const result = await captureFromClone(renderClone, renderContainer, {
 			scale,
 			contentReadyMode,
 			blockingTimeoutMs,
-			originalTimegroup: timegroup
+			originalTimegroup: timegroup,
+			canvasMode
 		});
+		const renderMs = performance.now() - renderStart;
+		if (typeof result === "object" && result !== null) result.__perfTiming = {
+			cloneMs,
+			seekMs,
+			renderMs
+		};
+		return result;
+	} finally {
+		cleanupRenderClone();
+	}
+}
+/**
+* Generate thumbnails using an existing render clone and mutable queue.
+* The queue can be modified while generation is in progress.
+*
+* @param renderClone - Pre-created render clone to use
+* @param renderContainer - Container for the render clone
+* @param queue - Mutable queue that provides timestamps
+* @param options - Capture options (scale, contentReadyMode, etc.)
+* @yields Objects with { timeMs, canvas } for each captured thumbnail
+*
+* @example
+* ```ts
+* const queue = new MutableTimestampQueue();
+* queue.reset([0, 100, 200]);
+*
+* for await (const { timeMs, canvas } of generateThumbnailsFromClone(clone, container, queue)) {
+*   cache.set(timeMs, canvas);
+*   // Queue can be modified here while generator continues
+* }
+* ```
+*/
+async function* generateThumbnailsFromClone(renderClone, renderContainer, queue, options = {}) {
+	const { scale = DEFAULT_CAPTURE_SCALE, contentReadyMode = "immediate", blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS, signal } = options;
+	while (true) {
+		if (signal?.aborted) break;
+		const timeMs = queue.shift();
+		if (timeMs === void 0) break;
+		await renderClone.seekForRender(timeMs);
+		if (signal?.aborted) break;
+		yield {
+			timeMs,
+			canvas: await captureFromClone(renderClone, renderContainer, {
+				scale,
+				contentReadyMode,
+				blockingTimeoutMs,
+				timeMs
+			})
+		};
+	}
+}
+/**
+* Generate thumbnails for multiple timestamps efficiently using a single render clone.
+* This avoids the overhead of creating/destroying a clone for each thumbnail.
+*
+* @param timegroup - The timegroup to capture
+* @param timestamps - Array of timestamps to capture (in milliseconds)
+* @param options - Capture options (scale, contentReadyMode, etc.)
+* @param signal - Optional AbortSignal to cancel generation
+* @yields Objects with { timeMs, canvas } for each captured thumbnail
+*
+* @example
+* ```ts
+* for await (const { timeMs, canvas } of generateThumbnails(tg, [0, 100, 200])) {
+*   console.log(`Got thumbnail for ${timeMs}ms`);
+*   thumbnailCache.set(timeMs, canvas);
+* }
+* ```
+*/
+async function* generateThumbnails(timegroup, timestamps, options = {}, signal) {
+	const { scale = DEFAULT_CAPTURE_SCALE, contentReadyMode = "immediate", blockingTimeoutMs = DEFAULT_BLOCKING_TIMEOUT_MS } = options;
+	const { clone: renderClone, container: renderContainer, cleanup: cleanupRenderClone } = await timegroup.createRenderClone();
+	try {
+		for (const timeMs of timestamps) {
+			signal?.throwIfAborted();
+			await renderClone.seekForRender(timeMs);
+			yield {
+				timeMs,
+				canvas: await captureFromClone(renderClone, renderContainer, {
+					scale,
+					contentReadyMode,
+					blockingTimeoutMs,
+					originalTimegroup: timegroup
+				})
+			};
+		}
 	} finally {
 		cleanupRenderClone();
 	}
@@ -282,10 +386,10 @@ function toAbsoluteTime(timegroup, relativeTimeMs) {
 }
 /**
 * Renders a timegroup preview to a canvas using SVG foreignObject.
-* 
+*
 * Captures the prime timeline's current visual state including DOM changes
 * from frame tasks (SVG paths, canvas content, text updates, etc.).
-* 
+*
 * Optimized with:
 * - Passive clone structure rebuilt each frame from prime's current state
 * - Temporal bucketing for time-based culling
@@ -302,7 +406,7 @@ function renderTimegroupToCanvas(timegroup, scaleOrOptions = DEFAULT_PREVIEW_SCA
 	let currentResolutionScale = options.resolutionScale ?? DEFAULT_RESOLUTION_SCALE;
 	const width = timegroup.offsetWidth || DEFAULT_WIDTH;
 	const height = timegroup.offsetHeight || DEFAULT_HEIGHT;
-	const dpr = window.devicePixelRatio || 1;
+	const dpr = (typeof window !== "undefined" ? window.devicePixelRatio : 1) || 1;
 	let renderWidth = Math.floor(width * currentResolutionScale);
 	let renderHeight = Math.floor(height * currentResolutionScale);
 	const canvas = createDprCanvas({
@@ -313,11 +417,7 @@ function renderTimegroupToCanvas(timegroup, scaleOrOptions = DEFAULT_PREVIEW_SCA
 		fullHeight: height,
 		dpr
 	});
-	const wrapperContainer = document.createElement("div");
-	wrapperContainer.style.cssText = "position: relative; display: inline-block;";
-	const debugLabel = createDebugLabel();
-	wrapperContainer.appendChild(debugLabel);
-	wrapperContainer.appendChild(canvas);
+	const wrapperContainer = canvas;
 	const ctx = canvas.getContext("2d");
 	if (!ctx) throw new Error("Failed to get canvas 2d context");
 	let rendering = false;
@@ -325,16 +425,34 @@ function renderTimegroupToCanvas(timegroup, scaleOrOptions = DEFAULT_PREVIEW_SCA
 	let disposed = false;
 	const renderContext = new RenderContext();
 	const frameController = new FrameController(timegroup);
-	const previewContainer = createPreviewContainer({
-		width: renderWidth,
-		height: renderHeight,
-		background: getComputedStyle(timegroup).background || "#000"
-	});
-	const styleEl = document.createElement("style");
-	styleEl.textContent = collectDocumentStyles();
-	previewContainer.appendChild(styleEl);
 	let hasLoggedScale = false;
 	let pendingResolutionScale = null;
+	const useNative = getRenderMode() === "native" && isNativeCanvasApiAvailable();
+	let captureCanvas = null;
+	let captureCtx = null;
+	let originalParent = null;
+	let originalNextSibling = null;
+	let savedClipPath = "";
+	let savedPointerEvents = "";
+	if (useNative) {
+		captureCanvas = document.createElement("canvas");
+		captureCanvas.setAttribute("layoutsubtree", "");
+		captureCanvas.layoutSubtree = true;
+		captureCanvas.width = renderWidth;
+		captureCanvas.height = renderHeight;
+		captureCanvas.style.cssText = `position:fixed;left:0;top:0;width:${width}px;height:${height}px;opacity:0;pointer-events:none;z-index:-9999;`;
+		originalParent = timegroup.parentNode;
+		originalNextSibling = timegroup.nextSibling;
+		savedClipPath = timegroup.style.clipPath;
+		savedPointerEvents = timegroup.style.pointerEvents;
+		timegroup.style.clipPath = "";
+		timegroup.style.pointerEvents = "";
+		captureCanvas.appendChild(timegroup);
+		document.body.appendChild(captureCanvas);
+		captureCtx = captureCanvas.getContext("2d");
+		captureCanvas.offsetHeight;
+		timegroup.offsetHeight;
+	}
 	/**
 	* Apply pending resolution scale changes.
 	* Called at the start of refresh() before rendering, so the old content
@@ -347,12 +465,10 @@ function renderTimegroupToCanvas(timegroup, scaleOrOptions = DEFAULT_PREVIEW_SCA
 		currentResolutionScale = newScale;
 		renderWidth = Math.floor(width * currentResolutionScale);
 		renderHeight = Math.floor(height * currentResolutionScale);
-		previewContainer.style.width = `${renderWidth}px`;
-		previewContainer.style.height = `${renderHeight}px`;
-		if (currentResolutionScale < 1) {
-			container.style.transform = `scale(${currentResolutionScale})`;
-			container.style.transformOrigin = "top left";
-		} else container.style.transform = "";
+		if (captureCanvas) {
+			captureCanvas.width = renderWidth;
+			captureCanvas.height = renderHeight;
+		}
 	};
 	/**
 	* Dynamically change resolution scale without rebuilding clone structure.
@@ -366,52 +482,104 @@ function renderTimegroupToCanvas(timegroup, scaleOrOptions = DEFAULT_PREVIEW_SCA
 		lastTimeMs = -1;
 	};
 	const getResolutionScale = () => pendingResolutionScale ?? currentResolutionScale;
+	let frameCount = 0;
+	let totalFrameControllerMs = 0;
+	let totalCaptureMs = 0;
+	let totalCopyMs = 0;
+	let totalFrameMs = 0;
 	const refresh = async () => {
-		if (rendering || disposed) return;
+		if (disposed) return;
 		const sourceTimeMs = timegroup.currentTimeMs ?? 0;
 		const userTimeMs = timegroup.userTimeMs ?? 0;
 		if (Math.abs(sourceTimeMs - userTimeMs) > TIME_EPSILON_MS) return;
 		if (userTimeMs === lastTimeMs) return;
+		if (rendering) return;
 		lastTimeMs = userTimeMs;
 		rendering = true;
 		applyPendingResolutionChange();
 		if (!hasLoggedScale) {
 			hasLoggedScale = true;
-			const mode = getEffectiveRenderMode();
+			const mode = useNative ? "native" : "foreignObject";
 			logger.debug(`[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}`);
 		}
 		try {
-			await frameController.renderFrame(userTimeMs);
-			const { container: container$1, syncState } = buildCloneStructure(timegroup, toAbsoluteTime(timegroup, userTimeMs));
-			if (currentResolutionScale < 1) {
-				container$1.style.transform = `scale(${currentResolutionScale})`;
-				container$1.style.transformOrigin = "top left";
-			}
-			while (previewContainer.firstChild !== styleEl && previewContainer.firstChild) previewContainer.removeChild(previewContainer.firstChild);
-			previewContainer.appendChild(container$1);
-			overrideRootCloneStyles(syncState);
-			const removedNodes = removeHiddenNodesForSerialization(syncState);
-			const t0 = performance.now();
-			const image = await renderToImage(previewContainer, renderWidth, renderHeight, {
-				canvasScale: currentResolutionScale,
-				renderContext,
-				sourceMap: syncState.canvasSourceMap
+			const tFrame = performance.now();
+			const tFC0 = performance.now();
+			await frameController.renderFrame(userTimeMs, {
+				waitForLitUpdate: false,
+				onAnimationsUpdate: (root) => {
+					updateAnimations(root);
+				}
 			});
-			const renderTime = performance.now() - t0;
-			restoreHiddenNodes(removedNodes);
-			const targetWidth = Math.floor(renderWidth * scale * dpr);
-			const targetHeight = Math.floor(renderHeight * scale * dpr);
-			if (canvas.width !== targetWidth || canvas.height !== targetHeight) {
-				canvas.width = targetWidth;
-				canvas.height = targetHeight;
-			} else ctx.clearRect(0, 0, canvas.width, canvas.height);
-			ctx.save();
-			ctx.scale(dpr * scale, dpr * scale);
-			ctx.drawImage(image, 0, 0);
-			ctx.restore();
-			defaultProfiler.incrementRenderCount();
-			if (defaultProfiler.shouldLogByFrameCount(60)) logger.debug(`[renderTimegroupToCanvas] Frame render: ${renderTime.toFixed(1)}ms (resolutionScale=${currentResolutionScale}, image=${image.width}x${image.height})`);
-			updateDebugLabel(debugLabel, renderWidth, renderHeight, currentResolutionScale);
+			const fcMs = performance.now() - tFC0;
+			const tCapture0 = performance.now();
+			if (useNative && captureCanvas && captureCtx) {
+				if (captureCanvas.width !== width || captureCanvas.height !== height) {
+					captureCtx.save();
+					captureCtx.scale(captureCanvas.width / width, captureCanvas.height / height);
+					captureCtx.drawElementImage(timegroup, 0, 0);
+					captureCtx.restore();
+				} else captureCtx.drawElementImage(timegroup, 0, 0);
+				const captureMs = performance.now() - tCapture0;
+				const tCopy0 = performance.now();
+				const targetWidth = Math.floor(renderWidth * scale * dpr);
+				const targetHeight = Math.floor(renderHeight * scale * dpr);
+				if (canvas.width !== targetWidth || canvas.height !== targetHeight) {
+					canvas.width = targetWidth;
+					canvas.height = targetHeight;
+				} else ctx.clearRect(0, 0, canvas.width, canvas.height);
+				ctx.drawImage(captureCanvas, 0, 0, canvas.width, canvas.height);
+				const copyMs = performance.now() - tCopy0;
+				const frameMs = performance.now() - tFrame;
+				frameCount++;
+				totalFrameControllerMs += fcMs;
+				totalCaptureMs += captureMs;
+				totalCopyMs += copyMs;
+				totalFrameMs += frameMs;
+				defaultProfiler.incrementRenderCount();
+				if (defaultProfiler.shouldLogByFrameCount(60)) {
+					frameCount = 0;
+					totalFrameControllerMs = 0;
+					totalCaptureMs = 0;
+					totalCopyMs = 0;
+					totalFrameMs = 0;
+				}
+			} else {
+				const absoluteTimeMs = toAbsoluteTime(timegroup, userTimeMs);
+				const dataUri = await captureTimelineToDataUri(timegroup, width, height, {
+					renderContext,
+					canvasScale: currentResolutionScale,
+					timeMs: absoluteTimeMs
+				});
+				const captureMs = performance.now() - tCapture0;
+				const tCopy0 = performance.now();
+				const image = await loadImageFromDataUri(dataUri);
+				const copyMs = performance.now() - tCopy0;
+				const targetWidth = Math.floor(renderWidth * scale * dpr);
+				const targetHeight = Math.floor(renderHeight * scale * dpr);
+				if (canvas.width !== targetWidth || canvas.height !== targetHeight) {
+					canvas.width = targetWidth;
+					canvas.height = targetHeight;
+				} else ctx.clearRect(0, 0, canvas.width, canvas.height);
+				ctx.save();
+				ctx.scale(dpr * scale, dpr * scale);
+				ctx.drawImage(image, 0, 0, renderWidth, renderHeight);
+				ctx.restore();
+				const frameMs = performance.now() - tFrame;
+				frameCount++;
+				totalFrameControllerMs += fcMs;
+				totalCaptureMs += captureMs;
+				totalCopyMs += copyMs;
+				totalFrameMs += frameMs;
+				defaultProfiler.incrementRenderCount();
+				if (defaultProfiler.shouldLogByFrameCount(60)) {
+					frameCount = 0;
+					totalFrameControllerMs = 0;
+					totalCaptureMs = 0;
+					totalCopyMs = 0;
+					totalFrameMs = 0;
+				}
+			}
 		} catch (e) {
 			logger.error("Canvas preview render failed:", e);
 		} finally {
@@ -426,6 +594,13 @@ function renderTimegroupToCanvas(timegroup, scaleOrOptions = DEFAULT_PREVIEW_SCA
 		disposed = true;
 		frameController.abort();
 		renderContext.dispose();
+		if (useNative && originalParent) {
+			timegroup.style.clipPath = savedClipPath;
+			timegroup.style.pointerEvents = savedPointerEvents;
+			if (originalNextSibling) originalParent.insertBefore(timegroup, originalNextSibling);
+			else originalParent.appendChild(timegroup);
+			captureCanvas?.remove();
+		}
 	};
 	refresh();
 	return {
@@ -439,5 +614,5 @@ function renderTimegroupToCanvas(timegroup, scaleOrOptions = DEFAULT_PREVIEW_SCA
 }
 
 //#endregion
-export { captureFromClone, captureTimegroupAtTime, renderTimegroupToCanvas, resetRenderState };
+export { ContentNotReadyError, captureFromClone, captureTimegroupAtTime, clearInlineImageCache, generateThumbnails, generateThumbnailsFromClone, getCacheMetrics, getEffectiveRenderMode, getInlineImageCacheSize, getRenderState, isCanvas, isImage, loadImageFromDataUri, renderTimegroupToCanvas, resetCacheMetrics, resetRenderState, waitForVideoContent };
 //# sourceMappingURL=renderTimegroupToCanvas.js.map