@editframe/elements 0.37.2-beta → 0.38.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScaleConfig.js","names":[],"sources":["../../../src/preview/rendering/ScaleConfig.ts"],"sourcesContent":["/**\n * ScaleConfig - Unified scaling configuration for timeline serialization.\n *\n * Consolidates the multi-stage scaling architecture into a single,\n * well-defined abstraction with clear contracts.\n *\n * Previously, scaling was applied in 4 separate stages with implicit contracts:\n * 1. captureTimelineToDataUri: scaled output dimensions\n * 2. captureElementParts: CSS transform wrapper for DOM content\n * 3. serializeCanvas: independent optimalScale calculation per canvas\n * 4. encodeCanvasesInParallel: received pre-scaled snapshots\n *\n * Now, ScaleConfig centralizes all scaling logic and makes the contracts explicit.\n */\n\nexport interface CanvasScaleParams {\n  /** Natural canvas pixel dimensions */\n  naturalWidth: number;\n  naturalHeight: number;\n  /** CSS display dimensions (how big it appears) */\n  displayWidth: number;\n  displayHeight: number;\n}\n\n/**\n * Immutable scaling configuration for a serialization operation.\n *\n * All scaling decisions are computed once at construction and cached.\n * This ensures consistency across all stages of serialization.\n */\nexport class ScaleConfig {\n  /** User-specified export scale (e.g., 0.25 for thumbnails, 1.0 for full resolution) */\n  readonly exportScale: number;\n\n  /** Input dimensions (before scaling) */\n  readonly inputWidth: number;\n  readonly inputHeight: number;\n\n  /** Output SVG dimensions (after scaling) */\n  readonly outputWidth: number;\n  readonly outputHeight: number;\n\n  /** Whether DOM content needs CSS transform:scale() wrapper */\n  readonly needsDOMScaling: boolean;\n\n  /** Quality multiplier for canvas encoding (1.5x for sharpness) */\n  readonly qualityMultiplier: number = 1.5;\n\n  constructor(width: number, height: number, exportScale: number) {\n    this.inputWidth = width;\n    this.inputHeight = height;\n    this.exportScale = exportScale;\n\n    // Compute output dimensions (Stage 1)\n    this.outputWidth = Math.floor(width * exportScale);\n    this.outputHeight = Math.floor(height * exportScale);\n\n    // Determine if DOM needs CSS scaling (Stage 2)\n    this.needsDOMScaling = exportScale < 1;\n\n    // Freeze to ensure immutability\n    Object.freeze(this);\n  }\n\n  /**\n   * Compute optimal encoding scale for a canvas element.\n   *\n   * This is Stage 3 of the scaling architecture. Canvas pixels are scaled\n   * independently from DOM content because they have intrinsic resolution.\n   *\n   * Algorithm:\n   * 1. Calculate display scale (CSS size vs natural size)\n   * 2. Multiply by export scale\n   * 3. Multiply by quality multiplier (1.5x for sharpness)\n   * 4. Cap at 1.0 (never upscale beyond natural resolution)\n   *\n   * @param params - Canvas dimensions (natural and display)\n   * @returns Optimal scale for encoding (0.0 to 1.0)\n   */\n  computeCanvasScale(params: CanvasScaleParams): number {\n    const { naturalWidth, naturalHeight, displayWidth, displayHeight } = params;\n\n    // Calculate how much smaller the display is vs natural size\n    const displayScaleX = displayWidth / naturalWidth;\n    const displayScaleY = displayHeight / naturalHeight;\n    const displayScale = Math.min(displayScaleX, displayScaleY);\n\n    // Combine display scale, export scale, and quality multiplier\n    // Cap at 1.0 to never upscale beyond natural resolution\n    const optimalScale = Math.min(\n      1.0,\n      displayScale * this.exportScale * this.qualityMultiplier,\n    );\n\n    return optimalScale;\n  }\n\n  /**\n   * Get the CSS transform value for DOM scaling.\n   * Returns null if no scaling is needed.\n   */\n  getDOMTransform(): string | null {\n    return this.needsDOMScaling ? `scale(${this.exportScale})` : null;\n  }\n\n  /**\n   * Get the wrapper dimensions for the CSS transform.\n   * When DOM is scaled, the wrapper must be larger to accommodate\n   * the scaled-down content.\n   */\n  getDOMWrapperDimensions(): { width: number; height: number } {\n    if (!this.needsDOMScaling) {\n      return { width: this.outputWidth, height: this.outputHeight };\n    }\n\n    return {\n      width: Math.floor(this.outputWidth / this.exportScale),\n      height: Math.floor(this.outputHeight / this.exportScale),\n    };\n  }\n\n  /**\n   * Create a ScaleConfig from legacy options.\n   * Maintains backward compatibility with existing callsites.\n   */\n  static fromOptions(\n    width: number,\n    height: number,\n    canvasScale: number,\n  ): ScaleConfig {\n    return new ScaleConfig(width, height, canvasScale);\n  }\n}\n"],"mappings":";;;;;;;AA8BA,IAAa,cAAb,MAAa,YAAY;CAkBvB,YAAY,OAAe,QAAgB,aAAqB;2BAF3B;AAGnC,OAAK,aAAa;AAClB,OAAK,cAAc;AACnB,OAAK,cAAc;AAGnB,OAAK,cAAc,KAAK,MAAM,QAAQ,YAAY;AAClD,OAAK,eAAe,KAAK,MAAM,SAAS,YAAY;AAGpD,OAAK,kBAAkB,cAAc;AAGrC,SAAO,OAAO,KAAK;;;;;;;;;;;;;;;;;CAkBrB,mBAAmB,QAAmC;EACpD,MAAM,EAAE,cAAc,eAAe,cAAc,kBAAkB;EAGrE,MAAM,gBAAgB,eAAe;EACrC,MAAM,gBAAgB,gBAAgB;EACtC,MAAM,eAAe,KAAK,IAAI,eAAe,cAAc;AAS3D,SALqB,KAAK,IACxB,GACA,eAAe,KAAK,cAAc,KAAK,kBACxC;;;;;;CASH,kBAAiC;AAC/B,SAAO,KAAK,kBAAkB,SAAS,KAAK,YAAY,KAAK;;;;;;;CAQ/D,0BAA6D;AAC3D,MAAI,CAAC,KAAK,gBACR,QAAO;GAAE,OAAO,KAAK;GAAa,QAAQ,KAAK;GAAc;AAG/D,SAAO;GACL,OAAO,KAAK,MAAM,KAAK,cAAc,KAAK,YAAY;GACtD,QAAQ,KAAK,MAAM,KAAK,eAAe,KAAK,YAAY;GACzD;;;;;;CAOH,OAAO,YACL,OACA,QACA,aACa;AACb,SAAO,IAAI,YAAY,OAAO,QAAQ,YAAY"}

package/dist/preview/rendering/inlineImages.js

@@ -1,50 +1,7 @@
-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() {
@@ -52,5 +9,5 @@ function clearInlineImageCache() {
 }
 
 //#endregion
-export { clearInlineImageCache, inlineImages };
+export { clearInlineImageCache };
 //# sourceMappingURL=inlineImages.js.map

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

@@ -1 +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"}
+{"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":";;AAYA,MAAM,oCAAoB,IAAI,KAAqB;;;;AAoDnD,SAAgB,wBAA8B;AAC5C,mBAAkB,OAAO"}

package/dist/preview/rendering/loadImage.js

@@ -0,0 +1,22 @@
+import { defaultProfiler } from "../RenderProfiler.js";
+
+//#region src/preview/rendering/loadImage.ts
+/**
+* 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;
+	});
+}
+
+//#endregion
+export { loadImageFromDataUri };
+//# sourceMappingURL=loadImage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loadImage.js","names":[],"sources":["../../../src/preview/rendering/loadImage.ts"],"sourcesContent":["import { defaultProfiler } from \"../RenderProfiler.js\";\n\n/**\n * Load an image from a data URI. Returns a Promise that resolves when loaded.\n */\nexport function loadImageFromDataUri(\n  dataUri: string,\n): 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"],"mappings":";;;;;;AAKA,SAAgB,qBACd,SAC2B;CAC3B,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"}

package/dist/preview/rendering/renderToImageNative.js

@@ -27,15 +27,15 @@ function createDprCanvas(options) {
 /**
 * 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 = {}) {

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

@@ -1 +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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"}
+{"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 {\n  HtmlInCanvasContext,\n  HtmlInCanvasElement,\n  NativeRenderOptions,\n} 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 (\n      reuseCanvas &&\n      (captureCanvas as any).layoutSubtree &&\n      !_layoutInitializedCanvases.has(captureCanvas)\n    ) {\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,\n    0,\n    captureCanvas.width,\n    captureCanvas.height, // source (full DPR capture)\n    0,\n    0,\n    width,\n    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/serializeTimelineDirect.js

@@ -1,9 +1,23 @@
-import { isVisibleAtTime } from "../previewTypes.js";
-import { collectDocumentStyles } from "../renderTimegroupPreview.js";
 import { encodeCanvasesInParallel } from "../encoding/canvasEncoder.js";
+import { isTemporal, isVisibleAtTime } from "../previewTypes.js";
+import { ScaleConfig } from "./ScaleConfig.js";
 
 //#region src/preview/rendering/serializeTimelineDirect.ts
 /**
+* Collect document styles for shadow DOM injection.
+*/
+function collectDocumentStyles() {
+	const rules = [];
+	try {
+		for (const sheet of document.styleSheets) try {
+			if (sheet.cssRules) for (const rule of sheet.cssRules) rules.push(rule.cssText);
+		} catch {}
+	} catch (e) {
+		console.warn("[collectDocumentStyles] Failed to access document.styleSheets:", e);
+	}
+	return rules.join("\n");
+}
+/**
 * Elements to skip entirely when serializing.
 * NOTE: SLOT is NOT skipped - it's handled specially to serialize light DOM children.
 */
@@ -129,27 +143,50 @@ function escapeXML(str) {
 	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
 }
 /**
+* Resolve the natural display value for an element that has display:none
+* set as an inline style (e.g., from temporal visibility via updateAnimations).
+*
+* Temporarily removes the inline display override so getComputedStyle falls
+* through to the element's stylesheet rules (including shadow DOM :host styles),
+* reads the natural value, then restores the override.
+*/
+function resolveNaturalDisplay(element) {
+	const htmlEl = element;
+	if (htmlEl.style?.getPropertyValue("display") === "none" && htmlEl.style) {
+		htmlEl.style.removeProperty("display");
+		const natural = getComputedStyle(element).getPropertyValue("display");
+		htmlEl.style.setProperty("display", "none");
+		return natural || "block";
+	}
+	return "block";
+}
+/**
 * Serialize computed styles as inline style string.
-* Handles display:none → block conversion for non-caption elements
-* (temporal visibility is handled separately).
+* Handles display:none recovery for non-caption elements by resolving
+* the element's natural display value from its stylesheet rules.
+* @param element - The element to serialize styles for
+* @param styles - Optional pre-computed CSSStyleDeclaration (avoids redundant getComputedStyle calls)
 */
-function serializeComputedStyles(element) {
-	const styles = getComputedStyle(element);
+function serializeComputedStyles(element, styles) {
+	const computed = styles ?? getComputedStyle(element);
 	const styleParts = [];
 	const tagName = element.tagName;
 	const isCaptionChild = CAPTION_CHILD_TAGS.has(tagName);
+	const htmlEl = element;
+	const hasExplicitWidth = !!htmlEl.style?.getPropertyValue("width");
+	const hasExplicitHeight = !!htmlEl.style?.getPropertyValue("height");
 	for (const prop of SERIALIZED_STYLE_PROPERTIES) {
-		const value = styles[prop];
+		const kebab = prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+		const value = computed.getPropertyValue(kebab);
 		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 (value === "none" && !isCaptionChild) finalValue = resolveNaturalDisplay(element);
 		}
 		if (prop === "visibility") finalValue = "visible";
 		if (prop === "clipPath") continue;
-		const kebab = prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+		if (prop === "width" && !hasExplicitWidth) continue;
+		if (prop === "height" && !hasExplicitHeight) continue;
 		styleParts.push(`${kebab}:${finalValue}`);
 	}
 	styleParts.push("animation:none", "transition:none");
@@ -168,75 +205,153 @@ function serializeAttributes(element, parts) {
 /**
 * Check if a canvas element should preserve alpha channel.
 * EF-WAVEFORM always needs alpha, EF-IMAGE checks hasAlpha property.
+* EF-SURFACE needs alpha because:
+*   1. Without a target, its canvas is transparent and CSS background should show through
+*   2. The target element may have transparent content
+* Raw canvas elements must preserve alpha - we don't know what they contain.
 */
 function shouldPreserveAlpha(sourceElement) {
 	const tagName = sourceElement.tagName;
 	if (tagName === "EF-WAVEFORM") return true;
+	if (tagName === "EF-SURFACE") return true;
 	if (tagName === "EF-IMAGE") return "hasAlpha" in sourceElement && sourceElement.hasAlpha === true;
+	if (sourceElement instanceof HTMLCanvasElement) return true;
 	return false;
 }
 /**
+* Find the capture proxy canvas for an offscreen-rendered canvas.
+* When a canvas is transferred to offscreen via transferControlToOffscreen(),
+* the main thread can no longer read pixels from it. OffscreenCompositionCanvas
+* creates a hidden capture canvas (marked with data-offscreen-capture) that
+* receives ImageBitmap frames from the worker.
+*/
+function findCaptureProxy(canvas) {
+	const container = canvas.parentElement;
+	if (!container) return null;
+	return container.querySelector("canvas[data-offscreen-capture=\"true\"]");
+}
+/**
+* Read pixels directly from a WebGL canvas's drawing buffer via gl.readPixels().
+*
+* drawImage(webglCanvas) reads from the compositor's "presented" surface, which
+* is only refreshed during requestAnimationFrame / compositing cycles. In hidden
+* browser tabs, compositing is suspended, so drawImage returns stale pixels even
+* though gl.render() produced new content in the drawing buffer.
+*
+* readPixels() reads from the drawing buffer directly, bypassing the compositor.
+*
+* Returns null for non-WebGL canvases (getContext returns null when a different
+* context type is already active).
+*/
+function readWebGLPixels(canvas) {
+	const gl = canvas.getContext("webgl2") ?? canvas.getContext("webgl");
+	if (!gl) return null;
+	const width = canvas.width;
+	const height = canvas.height;
+	if (width === 0 || height === 0) return null;
+	gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+	const pixels = new Uint8Array(width * height * 4);
+	gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+	const rowSize = width * 4;
+	const halfHeight = Math.floor(height / 2);
+	const temp = new Uint8Array(rowSize);
+	for (let y = 0; y < halfHeight; y++) {
+		const topOffset = y * rowSize;
+		const bottomOffset = (height - 1 - y) * rowSize;
+		temp.set(pixels.subarray(topOffset, topOffset + rowSize));
+		pixels.set(pixels.subarray(bottomOffset, bottomOffset + rowSize), topOffset);
+		pixels.set(temp, bottomOffset);
+	}
+	return new Uint8ClampedArray(pixels.buffer);
+}
+/**
 * 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.
+*
+* For WebGL canvases, uses gl.readPixels() to bypass the compositor's
+* presentation layer (which is suspended in hidden browser tabs).
+*
+* For offscreen-rendered canvases, this automatically uses the capture proxy
+* canvas instead of the transferred display canvas.
 */
 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 sourceCanvas = findCaptureProxy(canvas) ?? canvas;
+	const targetWidth = Math.max(1, Math.floor(sourceCanvas.width * scale));
+	const targetHeight = Math.max(1, Math.floor(sourceCanvas.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);
+	if (ctx && sourceCanvas.width > 0 && sourceCanvas.height > 0) {
+		const glPixels = document.hidden ? readWebGLPixels(sourceCanvas) : null;
+		if (glPixels) {
+			const srcW = sourceCanvas.width;
+			const srcH = sourceCanvas.height;
+			const imageData = new ImageData(glPixels, srcW, srcH);
+			if (targetWidth === srcW && targetHeight === srcH) ctx.putImageData(imageData, 0, 0);
+			else {
+				const temp = document.createElement("canvas");
+				temp.width = srcW;
+				temp.height = srcH;
+				temp.getContext("2d").putImageData(imageData, 0, 0);
+				ctx.drawImage(temp, 0, 0, targetWidth, targetHeight);
+			}
+		} else ctx.drawImage(sourceCanvas, 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;
+	const sourceCanvas = findCaptureProxy(canvas) ?? canvas;
+	const width = sourceCanvas.width;
+	const height = sourceCanvas.height;
 	if (width === 0 || height === 0) return;
-	const styleStr = serializeComputedStyles(sourceElement);
 	const computedStyle = getComputedStyle(sourceElement);
+	const styleStr = serializeComputedStyles(sourceElement, computedStyle);
 	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 filteredParts = (styleStr ? styleStr.split(";").filter((s) => s.trim()) : []).filter((s) => {
+		const trimmed = s.trim();
+		return !trimmed.startsWith("width:") && !trimmed.startsWith("height:");
+	});
+	const displayWidth = computedWidth || `${width}px`;
+	const displayHeight = computedHeight || `${height}px`;
+	filteredParts.push(`width:${displayWidth}`);
+	filteredParts.push(`height:${displayHeight}`);
+	filteredParts.push(`display:block`);
+	const finalStyle = filteredParts.join(";");
 	const preserveAlpha = shouldPreserveAlpha(sourceElement);
-	let optimalScale = options.canvasScale;
-	const qualityMultiplier = 1.5;
+	let optimalScale = options.scaleConfig.exportScale;
 	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);
+		const cssWidth = parseFloat(computedWidth) || sourceCanvas.width;
+		const cssHeight = parseFloat(computedHeight) || sourceCanvas.height;
+		optimalScale = options.scaleConfig.computeCanvasScale({
+			naturalWidth: sourceCanvas.width,
+			naturalHeight: sourceCanvas.height,
+			displayWidth: cssWidth,
+			displayHeight: cssHeight
+		});
 	} 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);
+	options.sourceMap.set(snapshot, sourceElement);
 	const encodePromise = encodeCanvasesInParallel([snapshot], {
 		scale: 1,
 		renderContext: options.renderContext,
-		sourceMap
+		sourceMap: options.sourceMap
 	}).then((results) => results[0]?.dataUrl || "");
 	parts.push(encodePromise);
 	canvasJobs.push({
@@ -280,7 +395,8 @@ function serializeElement(element, parts, canvasJobs, options, parentIsSVG = fal
 		serializeSlottedContent(slotHost, parts, canvasJobs, options, parentIsSVG);
 		return;
 	}
-	if (!isTemporallyVisible(element, options.timeMs)) return;
+	if (!isVisibleAtTime(element, options.timeMs)) return;
+	if (isTemporal(element) && element.style?.getPropertyValue("display") === "none") return;
 	if (element.tagName.includes("-") && element.shadowRoot) {
 		const shadowCanvas = element.shadowRoot.querySelector("canvas");
 		if (shadowCanvas) {
@@ -292,9 +408,11 @@ function serializeElement(element, parts, canvasJobs, options, parentIsSVG = fal
 			serializeImageAsCanvas(element, shadowImg, parts, canvasJobs, options);
 			return;
 		}
-		const computedDisplay = getComputedStyle(element).display;
+		const computedStyle = getComputedStyle(element);
+		let computedDisplay = computedStyle.display;
+		if (computedDisplay === "none") computedDisplay = resolveNaturalDisplay(element);
 		const containerTag = computedDisplay === "inline" || computedDisplay === "inline-block" || computedDisplay === "inline-flex" ? "span" : "div";
-		let styleStr$1 = serializeComputedStyles(element);
+		let styleStr$1 = serializeComputedStyles(element, computedStyle);
 		parts.push(`<${containerTag}`);
 		for (const attr of element.attributes) {
 			const name = attr.name.toLowerCase();
@@ -334,46 +452,84 @@ function serializeElement(element, parts, canvasJobs, options, parentIsSVG = fal
 	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.
+* TextEncoder instance for SVG-to-base64 encoding.
+* encode() converts to UTF-8 bytes in a single native call, then we
+* base64-encode the bytes. ~33% overhead vs ~200% for percent-encoding.
 */
-function isTemporallyVisible(element, timeMs) {
-	if (!isVisibleAtTime(element, timeMs)) return false;
-	return true;
-}
+const textEncoder = new TextEncoder();
 /**
-* 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
+* Synchronous DOM capture phase. Walks the element tree, snapshots canvas
+* pixels, and kicks off async encoding. Returns parts array containing
+* string fragments and encoding promises.
+*
+* After this function returns, the source element's DOM is no longer
+* referenced — the clone can safely be seeked to the next frame.
+*
+* SCALING ARCHITECTURE (unified via ScaleConfig):
+*
+* ScaleConfig centralizes all scaling logic and provides:
+* 1. Output SVG dimensions (width * exportScale, height * exportScale)
+* 2. DOM scaling wrapper (CSS transform:scale when exportScale < 1)
+* 3. Per-canvas optimal encoding scale via computeCanvasScale()
+*
+* Canvas scaling is independent from DOM scaling because:
+* - Canvas elements have intrinsic pixel dimensions and can be downsampled
+*   efficiently before encoding (prevents encoding 1920px at full resolution
+*   when displayed at 420px)
+* - DOM content has no intrinsic resolution and must be scaled via CSS
+*   transforms, which the browser handles during SVG foreignObject rendering
+*
+* Example: 1920x1080 @ 0.5 export scale
+* - Output SVG: 960x540
+* - DOM wrapper: transform:scale(0.5) on 1920x1080 content
+* - Canvas (1920px displayed at 420px): encoded at ~0.16x (315px)
+*   via computeCanvasScale(420/1920 * 0.5 * 1.5 quality = 0.164)
 */
-async function serializeTimelineToXHTML(timeline, width, height, options) {
+function captureElementParts(element, 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;">`);
+	const sourceMap = /* @__PURE__ */ new WeakMap();
+	const scaleConfig = ScaleConfig.fromOptions(width, height, options.canvasScale);
+	const documentStyles = options.renderContext?.getCachedDocumentStyles() ?? collectDocumentStyles();
+	if (options.renderContext && documentStyles) options.renderContext.setCachedDocumentStyles(documentStyles);
+	parts.push(`<div xmlns="http://www.w3.org/1999/xhtml" style="width:${scaleConfig.outputWidth}px;height:${scaleConfig.outputHeight}px;overflow:hidden;position:relative;">`);
 	if (documentStyles) parts.push(`<style type="text/css"><![CDATA[${documentStyles}]]></style>`);
-	serializeElement(timeline, parts, canvasJobs, options);
+	const domTransform = scaleConfig.getDOMTransform();
+	if (domTransform) {
+		const wrapperDims = scaleConfig.getDOMWrapperDimensions();
+		parts.push(`<div style="transform:${domTransform};transform-origin:0 0;width:${wrapperDims.width}px;height:${wrapperDims.height}px;">`);
+	}
+	serializeElement(element, parts, canvasJobs, {
+		renderContext: options.renderContext,
+		timeMs: options.timeMs,
+		scaleConfig,
+		sourceMap
+	});
+	if (domTransform) parts.push("</div>");
 	parts.push("</div>");
-	return (await Promise.all(parts)).join("");
+	return parts;
 }
 /**
-* 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
+* Synchronous capture with deferred data URI encoding.
+*
+* Walks the DOM and snapshots canvas pixels synchronously, then returns
+* a promise that resolves to the SVG data URI once async canvas-to-base64
+* encoding completes. The source element is NOT referenced after this
+* function returns — the caller can immediately mutate/seek the clone.
 */
-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)}`;
+function captureTimelineToDataUri(element, width, height, options) {
+	const scaleConfig = ScaleConfig.fromOptions(width, height, options.canvasScale);
+	const parts = captureElementParts(element, width, height, options);
+	return Promise.all(parts).then((resolvedParts) => {
+		const xhtml = resolvedParts.join("");
+		const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${scaleConfig.outputWidth}" height="${scaleConfig.outputHeight}"><foreignObject x="0" y="0" width="${scaleConfig.outputWidth}" height="${scaleConfig.outputHeight}">${xhtml}</foreignObject></svg>`;
+		const bytes = textEncoder.encode(svg);
+		let binary = "";
+		for (let i = 0; i < bytes.length; i += 8192) binary += String.fromCharCode.apply(null, bytes.subarray(i, i + 8192));
+		return `data:image/svg+xml;base64,${btoa(binary)}`;
+	});
 }
 
 //#endregion
-export { serializeTimelineToDataUri };
+export { captureTimelineToDataUri };
 //# sourceMappingURL=serializeTimelineDirect.js.map