@alepha/react 0.14.0 → 0.14.2

package/dist/{core → router}/index.browser.js

@@ -1,14 +1,18 @@
-import { $atom, $env, $hook, $inject, $module, $use, Alepha, AlephaError, Atom, KIND, Primitive, createPrimitive, t } from "alepha";
+import { $atom, $env, $hook, $inject, $module, $use, Alepha, AlephaError, KIND, Primitive, createPrimitive, t } from "alepha";
 import { AlephaDateTime, DateTimeProvider } from "alepha/datetime";
-import { AlephaServer, HttpClient } from "alepha/server";
-import { AlephaServerLinks, LinkProvider } from "alepha/server/links";
 import { $logger } from "alepha/logger";
+import { AlephaServerLinks, LinkProvider } from "alepha/server/links";
 import { RouterProvider } from "alepha/router";
-import React, { StrictMode, createContext, createElement, memo, use, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { StrictMode, createContext, createElement, memo, use, useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AlephaContext, AlephaReact, ClientOnly, ErrorBoundary, useAlepha, useEvents, useInject, useStore } from "@alepha/react";
 import { createRoot, hydrateRoot } from "react-dom/client";
+import { AlephaServer } from "alepha/server";
 
-//#region ../../src/core/services/ReactPageService.ts
+//#region ../../src/router/services/ReactPageService.ts
+/**
+* $page methods interface.
+*/
 var ReactPageService = class {
 	fetch(pathname, options = {}) {
 		throw new AlephaError("Fetch is not available for this environment.");
@@ -19,7 +23,7 @@ var ReactPageService = class {
 };
 
 //#endregion
-//#region ../../src/core/primitives/$page.ts
+//#region ../../src/router/primitives/$page.ts
 /**
 * Main primitive for defining a React route in the application.
 *
@@ -144,62 +148,44 @@ var PagePrimitive = class extends Primitive {
 $page[KIND] = PagePrimitive;
 
 //#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/components/ClientOnly.tsx
+//#region ../../src/router/components/NotFound.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
+* Default 404 Not Found page 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;
+const NotFound = (props) => /* @__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"
+	})]
+});
+var NotFound_default = NotFound;
 
 //#endregion
-//#region ../../src/core/components/ErrorViewer.tsx
+//#region ../../src/router/components/ErrorViewer.tsx
 /**
 * Error viewer component that displays error details in development mode
 */
@@ -585,17 +571,30 @@ const styles = {
 };
 
 //#endregion
-//#region ../../src/core/contexts/RouterLayerContext.ts
+//#region ../../src/router/contexts/RouterLayerContext.ts
 const RouterLayerContext = createContext(void 0);
 
 //#endregion
-//#region ../../src/core/errors/Redirection.ts
+//#region ../../src/router/errors/Redirection.ts
 /**
 * Used for Redirection during the page loading.
 *
 * Depends on the context, it can be thrown or just returned.
+*
+* @example
+* ```ts
+* import { Redirection } from "@alepha/react";
+*
+* const MyPage = $page({
+*   resolve: async () => {
+*    if (needRedirect) {
+*      throw new Redirection("/new-path");
+*    }
+*   },
+* });
+* ```
 */
-var Redirection = class extends Error {
+var Redirection = class extends AlephaError {
 	redirect;
 	constructor(redirect) {
 		super("Redirection");
@@ -604,88 +603,7 @@ var Redirection = class extends Error {
 };
 
 //#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
+//#region ../../src/router/hooks/useRouterState.ts
 const useRouterState = () => {
 	const [state] = useStore("alepha.react.router.state");
 	if (!state) throw new AlephaError("Missing react router state");
@@ -693,38 +611,7 @@ const useRouterState = () => {
 };
 
 //#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
+//#region ../../src/router/components/NestedView.tsx
 /**
 * A component that renders the current view of the nested router layer.
 *
@@ -809,7 +696,7 @@ const NestedView = (props) => {
 		})
 	});
 	if (props.errorBoundary === false) return /* @__PURE__ */ jsx(Fragment, { children: element });
-	if (props.errorBoundary) return /* @__PURE__ */ jsx(ErrorBoundary_default, {
+	if (props.errorBoundary) return /* @__PURE__ */ jsx(ErrorBoundary, {
 		fallback: props.errorBoundary,
 		children: element
 	});
@@ -821,7 +708,7 @@ const NestedView = (props) => {
 		if (result instanceof Redirection) return "Redirection inside ErrorBoundary is not allowed.";
 		return result;
 	};
-	return /* @__PURE__ */ jsx(ErrorBoundary_default, {
+	return /* @__PURE__ */ jsx(ErrorBoundary, {
 		fallback,
 		children: element
 	});
@@ -854,8 +741,11 @@ function parseAnimation(animationLike, state, type = "enter") {
 }
 
 //#endregion
-//#region ../../src/core/providers/ReactPageProvider.ts
+//#region ../../src/router/providers/ReactPageProvider.ts
 const envSchema$1 = t.object({ REACT_STRICT_MODE: t.boolean({ default: true }) });
+/**
+* Handle page routes for React applications. (Browser and Server)
+*/
 var ReactPageProvider = class {
 	log = $logger();
 	env = $env(envSchema$1);
@@ -1097,7 +987,7 @@ var ReactPageProvider = class {
 	}
 	renderView(index, path, view, page) {
 		view ??= this.renderEmptyView();
-		const element = page.client ? createElement(ClientOnly_default, typeof page.client === "object" ? page.client : {}, view) : view;
+		const element = page.client ? createElement(ClientOnly, typeof page.client === "object" ? page.client : {}, view) : view;
 		return createElement(RouterLayerContext.Provider, { value: {
 			index,
 			path,
@@ -1122,7 +1012,7 @@ var ReactPageProvider = class {
 				path: "/*",
 				name: "notFound",
 				cache: true,
-				component: NotFoundPage,
+				component: NotFound_default,
 				onServerResponse: ({ reply }) => {
 					reply.status = 404;
 				}
@@ -1177,7 +1067,10 @@ const isPageRoute = (it) => {
 };
 
 //#endregion
-//#region ../../src/core/providers/ReactBrowserRouterProvider.ts
+//#region ../../src/router/providers/ReactBrowserRouterProvider.ts
+/**
+* Implementation of AlephaRouter for React in browser environment.
+*/
 var ReactBrowserRouterProvider = class extends RouterProvider {
 	log = $logger();
 	alepha = $inject(Alepha);
@@ -1222,7 +1115,7 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
 			}
 			if (state.layers.length === 0) state.layers.push({
 				name: "not-found",
-				element: createElement(NotFoundPage),
+				element: createElement(NotFound_default),
 				index: 0,
 				path: "/"
 			});
@@ -1259,7 +1152,7 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
 };
 
 //#endregion
-//#region ../../src/core/providers/ReactBrowserProvider.ts
+//#region ../../src/router/providers/ReactBrowserProvider.ts
 const envSchema = t.object({ REACT_ROOT_ID: t.text({ default: "root" }) });
 /**
 * React browser renderer configuration atom
@@ -1424,27 +1317,12 @@ var ReactBrowserProvider = class {
 };
 
 //#endregion
-//#region ../../src/core/providers/ReactBrowserRendererProvider.ts
-var ReactBrowserRendererProvider = class {
-	log = $logger();
-	root;
-	onBrowserRender = $hook({
-		on: "react:browser:render",
-		handler: async ({ hydration, root, element }) => {
-			if (hydration?.layers) {
-				this.root = hydrateRoot(root, element);
-				this.log.info("Hydrated root element");
-			} else {
-				this.root ??= createRoot(root);
-				this.root.render(element);
-				this.log.info("Created root element");
-			}
-		}
-	});
-};
-
-//#endregion
-//#region ../../src/core/services/ReactRouter.ts
+//#region ../../src/router/services/ReactRouter.ts
+/**
+* Friendly browser router API.
+*
+* Can be safely used server-side, but most methods will be no-op.
+*/
 var ReactRouter = class {
 	alepha = $inject(Alepha);
 	pageApi = $inject(ReactPageProvider);
@@ -1468,6 +1346,11 @@ var ReactRouter = class {
 	}
 	node(name, config = {}) {
 		const page = this.pageApi.page(name);
+		if (!page.lazy && !page.component) return {
+			...page,
+			label: page.label ?? page.name,
+			children: void 0
+		};
 		return {
 			...page,
 			label: page.label ?? page.name,
@@ -1566,311 +1449,30 @@ var ReactRouter = class {
 };
 
 //#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.
-*/
-const AlephaProvider = (props) => {
-	const alepha = useMemo(() => Alepha.create(), []);
-	const [started, setStarted] = useState(false);
-	const [error, setError] = useState();
-	useEffect(() => {
-		alepha.start().then(() => setStarted(true)).catch((err) => setError(err));
-	}, [alepha]);
-	if (error) return props.onError(error);
-	if (!started) return props.onLoading();
-	return /* @__PURE__ */ jsx(AlephaContext.Provider, {
-		value: alepha,
-		children: props.children
-	});
-};
-
-//#endregion
-//#region ../../src/core/hooks/useInject.ts
-/**
-* Hook to inject a service instance.
-* It's a wrapper of `useAlepha().inject(service)` with a memoization.
-*/
-const useInject = (service) => {
-	const alepha = useAlepha();
-	return useMemo(() => alepha.inject(service), []);
-};
-
-//#endregion
-//#region ../../src/core/hooks/useAction.ts
-/**
-* Hook for handling async actions with automatic error handling and event emission.
-*
-* By default, prevents concurrent executions - if an action is running and you call it again,
-* the second call will be ignored. Use `debounce` option to delay execution instead.
-*
-* Emits lifecycle events:
-* - `react:action:begin` - When action starts
-* - `react:action:success` - When action completes successfully
-* - `react:action:error` - When action throws an error
-* - `react:action:end` - Always emitted at the end
-*
-* @example Basic usage
-* ```tsx
-* const action = useAction({
-*   handler: async (data) => {
-*     await api.save(data);
-*   }
-* }, []);
-*
-* <button onClick={() => action.run(data)} disabled={action.loading}>
-*   Save
-* </button>
-* ```
-*
-* @example With debounce (search input)
-* ```tsx
-* const search = useAction({
-*   handler: async (query: string) => {
-*     await api.search(query);
-*   },
-*   debounce: 300 // Wait 300ms after last call
-* }, []);
-*
-* <input onChange={(e) => search.run(e.target.value)} />
-* ```
-*
-* @example Run on component mount
-* ```tsx
-* const fetchData = useAction({
-*   handler: async () => {
-*     const data = await api.getData();
-*     return data;
-*   },
-*   runOnInit: true // Runs once when component mounts
-* }, []);
-* ```
-*
-* @example Run periodically (polling)
-* ```tsx
-* const pollStatus = useAction({
-*   handler: async () => {
-*     const status = await api.getStatus();
-*     return status;
-*   },
-*   runEvery: 5000 // Run every 5 seconds
-* }, []);
-*
-* // Or with duration tuple
-* const pollStatus = useAction({
-*   handler: async () => {
-*     const status = await api.getStatus();
-*     return status;
-*   },
-*   runEvery: [30, 'seconds'] // Run every 30 seconds
-* }, []);
-* ```
-*
-* @example With AbortController
-* ```tsx
-* const fetch = useAction({
-*   handler: async (url, { signal }) => {
-*     const response = await fetch(url, { signal });
-*     return response.json();
-*   }
-* }, []);
-* // Automatically cancelled on unmount or when new request starts
-* ```
-*
-* @example With error handling
-* ```tsx
-* const deleteAction = useAction({
-*   handler: async (id: string) => {
-*     await api.delete(id);
-*   },
-*   onError: (error) => {
-*     if (error.code === 'NOT_FOUND') {
-*       // Custom error handling
-*     }
-*   }
-* }, []);
-*
-* {deleteAction.error && <div>Error: {deleteAction.error.message}</div>}
-* ```
-*
-* @example Global error handling
-* ```tsx
-* // In your root app setup
-* alepha.events.on("react:action:error", ({ error }) => {
-*   toast.danger(error.message);
-*   Sentry.captureException(error);
-* });
-* ```
-*/
-function useAction(options, deps) {
-	const alepha = useAlepha();
-	const dateTimeProvider = useInject(DateTimeProvider);
-	const [loading, setLoading] = useState(false);
-	const [error, setError] = useState();
-	const isExecutingRef = useRef(false);
-	const debounceTimerRef = useRef(void 0);
-	const abortControllerRef = useRef(void 0);
-	const isMountedRef = useRef(true);
-	const intervalRef = useRef(void 0);
-	useEffect(() => {
-		return () => {
-			isMountedRef.current = false;
-			if (debounceTimerRef.current) {
-				dateTimeProvider.clearTimeout(debounceTimerRef.current);
-				debounceTimerRef.current = void 0;
-			}
-			if (intervalRef.current) {
-				dateTimeProvider.clearInterval(intervalRef.current);
-				intervalRef.current = void 0;
-			}
-			if (abortControllerRef.current) {
-				abortControllerRef.current.abort();
-				abortControllerRef.current = void 0;
-			}
-		};
-	}, []);
-	const executeAction = useCallback(async (...args) => {
-		if (isExecutingRef.current) return;
-		if (abortControllerRef.current) abortControllerRef.current.abort();
-		const abortController = new AbortController();
-		abortControllerRef.current = abortController;
-		isExecutingRef.current = true;
-		setLoading(true);
-		setError(void 0);
-		await alepha.events.emit("react:action:begin", {
-			type: "custom",
-			id: options.id
-		});
-		try {
-			const result = await options.handler(...args, { signal: abortController.signal });
-			if (!isMountedRef.current || abortController.signal.aborted) return;
-			await alepha.events.emit("react:action:success", {
-				type: "custom",
-				id: options.id
-			});
-			if (options.onSuccess) await options.onSuccess(result);
-			return result;
-		} catch (err) {
-			if (err instanceof Error && err.name === "AbortError") return;
-			if (!isMountedRef.current) return;
-			const error$1 = err;
-			setError(error$1);
-			await alepha.events.emit("react:action:error", {
-				type: "custom",
-				id: options.id,
-				error: error$1
-			});
-			if (options.onError) await options.onError(error$1);
-			else throw error$1;
-		} finally {
-			isExecutingRef.current = false;
-			setLoading(false);
-			await alepha.events.emit("react:action:end", {
-				type: "custom",
-				id: options.id
-			});
-			if (abortControllerRef.current === abortController) abortControllerRef.current = void 0;
-		}
-	}, [
-		...deps,
-		options.id,
-		options.onError,
-		options.onSuccess
-	]);
-	const handler = useCallback(async (...args) => {
-		if (options.debounce) {
-			if (debounceTimerRef.current) dateTimeProvider.clearTimeout(debounceTimerRef.current);
-			return new Promise((resolve) => {
-				debounceTimerRef.current = dateTimeProvider.createTimeout(async () => {
-					resolve(await executeAction(...args));
-				}, options.debounce ?? 0);
-			});
-		}
-		return executeAction(...args);
-	}, [executeAction, options.debounce]);
-	const cancel = useCallback(() => {
-		if (debounceTimerRef.current) {
-			dateTimeProvider.clearTimeout(debounceTimerRef.current);
-			debounceTimerRef.current = void 0;
-		}
-		if (abortControllerRef.current) {
-			abortControllerRef.current.abort();
-			abortControllerRef.current = void 0;
-		}
-		if (isMountedRef.current) {
-			isExecutingRef.current = false;
-			setLoading(false);
-		}
-	}, []);
-	useEffect(() => {
-		if (options.runOnInit) handler(...[]);
-	}, deps);
-	useEffect(() => {
-		if (!options.runEvery) return;
-		intervalRef.current = dateTimeProvider.createInterval(() => handler(...[]), options.runEvery, true);
-		return () => {
-			if (intervalRef.current) {
-				dateTimeProvider.clearInterval(intervalRef.current);
-				intervalRef.current = void 0;
-			}
-		};
-	}, [handler, options.runEvery]);
-	return {
-		run: handler,
-		loading,
-		error,
-		cancel
-	};
-}
-
-//#endregion
-//#region ../../src/core/hooks/useClient.ts
-/**
-* Hook to get a virtual client for the specified scope.
-*
-* It's the React-hook version of `$client()`, from `AlephaServerLinks` module.
-*/
-const useClient = (scope) => {
-	return useInject(LinkProvider).client(scope);
-};
-
-//#endregion
-//#region ../../src/core/hooks/useSchema.ts
-const useSchema = (action) => {
-	const name = action.name;
-	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;
-};
+//#region ../../src/router/providers/ReactBrowserRendererProvider.ts
 /**
-* Get an action schema during server-side rendering (SSR) or client-side rendering (CSR).
+* Browser specific React renderer (react-dom/client interface)
 */
-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;
+var ReactBrowserRendererProvider = class {
+	log = $logger();
+	root;
+	onBrowserRender = $hook({
+		on: "react:browser:render",
+		handler: async ({ hydration, root, element }) => {
+			if (hydration?.layers) {
+				this.root = hydrateRoot(root, element);
+				this.log.info("Hydrated root element");
+			} else {
+				this.root ??= createRoot(root);
+				this.root.render(element);
+				this.log.info("Created root element");
 			}
 		}
-		return { loading: true };
-	}
-	const schema = alepha.inject(LinkProvider).links.find((it) => it.name === name)?.schema;
-	if (schema) return schema;
-	return { loading: true };
+	});
 };
 
 //#endregion
-//#region ../../src/core/hooks/useRouter.ts
+//#region ../../src/router/hooks/useRouter.ts
 /**
 * Use this hook to access the React Router instance.
 *
@@ -1890,23 +1492,31 @@ const useRouter = () => {
 };
 
 //#endregion
-//#region ../../src/core/components/Link.tsx
+//#region ../../src/router/components/Link.tsx
+/**
+* Link component for client-side navigation.
+*
+* It's a simple wrapper around an anchor (`<a>`) element using the `useRouter` hook.
+*/
 const Link = (props) => {
 	const router = useRouter();
-	return /* @__PURE__ */ jsx("a", {
+	return createElement("a", {
 		...props,
-		...router.anchor(props.href),
-		children: props.children
-	});
+		...router.anchor(props.href)
+	}, props.children);
 };
 var Link_default = Link;
 
 //#endregion
-//#region ../../src/core/hooks/useActive.ts
+//#region ../../src/router/hooks/useActive.ts
+/**
+* Hook to determine if a given route is active and to provide anchor props for navigation.
+* This hook refreshes on router state changes.
+*/
 const useActive = (args) => {
+	useRouterState();
 	const router = useRouter();
 	const [isPending, setPending] = useState(false);
-	useRouterState().url.pathname;
 	const options = typeof args === "string" ? { href: args } : {
 		...args,
 		href: args.href
@@ -1935,9 +1545,9 @@ const useActive = (args) => {
 };
 
 //#endregion
-//#region ../../src/core/hooks/useQueryParams.ts
+//#region ../../src/router/hooks/useQueryParams.ts
 /**
-* Not well tested. Use with caution.
+* Hook to manage query parameters in the URL using a defined schema.
 */
 const useQueryParams = (schema, options = {}) => {
 	const alepha = useAlepha();
@@ -1970,9 +1580,9 @@ const decode = (alepha, schema, data) => {
 };
 
 //#endregion
-//#region ../../src/core/index.browser.ts
-const AlephaReact = $module({
-	name: "alepha.react",
+//#region ../../src/router/index.browser.ts
+const AlephaReactRouter = $module({
+	name: "alepha.react.router",
 	primitives: [$page],
 	services: [
 		ReactPageProvider,
@@ -1982,9 +1592,9 @@ const AlephaReact = $module({
 		ReactBrowserRendererProvider,
 		ReactPageService
 	],
-	register: (alepha) => alepha.with(AlephaDateTime).with(AlephaServer).with(AlephaServerLinks).with(ReactPageProvider).with(ReactBrowserProvider).with(ReactBrowserRouterProvider).with(ReactBrowserRendererProvider).with(ReactRouter)
+	register: (alepha) => alepha.with(AlephaReact).with(AlephaDateTime).with(AlephaServer).with(AlephaServerLinks).with(ReactPageProvider).with(ReactBrowserProvider).with(ReactBrowserRouterProvider).with(ReactBrowserRendererProvider).with(ReactRouter)
 });
 
 //#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, ReactBrowserRouterProvider, ReactPageProvider, ReactRouter, Redirection, RouterLayerContext, isPageRoute, reactBrowserOptions, ssrSchemaLoading, useAction, useActive, useAlepha, useClient, useEvents, useInject, useQueryParams, useRouter, useRouterState, useSchema, useStore };
+export { $page, AlephaReactRouter, ErrorViewer_default as ErrorViewer, Link_default as Link, NestedView_default as NestedView, NotFound_default as NotFound, PagePrimitive, ReactBrowserProvider, ReactBrowserRendererProvider, ReactBrowserRouterProvider, ReactPageProvider, ReactPageService, ReactRouter, Redirection, RouterLayerContext, isPageRoute, reactBrowserOptions, useActive, useQueryParams, useRouter, useRouterState };
 //# sourceMappingURL=index.browser.js.map