@alepha/react 0.9.4 → 0.10.0

package/dist/index.js

@@ -1,21 +1,105 @@
 import { $env, $hook, $inject, $module, Alepha, AlephaError, Descriptor, KIND, createDescriptor, t } from "@alepha/core";
-import { AlephaServer, HttpClient, ServerRouterProvider, ServerTimingProvider } from "@alepha/server";
+import { AlephaServer, HttpClient, ServerProvider, ServerRouterProvider, ServerTimingProvider } from "@alepha/server";
 import { AlephaServerCache } from "@alepha/server-cache";
 import { AlephaServerLinks, LinkProvider, ServerLinksProvider } from "@alepha/server-links";
 import { $logger } from "@alepha/logger";
-import React, { StrictMode, createContext, createElement, useContext, useEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import React, { StrictMode, createContext, createElement, memo, use, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, 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 { DateTimeProvider } from "@alepha/datetime";
-import { createRoot, hydrateRoot } from "react-dom/client";
 import { RouterProvider } from "@alepha/router";
 
 //#region src/descriptors/$page.ts
 /**
 * Main descriptor for defining a React route in the application.
+*
+* The $page descriptor 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.int() }),
+*     query: t.object({ tab: t.optional(t.string()) })
+*   },
+*   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 createDescriptor(PageDescriptor, options);
@@ -35,7 +119,10 @@ var PageDescriptor = class extends Descriptor {
 	* Only valid for server-side rendering, it will throw an error if called on the client-side.
 	*/
 	async render(options) {
-		throw new Error("render method is not implemented in this environment");
+		throw new AlephaError("render() method is not implemented in this environment");
+	}
+	async fetch(options) {
+		throw new AlephaError("fetch() method is not implemented in this environment");
 	}
 	match(url) {
 		return false;
@@ -64,7 +151,6 @@ const ClientOnly = (props) => {
 	if (props.disabled) return props.children;
 	return mounted ? props.children : props.fallback;
 };
-var ClientOnly_default = ClientOnly;
 
 //#endregion
 //#region src/components/ErrorViewer.tsx
@@ -172,7 +258,6 @@ const ErrorViewer = ({ error, alepha }) => {
 		})] })]
 	});
 };
-var ErrorViewer_default = ErrorViewer;
 const ErrorViewerProduction = () => {
 	const styles = {
 		container: {
@@ -248,7 +333,7 @@ const AlephaContext = createContext(void 0);
 *
 * - alepha.state() for state management
 * - alepha.inject() for dependency injection
-* - alepha.emit() for event handling
+* - alepha.events.emit() for event handling
 * etc...
 */
 const useAlepha = () => {
@@ -266,19 +351,55 @@ const useRouterEvents = (opts = {}, deps = []) => {
 	const alepha = useAlepha();
 	useEffect(() => {
 		if (!alepha.isBrowser()) return;
+		const cb = (callback) => {
+			if (typeof callback === "function") return { callback };
+			return callback;
+		};
 		const subs = [];
 		const onBegin = opts.onBegin;
 		const onEnd = opts.onEnd;
 		const onError = opts.onError;
-		if (onBegin) subs.push(alepha.on("react:transition:begin", { callback: onBegin }));
-		if (onEnd) subs.push(alepha.on("react:transition:end", { callback: onEnd }));
-		if (onError) subs.push(alepha.on("react:transition:error", { callback: onError }));
+		const onSuccess = opts.onSuccess;
+		if (onBegin) subs.push(alepha.events.on("react:transition:begin", cb(onBegin)));
+		if (onEnd) subs.push(alepha.events.on("react:transition:end", cb(onEnd)));
+		if (onError) subs.push(alepha.events.on("react:transition:error", cb(onError)));
+		if (onSuccess) subs.push(alepha.events.on("react:transition:success", cb(onSuccess)));
 		return () => {
 			for (const sub of subs) sub();
 		};
 	}, deps);
 };
 
+//#endregion
+//#region src/hooks/useStore.ts
+/**
+* Hook to access and mutate the Alepha state.
+*/
+const useStore = (key, defaultValue) => {
+	const alepha = useAlepha();
+	useMemo(() => {
+		if (defaultValue != null && alepha.state.get(key) == null) alepha.state.set(key, defaultValue);
+	}, [defaultValue]);
+	const [state, setState] = useState(alepha.state.get(key));
+	useEffect(() => {
+		if (!alepha.isBrowser()) return;
+		return alepha.events.on("state:mutate", (ev) => {
+			if (ev.key === key) setState(ev.value);
+		});
+	}, []);
+	return [state, (value) => {
+		alepha.state.set(key, value);
+	}];
+};
+
+//#endregion
+//#region src/hooks/useRouterState.ts
+const useRouterState = () => {
+	const [state] = useStore("react.router.state");
+	if (!state) throw new AlephaError("Missing react router state");
+	return state;
+};
+
 //#endregion
 //#region src/components/ErrorBoundary.tsx
 /**
@@ -308,7 +429,6 @@ var ErrorBoundary = class extends React.Component {
 		return this.props.children;
 	}
 };
-var ErrorBoundary_default = ErrorBoundary;
 
 //#endregion
 //#region src/components/NestedView.tsx
@@ -319,7 +439,7 @@ var ErrorBoundary_default = ErrorBoundary;
 *
 * @example
 * ```tsx
-* import { NestedView } from "@alepha/react";
+* import { NestedView } from "alepha/react";
 *
 * class App {
 *   parent = $page({
@@ -334,17 +454,69 @@ var ErrorBoundary_default = ErrorBoundary;
 * ```
 */
 const NestedView = (props) => {
-	const layer = useContext(RouterLayerContext);
-	const index = layer?.index ?? 0;
-	const alepha = useAlepha();
-	const state = alepha.state("react.router.state");
-	if (!state) throw new Error("<NestedView/> must be used inside a RouterLayerContext.");
+	const index = use(RouterLayerContext)?.index ?? 0;
+	const state = useRouterState();
 	const [view, setView] = useState(state.layers[index]?.element);
-	useRouterEvents({ onEnd: ({ state: state$1 }) => {
-		if (!state$1.layers[index]?.cache) setView(state$1.layers[index]?.element);
-	} }, []);
-	const element = view ?? props.children ?? null;
-	return /* @__PURE__ */ jsx(ErrorBoundary_default, {
+	const [animation, setAnimation] = useState("");
+	const animationExitDuration = useRef(0);
+	const animationExitNow = useRef(0);
+	useRouterEvents({
+		onBegin: async ({ previous, state: state$1 }) => {
+			const layer = previous.layers[index];
+			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("");
+			}
+		},
+		onEnd: 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
+	});
+	return /* @__PURE__ */ jsx(ErrorBoundary, {
 		fallback: (error) => {
 			const result = state.onError(error, state);
 			if (result instanceof Redirection) return "Redirection inside ErrorBoundary is not allowed.";
@@ -353,7 +525,37 @@ const NestedView = (props) => {
 		children: element
 	});
 };
-var NestedView_default = NestedView;
+var NestedView_default = memo(NestedView);
+function parseAnimation(animationLike, state, type = "enter") {
+	if (!animationLike) return void 0;
+	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") {
+			const timing$1 = typeof anim === "object" ? anim.timing ?? "" : "";
+			return {
+				duration,
+				animation: `${duration}ms ${timing$1} ${name}`
+			};
+		}
+		const timing = typeof anim === "object" ? anim.timing ?? "" : "";
+		return {
+			duration,
+			animation: `${duration}ms ${timing} ${name}`
+		};
+	}
+	return void 0;
+}
 
 //#endregion
 //#region src/components/NotFound.tsx
@@ -419,6 +621,14 @@ var ReactPageProvider = class {
 		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.parse(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.
@@ -438,6 +648,7 @@ var ReactPageProvider = class {
 			const route$1 = it.route;
 			const config = {};
 			try {
+				this.convertStringObjectToObject(route$1.schema?.query, state.query);
 				config.query = route$1.schema?.query ? this.alepha.parse(route$1.schema.query, state.query) : {};
 			} catch (e) {
 				it.error = e;
@@ -564,6 +775,7 @@ var ReactPageProvider = class {
 		}
 	}
 	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) {
 			const component = await page.lazy();
 			return createElement(component.default, props);
@@ -572,7 +784,7 @@ var ReactPageProvider = class {
 		return void 0;
 	}
 	renderError(error) {
-		return createElement(ErrorViewer_default, {
+		return createElement(ErrorViewer, {
 			error,
 			alepha: this.alepha
 		});
@@ -598,7 +810,7 @@ var ReactPageProvider = class {
 	}
 	renderView(index, path, view, page) {
 		view ??= this.renderEmptyView();
-		const element = page.client ? createElement(ClientOnly_default, typeof page.client === "object" ? page.client : {}, view) : view;
+		const element = page.client ? createElement(ClientOnly, typeof page.client === "object" ? page.client : {}, view) : view;
 		return createElement(RouterLayerContext.Provider, { value: {
 			index,
 			path
@@ -692,18 +904,36 @@ var ReactServerProvider = class {
 	log = $logger();
 	alepha = $inject(Alepha);
 	pageApi = $inject(ReactPageProvider);
+	serverProvider = $inject(ServerProvider);
 	serverStaticProvider = $inject(ServerStaticProvider);
 	serverRouterProvider = $inject(ServerRouterProvider);
 	serverTimingProvider = $inject(ServerTimingProvider);
 	env = $env(envSchema$1);
 	ROOT_DIV_REGEX = new RegExp(`<div([^>]*)\\s+id=["']${this.env.REACT_ROOT_ID}["']([^>]*)>(.*?)<\\/div>`, "is");
+	preprocessedTemplate = null;
 	onConfigure = $hook({
 		on: "configure",
 		handler: async () => {
 			const pages = this.alepha.descriptors($page);
 			const ssrEnabled = pages.length > 0 && this.env.REACT_SSR_ENABLED !== false;
-			this.alepha.state("react.server.ssr", ssrEnabled);
-			for (const page of pages) page.render = this.createRenderFunction(page.name);
+			this.alepha.state.set("react.server.ssr", ssrEnabled);
+			for (const page of pages) {
+				page.render = this.createRenderFunction(page.name);
+				page.fetch = async (options) => {
+					const response = await fetch(`${this.serverProvider.hostname}/${page.pathname(options)}`);
+					const html = await response.text();
+					if (options?.html) return {
+						html,
+						response
+					};
+					const match = html.match(this.ROOT_DIV_REGEX);
+					if (match) return {
+						html: match[3],
+						response
+					};
+					throw new AlephaError("Invalid HTML response");
+				};
+			}
 			if (this.alepha.isServerless() === "vite") {
 				await this.configureVite(ssrEnabled);
 				return;
@@ -742,6 +972,8 @@ var ReactServerProvider = class {
 		return this.alepha.env.REACT_SERVER_TEMPLATE ?? "<!DOCTYPE html><html lang='en'><head></head><body></body></html>";
 	}
 	async registerPages(templateLoader) {
+		const template = await templateLoader();
+		if (template) this.preprocessedTemplate = this.preprocessTemplate(template);
 		for (const page of this.pageApi.getPages()) {
 			if (page.children?.length) continue;
 			this.log.debug(`+ ${page.match} -> ${page.name}`);
@@ -783,27 +1015,37 @@ var ReactServerProvider = class {
 				params: options.params ?? {},
 				query: options.query ?? {},
 				onError: () => null,
-				layers: []
+				layers: [],
+				meta: {}
 			};
 			const state = entry;
 			this.log.trace("Rendering", { url });
-			await this.alepha.emit("react:server:render:begin", { state });
+			await this.alepha.events.emit("react:server:render:begin", { state });
 			const { redirect } = await this.pageApi.createLayers(page, state);
-			if (redirect) throw new AlephaError("Redirection is not supported in this context");
+			if (redirect) return {
+				state,
+				html: "",
+				redirect
+			};
 			if (!withIndex && !options.html) {
-				this.alepha.state("react.router.state", state);
+				this.alepha.state.set("react.router.state", state);
 				return {
 					state,
 					html: renderToString(this.pageApi.root(state))
 				};
 			}
-			const html = this.renderToHtml(this.template ?? "", state, options.hydration);
-			if (html instanceof Redirection) throw new Error("Redirection is not supported in this context");
+			const template = this.template ?? "";
+			const html = this.renderToHtml(template, state, options.hydration);
+			if (html instanceof Redirection) return {
+				state,
+				html: "",
+				redirect
+			};
 			const result = {
 				state,
 				html
 			};
-			await this.alepha.emit("react:server:render:end", result);
+			await this.alepha.events.emit("react:server:render:end", result);
 			return result;
 		};
 	}
@@ -821,7 +1063,7 @@ var ReactServerProvider = class {
 				layers: []
 			};
 			const state = entry;
-			if (this.alepha.has(ServerLinksProvider)) this.alepha.state("api", await this.alepha.inject(ServerLinksProvider).getUserApiLinks({
+			if (this.alepha.has(ServerLinksProvider)) this.alepha.state.set("api", await this.alepha.inject(ServerLinksProvider).getUserApiLinks({
 				user: serverRequest.user,
 				authorization: serverRequest.headers.authorization
 			}));
@@ -834,7 +1076,7 @@ var ReactServerProvider = class {
 				}
 				target = target.parent;
 			}
-			await this.alepha.emit("react:server:render:begin", {
+			await this.alepha.events.emit("react:server:render:begin", {
 				request: serverRequest,
 				state
 			});
@@ -856,7 +1098,7 @@ var ReactServerProvider = class {
 				state,
 				html
 			};
-			await this.alepha.emit("react:server:render:end", event);
+			await this.alepha.events.emit("react:server:render:end", event);
 			route.onServerResponse?.(serverRequest);
 			this.log.trace("Page rendered", { name: route.name });
 			return event.html;
@@ -864,7 +1106,7 @@ var ReactServerProvider = class {
 	}
 	renderToHtml(template, state, hydration = true) {
 		const element = this.pageApi.root(state);
-		this.alepha.state("react.router.state", state);
+		this.alepha.state.set("react.router.state", state);
 		this.serverTimingProvider.beginTiming("renderToString");
 		let app = "";
 		try {
@@ -902,18 +1144,48 @@ var ReactServerProvider = class {
 		}
 		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>`;
-			});
+	preprocessTemplate(template) {
+		const bodyCloseMatch = template.match(/<\/body>/i);
+		const bodyCloseIndex = bodyCloseMatch?.index ?? template.length;
+		const beforeScript = template.substring(0, bodyCloseIndex);
+		const afterScript = template.substring(bodyCloseIndex);
+		const rootDivMatch = beforeScript.match(this.ROOT_DIV_REGEX);
+		if (rootDivMatch) {
+			const beforeDiv = beforeScript.substring(0, rootDivMatch.index);
+			const afterDivStart = rootDivMatch.index + rootDivMatch[0].length;
+			const afterDiv = beforeScript.substring(afterDivStart);
+			const beforeApp = `${beforeDiv}<div${rootDivMatch[1]} id="${this.env.REACT_ROOT_ID}"${rootDivMatch[2]}>`;
+			const afterApp = `</div>${afterDiv}`;
+			return {
+				beforeApp,
+				afterApp,
+				beforeScript: "",
+				afterScript
+			};
+		}
+		const bodyMatch = beforeScript.match(/<body([^>]*)>/i);
+		if (bodyMatch) {
+			const beforeBody = beforeScript.substring(0, bodyMatch.index + bodyMatch[0].length);
+			const afterBody = beforeScript.substring(bodyMatch.index + bodyMatch[0].length);
+			const beforeApp = `${beforeBody}<div id="${this.env.REACT_ROOT_ID}">`;
+			const afterApp = `</div>${afterBody}`;
+			return {
+				beforeApp,
+				afterApp,
+				beforeScript: "",
+				afterScript
+			};
 		}
-		const bodyCloseTagRegex = /<\/body>/i;
-		if (bodyCloseTagRegex.test(response.html)) response.html = response.html.replace(bodyCloseTagRegex, `${script}</body>`);
+		return {
+			beforeApp: `<div id="${this.env.REACT_ROOT_ID}">`,
+			afterApp: `</div>`,
+			beforeScript,
+			afterScript
+		};
+	}
+	fillTemplate(response, app, script) {
+		if (!this.preprocessedTemplate) this.preprocessedTemplate = this.preprocessTemplate(response.html);
+		response.html = this.preprocessedTemplate.beforeApp + app + this.preprocessedTemplate.afterApp + script + this.preprocessedTemplate.afterScript;
 	}
 };
 
@@ -935,17 +1207,21 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
 			});
 		}
 	});
-	async transition(url, previous = []) {
+	async transition(url, previous = [], meta = {}) {
 		const { pathname, search } = url;
 		const entry = {
 			url,
 			query: {},
 			params: {},
 			layers: [],
-			onError: () => null
+			onError: () => null,
+			meta
 		};
 		const state = entry;
-		await this.alepha.emit("react:transition:begin", { state });
+		await this.alepha.events.emit("react:transition:begin", {
+			previous: this.alepha.state.get("react.router.state"),
+			state
+		});
 		try {
 			const { route, params } = this.match(pathname);
 			const query = {};
@@ -962,7 +1238,7 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
 				index: 0,
 				path: "/"
 			});
-			await this.alepha.emit("react:transition:success", { state });
+			await this.alepha.events.emit("react:transition:success", { state });
 		} catch (e) {
 			this.log.error("Transition has failed", e);
 			state.layers = [{
@@ -971,7 +1247,7 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
 				index: 0,
 				path: "/"
 			}];
-			await this.alepha.emit("react:transition:error", {
+			await this.alepha.events.emit("react:transition:error", {
 				error: e,
 				state
 			});
@@ -980,8 +1256,8 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
 			const layer = previous[i];
 			if (state.layers[i]?.name !== layer.name) this.pageApi.page(layer.name)?.onLeave?.();
 		}
-		await this.alepha.emit("react:transition:end", { state });
-		this.alepha.state("react.router.state", state);
+		this.alepha.state.set("react.router.state", state);
+		await this.alepha.events.emit("react:transition:end", { state });
 	}
 	root(state) {
 		return this.pageApi.root(state);
@@ -998,7 +1274,6 @@ var ReactBrowserProvider = class {
 	alepha = $inject(Alepha);
 	router = $inject(ReactBrowserRouterProvider);
 	dateTimeProvider = $inject(DateTimeProvider);
-	root;
 	options = { scrollRestoration: "top" };
 	getRootElement() {
 		const root = this.document.getElementById(this.env.REACT_ROOT_ID);
@@ -1010,7 +1285,7 @@ var ReactBrowserProvider = class {
 	}
 	transitioning;
 	get state() {
-		return this.alepha.state("react.router.state");
+		return this.alepha.state.get("react.router.state");
 	}
 	/**
 	* Accessor for Document DOM API.
@@ -1074,7 +1349,8 @@ var ReactBrowserProvider = class {
 		});
 		await this.render({
 			url,
-			previous: options.force ? [] : this.state.layers
+			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);
@@ -1091,7 +1367,7 @@ var ReactBrowserProvider = class {
 			from: this.state?.url.pathname
 		};
 		this.log.debug("Transitioning...", { to: url });
-		const redirect = await this.router.transition(new URL(`http://localhost${url}`), previous);
+		const redirect = await this.router.transition(new URL(`http://localhost${url}`), previous, options.meta);
 		if (redirect) {
 			this.log.info("Redirecting to", { redirect });
 			return await this.render({ url: redirect });
@@ -1113,7 +1389,7 @@ var ReactBrowserProvider = class {
 	onTransitionEnd = $hook({
 		on: "react:transition:end",
 		handler: () => {
-			if (this.options.scrollRestoration === "top" && typeof window !== "undefined") {
+			if (this.options.scrollRestoration === "top" && typeof window !== "undefined" && !this.alepha.isTest()) {
 				this.log.trace("Restoring scroll position to top");
 				window.scrollTo(0, 0);
 			}
@@ -1125,18 +1401,16 @@ var ReactBrowserProvider = class {
 			const hydration = this.getHydrationState();
 			const previous = hydration?.layers ?? [];
 			if (hydration) {
-				for (const [key, value] of Object.entries(hydration)) if (key !== "layers") this.alepha.state(key, value);
+				for (const [key, value] of Object.entries(hydration)) if (key !== "layers") this.alepha.state.set(key, value);
 			}
 			await this.render({ previous });
 			const element = this.router.root(this.state);
-			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");
-			}
+			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 });
@@ -1152,7 +1426,7 @@ var ReactRouter = class {
 	alepha = $inject(Alepha);
 	pageApi = $inject(ReactPageProvider);
 	get state() {
-		return this.alepha.state("react.router.state");
+		return this.alepha.state.get("react.router.state");
 	}
 	get pages() {
 		return this.pageApi.getPages();
@@ -1275,44 +1549,12 @@ const useRouter = () => {
 //#region src/components/Link.tsx
 const Link = (props) => {
 	const router = useRouter();
-	const { to,...anchorProps } = props;
 	return /* @__PURE__ */ jsx("a", {
-		...router.anchor(to),
-		...anchorProps,
+		...props,
+		...router.anchor(props.href),
 		children: props.children
 	});
 };
-var Link_default = Link;
-
-//#endregion
-//#region src/hooks/useStore.ts
-/**
-* Hook to access and mutate the Alepha state.
-*/
-const useStore = (key, defaultValue) => {
-	const alepha = useAlepha();
-	useMemo(() => {
-		if (defaultValue != null && alepha.state(key) == null) alepha.state(key, defaultValue);
-	}, [defaultValue]);
-	const [state, setState] = useState(alepha.state(key));
-	useEffect(() => {
-		if (!alepha.isBrowser()) return;
-		return alepha.on("state:mutate", (ev) => {
-			if (ev.key === key) setState(ev.value);
-		});
-	}, []);
-	return [state, (value) => {
-		alepha.state(key, value);
-	}];
-};
-
-//#endregion
-//#region src/hooks/useRouterState.ts
-const useRouterState = () => {
-	const [state] = useStore("react.router.state");
-	if (!state) throw new AlephaError("Missing react router state");
-	return state;
-};
 
 //#endregion
 //#region src/hooks/useActive.ts
@@ -1370,7 +1612,7 @@ const useQueryParams = (schema, options = {}) => {
 	const key = options.key ?? "q";
 	const router = useRouter();
 	const querystring = router.query[key];
-	const [queryParams, setQueryParams] = useState(decode(alepha, schema, router.query[key]));
+	const [queryParams = {}, setQueryParams] = useState(decode(alepha, schema, router.query[key]));
 	useEffect(() => {
 		setQueryParams(decode(alepha, schema, querystring));
 	}, [querystring]);
@@ -1390,8 +1632,8 @@ const encode = (alepha, schema, data) => {
 const decode = (alepha, schema, data) => {
 	try {
 		return alepha.parse(schema, JSON.parse(atob(decodeURIComponent(data))));
-	} catch (_error) {
-		return {};
+	} catch {
+		return;
 	}
 };
 
@@ -1454,5 +1696,5 @@ const AlephaReact = $module({
 });
 
 //#endregion
-export { $page, AlephaContext, AlephaReact, ClientOnly_default as ClientOnly, ErrorBoundary_default as ErrorBoundary, ErrorViewer_default as ErrorViewer, Link_default as Link, NestedView_default as NestedView, NotFoundPage as NotFound, PageDescriptor, ReactBrowserProvider, ReactPageProvider, ReactRouter, ReactServerProvider, Redirection, RouterLayerContext, isPageRoute, ssrSchemaLoading, useActive, useAlepha, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState, useSchema, useStore };
+export { $page, AlephaContext, AlephaReact, ClientOnly, ErrorBoundary, ErrorViewer, Link, NestedView_default as NestedView, NotFoundPage as NotFound, PageDescriptor, ReactBrowserProvider, ReactPageProvider, ReactRouter, ReactServerProvider, Redirection, RouterLayerContext, isPageRoute, ssrSchemaLoading, useActive, useAlepha, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState, useSchema, useStore };
 //# sourceMappingURL=index.js.map