@alepha/ui 0.15.1 → 0.15.3

package/dist/core/index.js

@@ -1,24 +1,50 @@
-import { AlephaReactForm, FormValidationError, useForm, useFormState } from "@alepha/react/form";
-import { $head, AlephaReactHead } from "@alepha/react/head";
-import { AlephaReactI18n, useI18n } from "@alepha/react/i18n";
-import { $atom, $inject, $module, Alepha, AlephaError, TypeBoxError, t } from "alepha";
+import { $atom, $context, $inject, $module, Alepha, AlephaError, TypeBoxError, t } from "alepha";
+import { AlephaReactForm, FormValidationError, useForm, useFormState } from "alepha/react/form";
+import { $head, AlephaReactHead } from "alepha/react/head";
+import { AlephaReactI18n, useI18n } from "alepha/react/i18n";
 import { $cookie } from "alepha/server/cookies";
-import { $page, NestedView, useActive, useRouter } from "@alepha/react/router";
-import { useAction, useEvents, useInject, useStore } from "@alepha/react";
-import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Box, Burger, Button, Card, Checkbox, Collapse, ColorInput, ColorSchemeScript, CopyButton, Divider, Fieldset, FileInput, Flex, Flex as Flex$1, Grid, Group, Input, Kbd, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, Slider, Stack, Switch, Table, TagsInput, Text, Text as Text$1, TextInput, Textarea, ThemeIcon, Tooltip, UnstyledButton, useComputedColorScheme, useMantineColorScheme, useMantineTheme } from "@mantine/core";
+import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Box, Burger, Button, Card, Checkbox, Collapse, ColorInput, ColorSchemeScript, Container, CopyButton, Divider, Fieldset, FileInput, Flex, Flex as Flex$1, Grid, Group, Image, Input, Kbd, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, Slider, Stack, Switch, Table, TagsInput, Text, Text as Text$1, TextInput, Textarea, ThemeIcon, Tooltip, UnstyledButton, useComputedColorScheme, useMantineColorScheme, useMantineTheme } from "@mantine/core";
 import { ModalsProvider, modals } from "@mantine/modals";
+import { IconAlertTriangle, IconArrowDown, IconArrowLeft, IconArrowUp, IconArrowsSort, IconAt, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClock, IconColorPicker, IconColumns, IconCopy, IconFile, IconFilter, IconGripVertical, IconHash, IconInfoCircle, IconInfoTriangle, IconKey, IconLanguage, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightCollapse, IconLetterCase, IconLink, IconList, IconMail, IconMoon, IconPalette, IconPhone, IconPlus, IconRefresh, IconSearch, IconSelector, IconSquareRounded, IconSun, IconToggleLeft, IconTrash, IconX } from "@tabler/icons-react";
+import { Children, createElement, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Notifications, notifications } from "@mantine/notifications";
+import { $page, Link, NestedView, useActive, useRouter } from "alepha/react/router";
 import { NavigationProgress, nprogress } from "@mantine/nprogress";
-import { IconAlertTriangle, IconArrowDown, IconArrowUp, IconArrowsSort, IconAt, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClock, IconColorPicker, IconColumns, IconCopy, IconFile, IconFilter, IconGripVertical, IconHash, IconInfoCircle, IconInfoTriangle, IconKey, IconLanguage, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightCollapse, IconLetterCase, IconLink, IconList, IconMail, IconMoon, IconPalette, IconPhone, IconPlus, IconRefresh, IconSearch, IconSelector, IconSquareRounded, IconSun, IconToggleLeft, IconTrash, IconX } from "@tabler/icons-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ClientOnly, useAction, useEvents, useInject, useStore } from "alepha/react";
 import { Spotlight, spotlight } from "@mantine/spotlight";
-import { Children, createElement, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ui as ui$1 } from "@alepha/ui";
+import { useDebouncedCallback, useOs } from "@mantine/hooks";
 import { DateInput, DateTimePicker, TimeInput } from "@mantine/dates";
 import { parseQueryString } from "alepha/orm";
-import { useDebouncedCallback } from "@mantine/hooks";
 import { DateTimeProvider } from "alepha/datetime";
 
+//#region ../../src/core/atoms/alephaSidebarAtom.ts
+const alephaSidebarAtom = $atom({
+	name: "alepha.ui.sidebar",
+	schema: t.object({
+		opened: t.boolean(),
+		collapsed: t.boolean(),
+		width: t.number(),
+		defaultWidth: t.number(),
+		collapsedWidth: t.number(),
+		maxWidth: t.number(),
+		collapseThreshold: t.number(),
+		hoverDelay: t.number()
+	}),
+	default: {
+		opened: false,
+		collapsed: false,
+		width: 300,
+		defaultWidth: 300,
+		collapsedWidth: 78,
+		maxWidth: 500,
+		collapseThreshold: 240,
+		hoverDelay: 300
+	}
+});
+
+//#endregion
 //#region ../../src/core/atoms/alephaThemeAtom.ts
 const alephaThemeAtom = $atom({
 	name: "alepha.ui.theme",
@@ -193,222 +219,6 @@ var ThemeProvider = class {
 	}
 };
 
-//#endregion
-//#region ../../src/core/hooks/useTheme.ts
-/**
-* Hook to get and set the current theme.
-*
-* Returns a tuple with the current theme and a function to set the theme.
-*
-* ```tsx
-* const [theme, setTheme] = useTheme();
-* ```
-*/
-const useTheme = () => {
-	useStore(alephaThemeAtom);
-	const themeProvider = useInject(ThemeProvider);
-	const theme = themeProvider.getTheme();
-	const setTheme = (theme) => {
-		themeProvider.setTheme(theme.index);
-	};
-	return [theme, setTheme];
-};
-
-//#endregion
-//#region ../../src/core/services/ToastService.tsx
-var ToastService = class {
-	raw = notifications;
-	options = { default: {
-		radius: "md",
-		withBorder: true,
-		withCloseButton: true,
-		autoClose: 5e3,
-		position: "top-center"
-	} };
-	show(options) {
-		notifications.show({
-			...this.options.default,
-			...options
-		});
-	}
-	info(options) {
-		if (typeof options === "string") options = { message: options };
-		this.show({
-			color: "blue",
-			icon: /* @__PURE__ */ jsx(IconInfoCircle, { size: 20 }),
-			title: "Info",
-			message: "Information notification",
-			...options
-		});
-	}
-	success(options) {
-		if (typeof options === "string") options = { message: options };
-		this.show({
-			color: "green",
-			icon: /* @__PURE__ */ jsx(IconCheck, { size: 16 }),
-			title: "Success",
-			message: "Operation completed successfully",
-			...options
-		});
-	}
-	warning(options) {
-		if (typeof options === "string") options = { message: options };
-		this.show({
-			color: "yellow",
-			icon: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 20 }),
-			title: "Warning",
-			message: "Please review this warning",
-			...options
-		});
-	}
-	danger(options) {
-		if (typeof options === "string") options = { message: options };
-		this.show({
-			color: "red",
-			icon: /* @__PURE__ */ jsx(IconX, { size: 20 }),
-			title: "Error",
-			message: "An error occurred",
-			...options
-		});
-	}
-};
-
-//#endregion
-//#region ../../src/core/hooks/useToast.ts
-/**
-* Use this hook to access the Toast Service for showing notifications.
-*
-* @example
-* ```tsx
-* const toast = useToast();
-* toast.success({ message: "Operation completed successfully!" });
-* toast.error({ title: "Error", message: "Something went wrong" });
-* ```
-*/
-const useToast = () => {
-	return useInject(ToastService);
-};
-
-//#endregion
-//#region ../../src/core/constants/ui.ts
-const ui = {
-	colors: {
-		transparent: "transparent",
-		background: "var(--alepha-background)",
-		surface: "var(--alepha-surface)",
-		elevated: "var(--alepha-elevated)",
-		border: "var(--alepha-border)"
-	},
-	sizes: { icon: {
-		xs: 12,
-		sm: 16,
-		md: 20,
-		lg: 24,
-		xl: 32
-	} }
-};
-
-//#endregion
-//#region ../../src/core/helpers/isComponentType.ts
-function isComponentType(param) {
-	if (isValidElement(param)) return false;
-	return typeof param === "function" || typeof param === "object" && param !== null && "$$typeof" in param;
-}
-
-//#endregion
-//#region ../../src/core/helpers/renderIcon.tsx
-const renderIcon = (icon) => {
-	if (!icon) return null;
-	if (isValidElement(icon)) return icon;
-	if (isComponentType(icon)) return /* @__PURE__ */ jsx(icon, { size: ui$1.sizes.icon.md });
-	return icon;
-};
-
-//#endregion
-//#region ../../src/core/components/layout/Omnibar.tsx
-const Omnibar = (props) => {
-	const shortcut = props.shortcut ?? "mod+K";
-	const searchPlaceholder = props.searchPlaceholder ?? "Search...";
-	const nothingFound = props.nothingFound ?? "Nothing found...";
-	const router = useRouter();
-	const [user] = useStore("alepha.server.request.user");
-	return /* @__PURE__ */ jsx(Spotlight, {
-		actions: useMemo(() => router.concretePages.filter((page) => {
-			if (page.can && !page.can()) return false;
-			return true;
-		}).map((page) => ({
-			id: page.name,
-			label: page.label ?? page.name,
-			description: page.description,
-			onClick: () => {
-				if (page.staticName) return router.go(page.staticName, { params: page.params });
-				return router.go(page.name);
-			},
-			leftSection: renderIcon(page.icon)
-		})), [user]),
-		shortcut,
-		limit: 10,
-		searchProps: {
-			leftSection: /* @__PURE__ */ jsx(IconSearch, { size: ui.sizes.icon.md }),
-			placeholder: searchPlaceholder
-		},
-		nothingFound
-	});
-};
-var Omnibar_default = Omnibar;
-
-//#endregion
-//#region ../../src/core/components/layout/AlephaMantineProvider.tsx
-const AlephaMantineProvider = (props) => {
-	const toast = useToast();
-	const [theme] = useTheme();
-	useEvents({
-		"react:transition:begin": () => {
-			nprogress.start();
-		},
-		"react:transition:end": () => {
-			nprogress.complete();
-		},
-		"react:action:error": ({ error }) => {
-			if (error instanceof FormValidationError || error instanceof TypeBoxError) return;
-			toast.danger({
-				title: error.name || "Error",
-				message: error.message ?? "An error occurred while processing your action."
-			});
-		}
-	}, []);
-	const defaultColorScheme = props.mantine?.defaultColorScheme ?? theme.defaultColorScheme;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorSchemeScript, {
-		defaultColorScheme,
-		...props.colorSchemeScript
-	}), /* @__PURE__ */ jsxs(MantineProvider, {
-		...props.mantine,
-		defaultColorScheme,
-		theme: {
-			...theme,
-			...props.mantine?.theme
-		},
-		children: [
-			/* @__PURE__ */ jsx(Notifications, { ...props.notifications }),
-			/* @__PURE__ */ jsx(NavigationProgress, { ...props.navigationProgress }),
-			/* @__PURE__ */ jsxs(ModalsProvider, {
-				...props.modals,
-				children: [props.omnibar !== false && /* @__PURE__ */ jsx(Omnibar_default, { ...props.omnibar }), props.children ?? /* @__PURE__ */ jsx(NestedView, {})]
-			})
-		]
-	})] });
-};
-var AlephaMantineProvider_default = AlephaMantineProvider;
-
-//#endregion
-//#region ../../src/core/RootRouter.ts
-var RootRouter = class {
-	root = $page({
-		path: "/",
-		component: AlephaMantineProvider_default
-	});
-};
-
 //#endregion
 //#region ../../src/core/components/data/ErrorViewer.tsx
 const getSizeConfig = (size = "sm") => {
@@ -625,135 +435,357 @@ const PromptDialog = ({ options, onSubmit }) => {
 		})
 	] });
 };
-var PromptDialog_default = PromptDialog;
+var PromptDialog_default = PromptDialog;
+
+//#endregion
+//#region ../../src/core/constants/ui.ts
+const ui = {
+	colors: {
+		transparent: "transparent",
+		background: "var(--alepha-background)",
+		surface: "var(--alepha-surface)",
+		elevated: "var(--alepha-elevated)",
+		border: "var(--alepha-border)"
+	},
+	sizes: { icon: {
+		xs: 12,
+		sm: 16,
+		md: 20,
+		lg: 24,
+		xl: 32
+	} }
+};
+
+//#endregion
+//#region ../../src/core/services/DialogService.tsx
+var DialogService = class {
+	options = { default: {
+		centered: true,
+		withCloseButton: true,
+		size: "md",
+		overlayProps: {
+			backgroundOpacity: .55,
+			blur: 3
+		},
+		transitionProps: {
+			transition: "pop",
+			duration: 200
+		}
+	} };
+	/**
+	* Show an alert dialog with a message
+	*/
+	alert(options) {
+		return new Promise((resolve) => {
+			const modalId = this.open({
+				...options,
+				title: options?.title || "Alert",
+				content: /* @__PURE__ */ jsx(AlertDialog_default, {
+					options,
+					onClose: () => {
+						this.close(modalId);
+						resolve();
+					}
+				})
+			});
+		});
+	}
+	/**
+	* Show a confirmation dialog that returns a promise
+	*/
+	confirm(options) {
+		return new Promise((resolve) => {
+			const modalId = this.open({
+				...options,
+				title: options?.title || "Confirm",
+				closeOnClickOutside: false,
+				closeOnEscape: false,
+				content: /* @__PURE__ */ jsx(ConfirmDialog_default, {
+					options,
+					onConfirm: (confirmed) => {
+						this.close(modalId);
+						resolve(confirmed);
+					}
+				})
+			});
+		});
+	}
+	/**
+	* Show a prompt dialog to get user input
+	*/
+	prompt(options) {
+		return new Promise((resolve) => {
+			const modalId = this.open({
+				...options,
+				title: options?.title || "Input",
+				closeOnClickOutside: false,
+				closeOnEscape: false,
+				content: /* @__PURE__ */ jsx(PromptDialog_default, {
+					options,
+					onSubmit: (value) => {
+						this.close(modalId);
+						resolve(value);
+					}
+				})
+			});
+		});
+	}
+	/**
+	* Open a custom dialog with provided content
+	*/
+	open(options) {
+		return modals.open({
+			...this.options.default,
+			...options,
+			children: options?.content || options?.message
+		});
+	}
+	/**
+	* Close the currently open dialog or a specific dialog by ID
+	*/
+	close(modalId) {
+		if (modalId) modals.close(modalId);
+		else modals.closeAll();
+	}
+	/**
+	* Show an error viewer dialog
+	*/
+	error(error, options) {
+		this.open({
+			size: "lg",
+			title: options?.title || "Error",
+			...options,
+			content: /* @__PURE__ */ jsx(Flex$1, {
+				bdrs: "md",
+				w: "100%",
+				flex: 1,
+				p: "sm",
+				bg: ui.colors.surface,
+				children: /* @__PURE__ */ jsx(ErrorViewer_default, {
+					size: "xs",
+					error,
+					showStack: options?.showStack ?? true
+				})
+			})
+		});
+	}
+	/**
+	* Show a form dialog for structured input
+	*/
+	form(options) {
+		return Promise.resolve(null);
+	}
+	/**
+	* Show a loading/progress dialog with optional progress percentage
+	*/
+	loading(options) {}
+	/**
+	* Show an image viewer/gallery dialog
+	*/
+	image(src, options) {}
+};
+
+//#endregion
+//#region ../../src/core/services/ToastService.tsx
+var ToastService = class {
+	raw = notifications;
+	options = { default: {
+		radius: "md",
+		withBorder: true,
+		withCloseButton: true,
+		autoClose: 5e3,
+		position: "top-center"
+	} };
+	show(options) {
+		notifications.show({
+			...this.options.default,
+			...options
+		});
+	}
+	info(options) {
+		if (typeof options === "string") options = { message: options };
+		this.show({
+			color: "blue",
+			icon: /* @__PURE__ */ jsx(IconInfoCircle, { size: 20 }),
+			title: "Info",
+			message: "Information notification",
+			...options
+		});
+	}
+	success(options) {
+		if (typeof options === "string") options = { message: options };
+		this.show({
+			color: "green",
+			icon: /* @__PURE__ */ jsx(IconCheck, { size: 16 }),
+			title: "Success",
+			message: "Operation completed successfully",
+			...options
+		});
+	}
+	warning(options) {
+		if (typeof options === "string") options = { message: options };
+		this.show({
+			color: "yellow",
+			icon: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 20 }),
+			title: "Warning",
+			message: "Please review this warning",
+			...options
+		});
+	}
+	danger(options) {
+		if (typeof options === "string") options = { message: options };
+		this.show({
+			color: "red",
+			icon: /* @__PURE__ */ jsx(IconX, { size: 20 }),
+			title: "Error",
+			message: "An error occurred",
+			...options
+		});
+	}
+};
+
+//#endregion
+//#region ../../src/core/hooks/useTheme.ts
+/**
+* Hook to get and set the current theme.
+*
+* Returns a tuple with the current theme and a function to set the theme.
+*
+* ```tsx
+* const [theme, setTheme] = useTheme();
+* ```
+*/
+const useTheme = () => {
+	useStore(alephaThemeAtom);
+	const themeProvider = useInject(ThemeProvider);
+	const theme = themeProvider.getTheme();
+	const setTheme = (theme) => {
+		themeProvider.setTheme(theme.index);
+	};
+	return [theme, setTheme];
+};
+
+//#endregion
+//#region ../../src/core/hooks/useToast.ts
+/**
+* Use this hook to access the Toast Service for showing notifications.
+*
+* @example
+* ```tsx
+* const toast = useToast();
+* toast.success({ message: "Operation completed successfully!" });
+* toast.error({ title: "Error", message: "Something went wrong" });
+* ```
+*/
+const useToast = () => {
+	return useInject(ToastService);
+};
+
+//#endregion
+//#region ../../src/core/helpers/isComponentType.ts
+function isComponentType(param) {
+	if (isValidElement(param)) return false;
+	return typeof param === "function" || typeof param === "object" && param !== null && "$$typeof" in param;
+}
+
+//#endregion
+//#region ../../src/core/helpers/renderIcon.tsx
+const renderIcon = (icon) => {
+	if (!icon) return null;
+	if (isValidElement(icon)) return icon;
+	if (isComponentType(icon)) return /* @__PURE__ */ jsx(icon, { size: ui$1.sizes.icon.md });
+	return icon;
+};
+
+//#endregion
+//#region ../../src/core/components/layout/Omnibar.tsx
+const Omnibar = (props) => {
+	const shortcut = props.shortcut ?? "mod+K";
+	const searchPlaceholder = props.searchPlaceholder ?? "Search...";
+	const nothingFound = props.nothingFound ?? "Nothing found...";
+	const router = useRouter();
+	const [user] = useStore("alepha.server.request.user");
+	return /* @__PURE__ */ jsx(Spotlight, {
+		actions: useMemo(() => router.concretePages.filter((page) => {
+			if (page.can && !page.can()) return false;
+			return true;
+		}).map((page) => ({
+			id: page.name,
+			label: page.label ?? page.name,
+			description: page.description,
+			onClick: () => {
+				if (page.staticName) return router.push(page.staticName, { params: page.params });
+				return router.push(page.name);
+			},
+			leftSection: renderIcon(page.icon)
+		})), [user]),
+		shortcut,
+		limit: 10,
+		searchProps: {
+			leftSection: /* @__PURE__ */ jsx(IconSearch, { size: ui.sizes.icon.md }),
+			placeholder: searchPlaceholder
+		},
+		nothingFound
+	});
+};
+var Omnibar_default = Omnibar;
+
+//#endregion
+//#region ../../src/core/components/layout/AlephaMantineProvider.tsx
+const AlephaMantineProvider = (props) => {
+	const toast = useToast();
+	const [theme] = useTheme();
+	useEvents({
+		"react:transition:begin": () => {
+			nprogress.start();
+		},
+		"react:transition:end": () => {
+			nprogress.complete();
+		},
+		"react:action:error": ({ error }) => {
+			if (error instanceof FormValidationError || error instanceof TypeBoxError) return;
+			toast.danger({
+				title: error.name || "Error",
+				message: error.message ?? "An error occurred while processing your action."
+			});
+		}
+	}, []);
+	const defaultColorScheme = props.mantine?.defaultColorScheme ?? theme.defaultColorScheme;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorSchemeScript, {
+		defaultColorScheme,
+		...props.colorSchemeScript
+	}), /* @__PURE__ */ jsxs(MantineProvider, {
+		...props.mantine,
+		defaultColorScheme,
+		theme: {
+			...theme,
+			...props.mantine?.theme
+		},
+		children: [
+			/* @__PURE__ */ jsx(Notifications, { ...props.notifications }),
+			/* @__PURE__ */ jsx(NavigationProgress, { ...props.navigationProgress }),
+			/* @__PURE__ */ jsxs(ModalsProvider, {
+				...props.modals,
+				children: [props.omnibar !== false && /* @__PURE__ */ jsx(Omnibar_default, { ...props.omnibar }), props.children ?? /* @__PURE__ */ jsx(NestedView, {})]
+			})
+		]
+	})] });
+};
+var AlephaMantineProvider_default = AlephaMantineProvider;
 
 //#endregion
-//#region ../../src/core/services/DialogService.tsx
-var DialogService = class {
-	options = { default: {
-		centered: true,
-		withCloseButton: true,
-		size: "md",
-		overlayProps: {
-			backgroundOpacity: .55,
-			blur: 3
-		},
-		transitionProps: {
-			transition: "pop",
-			duration: 200
-		}
-	} };
-	/**
-	* Show an alert dialog with a message
-	*/
-	alert(options) {
-		return new Promise((resolve) => {
-			const modalId = this.open({
-				...options,
-				title: options?.title || "Alert",
-				content: /* @__PURE__ */ jsx(AlertDialog_default, {
-					options,
-					onClose: () => {
-						this.close(modalId);
-						resolve();
-					}
-				})
-			});
-		});
-	}
-	/**
-	* Show a confirmation dialog that returns a promise
-	*/
-	confirm(options) {
-		return new Promise((resolve) => {
-			const modalId = this.open({
-				...options,
-				title: options?.title || "Confirm",
-				closeOnClickOutside: false,
-				closeOnEscape: false,
-				content: /* @__PURE__ */ jsx(ConfirmDialog_default, {
-					options,
-					onConfirm: (confirmed) => {
-						this.close(modalId);
-						resolve(confirmed);
-					}
-				})
-			});
-		});
-	}
-	/**
-	* Show a prompt dialog to get user input
-	*/
-	prompt(options) {
-		return new Promise((resolve) => {
-			const modalId = this.open({
-				...options,
-				title: options?.title || "Input",
-				closeOnClickOutside: false,
-				closeOnEscape: false,
-				content: /* @__PURE__ */ jsx(PromptDialog_default, {
-					options,
-					onSubmit: (value) => {
-						this.close(modalId);
-						resolve(value);
-					}
-				})
-			});
-		});
-	}
-	/**
-	* Open a custom dialog with provided content
-	*/
-	open(options) {
-		return modals.open({
-			...this.options.default,
-			...options,
-			children: options?.content || options?.message
-		});
-	}
-	/**
-	* Close the currently open dialog or a specific dialog by ID
-	*/
-	close(modalId) {
-		if (modalId) modals.close(modalId);
-		else modals.closeAll();
-	}
-	/**
-	* Show an error viewer dialog
-	*/
-	error(error, options) {
-		this.open({
-			size: "lg",
-			title: options?.title || "Error",
-			...options,
-			content: /* @__PURE__ */ jsx(Flex$1, {
-				bdrs: "md",
-				w: "100%",
-				flex: 1,
-				p: "sm",
-				bg: ui.colors.surface,
-				children: /* @__PURE__ */ jsx(ErrorViewer_default, {
-					size: "xs",
-					error,
-					showStack: options?.showStack ?? true
-				})
-			})
-		});
-	}
-	/**
-	* Show a form dialog for structured input
-	*/
-	form(options) {
-		return Promise.resolve(null);
-	}
-	/**
-	* Show a loading/progress dialog with optional progress percentage
-	*/
-	loading(options) {}
-	/**
-	* Show an image viewer/gallery dialog
-	*/
-	image(src, options) {}
+//#region ../../src/core/UiRouter.ts
+/**
+* UI Router defining the root page with AlephaMantineProvider.
+*
+* - Use UiRouter when you need Alepha's Mantine-based UI components and theming.
+* - Prefer to use $ui() for convenience. (Custom Factory of UiRouter)
+*/
+var UiRouter = class {
+	root = $page({
+		path: "/",
+		component: AlephaMantineProvider_default
+	});
 };
 
 //#endregion
@@ -1050,10 +1082,13 @@ const ActionHrefButton = (props) => {
 //#endregion
 //#region ../../src/core/components/buttons/BurgerButton.tsx
 const BurgerButton = (props) => {
-	const [opened, setOpened] = useStore("alepha.ui.sidebar.opened");
+	const [sidebar, setSidebar] = useStore(alephaSidebarAtom);
 	return /* @__PURE__ */ jsx(Burger, {
-		opened,
-		onClick: () => setOpened(!opened),
+		opened: sidebar.opened,
+		onClick: () => setSidebar({
+			...sidebar,
+			opened: !sidebar.opened
+		}),
 		hiddenFrom: "sm",
 		size: "sm",
 		...props
@@ -1152,14 +1187,27 @@ var LanguageButton_default = LanguageButton;
 //#endregion
 //#region ../../src/core/components/buttons/OmnibarButton.tsx
 const OmnibarButton = (props) => {
+	const os = useOs();
+	const shortcut = os === "macos" || os === "ios" ? "⌘" : "Ctrl";
+	if (props.collapsed) return /* @__PURE__ */ jsx(ActionButton_default, {
+		variant: "subtle",
+		onClick: spotlight.open,
+		radius: "md",
+		icon: /* @__PURE__ */ jsx(IconSearch, { size: 16 }),
+		tooltip: {
+			label: "Search",
+			position: "right"
+		},
+		...props.actionProps
+	});
 	return /* @__PURE__ */ jsx(ActionButton_default, {
 		variant: "default",
 		onClick: spotlight.open,
 		justify: "space-between",
-		rightSection: /* @__PURE__ */ jsx(Kbd, {
+		rightSection: /* @__PURE__ */ jsxs(Kbd, {
 			visibleFrom: "sm",
 			size: "sm",
-			children: "⌘+K"
+			children: [/* @__PURE__ */ jsx(ClientOnly, { children: shortcut }), "+K"]
 		}),
 		radius: "md",
 		...props.actionProps,
@@ -1201,6 +1249,32 @@ const ThemeButton = (props) => {
 };
 var ThemeButton_default = ThemeButton;
 
+//#endregion
+//#region ../../src/core/components/buttons/ToggleSidebarButton.tsx
+const ToggleSidebarButton = (props) => {
+	const [sidebar, setSidebar] = useStore(alephaSidebarAtom);
+	return /* @__PURE__ */ jsx(ActionButton_default, {
+		icon: sidebar.collapsed ? /* @__PURE__ */ jsx(IconLayoutSidebarRightCollapse, {}) : /* @__PURE__ */ jsx(IconLayoutSidebarLeftCollapse, {}),
+		visibleFrom: "sm",
+		variant: "subtle",
+		size: "md",
+		onClick: () => {
+			const expanding = sidebar.collapsed;
+			setSidebar({
+				...sidebar,
+				collapsed: !sidebar.collapsed,
+				width: expanding ? sidebar.defaultWidth : sidebar.width
+			});
+		},
+		tooltip: {
+			position: "right",
+			label: sidebar.collapsed ? "Show sidebar" : "Hide sidebar"
+		},
+		...props
+	});
+};
+var ToggleSidebarButton_default = ToggleSidebarButton;
+
 //#endregion
 //#region ../../src/core/utils/icons.tsx
 /**
@@ -2449,7 +2523,7 @@ var Control_default = Control;
 * @example
 * ```tsx
 * import { t } from "alepha";
-* import { useForm } from "@alepha/react/form";
+* import { useForm } from "alepha/react/form";
 * import { TypeForm } from "@alepha/ui";
 *
 * const form = useForm({
@@ -2566,7 +2640,9 @@ var TypeForm_default = TypeForm;
 //#region ../../src/core/components/layout/AppBar.tsx
 const AppBar = (props) => {
 	const { items = [] } = props;
+	const router = useRouter();
 	const renderItem = (item, index) => {
+		if (item.can && !item.can()) return null;
 		if ("type" in item) {
 			if (item.type === "burger") return /* @__PURE__ */ jsx(BurgerButton_default, {}, index);
 			if (item.type === "dark") return /* @__PURE__ */ jsx(DarkModeButton_default, { ...item.props }, index);
@@ -2574,17 +2650,70 @@ const AppBar = (props) => {
 			if (item.type === "lang") return /* @__PURE__ */ jsx(LanguageButton_default, { ...item.props }, index);
 			if (item.type === "spacer") return /* @__PURE__ */ jsx(Flex$1, { w: 16 }, index);
 			if (item.type === "divider") return /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }, index);
+			if (item.type === "logo") return renderLogo(item, index);
+			if (item.type === "back") return renderBack(item, index);
 		}
 		if ("element" in item) return item.element;
 		return null;
 	};
+	const renderLogo = (item, index) => {
+		const { src, text, icon, href, height = 32, width, fontWeight = 700, fontSize = "lg" } = item.props ?? {};
+		const logoContent = src ? /* @__PURE__ */ jsx(Image, {
+			src,
+			h: height,
+			w: width,
+			fit: "contain"
+		}) : icon ? typeof icon === "function" ? /* @__PURE__ */ jsx(icon, {}) : icon : text ? /* @__PURE__ */ jsx(Text$1, {
+			fw: fontWeight,
+			size: fontSize,
+			children: text
+		}) : null;
+		if (href) return /* @__PURE__ */ jsx(Anchor, {
+			component: Link,
+			href,
+			underline: "never",
+			c: "inherit",
+			children: logoContent
+		}, index);
+		return /* @__PURE__ */ jsx(Flex$1, { children: logoContent }, index);
+	};
+	const renderBack = (item, index) => {
+		const { label = "Back", iconOnly = true, href, icon } = item.props ?? {};
+		const renderIcon = () => {
+			if (!icon) return /* @__PURE__ */ jsx(IconArrowLeft, { size: 18 });
+			if (typeof icon === "function") return /* @__PURE__ */ jsx(icon, { size: 18 });
+			return icon;
+		};
+		const iconElement = renderIcon();
+		const handleClick = () => {
+			if (href) router.push(href);
+			else router.back();
+		};
+		if (iconOnly) return /* @__PURE__ */ jsx(ActionButton_default, {
+			icon: iconElement,
+			variant: "subtle",
+			color: "gray",
+			onClick: handleClick,
+			tooltip: {
+				label,
+				position: "bottom"
+			}
+		}, index);
+		return /* @__PURE__ */ jsx(ActionButton_default, {
+			leftSection: iconElement,
+			variant: "subtle",
+			color: "gray",
+			onClick: handleClick,
+			children: label
+		}, index);
+	};
 	const leftItems = items.filter((item) => item.position === "left");
 	const centerItems = items.filter((item) => item.position === "center");
 	const rightItems = items.filter((item) => item.position === "right");
-	return /* @__PURE__ */ jsxs(Flex$1, {
+	const content = /* @__PURE__ */ jsxs(Flex$1, {
 		h: "100%",
 		align: "center",
-		px: "md",
+		px: props.container ? 0 : "md",
 		justify: "space-between",
 		...props.flexProps,
 		children: [
@@ -2613,47 +2742,44 @@ const AppBar = (props) => {
 			})
 		]
 	});
+	if (props.container) return /* @__PURE__ */ jsx(Container, {
+		h: "100%",
+		...typeof props.container === "boolean" ? {} : props.container,
+		children: content
+	});
+	return content;
 };
 var AppBar_default = AppBar;
 
-//#endregion
-//#region ../../src/core/components/buttons/ToggleSidebarButton.tsx
-const ToggleSidebarButton = () => {
-	const [collapsed, setCollapsed] = useStore("alepha.ui.sidebar.collapsed");
-	return /* @__PURE__ */ jsx(Flex$1, { children: /* @__PURE__ */ jsx(ActionButton_default, {
-		icon: collapsed ? /* @__PURE__ */ jsx(IconLayoutSidebarRightCollapse, {}) : /* @__PURE__ */ jsx(IconLayoutSidebarLeftCollapse, {}),
-		variant: "subtle",
-		size: "md",
-		onClick: () => setCollapsed(!collapsed),
-		tooltip: {
-			position: "right",
-			label: collapsed ? "Show sidebar" : "Hide sidebar"
-		}
-	}) });
-};
-var ToggleSidebarButton_default = ToggleSidebarButton;
-
 //#endregion
 //#region ../../src/core/components/layout/Sidebar.tsx
 const Sidebar = (props) => {
 	const router = useRouter();
 	const { onItemClick } = props;
+	const divider = (key) => {
+		return /* @__PURE__ */ jsx(Flex$1, {
+			h: 1,
+			bg: "var(--alepha-border)",
+			my: "xs",
+			mx: props.collapsed ? 0 : "sm"
+		}, key);
+	};
 	const renderNode = (item, key) => {
 		if ("type" in item) {
-			if (item.type === "spacer") return /* @__PURE__ */ jsx(Flex$1, { h: 16 }, key);
-			if (item.type === "divider") return /* @__PURE__ */ jsx(Flex$1, {
-				h: 1,
-				bg: "var(--alepha-border)",
-				my: "md",
-				mx: "sm"
+			if (item.type === "spacer") {
+				if (props.collapsed) return null;
+				return /* @__PURE__ */ jsx(Flex$1, { h: 16 }, key);
+			}
+			if (item.type === "divider") return divider(key);
+			if (item.type === "search") return /* @__PURE__ */ jsx(Flex$1, {
+				mb: "xs",
+				children: /* @__PURE__ */ jsx(OmnibarButton_default, { collapsed: props.collapsed })
 			}, key);
-			if (item.type === "search") return /* @__PURE__ */ jsx(OmnibarButton_default, { collapsed: props.collapsed }, key);
 			if (item.type === "toggle") return /* @__PURE__ */ jsx(ToggleSidebarButton_default, {}, key);
 			if (item.type === "section") {
-				if (props.collapsed) return;
+				if (props.collapsed) return divider(key);
 				return /* @__PURE__ */ jsxs(Flex$1, {
 					mt: "md",
-					mb: "xs",
 					align: "center",
 					gap: "xs",
 					children: [renderIcon(item.icon), /* @__PURE__ */ jsx(Text$1, {
@@ -2662,7 +2788,7 @@ const Sidebar = (props) => {
 						tt: "uppercase",
 						fw: "bold",
 						children: item.label
-					}, key)]
+					})]
 				}, key);
 			}
 		}
@@ -2698,13 +2824,13 @@ const Sidebar = (props) => {
 		return [];
 	};
 	const padding = "md";
-	const gap = props.items ? props.gap : "xs";
-	const menu = useMemo(() => getSidebarNodes(), []);
+	const gap = props.items ? props.gap ?? 2 : "xs";
+	const menu = useMemo(() => getSidebarNodes(), [props.items, props.autoPopulateMenu]);
 	return /* @__PURE__ */ jsxs(Flex$1, {
 		flex: 1,
 		py: padding,
 		direction: "column",
-		className: "overflow-auto",
+		className: "alepha-sidebar-scroll",
 		...props.flexProps,
 		children: [
 			/* @__PURE__ */ jsx(Flex$1, {
@@ -2718,7 +2844,7 @@ const Sidebar = (props) => {
 				px: padding,
 				direction: "column",
 				flex: 1,
-				className: "overflow-auto",
+				className: "alepha-sidebar-scroll",
 				children: menu.filter((it) => !it.position).map((item, index) => renderNode(item, index))
 			}),
 			/* @__PURE__ */ jsx(Flex$1, {
@@ -2767,6 +2893,7 @@ const SidebarItem = (props) => {
 			href: props.item.href,
 			target: props.item.target,
 			size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
+			tooltip: item.description,
 			c: "var(--mantine-color-text)",
 			color: "gray",
 			variant: "subtle",
@@ -2777,13 +2904,9 @@ const SidebarItem = (props) => {
 				w: "100%",
 				align: "center",
 				gap: "sm",
-				children: [renderIcon(item.icon), /* @__PURE__ */ jsxs(Flex$1, {
+				children: [renderIcon(item.icon), /* @__PURE__ */ jsx(Flex$1, {
 					direction: "column",
-					children: [/* @__PURE__ */ jsx(Flex$1, { children: item.label }), item.description && /* @__PURE__ */ jsx(Text$1, {
-						size: "xs",
-						c: "dimmed",
-						children: item.description
-					})]
+					children: /* @__PURE__ */ jsx(Flex$1, { children: item.label })
 				})]
 			}),
 			rightSection: item.children ? /* @__PURE__ */ jsx(Flex$1, { children: isOpen ? /* @__PURE__ */ jsx(IconChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }) }) : props.item.rightSection,
@@ -2809,31 +2932,15 @@ const SidebarItem = (props) => {
 };
 const SidebarCollapsedItem = (props) => {
 	const { item, level } = props;
-	const router = useRouter();
-	const isActive = useCallback((item) => {
-		if (!item.children) return false;
-		for (const child of item.children) {
-			if (child.href) {
-				if (router.isActive(child.href)) return true;
-			}
-			if (isActive(child)) return true;
-		}
-		return false;
-	}, []);
-	const [isOpen, setIsOpen] = useState(isActive(item));
-	const handleItemClick = (e) => {
-		if (!props.item.target) e.preventDefault();
-		if (item.children && item.children.length > 0) setIsOpen(!isOpen);
-		else {
-			props.onItemClick?.(item);
-			item.onClick?.();
-		}
+	const handleItemClick = () => {
+		props.onItemClick?.(item);
+		item.onClick?.();
 	};
 	return /* @__PURE__ */ jsx(ActionButton_default, {
 		size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
 		variant: "subtle",
 		variantActive: "default",
-		tooltip: item.children ? void 0 : {
+		tooltip: {
 			label: item.label,
 			position: "right"
 		},
@@ -2842,16 +2949,6 @@ const SidebarCollapsedItem = (props) => {
 		icon: renderIcon(item.icon) ?? /* @__PURE__ */ jsx(IconSquareRounded, {}),
 		href: props.item.href,
 		target: props.item.target,
-		menu: item.children ? {
-			position: "right",
-			on: "hover",
-			items: item.children.filter((child) => !child.can || child.can()).map((child) => ({
-				label: child.label,
-				href: child.href,
-				icon: renderIcon(child.icon),
-				children: child.children?.filter((c) => !c.can || c.can())
-			}))
-		} : void 0,
 		...props.item.actionProps
 	});
 };
@@ -2860,8 +2957,129 @@ const SidebarCollapsedItem = (props) => {
 //#region ../../src/core/components/layout/AdminShell.tsx
 const AdminShell = (props) => {
 	const router = useRouter();
-	const [opened, setOpened] = useStore("alepha.ui.sidebar.opened");
-	const [collapsed] = useStore("alepha.ui.sidebar.collapsed", props.sidebarProps?.collapsed);
+	const [sidebar, setSidebar] = useStore(alephaSidebarAtom);
+	const { opened, collapsed } = sidebar;
+	useEffect(() => {
+		if (props.sidebarProps?.collapsed !== void 0) setSidebar({
+			...sidebar,
+			collapsed: props.sidebarProps.collapsed
+		});
+	}, []);
+	const [isResizing, setIsResizing] = useState(false);
+	const [isHovering, setIsHovering] = useState(false);
+	const [collapseEffect, setCollapseEffect] = useState({
+		offset: 0,
+		opacity: 1
+	});
+	const resizeRef = useRef(null);
+	const { collapsedWidth, collapseThreshold, maxWidth, hoverDelay, defaultWidth } = sidebar;
+	const handleResizeStart = useCallback((e) => {
+		if (!props.sidebarResizable) return;
+		e.preventDefault();
+		if (collapsed) {
+			setSidebar({
+				...sidebar,
+				collapsed: false,
+				width: defaultWidth
+			});
+			setIsResizing(true);
+			resizeRef.current = {
+				startX: e.clientX,
+				startWidth: defaultWidth
+			};
+		} else {
+			setIsResizing(true);
+			resizeRef.current = {
+				startX: e.clientX,
+				startWidth: sidebar.width
+			};
+		}
+	}, [
+		props.sidebarResizable,
+		collapsed,
+		sidebar,
+		setSidebar,
+		defaultWidth
+	]);
+	useEffect(() => {
+		if (!isResizing) return;
+		const handleMouseMove = (e) => {
+			if (!resizeRef.current) return;
+			const delta = e.clientX - resizeRef.current.startX;
+			const rawWidth = resizeRef.current.startWidth + delta;
+			const newWidth = Math.min(Math.max(rawWidth, collapsedWidth), maxWidth);
+			if (rawWidth < collapseThreshold) {
+				const progress = Math.max(0, (collapseThreshold - rawWidth) / collapseThreshold);
+				setCollapseEffect({
+					offset: -progress * collapsedWidth,
+					opacity: 1 - progress * .7
+				});
+				setSidebar({
+					...sidebar,
+					width: collapseThreshold,
+					collapsed: false
+				});
+			} else {
+				setCollapseEffect({
+					offset: 0,
+					opacity: 1
+				});
+				setSidebar({
+					...sidebar,
+					width: newWidth,
+					collapsed: false
+				});
+			}
+		};
+		const handleMouseUp = () => {
+			if (collapseEffect.offset < 0) setSidebar({
+				...sidebar,
+				collapsed: true
+			});
+			setCollapseEffect({
+				offset: 0,
+				opacity: 1
+			});
+			setIsResizing(false);
+			resizeRef.current = null;
+		};
+		document.addEventListener("mousemove", handleMouseMove);
+		document.addEventListener("mouseup", handleMouseUp);
+		return () => {
+			document.removeEventListener("mousemove", handleMouseMove);
+			document.removeEventListener("mouseup", handleMouseUp);
+		};
+	}, [
+		isResizing,
+		sidebar,
+		setSidebar,
+		collapsedWidth,
+		maxWidth,
+		collapseThreshold,
+		collapseEffect.offset
+	]);
+	const hoverTimeoutRef = useRef(null);
+	const handleNavbarMouseEnter = useCallback(() => {
+		if (collapsed) hoverTimeoutRef.current = setTimeout(() => {
+			setIsHovering(true);
+		}, hoverDelay);
+	}, [collapsed, hoverDelay]);
+	const handleNavbarMouseLeave = useCallback(() => {
+		if (hoverTimeoutRef.current) {
+			clearTimeout(hoverTimeoutRef.current);
+			hoverTimeoutRef.current = null;
+		}
+		setIsHovering(false);
+	}, []);
+	useEffect(() => {
+		if (collapsed) {
+			setIsHovering(false);
+			if (hoverTimeoutRef.current) {
+				clearTimeout(hoverTimeoutRef.current);
+				hoverTimeoutRef.current = null;
+			}
+		}
+	}, [collapsed]);
 	const shouldShowSidebar = () => {
 		if (props.noSidebarWhen?.paths) {
 			for (const path of props.noSidebarWhen.paths) if (router.isActive(path, { startWith: true })) return false;
@@ -2874,25 +3092,35 @@ const AdminShell = (props) => {
 			setShowSidebar(shouldShowSidebar());
 		},
 		"react:transition:begin": () => {
-			setOpened(false);
+			setSidebar({
+				...sidebar,
+				opened: false
+			});
 		}
-	}, []);
+	}, [sidebar]);
 	const defaultAppBarItems = [{
 		position: "left",
 		type: "burger"
 	}];
+	const appBarProps = { ...props.appBarProps };
+	appBarProps.container ??= props.container;
 	const hasSidebar = showSidebar && props.sidebarProps !== void 0;
 	const hasAppBar = hasSidebar || props.appBarProps || props.header;
 	const headerHeight = hasAppBar ? 60 : 0;
 	const footerHeight = props.footer ? 24 : 0;
-	const sidebarWidth = hasSidebar ? collapsed ? 78 : 300 : 0;
+	const expandedWidth = Math.max(sidebar.width, collapsedWidth);
+	const isExpandedByHover = collapsed && isHovering;
+	const effectiveCollapsed = collapsed && !isHovering;
+	const hoverWidth = Math.max(defaultWidth, collapsedWidth);
+	const sidebarWidth = hasSidebar ? effectiveCollapsed || isExpandedByHover ? collapsedWidth : expandedWidth : 0;
+	const canResize = props.sidebarResizable && !collapsed;
 	return /* @__PURE__ */ jsxs(AppShell, {
 		w: "100%",
 		flex: 1,
 		padding: "md",
 		header: hasAppBar ? { height: 60 } : void 0,
 		navbar: hasSidebar ? {
-			width: collapsed ? { base: 78 } : { base: 300 },
+			width: effectiveCollapsed || isExpandedByHover ? { base: collapsedWidth } : { base: expandedWidth },
 			breakpoint: "sm",
 			collapsed: { mobile: !opened }
 		} : void 0,
@@ -2904,16 +3132,41 @@ const AdminShell = (props) => {
 				...props.appShellHeaderProps,
 				children: props.header ?? /* @__PURE__ */ jsx(AppBar_default, {
 					items: defaultAppBarItems,
-					...props.appBarProps
+					...appBarProps
 				})
 			}),
-			hasSidebar && /* @__PURE__ */ jsx(AppShell.Navbar, {
+			hasSidebar && /* @__PURE__ */ jsxs(AppShell.Navbar, {
 				bg: ui.colors.surface,
+				className: "alepha-sidebar-navbar",
+				"data-resizing": isResizing,
+				"data-hover-expanded": isExpandedByHover,
+				onMouseEnter: handleNavbarMouseEnter,
+				onMouseLeave: handleNavbarMouseLeave,
+				style: {
+					transform: collapseEffect.offset ? `translateX(${collapseEffect.offset}px)` : void 0,
+					opacity: collapseEffect.opacity,
+					...isExpandedByHover && {
+						width: hoverWidth,
+						zIndex: 200,
+						boxShadow: "var(--mantine-shadow-xl)"
+					}
+				},
 				...props.appShellNavbarProps,
-				children: /* @__PURE__ */ jsx(Sidebar, {
-					collapsed,
-					...props.sidebarProps ?? {}
-				})
+				children: [/* @__PURE__ */ jsx(Sidebar, {
+					...props.sidebarProps ?? {},
+					collapsed: effectiveCollapsed
+				}), (canResize || isExpandedByHover) && /* @__PURE__ */ jsx(Flex$1, {
+					pos: "absolute",
+					right: -6,
+					top: 0,
+					bottom: 0,
+					w: 12,
+					style: {
+						cursor: "col-resize",
+						userSelect: "none"
+					},
+					onMouseDown: handleResizeStart
+				})]
 			}),
 			/* @__PURE__ */ jsx(AppShell.Main, {
 				pl: sidebarWidth,
@@ -2923,8 +3176,17 @@ const AdminShell = (props) => {
 				display: "flex",
 				flex: 1,
 				style: { flexDirection: "column" },
+				className: "alepha-sidebar-main",
+				"data-resizing": isResizing,
 				...props.appShellMainProps,
-				children: props.children ?? /* @__PURE__ */ jsx(NestedView, {})
+				children: props.container ? /* @__PURE__ */ jsx(Container, {
+					w: "100%",
+					flex: 1,
+					display: "flex",
+					style: { flexDirection: "column" },
+					...typeof props.container === "boolean" ? {} : props.container,
+					children: props.children ?? /* @__PURE__ */ jsx(NestedView, {})
+				}) : props.children ?? /* @__PURE__ */ jsx(NestedView, {})
 			}),
 			props.footer && /* @__PURE__ */ jsx(AppShell.Footer, {
 				bg: ui.colors.surface,
@@ -3618,7 +3880,25 @@ const useDialog = () => {
 //#endregion
 //#region ../../src/core/index.ts
 /**
-* Mantine
+* | type | quality | stability |
+* |------|---------|-----------|
+* | frontend | rare | experimental |
+*
+* Core UI components based on Mantine UI v8.
+*
+* **Features:**
+* - Mantine integration with theme support
+* - ActionButton, BurgerButton, ClipboardButton, DarkModeButton, LanguageButton, ThemeButton
+* - AlertDialog, ConfirmDialog, PromptDialog
+* - Form controls: Control, ControlArray, ControlDate, ControlNumber, ControlObject, ControlSelect, ControlQueryBuilder
+* - TypeForm for automatic form generation from TypeBox schemas
+* - AdminShell layout component
+* - AppBar with configurable elements
+* - Sidebar navigation with sections and menu items
+* - Omnibar for command palette / search
+* - DataTable with filtering, sorting, pagination
+* - Toast notifications
+* - Theme system with dark mode
 *
 * @module alepha.ui
 */
@@ -3628,7 +3908,7 @@ const AlephaUI = $module({
 		DialogService,
 		ToastService,
 		ThemeProvider,
-		RootRouter
+		UiRouter
 	],
 	register: (alepha) => {
 		alepha.with(AlephaReactI18n);
@@ -3639,7 +3919,15 @@ const AlephaUI = $module({
 		alepha.with(ToastService);
 	}
 });
+/**
+* Convenience function to configure and inject the UiRouter.
+*/
+const $ui = (options = {}) => {
+	const { alepha } = $context();
+	if (options.themes) alepha.store.set(alephaThemeListAtom, options.themes);
+	return alepha.inject(UiRouter);
+};
 
 //#endregion
-export { ActionButton_default as ActionButton, AdminShell_default as AdminShell, AlephaMantineProvider_default as AlephaMantineProvider, AlephaUI, AlertDialog_default as AlertDialog, AppBar_default as AppBar, BurgerButton_default as BurgerButton, ClipboardButton_default as ClipboardButton, ConfirmDialog_default as ConfirmDialog, Control_default as Control, ControlArray_default as ControlArray, ControlDate_default as ControlDate, ControlNumber_default as ControlNumber, ControlObject_default as ControlObject, ControlQueryBuilder_default as ControlQueryBuilder, ControlSelect_default as ControlSelect, DarkModeButton_default as DarkModeButton, DataTable_default as DataTable, DialogService, Flex, LanguageButton_default as LanguageButton, OPERATOR_INFO, Omnibar_default as Omnibar, OmnibarButton_default as OmnibarButton, PromptDialog_default as PromptDialog, RootRouter, Sidebar, Text, ThemeButton_default as ThemeButton, ThemeProvider, ToastService, TypeForm_default as TypeForm, alephaThemeAtom, alephaThemeListAtom, capitalize, defaultTheme, extractSchemaFields, getDefaultIcon, getOperatorsForField, midnightTheme, prettyName, ui, useDialog, useToast };
+export { $ui, ActionButton_default as ActionButton, AdminShell_default as AdminShell, AlephaMantineProvider_default as AlephaMantineProvider, AlephaUI, AlertDialog_default as AlertDialog, AppBar_default as AppBar, BurgerButton_default as BurgerButton, ClipboardButton_default as ClipboardButton, ConfirmDialog_default as ConfirmDialog, Control_default as Control, ControlArray_default as ControlArray, ControlDate_default as ControlDate, ControlNumber_default as ControlNumber, ControlObject_default as ControlObject, ControlQueryBuilder_default as ControlQueryBuilder, ControlSelect_default as ControlSelect, DarkModeButton_default as DarkModeButton, DataTable_default as DataTable, DialogService, Flex, LanguageButton_default as LanguageButton, OPERATOR_INFO, Omnibar_default as Omnibar, OmnibarButton_default as OmnibarButton, PromptDialog_default as PromptDialog, Sidebar, Text, ThemeButton_default as ThemeButton, ThemeProvider, ToastService, ToggleSidebarButton_default as ToggleSidebarButton, TypeForm_default as TypeForm, UiRouter, alephaSidebarAtom, alephaThemeAtom, alephaThemeListAtom, capitalize, defaultTheme, extractSchemaFields, getDefaultIcon, getOperatorsForField, midnightTheme, prettyName, ui, useDialog, useToast };
 //# sourceMappingURL=index.js.map