@alepha/ui 0.15.0 → 0.15.2

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 { $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 { ModalsProvider, modals } from "@mantine/modals";
 import { Notifications, notifications } from "@mantine/notifications";
 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";
 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",
@@ -208,8 +234,8 @@ const useTheme = () => {
 	useStore(alephaThemeAtom);
 	const themeProvider = useInject(ThemeProvider);
 	const theme = themeProvider.getTheme();
-	const setTheme = (theme$1) => {
-		themeProvider.setTheme(theme$1.index);
+	const setTheme = (theme) => {
+		themeProvider.setTheme(theme.index);
 	};
 	return [theme, setTheme];
 };
@@ -825,7 +851,7 @@ const ActionButton = (_props) => {
 		}
 	}
 	if (props.icon) {
-		const icon$1 = isComponentType(props.icon) ? /* @__PURE__ */ jsx(props.icon, { size: ui.sizes.icon.md }) : /* @__PURE__ */ jsx(ThemeIcon, {
+		const icon = isComponentType(props.icon) ? /* @__PURE__ */ jsx(props.icon, { size: ui.sizes.icon.md }) : /* @__PURE__ */ jsx(ThemeIcon, {
 			w: 24,
 			variant: "transparent",
 			size: "sm",
@@ -834,9 +860,9 @@ const ActionButton = (_props) => {
 			children: props.icon
 		});
 		if (!props.children) {
-			restProps.children = Children.only(icon$1);
+			restProps.children = Children.only(icon);
 			restProps.px ??= "xs";
-		} else restProps.leftSection = icon$1;
+		} else restProps.leftSection = icon;
 	}
 	if (props.leftSection && !props.children) restProps.px ??= "xs";
 	if (props.textVisibleFrom) {
@@ -1050,10 +1076,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 +1181,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 +1243,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
 /**
@@ -1878,9 +1946,9 @@ const ControlQueryBuilder = ({ schema, value = "", onChange, placeholder = "Ente
 	const inputRef = useRef(null);
 	const fields = schema ? extractSchemaFields(schema) : [];
 	const [error, setError] = useState(null);
-	const isValid = (value$1) => {
+	const isValid = (value) => {
 		try {
-			parseQueryString(value$1.trim());
+			parseQueryString(value.trim());
 		} catch (e) {
 			setError(e.message);
 			return false;
@@ -2184,7 +2252,7 @@ const ControlSelect = (props) => {
 		});
 	}
 	if (isArray && itemsEnum || props.multi) {
-		const data$1 = itemsEnum?.map((value) => ({
+		const data = itemsEnum?.map((value) => ({
 			value,
 			label: value
 		})) || [];
@@ -2193,7 +2261,7 @@ const ControlSelect = (props) => {
 			...inputProps,
 			id,
 			leftSection: icon,
-			data: data$1,
+			data,
 			defaultValue: Array.isArray(props.input.props.defaultValue) ? props.input.props.defaultValue : [],
 			onChange: (value) => {
 				props.input.set(value);
@@ -2449,7 +2517,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({
@@ -2616,44 +2684,35 @@ const AppBar = (props) => {
 };
 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 +2721,7 @@ const Sidebar = (props) => {
 						tt: "uppercase",
 						fw: "bold",
 						children: item.label
-					}, key)]
+					})]
 				}, key);
 			}
 		}
@@ -2698,13 +2757,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 +2777,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, {
@@ -2734,9 +2793,9 @@ const SidebarItem = (props) => {
 	const { item, level } = props;
 	const maxLevel = 2;
 	const router = useRouter();
-	const isActive = useCallback((item$1) => {
-		if (!item$1.children) return false;
-		for (const child of item$1.children) {
+	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;
 			}
@@ -2809,31 +2868,15 @@ const SidebarItem = (props) => {
 };
 const SidebarCollapsedItem = (props) => {
 	const { item, level } = props;
-	const router = useRouter();
-	const isActive = useCallback((item$1) => {
-		if (!item$1.children) return false;
-		for (const child of item$1.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 +2885,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 +2893,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.resizable) 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.resizable,
+		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,9 +3028,12 @@ const AdminShell = (props) => {
 			setShowSidebar(shouldShowSidebar());
 		},
 		"react:transition:begin": () => {
-			setOpened(false);
+			setSidebar({
+				...sidebar,
+				opened: false
+			});
 		}
-	}, []);
+	}, [sidebar]);
 	const defaultAppBarItems = [{
 		position: "left",
 		type: "burger"
@@ -2885,14 +3042,19 @@ const AdminShell = (props) => {
 	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 ? collapsedWidth : isExpandedByHover ? hoverWidth : expandedWidth : 0;
+	const canResize = props.resizable && !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 ? { base: collapsedWidth } : isExpandedByHover ? { base: hoverWidth } : { base: expandedWidth },
 			breakpoint: "sm",
 			collapsed: { mobile: !opened }
 		} : void 0,
@@ -2907,13 +3069,32 @@ const AdminShell = (props) => {
 					...props.appBarProps
 				})
 			}),
-			hasSidebar && /* @__PURE__ */ jsx(AppShell.Navbar, {
+			hasSidebar && /* @__PURE__ */ jsxs(AppShell.Navbar, {
 				bg: ui.colors.surface,
+				className: "alepha-sidebar-navbar",
+				"data-resizing": isResizing,
+				onMouseEnter: handleNavbarMouseEnter,
+				onMouseLeave: handleNavbarMouseLeave,
+				style: {
+					transform: collapseEffect.offset ? `translateX(${collapseEffect.offset}px)` : void 0,
+					opacity: collapseEffect.opacity
+				},
 				...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: -2,
+					top: 0,
+					bottom: 0,
+					w: 4,
+					style: {
+						cursor: "col-resize",
+						userSelect: "none"
+					},
+					onMouseDown: handleResizeStart
+				})]
 			}),
 			/* @__PURE__ */ jsx(AppShell.Main, {
 				pl: sidebarWidth,
@@ -2923,6 +3104,8 @@ 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, {})
 			}),
@@ -3618,7 +3801,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
 */
@@ -3639,7 +3840,21 @@ const AlephaUI = $module({
 		alepha.with(ToastService);
 	}
 });
+/**
+* Register UI components and get the RootRouter instance.
+*/
+const $ui = (opts = {}) => {
+	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);
+};
 
 //#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, 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 };
 //# sourceMappingURL=index.js.map