@editframe/elements 0.30.1-beta.0 → 0.31.0-beta.0

package/dist/preview/renderTimegroupPreview.js

@@ -0,0 +1,656 @@
+import { getTemporalBounds, isTemporal, isVisibleAtTime } from "./previewTypes.js";
+
+//#region src/preview/renderTimegroupPreview.ts
+/**
+* Elements to skip entirely when building the preview.
+*/
+const SKIP_TAGS = new Set([
+	"EF-AUDIO",
+	"EF-THUMBNAIL-STRIP",
+	"EF-FILMSTRIP",
+	"EF-TIMELINE",
+	"EF-WORKBENCH",
+	"SCRIPT",
+	"STYLE"
+]);
+/**
+* All CSS properties to sync (camelCase for style[] access).
+*/
+const SYNC_PROPERTIES = [
+	"display",
+	"visibility",
+	"opacity",
+	"position",
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"zIndex",
+	"width",
+	"height",
+	"minWidth",
+	"minHeight",
+	"maxWidth",
+	"maxHeight",
+	"flex",
+	"flexFlow",
+	"justifyContent",
+	"alignItems",
+	"alignContent",
+	"alignSelf",
+	"gap",
+	"gridTemplate",
+	"gridColumn",
+	"gridRow",
+	"gridArea",
+	"margin",
+	"padding",
+	"boxSizing",
+	"border",
+	"borderTop",
+	"borderRight",
+	"borderBottom",
+	"borderLeft",
+	"borderRadius",
+	"background",
+	"color",
+	"boxShadow",
+	"filter",
+	"backdropFilter",
+	"clipPath",
+	"font",
+	"textAlign",
+	"textDecoration",
+	"textTransform",
+	"letterSpacing",
+	"whiteSpace",
+	"textOverflow",
+	"lineHeight",
+	"transform",
+	"transformOrigin",
+	"transformStyle",
+	"perspective",
+	"perspectiveOrigin",
+	"backfaceVisibility",
+	"cursor",
+	"pointerEvents",
+	"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.
+*/
+const SYNC_PROPERTIES_KEBAB = SYNC_PROPERTIES.map((prop) => prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`));
+/**
+* Feature detection: computedStyleMap is ~15% faster for style syncing.
+*/
+const HAS_COMPUTED_STYLE_MAP = typeof Element !== "undefined" && typeof Element.prototype.computedStyleMap === "function";
+/**
+* CSS initial/default values for SAFE-TO-SKIP properties.
+* Only includes NON-INHERITED properties where skipping the default
+* won't affect visual output.
+* 
+* EXCLUDED (must always serialize):
+* - Inherited properties (color, font, text-*, visibility, cursor)
+* - Display (affects layout significantly)
+* - Properties where "auto" computes to a specific value
+* 
+* INCLUDED (safe to skip):
+* - Transform/filter effects (none = no effect)
+* - Box shadows (none = no shadow)
+* - Borders when none/0 (no visual impact)
+* - backdrop-filter (none = no effect)
+*/
+const CSS_SAFE_DEFAULT_VALUES = {
+	transform: "none",
+	filter: "none",
+	backdropFilter: "none",
+	boxShadow: "none",
+	border: [
+		"none",
+		"0px none",
+		"0px",
+		"0px none rgb(0, 0, 0)"
+	],
+	borderTop: [
+		"none",
+		"0px none",
+		"0px",
+		"0px none rgb(0, 0, 0)"
+	],
+	borderRight: [
+		"none",
+		"0px none",
+		"0px",
+		"0px none rgb(0, 0, 0)"
+	],
+	borderBottom: [
+		"none",
+		"0px none",
+		"0px",
+		"0px none rgb(0, 0, 0)"
+	],
+	borderLeft: [
+		"none",
+		"0px none",
+		"0px",
+		"0px none rgb(0, 0, 0)"
+	],
+	borderRadius: ["0px", "0"],
+	position: "static",
+	zIndex: "auto",
+	transformStyle: "flat",
+	perspective: "none",
+	backfaceVisibility: "visible"
+};
+/**
+* Check if a value matches a safe-to-skip default.
+*/
+function isDefaultValue(prop, value) {
+	const defaults = CSS_SAFE_DEFAULT_VALUES[prop];
+	if (!defaults) return false;
+	if (Array.isArray(defaults)) return defaults.includes(value);
+	return defaults === value;
+}
+/**
+* Build clone tree structure with minimal overhead.
+* 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) {
+		if (SKIP_TAGS.has(srcEl.tagName)) return null;
+		if (srcEl instanceof SVGElement) {
+			const node$1 = {
+				source: srcEl,
+				clone: srcEl.cloneNode(true),
+				children: [],
+				isCanvasClone: false,
+				styleCache: /* @__PURE__ */ new Map()
+			};
+			legacyPairs.push([srcEl, node$1.clone]);
+			return node$1;
+		}
+		if (srcEl instanceof HTMLCanvasElement) {
+			const canvas = document.createElement("canvas");
+			canvas.width = srcEl.width;
+			canvas.height = srcEl.height;
+			const ctx = canvas.getContext("2d");
+			if (ctx) try {
+				ctx.drawImage(srcEl, 0, 0);
+			} catch {}
+		}
+		const isCustom = srcEl.tagName.includes("-");
+		if (isCustom && srcEl.shadowRoot) {
+			const shadowCanvas = srcEl.shadowRoot.querySelector("canvas");
+			if (shadowCanvas) {
+				const clone$1 = document.createElement("canvas");
+				clone$1.width = shadowCanvas.width || srcEl.clientWidth;
+				clone$1.height = shadowCanvas.height || srcEl.clientHeight;
+				if (srcEl.tagName === "EF-IMAGE" || srcEl.tagName === "EF-WAVEFORM") clone$1.dataset.preserveAlpha = "true";
+				const ctx = clone$1.getContext("2d");
+				if (ctx) try {
+					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";
+				} catch {}
+				const node$1 = {
+					source: srcEl,
+					clone: clone$1,
+					children: [],
+					isCanvasClone: true,
+					styleCache: /* @__PURE__ */ new Map()
+				};
+				legacyPairs.push([srcEl, clone$1]);
+				return node$1;
+			}
+			const shadowImg = srcEl.shadowRoot.querySelector("img");
+			if (shadowImg?.complete && shadowImg.naturalWidth > 0) {
+				const clone$1 = document.createElement("canvas");
+				clone$1.width = shadowImg.naturalWidth;
+				clone$1.height = shadowImg.naturalHeight;
+				clone$1.dataset.preserveAlpha = "true";
+				const ctx = clone$1.getContext("2d");
+				if (ctx) try {
+					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";
+				} catch {}
+				const node$1 = {
+					source: srcEl,
+					clone: clone$1,
+					children: [],
+					isCanvasClone: true,
+					styleCache: /* @__PURE__ */ new Map()
+				};
+				legacyPairs.push([srcEl, clone$1]);
+				return node$1;
+			}
+		}
+		const clone = document.createElement(isCustom ? "div" : srcEl.tagName.toLowerCase());
+		for (const attr of srcEl.attributes) {
+			const name = attr.name.toLowerCase();
+			if (name === "id" || name.startsWith("on")) continue;
+			if (isCustom && name !== "class" && !name.startsWith("data-")) continue;
+			try {
+				clone.setAttribute(attr.name, attr.value);
+			} catch {}
+		}
+		if (srcEl instanceof HTMLImageElement && srcEl.src) clone.src = srcEl.src;
+		if (srcEl instanceof HTMLInputElement) clone.value = srcEl.value;
+		const node = {
+			source: srcEl,
+			clone,
+			children: [],
+			isCanvasClone: false,
+			styleCache: /* @__PURE__ */ new Map()
+		};
+		legacyPairs.push([srcEl, clone]);
+		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;
+				}
+			} else if (child.nodeType === Node.ELEMENT_NODE) {
+				const el = child;
+				if (el.tagName === "STYLE" || el.tagName === "SLOT") continue;
+				const childNode = cloneElement(el);
+				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);
+	if (root) container.appendChild(root.clone);
+	const syncState = {
+		tree: { root },
+		nodeCount: legacyPairs.length
+	};
+	if (timeMs !== void 0 && root) syncNodeRecursive(root, timeMs);
+	return {
+		container,
+		pairs: legacyPairs,
+		syncState
+	};
+}
+/**
+* Sync a single node's styles (extracted for reuse).
+*/
+function syncNodeStyles(node) {
+	const { source, clone, isCanvasClone } = node;
+	if (isCanvasClone) {
+		const canvas = clone;
+		const shadowCanvas = source.shadowRoot?.querySelector("canvas");
+		const shadowImg = source.shadowRoot?.querySelector("img");
+		if (shadowCanvas) {
+			if (canvas.width !== shadowCanvas.width) canvas.width = shadowCanvas.width;
+			if (canvas.height !== shadowCanvas.height) canvas.height = shadowCanvas.height;
+			const ctx = canvas.getContext("2d");
+			if (ctx && shadowCanvas.width > 0 && shadowCanvas.height > 0) try {
+				ctx.clearRect(0, 0, canvas.width, canvas.height);
+				ctx.drawImage(shadowCanvas, 0, 0);
+			} catch (e) {
+				console.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;
+			} catch {}
+		} else if (shadowImg?.complete && shadowImg.naturalWidth > 0) {
+			if (canvas.width !== shadowImg.naturalWidth) canvas.width = shadowImg.naturalWidth;
+			if (canvas.height !== shadowImg.naturalHeight) canvas.height = shadowImg.naturalHeight;
+			const ctx = canvas.getContext("2d");
+			if (ctx) {
+				ctx.clearRect(0, 0, canvas.width, canvas.height);
+				try {
+					ctx.drawImage(shadowImg, 0, 0);
+				} catch {}
+			}
+			try {
+				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;
+			} catch {}
+		}
+	}
+	const cloneStyle = clone.style;
+	const { styleCache } = node;
+	const propLen = SYNC_PROPERTIES.length;
+	if (HAS_COMPUTED_STYLE_MAP) {
+		let srcMap;
+		try {
+			srcMap = source.computedStyleMap();
+		} catch {
+			return;
+		}
+		for (let j = 0; j < propLen; j++) {
+			const kebab = SYNC_PROPERTIES_KEBAB[j];
+			const camel = SYNC_PROPERTIES[j];
+			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;
+				continue;
+			}
+			if (camel === "clipPath") continue;
+			if (isDefaultValue(camel, strVal)) {
+				if (cloneStyle[camel]) cloneStyle[camel] = "";
+				continue;
+			}
+			cloneStyle[camel] = strVal;
+		}
+	} else {
+		let cs;
+		try {
+			cs = getComputedStyle(source);
+		} catch {
+			return;
+		}
+		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;
+				continue;
+			}
+			if (prop === "clipPath") continue;
+			if (isDefaultValue(prop, srcVal)) {
+				if (cloneStyle[prop]) cloneStyle[prop] = "";
+				continue;
+			}
+			cloneStyle[prop] = srcVal;
+		}
+	}
+	if (cloneStyle.animation !== "none") cloneStyle.animation = "none";
+	if (cloneStyle.transition !== "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) {
+		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;
+		}
+	}
+	if (source instanceof HTMLInputElement) {
+		const srcVal = source.value;
+		const cloneInput = clone;
+		if (cloneInput.value !== srcVal) {
+			cloneInput.value = srcVal;
+			cloneInput.setAttribute("value", srcVal);
+		}
+	}
+}
+/**
+* Recursively sync a node and its children.
+* Returns early if the node is temporally culled, skipping ALL descendants.
+*/
+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);
+}
+/**
+* Sync all CSS properties from source elements to their clones.
+* Uses recursive tree traversal with early bailout for temporal culling.
+*/
+function syncStyles(state, timeMs) {
+	if (state.tree.root) syncNodeRecursive(state.tree.root, timeMs);
+	if (_propertyValidationEnabled) validatePropertyChanges(state);
+}
+/**
+* Captures a snapshot of all CSS properties for all source elements.
+*/
+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;
+}
+/**
+* Validates that only expected properties have changed since baseline.
+* Throws if any unexpected property changed.
+*/
+function validatePropertyChanges(state) {
+	_validationFrameCount++;
+	if (_baselineSnapshot === null) {
+		_baselineSnapshot = capturePropertySnapshot(state);
+		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);
+	}
+}
+/**
+* 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 {}
+	return rules.join("\n");
+}
+/**
+* Override clip-path, opacity, and optionally transform on the root clone element.
+* The source may have these properties set for proxy mode or workbench scaling.
+* 
+* @param syncState - The sync state containing the clone tree
+* @param fullReset - If true, also resets opacity and transform (for capture operations)
+*/
+function overrideRootCloneStyles(syncState, fullReset = false) {
+	const rootClone = syncState.tree.root?.clone;
+	if (!rootClone) return;
+	rootClone.style.clipPath = "none";
+	if (fullReset) {
+		rootClone.style.opacity = "1";
+		rootClone.style.transform = "none";
+	}
+}
+/**
+* Create a live preview of a timegroup with a refresh function.
+* Used by EFWorkbench for the "computed" preview mode.
+* 
+* @param source - The source timegroup to preview
+* @returns Object with preview container and refresh function
+*/
+function renderTimegroupPreview(source) {
+	const { container, syncState } = buildCloneStructure(source);
+	syncStyles(syncState, 0);
+	return {
+		container,
+		refresh: (timeMs) => {
+			syncStyles(syncState, timeMs ?? 0);
+		}
+	};
+}
+
+//#endregion
+export { buildCloneStructure, collectDocumentStyles, overrideRootCloneStyles, renderTimegroupPreview, syncStyles };
+//# sourceMappingURL=renderTimegroupPreview.js.map