@alepha/ui 0.15.2 → 0.15.3

package/dist/core/index.js

@@ -3,16 +3,16 @@ import { AlephaReactForm, FormValidationError, useForm, useFormState } from "ale
 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 { 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 { ClientOnly, useAction, useEvents, useInject, useStore } from "alepha/react";
-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 { 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";
@@ -219,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") => {
@@ -653,6 +437,25 @@ const PromptDialog = ({ options, onSubmit }) => {
 };
 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 {
@@ -782,6 +585,209 @@ var DialogService = class {
 	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/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
 //#region ../../src/core/components/buttons/ActionButton.tsx
 const ActionMenuItem = (props) => {
@@ -2634,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);
@@ -2642,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: [
@@ -2681,6 +2742,12 @@ 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;
 
@@ -2826,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",
@@ -2836,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,
@@ -2910,7 +2974,7 @@ const AdminShell = (props) => {
 	const resizeRef = useRef(null);
 	const { collapsedWidth, collapseThreshold, maxWidth, hoverDelay, defaultWidth } = sidebar;
 	const handleResizeStart = useCallback((e) => {
-		if (!props.resizable) return;
+		if (!props.sidebarResizable) return;
 		e.preventDefault();
 		if (collapsed) {
 			setSidebar({
@@ -2931,7 +2995,7 @@ const AdminShell = (props) => {
 			};
 		}
 	}, [
-		props.resizable,
+		props.sidebarResizable,
 		collapsed,
 		sidebar,
 		setSidebar,
@@ -3038,6 +3102,8 @@ const AdminShell = (props) => {
 		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;
@@ -3046,15 +3112,15 @@ const AdminShell = (props) => {
 	const isExpandedByHover = collapsed && isHovering;
 	const effectiveCollapsed = collapsed && !isHovering;
 	const hoverWidth = Math.max(defaultWidth, collapsedWidth);
-	const sidebarWidth = hasSidebar ? effectiveCollapsed ? collapsedWidth : isExpandedByHover ? hoverWidth : expandedWidth : 0;
-	const canResize = props.resizable && !collapsed;
+	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: effectiveCollapsed ? { base: collapsedWidth } : isExpandedByHover ? { base: hoverWidth } : { base: expandedWidth },
+			width: effectiveCollapsed || isExpandedByHover ? { base: collapsedWidth } : { base: expandedWidth },
 			breakpoint: "sm",
 			collapsed: { mobile: !opened }
 		} : void 0,
@@ -3066,18 +3132,24 @@ const AdminShell = (props) => {
 				...props.appShellHeaderProps,
 				children: props.header ?? /* @__PURE__ */ jsx(AppBar_default, {
 					items: defaultAppBarItems,
-					...props.appBarProps
+					...appBarProps
 				})
 			}),
 			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
+					opacity: collapseEffect.opacity,
+					...isExpandedByHover && {
+						width: hoverWidth,
+						zIndex: 200,
+						boxShadow: "var(--mantine-shadow-xl)"
+					}
 				},
 				...props.appShellNavbarProps,
 				children: [/* @__PURE__ */ jsx(Sidebar, {
@@ -3085,10 +3157,10 @@ const AdminShell = (props) => {
 					collapsed: effectiveCollapsed
 				}), (canResize || isExpandedByHover) && /* @__PURE__ */ jsx(Flex$1, {
 					pos: "absolute",
-					right: -2,
+					right: -6,
 					top: 0,
 					bottom: 0,
-					w: 4,
+					w: 12,
 					style: {
 						cursor: "col-resize",
 						userSelect: "none"
@@ -3107,7 +3179,14 @@ const AdminShell = (props) => {
 				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,
@@ -3829,7 +3908,7 @@ const AlephaUI = $module({
 		DialogService,
 		ToastService,
 		ThemeProvider,
-		RootRouter
+		UiRouter
 	],
 	register: (alepha) => {
 		alepha.with(AlephaReactI18n);
@@ -3841,20 +3920,14 @@ const AlephaUI = $module({
 	}
 });
 /**
-* Register UI components and get the RootRouter instance.
+* Convenience function to configure and inject the UiRouter.
 */
-const $ui = (opts = {}) => {
+const $ui = (options = {}) => {
 	const { alepha } = $context();
-	/**
-	* If multi ui, should we have N themes ? or one $atom theme but with change based on current ui app ?
-	*
-	* App (theme=T1) -> Admin (theme=T2) ?
-	*
-	* > It can be done with onLeave()/onEnter() of the RootRouter to set the theme atom.
-	*/
-	return alepha.inject(RootRouter);
+	if (options.themes) alepha.store.set(alephaThemeListAtom, options.themes);
+	return alepha.inject(UiRouter);
 };
 
 //#endregion
-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, RootRouter, Sidebar, Text, ThemeButton_default as ThemeButton, ThemeProvider, ToastService, ToggleSidebarButton_default as ToggleSidebarButton, TypeForm_default as TypeForm, alephaSidebarAtom, 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