@alepha/react 0.11.11 → 0.12.0

package/dist/form/index.cjs

@@ -0,0 +1,2054 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let alepha = require("alepha");
+let alepha_datetime = require("alepha/datetime");
+let alepha_server = require("alepha/server");
+let alepha_server_cache = require("alepha/server/cache");
+let alepha_server_links = require("alepha/server/links");
+let alepha_logger = require("alepha/logger");
+let react = require("react");
+react = __toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let node_fs = require("node:fs");
+let node_path = require("node:path");
+let alepha_server_static = require("alepha/server/static");
+let react_dom_server = require("react-dom/server");
+let alepha_router = require("alepha/router");
+
+//#region src/core/services/ReactPageService.ts
+var ReactPageService = class {
+	fetch(pathname, options = {}) {
+		throw new alepha.AlephaError("Fetch is not available for this environment.");
+	}
+	render(name, options = {}) {
+		throw new alepha.AlephaError("Render is not available for this environment.");
+	}
+};
+
+//#endregion
+//#region src/core/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.text()) })
+*   },
+*   resolve: async ({ params }) => {
+*     const user = await userApi.getUser(params.id);
+*     return { user };
+*   },
+*   lazy: () => import("./UserProfile.tsx")
+* });
+* ```
+*
+* @example Nested routing with error handling
+* ```typescript
+* const projectSection = $page({
+*   path: "/projects/:id",
+*   children: () => [projectBoard, projectSettings],
+*   resolve: async ({ params }) => {
+*     const project = await projectApi.get(params.id);
+*     return { project };
+*   },
+*   errorHandler: (error) => {
+*     if (HttpError.is(error, 404)) {
+*       return <ProjectNotFound />;
+*     }
+*   }
+* });
+* ```
+*
+* @example Static generation with caching
+* ```typescript
+* const blogPost = $page({
+*   path: "/blog/:slug",
+*   static: {
+*     entries: posts.map(p => ({ params: { slug: p.slug } }))
+*   },
+*   resolve: async ({ params }) => {
+*     const post = await loadPost(params.slug);
+*     return { post };
+*   }
+* });
+* ```
+*/
+const $page = (options) => {
+	return (0, alepha.createDescriptor)(PageDescriptor, options);
+};
+var PageDescriptor = class extends alepha.Descriptor {
+	reactPageService = (0, alepha.$inject)(ReactPageService);
+	onInit() {
+		if (this.options.static) this.options.cache ??= { store: {
+			provider: "memory",
+			ttl: [1, "week"]
+		} };
+	}
+	get name() {
+		return this.options.name ?? this.config.propertyKey;
+	}
+	/**
+	* For testing or build purposes.
+	*
+	* This will render the page (HTML layout included or not) and return the HTML + context.
+	* Only valid for server-side rendering, it will throw an error if called on the client-side.
+	*/
+	async render(options) {
+		return this.reactPageService.render(this.name, options);
+	}
+	async fetch(options) {
+		return this.reactPageService.fetch(this.options.path || "", options);
+	}
+	match(url) {
+		return false;
+	}
+	pathname(config) {
+		return this.options.path || "";
+	}
+};
+$page[alepha.KIND] = PageDescriptor;
+
+//#endregion
+//#region src/core/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] = (0, react.useState)(false);
+	(0, react.useEffect)(() => setMounted(true), []);
+	if (props.disabled) return props.children;
+	return mounted ? props.children : props.fallback;
+};
+var ClientOnly_default = ClientOnly;
+
+//#endregion
+//#region src/core/components/ErrorViewer.tsx
+const ErrorViewer = ({ error, alepha: alepha$1 }) => {
+	const [expanded, setExpanded] = (0, react.useState)(false);
+	if (alepha$1.isProduction()) return /* @__PURE__ */ (0, react_jsx_runtime.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: "10px"
+		},
+		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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: styles.container,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: styles.heading,
+				children: "🔥 Error"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: styles.name,
+				children: error.name
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: styles.message,
+				children: error.message
+			})
+		] }), stackLines.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: styles.sectionHeader,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Stack trace" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: () => copyToClipboard(error.stack),
+				style: styles.copyButton,
+				children: "Copy all"
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("pre", {
+			style: styles.stackContainer,
+			children: [(expanded ? stackLines : previewLines).map((line, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: line }, i)), !expanded && hiddenLineCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: styles.container,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: styles.heading,
+			children: "🚨 An error occurred"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: styles.message,
+			children: "Something went wrong. Please try again later."
+		})]
+	});
+};
+
+//#endregion
+//#region src/core/contexts/RouterLayerContext.ts
+const RouterLayerContext = (0, react.createContext)(void 0);
+
+//#endregion
+//#region src/core/errors/Redirection.ts
+/**
+* Used for Redirection during the page loading.
+*
+* Depends on the context, it can be thrown or just returned.
+*/
+var Redirection = class extends Error {
+	redirect;
+	constructor(redirect) {
+		super("Redirection");
+		this.redirect = redirect;
+	}
+};
+
+//#endregion
+//#region src/core/contexts/AlephaContext.ts
+const AlephaContext = (0, react.createContext)(void 0);
+
+//#endregion
+//#region src/core/hooks/useAlepha.ts
+/**
+* Main Alepha hook.
+*
+* It provides access to the Alepha instance within a React component.
+*
+* With Alepha, you can access the core functionalities of the framework:
+*
+* - alepha.state() for state management
+* - alepha.inject() for dependency injection
+* - alepha.events.emit() for event handling
+* etc...
+*/
+const useAlepha = () => {
+	const alepha$1 = (0, react.useContext)(AlephaContext);
+	if (!alepha$1) throw new alepha.AlephaError("Hook 'useAlepha()' must be used within an AlephaContext.Provider");
+	return alepha$1;
+};
+
+//#endregion
+//#region src/core/hooks/useEvents.ts
+/**
+* Allow subscribing to multiple Alepha events. See {@link Hooks} for available events.
+*
+* useEvents is fully typed to ensure correct event callback signatures.
+*
+* @example
+* ```tsx
+* useEvents(
+*   {
+*     "react:transition:begin": (ev) => {
+*       console.log("Transition began to:", ev.to);
+*     },
+*     "react:transition:error": {
+*       priority: "first",
+*       callback: (ev) => {
+*         console.error("Transition error:", ev.error);
+*       },
+*     },
+*   },
+*   [],
+* );
+* ```
+*/
+const useEvents = (opts, deps) => {
+	const alepha$1 = useAlepha();
+	(0, react.useEffect)(() => {
+		if (!alepha$1.isBrowser()) return;
+		const subs = [];
+		for (const [name, hook] of Object.entries(opts)) subs.push(alepha$1.events.on(name, hook));
+		return () => {
+			for (const clear of subs) clear();
+		};
+	}, deps);
+};
+
+//#endregion
+//#region src/core/hooks/useStore.ts
+function useStore(target, defaultValue) {
+	const alepha$1 = useAlepha();
+	(0, react.useMemo)(() => {
+		if (defaultValue != null && alepha$1.state.get(target) == null) alepha$1.state.set(target, defaultValue);
+	}, [defaultValue]);
+	const [state, setState] = (0, react.useState)(alepha$1.state.get(target));
+	(0, react.useEffect)(() => {
+		if (!alepha$1.isBrowser()) return;
+		const key = target instanceof alepha.Atom ? target.key : target;
+		return alepha$1.events.on("state:mutate", (ev) => {
+			if (ev.key === key) setState(ev.value);
+		});
+	}, []);
+	return [state, (value) => {
+		alepha$1.state.set(target, value);
+	}];
+}
+
+//#endregion
+//#region src/core/hooks/useRouterState.ts
+const useRouterState = () => {
+	const [state] = useStore("alepha.react.router.state");
+	if (!state) throw new alepha.AlephaError("Missing react router state");
+	return state;
+};
+
+//#endregion
+//#region src/core/components/ErrorBoundary.tsx
+/**
+* A reusable error boundary for catching rendering errors
+* in any part of the React component tree.
+*/
+var ErrorBoundary = class extends react.default.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/core/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 index = (0, react.use)(RouterLayerContext)?.index ?? 0;
+	const state = useRouterState();
+	const [view, setView] = (0, react.useState)(state.layers[index]?.element);
+	const [animation, setAnimation] = (0, react.useState)("");
+	const animationExitDuration = (0, react.useRef)(0);
+	const animationExitNow = (0, react.useRef)(0);
+	useEvents({
+		"react:transition:begin": 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("");
+			}
+		},
+		"react:transition:end": async ({ state: state$1 }) => {
+			const layer = state$1.layers[index];
+			if (animationExitNow.current) {
+				const duration = animationExitDuration.current;
+				const diff = Date.now() - animationExitNow.current;
+				if (diff < duration) await new Promise((resolve) => setTimeout(resolve, duration - diff));
+			}
+			if (!layer?.cache) {
+				setView(layer?.element);
+				const animationEnter = parseAnimation(layer?.route?.animation, state$1, "enter");
+				if (animationEnter) setAnimation(animationEnter.animation);
+				else setAnimation("");
+			}
+		}
+	}, []);
+	let element = view ?? props.children ?? null;
+	if (animation) element = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			display: "flex",
+			flex: 1,
+			height: "100%",
+			width: "100%",
+			position: "relative",
+			overflow: "hidden"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				height: "100%",
+				width: "100%",
+				display: "flex",
+				animation
+			},
+			children: element
+		})
+	});
+	if (props.errorBoundary === false) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: element });
+	if (props.errorBoundary) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBoundary_default, {
+		fallback: props.errorBoundary,
+		children: element
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBoundary_default, {
+		fallback: (error) => {
+			const result = state.onError(error, state);
+			if (result instanceof Redirection) return "Redirection inside ErrorBoundary is not allowed.";
+			return result;
+		},
+		children: element
+	});
+};
+var NestedView_default = (0, react.memo)(NestedView);
+function parseAnimation(animationLike, state, type = "enter") {
+	if (!animationLike) return;
+	const DEFAULT_DURATION = 300;
+	const animation = typeof animationLike === "function" ? animationLike(state) : animationLike;
+	if (typeof animation === "string") {
+		if (type === "exit") return;
+		return {
+			duration: DEFAULT_DURATION,
+			animation: `${DEFAULT_DURATION}ms ${animation}`
+		};
+	}
+	if (typeof animation === "object") {
+		const anim = animation[type];
+		const duration = typeof anim === "object" ? anim.duration ?? DEFAULT_DURATION : DEFAULT_DURATION;
+		const name = typeof anim === "object" ? anim.name : anim;
+		if (type === "exit") return {
+			duration,
+			animation: `${duration}ms ${typeof anim === "object" ? anim.timing ?? "" : ""} ${name}`
+		};
+		return {
+			duration,
+			animation: `${duration}ms ${typeof anim === "object" ? anim.timing ?? "" : ""} ${name}`
+		};
+	}
+}
+
+//#endregion
+//#region src/core/components/NotFound.tsx
+function NotFoundPage(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			height: "100vh",
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "center",
+			alignItems: "center",
+			textAlign: "center",
+			fontFamily: "sans-serif",
+			padding: "1rem",
+			...props.style
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+			style: {
+				fontSize: "1rem",
+				marginBottom: "0.5rem"
+			},
+			children: "404 - This page does not exist"
+		})
+	});
+}
+
+//#endregion
+//#region src/core/providers/ReactPageProvider.ts
+const envSchema$2 = alepha.t.object({ REACT_STRICT_MODE: alepha.t.boolean({ default: true }) });
+var ReactPageProvider = class {
+	log = (0, alepha_logger.$logger)();
+	env = (0, alepha.$env)(envSchema$2);
+	alepha = (0, alepha.$inject)(alepha.Alepha);
+	pages = [];
+	getPages() {
+		return this.pages;
+	}
+	getConcretePages() {
+		const pages = [];
+		for (const page of this.pages) {
+			if (page.children && page.children.length > 0) continue;
+			const fullPath = this.pathname(page.name);
+			if (fullPath.includes(":") || fullPath.includes("*")) {
+				if (typeof page.static === "object") {
+					const entries = page.static.entries;
+					if (entries && entries.length > 0) for (const entry of entries) {
+						const params = entry.params;
+						const path = this.compile(page.path ?? "", params);
+						if (!path.includes(":") && !path.includes("*")) pages.push({
+							...page,
+							name: params[Object.keys(params)[0]],
+							path,
+							...entry
+						});
+					}
+				}
+				continue;
+			}
+			pages.push(page);
+		}
+		return pages;
+	}
+	page(name) {
+		for (const page of this.pages) if (page.name === name) return page;
+		throw new alepha.AlephaError(`Page '${name}' not found`);
+	}
+	pathname(name, options = {}) {
+		const page = this.page(name);
+		if (!page) throw new Error(`Page ${name} not found`);
+		let url = page.path ?? "";
+		let parent = page.parent;
+		while (parent) {
+			url = `${parent.path ?? ""}/${url}`;
+			parent = parent.parent;
+		}
+		url = this.compile(url, options.params ?? {});
+		if (options.query) {
+			const query = new URLSearchParams(options.query);
+			if (query.toString()) url += `?${query.toString()}`;
+		}
+		return url.replace(/\/\/+/g, "/") || "/";
+	}
+	url(name, options = {}) {
+		return new URL(this.pathname(name, options), options.host ?? `http://localhost`);
+	}
+	root(state) {
+		const root = (0, react.createElement)(AlephaContext.Provider, { value: this.alepha }, (0, react.createElement)(NestedView_default, {}, state.layers[0]?.element));
+		if (this.env.REACT_STRICT_MODE) return (0, react.createElement)(react.StrictMode, {}, root);
+		return root;
+	}
+	convertStringObjectToObject = (schema, value) => {
+		if (alepha.t.schema.isObject(schema) && typeof value === "object") {
+			for (const key in schema.properties) if (alepha.t.schema.isObject(schema.properties[key]) && typeof value[key] === "string") try {
+				value[key] = this.alepha.codec.decode(schema.properties[key], decodeURIComponent(value[key]));
+			} catch (e) {}
+		}
+		return value;
+	};
+	/**
+	* Create a new RouterState based on a given route and request.
+	* This method resolves the layers for the route, applying any query and params schemas defined in the route.
+	* It also handles errors and redirects.
+	*/
+	async createLayers(route, state, previous = []) {
+		let context = {};
+		const stack = [{ route }];
+		let parent = route.parent;
+		while (parent) {
+			stack.unshift({ route: parent });
+			parent = parent.parent;
+		}
+		let forceRefresh = false;
+		for (let i = 0; i < stack.length; i++) {
+			const it = stack[i];
+			const route$1 = it.route;
+			const config = {};
+			try {
+				this.convertStringObjectToObject(route$1.schema?.query, state.query);
+				config.query = route$1.schema?.query ? this.alepha.codec.decode(route$1.schema.query, state.query) : {};
+			} catch (e) {
+				it.error = e;
+				break;
+			}
+			try {
+				config.params = route$1.schema?.params ? this.alepha.codec.decode(route$1.schema.params, state.params) : {};
+			} catch (e) {
+				it.error = e;
+				break;
+			}
+			it.config = { ...config };
+			if (previous?.[i] && !forceRefresh && previous[i].name === route$1.name) {
+				const url = (str) => str ? str.replace(/\/\/+/g, "/") : "/";
+				if (JSON.stringify({
+					part: url(previous[i].part),
+					params: previous[i].config?.params ?? {}
+				}) === JSON.stringify({
+					part: url(route$1.path),
+					params: config.params ?? {}
+				})) {
+					it.props = previous[i].props;
+					it.error = previous[i].error;
+					it.cache = true;
+					context = {
+						...context,
+						...it.props
+					};
+					continue;
+				}
+				forceRefresh = true;
+			}
+			if (!route$1.resolve) continue;
+			try {
+				const args = Object.create(state);
+				Object.assign(args, config, context);
+				const props = await route$1.resolve?.(args) ?? {};
+				it.props = { ...props };
+				context = {
+					...context,
+					...props
+				};
+			} catch (e) {
+				if (e instanceof Redirection) return { redirect: e.redirect };
+				this.log.error("Page resolver has failed", e);
+				it.error = e;
+				break;
+			}
+		}
+		let acc = "";
+		for (let i = 0; i < stack.length; i++) {
+			const it = stack[i];
+			const props = it.props ?? {};
+			const params = { ...it.config?.params };
+			for (const key of Object.keys(params)) params[key] = String(params[key]);
+			acc += "/";
+			acc += it.route.path ? this.compile(it.route.path, params) : "";
+			const path = acc.replace(/\/+/, "/");
+			const localErrorHandler = this.getErrorHandler(it.route);
+			if (localErrorHandler) {
+				const onErrorParent = state.onError;
+				state.onError = (error, context$1) => {
+					const result = localErrorHandler(error, context$1);
+					if (result === void 0) return onErrorParent(error, context$1);
+					return result;
+				};
+			}
+			if (!it.error) try {
+				const element = await this.createElement(it.route, {
+					...props,
+					...context
+				});
+				state.layers.push({
+					name: it.route.name,
+					props,
+					part: it.route.path,
+					config: it.config,
+					element: this.renderView(i + 1, path, element, it.route),
+					index: i + 1,
+					path,
+					route: it.route,
+					cache: it.cache
+				});
+			} catch (e) {
+				it.error = e;
+			}
+			if (it.error) try {
+				let element = await state.onError(it.error, state);
+				if (element === void 0) throw it.error;
+				if (element instanceof Redirection) return { redirect: element.redirect };
+				if (element === null) element = this.renderError(it.error);
+				state.layers.push({
+					props,
+					error: it.error,
+					name: it.route.name,
+					part: it.route.path,
+					config: it.config,
+					element: this.renderView(i + 1, path, element, it.route),
+					index: i + 1,
+					path,
+					route: it.route
+				});
+				break;
+			} catch (e) {
+				if (e instanceof Redirection) return { redirect: e.redirect };
+				throw e;
+			}
+		}
+		return { state };
+	}
+	createRedirectionLayer(redirect) {
+		return { redirect };
+	}
+	getErrorHandler(route) {
+		if (route.errorHandler) return route.errorHandler;
+		let parent = route.parent;
+		while (parent) {
+			if (parent.errorHandler) return parent.errorHandler;
+			parent = parent.parent;
+		}
+	}
+	async createElement(page, props) {
+		if (page.lazy && page.component) this.log.warn(`Page ${page.name} has both lazy and component options, lazy will be used`);
+		if (page.lazy) return (0, react.createElement)((await page.lazy()).default, props);
+		if (page.component) return (0, react.createElement)(page.component, props);
+	}
+	renderError(error) {
+		return (0, react.createElement)(ErrorViewer_default, {
+			error,
+			alepha: this.alepha
+		});
+	}
+	renderEmptyView() {
+		return (0, react.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 ? (0, react.createElement)(ClientOnly_default, typeof page.client === "object" ? page.client : {}, view) : view;
+		return (0, react.createElement)(RouterLayerContext.Provider, { value: {
+			index,
+			path
+		} }, element);
+	}
+	configure = (0, alepha.$hook)({
+		on: "configure",
+		handler: () => {
+			let hasNotFoundHandler = false;
+			const pages = this.alepha.descriptors($page);
+			const hasParent = (it) => {
+				if (it.options.parent) return true;
+				for (const page of pages) if ((page.options.children ? Array.isArray(page.options.children) ? page.options.children : page.options.children() : []).includes(it)) return true;
+			};
+			for (const page of pages) {
+				if (page.options.path === "/*") hasNotFoundHandler = true;
+				if (hasParent(page)) continue;
+				this.add(this.map(pages, page));
+			}
+			if (!hasNotFoundHandler && pages.length > 0) this.add({
+				path: "/*",
+				name: "notFound",
+				cache: true,
+				component: NotFoundPage,
+				onServerResponse: ({ reply }) => {
+					reply.status = 404;
+				}
+			});
+		}
+	});
+	map(pages, target) {
+		const children = target.options.children ? Array.isArray(target.options.children) ? target.options.children : target.options.children() : [];
+		const getChildrenFromParent = (it) => {
+			const children$1 = [];
+			for (const page of pages) if (page.options.parent === it) children$1.push(page);
+			return children$1;
+		};
+		children.push(...getChildrenFromParent(target));
+		return {
+			...target.options,
+			name: target.name,
+			parent: void 0,
+			children: children.map((it) => this.map(pages, it))
+		};
+	}
+	add(entry) {
+		if (this.alepha.isReady()) throw new alepha.AlephaError("Router is already initialized");
+		entry.name ??= this.nextId();
+		const page = entry;
+		page.match = this.createMatch(page);
+		this.pages.push(page);
+		if (page.children) for (const child of page.children) {
+			child.parent = page;
+			this.add(child);
+		}
+	}
+	createMatch(page) {
+		let url = page.path ?? "/";
+		let target = page.parent;
+		while (target) {
+			url = `${target.path ?? ""}/${url}`;
+			target = target.parent;
+		}
+		let path = url.replace(/\/\/+/g, "/");
+		if (path.endsWith("/") && path !== "/") path = path.slice(0, -1);
+		return path;
+	}
+	_next = 0;
+	nextId() {
+		this._next += 1;
+		return `P${this._next}`;
+	}
+};
+const isPageRoute = (it) => {
+	return it && typeof it === "object" && typeof it.path === "string" && typeof it.page === "object";
+};
+
+//#endregion
+//#region src/core/providers/ReactServerProvider.ts
+const envSchema$1 = alepha.t.object({
+	REACT_SSR_ENABLED: alepha.t.optional(alepha.t.boolean()),
+	REACT_ROOT_ID: alepha.t.text({ default: "root" }),
+	REACT_SERVER_TEMPLATE: alepha.t.optional(alepha.t.text({ size: "rich" }))
+});
+/**
+* React server provider configuration atom
+*/
+const reactServerOptions = (0, alepha.$atom)({
+	name: "alepha.react.server.options",
+	schema: alepha.t.object({
+		publicDir: alepha.t.string(),
+		staticServer: alepha.t.object({
+			disabled: alepha.t.boolean(),
+			path: alepha.t.string({ description: "URL path where static files will be served." })
+		})
+	}),
+	default: {
+		publicDir: "public",
+		staticServer: {
+			disabled: false,
+			path: "/"
+		}
+	}
+});
+var ReactServerProvider = class {
+	log = (0, alepha_logger.$logger)();
+	alepha = (0, alepha.$inject)(alepha.Alepha);
+	env = (0, alepha.$env)(envSchema$1);
+	pageApi = (0, alepha.$inject)(ReactPageProvider);
+	serverProvider = (0, alepha.$inject)(alepha_server.ServerProvider);
+	serverStaticProvider = (0, alepha.$inject)(alepha_server_static.ServerStaticProvider);
+	serverRouterProvider = (0, alepha.$inject)(alepha_server.ServerRouterProvider);
+	serverTimingProvider = (0, alepha.$inject)(alepha_server.ServerTimingProvider);
+	ROOT_DIV_REGEX = new RegExp(`<div([^>]*)\\s+id=["']${this.env.REACT_ROOT_ID}["']([^>]*)>(.*?)<\\/div>`, "is");
+	preprocessedTemplate = null;
+	options = (0, alepha.$use)(reactServerOptions);
+	/**
+	* Configure the React server provider.
+	*/
+	onConfigure = (0, alepha.$hook)({
+		on: "configure",
+		handler: async () => {
+			const ssrEnabled = this.alepha.descriptors($page).length > 0 && this.env.REACT_SSR_ENABLED !== false;
+			this.alepha.state.set("alepha.react.server.ssr", ssrEnabled);
+			if (this.alepha.isViteDev()) {
+				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");
+			this.serverRouterProvider.createRoute({
+				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.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}`);
+			this.serverRouterProvider.createRoute({
+				...page,
+				schema: void 0,
+				method: "GET",
+				path: page.match,
+				handler: this.createHandler(page, templateLoader)
+			});
+		}
+	}
+	/**
+	* Get the public directory path where static files are located.
+	*/
+	getPublicDirectory() {
+		const maybe = [(0, node_path.join)(process.cwd(), `dist/${this.options.publicDir}`), (0, node_path.join)(process.cwd(), this.options.publicDir)];
+		for (const it of maybe) if ((0, node_fs.existsSync)(it)) return it;
+		return "";
+	}
+	/**
+	* Configure the static file server to serve files from the given root directory.
+	*/
+	async configureStaticServer(root) {
+		await this.serverStaticProvider.createStaticServer({
+			root,
+			cacheControl: {
+				maxAge: 3600,
+				immutable: true
+			},
+			...this.options.staticServer
+		});
+	}
+	/**
+	* Configure Vite for SSR.
+	*/
+	async configureVite(ssrEnabled) {
+		if (!ssrEnabled) return;
+		this.log.info("SSR (dev) 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.
+	*/
+	async render(name, options = {}) {
+		const page = this.pageApi.page(name);
+		const url = new URL(this.pageApi.url(name, options));
+		const state = {
+			url,
+			params: options.params ?? {},
+			query: options.query ?? {},
+			onError: () => null,
+			layers: [],
+			meta: {}
+		};
+		this.log.trace("Rendering", { url });
+		await this.alepha.events.emit("react:server:render:begin", { state });
+		const { redirect } = await this.pageApi.createLayers(page, state);
+		if (redirect) return {
+			state,
+			html: "",
+			redirect
+		};
+		if (!options.html) {
+			this.alepha.state.set("alepha.react.router.state", state);
+			return {
+				state,
+				html: (0, react_dom_server.renderToString)(this.pageApi.root(state))
+			};
+		}
+		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.events.emit("react:server:render:end", result);
+		return result;
+	}
+	createHandler(route, templateLoader) {
+		return async (serverRequest) => {
+			const { url, reply, query, params } = serverRequest;
+			const template = await templateLoader();
+			if (!template) throw new alepha.AlephaError("Missing template for SSR rendering");
+			this.log.trace("Rendering page", { name: route.name });
+			const state = {
+				url,
+				params,
+				query,
+				onError: () => null,
+				layers: []
+			};
+			if (this.alepha.has(alepha_server_links.ServerLinksProvider)) this.alepha.state.set("alepha.server.request.apiLinks", await this.alepha.inject(alepha_server_links.ServerLinksProvider).getUserApiLinks({
+				user: serverRequest.user,
+				authorization: serverRequest.headers.authorization
+			}));
+			let target = route;
+			while (target) {
+				if (route.can && !route.can()) {
+					reply.status = 403;
+					reply.headers["content-type"] = "text/plain";
+					return "Forbidden";
+				}
+				target = target.parent;
+			}
+			await this.alepha.events.emit("react:server:render:begin", {
+				request: serverRequest,
+				state
+			});
+			this.serverTimingProvider.beginTiming("createLayers");
+			const { redirect } = await this.pageApi.createLayers(route, state);
+			this.serverTimingProvider.endTiming("createLayers");
+			if (redirect) return reply.redirect(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";
+			const html = this.renderToHtml(template, state);
+			if (html instanceof Redirection) {
+				reply.redirect(typeof html.redirect === "string" ? html.redirect : this.pageApi.href(html.redirect));
+				return;
+			}
+			const event = {
+				request: serverRequest,
+				state,
+				html
+			};
+			await this.alepha.events.emit("react:server:render:end", event);
+			route.onServerResponse?.(serverRequest);
+			this.log.trace("Page rendered", { name: route.name });
+			return event.html;
+		};
+	}
+	renderToHtml(template, state, hydration = true) {
+		const element = this.pageApi.root(state);
+		this.alepha.state.set("alepha.react.router.state", state);
+		this.serverTimingProvider.beginTiming("renderToString");
+		let app = "";
+		try {
+			app = (0, react_dom_server.renderToString)(element);
+		} catch (error) {
+			this.log.error("renderToString has failed, fallback to error handler", error);
+			const element$1 = state.onError(error, state);
+			if (element$1 instanceof Redirection) return element$1;
+			app = (0, react_dom_server.renderToString)(element$1);
+			this.log.debug("Error handled successfully with fallback");
+		}
+		this.serverTimingProvider.endTiming("renderToString");
+		const response = { html: template };
+		if (hydration) {
+			const { request, context, ...store } = this.alepha.context.als?.getStore() ?? {};
+			const hydrationData = {
+				...store,
+				"alepha.react.router.state": void 0,
+				layers: state.layers.map((it) => ({
+					...it,
+					error: it.error ? {
+						...it.error,
+						name: it.error.name,
+						message: it.error.message,
+						stack: !this.alepha.isProduction() ? it.error.stack : void 0
+					} : void 0,
+					index: void 0,
+					path: void 0,
+					element: void 0,
+					route: void 0
+				}))
+			};
+			const script = `<script>window.__ssr=${JSON.stringify(hydrationData)}<\/script>`;
+			this.fillTemplate(response, app, script);
+		}
+		return response.html;
+	}
+	preprocessTemplate(template) {
+		const bodyCloseIndex = template.match(/<\/body>/i)?.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);
+			return {
+				beforeApp: `${beforeDiv}<div${rootDivMatch[1]} id="${this.env.REACT_ROOT_ID}"${rootDivMatch[2]}>`,
+				afterApp: `</div>${afterDiv}`,
+				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);
+			return {
+				beforeApp: `${beforeBody}<div id="${this.env.REACT_ROOT_ID}">`,
+				afterApp: `</div>${afterBody}`,
+				beforeScript: "",
+				afterScript
+			};
+		}
+		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;
+	}
+};
+
+//#endregion
+//#region src/core/services/ReactPageServerService.ts
+var ReactPageServerService = class extends ReactPageService {
+	reactServerProvider = (0, alepha.$inject)(ReactServerProvider);
+	serverProvider = (0, alepha.$inject)(alepha_server.ServerProvider);
+	async render(name, options = {}) {
+		return this.reactServerProvider.render(name, options);
+	}
+	async fetch(pathname, options = {}) {
+		const response = await fetch(`${this.serverProvider.hostname}/${pathname}`);
+		const html = await response.text();
+		if (options?.html) return {
+			html,
+			response
+		};
+		const match = html.match(this.reactServerProvider.ROOT_DIV_REGEX);
+		if (match) return {
+			html: match[3],
+			response
+		};
+		throw new alepha.AlephaError("Invalid HTML response");
+	}
+};
+
+//#endregion
+//#region src/core/providers/ReactBrowserRouterProvider.ts
+var ReactBrowserRouterProvider = class extends alepha_router.RouterProvider {
+	log = (0, alepha_logger.$logger)();
+	alepha = (0, alepha.$inject)(alepha.Alepha);
+	pageApi = (0, alepha.$inject)(ReactPageProvider);
+	add(entry) {
+		this.pageApi.add(entry);
+	}
+	configure = (0, alepha.$hook)({
+		on: "configure",
+		handler: async () => {
+			for (const page of this.pageApi.getPages()) if (page.component || page.lazy) this.push({
+				path: page.match,
+				page
+			});
+		}
+	});
+	async transition(url, previous = [], meta = {}) {
+		const { pathname, search } = url;
+		const state = {
+			url,
+			query: {},
+			params: {},
+			layers: [],
+			onError: () => null,
+			meta
+		};
+		await this.alepha.events.emit("react:action:begin", { type: "transition" });
+		await this.alepha.events.emit("react:transition:begin", {
+			previous: this.alepha.state.get("alepha.react.router.state"),
+			state
+		});
+		try {
+			const { route, params } = this.match(pathname);
+			const query = {};
+			if (search) for (const [key, value] of new URLSearchParams(search).entries()) query[key] = String(value);
+			state.query = query;
+			state.params = params ?? {};
+			if (isPageRoute(route)) {
+				const { redirect } = await this.pageApi.createLayers(route.page, state, previous);
+				if (redirect) return redirect;
+			}
+			if (state.layers.length === 0) state.layers.push({
+				name: "not-found",
+				element: (0, react.createElement)(NotFoundPage),
+				index: 0,
+				path: "/"
+			});
+			await this.alepha.events.emit("react:action:success", { type: "transition" });
+			await this.alepha.events.emit("react:transition:success", { state });
+		} catch (e) {
+			this.log.error("Transition has failed", e);
+			state.layers = [{
+				name: "error",
+				element: this.pageApi.renderError(e),
+				index: 0,
+				path: "/"
+			}];
+			await this.alepha.events.emit("react:action:error", {
+				type: "transition",
+				error: e
+			});
+			await this.alepha.events.emit("react:transition:error", {
+				error: e,
+				state
+			});
+		}
+		if (previous) for (let i = 0; i < previous.length; i++) {
+			const layer = previous[i];
+			if (state.layers[i]?.name !== layer.name) this.pageApi.page(layer.name)?.onLeave?.();
+		}
+		this.alepha.state.set("alepha.react.router.state", state);
+		await this.alepha.events.emit("react:action:end", { type: "transition" });
+		await this.alepha.events.emit("react:transition:end", { state });
+	}
+	root(state) {
+		return this.pageApi.root(state);
+	}
+};
+
+//#endregion
+//#region src/core/providers/ReactBrowserProvider.ts
+const envSchema = alepha.t.object({ REACT_ROOT_ID: alepha.t.text({ default: "root" }) });
+/**
+* React browser renderer configuration atom
+*/
+const reactBrowserOptions = (0, alepha.$atom)({
+	name: "alepha.react.browser.options",
+	schema: alepha.t.object({ scrollRestoration: alepha.t.enum(["top", "manual"]) }),
+	default: { scrollRestoration: "top" }
+});
+var ReactBrowserProvider = class {
+	env = (0, alepha.$env)(envSchema);
+	log = (0, alepha_logger.$logger)();
+	client = (0, alepha.$inject)(alepha_server_links.LinkProvider);
+	alepha = (0, alepha.$inject)(alepha.Alepha);
+	router = (0, alepha.$inject)(ReactBrowserRouterProvider);
+	dateTimeProvider = (0, alepha.$inject)(alepha_datetime.DateTimeProvider);
+	options = (0, alepha.$use)(reactBrowserOptions);
+	getRootElement() {
+		const root = this.document.getElementById(this.env.REACT_ROOT_ID);
+		if (root) return root;
+		const div = this.document.createElement("div");
+		div.id = this.env.REACT_ROOT_ID;
+		this.document.body.prepend(div);
+		return div;
+	}
+	transitioning;
+	get state() {
+		return this.alepha.state.get("alepha.react.router.state");
+	}
+	/**
+	* Accessor for Document DOM API.
+	*/
+	get document() {
+		return window.document;
+	}
+	/**
+	* Accessor for History DOM API.
+	*/
+	get history() {
+		return window.history;
+	}
+	/**
+	* Accessor for Location DOM API.
+	*/
+	get location() {
+		return window.location;
+	}
+	get base() {
+		const base = {}.env?.BASE_URL;
+		if (!base || base === "/") return "";
+		return base;
+	}
+	get url() {
+		const url = this.location.pathname + this.location.search;
+		if (this.base) return url.replace(this.base, "");
+		return url;
+	}
+	pushState(path, replace) {
+		const url = this.base + path;
+		if (replace) this.history.replaceState({}, "", url);
+		else this.history.pushState({}, "", url);
+	}
+	async invalidate(props) {
+		const previous = [];
+		this.log.trace("Invalidating layers");
+		if (props) {
+			const [key] = Object.keys(props);
+			const value = props[key];
+			for (const layer of this.state.layers) {
+				if (layer.props?.[key]) {
+					previous.push({
+						...layer,
+						props: {
+							...layer.props,
+							[key]: value
+						}
+					});
+					break;
+				}
+				previous.push(layer);
+			}
+		}
+		await this.render({ previous });
+	}
+	async go(url, options = {}) {
+		this.log.trace(`Going to ${url}`, {
+			url,
+			options
+		});
+		await this.render({
+			url,
+			previous: options.force ? [] : this.state.layers,
+			meta: options.meta
+		});
+		if (this.state.url.pathname + this.state.url.search !== url) {
+			this.pushState(this.state.url.pathname + this.state.url.search);
+			return;
+		}
+		this.pushState(url, options.replace);
+	}
+	async render(options = {}) {
+		const previous = options.previous ?? this.state.layers;
+		const url = options.url ?? this.url;
+		const start = this.dateTimeProvider.now();
+		this.transitioning = {
+			to: url,
+			from: this.state?.url.pathname
+		};
+		this.log.debug("Transitioning...", { to: url });
+		const redirect = await this.router.transition(new URL(`http://localhost${url}`), previous, options.meta);
+		if (redirect) {
+			this.log.info("Redirecting to", { redirect });
+			if (redirect.startsWith("http")) window.location.href = redirect;
+			else return await this.render({ url: redirect });
+		}
+		const ms = this.dateTimeProvider.now().diff(start);
+		this.log.info(`Transition OK [${ms}ms]`, this.transitioning);
+		this.transitioning = void 0;
+	}
+	/**
+	* Get embedded layers from the server.
+	*/
+	getHydrationState() {
+		try {
+			if ("__ssr" in window && typeof window.__ssr === "object") return window.__ssr;
+		} catch (error) {
+			console.error(error);
+		}
+	}
+	onTransitionEnd = (0, alepha.$hook)({
+		on: "react:transition:end",
+		handler: () => {
+			if (this.options.scrollRestoration === "top" && typeof window !== "undefined" && !this.alepha.isTest()) {
+				this.log.trace("Restoring scroll position to top");
+				window.scrollTo(0, 0);
+			}
+		}
+	});
+	ready = (0, alepha.$hook)({
+		on: "ready",
+		handler: async () => {
+			const hydration = this.getHydrationState();
+			const previous = hydration?.layers ?? [];
+			if (hydration) {
+				for (const [key, value] of Object.entries(hydration)) if (key !== "layers") this.alepha.state.set(key, value);
+			}
+			await this.render({ previous });
+			const element = this.router.root(this.state);
+			await this.alepha.events.emit("react:browser:render", {
+				element,
+				root: this.getRootElement(),
+				hydration,
+				state: this.state
+			});
+			window.addEventListener("popstate", () => {
+				if (this.base + this.state.url.pathname === this.location.pathname) return;
+				this.log.debug("Popstate event triggered - rendering new state", { url: this.location.pathname + this.location.search });
+				this.render();
+			});
+		}
+	});
+};
+
+//#endregion
+//#region src/core/services/ReactRouter.ts
+var ReactRouter = class {
+	alepha = (0, alepha.$inject)(alepha.Alepha);
+	pageApi = (0, alepha.$inject)(ReactPageProvider);
+	get state() {
+		return this.alepha.state.get("alepha.react.router.state");
+	}
+	get pages() {
+		return this.pageApi.getPages();
+	}
+	get concretePages() {
+		return this.pageApi.getConcretePages();
+	}
+	get browser() {
+		if (this.alepha.isBrowser()) return this.alepha.inject(ReactBrowserProvider);
+	}
+	isActive(href, options = {}) {
+		const current = this.state.url.pathname;
+		let isActive = current === href || current === `${href}/` || `${current}/` === href;
+		if (options.startWith && !isActive) isActive = current.startsWith(href);
+		return isActive;
+	}
+	path(name, config = {}) {
+		return this.pageApi.pathname(name, {
+			params: {
+				...this.state.params,
+				...config.params
+			},
+			query: config.query
+		});
+	}
+	/**
+	* Reload the current page.
+	* This is equivalent to calling `go()` with the current pathname and search.
+	*/
+	async reload() {
+		if (!this.browser) return;
+		await this.go(this.location.pathname + this.location.search, {
+			replace: true,
+			force: true
+		});
+	}
+	getURL() {
+		if (!this.browser) return this.state.url;
+		return new URL(this.location.href);
+	}
+	get location() {
+		if (!this.browser) throw new Error("Browser is required");
+		return this.browser.location;
+	}
+	get current() {
+		return this.state;
+	}
+	get pathname() {
+		return this.state.url.pathname;
+	}
+	get query() {
+		const query = {};
+		for (const [key, value] of new URLSearchParams(this.state.url.search).entries()) query[key] = String(value);
+		return query;
+	}
+	async back() {
+		this.browser?.history.back();
+	}
+	async forward() {
+		this.browser?.history.forward();
+	}
+	async invalidate(props) {
+		await this.browser?.invalidate(props);
+	}
+	async go(path, options) {
+		for (const page of this.pages) if (page.name === path) {
+			await this.browser?.go(this.path(path, options), options);
+			return;
+		}
+		await this.browser?.go(path, options);
+	}
+	anchor(path, options = {}) {
+		let href = path;
+		for (const page of this.pages) if (page.name === path) {
+			href = this.path(path, options);
+			break;
+		}
+		return {
+			href: this.base(href),
+			onClick: (ev) => {
+				ev.stopPropagation();
+				ev.preventDefault();
+				this.go(href, options).catch(console.error);
+			}
+		};
+	}
+	base(path) {
+		const base = {}.env?.BASE_URL;
+		if (!base || base === "/") return path;
+		return base + path;
+	}
+	/**
+	* Set query params.
+	*
+	* @param record
+	* @param options
+	*/
+	setQueryParams(record, options = {}) {
+		const func = typeof record === "function" ? record : () => record;
+		const search = new URLSearchParams(func(this.query)).toString();
+		const state = search ? `${this.pathname}?${search}` : this.pathname;
+		if (options.push) window.history.pushState({}, "", state);
+		else window.history.replaceState({}, "", state);
+	}
+};
+
+//#endregion
+//#region src/core/index.ts
+/**
+* Provides full-stack React development with declarative routing, server-side rendering, and client-side hydration.
+*
+* The React module enables building modern React applications using the `$page` descriptor on class properties.
+* It delivers seamless server-side rendering, automatic code splitting, and client-side navigation with full
+* type safety and schema validation for route parameters and data.
+*
+* @see {@link $page}
+* @module alepha.react
+*/
+const AlephaReact = (0, alepha.$module)({
+	name: "alepha.react",
+	descriptors: [$page],
+	services: [
+		ReactServerProvider,
+		ReactPageProvider,
+		ReactRouter,
+		ReactPageService,
+		ReactPageServerService
+	],
+	register: (alepha$1) => alepha$1.with(alepha_datetime.AlephaDateTime).with(alepha_server.AlephaServer).with(alepha_server_cache.AlephaServerCache).with(alepha_server_links.AlephaServerLinks).with({
+		provide: ReactPageService,
+		use: ReactPageServerService
+	}).with(ReactServerProvider).with(ReactPageProvider).with(ReactRouter)
+});
+
+//#endregion
+//#region src/form/hooks/useFormState.ts
+const useFormState = (target, _events = [
+	"loading",
+	"dirty",
+	"error"
+]) => {
+	const alepha$1 = useAlepha();
+	const events = _events;
+	const [dirty, setDirty] = (0, react.useState)(false);
+	const [loading, setLoading] = (0, react.useState)(false);
+	const [error, setError] = (0, react.useState)(void 0);
+	const [values, setValues] = (0, react.useState)(void 0);
+	const form = "form" in target ? target.form : target;
+	const path = "path" in target ? target.path : void 0;
+	const hasValues = events.includes("values");
+	const hasErrors = events.includes("error");
+	const hasDirty = events.includes("dirty");
+	const hasLoading = events.includes("loading");
+	(0, react.useEffect)(() => {
+		const listeners = [];
+		if (hasErrors || hasValues || hasDirty) listeners.push(alepha$1.events.on("form:change", (event) => {
+			if (event.id === form.id) {
+				if (!path || event.path === path) {
+					if (hasDirty) setDirty(true);
+					if (hasErrors) setError(void 0);
+				}
+				if (hasValues) setValues(form.currentValues);
+			}
+		}));
+		if (hasValues) listeners.push(alepha$1.events.on("form:reset", (event) => {
+			if (event.id === form.id) setValues(event.values);
+		}));
+		if (hasLoading) listeners.push(alepha$1.events.on("form:submit:begin", (event) => {
+			if (event.id === form.id) setLoading(true);
+		}), alepha$1.events.on("form:submit:end", (event) => {
+			if (event.id === form.id) setLoading(false);
+		}));
+		if (hasValues || hasDirty) listeners.push(alepha$1.events.on("form:submit:success", (event) => {
+			if (event.id === form.id) {
+				if (hasValues) setValues(event.values);
+				if (hasDirty) setDirty(false);
+			}
+		}));
+		if (hasErrors) listeners.push(alepha$1.events.on("form:submit:error", (event) => {
+			if (event.id === form.id) {
+				if (!path || event.error instanceof alepha.TypeBoxError && event.error.value.path === path) setError(event.error);
+			}
+		}));
+		return () => {
+			for (const unsub of listeners) unsub();
+		};
+	}, []);
+	return {
+		dirty,
+		loading,
+		error,
+		values
+	};
+};
+
+//#endregion
+//#region src/form/components/FormState.tsx
+const FormState = (props) => {
+	const formState = useFormState(props.form);
+	return props.children({
+		loading: formState.loading,
+		dirty: formState.dirty
+	});
+};
+var FormState_default = FormState;
+
+//#endregion
+//#region src/form/services/FormModel.ts
+/**
+* FormModel is a dynamic form handler that generates form inputs based on a provided TypeBox schema.
+* It manages form state, handles input changes, and processes form submissions with validation.
+*
+* It means to be injected and used within React components to provide a structured way to create and manage forms.
+*
+* @see {@link useForm}
+*/
+var FormModel = class {
+	log = (0, alepha_logger.$logger)();
+	alepha = (0, alepha.$inject)(alepha.Alepha);
+	values = {};
+	submitInProgress = false;
+	input;
+	get submitting() {
+		return this.submitInProgress;
+	}
+	constructor(id, options) {
+		this.id = id;
+		this.options = options;
+		this.options = options;
+		if (options.initialValues) this.values = this.alepha.codec.decode(options.schema, options.initialValues);
+		this.input = this.createProxyFromSchema(options, options.schema, {
+			store: this.values,
+			parent: ""
+		});
+	}
+	get element() {
+		return window.document.getElementById(this.id);
+	}
+	get currentValues() {
+		return this.restructureValues(this.values);
+	}
+	get props() {
+		return {
+			id: this.id,
+			noValidate: true,
+			onSubmit: (ev) => {
+				ev?.preventDefault?.();
+				this.submit();
+			},
+			onReset: (event) => this.reset(event)
+		};
+	}
+	reset = (event) => {
+		for (const key in this.values) delete this.values[key];
+		this.options.onReset?.();
+		return this.alepha.events.emit("form:reset", {
+			id: this.id,
+			values: this.values
+		}, { catch: true });
+	};
+	submit = async () => {
+		if (this.submitInProgress) {
+			this.log.warn("Form submission already in progress, ignoring duplicate submit.");
+			return;
+		}
+		await this.alepha.events.emit("react:action:begin", {
+			type: "form",
+			id: this.id
+		});
+		await this.alepha.events.emit("form:submit:begin", { id: this.id });
+		this.submitInProgress = true;
+		const options = this.options;
+		const args = { form: this.element };
+		try {
+			let values = this.restructureValues(this.values);
+			if (alepha.t.schema.isSchema(options.schema)) values = this.alepha.codec.decode(options.schema, values);
+			await options.handler(values, args);
+			await this.alepha.events.emit("react:action:success", {
+				type: "form",
+				id: this.id
+			});
+			await this.alepha.events.emit("form:submit:success", {
+				id: this.id,
+				values
+			});
+		} catch (error) {
+			this.log.error("Form submission error:", error);
+			options.onError?.(error, args);
+			await this.alepha.events.emit("react:action:error", {
+				type: "form",
+				id: this.id,
+				error
+			});
+			await this.alepha.events.emit("form:submit:error", {
+				error,
+				id: this.id
+			});
+		} finally {
+			this.submitInProgress = false;
+		}
+		await this.alepha.events.emit("react:action:end", {
+			type: "form",
+			id: this.id
+		});
+		await this.alepha.events.emit("form:submit:end", { id: this.id });
+	};
+	/**
+	* Restructures flat keys like "address.city" into nested objects like { address: { city: ... } }
+	* Values are already typed from onChange, so no conversion is needed.
+	*/
+	restructureValues(store) {
+		const values = {};
+		for (const [key, value] of Object.entries(store)) if (key.includes(".")) this.restructureNestedValue(values, key, value);
+		else values[key] = value;
+		return values;
+	}
+	/**
+	* Helper to restructure a flat key like "address.city" into nested object structure.
+	* The value is already typed, so we just assign it to the nested path.
+	*/
+	restructureNestedValue(values, key, value) {
+		const pathSegments = key.split(".");
+		const finalPropertyKey = pathSegments.pop();
+		if (!finalPropertyKey) return;
+		let currentObjectLevel = values;
+		for (const segment of pathSegments) {
+			currentObjectLevel[segment] ??= {};
+			currentObjectLevel = currentObjectLevel[segment];
+		}
+		currentObjectLevel[finalPropertyKey] = value;
+	}
+	createProxyFromSchema(options, schema, context) {
+		const parent = context.parent || "";
+		return new Proxy({}, { get: (_, prop) => {
+			if (!options.schema || !alepha.t.schema.isObject(schema)) return {};
+			if (prop in schema.properties) {
+				if (alepha.t.schema.isObject(schema.properties[prop])) return this.createProxyFromSchema(options, schema.properties[prop], {
+					parent: parent ? `${parent}.${prop}` : prop,
+					store: context.store
+				});
+				return this.createInputFromSchema(prop, options, schema, schema.required?.includes(prop) || false, context);
+			}
+		} });
+	}
+	createInputFromSchema(name, options, schema, required, context) {
+		const parent = context.parent || "";
+		const field = schema.properties?.[name];
+		if (!field) return {
+			path: "",
+			required,
+			props: {},
+			schema,
+			set: () => {},
+			form: this
+		};
+		const isRequired = schema.required?.includes(name) ?? false;
+		const key = parent ? `${parent}.${name}` : name;
+		const path = `/${key.replaceAll(".", "/")}`;
+		const set = (value, sync = true) => {
+			const typedValue = this.getValueFromInput(value, field);
+			if (context.store[key] === typedValue) {}
+			context.store[key] = typedValue;
+			if (options.onChange) options.onChange(key, typedValue, context.store);
+			this.alepha.events.emit("form:change", {
+				id: this.id,
+				path,
+				value: typedValue
+			});
+			if (sync) {
+				const inputElement = window.document.querySelector(`[data-path="${path}"]`);
+				if (inputElement instanceof HTMLInputElement) if (alepha.t.schema.isBoolean(field)) inputElement.checked = Boolean(value);
+				else inputElement.value = value;
+			}
+		};
+		const attr = {
+			name: key,
+			autoComplete: "off",
+			onChange: (event) => {
+				if (typeof event === "string") {
+					set(event, false);
+					return;
+				}
+				if (typeof event === "number") {
+					set(event, false);
+					return;
+				}
+				if (alepha.t.schema.isBoolean(field)) set(event.target.checked, false);
+				else set(event.target.value, false);
+			}
+		};
+		attr["data-path"] = path;
+		if (options.id) {
+			attr.id = `${options.id}-${key}`;
+			attr["data-testid"] = attr.id;
+		}
+		if (alepha.t.schema.isString(field)) {
+			if (field.maxLength != null) attr.maxLength = Number(field.maxLength);
+			if (field.minLength != null) attr.minLength = Number(field.minLength);
+		}
+		if (options.initialValues?.[name] != null) attr.defaultValue = this.valueToInputEntry(options.initialValues[name]);
+		else if ("default" in field && field.default != null) attr.defaultValue = this.valueToInputEntry(field.default);
+		if (isRequired) attr.required = true;
+		if ("description" in field && typeof field.description === "string") attr["aria-label"] = field.description;
+		if (alepha.t.schema.isInteger(field) || alepha.t.schema.isNumber(field)) attr.type = "number";
+		else if (name === "password") attr.type = "password";
+		else if (name === "email") attr.type = "email";
+		else if (name === "url") attr.type = "url";
+		else if (alepha.t.schema.isString(field)) if (field.format === "binary") attr.type = "file";
+		else if (field.format === "date") attr.type = "date";
+		else if (field.format === "time") attr.type = "time";
+		else if (field.format === "date-time") attr.type = "datetime-local";
+		else attr.type = "text";
+		else if (alepha.t.schema.isBoolean(field)) attr.type = "checkbox";
+		if (options.onCreateField) {
+			const customAttr = options.onCreateField(name, field);
+			Object.assign(attr, customAttr);
+		}
+		return {
+			path,
+			props: attr,
+			schema: field,
+			set,
+			form: this,
+			required
+		};
+	}
+	/**
+	* Convert an input value to the correct type based on the schema.
+	* Handles raw DOM values (strings, booleans from checkboxes, Files, etc.)
+	*/
+	getValueFromInput(input, schema) {
+		if (input instanceof File) {
+			if (alepha.t.schema.isString(schema) && schema.format === "binary") return input;
+			return null;
+		}
+		if (alepha.t.schema.isBoolean(schema)) return !!input;
+		if (alepha.t.schema.isNumber(schema)) {
+			const num = Number(input);
+			return Number.isNaN(num) ? null : num;
+		}
+		if (alepha.t.schema.isString(schema)) {
+			if (schema.format === "date") return new Date(input).toISOString().slice(0, 10);
+			if (schema.format === "time") return (/* @__PURE__ */ new Date(`1970-01-01T${input}`)).toISOString().slice(11, 16);
+			if (schema.format === "date-time") return new Date(input).toISOString();
+			return String(input);
+		}
+		return input;
+	}
+	valueToInputEntry(value) {
+		if (value === null || value === void 0) return "";
+		if (typeof value === "boolean") return value;
+		if (typeof value === "number") return value;
+		if (typeof value === "string") return value;
+		if (value instanceof Date) return value.toISOString().slice(0, 16);
+		return value;
+	}
+};
+
+//#endregion
+//#region src/form/hooks/useForm.ts
+/**
+* Custom hook to create a form with validation and field management.
+* This hook uses TypeBox schemas to define the structure and validation rules for the form.
+* It provides a way to handle form submission, field creation, and value management.
+*
+* @example
+* ```tsx
+* import { t } from "alepha";
+*
+* const form = useForm({
+*   schema: t.object({
+*     username: t.text(),
+*     password: t.text(),
+*   }),
+*   handler: (values) => {
+*     console.log("Form submitted with values:", values);
+*   },
+* });
+*
+* return (
+*   <form {...form.props}>
+*     <input {...form.input.username.props} />
+*     <input {...form.input.password.props} />
+*     <button type="submit">Submit</button>
+*   </form>
+* );
+* ```
+*/
+const useForm = (options, deps = []) => {
+	const alepha$1 = useAlepha();
+	const formId = (0, react.useId)();
+	return (0, react.useMemo)(() => {
+		return alepha$1.inject(FormModel, {
+			lifetime: "transient",
+			args: [options.id || formId, options]
+		});
+	}, deps);
+};
+
+//#endregion
+//#region src/form/index.ts
+/**
+* React hooks for managing forms in Alepha applications.
+*
+* This module provides a set of hooks to simplify form handling, validation, and submission in React applications built with Alepha.
+*
+* It includes:
+* - `useForm`: A hook for managing form state, validation, and submission.
+*
+* @see {@link useForm}
+* @module alepha.react.form
+*/
+const AlephaReactForm = (0, alepha.$module)({ name: "alepha.react.form" });
+
+//#endregion
+exports.AlephaReactForm = AlephaReactForm;
+exports.FormModel = FormModel;
+exports.FormState = FormState_default;
+exports.useForm = useForm;
+exports.useFormState = useFormState;
+//# sourceMappingURL=index.cjs.map