@alepha/react 0.14.0 → 0.14.2

package/dist/core/index.js

@@ -1,1894 +1,87 @@
-import { $atom, $env, $hook, $inject, $module, $use, Alepha, AlephaError, Atom, KIND, Primitive, createPrimitive, t } from "alepha";
-import { AlephaDateTime, DateTimeProvider } from "alepha/datetime";
-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, memo, use, useCallback, 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 { RouterProvider } from "alepha/router";
+import { $module, Alepha, AlephaError, Atom } from "alepha";
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { DateTimeProvider } from "alepha/datetime";
+import { LinkProvider } from "alepha/server/links";
 
-//#region ../../src/core/services/ReactPageService.ts
-var ReactPageService = class {
-	fetch(pathname, options = {}) {
-		throw new AlephaError("Fetch is not available for this environment.");
-	}
-	render(name, options = {}) {
-		throw new AlephaError("Render is not available for this environment.");
-	}
-};
-
-//#endregion
-//#region ../../src/core/primitives/$page.ts
-/**
-* Main primitive for defining a React route in the application.
-*
-* The $page primitive is the core building block for creating type-safe, SSR-enabled React routes.
-* It provides a declarative way to define pages with powerful features:
-*
-* **Routing & Navigation**
-* - URL pattern matching with parameters (e.g., `/users/:id`)
-* - Nested routing with parent-child relationships
-* - Type-safe URL parameter and query string validation
-*
-* **Data Loading**
-* - Server-side data fetching with the `resolve` function
-* - Automatic serialization and hydration for SSR
-* - Access to request context, URL params, and parent data
-*
-* **Component Loading**
-* - Direct component rendering or lazy loading for code splitting
-* - Client-only rendering when browser APIs are needed
-* - Automatic fallback handling during hydration
-*
-* **Performance Optimization**
-* - Static generation for pre-rendered pages at build time
-* - Server-side caching with configurable TTL and providers
-* - Code splitting through lazy component loading
-*
-* **Error Handling**
-* - Custom error handlers with support for redirects
-* - Hierarchical error handling (child → parent)
-* - HTTP status code handling (404, 401, etc.)
-*
-* **Page Animations**
-* - CSS-based enter/exit animations
-* - Dynamic animations based on page state
-* - Custom timing and easing functions
-*
-* **Lifecycle Management**
-* - Server response hooks for headers and status codes
-* - Page leave handlers for cleanup (browser only)
-* - Permission-based access control
-*
-* @example Simple page with data fetching
-* ```typescript
-* const userProfile = $page({
-*   path: "/users/:id",
-*   schema: {
-*     params: t.object({ id: t.integer() }),
-*     query: t.object({ tab: t.optional(t.text()) })
-*   },
-*   resolve: async ({ params }) => {
-*     const user = await userApi.getUser(params.id);
-*     return { user };
-*   },
-*   lazy: () => import("./UserProfile.tsx")
-* });
-* ```
-*
-* @example Nested routing with error handling
-* ```typescript
-* const projectSection = $page({
-*   path: "/projects/:id",
-*   children: () => [projectBoard, projectSettings],
-*   resolve: async ({ params }) => {
-*     const project = await projectApi.get(params.id);
-*     return { project };
-*   },
-*   errorHandler: (error) => {
-*     if (HttpError.is(error, 404)) {
-*       return <ProjectNotFound />;
-*     }
-*   }
-* });
-* ```
-*
-* @example Static generation with caching
-* ```typescript
-* const blogPost = $page({
-*   path: "/blog/:slug",
-*   static: {
-*     entries: posts.map(p => ({ params: { slug: p.slug } }))
-*   },
-*   resolve: async ({ params }) => {
-*     const post = await loadPost(params.slug);
-*     return { post };
-*   }
-* });
-* ```
-*/
-const $page = (options) => {
-	return createPrimitive(PagePrimitive, options);
-};
-var PagePrimitive = class extends Primitive {
-	reactPageService = $inject(ReactPageService);
-	onInit() {
-		if (this.options.static) this.options.cache ??= { store: {
-			provider: "memory",
-			ttl: [1, "week"]
-		} };
-	}
-	get name() {
-		return this.options.name ?? this.config.propertyKey;
-	}
-	/**
-	* For testing or build purposes.
-	*
-	* This will render the page (HTML layout included or not) and return the HTML + context.
-	* Only valid for server-side rendering, it will throw an error if called on the client-side.
-	*/
-	async render(options) {
-		return this.reactPageService.render(this.name, options);
-	}
-	async fetch(options) {
-		return this.reactPageService.fetch(this.options.path || "", options);
-	}
-	match(url) {
-		return false;
-	}
-	pathname(config) {
-		return this.options.path || "";
-	}
-};
-$page[KIND] = PagePrimitive;
-
-//#endregion
-//#region ../../src/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] = useState(false);
-	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
-/**
-* Error viewer component that displays error details in development mode
-*/
-const ErrorViewer = ({ error, alepha }) => {
-	const [expanded, setExpanded] = useState(false);
-	if (alepha.isProduction()) return /* @__PURE__ */ jsx(ErrorViewerProduction, {});
-	const frames = parseStackTrace(error.stack);
-	const visibleFrames = expanded ? frames : frames.slice(0, 6);
-	const hiddenCount = frames.length - 6;
-	return /* @__PURE__ */ jsx("div", {
-		style: styles.overlay,
-		children: /* @__PURE__ */ jsxs("div", {
-			style: styles.container,
-			children: [/* @__PURE__ */ jsx(Header, { error }), /* @__PURE__ */ jsx(StackTraceSection, {
-				frames,
-				visibleFrames,
-				expanded,
-				hiddenCount,
-				onToggle: () => setExpanded(!expanded)
-			})]
-		})
-	});
-};
-var ErrorViewer_default = ErrorViewer;
-/**
-* Parse stack trace string into structured frames
-*/
-function parseStackTrace(stack) {
-	if (!stack) return [];
-	const lines = stack.split("\n").slice(1);
-	const frames = [];
-	for (const line of lines) {
-		const trimmed = line.trim();
-		if (!trimmed.startsWith("at ")) continue;
-		const frame = parseStackLine(trimmed);
-		if (frame) frames.push(frame);
-	}
-	return frames;
-}
-/**
-* Parse a single stack trace line into a structured frame
-*/
-function parseStackLine(line) {
-	const withFn = line.match(/^at\s+(.+?)\s+\((.+):(\d+):(\d+)\)$/);
-	if (withFn) return {
-		fn: withFn[1],
-		file: withFn[2],
-		line: withFn[3],
-		col: withFn[4],
-		raw: line
-	};
-	const withoutFn = line.match(/^at\s+(.+):(\d+):(\d+)$/);
-	if (withoutFn) return {
-		fn: "<anonymous>",
-		file: withoutFn[1],
-		line: withoutFn[2],
-		col: withoutFn[3],
-		raw: line
-	};
-	return {
-		fn: "",
-		file: line.replace(/^at\s+/, ""),
-		line: "",
-		col: "",
-		raw: line
-	};
-}
-/**
-* Copy text to clipboard
-*/
-function copyToClipboard(text) {
-	navigator.clipboard.writeText(text).catch((err) => {
-		console.error("Clipboard error:", err);
-	});
-}
-/**
-* Header section with error type and message
-*/
-function Header({ error }) {
-	const [copied, setCopied] = useState(false);
-	const handleCopy = () => {
-		copyToClipboard(error.stack || error.message);
-		setCopied(true);
-		setTimeout(() => setCopied(false), 2e3);
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		style: styles.header,
-		children: [/* @__PURE__ */ jsxs("div", {
-			style: styles.headerTop,
-			children: [/* @__PURE__ */ jsx("div", {
-				style: styles.badge,
-				children: error.name
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: handleCopy,
-				style: styles.copyBtn,
-				children: copied ? "Copied" : "Copy Stack"
-			})]
-		}), /* @__PURE__ */ jsx("h1", {
-			style: styles.message,
-			children: error.message
-		})]
-	});
-}
-/**
-* Stack trace section with expandable frames
-*/
-function StackTraceSection({ frames, visibleFrames, expanded, hiddenCount, onToggle }) {
-	if (frames.length === 0) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		style: styles.stackSection,
-		children: [/* @__PURE__ */ jsx("div", {
-			style: styles.stackHeader,
-			children: "Call Stack"
-		}), /* @__PURE__ */ jsxs("div", {
-			style: styles.frameList,
-			children: [
-				visibleFrames.map((frame, i) => /* @__PURE__ */ jsx(StackFrameRow, {
-					frame,
-					index: i
-				}, i)),
-				!expanded && hiddenCount > 0 && /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: onToggle,
-					style: styles.expandBtn,
-					children: [
-						"Show ",
-						hiddenCount,
-						" more frames"
-					]
-				}),
-				expanded && hiddenCount > 0 && /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: onToggle,
-					style: styles.expandBtn,
-					children: "Show less"
-				})
-			]
-		})]
-	});
-}
-/**
-* Single stack frame row
-*/
-function StackFrameRow({ frame, index }) {
-	const isFirst = index === 0;
-	const fileName = frame.file.split("/").pop() || frame.file;
-	const dirPath = frame.file.substring(0, frame.file.length - fileName.length);
-	return /* @__PURE__ */ jsxs("div", {
-		style: {
-			...styles.frame,
-			...isFirst ? styles.frameFirst : {}
-		},
-		children: [/* @__PURE__ */ jsx("div", {
-			style: styles.frameIndex,
-			children: index + 1
-		}), /* @__PURE__ */ jsxs("div", {
-			style: styles.frameContent,
-			children: [frame.fn && /* @__PURE__ */ jsx("div", {
-				style: styles.fnName,
-				children: frame.fn
-			}), /* @__PURE__ */ jsxs("div", {
-				style: styles.filePath,
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						style: styles.dirPath,
-						children: dirPath
-					}),
-					/* @__PURE__ */ jsx("span", {
-						style: styles.fileName,
-						children: fileName
-					}),
-					frame.line && /* @__PURE__ */ jsxs("span", {
-						style: styles.lineCol,
-						children: [
-							":",
-							frame.line,
-							":",
-							frame.col
-						]
-					})
-				]
-			})]
-		})]
-	});
-}
-/**
-* Production error view - minimal information
-*/
-function ErrorViewerProduction() {
-	return /* @__PURE__ */ jsx("div", {
-		style: styles.overlay,
-		children: /* @__PURE__ */ jsxs("div", {
-			style: styles.prodContainer,
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					style: styles.prodIcon,
-					children: "!"
-				}),
-				/* @__PURE__ */ jsx("h1", {
-					style: styles.prodTitle,
-					children: "Application Error"
-				}),
-				/* @__PURE__ */ jsx("p", {
-					style: styles.prodMessage,
-					children: "An unexpected error occurred. Please try again later."
-				}),
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: () => window.location.reload(),
-					style: styles.prodButton,
-					children: "Reload Page"
-				})
-			]
-		})
-	});
-}
-const styles = {
-	overlay: {
-		position: "fixed",
-		inset: 0,
-		backgroundColor: "rgba(0, 0, 0, 0.8)",
-		display: "flex",
-		alignItems: "flex-start",
-		justifyContent: "center",
-		padding: "40px 20px",
-		overflow: "auto",
-		fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
-		zIndex: 99999
-	},
-	container: {
-		width: "100%",
-		maxWidth: "960px",
-		backgroundColor: "#1a1a1a",
-		borderRadius: "12px",
-		overflow: "hidden",
-		boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)"
-	},
-	header: {
-		padding: "24px 28px",
-		borderBottom: "1px solid #333",
-		background: "linear-gradient(to bottom, #1f1f1f, #1a1a1a)"
-	},
-	headerTop: {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "space-between",
-		marginBottom: "16px"
-	},
-	badge: {
-		display: "inline-block",
-		padding: "6px 12px",
-		backgroundColor: "#dc2626",
-		color: "#fff",
-		fontSize: "12px",
-		fontWeight: 600,
-		borderRadius: "6px",
-		letterSpacing: "0.025em"
-	},
-	copyBtn: {
-		padding: "8px 16px",
-		backgroundColor: "transparent",
-		color: "#888",
-		fontSize: "13px",
-		fontWeight: 500,
-		border: "1px solid #444",
-		borderRadius: "6px",
-		cursor: "pointer",
-		transition: "all 0.15s"
-	},
-	message: {
-		margin: 0,
-		fontSize: "20px",
-		fontWeight: 500,
-		color: "#fff",
-		lineHeight: 1.5,
-		wordBreak: "break-word"
-	},
-	stackSection: { padding: "0" },
-	stackHeader: {
-		padding: "16px 28px",
-		fontSize: "11px",
-		fontWeight: 600,
-		color: "#666",
-		textTransform: "uppercase",
-		letterSpacing: "0.1em",
-		borderBottom: "1px solid #2a2a2a"
-	},
-	frameList: {
-		display: "flex",
-		flexDirection: "column"
-	},
-	frame: {
-		display: "flex",
-		alignItems: "flex-start",
-		padding: "14px 28px",
-		borderBottom: "1px solid #252525",
-		transition: "background-color 0.15s"
-	},
-	frameFirst: { backgroundColor: "rgba(220, 38, 38, 0.1)" },
-	frameIndex: {
-		width: "28px",
-		flexShrink: 0,
-		fontSize: "12px",
-		fontWeight: 500,
-		color: "#555",
-		fontFamily: "monospace"
-	},
-	frameContent: {
-		flex: 1,
-		minWidth: 0
-	},
-	fnName: {
-		fontSize: "14px",
-		fontWeight: 500,
-		color: "#e5e5e5",
-		marginBottom: "4px",
-		fontFamily: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace"
-	},
-	filePath: {
-		fontSize: "13px",
-		color: "#888",
-		fontFamily: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace",
-		wordBreak: "break-all"
-	},
-	dirPath: { color: "#555" },
-	fileName: { color: "#0ea5e9" },
-	lineCol: { color: "#eab308" },
-	expandBtn: {
-		padding: "16px 28px",
-		backgroundColor: "transparent",
-		color: "#666",
-		fontSize: "13px",
-		fontWeight: 500,
-		border: "none",
-		borderTop: "1px solid #252525",
-		cursor: "pointer",
-		textAlign: "left",
-		transition: "all 0.15s"
-	},
-	prodContainer: {
-		textAlign: "center",
-		padding: "60px 40px",
-		backgroundColor: "#1a1a1a",
-		borderRadius: "12px",
-		maxWidth: "400px"
-	},
-	prodIcon: {
-		width: "64px",
-		height: "64px",
-		margin: "0 auto 24px",
-		backgroundColor: "#dc2626",
-		borderRadius: "50%",
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		fontSize: "32px",
-		fontWeight: 700,
-		color: "#fff"
-	},
-	prodTitle: {
-		margin: "0 0 12px",
-		fontSize: "24px",
-		fontWeight: 600,
-		color: "#fff"
-	},
-	prodMessage: {
-		margin: "0 0 28px",
-		fontSize: "15px",
-		color: "#888",
-		lineHeight: 1.6
-	},
-	prodButton: {
-		padding: "12px 24px",
-		backgroundColor: "#fff",
-		color: "#000",
-		fontSize: "14px",
-		fontWeight: 600,
-		border: "none",
-		borderRadius: "8px",
-		cursor: "pointer"
-	}
-};
-
-//#endregion
-//#region ../../src/core/contexts/RouterLayerContext.ts
-const RouterLayerContext = 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 = 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 = useContext(AlephaContext);
-	if (!alepha) throw new AlephaError("Hook 'useAlepha()' must be used within an AlephaContext.Provider");
-	return alepha;
-};
-
-//#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 = useAlepha();
-	useEffect(() => {
-		if (!alepha.isBrowser()) return;
-		const subs = [];
-		for (const [name, hook] of Object.entries(opts)) subs.push(alepha.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 = useAlepha();
-	useMemo(() => {
-		if (defaultValue != null && alepha.store.get(target) == null) alepha.store.set(target, defaultValue);
-	}, [defaultValue]);
-	const [state, setState] = useState(alepha.store.get(target));
-	useEffect(() => {
-		if (!alepha.isBrowser()) return;
-		const key = target instanceof Atom ? target.key : target;
-		return alepha.events.on("state:mutate", (ev) => {
-			if (ev.key === key) setState(ev.value);
-		});
-	}, []);
-	return [state, (value) => {
-		alepha.store.set(target, value);
-	}];
-}
-
-//#endregion
-//#region ../../src/core/hooks/useRouterState.ts
-const useRouterState = () => {
-	const [state] = useStore("alepha.react.router.state");
-	if (!state) throw new AlephaError("Missing react router state");
-	return state;
-};
-
-//#endregion
-//#region ../../src/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.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 routerLayer = use(RouterLayerContext);
-	const index = routerLayer?.index ?? 0;
-	const onError = routerLayer?.onError;
-	const state = useRouterState();
-	const alepha = useAlepha();
-	const [view, setView] = useState(state.layers[index]?.element);
-	const [animation, setAnimation] = useState("");
-	const animationExitDuration = useRef(0);
-	const animationExitNow = useRef(0);
-	useEvents({
-		"react:transition:begin": async ({ previous, state: state$1 }) => {
-			const layer = previous.layers[index];
-			if (!layer) return;
-			if (`${state$1.url.pathname}/`.startsWith(`${layer.path}/`)) return;
-			const animationExit = parseAnimation(layer.route?.animation, state$1, "exit");
-			if (animationExit) {
-				const duration = animationExit.duration || 200;
-				animationExitNow.current = Date.now();
-				animationExitDuration.current = duration;
-				setAnimation(animationExit.animation);
-			} else {
-				animationExitNow.current = 0;
-				animationExitDuration.current = 0;
-				setAnimation("");
-			}
-		},
-		"react:transition:end": async ({ state: state$1 }) => {
-			const layer = state$1.layers[index];
-			if (animationExitNow.current) {
-				const duration = animationExitDuration.current;
-				const diff = Date.now() - animationExitNow.current;
-				if (diff < duration) await new Promise((resolve) => setTimeout(resolve, duration - diff));
-			}
-			if (!layer?.cache) {
-				setView(layer?.element);
-				const animationEnter = parseAnimation(layer?.route?.animation, state$1, "enter");
-				if (animationEnter) setAnimation(animationEnter.animation);
-				else setAnimation("");
-			}
-		}
-	}, []);
-	let element = view ?? props.children ?? null;
-	if (animation) element = /* @__PURE__ */ jsx("div", {
-		style: {
-			display: "flex",
-			flex: 1,
-			height: "100%",
-			width: "100%",
-			position: "relative",
-			overflow: "hidden"
-		},
-		children: /* @__PURE__ */ jsx("div", {
-			style: {
-				height: "100%",
-				width: "100%",
-				display: "flex",
-				animation
-			},
-			children: element
-		})
-	});
-	if (props.errorBoundary === false) return /* @__PURE__ */ jsx(Fragment, { children: element });
-	if (props.errorBoundary) return /* @__PURE__ */ jsx(ErrorBoundary_default, {
-		fallback: props.errorBoundary,
-		children: element
-	});
-	const fallback = (error) => {
-		const result = onError?.(error, state) ?? /* @__PURE__ */ jsx(ErrorViewer_default, {
-			error,
-			alepha
-		});
-		if (result instanceof Redirection) return "Redirection inside ErrorBoundary is not allowed.";
-		return result;
-	};
-	return /* @__PURE__ */ jsx(ErrorBoundary_default, {
-		fallback,
-		children: element
-	});
-};
-var NestedView_default = memo(NestedView);
-function parseAnimation(animationLike, state, type = "enter") {
-	if (!animationLike) return;
-	const DEFAULT_DURATION = 300;
-	const animation = typeof animationLike === "function" ? animationLike(state) : animationLike;
-	if (typeof animation === "string") {
-		if (type === "exit") return;
-		return {
-			duration: DEFAULT_DURATION,
-			animation: `${DEFAULT_DURATION}ms ${animation}`
-		};
-	}
-	if (typeof animation === "object") {
-		const anim = animation[type];
-		const duration = typeof anim === "object" ? anim.duration ?? DEFAULT_DURATION : DEFAULT_DURATION;
-		const name = typeof anim === "object" ? anim.name : anim;
-		if (type === "exit") return {
-			duration,
-			animation: `${duration}ms ${typeof anim === "object" ? anim.timing ?? "" : ""} ${name}`
-		};
-		return {
-			duration,
-			animation: `${duration}ms ${typeof anim === "object" ? anim.timing ?? "" : ""} ${name}`
-		};
-	}
-}
-
-//#endregion
-//#region ../../src/core/components/NotFound.tsx
-function NotFoundPage(props) {
-	return /* @__PURE__ */ jsxs("div", {
-		style: {
-			width: "100%",
-			minHeight: "90vh",
-			boxSizing: "border-box",
-			display: "flex",
-			flexDirection: "column",
-			justifyContent: "center",
-			alignItems: "center",
-			textAlign: "center",
-			fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
-			padding: "2rem",
-			...props.style
-		},
-		children: [/* @__PURE__ */ jsx("div", {
-			style: {
-				fontSize: "6rem",
-				fontWeight: 200,
-				lineHeight: 1
-			},
-			children: "404"
-		}), /* @__PURE__ */ jsx("div", {
-			style: {
-				fontSize: "0.875rem",
-				marginTop: "1rem",
-				opacity: .6
-			},
-			children: "Page not found"
-		})]
-	});
-}
-
-//#endregion
-//#region ../../src/core/providers/ReactPageProvider.ts
-const envSchema$2 = t.object({ REACT_STRICT_MODE: t.boolean({ default: true }) });
-var ReactPageProvider = class {
-	log = $logger();
-	env = $env(envSchema$2);
-	alepha = $inject(Alepha);
-	pages = [];
-	getPages() {
-		return this.pages;
-	}
-	getConcretePages() {
-		const pages = [];
-		for (const page of this.pages) {
-			if (page.children && page.children.length > 0) continue;
-			const fullPath = this.pathname(page.name);
-			if (fullPath.includes(":") || fullPath.includes("*")) {
-				if (typeof page.static === "object") {
-					const entries = page.static.entries;
-					if (entries && entries.length > 0) for (const entry of entries) {
-						const params = entry.params;
-						const path = this.compile(page.path ?? "", params);
-						if (!path.includes(":") && !path.includes("*")) pages.push({
-							...page,
-							name: params[Object.keys(params)[0]],
-							staticName: page.name,
-							path,
-							...entry
-						});
-					}
-				}
-				continue;
-			}
-			pages.push(page);
-		}
-		return pages;
-	}
-	page(name) {
-		for (const page of this.pages) if (page.name === name) return page;
-		throw new AlephaError(`Page '${name}' not found`);
-	}
-	pathname(name, options = {}) {
-		const page = this.page(name);
-		if (!page) throw new Error(`Page ${name} not found`);
-		let url = page.path ?? "";
-		let parent = page.parent;
-		while (parent) {
-			url = `${parent.path ?? ""}/${url}`;
-			parent = parent.parent;
-		}
-		url = this.compile(url, options.params ?? {});
-		if (options.query) {
-			const query = new URLSearchParams(options.query);
-			if (query.toString()) url += `?${query.toString()}`;
-		}
-		return url.replace(/\/\/+/g, "/") || "/";
-	}
-	url(name, options = {}) {
-		return new URL(this.pathname(name, options), options.host ?? `http://localhost`);
-	}
-	root(state) {
-		const root = createElement(AlephaContext.Provider, { value: this.alepha }, createElement(NestedView_default, {}, state.layers[0]?.element));
-		if (this.env.REACT_STRICT_MODE) return createElement(StrictMode, {}, root);
-		return root;
-	}
-	convertStringObjectToObject = (schema, value) => {
-		if (t.schema.isObject(schema) && typeof value === "object") {
-			for (const key in schema.properties) if (t.schema.isObject(schema.properties[key]) && typeof value[key] === "string") try {
-				value[key] = this.alepha.codec.decode(schema.properties[key], decodeURIComponent(value[key]));
-			} catch (e) {}
-		}
-		return value;
-	};
-	/**
-	* Create a new RouterState based on a given route and request.
-	* This method resolves the layers for the route, applying any query and params schemas defined in the route.
-	* It also handles errors and redirects.
-	*/
-	async createLayers(route, state, previous = []) {
-		let context = {};
-		const stack = [{ route }];
-		let parent = route.parent;
-		while (parent) {
-			stack.unshift({ route: parent });
-			parent = parent.parent;
-		}
-		let forceRefresh = false;
-		for (let i = 0; i < stack.length; i++) {
-			const it = stack[i];
-			const route$1 = it.route;
-			const config = {};
-			try {
-				this.convertStringObjectToObject(route$1.schema?.query, state.query);
-				config.query = route$1.schema?.query ? this.alepha.codec.decode(route$1.schema.query, state.query) : {};
-			} catch (e) {
-				it.error = e;
-				break;
-			}
-			try {
-				config.params = route$1.schema?.params ? this.alepha.codec.decode(route$1.schema.params, state.params) : {};
-			} catch (e) {
-				it.error = e;
-				break;
-			}
-			it.config = { ...config };
-			if (previous?.[i] && !forceRefresh && previous[i].name === route$1.name) {
-				const url = (str) => str ? str.replace(/\/\/+/g, "/") : "/";
-				if (JSON.stringify({
-					part: url(previous[i].part),
-					params: previous[i].config?.params ?? {}
-				}) === JSON.stringify({
-					part: url(route$1.path),
-					params: config.params ?? {}
-				})) {
-					it.props = previous[i].props;
-					it.error = previous[i].error;
-					it.cache = true;
-					context = {
-						...context,
-						...it.props
-					};
-					continue;
-				}
-				forceRefresh = true;
-			}
-			if (!route$1.resolve) continue;
-			try {
-				const args = Object.create(state);
-				Object.assign(args, config, context);
-				const props = await route$1.resolve?.(args) ?? {};
-				it.props = { ...props };
-				context = {
-					...context,
-					...props
-				};
-			} catch (e) {
-				if (e instanceof Redirection) return { redirect: e.redirect };
-				this.log.error("Page resolver has failed", e);
-				it.error = e;
-				break;
-			}
-		}
-		let acc = "";
-		for (let i = 0; i < stack.length; i++) {
-			const it = stack[i];
-			const props = it.props ?? {};
-			const params = { ...it.config?.params };
-			for (const key of Object.keys(params)) params[key] = String(params[key]);
-			acc += "/";
-			acc += it.route.path ? this.compile(it.route.path, params) : "";
-			const path = acc.replace(/\/+/, "/");
-			const localErrorHandler = this.getErrorHandler(it.route);
-			if (localErrorHandler) {
-				const onErrorParent = state.onError;
-				state.onError = (error, context$1) => {
-					const result = localErrorHandler(error, context$1);
-					if (result === void 0) return onErrorParent(error, context$1);
-					return result;
-				};
-			}
-			if (!it.error) try {
-				const element = await this.createElement(it.route, {
-					...it.route.props ? it.route.props() : {},
-					...props,
-					...context
-				});
-				state.layers.push({
-					name: it.route.name,
-					props,
-					part: it.route.path,
-					config: it.config,
-					element: this.renderView(i + 1, path, element, it.route),
-					index: i + 1,
-					path,
-					route: it.route,
-					cache: it.cache
-				});
-			} catch (e) {
-				it.error = e;
-			}
-			if (it.error) try {
-				let element = await state.onError(it.error, state);
-				if (element === void 0) throw it.error;
-				if (element instanceof Redirection) return { redirect: element.redirect };
-				if (element === null) element = this.renderError(it.error);
-				state.layers.push({
-					props,
-					error: it.error,
-					name: it.route.name,
-					part: it.route.path,
-					config: it.config,
-					element: this.renderView(i + 1, path, element, it.route),
-					index: i + 1,
-					path,
-					route: it.route
-				});
-				break;
-			} catch (e) {
-				if (e instanceof Redirection) return { redirect: e.redirect };
-				throw e;
-			}
-		}
-		return { state };
-	}
-	getErrorHandler(route) {
-		if (route.errorHandler) return route.errorHandler;
-		let parent = route.parent;
-		while (parent) {
-			if (parent.errorHandler) return parent.errorHandler;
-			parent = parent.parent;
-		}
-	}
-	async createElement(page, props) {
-		if (page.lazy && page.component) this.log.warn(`Page ${page.name} has both lazy and component options, lazy will be used`);
-		if (page.lazy) return createElement((await page.lazy()).default, props);
-		if (page.component) return createElement(page.component, props);
-	}
-	renderError(error) {
-		return createElement(ErrorViewer_default, {
-			error,
-			alepha: this.alepha
-		});
-	}
-	renderEmptyView() {
-		return createElement(NestedView_default, {});
-	}
-	href(page, params = {}) {
-		const found = this.pages.find((it) => it.name === page.options.name);
-		if (!found) throw new AlephaError(`Page ${page.options.name} not found`);
-		let url = found.path ?? "";
-		let parent = found.parent;
-		while (parent) {
-			url = `${parent.path ?? ""}/${url}`;
-			parent = parent.parent;
-		}
-		url = this.compile(url, params);
-		return url.replace(/\/\/+/g, "/") || "/";
-	}
-	compile(path, params = {}) {
-		for (const [key, value] of Object.entries(params)) path = path.replace(`:${key}`, value);
-		return path;
-	}
-	renderView(index, path, view, page) {
-		view ??= this.renderEmptyView();
-		const element = page.client ? createElement(ClientOnly_default, typeof page.client === "object" ? page.client : {}, view) : view;
-		return createElement(RouterLayerContext.Provider, { value: {
-			index,
-			path,
-			onError: this.getErrorHandler(page) ?? ((error) => this.renderError(error))
-		} }, element);
-	}
-	configure = $hook({
-		on: "configure",
-		handler: () => {
-			let hasNotFoundHandler = false;
-			const pages = this.alepha.primitives($page);
-			const hasParent = (it) => {
-				if (it.options.parent) return true;
-				for (const page of pages) if ((page.options.children ? Array.isArray(page.options.children) ? page.options.children : page.options.children() : []).includes(it)) return true;
-			};
-			for (const page of pages) {
-				if (page.options.path === "/*") hasNotFoundHandler = true;
-				if (hasParent(page)) continue;
-				this.add(this.map(pages, page));
-			}
-			if (!hasNotFoundHandler && pages.length > 0) this.add({
-				path: "/*",
-				name: "notFound",
-				cache: true,
-				component: 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 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 = t.object({
-	REACT_SSR_ENABLED: t.optional(t.boolean()),
-	REACT_ROOT_ID: t.text({ default: "root" })
-});
-/**
-* React server provider configuration atom
-*/
-const reactServerOptions = $atom({
-	name: "alepha.react.server.options",
-	schema: t.object({
-		publicDir: t.string(),
-		staticServer: t.object({
-			disabled: t.boolean(),
-			path: t.string({ description: "URL path where static files will be served." })
-		})
-	}),
-	default: {
-		publicDir: "public",
-		staticServer: {
-			disabled: false,
-			path: "/"
-		}
-	}
-});
-var ReactServerProvider = class {
-	log = $logger();
-	alepha = $inject(Alepha);
-	env = $env(envSchema$1);
-	pageApi = $inject(ReactPageProvider);
-	serverProvider = $inject(ServerProvider);
-	serverStaticProvider = $inject(ServerStaticProvider);
-	serverRouterProvider = $inject(ServerRouterProvider);
-	serverTimingProvider = $inject(ServerTimingProvider);
-	ROOT_DIV_REGEX = new RegExp(`<div([^>]*)\\s+id=["']${this.env.REACT_ROOT_ID}["']([^>]*)>(.*?)<\\/div>`, "is");
-	preprocessedTemplate = null;
-	options = $use(reactServerOptions);
-	/**
-	* Configure the React server provider.
-	*/
-	onConfigure = $hook({
-		on: "configure",
-		handler: async () => {
-			const ssrEnabled = this.alepha.primitives($page).length > 0 && this.env.REACT_SSR_ENABLED !== false;
-			this.alepha.store.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.store.get("alepha.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.component || page.lazy) {
-			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 = [join(process.cwd(), `dist/${this.options.publicDir}`), join(process.cwd(), this.options.publicDir)];
-		for (const it of maybe) if (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.store.set("alepha.react.router.state", state);
-			return {
-				state,
-				html: 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 AlephaError("Missing template for SSR rendering");
-			this.log.trace("Rendering page", { name: route.name });
-			const state = {
-				url,
-				params,
-				query,
-				onError: () => null,
-				layers: []
-			};
-			state.name = route.name;
-			if (this.alepha.has(ServerLinksProvider)) this.alepha.store.set("alepha.server.request.apiLinks", await this.alepha.inject(ServerLinksProvider).getUserApiLinks({
-				user: serverRequest.user,
-				authorization: serverRequest.headers.authorization
-			}));
-			let target = route;
-			while (target) {
-				if (route.can && !route.can()) {
-					this.log.warn(`Access to page '${route.name}' is forbidden by can() check`);
-					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) {
-				this.log.debug("Resolver resulted in redirection", { 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));
-				this.log.debug("Rendering resulted in redirection", { redirect: html.redirect });
-				return;
-			}
-			this.log.trace("Page rendered to HTML successfully");
-			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.store.set("alepha.react.router.state", state);
-		this.serverTimingProvider.beginTiming("renderToString");
-		let app = "";
-		try {
-			app = 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 = 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 = $inject(ReactServerProvider);
-	serverProvider = $inject(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 AlephaError("Invalid HTML response");
-	}
-};
-
-//#endregion
-//#region ../../src/core/providers/ReactBrowserRouterProvider.ts
-var ReactBrowserRouterProvider = class extends RouterProvider {
-	log = $logger();
-	alepha = $inject(Alepha);
-	pageApi = $inject(ReactPageProvider);
-	add(entry) {
-		this.pageApi.add(entry);
-	}
-	configure = $hook({
-		on: "configure",
-		handler: async () => {
-			for (const page of this.pageApi.getPages()) if (page.component || page.lazy) this.push({
-				path: page.match,
-				page
-			});
-		}
-	});
-	async transition(url, previous = [], meta = {}) {
-		const { pathname, search } = url;
-		const state = {
-			url,
-			query: {},
-			params: {},
-			layers: [],
-			onError: () => null,
-			meta
-		};
-		await this.alepha.events.emit("react:action:begin", { type: "transition" });
-		await this.alepha.events.emit("react:transition:begin", {
-			previous: this.alepha.store.get("alepha.react.router.state"),
-			state
-		});
-		try {
-			const { route, params } = this.match(pathname);
-			const query = {};
-			if (search) for (const [key, value] of new URLSearchParams(search).entries()) query[key] = String(value);
-			state.name = route?.page.name;
-			state.query = query;
-			state.params = params ?? {};
-			if (isPageRoute(route)) {
-				const { redirect } = await this.pageApi.createLayers(route.page, state, previous);
-				if (redirect) return redirect;
-			}
-			if (state.layers.length === 0) state.layers.push({
-				name: "not-found",
-				element: createElement(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.store.set("alepha.react.router.state", state);
-		await this.alepha.events.emit("react:action:end", { type: "transition" });
-		await this.alepha.events.emit("react:transition:end", { state });
-	}
-	root(state) {
-		return this.pageApi.root(state);
-	}
+//#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
+*
+* @example
+* ```tsx
+* import { ClientOnly } from "@alepha/react";
+*
+* const MyComponent = () => {
+*   // Avoids SSR issues with Date API
+*   return (
+*     <ClientOnly>
+*       {new Date().toLocaleTimeString()}
+*     </ClientOnly>
+*   );
+* }
+* ```
+*/
+const ClientOnly = (props) => {
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => setMounted(true), []);
+	if (props.disabled) return props.children;
+	return mounted ? props.children : props.fallback;
 };
+var ClientOnly_default = ClientOnly;
 
 //#endregion
-//#region ../../src/core/providers/ReactBrowserProvider.ts
-const envSchema = t.object({ REACT_ROOT_ID: t.text({ default: "root" }) });
+//#region ../../src/core/components/ErrorBoundary.tsx
 /**
-* React browser renderer configuration atom
+* A reusable error boundary for catching rendering errors in any part of the React component tree.
+*
+* It's already included in the Alepha React framework when using page or layout components.
 */
-const reactBrowserOptions = $atom({
-	name: "alepha.react.browser.options",
-	schema: t.object({ scrollRestoration: t.enum(["top", "manual"]) }),
-	default: { scrollRestoration: "top" }
-});
-var ReactBrowserProvider = class {
-	env = $env(envSchema);
-	log = $logger();
-	client = $inject(LinkProvider);
-	alepha = $inject(Alepha);
-	router = $inject(ReactBrowserRouterProvider);
-	dateTimeProvider = $inject(DateTimeProvider);
-	options = $use(reactBrowserOptions);
-	getRootElement() {
-		const root = this.document.getElementById(this.env.REACT_ROOT_ID);
-		if (root) return root;
-		const div = this.document.createElement("div");
-		div.id = this.env.REACT_ROOT_ID;
-		this.document.body.prepend(div);
-		return div;
-	}
-	transitioning;
-	get state() {
-		return this.alepha.store.get("alepha.react.router.state");
-	}
-	/**
-	* Accessor for Document DOM API.
-	*/
-	get document() {
-		return window.document;
+var ErrorBoundary = class extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {};
 	}
 	/**
-	* Accessor for History DOM API.
+	* Update state so the next render shows the fallback UI.
 	*/
-	get history() {
-		return window.history;
+	static getDerivedStateFromError(error) {
+		return { error };
 	}
 	/**
-	* Accessor for Location DOM API.
+	* Lifecycle method called when an error is caught.
+	* You can log the error or perform side effects here.
 	*/
-	get location() {
-		return window.location;
-	}
-	get base() {
-		const base = import.meta.env?.BASE_URL;
-		if (!base || base === "/") return "";
-		return base;
-	}
-	get url() {
-		const url = this.location.pathname + this.location.search;
-		if (this.base) return url.replace(this.base, "");
-		return url;
-	}
-	pushState(path, replace) {
-		const url = this.base + path;
-		if (replace) this.history.replaceState({}, "", url);
-		else this.history.pushState({}, "", url);
-	}
-	async invalidate(props) {
-		const previous = [];
-		this.log.trace("Invalidating layers");
-		if (props) {
-			const [key] = Object.keys(props);
-			const value = props[key];
-			for (const layer of this.state.layers) {
-				if (layer.props?.[key]) {
-					previous.push({
-						...layer,
-						props: {
-							...layer.props,
-							[key]: value
-						}
-					});
-					break;
-				}
-				previous.push(layer);
-			}
-		}
-		await this.render({ previous });
-	}
-	async go(url, options = {}) {
-		this.log.trace(`Going to ${url}`, {
-			url,
-			options
-		});
-		await this.render({
-			url,
-			previous: options.force ? [] : this.state.layers,
-			meta: options.meta
-		});
-		if (this.state.url.pathname + this.state.url.search !== url) {
-			this.pushState(this.state.url.pathname + this.state.url.search);
-			return;
-		}
-		this.pushState(url, options.replace);
-	}
-	async render(options = {}) {
-		const previous = options.previous ?? this.state.layers;
-		const url = options.url ?? this.url;
-		const start = this.dateTimeProvider.now();
-		this.transitioning = {
-			to: url,
-			from: this.state?.url.pathname
-		};
-		this.log.debug("Transitioning...", { to: url });
-		const redirect = await this.router.transition(new URL(`http://localhost${url}`), previous, options.meta);
-		if (redirect) {
-			this.log.info("Redirecting to", { redirect });
-			if (redirect.startsWith("http")) window.location.href = redirect;
-			else return await this.render({ url: redirect });
-		}
-		const ms = this.dateTimeProvider.now().diff(start);
-		this.log.info(`Transition OK [${ms}ms]`, this.transitioning);
-		this.transitioning = void 0;
+	componentDidCatch(error, info) {
+		if (this.props.onError) this.props.onError(error, info);
 	}
-	/**
-	* Get embedded layers from the server.
-	*/
-	getHydrationState() {
-		try {
-			if ("__ssr" in window && typeof window.__ssr === "object") return window.__ssr;
-		} catch (error) {
-			console.error(error);
-		}
+	render() {
+		if (this.state.error) return this.props.fallback(this.state.error);
+		return this.props.children;
 	}
-	onTransitionEnd = $hook({
-		on: "react:transition:end",
-		handler: () => {
-			if (this.options.scrollRestoration === "top" && typeof window !== "undefined" && !this.alepha.isTest()) {
-				this.log.trace("Restoring scroll position to top");
-				window.scrollTo(0, 0);
-			}
-		}
-	});
-	ready = $hook({
-		on: "ready",
-		handler: async () => {
-			const hydration = this.getHydrationState();
-			const previous = hydration?.layers ?? [];
-			if (hydration) {
-				for (const [key, value] of Object.entries(hydration)) if (key !== "layers") this.alepha.store.set(key, value);
-			}
-			await this.render({ previous });
-			const element = this.router.root(this.state);
-			await this.alepha.events.emit("react:browser:render", {
-				element,
-				root: this.getRootElement(),
-				hydration,
-				state: this.state
-			});
-			window.addEventListener("popstate", () => {
-				if (this.base + this.state.url.pathname === this.location.pathname) return;
-				this.log.debug("Popstate event triggered - rendering new state", { url: this.location.pathname + this.location.search });
-				this.render();
-			});
-		}
-	});
 };
+var ErrorBoundary_default = ErrorBoundary;
 
 //#endregion
-//#region ../../src/core/services/ReactRouter.ts
-var ReactRouter = class {
-	alepha = $inject(Alepha);
-	pageApi = $inject(ReactPageProvider);
-	get state() {
-		return this.alepha.store.get("alepha.react.router.state");
-	}
-	get pages() {
-		return this.pageApi.getPages();
-	}
-	get concretePages() {
-		return this.pageApi.getConcretePages();
-	}
-	get browser() {
-		if (this.alepha.isBrowser()) return this.alepha.inject(ReactBrowserProvider);
-	}
-	isActive(href, options = {}) {
-		const current = this.state.url.pathname;
-		let isActive = current === href || current === `${href}/` || `${current}/` === href;
-		if (options.startWith && !isActive) isActive = current.startsWith(href);
-		return isActive;
-	}
-	node(name, config = {}) {
-		const page = this.pageApi.page(name);
-		return {
-			...page,
-			label: page.label ?? page.name,
-			href: this.path(name, config),
-			children: void 0
-		};
-	}
-	path(name, config = {}) {
-		return this.pageApi.pathname(name, {
-			params: {
-				...this.state?.params,
-				...config.params
-			},
-			query: config.query
-		});
-	}
-	/**
-	* Reload the current page.
-	* This is equivalent to calling `go()` with the current pathname and search.
-	*/
-	async reload() {
-		if (!this.browser) return;
-		await this.go(this.location.pathname + this.location.search, {
-			replace: true,
-			force: true
-		});
-	}
-	getURL() {
-		if (!this.browser) return this.state.url;
-		return new URL(this.location.href);
-	}
-	get location() {
-		if (!this.browser) throw new Error("Browser is required");
-		return this.browser.location;
-	}
-	get current() {
-		return this.state;
-	}
-	get pathname() {
-		return this.state.url.pathname;
-	}
-	get query() {
-		const query = {};
-		for (const [key, value] of new URLSearchParams(this.state.url.search).entries()) query[key] = String(value);
-		return query;
-	}
-	async back() {
-		this.browser?.history.back();
-	}
-	async forward() {
-		this.browser?.history.forward();
-	}
-	async invalidate(props) {
-		await this.browser?.invalidate(props);
-	}
-	async go(path, options) {
-		for (const page of this.pages) if (page.name === path) {
-			await this.browser?.go(this.path(path, options), options);
-			return;
-		}
-		await this.browser?.go(path, options);
-	}
-	anchor(path, options = {}) {
-		let href = path;
-		for (const page of this.pages) if (page.name === path) {
-			href = this.path(path, options);
-			break;
-		}
-		return {
-			href: this.base(href),
-			onClick: (ev) => {
-				ev.stopPropagation();
-				ev.preventDefault();
-				this.go(href, options).catch(console.error);
-			}
-		};
-	}
-	base(path) {
-		const base = import.meta.env?.BASE_URL;
-		if (!base || base === "/") return path;
-		return base + path;
-	}
-	/**
-	* Set query params.
-	*
-	* @param record
-	* @param options
-	*/
-	setQueryParams(record, options = {}) {
-		const func = typeof record === "function" ? record : () => record;
-		const search = new URLSearchParams(func(this.query)).toString();
-		const state = search ? `${this.pathname}?${search}` : this.pathname;
-		if (options.push) window.history.pushState({}, "", state);
-		else window.history.replaceState({}, "", state);
-	}
-};
+//#region ../../src/core/contexts/AlephaContext.ts
+/**
+* React context to provide the Alepha instance throughout the component tree.
+*/
+const AlephaContext = createContext(void 0);
 
 //#endregion
 //#region ../../src/core/contexts/AlephaProvider.tsx
 /**
 * AlephaProvider component to initialize and provide Alepha instance to the app.
-* This isn't recommended for apps using alepha/react/router, as Router will handle this for you.
+*
+* This isn't recommended for apps using `@alepha/react/router`, as Router will handle this for you.
 */
 const AlephaProvider = (props) => {
 	const alepha = useMemo(() => Alepha.create(), []);
@@ -1905,6 +98,26 @@ const AlephaProvider = (props) => {
 	});
 };
 
+//#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 = useContext(AlephaContext);
+	if (!alepha) throw new AlephaError("Hook 'useAlepha()' must be used within an AlephaContext.Provider");
+	return alepha;
+};
+
 //#endregion
 //#region ../../src/core/hooks/useInject.ts
 /**
@@ -2144,149 +357,72 @@ function useAction(options, deps) {
 }
 
 //#endregion
-//#region ../../src/core/hooks/useClient.ts
+//#region ../../src/core/hooks/useEvents.ts
 /**
-* Hook to get a virtual client for the specified scope.
+* Allow subscribing to multiple Alepha events. See {@link Hooks} for available events.
 *
-* It's the React-hook version of `$client()`, from `AlephaServerLinks` module.
+* 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 useClient = (scope) => {
-	return useInject(LinkProvider).client(scope);
-};
-
-//#endregion
-//#region ../../src/core/hooks/useSchema.ts
-const useSchema = (action) => {
-	const name = action.name;
+const useEvents = (opts, deps) => {
 	const alepha = useAlepha();
-	const httpClient = useInject(HttpClient);
-	const [schema, setSchema] = useState(ssrSchemaLoading(alepha, name));
 	useEffect(() => {
-		if (!schema.loading) return;
-		httpClient.fetch(`${LinkProvider.path.apiLinks}/${name}/schema`, { localCache: true }).then((it) => setSchema(it.data));
-	}, [name]);
-	return schema;
-};
-/**
-* Get an action schema during server-side rendering (SSR) or client-side rendering (CSR).
-*/
-const ssrSchemaLoading = (alepha, name) => {
-	if (!alepha.isBrowser()) {
-		const linkProvider = alepha.inject(LinkProvider);
-		const can = linkProvider.getServerLinks().find((link) => link.name === name);
-		if (can) {
-			const schema$1 = linkProvider.links.find((it) => it.name === name)?.schema;
-			if (schema$1) {
-				can.schema = schema$1;
-				return schema$1;
-			}
-		}
-		return { loading: true };
-	}
-	const schema = alepha.inject(LinkProvider).links.find((it) => it.name === name)?.schema;
-	if (schema) return schema;
-	return { loading: true };
+		if (!alepha.isBrowser()) return;
+		const subs = [];
+		for (const [name, hook] of Object.entries(opts)) subs.push(alepha.events.on(name, hook));
+		return () => {
+			for (const clear of subs) clear();
+		};
+	}, deps);
 };
 
 //#endregion
-//#region ../../src/core/hooks/useRouter.ts
+//#region ../../src/core/hooks/useClient.ts
 /**
-* Use this hook to access the React Router instance.
-*
-* You can add a type parameter to specify the type of your application.
-* This will allow you to use the router in a typesafe way.
-*
-* @example
-* class App {
-*   home = $page();
-* }
+* Hook to get a virtual client for the specified scope.
 *
-* const router = useRouter<App>();
-* router.go("home"); // typesafe
+* It's the React-hook version of `$client()`, from `AlephaServerLinks` module.
 */
-const useRouter = () => {
-	return useInject(ReactRouter);
-};
-
-//#endregion
-//#region ../../src/core/components/Link.tsx
-const Link = (props) => {
-	const router = useRouter();
-	return /* @__PURE__ */ jsx("a", {
-		...props,
-		...router.anchor(props.href),
-		children: props.children
-	});
-};
-var Link_default = Link;
-
-//#endregion
-//#region ../../src/core/hooks/useActive.ts
-const useActive = (args) => {
-	const router = useRouter();
-	const [isPending, setPending] = useState(false);
-	useRouterState().url.pathname;
-	const options = typeof args === "string" ? { href: args } : {
-		...args,
-		href: args.href
-	};
-	const href = options.href;
-	const isActive = router.isActive(href, options);
-	return {
-		isPending,
-		isActive,
-		anchorProps: {
-			href: router.base(href),
-			onClick: async (ev) => {
-				ev?.stopPropagation();
-				ev?.preventDefault();
-				if (isActive) return;
-				if (isPending) return;
-				setPending(true);
-				try {
-					await router.go(href);
-				} finally {
-					setPending(false);
-				}
-			}
-		}
-	};
+const useClient = (scope) => {
+	return useInject(LinkProvider).client(scope);
 };
 
 //#endregion
-//#region ../../src/core/hooks/useQueryParams.ts
-/**
-* Not well tested. Use with caution.
-*/
-const useQueryParams = (schema, options = {}) => {
+//#region ../../src/core/hooks/useStore.ts
+function useStore(target, defaultValue) {
 	const alepha = useAlepha();
-	const key = options.key ?? "q";
-	const router = useRouter();
-	const querystring = router.query[key];
-	const [queryParams = {}, setQueryParams] = useState(decode(alepha, schema, router.query[key]));
+	useMemo(() => {
+		if (defaultValue != null && alepha.store.get(target) == null) alepha.store.set(target, defaultValue);
+	}, [defaultValue]);
+	const [state, setState] = useState(alepha.store.get(target));
 	useEffect(() => {
-		setQueryParams(decode(alepha, schema, querystring));
-	}, [querystring]);
-	return [queryParams, (queryParams$1) => {
-		setQueryParams(queryParams$1);
-		router.setQueryParams((data) => {
-			return {
-				...data,
-				[key]: encode(alepha, schema, queryParams$1)
-			};
+		if (!alepha.isBrowser()) return;
+		const key = target instanceof Atom ? target.key : target;
+		return alepha.events.on("state:mutate", (ev) => {
+			if (ev.key === key) setState(ev.value);
 		});
+	}, []);
+	return [state, (value) => {
+		alepha.store.set(target, value);
 	}];
-};
-const encode = (alepha, schema, data) => {
-	return btoa(JSON.stringify(alepha.codec.decode(schema, data)));
-};
-const decode = (alepha, schema, data) => {
-	try {
-		return alepha.codec.decode(schema, JSON.parse(atob(decodeURIComponent(data))));
-	} catch {
-		return;
-	}
-};
+}
 
 //#endregion
 //#region ../../src/core/index.ts
@@ -2300,22 +436,8 @@ const decode = (alepha, schema, data) => {
 * @see {@link $page}
 * @module alepha.react
 */
-const AlephaReact = $module({
-	name: "alepha.react",
-	primitives: [$page],
-	services: [
-		ReactServerProvider,
-		ReactPageProvider,
-		ReactRouter,
-		ReactPageService,
-		ReactPageServerService
-	],
-	register: (alepha) => alepha.with(AlephaDateTime).with(AlephaServer).with(AlephaServerCache).with(AlephaServerLinks).with({
-		provide: ReactPageService,
-		use: ReactPageServerService
-	}).with(ReactServerProvider).with(ReactPageProvider).with(ReactRouter)
-});
+const AlephaReact = $module({ name: "alepha.react.core" });
 
 //#endregion
-export { $page, AlephaContext, AlephaProvider, AlephaReact, ClientOnly_default as ClientOnly, ErrorBoundary_default as ErrorBoundary, ErrorViewer_default as ErrorViewer, Link_default as Link, NestedView_default as NestedView, NotFoundPage as NotFound, PagePrimitive, ReactBrowserProvider, ReactPageProvider, ReactRouter, ReactServerProvider, Redirection, RouterLayerContext, isPageRoute, reactBrowserOptions, reactServerOptions, ssrSchemaLoading, useAction, useActive, useAlepha, useClient, useEvents, useInject, useQueryParams, useRouter, useRouterState, useSchema, useStore };
+export { AlephaContext, AlephaProvider, AlephaReact, ClientOnly_default as ClientOnly, ErrorBoundary_default as ErrorBoundary, useAction, useAlepha, useClient, useEvents, useInject, useStore };
 //# sourceMappingURL=index.js.map