@alepha/react 0.7.4 → 0.7.6

package/dist/index.js

@@ -1,591 +1,1331 @@
-import { t, $logger, $inject, Alepha, $hook, OPTIONS, __bind } from '@alepha/core';
-import { ServerRouterProvider, ServerTimingProvider, ServerLinksProvider, apiLinksResponseSchema, HttpClient, AlephaServer } from '@alepha/server';
-import { AlephaServerCache } from '@alepha/server-cache';
-import { P as PageDescriptorProvider, $ as $page, R as RouterContext, a as RouterLayerContext, b as ReactBrowserProvider, u as useRouterEvents } from './ReactBrowserProvider-ufHSOTmv.js';
-export { C as ClientOnly, E as ErrorBoundary, N as NestedView, c as RedirectionError, i as isPageRoute, d as useAlepha } from './ReactBrowserProvider-ufHSOTmv.js';
-import { existsSync } from 'node:fs';
-import { join } from 'node:path';
-import { ServerStaticProvider } from '@alepha/server-static';
-import { renderToString } from 'react-dom/server';
-import { jsx } from 'react/jsx-runtime';
-import React, { useContext, useMemo, useState, useEffect } from 'react';
-import '@alepha/router';
+import { $hook, $inject, $logger, Alepha, KIND, NotImplementedError, OPTIONS, __bind, __descriptor, t } from "@alepha/core";
+import { AlephaServer, HttpClient, ServerLinksProvider, ServerRouterProvider, ServerTimingProvider, apiLinksResponseSchema } from "@alepha/server";
+import { AlephaServerCache } from "@alepha/server-cache";
+import React, { StrictMode, createContext, createElement, useContext, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+import { ServerStaticProvider } from "@alepha/server-static";
+import { renderToString } from "react-dom/server";
+import { RouterProvider } from "@alepha/router";
 
-class ServerHeadProvider {
-  renderHead(template, head) {
-    let result = template;
-    const htmlAttributes = head.htmlAttributes;
-    if (htmlAttributes) {
-      result = result.replace(
-        /<html([^>]*)>/i,
-        (_, existingAttrs) => `<html${this.mergeAttributes(existingAttrs, htmlAttributes)}>`
-      );
-    }
-    const bodyAttributes = head.bodyAttributes;
-    if (bodyAttributes) {
-      result = result.replace(
-        /<body([^>]*)>/i,
-        (_, existingAttrs) => `<body${this.mergeAttributes(existingAttrs, bodyAttributes)}>`
-      );
-    }
-    let headContent = "";
-    const title = head.title;
-    if (title) {
-      if (template.includes("<title>")) {
-        result = result.replace(
-          /<title>(.*?)<\/title>/i,
-          () => `<title>${this.escapeHtml(title)}</title>`
-        );
-      } else {
-        headContent += `<title>${this.escapeHtml(title)}</title>
-`;
-      }
-    }
-    if (head.meta) {
-      for (const meta of head.meta) {
-        headContent += `<meta name="${this.escapeHtml(meta.name)}" content="${this.escapeHtml(meta.content)}">
-`;
-      }
-    }
-    result = result.replace(
-      /<head([^>]*)>(.*?)<\/head>/is,
-      (_, existingAttrs, existingHead) => `<head${existingAttrs}>${existingHead}${headContent}</head>`
-    );
-    return result.trim();
-  }
-  mergeAttributes(existing, attrs) {
-    const existingAttrs = this.parseAttributes(existing);
-    const merged = { ...existingAttrs, ...attrs };
-    return Object.entries(merged).map(([k, v]) => ` ${k}="${this.escapeHtml(v)}"`).join("");
-  }
-  parseAttributes(attrStr) {
-    const attrs = {};
-    const attrRegex = /([^\s=]+)(?:="([^"]*)")?/g;
-    let match = attrRegex.exec(attrStr);
-    while (match) {
-      attrs[match[1]] = match[2] ?? "";
-      match = attrRegex.exec(attrStr);
-    }
-    return attrs;
-  }
-  escapeHtml(str) {
-    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
-  }
+//#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;
+
+//#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/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/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]);
+			if (it.route.head && !it.error) this.fillHead(it.route, request, {
+				...props,
+				...context
+			});
+			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
+				});
+				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
+			});
+		}
+		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;
+	}
+	fillHead(page, ctx, props) {
+		if (!page.head) return;
+		ctx.head ??= {};
+		const head = typeof page.head === "function" ? page.head(props, ctx.head) : page.head;
+		if (head.title) {
+			ctx.head ??= {};
+			if (ctx.head.titleSeparator) ctx.head.title = `${head.title}${ctx.head.titleSeparator}${ctx.head.title}`;
+			else ctx.head.title = head.title;
+			ctx.head.titleSeparator = head.titleSeparator;
+		}
+		if (head.htmlAttributes) ctx.head.htmlAttributes = {
+			...ctx.head.htmlAttributes,
+			...head.htmlAttributes
+		};
+		if (head.bodyAttributes) ctx.head.bodyAttributes = {
+			...ctx.head.bodyAttributes,
+			...head.bodyAttributes
+		};
+		if (head.meta) ctx.head.meta = [...ctx.head.meta ?? [], ...head.meta ?? []];
+	}
+	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/ServerHeadProvider.ts
+var ServerHeadProvider = class {
+	renderHead(template, head) {
+		let result = template;
+		const htmlAttributes = head.htmlAttributes;
+		if (htmlAttributes) result = result.replace(/<html([^>]*)>/i, (_, existingAttrs) => `<html${this.mergeAttributes(existingAttrs, htmlAttributes)}>`);
+		const bodyAttributes = head.bodyAttributes;
+		if (bodyAttributes) result = result.replace(/<body([^>]*)>/i, (_, existingAttrs) => `<body${this.mergeAttributes(existingAttrs, bodyAttributes)}>`);
+		let headContent = "";
+		const title = head.title;
+		if (title) if (template.includes("<title>")) result = result.replace(/<title>(.*?)<\/title>/i, () => `<title>${this.escapeHtml(title)}</title>`);
+		else headContent += `<title>${this.escapeHtml(title)}</title>\n`;
+		if (head.meta) for (const meta of head.meta) headContent += `<meta name="${this.escapeHtml(meta.name)}" content="${this.escapeHtml(meta.content)}">\n`;
+		result = result.replace(/<head([^>]*)>(.*?)<\/head>/is, (_, existingAttrs, existingHead) => `<head${existingAttrs}>${existingHead}${headContent}</head>`);
+		return result.trim();
+	}
+	mergeAttributes(existing, attrs) {
+		const existingAttrs = this.parseAttributes(existing);
+		const merged = {
+			...existingAttrs,
+			...attrs
+		};
+		return Object.entries(merged).map(([k, v]) => ` ${k}="${this.escapeHtml(v)}"`).join("");
+	}
+	parseAttributes(attrStr) {
+		const attrs = {};
+		const attrRegex = /([^\s=]+)(?:="([^"]*)")?/g;
+		let match = attrRegex.exec(attrStr);
+		while (match) {
+			attrs[match[1]] = match[2] ?? "";
+			match = attrRegex.exec(attrStr);
+		}
+		return attrs;
+	}
+	escapeHtml(str) {
+		return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+	}
+};
+
+//#endregion
+//#region src/providers/ReactServerProvider.ts
 const envSchema = t.object({
-  REACT_SERVER_DIST: t.string({ default: "public" }),
-  REACT_SERVER_PREFIX: t.string({ default: "" }),
-  REACT_SSR_ENABLED: t.optional(t.boolean()),
-  REACT_ROOT_ID: t.string({ default: "root" })
+	REACT_SERVER_DIST: t.string({ default: "public" }),
+	REACT_SERVER_PREFIX: t.string({ default: "" }),
+	REACT_SSR_ENABLED: t.optional(t.boolean()),
+	REACT_ROOT_ID: t.string({ default: "root" })
 });
-class ReactServerProvider {
-  log = $logger();
-  alepha = $inject(Alepha);
-  pageDescriptorProvider = $inject(PageDescriptorProvider);
-  serverStaticProvider = $inject(ServerStaticProvider);
-  serverRouterProvider = $inject(ServerRouterProvider);
-  headProvider = $inject(ServerHeadProvider);
-  serverTimingProvider = $inject(ServerTimingProvider);
-  env = $inject(envSchema);
-  ROOT_DIV_REGEX = new RegExp(
-    `<div([^>]*)\\s+id=["']${this.env.REACT_ROOT_ID}["']([^>]*)>(.*?)<\\/div>`,
-    "is"
-  );
-  onConfigure = $hook({
-    name: "configure",
-    handler: async () => {
-      const pages = this.alepha.getDescriptorValues($page);
-      const ssrEnabled = pages.length > 0 && this.env.REACT_SSR_ENABLED !== false;
-      this.alepha.state("ReactServerProvider.ssr", ssrEnabled);
-      for (const { key, instance, value } of pages) {
-        const name = value[OPTIONS].name ?? key;
-        instance[key].prerender = this.createRenderFunction(name, true);
-        if (this.alepha.isTest()) {
-          instance[key].render = this.createRenderFunction(name);
-        }
-      }
-      if (this.alepha.isServerless() === "vite") {
-        await this.configureVite(ssrEnabled);
-        return;
-      }
-      let root = "";
-      if (!this.alepha.isServerless()) {
-        root = this.getPublicDirectory();
-        if (!root) {
-          this.log.warn(
-            "Missing static files, static file server will be disabled"
-          );
-        } else {
-          this.log.debug(`Using static files from: ${root}`);
-          await this.configureStaticServer(root);
-        }
-      }
-      if (ssrEnabled) {
-        await this.registerPages(async () => this.template);
-        this.log.info("SSR OK");
-        return;
-      }
-      this.log.info("SSR is disabled, use History API fallback");
-      await this.serverRouterProvider.route({
-        path: "*",
-        handler: async ({ url, reply }) => {
-          if (url.pathname.includes(".")) {
-            reply.headers["content-type"] = "text/plain";
-            reply.body = "Not Found";
-            reply.status = 404;
-            return;
-          }
-          reply.headers["content-type"] = "text/html";
-          return this.template;
-        }
-      });
-    }
-  });
-  get template() {
-    return this.alepha.state("ReactServerProvider.template");
-  }
-  async registerPages(templateLoader) {
-    for (const page of this.pageDescriptorProvider.getPages()) {
-      if (page.children?.length) {
-        continue;
-      }
-      this.log.debug(`+ ${page.match} -> ${page.name}`);
-      await this.serverRouterProvider.route({
-        ...page,
-        schema: void 0,
-        // schema is handled by the page descriptor provider for now (shared by browser and server)
-        method: "GET",
-        path: page.match,
-        handler: this.createHandler(page, templateLoader)
-      });
-    }
-  }
-  getPublicDirectory() {
-    const maybe = [
-      join(process.cwd(), `dist/${this.env.REACT_SERVER_DIST}`),
-      join(process.cwd(), this.env.REACT_SERVER_DIST)
-    ];
-    for (const it of maybe) {
-      if (existsSync(it)) {
-        return it;
-      }
-    }
-    return "";
-  }
-  async configureStaticServer(root) {
-    await this.serverStaticProvider.serve({
-      root,
-      path: this.env.REACT_SERVER_PREFIX
-    });
-  }
-  async configureVite(ssrEnabled) {
-    if (!ssrEnabled) {
-      return;
-    }
-    this.log.info("SSR (vite) OK");
-    const url = `http://${process.env.SERVER_HOST}:${process.env.SERVER_PORT}`;
-    await this.registerPages(
-      () => fetch(`${url}/index.html`).then((it) => it.text()).catch(() => void 0)
-    );
-  }
-  /**
-   * For testing purposes, creates a render function that can be used.
-   */
-  createRenderFunction(name, withIndex = false) {
-    return async (options = {}) => {
-      const page = this.pageDescriptorProvider.page(name);
-      const url = new URL(this.pageDescriptorProvider.url(name, options));
-      const context = {
-        url,
-        params: options.params ?? {},
-        query: options.query ?? {},
-        head: {},
-        onError: () => null
-      };
-      const state = await this.pageDescriptorProvider.createLayers(
-        page,
-        context
-      );
-      if (!withIndex) {
-        return {
-          context,
-          html: renderToString(
-            this.pageDescriptorProvider.root(state, context)
-          )
-        };
-      }
-      return {
-        context,
-        html: this.renderToHtml(this.template ?? "", state, context)
-      };
-    };
-  }
-  createHandler(page, templateLoader) {
-    return async (serverRequest) => {
-      const { url, reply, query, params } = serverRequest;
-      const template = await templateLoader();
-      if (!template) {
-        throw new Error("Template not found");
-      }
-      const context = {
-        url,
-        params,
-        query,
-        // plugins
-        head: {},
-        onError: () => null
-      };
-      if (this.alepha.has(ServerLinksProvider)) {
-        const srv = this.alepha.get(ServerLinksProvider);
-        const schema = apiLinksResponseSchema;
-        context.links = this.alepha.parse(
-          schema,
-          await srv.getLinks({
-            user: serverRequest.user,
-            authorization: serverRequest.headers.authorization
-          })
-        );
-        this.alepha.context.set("links", context.links);
-      }
-      let target = page;
-      while (target) {
-        if (page.can && !page.can()) {
-          reply.status = 403;
-          reply.headers["content-type"] = "text/plain";
-          return "Forbidden";
-        }
-        target = target.parent;
-      }
-      await this.alepha.emit(
-        "react:server:render",
-        {
-          request: serverRequest,
-          pageRequest: context
-        },
-        {
-          log: false
-        }
-      );
-      this.serverTimingProvider.beginTiming("createLayers");
-      const state = await this.pageDescriptorProvider.createLayers(
-        page,
-        context
-      );
-      this.serverTimingProvider.endTiming("createLayers");
-      if (state.redirect) {
-        return reply.redirect(state.redirect);
-      }
-      reply.headers["content-type"] = "text/html";
-      reply.headers["cache-control"] = "no-store, no-cache, must-revalidate, proxy-revalidate";
-      reply.headers.pragma = "no-cache";
-      reply.headers.expires = "0";
-      if (page.cache && serverRequest.user) {
-        delete context.links;
-      }
-      const html = this.renderToHtml(template, state, context);
-      page.afterHandler?.(serverRequest);
-      return html;
-    };
-  }
-  renderToHtml(template, state, context) {
-    const element = this.pageDescriptorProvider.root(state, context);
-    this.serverTimingProvider.beginTiming("renderToString");
-    let app = "";
-    try {
-      app = renderToString(element);
-    } catch (error) {
-      this.log.error("Error during SSR", error);
-      app = renderToString(context.onError(error));
-    }
-    this.serverTimingProvider.endTiming("renderToString");
-    const hydrationData = {
-      links: context.links,
-      layers: state.layers.map((it) => ({
-        ...it,
-        error: it.error ? {
-          ...it.error,
-          name: it.error.name,
-          message: it.error.message,
-          stack: it.error.stack
-          // TODO: Hide stack in production ?
-        } : void 0,
-        index: void 0,
-        path: void 0,
-        element: void 0
-      }))
-    };
-    const script = `<script>window.__ssr=${JSON.stringify(hydrationData)}<\/script>`;
-    const response = {
-      html: template
-    };
-    this.fillTemplate(response, app, script);
-    if (context.head) {
-      response.html = this.headProvider.renderHead(response.html, context.head);
-    }
-    return response.html;
-  }
-  fillTemplate(response, app, script) {
-    if (this.ROOT_DIV_REGEX.test(response.html)) {
-      response.html = response.html.replace(
-        this.ROOT_DIV_REGEX,
-        (_match, beforeId, afterId) => {
-          return `<div${beforeId} id="${this.env.REACT_ROOT_ID}"${afterId}>${app}</div>`;
-        }
-      );
-    } else {
-      const bodyOpenTag = /<body([^>]*)>/i;
-      if (bodyOpenTag.test(response.html)) {
-        response.html = response.html.replace(bodyOpenTag, (match) => {
-          return `${match}
-<div id="${this.env.REACT_ROOT_ID}">${app}</div>`;
-        });
-      }
-    }
-    const bodyCloseTagRegex = /<\/body>/i;
-    if (bodyCloseTagRegex.test(response.html)) {
-      response.html = response.html.replace(
-        bodyCloseTagRegex,
-        `${script}
-</body>`
-      );
-    }
-  }
-}
+var ReactServerProvider = class {
+	log = $logger();
+	alepha = $inject(Alepha);
+	pageDescriptorProvider = $inject(PageDescriptorProvider);
+	serverStaticProvider = $inject(ServerStaticProvider);
+	serverRouterProvider = $inject(ServerRouterProvider);
+	headProvider = $inject(ServerHeadProvider);
+	serverTimingProvider = $inject(ServerTimingProvider);
+	env = $inject(envSchema);
+	ROOT_DIV_REGEX = new RegExp(`<div([^>]*)\\s+id=["']${this.env.REACT_ROOT_ID}["']([^>]*)>(.*?)<\\/div>`, "is");
+	onConfigure = $hook({
+		name: "configure",
+		handler: async () => {
+			const pages = this.alepha.getDescriptorValues($page);
+			const ssrEnabled = pages.length > 0 && this.env.REACT_SSR_ENABLED !== false;
+			this.alepha.state("ReactServerProvider.ssr", ssrEnabled);
+			for (const { key, instance, value } of pages) {
+				const name = value[OPTIONS].name ?? key;
+				instance[key].prerender = this.createRenderFunction(name, true);
+				if (this.alepha.isTest()) instance[key].render = this.createRenderFunction(name);
+			}
+			if (this.alepha.isServerless() === "vite") {
+				await this.configureVite(ssrEnabled);
+				return;
+			}
+			let root = "";
+			if (!this.alepha.isServerless()) {
+				root = this.getPublicDirectory();
+				if (!root) this.log.warn("Missing static files, static file server will be disabled");
+				else {
+					this.log.debug(`Using static files from: ${root}`);
+					await this.configureStaticServer(root);
+				}
+			}
+			if (ssrEnabled) {
+				await this.registerPages(async () => this.template);
+				this.log.info("SSR OK");
+				return;
+			}
+			this.log.info("SSR is disabled, use History API fallback");
+			await this.serverRouterProvider.route({
+				path: "*",
+				handler: async ({ url, reply }) => {
+					if (url.pathname.includes(".")) {
+						reply.headers["content-type"] = "text/plain";
+						reply.body = "Not Found";
+						reply.status = 404;
+						return;
+					}
+					reply.headers["content-type"] = "text/html";
+					return this.template;
+				}
+			});
+		}
+	});
+	get template() {
+		return this.alepha.state("ReactServerProvider.template");
+	}
+	async registerPages(templateLoader) {
+		for (const page of this.pageDescriptorProvider.getPages()) {
+			if (page.children?.length) continue;
+			this.log.debug(`+ ${page.match} -> ${page.name}`);
+			await this.serverRouterProvider.route({
+				...page,
+				schema: void 0,
+				method: "GET",
+				path: page.match,
+				handler: this.createHandler(page, templateLoader)
+			});
+		}
+	}
+	getPublicDirectory() {
+		const maybe = [join(process.cwd(), `dist/${this.env.REACT_SERVER_DIST}`), join(process.cwd(), this.env.REACT_SERVER_DIST)];
+		for (const it of maybe) if (existsSync(it)) return it;
+		return "";
+	}
+	async configureStaticServer(root) {
+		await this.serverStaticProvider.serve({
+			root,
+			path: this.env.REACT_SERVER_PREFIX
+		});
+	}
+	async configureVite(ssrEnabled) {
+		if (!ssrEnabled) return;
+		this.log.info("SSR (vite) OK");
+		const url = `http://${process.env.SERVER_HOST}:${process.env.SERVER_PORT}`;
+		await this.registerPages(() => fetch(`${url}/index.html`).then((it) => it.text()).catch(() => void 0));
+	}
+	/**
+	* For testing purposes, creates a render function that can be used.
+	*/
+	createRenderFunction(name, withIndex = false) {
+		return async (options = {}) => {
+			const page = this.pageDescriptorProvider.page(name);
+			const url = new URL(this.pageDescriptorProvider.url(name, options));
+			const context = {
+				url,
+				params: options.params ?? {},
+				query: options.query ?? {},
+				head: {},
+				onError: () => null
+			};
+			const state = await this.pageDescriptorProvider.createLayers(page, context);
+			if (!withIndex) return {
+				context,
+				html: renderToString(this.pageDescriptorProvider.root(state, context))
+			};
+			return {
+				context,
+				html: this.renderToHtml(this.template ?? "", state, context)
+			};
+		};
+	}
+	createHandler(page, templateLoader) {
+		return async (serverRequest) => {
+			const { url, reply, query, params } = serverRequest;
+			const template = await templateLoader();
+			if (!template) throw new Error("Template not found");
+			const context = {
+				url,
+				params,
+				query,
+				head: {},
+				onError: () => null
+			};
+			if (this.alepha.has(ServerLinksProvider)) {
+				const srv = this.alepha.get(ServerLinksProvider);
+				const schema = apiLinksResponseSchema;
+				context.links = this.alepha.parse(schema, await srv.getLinks({
+					user: serverRequest.user,
+					authorization: serverRequest.headers.authorization
+				}));
+				this.alepha.context.set("links", context.links);
+			}
+			let target = page;
+			while (target) {
+				if (page.can && !page.can()) {
+					reply.status = 403;
+					reply.headers["content-type"] = "text/plain";
+					return "Forbidden";
+				}
+				target = target.parent;
+			}
+			await this.alepha.emit("react:server:render", {
+				request: serverRequest,
+				pageRequest: context
+			}, { log: false });
+			this.serverTimingProvider.beginTiming("createLayers");
+			const state = await this.pageDescriptorProvider.createLayers(page, context);
+			this.serverTimingProvider.endTiming("createLayers");
+			if (state.redirect) return reply.redirect(state.redirect);
+			reply.headers["content-type"] = "text/html";
+			reply.headers["cache-control"] = "no-store, no-cache, must-revalidate, proxy-revalidate";
+			reply.headers.pragma = "no-cache";
+			reply.headers.expires = "0";
+			if (page.cache && serverRequest.user) delete context.links;
+			const html = this.renderToHtml(template, state, context);
+			page.afterHandler?.(serverRequest);
+			return html;
+		};
+	}
+	renderToHtml(template, state, context) {
+		const element = this.pageDescriptorProvider.root(state, context);
+		this.serverTimingProvider.beginTiming("renderToString");
+		let app = "";
+		try {
+			app = renderToString(element);
+		} catch (error) {
+			this.log.error("Error during SSR", error);
+			app = renderToString(context.onError(error));
+		}
+		this.serverTimingProvider.endTiming("renderToString");
+		const hydrationData = {
+			links: context.links,
+			layers: state.layers.map((it) => ({
+				...it,
+				error: it.error ? {
+					...it.error,
+					name: it.error.name,
+					message: it.error.message,
+					stack: it.error.stack
+				} : void 0,
+				index: void 0,
+				path: void 0,
+				element: void 0
+			}))
+		};
+		const script = `<script>window.__ssr=${JSON.stringify(hydrationData)}</script>`;
+		const response = { html: template };
+		this.fillTemplate(response, app, script);
+		if (context.head) response.html = this.headProvider.renderHead(response.html, context.head);
+		return response.html;
+	}
+	fillTemplate(response, app, script) {
+		if (this.ROOT_DIV_REGEX.test(response.html)) response.html = response.html.replace(this.ROOT_DIV_REGEX, (_match, beforeId, afterId) => {
+			return `<div${beforeId} id="${this.env.REACT_ROOT_ID}"${afterId}>${app}</div>`;
+		});
+		else {
+			const bodyOpenTag = /<body([^>]*)>/i;
+			if (bodyOpenTag.test(response.html)) response.html = response.html.replace(bodyOpenTag, (match) => {
+				return `${match}\n<div id="${this.env.REACT_ROOT_ID}">${app}</div>`;
+			});
+		}
+		const bodyCloseTagRegex = /<\/body>/i;
+		if (bodyCloseTagRegex.test(response.html)) response.html = response.html.replace(bodyCloseTagRegex, `${script}\n</body>`);
+	}
+};
 
-class RouterHookApi {
-  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/providers/BrowserHeadProvider.ts
+var BrowserHeadProvider = class {
+	renderHead(document, head) {
+		if (head.title) document.title = head.title;
+		if (head.bodyAttributes) for (const [key, value] of Object.entries(head.bodyAttributes)) if (value) document.body.setAttribute(key, value);
+		else document.body.removeAttribute(key);
+		if (head.htmlAttributes) for (const [key, value] of Object.entries(head.htmlAttributes)) if (value) document.documentElement.setAttribute(key, value);
+		else document.documentElement.removeAttribute(key);
+		if (head.meta) for (const [key, value] of Object.entries(head.meta)) {
+			const meta = document.querySelector(`meta[name="${key}"]`);
+			if (meta) meta.setAttribute("content", value.content);
+			else {
+				const newMeta = document.createElement("meta");
+				newMeta.setAttribute("name", key);
+				newMeta.setAttribute("content", value.content);
+				document.head.appendChild(newMeta);
+			}
+		}
+	}
+};
+
+//#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: {},
+			head: {},
+			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 });
+		} 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(HttpClient);
+	alepha = $inject(Alepha);
+	router = $inject(BrowserRouterProvider);
+	headProvider = $inject(BrowserHeadProvider);
+	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 });
+			if (context.head) this.headProvider.renderHead(this.document, context.head);
+			await this.alepha.emit("react:browser:render", {
+				state: this.state,
+				context,
+				hydration
+			});
+			window.addEventListener("popstate", () => {
+				this.render();
+			});
+		}
+	});
+	onTransitionEnd = $hook({
+		name: "react:transition:end",
+		handler: async ({ context }) => {
+			this.headProvider.renderHead(this.document, context.head);
+		}
+	});
+};
 
+//#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]
-  );
+	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 });
+	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);
-        });
-      }
-    }
-  };
+	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), []);
+	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(HttpClient).of();
+	return useInject(HttpClient).of();
 };
 
+//#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,
-    (queryParams2) => {
-      setQueryParams(queryParams2);
-      router.setQueryParams((data) => {
-        return { ...data, [key]: encode(ctx.alepha, schema, queryParams2) };
-      });
-    }
-  ];
+	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)));
+	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 {};
-  }
+	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: state2 }) => setState({ ...state2 })
-  });
-  return state;
+	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;
 };
 
-class AlephaReact {
-  name = "alepha.react";
-  $services = (alepha) => alepha.with(AlephaServer).with(AlephaServerCache).with(ReactServerProvider).with(PageDescriptorProvider);
-}
+//#endregion
+//#region src/index.ts
+/**
+* Alepha React Module
+*
+* Alepha React Module contains a router for client-side navigation and server-side rendering.
+* Routes can be defined using the `$page` descriptor.
+*
+* @see {@link $page}
+* @module alepha.react
+*/
+var AlephaReact = class {
+	name = "alepha.react";
+	$services = (alepha) => alepha.with(AlephaServer).with(AlephaServerCache).with(ReactServerProvider).with(PageDescriptorProvider);
+};
 __bind($page, AlephaReact);
 
-export { $page, AlephaReact, Link, PageDescriptorProvider, ReactBrowserProvider, ReactServerProvider, RouterContext, RouterHookApi, RouterLayerContext, useActive, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState };
+//#endregion
+export { $page, AlephaReact, ClientOnly_default as ClientOnly, ErrorBoundary_default as ErrorBoundary, Link_default as Link, NestedView_default as NestedView, PageDescriptorProvider, ReactBrowserProvider, ReactServerProvider, RedirectionError, RouterContext, RouterHookApi, RouterLayerContext, isPageRoute, useActive, useAlepha, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState };
+//# sourceMappingURL=index.js.map