@jbpark/live-editor 1.8.0 → 1.9.0

package/dist/index.mjs

@@ -9,7 +9,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, PointerSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { useDebounce, useMultiSelect, useResponsiveSize } from "@jbpark/use-hooks";
+import { useDebouncedValue, useEventListener, useMultiSelect, useMutationObserver, useResizeObserver, useResponsiveSize } from "@jbpark/use-hooks";
 import { AlertCircle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bell, Bookmark, Calendar, Camera, Check, ChevronDown, ChevronRight, Clock, Copy, Download, Edit, Eye, Filter, Heart, Home, Image, Info, LayoutGrid, Link, Mail, Map as Map$1, Menu, MessageCircle, Phone, Plus, Search, Settings, Share, ShoppingCart, Star, Trash, Upload as Upload$1, User, X } from "lucide-react";
 import { v4 } from "uuid";
 import { createPortal } from "react-dom";
@@ -26,41 +26,45 @@ import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 
 //#region src/components/context/states.ts
-const PreviewContext = createContext({
-	code: "",
-	setCode: () => {}
-});
-const ErrorContext = createContext({
-	error: null,
-	setError: () => {}
-});
+const PreviewContext = createContext(void 0);
+const ErrorContext = createContext(void 0);
 const usePreview = () => {
-	return useContext(PreviewContext);
+	const context = useContext(PreviewContext);
+	if (context === void 0) throw new Error("usePreview must be used within <Live> (ContextProvider)");
+	return context;
 };
 const useError = () => {
-	return useContext(ErrorContext);
+	const context = useContext(ErrorContext);
+	if (context === void 0) throw new Error("useError must be used within <Live> (ContextProvider)");
+	return context;
 };
 
 //#endregion
 //#region src/components/context/context.tsx
 const ContextProvider = ({ children }) => {
-	const [code, setCode] = useState(DEFAULT_TEMPLATE);
+	const [code, setCodeState] = useState(DEFAULT_TEMPLATE);
 	const [error, setError] = useState(null);
+	const setCode = useCallback((next) => {
+		setError(null);
+		setCodeState(next);
+	}, []);
 	useEffect(() => {
 		return () => {
 			clearCompilationCache();
 		};
 	}, []);
+	const previewValue = useMemo(() => ({
+		code,
+		setCode
+	}), [code, setCode]);
+	const errorValue = useMemo(() => ({
+		error,
+		setError
+	}), [error, setError]);
 	return /* @__PURE__ */ jsx(PreviewContext.Provider, {
-		value: {
-			code,
-			setCode
-		},
+		value: previewValue,
 		children: /* @__PURE__ */ jsx(ErrorContext.Provider, {
-			value: {
-				error,
-				setError
-			},
+			value: errorValue,
 			children
 		})
 	});
@@ -72,7 +76,9 @@ 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 [mountNode, setMountNode] = useState(null);
-	const scriptsLoadedRef = useRef(false);
+	const loadedScriptsRef = useRef(/* @__PURE__ */ new Set());
+	const prevStyleCountRef = useRef(0);
+	const prevStylesheetCountRef = useRef(0);
 	const shouldAutoHeight = autoHeight && style.height == null;
 	const styleManagerRef = useRef({
 		copiedLinks: /* @__PURE__ */ new Set(),
@@ -113,6 +119,21 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 			doc.head.appendChild(fragment);
 		}
 	}, [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,
+		attributeFilter: ["href"]
+	});
 	useEffect(() => {
 		const $iframe = iframeRef.current;
 		if (!$iframe) return;
@@ -129,9 +150,10 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 			}
 			setMountNode(node);
 			applyStyle();
-			if (scripts.length && !scriptsLoadedRef.current) {
-				scriptsLoadedRef.current = true;
-				Promise.all(scripts.map(getCachedScriptBlob)).then((blobUrls) => {
+			const pendingScripts = scripts.filter((src) => !loadedScriptsRef.current.has(src));
+			if (pendingScripts.length) {
+				pendingScripts.forEach((src) => loadedScriptsRef.current.add(src));
+				Promise.all(pendingScripts.map(getCachedScriptBlob)).then((blobUrls) => {
 					if (!doc.head) return;
 					const fragment = doc.createDocumentFragment();
 					blobUrls.forEach((blobUrl) => {
@@ -145,28 +167,11 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 			onLoaded?.();
 		};
 		$iframe.addEventListener("load", onLoad);
-		let timeoutId;
-		let observer = null;
-		if (syncStyle) {
-			observer = new MutationObserver(() => {
-				clearTimeout(timeoutId);
-				timeoutId = window.setTimeout(applyStyle, 50);
-			});
-			observer.observe(document.head, {
-				childList: true,
-				subtree: true,
-				attributes: true,
-				attributeFilter: ["href"]
-			});
-		}
 		if ($iframe.contentDocument?.readyState === "complete") onLoad();
 		return () => {
 			$iframe.removeEventListener("load", onLoad);
-			observer?.disconnect();
-			clearTimeout(timeoutId);
 		};
 	}, [
-		syncStyle,
 		scripts,
 		onLoaded,
 		applyStyle
@@ -184,6 +189,8 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 			}
 			if (styleEl.textContent !== css) styleEl.textContent = css;
 		});
+		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);
@@ -195,67 +202,76 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 			}
 			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]);
-	useEffect(() => {
+	const updateHeight = useCallback(() => {
 		if (!shouldAutoHeight || !mountNode || !iframeRef.current) return;
 		const iframe = iframeRef.current;
-		const updateHeight = () => {
-			const scrollParent = iframe.closest("[data-frame-container]");
-			const savedScrollTop = scrollParent?.scrollTop ?? 0;
-			iframe.style.height = "0px";
-			let childrenHeight = 0;
-			Array.from(mountNode.children).forEach((child) => {
-				const el = child;
-				childrenHeight = Math.max(childrenHeight, el.scrollHeight);
-			});
-			const win = iframe.contentDocument?.defaultView;
-			mountNode.querySelectorAll("[data-floating-ui-focusable]").forEach((popup) => {
-				if (popup.offsetHeight > 0) {
+		const scrollParent = iframe.closest("[data-frame-container]");
+		const savedScrollTop = scrollParent?.scrollTop ?? 0;
+		iframe.style.height = "0px";
+		let childrenHeight = 0;
+		Array.from(mountNode.children).forEach((child) => {
+			const el = child;
+			childrenHeight = Math.max(childrenHeight, el.scrollHeight);
+		});
+		const win = iframe.contentDocument?.defaultView;
+		mountNode.querySelectorAll("[data-floating-ui-focusable]").forEach((popup) => {
+			if (popup.offsetHeight > 0) {
+				let offsetY = 0;
+				const transform = popup.style.transform;
+				if (transform) {
+					const match = transform.match(/translate\([^,]+,\s*([+-]?\d+(?:\.\d+)?)/);
+					if (match?.[1]) offsetY = parseFloat(match[1]);
+				}
+				const estimatedHeight = offsetY + popup.offsetHeight;
+				childrenHeight = Math.max(childrenHeight, estimatedHeight);
+			}
+		});
+		if (win) Array.from(mountNode.children).forEach((child) => {
+			const el = child;
+			const style = win.getComputedStyle(el);
+			if (style.position === "fixed" || style.position === "absolute") {
+				if (el.offsetHeight > 0) {
 					let offsetY = 0;
-					const transform = popup.style.transform;
+					const transform = el.style.transform;
 					if (transform) {
 						const match = transform.match(/translate\([^,]+,\s*([+-]?\d+(?:\.\d+)?)/);
 						if (match?.[1]) offsetY = parseFloat(match[1]);
 					}
-					const estimatedHeight = offsetY + popup.offsetHeight;
+					const estimatedHeight = offsetY + el.offsetHeight;
 					childrenHeight = Math.max(childrenHeight, estimatedHeight);
 				}
-			});
-			if (win) Array.from(mountNode.children).forEach((child) => {
-				const el = child;
-				const style = win.getComputedStyle(el);
-				if (style.position === "fixed" || style.position === "absolute") {
-					if (el.offsetHeight > 0) {
-						let offsetY = 0;
-						const transform = el.style.transform;
-						if (transform) {
-							const match = transform.match(/translate\([^,]+,\s*([+-]?\d+(?:\.\d+)?)/);
-							if (match?.[1]) offsetY = parseFloat(match[1]);
-						}
-						const estimatedHeight = offsetY + el.offsetHeight;
-						childrenHeight = Math.max(childrenHeight, estimatedHeight);
-					}
-				}
-			});
-			const contentHeight = Math.max(mountNode.scrollHeight, childrenHeight);
-			if (contentHeight > 0) iframe.style.height = `${Math.ceil(contentHeight)}px`;
-			if (scrollParent) scrollParent.scrollTop = savedScrollTop;
-		};
-		updateHeight();
-		const resizeObserver = new ResizeObserver(updateHeight);
-		resizeObserver.observe(mountNode);
-		const mutationObserver = new MutationObserver(updateHeight);
-		mutationObserver.observe(mountNode, {
-			childList: true,
-			subtree: true,
-			attributes: true,
-			characterData: true
+			}
 		});
-		return () => {
-			resizeObserver.disconnect();
-			mutationObserver.disconnect();
-		};
-	}, [mountNode, shouldAutoHeight]);
+		const contentHeight = Math.max(mountNode.scrollHeight, childrenHeight);
+		if (contentHeight > 0) iframe.style.height = `${Math.ceil(contentHeight)}px`;
+		if (scrollParent) scrollParent.scrollTop = savedScrollTop;
+	}, [shouldAutoHeight, mountNode]);
+	useEffect(() => {
+		updateHeight();
+	}, [updateHeight]);
+	const [resizeRef, resizeSize] = useResizeObserver();
+	useEffect(() => {
+		if (!shouldAutoHeight || !mountNode) return;
+		resizeRef(mountNode);
+		return () => resizeRef(null);
+	}, [
+		shouldAutoHeight,
+		mountNode,
+		resizeRef
+	]);
+	useEffect(() => {
+		updateHeight();
+	}, [resizeSize]);
+	useMutationObserver(mountNode, updateHeight, {
+		enabled: shouldAutoHeight,
+		childList: true,
+		subtree: true,
+		attributes: true,
+		characterData: true
+	});
 	const content = mountNode ? createPortal(children(mountNode), mountNode) : null;
 	return /* @__PURE__ */ jsx("iframe", {
 		ref: iframeRef,
@@ -295,41 +311,6 @@ const Shadow = ({ children }) => {
 			renderTargetRef.current = target;
 			setRenderTarget(target);
 		}
-		const onClick = (e) => {
-			const eventInit = {
-				bubbles: true,
-				cancelable: true,
-				composed: true
-			};
-			let newEvent;
-			if (e instanceof MouseEvent) newEvent = new MouseEvent(e.type, {
-				...eventInit,
-				clientX: e.clientX,
-				clientY: e.clientY,
-				button: e.button
-			});
-			else if (e instanceof PointerEvent) newEvent = new PointerEvent(e.type, {
-				...eventInit,
-				clientX: e.clientX,
-				clientY: e.clientY,
-				pointerId: e.pointerId
-			});
-			else newEvent = new Event(e.type, eventInit);
-			hostRef.current?.dispatchEvent(newEvent);
-		};
-		const eventTypes = [
-			"click",
-			"pointerdown",
-			"pointerup"
-		];
-		eventTypes.forEach((type) => {
-			target.addEventListener(type, onClick, true);
-		});
-		return () => {
-			eventTypes.forEach((type) => {
-				target?.removeEventListener(type, onClick, true);
-			});
-		};
 	}, []);
 	useLayoutEffect(() => {
 		if (renderTargetRef.current && !renderTarget) setRenderTarget(renderTargetRef.current);
@@ -354,24 +335,34 @@ const Frame = ({ mode, children, ...restProps }) => {
 
 //#endregion
 //#region src/components/dnd/draggable.tsx
-const Draggable = ({ item, onAdd }) => {
-	const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
+const DraggableItem = ({ item, children }) => {
+	const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
 		id: item.id,
 		data: {
 			type: "new-item",
 			item
 		}
 	});
-	return /* @__PURE__ */ jsx(Card, {
+	return children({
 		ref: setNodeRef,
-		style: transform ? { opacity: isDragging ? .5 : 1 } : void 0,
-		...listeners,
-		...attributes,
-		className: cn("cursor-grab", "outline-none", "hover:border-blue-300 hover:shadow-md", isDragging && "opacity-50"),
-		onDoubleClick: () => onAdd?.(item),
-		children: item.name
+		dragProps: {
+			...listeners,
+			...attributes
+		},
+		isDragging
 	});
 };
+const DefaultDraggableItem = ({ item, onAdd }) => /* @__PURE__ */ jsx(DraggableItem, {
+	item,
+	children: ({ ref, dragProps, isDragging }) => /* @__PURE__ */ jsx(Card, {
+		ref,
+		style: { opacity: isDragging ? .5 : 1 },
+		...dragProps,
+		className: cn("cursor-grab", "outline-none", "hover:border-blue-300 hover:shadow-md", isDragging && "opacity-50"),
+		onDoubleClick: onAdd ? () => onAdd(item) : void 0,
+		children: item.name
+	})
+});
 
 //#endregion
 //#region src/components/dnd/droppable.tsx
@@ -402,7 +393,16 @@ const Renderer = ({ preview, headers, modules, frame, provider }) => {
 		...baseModules,
 		...modules
 	}), [modules]);
-	const module = useMemo(() => compile(preview, memoizedModules), [preview, memoizedModules]);
+	const module = useMemo(() => {
+		try {
+			return compile(preview, memoizedModules);
+		} catch (e) {
+			return {
+				exports: {},
+				error: e instanceof Error ? e.message : "Module transformation error"
+			};
+		}
+	}, [preview, memoizedModules]);
 	const renderProvider = (component) => {
 		return provider ? provider(component) : component;
 	};
@@ -474,7 +474,7 @@ const Overlay = ({ sections, renderProps }) => {
 	if (!active) return null;
 	if (active.data.current?.type === "new-item") {
 		const item = active.data.current.item;
-		return /* @__PURE__ */ jsx(Draggable, { item });
+		return /* @__PURE__ */ jsx(DefaultDraggableItem, { item });
 	}
 	const section = sections.find((s) => s.id === active.id);
 	if (section) {
@@ -12621,7 +12621,7 @@ const conditionalModifiers = (args) => {
 	if (active?.data.current?.type === "new-item") return args.transform;
 	return restrictToVerticalAxis(args);
 };
-const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, className, items = [], frame, provider, ...restProps }) => {
+const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, className, items = [], frame, provider, renderPalette, renderPanel, ...restProps }) => {
 	const [selectedId, setSelectedId] = useState(null);
 	const [mobilePaletteOpen, setMobilePaletteOpen] = useState(false);
 	const { breakpoint } = useResponsiveSize();
@@ -12721,14 +12721,35 @@ const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, classNam
 	useEffect(() => {
 		if (frame?.scripts?.length) preloadScripts(frame.scripts);
 	}, [frame?.scripts]);
-	const renderPaletteItems = (onAdd) => /* @__PURE__ */ jsx(Space, {
-		orientation: "vertical",
-		align: "start",
-		children: (items?.length ? items : DRAGGABLE_ITEMS).map((item) => /* @__PURE__ */ jsx(Draggable, {
-			item,
-			onAdd
-		}, item.id))
-	});
+	const renderPaletteItems = (onAdd) => {
+		const paletteItems = items?.length ? items : DRAGGABLE_ITEMS;
+		if (renderPalette) return renderPalette({
+			items: paletteItems,
+			onAdd,
+			DraggableItem
+		});
+		return /* @__PURE__ */ jsx(Space, {
+			orientation: "vertical",
+			align: "start",
+			children: paletteItems.map((item) => /* @__PURE__ */ jsx(DefaultDraggableItem, {
+				item,
+				onAdd
+			}, item.id))
+		});
+	};
+	const renderPanelContent = () => {
+		const selectedItem = sections.find((s) => s.id === selectedId);
+		if (renderPanel) return renderPanel({
+			item: selectedItem,
+			onChange,
+			onDelete
+		});
+		return /* @__PURE__ */ jsx(Panel, {
+			item: selectedItem,
+			onChange,
+			onDelete
+		});
+	};
 	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(DndContext, {
 		sensors,
 		collisionDetection: closestCenter,
@@ -12787,11 +12808,7 @@ const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, classNam
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "hidden w-1/5 md:block",
-					children: /* @__PURE__ */ jsx(Panel, {
-						item: sections.find((s) => s.id === selectedId),
-						onChange,
-						onDelete
-					})
+					children: renderPanelContent()
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					type: "primary",
@@ -12818,11 +12835,7 @@ const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, classNam
 					direction: "bottom",
 					size: "large",
 					title: "Properties",
-					children: /* @__PURE__ */ jsx(Panel, {
-						item: sections.find((s) => s.id === selectedId),
-						onChange,
-						onDelete
-					})
+					children: renderPanelContent()
 				})
 			]
 		}), /* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx(Overlay, {
@@ -12837,6 +12850,11 @@ const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, classNam
 	}) });
 };
 
+//#endregion
+//#region src/components/dnd/index.ts
+const Dnd = Dnd$1;
+Dnd.DraggableItem = DraggableItem;
+
 //#endregion
 //#region src/components/editor/editor.tsx
 const Editor$1 = ({ defaultValue, value: _value, debounce = 1e3, onChange: _onChange, ...props }) => {
@@ -12852,9 +12870,10 @@ const Editor$1 = ({ defaultValue, value: _value, debounce = 1e3, onChange: _onCh
 	const onError = useCallback((error) => {
 		setError(error);
 	}, [setError]);
-	useDebounce(() => {
-		setCode(value);
-	}, { delay: debounce }, [value]);
+	const debouncedValue = useDebouncedValue(value, debounce);
+	useEffect(() => {
+		setCode(debouncedValue);
+	}, [debouncedValue, setCode]);
 	return /* @__PURE__ */ jsx(Core, {
 		value,
 		onChange,
@@ -12935,6 +12954,15 @@ var ErrorBoundary = class extends React.Component {
 		console.error("🚨 [Boundary] Rendering error:", error, errorInfo);
 		this.props.onError?.(error, errorInfo);
 	}
+	componentDidUpdate(prevProps) {
+		if (!this.state.hasError) return;
+		const prevKeys = prevProps.resetKeys ?? [];
+		const nextKeys = this.props.resetKeys ?? [];
+		if (prevKeys.length !== nextKeys.length || nextKeys.some((key, i) => key !== prevKeys[i])) this.setState({
+			hasError: false,
+			error: void 0
+		});
+	}
 	render() {
 		if (this.state.hasError) return this.props.fallback ? /* @__PURE__ */ jsx(Fragment, { children: this.props.fallback(this.state.error?.message) }) : /* @__PURE__ */ jsx(Error$2, {
 			message: this.state.error?.message,
@@ -12954,21 +12982,20 @@ const Guard = ({ children, onError }) => {
 	const [error, setError] = useState(null);
 	const containerRef = useRef(null);
 	const errorHandled = useRef(false);
+	useEventListener("error", (event) => {
+		if (errorHandled.current) return;
+		errorHandled.current = true;
+		const errorMessage = event.error?.message || event.message || "Unknown error";
+		console.error("⚡ [Guard] Event handler error:", errorMessage);
+		event.preventDefault();
+		setError(errorMessage);
+		onError?.(event.error || new window.Error(errorMessage));
+		setTimeout(() => {
+			errorHandled.current = false;
+		}, 100);
+	}, { capture: true });
 	useEffect(() => {
 		if (!containerRef.current) return;
-		const handleWindowError = (event) => {
-			if (errorHandled.current) return;
-			errorHandled.current = true;
-			const errorMessage = event.error?.message || event.message || "Unknown error";
-			console.error("⚡ [Guard] Event handler error:", errorMessage);
-			event.preventDefault();
-			setError(errorMessage);
-			onError?.(event.error || new window.Error(errorMessage));
-			setTimeout(() => {
-				errorHandled.current = false;
-			}, 100);
-			return true;
-		};
 		const handleUnhandledRejection = (event) => {
 			if (errorHandled.current) return;
 			errorHandled.current = true;
@@ -12980,10 +13007,8 @@ const Guard = ({ children, onError }) => {
 				errorHandled.current = false;
 			}, 100);
 		};
-		window.addEventListener("error", handleWindowError, true);
 		window.addEventListener("unhandledrejection", handleUnhandledRejection, true);
 		return () => {
-			window.removeEventListener("error", handleWindowError, true);
 			window.removeEventListener("unhandledrejection", handleUnhandledRejection, true);
 		};
 	}, [onError]);
@@ -13006,16 +13031,12 @@ const Guard = ({ children, onError }) => {
 //#region src/components/error/runtime.tsx
 const Runtime = ({ open = true, reset }) => {
 	const { error: message, setError } = useError();
+	useEventListener("error", (e) => {
+		setError(e.message);
+		e.preventDefault();
+	});
 	useEffect(() => {
-		const onError = (e) => {
-			setError(e.message);
-			e.preventDefault();
-		};
-		window.addEventListener("error", onError);
-		return () => {
-			setError(null);
-			window.removeEventListener("error", onError);
-		};
+		return () => setError(null);
 	}, [setError]);
 	if (!open) return null;
 	return /* @__PURE__ */ jsx(Error$2, {
@@ -13043,9 +13064,10 @@ const Client = ({ code: _code = "", className, showError, props = {}, modules =
 		...baseModules,
 		...modules
 	};
+	const effectiveCode = _code || code;
 	let module = null;
-	if (_code || code) try {
-		module = compile(_code || code, mergedModules);
+	if (effectiveCode) try {
+		module = compile(effectiveCode, mergedModules);
 	} catch (e) {
 		module = {
 			exports: {},
@@ -13070,6 +13092,7 @@ const Client = ({ code: _code = "", className, showError, props = {}, modules =
 		children: /* @__PURE__ */ jsx(Frame, {
 			...frame,
 			children: (container) => /* @__PURE__ */ jsx(Error$1.Boundary, {
+				resetKeys: [effectiveCode],
 				onError: (e) => setError(e.message),
 				children: renderProvider(/* @__PURE__ */ jsx(Error$1.Guard, {
 					onError: (e) => setError(e.message),
@@ -13088,6 +13111,7 @@ const Client = ({ code: _code = "", className, showError, props = {}, modules =
 			containerType: "inline-size"
 		},
 		children: /* @__PURE__ */ jsx(Error$1.Boundary, {
+			resetKeys: [effectiveCode],
 			onError: (e) => setError(e.message),
 			children: renderProvider(/* @__PURE__ */ jsx(Error$1.Guard, {
 				onError: (e) => setError(e.message),
@@ -13102,12 +13126,23 @@ const Client = ({ code: _code = "", className, showError, props = {}, modules =
 const Preview = ({ code, props = {}, modules = {}, dynamicTailwind = false, provider, ...restProps }) => {
 	const [runtimeError, setRuntimeError] = useState(null);
 	const [dynamicCSS, setDynamicCSS] = useState("");
+	const [prevCode, setPrevCode] = useState(code);
+	if (code !== prevCode) {
+		setPrevCode(code);
+		setRuntimeError(null);
+	}
 	const renderProvider = (component) => {
 		return provider ? provider(component) : component;
 	};
 	useEffect(() => {
 		if (!code || !dynamicTailwind) return;
-		generateTailwindCSS(code).then(setDynamicCSS);
+		let cancelled = false;
+		generateTailwindCSS(code).then((css) => {
+			if (!cancelled) setDynamicCSS(css);
+		});
+		return () => {
+			cancelled = true;
+		};
 	}, [code, dynamicTailwind]);
 	if (runtimeError) return /* @__PURE__ */ jsx(Error$1, {
 		title: "Runtime Error",
@@ -13116,10 +13151,18 @@ const Preview = ({ code, props = {}, modules = {}, dynamicTailwind = false, prov
 		onReset: () => setRuntimeError(null)
 	});
 	if (code) {
-		const module = compile(code, {
-			...baseModules,
-			...modules
-		});
+		let module;
+		try {
+			module = compile(code, {
+				...baseModules,
+				...modules
+			});
+		} catch (e) {
+			module = {
+				exports: {},
+				error: e instanceof Error ? e.message : "Module transformation error"
+			};
+		}
 		if (module.error) return /* @__PURE__ */ jsx(Error$1, {
 			title: "Compile Error",
 			message: module.error,
@@ -13131,13 +13174,14 @@ const Preview = ({ code, props = {}, modules = {}, dynamicTailwind = false, prov
 			className: "mx-5 mt-25"
 		});
 		return /* @__PURE__ */ jsx(Error$1.Boundary, {
+			resetKeys: [code],
 			fallback: (message) => /* @__PURE__ */ jsx(Error$1, {
 				title: "Rendering Error",
 				message
 			}),
 			children: renderProvider(/* @__PURE__ */ jsxs(Error$1.Guard, {
 				onError: (e) => setRuntimeError(e.message),
-				children: [/* @__PURE__ */ jsx(Component, { ...props }), dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })]
+				children: [/* @__PURE__ */ jsx(Component, { ...props }), dynamicTailwind && dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })]
 			}))
 		});
 	}