@alepha/react 0.7.5 → 0.7.7

package/dist/index.browser.js

@@ -1,53 +1,1045 @@
-import { t, $inject, $logger, $hook, __bind } from '@alepha/core';
-import { l as ReactBrowserProvider, B as BrowserRouterProvider, $ as $page, P as PageDescriptorProvider } from './useRouterState-cCucJfTC.js';
-export { C as ClientOnly, E as ErrorBoundary, L as Link, N as NestedView, b as RedirectionError, R as RouterContext, c as RouterHookApi, a as RouterLayerContext, k as isPageRoute, u as useActive, d as useAlepha, e as useClient, f as useInject, g as useQueryParams, h as useRouter, i as useRouterEvents, j as useRouterState } from './useRouterState-cCucJfTC.js';
-import { hydrateRoot, createRoot } from 'react-dom/client';
-import 'react/jsx-runtime';
-import 'react';
-import '@alepha/server';
-import '@alepha/router';
-
-const envSchema = t.object({
-  REACT_ROOT_ID: t.string({ default: "root" })
-});
-class ReactBrowserRenderer {
-  browserProvider = $inject(ReactBrowserProvider);
-  browserRouterProvider = $inject(BrowserRouterProvider);
-  env = $inject(envSchema);
-  log = $logger();
-  root;
-  getRootElement() {
-    const root = this.browserProvider.document.getElementById(
-      this.env.REACT_ROOT_ID
-    );
-    if (root) {
-      return root;
-    }
-    const div = this.browserProvider.document.createElement("div");
-    div.id = this.env.REACT_ROOT_ID;
-    this.browserProvider.document.body.prepend(div);
-    return div;
-  }
-  ready = $hook({
-    name: "react:browser:render",
-    handler: async ({ state, context, hydration }) => {
-      const element = this.browserRouterProvider.root(state, context);
-      if (hydration?.layers) {
-        this.root = hydrateRoot(this.getRootElement(), element);
-        this.log.info("Hydrated root element");
-      } else {
-        this.root ??= createRoot(this.getRootElement());
-        this.root.render(element);
-        this.log.info("Created root element");
-      }
-    }
-  });
-}
+import { $hook, $inject, $logger, Alepha, KIND, NotImplementedError, OPTIONS, __bind, __descriptor, t } from "@alepha/core";
+import { RouterProvider } from "@alepha/router";
+import React, { StrictMode, createContext, createElement, useContext, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LinkProvider } from "@alepha/server-links";
+import { createRoot, hydrateRoot } from "react-dom/client";
+
+//#region src/descriptors/$page.ts
+const KEY = "PAGE";
+/**
+* Main descriptor for defining a React route in the application.
+*/
+const $page = (options) => {
+	__descriptor(KEY);
+	if (options.children) for (const child of options.children) child[OPTIONS].parent = { [OPTIONS]: options };
+	if (options.parent) {
+		options.parent[OPTIONS].children ??= [];
+		options.parent[OPTIONS].children.push({ [OPTIONS]: options });
+	}
+	return {
+		[KIND]: KEY,
+		[OPTIONS]: options,
+		render: () => {
+			throw new NotImplementedError(KEY);
+		}
+	};
+};
+$page[KIND] = KEY;
 
-class AlephaReact {
-  name = "alepha.react";
-  $services = (alepha) => alepha.with(PageDescriptorProvider).with(ReactBrowserProvider).with(BrowserRouterProvider).with(ReactBrowserRenderer);
+//#endregion
+//#region src/components/NotFound.tsx
+function NotFoundPage() {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			height: "100vh",
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "center",
+			alignItems: "center",
+			textAlign: "center",
+			fontFamily: "sans-serif",
+			padding: "1rem"
+		},
+		children: /* @__PURE__ */ jsx("h1", {
+			style: {
+				fontSize: "1rem",
+				marginBottom: "0.5rem"
+			},
+			children: "This page does not exist"
+		})
+	});
 }
+
+//#endregion
+//#region src/components/ClientOnly.tsx
+/**
+* A small utility component that renders its children only on the client side.
+*
+* Optionally, you can provide a fallback React node that will be rendered.
+*
+* You should use this component when
+* - you have code that relies on browser-specific APIs
+* - you want to avoid server-side rendering for a specific part of your application
+* - you want to prevent pre-rendering of a component
+*/
+const ClientOnly = (props) => {
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => setMounted(true), []);
+	if (props.disabled) return props.children;
+	return mounted ? props.children : props.fallback;
+};
+var ClientOnly_default = ClientOnly;
+
+//#endregion
+//#region src/contexts/RouterContext.ts
+const RouterContext = createContext(void 0);
+
+//#endregion
+//#region src/hooks/useAlepha.ts
+const useAlepha = () => {
+	const routerContext = useContext(RouterContext);
+	if (!routerContext) throw new Error("useAlepha must be used within a RouterProvider");
+	return routerContext.alepha;
+};
+
+//#endregion
+//#region src/components/ErrorViewer.tsx
+const ErrorViewer = ({ error }) => {
+	const [expanded, setExpanded] = useState(false);
+	const isProduction = useAlepha().isProduction();
+	if (isProduction) return /* @__PURE__ */ jsx(ErrorViewerProduction, {});
+	const stackLines = error.stack?.split("\n") ?? [];
+	const previewLines = stackLines.slice(0, 5);
+	const hiddenLineCount = stackLines.length - previewLines.length;
+	const copyToClipboard = (text) => {
+		navigator.clipboard.writeText(text).catch((err) => {
+			console.error("Clipboard error:", err);
+		});
+	};
+	const styles = {
+		container: {
+			padding: "24px",
+			backgroundColor: "#FEF2F2",
+			color: "#7F1D1D",
+			border: "1px solid #FECACA",
+			borderRadius: "16px",
+			boxShadow: "0 8px 24px rgba(0,0,0,0.05)",
+			fontFamily: "monospace",
+			maxWidth: "768px",
+			margin: "40px auto"
+		},
+		heading: {
+			fontSize: "20px",
+			fontWeight: "bold",
+			marginBottom: "4px"
+		},
+		name: {
+			fontSize: "16px",
+			fontWeight: 600
+		},
+		message: {
+			fontSize: "14px",
+			marginBottom: "16px"
+		},
+		sectionHeader: {
+			display: "flex",
+			justifyContent: "space-between",
+			alignItems: "center",
+			fontSize: "12px",
+			marginBottom: "4px",
+			color: "#991B1B"
+		},
+		copyButton: {
+			fontSize: "12px",
+			color: "#DC2626",
+			background: "none",
+			border: "none",
+			cursor: "pointer",
+			textDecoration: "underline"
+		},
+		stackContainer: {
+			backgroundColor: "#FEE2E2",
+			padding: "12px",
+			borderRadius: "8px",
+			fontSize: "13px",
+			lineHeight: "1.4",
+			overflowX: "auto",
+			whiteSpace: "pre-wrap"
+		},
+		expandLine: {
+			color: "#F87171",
+			cursor: "pointer",
+			marginTop: "8px"
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.container,
+		children: [/* @__PURE__ */ jsxs("div", { children: [
+			/* @__PURE__ */ jsx("div", {
+				style: styles.heading,
+				children: "🔥 Error"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: styles.name,
+				children: error.name
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: styles.message,
+				children: error.message
+			})
+		] }), stackLines.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+			style: styles.sectionHeader,
+			children: [/* @__PURE__ */ jsx("span", { children: "Stack trace" }), /* @__PURE__ */ jsx("button", {
+				onClick: () => copyToClipboard(error.stack),
+				style: styles.copyButton,
+				children: "Copy all"
+			})]
+		}), /* @__PURE__ */ jsxs("pre", {
+			style: styles.stackContainer,
+			children: [(expanded ? stackLines : previewLines).map((line, i) => /* @__PURE__ */ jsx("div", { children: line }, i)), !expanded && hiddenLineCount > 0 && /* @__PURE__ */ jsxs("div", {
+				style: styles.expandLine,
+				onClick: () => setExpanded(true),
+				children: [
+					"+ ",
+					hiddenLineCount,
+					" more lines..."
+				]
+			})]
+		})] })]
+	});
+};
+var ErrorViewer_default = ErrorViewer;
+const ErrorViewerProduction = () => {
+	const styles = {
+		container: {
+			padding: "24px",
+			backgroundColor: "#FEF2F2",
+			color: "#7F1D1D",
+			border: "1px solid #FECACA",
+			borderRadius: "16px",
+			boxShadow: "0 8px 24px rgba(0,0,0,0.05)",
+			fontFamily: "monospace",
+			maxWidth: "768px",
+			margin: "40px auto",
+			textAlign: "center"
+		},
+		heading: {
+			fontSize: "20px",
+			fontWeight: "bold",
+			marginBottom: "8px"
+		},
+		name: {
+			fontSize: "16px",
+			fontWeight: 600,
+			marginBottom: "4px"
+		},
+		message: {
+			fontSize: "14px",
+			opacity: .85
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.container,
+		children: [/* @__PURE__ */ jsx("div", {
+			style: styles.heading,
+			children: "🚨 An error occurred"
+		}), /* @__PURE__ */ jsx("div", {
+			style: styles.message,
+			children: "Something went wrong. Please try again later."
+		})]
+	});
+};
+
+//#endregion
+//#region src/contexts/RouterLayerContext.ts
+const RouterLayerContext = createContext(void 0);
+
+//#endregion
+//#region src/hooks/useRouterEvents.ts
+const useRouterEvents = (opts = {}, deps = []) => {
+	const ctx = useContext(RouterContext);
+	if (!ctx) throw new Error("useRouter must be used within a RouterProvider");
+	useEffect(() => {
+		if (!ctx.alepha.isBrowser()) return;
+		const subs = [];
+		const onBegin = opts.onBegin;
+		const onEnd = opts.onEnd;
+		const onError = opts.onError;
+		if (onBegin) subs.push(ctx.alepha.on("react:transition:begin", { callback: onBegin }));
+		if (onEnd) subs.push(ctx.alepha.on("react:transition:end", { callback: onEnd }));
+		if (onError) subs.push(ctx.alepha.on("react:transition:error", { callback: onError }));
+		return () => {
+			for (const sub of subs) sub();
+		};
+	}, deps);
+};
+
+//#endregion
+//#region src/components/ErrorBoundary.tsx
+/**
+* A reusable error boundary for catching rendering errors
+* in any part of the React component tree.
+*/
+var ErrorBoundary = class extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {};
+	}
+	/**
+	* Update state so the next render shows the fallback UI.
+	*/
+	static getDerivedStateFromError(error) {
+		return { error };
+	}
+	/**
+	* Lifecycle method called when an error is caught.
+	* You can log the error or perform side effects here.
+	*/
+	componentDidCatch(error, info) {
+		if (this.props.onError) this.props.onError(error, info);
+	}
+	render() {
+		if (this.state.error) return this.props.fallback(this.state.error);
+		return this.props.children;
+	}
+};
+var ErrorBoundary_default = ErrorBoundary;
+
+//#endregion
+//#region src/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 app = useContext(RouterContext);
+	const layer = useContext(RouterLayerContext);
+	const index = layer?.index ?? 0;
+	const [view, setView] = useState(app?.state.layers[index]?.element);
+	useRouterEvents({ onEnd: ({ state }) => {
+		setView(state.layers[index]?.element);
+	} }, [app]);
+	if (!app) throw new Error("NestedView must be used within a RouterContext.");
+	const element = view ?? props.children ?? null;
+	return /* @__PURE__ */ jsx(ErrorBoundary_default, {
+		fallback: app.context.onError,
+		children: element
+	});
+};
+var NestedView_default = NestedView;
+
+//#endregion
+//#region src/errors/RedirectionError.ts
+var RedirectionError = class extends Error {
+	page;
+	constructor(page) {
+		super("Redirection");
+		this.page = page;
+	}
+};
+
+//#endregion
+//#region src/providers/PageDescriptorProvider.ts
+const envSchema$1 = t.object({ REACT_STRICT_MODE: t.boolean({ default: true }) });
+var PageDescriptorProvider = class {
+	log = $logger();
+	env = $inject(envSchema$1);
+	alepha = $inject(Alepha);
+	pages = [];
+	getPages() {
+		return this.pages;
+	}
+	page(name) {
+		for (const page of this.pages) if (page.name === name) return page;
+		throw new Error(`Page ${name} not found`);
+	}
+	url(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 ?? {});
+		return new URL(url.replace(/\/\/+/g, "/") || "/", options.base ?? `http://localhost`);
+	}
+	root(state, context) {
+		const root = createElement(RouterContext.Provider, { value: {
+			alepha: this.alepha,
+			state,
+			context
+		} }, createElement(NestedView_default, {}, state.layers[0]?.element));
+		if (this.env.REACT_STRICT_MODE) return createElement(StrictMode, {}, root);
+		return root;
+	}
+	async createLayers(route, request) {
+		const { pathname, search } = request.url;
+		const layers = [];
+		let context = {};
+		const stack = [{ route }];
+		request.onError = (error) => this.renderError(error);
+		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 {
+				config.query = route$1.schema?.query ? this.alepha.parse(route$1.schema.query, request.query) : request.query;
+			} catch (e) {
+				it.error = e;
+				break;
+			}
+			try {
+				config.params = route$1.schema?.params ? this.alepha.parse(route$1.schema.params, request.params) : request.params;
+			} catch (e) {
+				it.error = e;
+				break;
+			}
+			it.config = { ...config };
+			if (!route$1.resolve) continue;
+			const previous = request.previous;
+			if (previous?.[i] && !forceRefresh && previous[i].name === route$1.name) {
+				const url = (str) => str ? str.replace(/\/\/+/g, "/") : "/";
+				const prev = JSON.stringify({
+					part: url(previous[i].part),
+					params: previous[i].config?.params ?? {}
+				});
+				const curr = JSON.stringify({
+					part: url(route$1.path),
+					params: config.params ?? {}
+				});
+				if (prev === curr) {
+					it.props = previous[i].props;
+					it.error = previous[i].error;
+					context = {
+						...context,
+						...it.props
+					};
+					continue;
+				}
+				forceRefresh = true;
+			}
+			try {
+				const props = await route$1.resolve?.({
+					...request,
+					...config,
+					...context
+				}) ?? {};
+				it.props = { ...props };
+				context = {
+					...context,
+					...props
+				};
+			} catch (e) {
+				if (e instanceof RedirectionError) return {
+					layers: [],
+					redirect: typeof e.page === "string" ? e.page : this.href(e.page),
+					pathname,
+					search
+				};
+				this.log.error(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) request.onError = localErrorHandler;
+			if (it.error) {
+				let element$1 = await request.onError(it.error);
+				if (element$1 === null) element$1 = this.renderError(it.error);
+				layers.push({
+					props,
+					error: it.error,
+					name: it.route.name,
+					part: it.route.path,
+					config: it.config,
+					element: this.renderView(i + 1, path, element$1, it.route),
+					index: i + 1,
+					path,
+					route
+				});
+				break;
+			}
+			const element = await this.createElement(it.route, {
+				...props,
+				...context
+			});
+			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
+			});
+		}
+		return {
+			layers,
+			pathname,
+			search
+		};
+	}
+	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) {
+			const component = await page.lazy();
+			return createElement(component.default, props);
+		}
+		if (page.component) return createElement(page.component, props);
+		return void 0;
+	}
+	renderError(error) {
+		return createElement(ErrorViewer_default, { error });
+	}
+	renderEmptyView() {
+		return createElement(NestedView_default, {});
+	}
+	href(page, params = {}) {
+		const found = this.pages.find((it) => it.name === page.options.name);
+		if (!found) throw new Error(`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_default, typeof page.client === "object" ? page.client : {}, view) : view;
+		return createElement(RouterLayerContext.Provider, { value: {
+			index,
+			path
+		} }, element);
+	}
+	configure = $hook({
+		name: "configure",
+		handler: () => {
+			let hasNotFoundHandler = false;
+			const pages = this.alepha.getDescriptorValues($page);
+			for (const { value, key } of pages) value[OPTIONS].name ??= key;
+			for (const { value } of pages) {
+				if (value[OPTIONS].parent) continue;
+				if (value[OPTIONS].path === "/*") hasNotFoundHandler = true;
+				this.add(this.map(pages, value));
+			}
+			if (!hasNotFoundHandler && pages.length > 0) this.add({
+				path: "/*",
+				name: "notFound",
+				cache: true,
+				component: NotFoundPage,
+				afterHandler: ({ reply }) => {
+					reply.status = 404;
+				}
+			});
+		}
+	});
+	map(pages, target) {
+		const children = target[OPTIONS].children ?? [];
+		return {
+			...target[OPTIONS],
+			parent: void 0,
+			children: children.map((it) => this.map(pages, it))
+		};
+	}
+	add(entry) {
+		if (this.alepha.isReady()) throw new Error("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/providers/BrowserRouterProvider.ts
+var BrowserRouterProvider = class extends RouterProvider {
+	log = $logger();
+	alepha = $inject(Alepha);
+	pageDescriptorProvider = $inject(PageDescriptorProvider);
+	add(entry) {
+		this.pageDescriptorProvider.add(entry);
+	}
+	configure = $hook({
+		name: "configure",
+		handler: async () => {
+			for (const page of this.pageDescriptorProvider.getPages()) if (page.component || page.lazy) this.push({
+				path: page.match,
+				page
+			});
+		}
+	});
+	async transition(url, options = {}) {
+		const { pathname, search } = url;
+		const state = {
+			pathname,
+			search,
+			layers: []
+		};
+		const context = {
+			url,
+			query: {},
+			params: {},
+			onError: () => null,
+			...options.context ?? {}
+		};
+		await this.alepha.emit("react:transition:begin", {
+			state,
+			context
+		});
+		try {
+			const previous = options.previous;
+			const { route, params } = this.match(pathname);
+			const query = {};
+			if (search) for (const [key, value] of new URLSearchParams(search).entries()) query[key] = String(value);
+			context.query = query;
+			context.params = params ?? {};
+			context.previous = previous;
+			if (isPageRoute(route)) {
+				const result = await this.pageDescriptorProvider.createLayers(route.page, context);
+				if (result.redirect) return {
+					redirect: result.redirect,
+					state,
+					context
+				};
+				state.layers = result.layers;
+			}
+			if (state.layers.length === 0) state.layers.push({
+				name: "not-found",
+				element: createElement(NotFoundPage),
+				index: 0,
+				path: "/"
+			});
+			await this.alepha.emit("react:transition:success", {
+				state,
+				context
+			});
+		} catch (e) {
+			this.log.error(e);
+			state.layers = [{
+				name: "error",
+				element: this.pageDescriptorProvider.renderError(e),
+				index: 0,
+				path: "/"
+			}];
+			await this.alepha.emit("react:transition:error", {
+				error: e,
+				state,
+				context
+			});
+		}
+		if (options.state) {
+			options.state.layers = state.layers;
+			options.state.pathname = state.pathname;
+			options.state.search = state.search;
+		}
+		await this.alepha.emit("react:transition:end", {
+			state: options.state,
+			context
+		});
+		return {
+			context,
+			state
+		};
+	}
+	root(state, context) {
+		return this.pageDescriptorProvider.root(state, context);
+	}
+};
+
+//#endregion
+//#region src/providers/ReactBrowserProvider.ts
+var ReactBrowserProvider = class {
+	log = $logger();
+	client = $inject(LinkProvider);
+	alepha = $inject(Alepha);
+	router = $inject(BrowserRouterProvider);
+	root;
+	transitioning;
+	state = {
+		layers: [],
+		pathname: "",
+		search: ""
+	};
+	get document() {
+		return window.document;
+	}
+	get history() {
+		return window.history;
+	}
+	get url() {
+		return window.location.pathname + window.location.search;
+	}
+	async invalidate(props) {
+		const previous = [];
+		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 = {}) {
+		const result = await this.render({ url });
+		if (result.context.url.pathname !== url) {
+			this.history.replaceState({}, "", result.context.url.pathname);
+			return;
+		}
+		if (options.replace) {
+			this.history.replaceState({}, "", url);
+			return;
+		}
+		this.history.pushState({}, "", url);
+	}
+	async render(options = {}) {
+		const previous = options.previous ?? this.state.layers;
+		const url = options.url ?? this.url;
+		this.transitioning = { to: url };
+		const result = await this.router.transition(new URL(`http://localhost${url}`), {
+			previous,
+			state: this.state
+		});
+		if (result.redirect) return await this.render({ url: result.redirect });
+		this.transitioning = void 0;
+		return result;
+	}
+	/**
+	* Get embedded layers from the server.
+	*/
+	getHydrationState() {
+		try {
+			if ("__ssr" in window && typeof window.__ssr === "object") return window.__ssr;
+		} catch (error) {
+			console.error(error);
+		}
+	}
+	ready = $hook({
+		name: "ready",
+		handler: async () => {
+			const hydration = this.getHydrationState();
+			const previous = hydration?.layers ?? [];
+			if (hydration?.links) for (const link of hydration.links.links) this.client.pushLink(link);
+			const { context } = await this.render({ previous });
+			await this.alepha.emit("react:browser:render", {
+				state: this.state,
+				context,
+				hydration
+			});
+			window.addEventListener("popstate", () => {
+				this.render();
+			});
+		}
+	});
+};
+
+//#endregion
+//#region src/providers/ReactBrowserRenderer.ts
+const envSchema = t.object({ REACT_ROOT_ID: t.string({ default: "root" }) });
+var ReactBrowserRenderer = class {
+	browserProvider = $inject(ReactBrowserProvider);
+	browserRouterProvider = $inject(BrowserRouterProvider);
+	env = $inject(envSchema);
+	log = $logger();
+	root;
+	getRootElement() {
+		const root = this.browserProvider.document.getElementById(this.env.REACT_ROOT_ID);
+		if (root) return root;
+		const div = this.browserProvider.document.createElement("div");
+		div.id = this.env.REACT_ROOT_ID;
+		this.browserProvider.document.body.prepend(div);
+		return div;
+	}
+	ready = $hook({
+		name: "react:browser:render",
+		handler: async ({ state, context, hydration }) => {
+			const element = this.browserRouterProvider.root(state, context);
+			if (hydration?.layers) {
+				this.root = hydrateRoot(this.getRootElement(), element);
+				this.log.info("Hydrated root element");
+			} else {
+				this.root ??= createRoot(this.getRootElement());
+				this.root.render(element);
+				this.log.info("Created root element");
+			}
+		}
+	});
+};
+
+//#endregion
+//#region src/hooks/RouterHookApi.ts
+var RouterHookApi = class {
+	constructor(pages, state, layer, browser) {
+		this.pages = pages;
+		this.state = state;
+		this.layer = layer;
+		this.browser = browser;
+	}
+	get current() {
+		return this.state;
+	}
+	get pathname() {
+		return this.state.pathname;
+	}
+	get query() {
+		const query = {};
+		for (const [key, value] of new URLSearchParams(this.state.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);
+	}
+	/**
+	* Create a valid href for the given pathname.
+	*
+	* @param pathname
+	* @param layer
+	*/
+	createHref(pathname, layer = this.layer, options = {}) {
+		if (typeof pathname === "object") pathname = pathname.options.path ?? "";
+		if (options.params) for (const [key, value] of Object.entries(options.params)) pathname = pathname.replace(`:${key}`, String(value));
+		return pathname.startsWith("/") ? pathname : `${layer.path}/${pathname}`.replace(/\/\/+/g, "/");
+	}
+	async go(path, options) {
+		for (const page of this.pages) if (page.name === path) {
+			path = page.path ?? "";
+			break;
+		}
+		await this.browser?.go(this.createHref(path, this.layer, options), options);
+	}
+	anchor(path, options = {}) {
+		for (const page of this.pages) if (page.name === path) {
+			path = page.path ?? "";
+			break;
+		}
+		const href = this.createHref(path, this.layer, options);
+		return {
+			href,
+			onClick: (ev) => {
+				ev.stopPropagation();
+				ev.preventDefault();
+				this.go(path, options).catch(console.error);
+			}
+		};
+	}
+	/**
+	* 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/hooks/useRouter.ts
+const useRouter = () => {
+	const ctx = useContext(RouterContext);
+	const layer = useContext(RouterLayerContext);
+	if (!ctx || !layer) throw new Error("useRouter must be used within a RouterProvider");
+	const pages = useMemo(() => {
+		return ctx.alepha.get(PageDescriptorProvider).getPages();
+	}, []);
+	return useMemo(() => new RouterHookApi(pages, ctx.state, layer, ctx.alepha.isBrowser() ? ctx.alepha.get(ReactBrowserProvider) : void 0), [layer]);
+};
+
+//#endregion
+//#region src/components/Link.tsx
+const Link = (props) => {
+	React.useContext(RouterContext);
+	const router = useRouter();
+	const to = typeof props.to === "string" ? props.to : props.to[OPTIONS].path;
+	if (!to) return null;
+	const can = typeof props.to === "string" ? void 0 : props.to[OPTIONS].can;
+	if (can && !can()) return null;
+	const name = typeof props.to === "string" ? void 0 : props.to[OPTIONS].name;
+	const anchorProps = {
+		...props,
+		to: void 0
+	};
+	return /* @__PURE__ */ jsx("a", {
+		...router.anchor(to),
+		...anchorProps,
+		children: props.children ?? name
+	});
+};
+var Link_default = Link;
+
+//#endregion
+//#region src/hooks/useActive.ts
+const useActive = (path) => {
+	const router = useRouter();
+	const ctx = useContext(RouterContext);
+	const layer = useContext(RouterLayerContext);
+	if (!ctx || !layer) throw new Error("useRouter must be used within a RouterProvider");
+	let name;
+	if (typeof path === "object" && path.options.name) name = path.options.name;
+	const [current, setCurrent] = useState(ctx.state.pathname);
+	const href = useMemo(() => router.createHref(path, layer), [path, layer]);
+	const [isPending, setPending] = useState(false);
+	const isActive = current === href;
+	useRouterEvents({ onEnd: ({ state }) => setCurrent(state.pathname) });
+	return {
+		name,
+		isPending,
+		isActive,
+		anchorProps: {
+			href,
+			onClick: (ev) => {
+				ev.stopPropagation();
+				ev.preventDefault();
+				if (isActive) return;
+				if (isPending) return;
+				setPending(true);
+				router.go(href).then(() => {
+					setPending(false);
+				});
+			}
+		}
+	};
+};
+
+//#endregion
+//#region src/hooks/useInject.ts
+const useInject = (clazz) => {
+	const ctx = useContext(RouterContext);
+	if (!ctx) throw new Error("useRouter must be used within a <RouterProvider>");
+	return useMemo(() => ctx.alepha.get(clazz), []);
+};
+
+//#endregion
+//#region src/hooks/useClient.ts
+const useClient = (_scope) => {
+	return useInject(LinkProvider).client();
+};
+
+//#endregion
+//#region src/hooks/useQueryParams.ts
+const useQueryParams = (schema, options = {}) => {
+	const ctx = useContext(RouterContext);
+	if (!ctx) throw new Error("useQueryParams must be used within a RouterProvider");
+	const key = options.key ?? "q";
+	const router = useRouter();
+	const querystring = router.query[key];
+	const [queryParams, setQueryParams] = useState(decode(ctx.alepha, schema, router.query[key]));
+	useEffect(() => {
+		setQueryParams(decode(ctx.alepha, schema, querystring));
+	}, [querystring]);
+	return [queryParams, (queryParams$1) => {
+		setQueryParams(queryParams$1);
+		router.setQueryParams((data) => {
+			return {
+				...data,
+				[key]: encode(ctx.alepha, schema, queryParams$1)
+			};
+		});
+	}];
+};
+const encode = (alepha, schema, data) => {
+	return btoa(JSON.stringify(alepha.parse(schema, data)));
+};
+const decode = (alepha, schema, data) => {
+	try {
+		return alepha.parse(schema, JSON.parse(atob(decodeURIComponent(data))));
+	} catch (_error) {
+		return {};
+	}
+};
+
+//#endregion
+//#region src/hooks/useRouterState.ts
+const useRouterState = () => {
+	const ctx = useContext(RouterContext);
+	const layer = useContext(RouterLayerContext);
+	if (!ctx || !layer) throw new Error("useRouter must be used within a RouterProvider");
+	const [state, setState] = useState(ctx.state);
+	useRouterEvents({ onEnd: ({ state: state$1 }) => setState({ ...state$1 }) });
+	return state;
+};
+
+//#endregion
+//#region src/index.browser.ts
+var AlephaReact = class {
+	name = "alepha.react";
+	$services = (alepha) => alepha.with(PageDescriptorProvider).with(ReactBrowserProvider).with(BrowserRouterProvider).with(ReactBrowserRenderer);
+};
 __bind($page, AlephaReact);
 
-export { $page, AlephaReact, BrowserRouterProvider, PageDescriptorProvider, ReactBrowserProvider };
+//#endregion
+export { $page, AlephaReact, BrowserRouterProvider, ClientOnly_default as ClientOnly, ErrorBoundary_default as ErrorBoundary, Link_default as Link, NestedView_default as NestedView, PageDescriptorProvider, ReactBrowserProvider, RedirectionError, RouterContext, RouterHookApi, RouterLayerContext, isPageRoute, useActive, useAlepha, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState };
+//# sourceMappingURL=index.browser.js.map