@alepha/ui 0.16.0 → 0.16.2

package/dist/core/index.js

@@ -6,12 +6,12 @@ import { $cookie } from "alepha/server/cookies";
 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, 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 { Children, Fragment, createElement, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Notifications, notifications } from "@mantine/notifications";
-import { $page, Link, NestedView, useActive, useRouter } from "alepha/react/router";
+import { $page, Link, NestedView, useActive, useRouter, useRouterState } from "alepha/react/router";
 import { NavigationProgress, nprogress } from "@mantine/nprogress";
-import { ClientOnly, useAction, useEvents, useInject, useStore } from "alepha/react";
+import { ClientOnly, useAction, useAlepha, useEvents, useInject, useStore } from "alepha/react";
 import { Spotlight, spotlight } from "@mantine/spotlight";
 import { ui as ui$1 } from "@alepha/ui";
 import { useDebouncedCallback, useOs } from "@mantine/hooks";
@@ -357,11 +357,10 @@ const ErrorViewer = ({ error, showStack = true, copyable = true, size = "sm" })
 		})]
 	});
 };
-var ErrorViewer_default = ErrorViewer;
 
 //#endregion
 //#region ../../src/core/components/dialogs/AlertDialog.tsx
-const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text$1, {
+const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [options?.message && /* @__PURE__ */ jsx(Text$1, {
 	mb: "md",
 	children: options.message
 }), /* @__PURE__ */ jsx(Group, {
@@ -371,11 +370,10 @@ const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment, { c
 		children: options?.okLabel || "OK"
 	})
 })] });
-var AlertDialog_default = AlertDialog;
 
 //#endregion
 //#region ../../src/core/components/dialogs/ConfirmDialog.tsx
-const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text$1, {
+const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [options?.message && /* @__PURE__ */ jsx(Text$1, {
 	mb: "md",
 	children: options.message
 }), /* @__PURE__ */ jsxs(Group, {
@@ -390,7 +388,6 @@ const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ jsxs(Fragment,
 		children: options?.confirmLabel || "Confirm"
 	})]
 })] });
-var ConfirmDialog_default = ConfirmDialog;
 
 //#endregion
 //#region ../../src/core/components/dialogs/PromptDialog.tsx
@@ -406,7 +403,7 @@ const PromptDialog = ({ options, onSubmit }) => {
 	const handleKeyDown = (event) => {
 		if (event.key === "Enter") handleSubmit();
 	};
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		options?.message && /* @__PURE__ */ jsx(Text$1, {
 			mb: "md",
 			children: options.message
@@ -435,7 +432,6 @@ const PromptDialog = ({ options, onSubmit }) => {
 		})
 	] });
 };
-var PromptDialog_default = PromptDialog;
 
 //#endregion
 //#region ../../src/core/constants/ui.ts
@@ -448,7 +444,7 @@ const ui = {
 		border: "var(--alepha-border)"
 	},
 	sizes: { icon: {
-		xs: 12,
+		xs: 14,
 		sm: 16,
 		md: 20,
 		lg: 24,
@@ -480,7 +476,7 @@ var DialogService = class {
 			const modalId = this.open({
 				...options,
 				title: options?.title || "Alert",
-				content: /* @__PURE__ */ jsx(AlertDialog_default, {
+				content: /* @__PURE__ */ jsx(AlertDialog, {
 					options,
 					onClose: () => {
 						this.close(modalId);
@@ -500,7 +496,7 @@ var DialogService = class {
 				title: options?.title || "Confirm",
 				closeOnClickOutside: false,
 				closeOnEscape: false,
-				content: /* @__PURE__ */ jsx(ConfirmDialog_default, {
+				content: /* @__PURE__ */ jsx(ConfirmDialog, {
 					options,
 					onConfirm: (confirmed) => {
 						this.close(modalId);
@@ -520,7 +516,7 @@ var DialogService = class {
 				title: options?.title || "Input",
 				closeOnClickOutside: false,
 				closeOnEscape: false,
-				content: /* @__PURE__ */ jsx(PromptDialog_default, {
+				content: /* @__PURE__ */ jsx(PromptDialog, {
 					options,
 					onSubmit: (value) => {
 						this.close(modalId);
@@ -561,7 +557,7 @@ var DialogService = class {
 				flex: 1,
 				p: "sm",
 				bg: ui.colors.surface,
-				children: /* @__PURE__ */ jsx(ErrorViewer_default, {
+				children: /* @__PURE__ */ jsx(ErrorViewer, {
 					size: "xs",
 					error,
 					showStack: options?.showStack ?? true
@@ -690,10 +686,10 @@ function isComponentType(param) {
 
 //#endregion
 //#region ../../src/core/helpers/renderIcon.tsx
-const renderIcon = (icon) => {
+const renderIcon = (icon, size) => {
 	if (!icon) return null;
 	if (isValidElement(icon)) return icon;
-	if (isComponentType(icon)) return /* @__PURE__ */ jsx(icon, { size: ui$1.sizes.icon.md });
+	if (isComponentType(icon)) return /* @__PURE__ */ jsx(icon, { size: size ?? ui$1.sizes.icon.md });
 	return icon;
 };
 
@@ -728,7 +724,6 @@ const Omnibar = (props) => {
 		nothingFound
 	});
 };
-var Omnibar_default = Omnibar;
 
 //#endregion
 //#region ../../src/core/components/layout/AlephaMantineProvider.tsx
@@ -751,13 +746,14 @@ const AlephaMantineProvider = (props) => {
 		}
 	}, []);
 	const defaultColorScheme = props.mantine?.defaultColorScheme ?? theme.defaultColorScheme;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorSchemeScript, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ColorSchemeScript, {
 		defaultColorScheme,
 		...props.colorSchemeScript
 	}), /* @__PURE__ */ jsxs(MantineProvider, {
 		...props.mantine,
 		defaultColorScheme,
 		theme: {
+			cursorType: "pointer",
 			...theme,
 			...props.mantine?.theme
 		},
@@ -766,12 +762,11 @@ const AlephaMantineProvider = (props) => {
 			/* @__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, {})]
+				children: [props.omnibar !== false && /* @__PURE__ */ jsx(Omnibar, { ...props.omnibar }), props.children ?? /* @__PURE__ */ jsx(NestedView, {})]
 			})
 		]
 	})] });
 };
-var AlephaMantineProvider_default = AlephaMantineProvider;
 
 //#endregion
 //#region ../../src/core/UiRouter.ts
@@ -784,7 +779,7 @@ var AlephaMantineProvider_default = AlephaMantineProvider;
 var UiRouter = class {
 	root = $page({
 		path: "/",
-		component: AlephaMantineProvider_default
+		component: AlephaMantineProvider
 	});
 };
 
@@ -831,40 +826,25 @@ const ActionButton = (_props) => {
 	const theme = useMantineTheme();
 	const props = { ..._props };
 	const { tooltip, menu, icon, ...restProps } = props;
-	if (props.variant === "subtle") {
-		restProps.c ??= "var(--mantine-color-text)";
-		restProps.color ??= "gray";
-	}
+	if (props.variant === "subtle" || props.variant === "outline") restProps.color ??= "gray";
 	if (props.intent) {
-		if (props.intent === "none") {
-			restProps.c ??= "var(--mantine-color-text)";
-			restProps.color ??= "gray";
-		} else if (props.intent === "primary") {
-			restProps.c ??= "white";
-			restProps.color ??= theme.primaryColor;
-		} else if (props.intent === "success") {
+		if (props.intent === "none") restProps.color ??= "gray";
+		else if (props.intent === "primary") restProps.color ??= theme.primaryColor;
+		else if (props.intent === "success") {
 			restProps.c ??= "white";
 			restProps.color ??= "green";
 		} else if (props.intent === "danger") {
 			restProps.c ??= "white";
 			restProps.color ??= "red";
-		} else if (props.intent === "warning") {
-			restProps.c ??= "var(--mantine-color-text)";
-			restProps.color ??= "yellow";
-		} else if (props.intent === "info") {
+		} else if (props.intent === "warning") restProps.color ??= "yellow";
+		else if (props.intent === "info") {
 			restProps.c ??= "white";
 			restProps.color ??= "blue";
 		}
 	}
 	if (props.icon) {
-		const icon = isComponentType(props.icon) ? /* @__PURE__ */ jsx(props.icon, { size: ui.sizes.icon.md }) : /* @__PURE__ */ jsx(ThemeIcon, {
-			w: 24,
-			variant: "transparent",
-			size: "sm",
-			c: "var(--mantine-color-text)",
-			...props.themeIconProps,
-			children: props.icon
-		});
+		const sizes = ui.sizes.icon;
+		const icon = isComponentType(props.icon) ? /* @__PURE__ */ jsx(props.icon, { size: sizes[props.size || "md"] }) : /* @__PURE__ */ jsx("span", { children: props.icon });
 		if (!props.children) {
 			restProps.children = Children.only(icon);
 			restProps.px ??= "xs";
@@ -873,7 +853,7 @@ const ActionButton = (_props) => {
 	if (props.leftSection && !props.children) restProps.px ??= "xs";
 	if (props.textVisibleFrom) {
 		const { children, textVisibleFrom, leftSection, ...rest } = restProps;
-		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Flex$1, {
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Flex$1, {
 			w: "100%",
 			visibleFrom: textVisibleFrom,
 			children: /* @__PURE__ */ jsx(ActionButton, {
@@ -967,7 +947,6 @@ const ActionButton = (_props) => {
 	}
 	return actionElement;
 };
-var ActionButton_default = ActionButton;
 /**
 * Action button that submits a form with loading and disabled state handling.
 */
@@ -1100,7 +1079,6 @@ const BurgerButton = (props) => {
 		...props
 	});
 };
-var BurgerButton_default = BurgerButton;
 
 //#endregion
 //#region ../../src/core/components/buttons/ClipboardButton.tsx
@@ -1112,7 +1090,7 @@ const ClipboardButton = (props) => {
 		children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, {
 			label: copied ? copiedLabel : copyLabel,
 			openDelay: 500,
-			children: /* @__PURE__ */ jsx(ActionButton_default, {
+			children: /* @__PURE__ */ jsx(ActionButton, {
 				color: copied ? "teal" : void 0,
 				onClick: copy,
 				icon: copied ? IconCheck : IconCopy,
@@ -1122,7 +1100,6 @@ const ClipboardButton = (props) => {
 		})
 	});
 };
-var ClipboardButton_default = ClipboardButton;
 
 //#endregion
 //#region ../../src/core/components/buttons/DarkModeButton.tsx
@@ -1138,23 +1115,29 @@ const DarkModeButton = (props) => {
 	const toggleColorScheme = () => {
 		setColorScheme((document.documentElement.getAttribute("data-mantine-color-scheme") ?? "light") === "dark" ? "light" : "dark");
 	};
-	return /* @__PURE__ */ jsx(ActionButton_default, {
+	const size = props.size ?? "md";
+	const iconSize = ui.sizes.icon[size] ?? ui.sizes.icon.md;
+	return /* @__PURE__ */ jsx(ActionButton, {
 		onClick: toggleColorScheme,
 		variant: props.variant ?? "subtle",
-		size: props.size ?? "sm",
+		size,
 		"aria-label": "Toggle color scheme",
-		px: "xs",
-		icon: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconSun, { className: "alepha-light-hidden" }), /* @__PURE__ */ jsx(IconMoon, { className: "alepha-dark-hidden" })] }),
+		icon: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconSun, {
+			size: iconSize,
+			className: "alepha-light-hidden"
+		}), /* @__PURE__ */ jsx(IconMoon, {
+			size: iconSize,
+			className: "alepha-dark-hidden"
+		})] }),
 		...props
 	});
 };
-var DarkModeButton_default = DarkModeButton;
 
 //#endregion
 //#region ../../src/core/components/buttons/LanguageButton.tsx
 const LanguageButton = (props) => {
 	const i18n = useI18n();
-	return /* @__PURE__ */ jsx(ActionButton_default, {
+	return /* @__PURE__ */ jsx(ActionButton, {
 		variant: "default",
 		icon: IconLanguage,
 		menu: { items: i18n.languages.map((lang) => ({
@@ -1165,14 +1148,13 @@ const LanguageButton = (props) => {
 		...props
 	});
 };
-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, {
+	if (props.collapsed) return /* @__PURE__ */ jsx(ActionButton, {
 		variant: "subtle",
 		onClick: spotlight.open,
 		radius: "md",
@@ -1183,7 +1165,7 @@ const OmnibarButton = (props) => {
 		},
 		...props.actionProps
 	});
-	return /* @__PURE__ */ jsx(ActionButton_default, {
+	return /* @__PURE__ */ jsx(ActionButton, {
 		variant: "default",
 		onClick: spotlight.open,
 		justify: "space-between",
@@ -1212,14 +1194,13 @@ const OmnibarButton = (props) => {
 		})
 	});
 };
-var OmnibarButton_default = OmnibarButton;
 
 //#endregion
 //#region ../../src/core/components/buttons/ThemeButton.tsx
 const ThemeButton = (props) => {
 	const [theme, setTheme] = useTheme();
 	const themeList = useStore(alephaThemeListAtom)[0];
-	return /* @__PURE__ */ jsx(ActionButton_default, {
+	return /* @__PURE__ */ jsx(ActionButton, {
 		variant: "subtle",
 		icon: IconPalette,
 		menu: { items: themeList.map((it, index) => ({
@@ -1230,14 +1211,13 @@ const ThemeButton = (props) => {
 		...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, {}),
+	return /* @__PURE__ */ jsx(ActionButton, {
+		icon: sidebar.collapsed ? IconLayoutSidebarRightCollapse : IconLayoutSidebarLeftCollapse,
 		visibleFrom: "sm",
 		variant: "subtle",
 		size: "md",
@@ -1256,7 +1236,6 @@ const ToggleSidebarButton = (props) => {
 		...props
 	});
 };
-var ToggleSidebarButton_default = ToggleSidebarButton;
 
 //#endregion
 //#region ../../src/core/utils/icons.tsx
@@ -1312,15 +1291,30 @@ const capitalize = (str) => {
 	return str.charAt(0).toUpperCase() + str.slice(1);
 };
 /**
+* Converts camelCase or snake_case to Title Case with spaces.
+*
+* @example
+* toTitleCase("userName") // "User Name"
+* toTitleCase("first_name") // "First Name"
+* toTitleCase("email") // "Email"
+*/
+const toTitleCase = (str) => {
+	return str.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+};
+/**
 * Converts a path or identifier string into a pretty display name.
-* Removes slashes and capitalizes the first letter.
+* For paths like "/contacts/0/name", extracts just the field name "Name".
+* Handles camelCase and snake_case conversion to Title Case.
 *
 * @example
-* prettyName("/userName") // "UserName"
-* prettyName("email") // "Email"
+* prettyName("/userName") // "User Name"
+* prettyName("/contacts/0/email") // "Email"
+* prettyName("/address/streetName") // "Street Name"
+* prettyName("first_name") // "First Name"
 */
 const prettyName = (name) => {
-	return capitalize(name.replaceAll("/", ""));
+	const segments = name.split("/").filter((s) => s && !/^\d+$/.test(s));
+	return toTitleCase(segments[segments.length - 1] || name.replaceAll("/", ""));
 };
 
 //#endregion
@@ -1364,6 +1358,107 @@ const parseInput = (props, form) => {
 //#endregion
 //#region ../../src/core/components/form/ControlArray.tsx
 /**
+* Custom hook to sync array items with form state.
+* Uses form events as the source of truth, eliminating dual-state issues.
+*/
+const useArrayItems = (input) => {
+	const alepha = useAlepha();
+	const keyCounter = useRef(0);
+	const [items, setItemsState] = useState(() => {
+		const defaultValue = input?.props?.defaultValue;
+		if (Array.isArray(defaultValue)) return defaultValue.map((value) => ({
+			key: keyCounter.current++,
+			value
+		}));
+		return [];
+	});
+	const syncFromFormValue = useCallback((formValue) => {
+		if (!Array.isArray(formValue)) {
+			setItemsState([]);
+			return;
+		}
+		setItemsState((prevItems) => {
+			if (prevItems.length === formValue.length) {
+				if (prevItems.every((item, i) => item.value === formValue[i])) return prevItems;
+			}
+			keyCounter.current = 0;
+			return formValue.map((value) => ({
+				key: keyCounter.current++,
+				value
+			}));
+		});
+	}, []);
+	useEffect(() => {
+		if (!input?.form) return;
+		const formId = input.form.id;
+		const fieldPath = input.path;
+		const listeners = [alepha.events.on("form:reset", (event) => {
+			if (event.id === formId) {
+				const defaultValue = input.props?.defaultValue;
+				keyCounter.current = 0;
+				if (Array.isArray(defaultValue)) setItemsState(defaultValue.map((value) => ({
+					key: keyCounter.current++,
+					value
+				})));
+				else setItemsState([]);
+			}
+		}), alepha.events.on("form:change", (event) => {
+			if (event.id === formId && event.path === fieldPath) syncFromFormValue(event.value);
+		})];
+		return () => {
+			for (const unsub of listeners) unsub();
+		};
+	}, [
+		alepha,
+		input,
+		syncFromFormValue
+	]);
+	return {
+		items,
+		setItems: useCallback((newItems) => {
+			setItemsState(newItems);
+			input?.set(newItems.map((item) => item.value));
+		}, [input]),
+		nextKey: useCallback(() => keyCounter.current++, [])
+	};
+};
+/**
+* Creates a proper InputField for an array item that integrates with the form system.
+* Uses array index for test IDs to ensure predictable, testable element identifiers.
+*/
+const createArrayItemInput = (parentInput, itemSchema, index, _itemKey, value, onValueChange) => {
+	return {
+		schema: itemSchema,
+		path: `${parentInput.path}/${index}`,
+		required: false,
+		form: parentInput.form,
+		props: {
+			id: `${parentInput.props.id}-${index}`,
+			name: `${parentInput.props.name}[${index}]`,
+			defaultValue: value
+		},
+		set: onValueChange
+	};
+};
+/**
+* Creates a proper InputField for a nested object field within an array item.
+* Uses array index for test IDs to ensure predictable, testable element identifiers.
+*/
+const createArrayItemFieldInput = (parentInput, itemSchema, fieldName, index, _itemKey, itemValue, onFieldChange) => {
+	return {
+		schema: itemSchema.properties[fieldName],
+		path: `${parentInput.path}/${index}/${fieldName}`,
+		required: itemSchema.required?.includes(fieldName) ?? false,
+		form: parentInput.form,
+		props: {
+			id: `${parentInput.props.id}-${index}-${fieldName}`,
+			name: `${parentInput.props.name}[${index}].${fieldName}`,
+			defaultValue: itemValue?.[fieldName]
+		},
+		set: (value) => onFieldChange(fieldName, value)
+	};
+};
+/**
 * ControlArray component for editing arrays of schema items.
 *
 * Features:
@@ -1372,6 +1467,7 @@ const parseInput = (props, form) => {
 * - Supports arrays of primitives
 * - Grid layout for object items
 * - Min/max constraints
+* - Syncs with form state (handles external updates and resets)
 *
 * @example
 * ```tsx
@@ -1395,36 +1491,13 @@ const parseInput = (props, form) => {
 */
 const ControlArray = (props) => {
 	const { inputProps } = parseInput(props, {});
-	const idCounter = useRef(0);
-	const [items, setItems] = useState(() => {
-		const defaultValue = props.input?.props?.defaultValue;
-		if (Array.isArray(defaultValue)) return defaultValue.map((value) => ({
-			key: idCounter.current++,
-			value
-		}));
-		return [];
-	});
-	useEvents({ "form:reset": (event) => {
-		if (event.id === props.input?.form?.id) {
-			const defaultValue = props.input?.props?.defaultValue;
-			if (Array.isArray(defaultValue)) {
-				idCounter.current = 0;
-				setItems(defaultValue.map((value) => ({
-					key: idCounter.current++,
-					value
-				})));
-			} else setItems([]);
-		}
-	} }, [props.input]);
+	const { items, setItems, nextKey } = useArrayItems(props.input);
 	if (!props.input?.props) return null;
 	const schema = props.input.schema;
 	if (!schema || !("items" in schema)) return null;
 	const itemSchema = schema.items;
 	const isObjectItem = itemSchema && "properties" in itemSchema;
 	const { min = 0, max = Number.POSITIVE_INFINITY, columns = 1 } = props;
-	const updateFormValue = (newItems) => {
-		props.input.set(newItems.map((item) => item.value));
-	};
 	const handleAdd = () => {
 		if (items.length >= max) return;
 		let newValue;
@@ -1433,18 +1506,14 @@ const ControlArray = (props) => {
 			const objSchema = itemSchema;
 			for (const [key, propSchema] of Object.entries(objSchema.properties)) if ("default" in propSchema) newValue[key] = propSchema.default;
 		} else newValue = "";
-		const newItems = [...items, {
-			key: idCounter.current++,
+		setItems([...items, {
+			key: nextKey(),
 			value: newValue
-		}];
-		setItems(newItems);
-		updateFormValue(newItems);
+		}]);
 	};
 	const handleRemove = (index) => {
 		if (items.length <= min) return;
-		const newItems = items.filter((_, i) => i !== index);
-		setItems(newItems);
-		updateFormValue(newItems);
+		setItems(items.filter((_, i) => i !== index));
 	};
 	const handleItemChange = (index, value) => {
 		const newItems = [...items];
@@ -1453,7 +1522,6 @@ const ControlArray = (props) => {
 			value
 		};
 		setItems(newItems);
-		updateFormValue(newItems);
 	};
 	const handleFieldChange = (index, field, value) => {
 		const newItems = [...items];
@@ -1465,10 +1533,10 @@ const ControlArray = (props) => {
 			}
 		};
 		setItems(newItems);
-		updateFormValue(newItems);
 	};
 	const colSpan = 12 / columns;
-	const fieldNames = isObjectItem ? Object.keys(itemSchema.properties) : [];
+	const objectItemSchema = isObjectItem ? itemSchema : null;
+	const fieldNames = objectItemSchema ? Object.keys(objectItemSchema.properties) : [];
 	const renderItems = () => /* @__PURE__ */ jsxs(Stack, {
 		gap: "sm",
 		children: [items.map((item, index) => /* @__PURE__ */ jsxs(Flex$1, {
@@ -1484,47 +1552,24 @@ const ControlArray = (props) => {
 					style: { cursor: "grab" },
 					children: /* @__PURE__ */ jsx(IconGripVertical, { size: 16 })
 				}),
-				isObjectItem ? /* @__PURE__ */ jsx(Grid, {
+				objectItemSchema ? /* @__PURE__ */ jsx(Grid, {
 					style: { flex: 1 },
 					gutter: "sm",
 					children: fieldNames.map((fieldName) => {
-						const fieldSchema = itemSchema.properties[fieldName];
 						const fieldControlProps = props.controlProps?.[fieldName] ?? {};
-						const virtualInput = {
-							schema: fieldSchema,
-							props: {
-								id: `${props.input.props.id}-${item.key}-${fieldName}`,
-								name: `${props.input.props.name}[${index}].${fieldName}`,
-								defaultValue: item.value?.[fieldName]
-							},
-							path: `${props.input.path}/${index}/${fieldName}`,
-							required: itemSchema.required?.includes(fieldName) ?? false,
-							form: props.input.form,
-							set: (value) => handleFieldChange(index, fieldName, value)
-						};
+						const fieldInput = createArrayItemFieldInput(props.input, objectItemSchema, fieldName, index, item.key, item.value, (field, value) => handleFieldChange(index, field, value));
 						return /* @__PURE__ */ jsx(Grid.Col, {
 							span: colSpan,
-							children: /* @__PURE__ */ jsx(Control_default, {
-								input: virtualInput,
+							children: /* @__PURE__ */ jsx(Control, {
+								input: fieldInput,
 								...fieldControlProps
 							})
 						}, fieldName);
 					})
 				}) : /* @__PURE__ */ jsx(Flex$1, {
 					style: { flex: 1 },
-					children: /* @__PURE__ */ jsx(Control_default, {
-						input: {
-							schema: itemSchema,
-							props: {
-								id: `${props.input.props.id}-${item.key}`,
-								name: `${props.input.props.name}[${index}]`,
-								defaultValue: item.value
-							},
-							path: `${props.input.path}/${index}`,
-							required: false,
-							form: props.input.form,
-							set: (value) => handleItemChange(index, value)
-						},
+					children: /* @__PURE__ */ jsx(Control, {
+						input: createArrayItemInput(props.input, itemSchema, index, item.key, item.value, (value) => handleItemChange(index, value)),
 						...props.itemControlProps
 					})
 				}),
@@ -1609,7 +1654,6 @@ const ControlArray = (props) => {
 		})
 	});
 };
-var ControlArray_default = ControlArray;
 
 //#endregion
 //#region ../../src/core/components/form/ControlDate.tsx
@@ -1667,7 +1711,6 @@ const ControlDate = (props) => {
 	}
 	return null;
 };
-var ControlDate_default = ControlDate;
 
 //#endregion
 //#region ../../src/core/components/form/ControlNumber.tsx
@@ -1726,7 +1769,6 @@ const ControlNumber = (props) => {
 		}
 	});
 };
-var ControlNumber_default = ControlNumber;
 
 //#endregion
 //#region ../../src/core/components/form/ControlObject.tsx
@@ -1776,7 +1818,7 @@ const ControlObject = (props) => {
 		if (!field) return null;
 		return /* @__PURE__ */ jsx(Grid.Col, {
 			span: colSpan,
-			children: /* @__PURE__ */ jsx(Control_default, {
+			children: /* @__PURE__ */ jsx(Control, {
 				input: field,
 				...fieldControlProps
 			})
@@ -1803,7 +1845,6 @@ const ControlObject = (props) => {
 		})
 	});
 };
-var ControlObject_default = ControlObject;
 
 //#endregion
 //#region ../../src/core/utils/extractSchemaFields.ts
@@ -2033,7 +2074,7 @@ function QueryHelp({ fields, onInsert }) {
 							children: Object.entries(OPERATOR_INFO).map(([key, info]) => /* @__PURE__ */ jsxs(Group, {
 								gap: "xs",
 								wrap: "nowrap",
-								children: [/* @__PURE__ */ jsx(ActionButton_default, {
+								children: [/* @__PURE__ */ jsx(ActionButton, {
 									px: "xs",
 									size: "xs",
 									h: 24,
@@ -2063,7 +2104,7 @@ function QueryHelp({ fields, onInsert }) {
 							children: [/* @__PURE__ */ jsxs(Group, {
 								gap: "xs",
 								wrap: "nowrap",
-								children: [/* @__PURE__ */ jsx(ActionButton_default, {
+								children: [/* @__PURE__ */ jsx(ActionButton, {
 									px: "xs",
 									size: "xs",
 									h: 24,
@@ -2080,7 +2121,7 @@ function QueryHelp({ fields, onInsert }) {
 							}), /* @__PURE__ */ jsxs(Group, {
 								gap: "xs",
 								wrap: "nowrap",
-								children: [/* @__PURE__ */ jsx(ActionButton_default, {
+								children: [/* @__PURE__ */ jsx(ActionButton, {
 									px: "xs",
 									size: "xs",
 									h: 24,
@@ -2120,7 +2161,7 @@ function QueryHelp({ fields, onInsert }) {
 						wrap: "nowrap",
 						align: "flex-start",
 						children: [
-							/* @__PURE__ */ jsx(ActionButton_default, {
+							/* @__PURE__ */ jsx(ActionButton, {
 								px: "xs",
 								size: "xs",
 								h: 24,
@@ -2146,7 +2187,7 @@ function QueryHelp({ fields, onInsert }) {
 								}), field.enum && /* @__PURE__ */ jsx(Group, {
 									gap: 0,
 									wrap: "wrap",
-									children: field.enum.map((enumValue) => /* @__PURE__ */ jsx(ActionButton_default, {
+									children: field.enum.map((enumValue) => /* @__PURE__ */ jsx(ActionButton, {
 										px: "xs",
 										size: "xs",
 										h: 24,
@@ -2168,7 +2209,6 @@ function QueryHelp({ fields, onInsert }) {
 		]
 	});
 }
-var ControlQueryBuilder_default = ControlQueryBuilder;
 
 //#endregion
 //#region ../../src/core/components/form/ControlSelect.tsx
@@ -2268,7 +2308,6 @@ const ControlSelect = (props) => {
 		...selectProps
 	});
 };
-var ControlSelect_default = ControlSelect;
 
 //#endregion
 //#region ../../src/core/components/form/Control.tsx
@@ -2304,7 +2343,7 @@ const Control = (_props) => {
 		..._props,
 		...schema.$control
 	};
-	if (props.query) return /* @__PURE__ */ jsx(ControlQueryBuilder_default, {
+	if (props.query) return /* @__PURE__ */ jsx(ControlQueryBuilder, {
 		...props.input.props,
 		...inputProps,
 		schema: props.query,
@@ -2332,7 +2371,7 @@ const Control = (_props) => {
 	const isObject = props.input.schema && "type" in props.input.schema && props.input.schema.type === "object" && "properties" in props.input.schema;
 	if (props.object || isObject) {
 		const controlObjectProps = typeof props.object === "object" ? props.object : {};
-		return /* @__PURE__ */ jsx(ControlObject_default, {
+		return /* @__PURE__ */ jsx(ControlObject, {
 			input: props.input,
 			title: props.title,
 			description: props.description,
@@ -2343,7 +2382,7 @@ const Control = (_props) => {
 	const isArrayOfObjects = isArray && "items" in props.input.schema && props.input.schema.items && typeof props.input.schema.items === "object" && "properties" in props.input.schema.items;
 	if (props.array || isArrayOfObjects) {
 		const controlArrayProps = typeof props.array === "object" ? props.array : {};
-		return /* @__PURE__ */ jsx(ControlArray_default, {
+		return /* @__PURE__ */ jsx(ControlArray, {
 			input: props.input,
 			title: props.title,
 			description: props.description,
@@ -2353,7 +2392,7 @@ const Control = (_props) => {
 	if (props.number || props.input.schema && "type" in props.input.schema && (props.input.schema.type === "number" || props.input.schema.type === "integer")) {
 		const controlNumberProps = typeof props.number === "object" ? props.number : {};
 		if (props.slider) controlNumberProps.sliderProps ??= {};
-		return /* @__PURE__ */ jsx(ControlNumber_default, {
+		return /* @__PURE__ */ jsx(ControlNumber, {
 			input: props.input,
 			title: props.title,
 			description: props.description,
@@ -2386,7 +2425,7 @@ const Control = (_props) => {
 	if (props.input.schema && "enum" in props.input.schema && props.input.schema.enum || isArray && !isArrayOfObjects || props.select) {
 		const opts = typeof props.select === "object" ? props.select : {};
 		if (props.segmented) opts.segmented ??= {};
-		return /* @__PURE__ */ jsx(ControlSelect_default, {
+		return /* @__PURE__ */ jsx(ControlSelect, {
 			input: props.input,
 			title: props.title,
 			description: props.description,
@@ -2395,42 +2434,16 @@ const Control = (_props) => {
 		});
 	}
 	if (props.input.schema && "type" in props.input.schema && props.input.schema.type === "boolean") {
-		if (props.switch) {
-			const switchProps = typeof props.switch === "object" ? props.switch : {};
-			return /* @__PURE__ */ jsx(Switch, {
-				...inputProps,
-				id,
-				color: "blue",
-				defaultChecked: props.input.props.defaultValue,
-				onChange: (event) => {
-					props.input.set(event.currentTarget.checked);
-				},
-				...switchProps
-			});
-		}
-		const selectProps = {
-			loader: async () => [
-				{
-					value: "true",
-					label: "Yes"
-				},
-				{
-					value: "false",
-					label: "No"
-				},
-				{
-					value: "",
-					label: ""
-				}
-			],
-			...props.input.props
-		};
-		return /* @__PURE__ */ jsx(ControlSelect_default, {
-			input: props.input,
-			title: props.title,
-			description: props.description,
-			icon,
-			...selectProps
+		const switchProps = typeof props.switch === "object" ? props.switch : {};
+		return /* @__PURE__ */ jsx(Switch, {
+			...inputProps,
+			id,
+			color: "blue",
+			defaultChecked: props.input.props.defaultValue,
+			onChange: (event) => {
+				props.input.set(event.currentTarget.checked);
+			},
+			...switchProps
 		});
 	}
 	if (props.password || props.input.props.name?.includes("password")) {
@@ -2453,7 +2466,7 @@ const Control = (_props) => {
 			...textAreaProps
 		});
 	}
-	if (props.date || props.datetime || props.time || format === "date" || format === "date-time" || format === "time") return /* @__PURE__ */ jsx(ControlDate_default, {
+	if (props.date || props.datetime || props.time || format === "date" || format === "date-time" || format === "time") return /* @__PURE__ */ jsx(ControlDate, {
 		input: props.input,
 		title: props.title,
 		description: props.description,
@@ -2488,7 +2501,6 @@ const Control = (_props) => {
 		]
 	});
 };
-var Control_default = Control;
 
 //#endregion
 //#region ../../src/core/components/form/TypeForm.tsx
@@ -2551,7 +2563,7 @@ const TypeForm = (props) => {
 		xl: columns.xl ? 12 / columns.xl : void 0
 	};
 	const renderFields = () => {
-		if (children) return /* @__PURE__ */ jsx(Fragment, { children: children(form.input) });
+		if (children) return /* @__PURE__ */ jsx(Fragment$1, { children: children(form.input) });
 		return /* @__PURE__ */ jsx(Grid, { children: supportedFields.map((fieldName) => {
 			const field = form.input[fieldName];
 			const fieldSchema = schema.properties[fieldName];
@@ -2565,7 +2577,7 @@ const TypeForm = (props) => {
 			};
 			return /* @__PURE__ */ jsx(Grid.Col, {
 				span,
-				children: /* @__PURE__ */ jsx(Control_default, {
+				children: /* @__PURE__ */ jsx(Control, {
 					input: field,
 					...mergedControlProps
 				})
@@ -2593,11 +2605,11 @@ const TypeForm = (props) => {
 					/* @__PURE__ */ jsx(Flex$1, { flex: 1 }),
 					/* @__PURE__ */ jsxs(Flex$1, {
 						gap: "sm",
-						children: [/* @__PURE__ */ jsx(ActionButton_default, {
+						children: [/* @__PURE__ */ jsx(ActionButton, {
 							variant: "subtle",
 							type: "reset",
 							children: "Reset"
-						}), /* @__PURE__ */ jsx(ActionButton_default, {
+						}), /* @__PURE__ */ jsx(ActionButton, {
 							intent: "primary",
 							form,
 							...submitButtonProps,
@@ -2617,7 +2629,6 @@ const TypeForm = (props) => {
 		children: content
 	});
 };
-var TypeForm_default = TypeForm;
 
 //#endregion
 //#region ../../src/core/components/layout/AppBar.tsx
@@ -2627,10 +2638,10 @@ const AppBar = (props) => {
 	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);
-			if (item.type === "search") return /* @__PURE__ */ jsx(OmnibarButton_default, { ...item.props }, index);
-			if (item.type === "lang") return /* @__PURE__ */ jsx(LanguageButton_default, { ...item.props }, index);
+			if (item.type === "burger") return /* @__PURE__ */ jsx(BurgerButton, {}, index);
+			if (item.type === "dark") return /* @__PURE__ */ jsx(DarkModeButton, { ...item.props }, index);
+			if (item.type === "search") return /* @__PURE__ */ jsx(OmnibarButton, { ...item.props }, index);
+			if (item.type === "lang") return /* @__PURE__ */ jsx(LanguageButton, { ...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);
@@ -2672,7 +2683,7 @@ const AppBar = (props) => {
 			if (href) router.push(href);
 			else router.back();
 		};
-		if (iconOnly) return /* @__PURE__ */ jsx(ActionButton_default, {
+		if (iconOnly) return /* @__PURE__ */ jsx(ActionButton, {
 			icon: iconElement,
 			variant: "subtle",
 			color: "gray",
@@ -2682,7 +2693,7 @@ const AppBar = (props) => {
 				position: "bottom"
 			}
 		}, index);
-		return /* @__PURE__ */ jsx(ActionButton_default, {
+		return /* @__PURE__ */ jsx(ActionButton, {
 			leftSection: iconElement,
 			variant: "subtle",
 			color: "gray",
@@ -2732,19 +2743,71 @@ const AppBar = (props) => {
 	});
 	return content;
 };
-var AppBar_default = AppBar;
+
+//#endregion
+//#region ../../src/core/components/layout/Breadcrumb.tsx
+/**
+* Automatic breadcrumb component that reads the current route hierarchy
+* from the Alepha router's layer stack.
+*
+* Pages should define a `label` in their `$page()` options for best results.
+* Falls back to the page name converted to Title Case.
+*/
+const Breadcrumb = ({ home = "Home", separator, size = "xs", ...groupProps }) => {
+	const state = useRouterState();
+	const router = useRouter();
+	const crumbs = [];
+	if (home !== false) crumbs.push({
+		label: home,
+		href: "/"
+	});
+	for (let i = 1; i < state.layers.length; i++) {
+		const layer = state.layers[i];
+		const route = layer.route;
+		if (route?.path === "/" || route?.path === "") continue;
+		const label = route?.label ?? toTitleCase(layer.name);
+		const href = router.path(layer.name);
+		crumbs.push({
+			label,
+			href
+		});
+	}
+	if (crumbs.length === 0) return null;
+	const sep = separator ?? /* @__PURE__ */ jsx(IconChevronRight, {
+		size: 12,
+		color: "#9ca3af"
+	});
+	return /* @__PURE__ */ jsx(Group, {
+		gap: 4,
+		...groupProps,
+		children: crumbs.map((crumb, i) => /* @__PURE__ */ jsxs(Group, {
+			gap: 4,
+			children: [i > 0 && sep, i < crumbs.length - 1 ? /* @__PURE__ */ jsx(Anchor, {
+				component: Link,
+				href: crumb.href,
+				size,
+				c: "dimmed",
+				children: crumb.label
+			}) : /* @__PURE__ */ jsx(Text$1, {
+				size,
+				fw: 500,
+				children: crumb.label
+			})]
+		}, crumb.href))
+	});
+};
 
 //#endregion
 //#region ../../src/core/components/layout/Sidebar.tsx
 const Sidebar = (props) => {
 	const router = useRouter();
 	const { onItemClick } = props;
-	const divider = (key) => {
+	const divider = (key, fill) => {
 		return /* @__PURE__ */ jsx(Flex$1, {
 			h: 1,
-			bg: "var(--alepha-border)",
+			bg: "var(--mantine-color-default-border)",
 			my: "xs",
-			mx: props.collapsed ? 0 : "sm"
+			mx: fill ? "calc(-1 * var(--mantine-spacing-md))" : props.collapsed ? 0 : "sm"
 		}, key);
 	};
 	const renderNode = (item, key) => {
@@ -2753,29 +2816,32 @@ const Sidebar = (props) => {
 				if (props.collapsed) return null;
 				return /* @__PURE__ */ jsx(Flex$1, { h: 16 }, key);
 			}
-			if (item.type === "divider") return divider(key);
+			if (item.type === "divider") return divider(key, item.fill);
 			if (item.type === "search") return /* @__PURE__ */ jsx(Flex$1, {
 				mb: "xs",
-				children: /* @__PURE__ */ jsx(OmnibarButton_default, { collapsed: props.collapsed })
+				children: /* @__PURE__ */ jsx(OmnibarButton, { collapsed: props.collapsed })
 			}, key);
-			if (item.type === "toggle") return /* @__PURE__ */ jsx(ToggleSidebarButton_default, {}, key);
+			if (item.type === "toggle") return /* @__PURE__ */ jsx(ToggleSidebarButton, {}, key);
 			if (item.type === "section") {
-				if (props.collapsed) return divider(key);
-				return /* @__PURE__ */ jsxs(Flex$1, {
+				if (item.children && item.children.length > 0) {
+					if (!item.children.some((child) => !("can" in child) || !child.can || child.can())) return null;
+				}
+				if (props.collapsed) return /* @__PURE__ */ jsxs(Fragment, { children: [divider(`${key}-d`), item.children?.map((child, index) => renderNode(child, `s${key}-${index}`))] }, key);
+				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Flex$1, {
 					mt: "md",
 					align: "center",
 					gap: "xs",
-					children: [renderIcon(item.icon), /* @__PURE__ */ jsx(Text$1, {
+					children: [renderIcon(item.icon, ui.sizes.icon.sm), /* @__PURE__ */ jsx(Text$1, {
 						size: "xs",
 						c: "dimmed",
 						tt: "uppercase",
 						fw: "bold",
 						children: item.label
 					})]
-				}, key);
+				}), item.children?.map((child, index) => renderNode(child, `s${key}-${index}`))] }, key);
 			}
 		}
-		if ("element" in item) return /* @__PURE__ */ jsx(Flex$1, { children: item.element }, key);
+		if ("element" in item) return /* @__PURE__ */ jsx(Fragment, { children: item.element }, key);
 		if (item.can && !item.can()) return null;
 		if (item.children && item.children.length > 0) {
 			if (!item.children.some((child) => !child.can || child.can())) return null;
@@ -2810,7 +2876,7 @@ const Sidebar = (props) => {
 		return [];
 	};
 	const padding = "md";
-	const gap = props.items ? props.gap ?? 2 : "xs";
+	const gap = props.items ? props.gap ?? 4 : "xs";
 	const menu = useMemo(() => getSidebarNodes(), [props.items, props.autoPopulateMenu]);
 	return /* @__PURE__ */ jsxs(Flex$1, {
 		flex: 1,
@@ -2873,14 +2939,13 @@ const SidebarItem = (props) => {
 		direction: "column",
 		ps: level === 0 ? 0 : 32,
 		pos: "relative",
-		children: [/* @__PURE__ */ jsx(ActionButton_default, {
+		children: [/* @__PURE__ */ jsx(ActionButton, {
 			w: "100%",
 			justify: "space-between",
 			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",
 			variantActive: "default",
@@ -2890,7 +2955,7 @@ const SidebarItem = (props) => {
 				w: "100%",
 				align: "center",
 				gap: "sm",
-				children: [renderIcon(item.icon), /* @__PURE__ */ jsx(Flex$1, {
+				children: [renderIcon(item.icon, ui.sizes.icon.sm), /* @__PURE__ */ jsx(Flex$1, {
 					direction: "column",
 					children: /* @__PURE__ */ jsx(Flex$1, { children: item.label })
 				})]
@@ -2903,7 +2968,7 @@ const SidebarItem = (props) => {
 			children: [/* @__PURE__ */ jsx(Flex$1, { style: {
 				position: "absolute",
 				width: 1,
-				background: "linear-gradient(to bottom, transparent, var(--alepha-border), transparent)",
+				background: "linear-gradient(to bottom, transparent, var(--mantine-color-default-border), transparent)",
 				top: 48,
 				left: 20 + 32 * level,
 				bottom: 16
@@ -2922,7 +2987,7 @@ const SidebarCollapsedItem = (props) => {
 		props.onItemClick?.(item);
 		item.onClick?.();
 	};
-	return /* @__PURE__ */ jsx(ActionButton_default, {
+	return /* @__PURE__ */ jsx(ActionButton, {
 		size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
 		variant: "subtle",
 		variantActive: "default",
@@ -2932,7 +2997,7 @@ const SidebarCollapsedItem = (props) => {
 		},
 		radius: props.item.theme?.radius ?? props.theme.button?.radius ?? "md",
 		onClick: handleItemClick,
-		icon: renderIcon(item.icon) ?? /* @__PURE__ */ jsx(IconSquareRounded, {}),
+		icon: renderIcon(item.icon, ui.sizes.icon.sm) ?? /* @__PURE__ */ jsx(IconSquareRounded, { size: ui.sizes.icon.sm }),
 		href: props.item.href,
 		target: props.item.target,
 		...props.item.actionProps
@@ -2940,17 +3005,12 @@ const SidebarCollapsedItem = (props) => {
 };
 
 //#endregion
-//#region ../../src/core/components/layout/AdminShell.tsx
-const AdminShell = (props) => {
+//#region ../../src/core/components/layout/DashboardShell.tsx
+const DashboardShell = (props) => {
 	const router = useRouter();
 	const [sidebar, setSidebar] = useStore(alephaSidebarAtom);
-	const { opened, collapsed } = sidebar;
-	useEffect(() => {
-		if (props.sidebarProps?.collapsed !== void 0) setSidebar({
-			...sidebar,
-			collapsed: props.sidebarProps.collapsed
-		});
-	}, []);
+	const { opened } = sidebar;
+	const collapsed = props.sidebarProps?.collapsed !== void 0 ? props.sidebarProps.collapsed : sidebar.collapsed;
 	const [isResizing, setIsResizing] = useState(false);
 	const [isHovering, setIsHovering] = useState(false);
 	const [collapseEffect, setCollapseEffect] = useState({
@@ -3045,11 +3105,16 @@ const AdminShell = (props) => {
 		collapseEffect.offset
 	]);
 	const hoverTimeoutRef = useRef(null);
+	const expandOnHover = props.sidebarProps?.expandOnHover !== false;
 	const handleNavbarMouseEnter = useCallback(() => {
-		if (collapsed) hoverTimeoutRef.current = setTimeout(() => {
+		if (collapsed && expandOnHover) hoverTimeoutRef.current = setTimeout(() => {
 			setIsHovering(true);
 		}, hoverDelay);
-	}, [collapsed, hoverDelay]);
+	}, [
+		collapsed,
+		expandOnHover,
+		hoverDelay
+	]);
 	const handleNavbarMouseLeave = useCallback(() => {
 		if (hoverTimeoutRef.current) {
 			clearTimeout(hoverTimeoutRef.current);
@@ -3091,9 +3156,11 @@ const AdminShell = (props) => {
 	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 hasAppBar = props.appBarProps || props.header;
+	const hHeight = props.headerHeight ?? 60;
+	const fHeight = props.footerHeight ?? 24;
+	const headerHeight = hasAppBar ? hHeight : 0;
+	const footerHeight = props.footer ? fHeight : 0;
 	const expandedWidth = Math.max(sidebar.width, collapsedWidth);
 	const isExpandedByHover = collapsed && isHovering;
 	const effectiveCollapsed = collapsed && !isHovering;
@@ -3102,31 +3169,28 @@ const AdminShell = (props) => {
 		props.sidebarProps?.onItemClick?.(item);
 	}, [isExpandedByHover, props.sidebarProps?.onItemClick]);
 	const hoverWidth = Math.max(defaultWidth, collapsedWidth);
-	const sidebarWidth = hasSidebar ? effectiveCollapsed || isExpandedByHover ? collapsedWidth : expandedWidth : 0;
 	const canResize = props.sidebarResizable && !collapsed;
 	return /* @__PURE__ */ jsxs(AppShell, {
+		layout: props.layout,
 		w: "100%",
 		flex: 1,
-		padding: "md",
-		header: hasAppBar ? { height: 60 } : void 0,
+		header: hasAppBar ? { height: hHeight } : void 0,
 		navbar: hasSidebar ? {
 			width: effectiveCollapsed || isExpandedByHover ? { base: collapsedWidth } : { base: expandedWidth },
 			breakpoint: "sm",
 			collapsed: { mobile: !opened }
 		} : void 0,
-		footer: props.footer ? { height: 24 } : void 0,
+		footer: props.footer ? { height: fHeight } : void 0,
 		...props.appShellProps,
 		children: [
-			/* @__PURE__ */ jsx(AppShell.Header, {
-				bg: ui.colors.surface,
+			hasAppBar && /* @__PURE__ */ jsx(AppShell.Header, {
 				...props.appShellHeaderProps,
-				children: props.header ?? /* @__PURE__ */ jsx(AppBar_default, {
+				children: props.header ?? /* @__PURE__ */ jsx(AppBar, {
 					items: defaultAppBarItems,
 					...appBarProps
 				})
 			}),
 			hasSidebar && /* @__PURE__ */ jsxs(AppShell.Navbar, {
-				bg: ui.colors.surface,
 				className: "alepha-sidebar-navbar",
 				"data-resizing": isResizing,
 				"data-hover-expanded": isExpandedByHover,
@@ -3142,31 +3206,37 @@ const AdminShell = (props) => {
 					}
 				},
 				...props.appShellNavbarProps,
-				children: [/* @__PURE__ */ jsx(Sidebar, {
-					...props.sidebarProps ?? {},
-					collapsed: effectiveCollapsed,
-					onItemClick: handleSidebarItemClick
-				}), (canResize || isExpandedByHover) && /* @__PURE__ */ jsx(Flex$1, {
-					pos: "absolute",
-					right: -6,
-					top: 0,
-					bottom: 0,
-					w: 12,
-					style: {
-						cursor: "col-resize",
-						userSelect: "none"
-					},
-					onMouseDown: handleResizeStart
-				})]
+				children: [
+					props.navbarHeader ? /* @__PURE__ */ jsx(Flex$1, {
+						style: { borderBottom: "1px solid var(--mantine-color-default-border)" },
+						h: headerHeight,
+						children: props.navbarHeader
+					}) : null,
+					/* @__PURE__ */ jsx(Sidebar, {
+						...props.sidebarProps ?? {},
+						collapsed: effectiveCollapsed,
+						onItemClick: handleSidebarItemClick
+					}),
+					props.navbarFooter ? /* @__PURE__ */ jsx(Flex$1, {
+						style: { borderTop: "1px solid var(--mantine-color-default-border)" },
+						h: footerHeight,
+						children: props.navbarFooter
+					}) : null,
+					(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,
-				pt: headerHeight,
-				pb: footerHeight,
-				pr: 0,
-				display: "flex",
-				flex: 1,
-				style: { flexDirection: "column" },
 				className: "alepha-sidebar-main",
 				"data-resizing": isResizing,
 				...props.appShellMainProps,
@@ -3180,14 +3250,12 @@ const AdminShell = (props) => {
 				}) : props.children ?? /* @__PURE__ */ jsx(NestedView, {})
 			}),
 			props.footer && /* @__PURE__ */ jsx(AppShell.Footer, {
-				bg: ui.colors.surface,
 				...props.appShellFooterProps,
 				children: props.footer
 			})
 		]
 	});
 };
-var AdminShell_default = AdminShell;
 
 //#endregion
 //#region ../../src/core/components/table/DataTableFilters.tsx
@@ -3207,7 +3275,7 @@ const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) =>
 		p: "xs",
 		bg: ui.colors.surface,
 		style: { borderBottom: "1px solid var(--alepha-border)" },
-		children: /* @__PURE__ */ jsx(TypeForm_default, {
+		children: /* @__PURE__ */ jsx(TypeForm, {
 			...typeFormProps,
 			skipSubmitButton: true,
 			fill: true,
@@ -3216,7 +3284,6 @@ const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) =>
 		})
 	});
 };
-var DataTableFilters_default = DataTableFilters;
 
 //#endregion
 //#region ../../src/core/components/table/DataTablePagination.tsx
@@ -3264,7 +3331,6 @@ const DataTablePagination = ({ page, size, totalPages, onPageChange, onSizeChang
 		}) })]
 	});
 };
-var DataTablePagination_default = DataTablePagination;
 
 //#endregion
 //#region ../../src/core/components/table/ColumnPicker.tsx
@@ -3303,7 +3369,7 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 			duration: 200,
 			timingFunction: "ease"
 		},
-		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(ActionButton_default, {
+		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(ActionButton, {
 			variant: "subtle",
 			icon: IconColumns
 		}) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
@@ -3358,7 +3424,6 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 		})]
 	});
 };
-var ColumnPicker_default = ColumnPicker;
 
 //#endregion
 //#region ../../src/core/components/table/FilterPicker.tsx
@@ -3402,7 +3467,7 @@ const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
 			duration: 200,
 			timingFunction: "ease"
 		},
-		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(ActionButton_default, {
+		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(ActionButton, {
 			variant: "subtle",
 			icon: IconFilter
 		}) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
@@ -3457,7 +3522,6 @@ const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
 		})]
 	});
 };
-var FilterPicker_default = FilterPicker;
 
 //#endregion
 //#region ../../src/core/components/table/DataTableToolbar.tsx
@@ -3478,17 +3542,17 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 				gap: 4,
 				align: "center",
 				children: [
-					filters && /* @__PURE__ */ jsx(FilterPicker_default, {
+					filters && /* @__PURE__ */ jsx(FilterPicker, {
 						schema: filters,
 						visibility: filterVisibility,
 						onVisibilityChange: onFilterVisibilityChange
 					}),
-					/* @__PURE__ */ jsx(ColumnPicker_default, {
+					/* @__PURE__ */ jsx(ColumnPicker, {
 						columns,
 						visibility: columnVisibility,
 						onVisibilityChange: onColumnVisibilityChange
 					}),
-					hasSelection && /* @__PURE__ */ jsxs(Fragment, { children: [
+					hasSelection && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 						/* @__PURE__ */ jsx(Divider, {
 							orientation: "vertical",
 							mx: "xs"
@@ -3498,14 +3562,14 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 							size: "lg",
 							children: [selectedItems.length, " selected"]
 						}),
-						/* @__PURE__ */ jsx(ActionButton_default, {
+						/* @__PURE__ */ jsx(ActionButton, {
 							variant: "subtle",
 							size: "compact-sm",
 							icon: IconX,
 							onClick: onClearSelection,
 							children: "Clear"
 						}),
-						checkboxActions?.map((action, index) => /* @__PURE__ */ jsx(ActionButton_default, {
+						checkboxActions?.map((action, index) => /* @__PURE__ */ jsx(ActionButton, {
 							variant: "light",
 							size: "compact-sm",
 							intent: action.intent,
@@ -3519,10 +3583,10 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 			/* @__PURE__ */ jsx(Flex$1, { flex: 1 }),
 			/* @__PURE__ */ jsxs(Flex$1, {
 				gap: "xs",
-				children: [actions?.map((props, index) => !isValidElement(props) ? /* @__PURE__ */ jsx(ActionButton_default, {
+				children: [actions?.map((props, index) => !isValidElement(props) ? /* @__PURE__ */ jsx(ActionButton, {
 					...props,
 					children: props.label
-				}, index) : props), /* @__PURE__ */ jsx(ActionButton_default, {
+				}, index) : props), /* @__PURE__ */ jsx(ActionButton, {
 					icon: IconRefresh,
 					onClick: onRefresh,
 					children: "Refresh"
@@ -3531,7 +3595,6 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 		]
 	});
 };
-var DataTableToolbar_default = DataTableToolbar;
 
 //#endregion
 //#region ../../src/core/components/table/DataTable.tsx
@@ -3807,7 +3870,7 @@ const DataTable = (props) => {
 		bd: "1px solid var(--alepha-border)",
 		direction: "column",
 		children: [
-			/* @__PURE__ */ jsx(DataTableToolbar_default, {
+			/* @__PURE__ */ jsx(DataTableToolbar, {
 				columns: props.columns,
 				filters: props.filters,
 				columnVisibility,
@@ -3820,7 +3883,7 @@ const DataTable = (props) => {
 				checkboxActions: props.checkboxActions,
 				onClearSelection: clearSelection
 			}),
-			filterSchema && props.filters && /* @__PURE__ */ jsx(DataTableFilters_default, {
+			filterSchema && props.filters && /* @__PURE__ */ jsx(DataTableFilters, {
 				schema: filterSchema,
 				form,
 				typeFormProps: props.typeFormProps,
@@ -3835,7 +3898,7 @@ const DataTable = (props) => {
 					children: [/* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [checkboxHeader, head] }) }), /* @__PURE__ */ jsx(Table.Tbody, { children: rows })]
 				})
 			}),
-			!props.infinityScroll && /* @__PURE__ */ jsx(DataTablePagination_default, {
+			!props.infinityScroll && /* @__PURE__ */ jsx(DataTablePagination, {
 				page,
 				size,
 				totalPages: items.page?.totalPages ?? 1,
@@ -3849,7 +3912,6 @@ const DataTable = (props) => {
 		]
 	});
 };
-var DataTable_default = DataTable;
 
 //#endregion
 //#region ../../src/core/hooks/useDialog.ts
@@ -3883,7 +3945,7 @@ const useDialog = () => {
 * - AlertDialog, ConfirmDialog, PromptDialog
 * - Form controls: Control, ControlArray, ControlDate, ControlNumber, ControlObject, ControlSelect, ControlQueryBuilder
 * - TypeForm for automatic form generation from TypeBox schemas
-* - AdminShell layout component
+* - DashboardShell layout component
 * - AppBar with configurable elements
 * - Sidebar navigation with sections and menu items
 * - Omnibar for command palette / search
@@ -3920,5 +3982,5 @@ const $ui = (options = {}) => {
 };
 
 //#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, 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 };
+export { $ui, ActionButton, DashboardShell as AdminShell, DashboardShell, AlephaMantineProvider, AlephaUI, AlertDialog, AppBar, Breadcrumb, BurgerButton, ClipboardButton, ConfirmDialog, Control, ControlArray, ControlDate, ControlNumber, ControlObject, ControlQueryBuilder, ControlSelect, DarkModeButton, DataTable, DialogService, Flex, LanguageButton, OPERATOR_INFO, Omnibar, OmnibarButton, PromptDialog, Sidebar, Text, ThemeButton, ThemeProvider, ToastService, ToggleSidebarButton, TypeForm, UiRouter, alephaSidebarAtom, alephaThemeAtom, alephaThemeListAtom, capitalize, defaultTheme, extractSchemaFields, getDefaultIcon, getOperatorsForField, midnightTheme, prettyName, toTitleCase, ui, useDialog, useToast };
 //# sourceMappingURL=index.js.map