@jbpark/live-editor 1.8.1 → 1.9.0

package/README.ko.md

@@ -12,16 +12,19 @@ live-editor/
 │  ├─ components/
 │  │  ├─ Context/           # 전역 상태 관리
 │  │  ├─ Dnd/               # 드래그 앤 드롭 시스템 및 편집 패널
-│  │  ├─ Editor/            # 코드 에디터
-│  │  ├─ Error/             # 에러 바운더리
-│  │  └─ Preview/           # 격리된 프리뷰 런타임
+│  │  ├─ Editor/             # 코드 에디터
+│  │  ├─ Error/              # 에러 바운더리
+│  │  ├─ Frame/              # iframe/shadow DOM 프리뷰 격리
+│  │  └─ Preview/            # 격리된 프리뷰 런타임
 │  ├─ pages/
-│  │  ├─ Playground/        # 메인 에디터 페이지
-│  │  └─ Preview/           # 전체화면 프리뷰 페이지
-│  ├─ utils/ast/            # AST 조작 및 코드 생성
-│  ├─ constants/            # 상수 및 설정
-│  ├─ types/                # TypeScript 타입 정의
-│  └─ App.tsx               # 라우팅이 포함된 앱 레이아웃
+│  │  ├─ Docs/                # 문서 형태 데모 사이트 (개요 + 기능별 페이지)
+│  │  ├─ Editor/              # 전체 에디터 앱 (에디터 + DnD 전환)
+│  │  ├─ Playground/          # 데이터 바인딩 설정 테스트 페이지
+│  │  └─ Preview/             # 전체화면 프리뷰 페이지
+│  ├─ utils/ast/             # AST 조작 및 코드 생성
+│  ├─ constants/             # 상수 및 설정
+│  ├─ types/                 # TypeScript 타입 정의
+│  └─ main.tsx                # 앱 진입점 + 라우팅
 └─ package.json
 ```
 

package/README.md

@@ -12,16 +12,19 @@ live-editor/
 │  ├─ components/
 │  │  ├─ Context/           # Global state management
 │  │  ├─ Dnd/               # Drag-and-drop system with editing panels
-│  │  ├─ Editor/            # Code editor
-│  │  ├─ Error/             # Error boundary
-│  │  └─ Preview/           # Isolated preview runtime
+│  │  ├─ Editor/             # Code editor
+│  │  ├─ Error/              # Error boundary
+│  │  ├─ Frame/              # iframe/shadow-DOM preview isolation
+│  │  └─ Preview/            # Isolated preview runtime
 │  ├─ pages/
-│  │  ├─ Playground/        # Main editor page
-│  │  └─ Preview/           # Full-screen preview page
-│  ├─ utils/ast/            # AST manipulation & code generation
-│  ├─ constants/            # Constants and configurations
-│  ├─ types/                # TypeScript type definitions
-│  └─ App.tsx               # App layout with routing
+│  │  ├─ Docs/                # Docs-style demo site (overview + feature pages)
+│  │  ├─ Editor/              # Full editor app (editor + DnD toggle)
+│  │  ├─ Playground/          # Data-binding config test page
+│  │  └─ Preview/             # Full-screen preview page
+│  ├─ utils/ast/             # AST manipulation & code generation
+│  ├─ constants/             # Constants and configurations
+│  ├─ types/                 # TypeScript type definitions
+│  └─ main.tsx                # App entry + routing
 └─ package.json
 ```
 

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import { n as Section } from "./index-DdSjzvA3.mjs";
 import "@jbpark/ui-kit/style.css";
+import * as react from "react";
 import React$1, { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Extension } from "@uiw/react-codemirror";
@@ -60,7 +61,7 @@ declare class ErrorBoundary extends React$1.Component<Props$6, State> {
   static getDerivedStateFromError(error: Error): State;
   componentDidCatch(error: Error, errorInfo: React$1.ErrorInfo): void;
   componentDidUpdate(prevProps: Props$6): void;
-  render(): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | null | undefined;
+  render(): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
 }
 //#endregion
 //#region src/components/error/error.d.ts
@@ -150,7 +151,32 @@ type EditorComponent = typeof Editor$1 & {
 };
 declare const Editor: EditorComponent;
 //#endregion
+//#region src/components/dnd/draggable.d.ts
+interface DraggableItemDragState {
+  ref: (node: HTMLElement | null) => void;
+  dragProps: React.HTMLAttributes<HTMLElement>;
+  isDragging: boolean;
+}
+interface DraggableItemProps {
+  item: Section;
+  children: (drag: DraggableItemDragState) => React.ReactNode;
+}
+declare const DraggableItem: ({
+  item,
+  children
+}: DraggableItemProps) => react.ReactNode;
+//#endregion
 //#region src/components/dnd/dnd.d.ts
+interface PaletteRenderData {
+  items: Section[];
+  onAdd: (item: Section) => void;
+  DraggableItem: typeof DraggableItem;
+}
+interface PanelRenderData {
+  item?: Section;
+  onChange: (next: Partial<Section>) => void;
+  onDelete: (id: string) => void;
+}
 interface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'onChange'> {
   value?: string;
   props?: Record<string, unknown>;
@@ -159,8 +185,10 @@ interface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'onChange'> {
   frame?: FrameProps;
   provider?: (children: React.ReactNode) => React.ReactNode;
   onChange?: (value: string) => void;
+  renderPalette?: (data: PaletteRenderData) => React.ReactNode;
+  renderPanel?: (data: PanelRenderData) => React.ReactNode;
 }
-declare const Dnd: ({
+declare const Dnd$1: ({
   value: _value,
   props,
   modules,
@@ -169,9 +197,17 @@ declare const Dnd: ({
   items,
   frame,
   provider,
+  renderPalette,
+  renderPanel,
   ...restProps
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/components/dnd/index.d.ts
+type DndComponent = typeof Dnd$1 & {
+  DraggableItem: typeof DraggableItem;
+};
+declare const Dnd: DndComponent;
+//#endregion
 //#region src/index.d.ts
 declare const App: {
   ({
@@ -232,7 +268,7 @@ declare const App: {
       ...props
     }: Props$2) => react_jsx_runtime0.JSX.Element;
   };
-  Dnd: ({
+  Dnd: (({
     value: _value,
     props,
     modules,
@@ -241,8 +277,15 @@ declare const App: {
     items,
     frame,
     provider,
+    renderPalette,
+    renderPanel,
     ...restProps
-  }: Props) => react_jsx_runtime0.JSX.Element;
+  }: Props) => react_jsx_runtime0.JSX.Element) & {
+    DraggableItem: ({
+      item,
+      children
+    }: DraggableItemProps) => react.ReactNode;
+  };
 };
 declare const LiveRenderer: ({
   code,

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,19 +26,17 @@ 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
@@ -55,16 +53,18 @@ const ContextProvider = ({ children }) => {
 			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
 		})
 	});
@@ -119,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;
@@ -152,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
@@ -207,66 +205,73 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 		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,
@@ -330,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
@@ -459,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) {
@@ -12606,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();
@@ -12706,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,
@@ -12772,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",
@@ -12803,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, {
@@ -12822,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 }) => {
@@ -12837,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,
@@ -12948,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;
@@ -12974,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]);
@@ -13000,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, {