@alepha/react 0.14.1 → 0.14.3

package/dist/auth/index.browser.js

@@ -1,10 +1,1494 @@
-import { $hook, $inject, $module, Alepha } from "alepha";
-import { ReactBrowserProvider, Redirection, useAlepha, 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 { HttpClient } from "alepha/server";
+import { AlephaServerLinks, LinkProvider } from "alepha/server/links";
+import { RouterProvider } from "alepha/router";
+import { StrictMode, createContext, createElement, memo, use, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AlephaContext, AlephaReact, ClientOnly, ErrorBoundary, useAlepha, useEvents, useStore } from "@alepha/react";
+import { createRoot, hydrateRoot } from "react-dom/client";
+import { AlephaServer, HttpClient } from "alepha/server";
 import { alephaServerAuthRoutes, tokenResponseSchema, userinfoResponseSchema } from "alepha/server/auth";
-import { LinkProvider } from "alepha/server/links";
 
+//#region ../../src/router/services/ReactPageService.ts
+/**
+* $page methods interface.
+*/
+var ReactPageService = class {
+	fetch(pathname, options = {}) {
+		throw new AlephaError("Fetch is not available for this environment.");
+	}
+	render(name, options = {}) {
+		throw new AlephaError("Render is not available for this environment.");
+	}
+};
+
+//#endregion
+//#region ../../src/router/primitives/$page.ts
+/**
+* Main primitive for defining a React route in the application.
+*
+* The $page primitive is the core building block for creating type-safe, SSR-enabled React routes.
+* It provides a declarative way to define pages with powerful features:
+*
+* **Routing & Navigation**
+* - URL pattern matching with parameters (e.g., `/users/:id`)
+* - Nested routing with parent-child relationships
+* - Type-safe URL parameter and query string validation
+*
+* **Data Loading**
+* - Server-side data fetching with the `resolve` function
+* - Automatic serialization and hydration for SSR
+* - Access to request context, URL params, and parent data
+*
+* **Component Loading**
+* - Direct component rendering or lazy loading for code splitting
+* - Client-only rendering when browser APIs are needed
+* - Automatic fallback handling during hydration
+*
+* **Performance Optimization**
+* - Static generation for pre-rendered pages at build time
+* - Server-side caching with configurable TTL and providers
+* - Code splitting through lazy component loading
+*
+* **Error Handling**
+* - Custom error handlers with support for redirects
+* - Hierarchical error handling (child → parent)
+* - HTTP status code handling (404, 401, etc.)
+*
+* **Page Animations**
+* - CSS-based enter/exit animations
+* - Dynamic animations based on page state
+* - Custom timing and easing functions
+*
+* **Lifecycle Management**
+* - Server response hooks for headers and status codes
+* - Page leave handlers for cleanup (browser only)
+* - Permission-based access control
+*
+* @example Simple page with data fetching
+* ```typescript
+* const userProfile = $page({
+*   path: "/users/:id",
+*   schema: {
+*     params: t.object({ id: t.integer() }),
+*     query: t.object({ tab: t.optional(t.text()) })
+*   },
+*   resolve: async ({ params }) => {
+*     const user = await userApi.getUser(params.id);
+*     return { user };
+*   },
+*   lazy: () => import("./UserProfile.tsx")
+* });
+* ```
+*
+* @example Nested routing with error handling
+* ```typescript
+* const projectSection = $page({
+*   path: "/projects/:id",
+*   children: () => [projectBoard, projectSettings],
+*   resolve: async ({ params }) => {
+*     const project = await projectApi.get(params.id);
+*     return { project };
+*   },
+*   errorHandler: (error) => {
+*     if (HttpError.is(error, 404)) {
+*       return <ProjectNotFound />;
+*     }
+*   }
+* });
+* ```
+*
+* @example Static generation with caching
+* ```typescript
+* const blogPost = $page({
+*   path: "/blog/:slug",
+*   static: {
+*     entries: posts.map(p => ({ params: { slug: p.slug } }))
+*   },
+*   resolve: async ({ params }) => {
+*     const post = await loadPost(params.slug);
+*     return { post };
+*   }
+* });
+* ```
+*/
+const $page = (options) => {
+	return createPrimitive(PagePrimitive, options);
+};
+var PagePrimitive = class extends Primitive {
+	reactPageService = $inject(ReactPageService);
+	onInit() {
+		if (this.options.static) this.options.cache ??= { store: {
+			provider: "memory",
+			ttl: [1, "week"]
+		} };
+	}
+	get name() {
+		return this.options.name ?? this.config.propertyKey;
+	}
+	/**
+	* For testing or build purposes.
+	*
+	* This will render the page (HTML layout included or not) and return the HTML + context.
+	* Only valid for server-side rendering, it will throw an error if called on the client-side.
+	*/
+	async render(options) {
+		return this.reactPageService.render(this.name, options);
+	}
+	async fetch(options) {
+		return this.reactPageService.fetch(this.options.path || "", options);
+	}
+	match(url) {
+		return false;
+	}
+	pathname(config) {
+		return this.options.path || "";
+	}
+};
+$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
+/**
+* Error viewer component that displays error details in development mode
+*/
+const ErrorViewer = ({ error, alepha }) => {
+	const [expanded, setExpanded] = useState(false);
+	if (alepha.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)
+			})]
+		})
+	});
+};
+var ErrorViewer_default = ErrorViewer;
+/**
+* Parse stack trace string into structured frames
+*/
+function parseStackTrace(stack) {
+	if (!stack) return [];
+	const lines = stack.split("\n").slice(1);
+	const frames = [];
+	for (const line of lines) {
+		const trimmed = line.trim();
+		if (!trimmed.startsWith("at ")) continue;
+		const frame = parseStackLine(trimmed);
+		if (frame) frames.push(frame);
+	}
+	return frames;
+}
+/**
+* Parse a single stack trace line into a structured frame
+*/
+function parseStackLine(line) {
+	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
+	};
+	const withoutFn = line.match(/^at\s+(.+):(\d+):(\d+)$/);
+	if (withoutFn) return {
+		fn: "<anonymous>",
+		file: withoutFn[1],
+		line: withoutFn[2],
+		col: withoutFn[3],
+		raw: line
+	};
+	return {
+		fn: "",
+		file: line.replace(/^at\s+/, ""),
+		line: "",
+		col: "",
+		raw: line
+	};
+}
+/**
+* Copy text to clipboard
+*/
+function copyToClipboard(text) {
+	navigator.clipboard.writeText(text).catch((err) => {
+		console.error("Clipboard error:", err);
+	});
+}
+/**
+* Header section with error type and message
+*/
+function Header({ error }) {
+	const [copied, setCopied] = useState(false);
+	const handleCopy = () => {
+		copyToClipboard(error.stack || error.message);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2e3);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.header,
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: styles.headerTop,
+			children: [/* @__PURE__ */ jsx("div", {
+				style: styles.badge,
+				children: error.name
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: handleCopy,
+				style: styles.copyBtn,
+				children: copied ? "Copied" : "Copy Stack"
+			})]
+		}), /* @__PURE__ */ jsx("h1", {
+			style: styles.message,
+			children: error.message
+		})]
+	});
+}
+/**
+* Stack trace section with expandable frames
+*/
+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"
+		}), /* @__PURE__ */ jsxs("div", {
+			style: styles.frameList,
+			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,
+					children: [
+						"Show ",
+						hiddenCount,
+						" more frames"
+					]
+				}),
+				expanded && hiddenCount > 0 && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onToggle,
+					style: styles.expandBtn,
+					children: "Show less"
+				})
+			]
+		})]
+	});
+}
+/**
+* Single stack frame row
+*/
+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", {
+		style: {
+			...styles.frame,
+			...isFirst ? styles.frameFirst : {}
+		},
+		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
+						]
+					})
+				]
+			})]
+		})]
+	});
+}
+/**
+* Production error view - minimal information
+*/
+function ErrorViewerProduction() {
+	return /* @__PURE__ */ jsx("div", {
+		style: styles.overlay,
+		children: /* @__PURE__ */ jsxs("div", {
+			style: styles.prodContainer,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					style: styles.prodIcon,
+					children: "!"
+				}),
+				/* @__PURE__ */ jsx("h1", {
+					style: styles.prodTitle,
+					children: "Application Error"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					style: styles.prodMessage,
+					children: "An unexpected error occurred. Please try again later."
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => window.location.reload(),
+					style: styles.prodButton,
+					children: "Reload Page"
+				})
+			]
+		})
+	});
+}
+const styles = {
+	overlay: {
+		position: "fixed",
+		inset: 0,
+		backgroundColor: "rgba(0, 0, 0, 0.8)",
+		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
+	},
+	container: {
+		width: "100%",
+		maxWidth: "960px",
+		backgroundColor: "#1a1a1a",
+		borderRadius: "12px",
+		overflow: "hidden",
+		boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)"
+	},
+	header: {
+		padding: "24px 28px",
+		borderBottom: "1px solid #333",
+		background: "linear-gradient(to bottom, #1f1f1f, #1a1a1a)"
+	},
+	headerTop: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		marginBottom: "16px"
+	},
+	badge: {
+		display: "inline-block",
+		padding: "6px 12px",
+		backgroundColor: "#dc2626",
+		color: "#fff",
+		fontSize: "12px",
+		fontWeight: 600,
+		borderRadius: "6px",
+		letterSpacing: "0.025em"
+	},
+	copyBtn: {
+		padding: "8px 16px",
+		backgroundColor: "transparent",
+		color: "#888",
+		fontSize: "13px",
+		fontWeight: 500,
+		border: "1px solid #444",
+		borderRadius: "6px",
+		cursor: "pointer",
+		transition: "all 0.15s"
+	},
+	message: {
+		margin: 0,
+		fontSize: "20px",
+		fontWeight: 500,
+		color: "#fff",
+		lineHeight: 1.5,
+		wordBreak: "break-word"
+	},
+	stackSection: { padding: "0" },
+	stackHeader: {
+		padding: "16px 28px",
+		fontSize: "11px",
+		fontWeight: 600,
+		color: "#666",
+		textTransform: "uppercase",
+		letterSpacing: "0.1em",
+		borderBottom: "1px solid #2a2a2a"
+	},
+	frameList: {
+		display: "flex",
+		flexDirection: "column"
+	},
+	frame: {
+		display: "flex",
+		alignItems: "flex-start",
+		padding: "14px 28px",
+		borderBottom: "1px solid #252525",
+		transition: "background-color 0.15s"
+	},
+	frameFirst: { backgroundColor: "rgba(220, 38, 38, 0.1)" },
+	frameIndex: {
+		width: "28px",
+		flexShrink: 0,
+		fontSize: "12px",
+		fontWeight: 500,
+		color: "#555",
+		fontFamily: "monospace"
+	},
+	frameContent: {
+		flex: 1,
+		minWidth: 0
+	},
+	fnName: {
+		fontSize: "14px",
+		fontWeight: 500,
+		color: "#e5e5e5",
+		marginBottom: "4px",
+		fontFamily: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace"
+	},
+	filePath: {
+		fontSize: "13px",
+		color: "#888",
+		fontFamily: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace",
+		wordBreak: "break-all"
+	},
+	dirPath: { color: "#555" },
+	fileName: { color: "#0ea5e9" },
+	lineCol: { color: "#eab308" },
+	expandBtn: {
+		padding: "16px 28px",
+		backgroundColor: "transparent",
+		color: "#666",
+		fontSize: "13px",
+		fontWeight: 500,
+		border: "none",
+		borderTop: "1px solid #252525",
+		cursor: "pointer",
+		textAlign: "left",
+		transition: "all 0.15s"
+	},
+	prodContainer: {
+		textAlign: "center",
+		padding: "60px 40px",
+		backgroundColor: "#1a1a1a",
+		borderRadius: "12px",
+		maxWidth: "400px"
+	},
+	prodIcon: {
+		width: "64px",
+		height: "64px",
+		margin: "0 auto 24px",
+		backgroundColor: "#dc2626",
+		borderRadius: "50%",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontSize: "32px",
+		fontWeight: 700,
+		color: "#fff"
+	},
+	prodTitle: {
+		margin: "0 0 12px",
+		fontSize: "24px",
+		fontWeight: 600,
+		color: "#fff"
+	},
+	prodMessage: {
+		margin: "0 0 28px",
+		fontSize: "15px",
+		color: "#888",
+		lineHeight: 1.6
+	},
+	prodButton: {
+		padding: "12px 24px",
+		backgroundColor: "#fff",
+		color: "#000",
+		fontSize: "14px",
+		fontWeight: 600,
+		border: "none",
+		borderRadius: "8px",
+		cursor: "pointer"
+	}
+};
+
+//#endregion
+//#region ../../src/router/contexts/RouterLayerContext.ts
+const RouterLayerContext = createContext(void 0);
+
+//#endregion
+//#region ../../src/router/errors/Redirection.ts
+/**
+* Used for Redirection during the page loading.
+*
+* Depends on the context, it can be thrown or just returned.
+*
+* @example
+* ```ts
+* import { Redirection } from "@alepha/react";
+*
+* const MyPage = $page({
+*   resolve: async () => {
+*    if (needRedirect) {
+*      throw new Redirection("/new-path");
+*    }
+*   },
+* });
+* ```
+*/
+var Redirection = class extends AlephaError {
+	redirect;
+	constructor(redirect) {
+		super("Redirection");
+		this.redirect = redirect;
+	}
+};
+
+//#endregion
+//#region ../../src/router/hooks/useRouterState.ts
+const useRouterState = () => {
+	const [state] = useStore("alepha.react.router.state");
+	if (!state) throw new AlephaError("Missing react router state");
+	return state;
+};
+
+//#endregion
+//#region ../../src/router/components/NestedView.tsx
+/**
+* A component that renders the current view of the nested router layer.
+*
+* To be simple, it renders the `element` of the current child page of a parent page.
+*
+* @example
+* ```tsx
+* import { NestedView } from "@alepha/react";
+*
+* class App {
+*   parent = $page({
+*     component: () => <NestedView />,
+*   });
+*
+*   child = $page({
+*     parent: this.root,
+*     component: () => <div>Child Page</div>,
+*   });
+* }
+* ```
+*/
+const NestedView = (props) => {
+	const routerLayer = use(RouterLayerContext);
+	const index = routerLayer?.index ?? 0;
+	const onError = routerLayer?.onError;
+	const state = useRouterState();
+	const alepha = useAlepha();
+	const [view, setView] = useState(state.layers[index]?.element);
+	const [animation, setAnimation] = useState("");
+	const animationExitDuration = useRef(0);
+	const animationExitNow = useRef(0);
+	useEvents({
+		"react:transition:begin": async ({ previous, state: state$1 }) => {
+			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 (animationExit) {
+				const duration = animationExit.duration || 200;
+				animationExitNow.current = Date.now();
+				animationExitDuration.current = duration;
+				setAnimation(animationExit.animation);
+			} else {
+				animationExitNow.current = 0;
+				animationExitDuration.current = 0;
+				setAnimation("");
+			}
+		},
+		"react:transition:end": async ({ state: state$1 }) => {
+			const layer = state$1.layers[index];
+			if (animationExitNow.current) {
+				const duration = animationExitDuration.current;
+				const diff = Date.now() - animationExitNow.current;
+				if (diff < duration) await new Promise((resolve) => setTimeout(resolve, duration - diff));
+			}
+			if (!layer?.cache) {
+				setView(layer?.element);
+				const animationEnter = parseAnimation(layer?.route?.animation, state$1, "enter");
+				if (animationEnter) setAnimation(animationEnter.animation);
+				else setAnimation("");
+			}
+		}
+	}, []);
+	let element = view ?? props.children ?? null;
+	if (animation) element = /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			flex: 1,
+			height: "100%",
+			width: "100%",
+			position: "relative",
+			overflow: "hidden"
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				height: "100%",
+				width: "100%",
+				display: "flex",
+				animation
+			},
+			children: element
+		})
+	});
+	if (props.errorBoundary === false) return /* @__PURE__ */ jsx(Fragment, { children: element });
+	if (props.errorBoundary) return /* @__PURE__ */ jsx(ErrorBoundary, {
+		fallback: props.errorBoundary,
+		children: element
+	});
+	const fallback = (error) => {
+		const result = onError?.(error, state) ?? /* @__PURE__ */ jsx(ErrorViewer_default, {
+			error,
+			alepha
+		});
+		if (result instanceof Redirection) return "Redirection inside ErrorBoundary is not allowed.";
+		return result;
+	};
+	return /* @__PURE__ */ jsx(ErrorBoundary, {
+		fallback,
+		children: element
+	});
+};
+var NestedView_default = memo(NestedView);
+function parseAnimation(animationLike, state, type = "enter") {
+	if (!animationLike) return;
+	const DEFAULT_DURATION = 300;
+	const animation = typeof animationLike === "function" ? animationLike(state) : animationLike;
+	if (typeof animation === "string") {
+		if (type === "exit") return;
+		return {
+			duration: DEFAULT_DURATION,
+			animation: `${DEFAULT_DURATION}ms ${animation}`
+		};
+	}
+	if (typeof animation === "object") {
+		const anim = animation[type];
+		const duration = typeof anim === "object" ? anim.duration ?? DEFAULT_DURATION : DEFAULT_DURATION;
+		const name = typeof anim === "object" ? anim.name : anim;
+		if (type === "exit") return {
+			duration,
+			animation: `${duration}ms ${typeof anim === "object" ? anim.timing ?? "" : ""} ${name}`
+		};
+		return {
+			duration,
+			animation: `${duration}ms ${typeof anim === "object" ? anim.timing ?? "" : ""} ${name}`
+		};
+	}
+}
+
+//#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
+						});
+					}
+				}
+				continue;
+			}
+			pages.push(page);
+		}
+		return pages;
+	}
+	page(name) {
+		for (const page of this.pages) if (page.name === name) return page;
+		throw new AlephaError(`Page '${name}' not found`);
+	}
+	pathname(name, options = {}) {
+		const page = this.page(name);
+		if (!page) throw new Error(`Page ${name} not found`);
+		let url = page.path ?? "";
+		let parent = page.parent;
+		while (parent) {
+			url = `${parent.path ?? ""}/${url}`;
+			parent = parent.parent;
+		}
+		url = this.compile(url, options.params ?? {});
+		if (options.query) {
+			const query = new URLSearchParams(options.query);
+			if (query.toString()) url += `?${query.toString()}`;
+		}
+		return url.replace(/\/\/+/g, "/") || "/";
+	}
+	url(name, options = {}) {
+		return new URL(this.pathname(name, options), options.host ?? `http://localhost`);
+	}
+	root(state) {
+		const root = createElement(AlephaContext.Provider, { value: this.alepha }, createElement(NestedView_default, {}, state.layers[0]?.element));
+		if (this.env.REACT_STRICT_MODE) return createElement(StrictMode, {}, root);
+		return root;
+	}
+	convertStringObjectToObject = (schema, value) => {
+		if (t.schema.isObject(schema) && typeof value === "object") {
+			for (const key in schema.properties) if (t.schema.isObject(schema.properties[key]) && typeof value[key] === "string") try {
+				value[key] = this.alepha.codec.decode(schema.properties[key], decodeURIComponent(value[key]));
+			} catch (e) {}
+		}
+		return value;
+	};
+	/**
+	* Create a new RouterState based on a given route and request.
+	* This method resolves the layers for the route, applying any query and params schemas defined in the route.
+	* It also handles errors and redirects.
+	*/
+	async createLayers(route, state, previous = []) {
+		let context = {};
+		const stack = [{ route }];
+		let parent = route.parent;
+		while (parent) {
+			stack.unshift({ route: parent });
+			parent = parent.parent;
+		}
+		let forceRefresh = false;
+		for (let i = 0; i < stack.length; i++) {
+			const it = stack[i];
+			const route$1 = 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) : {};
+			} catch (e) {
+				it.error = e;
+				break;
+			}
+			try {
+				config.params = route$1.schema?.params ? this.alepha.codec.decode(route$1.schema.params, state.params) : {};
+			} catch (e) {
+				it.error = e;
+				break;
+			}
+			it.config = { ...config };
+			if (previous?.[i] && !forceRefresh && previous[i].name === route$1.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),
+					params: config.params ?? {}
+				})) {
+					it.props = previous[i].props;
+					it.error = previous[i].error;
+					it.cache = true;
+					context = {
+						...context,
+						...it.props
+					};
+					continue;
+				}
+				forceRefresh = true;
+			}
+			if (!route$1.resolve) continue;
+			try {
+				const args = Object.create(state);
+				Object.assign(args, config, context);
+				const props = await route$1.resolve?.(args) ?? {};
+				it.props = { ...props };
+				context = {
+					...context,
+					...props
+				};
+			} catch (e) {
+				if (e instanceof Redirection) return { redirect: e.redirect };
+				this.log.error("Page resolver has failed", e);
+				it.error = e;
+				break;
+			}
+		}
+		let acc = "";
+		for (let i = 0; i < stack.length; i++) {
+			const it = stack[i];
+			const props = it.props ?? {};
+			const params = { ...it.config?.params };
+			for (const key of Object.keys(params)) params[key] = String(params[key]);
+			acc += "/";
+			acc += it.route.path ? this.compile(it.route.path, params) : "";
+			const path = acc.replace(/\/+/, "/");
+			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);
+					return result;
+				};
+			}
+			if (!it.error) try {
+				const element = await this.createElement(it.route, {
+					...it.route.props ? it.route.props() : {},
+					...props,
+					...context
+				});
+				state.layers.push({
+					name: it.route.name,
+					props,
+					part: it.route.path,
+					config: it.config,
+					element: this.renderView(i + 1, path, element, it.route),
+					index: i + 1,
+					path,
+					route: it.route,
+					cache: it.cache
+				});
+			} catch (e) {
+				it.error = e;
+			}
+			if (it.error) try {
+				let element = await state.onError(it.error, state);
+				if (element === void 0) throw it.error;
+				if (element instanceof Redirection) return { redirect: element.redirect };
+				if (element === null) element = this.renderError(it.error);
+				state.layers.push({
+					props,
+					error: it.error,
+					name: it.route.name,
+					part: it.route.path,
+					config: it.config,
+					element: this.renderView(i + 1, path, element, it.route),
+					index: i + 1,
+					path,
+					route: it.route
+				});
+				break;
+			} catch (e) {
+				if (e instanceof Redirection) return { redirect: e.redirect };
+				throw e;
+			}
+		}
+		return { state };
+	}
+	getErrorHandler(route) {
+		if (route.errorHandler) return route.errorHandler;
+		let parent = route.parent;
+		while (parent) {
+			if (parent.errorHandler) return parent.errorHandler;
+			parent = parent.parent;
+		}
+	}
+	async createElement(page, props) {
+		if (page.lazy && page.component) this.log.warn(`Page ${page.name} has both lazy and component options, lazy will be used`);
+		if (page.lazy) return createElement((await page.lazy()).default, props);
+		if (page.component) return createElement(page.component, props);
+	}
+	renderError(error) {
+		return createElement(ErrorViewer_default, {
+			error,
+			alepha: this.alepha
+		});
+	}
+	renderEmptyView() {
+		return createElement(NestedView_default, {});
+	}
+	href(page, params = {}) {
+		const found = this.pages.find((it) => it.name === page.options.name);
+		if (!found) throw new AlephaError(`Page ${page.options.name} not found`);
+		let url = found.path ?? "";
+		let parent = found.parent;
+		while (parent) {
+			url = `${parent.path ?? ""}/${url}`;
+			parent = parent.parent;
+		}
+		url = this.compile(url, params);
+		return url.replace(/\/\/+/g, "/") || "/";
+	}
+	compile(path, params = {}) {
+		for (const [key, value] of Object.entries(params)) path = path.replace(`:${key}`, value);
+		return path;
+	}
+	renderView(index, path, view, page) {
+		view ??= this.renderEmptyView();
+		const element = page.client ? createElement(ClientOnly, typeof page.client === "object" ? page.client : {}, view) : view;
+		return createElement(RouterLayerContext.Provider, { value: {
+			index,
+			path,
+			onError: this.getErrorHandler(page) ?? ((error) => this.renderError(error))
+		} }, element);
+	}
+	configure = $hook({
+		on: "configure",
+		handler: () => {
+			let hasNotFoundHandler = false;
+			const pages = this.alepha.primitives($page);
+			const hasParent = (it) => {
+				if (it.options.parent) return true;
+				for (const page of pages) if ((page.options.children ? Array.isArray(page.options.children) ? page.options.children : page.options.children() : []).includes(it)) return true;
+			};
+			for (const page of pages) {
+				if (page.options.path === "/*") hasNotFoundHandler = true;
+				if (hasParent(page)) continue;
+				this.add(this.map(pages, page));
+			}
+			if (!hasNotFoundHandler && pages.length > 0) this.add({
+				path: "/*",
+				name: "notFound",
+				cache: true,
+				component: NotFound_default,
+				onServerResponse: ({ reply }) => {
+					reply.status = 404;
+				}
+			});
+		}
+	});
+	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;
+		};
+		children.push(...getChildrenFromParent(target));
+		return {
+			...target.options,
+			name: target.name,
+			parent: void 0,
+			children: children.map((it) => this.map(pages, it))
+		};
+	}
+	add(entry) {
+		if (this.alepha.isReady()) throw new AlephaError("Router is already initialized");
+		entry.name ??= this.nextId();
+		const page = entry;
+		page.match = this.createMatch(page);
+		this.pages.push(page);
+		if (page.children) for (const child of page.children) {
+			child.parent = page;
+			this.add(child);
+		}
+	}
+	createMatch(page) {
+		let url = page.path ?? "/";
+		let target = page.parent;
+		while (target) {
+			url = `${target.path ?? ""}/${url}`;
+			target = target.parent;
+		}
+		let path = url.replace(/\/\/+/g, "/");
+		if (path.endsWith("/") && path !== "/") path = path.slice(0, -1);
+		return path;
+	}
+	_next = 0;
+	nextId() {
+		this._next += 1;
+		return `P${this._next}`;
+	}
+};
+const isPageRoute = (it) => {
+	return it && typeof it === "object" && typeof it.path === "string" && typeof it.page === "object";
+};
+
+//#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);
+	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 });
+	}
+	root(state) {
+		return this.pageApi.root(state);
+	}
+};
+
+//#endregion
+//#region ../../src/router/providers/ReactBrowserProvider.ts
+const envSchema = t.object({ REACT_ROOT_ID: t.text({ default: "root" }) });
+/**
+* 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 {
+	env = $env(envSchema);
+	log = $logger();
+	client = $inject(LinkProvider);
+	alepha = $inject(Alepha);
+	router = $inject(ReactBrowserRouterProvider);
+	dateTimeProvider = $inject(DateTimeProvider);
+	options = $use(reactBrowserOptions);
+	getRootElement() {
+		const root = this.document.getElementById(this.env.REACT_ROOT_ID);
+		if (root) return root;
+		const div = this.document.createElement("div");
+		div.id = this.env.REACT_ROOT_ID;
+		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;
+	}
+	/**
+	* 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
+			});
+			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/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/index.browser.ts
+const AlephaReactRouter = $module({
+	name: "alepha.react.router",
+	primitives: [$page],
+	services: [
+		ReactPageProvider,
+		ReactBrowserRouterProvider,
+		ReactBrowserProvider,
+		ReactRouter,
+		ReactBrowserRendererProvider,
+		ReactPageService
+	],
+	register: (alepha) => alepha.with(AlephaReact).with(AlephaDateTime).with(AlephaServer).with(AlephaServerLinks).with(ReactPageProvider).with(ReactBrowserProvider).with(ReactBrowserRouterProvider).with(ReactBrowserRendererProvider).with(ReactRouter)
+});
+
+//#endregion
 //#region ../../src/auth/services/ReactAuth.ts
 /**
 * Browser, SSR friendly, service to handle authentication.