@alepha/ui 0.16.1 → 0.17.0

package/dist/core/index.js

@@ -3,18 +3,19 @@ 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 { 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 { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Burger, Button, Card, Checkbox, Collapse, ColorInput, ColorSchemeScript, Container, CopyButton, Divider, Drawer, Fieldset, FileInput, Flex, Flex as Flex$1, Grid, Image, Input, Kbd, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, Slider, 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 { IconAlertTriangle, IconArrowDown, IconArrowLeft, IconArrowUp, IconArrowsSort, IconAt, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClipboard, IconClock, IconColorPicker, IconColumns, IconCopy, IconDownload, 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, 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 { currentUserAtom } from "alepha/security";
 import { ui as ui$1 } from "@alepha/ui";
-import { useDebouncedCallback, useOs } from "@mantine/hooks";
+import { useOs } from "@mantine/hooks";
 import { DateInput, DateTimePicker, TimeInput } from "@mantine/dates";
 import { parseQueryString } from "alepha/orm";
 import { DateTimeProvider } from "alepha/datetime";
@@ -267,10 +268,10 @@ const ErrorViewer = ({ error, showStack = true, copyable = true, size = "sm" })
 		if (isError) return `${errorName}: ${errorMessage}${errorStack ? `\n\n${errorStack}` : ""}`;
 		return String(error);
 	};
-	return /* @__PURE__ */ jsxs(Box, {
+	return /* @__PURE__ */ jsxs(Flex$1, {
 		pos: "relative",
 		w: "100%",
-		children: [copyable && /* @__PURE__ */ jsx(Box, {
+		children: [copyable && /* @__PURE__ */ jsx(Flex$1, {
 			pos: "absolute",
 			top: 0,
 			right: 0,
@@ -288,9 +289,9 @@ const ErrorViewer = ({ error, showStack = true, copyable = true, size = "sm" })
 					})
 				})
 			})
-		}), /* @__PURE__ */ jsxs(Box, {
+		}), /* @__PURE__ */ jsxs(Flex$1, {
 			pt: copyable ? 30 : 0,
-			children: [/* @__PURE__ */ jsxs(Box, {
+			children: [/* @__PURE__ */ jsxs(Flex$1, {
 				style: {
 					display: "flex",
 					alignItems: "flex-start",
@@ -310,9 +311,9 @@ const ErrorViewer = ({ error, showStack = true, copyable = true, size = "sm" })
 					style: { wordBreak: "break-word" },
 					children: errorMessage
 				})]
-			}), showStack && stackLines.length > 1 && /* @__PURE__ */ jsxs(Box, {
+			}), showStack && stackLines.length > 1 && /* @__PURE__ */ jsxs(Flex$1, {
 				mt: "sm",
-				children: [/* @__PURE__ */ jsxs(Box, {
+				children: [/* @__PURE__ */ jsxs(Flex$1, {
 					style: {
 						display: "flex",
 						alignItems: "center",
@@ -337,7 +338,7 @@ const ErrorViewer = ({ error, showStack = true, copyable = true, size = "sm" })
 					})]
 				}), /* @__PURE__ */ jsx(Collapse, {
 					in: stackExpanded,
-					children: /* @__PURE__ */ jsx(Box, {
+					children: /* @__PURE__ */ jsx(Flex$1, {
 						mt: "xs",
 						pl: "md",
 						style: { borderLeft: "1px solid var(--mantine-color-default-border)" },
@@ -357,28 +358,26 @@ 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, {
+}), /* @__PURE__ */ jsx(Flex$1, {
 	justify: "flex-end",
 	children: /* @__PURE__ */ jsx(Button, {
 		onClick: onClose,
 		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, {
+}), /* @__PURE__ */ jsxs(Flex$1, {
 	justify: "flex-end",
 	children: [/* @__PURE__ */ jsx(Button, {
 		variant: "subtle",
@@ -390,7 +389,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 +404,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
@@ -421,7 +419,7 @@ const PromptDialog = ({ options, onSubmit }) => {
 			required: options?.required,
 			mb: "md"
 		}),
-		/* @__PURE__ */ jsxs(Group, {
+		/* @__PURE__ */ jsxs(Flex$1, {
 			justify: "flex-end",
 			children: [/* @__PURE__ */ jsx(Button, {
 				variant: "subtle",
@@ -435,7 +433,6 @@ const PromptDialog = ({ options, onSubmit }) => {
 		})
 	] });
 };
-var PromptDialog_default = PromptDialog;
 
 //#endregion
 //#region ../../src/core/constants/ui.ts
@@ -448,7 +445,7 @@ const ui = {
 		border: "var(--alepha-border)"
 	},
 	sizes: { icon: {
-		xs: 12,
+		xs: 14,
 		sm: 16,
 		md: 20,
 		lg: 24,
@@ -480,7 +477,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 +497,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 +517,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 +558,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 +687,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;
 };
 
@@ -704,7 +701,7 @@ const Omnibar = (props) => {
 	const searchPlaceholder = props.searchPlaceholder ?? "Search...";
 	const nothingFound = props.nothingFound ?? "Nothing found...";
 	const router = useRouter();
-	const [user] = useStore("alepha.server.request.user");
+	const [user] = useStore(currentUserAtom);
 	return /* @__PURE__ */ jsx(Spotlight, {
 		actions: useMemo(() => router.concretePages.filter((page) => {
 			if (page.can && !page.can()) return false;
@@ -728,7 +725,6 @@ const Omnibar = (props) => {
 		nothingFound
 	});
 };
-var Omnibar_default = Omnibar;
 
 //#endregion
 //#region ../../src/core/components/layout/AlephaMantineProvider.tsx
@@ -751,13 +747,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 +763,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 +780,7 @@ var AlephaMantineProvider_default = AlephaMantineProvider;
 var UiRouter = class {
 	root = $page({
 		path: "/",
-		component: AlephaMantineProvider_default
+		component: AlephaMantineProvider
 	});
 };
 
@@ -831,40 +827,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 +854,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 +948,6 @@ const ActionButton = (_props) => {
 	}
 	return actionElement;
 };
-var ActionButton_default = ActionButton;
 /**
 * Action button that submits a form with loading and disabled state handling.
 */
@@ -1029,10 +1009,11 @@ const ActionHookButton = (props) => {
 * </ActionButton>
 * ```
 */
-const ActionClickButton = (props) => {
+const ActionClickButton = ({ preventDefault, ...props }) => {
 	const action = useAction({ handler: async (e) => {
+		if (preventDefault) e.preventDefault();
 		await props.onClick(e);
-	} }, [props.onClick]);
+	} }, [props.onClick, preventDefault]);
 	return /* @__PURE__ */ jsx(Button, {
 		...props,
 		disabled: action.loading || props.disabled,
@@ -1100,7 +1081,6 @@ const BurgerButton = (props) => {
 		...props
 	});
 };
-var BurgerButton_default = BurgerButton;
 
 //#endregion
 //#region ../../src/core/components/buttons/ClipboardButton.tsx
@@ -1112,7 +1092,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 +1102,6 @@ const ClipboardButton = (props) => {
 		})
 	});
 };
-var ClipboardButton_default = ClipboardButton;
 
 //#endregion
 //#region ../../src/core/components/buttons/DarkModeButton.tsx
@@ -1138,23 +1117,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 +1150,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 +1167,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 +1196,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 +1213,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 +1238,6 @@ const ToggleSidebarButton = (props) => {
 		...props
 	});
 };
-var ToggleSidebarButton_default = ToggleSidebarButton;
 
 //#endregion
 //#region ../../src/core/utils/icons.tsx
@@ -1312,15 +1293,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 +1360,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 +1469,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 +1493,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 +1508,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 +1524,6 @@ const ControlArray = (props) => {
 			value
 		};
 		setItems(newItems);
-		updateFormValue(newItems);
 	};
 	const handleFieldChange = (index, field, value) => {
 		const newItems = [...items];
@@ -1465,11 +1535,12 @@ const ControlArray = (props) => {
 			}
 		};
 		setItems(newItems);
-		updateFormValue(newItems);
 	};
 	const colSpan = 12 / columns;
-	const fieldNames = isObjectItem ? Object.keys(itemSchema.properties) : [];
-	const renderItems = () => /* @__PURE__ */ jsxs(Stack, {
+	const objectItemSchema = isObjectItem ? itemSchema : null;
+	const fieldNames = objectItemSchema ? Object.keys(objectItemSchema.properties) : [];
+	const renderItems = () => /* @__PURE__ */ jsxs(Flex$1, {
+		direction: "column",
 		gap: "sm",
 		children: [items.map((item, index) => /* @__PURE__ */ jsxs(Flex$1, {
 			gap: "sm",
@@ -1484,47 +1555,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
 					})
 				}),
@@ -1568,7 +1616,8 @@ const ControlArray = (props) => {
 			children: [/* @__PURE__ */ jsx(IconPlus, { size: 14 }), props.addLabel ?? "Add"]
 		})]
 	});
-	if (props.variant === "plain") return /* @__PURE__ */ jsxs(Stack, {
+	if (props.variant === "plain") return /* @__PURE__ */ jsxs(Flex$1, {
+		direction: "column",
 		gap: "xs",
 		children: [
 			inputProps.label && /* @__PURE__ */ jsx(Text$1, {
@@ -1591,7 +1640,8 @@ const ControlArray = (props) => {
 	});
 	return /* @__PURE__ */ jsx(Fieldset, {
 		legend: inputProps.label,
-		children: /* @__PURE__ */ jsxs(Stack, {
+		children: /* @__PURE__ */ jsxs(Flex$1, {
+			direction: "column",
 			gap: "xs",
 			children: [
 				inputProps.description && /* @__PURE__ */ jsx(Text$1, {
@@ -1609,7 +1659,6 @@ const ControlArray = (props) => {
 		})
 	});
 };
-var ControlArray_default = ControlArray;
 
 //#endregion
 //#region ../../src/core/components/form/ControlDate.tsx
@@ -1667,7 +1716,6 @@ const ControlDate = (props) => {
 	}
 	return null;
 };
-var ControlDate_default = ControlDate;
 
 //#endregion
 //#region ../../src/core/components/form/ControlNumber.tsx
@@ -1726,7 +1774,6 @@ const ControlNumber = (props) => {
 		}
 	});
 };
-var ControlNumber_default = ControlNumber;
 
 //#endregion
 //#region ../../src/core/components/form/ControlObject.tsx
@@ -1776,7 +1823,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
 			})
@@ -1785,7 +1832,8 @@ const ControlObject = (props) => {
 	if (props.variant === "plain") return renderFields();
 	return /* @__PURE__ */ jsx(Fieldset, {
 		legend: inputProps.label,
-		children: /* @__PURE__ */ jsxs(Stack, {
+		children: /* @__PURE__ */ jsxs(Flex$1, {
+			direction: "column",
 			gap: "xs",
 			children: [
 				inputProps.description && /* @__PURE__ */ jsx(Text$1, {
@@ -1803,7 +1851,6 @@ const ControlObject = (props) => {
 		})
 	});
 };
-var ControlObject_default = ControlObject;
 
 //#endregion
 //#region ../../src/core/utils/extractSchemaFields.ts
@@ -2010,7 +2057,7 @@ const ControlQueryBuilder = ({ schema, value = "", onChange, placeholder = "Ente
 	});
 };
 function QueryHelp({ fields, onInsert }) {
-	return /* @__PURE__ */ jsxs(Group, {
+	return /* @__PURE__ */ jsxs(Flex$1, {
 		gap: "md",
 		align: "flex-start",
 		wrap: "nowrap",
@@ -2018,22 +2065,25 @@ function QueryHelp({ fields, onInsert }) {
 		p: "sm",
 		bdrs: "sm",
 		children: [
-			/* @__PURE__ */ jsxs(Stack, {
+			/* @__PURE__ */ jsxs(Flex$1, {
+				direction: "column",
 				gap: "md",
 				style: { flex: 1 },
 				children: [
-					/* @__PURE__ */ jsxs(Stack, {
+					/* @__PURE__ */ jsxs(Flex$1, {
+						direction: "column",
 						gap: "xs",
 						children: [/* @__PURE__ */ jsx(Text$1, {
 							size: "sm",
 							fw: 600,
 							children: "Operators"
-						}), /* @__PURE__ */ jsx(Stack, {
+						}), /* @__PURE__ */ jsx(Flex$1, {
+							direction: "column",
 							gap: 4,
-							children: Object.entries(OPERATOR_INFO).map(([key, info]) => /* @__PURE__ */ jsxs(Group, {
+							children: Object.entries(OPERATOR_INFO).map(([key, info]) => /* @__PURE__ */ jsxs(Flex$1, {
 								gap: "xs",
 								wrap: "nowrap",
-								children: [/* @__PURE__ */ jsx(ActionButton_default, {
+								children: [/* @__PURE__ */ jsx(ActionButton, {
 									px: "xs",
 									size: "xs",
 									h: 24,
@@ -2052,18 +2102,20 @@ function QueryHelp({ fields, onInsert }) {
 						})]
 					}),
 					/* @__PURE__ */ jsx(Divider, {}),
-					/* @__PURE__ */ jsxs(Stack, {
+					/* @__PURE__ */ jsxs(Flex$1, {
+						direction: "column",
 						gap: "xs",
 						children: [/* @__PURE__ */ jsx(Text$1, {
 							size: "sm",
 							fw: 600,
 							children: "Logic"
-						}), /* @__PURE__ */ jsxs(Stack, {
+						}), /* @__PURE__ */ jsxs(Flex$1, {
+							direction: "column",
 							gap: 4,
-							children: [/* @__PURE__ */ jsxs(Group, {
+							children: [/* @__PURE__ */ jsxs(Flex$1, {
 								gap: "xs",
 								wrap: "nowrap",
-								children: [/* @__PURE__ */ jsx(ActionButton_default, {
+								children: [/* @__PURE__ */ jsx(ActionButton, {
 									px: "xs",
 									size: "xs",
 									h: 24,
@@ -2077,10 +2129,10 @@ function QueryHelp({ fields, onInsert }) {
 									c: "dimmed",
 									children: "AND"
 								})]
-							}), /* @__PURE__ */ jsxs(Group, {
+							}), /* @__PURE__ */ jsxs(Flex$1, {
 								gap: "xs",
 								wrap: "nowrap",
-								children: [/* @__PURE__ */ jsx(ActionButton_default, {
+								children: [/* @__PURE__ */ jsx(ActionButton, {
 									px: "xs",
 									size: "xs",
 									h: 24,
@@ -2120,7 +2172,7 @@ function QueryHelp({ fields, onInsert }) {
 						wrap: "nowrap",
 						align: "flex-start",
 						children: [
-							/* @__PURE__ */ jsx(ActionButton_default, {
+							/* @__PURE__ */ jsx(ActionButton, {
 								px: "xs",
 								size: "xs",
 								h: 24,
@@ -2143,10 +2195,10 @@ function QueryHelp({ fields, onInsert }) {
 									c: "dimmed",
 									lineClamp: 1,
 									children: field.description || field.type
-								}), field.enum && /* @__PURE__ */ jsx(Group, {
+								}), field.enum && /* @__PURE__ */ jsx(Flex$1, {
 									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 +2220,6 @@ function QueryHelp({ fields, onInsert }) {
 		]
 	});
 }
-var ControlQueryBuilder_default = ControlQueryBuilder;
 
 //#endregion
 //#region ../../src/core/components/form/ControlSelect.tsx
@@ -2220,6 +2271,7 @@ const ControlSelect = (props) => {
 		const autocompleteProps = typeof props.autocomplete === "object" ? props.autocomplete : {};
 		return /* @__PURE__ */ jsx(Autocomplete, {
 			...inputProps,
+			size: props.size,
 			id,
 			leftSection: icon,
 			data,
@@ -2231,6 +2283,7 @@ const ControlSelect = (props) => {
 		const tagsInputProps = typeof props.tags === "object" ? props.tags : {};
 		return /* @__PURE__ */ jsx(TagsInput, {
 			...inputProps,
+			size: props.size,
 			id,
 			leftSection: icon,
 			defaultValue: Array.isArray(props.input.props.defaultValue) ? props.input.props.defaultValue : [],
@@ -2248,6 +2301,7 @@ const ControlSelect = (props) => {
 		const multiSelectProps = typeof props.multi === "object" ? props.multi : {};
 		return /* @__PURE__ */ jsx(MultiSelect, {
 			...inputProps,
+			size: props.size,
 			id,
 			leftSection: icon,
 			data,
@@ -2261,6 +2315,7 @@ const ControlSelect = (props) => {
 	const selectProps = typeof props.select === "object" ? props.select : {};
 	return /* @__PURE__ */ jsx(Select, {
 		...inputProps,
+		size: props.size,
 		id,
 		leftSection: icon,
 		data,
@@ -2268,7 +2323,6 @@ const ControlSelect = (props) => {
 		...selectProps
 	});
 };
-var ControlSelect_default = ControlSelect;
 
 //#endregion
 //#region ../../src/core/components/form/Control.tsx
@@ -2304,7 +2358,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 +2386,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 +2397,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 +2407,8 @@ 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, {
+			size: props.size,
 			input: props.input,
 			title: props.title,
 			description: props.description,
@@ -2365,6 +2420,7 @@ const Control = (_props) => {
 		const fileInputProps = typeof props.file === "object" ? props.file : {};
 		return /* @__PURE__ */ jsx(FileInput, {
 			...inputProps,
+			size: props.size,
 			id,
 			leftSection: icon,
 			onChange: (file) => {
@@ -2377,6 +2433,7 @@ const Control = (_props) => {
 		const colorInputProps = typeof props.color === "object" ? props.color : {};
 		return /* @__PURE__ */ jsx(ColorInput, {
 			...inputProps,
+			size: props.size,
 			id,
 			leftSection: icon,
 			...props.input.props,
@@ -2386,7 +2443,8 @@ 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, {
+			size: props.size,
 			input: props.input,
 			title: props.title,
 			description: props.description,
@@ -2395,48 +2453,24 @@ 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,
+			size: props.size,
+			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")) {
 		const passwordInputProps = typeof props.password === "object" ? props.password : {};
 		return /* @__PURE__ */ jsx(PasswordInput, {
 			...inputProps,
+			size: props.size,
 			id,
 			leftSection: icon,
 			...props.input.props,
@@ -2447,13 +2481,15 @@ const Control = (_props) => {
 		const textAreaProps = typeof props.area === "object" ? props.area : {};
 		return /* @__PURE__ */ jsx(Textarea, {
 			...inputProps,
+			size: props.size,
 			id,
 			leftSection: icon,
 			...props.input.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, {
+		size: props.size,
 		input: props.input,
 		title: props.title,
 		description: props.description,
@@ -2475,6 +2511,7 @@ const Control = (_props) => {
 	};
 	return /* @__PURE__ */ jsx(TextInput, {
 		...inputProps,
+		size: props.size,
 		id,
 		leftSection: icon,
 		type: getInputType(),
@@ -2488,7 +2525,6 @@ const Control = (_props) => {
 		]
 	});
 };
-var Control_default = Control;
 
 //#endregion
 //#region ../../src/core/components/form/TypeForm.tsx
@@ -2534,7 +2570,7 @@ var Control_default = Control;
 * ```
 */
 const TypeForm = (props) => {
-	const { form, columns = 3, children, controlProps, fieldControlProps, skipFormElement = false, skipSubmitButton = false, submitButtonProps, fill = true } = props;
+	const { form, columns = 3, children, controlProps, fieldControlProps, skipFormElement = false, skipSubmitButton = false, submitButtonProps, fill = true, size } = props;
 	const schema = props.schema || form.options.schema;
 	if (!schema?.properties) return null;
 	const supportedFields = Object.keys(schema.properties);
@@ -2551,7 +2587,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];
@@ -2563,9 +2599,10 @@ const TypeForm = (props) => {
 				...controlProps,
 				...fieldControlProps?.[fieldName]
 			};
+			if (size) mergedControlProps.size = size;
 			return /* @__PURE__ */ jsx(Grid.Col, {
 				span,
-				children: /* @__PURE__ */ jsx(Control_default, {
+				children: /* @__PURE__ */ jsx(Control, {
 					input: field,
 					...mergedControlProps
 				})
@@ -2593,11 +2630,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 +2654,6 @@ const TypeForm = (props) => {
 		children: content
 	});
 };
-var TypeForm_default = TypeForm;
 
 //#endregion
 //#region ../../src/core/components/layout/AppBar.tsx
@@ -2627,10 +2663,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 +2708,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 +2718,7 @@ const AppBar = (props) => {
 				position: "bottom"
 			}
 		}, index);
-		return /* @__PURE__ */ jsx(ActionButton_default, {
+		return /* @__PURE__ */ jsx(ActionButton, {
 			leftSection: iconElement,
 			variant: "subtle",
 			color: "gray",
@@ -2732,19 +2768,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(Flex$1, {
+		gap: 4,
+		...groupProps,
+		children: crumbs.map((crumb, i) => /* @__PURE__ */ jsxs(Flex$1, {
+			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 +2841,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 +2901,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 +2964,16 @@ 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)",
+			tooltip: item.description ? {
+				label: item.description,
+				position: "right"
+			} : void 0,
 			color: "gray",
 			variant: "subtle",
 			variantActive: "default",
@@ -2890,7 +2983,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 +2996,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 +3015,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 +3025,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 +3033,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 +3133,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 +3184,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 +3197,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 +3234,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 +3278,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,16 +3303,23 @@ 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, {
+			size: "xs",
 			...typeFormProps,
 			skipSubmitButton: true,
 			fill: true,
 			form,
-			schema: visibleSchema
+			schema: visibleSchema,
+			columns: {
+				base: 1,
+				sm: 2,
+				md: 3,
+				lg: 4,
+				xl: 6
+			}
 		})
 	});
 };
-var DataTableFilters_default = DataTableFilters;
 
 //#endregion
 //#region ../../src/core/components/table/DataTablePagination.tsx
@@ -3264,7 +3367,10 @@ const DataTablePagination = ({ page, size, totalPages, onPageChange, onSizeChang
 		}) })]
 	});
 };
-var DataTablePagination_default = DataTablePagination;
+
+//#endregion
+//#region ../../src/core/components/table/types.ts
+const DEFAULT_MAX_VISIBLE_COLUMNS = 8;
 
 //#endregion
 //#region ../../src/core/components/table/ColumnPicker.tsx
@@ -3277,11 +3383,16 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 			[key]: true
 		}), {}));
 	};
-	const handleHideAll = () => {
-		onVisibilityChange(columnEntries.reduce((acc, [key]) => ({
-			...acc,
-			[key]: false
-		}), {}));
+	const handleDefault = () => {
+		let count = 0;
+		onVisibilityChange(columnEntries.reduce((acc, [key, col]) => {
+			if (col.defaultHidden) acc[key] = false;
+			else if (count < DEFAULT_MAX_VISIBLE_COLUMNS) {
+				acc[key] = true;
+				count++;
+			} else acc[key] = false;
+			return acc;
+		}, {}));
 	};
 	const handleToggle = (key, checked) => {
 		onVisibilityChange({
@@ -3303,20 +3414,22 @@ 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("div", { children: /* @__PURE__ */ jsx(ActionButton, {
 			variant: "subtle",
-			icon: IconColumns
-		}) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
+			icon: IconColumns,
+			onClick: () => setOpened((o) => !o)
+		}) }) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
 			bg: "transparent",
 			p: "xs",
 			bd: `1px solid ${ui.colors.border}`,
 			style: { backdropFilter: "blur(20px)" },
-			children: /* @__PURE__ */ jsxs(Stack, {
+			children: /* @__PURE__ */ jsxs(Flex$1, {
+				direction: "column",
 				gap: "xs",
 				bg: ui.colors.surface,
 				p: "sm",
 				bdrs: "sm",
-				children: [/* @__PURE__ */ jsxs(Group, {
+				children: [/* @__PURE__ */ jsxs(Flex$1, {
 					justify: "space-between",
 					children: [/* @__PURE__ */ jsxs(Text$1, {
 						size: "sm",
@@ -3328,26 +3441,27 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 							columnEntries.length,
 							")"
 						]
-					}), /* @__PURE__ */ jsxs(Group, {
+					}), /* @__PURE__ */ jsxs(Flex$1, {
 						gap: 4,
-						children: [/* @__PURE__ */ jsx(Button, {
+						children: [/* @__PURE__ */ jsx(ActionButton, {
 							size: "compact-xs",
 							variant: "subtle",
 							onClick: handleShowAll,
 							children: "All"
-						}), /* @__PURE__ */ jsx(Button, {
+						}), /* @__PURE__ */ jsx(ActionButton, {
 							size: "compact-xs",
 							variant: "subtle",
-							onClick: handleHideAll,
-							children: "None"
+							onClick: handleDefault,
+							children: "Default"
 						})]
 					})]
 				}), /* @__PURE__ */ jsx(ScrollArea.Autosize, {
 					mah: 300,
-					children: /* @__PURE__ */ jsx(Stack, {
+					children: /* @__PURE__ */ jsx(Flex$1, {
+						direction: "column",
 						gap: 4,
 						children: columnEntries.map(([key, col]) => /* @__PURE__ */ jsx(Checkbox, {
-							label: col.label,
+							label: col.label || key,
 							checked: visibility[key] !== false,
 							onChange: (e) => handleToggle(key, e.currentTarget.checked),
 							size: "sm"
@@ -3358,7 +3472,6 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 		})]
 	});
 };
-var ColumnPicker_default = ColumnPicker;
 
 //#endregion
 //#region ../../src/core/components/table/FilterPicker.tsx
@@ -3388,7 +3501,7 @@ const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
 			[key]: checked
 		});
 	};
-	const visibleCount = filterKeys.filter((key) => visibility[key] !== false).length;
+	const visibleCount = filterKeys.filter((key) => visibility[key]).length;
 	return /* @__PURE__ */ jsxs(Popover, {
 		width: 280,
 		position: "bottom-start",
@@ -3402,20 +3515,22 @@ 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("div", { children: /* @__PURE__ */ jsx(ActionButton, {
 			variant: "subtle",
-			icon: IconFilter
-		}) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
+			icon: IconFilter,
+			onClick: () => setOpened((o) => !o)
+		}) }) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
 			bg: "transparent",
 			p: "xs",
 			bd: `1px solid ${ui.colors.border}`,
 			style: { backdropFilter: "blur(20px)" },
-			children: /* @__PURE__ */ jsxs(Stack, {
+			children: /* @__PURE__ */ jsxs(Flex$1, {
+				direction: "column",
 				gap: "xs",
 				bg: ui.colors.surface,
 				p: "sm",
 				bdrs: "sm",
-				children: [/* @__PURE__ */ jsxs(Group, {
+				children: [/* @__PURE__ */ jsxs(Flex$1, {
 					justify: "space-between",
 					children: [/* @__PURE__ */ jsxs(Text$1, {
 						size: "sm",
@@ -3427,14 +3542,14 @@ const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
 							filterKeys.length,
 							")"
 						]
-					}), /* @__PURE__ */ jsxs(Group, {
+					}), /* @__PURE__ */ jsxs(Flex$1, {
 						gap: 4,
-						children: [/* @__PURE__ */ jsx(Button, {
+						children: [/* @__PURE__ */ jsx(ActionButton, {
 							size: "compact-xs",
 							variant: "subtle",
 							onClick: handleShowAll,
 							children: "All"
-						}), /* @__PURE__ */ jsx(Button, {
+						}), /* @__PURE__ */ jsx(ActionButton, {
 							size: "compact-xs",
 							variant: "subtle",
 							onClick: handleHideAll,
@@ -3443,11 +3558,12 @@ const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
 					})]
 				}), /* @__PURE__ */ jsx(ScrollArea.Autosize, {
 					mah: 300,
-					children: /* @__PURE__ */ jsx(Stack, {
+					children: /* @__PURE__ */ jsx(Flex$1, {
+						direction: "column",
 						gap: 4,
 						children: filterKeys.map((key) => /* @__PURE__ */ jsx(Checkbox, {
 							label: getFieldLabel(schema, key),
-							checked: visibility[key] !== false,
+							checked: visibility[key] === true,
 							onChange: (e) => handleToggle(key, e.currentTarget.checked),
 							size: "sm"
 						}, key))
@@ -3457,12 +3573,53 @@ const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
 		})]
 	});
 };
-var FilterPicker_default = FilterPicker;
 
 //#endregion
 //#region ../../src/core/components/table/DataTableToolbar.tsx
-const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility, onColumnVisibilityChange, onFilterVisibilityChange, actions, onRefresh, selectedItems = [], checkboxActions, onClearSelection }) => {
+const escapeCsvField = (value) => {
+	if (value.includes(",") || value.includes("\"") || value.includes("\n")) return `"${value.replace(/"/g, "\"\"")}"`;
+	return value;
+};
+const extractText = (node) => {
+	if (node == null || typeof node === "boolean") return "";
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map(extractText).join("");
+	if (typeof node === "object" && "props" in node) return extractText(node.props.children);
+	return "";
+};
+const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility, onColumnVisibilityChange, onFilterVisibilityChange, actions, onRefresh, items, withExport, selectedItems = [], checkboxActions, onClearSelection }) => {
 	const hasSelection = selectedItems.length > 0;
+	const exportableColumns = useCallback(() => {
+		return Object.entries(columns).filter(([key, col]) => !col.actions && columnVisibility[key] !== false);
+	}, [columns, columnVisibility]);
+	const buildRows = useCallback(() => {
+		const cols = exportableColumns();
+		return items.map((item) => cols.map(([_key, col]) => {
+			if (!col.value) return "";
+			return extractText(col.value(item, {}));
+		}));
+	}, [items, exportableColumns]);
+	const buildCsv = useCallback(() => {
+		const header = exportableColumns().map(([_key, col]) => escapeCsvField(col.label));
+		const rows = buildRows().map((row) => row.map(escapeCsvField));
+		return [header.join(","), ...rows.map((r) => r.join(","))].join("\n");
+	}, [exportableColumns, buildRows]);
+	const exportCsv = useCallback(() => {
+		const csv = buildCsv();
+		const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = "export.csv";
+		a.click();
+		URL.revokeObjectURL(url);
+	}, [buildCsv]);
+	const exportClipboard = useCallback(async () => {
+		const header = exportableColumns().map(([_key, col]) => col.label);
+		const rows = buildRows();
+		const text = [header.join("	"), ...rows.map((r) => r.join("	"))].join("\n");
+		await navigator.clipboard.writeText(text);
+	}, [exportableColumns, buildRows]);
 	const handleCheckboxAction = async (action) => {
 		const ctx = {
 			selectedItems,
@@ -3478,17 +3635,30 @@ 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: [
+					withExport && /* @__PURE__ */ jsx(ActionButton, {
+						variant: "subtle",
+						icon: IconDownload,
+						menu: { items: [{
+							label: "Export as CSV",
+							icon: /* @__PURE__ */ jsx(IconDownload, { size: 14 }),
+							onClick: exportCsv
+						}, {
+							label: "Copy to clipboard",
+							icon: /* @__PURE__ */ jsx(IconClipboard, { size: 14 }),
+							onClick: exportClipboard
+						}] }
+					}),
+					hasSelection && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 						/* @__PURE__ */ jsx(Divider, {
 							orientation: "vertical",
 							mx: "xs"
@@ -3498,14 +3668,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,23 +3689,84 @@ 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, {
+					variant: "subtle",
 					icon: IconRefresh,
-					onClick: onRefresh,
-					children: "Refresh"
+					onClick: onRefresh
 				})]
 			})
 		]
 	});
 };
-var DataTableToolbar_default = DataTableToolbar;
+
+//#endregion
+//#region ../../src/core/components/table/useTableSelection.ts
+const useTableSelection = (items, getItemKey, enabled) => {
+	const [selectedKeys, setSelectedKeys] = useState(/* @__PURE__ */ new Set());
+	const selectedItems = useMemo(() => {
+		if (!enabled) return [];
+		return items.filter((item) => selectedKeys.has(getItemKey(item)));
+	}, [
+		items,
+		selectedKeys,
+		getItemKey,
+		enabled
+	]);
+	const allSelected = useMemo(() => {
+		if (items.length === 0) return false;
+		return items.every((item) => selectedKeys.has(getItemKey(item)));
+	}, [
+		items,
+		selectedKeys,
+		getItemKey
+	]);
+	return {
+		selectedItems,
+		allSelected,
+		someSelected: useMemo(() => {
+			if (items.length === 0) return false;
+			const count = items.filter((item) => selectedKeys.has(getItemKey(item))).length;
+			return count > 0 && count < items.length;
+		}, [
+			items,
+			selectedKeys,
+			getItemKey
+		]),
+		toggleItem: useCallback((item) => {
+			const key = getItemKey(item);
+			setSelectedKeys((prev) => {
+				const next = new Set(prev);
+				if (next.has(key)) next.delete(key);
+				else next.add(key);
+				return next;
+			});
+		}, [getItemKey]),
+		toggleAll: useCallback(() => {
+			if (allSelected) setSelectedKeys((prev) => {
+				const next = new Set(prev);
+				for (const item of items) next.delete(getItemKey(item));
+				return next;
+			});
+			else setSelectedKeys((prev) => {
+				const next = new Set(prev);
+				for (const item of items) next.add(getItemKey(item));
+				return next;
+			});
+		}, [
+			allSelected,
+			items,
+			getItemKey
+		]),
+		clear: useCallback(() => setSelectedKeys(/* @__PURE__ */ new Set()), []),
+		isSelected: useCallback((item) => selectedKeys.has(getItemKey(item)), [selectedKeys, getItemKey])
+	};
+};
 
 //#endregion
 //#region ../../src/core/components/table/DataTable.tsx
-const DEFAULT_VISIBLE_COLUMN_COUNT = 10;
 /**
 * Parse the sort string to get direction for a specific field.
 * Alepha convention: 'field' = ASC, '-field' = DESC
@@ -3560,6 +3791,15 @@ const toggleSort = (sortString, field) => {
 	else if (current === "asc") parts.unshift(`-${field}`);
 	return parts.length > 0 ? parts.join(",") : void 0;
 };
+const toAriaSort = (dir) => {
+	if (dir === "asc") return "ascending";
+	if (dir === "desc") return "descending";
+	return "none";
+};
+const FIT_STYLE = {
+	width: 1,
+	whiteSpace: "nowrap"
+};
 const DataTable = (props) => {
 	const [items, setItems] = useState(typeof props.items === "function" ? { content: [] } : props.items);
 	const defaultSize = props.infinityScroll ? 100 : props.defaultSize || 10;
@@ -3567,31 +3807,27 @@ const DataTable = (props) => {
 	const [size, setSize] = useState(String(defaultSize));
 	const [currentPage, setCurrentPage] = useState(0);
 	const alepha = useInject(Alepha);
+	const sentinelRef = useRef(null);
 	const [columnVisibility, setColumnVisibility] = useState(() => {
-		if (props.defaultColumnVisibility) return props.defaultColumnVisibility;
-		const columnKeys = Object.keys(props.columns);
-		const maxVisible = props.defaultVisibleColumnCount ?? DEFAULT_VISIBLE_COLUMN_COUNT;
-		return columnKeys.reduce((acc, key, index) => ({
-			...acc,
-			[key]: index < maxVisible
-		}), {});
+		const entries = Object.entries(props.columns);
+		let visibleCount = 0;
+		return entries.reduce((acc, [key, col]) => {
+			if (col.defaultHidden) acc[key] = false;
+			else if (visibleCount < DEFAULT_MAX_VISIBLE_COLUMNS) {
+				acc[key] = true;
+				visibleCount++;
+			} else acc[key] = false;
+			return acc;
+		}, {});
 	});
 	const [filterVisibility, setFilterVisibility] = useState(() => {
-		if (props.defaultFilterVisibility) return props.defaultFilterVisibility;
 		if (!props.filters?.properties) return {};
+		const defaults = new Set(props.defaultFilters ?? []);
 		return Object.keys(props.filters.properties).reduce((acc, key) => ({
 			...acc,
-			[key]: true
+			[key]: defaults.has(key)
 		}), {});
 	});
-	const handleColumnVisibilityChange = (visibility) => {
-		setColumnVisibility(visibility);
-		props.onColumnVisibilityChange?.(visibility);
-	};
-	const handleFilterVisibilityChange = (visibility) => {
-		setFilterVisibility(visibility);
-		props.onFilterVisibilityChange?.(visibility);
-	};
 	const visibleColumns = useMemo(() => {
 		return Object.entries(props.columns).filter(([key]) => columnVisibility[key] !== false);
 	}, [props.columns, columnVisibility]);
@@ -3602,64 +3838,38 @@ const DataTable = (props) => {
 		form.input.sort.set(newSort);
 		form.input.page.set(0);
 	};
-	const [selectedKeys, setSelectedKeys] = useState(/* @__PURE__ */ new Set());
 	const getItemKey = useCallback((item) => {
 		if (props.getItemKey) return props.getItemKey(item);
+		if ("id" in item) return String(item.id);
 		return JSON.stringify(item);
 	}, [props.getItemKey]);
-	const selectedItems = useMemo(() => {
-		if (!props.withCheckbox) return [];
-		return items.content.filter((item) => selectedKeys.has(getItemKey(item)));
-	}, [
-		items.content,
-		selectedKeys,
-		getItemKey,
-		props.withCheckbox
-	]);
-	const allSelected = useMemo(() => {
-		if (items.content.length === 0) return false;
-		return items.content.every((item) => selectedKeys.has(getItemKey(item)));
-	}, [
-		items.content,
-		selectedKeys,
-		getItemKey
-	]);
-	const someSelected = useMemo(() => {
-		if (items.content.length === 0) return false;
-		const selectedCount = items.content.filter((item) => selectedKeys.has(getItemKey(item))).length;
-		return selectedCount > 0 && selectedCount < items.content.length;
-	}, [
-		items.content,
-		selectedKeys,
-		getItemKey
-	]);
-	const toggleItemSelection = useCallback((item) => {
-		const key = getItemKey(item);
-		setSelectedKeys((prev) => {
+	const selection = useTableSelection(items.content, getItemKey, props.withCheckbox ?? false);
+	const panelConfig = useMemo(() => {
+		if (!props.panel) return null;
+		if (typeof props.panel === "function") return {
+			render: props.panel,
+			can: void 0
+		};
+		return props.panel;
+	}, [props.panel]);
+	const [drawerItem, setDrawerItem] = useState(null);
+	const drawerConfig = useMemo(() => {
+		if (!props.drawer) return null;
+		if (typeof props.drawer === "function") return {
+			render: props.drawer,
+			can: void 0,
+			props: void 0
+		};
+		return props.drawer;
+	}, [props.drawer]);
+	const [expandedKeys, setExpandedKeys] = useState(/* @__PURE__ */ new Set());
+	const toggleExpand = useCallback((key) => {
+		setExpandedKeys((prev) => {
 			const next = new Set(prev);
 			if (next.has(key)) next.delete(key);
 			else next.add(key);
 			return next;
 		});
-	}, [getItemKey]);
-	const toggleAllSelection = useCallback(() => {
-		if (allSelected) setSelectedKeys((prev) => {
-			const next = new Set(prev);
-			for (const item of items.content) next.delete(getItemKey(item));
-			return next;
-		});
-		else setSelectedKeys((prev) => {
-			const next = new Set(prev);
-			for (const item of items.content) next.add(getItemKey(item));
-			return next;
-		});
-	}, [
-		allSelected,
-		items.content,
-		getItemKey
-	]);
-	const clearSelection = useCallback(() => {
-		setSelectedKeys(/* @__PURE__ */ new Set());
 	}, []);
 	const form = useForm({
 		schema: t.object({
@@ -3681,7 +3891,7 @@ const DataTable = (props) => {
 		},
 		onReset: async () => {
 			setPage(1);
-			setSize("10");
+			setSize(String(defaultSize));
 			await form.submit();
 		},
 		onChange: async (key, value) => {
@@ -3698,7 +3908,6 @@ const DataTable = (props) => {
 			props.onFilterChange?.(key, value, form);
 		}
 	}, [items]);
-	useDebouncedCallback(() => form.submit(), { delay: 800 });
 	const dt = useInject(DateTimeProvider);
 	useEffect(() => {
 		if (props.submitOnInit) form.submit();
@@ -3714,18 +3923,15 @@ const DataTable = (props) => {
 	}, [props.items]);
 	useEffect(() => {
 		if (!props.infinityScroll || typeof props.items !== "function") return;
-		const handleScroll = () => {
-			if (form.submitting) return;
-			const scrollTop = window.scrollY;
-			const windowHeight = window.innerHeight;
-			const docHeight = document.documentElement.scrollHeight;
-			if (scrollTop + windowHeight >= docHeight - 300) {
-				const totalPages = items.page?.totalPages ?? 1;
-				if (currentPage + 1 < totalPages) form.input.page.set(currentPage + 1);
-			}
-		};
-		window.addEventListener("scroll", handleScroll);
-		return () => window.removeEventListener("scroll", handleScroll);
+		const sentinel = sentinelRef.current;
+		if (!sentinel) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (!entries[0].isIntersecting || form.submitting) return;
+			const totalPages = items.page?.totalPages ?? 1;
+			if (currentPage + 1 < totalPages) form.input.page.set(currentPage + 1);
+		}, { rootMargin: "300px" });
+		observer.observe(sentinel);
+		return () => observer.disconnect();
 	}, [
 		props.infinityScroll,
 		form.submitting,
@@ -3733,63 +3939,134 @@ const DataTable = (props) => {
 		currentPage,
 		form
 	]);
+	const totalColumns = visibleColumns.length + (panelConfig ? 1 : 0) + (props.withCheckbox ? 1 : 0);
 	const checkboxHeader = props.withCheckbox ? /* @__PURE__ */ jsx(Table.Th, {
 		style: { width: 40 },
 		children: /* @__PURE__ */ jsx(Checkbox, {
-			checked: allSelected,
-			indeterminate: someSelected,
-			onChange: toggleAllSelection,
+			checked: selection.allSelected,
+			indeterminate: selection.someSelected,
+			onChange: selection.toggleAll,
 			"aria-label": "Select all"
 		})
 	}) : null;
 	const head = visibleColumns.map(([key, col]) => {
 		const sortField = col.sortKey || key;
 		const sortDir = col.sortable ? getSortDirection(sortString, sortField) : null;
-		const headerContent = /* @__PURE__ */ jsxs(Flex$1, {
-			align: "center",
-			gap: 4,
-			children: [/* @__PURE__ */ jsx(Text$1, {
-				size: "xs",
-				children: col.label
-			}), col.sortable && /* @__PURE__ */ jsxs(Flex$1, {
-				c: "dimmed",
-				children: [
-					sortDir === "asc" && /* @__PURE__ */ jsx(IconArrowUp, { size: ui.sizes.icon.sm }),
-					sortDir === "desc" && /* @__PURE__ */ jsx(IconArrowDown, { size: ui.sizes.icon.sm }),
-					sortDir === null && /* @__PURE__ */ jsx(IconArrowsSort, { size: ui.sizes.icon.sm })
-				]
-			})]
-		});
 		return /* @__PURE__ */ jsx(Table.Th, {
+			onClick: col.sortable ? () => handleSortClick(key, col.sortKey) : void 0,
+			"aria-sort": col.sortable ? toAriaSort(sortDir) : void 0,
 			style: {
-				...col.fit ? {} : {},
-				...col.sortable ? { cursor: "pointer" } : {}
+				...col.fit ? FIT_STYLE : {},
+				...col.sortable ? {
+					cursor: "pointer",
+					userSelect: "none"
+				} : {}
 			},
-			children: col.sortable ? /* @__PURE__ */ jsx(UnstyledButton, {
-				onClick: () => handleSortClick(key, col.sortKey),
-				children: headerContent
-			}) : headerContent
+			children: /* @__PURE__ */ jsxs(Flex$1, {
+				align: "center",
+				gap: 4,
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					size: "xs",
+					children: col.label
+				}), col.sortable && /* @__PURE__ */ jsxs(Flex$1, {
+					c: "dimmed",
+					children: [
+						sortDir === "asc" && /* @__PURE__ */ jsx(IconArrowUp, { size: ui.sizes.icon.sm }),
+						sortDir === "desc" && /* @__PURE__ */ jsx(IconArrowDown, { size: ui.sizes.icon.sm }),
+						sortDir === null && /* @__PURE__ */ jsx(IconArrowsSort, { size: ui.sizes.icon.sm })
+					]
+				})]
+			})
 		}, key);
 	});
-	const rows = items.content.map((item, index) => {
+	const rows = items.content.flatMap((item, index) => {
 		const trProps = props.tableTrProps ? props.tableTrProps(item) : {};
 		const itemKey = getItemKey(item);
-		const isSelected = selectedKeys.has(itemKey);
-		return /* @__PURE__ */ jsxs(Table.Tr, {
+		const isSelected = selection.isSelected(item);
+		const showPanel = panelConfig && (panelConfig.can ? panelConfig.can(item) : true);
+		const isExpanded = expandedKeys.has(itemKey);
+		const canOpenDrawer = drawerConfig && (drawerConfig.can ? drawerConfig.can(item) : true);
+		const elements = [/* @__PURE__ */ jsxs(Table.Tr, {
 			...trProps,
-			children: [props.withCheckbox && /* @__PURE__ */ jsx(Table.Td, {
-				style: { width: 40 },
-				children: /* @__PURE__ */ jsx(Checkbox, {
-					checked: isSelected,
-					onChange: () => toggleItemSelection(item),
-					"aria-label": "Select row"
+			style: {
+				...canOpenDrawer ? { cursor: "pointer" } : {},
+				...trProps.style ?? {}
+			},
+			onClick: (e) => {
+				if (canOpenDrawer) setDrawerItem(item);
+				trProps.onClick?.(e);
+			},
+			children: [
+				panelConfig && /* @__PURE__ */ jsx(Table.Td, {
+					style: {
+						width: 36,
+						textAlign: "center"
+					},
+					py: 2,
+					px: 0,
+					children: showPanel && /* @__PURE__ */ jsx(UnstyledButton, {
+						onClick: (e) => {
+							e.stopPropagation();
+							toggleExpand(itemKey);
+						},
+						style: { display: "inline-flex" },
+						children: /* @__PURE__ */ jsx(Flex$1, {
+							c: "dimmed",
+							align: "center",
+							justify: "center",
+							children: isExpanded ? /* @__PURE__ */ jsx(IconChevronDown, { size: ui.sizes.icon.sm }) : /* @__PURE__ */ jsx(IconChevronRight, { size: ui.sizes.icon.sm })
+						})
+					})
+				}),
+				props.withCheckbox && /* @__PURE__ */ jsx(Table.Td, {
+					style: { width: 40 },
+					onClick: (e) => e.stopPropagation(),
+					children: /* @__PURE__ */ jsx(Checkbox, {
+						checked: isSelected,
+						onChange: () => selection.toggleItem(item),
+						"aria-label": "Select row"
+					})
+				}),
+				visibleColumns.map(([key, col]) => {
+					const ctx = {
+						index,
+						form,
+						alepha
+					};
+					if (col.actions) {
+						const rowActions = col.actions(item, ctx).filter((a) => a.visible !== false);
+						return /* @__PURE__ */ jsx(Table.Td, {
+							py: 2,
+							px: 4,
+							style: col.fit ? FIT_STYLE : void 0,
+							onClick: (e) => e.stopPropagation(),
+							children: /* @__PURE__ */ jsx(Flex$1, {
+								gap: 4,
+								children: rowActions.map(({ visible: _, ...actionProps }, i) => /* @__PURE__ */ jsx(ActionButton, {
+									variant: "subtle",
+									size: "xs",
+									preventDefault: true,
+									h: 20,
+									...actionProps
+								}, i))
+							})
+						}, key);
+					}
+					return /* @__PURE__ */ jsx(Table.Td, {
+						py: 2,
+						px: 4,
+						style: col.fit ? FIT_STYLE : void 0,
+						children: col.value?.(item, ctx)
+					}, key);
 				})
-			}), visibleColumns.map(([key, col]) => /* @__PURE__ */ jsx(Table.Td, { children: col.value(item, {
-				index,
-				form,
-				alepha
-			}) }, key))]
-		}, itemKey);
+			]
+		}, itemKey)];
+		if (panelConfig && showPanel && isExpanded) elements.push(/* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
+			colSpan: totalColumns,
+			p: 0,
+			children: panelConfig.render(item)
+		}) }, `${itemKey}-panel`));
+		return elements;
 	});
 	const filterSchema = useMemo(() => {
 		if (!props.filters) return null;
@@ -3802,25 +4079,25 @@ const DataTable = (props) => {
 	return /* @__PURE__ */ jsxs(Flex$1, {
 		flex: 1,
 		p: 0,
-		bg: "var(--alepha-elevated)",
 		bdrs: "sm",
-		bd: "1px solid var(--alepha-border)",
 		direction: "column",
 		children: [
-			/* @__PURE__ */ jsx(DataTableToolbar_default, {
+			/* @__PURE__ */ jsx(DataTableToolbar, {
 				columns: props.columns,
 				filters: props.filters,
 				columnVisibility,
 				filterVisibility,
-				onColumnVisibilityChange: handleColumnVisibilityChange,
-				onFilterVisibilityChange: handleFilterVisibilityChange,
+				onColumnVisibilityChange: setColumnVisibility,
+				onFilterVisibilityChange: setFilterVisibility,
 				actions: props.actions,
 				onRefresh: () => form.submit(),
-				selectedItems,
+				items: items.content,
+				withExport: props.withExport,
+				selectedItems: selection.selectedItems,
 				checkboxActions: props.checkboxActions,
-				onClearSelection: clearSelection
+				onClearSelection: selection.clear
 			}),
-			filterSchema && props.filters && /* @__PURE__ */ jsx(DataTableFilters_default, {
+			filterSchema && props.filters && /* @__PURE__ */ jsx(DataTableFilters, {
 				schema: filterSchema,
 				form,
 				typeFormProps: props.typeFormProps,
@@ -3829,13 +4106,42 @@ const DataTable = (props) => {
 			/* @__PURE__ */ jsx(Flex$1, {
 				className: "overflow-auto",
 				children: /* @__PURE__ */ jsxs(Table, {
+					"aria-label": "Data table",
 					withColumnBorders: true,
 					withRowBorders: true,
 					...props.tableProps,
-					children: [/* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [checkboxHeader, head] }) }), /* @__PURE__ */ jsx(Table.Tbody, { children: rows })]
+					children: [/* @__PURE__ */ jsx(Table.Thead, {
+						style: {
+							position: "sticky",
+							top: 0,
+							zIndex: 1,
+							backgroundColor: "var(--mantine-color-body)"
+						},
+						children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+							panelConfig && /* @__PURE__ */ jsx(Table.Th, { style: { width: 36 } }),
+							checkboxHeader,
+							head
+						] })
+					}), /* @__PURE__ */ jsxs(Table.Tbody, {
+						style: {
+							opacity: form.submitting ? .5 : 1,
+							transition: "opacity 150ms ease"
+						},
+						children: [rows, items.content.length === 0 && /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
+							colSpan: totalColumns || 1,
+							py: "xl",
+							style: { textAlign: "center" },
+							children: /* @__PURE__ */ jsx(Text$1, {
+								c: "dimmed",
+								size: "sm",
+								children: form.submitting ? "Loading…" : "No results"
+							})
+						}) })]
+					})]
 				})
 			}),
-			!props.infinityScroll && /* @__PURE__ */ jsx(DataTablePagination_default, {
+			props.infinityScroll && /* @__PURE__ */ jsx("div", { ref: sentinelRef }),
+			!props.infinityScroll && /* @__PURE__ */ jsx(DataTablePagination, {
 				page,
 				size,
 				totalPages: items.page?.totalPages ?? 1,
@@ -3845,11 +4151,18 @@ const DataTable = (props) => {
 				onSizeChange: (value) => {
 					form.input.size.set(value);
 				}
+			}),
+			drawerConfig && /* @__PURE__ */ jsx(Drawer, {
+				opened: drawerItem !== null,
+				onClose: () => setDrawerItem(null),
+				position: "right",
+				size: "xl",
+				...drawerConfig.props,
+				children: drawerItem && drawerConfig.render(drawerItem)
 			})
 		]
 	});
 };
-var DataTable_default = DataTable;
 
 //#endregion
 //#region ../../src/core/hooks/useDialog.ts
@@ -3883,7 +4196,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 +4233,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