@editframe/elements 0.35.0-beta → 0.36.1-beta

package/dist/preview/rendering/renderToImage.js

@@ -89,32 +89,7 @@ async function renderToImage(container, width, height, options) {
 	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 };
+export { loadImageFromDataUri, renderToImage };
 //# sourceMappingURL=renderToImage.js.map

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

@@ -1 +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"}
+{"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 type { RenderContext } from \"../RenderContext.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  options?: {\n    renderContext?: RenderContext;\n    sourceMap?: WeakMap<HTMLCanvasElement, Element>;\n    canvasScale?: number;\n  },\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    renderContext: options?.renderContext,\n    sourceMap: options?.sourceMap,\n    canvasScale: options?.canvasScale ?? 1,\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":";;;;;;;;;;;;AAkBA,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"}

package/dist/preview/rendering/renderToImageForeignObject.js

@@ -41,25 +41,53 @@ async function serializeToSvgDataUri(container, width, height, options = {}) {
 	const canvasStart = performance.now();
 	const visibleCanvases = Array.from(container.querySelectorAll("canvas")).filter((canvas) => !isElementHidden(canvas));
 	const canvasSnapshots = [];
+	const qualityMultiplier = 1.5;
 	for (let i = 0; i < visibleCanvases.length; i++) {
 		const canvas = visibleCanvases[i];
 		if (canvas.width > 0 && canvas.height > 0) {
+			let optimalScale = canvasScale;
+			if (sourceMap) {
+				const sourceElement = sourceMap.get(canvas);
+				if (sourceElement) try {
+					const computedStyle = getComputedStyle(sourceElement);
+					const cssWidth = parseFloat(computedStyle.width) || canvas.width;
+					const cssHeight = parseFloat(computedStyle.height) || canvas.height;
+					const displayScaleX = cssWidth / canvas.width;
+					const displayScaleY = cssHeight / canvas.height;
+					const displayScale = Math.min(displayScaleX, displayScaleY);
+					optimalScale = Math.min(1, displayScale * canvasScale * qualityMultiplier);
+					console.log(`[serializeToSvg] Canvas ${canvas.width}x${canvas.height} -> CSS ${cssWidth.toFixed(0)}x${cssHeight.toFixed(0)}, displayScale=${displayScale.toFixed(3)}, videoScale=${canvasScale}, optimalScale=${optimalScale.toFixed(3)}`);
+				} catch (e) {
+					console.warn(`[serializeToSvg] Failed to get computed style for ${sourceElement.tagName}:`, e);
+				}
+			}
+			const targetWidth = Math.max(1, Math.floor(canvas.width * optimalScale));
+			const targetHeight = Math.max(1, Math.floor(canvas.height * optimalScale));
 			const copy = document.createElement("canvas");
-			copy.width = canvas.width;
-			copy.height = canvas.height;
+			copy.width = targetWidth;
+			copy.height = targetHeight;
 			if (canvas.dataset.preserveAlpha) copy.dataset.preserveAlpha = canvas.dataset.preserveAlpha;
 			const ctx = copy.getContext("2d");
-			if (ctx) ctx.drawImage(canvas, 0, 0);
+			if (ctx) ctx.drawImage(canvas, 0, 0, targetWidth, targetHeight);
 			canvasSnapshots.push({
 				original: canvas,
 				copy
 			});
 		}
 	}
-	const encodedWithOriginals = (await encodeCanvasesInParallel(canvasSnapshots.map((s) => s.copy), {
-		scale: canvasScale,
+	const snapshotCanvases = canvasSnapshots.map((s) => s.copy);
+	let snapshotSourceMap;
+	if (sourceMap) {
+		snapshotSourceMap = /* @__PURE__ */ new WeakMap();
+		for (const { original, copy } of canvasSnapshots) {
+			const sourceElement = sourceMap.get(original);
+			if (sourceElement) snapshotSourceMap.set(copy, sourceElement);
+		}
+	}
+	const encodedWithOriginals = (await encodeCanvasesInParallel(snapshotCanvases, {
+		scale: 1,
 		renderContext,
-		sourceMap
+		sourceMap: snapshotSourceMap
 	})).map((result) => {
 		const snapshot = canvasSnapshots.find((s) => s.copy === result.canvas);
 		return {

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

@@ -1 +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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"}
+{"version":3,"file":"renderToImageForeignObject.js","names":["_xmlSerializer: XMLSerializer | null","_textEncoder: TextEncoder | null","current: Element | null","canvasRestoreInfo: CanvasRestoreInfo[]","canvasSnapshots: { original: HTMLCanvasElement; copy: HTMLCanvasElement }[]","snapshotSourceMap: WeakMap<HTMLCanvasElement, Element> | undefined","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  // \n  // OPTIMIZATION: Calculate optimal encoding resolution based on:\n  // 1. CSS display size (how big it actually appears)\n  // 2. Video export scale (output resolution multiplier)\n  // 3. Quality multiplier (for sharpness, default 1.5x)\n  const canvasSnapshots: { original: HTMLCanvasElement; copy: HTMLCanvasElement }[] = [];\n  const qualityMultiplier = 1.5; // Encode at 1.5x display size for quality\n  \n  for (let i = 0; i < visibleCanvases.length; i++) {\n    const canvas = visibleCanvases[i]!;\n    if (canvas.width > 0 && canvas.height > 0) {\n      // Calculate optimal encoding scale\n      let optimalScale = canvasScale; // Start with video export scale\n      \n      // If we have sourceMap, calculate based on CSS display size\n      if (sourceMap) {\n        const sourceElement = sourceMap.get(canvas);\n        if (sourceElement) {\n          try {\n            const computedStyle = getComputedStyle(sourceElement);\n            const cssWidth = parseFloat(computedStyle.width) || canvas.width;\n            const cssHeight = parseFloat(computedStyle.height) || canvas.height;\n            \n            // Calculate how much smaller the display is vs natural size\n            const displayScaleX = cssWidth / canvas.width;\n            const displayScaleY = cssHeight / canvas.height;\n            const displayScale = Math.min(displayScaleX, displayScaleY);\n            \n            // Combine display scale, video scale, and quality multiplier\n            // Clamp to 1.0 max (never upscale beyond natural resolution)\n            optimalScale = Math.min(1.0, displayScale * canvasScale * qualityMultiplier);\n            \n            console.log(`[serializeToSvg] Canvas ${canvas.width}x${canvas.height} -> CSS ${cssWidth.toFixed(0)}x${cssHeight.toFixed(0)}, displayScale=${displayScale.toFixed(3)}, videoScale=${canvasScale}, optimalScale=${optimalScale.toFixed(3)}`);\n          } catch (e) {\n            // Fallback to just video scale if we can't get computed style\n            console.warn(`[serializeToSvg] Failed to get computed style for ${sourceElement.tagName}:`, e);\n          }\n        }\n      }\n      \n      // Create snapshot at optimal resolution\n      const targetWidth = Math.max(1, Math.floor(canvas.width * optimalScale));\n      const targetHeight = Math.max(1, Math.floor(canvas.height * optimalScale));\n      \n      const copy = document.createElement(\"canvas\");\n      copy.width = targetWidth;\n      copy.height = targetHeight;\n      \n      // Copy dataset attributes (e.g., preserveAlpha)\n      if (canvas.dataset.preserveAlpha) {\n        copy.dataset.preserveAlpha = canvas.dataset.preserveAlpha;\n      }\n      \n      const ctx = copy.getContext(\"2d\");\n      if (ctx) {\n        // drawImage with scaling is SYNCHRONOUS - pixels are copied and scaled immediately\n        ctx.drawImage(canvas, 0, 0, targetWidth, targetHeight);\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  \n  // Create a new sourceMap that maps snapshot canvases to their source elements\n  // The original sourceMap maps original canvases -> source elements\n  // We need snapshot canvases -> source elements for caching to work\n  let snapshotSourceMap: WeakMap<HTMLCanvasElement, Element> | undefined;\n  if (sourceMap) {\n    snapshotSourceMap = new WeakMap();\n    for (const { original, copy } of canvasSnapshots) {\n      const sourceElement = sourceMap.get(original);\n      if (sourceElement) {\n        snapshotSourceMap.set(copy, sourceElement);\n      }\n    }\n  }\n  \n  // Snapshots are already scaled to optimal resolution, so encode at 1.0 scale\n  const encodedResults = await encodeCanvasesInParallel(snapshotCanvases, { \n    scale: 1.0, // Already scaled during snapshot creation\n    renderContext,\n    sourceMap: snapshotSourceMap,\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/serializeTimelineDirect.js

@@ -0,0 +1,379 @@
+import { isVisibleAtTime } from "../previewTypes.js";
+import { collectDocumentStyles } from "../renderTimegroupPreview.js";
+import { encodeCanvasesInParallel } from "../encoding/canvasEncoder.js";
+
+//#region src/preview/rendering/serializeTimelineDirect.ts
+/**
+* Elements to skip entirely when serializing.
+* NOTE: SLOT is NOT skipped - it's handled specially to serialize light DOM children.
+*/
+const SKIP_TAGS = new Set([
+	"EF-AUDIO",
+	"EF-THUMBNAIL-STRIP",
+	"EF-FILMSTRIP",
+	"EF-TIMELINE",
+	"EF-WORKBENCH",
+	"SCRIPT",
+	"STYLE",
+	"TEMPLATE"
+]);
+/**
+* HTML void elements - these cannot have children and must be self-closing in XHTML.
+* Using `<br />` instead of `<br></br>`.
+*/
+const VOID_ELEMENTS = new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+]);
+/**
+* CSS properties to serialize as inline styles.
+*/
+const SERIALIZED_STYLE_PROPERTIES = [
+	"display",
+	"visibility",
+	"opacity",
+	"position",
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"zIndex",
+	"width",
+	"height",
+	"minWidth",
+	"minHeight",
+	"maxWidth",
+	"maxHeight",
+	"flexGrow",
+	"flexShrink",
+	"flexBasis",
+	"flexDirection",
+	"flexWrap",
+	"justifyContent",
+	"alignItems",
+	"alignContent",
+	"alignSelf",
+	"gap",
+	"gridTemplate",
+	"gridColumn",
+	"gridRow",
+	"gridArea",
+	"margin",
+	"padding",
+	"boxSizing",
+	"border",
+	"borderTop",
+	"borderRight",
+	"borderBottom",
+	"borderLeft",
+	"borderRadius",
+	"background",
+	"color",
+	"boxShadow",
+	"filter",
+	"backdropFilter",
+	"clipPath",
+	"fontFamily",
+	"fontSize",
+	"fontWeight",
+	"fontStyle",
+	"fontVariant",
+	"textAlign",
+	"textDecoration",
+	"textTransform",
+	"letterSpacing",
+	"wordSpacing",
+	"whiteSpace",
+	"textOverflow",
+	"lineHeight",
+	"verticalAlign",
+	"transform",
+	"transformOrigin",
+	"transformStyle",
+	"perspective",
+	"perspectiveOrigin",
+	"backfaceVisibility",
+	"cursor",
+	"pointerEvents",
+	"userSelect",
+	"overflow",
+	"objectFit",
+	"objectPosition"
+];
+/**
+* Caption child elements that should preserve display:none.
+* These use display:none for content visibility, not temporal visibility.
+*/
+const CAPTION_CHILD_TAGS = new Set([
+	"EF-CAPTIONS-ACTIVE-WORD",
+	"EF-CAPTIONS-BEFORE-ACTIVE-WORD",
+	"EF-CAPTIONS-AFTER-ACTIVE-WORD",
+	"EF-CAPTIONS-SEGMENT"
+]);
+/**
+* Escape special XML characters.
+*/
+function escapeXML(str) {
+	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
+/**
+* Serialize computed styles as inline style string.
+* Handles display:none → block conversion for non-caption elements
+* (temporal visibility is handled separately).
+*/
+function serializeComputedStyles(element) {
+	const styles = getComputedStyle(element);
+	const styleParts = [];
+	const tagName = element.tagName;
+	const isCaptionChild = CAPTION_CHILD_TAGS.has(tagName);
+	for (const prop of SERIALIZED_STYLE_PROPERTIES) {
+		const value = styles[prop];
+		if (!value || value === "") continue;
+		let finalValue = value;
+		if (prop === "display") {
+			if (tagName === "EF-TEXT") finalValue = element.getAttribute("split") === "line" ? "flex" : "inline-flex";
+			else if (tagName === "EF-TEXT-SEGMENT") finalValue = element.hasAttribute("data-line-segment") ? "block" : "inline-block";
+			else if (value === "none" && !isCaptionChild) finalValue = "block";
+		}
+		if (prop === "visibility") finalValue = "visible";
+		if (prop === "clipPath") continue;
+		const kebab = prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+		styleParts.push(`${kebab}:${finalValue}`);
+	}
+	styleParts.push("animation:none", "transition:none");
+	return styleParts.join(";");
+}
+/**
+* Serialize element attributes (excluding style, id, xmlns, event handlers).
+*/
+function serializeAttributes(element, parts) {
+	for (const attr of element.attributes) {
+		const name = attr.name.toLowerCase();
+		if (name === "id" || name === "style" || name === "xmlns" || name.startsWith("on")) continue;
+		parts.push(` ${attr.name}="${escapeXML(attr.value)}"`);
+	}
+}
+/**
+* Check if a canvas element should preserve alpha channel.
+* EF-WAVEFORM always needs alpha, EF-IMAGE checks hasAlpha property.
+*/
+function shouldPreserveAlpha(sourceElement) {
+	const tagName = sourceElement.tagName;
+	if (tagName === "EF-WAVEFORM") return true;
+	if (tagName === "EF-IMAGE") return "hasAlpha" in sourceElement && sourceElement.hasAlpha === true;
+	return false;
+}
+/**
+* Create a snapshot copy of a canvas's current pixels.
+* This captures the pixels synchronously before any async encoding,
+* preventing race conditions where the source canvas is modified.
+*/
+function snapshotCanvas(canvas, scale, preserveAlpha) {
+	const targetWidth = Math.max(1, Math.floor(canvas.width * scale));
+	const targetHeight = Math.max(1, Math.floor(canvas.height * scale));
+	const copy = document.createElement("canvas");
+	copy.width = targetWidth;
+	copy.height = targetHeight;
+	if (preserveAlpha) copy.dataset.preserveAlpha = "true";
+	const ctx = copy.getContext("2d");
+	if (ctx && canvas.width > 0 && canvas.height > 0) ctx.drawImage(canvas, 0, 0, targetWidth, targetHeight);
+	return copy;
+}
+/**
+* Serialize a canvas element as an <img> with base64 data URL.
+* Creates a snapshot of current pixels before async encoding to prevent race conditions.
+* 
+* OPTIMIZATION: Calculate optimal encoding resolution based on:
+* 1. CSS display size (how big it actually appears)
+* 2. Video export scale (output resolution multiplier)
+* 3. Quality multiplier (for sharpness, default 1.5x)
+*/
+function serializeCanvas(sourceElement, canvas, parts, canvasJobs, options) {
+	const width = canvas.width;
+	const height = canvas.height;
+	if (width === 0 || height === 0) return;
+	const styleStr = serializeComputedStyles(sourceElement);
+	const computedStyle = getComputedStyle(sourceElement);
+	const computedWidth = computedStyle.width;
+	const computedHeight = computedStyle.height;
+	const styleParts = styleStr ? styleStr.split(";").filter((s) => s.trim()) : [];
+	const hasWidth = styleParts.some((s) => s.trim().startsWith("width:"));
+	const hasHeight = styleParts.some((s) => s.trim().startsWith("height:"));
+	if (!hasWidth) styleParts.push(`width:${computedWidth || `${width}px`}`);
+	if (!hasHeight) styleParts.push(`height:${computedHeight || `${height}px`}`);
+	styleParts.push(`display:block`);
+	const finalStyle = styleParts.join(";");
+	const preserveAlpha = shouldPreserveAlpha(sourceElement);
+	let optimalScale = options.canvasScale;
+	const qualityMultiplier = 1.5;
+	try {
+		const cssWidth = parseFloat(computedWidth) || canvas.width;
+		const cssHeight = parseFloat(computedHeight) || canvas.height;
+		const displayScaleX = cssWidth / canvas.width;
+		const displayScaleY = cssHeight / canvas.height;
+		const displayScale = Math.min(displayScaleX, displayScaleY);
+		optimalScale = Math.min(1, displayScale * options.canvasScale * qualityMultiplier);
+	} catch (e) {
+		console.warn(`[serializeCanvas] Failed to get computed style for ${sourceElement.tagName}:`, e);
+	}
+	const snapshot = snapshotCanvas(canvas, optimalScale, preserveAlpha);
+	parts.push(`<img style="${escapeXML(finalStyle)}" src="`);
+	const promiseIndex = parts.length;
+	const sourceMap = /* @__PURE__ */ new WeakMap();
+	sourceMap.set(snapshot, sourceElement);
+	const encodePromise = encodeCanvasesInParallel([snapshot], {
+		scale: 1,
+		renderContext: options.renderContext,
+		sourceMap
+	}).then((results) => results[0]?.dataUrl || "");
+	parts.push(encodePromise);
+	canvasJobs.push({
+		canvas: snapshot,
+		sourceElement,
+		promiseIndex
+	});
+	parts.push("\" />");
+}
+/**
+* Serialize an image element as a canvas (for shadow DOM img elements).
+*/
+function serializeImageAsCanvas(sourceElement, img, parts, canvasJobs, options) {
+	const canvas = document.createElement("canvas");
+	canvas.width = img.naturalWidth;
+	canvas.height = img.naturalHeight;
+	const ctx = canvas.getContext("2d");
+	if (ctx) try {
+		ctx.drawImage(img, 0, 0);
+	} catch (e) {
+		return;
+	}
+	serializeCanvas(sourceElement, canvas, parts, canvasJobs, options);
+}
+/**
+* Serialize slotted light DOM children of a host element.
+*/
+function serializeSlottedContent(slotHost, parts, canvasJobs, options, parentIsSVG) {
+	for (const slottedChild of slotHost.childNodes) if (slottedChild.nodeType === Node.TEXT_NODE) {
+		const text = slottedChild.textContent;
+		if (text && text.length > 0) parts.push(escapeXML(text));
+	} else if (slottedChild.nodeType === Node.ELEMENT_NODE) serializeElement(slottedChild, parts, canvasJobs, options, parentIsSVG, null);
+}
+/**
+* Recursively serialize an element and its children to XML parts.
+* @param slotHost - When serializing inside shadow DOM, the custom element whose light DOM children should be serialized for slots
+*/
+function serializeElement(element, parts, canvasJobs, options, parentIsSVG = false, slotHost = null) {
+	if (SKIP_TAGS.has(element.tagName)) return;
+	if (element.tagName === "SLOT" && slotHost) {
+		serializeSlottedContent(slotHost, parts, canvasJobs, options, parentIsSVG);
+		return;
+	}
+	if (!isTemporallyVisible(element, options.timeMs)) return;
+	if (element.tagName.includes("-") && element.shadowRoot) {
+		const shadowCanvas = element.shadowRoot.querySelector("canvas");
+		if (shadowCanvas) {
+			serializeCanvas(element, shadowCanvas, parts, canvasJobs, options);
+			return;
+		}
+		const shadowImg = element.shadowRoot.querySelector("img");
+		if (shadowImg?.complete && shadowImg.naturalWidth > 0) {
+			serializeImageAsCanvas(element, shadowImg, parts, canvasJobs, options);
+			return;
+		}
+		const computedDisplay = getComputedStyle(element).display;
+		const containerTag = computedDisplay === "inline" || computedDisplay === "inline-block" || computedDisplay === "inline-flex" ? "span" : "div";
+		let styleStr$1 = serializeComputedStyles(element);
+		parts.push(`<${containerTag}`);
+		for (const attr of element.attributes) {
+			const name = attr.name.toLowerCase();
+			if (name === "class" || name.startsWith("data-")) parts.push(` ${attr.name}="${escapeXML(attr.value)}"`);
+		}
+		if (styleStr$1) parts.push(` style="${escapeXML(styleStr$1)}"`);
+		parts.push(">");
+		for (const child of element.shadowRoot.childNodes) if (child.nodeType === Node.TEXT_NODE) {
+			const text = child.textContent;
+			if (text && text.length > 0) parts.push(escapeXML(text));
+		} else if (child.nodeType === Node.ELEMENT_NODE) serializeElement(child, parts, canvasJobs, options, parentIsSVG, element);
+		parts.push(`</${containerTag}>`);
+		return;
+	}
+	if (element instanceof HTMLCanvasElement) {
+		serializeCanvas(element, element, parts, canvasJobs, options);
+		return;
+	}
+	const tagName = element.tagName.toLowerCase();
+	const isSVG = element instanceof SVGElement;
+	const isVoid = VOID_ELEMENTS.has(tagName);
+	if (isSVG && !parentIsSVG) parts.push(`<${tagName} xmlns="http://www.w3.org/2000/svg"`);
+	else parts.push(`<${tagName}`);
+	serializeAttributes(element, parts);
+	const styleStr = serializeComputedStyles(element);
+	if (styleStr) parts.push(` style="${escapeXML(styleStr)}"`);
+	if (isVoid) {
+		parts.push(" />");
+		return;
+	}
+	parts.push(">");
+	const children = element.shadowRoot?.childNodes || element.childNodes;
+	for (const child of children) if (child.nodeType === Node.TEXT_NODE) {
+		const text = child.textContent;
+		if (text && text.length > 0) parts.push(escapeXML(text));
+	} else if (child.nodeType === Node.ELEMENT_NODE) serializeElement(child, parts, canvasJobs, options, isSVG, slotHost);
+	parts.push(`</${tagName}>`);
+}
+/**
+* Check if an element is temporally visible at the given time.
+* Returns false if the element or any ancestor is outside its temporal bounds.
+*/
+function isTemporallyVisible(element, timeMs) {
+	if (!isVisibleAtTime(element, timeMs)) return false;
+	return true;
+}
+/**
+* Serialize a timeline element directly to XHTML string.
+* 
+* @param timeline - The timeline element to serialize (e.g., EFTimegroup)
+* @param width - Output width
+* @param height - Output height
+* @param options - Serialization options (renderContext, canvasScale, timeMs)
+* @returns XHTML string with all canvases encoded as base64 data URLs
+*/
+async function serializeTimelineToXHTML(timeline, width, height, options) {
+	const parts = [];
+	const canvasJobs = [];
+	const documentStyles = collectDocumentStyles();
+	parts.push(`<div xmlns="http://www.w3.org/1999/xhtml" style="width:${width}px;height:${height}px;overflow:hidden;position:relative;">`);
+	if (documentStyles) parts.push(`<style type="text/css"><![CDATA[${documentStyles}]]></style>`);
+	serializeElement(timeline, parts, canvasJobs, options);
+	parts.push("</div>");
+	return (await Promise.all(parts)).join("");
+}
+/**
+* Serialize timeline to SVG foreignObject data URI (ready for rendering).
+* 
+* @param timeline - The timeline element to serialize
+* @param width - Output width
+* @param height - Output height
+* @param options - Serialization options
+* @returns SVG data URI
+*/
+async function serializeTimelineToDataUri(timeline, width, height, options) {
+	const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><foreignObject x="0" y="0" width="${width}" height="${height}">${await serializeTimelineToXHTML(timeline, width, height, options)}</foreignObject></svg>`;
+	return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
+
+//#endregion
+export { serializeTimelineToDataUri };
+//# sourceMappingURL=serializeTimelineDirect.js.map