@jbpark/live-editor 4.6.1 → 6.0.0

package/dist/{use-dynamic-tailwind-BP1toJkW.js → use-dynamic-tailwind-B3l1qZRW.js}

@@ -1,26 +1,10 @@
-import { i as useLiveMessages } from "./messages-CSrMI4Rm.js";
-import { n as compile, s as withScriptBlobs } from "./compile-Dxas-D05.js";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { i as useLiveMessages } from "./messages-DrINcRdG.js";
+import { i as withScriptBlobs, n as compile } from "./compile-my0AjsCw.js";
+import { createElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import * as ui from "@jbpark/ui-kit";
-import { useEventListener, useMutationObserver, useResizeObserver } from "@jbpark/use-hooks";
+import { useDebouncedCallback, useEventListener, useMutationObserver, useResizeObserver, useStableValue } from "@jbpark/use-hooks";
 import { createPortal } from "react-dom";
-import * as utils from "@jbpark/ui-kit/utils";
-//#region src/components/preview/use-stable-modules.ts
-const sameModules = (a, b) => {
-	if (a === b) return true;
-	if (!a || !b) return false;
-	const keys = Object.keys(a);
-	return keys.length === Object.keys(b).length && keys.every((key) => Object.hasOwn(b, key) && Object.is(a[key], b[key]));
-};
-const useStableModules = (modules) => {
-	const [stable, setStable] = useState(modules);
-	if (sameModules(stable, modules)) return stable;
-	setStable(modules);
-	return modules;
-};
-//#endregion
-//#region src/components/frame/measure.ts
+//#region src/components/frame/auto-height/measure.ts
 const verticalInsets = (style) => [
 	style.marginTop,
 	style.marginBottom,
@@ -40,85 +24,13 @@ const positionedElementBottom = (top, bottom, probeHeight) => {
 	return Math.min(bottom, probeHeight);
 };
 //#endregion
-//#region src/components/frame/style-sync.ts
-const SYNCED_STYLE_ATTR = "data-live-editor-synced-style";
-const createStyleSyncManager = () => ({ clones: /* @__PURE__ */ new Map() });
-const isDocument = (target) => target.nodeType === Node.DOCUMENT_NODE;
-const sourceStyles = (document) => Array.from(document.head.querySelectorAll("link[rel=\"stylesheet\"], style"));
-const copyAttributes = (source, clone, transformStyle) => {
-	Array.from(clone.attributes).forEach((attribute) => {
-		if (attribute.name !== SYNCED_STYLE_ATTR && !source.hasAttribute(attribute.name)) clone.removeAttribute(attribute.name);
-	});
-	Array.from(source.attributes).forEach((attribute) => {
-		clone.setAttribute(attribute.name, attribute.value);
-	});
-	if (source.tagName === "LINK" && clone.tagName === "LINK") clone.disabled = source.disabled;
-	clone.textContent = source.tagName === "STYLE" ? transformStyle(source.textContent || "") : source.textContent;
-};
-const createClone = (source, target, transformStyle) => {
-	const clone = (isDocument(target) ? target : target.ownerDocument).createElement(source.tagName.toLowerCase());
-	clone.setAttribute(SYNCED_STYLE_ATTR, "");
-	copyAttributes(source, clone, transformStyle);
-	return clone;
-};
-const targetContainer = (target) => isDocument(target) ? target.head : target;
-const isSyncedStyle = (node) => {
-	const element = node;
-	return (element.tagName === "LINK" || element.tagName === "STYLE") && element.hasAttribute(SYNCED_STYLE_ATTR);
-};
-const removeClone = (clone) => {
-	clone.remove();
-};
-const reconcileStyles = (sourceDocument, target, manager, enabled, transformStyle = (content) => content, anchor = null) => {
-	if (!enabled) {
-		manager.clones.forEach(removeClone);
-		manager.clones.clear();
-		return;
-	}
-	const sources = sourceStyles(sourceDocument);
-	const sourceSet = new Set(sources);
-	const container = targetContainer(target);
-	manager.clones.forEach((clone, source) => {
-		if (!sourceSet.has(source)) {
-			removeClone(clone);
-			manager.clones.delete(source);
-		}
-	});
-	let previous = null;
-	sources.forEach((source) => {
-		let clone = manager.clones.get(source);
-		if (!clone) {
-			clone = createClone(source, target, transformStyle);
-			manager.clones.set(source, clone);
-		} else copyAttributes(source, clone, transformStyle);
-		const nextSibling = previous ? previous.nextSibling : Array.from(container.childNodes).find(isSyncedStyle) ?? (anchor?.parentNode === container ? anchor : null);
-		if (clone !== nextSibling) container.insertBefore(clone, nextSibling);
-		previous = clone;
-	});
-};
-const createRootAttributeSync = () => ({
-	attributes: /* @__PURE__ */ new Set(),
-	classes: /* @__PURE__ */ new Set()
-});
-const isMirroredAttribute = (name) => name.startsWith("data-");
-const reconcileRootAttributes = (source, target, sync, enabled) => {
-	const attributes = enabled ? Array.from(source.attributes).filter(({ name }) => isMirroredAttribute(name)) : [];
-	const classes = enabled ? Array.from(source.classList) : [];
-	const attributeNames = new Set(attributes.map(({ name }) => name));
-	const classNames = new Set(classes);
-	sync.attributes.forEach((name) => {
-		if (!attributeNames.has(name)) target.removeAttribute(name);
-	});
-	attributes.forEach(({ name, value }) => {
-		if (target.getAttribute(name) !== value) target.setAttribute(name, value);
-	});
-	sync.classes.forEach((name) => {
-		if (!classNames.has(name)) target.classList.remove(name);
-	});
-	classes.forEach((name) => target.classList.add(name));
-	if (!target.classList.length) target.removeAttribute("class");
-	sync.attributes = attributeNames;
-	sync.classes = classNames;
+//#region src/components/frame/auto-height/animations.ts
+const isCssAnimation = (win, animation) => typeof win.CSSAnimation === "function" && animation instanceof win.CSSAnimation;
+const isCssTransition = (win, animation) => typeof win.CSSTransition === "function" && animation instanceof win.CSSTransition;
+const hasActiveAnimation = (el) => typeof el.getAnimations === "function" && el.getAnimations().some((animation) => isAnimationActive(animation.playState));
+const neverFinishes = (animation) => {
+	const timing = animation.effect?.getComputedTiming();
+	return timing?.iterations === Infinity || timing?.duration === Infinity;
 };
 //#endregion
 //#region src/components/frame/viewport-units.ts
@@ -148,16 +60,8 @@ const rewriteInlineViewportUnits = (root) => {
 	});
 };
 //#endregion
-//#region src/components/frame/iframe.tsx
+//#region src/components/frame/auto-height/auto-height.ts
 const CONTAINER_STYLE_ID = "autoheight-container";
-const EMPTY_STRING_ARRAY = [];
-const isCssAnimation = (win, animation) => typeof win.CSSAnimation === "function" && animation instanceof win.CSSAnimation;
-const isCssTransition = (win, animation) => typeof win.CSSTransition === "function" && animation instanceof win.CSSTransition;
-const hasActiveAnimation = (el) => typeof el.getAnimations === "function" && el.getAnimations().some((animation) => isAnimationActive(animation.playState));
-const neverFinishes = (animation) => {
-	const timing = animation.effect?.getComputedTiming();
-	return timing?.iterations === Infinity || timing?.duration === Infinity;
-};
 const MEASUREMENT_OVERRIDE_STYLE_ID = "autoheight-measurement-overrides";
 const SCROLLBAR_OVERRIDE_RULES = ["html, body { scrollbar-width: none !important; }", "html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; }"];
 const FREEZE_TRANSITIONS_RULE = "*, *::before, *::after { transition: none !important; }";
@@ -175,130 +79,54 @@ const withMeasurementOverrides = (doc, freezeTransitions, measure) => {
 	measure();
 	styleEl.media = "not all";
 };
-const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_STRING_ARRAY, styles = EMPTY_STRING_ARRAY, stylesheets = EMPTY_STRING_ARRAY, autoHeight = false, syncStyle = false, children, onLoaded, ...props }) => {
-	const iframeRef = useRef(null);
-	const [mountNode, setMountNode] = useState(null);
-	const loadedScriptsRef = useRef(/* @__PURE__ */ new Set());
-	const loadedScriptsDocRef = useRef(null);
-	const prevStyleCountRef = useRef(0);
-	const prevStylesheetCountRef = useRef(0);
+const HIDE_SCROLLBAR_STYLE_ID = "autoheight-hide-scrollbar";
+const ensureContainerStyle = (doc, probeHeight) => {
+	let styleEl = doc.getElementById(CONTAINER_STYLE_ID);
+	if (!styleEl) {
+		styleEl = doc.createElement("style");
+		styleEl.id = CONTAINER_STYLE_ID;
+		doc.head?.appendChild(styleEl);
+	}
+	const text = `html { container-type: size !important; height: ${probeHeight}px !important; }`;
+	if (styleEl.textContent !== text) styleEl.textContent = text;
+};
+const getProbeHeight = (iframe, win) => {
+	const scrollParent = iframe.closest("[data-frame-container]");
+	if (!scrollParent) return 812;
+	const scrollParentStyle = win.getComputedStyle(scrollParent);
+	let wrapperInsets = (parseFloat(scrollParentStyle.paddingTop) || 0) + (parseFloat(scrollParentStyle.paddingBottom) || 0);
+	let node = iframe;
+	while (node && node !== scrollParent) {
+		wrapperInsets += verticalInsets(win.getComputedStyle(node));
+		node = node.parentElement;
+	}
+	return computeProbeHeight(scrollParent.clientHeight, wrapperInsets);
+};
+const measureContentHeight = (mountNode, doc, win, probeHeight, freezeTransitions) => {
+	let contentHeight = 0;
+	withMeasurementOverrides(doc, freezeTransitions, () => {
+		ensureContainerStyle(doc, probeHeight);
+		rewriteInlineViewportUnits(mountNode);
+		contentHeight = mountNode.scrollHeight;
+		mountNode.querySelectorAll("*").forEach((el) => {
+			const style = win.getComputedStyle(el);
+			const isAnimating = style.opacity === "0" && hasActiveAnimation(el);
+			if (isVisuallyHidden(style, isAnimating)) return;
+			if ((style.position === "fixed" || style.position === "absolute") && el.offsetHeight > 0) {
+				const rect = el.getBoundingClientRect();
+				const bottom = positionedElementBottom(rect.top, rect.bottom, probeHeight);
+				if (bottom !== null) contentHeight = Math.max(contentHeight, bottom);
+			}
+		});
+	});
+	return contentHeight;
+};
+//#endregion
+//#region src/components/frame/auto-height/use-auto-height.ts
+const useAutoHeight = (iframeRef, mountNode, shouldAutoHeight) => {
 	const trackedAnimationsRef = useRef(/* @__PURE__ */ new WeakSet());
 	const updateHeightRef = useRef(null);
 	const lastProbeHeightRef = useRef(void 0);
-	const shouldAutoHeight = autoHeight && style.height == null;
-	const styleManagerRef = useRef(createStyleSyncManager());
-	const rootAttributeSyncRef = useRef(createRootAttributeSync());
-	const applyStyle = useCallback(() => {
-		const doc = iframeRef.current?.contentDocument;
-		if (!doc) return;
-		reconcileStyles(document, doc, styleManagerRef.current, syncStyle, convertViewportUnits, doc.getElementById(CONTAINER_STYLE_ID));
-		reconcileRootAttributes(document.documentElement, doc.documentElement, rootAttributeSyncRef.current, syncStyle);
-	}, [syncStyle]);
-	const applyStyleTimeoutRef = useRef(void 0);
-	const debouncedApplyStyle = useCallback(() => {
-		clearTimeout(applyStyleTimeoutRef.current);
-		applyStyleTimeoutRef.current = window.setTimeout(applyStyle, 50);
-	}, [applyStyle]);
-	useEffect(() => {
-		return () => clearTimeout(applyStyleTimeoutRef.current);
-	}, []);
-	useMutationObserver(document.head, debouncedApplyStyle, {
-		enabled: syncStyle,
-		childList: true,
-		subtree: true,
-		attributes: true
-	});
-	useMutationObserver(document.documentElement, debouncedApplyStyle, {
-		enabled: syncStyle,
-		attributes: true
-	});
-	useEffect(() => {
-		const $iframe = iframeRef.current;
-		if (!$iframe) return;
-		const onLoad = () => {
-			const doc = $iframe.contentDocument;
-			if (!doc) return;
-			if (loadedScriptsDocRef.current !== doc) {
-				loadedScriptsDocRef.current = doc;
-				loadedScriptsRef.current = /* @__PURE__ */ new Set();
-			}
-			doc.body.style.overflowX = "hidden";
-			doc.body.style.margin = "0";
-			let node = doc.getElementById("iframe-root");
-			if (!node) {
-				node = doc.createElement("div");
-				node.id = "iframe-root";
-				doc.body.appendChild(node);
-			}
-			setMountNode(node);
-			applyStyle();
-			const pendingScripts = scripts.filter((src) => !loadedScriptsRef.current.has(src));
-			if (pendingScripts.length) {
-				pendingScripts.forEach((src) => loadedScriptsRef.current.add(src));
-				withScriptBlobs(pendingScripts, (blobUrls) => {
-					if (!doc.head) return;
-					const fragment = doc.createDocumentFragment();
-					blobUrls.forEach((blobUrl) => {
-						const script = doc.createElement("script");
-						script.src = blobUrl;
-						fragment.appendChild(script);
-					});
-					doc.head.appendChild(fragment);
-				});
-			}
-			onLoaded?.();
-		};
-		$iframe.addEventListener("load", onLoad);
-		if ($iframe.contentDocument?.readyState === "complete") onLoad();
-		return () => {
-			$iframe.removeEventListener("load", onLoad);
-		};
-	}, [
-		scripts,
-		onLoaded,
-		applyStyle
-	]);
-	useEffect(() => {
-		const doc = iframeRef.current?.contentDocument;
-		if (!doc?.head) return;
-		styles.forEach((css, index) => {
-			const styleId = `injected-style-${index}`;
-			let styleEl = doc.getElementById(styleId);
-			if (!styleEl) {
-				styleEl = doc.createElement("style");
-				styleEl.id = styleId;
-				doc.head.appendChild(styleEl);
-			}
-			const convertedCss = convertViewportUnits(css);
-			if (styleEl.textContent !== convertedCss) styleEl.textContent = convertedCss;
-		});
-		for (let index = styles.length; index < prevStyleCountRef.current; index++) doc.getElementById(`injected-style-${index}`)?.remove();
-		prevStyleCountRef.current = styles.length;
-		stylesheets.forEach((href, index) => {
-			const linkId = `injected-stylesheet-${index}`;
-			let linkEl = doc.getElementById(linkId);
-			if (!linkEl) {
-				linkEl = doc.createElement("link");
-				linkEl.id = linkId;
-				linkEl.rel = "stylesheet";
-				doc.head.appendChild(linkEl);
-			}
-			if (linkEl.href !== href) linkEl.href = href;
-		});
-		for (let index = stylesheets.length; index < prevStylesheetCountRef.current; index++) doc.getElementById(`injected-stylesheet-${index}`)?.remove();
-		prevStylesheetCountRef.current = stylesheets.length;
-	}, [styles, stylesheets]);
-	const HIDE_SCROLLBAR_STYLE_ID = "autoheight-hide-scrollbar";
-	const ensureContainerStyle = (doc, probeHeight) => {
-		let styleEl = doc.getElementById(CONTAINER_STYLE_ID);
-		if (!styleEl) {
-			styleEl = doc.createElement("style");
-			styleEl.id = CONTAINER_STYLE_ID;
-			doc.head?.appendChild(styleEl);
-		}
-		const text = `html { container-type: size !important; height: ${probeHeight}px !important; }`;
-		if (styleEl.textContent !== text) styleEl.textContent = text;
-	};
 	const trackScriptAnimations = useCallback((doc, win) => {
 		if (typeof doc.getAnimations !== "function") return;
 		doc.getAnimations().forEach((animation) => {
@@ -313,44 +141,17 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 		const doc = iframe.contentDocument;
 		const win = doc?.defaultView;
 		if (!doc || !win) return;
-		const scrollParent = iframe.closest("[data-frame-container]");
-		let probeHeight;
-		if (!scrollParent) probeHeight = 812;
-		else {
-			const scrollParentStyle = win.getComputedStyle(scrollParent);
-			let wrapperInsets = (parseFloat(scrollParentStyle.paddingTop) || 0) + (parseFloat(scrollParentStyle.paddingBottom) || 0);
-			let node = iframe;
-			while (node && node !== scrollParent) {
-				wrapperInsets += verticalInsets(win.getComputedStyle(node));
-				node = node.parentElement;
-			}
-			const computed = computeProbeHeight(scrollParent.clientHeight, wrapperInsets);
-			if (computed === null) return;
-			probeHeight = computed;
-		}
-		let contentHeight = 0;
+		const probeHeight = getProbeHeight(iframe, win);
+		if (probeHeight === null) return;
 		const freezeTransitions = probeHeight !== lastProbeHeightRef.current;
 		lastProbeHeightRef.current = probeHeight;
 		const previousHeight = iframe.style.height;
 		iframe.style.height = `${probeHeight}px`;
-		withMeasurementOverrides(doc, freezeTransitions, () => {
-			ensureContainerStyle(doc, probeHeight);
-			rewriteInlineViewportUnits(mountNode);
-			contentHeight = mountNode.scrollHeight;
-			mountNode.querySelectorAll("*").forEach((el) => {
-				const style = win.getComputedStyle(el);
-				const isAnimating = style.opacity === "0" && hasActiveAnimation(el);
-				if (isVisuallyHidden(style, isAnimating)) return;
-				if ((style.position === "fixed" || style.position === "absolute") && el.offsetHeight > 0) {
-					const rect = el.getBoundingClientRect();
-					const bottom = positionedElementBottom(rect.top, rect.bottom, probeHeight);
-					if (bottom !== null) contentHeight = Math.max(contentHeight, bottom);
-				}
-			});
-		});
+		const contentHeight = measureContentHeight(mountNode, doc, win, probeHeight, freezeTransitions);
 		iframe.style.height = contentHeight > 0 ? `${Math.ceil(contentHeight)}px` : previousHeight;
 		trackScriptAnimations(doc, win);
 	}, [
+		iframeRef,
 		shouldAutoHeight,
 		mountNode,
 		trackScriptAnimations
@@ -361,13 +162,17 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 	useEffect(() => {
 		if (shouldAutoHeight) return;
 		iframeRef.current?.contentDocument?.getElementById(CONTAINER_STYLE_ID)?.remove();
-	}, [shouldAutoHeight]);
+	}, [iframeRef, shouldAutoHeight]);
 	useEffect(() => {
 		const body = iframeRef.current?.contentDocument?.body;
 		if (!body || !mountNode) return;
 		if (shouldAutoHeight) body.style.removeProperty("overflow-y");
 		else body.style.setProperty("overflow-y", "auto");
-	}, [shouldAutoHeight, mountNode]);
+	}, [
+		iframeRef,
+		shouldAutoHeight,
+		mountNode
+	]);
 	useEffect(() => {
 		const doc = iframeRef.current?.contentDocument;
 		if (!doc?.head) return;
@@ -379,9 +184,13 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 		if (existing) return;
 		const styleEl = doc.createElement("style");
 		styleEl.id = HIDE_SCROLLBAR_STYLE_ID;
-		styleEl.textContent = ["html, body { scrollbar-width: none !important; }", "html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; }"].join("\n");
+		styleEl.textContent = SCROLLBAR_OVERRIDE_RULES.join("\n");
 		doc.head.appendChild(styleEl);
-	}, [shouldAutoHeight, mountNode]);
+	}, [
+		iframeRef,
+		shouldAutoHeight,
+		mountNode
+	]);
 	useEffect(() => {
 		updateHeight();
 	}, [updateHeight]);
@@ -423,6 +232,227 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 		target: mountNodeRef,
 		enabled: settleListenerEnabled
 	});
+};
+//#endregion
+//#region src/components/frame/iframe/inject-assets.ts
+const syncInjectedElements = (doc, idPrefix, values, previousCount, create, update) => {
+	values.forEach((value, index) => {
+		const id = `${idPrefix}${index}`;
+		let el = doc.getElementById(id);
+		if (!el) {
+			el = create();
+			el.id = id;
+			doc.head.appendChild(el);
+		}
+		update(el, value);
+	});
+	for (let index = values.length; index < previousCount; index++) doc.getElementById(`${idPrefix}${index}`)?.remove();
+};
+const syncInjectedAssets = (doc, styles, stylesheets, previous) => {
+	syncInjectedElements(doc, "injected-style-", styles, previous.styles, () => doc.createElement("style"), (styleEl, css) => {
+		const convertedCss = convertViewportUnits(css);
+		if (styleEl.textContent !== convertedCss) styleEl.textContent = convertedCss;
+	});
+	syncInjectedElements(doc, "injected-stylesheet-", stylesheets, previous.stylesheets, () => {
+		const linkEl = doc.createElement("link");
+		linkEl.rel = "stylesheet";
+		return linkEl;
+	}, (linkEl, href) => {
+		if (linkEl.href !== href) linkEl.href = href;
+	});
+	return {
+		styles: styles.length,
+		stylesheets: stylesheets.length
+	};
+};
+//#endregion
+//#region src/components/frame/style-sync.ts
+const SYNCED_STYLE_ATTR = "data-live-editor-synced-style";
+const createStyleSyncManager = () => ({ clones: /* @__PURE__ */ new Map() });
+const isDocument = (target) => target.nodeType === Node.DOCUMENT_NODE;
+const sourceStyles = (document) => Array.from(document.head.querySelectorAll("link[rel=\"stylesheet\"], style"));
+const copyAttributes = (source, clone, transformStyle) => {
+	Array.from(clone.attributes).forEach((attribute) => {
+		if (attribute.name !== SYNCED_STYLE_ATTR && !source.hasAttribute(attribute.name)) clone.removeAttribute(attribute.name);
+	});
+	Array.from(source.attributes).forEach((attribute) => {
+		clone.setAttribute(attribute.name, attribute.value);
+	});
+	if (source.tagName === "LINK" && clone.tagName === "LINK") clone.disabled = source.disabled;
+	clone.textContent = source.tagName === "STYLE" ? transformStyle(source.textContent || "") : source.textContent;
+};
+const createClone = (source, target, transformStyle) => {
+	const clone = (isDocument(target) ? target : target.ownerDocument).createElement(source.tagName.toLowerCase());
+	clone.setAttribute(SYNCED_STYLE_ATTR, "");
+	copyAttributes(source, clone, transformStyle);
+	return clone;
+};
+const targetContainer = (target) => isDocument(target) ? target.head : target;
+const isSyncedStyle = (node) => {
+	const element = node;
+	return (element.tagName === "LINK" || element.tagName === "STYLE") && element.hasAttribute(SYNCED_STYLE_ATTR);
+};
+const removeClone = (clone) => {
+	clone.remove();
+};
+const reconcileStyles = (sourceDocument, target, manager, enabled, transformStyle = (content) => content, anchor = null) => {
+	if (!enabled) {
+		manager.clones.forEach(removeClone);
+		manager.clones.clear();
+		return;
+	}
+	const sources = sourceStyles(sourceDocument);
+	const sourceSet = new Set(sources);
+	const container = targetContainer(target);
+	manager.clones.forEach((clone, source) => {
+		if (!sourceSet.has(source)) {
+			removeClone(clone);
+			manager.clones.delete(source);
+		}
+	});
+	let previous = null;
+	sources.forEach((source) => {
+		let clone = manager.clones.get(source);
+		if (!clone) {
+			clone = createClone(source, target, transformStyle);
+			manager.clones.set(source, clone);
+		} else copyAttributes(source, clone, transformStyle);
+		const nextSibling = previous ? previous.nextSibling : Array.from(container.childNodes).find(isSyncedStyle) ?? (anchor?.parentNode === container ? anchor : null);
+		if (clone !== nextSibling) container.insertBefore(clone, nextSibling);
+		previous = clone;
+	});
+};
+const createRootAttributeSync = () => ({
+	attributes: /* @__PURE__ */ new Set(),
+	classes: /* @__PURE__ */ new Set()
+});
+const isMirroredAttribute = (name) => name.startsWith("data-");
+const reconcileRootAttributes = (source, target, sync, enabled) => {
+	const attributes = enabled ? Array.from(source.attributes).filter(({ name }) => isMirroredAttribute(name)) : [];
+	const classes = enabled ? Array.from(source.classList) : [];
+	const attributeNames = new Set(attributes.map(({ name }) => name));
+	const classNames = new Set(classes);
+	sync.attributes.forEach((name) => {
+		if (!attributeNames.has(name)) target.removeAttribute(name);
+	});
+	attributes.forEach(({ name, value }) => {
+		if (target.getAttribute(name) !== value) target.setAttribute(name, value);
+	});
+	sync.classes.forEach((name) => {
+		if (!classNames.has(name)) target.classList.remove(name);
+	});
+	classes.forEach((name) => target.classList.add(name));
+	if (!target.classList.length) target.removeAttribute("class");
+	sync.attributes = attributeNames;
+	sync.classes = classNames;
+};
+//#endregion
+//#region src/components/frame/iframe/use-host-style-sync.ts
+const useHostStyleSync = (iframeRef, syncStyle) => {
+	const styleManagerRef = useRef(createStyleSyncManager());
+	const rootAttributeSyncRef = useRef(createRootAttributeSync());
+	const applyStyle = useCallback(() => {
+		const doc = iframeRef.current?.contentDocument;
+		if (!doc) return;
+		reconcileStyles(document, doc, styleManagerRef.current, syncStyle, convertViewportUnits, doc.getElementById(CONTAINER_STYLE_ID));
+		reconcileRootAttributes(document.documentElement, doc.documentElement, rootAttributeSyncRef.current, syncStyle);
+	}, [iframeRef, syncStyle]);
+	const debouncedApplyStyle = useDebouncedCallback(applyStyle, {
+		delay: 50,
+		autoInvoke: false
+	});
+	useMutationObserver(document.head, debouncedApplyStyle, {
+		enabled: syncStyle,
+		childList: true,
+		subtree: true,
+		attributes: true
+	});
+	useMutationObserver(document.documentElement, debouncedApplyStyle, {
+		enabled: syncStyle,
+		attributes: true
+	});
+	return applyStyle;
+};
+//#endregion
+//#region src/components/frame/iframe/use-iframe-document.ts
+const injectScripts = (doc, srcs) => {
+	withScriptBlobs(srcs, (blobUrls) => {
+		if (!doc.head) return;
+		const fragment = doc.createDocumentFragment();
+		blobUrls.forEach((blobUrl) => {
+			const script = doc.createElement("script");
+			script.src = blobUrl;
+			fragment.appendChild(script);
+		});
+		doc.head.appendChild(fragment);
+	});
+};
+const useIframeDocument = (iframeRef, { scripts, onLoaded, applyStyle }) => {
+	const [mountNode, setMountNode] = useState(null);
+	const loadedScriptsRef = useRef(/* @__PURE__ */ new Set());
+	const loadedScriptsDocRef = useRef(null);
+	useEffect(() => {
+		const $iframe = iframeRef.current;
+		if (!$iframe) return;
+		const onLoad = () => {
+			const doc = $iframe.contentDocument;
+			if (!doc) return;
+			if (loadedScriptsDocRef.current !== doc) {
+				loadedScriptsDocRef.current = doc;
+				loadedScriptsRef.current = /* @__PURE__ */ new Set();
+			}
+			doc.body.style.overflowX = "hidden";
+			doc.body.style.margin = "0";
+			let node = doc.getElementById("iframe-root");
+			if (!node) {
+				node = doc.createElement("div");
+				node.id = "iframe-root";
+				doc.body.appendChild(node);
+			}
+			setMountNode(node);
+			applyStyle();
+			const pendingScripts = scripts.filter((src) => !loadedScriptsRef.current.has(src));
+			if (pendingScripts.length) {
+				pendingScripts.forEach((src) => loadedScriptsRef.current.add(src));
+				injectScripts(doc, pendingScripts);
+			}
+			onLoaded?.();
+		};
+		$iframe.addEventListener("load", onLoad);
+		if ($iframe.contentDocument?.readyState === "complete") onLoad();
+		return () => {
+			$iframe.removeEventListener("load", onLoad);
+		};
+	}, [
+		iframeRef,
+		scripts,
+		onLoaded,
+		applyStyle
+	]);
+	return mountNode;
+};
+//#endregion
+//#region src/components/frame/iframe/iframe.tsx
+const EMPTY_STRING_ARRAY = [];
+const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_STRING_ARRAY, styles = EMPTY_STRING_ARRAY, stylesheets = EMPTY_STRING_ARRAY, autoHeight = false, syncStyle = false, children, onLoaded, ...props }) => {
+	const iframeRef = useRef(null);
+	const shouldAutoHeight = autoHeight && style.height == null;
+	const applyStyle = useHostStyleSync(iframeRef, syncStyle);
+	const mountNode = useIframeDocument(iframeRef, {
+		scripts,
+		onLoaded,
+		applyStyle
+	});
+	const injectedCountsRef = useRef({
+		styles: 0,
+		stylesheets: 0
+	});
+	useEffect(() => {
+		const doc = iframeRef.current?.contentDocument;
+		if (!doc?.head) return;
+		injectedCountsRef.current = syncInjectedAssets(doc, styles, stylesheets, injectedCountsRef.current);
+	}, [styles, stylesheets]);
+	useAutoHeight(iframeRef, mountNode, shouldAutoHeight);
 	const content = mountNode ? createPortal(children(mountNode), mountNode) : null;
 	return /* @__PURE__ */ jsx("iframe", {
 		ref: iframeRef,
@@ -480,14 +510,10 @@ const Shadow = ({ syncStyle = false, children }) => {
 		if (!shadowRoot) return;
 		reconcileStyles(document, shadowRoot, styleManagerRef.current, syncStyle);
 	}, [syncStyle]);
-	const applyStyleTimeoutRef = useRef(void 0);
-	const debouncedApplyStyle = useCallback(() => {
-		clearTimeout(applyStyleTimeoutRef.current);
-		applyStyleTimeoutRef.current = window.setTimeout(applyStyle, 50);
-	}, [applyStyle]);
-	useEffect(() => {
-		return () => clearTimeout(applyStyleTimeoutRef.current);
-	}, []);
+	const debouncedApplyStyle = useDebouncedCallback(applyStyle, {
+		delay: 50,
+		autoInvoke: false
+	});
 	useMutationObserver(document.head, debouncedApplyStyle, {
 		enabled: syncStyle,
 		childList: true,
@@ -534,24 +560,29 @@ const Frame = ({ mode, children, ...restProps }) => {
 	});
 };
 //#endregion
-//#region src/components/preview/base-modules.ts
-const baseModules = {
-	"ui-kit": ui,
-	"ui-kit/utils": utils
-};
+//#region src/components/preview/stable-component.ts
+const HOOK_CALL = /\buse(?:[A-Z0-9_]\w*)?\s*\(/g;
+const hookSignature = (code) => (code.match(HOOK_CALL) ?? []).map((call) => call.replace(/\s*\($/, "")).join(",");
+const isFunctionComponent = (component) => typeof component === "function" && !component.prototype?.isReactComponent;
+const StableComponent = ({ render, props }) => render(props);
+const renderStableComponent = (Component, code, props) => isFunctionComponent(Component) ? createElement(StableComponent, {
+	key: hookSignature(code),
+	render: Component,
+	props
+}) : createElement(Component, props);
+//#endregion
+//#region src/components/preview/defaults.ts
+const NO_PROPS = {};
+const NO_MODULES = {};
 //#endregion
 //#region src/components/preview/use-compiled-module.ts
 const useCompiledModule = (code, _modules) => {
-	const modules = useStableModules(_modules);
+	const modules = useStableValue(_modules);
 	const { unknown } = useLiveMessages().errors;
-	const mergedModules = useMemo(() => ({
-		...baseModules,
-		...modules
-	}), [modules]);
 	return useMemo(() => {
 		if (!code) return null;
 		try {
-			return compile(code, mergedModules);
+			return compile(code, modules ?? NO_MODULES);
 		} catch (e) {
 			return {
 				exports: {},
@@ -560,7 +591,7 @@ const useCompiledModule = (code, _modules) => {
 		}
 	}, [
 		code,
-		mergedModules,
+		modules,
 		unknown
 	]);
 };
@@ -592,6 +623,6 @@ const useDynamicTailwind = (code, enabled) => {
 	};
 };
 //#endregion
-export { useStableModules as a, Frame as i, useCompiledModule as n, baseModules as r, useDynamicTailwind as t };
+export { renderStableComponent as a, NO_PROPS as i, useCompiledModule as n, Frame as o, NO_MODULES as r, useDynamicTailwind as t };
 
-//# sourceMappingURL=use-dynamic-tailwind-BP1toJkW.js.map
+//# sourceMappingURL=use-dynamic-tailwind-B3l1qZRW.js.map