@alepha/react 0.15.0 → 0.15.1

package/dist/router/index.browser.js

@@ -1,15 +1,24 @@
+import { AlephaContext, AlephaReact, ClientOnly, ErrorBoundary, useAlepha, useEvents, useInject, useStore } from "@alepha/react";
 import { $atom, $env, $hook, $inject, $module, $use, Alepha, AlephaError, KIND, Primitive, createPrimitive, t } from "alepha";
 import { AlephaDateTime, DateTimeProvider } from "alepha/datetime";
-import { $logger } from "alepha/logger";
+import { AlephaServer } from "alepha/server";
 import { AlephaServerLinks, LinkProvider } from "alepha/server/links";
 import { BrowserHeadProvider } from "@alepha/react/head";
+import { $logger } from "alepha/logger";
 import { RouterProvider } from "alepha/router";
 import { StrictMode, createContext, createElement, memo, use, useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AlephaContext, AlephaReact, ClientOnly, ErrorBoundary, useAlepha, useEvents, useInject, useStore } from "@alepha/react";
 import { createRoot, hydrateRoot } from "react-dom/client";
-import { AlephaServer } from "alepha/server";
 
+//#region ../../src/router/constants/PAGE_PRELOAD_KEY.ts
+/**
+* Symbol key for SSR module preloading path.
+* Using Symbol.for() allows the Vite plugin to inject this at build time.
+* @internal
+*/
+const PAGE_PRELOAD_KEY = Symbol.for("alepha.page.preload");
+
+//#endregion
 //#region ../../src/router/services/ReactPageService.ts
 /**
 * $page methods interface.
@@ -23,15 +32,6 @@ var ReactPageService = class {
 	}
 };
 
-//#endregion
-//#region ../../src/router/constants/PAGE_PRELOAD_KEY.ts
-/**
-* Symbol key for SSR module preloading path.
-* Using Symbol.for() allows the Vite plugin to inject this at build time.
-* @internal
-*/
-const PAGE_PRELOAD_KEY = Symbol.for("alepha.page.preload");
-
 //#endregion
 //#region ../../src/router/primitives/$page.ts
 /**
@@ -196,33 +196,177 @@ var NotFound_default = NotFound;
 
 //#endregion
 //#region ../../src/router/components/ErrorViewer.tsx
+const isBrowser = typeof window !== "undefined";
 /**
-* Error viewer component that displays error details in development mode
+* Error viewer component - Terminal/brutalist aesthetic
 */
 const ErrorViewer = ({ error, alepha }) => {
 	const [expanded, setExpanded] = useState(false);
-	if (alepha.isProduction()) return /* @__PURE__ */ jsx(ErrorViewerProduction, {});
+	const [showNodeModules, setShowNodeModules] = useState(false);
+	const [visible, setVisible] = useState(false);
+	const containerRef = useRef(null);
+	const isProduction = alepha.isProduction();
+	useEffect(() => {
+		const timer = setTimeout(() => setVisible(true), 10);
+		return () => clearTimeout(timer);
+	}, []);
+	useEffect(() => {
+		if (!isBrowser) return;
+		const handler = (e) => {
+			if (e.key === "c" && !e.metaKey && !e.ctrlKey) copyToClipboard(error.stack || error.message);
+		};
+		window.addEventListener("keydown", handler);
+		return () => window.removeEventListener("keydown", handler);
+	}, [error]);
+	if (isProduction) return /* @__PURE__ */ jsx(ErrorViewerProduction, {});
 	const frames = parseStackTrace(error.stack);
-	const visibleFrames = expanded ? frames : frames.slice(0, 6);
-	const hiddenCount = frames.length - 6;
-	return /* @__PURE__ */ jsx("div", {
-		style: styles.overlay,
-		children: /* @__PURE__ */ jsxs("div", {
-			style: styles.container,
-			children: [/* @__PURE__ */ jsx(Header, { error }), /* @__PURE__ */ jsx(StackTraceSection, {
-				frames,
-				visibleFrames,
-				expanded,
-				hiddenCount,
-				onToggle: () => setExpanded(!expanded)
-			})]
-		})
+	const appFrames = frames.filter((f) => !f.isNodeModules);
+	const nodeModulesFrames = frames.filter((f) => f.isNodeModules);
+	const visibleAppFrames = expanded ? appFrames : appFrames.slice(0, 5);
+	const hiddenAppCount = appFrames.length - 5;
+	const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString("en-US", {
+		hour12: false,
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		style: {
+			...styles.overlay,
+			opacity: visible ? 1 : 0
+		},
+		role: "alertdialog",
+		"aria-modal": "true",
+		"aria-labelledby": "error-viewer-title",
+		children: [/* @__PURE__ */ jsx("div", {
+			style: styles.scanlines,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				...styles.container,
+				transform: visible ? "translateY(0)" : "translateY(-20px)",
+				opacity: visible ? 1 : 0
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: styles.terminalBar,
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							style: styles.terminalDots,
+							children: [
+								/* @__PURE__ */ jsx("span", { style: {
+									...styles.dot,
+									backgroundColor: "#ff5f57"
+								} }),
+								/* @__PURE__ */ jsx("span", { style: {
+									...styles.dot,
+									backgroundColor: "#febc2e"
+								} }),
+								/* @__PURE__ */ jsx("span", { style: {
+									...styles.dot,
+									backgroundColor: "#28c840"
+								} })
+							]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							style: styles.terminalTitle,
+							children: /* @__PURE__ */ jsxs("span", {
+								style: styles.terminalTitleText,
+								children: ["error — ", timestamp]
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: styles.terminalActions,
+							children: [/* @__PURE__ */ jsx("kbd", {
+								style: styles.kbd,
+								children: "C"
+							}), /* @__PURE__ */ jsx("span", {
+								style: styles.kbdLabel,
+								children: "copy"
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(Header, { error }),
+				/* @__PURE__ */ jsxs("div", {
+					style: styles.stackSection,
+					children: [/* @__PURE__ */ jsxs("div", {
+						style: styles.stackHeader,
+						children: [/* @__PURE__ */ jsx("span", {
+							style: styles.stackHeaderText,
+							children: "STACK TRACE"
+						}), /* @__PURE__ */ jsxs("span", {
+							style: styles.stackCount,
+							children: [
+								appFrames.length,
+								" frames",
+								nodeModulesFrames.length > 0 && ` · ${nodeModulesFrames.length} in node_modules`
+							]
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						style: styles.frameList,
+						children: [
+							visibleAppFrames.map((frame, i) => /* @__PURE__ */ jsx(StackFrameRow, {
+								frame,
+								index: i
+							}, `${frame.raw}-${i}`)),
+							hiddenAppCount > 0 && !expanded && /* @__PURE__ */ jsx(ExpandButton, {
+								onClick: () => setExpanded(true),
+								label: `Show ${hiddenAppCount} more frames`
+							}),
+							expanded && hiddenAppCount > 0 && /* @__PURE__ */ jsx(ExpandButton, {
+								onClick: () => setExpanded(false),
+								label: "Collapse"
+							}),
+							nodeModulesFrames.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: () => setShowNodeModules(!showNodeModules),
+								style: styles.nodeModulesToggle,
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										style: styles.nodeModulesIcon,
+										children: showNodeModules ? "▼" : "▶"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										style: styles.nodeModulesLabel,
+										children: "node_modules"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										style: styles.nodeModulesCount,
+										children: nodeModulesFrames.length
+									})
+								]
+							}), showNodeModules && /* @__PURE__ */ jsx("div", {
+								style: styles.nodeModulesFrames,
+								children: nodeModulesFrames.map((frame, i) => /* @__PURE__ */ jsx(StackFrameRow, {
+									frame,
+									index: appFrames.length + i,
+									dimmed: true
+								}, `nm-${frame.raw}-${i}`))
+							})] })
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: styles.footer,
+					children: /* @__PURE__ */ jsxs("span", {
+						style: styles.footerText,
+						children: [
+							"Press ",
+							/* @__PURE__ */ jsx("kbd", {
+								style: styles.kbdInline,
+								children: "C"
+							}),
+							" to copy stack trace"
+						]
+					})
+				})
+			]
+		})]
 	});
 };
 var ErrorViewer_default = ErrorViewer;
-/**
-* Parse stack trace string into structured frames
-*/
 function parseStackTrace(stack) {
 	if (!stack) return [];
 	const lines = stack.split("\n").slice(1);
@@ -235,17 +379,16 @@ function parseStackTrace(stack) {
 	}
 	return frames;
 }
-/**
-* Parse a single stack trace line into a structured frame
-*/
 function parseStackLine(line) {
+	const isNodeModules = line.includes("node_modules") || line.includes("node:");
 	const withFn = line.match(/^at\s+(.+?)\s+\((.+):(\d+):(\d+)\)$/);
 	if (withFn) return {
 		fn: withFn[1],
 		file: withFn[2],
 		line: withFn[3],
 		col: withFn[4],
-		raw: line
+		raw: line,
+		isNodeModules
 	};
 	const withoutFn = line.match(/^at\s+(.+):(\d+):(\d+)$/);
 	if (withoutFn) return {
@@ -253,236 +396,412 @@ function parseStackLine(line) {
 		file: withoutFn[1],
 		line: withoutFn[2],
 		col: withoutFn[3],
-		raw: line
+		raw: line,
+		isNodeModules
 	};
 	return {
 		fn: "",
 		file: line.replace(/^at\s+/, ""),
 		line: "",
 		col: "",
-		raw: line
+		raw: line,
+		isNodeModules
 	};
 }
-/**
-* Copy text to clipboard
-*/
 function copyToClipboard(text) {
-	navigator.clipboard.writeText(text).catch((err) => {
-		console.error("Clipboard error:", err);
-	});
+	if (!isBrowser || !navigator.clipboard) return Promise.resolve(false);
+	return navigator.clipboard.writeText(text).then(() => true).catch(() => false);
 }
 /**
-* Header section with error type and message
+* Header with error badge and message
 */
 function Header({ error }) {
 	const [copied, setCopied] = useState(false);
-	const handleCopy = () => {
-		copyToClipboard(error.stack || error.message);
-		setCopied(true);
-		setTimeout(() => setCopied(false), 2e3);
+	const [hovered, setHovered] = useState(false);
+	useEffect(() => {
+		if (!copied) return;
+		const timer = setTimeout(() => setCopied(false), 2e3);
+		return () => clearTimeout(timer);
+	}, [copied]);
+	const handleCopy = async () => {
+		if (await copyToClipboard(error.stack || error.message)) setCopied(true);
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		style: styles.header,
 		children: [/* @__PURE__ */ jsxs("div", {
-			style: styles.headerTop,
-			children: [/* @__PURE__ */ jsx("div", {
-				style: styles.badge,
-				children: error.name
+			style: styles.headerRow,
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: styles.errorIndicator,
+				children: [/* @__PURE__ */ jsx("div", { style: styles.errorGlow }), /* @__PURE__ */ jsx("div", {
+					style: styles.errorBadge,
+					children: error.name
+				})]
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: handleCopy,
-				style: styles.copyBtn,
-				children: copied ? "Copied" : "Copy Stack"
+				onMouseEnter: () => setHovered(true),
+				onMouseLeave: () => setHovered(false),
+				style: {
+					...styles.copyBtn,
+					...hovered ? styles.copyBtnHover : {}
+				},
+				children: copied ? "✓ Copied" : "Copy"
 			})]
 		}), /* @__PURE__ */ jsx("h1", {
+			id: "error-viewer-title",
 			style: styles.message,
 			children: error.message
 		})]
 	});
 }
 /**
-* Stack trace section with expandable frames
+* Single stack frame row
 */
-function StackTraceSection({ frames, visibleFrames, expanded, hiddenCount, onToggle }) {
-	if (frames.length === 0) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		style: styles.stackSection,
-		children: [/* @__PURE__ */ jsx("div", {
-			style: styles.stackHeader,
-			children: "Call Stack"
+function StackFrameRow({ frame, index, dimmed = false }) {
+	const [hovered, setHovered] = useState(false);
+	const isFirst = index === 0 && !dimmed;
+	const fileName = frame.file.split("/").pop() || frame.file;
+	const dirPath = frame.file.substring(0, frame.file.length - fileName.length);
+	const vsCodeLink = frame.file && frame.line ? `vscode://file${frame.file}:${frame.line}:${frame.col || 1}` : null;
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		style: {
+			...styles.frameIndex,
+			color: isFirst ? "#ff6b6b" : dimmed ? "#555" : "#666"
+		},
+		children: String(index + 1).padStart(2, "0")
+	}), /* @__PURE__ */ jsxs("div", {
+		style: styles.frameContent,
+		children: [frame.fn && /* @__PURE__ */ jsx("div", {
+			style: {
+				...styles.fnName,
+				color: dimmed ? "#888" : "#f0f0f0"
+			},
+			children: formatFunctionName(frame.fn)
 		}), /* @__PURE__ */ jsxs("div", {
-			style: styles.frameList,
+			style: styles.filePath,
 			children: [
-				visibleFrames.map((frame, i) => /* @__PURE__ */ jsx(StackFrameRow, {
-					frame,
-					index: i
-				}, i)),
-				!expanded && hiddenCount > 0 && /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: onToggle,
-					style: styles.expandBtn,
+				/* @__PURE__ */ jsx("span", {
+					style: {
+						...styles.dirPath,
+						opacity: dimmed ? .6 : .8
+					},
+					children: dirPath
+				}),
+				/* @__PURE__ */ jsx("span", {
+					style: {
+						...styles.fileName,
+						color: dimmed ? "#5a9aba" : "#7cc4eb"
+					},
+					children: fileName
+				}),
+				frame.line && /* @__PURE__ */ jsxs("span", {
+					style: {
+						...styles.lineCol,
+						color: dimmed ? "#9a8a40" : "#e5b83a"
+					},
 					children: [
-						"Show ",
-						hiddenCount,
-						" more frames"
+						":",
+						frame.line,
+						frame.col && `:${frame.col}`
 					]
-				}),
-				expanded && hiddenCount > 0 && /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: onToggle,
-					style: styles.expandBtn,
-					children: "Show less"
 				})
 			]
 		})]
+	})] });
+	const rowStyles = {
+		...styles.frame,
+		...isFirst ? styles.frameFirst : {},
+		backgroundColor: hovered ? "rgba(255,255,255,0.03)" : "transparent"
+	};
+	if (vsCodeLink && isBrowser) return /* @__PURE__ */ jsx("a", {
+		href: vsCodeLink,
+		style: {
+			...rowStyles,
+			textDecoration: "none"
+		},
+		onMouseEnter: () => setHovered(true),
+		onMouseLeave: () => setHovered(false),
+		children: content
+	});
+	return /* @__PURE__ */ jsx("div", {
+		style: rowStyles,
+		children: content
 	});
 }
 /**
-* Single stack frame row
+* Format function name with syntax highlighting
 */
-function StackFrameRow({ frame, index }) {
-	const isFirst = index === 0;
-	const fileName = frame.file.split("/").pop() || frame.file;
-	const dirPath = frame.file.substring(0, frame.file.length - fileName.length);
-	return /* @__PURE__ */ jsxs("div", {
+function formatFunctionName(fn) {
+	const asyncMatch = fn.match(/^(async\s+)?(.+)$/);
+	if (asyncMatch?.[1]) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		style: { color: "#c678dd" },
+		children: "async "
+	}), /* @__PURE__ */ jsx("span", { children: asyncMatch[2] })] });
+	const methodMatch = fn.match(/^(.+)\.([^.]+)$/);
+	if (methodMatch) return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			style: { color: "#e5c07b" },
+			children: methodMatch[1]
+		}),
+		/* @__PURE__ */ jsx("span", {
+			style: { color: "#666" },
+			children: "."
+		}),
+		/* @__PURE__ */ jsx("span", { children: methodMatch[2] })
+	] });
+	return fn;
+}
+/**
+* Expand/collapse button
+*/
+function ExpandButton({ onClick, label }) {
+	const [hovered, setHovered] = useState(false);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		onMouseEnter: () => setHovered(true),
+		onMouseLeave: () => setHovered(false),
 		style: {
-			...styles.frame,
-			...isFirst ? styles.frameFirst : {}
+			...styles.expandBtn,
+			backgroundColor: hovered ? "rgba(255,255,255,0.05)" : "transparent",
+			color: hovered ? "#aaa" : "#777"
 		},
-		children: [/* @__PURE__ */ jsx("div", {
-			style: styles.frameIndex,
-			children: index + 1
-		}), /* @__PURE__ */ jsxs("div", {
-			style: styles.frameContent,
-			children: [frame.fn && /* @__PURE__ */ jsx("div", {
-				style: styles.fnName,
-				children: frame.fn
-			}), /* @__PURE__ */ jsxs("div", {
-				style: styles.filePath,
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						style: styles.dirPath,
-						children: dirPath
-					}),
-					/* @__PURE__ */ jsx("span", {
-						style: styles.fileName,
-						children: fileName
-					}),
-					frame.line && /* @__PURE__ */ jsxs("span", {
-						style: styles.lineCol,
-						children: [
-							":",
-							frame.line,
-							":",
-							frame.col
-						]
-					})
-				]
-			})]
-		})]
+		children: label
 	});
 }
 /**
-* Production error view - minimal information
+* Production error view - minimal, user-friendly
 */
 function ErrorViewerProduction() {
+	const [hovered, setHovered] = useState(false);
+	const handleReload = () => {
+		if (isBrowser) window.location.reload();
+	};
 	return /* @__PURE__ */ jsx("div", {
 		style: styles.overlay,
+		role: "alertdialog",
+		"aria-modal": "true",
 		children: /* @__PURE__ */ jsxs("div", {
 			style: styles.prodContainer,
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					style: styles.prodIcon,
-					children: "!"
+					children: /* @__PURE__ */ jsxs("svg", {
+						width: "32",
+						height: "32",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						children: [
+							/* @__PURE__ */ jsx("circle", {
+								cx: "12",
+								cy: "12",
+								r: "10"
+							}),
+							/* @__PURE__ */ jsx("line", {
+								x1: "12",
+								y1: "8",
+								x2: "12",
+								y2: "12"
+							}),
+							/* @__PURE__ */ jsx("line", {
+								x1: "12",
+								y1: "16",
+								x2: "12.01",
+								y2: "16"
+							})
+						]
+					})
 				}),
 				/* @__PURE__ */ jsx("h1", {
 					style: styles.prodTitle,
-					children: "Application Error"
+					children: "Something went wrong"
 				}),
 				/* @__PURE__ */ jsx("p", {
 					style: styles.prodMessage,
-					children: "An unexpected error occurred. Please try again later."
+					children: "We encountered an unexpected error. Please try again."
 				}),
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
-					onClick: () => window.location.reload(),
-					style: styles.prodButton,
-					children: "Reload Page"
+					onClick: handleReload,
+					onMouseEnter: () => setHovered(true),
+					onMouseLeave: () => setHovered(false),
+					style: {
+						...styles.prodButton,
+						backgroundColor: hovered ? "#333" : "#222",
+						borderColor: hovered ? "#555" : "#444"
+					},
+					children: "Reload page"
 				})
 			]
 		})
 	});
 }
+const MONO_FONT = "ui-monospace, \"JetBrains Mono\", \"Fira Code\", SFMono-Regular, Menlo, Monaco, Consolas, monospace";
 const styles = {
 	overlay: {
 		position: "fixed",
 		inset: 0,
-		backgroundColor: "rgba(0, 0, 0, 0.8)",
+		backgroundColor: "rgba(0, 0, 0, 0.92)",
 		display: "flex",
 		alignItems: "flex-start",
 		justifyContent: "center",
 		padding: "40px 20px",
 		overflow: "auto",
-		fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
-		zIndex: 99999
+		fontFamily: MONO_FONT,
+		fontSize: "13px",
+		zIndex: 99999,
+		transition: "opacity 0.2s ease-out"
+	},
+	scanlines: {
+		position: "fixed",
+		inset: 0,
+		background: "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)",
+		pointerEvents: "none",
+		zIndex: 1e5
 	},
 	container: {
 		width: "100%",
-		maxWidth: "960px",
-		backgroundColor: "#1a1a1a",
-		borderRadius: "12px",
+		maxWidth: "900px",
+		backgroundColor: "#0d0d0d",
+		borderRadius: "8px",
 		overflow: "hidden",
-		boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)"
+		boxShadow: "0 0 0 1px #333, 0 25px 80px -12px rgba(0, 0, 0, 0.8)",
+		transition: "transform 0.3s ease-out, opacity 0.3s ease-out"
+	},
+	terminalBar: {
+		display: "flex",
+		alignItems: "center",
+		padding: "12px 16px",
+		backgroundColor: "#1a1a1a",
+		borderBottom: "1px solid #333"
+	},
+	terminalDots: {
+		display: "flex",
+		gap: "8px"
+	},
+	dot: {
+		width: "12px",
+		height: "12px",
+		borderRadius: "50%"
+	},
+	terminalTitle: {
+		flex: 1,
+		textAlign: "center"
+	},
+	terminalTitleText: {
+		color: "#777",
+		fontSize: "12px",
+		letterSpacing: "0.5px"
+	},
+	terminalActions: {
+		display: "flex",
+		alignItems: "center",
+		gap: "6px"
+	},
+	kbd: {
+		display: "inline-block",
+		padding: "2px 6px",
+		backgroundColor: "#2a2a2a",
+		borderRadius: "4px",
+		fontSize: "11px",
+		color: "#aaa",
+		border: "1px solid #444"
+	},
+	kbdInline: {
+		display: "inline-block",
+		padding: "1px 5px",
+		backgroundColor: "#222",
+		borderRadius: "3px",
+		fontSize: "11px",
+		color: "#888",
+		border: "1px solid #444",
+		marginLeft: "4px",
+		marginRight: "4px"
+	},
+	kbdLabel: {
+		color: "#777",
+		fontSize: "11px"
 	},
 	header: {
-		padding: "24px 28px",
-		borderBottom: "1px solid #333",
-		background: "linear-gradient(to bottom, #1f1f1f, #1a1a1a)"
+		padding: "24px",
+		borderBottom: "1px solid #333"
 	},
-	headerTop: {
+	headerRow: {
 		display: "flex",
 		alignItems: "center",
 		justifyContent: "space-between",
 		marginBottom: "16px"
 	},
-	badge: {
+	errorIndicator: {
+		position: "relative",
+		display: "inline-flex"
+	},
+	errorGlow: {
+		position: "absolute",
+		inset: "-4px",
+		background: "radial-gradient(ellipse at center, rgba(255,80,80,0.3) 0%, transparent 70%)",
+		borderRadius: "12px",
+		filter: "blur(8px)"
+	},
+	errorBadge: {
+		position: "relative",
 		display: "inline-block",
-		padding: "6px 12px",
-		backgroundColor: "#dc2626",
-		color: "#fff",
+		padding: "6px 14px",
+		backgroundColor: "#3d1a1a",
+		color: "#ff7b7b",
 		fontSize: "12px",
 		fontWeight: 600,
 		borderRadius: "6px",
-		letterSpacing: "0.025em"
+		border: "1px solid #5a2828",
+		letterSpacing: "0.5px"
 	},
 	copyBtn: {
-		padding: "8px 16px",
+		padding: "8px 14px",
 		backgroundColor: "transparent",
 		color: "#888",
-		fontSize: "13px",
+		fontSize: "12px",
 		fontWeight: 500,
-		border: "1px solid #444",
+		borderWidth: "1px",
+		borderStyle: "solid",
+		borderColor: "#444",
 		borderRadius: "6px",
 		cursor: "pointer",
-		transition: "all 0.15s"
+		transition: "all 0.15s",
+		fontFamily: MONO_FONT
+	},
+	copyBtnHover: {
+		backgroundColor: "#252525",
+		color: "#bbb",
+		borderColor: "#555"
 	},
 	message: {
 		margin: 0,
-		fontSize: "20px",
-		fontWeight: 500,
-		color: "#fff",
-		lineHeight: 1.5,
-		wordBreak: "break-word"
+		fontSize: "18px",
+		fontWeight: 400,
+		color: "#e8e8e8",
+		lineHeight: 1.6,
+		wordBreak: "break-word",
+		fontFamily: MONO_FONT
 	},
-	stackSection: { padding: "0" },
+	stackSection: { borderTop: "1px solid #2a2a2a" },
 	stackHeader: {
-		padding: "16px 28px",
-		fontSize: "11px",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		padding: "14px 24px",
+		borderBottom: "1px solid #2a2a2a"
+	},
+	stackHeaderText: {
+		fontSize: "10px",
 		fontWeight: 600,
 		color: "#666",
-		textTransform: "uppercase",
-		letterSpacing: "0.1em",
-		borderBottom: "1px solid #2a2a2a"
+		letterSpacing: "1.5px"
+	},
+	stackCount: {
+		fontSize: "11px",
+		color: "#555"
 	},
 	frameList: {
 		display: "flex",
@@ -491,92 +810,134 @@ const styles = {
 	frame: {
 		display: "flex",
 		alignItems: "flex-start",
-		padding: "14px 28px",
-		borderBottom: "1px solid #252525",
-		transition: "background-color 0.15s"
+		padding: "12px 24px",
+		borderBottom: "1px solid #222",
+		transition: "background-color 0.1s",
+		cursor: "pointer"
+	},
+	frameFirst: {
+		backgroundColor: "rgba(255, 80, 80, 0.08)",
+		borderLeft: "2px solid #ff6b6b"
 	},
-	frameFirst: { backgroundColor: "rgba(220, 38, 38, 0.1)" },
 	frameIndex: {
 		width: "28px",
 		flexShrink: 0,
-		fontSize: "12px",
+		fontSize: "11px",
 		fontWeight: 500,
-		color: "#555",
-		fontFamily: "monospace"
+		fontFamily: MONO_FONT
 	},
 	frameContent: {
 		flex: 1,
 		minWidth: 0
 	},
 	fnName: {
-		fontSize: "14px",
+		fontSize: "13px",
 		fontWeight: 500,
-		color: "#e5e5e5",
 		marginBottom: "4px",
-		fontFamily: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace"
+		fontFamily: MONO_FONT
 	},
 	filePath: {
-		fontSize: "13px",
+		fontSize: "12px",
 		color: "#888",
-		fontFamily: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace",
+		fontFamily: MONO_FONT,
 		wordBreak: "break-all"
 	},
-	dirPath: { color: "#555" },
-	fileName: { color: "#0ea5e9" },
-	lineCol: { color: "#eab308" },
+	dirPath: { color: "#666" },
+	fileName: { color: "#7cc4eb" },
+	lineCol: { color: "#e5b83a" },
 	expandBtn: {
-		padding: "16px 28px",
+		width: "100%",
+		padding: "14px 24px",
 		backgroundColor: "transparent",
+		color: "#777",
+		fontSize: "12px",
+		fontWeight: 500,
+		border: "none",
+		borderTop: "1px solid #2a2a2a",
+		cursor: "pointer",
+		textAlign: "left",
+		transition: "all 0.15s",
+		fontFamily: MONO_FONT
+	},
+	nodeModulesToggle: {
+		display: "flex",
+		alignItems: "center",
+		gap: "10px",
+		width: "100%",
+		padding: "12px 24px",
+		backgroundColor: "#0a0a0a",
 		color: "#666",
-		fontSize: "13px",
+		fontSize: "11px",
 		fontWeight: 500,
 		border: "none",
-		borderTop: "1px solid #252525",
+		borderTop: "1px solid #2a2a2a",
 		cursor: "pointer",
 		textAlign: "left",
-		transition: "all 0.15s"
+		fontFamily: MONO_FONT
+	},
+	nodeModulesIcon: {
+		fontSize: "8px",
+		color: "#555"
+	},
+	nodeModulesLabel: {
+		flex: 1,
+		letterSpacing: "0.5px"
+	},
+	nodeModulesCount: { color: "#555" },
+	nodeModulesFrames: { backgroundColor: "#080808" },
+	footer: {
+		padding: "14px 24px",
+		borderTop: "1px solid #2a2a2a",
+		backgroundColor: "#0a0a0a"
+	},
+	footerText: {
+		fontSize: "11px",
+		color: "#555"
 	},
 	prodContainer: {
 		textAlign: "center",
 		padding: "60px 40px",
-		backgroundColor: "#1a1a1a",
-		borderRadius: "12px",
-		maxWidth: "400px"
+		backgroundColor: "#0d0d0d",
+		borderRadius: "8px",
+		maxWidth: "400px",
+		border: "1px solid #333"
 	},
 	prodIcon: {
 		width: "64px",
 		height: "64px",
 		margin: "0 auto 24px",
-		backgroundColor: "#dc2626",
-		borderRadius: "50%",
+		color: "#666",
 		display: "flex",
 		alignItems: "center",
-		justifyContent: "center",
-		fontSize: "32px",
-		fontWeight: 700,
-		color: "#fff"
+		justifyContent: "center"
 	},
 	prodTitle: {
 		margin: "0 0 12px",
-		fontSize: "24px",
-		fontWeight: 600,
-		color: "#fff"
+		fontSize: "18px",
+		fontWeight: 500,
+		color: "#f0f0f0",
+		fontFamily: MONO_FONT
 	},
 	prodMessage: {
 		margin: "0 0 28px",
-		fontSize: "15px",
+		fontSize: "13px",
 		color: "#888",
-		lineHeight: 1.6
+		lineHeight: 1.6,
+		fontFamily: MONO_FONT
 	},
 	prodButton: {
 		padding: "12px 24px",
-		backgroundColor: "#fff",
-		color: "#000",
-		fontSize: "14px",
-		fontWeight: 600,
-		border: "none",
-		borderRadius: "8px",
-		cursor: "pointer"
+		backgroundColor: "#222",
+		color: "#bbb",
+		fontSize: "13px",
+		fontWeight: 500,
+		borderWidth: "1px",
+		borderStyle: "solid",
+		borderColor: "#444",
+		borderRadius: "6px",
+		cursor: "pointer",
+		transition: "all 0.15s",
+		fontFamily: MONO_FONT
 	}
 };
 
@@ -654,11 +1015,11 @@ const NestedView = (props) => {
 	const animationExitDuration = useRef(0);
 	const animationExitNow = useRef(0);
 	useEvents({
-		"react:transition:begin": async ({ previous, state: state$1 }) => {
+		"react:transition:begin": async ({ previous, state }) => {
 			const layer = previous.layers[index];
 			if (!layer) return;
-			if (`${state$1.url.pathname}/`.startsWith(`${layer.path}/`)) return;
-			const animationExit = parseAnimation(layer.route?.animation, state$1, "exit");
+			if (`${state.url.pathname}/`.startsWith(`${layer.path}/`)) return;
+			const animationExit = parseAnimation(layer.route?.animation, state, "exit");
 			if (animationExit) {
 				const duration = animationExit.duration || 200;
 				animationExitNow.current = Date.now();
@@ -670,8 +1031,8 @@ const NestedView = (props) => {
 				setAnimation("");
 			}
 		},
-		"react:transition:end": async ({ state: state$1 }) => {
-			const layer = state$1.layers[index];
+		"react:transition:end": async ({ state }) => {
+			const layer = state.layers[index];
 			if (animationExitNow.current) {
 				const duration = animationExitDuration.current;
 				const diff = Date.now() - animationExitNow.current;
@@ -679,7 +1040,7 @@ const NestedView = (props) => {
 			}
 			if (!layer?.cache) {
 				setView(layer?.element);
-				const animationEnter = parseAnimation(layer?.route?.animation, state$1, "enter");
+				const animationEnter = parseAnimation(layer?.route?.animation, state, "enter");
 				if (animationEnter) setAnimation(animationEnter.animation);
 				else setAnimation("");
 			}
@@ -842,29 +1203,29 @@ var ReactPageProvider = class {
 		let forceRefresh = false;
 		for (let i = 0; i < stack.length; i++) {
 			const it = stack[i];
-			const route$1 = it.route;
+			const route = it.route;
 			const config = {};
 			try {
-				this.convertStringObjectToObject(route$1.schema?.query, state.query);
-				config.query = route$1.schema?.query ? this.alepha.codec.decode(route$1.schema.query, state.query) : {};
+				this.convertStringObjectToObject(route.schema?.query, state.query);
+				config.query = route.schema?.query ? this.alepha.codec.decode(route.schema.query, state.query) : {};
 			} catch (e) {
 				it.error = e;
 				break;
 			}
 			try {
-				config.params = route$1.schema?.params ? this.alepha.codec.decode(route$1.schema.params, state.params) : {};
+				config.params = route.schema?.params ? this.alepha.codec.decode(route.schema.params, state.params) : {};
 			} catch (e) {
 				it.error = e;
 				break;
 			}
 			it.config = { ...config };
-			if (previous?.[i] && !forceRefresh && previous[i].name === route$1.name) {
+			if (previous?.[i] && !forceRefresh && previous[i].name === route.name) {
 				const url = (str) => str ? str.replace(/\/\/+/g, "/") : "/";
 				if (JSON.stringify({
 					part: url(previous[i].part),
 					params: previous[i].config?.params ?? {}
 				}) === JSON.stringify({
-					part: url(route$1.path),
+					part: url(route.path),
 					params: config.params ?? {}
 				})) {
 					it.props = previous[i].props;
@@ -878,11 +1239,11 @@ var ReactPageProvider = class {
 				}
 				forceRefresh = true;
 			}
-			if (!route$1.loader) continue;
+			if (!route.loader) continue;
 			try {
 				const args = Object.create(state);
 				Object.assign(args, config, context);
-				const props = await route$1.loader?.(args) ?? {};
+				const props = await route.loader?.(args) ?? {};
 				it.props = { ...props };
 				context = {
 					...context,
@@ -907,9 +1268,9 @@ var ReactPageProvider = class {
 			const localErrorHandler = this.getErrorHandler(it.route);
 			if (localErrorHandler) {
 				const onErrorParent = state.onError;
-				state.onError = (error, context$1) => {
-					const result = localErrorHandler(error, context$1);
-					if (result === void 0) return onErrorParent(error, context$1);
+				state.onError = (error, context) => {
+					const result = localErrorHandler(error, context);
+					if (result === void 0) return onErrorParent(error, context);
 					return result;
 				};
 			}
@@ -1032,9 +1393,9 @@ var ReactPageProvider = class {
 	map(pages, target) {
 		const children = target.options.children ? Array.isArray(target.options.children) ? target.options.children : target.options.children() : [];
 		const getChildrenFromParent = (it) => {
-			const children$1 = [];
-			for (const page of pages) if (page.options.parent === it) children$1.push(page);
-			return children$1;
+			const children = [];
+			for (const page of pages) if (page.options.parent === it) children.push(page);
+			return children;
 		};
 		children.push(...getChildrenFromParent(target));
 		return {
@@ -1311,7 +1672,7 @@ var ReactBrowserProvider = class {
 			const hydration = this.getHydrationState();
 			const previous = hydration?.layers ?? [];
 			if (hydration) {
-				for (const [key, value] of Object.entries(hydration)) if (key !== "layers") this.alepha.store.set(key, value);
+				for (const [key, value] of Object.entries(hydration)) if (key !== "layers") this.alepha.set(key, value);
 			}
 			await this.render({ previous });
 			const element = this.router.root(this.state);
@@ -1331,6 +1692,29 @@ var ReactBrowserProvider = class {
 	});
 };
 
+//#endregion
+//#region ../../src/router/providers/ReactBrowserRendererProvider.ts
+/**
+* Browser specific React renderer (react-dom/client interface)
+*/
+var ReactBrowserRendererProvider = class {
+	log = $logger();
+	root;
+	onBrowserRender = $hook({
+		on: "react:browser:render",
+		handler: async ({ hydration, root, element }) => {
+			if (hydration?.layers) {
+				this.root = hydrateRoot(root, element);
+				this.log.info("Hydrated root element");
+			} else {
+				this.root ??= createRoot(root);
+				this.root.render(element);
+				this.log.info("Created root element");
+			}
+		}
+	});
+};
+
 //#endregion
 //#region ../../src/router/services/ReactRouter.ts
 /**
@@ -1463,29 +1847,6 @@ var ReactRouter = class {
 	}
 };
 
-//#endregion
-//#region ../../src/router/providers/ReactBrowserRendererProvider.ts
-/**
-* Browser specific React renderer (react-dom/client interface)
-*/
-var ReactBrowserRendererProvider = class {
-	log = $logger();
-	root;
-	onBrowserRender = $hook({
-		on: "react:browser:render",
-		handler: async ({ hydration, root, element }) => {
-			if (hydration?.layers) {
-				this.root = hydrateRoot(root, element);
-				this.log.info("Hydrated root element");
-			} else {
-				this.root ??= createRoot(root);
-				this.root.render(element);
-				this.log.info("Created root element");
-			}
-		}
-	});
-};
-
 //#endregion
 //#region ../../src/router/hooks/useRouter.ts
 /**
@@ -1573,12 +1934,12 @@ const useQueryParams = (schema, options = {}) => {
 	useEffect(() => {
 		setQueryParams(decode(alepha, schema, querystring));
 	}, [querystring]);
-	return [queryParams, (queryParams$1) => {
-		setQueryParams(queryParams$1);
+	return [queryParams, (queryParams) => {
+		setQueryParams(queryParams);
 		router.setQueryParams((data) => {
 			return {
 				...data,
-				[key]: encode(alepha, schema, queryParams$1)
+				[key]: encode(alepha, schema, queryParams)
 			};
 		});
 	}];