@editframe/elements 0.33.0-beta → 0.34.6-beta

package/dist/preview/renderTimegroupPreview.js

@@ -1,3 +1,4 @@
+import { logger } from "./logger.js";
 import { getTemporalBounds, isTemporal, isVisibleAtTime } from "./previewTypes.js";
 
 //#region src/preview/renderTimegroupPreview.ts
@@ -77,15 +78,6 @@ const SYNC_PROPERTIES = [
 	"userSelect",
 	"overflow"
 ];
-/** Set version of SYNC_PROPERTIES for O(1) validation lookups */
-const SYNC_PROPERTIES_SET = new Set(SYNC_PROPERTIES);
-/**
-* Validation state for property change detection.
-* Reset via resetPropertyValidation() at start of export.
-*/
-let _propertyValidationEnabled = false;
-let _validationFrameCount = 0;
-let _baselineSnapshot = null;
 /**
 * Kebab-case versions for computedStyleMap.get() - pre-computed for speed.
 */
@@ -162,24 +154,90 @@ function isDefaultValue(prop, value) {
 	return defaults === value;
 }
 /**
+* Remove hidden nodes from the clone DOM for serialization.
+* Returns info needed to restore them afterward.
+* 
+* This physically removes non-visible nodes so they won't be serialized,
+* avoiding the cost of serializing hidden elements and their resources.
+*/
+function removeHiddenNodesForSerialization(state) {
+	const removed = [];
+	const visibleSet = state.currentVisibleSet;
+	function visit(node) {
+		for (const child of node.children) visit(child);
+		if (!visibleSet.has(node)) {
+			const parent = node.clone.parentNode;
+			if (parent) {
+				const nextSibling = node.clone.nextSibling;
+				parent.removeChild(node.clone);
+				removed.push({
+					node,
+					parent,
+					nextSibling
+				});
+			}
+		}
+	}
+	if (state.tree.root) visit(state.tree.root);
+	return removed;
+}
+/**
+* Restore previously removed hidden nodes to the clone DOM.
+* Must be called after serialization to maintain tree integrity for next frame.
+*/
+function restoreHiddenNodes(removed) {
+	for (let i = removed.length - 1; i >= 0; i--) {
+		const { node, parent, nextSibling } = removed[i];
+		if (nextSibling) parent.insertBefore(node.clone, nextSibling);
+		else parent.appendChild(node.clone);
+	}
+}
+/**
+* Helper to copy styles from host and content elements to a canvas clone.
+* Reduces code duplication for shadow canvas and shadow img cases.
+*/
+function copyCanvasCloneStyles(clone, hostCs, contentCs) {
+	const s = clone.style;
+	s.position = hostCs.position;
+	s.top = hostCs.top;
+	s.right = hostCs.right;
+	s.bottom = hostCs.bottom;
+	s.left = hostCs.left;
+	s.margin = hostCs.margin;
+	s.zIndex = hostCs.zIndex;
+	s.transform = hostCs.transform;
+	s.transformOrigin = hostCs.transformOrigin;
+	s.opacity = hostCs.opacity;
+	s.visibility = hostCs.visibility;
+	s.width = contentCs.width;
+	s.height = contentCs.height;
+	s.display = "block";
+	s.animation = "none";
+	s.transition = "none";
+}
+/**
 * Build clone tree structure with minimal overhead.
+* Caches temporal bounds on each node for visibility checks.
 * Optionally syncs styles in the same pass if timeMs is provided.
 */
 function buildCloneStructure(source, timeMs) {
 	const container = document.createElement("div");
 	container.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%";
-	const legacyPairs = [];
-	function cloneElement(srcEl) {
+	let nodeCount = 0;
+	const canvasSourceMap = /* @__PURE__ */ new WeakMap();
+	function cloneElement(srcEl, parentNode) {
 		if (SKIP_TAGS.has(srcEl.tagName)) return null;
+		const bounds = getTemporalBounds(srcEl);
 		if (srcEl instanceof SVGElement) {
 			const node$1 = {
 				source: srcEl,
 				clone: srcEl.cloneNode(true),
 				children: [],
 				isCanvasClone: false,
-				styleCache: /* @__PURE__ */ new Map()
+				bounds,
+				parent: parentNode
 			};
-			legacyPairs.push([srcEl, node$1.clone]);
+			nodeCount++;
 			return node$1;
 		}
 		if (srcEl instanceof HTMLCanvasElement) {
@@ -204,33 +262,18 @@ function buildCloneStructure(source, timeMs) {
 					ctx.drawImage(shadowCanvas, 0, 0);
 				} catch {}
 				try {
-					const canvasCs = getComputedStyle(shadowCanvas);
-					const hostCs = getComputedStyle(srcEl);
-					clone$1.style.position = hostCs.position;
-					clone$1.style.top = hostCs.top;
-					clone$1.style.right = hostCs.right;
-					clone$1.style.bottom = hostCs.bottom;
-					clone$1.style.left = hostCs.left;
-					clone$1.style.margin = hostCs.margin;
-					clone$1.style.zIndex = hostCs.zIndex;
-					clone$1.style.transform = hostCs.transform;
-					clone$1.style.transformOrigin = hostCs.transformOrigin;
-					clone$1.style.opacity = hostCs.opacity;
-					clone$1.style.visibility = hostCs.visibility;
-					clone$1.style.width = canvasCs.width;
-					clone$1.style.height = canvasCs.height;
-					clone$1.style.display = "block";
-					clone$1.style.animation = "none";
-					clone$1.style.transition = "none";
+					copyCanvasCloneStyles(clone$1, getComputedStyle(srcEl), getComputedStyle(shadowCanvas));
 				} catch {}
+				canvasSourceMap.set(clone$1, srcEl);
 				const node$1 = {
 					source: srcEl,
 					clone: clone$1,
 					children: [],
 					isCanvasClone: true,
-					styleCache: /* @__PURE__ */ new Map()
+					bounds,
+					parent: parentNode
 				};
-				legacyPairs.push([srcEl, clone$1]);
+				nodeCount++;
 				return node$1;
 			}
 			const shadowImg = srcEl.shadowRoot.querySelector("img");
@@ -244,38 +287,26 @@ function buildCloneStructure(source, timeMs) {
 					ctx.drawImage(shadowImg, 0, 0);
 				} catch {}
 				try {
-					const imgCs = getComputedStyle(shadowImg);
-					const hostCs = getComputedStyle(srcEl);
-					clone$1.style.position = hostCs.position;
-					clone$1.style.top = hostCs.top;
-					clone$1.style.right = hostCs.right;
-					clone$1.style.bottom = hostCs.bottom;
-					clone$1.style.left = hostCs.left;
-					clone$1.style.margin = hostCs.margin;
-					clone$1.style.zIndex = hostCs.zIndex;
-					clone$1.style.transform = hostCs.transform;
-					clone$1.style.transformOrigin = hostCs.transformOrigin;
-					clone$1.style.opacity = hostCs.opacity;
-					clone$1.style.visibility = hostCs.visibility;
-					clone$1.style.width = imgCs.width;
-					clone$1.style.height = imgCs.height;
-					clone$1.style.display = "block";
-					clone$1.style.animation = "none";
-					clone$1.style.transition = "none";
+					copyCanvasCloneStyles(clone$1, getComputedStyle(srcEl), getComputedStyle(shadowImg));
 				} catch {}
+				canvasSourceMap.set(clone$1, srcEl);
 				const node$1 = {
 					source: srcEl,
 					clone: clone$1,
 					children: [],
 					isCanvasClone: true,
-					styleCache: /* @__PURE__ */ new Map()
+					bounds,
+					parent: parentNode
 				};
-				legacyPairs.push([srcEl, clone$1]);
+				nodeCount++;
 				return node$1;
 			}
 		}
 		const clone = document.createElement(isCustom ? "div" : srcEl.tagName.toLowerCase());
-		for (const attr of srcEl.attributes) {
+		const attrs = srcEl.attributes;
+		const attrLen = attrs.length;
+		if (attrLen > 0) for (let i = 0; i < attrLen; i++) {
+			const attr = attrs[i];
 			const name = attr.name.toLowerCase();
 			if (name === "id" || name.startsWith("on")) continue;
 			if (isCustom && name !== "class" && !name.startsWith("data-")) continue;
@@ -290,51 +321,65 @@ function buildCloneStructure(source, timeMs) {
 			clone,
 			children: [],
 			isCanvasClone: false,
-			styleCache: /* @__PURE__ */ new Map()
+			bounds,
+			parent: parentNode
 		};
-		legacyPairs.push([srcEl, clone]);
+		nodeCount++;
 		if (srcEl.shadowRoot) {
-			const isCaptionElement = srcEl.tagName === "EF-CAPTIONS-ACTIVE-WORD" || srcEl.tagName === "EF-CAPTIONS-BEFORE-ACTIVE-WORD" || srcEl.tagName === "EF-CAPTIONS-AFTER-ACTIVE-WORD" || srcEl.tagName === "EF-CAPTIONS-SEGMENT";
-			const isTextSegment = srcEl.tagName === "EF-TEXT-SEGMENT";
-			let hasTextNode = false;
-			for (const child of srcEl.shadowRoot.childNodes) if (child.nodeType === Node.TEXT_NODE) {
-				if (child.textContent?.trim() || isCaptionElement || isTextSegment) {
-					clone.appendChild(document.createTextNode(child.textContent || ""));
-					hasTextNode = true;
+			const shadowChildren = srcEl.shadowRoot.childNodes;
+			const shadowLen = shadowChildren.length;
+			if (shadowLen > 0) {
+				const isTextSegment = srcEl.tagName === "EF-TEXT-SEGMENT";
+				let hasTextNode = false;
+				for (let i = 0; i < shadowLen; i++) {
+					const child = shadowChildren[i];
+					if (child.nodeType === Node.TEXT_NODE) {
+						if (child.textContent?.trim() || isTextSegment) {
+							clone.appendChild(document.createTextNode(child.textContent || ""));
+							hasTextNode = true;
+						}
+					} else if (child.nodeType === Node.ELEMENT_NODE) {
+						const el = child;
+						if (el.tagName === "STYLE" || el.tagName === "SLOT") continue;
+						const childNode = cloneElement(el, node);
+						if (childNode) {
+							node.children.push(childNode);
+							clone.appendChild(childNode.clone);
+						}
+					}
 				}
+				if (isTextSegment && !hasTextNode) clone.appendChild(document.createTextNode(""));
+			}
+		}
+		const lightChildren = srcEl.childNodes;
+		const lightLen = lightChildren.length;
+		for (let i = 0; i < lightLen; i++) {
+			const child = lightChildren[i];
+			if (child.nodeType === Node.TEXT_NODE) {
+				const text = child.textContent?.trim();
+				if (text) clone.appendChild(document.createTextNode(text));
 			} else if (child.nodeType === Node.ELEMENT_NODE) {
-				const el = child;
-				if (el.tagName === "STYLE" || el.tagName === "SLOT") continue;
-				const childNode = cloneElement(el);
+				const childNode = cloneElement(child, node);
 				if (childNode) {
 					node.children.push(childNode);
 					clone.appendChild(childNode.clone);
 				}
 			}
-			if (isCaptionElement && !hasTextNode) clone.appendChild(document.createTextNode(""));
-		}
-		for (const child of srcEl.childNodes) if (child.nodeType === Node.TEXT_NODE) {
-			const text = child.textContent?.trim();
-			if (text) clone.appendChild(document.createTextNode(text));
-		} else if (child.nodeType === Node.ELEMENT_NODE) {
-			const childNode = cloneElement(child);
-			if (childNode) {
-				node.children.push(childNode);
-				clone.appendChild(childNode.clone);
-			}
 		}
 		return node;
 	}
-	const root = cloneElement(source);
+	const root = cloneElement(source, null);
 	if (root) container.appendChild(root.clone);
 	const syncState = {
 		tree: { root },
-		nodeCount: legacyPairs.length
+		nodeCount,
+		canvasSourceMap,
+		previousVisibleSet: /* @__PURE__ */ new Set(),
+		currentVisibleSet: /* @__PURE__ */ new Set()
 	};
-	if (timeMs !== void 0 && root) syncNodeRecursive(root, timeMs);
+	if (timeMs !== void 0 && root) syncStylesWithIndex(syncState, timeMs);
 	return {
 		container,
-		pairs: legacyPairs,
 		syncState
 	};
 }
@@ -355,42 +400,27 @@ function syncNodeStyles(node) {
 				ctx.clearRect(0, 0, canvas.width, canvas.height);
 				ctx.drawImage(shadowCanvas, 0, 0);
 			} catch (e) {
-				console.warn("[syncNodeStyles] Canvas draw failed:", e);
+				logger.warn("[syncNodeStyles] Canvas draw failed:", e);
 			}
 			try {
 				const canvasCs = getComputedStyle(shadowCanvas);
 				const hostCs = getComputedStyle(source);
 				const s = canvas.style;
-				const srcWidth = canvasCs.width;
-				const srcHeight = canvasCs.height;
-				const srcPosition = hostCs.position;
-				const srcTop = hostCs.top;
-				const srcLeft = hostCs.left;
-				const srcRight = hostCs.right;
-				const srcBottom = hostCs.bottom;
-				const srcMargin = hostCs.margin;
-				const srcTransform = hostCs.transform;
-				const srcTransformOrigin = hostCs.transformOrigin;
-				const srcOpacity = hostCs.opacity;
-				const srcVisibility = hostCs.visibility;
-				const srcZIndex = hostCs.zIndex;
-				const srcBackfaceVisibility = hostCs.backfaceVisibility;
-				const srcTransformStyle = hostCs.transformStyle;
-				if (s.position !== srcPosition) s.position = srcPosition;
-				if (s.top !== srcTop) s.top = srcTop;
-				if (s.left !== srcLeft) s.left = srcLeft;
-				if (s.right !== srcRight) s.right = srcRight;
-				if (s.bottom !== srcBottom) s.bottom = srcBottom;
-				if (s.margin !== srcMargin) s.margin = srcMargin;
-				if (s.transform !== srcTransform) s.transform = srcTransform;
-				if (s.transformOrigin !== srcTransformOrigin) s.transformOrigin = srcTransformOrigin;
-				if (s.opacity !== srcOpacity) s.opacity = srcOpacity;
-				if (s.visibility !== srcVisibility) s.visibility = srcVisibility;
-				if (s.zIndex !== srcZIndex) s.zIndex = srcZIndex;
-				if (s.width !== srcWidth) s.width = srcWidth;
-				if (s.height !== srcHeight) s.height = srcHeight;
-				if (s.backfaceVisibility !== srcBackfaceVisibility) s.backfaceVisibility = srcBackfaceVisibility;
-				if (s.transformStyle !== srcTransformStyle) s.transformStyle = srcTransformStyle;
+				s.position = hostCs.position;
+				s.top = hostCs.top;
+				s.left = hostCs.left;
+				s.right = hostCs.right;
+				s.bottom = hostCs.bottom;
+				s.margin = hostCs.margin;
+				s.transform = hostCs.transform;
+				s.transformOrigin = hostCs.transformOrigin;
+				s.opacity = hostCs.opacity;
+				s.visibility = hostCs.visibility;
+				s.zIndex = hostCs.zIndex;
+				s.width = canvasCs.width;
+				s.height = canvasCs.height;
+				s.backfaceVisibility = hostCs.backfaceVisibility;
+				s.transformStyle = hostCs.transformStyle;
 			} catch {}
 		} else if (shadowImg?.complete && shadowImg.naturalWidth > 0) {
 			if (canvas.width !== shadowImg.naturalWidth) canvas.width = shadowImg.naturalWidth;
@@ -406,42 +436,27 @@ function syncNodeStyles(node) {
 				const imgCs = getComputedStyle(shadowImg);
 				const hostCs = getComputedStyle(source);
 				const s = canvas.style;
-				const srcWidth = imgCs.width;
-				const srcHeight = imgCs.height;
-				const srcPosition = hostCs.position;
-				const srcTop = hostCs.top;
-				const srcLeft = hostCs.left;
-				const srcRight = hostCs.right;
-				const srcBottom = hostCs.bottom;
-				const srcMargin = hostCs.margin;
-				const srcTransform = hostCs.transform;
-				const srcTransformOrigin = hostCs.transformOrigin;
-				const srcOpacity = hostCs.opacity;
-				const srcVisibility = hostCs.visibility;
-				const srcZIndex = hostCs.zIndex;
-				const srcBackfaceVisibility = hostCs.backfaceVisibility;
-				const srcTransformStyle = hostCs.transformStyle;
-				if (s.position !== srcPosition) s.position = srcPosition;
-				if (s.top !== srcTop) s.top = srcTop;
-				if (s.left !== srcLeft) s.left = srcLeft;
-				if (s.right !== srcRight) s.right = srcRight;
-				if (s.bottom !== srcBottom) s.bottom = srcBottom;
-				if (s.margin !== srcMargin) s.margin = srcMargin;
-				if (s.transform !== srcTransform) s.transform = srcTransform;
-				if (s.transformOrigin !== srcTransformOrigin) s.transformOrigin = srcTransformOrigin;
-				if (s.opacity !== srcOpacity) s.opacity = srcOpacity;
-				if (s.visibility !== srcVisibility) s.visibility = srcVisibility;
-				if (s.zIndex !== srcZIndex) s.zIndex = srcZIndex;
-				if (s.width !== srcWidth) s.width = srcWidth;
-				if (s.height !== srcHeight) s.height = srcHeight;
-				if (s.backfaceVisibility !== srcBackfaceVisibility) s.backfaceVisibility = srcBackfaceVisibility;
-				if (s.transformStyle !== srcTransformStyle) s.transformStyle = srcTransformStyle;
+				s.position = hostCs.position;
+				s.top = hostCs.top;
+				s.left = hostCs.left;
+				s.right = hostCs.right;
+				s.bottom = hostCs.bottom;
+				s.margin = hostCs.margin;
+				s.transform = hostCs.transform;
+				s.transformOrigin = hostCs.transformOrigin;
+				s.opacity = hostCs.opacity;
+				s.visibility = hostCs.visibility;
+				s.zIndex = hostCs.zIndex;
+				s.width = imgCs.width;
+				s.height = imgCs.height;
+				s.backfaceVisibility = hostCs.backfaceVisibility;
+				s.transformStyle = hostCs.transformStyle;
 			} catch {}
 		}
 	}
 	const cloneStyle = clone.style;
-	const { styleCache } = node;
 	const propLen = SYNC_PROPERTIES.length;
+	const tagName = source.tagName;
 	if (HAS_COMPUTED_STYLE_MAP) {
 		let srcMap;
 		try {
@@ -455,10 +470,8 @@ function syncNodeStyles(node) {
 			const srcVal = srcMap.get(kebab);
 			if (!srcVal) continue;
 			const strVal = srcVal.toString();
-			if (styleCache.get(camel) === strVal) continue;
-			styleCache.set(camel, strVal);
 			if (camel === "display") {
-				cloneStyle.display = strVal === "none" ? "block" : strVal;
+				cloneStyle.display = strVal === "none" && !(tagName && (tagName === "EF-CAPTIONS-ACTIVE-WORD" || tagName === "EF-CAPTIONS-BEFORE-ACTIVE-WORD" || tagName === "EF-CAPTIONS-AFTER-ACTIVE-WORD" || tagName === "EF-CAPTIONS-SEGMENT")) ? "block" : strVal;
 				continue;
 			}
 			if (camel === "clipPath") continue;
@@ -478,10 +491,8 @@ function syncNodeStyles(node) {
 		const srcStyle = cs;
 		for (const prop of SYNC_PROPERTIES) {
 			const srcVal = srcStyle[prop];
-			if (styleCache.get(prop) === srcVal) continue;
-			styleCache.set(prop, srcVal);
 			if (prop === "display") {
-				cloneStyle.display = srcVal === "none" ? "block" : srcVal;
+				cloneStyle.display = srcVal === "none" && !(tagName && (tagName === "EF-CAPTIONS-ACTIVE-WORD" || tagName === "EF-CAPTIONS-BEFORE-ACTIVE-WORD" || tagName === "EF-CAPTIONS-AFTER-ACTIVE-WORD" || tagName === "EF-CAPTIONS-SEGMENT")) ? "block" : srcVal;
 				continue;
 			}
 			if (prop === "clipPath") continue;
@@ -492,30 +503,15 @@ function syncNodeStyles(node) {
 			cloneStyle[prop] = srcVal;
 		}
 	}
-	if (cloneStyle.animation !== "none") cloneStyle.animation = "none";
-	if (cloneStyle.transition !== "none") cloneStyle.transition = "none";
+	cloneStyle.animation = "none";
+	cloneStyle.transition = "none";
 	const srcTextNode = source.childNodes[0];
-	const cloneTextNode = clone.childNodes[0];
-	if (srcTextNode?.nodeType === Node.TEXT_NODE && cloneTextNode?.nodeType === Node.TEXT_NODE) {
+	if (srcTextNode?.nodeType === Node.TEXT_NODE) {
 		const srcText = srcTextNode.textContent || "";
-		if (cloneTextNode.textContent !== srcText) cloneTextNode.textContent = srcText;
-	}
-	const tagName = source.tagName;
-	if (tagName && (tagName === "EF-CAPTIONS-ACTIVE-WORD" || tagName === "EF-CAPTIONS-BEFORE-ACTIVE-WORD" || tagName === "EF-CAPTIONS-AFTER-ACTIVE-WORD" || tagName === "EF-CAPTIONS-SEGMENT")) {
-		const srcShadowRoot = source.shadowRoot;
-		if (srcShadowRoot && !srcTextNode) {
-			let srcShadowText = "";
-			for (const srcChild of srcShadowRoot.childNodes) if (srcChild.nodeType === Node.TEXT_NODE) srcShadowText += srcChild.textContent || "";
-			let cloneTextNode$1 = null;
-			for (const cloneChild of clone.childNodes) if (cloneChild.nodeType === Node.TEXT_NODE) {
-				cloneTextNode$1 = cloneChild;
-				break;
-			}
-			if (!cloneTextNode$1) {
-				cloneTextNode$1 = document.createTextNode(srcShadowText);
-				clone.appendChild(cloneTextNode$1);
-			} else if (cloneTextNode$1.textContent !== srcShadowText) cloneTextNode$1.textContent = srcShadowText;
-		}
+		const cloneTextNode = clone.childNodes[0];
+		if (cloneTextNode?.nodeType === Node.TEXT_NODE) {
+			if (cloneTextNode.textContent !== srcText) cloneTextNode.textContent = srcText;
+		} else if (!clone.childNodes.length) clone.appendChild(document.createTextNode(srcText));
 	}
 	if (source instanceof HTMLInputElement) {
 		const srcVal = source.value;
@@ -526,84 +522,111 @@ function syncNodeStyles(node) {
 		}
 	}
 }
+let syncStats = {
+	nodesVisited: 0,
+	nodesCulledByParent: 0,
+	nodesCulledByTemporal: 0,
+	nodesProcessed: 0,
+	nodesFullSync: 0,
+	nodesIncrementalSync: 0,
+	nodesHidden: 0,
+	indexQueryTimeMs: 0,
+	syncTimeMs: 0
+};
 /**
-* Recursively sync a node and its children.
-* Returns early if the node is temporally culled, skipping ALL descendants.
+* Compute visibility delta between previous and current frame.
 */
-function syncNodeRecursive(node, timeMs) {
-	const { source, clone, children, isCanvasClone, styleCache } = node;
-	if (!isCanvasClone) {
-		const { startMs, endMs } = getTemporalBounds(source);
-		if (timeMs < startMs || timeMs > endMs) {
-			clone.style.display = "none";
-			styleCache.delete("display");
-			return;
-		}
-	}
-	syncNodeStyles(node);
-	for (const child of children) syncNodeRecursive(child, timeMs);
+function computeVisibilityDelta(previousSet, currentSet) {
+	const nowVisible = /* @__PURE__ */ new Set();
+	const stillVisible = /* @__PURE__ */ new Set();
+	const nowHidden = /* @__PURE__ */ new Set();
+	for (const node of currentSet) if (previousSet.has(node)) stillVisible.add(node);
+	else nowVisible.add(node);
+	for (const node of previousSet) if (!currentSet.has(node)) nowHidden.add(node);
+	return {
+		nowVisible,
+		stillVisible,
+		nowHidden
+	};
 }
 /**
-* Sync all CSS properties from source elements to their clones.
-* Uses recursive tree traversal with early bailout for temporal culling.
+* Build visible set by recursive traversal with bounds checking.
+* Queries fresh bounds from source elements each time - bounds are computed
+* dynamically by timegroups based on composition mode.
 */
-function syncStyles(state, timeMs) {
-	if (state.tree.root) syncNodeRecursive(state.tree.root, timeMs);
-	if (_propertyValidationEnabled) validatePropertyChanges(state);
+function buildVisibleSetRecursive(node, timeMs, visibleSet) {
+	const { children, source } = node;
+	const bounds = getTemporalBounds(source);
+	if (timeMs >= bounds.startMs && timeMs <= bounds.endMs) {
+		visibleSet.add(node);
+		for (const child of children) buildVisibleSetRecursive(child, timeMs, visibleSet);
+	}
 }
 /**
-* Captures a snapshot of all CSS properties for all source elements.
+* Sync styles with recursive visibility check and delta tracking.
+* 
+* DELTA TRACKING: Tracks visibility changes between frames to minimize work:
+* - nowVisible nodes: Full style sync + show
+* - stillVisible nodes: Incremental sync (source DOM may have changed)
+* - nowHidden nodes: Just hide (display:none)
 */
-function capturePropertySnapshot(state) {
-	const snapshot = /* @__PURE__ */ new Map();
-	function captureNode(node) {
-		const props = /* @__PURE__ */ new Map();
-		try {
-			const cs = getComputedStyle(node.source);
-			for (const prop of SYNC_PROPERTIES) props.set(prop, cs[prop] ?? "");
-		} catch {}
-		snapshot.set(node.source, props);
-		for (const child of node.children) captureNode(child);
-	}
-	if (state.tree.root) captureNode(state.tree.root);
-	return snapshot;
+function syncStylesWithIndex(state, timeMs) {
+	const queryStart = performance.now();
+	const visibleSet = /* @__PURE__ */ new Set();
+	if (state.tree.root) buildVisibleSetRecursive(state.tree.root, timeMs, visibleSet);
+	const delta = computeVisibilityDelta(state.previousVisibleSet, visibleSet);
+	syncStats.indexQueryTimeMs = performance.now() - queryStart;
+	const syncStart = performance.now();
+	if (state.tree.root) syncNodeWithDelta(state.tree.root, visibleSet, delta);
+	syncStats.syncTimeMs = performance.now() - syncStart;
+	state.previousVisibleSet = visibleSet;
+	state.currentVisibleSet = visibleSet;
 }
 /**
-* Validates that only expected properties have changed since baseline.
-* Throws if any unexpected property changed.
+* Sync a node using visibility delta for incremental updates.
+* 
+* DELTA TRACKING optimization:
+* - nowVisible: Full style sync (element just appeared)
+* - stillVisible: Incremental sync (source DOM may have changed)
+* - nowHidden: Just hide the element
+* - Not in any set: Skip entirely (was already hidden)
 */
-function validatePropertyChanges(state) {
-	_validationFrameCount++;
-	if (_baselineSnapshot === null) {
-		_baselineSnapshot = capturePropertySnapshot(state);
+function syncNodeWithDelta(node, visibleSet, delta) {
+	syncStats.nodesVisited++;
+	if (!visibleSet.has(node)) {
+		node.clone.style.display = "none";
+		if (delta.nowHidden.has(node)) syncStats.nodesHidden++;
+		syncStats.nodesCulledByTemporal++;
 		return;
 	}
-	if (_validationFrameCount % 30 !== 0) return;
-	const currentSnapshot = capturePropertySnapshot(state);
-	const violations = [];
-	for (const [element, baselineProps] of _baselineSnapshot) {
-		const currentProps = currentSnapshot.get(element);
-		if (!currentProps) continue;
-		for (const [prop, baselineValue] of baselineProps) {
-			const currentValue = currentProps.get(prop) ?? "";
-			if (baselineValue === currentValue) continue;
-			if (!SYNC_PROPERTIES_SET.has(prop)) {
-				const elementId = element.id || element.tagName;
-				violations.push(`[${elementId}] ${prop}: "${baselineValue}" → "${currentValue}"`);
-			}
-		}
-	}
-	if (violations.length > 0) {
-		const message = [
-			`\n⚠️  UNEXPECTED PROPERTY CHANGES at frame ${_validationFrameCount}:`,
-			`Properties not in SYNC_PROPERTIES changed during export.`,
-			``,
-			`Violations (${violations.length}):`,
-			...violations.slice(0, 20).map((v) => `  ${v}`),
-			violations.length > 20 ? `  ... and ${violations.length - 20} more` : ""
-		].join("\n");
-		throw new Error(message);
+	if (delta.nowVisible.has(node)) {
+		syncNodeStyles(node);
+		syncStats.nodesFullSync++;
+	} else if (delta.stillVisible.has(node)) {
+		syncNodeStyles(node);
+		syncStats.nodesIncrementalSync++;
 	}
+	syncStats.nodesProcessed++;
+	for (const child of node.children) syncNodeWithDelta(child, visibleSet, delta);
+}
+/**
+* Sync all CSS properties from source elements to their clones.
+* Uses interval index for O(log n + k) visibility queries instead of O(n) traversal.
+* Uses delta tracking for incremental updates between frames.
+*/
+function syncStyles(state, timeMs) {
+	syncStats = {
+		nodesVisited: 0,
+		nodesCulledByParent: 0,
+		nodesCulledByTemporal: 0,
+		nodesProcessed: 0,
+		nodesFullSync: 0,
+		nodesIncrementalSync: 0,
+		nodesHidden: 0,
+		indexQueryTimeMs: 0,
+		syncTimeMs: 0
+	};
+	syncStylesWithIndex(state, timeMs);
 }
 /**
 * Collect document styles for shadow DOM injection.
@@ -652,5 +675,5 @@ function renderTimegroupPreview(source) {
 }
 
 //#endregion
-export { buildCloneStructure, collectDocumentStyles, overrideRootCloneStyles, renderTimegroupPreview, syncStyles };
+export { buildCloneStructure, collectDocumentStyles, overrideRootCloneStyles, removeHiddenNodesForSerialization, renderTimegroupPreview, restoreHiddenNodes, syncStyles };
 //# sourceMappingURL=renderTimegroupPreview.js.map