@editframe/elements 0.33.0-beta → 0.34.6-beta

package/dist/preview/renderers.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderers.js","names":[],"sources":["../../src/preview/renderers.ts"],"sourcesContent":["/**\n * Renderer strategy pattern for HTML-to-image rendering.\n * Provides a unified interface for native (drawElementImage) and foreignObject paths.\n */\n\nimport { isNativeCanvasApiAvailable, getRenderMode, type RenderMode } from \"./previewSettings.js\";\n\n/**\n * Options for rendering HTML to an image or canvas.\n */\nexport interface RenderOptions {\n  /** Skip device pixel ratio scaling (render at logical pixels) */\n  skipDprScaling?: boolean;\n  /** Scale factor for encoding internal canvases (foreignObject only) */\n  canvasScale?: number;\n  /** Whether to reuse an existing canvas (native only) */\n  reuseCanvas?: HTMLCanvasElement;\n  /** Whether to wait for an extra paint cycle (native only) */\n  waitForPaint?: boolean;\n}\n\n/**\n * Result of a render operation.\n * Native path returns a canvas, foreignObject path returns an image.\n */\nexport type RenderResult = HTMLCanvasElement | HTMLImageElement;\n\n/**\n * Renderer interface for HTML-to-image conversion.\n */\nexport interface Renderer {\n  /** The render mode this renderer implements */\n  readonly mode: RenderMode;\n  \n  /**\n   * Render an HTML container to an image or canvas.\n   * @param container - The HTML element to render\n   * @param width - Target width in logical pixels\n   * @param height - Target height in logical pixels\n   * @param options - Rendering options\n   * @returns Promise resolving to a canvas or image element\n   */\n  render(\n    container: HTMLElement,\n    width: number,\n    height: number,\n    options?: RenderOptions,\n  ): Promise<RenderResult>;\n  \n  /**\n   * Check if this renderer is available in the current environment.\n   */\n  isAvailable(): boolean;\n}\n\n/**\n * Get the effective render mode, validating that native is available when selected.\n * Falls back to foreignObject if native is selected but not available.\n */\nexport function getEffectiveRenderMode(): RenderMode {\n  const mode = getRenderMode();\n  \n  if (mode === \"native\" && !isNativeCanvasApiAvailable()) {\n    return \"foreignObject\";\n  }\n  \n  return mode;\n}\n\n/**\n * Check if a render result is a canvas element.\n */\nexport function isCanvas(result: RenderResult): result is HTMLCanvasElement {\n  return result instanceof HTMLCanvasElement;\n}\n\n/**\n * Check if a render result is an image element.\n */\nexport function isImage(result: RenderResult): result is HTMLImageElement {\n  return result instanceof HTMLImageElement;\n}\n"],"mappings":";;;;;;;AA2DA,SAAgB,yBAAqC;CACnD,MAAM,OAAO,eAAe;AAE5B,KAAI,SAAS,YAAY,CAAC,4BAA4B,CACpD,QAAO;AAGT,QAAO"}
+{"version":3,"file":"renderers.js","names":[],"sources":["../../src/preview/renderers.ts"],"sourcesContent":["/**\n * Renderer strategy pattern for HTML-to-image rendering.\n * Provides a unified interface for native (drawElementImage) and foreignObject paths.\n */\n\nimport { isNativeCanvasApiAvailable, getRenderMode, type RenderMode } from \"./previewSettings.js\";\n\n/**\n * Options for rendering HTML to an image or canvas.\n */\nexport interface RenderOptions {\n  /** Skip device pixel ratio scaling (render at logical pixels) */\n  skipDprScaling?: boolean;\n  /** Scale factor for encoding internal canvases (foreignObject only) */\n  canvasScale?: number;\n  /** Whether to reuse an existing canvas (native only) */\n  reuseCanvas?: HTMLCanvasElement;\n}\n\n/**\n * Result of a render operation.\n * Native path returns a canvas, foreignObject path returns an image.\n */\nexport type RenderResult = HTMLCanvasElement | HTMLImageElement;\n\n/**\n * Renderer interface for HTML-to-image conversion.\n */\nexport interface Renderer {\n  /** The render mode this renderer implements */\n  readonly mode: RenderMode;\n  \n  /**\n   * Render an HTML container to an image or canvas.\n   * @param container - The HTML element to render\n   * @param width - Target width in logical pixels\n   * @param height - Target height in logical pixels\n   * @param options - Rendering options\n   * @returns Promise resolving to a canvas or image element\n   */\n  render(\n    container: HTMLElement,\n    width: number,\n    height: number,\n    options?: RenderOptions,\n  ): Promise<RenderResult>;\n  \n  /**\n   * Check if this renderer is available in the current environment.\n   */\n  isAvailable(): boolean;\n}\n\n/**\n * Get the effective render mode, validating that native is available when selected.\n * Falls back to foreignObject if native is selected but not available.\n */\nexport function getEffectiveRenderMode(): RenderMode {\n  const mode = getRenderMode();\n  \n  if (mode === \"native\" && !isNativeCanvasApiAvailable()) {\n    return \"foreignObject\";\n  }\n  \n  return mode;\n}\n\n/**\n * Check if a render result is a canvas element.\n */\nexport function isCanvas(result: RenderResult): result is HTMLCanvasElement {\n  return result instanceof HTMLCanvasElement;\n}\n\n/**\n * Check if a render result is an image element.\n */\nexport function isImage(result: RenderResult): result is HTMLImageElement {\n  return result instanceof HTMLImageElement;\n}\n"],"mappings":";;;;;;;AAyDA,SAAgB,yBAAqC;CACnD,MAAM,OAAO,eAAe;AAE5B,KAAI,SAAS,YAAY,CAAC,4BAA4B,CACpD,QAAO;AAGT,QAAO"}

package/dist/preview/rendering/inlineImages.js

@@ -0,0 +1,56 @@
+import { logger } from "../logger.js";
+
+//#region src/preview/rendering/inlineImages.ts
+/** Maximum number of cached inline images before eviction */
+const MAX_INLINE_IMAGE_CACHE_SIZE = 100;
+/** Image cache for inlining external images as data URIs (foreignObject path) */
+const _inlineImageCache = /* @__PURE__ */ new Map();
+/**
+* Convert a Blob to a data URL.
+*/
+function blobToDataURL(blob) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => resolve(reader.result);
+		reader.onerror = reject;
+		reader.readAsDataURL(blob);
+	});
+}
+/**
+* Inline all images in a container as base64 data URIs.
+* SVG foreignObject can't load external images due to security restrictions.
+* Uses an LRU-style cache with size limits to prevent memory leaks.
+*/
+async function inlineImages(container) {
+	const images = container.querySelectorAll("img");
+	for (const image of images) {
+		const src = image.getAttribute("src");
+		if (!src || src.startsWith("data:")) continue;
+		const cached = _inlineImageCache.get(src);
+		if (cached) {
+			image.setAttribute("src", cached);
+			continue;
+		}
+		try {
+			const dataUrl = await blobToDataURL(await (await fetch(src)).blob());
+			image.setAttribute("src", dataUrl);
+			if (_inlineImageCache.size >= MAX_INLINE_IMAGE_CACHE_SIZE) {
+				const firstKey = _inlineImageCache.keys().next().value;
+				if (firstKey) _inlineImageCache.delete(firstKey);
+			}
+			_inlineImageCache.set(src, dataUrl);
+		} catch (e) {
+			logger.warn("Failed to inline image:", src, e);
+		}
+	}
+}
+/**
+* Clear the inline image cache. Useful for memory management in long-running sessions.
+*/
+function clearInlineImageCache() {
+	_inlineImageCache.clear();
+}
+
+//#endregion
+export { clearInlineImageCache, inlineImages };
+//# sourceMappingURL=inlineImages.js.map

package/dist/preview/rendering/inlineImages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inlineImages.js","names":[],"sources":["../../../src/preview/rendering/inlineImages.ts"],"sourcesContent":["/**\n * Image inlining utilities for SVG foreignObject rendering.\n * SVG foreignObject can't load external images due to security restrictions,\n * so we convert them to base64 data URIs.\n */\n\nimport { logger } from \"../logger.js\";\n\n/** Maximum number of cached inline images before eviction */\nconst MAX_INLINE_IMAGE_CACHE_SIZE = 100;\n\n/** Image cache for inlining external images as data URIs (foreignObject path) */\nconst _inlineImageCache = new Map<string, string>();\n\n/**\n * Convert a Blob to a data URL.\n */\nfunction blobToDataURL(blob: Blob): Promise<string> {\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader();\n    reader.onload = () => resolve(reader.result as string);\n    reader.onerror = reject;\n    reader.readAsDataURL(blob);\n  });\n}\n\n/**\n * Inline all images in a container as base64 data URIs.\n * SVG foreignObject can't load external images due to security restrictions.\n * Uses an LRU-style cache with size limits to prevent memory leaks.\n */\nexport async function inlineImages(container: HTMLElement): Promise<void> {\n  const images = container.querySelectorAll(\"img\");\n  for (const image of images) {\n    const src = image.getAttribute(\"src\");\n    if (!src || src.startsWith(\"data:\")) continue;\n\n    const cached = _inlineImageCache.get(src);\n    if (cached) {\n      image.setAttribute(\"src\", cached);\n      continue;\n    }\n\n    try {\n      const response = await fetch(src);\n      const blob = await response.blob();\n      const dataUrl = await blobToDataURL(blob);\n      image.setAttribute(\"src\", dataUrl);\n      \n      // Evict oldest entries if cache is full (simple FIFO eviction)\n      if (_inlineImageCache.size >= MAX_INLINE_IMAGE_CACHE_SIZE) {\n        const firstKey = _inlineImageCache.keys().next().value;\n        if (firstKey) _inlineImageCache.delete(firstKey);\n      }\n      _inlineImageCache.set(src, dataUrl);\n    } catch (e) {\n      logger.warn(\"Failed to inline image:\", src, e);\n    }\n  }\n}\n\n/**\n * Clear the inline image cache. Useful for memory management in long-running sessions.\n */\nexport function clearInlineImageCache(): void {\n  _inlineImageCache.clear();\n}\n\n/**\n * Get current inline image cache size for diagnostics.\n */\nexport function getInlineImageCacheSize(): number {\n  return _inlineImageCache.size;\n}\n"],"mappings":";;;;AASA,MAAM,8BAA8B;;AAGpC,MAAM,oCAAoB,IAAI,KAAqB;;;;AAKnD,SAAS,cAAc,MAA6B;AAClD,QAAO,IAAI,SAAS,SAAS,WAAW;EACtC,MAAM,SAAS,IAAI,YAAY;AAC/B,SAAO,eAAe,QAAQ,OAAO,OAAiB;AACtD,SAAO,UAAU;AACjB,SAAO,cAAc,KAAK;GAC1B;;;;;;;AAQJ,eAAsB,aAAa,WAAuC;CACxE,MAAM,SAAS,UAAU,iBAAiB,MAAM;AAChD,MAAK,MAAM,SAAS,QAAQ;EAC1B,MAAM,MAAM,MAAM,aAAa,MAAM;AACrC,MAAI,CAAC,OAAO,IAAI,WAAW,QAAQ,CAAE;EAErC,MAAM,SAAS,kBAAkB,IAAI,IAAI;AACzC,MAAI,QAAQ;AACV,SAAM,aAAa,OAAO,OAAO;AACjC;;AAGF,MAAI;GAGF,MAAM,UAAU,MAAM,cADT,OADI,MAAM,MAAM,IAAI,EACL,MAAM,CACO;AACzC,SAAM,aAAa,OAAO,QAAQ;AAGlC,OAAI,kBAAkB,QAAQ,6BAA6B;IACzD,MAAM,WAAW,kBAAkB,MAAM,CAAC,MAAM,CAAC;AACjD,QAAI,SAAU,mBAAkB,OAAO,SAAS;;AAElD,qBAAkB,IAAI,KAAK,QAAQ;WAC5B,GAAG;AACV,UAAO,KAAK,2BAA2B,KAAK,EAAE;;;;;;;AAQpD,SAAgB,wBAA8B;AAC5C,mBAAkB,OAAO"}

package/dist/preview/rendering/renderToImage.d.ts

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

package/dist/preview/rendering/renderToImage.js

@@ -0,0 +1,120 @@
+import { getEffectiveRenderMode } from "../renderers.js";
+import { defaultProfiler } from "../RenderProfiler.js";
+import { renderToImageNative } from "./renderToImageNative.js";
+import { inlineImages } from "./inlineImages.js";
+import { encodeCanvasesInParallel } from "../encoding/canvasEncoder.js";
+import { serializeToSvgDataUri } from "./renderToImageForeignObject.js";
+
+//#region src/preview/rendering/renderToImage.ts
+/**
+* Check if an element or any of its ancestors has display:none.
+* Used to skip encoding hidden canvases.
+*/
+function isElementHidden(element) {
+	let current = element;
+	while (current) {
+		if (current instanceof HTMLElement && current.style.display === "none") return true;
+		current = current.parentElement;
+	}
+	return false;
+}
+/**
+* Load an image from a data URI. Returns a Promise that resolves when loaded.
+*/
+function loadImageFromDataUri(dataUri) {
+	const img = new Image();
+	const imageLoadStart = performance.now();
+	return new Promise((resolve, reject) => {
+		img.onload = () => {
+			defaultProfiler.addTime("imageLoad", performance.now() - imageLoadStart);
+			resolve(img);
+		};
+		img.onerror = reject;
+		img.src = dataUri;
+	});
+}
+/**
+* Render HTML content to an image (or canvas) for drawing.
+* 
+* Supports two rendering modes (configurable via previewSettings):
+* - "native": Chrome's experimental drawElementImage API (fastest when available)
+* - "foreignObject": SVG foreignObject serialization (fallback, works everywhere)
+* 
+* @param container - The HTML element to render
+* @param width - Target width in logical pixels
+* @param height - Target height in logical pixels
+* @param options - Rendering options
+* @returns HTMLCanvasElement when using native, HTMLImageElement when using foreignObject
+*/
+async function renderToImage(container, width, height, options) {
+	if (getEffectiveRenderMode() === "native") return renderToImageNative(container, width, height, options);
+	const allOriginalCanvases = Array.from(container.querySelectorAll("canvas"));
+	const clone = container.cloneNode(true);
+	const allClonedCanvases = Array.from(clone.querySelectorAll("canvas"));
+	const visibleIndices = [];
+	const visibleCanvases = [];
+	for (let i = 0; i < allOriginalCanvases.length; i++) {
+		const canvas = allOriginalCanvases[i];
+		if (!isElementHidden(canvas)) {
+			visibleIndices.push(i);
+			visibleCanvases.push(canvas);
+		}
+	}
+	const canvasScale = options?.canvasScale ?? 1;
+	const canvasStart = performance.now();
+	const encodedResults = await encodeCanvasesInParallel(visibleCanvases, {
+		scale: canvasScale,
+		renderContext: options?.renderContext,
+		sourceMap: options?.sourceMap
+	});
+	for (let j = 0; j < visibleCanvases.length; j++) {
+		const srcCanvas = visibleCanvases[j];
+		const dstCanvas = allClonedCanvases[visibleIndices[j]];
+		const encoded = encodedResults.find((r) => r.canvas === srcCanvas);
+		if (!dstCanvas || !encoded) continue;
+		try {
+			const img = document.createElement("img");
+			img.src = encoded.dataUrl;
+			img.width = srcCanvas.width;
+			img.height = srcCanvas.height;
+			const style = dstCanvas.getAttribute("style");
+			if (style) img.setAttribute("style", style);
+			dstCanvas.parentNode?.replaceChild(img, dstCanvas);
+		} catch {}
+	}
+	defaultProfiler.addTime("canvasEncode", performance.now() - canvasStart);
+	const inlineStart = performance.now();
+	await inlineImages(clone);
+	defaultProfiler.addTime("inline", performance.now() - inlineStart);
+	const { dataUri } = await serializeToSvgDataUri(clone, width, height);
+	return loadImageFromDataUri(dataUri);
+}
+/**
+* Render a pre-built clone container to an image WITHOUT cloning it again.
+* This is the fast path for reusing clone structures across frames.
+* 
+* Key difference from renderToImage:
+* - Does NOT call cloneNode (avoids expensive DOM duplication)
+* - Converts canvases to images in-place, then restores them after serialization
+* - Assumes the container already has refreshed canvas content
+* 
+* @param container - Pre-built clone container with refreshed canvas content
+* @param width - Output width
+* @param height - Output height
+* @returns Promise resolving to an HTMLImageElement
+*/
+async function renderToImageDirect(container, width, height) {
+	defaultProfiler.incrementRenderCount();
+	const { dataUri, restore } = await serializeToSvgDataUri(container, width, height, {
+		inlineImages: true,
+		logEarlyRenders: true
+	});
+	restore();
+	const image = await loadImageFromDataUri(dataUri);
+	defaultProfiler.shouldLogByFrameCount(100);
+	return image;
+}
+
+//#endregion
+export { loadImageFromDataUri, renderToImage, renderToImageDirect };
+//# sourceMappingURL=renderToImage.js.map

package/dist/preview/rendering/renderToImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderToImage.js","names":["current: Element | null","visibleIndices: number[]","visibleCanvases: HTMLCanvasElement[]"],"sources":["../../../src/preview/rendering/renderToImage.ts"],"sourcesContent":["/**\n * Public rendering API facade.\n * Dispatches to native or foreignObject rendering paths based on settings.\n */\n\nimport type { ForeignObjectRenderOptions } from \"./types.js\";\nimport { renderToImageNative } from \"./renderToImageNative.js\";\nimport { serializeToSvgDataUri } from \"./renderToImageForeignObject.js\";\nimport { inlineImages } from \"./inlineImages.js\";\nimport { getEffectiveRenderMode } from \"../renderers.js\";\nimport { encodeCanvasesInParallel } from \"../encoding/canvasEncoder.js\";\nimport { defaultProfiler } from \"../RenderProfiler.js\";\n\n/**\n * Check if an element or any of its ancestors has display:none.\n * Used to skip encoding hidden canvases.\n */\nfunction isElementHidden(element: Element): boolean {\n  let current: Element | null = element;\n  while (current) {\n    if (current instanceof HTMLElement && current.style.display === \"none\") {\n      return true;\n    }\n    current = current.parentElement;\n  }\n  return false;\n}\n\n/**\n * Load an image from a data URI. Returns a Promise that resolves when loaded.\n */\nexport function loadImageFromDataUri(dataUri: string): Promise<HTMLImageElement> {\n  const img = new Image();\n  const imageLoadStart = performance.now();\n  \n  return new Promise<HTMLImageElement>((resolve, reject) => {\n    img.onload = () => {\n      defaultProfiler.addTime(\"imageLoad\", performance.now() - imageLoadStart);\n      resolve(img);\n    };\n    img.onerror = reject;\n    img.src = dataUri;\n  });\n}\n\n/**\n * Render HTML content to an image (or canvas) for drawing.\n * \n * Supports two rendering modes (configurable via previewSettings):\n * - \"native\": Chrome's experimental drawElementImage API (fastest when available)\n * - \"foreignObject\": SVG foreignObject serialization (fallback, works everywhere)\n * \n * @param container - The HTML element to render\n * @param width - Target width in logical pixels\n * @param height - Target height in logical pixels\n * @param options - Rendering options\n * @returns HTMLCanvasElement when using native, HTMLImageElement when using foreignObject\n */\nexport async function renderToImage(\n  container: HTMLElement,\n  width: number,\n  height: number,\n  options?: ForeignObjectRenderOptions,\n): Promise<HTMLImageElement | HTMLCanvasElement> {\n  const renderMode = getEffectiveRenderMode();\n  \n  // Native HTML-in-Canvas API path (fastest, requires Chrome flag)\n  if (renderMode === \"native\") {\n    return renderToImageNative(container, width, height, options);\n  }\n  \n  // Fallback: SVG foreignObject serialization\n  // Clone the container first (don't modify original)\n  // Note: cloneNode doesn't copy canvas pixels, so we encode from original canvases\n  const allOriginalCanvases = Array.from(container.querySelectorAll(\"canvas\"));\n  const clone = container.cloneNode(true) as HTMLElement;\n  const allClonedCanvases = Array.from(clone.querySelectorAll(\"canvas\"));\n  \n  // Filter out hidden canvases - they have display:none and won't render anyway\n  // Keep track of indices to match with cloned canvases\n  const visibleIndices: number[] = [];\n  const visibleCanvases: HTMLCanvasElement[] = [];\n  for (let i = 0; i < allOriginalCanvases.length; i++) {\n    const canvas = allOriginalCanvases[i]!;\n    if (!isElementHidden(canvas)) {\n      visibleIndices.push(i);\n      visibleCanvases.push(canvas);\n    }\n  }\n  \n  // Encode visible original canvases\n  // Pass through renderContext and sourceMap for caching\n  const canvasScale = options?.canvasScale ?? 1;\n  const canvasStart = performance.now();\n  const encodedResults = await encodeCanvasesInParallel(visibleCanvases, { \n    scale: canvasScale,\n    renderContext: options?.renderContext,\n    sourceMap: options?.sourceMap,\n  });\n  \n  // Map encoded results to corresponding cloned canvases using tracked indices\n  for (let j = 0; j < visibleCanvases.length; j++) {\n    const srcCanvas = visibleCanvases[j]!;\n    const originalIndex = visibleIndices[j]!;\n    const dstCanvas = allClonedCanvases[originalIndex];\n    const encoded = encodedResults.find((r) => r.canvas === srcCanvas);\n    \n    if (!dstCanvas || !encoded) continue;\n    \n    try {\n      const img = document.createElement(\"img\");\n      img.src = encoded.dataUrl;\n      img.width = srcCanvas.width;\n      img.height = srcCanvas.height;\n      const style = dstCanvas.getAttribute(\"style\");\n      if (style) img.setAttribute(\"style\", style);\n      dstCanvas.parentNode?.replaceChild(img, dstCanvas);\n    } catch {\n      // Cross-origin or other error - skip\n    }\n  }\n  defaultProfiler.addTime(\"canvasEncode\", performance.now() - canvasStart);\n\n  // Inline external images in the clone\n  const inlineStart = performance.now();\n  await inlineImages(clone);\n  defaultProfiler.addTime(\"inline\", performance.now() - inlineStart);\n\n  // Use common serialization pipeline (no restore needed since we're working on a clone)\n  const { dataUri } = await serializeToSvgDataUri(clone, width, height);\n  \n  // Load as image\n  return loadImageFromDataUri(dataUri);\n}\n\n/**\n * Render a pre-built clone container to an image WITHOUT cloning it again.\n * This is the fast path for reusing clone structures across frames.\n * \n * Key difference from renderToImage:\n * - Does NOT call cloneNode (avoids expensive DOM duplication)\n * - Converts canvases to images in-place, then restores them after serialization\n * - Assumes the container already has refreshed canvas content\n * \n * @param container - Pre-built clone container with refreshed canvas content\n * @param width - Output width\n * @param height - Output height\n * @returns Promise resolving to an HTMLImageElement\n */\nexport async function renderToImageDirect(\n  container: HTMLElement,\n  width: number,\n  height: number,\n): Promise<HTMLImageElement> {\n  defaultProfiler.incrementRenderCount();\n  \n  // Use common serialization pipeline (modifies in-place, restores after)\n  const { dataUri, restore } = await serializeToSvgDataUri(container, width, height, {\n    inlineImages: true,\n    logEarlyRenders: true,\n  });\n  restore();\n  \n  // Load as image\n  const image = await loadImageFromDataUri(dataUri);\n  \n  // Log timing breakdown periodically\n  defaultProfiler.shouldLogByFrameCount(100);\n  \n  return image;\n}\n\n/**\n * Prepare a frame's data URI without waiting for image load.\n * Returns the data URI asynchronously (after parallel canvas encoding and serialization) for pipelined loading.\n * The DOM is restored before this function returns.\n */\nexport async function prepareFrameDataUri(\n  container: HTMLElement,\n  width: number,\n  height: number,\n): Promise<string> {\n  defaultProfiler.incrementRenderCount();\n  \n  // Use common serialization pipeline (modifies in-place, restores after)\n  const { dataUri, restore } = await serializeToSvgDataUri(container, width, height);\n  restore();\n  \n  return dataUri;\n}\n"],"mappings":";;;;;;;;;;;;AAiBA,SAAS,gBAAgB,SAA2B;CAClD,IAAIA,UAA0B;AAC9B,QAAO,SAAS;AACd,MAAI,mBAAmB,eAAe,QAAQ,MAAM,YAAY,OAC9D,QAAO;AAET,YAAU,QAAQ;;AAEpB,QAAO;;;;;AAMT,SAAgB,qBAAqB,SAA4C;CAC/E,MAAM,MAAM,IAAI,OAAO;CACvB,MAAM,iBAAiB,YAAY,KAAK;AAExC,QAAO,IAAI,SAA2B,SAAS,WAAW;AACxD,MAAI,eAAe;AACjB,mBAAgB,QAAQ,aAAa,YAAY,KAAK,GAAG,eAAe;AACxE,WAAQ,IAAI;;AAEd,MAAI,UAAU;AACd,MAAI,MAAM;GACV;;;;;;;;;;;;;;;AAgBJ,eAAsB,cACpB,WACA,OACA,QACA,SAC+C;AAI/C,KAHmB,wBAAwB,KAGxB,SACjB,QAAO,oBAAoB,WAAW,OAAO,QAAQ,QAAQ;CAM/D,MAAM,sBAAsB,MAAM,KAAK,UAAU,iBAAiB,SAAS,CAAC;CAC5E,MAAM,QAAQ,UAAU,UAAU,KAAK;CACvC,MAAM,oBAAoB,MAAM,KAAK,MAAM,iBAAiB,SAAS,CAAC;CAItE,MAAMC,iBAA2B,EAAE;CACnC,MAAMC,kBAAuC,EAAE;AAC/C,MAAK,IAAI,IAAI,GAAG,IAAI,oBAAoB,QAAQ,KAAK;EACnD,MAAM,SAAS,oBAAoB;AACnC,MAAI,CAAC,gBAAgB,OAAO,EAAE;AAC5B,kBAAe,KAAK,EAAE;AACtB,mBAAgB,KAAK,OAAO;;;CAMhC,MAAM,cAAc,SAAS,eAAe;CAC5C,MAAM,cAAc,YAAY,KAAK;CACrC,MAAM,iBAAiB,MAAM,yBAAyB,iBAAiB;EACrE,OAAO;EACP,eAAe,SAAS;EACxB,WAAW,SAAS;EACrB,CAAC;AAGF,MAAK,IAAI,IAAI,GAAG,IAAI,gBAAgB,QAAQ,KAAK;EAC/C,MAAM,YAAY,gBAAgB;EAElC,MAAM,YAAY,kBADI,eAAe;EAErC,MAAM,UAAU,eAAe,MAAM,MAAM,EAAE,WAAW,UAAU;AAElE,MAAI,CAAC,aAAa,CAAC,QAAS;AAE5B,MAAI;GACF,MAAM,MAAM,SAAS,cAAc,MAAM;AACzC,OAAI,MAAM,QAAQ;AAClB,OAAI,QAAQ,UAAU;AACtB,OAAI,SAAS,UAAU;GACvB,MAAM,QAAQ,UAAU,aAAa,QAAQ;AAC7C,OAAI,MAAO,KAAI,aAAa,SAAS,MAAM;AAC3C,aAAU,YAAY,aAAa,KAAK,UAAU;UAC5C;;AAIV,iBAAgB,QAAQ,gBAAgB,YAAY,KAAK,GAAG,YAAY;CAGxE,MAAM,cAAc,YAAY,KAAK;AACrC,OAAM,aAAa,MAAM;AACzB,iBAAgB,QAAQ,UAAU,YAAY,KAAK,GAAG,YAAY;CAGlE,MAAM,EAAE,YAAY,MAAM,sBAAsB,OAAO,OAAO,OAAO;AAGrE,QAAO,qBAAqB,QAAQ;;;;;;;;;;;;;;;;AAiBtC,eAAsB,oBACpB,WACA,OACA,QAC2B;AAC3B,iBAAgB,sBAAsB;CAGtC,MAAM,EAAE,SAAS,YAAY,MAAM,sBAAsB,WAAW,OAAO,QAAQ;EACjF,cAAc;EACd,iBAAiB;EAClB,CAAC;AACF,UAAS;CAGT,MAAM,QAAQ,MAAM,qBAAqB,QAAQ;AAGjD,iBAAgB,sBAAsB,IAAI;AAE1C,QAAO"}

package/dist/preview/rendering/renderToImageForeignObject.js

@@ -0,0 +1,135 @@
+import { logger } from "../logger.js";
+import { defaultProfiler } from "../RenderProfiler.js";
+import { encodeBase64Fast } from "./svgSerializer.js";
+import { inlineImages } from "./inlineImages.js";
+import { encodeCanvasesInParallel } from "../encoding/canvasEncoder.js";
+
+//#region src/preview/rendering/renderToImageForeignObject.ts
+let _xmlSerializer = null;
+let _textEncoder = null;
+/**
+* Check if an element or any of its ancestors has display:none.
+* Used to skip encoding hidden canvases.
+*/
+function isElementHidden(element) {
+	let current = element;
+	while (current) {
+		if (current instanceof HTMLElement && current.style.display === "none") return true;
+		current = current.parentElement;
+	}
+	return false;
+}
+const SVG_PREFIX = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"";
+const SVG_HEIGHT_PREFIX = "\" height=\"";
+const SVG_MIDDLE = "\"><foreignObject width=\"100%\" height=\"100%\">";
+const SVG_SUFFIX = "</foreignObject></svg>";
+const DATA_URI_PREFIX = "data:image/svg+xml;base64,";
+const WRAPPER_STYLE_BASE = "overflow:hidden;position:relative;";
+/**
+* Common SVG foreignObject serialization pipeline.
+* Handles canvas encoding, serialization, and base64 encoding.
+* 
+* @param container - The HTML element to serialize
+* @param width - Output width
+* @param height - Output height
+* @param options - Serialization options
+* @returns Serialization result with data URI and restore function
+*/
+async function serializeToSvgDataUri(container, width, height, options = {}) {
+	const { canvasScale = 1, inlineImages: shouldInlineImages = false, logEarlyRenders = false, renderContext, sourceMap } = options;
+	const canvasRestoreInfo = [];
+	const canvasStart = performance.now();
+	const visibleCanvases = Array.from(container.querySelectorAll("canvas")).filter((canvas) => !isElementHidden(canvas));
+	const canvasSnapshots = [];
+	for (let i = 0; i < visibleCanvases.length; i++) {
+		const canvas = visibleCanvases[i];
+		if (canvas.width > 0 && canvas.height > 0) {
+			const copy = document.createElement("canvas");
+			copy.width = canvas.width;
+			copy.height = canvas.height;
+			if (canvas.dataset.preserveAlpha) copy.dataset.preserveAlpha = canvas.dataset.preserveAlpha;
+			const ctx = copy.getContext("2d");
+			if (ctx) ctx.drawImage(canvas, 0, 0);
+			canvasSnapshots.push({
+				original: canvas,
+				copy
+			});
+		}
+	}
+	const encodedWithOriginals = (await encodeCanvasesInParallel(canvasSnapshots.map((s) => s.copy), {
+		scale: canvasScale,
+		renderContext,
+		sourceMap
+	})).map((result) => {
+		const snapshot = canvasSnapshots.find((s) => s.copy === result.canvas);
+		return {
+			...result,
+			canvas: snapshot?.original ?? result.canvas
+		};
+	});
+	for (const { canvas, dataUrl } of encodedWithOriginals) try {
+		const img = document.createElement("img");
+		img.src = dataUrl;
+		img.width = canvas.width;
+		img.height = canvas.height;
+		const style = canvas.getAttribute("style");
+		if (style) img.setAttribute("style", style);
+		const parent = canvas.parentNode;
+		if (parent) {
+			const nextSibling = canvas.nextSibling;
+			parent.replaceChild(img, canvas);
+			canvasRestoreInfo.push({
+				canvas,
+				parent,
+				nextSibling,
+				img
+			});
+		}
+	} catch {}
+	defaultProfiler.addTime("canvasEncode", performance.now() - canvasStart);
+	if (shouldInlineImages) {
+		const inlineStart = performance.now();
+		await inlineImages(container);
+		defaultProfiler.addTime("inline", performance.now() - inlineStart);
+	}
+	const serializeStart = performance.now();
+	const wrapperElement = document.createElement("div");
+	wrapperElement.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+	wrapperElement.setAttribute("style", `width:${width}px;height:${height}px;${WRAPPER_STYLE_BASE}`);
+	wrapperElement.appendChild(container);
+	if (!_xmlSerializer) _xmlSerializer = new XMLSerializer();
+	const perfStart = performance.now();
+	const serialized = _xmlSerializer.serializeToString(wrapperElement);
+	const serializeTime = performance.now() - perfStart;
+	if (Math.random() < .01) {
+		const elementCount = wrapperElement.querySelectorAll("*").length;
+		console.log(`[serialize] elements=${elementCount}, time=${serializeTime.toFixed(1)}ms, size=${(serialized.length / 1024).toFixed(1)}KB`);
+	}
+	defaultProfiler.addTime("serialize", performance.now() - serializeStart);
+	const restore = () => {
+		const restoreStart = performance.now();
+		if (container.parentNode === wrapperElement) wrapperElement.removeChild(container);
+		for (const { canvas, parent, nextSibling, img } of canvasRestoreInfo) if (img.parentNode === parent) parent.replaceChild(canvas, img);
+		else if (canvas.parentNode !== parent) if (nextSibling && nextSibling.parentNode === parent) parent.insertBefore(canvas, nextSibling);
+		else parent.appendChild(canvas);
+		defaultProfiler.addTime("restore", performance.now() - restoreStart);
+	};
+	if (logEarlyRenders && defaultProfiler.isEarlyRender(2)) logger.debug(`[serializeToSvgDataUri] FO serialized: ${serialized.length} chars`);
+	const base64Start = performance.now();
+	const svg = SVG_PREFIX + width + SVG_HEIGHT_PREFIX + height + SVG_MIDDLE + serialized + SVG_SUFFIX;
+	if (!_textEncoder) _textEncoder = new TextEncoder();
+	const utf8Bytes = _textEncoder.encode(svg);
+	let base64;
+	if (typeof Uint8Array.prototype.toBase64 === "function") base64 = utf8Bytes.toBase64();
+	else base64 = encodeBase64Fast(utf8Bytes);
+	const dataUri = DATA_URI_PREFIX + base64;
+	defaultProfiler.addTime("base64", performance.now() - base64Start);
+	return {
+		dataUri,
+		restore
+	};
+}
+
+//#endregion
+export { serializeToSvgDataUri };
+//# sourceMappingURL=renderToImageForeignObject.js.map

package/dist/preview/rendering/renderToImageForeignObject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderToImageForeignObject.js","names":["_xmlSerializer: XMLSerializer | null","_textEncoder: TextEncoder | null","current: Element | null","canvasRestoreInfo: CanvasRestoreInfo[]","canvasSnapshots: { original: HTMLCanvasElement; copy: HTMLCanvasElement }[]","base64: string"],"sources":["../../../src/preview/rendering/renderToImageForeignObject.ts"],"sourcesContent":["/**\n * SVG foreignObject rendering path with serialization.\n */\n\nimport type { SerializeToSvgOptions, SerializationResult, CanvasRestoreInfo } from \"./types.js\";\nimport { encodeBase64Fast } from \"./svgSerializer.js\";\nimport { inlineImages } from \"./inlineImages.js\";\nimport { encodeCanvasesInParallel } from \"../encoding/canvasEncoder.js\";\nimport { defaultProfiler } from \"../RenderProfiler.js\";\nimport { logger } from \"../logger.js\";\n\n// Reusable instances for better performance (avoid creating new instances every frame)\n// Note: wrapper element is NOT reused - each concurrent frame needs its own wrapper\nlet _xmlSerializer: XMLSerializer | null = null;\nlet _textEncoder: TextEncoder | null = null;\n\n/**\n * Check if an element or any of its ancestors has display:none.\n * Used to skip encoding hidden canvases.\n */\nfunction isElementHidden(element: Element): boolean {\n  let current: Element | null = element;\n  while (current) {\n    if (current instanceof HTMLElement && current.style.display === \"none\") {\n      return true;\n    }\n    current = current.parentElement;\n  }\n  return false;\n}\n\n// Pre-computed SVG constants\nconst SVG_PREFIX = '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"';\nconst SVG_HEIGHT_PREFIX = '\" height=\"';\nconst SVG_MIDDLE = '\"><foreignObject width=\"100%\" height=\"100%\">';\nconst SVG_SUFFIX = '</foreignObject></svg>';\nconst DATA_URI_PREFIX = 'data:image/svg+xml;base64,';\n\n// Shared style string to reduce allocations\nconst WRAPPER_STYLE_BASE = \"overflow:hidden;position:relative;\";\n\n/**\n * Common SVG foreignObject serialization pipeline.\n * Handles canvas encoding, serialization, and base64 encoding.\n * \n * @param container - The HTML element to serialize\n * @param width - Output width\n * @param height - Output height\n * @param options - Serialization options\n * @returns Serialization result with data URI and restore function\n */\nexport async function serializeToSvgDataUri(\n  container: HTMLElement,\n  width: number,\n  height: number,\n  options: SerializeToSvgOptions = {},\n): Promise<SerializationResult> {\n  const { \n    canvasScale = 1, \n    inlineImages: shouldInlineImages = false, \n    logEarlyRenders = false,\n    renderContext,\n    sourceMap,\n  } = options;\n  \n  // Store info for restoration (only used if modifying in-place)\n  const canvasRestoreInfo: CanvasRestoreInfo[] = [];\n  \n  // Phase 1: Encode canvases to data URLs (parallel)\n  // Filter out hidden canvases - they have display:none and won't render anyway\n  const canvasStart = performance.now();\n  const allCanvases = Array.from(container.querySelectorAll(\"canvas\"));\n  const visibleCanvases = allCanvases.filter(canvas => !isElementHidden(canvas));\n  \n  // CRITICAL FIX: Synchronously copy canvas pixels BEFORE any async work.\n  // This prevents race conditions where concurrent render tasks overwrite\n  // the shared clone canvases while encoding is in progress.\n  // See: Hypothesis 1 - Clone Canvas Overwritten During Serialization\n  const canvasSnapshots: { original: HTMLCanvasElement; copy: HTMLCanvasElement }[] = [];\n  for (let i = 0; i < visibleCanvases.length; i++) {\n    const canvas = visibleCanvases[i]!;\n    if (canvas.width > 0 && canvas.height > 0) {\n      const copy = document.createElement(\"canvas\");\n      copy.width = canvas.width;\n      copy.height = canvas.height;\n      // Copy dataset attributes (e.g., preserveAlpha)\n      if (canvas.dataset.preserveAlpha) {\n        copy.dataset.preserveAlpha = canvas.dataset.preserveAlpha;\n      }\n      const ctx = copy.getContext(\"2d\");\n      if (ctx) {\n        // drawImage is SYNCHRONOUS - pixels are copied immediately\n        ctx.drawImage(canvas, 0, 0);\n      }\n      canvasSnapshots.push({ original: canvas, copy });\n    }\n  }\n  \n  // Encode from the snapshot copies (safe from concurrent overwrites)\n  const snapshotCanvases = canvasSnapshots.map(s => s.copy);\n  const encodedResults = await encodeCanvasesInParallel(snapshotCanvases, { \n    scale: canvasScale,\n    renderContext,\n    sourceMap,\n  });\n  \n  // Map encoded results back to original canvases for DOM replacement\n  const encodedWithOriginals = encodedResults.map(result => {\n    const snapshot = canvasSnapshots.find(s => s.copy === result.canvas);\n    return {\n      ...result,\n      canvas: snapshot?.original ?? result.canvas,\n    };\n  });\n  \n  // Replace canvases with images\n  for (const { canvas, dataUrl } of encodedWithOriginals) {\n    try {\n      const img = document.createElement(\"img\");\n      img.src = dataUrl;\n      img.width = canvas.width;\n      img.height = canvas.height;\n      const style = canvas.getAttribute(\"style\");\n      if (style) img.setAttribute(\"style\", style);\n      \n      const parent = canvas.parentNode;\n      if (parent) {\n        const nextSibling = canvas.nextSibling;\n        parent.replaceChild(img, canvas);\n        canvasRestoreInfo.push({ canvas, parent, nextSibling, img });\n      }\n    } catch {\n      // Cross-origin canvas - leave as-is\n    }\n  }\n  defaultProfiler.addTime(\"canvasEncode\", performance.now() - canvasStart);\n  \n  // Phase 2: Inline external images (if requested)\n  if (shouldInlineImages) {\n    const inlineStart = performance.now();\n    await inlineImages(container);\n    defaultProfiler.addTime(\"inline\", performance.now() - inlineStart);\n  }\n  \n  // Phase 3: Serialize to XHTML\n  const serializeStart = performance.now();\n  \n  // Create fresh wrapper element for THIS frame (local variable for closure safety)\n  // Multiple concurrent frames in video export each get their own wrapper\n  const wrapperElement = document.createElement(\"div\");\n  wrapperElement.setAttribute(\"xmlns\", \"http://www.w3.org/1999/xhtml\");\n  wrapperElement.setAttribute(\"style\", `width:${width}px;height:${height}px;${WRAPPER_STYLE_BASE}`);\n  wrapperElement.appendChild(container);\n  \n  if (!_xmlSerializer) {\n    _xmlSerializer = new XMLSerializer();\n  }\n  \n  // NOTE: Hidden element handling is now done by the caller via removeHiddenNodesForSerialization().\n  // The caller physically removes hidden nodes from the clone tree BEFORE calling this function,\n  // so hidden elements are never serialized at all - not just hidden with display:none.\n  //\n  // Benefits of removing before serialization:\n  // - Hidden canvases are not encoded (saves encoding time and memory)\n  // - Hidden elements are not serialized (smaller SVG, faster serialization)\n  // - Hidden images are not inlined (saves fetch and encoding)\n  // - The serialized output is smaller and faster to base64 encode\n  \n  // Serialize to XHTML string\n  const perfStart = performance.now();\n  const serialized = _xmlSerializer.serializeToString(wrapperElement);\n  const serializeTime = performance.now() - perfStart;\n  \n  // Sample 1% of frames to avoid spam\n  if (Math.random() < 0.01) {\n    const elementCount = wrapperElement.querySelectorAll('*').length;\n    console.log(`[serialize] elements=${elementCount}, time=${serializeTime.toFixed(1)}ms, size=${(serialized.length / 1024).toFixed(1)}KB`);\n  }\n\n  defaultProfiler.addTime(\"serialize\", performance.now() - serializeStart);\n  \n  // Prepare restore function (removes container from wrapper, restores canvases)\n  // Must be robust against concurrent frame rendering where DOM state may change\n  const restore = (): void => {\n    const restoreStart = performance.now();\n    \n    // Guard: only remove if container is still a child of wrapper\n    if (container.parentNode === wrapperElement) {\n      wrapperElement.removeChild(container);\n    }\n    \n    for (const { canvas, parent, nextSibling, img } of canvasRestoreInfo) {\n      // Guard: only restore if img is still in expected position\n      if (img.parentNode === parent) {\n        // Use replaceChild which is atomic and safer than insertBefore + removeChild\n        parent.replaceChild(canvas, img);\n      } else if (canvas.parentNode !== parent) {\n        // Canvas was never restored and img was moved/removed - try to restore canvas\n        if (nextSibling && nextSibling.parentNode === parent) {\n          parent.insertBefore(canvas, nextSibling);\n        } else {\n          parent.appendChild(canvas);\n        }\n      }\n    }\n    defaultProfiler.addTime(\"restore\", performance.now() - restoreStart);\n  };\n  \n  // DEBUG: Log serialized HTML size for early renders\n  if (logEarlyRenders && defaultProfiler.isEarlyRender(2)) {\n    logger.debug(`[serializeToSvgDataUri] FO serialized: ${serialized.length} chars`);\n  }\n  \n  // Phase 4: Create SVG and encode to base64\n  const base64Start = performance.now();\n  \n  // Build SVG string with minimal allocations (concatenation is faster for small strings)\n  const svg = SVG_PREFIX + width + SVG_HEIGHT_PREFIX + height + SVG_MIDDLE + serialized + SVG_SUFFIX;\n  \n  if (!_textEncoder) {\n    _textEncoder = new TextEncoder();\n  }\n  const utf8Bytes = _textEncoder.encode(svg);\n  \n  let base64: string;\n  if (typeof (Uint8Array.prototype as any).toBase64 === \"function\") {\n    base64 = (utf8Bytes as any).toBase64();\n  } else {\n    base64 = encodeBase64Fast(utf8Bytes);\n  }\n  const dataUri = DATA_URI_PREFIX + base64;\n  defaultProfiler.addTime(\"base64\", performance.now() - base64Start);\n  \n  return { dataUri, restore };\n}\n"],"mappings":"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"}

package/dist/preview/rendering/renderToImageNative.d.ts

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

package/dist/preview/rendering/renderToImageNative.js

@@ -0,0 +1,129 @@
+import { defaultProfiler } from "../RenderProfiler.js";
+
+//#region src/preview/rendering/renderToImageNative.ts
+/** Track canvases that have been initialized for layoutsubtree (only need to wait once) */
+const _layoutInitializedCanvases = /* @__PURE__ */ new WeakSet();
+/**
+* Wait for next animation frame (allows browser to complete layout)
+*/
+function waitForFrame() {
+	return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
+/**
+* Create a canvas element with proper DPR handling.
+* Buffer size is based on renderWidth/renderHeight (internal resolution).
+* CSS size is based on fullWidth/fullHeight (logical display size).
+*/
+function createDprCanvas(options) {
+	const { renderWidth, renderHeight, scale, fullWidth, fullHeight } = options;
+	const dpr = options.dpr ?? window.devicePixelRatio ?? 1;
+	const canvas = document.createElement("canvas");
+	canvas.width = Math.floor(renderWidth * scale * dpr);
+	canvas.height = Math.floor(renderHeight * scale * dpr);
+	canvas.style.width = `${Math.floor(fullWidth * scale)}px`;
+	canvas.style.height = `${Math.floor(fullHeight * scale)}px`;
+	return canvas;
+}
+/**
+* Render HTML content to canvas using native HTML-in-Canvas API (drawElementImage).
+* This is much faster than the foreignObject approach and avoids canvas tainting.
+* 
+* Note: The native API renders at device pixel ratio, so we capture at DPR scale
+* and then downsample to logical pixels to match the foreignObject path's output.
+* 
+* @param container - The HTML element to render
+* @param width - Target width in logical pixels
+* @param height - Target height in logical pixels
+* @param options - Rendering options (skipWait for batch mode)
+* 
+* @see https://github.com/WICG/html-in-canvas
+*/
+async function renderToImageNative(container, width, height, options = {}) {
+	const t0 = performance.now();
+	const { reuseCanvas, skipDprScaling = false } = options;
+	const dpr = skipDprScaling ? 1 : window.devicePixelRatio || 1;
+	let captureCanvas;
+	let shouldCleanup = false;
+	if (reuseCanvas) {
+		captureCanvas = reuseCanvas;
+		const dpr$1 = skipDprScaling ? 1 : window.devicePixelRatio || 1;
+		const targetWidth = Math.floor(width * dpr$1);
+		const targetHeight = Math.floor(height * dpr$1);
+		if (captureCanvas.width !== targetWidth) captureCanvas.width = targetWidth;
+		if (captureCanvas.height !== targetHeight) captureCanvas.height = targetHeight;
+		captureCanvas.style.cssText = `
+      position: fixed;
+      left: 0;
+      top: 0;
+      width: ${width}px;
+      height: ${height}px;
+      opacity: 0;
+      pointer-events: none;
+      z-index: -9999;
+    `;
+		if (!captureCanvas.hasAttribute("layoutsubtree")) {
+			captureCanvas.setAttribute("layoutsubtree", "");
+			captureCanvas.layoutSubtree = true;
+		}
+		if (!captureCanvas.parentNode) document.body.appendChild(captureCanvas);
+		if (container.parentElement !== captureCanvas) captureCanvas.appendChild(container);
+		if (getComputedStyle(container).display === "none") container.style.display = "block";
+		if (!_layoutInitializedCanvases.has(captureCanvas)) {
+			captureCanvas.offsetHeight;
+			container.offsetHeight;
+			getComputedStyle(captureCanvas).opacity;
+			getComputedStyle(container).opacity;
+			_layoutInitializedCanvases.add(captureCanvas);
+		}
+	} else {
+		captureCanvas = document.createElement("canvas");
+		captureCanvas.width = Math.floor(width * dpr);
+		captureCanvas.height = Math.floor(height * dpr);
+		captureCanvas.setAttribute("layoutsubtree", "");
+		captureCanvas.layoutSubtree = true;
+		captureCanvas.appendChild(container);
+		captureCanvas.style.cssText = `
+      position: fixed;
+      left: 0;
+      top: 0;
+      width: ${width}px;
+      height: ${height}px;
+      opacity: 0;
+      pointer-events: none;
+      z-index: -9999;
+    `;
+		document.body.appendChild(captureCanvas);
+		shouldCleanup = true;
+	}
+	const t1 = performance.now();
+	defaultProfiler.addTime("setup", t1 - t0);
+	try {
+		getComputedStyle(container).opacity;
+		if (reuseCanvas && captureCanvas.layoutSubtree && !_layoutInitializedCanvases.has(captureCanvas)) {
+			await waitForFrame();
+			_layoutInitializedCanvases.add(captureCanvas);
+			if (!captureCanvas.parentNode) return captureCanvas;
+		}
+		captureCanvas.getContext("2d").drawElementImage(container, 0, 0);
+	} finally {
+		if (shouldCleanup && captureCanvas.parentNode) captureCanvas.parentNode.removeChild(captureCanvas);
+	}
+	const t2 = performance.now();
+	defaultProfiler.addTime("draw", t2 - t1);
+	if (dpr === 1) {
+		defaultProfiler.incrementRenderCount();
+		return captureCanvas;
+	}
+	const outputCanvas = document.createElement("canvas");
+	outputCanvas.width = width;
+	outputCanvas.height = height;
+	outputCanvas.getContext("2d").drawImage(captureCanvas, 0, 0, captureCanvas.width, captureCanvas.height, 0, 0, width, height);
+	const t3 = performance.now();
+	defaultProfiler.addTime("downsample", t3 - t2);
+	defaultProfiler.incrementRenderCount();
+	return outputCanvas;
+}
+
+//#endregion
+export { createDprCanvas, renderToImageNative };
+//# sourceMappingURL=renderToImageNative.js.map

package/dist/preview/rendering/renderToImageNative.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderToImageNative.js","names":["captureCanvas: HTMLCanvasElement","dpr"],"sources":["../../../src/preview/rendering/renderToImageNative.ts"],"sourcesContent":["/**\n * Native HTML-in-Canvas rendering using drawElementImage API.\n */\n\nimport type { HtmlInCanvasContext, HtmlInCanvasElement, NativeRenderOptions } from \"./types.js\";\nimport { defaultProfiler } from \"../RenderProfiler.js\";\n\n/** Track canvases that have been initialized for layoutsubtree (only need to wait once) */\nconst _layoutInitializedCanvases = new WeakSet<HTMLCanvasElement>();\n\n/**\n * Wait for next animation frame (allows browser to complete layout)\n */\nfunction waitForFrame(): Promise<void> {\n  return new Promise(resolve => requestAnimationFrame(() => resolve()));\n}\n\n/**\n * Create a canvas element with proper DPR handling.\n * Buffer size is based on renderWidth/renderHeight (internal resolution).\n * CSS size is based on fullWidth/fullHeight (logical display size).\n */\nexport function createDprCanvas(options: {\n  renderWidth: number;\n  renderHeight: number;\n  scale: number;\n  dpr?: number;\n  fullWidth: number;\n  fullHeight: number;\n}): HTMLCanvasElement {\n  const { renderWidth, renderHeight, scale, fullWidth, fullHeight } = options;\n  const dpr = options.dpr ?? window.devicePixelRatio ?? 1;\n  \n  const canvas = document.createElement(\"canvas\");\n  canvas.width = Math.floor(renderWidth * scale * dpr);\n  canvas.height = Math.floor(renderHeight * scale * dpr);\n  canvas.style.width = `${Math.floor(fullWidth * scale)}px`;\n  canvas.style.height = `${Math.floor(fullHeight * scale)}px`;\n  \n  return canvas;\n}\n\n/**\n * Render HTML content to canvas using native HTML-in-Canvas API (drawElementImage).\n * This is much faster than the foreignObject approach and avoids canvas tainting.\n * \n * Note: The native API renders at device pixel ratio, so we capture at DPR scale\n * and then downsample to logical pixels to match the foreignObject path's output.\n * \n * @param container - The HTML element to render\n * @param width - Target width in logical pixels\n * @param height - Target height in logical pixels\n * @param options - Rendering options (skipWait for batch mode)\n * \n * @see https://github.com/WICG/html-in-canvas\n */\nexport async function renderToImageNative(\n  container: HTMLElement,\n  width: number,\n  height: number,\n  options: NativeRenderOptions = {},\n): Promise<HTMLCanvasElement> {\n  const t0 = performance.now();\n  const { reuseCanvas, skipDprScaling = false } = options;\n  // Use 1x DPR when skipDprScaling is true (for video export) - 4x fewer pixels!\n  const dpr = skipDprScaling ? 1 : (window.devicePixelRatio || 1);\n  \n  // Use provided canvas or create new one\n  let captureCanvas: HTMLCanvasElement;\n  let shouldCleanup = false;\n  \n  if (reuseCanvas) {\n    captureCanvas = reuseCanvas;\n    \n    // Ensure canvas dimensions match (both attribute and CSS)\n    const dpr = skipDprScaling ? 1 : (window.devicePixelRatio || 1);\n    const targetWidth = Math.floor(width * dpr);\n    const targetHeight = Math.floor(height * dpr);\n    \n    // Set attribute dimensions (pixel buffer size)\n    if (captureCanvas.width !== targetWidth) {\n      captureCanvas.width = targetWidth;\n    }\n    if (captureCanvas.height !== targetHeight) {\n      captureCanvas.height = targetHeight;\n    }\n    \n    // Ensure CSS dimensions and positioning (same as non-reuse path)\n    // This ensures consistent behavior and avoids layout issues\n    captureCanvas.style.cssText = `\n      position: fixed;\n      left: 0;\n      top: 0;\n      width: ${width}px;\n      height: ${height}px;\n      opacity: 0;\n      pointer-events: none;\n      z-index: -9999;\n    `;\n    \n    // Ensure layoutsubtree is set (required for drawElementImage)\n    if (!captureCanvas.hasAttribute(\"layoutsubtree\")) {\n      captureCanvas.setAttribute(\"layoutsubtree\", \"\");\n      (captureCanvas as HtmlInCanvasElement).layoutSubtree = true;\n    }\n    \n    // Ensure canvas is in DOM (required for drawElementImage layout)\n    if (!captureCanvas.parentNode) {\n      document.body.appendChild(captureCanvas);\n    }\n    \n    // Ensure container is child of canvas\n    if (container.parentElement !== captureCanvas) {\n      captureCanvas.appendChild(container);\n    }\n    \n    // Ensure container is visible (not display: none) for layout\n    // drawElementImage requires the element to be laid out\n    const containerStyle = getComputedStyle(container);\n    if (containerStyle.display === 'none') {\n      container.style.display = 'block';\n    }\n    \n    // Force synchronous layout ONLY on first use with this canvas\n    // For batch rendering (video export), repeated layout forces are expensive\n    // We only need to force layout once to ensure everything is ready\n    if (!_layoutInitializedCanvases.has(captureCanvas)) {\n      void captureCanvas.offsetHeight;\n      void container.offsetHeight;\n      getComputedStyle(captureCanvas).opacity;\n      getComputedStyle(container).opacity;\n      _layoutInitializedCanvases.add(captureCanvas);\n    }\n  } else {\n    captureCanvas = document.createElement(\"canvas\");\n    captureCanvas.width = Math.floor(width * dpr);\n    captureCanvas.height = Math.floor(height * dpr);\n    \n    // Enable HTML-in-Canvas mode via layoutsubtree attribute/property\n    captureCanvas.setAttribute(\"layoutsubtree\", \"\");\n    (captureCanvas as HtmlInCanvasElement).layoutSubtree = true;\n    \n    captureCanvas.appendChild(container);\n    \n    captureCanvas.style.cssText = `\n      position: fixed;\n      left: 0;\n      top: 0;\n      width: ${width}px;\n      height: ${height}px;\n      opacity: 0;\n      pointer-events: none;\n      z-index: -9999;\n    `;\n    document.body.appendChild(captureCanvas);\n    shouldCleanup = true;\n  }\n  \n  const t1 = performance.now();\n  defaultProfiler.addTime(\"setup\", t1 - t0);\n  \n  try {\n    // Force style calculation to ensure CSS is computed before capture\n    // This ensures both canvas and container are laid out (required for drawElementImage)\n    getComputedStyle(container).opacity;\n    \n    // When reusing canvas with layoutsubtree, wait for initial layout (first use only)\n    // Use a WeakSet to track canvases that have been initialized\n    if (reuseCanvas && (captureCanvas as any).layoutSubtree && !_layoutInitializedCanvases.has(captureCanvas)) {\n      await waitForFrame();\n      _layoutInitializedCanvases.add(captureCanvas);\n      \n      // Canvas may have been detached during async wait (e.g., test cleanup)\n      if (!captureCanvas.parentNode) {\n        return captureCanvas;\n      }\n    }\n    \n    const ctx = captureCanvas.getContext(\"2d\") as HtmlInCanvasContext;\n    ctx.drawElementImage(container, 0, 0);\n  } finally {\n    // Only clean up if we created the canvas\n    if (shouldCleanup && captureCanvas.parentNode) {\n      captureCanvas.parentNode.removeChild(captureCanvas);\n    }\n  }\n  \n  const t2 = performance.now();\n  defaultProfiler.addTime(\"draw\", t2 - t1);\n  \n  // If DPR is 1, no downsampling needed - return as-is\n  if (dpr === 1) {\n    defaultProfiler.incrementRenderCount();\n    return captureCanvas;\n  }\n  \n  // Downsample to logical pixel dimensions to match foreignObject path output\n  // This ensures consistent behavior regardless of which rendering path is used\n  const outputCanvas = document.createElement(\"canvas\");\n  outputCanvas.width = width;\n  outputCanvas.height = height;\n  \n  const outputCtx = outputCanvas.getContext(\"2d\")!;\n  // Draw the DPR-scaled capture onto the 1x output canvas\n  outputCtx.drawImage(\n    captureCanvas,\n    0, 0, captureCanvas.width, captureCanvas.height,  // source (full DPR capture)\n    0, 0, width, height  // destination (logical pixels)\n  );\n  \n  const t3 = performance.now();\n  defaultProfiler.addTime(\"downsample\", t3 - t2);\n  defaultProfiler.incrementRenderCount();\n  \n  return outputCanvas;\n}\n"],"mappings":"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"}

package/dist/preview/rendering/svgSerializer.js

@@ -0,0 +1,43 @@
+//#region src/preview/rendering/svgSerializer.ts
+/**
+* SVG serialization and base64 encoding utilities.
+*/
+const BASE64_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+/**
+* Fast base64 encoding directly from Uint8Array.
+* Optimized with array buffer pre-allocation and batch string building.
+* ~2-3x faster than string concatenation approach.
+*/
+function encodeBase64Fast(bytes) {
+	const len = bytes.length;
+	const outputLen = (len + 2) / 3 << 2;
+	const result = new Array(outputLen);
+	let i = 0;
+	let outIndex = 0;
+	const len3 = len - 2;
+	while (i < len3) {
+		const byte1 = bytes[i++];
+		const byte2 = bytes[i++];
+		const byte3 = bytes[i++];
+		const bitmap = byte1 << 16 | byte2 << 8 | byte3;
+		result[outIndex++] = BASE64_CHARS[bitmap >> 18 & 63];
+		result[outIndex++] = BASE64_CHARS[bitmap >> 12 & 63];
+		result[outIndex++] = BASE64_CHARS[bitmap >> 6 & 63];
+		result[outIndex++] = BASE64_CHARS[bitmap & 63];
+	}
+	const remaining = len - i;
+	if (remaining > 0) {
+		const byte1 = bytes[i++];
+		const byte2 = remaining > 1 ? bytes[i++] : 0;
+		const bitmap = byte1 << 16 | byte2 << 8;
+		result[outIndex++] = BASE64_CHARS[bitmap >> 18 & 63];
+		result[outIndex++] = BASE64_CHARS[bitmap >> 12 & 63];
+		result[outIndex++] = remaining > 1 ? BASE64_CHARS[bitmap >> 6 & 63] : "=";
+		result[outIndex++] = "=";
+	}
+	return result.join("");
+}
+
+//#endregion
+export { encodeBase64Fast };
+//# sourceMappingURL=svgSerializer.js.map

package/dist/preview/rendering/svgSerializer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgSerializer.js","names":[],"sources":["../../../src/preview/rendering/svgSerializer.ts"],"sourcesContent":["/**\n * SVG serialization and base64 encoding utilities.\n */\n\n// Pre-computed base64 lookup table as Uint8Array for faster indexing\nconst BASE64_CHARS = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/\";\n\n/**\n * Fast base64 encoding directly from Uint8Array.\n * Optimized with array buffer pre-allocation and batch string building.\n * ~2-3x faster than string concatenation approach.\n */\nexport function encodeBase64Fast(bytes: Uint8Array): string {\n  const len = bytes.length;\n  \n  // Pre-calculate output size: 4 chars per 3 bytes, rounded up\n  const outputLen = ((len + 2) / 3) << 2;\n  const result = new Array(outputLen);\n  \n  let i = 0;\n  let outIndex = 0;\n  \n  // Process 3 bytes at a time (produces 4 base64 chars)\n  // Unrolled for better performance\n  const len3 = len - 2;\n  while (i < len3) {\n    const byte1 = bytes[i++]!;\n    const byte2 = bytes[i++]!;\n    const byte3 = bytes[i++]!;\n    \n    const bitmap = (byte1 << 16) | (byte2 << 8) | byte3;\n    \n    result[outIndex++] = BASE64_CHARS[(bitmap >> 18) & 63];\n    result[outIndex++] = BASE64_CHARS[(bitmap >> 12) & 63];\n    result[outIndex++] = BASE64_CHARS[(bitmap >> 6) & 63];\n    result[outIndex++] = BASE64_CHARS[bitmap & 63];\n  }\n  \n  // Handle remaining bytes (1 or 2)\n  const remaining = len - i;\n  if (remaining > 0) {\n    const byte1 = bytes[i++]!;\n    const byte2 = remaining > 1 ? bytes[i++]! : 0;\n    const bitmap = (byte1 << 16) | (byte2 << 8);\n    \n    result[outIndex++] = BASE64_CHARS[(bitmap >> 18) & 63];\n    result[outIndex++] = BASE64_CHARS[(bitmap >> 12) & 63];\n    result[outIndex++] = remaining > 1 ? BASE64_CHARS[(bitmap >> 6) & 63] : \"=\";\n    result[outIndex++] = \"=\";\n  }\n  \n  return result.join(\"\");\n}\n"],"mappings":";;;;AAKA,MAAM,eAAe;;;;;;AAOrB,SAAgB,iBAAiB,OAA2B;CAC1D,MAAM,MAAM,MAAM;CAGlB,MAAM,aAAc,MAAM,KAAK,KAAM;CACrC,MAAM,SAAS,IAAI,MAAM,UAAU;CAEnC,IAAI,IAAI;CACR,IAAI,WAAW;CAIf,MAAM,OAAO,MAAM;AACnB,QAAO,IAAI,MAAM;EACf,MAAM,QAAQ,MAAM;EACpB,MAAM,QAAQ,MAAM;EACpB,MAAM,QAAQ,MAAM;EAEpB,MAAM,SAAU,SAAS,KAAO,SAAS,IAAK;AAE9C,SAAO,cAAc,aAAc,UAAU,KAAM;AACnD,SAAO,cAAc,aAAc,UAAU,KAAM;AACnD,SAAO,cAAc,aAAc,UAAU,IAAK;AAClD,SAAO,cAAc,aAAa,SAAS;;CAI7C,MAAM,YAAY,MAAM;AACxB,KAAI,YAAY,GAAG;EACjB,MAAM,QAAQ,MAAM;EACpB,MAAM,QAAQ,YAAY,IAAI,MAAM,OAAQ;EAC5C,MAAM,SAAU,SAAS,KAAO,SAAS;AAEzC,SAAO,cAAc,aAAc,UAAU,KAAM;AACnD,SAAO,cAAc,aAAc,UAAU,KAAM;AACnD,SAAO,cAAc,YAAY,IAAI,aAAc,UAAU,IAAK,MAAM;AACxE,SAAO,cAAc;;AAGvB,QAAO,OAAO,KAAK,GAAG"}

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

@@ -0,0 +1,2 @@
+import "../RenderContext.js";
+import "../encoding/types.js";

package/dist/preview/statsTrackingStrategy.js

@@ -1,3 +1,5 @@
+import { logger } from "./logger.js";
+
 //#region src/preview/statsTrackingStrategy.ts
 /**
 * Canvas mode stats tracking strategy.
@@ -34,7 +36,7 @@ var CanvasStatsStrategy = class {
 					this.updateStats(renderWidth, renderHeight, currentScale);
 				}
 			} catch (e) {
-				console.error("Canvas stats tracking failed:", e);
+				logger.error("Canvas stats tracking failed:", e);
 			}
 			this.animationFrame = requestAnimationFrame(loop);
 		};