@editframe/elements 0.37.3-beta → 0.38.0

package/dist/preview/renderElementToCanvas.js

@@ -0,0 +1,72 @@
+import { RenderContext } from "./RenderContext.js";
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from "./previewTypes.js";
+import { captureTimelineToDataUri } from "./rendering/serializeTimelineDirect.js";
+import { getEffectiveRenderMode } from "./renderers.js";
+import { loadImageFromDataUri } from "./rendering/loadImage.js";
+import { renderToImageNative } from "./rendering/renderToImageNative.js";
+
+//#region src/preview/renderElementToCanvas.ts
+/**
+* Render any element to canvas or image.
+*
+* This is a low-level rendering function that renders the element as-is.
+* The caller is responsible for:
+* - Creating clones if needed
+* - Seeking to the correct time
+* - Finding the correct element to render
+*
+* Use cases:
+* - Preview: Pass prime timeline element (already at correct time)
+* - Video/thumbnails: Pass element from reused clone (already seeked)
+* - One-off capture: Create clone, seek, pass element, clean up
+*
+* @param element - Element to render (timegroup, temporal element, or plain DOM)
+* @param options - Render options
+* @returns Canvas or Image (both are CanvasImageSource)
+*/
+async function renderElementToCanvas(element, options) {
+	return await renderElementToImage(element, options);
+}
+/**
+* Render an element using either native or foreignObject mode.
+* Returns Canvas or Image directly without unnecessary copying.
+*/
+async function renderElementToImage(element, options) {
+	const { timeMs, scale = 1 } = options;
+	const computedStyle = getComputedStyle(element);
+	const width = options.width ?? (parseFloat(computedStyle.width) || DEFAULT_WIDTH);
+	const height = options.height ?? (parseFloat(computedStyle.height) || DEFAULT_HEIGHT);
+	const renderContext = options.renderContext ?? new RenderContext();
+	const shouldDisposeContext = !options.renderContext;
+	try {
+		if ((options.renderMode ?? getEffectiveRenderMode()) === "native") {
+			const elementContainer = document.createElement("div");
+			elementContainer.style.cssText = `
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: ${width}px;
+        height: ${height}px;
+        pointer-events: none;
+        overflow: hidden;
+      `;
+			elementContainer.appendChild(element.cloneNode(true));
+			document.body.appendChild(elementContainer);
+			try {
+				return await renderToImageNative(elementContainer, width, height, { skipDprScaling: true });
+			} finally {
+				elementContainer.remove();
+			}
+		} else return await loadImageFromDataUri(await captureTimelineToDataUri(element, width, height, {
+			renderContext,
+			canvasScale: scale,
+			timeMs
+		}));
+	} finally {
+		if (shouldDisposeContext) renderContext.dispose();
+	}
+}
+
+//#endregion
+export { renderElementToCanvas };
+//# sourceMappingURL=renderElementToCanvas.js.map

package/dist/preview/renderElementToCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderElementToCanvas.js","names":[],"sources":["../../src/preview/renderElementToCanvas.ts"],"sourcesContent":["/**\n * Render any DOM element to canvas.\n *\n * Low-level rendering function that renders elements as-is.\n * Supports both native (drawElementImage) and foreignObject render modes.\n *\n * Caller is responsible for clone management and seeking.\n */\n\nimport { getEffectiveRenderMode } from \"./renderers.js\";\nimport type { RenderMode } from \"./previewSettings.js\";\nimport { RenderContext } from \"./RenderContext.js\";\nimport { captureTimelineToDataUri } from \"./rendering/serializeTimelineDirect.js\";\nimport { loadImageFromDataUri } from \"./rendering/loadImage.js\";\nimport { renderToImageNative } from \"./rendering/renderToImageNative.js\";\nimport { DEFAULT_WIDTH, DEFAULT_HEIGHT } from \"./previewTypes.js\";\n\n/**\n * Options for rendering an element to canvas.\n */\nexport interface RenderElementOptions {\n  /** Time to render at in milliseconds (used for serialization metadata) */\n  timeMs: number;\n  /** Scale factor for canvas encoding (default: 1.0) */\n  scale?: number;\n  /** Output width in pixels (defaults to element's computed width or 1920) */\n  width?: number;\n  /** Output height in pixels (defaults to element's computed height or 1080) */\n  height?: number;\n  /** Render context for canvas pixel caching */\n  renderContext?: RenderContext;\n  /** Override render mode (native or foreignObject) */\n  renderMode?: RenderMode;\n}\n\n/**\n * Render any element to canvas or image.\n *\n * This is a low-level rendering function that renders the element as-is.\n * The caller is responsible for:\n * - Creating clones if needed\n * - Seeking to the correct time\n * - Finding the correct element to render\n *\n * Use cases:\n * - Preview: Pass prime timeline element (already at correct time)\n * - Video/thumbnails: Pass element from reused clone (already seeked)\n * - One-off capture: Create clone, seek, pass element, clean up\n *\n * @param element - Element to render (timegroup, temporal element, or plain DOM)\n * @param options - Render options\n * @returns Canvas or Image (both are CanvasImageSource)\n */\nexport async function renderElementToCanvas(\n  element: Element,\n  options: RenderElementOptions,\n): Promise<CanvasImageSource> {\n  return await renderElementToImage(element, options);\n}\n\n/**\n * Render an element using either native or foreignObject mode.\n * Returns Canvas or Image directly without unnecessary copying.\n */\nasync function renderElementToImage(\n  element: Element,\n  options: RenderElementOptions,\n): Promise<CanvasImageSource> {\n  const { timeMs, scale = 1.0 } = options;\n\n  // Get element dimensions\n  const computedStyle = getComputedStyle(element);\n  const width =\n    options.width ?? (parseFloat(computedStyle.width) || DEFAULT_WIDTH);\n  const height =\n    options.height ?? (parseFloat(computedStyle.height) || DEFAULT_HEIGHT);\n\n  // Create render context for caching\n  const renderContext = options.renderContext ?? new RenderContext();\n  const shouldDisposeContext = !options.renderContext;\n\n  try {\n    // Determine render mode\n    const renderMode = options.renderMode ?? getEffectiveRenderMode();\n\n    if (renderMode === \"native\") {\n      // NATIVE PATH: Render element using drawElementImage\n      const elementContainer = document.createElement(\"div\");\n      elementContainer.style.cssText = `\n        position: fixed;\n        left: 0;\n        top: 0;\n        width: ${width}px;\n        height: ${height}px;\n        pointer-events: none;\n        overflow: hidden;\n      `;\n\n      // Clone element into container\n      elementContainer.appendChild(element.cloneNode(true));\n      document.body.appendChild(elementContainer);\n\n      try {\n        // Return canvas directly - no copy needed!\n        return await renderToImageNative(elementContainer, width, height, {\n          skipDprScaling: true,\n        });\n      } finally {\n        elementContainer.remove();\n      }\n    } else {\n      // FOREIGNOBJECT PATH: Direct serialization\n      const dataUri = await captureTimelineToDataUri(element, width, height, {\n        renderContext,\n        canvasScale: scale,\n        timeMs,\n      });\n\n      // Return image directly - no copy needed!\n      return await loadImageFromDataUri(dataUri);\n    }\n  } finally {\n    if (shouldDisposeContext) {\n      renderContext.dispose();\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,eAAsB,sBACpB,SACA,SAC4B;AAC5B,QAAO,MAAM,qBAAqB,SAAS,QAAQ;;;;;;AAOrD,eAAe,qBACb,SACA,SAC4B;CAC5B,MAAM,EAAE,QAAQ,QAAQ,MAAQ;CAGhC,MAAM,gBAAgB,iBAAiB,QAAQ;CAC/C,MAAM,QACJ,QAAQ,UAAU,WAAW,cAAc,MAAM,IAAI;CACvD,MAAM,SACJ,QAAQ,WAAW,WAAW,cAAc,OAAO,IAAI;CAGzD,MAAM,gBAAgB,QAAQ,iBAAiB,IAAI,eAAe;CAClE,MAAM,uBAAuB,CAAC,QAAQ;AAEtC,KAAI;AAIF,OAFmB,QAAQ,cAAc,wBAAwB,MAE9C,UAAU;GAE3B,MAAM,mBAAmB,SAAS,cAAc,MAAM;AACtD,oBAAiB,MAAM,UAAU;;;;iBAItB,MAAM;kBACL,OAAO;;;;AAMnB,oBAAiB,YAAY,QAAQ,UAAU,KAAK,CAAC;AACrD,YAAS,KAAK,YAAY,iBAAiB;AAE3C,OAAI;AAEF,WAAO,MAAM,oBAAoB,kBAAkB,OAAO,QAAQ,EAChE,gBAAgB,MACjB,CAAC;aACM;AACR,qBAAiB,QAAQ;;QAW3B,QAAO,MAAM,qBAPG,MAAM,yBAAyB,SAAS,OAAO,QAAQ;GACrE;GACA,aAAa;GACb;GACD,CAAC,CAGwC;WAEpC;AACR,MAAI,qBACF,eAAc,SAAS"}

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 } 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";
 
 //#region src/preview/renderTimegroupToCanvas.ts
 /** Number of rows to sample when checking canvas content */
@@ -57,37 +59,34 @@ function resetRenderState() {
 	resetCacheMetrics();
 }
 /**
-* Create a debug label for showing render info.
-*/
-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.
+* DEBUG: Capture a single thumbnail at the current time.
+* Call from console: window.debugCaptureThumbnail()
 */
-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 +98,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,105 +166,157 @@ 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
+			})
+		};
+	}
+}
 /** Epsilon for comparing time values (ms) - times within this are considered equal */
 const TIME_EPSILON_MS = 1;
 /** Default scale for preview rendering */
@@ -282,10 +333,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 +353,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 +364,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 +372,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 +412,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 +429,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 +541,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 +561,5 @@ function renderTimegroupToCanvas(timegroup, scaleOrOptions = DEFAULT_PREVIEW_SCA
 }
 
 //#endregion
-export { captureFromClone, captureTimegroupAtTime, renderTimegroupToCanvas, resetRenderState };
+export { generateThumbnailsFromClone, renderTimegroupToCanvas, resetRenderState, waitForVideoContent };
 //# sourceMappingURL=renderTimegroupToCanvas.js.map