@alepha/react 0.14.4 → 0.15.1

package/dist/router/index.js

@@ -1,19 +1,28 @@
 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, ServerProvider, ServerRouterProvider } from "alepha/server";
+import { AlephaServerCache } from "alepha/server/cache";
 import { AlephaServerLinks, LinkProvider, ServerLinksProvider } from "alepha/server/links";
-import { BrowserHeadProvider, ServerHeadProvider } from "@alepha/react/head";
-import { RouterProvider } from "alepha/router";
+import { $logger } from "alepha/logger";
 import { StrictMode, createContext, createElement, memo, use, useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AlephaServer, ServerProvider, ServerRouterProvider, ServerTimingProvider } from "alepha/server";
 import { join } from "node:path";
+import { BrowserHeadProvider, ServerHeadProvider } from "@alepha/react/head";
 import { FileSystemProvider } from "alepha/file";
 import { ServerStaticProvider } from "alepha/server/static";
-import { renderToReadableStream } from "react-dom/server";
-import { AlephaServerCache } from "alepha/server/cache";
+import { renderToReadableStream, renderToString } from "react-dom/server";
+import { RouterProvider } from "alepha/router";
+
+//#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.
@@ -27,15 +36,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
 /**
@@ -161,72 +161,179 @@ var PagePrimitive = class extends Primitive {
 };
 $page[KIND] = PagePrimitive;
 
-//#endregion
-//#region ../../src/router/components/NotFound.tsx
-/**
-* Default 404 Not Found page component.
-*/
-const NotFound = (props) => /* @__PURE__ */ jsxs("div", {
-	style: {
-		width: "100%",
-		minHeight: "90vh",
-		boxSizing: "border-box",
-		display: "flex",
-		flexDirection: "column",
-		justifyContent: "center",
-		alignItems: "center",
-		textAlign: "center",
-		fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
-		padding: "2rem",
-		...props.style
-	},
-	children: [/* @__PURE__ */ jsx("div", {
-		style: {
-			fontSize: "6rem",
-			fontWeight: 200,
-			lineHeight: 1
-		},
-		children: "404"
-	}), /* @__PURE__ */ jsx("div", {
-		style: {
-			fontSize: "0.875rem",
-			marginTop: "1rem",
-			opacity: .6
-		},
-		children: "Page not found"
-	})]
-});
-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);
@@ -239,17 +346,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 {
@@ -257,236 +363,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",
@@ -495,92 +777,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
 	}
 };
 
@@ -658,11 +982,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();
@@ -674,8 +998,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;
@@ -683,7 +1007,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("");
 			}
@@ -755,33 +1079,70 @@ function parseAnimation(animationLike, state, type = "enter") {
 }
 
 //#endregion
-//#region ../../src/router/providers/ReactPageProvider.ts
-const envSchema$1 = t.object({ REACT_STRICT_MODE: t.boolean({ default: true }) });
+//#region ../../src/router/components/NotFound.tsx
 /**
-* Handle page routes for React applications. (Browser and Server)
+* Default 404 Not Found page component.
 */
-var ReactPageProvider = class {
-	log = $logger();
-	env = $env(envSchema$1);
-	alepha = $inject(Alepha);
-	pages = [];
-	getPages() {
-		return this.pages;
-	}
-	getConcretePages() {
-		const pages = [];
-		for (const page of this.pages) {
-			if (page.children && page.children.length > 0) continue;
-			const fullPath = this.pathname(page.name);
-			if (fullPath.includes(":") || fullPath.includes("*")) {
-				if (typeof page.static === "object") {
-					const entries = page.static.entries;
-					if (entries && entries.length > 0) for (const entry of entries) {
-						const params = entry.params;
-						const path = this.compile(page.path ?? "", params);
-						if (!path.includes(":") && !path.includes("*")) pages.push({
-							...page,
-							name: params[Object.keys(params)[0]],
+const NotFound = (props) => /* @__PURE__ */ jsxs("div", {
+	style: {
+		width: "100%",
+		minHeight: "90vh",
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center",
+		alignItems: "center",
+		textAlign: "center",
+		fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+		padding: "2rem",
+		...props.style
+	},
+	children: [/* @__PURE__ */ jsx("div", {
+		style: {
+			fontSize: "6rem",
+			fontWeight: 200,
+			lineHeight: 1
+		},
+		children: "404"
+	}), /* @__PURE__ */ jsx("div", {
+		style: {
+			fontSize: "0.875rem",
+			marginTop: "1rem",
+			opacity: .6
+		},
+		children: "Page not found"
+	})]
+});
+var NotFound_default = NotFound;
+
+//#endregion
+//#region ../../src/router/providers/ReactPageProvider.ts
+const envSchema$1 = t.object({ REACT_STRICT_MODE: t.boolean({ default: true }) });
+/**
+* Handle page routes for React applications. (Browser and Server)
+*/
+var ReactPageProvider = class {
+	log = $logger();
+	env = $env(envSchema$1);
+	alepha = $inject(Alepha);
+	pages = [];
+	getPages() {
+		return this.pages;
+	}
+	getConcretePages() {
+		const pages = [];
+		for (const page of this.pages) {
+			if (page.children && page.children.length > 0) continue;
+			const fullPath = this.pathname(page.name);
+			if (fullPath.includes(":") || fullPath.includes("*")) {
+				if (typeof page.static === "object") {
+					const entries = page.static.entries;
+					if (entries && entries.length > 0) for (const entry of entries) {
+						const params = entry.params;
+						const path = this.compile(page.path ?? "", params);
+						if (!path.includes(":") && !path.includes("*")) pages.push({
+							...page,
+							name: params[Object.keys(params)[0]],
 							staticName: page.name,
 							path,
 							...entry
@@ -846,29 +1207,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;
@@ -882,11 +1243,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,
@@ -911,9 +1272,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;
 				};
 			}
@@ -1036,9 +1397,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 {
@@ -1081,468 +1442,79 @@ const isPageRoute = (it) => {
 };
 
 //#endregion
-//#region ../../src/router/providers/ReactBrowserRouterProvider.ts
-/**
-* Implementation of AlephaRouter for React in browser environment.
-*/
-var ReactBrowserRouterProvider = class extends RouterProvider {
-	log = $logger();
-	alepha = $inject(Alepha);
-	pageApi = $inject(ReactPageProvider);
-	browserHeadProvider = $inject(BrowserHeadProvider);
-	add(entry) {
-		this.pageApi.add(entry);
-	}
-	configure = $hook({
-		on: "configure",
-		handler: async () => {
-			for (const page of this.pageApi.getPages()) if (page.component || page.lazy) this.push({
-				path: page.match,
-				page
-			});
-		}
-	});
-	async transition(url, previous = [], meta = {}) {
-		const { pathname, search } = url;
-		const state = {
-			url,
-			query: {},
-			params: {},
-			layers: [],
-			onError: () => null,
-			meta
-		};
-		await this.alepha.events.emit("react:action:begin", { type: "transition" });
-		await this.alepha.events.emit("react:transition:begin", {
-			previous: this.alepha.store.get("alepha.react.router.state"),
-			state
-		});
-		try {
-			const { route, params } = this.match(pathname);
-			const query = {};
-			if (search) for (const [key, value] of new URLSearchParams(search).entries()) query[key] = String(value);
-			state.name = route?.page.name;
-			state.query = query;
-			state.params = params ?? {};
-			if (isPageRoute(route)) {
-				const { redirect } = await this.pageApi.createLayers(route.page, state, previous);
-				if (redirect) return redirect;
-			}
-			if (state.layers.length === 0) state.layers.push({
-				name: "not-found",
-				element: createElement(NotFound_default),
-				index: 0,
-				path: "/"
-			});
-			await this.alepha.events.emit("react:action:success", { type: "transition" });
-			await this.alepha.events.emit("react:transition:success", { state });
-		} catch (e) {
-			this.log.error("Transition has failed", e);
-			state.layers = [{
-				name: "error",
-				element: this.pageApi.renderError(e),
-				index: 0,
-				path: "/"
-			}];
-			await this.alepha.events.emit("react:action:error", {
-				type: "transition",
-				error: e
-			});
-			await this.alepha.events.emit("react:transition:error", {
-				error: e,
-				state
-			});
-		}
-		if (previous) for (let i = 0; i < previous.length; i++) {
-			const layer = previous[i];
-			if (state.layers[i]?.name !== layer.name) this.pageApi.page(layer.name)?.onLeave?.();
-		}
-		this.alepha.store.set("alepha.react.router.state", state);
-		await this.alepha.events.emit("react:action:end", { type: "transition" });
-		await this.alepha.events.emit("react:transition:end", { state });
-		this.browserHeadProvider.fillAndRenderHead(state);
-	}
-	root(state) {
-		return this.pageApi.root(state);
-	}
-};
-
-//#endregion
-//#region ../../src/router/providers/ReactBrowserProvider.ts
+//#region ../../src/router/providers/ReactServerTemplateProvider.ts
 /**
-* React browser renderer configuration atom
+* Handles HTML template parsing, preprocessing, and streaming for SSR.
+*
+* Responsibilities:
+* - Parse template once at startup into logical slots
+* - Pre-encode static parts as Uint8Array for zero-copy streaming
+* - Render dynamic parts (attributes, head content) efficiently
+* - Build hydration data for client-side rehydration
+*
+* This provider is injected into ReactServerProvider to handle all
+* template-related operations, keeping ReactServerProvider focused
+* on request handling and React rendering coordination.
 */
-const reactBrowserOptions = $atom({
-	name: "alepha.react.browser.options",
-	schema: t.object({ scrollRestoration: t.enum(["top", "manual"]) }),
-	default: { scrollRestoration: "top" }
-});
-var ReactBrowserProvider = class {
+var ReactServerTemplateProvider = class {
 	log = $logger();
-	client = $inject(LinkProvider);
 	alepha = $inject(Alepha);
-	router = $inject(ReactBrowserRouterProvider);
-	dateTimeProvider = $inject(DateTimeProvider);
-	browserHeadProvider = $inject(BrowserHeadProvider);
-	options = $use(reactBrowserOptions);
+	/**
+	* Shared TextEncoder instance - reused across all requests.
+	*/
+	encoder = new TextEncoder();
+	/**
+	* Pre-encoded common strings for streaming.
+	*/
+	ENCODED = {
+		HYDRATION_PREFIX: this.encoder.encode("<script>window.__ssr="),
+		HYDRATION_SUFFIX: this.encoder.encode("<\/script>"),
+		EMPTY: this.encoder.encode("")
+	};
+	/**
+	* Cached template slots - parsed once, reused for all requests.
+	*/
+	slots = null;
+	/**
+	* Root element ID for React mounting.
+	*/
 	get rootId() {
 		return "root";
 	}
-	getRootElement() {
-		const root = this.document.getElementById(this.rootId);
-		if (root) return root;
-		const div = this.document.createElement("div");
-		div.id = this.rootId;
-		this.document.body.prepend(div);
-		return div;
-	}
-	transitioning;
-	get state() {
-		return this.alepha.store.get("alepha.react.router.state");
-	}
 	/**
-	* Accessor for Document DOM API.
+	* Regex pattern for matching the root div and extracting its content.
 	*/
-	get document() {
-		return window.document;
+	get rootDivRegex() {
+		return new RegExp(`<div([^>]*)\\s+id=["']${this.rootId}["']([^>]*)>([\\s\\S]*?)<\\/div>`, "i");
 	}
 	/**
-	* Accessor for History DOM API.
+	* Extract the content inside the root div from HTML.
+	*
+	* @param html - Full HTML string
+	* @returns The content inside the root div, or undefined if not found
 	*/
-	get history() {
-		return window.history;
+	extractRootContent(html) {
+		return html.match(this.rootDivRegex)?.[3];
 	}
 	/**
-	* Accessor for Location DOM API.
+	* Check if template has been parsed and slots are available.
 	*/
-	get location() {
-		return window.location;
-	}
-	get base() {
-		const base = import.meta.env?.BASE_URL;
-		if (!base || base === "/") return "";
-		return base;
-	}
-	get url() {
-		const url = this.location.pathname + this.location.search;
-		if (this.base) return url.replace(this.base, "");
-		return url;
+	isReady() {
+		return this.slots !== null;
 	}
-	pushState(path, replace) {
-		const url = this.base + path;
-		if (replace) this.history.replaceState({}, "", url);
-		else this.history.pushState({}, "", url);
-	}
-	async invalidate(props) {
-		const previous = [];
-		this.log.trace("Invalidating layers");
-		if (props) {
-			const [key] = Object.keys(props);
-			const value = props[key];
-			for (const layer of this.state.layers) {
-				if (layer.props?.[key]) {
-					previous.push({
-						...layer,
-						props: {
-							...layer.props,
-							[key]: value
-						}
-					});
-					break;
-				}
-				previous.push(layer);
-			}
-		}
-		await this.render({ previous });
-	}
-	async go(url, options = {}) {
-		this.log.trace(`Going to ${url}`, {
-			url,
-			options
-		});
-		await this.render({
-			url,
-			previous: options.force ? [] : this.state.layers,
-			meta: options.meta
-		});
-		if (this.state.url.pathname + this.state.url.search !== url) {
-			this.pushState(this.state.url.pathname + this.state.url.search);
-			return;
-		}
-		this.pushState(url, options.replace);
-	}
-	async render(options = {}) {
-		const previous = options.previous ?? this.state.layers;
-		const url = options.url ?? this.url;
-		const start = this.dateTimeProvider.now();
-		this.transitioning = {
-			to: url,
-			from: this.state?.url.pathname
-		};
-		this.log.debug("Transitioning...", { to: url });
-		const redirect = await this.router.transition(new URL(`http://localhost${url}`), previous, options.meta);
-		if (redirect) {
-			this.log.info("Redirecting to", { redirect });
-			if (redirect.startsWith("http")) window.location.href = redirect;
-			else return await this.render({ url: redirect });
-		}
-		const ms = this.dateTimeProvider.now().diff(start);
-		this.log.info(`Transition OK [${ms}ms]`, this.transitioning);
-		this.transitioning = void 0;
-	}
-	/**
-	* Get embedded layers from the server.
-	*/
-	getHydrationState() {
-		try {
-			if ("__ssr" in window && typeof window.__ssr === "object") return window.__ssr;
-		} catch (error) {
-			console.error(error);
-		}
-	}
-	onTransitionEnd = $hook({
-		on: "react:transition:end",
-		handler: () => {
-			if (this.options.scrollRestoration === "top" && typeof window !== "undefined" && !this.alepha.isTest()) {
-				this.log.trace("Restoring scroll position to top");
-				window.scrollTo(0, 0);
-			}
-		}
-	});
-	ready = $hook({
-		on: "ready",
-		handler: async () => {
-			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);
-			}
-			await this.render({ previous });
-			const element = this.router.root(this.state);
-			await this.alepha.events.emit("react:browser:render", {
-				element,
-				root: this.getRootElement(),
-				hydration,
-				state: this.state
-			});
-			this.browserHeadProvider.fillAndRenderHead(this.state);
-			window.addEventListener("popstate", () => {
-				if (this.base + this.state.url.pathname === this.location.pathname) return;
-				this.log.debug("Popstate event triggered - rendering new state", { url: this.location.pathname + this.location.search });
-				this.render();
-			});
-		}
-	});
-};
-
-//#endregion
-//#region ../../src/router/services/ReactRouter.ts
-/**
-* Friendly browser router API.
-*
-* Can be safely used server-side, but most methods will be no-op.
-*/
-var ReactRouter = class {
-	alepha = $inject(Alepha);
-	pageApi = $inject(ReactPageProvider);
-	get state() {
-		return this.alepha.store.get("alepha.react.router.state");
-	}
-	get pages() {
-		return this.pageApi.getPages();
-	}
-	get concretePages() {
-		return this.pageApi.getConcretePages();
-	}
-	get browser() {
-		if (this.alepha.isBrowser()) return this.alepha.inject(ReactBrowserProvider);
-	}
-	isActive(href, options = {}) {
-		const current = this.state.url.pathname;
-		let isActive = current === href || current === `${href}/` || `${current}/` === href;
-		if (options.startWith && !isActive) isActive = current.startsWith(href);
-		return isActive;
-	}
-	node(name, config = {}) {
-		const page = this.pageApi.page(name);
-		if (!page.lazy && !page.component) return {
-			...page,
-			label: page.label ?? page.name,
-			children: void 0
-		};
-		return {
-			...page,
-			label: page.label ?? page.name,
-			href: this.path(name, config),
-			children: void 0
-		};
-	}
-	path(name, config = {}) {
-		return this.pageApi.pathname(name, {
-			params: {
-				...this.state?.params,
-				...config.params
-			},
-			query: config.query
-		});
-	}
-	/**
-	* Reload the current page.
-	* This is equivalent to calling `go()` with the current pathname and search.
-	*/
-	async reload() {
-		if (!this.browser) return;
-		await this.go(this.location.pathname + this.location.search, {
-			replace: true,
-			force: true
-		});
-	}
-	getURL() {
-		if (!this.browser) return this.state.url;
-		return new URL(this.location.href);
-	}
-	get location() {
-		if (!this.browser) throw new Error("Browser is required");
-		return this.browser.location;
-	}
-	get current() {
-		return this.state;
-	}
-	get pathname() {
-		return this.state.url.pathname;
-	}
-	get query() {
-		const query = {};
-		for (const [key, value] of new URLSearchParams(this.state.url.search).entries()) query[key] = String(value);
-		return query;
-	}
-	async back() {
-		this.browser?.history.back();
-	}
-	async forward() {
-		this.browser?.history.forward();
-	}
-	async invalidate(props) {
-		await this.browser?.invalidate(props);
-	}
-	async go(path, options) {
-		for (const page of this.pages) if (page.name === path) {
-			await this.browser?.go(this.path(path, options), options);
-			return;
-		}
-		await this.browser?.go(path, options);
-	}
-	anchor(path, options = {}) {
-		let href = path;
-		for (const page of this.pages) if (page.name === path) {
-			href = this.path(path, options);
-			break;
-		}
-		return {
-			href: this.base(href),
-			onClick: (ev) => {
-				ev.stopPropagation();
-				ev.preventDefault();
-				this.go(href, options).catch(console.error);
-			}
-		};
-	}
-	base(path) {
-		const base = import.meta.env?.BASE_URL;
-		if (!base || base === "/") return path;
-		return base + path;
-	}
-	/**
-	* Set query params.
-	*
-	* @param record
-	* @param options
-	*/
-	setQueryParams(record, options = {}) {
-		const func = typeof record === "function" ? record : () => record;
-		const search = new URLSearchParams(func(this.query)).toString();
-		const state = search ? `${this.pathname}?${search}` : this.pathname;
-		if (options.push) window.history.pushState({}, "", state);
-		else window.history.replaceState({}, "", state);
-	}
-};
-
-//#endregion
-//#region ../../src/router/providers/ReactServerTemplateProvider.ts
-/**
-* Handles HTML template parsing, preprocessing, and streaming for SSR.
-*
-* Responsibilities:
-* - Parse template once at startup into logical slots
-* - Pre-encode static parts as Uint8Array for zero-copy streaming
-* - Render dynamic parts (attributes, head content) efficiently
-* - Build hydration data for client-side rehydration
-*
-* This provider is injected into ReactServerProvider to handle all
-* template-related operations, keeping ReactServerProvider focused
-* on request handling and React rendering coordination.
-*/
-var ReactServerTemplateProvider = class {
-	log = $logger();
-	alepha = $inject(Alepha);
-	/**
-	* Shared TextEncoder instance - reused across all requests.
-	*/
-	encoder = new TextEncoder();
-	/**
-	* Pre-encoded common strings for streaming.
-	*/
-	ENCODED = {
-		HYDRATION_PREFIX: this.encoder.encode("<script>window.__ssr="),
-		HYDRATION_SUFFIX: this.encoder.encode("<\/script>"),
-		EMPTY: this.encoder.encode("")
-	};
-	/**
-	* Cached template slots - parsed once, reused for all requests.
-	*/
-	slots = null;
-	/**
-	* Root element ID for React mounting.
-	*/
-	get rootId() {
-		return "root";
-	}
-	/**
-	* Regex pattern for matching the root div and extracting its content.
-	*/
-	get rootDivRegex() {
-		return new RegExp(`<div([^>]*)\\s+id=["']${this.rootId}["']([^>]*)>([\\s\\S]*?)<\\/div>`, "i");
-	}
-	/**
-	* Extract the content inside the root div from HTML.
-	*
-	* @param html - Full HTML string
-	* @returns The content inside the root div, or undefined if not found
-	*/
-	extractRootContent(html) {
-		return html.match(this.rootDivRegex)?.[3];
-	}
-	/**
-	* Check if template has been parsed and slots are available.
-	*/
-	isReady() {
-		return this.slots !== null;
-	}
-	/**
-	* Get the parsed template slots.
-	* Throws if template hasn't been parsed yet.
-	*/
-	getSlots() {
-		if (!this.slots) throw new AlephaError("Template not parsed. Call parseTemplate() during configuration.");
-		return this.slots;
+	/**
+	* Get the parsed template slots.
+	* Throws if template hasn't been parsed yet.
+	*/
+	getSlots() {
+		if (!this.slots) throw new AlephaError("Template not parsed. Call parseTemplate() during configuration.");
+		return this.slots;
 	}
 	/**
 	* Parse an HTML template into logical slots for efficient streaming.
 	*
 	* This should be called once during server startup/configuration.
 	* The parsed slots are cached and reused for all requests.
-	*
-	* @param template - The HTML template string (typically index.html)
 	*/
 	parseTemplate(template) {
 		this.log.debug("Parsing template into slots");
@@ -1579,7 +1551,7 @@ var ReactServerTemplateProvider = class {
 		}
 		const rootOpenTag = rootAttrs ? `<div ${rootAttrs} id="${rootId}">` : `<div id="${rootId}">`;
 		this.slots = {
-			doctype: this.encoder.encode(doctype + "\n"),
+			doctype: this.encoder.encode(`${doctype}\n`),
 			htmlOpen: this.encoder.encode("<html"),
 			htmlClose: this.encoder.encode(">\n"),
 			headOpen: this.encoder.encode("<head>"),
@@ -1612,9 +1584,7 @@ var ReactServerTemplateProvider = class {
 	parseAttributes(attrStr) {
 		const attrs = {};
 		if (!attrStr) return attrs;
-		const attrRegex = /([^\s=]+)(?:=(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g;
-		let match;
-		while (match = attrRegex.exec(attrStr)) {
+		for (const match of attrStr.matchAll(/([^\s=]+)(?:=(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g)) {
 			const key = match[1];
 			attrs[key] = match[2] ?? match[3] ?? match[4] ?? "";
 		}
@@ -1683,6 +1653,7 @@ var ReactServerTemplateProvider = class {
 	*/
 	renderLinkTag(link) {
 		let tag = `<link rel="${this.escapeHtml(link.rel)}" href="${this.escapeHtml(link.href)}"`;
+		if (link.type) tag += ` type="${this.escapeHtml(link.type)}"`;
 		if (link.as) tag += ` as="${this.escapeHtml(link.as)}"`;
 		if (link.crossorigin != null) tag += " crossorigin=\"\"";
 		tag += ">\n";
@@ -1692,10 +1663,14 @@ var ReactServerTemplateProvider = class {
 	* Render a script tag.
 	*/
 	renderScriptTag(script) {
-		return `<script ${Object.entries(script).filter(([, value]) => value !== false).map(([key, value]) => {
+		if (typeof script === "string") return `<script>${script}<\/script>\n`;
+		const { content, ...rest } = script;
+		const attrs = Object.entries(rest).filter(([, value]) => value !== false && value !== void 0).map(([key, value]) => {
 			if (value === true) return key;
 			return `${key}="${this.escapeHtml(String(value))}"`;
-		}).join(" ")}><\/script>\n`;
+		}).join(" ");
+		if (content) return attrs ? `<script ${attrs}>${content}<\/script>\n` : `<script>${content}<\/script>\n`;
+		return `<script ${attrs}><\/script>\n`;
 	}
 	/**
 	* Escape HTML special characters.
@@ -1718,41 +1693,66 @@ var ReactServerTemplateProvider = class {
 	*/
 	buildHydrationData(state) {
 		const { request, context, ...store } = this.alepha.context.als?.getStore() ?? {};
-		return {
-			...store,
-			"alepha.react.router.state": void 0,
-			layers: state.layers.map((layer) => ({
-				...layer,
-				error: layer.error ? {
-					...layer.error,
-					name: layer.error.name,
-					message: layer.error.message,
-					stack: !this.alepha.isProduction() ? layer.error.stack : void 0
-				} : void 0,
-				index: void 0,
-				path: void 0,
-				element: void 0,
-				route: void 0
-			}))
-		};
-	}
-	/**
-	* Encode a string to Uint8Array using the shared encoder.
-	*/
-	encode(str) {
-		return this.encoder.encode(str);
-	}
-	/**
-	* Get the pre-encoded hydration script prefix.
-	*/
-	get hydrationPrefix() {
-		return this.ENCODED.HYDRATION_PREFIX;
-	}
-	/**
-	* Get the pre-encoded hydration script suffix.
+		const hydrationData = { layers: state.layers.map((layer) => ({
+			part: layer.part,
+			name: layer.name,
+			config: layer.config,
+			props: layer.props,
+			error: layer.error ? {
+				...layer.error,
+				name: layer.error.name,
+				message: layer.error.message,
+				stack: !this.alepha.isProduction() ? layer.error.stack : void 0
+			} : void 0
+		})) };
+		for (const [key, value] of Object.entries(store)) if (key.charAt(0) !== "_" && key !== "alepha.react.router.state" && key !== "registry") hydrationData[key] = value;
+		return hydrationData;
+	}
+	/**
+	* Stream the body content: body tag, root div, React content, hydration, and closing tags.
+	*
+	* If an error occurs during React streaming, it injects error HTML instead of aborting,
+	* ensuring users see an error message rather than a white screen.
 	*/
-	get hydrationSuffix() {
-		return this.ENCODED.HYDRATION_SUFFIX;
+	async streamBodyContent(controller, reactStream, state, hydration) {
+		const slots = this.getSlots();
+		const encoder = this.encoder;
+		const head = state.head;
+		controller.enqueue(slots.bodyOpen);
+		controller.enqueue(encoder.encode(this.renderMergedBodyAttrs(head?.bodyAttributes)));
+		controller.enqueue(slots.bodyClose);
+		if (slots.beforeRoot) controller.enqueue(encoder.encode(slots.beforeRoot));
+		controller.enqueue(slots.rootOpen);
+		const reader = reactStream.getReader();
+		let streamError = null;
+		try {
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) break;
+				controller.enqueue(value);
+			}
+		} catch (error) {
+			streamError = error;
+			this.log.error("Error during React stream reading", error);
+		} finally {
+			reader.releaseLock();
+		}
+		if (streamError) {
+			this.injectErrorHtml(controller, encoder, slots, streamError, state, {
+				headClosed: true,
+				bodyStarted: true
+			});
+			return;
+		}
+		controller.enqueue(slots.rootClose);
+		if (slots.afterRoot) controller.enqueue(encoder.encode(slots.afterRoot));
+		if (hydration) {
+			const hydrationData = this.buildHydrationData(state);
+			controller.enqueue(this.ENCODED.HYDRATION_PREFIX);
+			controller.enqueue(encoder.encode(this.safeJsonSerialize(hydrationData)));
+			controller.enqueue(this.ENCODED.HYDRATION_SUFFIX);
+		}
+		controller.enqueue(slots.scriptClose);
 	}
 	/**
 	* Create a ReadableStream that streams the HTML template with React content.
@@ -1781,30 +1781,7 @@ var ReactServerTemplateProvider = class {
 				if (this.earlyHeadContent) controller.enqueue(encoder.encode(this.earlyHeadContent));
 				controller.enqueue(encoder.encode(this.renderHeadContent(head)));
 				controller.enqueue(slots.headClose);
-				controller.enqueue(slots.bodyOpen);
-				controller.enqueue(encoder.encode(this.renderMergedBodyAttrs(head?.bodyAttributes)));
-				controller.enqueue(slots.bodyClose);
-				if (slots.beforeRoot) controller.enqueue(encoder.encode(slots.beforeRoot));
-				controller.enqueue(slots.rootOpen);
-				const reader = reactStream.getReader();
-				try {
-					while (true) {
-						const { done, value } = await reader.read();
-						if (done) break;
-						controller.enqueue(value);
-					}
-				} finally {
-					reader.releaseLock();
-				}
-				controller.enqueue(slots.rootClose);
-				if (slots.afterRoot) controller.enqueue(encoder.encode(slots.afterRoot));
-				if (hydration) {
-					const hydrationData = this.buildHydrationData(state);
-					controller.enqueue(this.ENCODED.HYDRATION_PREFIX);
-					controller.enqueue(encoder.encode(this.safeJsonSerialize(hydrationData)));
-					controller.enqueue(this.ENCODED.HYDRATION_SUFFIX);
-				}
-				controller.enqueue(slots.scriptClose);
+				await this.streamBodyContent(controller, reactStream, state, hydration);
 				controller.close();
 			} catch (error) {
 				onError?.(error);
@@ -1865,9 +1842,12 @@ var ReactServerTemplateProvider = class {
 	* @param options - Streaming options
 	*/
 	createEarlyHtmlStream(globalHead, asyncWork, options = {}) {
-		const { hydration = true, onError, onRedirect } = options;
+		const { hydration = true, onError } = options;
 		const slots = this.getSlots();
 		const encoder = this.encoder;
+		let headClosed = false;
+		let bodyStarted = false;
+		let routerState;
 		return new ReadableStream({ start: async (controller) => {
 			try {
 				controller.enqueue(slots.doctype);
@@ -1877,47 +1857,102 @@ var ReactServerTemplateProvider = class {
 				controller.enqueue(slots.headOpen);
 				if (this.earlyHeadContent) controller.enqueue(encoder.encode(this.earlyHeadContent));
 				const result = await asyncWork();
-				if (!result) {
+				if (!result || "redirect" in result) {
+					if (result && "redirect" in result) {
+						this.log.debug("Loader redirect detected after streaming started, using meta refresh", { redirect: result.redirect });
+						controller.enqueue(encoder.encode(`<meta http-equiv="refresh" content="0; url=${this.escapeHtml(result.redirect)}">\n`));
+					}
 					controller.enqueue(slots.headClose);
 					controller.enqueue(encoder.encode("<body></body></html>"));
 					controller.close();
 					return;
 				}
 				const { state, reactStream } = result;
-				const head = state.head;
-				controller.enqueue(encoder.encode(this.renderHeadContent(head)));
+				routerState = state;
+				controller.enqueue(encoder.encode(this.renderHeadContent(state.head)));
 				controller.enqueue(slots.headClose);
-				controller.enqueue(slots.bodyOpen);
-				controller.enqueue(encoder.encode(this.renderMergedBodyAttrs(head?.bodyAttributes)));
-				controller.enqueue(slots.bodyClose);
-				if (slots.beforeRoot) controller.enqueue(encoder.encode(slots.beforeRoot));
-				controller.enqueue(slots.rootOpen);
-				const reader = reactStream.getReader();
-				try {
-					while (true) {
-						const { done, value } = await reader.read();
-						if (done) break;
-						controller.enqueue(value);
-					}
-				} finally {
-					reader.releaseLock();
-				}
-				controller.enqueue(slots.rootClose);
-				if (slots.afterRoot) controller.enqueue(encoder.encode(slots.afterRoot));
-				if (hydration) {
-					const hydrationData = this.buildHydrationData(state);
-					controller.enqueue(this.ENCODED.HYDRATION_PREFIX);
-					controller.enqueue(encoder.encode(this.safeJsonSerialize(hydrationData)));
-					controller.enqueue(this.ENCODED.HYDRATION_SUFFIX);
-				}
-				controller.enqueue(slots.scriptClose);
+				headClosed = true;
+				bodyStarted = true;
+				await this.streamBodyContent(controller, reactStream, state, hydration);
 				controller.close();
 			} catch (error) {
 				onError?.(error);
-				controller.error(error);
+				try {
+					this.injectErrorHtml(controller, encoder, slots, error, routerState, {
+						headClosed,
+						bodyStarted
+					});
+					controller.close();
+				} catch {
+					controller.error(error);
+				}
 			}
 		} });
 	}
+	/**
+	* Inject error HTML into the stream when an error occurs during streaming.
+	*
+	* Uses the router state's onError handler to render the error component,
+	* falling back to ErrorViewer if no custom handler is defined.
+	* Renders using renderToString to produce static HTML.
+	*
+	* Since we may have already sent partial HTML (DOCTYPE, <html>, <head>),
+	* we need to complete the document with an error message instead of aborting.
+	*
+	* Handles different states:
+	* - headClosed=false, bodyStarted=false: Need to add head content, close head, open body, add error, close all
+	* - headClosed=true, bodyStarted=false: Need to open body, add error, close all
+	* - headClosed=true, bodyStarted=true: Already inside root div, add error, close all
+	*/
+	injectErrorHtml(controller, encoder, slots, error, routerState, streamState) {
+		if (!streamState.headClosed) {
+			const headContent = this.renderHeadContent(routerState?.head);
+			if (headContent) controller.enqueue(encoder.encode(headContent));
+			controller.enqueue(slots.headClose);
+		}
+		if (!streamState.bodyStarted) {
+			controller.enqueue(slots.bodyOpen);
+			controller.enqueue(encoder.encode(this.renderMergedBodyAttrs(routerState?.head?.bodyAttributes)));
+			controller.enqueue(slots.bodyClose);
+			if (slots.beforeRoot) controller.enqueue(encoder.encode(slots.beforeRoot));
+			controller.enqueue(slots.rootOpen);
+		}
+		const errorHtml = this.renderErrorToString(error instanceof Error ? error : new Error(String(error)), routerState);
+		controller.enqueue(encoder.encode(errorHtml));
+		controller.enqueue(slots.rootClose);
+		if (!streamState.bodyStarted && slots.afterRoot) controller.enqueue(encoder.encode(slots.afterRoot));
+		controller.enqueue(slots.scriptClose);
+	}
+	/**
+	* Render an error to HTML string using the router's error handler.
+	*
+	* Falls back to ErrorViewer if:
+	* - No router state is available
+	* - The error handler returns null/undefined
+	* - The error handler itself throws
+	*/
+	renderErrorToString(error, routerState) {
+		this.log.error("SSR rendering error", error);
+		let errorElement;
+		if (routerState?.onError) try {
+			const result = routerState.onError(error, routerState);
+			if (result instanceof Redirection) this.log.warn("Error handler returned Redirection but headers already sent", { redirect: result.redirect });
+			else if (result !== null && result !== void 0) errorElement = result;
+		} catch (handlerError) {
+			this.log.error("Error handler threw an exception", handlerError);
+		}
+		if (!errorElement) errorElement = createElement(ErrorViewer_default, {
+			error,
+			alepha: this.alepha
+		});
+		const wrappedElement = createElement(AlephaContext.Provider, { value: this.alepha }, errorElement);
+		try {
+			return renderToString(wrappedElement);
+		} catch (renderError) {
+			this.log.error("Failed to render error component", renderError);
+			return error.message;
+		}
+	}
 };
 
 //#endregion
@@ -1927,16 +1962,11 @@ var ReactServerTemplateProvider = class {
 */
 const ssrManifestAtomSchema = t.object({
 	preload: t.optional(t.record(t.string(), t.string())),
-	ssr: t.optional(t.record(t.string(), t.array(t.string()))),
 	client: t.optional(t.record(t.string(), t.object({
 		file: t.string(),
-		src: t.optional(t.string()),
 		isEntry: t.optional(t.boolean()),
-		isDynamicEntry: t.optional(t.boolean()),
 		imports: t.optional(t.array(t.string())),
-		dynamicImports: t.optional(t.array(t.string())),
-		css: t.optional(t.array(t.string())),
-		assets: t.optional(t.array(t.string()))
+		css: t.optional(t.array(t.string()))
 	})))
 });
 /**
@@ -1948,8 +1978,7 @@ const ssrManifestAtomSchema = t.object({
 *
 * The manifest includes:
 * - preload: Maps short hash keys to source paths (from viteAlephaSsrPreload)
-* - ssr: Maps source files to their required chunks
-* - client: Maps source files to their output info including imports/css
+* - client: Maps source files to their output info (file, imports, css)
 */
 const ssrManifestAtom = $atom({
 	name: "alepha.react.ssr.manifest",
@@ -1969,7 +1998,6 @@ const ssrManifestAtom = $atom({
 *
 * Manifest files are generated during `vite build`:
 * - manifest.json (client manifest)
-* - ssr-manifest.json (SSR manifest)
 * - preload-manifest.json (from viteAlephaSsrPreload plugin)
 */
 var SSRManifestProvider = class {
@@ -1988,12 +2016,6 @@ var SSRManifestProvider = class {
 		return this.manifest.preload;
 	}
 	/**
-	* Get the SSR manifest.
-	*/
-	get ssrManifest() {
-		return this.manifest.ssr;
-	}
-	/**
 	* Get the client manifest.
 	*/
 	get clientManifest() {
@@ -2014,14 +2036,13 @@ var SSRManifestProvider = class {
 	/**
 	* Get all chunks required for a source file, including transitive dependencies.
 	*
-	* Uses the client manifest to recursively resolve all imported chunks,
-	* not just the direct chunks from the SSR manifest.
+	* Uses the client manifest to recursively resolve all imported chunks.
 	*
 	* @param sourcePath - Source file path (e.g., "src/pages/Home.tsx")
 	* @returns Array of chunk URLs to preload, or empty array if not found
 	*/
 	getChunks(sourcePath) {
-		if (!this.clientManifest) return this.getChunksFromSSRManifest(sourcePath);
+		if (!this.clientManifest) return [];
 		if (!this.findManifestEntry(sourcePath)) return [];
 		const chunks = /* @__PURE__ */ new Set();
 		const visited = /* @__PURE__ */ new Set();
@@ -2052,32 +2073,14 @@ var SSRManifestProvider = class {
 		if (visited.has(key)) return;
 		visited.add(key);
 		if (!this.clientManifest) return;
-		const entry = this.clientManifest[key];
-		if (!entry) return;
-		if (entry.file) chunks.add("/" + entry.file);
-		if (entry.css) for (const css of entry.css) chunks.add("/" + css);
-		if (entry.imports) for (const imp of entry.imports) {
-			if (imp === "index.html" || imp.endsWith(".html")) continue;
-			this.collectChunksRecursive(imp, chunks, visited);
-		}
-	}
-	/**
-	* Fallback to SSR manifest for chunk lookup.
-	*/
-	getChunksFromSSRManifest(sourcePath) {
-		if (!this.ssrManifest) return [];
-		if (this.ssrManifest[sourcePath]) return this.ssrManifest[sourcePath];
-		const basePath = sourcePath.replace(/\.[^.]+$/, "");
-		for (const ext of [
-			".tsx",
-			".ts",
-			".jsx",
-			".js"
-		]) {
-			const pathWithExt = basePath + ext;
-			if (this.ssrManifest[pathWithExt]) return this.ssrManifest[pathWithExt];
+		const entry = this.clientManifest[key];
+		if (!entry) return;
+		if (entry.file) chunks.add(`/${entry.file}`);
+		if (entry.css) for (const css of entry.css) chunks.add(`/${css}`);
+		if (entry.imports) for (const imp of entry.imports) {
+			if (imp === "index.html" || imp.endsWith(".html")) continue;
+			this.collectChunksRecursive(imp, chunks, visited);
 		}
-		return [];
 	}
 	/**
 	* Collect modulepreload links for a route and its parent chain.
@@ -2123,10 +2126,10 @@ var SSRManifestProvider = class {
 		return Array.from(allChunks);
 	}
 	/**
-	* Check if manifests are loaded and available.
+	* Check if manifest is loaded and available.
 	*/
 	isAvailable() {
-		return this.clientManifest !== void 0 || this.ssrManifest !== void 0;
+		return this.clientManifest !== void 0;
 	}
 	/**
 	* Cached entry assets - computed once at first access.
@@ -2145,8 +2148,8 @@ var SSRManifestProvider = class {
 		if (!this.clientManifest) return null;
 		for (const [key, entry] of Object.entries(this.clientManifest)) if (entry.isEntry) {
 			this.cachedEntryAssets = {
-				js: "/" + entry.file,
-				css: entry.css?.map((css) => "/" + css) ?? []
+				js: `/${entry.file}`,
+				css: entry.css?.map((css) => `/${css}`) ?? []
 			};
 			return this.cachedEntryAssets;
 		}
@@ -2206,7 +2209,6 @@ var ReactServerProvider = class {
 	serverHeadProvider = $inject(ServerHeadProvider);
 	serverStaticProvider = $inject(ServerStaticProvider);
 	serverRouterProvider = $inject(ServerRouterProvider);
-	serverTimingProvider = $inject(ServerTimingProvider);
 	ssrManifestProvider = $inject(SSRManifestProvider);
 	/**
 	* Cached check for ServerLinksProvider - avoids has() lookup per request.
@@ -2221,13 +2223,8 @@ var ReactServerProvider = class {
 		handler: async () => {
 			const ssrEnabled = this.alepha.primitives($page).length > 0 && this.env.REACT_SSR_ENABLED !== false;
 			this.alepha.store.set("alepha.react.server.ssr", ssrEnabled);
-			if (ssrEnabled) this.log.info("SSR streaming enabled");
-			if (this.alepha.isViteDev()) {
-				await this.configureVite(ssrEnabled);
-				return;
-			}
 			let root = "";
-			if (!this.alepha.isServerless()) {
+			if (!this.alepha.isServerless() && !this.alepha.isViteDev()) {
 				root = await this.getPublicDirectory();
 				if (!root) this.log.warn("Missing static files, static file server will be disabled");
 				else {
@@ -2300,7 +2297,7 @@ var ReactServerProvider = class {
 		for (const css of assets.css) parts.push(`<link rel="stylesheet" href="${css}" crossorigin="">`);
 		if (assets.js) parts.push(`<script type="module" crossorigin="" src="${assets.js}"><\/script>`);
 		if (parts.length > 0) {
-			this.templateProvider.setEarlyHeadContent(parts.join("\n") + "\n", assets);
+			this.templateProvider.setEarlyHeadContent(`${parts.join("\n")}\n`, assets);
 			this.log.debug("Early head content set", {
 				css: assets.css.length,
 				js: assets.js ? 1 : 0
@@ -2329,15 +2326,6 @@ var ReactServerProvider = class {
 		});
 	}
 	/**
-	* Configure Vite for SSR in development mode.
-	*/
-	async configureVite(ssrEnabled) {
-		if (!ssrEnabled) return;
-		const url = `http://localhost:${this.alepha.env.SERVER_PORT ?? "5173"}`;
-		this.log.info("SSR (dev) OK", { url });
-		await this.registerPages(() => fetch(`${url}/index.html`).then((it) => it.text()).catch(() => void 0));
-	}
-	/**
 	* Create the request handler for a page route.
 	*/
 	createHandler(route, templateLoader) {
@@ -2382,10 +2370,7 @@ var ReactServerProvider = class {
 			const globalHead = this.serverHeadProvider.resolveGlobalHead();
 			const htmlStream = this.templateProvider.createEarlyHtmlStream(globalHead, async () => {
 				const result = await this.renderPage(route, state);
-				if (result.redirect) {
-					reply.redirect(result.redirect);
-					return null;
-				}
+				if (result.redirect) return { redirect: result.redirect };
 				return {
 					state,
 					reactStream: result.reactStream
@@ -2394,7 +2379,6 @@ var ReactServerProvider = class {
 				hydration: true,
 				onError: (error) => {
 					if (error instanceof Redirection) this.log.debug("Streaming resulted in redirection", { redirect: error.redirect });
-					else this.log.error("HTML stream error", error);
 				}
 			});
 			this.log.trace("Page streaming started (early head optimization)");
@@ -2417,9 +2401,7 @@ var ReactServerProvider = class {
 	* @returns Render result with redirect or React stream
 	*/
 	async renderPage(route, state) {
-		this.serverTimingProvider.beginTiming("createLayers");
 		const { redirect } = await this.pageApi.createLayers(route, state);
-		this.serverTimingProvider.endTiming("createLayers");
 		if (redirect) {
 			this.log.debug("Resolver resulted in redirection", { redirect });
 			return { redirect };
@@ -2430,15 +2412,11 @@ var ReactServerProvider = class {
 			state.head ??= {};
 			state.head.link = [...state.head.link ?? [], ...preloadLinks];
 		}
-		this.serverTimingProvider.beginTiming("renderToStream");
 		const element = this.pageApi.root(state);
 		this.alepha.store.set("alepha.react.router.state", state);
-		const reactStream = await renderToReadableStream(element, { onError: (error) => {
+		return { reactStream: await renderToReadableStream(element, { onError: (error) => {
 			if (error instanceof Redirection) this.log.warn("Redirect during streaming ignored", { redirect: error.redirect });
-			else this.log.error("Streaming render error", error);
-		} });
-		this.serverTimingProvider.endTiming("renderToStream");
-		return { reactStream };
+		} }) };
 	}
 	/**
 	* For testing purposes, renders a page to HTML string.
@@ -2482,78 +2460,465 @@ var ReactServerProvider = class {
 			state,
 			html
 		});
-		return {
-			state,
-			html
+		return {
+			state,
+			html
+		};
+	}
+	/**
+	* Collect a ReadableStream into a string.
+	*/
+	async streamToString(stream) {
+		const reader = stream.getReader();
+		const decoder = new TextDecoder();
+		const chunks = [];
+		try {
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) break;
+				chunks.push(decoder.decode(value, { stream: true }));
+			}
+			chunks.push(decoder.decode());
+		} finally {
+			reader.releaseLock();
+		}
+		return chunks.join("");
+	}
+};
+const envSchema = t.object({ REACT_SSR_ENABLED: t.optional(t.boolean()) });
+/**
+* React server provider configuration atom
+*/
+const reactServerOptions = $atom({
+	name: "alepha.react.server.options",
+	schema: t.object({
+		publicDir: t.string(),
+		staticServer: t.object({
+			disabled: t.boolean(),
+			path: t.string({ description: "URL path where static files will be served." })
+		})
+	}),
+	default: {
+		publicDir: "public",
+		staticServer: {
+			disabled: false,
+			path: "/"
+		}
+	}
+});
+
+//#endregion
+//#region ../../src/router/services/ReactPageServerService.ts
+/**
+* $page methods for server-side.
+*/
+var ReactPageServerService = class extends ReactPageService {
+	reactServerProvider = $inject(ReactServerProvider);
+	templateProvider = $inject(ReactServerTemplateProvider);
+	serverProvider = $inject(ServerProvider);
+	async render(name, options = {}) {
+		return this.reactServerProvider.render(name, options);
+	}
+	async fetch(pathname, options = {}) {
+		const response = await fetch(`${this.serverProvider.hostname}/${pathname}`);
+		const html = await response.text();
+		if (options?.html) return {
+			html,
+			response
+		};
+		const rootContent = this.templateProvider.extractRootContent(html);
+		if (rootContent !== void 0) return {
+			html: rootContent,
+			response
+		};
+		throw new AlephaError("Invalid HTML response");
+	}
+};
+
+//#endregion
+//#region ../../src/router/providers/ReactBrowserRouterProvider.ts
+/**
+* Implementation of AlephaRouter for React in browser environment.
+*/
+var ReactBrowserRouterProvider = class extends RouterProvider {
+	log = $logger();
+	alepha = $inject(Alepha);
+	pageApi = $inject(ReactPageProvider);
+	browserHeadProvider = $inject(BrowserHeadProvider);
+	add(entry) {
+		this.pageApi.add(entry);
+	}
+	configure = $hook({
+		on: "configure",
+		handler: async () => {
+			for (const page of this.pageApi.getPages()) if (page.component || page.lazy) this.push({
+				path: page.match,
+				page
+			});
+		}
+	});
+	async transition(url, previous = [], meta = {}) {
+		const { pathname, search } = url;
+		const state = {
+			url,
+			query: {},
+			params: {},
+			layers: [],
+			onError: () => null,
+			meta
+		};
+		await this.alepha.events.emit("react:action:begin", { type: "transition" });
+		await this.alepha.events.emit("react:transition:begin", {
+			previous: this.alepha.store.get("alepha.react.router.state"),
+			state
+		});
+		try {
+			const { route, params } = this.match(pathname);
+			const query = {};
+			if (search) for (const [key, value] of new URLSearchParams(search).entries()) query[key] = String(value);
+			state.name = route?.page.name;
+			state.query = query;
+			state.params = params ?? {};
+			if (isPageRoute(route)) {
+				const { redirect } = await this.pageApi.createLayers(route.page, state, previous);
+				if (redirect) return redirect;
+			}
+			if (state.layers.length === 0) state.layers.push({
+				name: "not-found",
+				element: createElement(NotFound_default),
+				index: 0,
+				path: "/"
+			});
+			await this.alepha.events.emit("react:action:success", { type: "transition" });
+			await this.alepha.events.emit("react:transition:success", { state });
+		} catch (e) {
+			this.log.error("Transition has failed", e);
+			state.layers = [{
+				name: "error",
+				element: this.pageApi.renderError(e),
+				index: 0,
+				path: "/"
+			}];
+			await this.alepha.events.emit("react:action:error", {
+				type: "transition",
+				error: e
+			});
+			await this.alepha.events.emit("react:transition:error", {
+				error: e,
+				state
+			});
+		}
+		if (previous) for (let i = 0; i < previous.length; i++) {
+			const layer = previous[i];
+			if (state.layers[i]?.name !== layer.name) this.pageApi.page(layer.name)?.onLeave?.();
+		}
+		this.alepha.store.set("alepha.react.router.state", state);
+		await this.alepha.events.emit("react:action:end", { type: "transition" });
+		await this.alepha.events.emit("react:transition:end", { state });
+		this.browserHeadProvider.fillAndRenderHead(state);
+	}
+	root(state) {
+		return this.pageApi.root(state);
+	}
+};
+
+//#endregion
+//#region ../../src/router/providers/ReactBrowserProvider.ts
+/**
+* React browser renderer configuration atom
+*/
+const reactBrowserOptions = $atom({
+	name: "alepha.react.browser.options",
+	schema: t.object({ scrollRestoration: t.enum(["top", "manual"]) }),
+	default: { scrollRestoration: "top" }
+});
+var ReactBrowserProvider = class {
+	log = $logger();
+	client = $inject(LinkProvider);
+	alepha = $inject(Alepha);
+	router = $inject(ReactBrowserRouterProvider);
+	dateTimeProvider = $inject(DateTimeProvider);
+	browserHeadProvider = $inject(BrowserHeadProvider);
+	options = $use(reactBrowserOptions);
+	get rootId() {
+		return "root";
+	}
+	getRootElement() {
+		const root = this.document.getElementById(this.rootId);
+		if (root) return root;
+		const div = this.document.createElement("div");
+		div.id = this.rootId;
+		this.document.body.prepend(div);
+		return div;
+	}
+	transitioning;
+	get state() {
+		return this.alepha.store.get("alepha.react.router.state");
+	}
+	/**
+	* Accessor for Document DOM API.
+	*/
+	get document() {
+		return window.document;
+	}
+	/**
+	* Accessor for History DOM API.
+	*/
+	get history() {
+		return window.history;
+	}
+	/**
+	* Accessor for Location DOM API.
+	*/
+	get location() {
+		return window.location;
+	}
+	get base() {
+		const base = import.meta.env?.BASE_URL;
+		if (!base || base === "/") return "";
+		return base;
+	}
+	get url() {
+		const url = this.location.pathname + this.location.search;
+		if (this.base) return url.replace(this.base, "");
+		return url;
+	}
+	pushState(path, replace) {
+		const url = this.base + path;
+		if (replace) this.history.replaceState({}, "", url);
+		else this.history.pushState({}, "", url);
+	}
+	async invalidate(props) {
+		const previous = [];
+		this.log.trace("Invalidating layers");
+		if (props) {
+			const [key] = Object.keys(props);
+			const value = props[key];
+			for (const layer of this.state.layers) {
+				if (layer.props?.[key]) {
+					previous.push({
+						...layer,
+						props: {
+							...layer.props,
+							[key]: value
+						}
+					});
+					break;
+				}
+				previous.push(layer);
+			}
+		}
+		await this.render({ previous });
+	}
+	async go(url, options = {}) {
+		this.log.trace(`Going to ${url}`, {
+			url,
+			options
+		});
+		await this.render({
+			url,
+			previous: options.force ? [] : this.state.layers,
+			meta: options.meta
+		});
+		if (this.state.url.pathname + this.state.url.search !== url) {
+			this.pushState(this.state.url.pathname + this.state.url.search);
+			return;
+		}
+		this.pushState(url, options.replace);
+	}
+	async render(options = {}) {
+		const previous = options.previous ?? this.state.layers;
+		const url = options.url ?? this.url;
+		const start = this.dateTimeProvider.now();
+		this.transitioning = {
+			to: url,
+			from: this.state?.url.pathname
 		};
+		this.log.debug("Transitioning...", { to: url });
+		const redirect = await this.router.transition(new URL(`http://localhost${url}`), previous, options.meta);
+		if (redirect) {
+			this.log.info("Redirecting to", { redirect });
+			if (redirect.startsWith("http")) window.location.href = redirect;
+			else return await this.render({ url: redirect });
+		}
+		const ms = this.dateTimeProvider.now().diff(start);
+		this.log.info(`Transition OK [${ms}ms]`, this.transitioning);
+		this.transitioning = void 0;
 	}
 	/**
-	* Collect a ReadableStream into a string.
+	* Get embedded layers from the server.
 	*/
-	async streamToString(stream) {
-		const reader = stream.getReader();
-		const decoder = new TextDecoder();
-		const chunks = [];
+	getHydrationState() {
 		try {
-			while (true) {
-				const { done, value } = await reader.read();
-				if (done) break;
-				chunks.push(decoder.decode(value, { stream: true }));
-			}
-			chunks.push(decoder.decode());
-		} finally {
-			reader.releaseLock();
+			if ("__ssr" in window && typeof window.__ssr === "object") return window.__ssr;
+		} catch (error) {
+			console.error(error);
 		}
-		return chunks.join("");
 	}
-};
-const envSchema = t.object({ REACT_SSR_ENABLED: t.optional(t.boolean()) });
-/**
-* React server provider configuration atom
-*/
-const reactServerOptions = $atom({
-	name: "alepha.react.server.options",
-	schema: t.object({
-		publicDir: t.string(),
-		staticServer: t.object({
-			disabled: t.boolean(),
-			path: t.string({ description: "URL path where static files will be served." })
-		})
-	}),
-	default: {
-		publicDir: "public",
-		staticServer: {
-			disabled: false,
-			path: "/"
+	onTransitionEnd = $hook({
+		on: "react:transition:end",
+		handler: () => {
+			if (this.options.scrollRestoration === "top" && typeof window !== "undefined" && !this.alepha.isTest()) {
+				this.log.trace("Restoring scroll position to top");
+				window.scrollTo(0, 0);
+			}
 		}
-	}
-});
+	});
+	ready = $hook({
+		on: "ready",
+		handler: async () => {
+			const hydration = this.getHydrationState();
+			const previous = hydration?.layers ?? [];
+			if (hydration) {
+				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);
+			await this.alepha.events.emit("react:browser:render", {
+				element,
+				root: this.getRootElement(),
+				hydration,
+				state: this.state
+			});
+			this.browserHeadProvider.fillAndRenderHead(this.state);
+			window.addEventListener("popstate", () => {
+				if (this.base + this.state.url.pathname === this.location.pathname) return;
+				this.log.debug("Popstate event triggered - rendering new state", { url: this.location.pathname + this.location.search });
+				this.render();
+			});
+		}
+	});
+};
 
 //#endregion
-//#region ../../src/router/services/ReactPageServerService.ts
+//#region ../../src/router/services/ReactRouter.ts
 /**
-* $page methods for server-side.
+* Friendly browser router API.
+*
+* Can be safely used server-side, but most methods will be no-op.
 */
-var ReactPageServerService = class extends ReactPageService {
-	reactServerProvider = $inject(ReactServerProvider);
-	templateProvider = $inject(ReactServerTemplateProvider);
-	serverProvider = $inject(ServerProvider);
-	async render(name, options = {}) {
-		return this.reactServerProvider.render(name, options);
+var ReactRouter = class {
+	alepha = $inject(Alepha);
+	pageApi = $inject(ReactPageProvider);
+	get state() {
+		return this.alepha.store.get("alepha.react.router.state");
 	}
-	async fetch(pathname, options = {}) {
-		const response = await fetch(`${this.serverProvider.hostname}/${pathname}`);
-		const html = await response.text();
-		if (options?.html) return {
-			html,
-			response
+	get pages() {
+		return this.pageApi.getPages();
+	}
+	get concretePages() {
+		return this.pageApi.getConcretePages();
+	}
+	get browser() {
+		if (this.alepha.isBrowser()) return this.alepha.inject(ReactBrowserProvider);
+	}
+	isActive(href, options = {}) {
+		const current = this.state.url.pathname;
+		let isActive = current === href || current === `${href}/` || `${current}/` === href;
+		if (options.startWith && !isActive) isActive = current.startsWith(href);
+		return isActive;
+	}
+	node(name, config = {}) {
+		const page = this.pageApi.page(name);
+		if (!page.lazy && !page.component) return {
+			...page,
+			label: page.label ?? page.name,
+			children: void 0
 		};
-		const rootContent = this.templateProvider.extractRootContent(html);
-		if (rootContent !== void 0) return {
-			html: rootContent,
-			response
+		return {
+			...page,
+			label: page.label ?? page.name,
+			href: this.path(name, config),
+			children: void 0
 		};
-		throw new AlephaError("Invalid HTML response");
+	}
+	path(name, config = {}) {
+		return this.pageApi.pathname(name, {
+			params: {
+				...this.state?.params,
+				...config.params
+			},
+			query: config.query
+		});
+	}
+	/**
+	* Reload the current page.
+	* This is equivalent to calling `go()` with the current pathname and search.
+	*/
+	async reload() {
+		if (!this.browser) return;
+		await this.go(this.location.pathname + this.location.search, {
+			replace: true,
+			force: true
+		});
+	}
+	getURL() {
+		if (!this.browser) return this.state.url;
+		return new URL(this.location.href);
+	}
+	get location() {
+		if (!this.browser) throw new Error("Browser is required");
+		return this.browser.location;
+	}
+	get current() {
+		return this.state;
+	}
+	get pathname() {
+		return this.state.url.pathname;
+	}
+	get query() {
+		const query = {};
+		for (const [key, value] of new URLSearchParams(this.state.url.search).entries()) query[key] = String(value);
+		return query;
+	}
+	async back() {
+		this.browser?.history.back();
+	}
+	async forward() {
+		this.browser?.history.forward();
+	}
+	async invalidate(props) {
+		await this.browser?.invalidate(props);
+	}
+	async go(path, options) {
+		for (const page of this.pages) if (page.name === path) {
+			await this.browser?.go(this.path(path, options), options);
+			return;
+		}
+		await this.browser?.go(path, options);
+	}
+	anchor(path, options = {}) {
+		let href = path;
+		for (const page of this.pages) if (page.name === path) {
+			href = this.path(path, options);
+			break;
+		}
+		return {
+			href: this.base(href),
+			onClick: (ev) => {
+				ev.stopPropagation();
+				ev.preventDefault();
+				this.go(href, options).catch(console.error);
+			}
+		};
+	}
+	base(path) {
+		const base = import.meta.env?.BASE_URL;
+		if (!base || base === "/") return path;
+		return base + path;
+	}
+	/**
+	* Set query params.
+	*
+	* @param record
+	* @param options
+	*/
+	setQueryParams(record, options = {}) {
+		const func = typeof record === "function" ? record : () => record;
+		const search = new URLSearchParams(func(this.query)).toString();
+		const state = search ? `${this.pathname}?${search}` : this.pathname;
+		if (options.push) window.history.pushState({}, "", state);
+		else window.history.replaceState({}, "", state);
 	}
 };
 
@@ -2644,12 +3009,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)
 			};
 		});
 	}];