@alepha/ui 0.16.2 → 0.17.1

package/dist/core/index.js

@@ -3,9 +3,9 @@ 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 { 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";
@@ -13,8 +13,9 @@ import { $page, Link, NestedView, useActive, useRouter, useRouterState } from "a
 import { NavigationProgress, nprogress } from "@mantine/nprogress";
 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)" },
@@ -363,7 +364,7 @@ const ErrorViewer = ({ error, showStack = true, copyable = true, size = "sm" })
 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,
@@ -376,7 +377,7 @@ const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment$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",
@@ -418,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",
@@ -700,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;
@@ -1008,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,
@@ -1537,7 +1539,8 @@ const ControlArray = (props) => {
 	const colSpan = 12 / columns;
 	const objectItemSchema = isObjectItem ? itemSchema : null;
 	const fieldNames = objectItemSchema ? Object.keys(objectItemSchema.properties) : [];
-	const renderItems = () => /* @__PURE__ */ jsxs(Stack, {
+	const renderItems = () => /* @__PURE__ */ jsxs(Flex$1, {
+		direction: "column",
 		gap: "sm",
 		children: [items.map((item, index) => /* @__PURE__ */ jsxs(Flex$1, {
 			gap: "sm",
@@ -1613,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, {
@@ -1636,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, {
@@ -1827,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, {
@@ -2051,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",
@@ -2059,19 +2065,22 @@ 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, {
@@ -2093,15 +2102,17 @@ 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, {
@@ -2118,7 +2129,7 @@ function QueryHelp({ fields, onInsert }) {
 									c: "dimmed",
 									children: "AND"
 								})]
-							}), /* @__PURE__ */ jsxs(Group, {
+							}), /* @__PURE__ */ jsxs(Flex$1, {
 								gap: "xs",
 								wrap: "nowrap",
 								children: [/* @__PURE__ */ jsx(ActionButton, {
@@ -2184,7 +2195,7 @@ 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, {
@@ -2260,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,
@@ -2271,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 : [],
@@ -2288,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,
@@ -2301,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,
@@ -2393,6 +2408,7 @@ const Control = (_props) => {
 		const controlNumberProps = typeof props.number === "object" ? props.number : {};
 		if (props.slider) controlNumberProps.sliderProps ??= {};
 		return /* @__PURE__ */ jsx(ControlNumber, {
+			size: props.size,
 			input: props.input,
 			title: props.title,
 			description: props.description,
@@ -2404,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) => {
@@ -2416,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,
@@ -2426,6 +2444,7 @@ const Control = (_props) => {
 		const opts = typeof props.select === "object" ? props.select : {};
 		if (props.segmented) opts.segmented ??= {};
 		return /* @__PURE__ */ jsx(ControlSelect, {
+			size: props.size,
 			input: props.input,
 			title: props.title,
 			description: props.description,
@@ -2437,6 +2456,7 @@ const Control = (_props) => {
 		const switchProps = typeof props.switch === "object" ? props.switch : {};
 		return /* @__PURE__ */ jsx(Switch, {
 			...inputProps,
+			size: props.size,
 			id,
 			color: "blue",
 			defaultChecked: props.input.props.defaultValue,
@@ -2450,6 +2470,7 @@ const Control = (_props) => {
 		const passwordInputProps = typeof props.password === "object" ? props.password : {};
 		return /* @__PURE__ */ jsx(PasswordInput, {
 			...inputProps,
+			size: props.size,
 			id,
 			leftSection: icon,
 			...props.input.props,
@@ -2460,6 +2481,7 @@ 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,
@@ -2467,6 +2489,7 @@ const Control = (_props) => {
 		});
 	}
 	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,
@@ -2488,6 +2511,7 @@ const Control = (_props) => {
 	};
 	return /* @__PURE__ */ jsx(TextInput, {
 		...inputProps,
+		size: props.size,
 		id,
 		leftSection: icon,
 		type: getInputType(),
@@ -2546,7 +2570,7 @@ const Control = (_props) => {
 * ```
 */
 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);
@@ -2575,6 +2599,7 @@ const TypeForm = (props) => {
 				...controlProps,
 				...fieldControlProps?.[fieldName]
 			};
+			if (size) mergedControlProps.size = size;
 			return /* @__PURE__ */ jsx(Grid.Col, {
 				span,
 				children: /* @__PURE__ */ jsx(Control, {
@@ -2777,10 +2802,10 @@ const Breadcrumb = ({ home = "Home", separator, size = "xs", ...groupProps }) =>
 		size: 12,
 		color: "#9ca3af"
 	});
-	return /* @__PURE__ */ jsx(Group, {
+	return /* @__PURE__ */ jsx(Flex$1, {
 		gap: 4,
 		...groupProps,
-		children: crumbs.map((crumb, i) => /* @__PURE__ */ jsxs(Group, {
+		children: crumbs.map((crumb, i) => /* @__PURE__ */ jsxs(Flex$1, {
 			gap: 4,
 			children: [i > 0 && sep, i < crumbs.length - 1 ? /* @__PURE__ */ jsx(Anchor, {
 				component: Link,
@@ -2945,7 +2970,10 @@ const SidebarItem = (props) => {
 			href: props.item.href,
 			target: props.item.target,
 			size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
-			tooltip: item.description,
+			tooltip: item.description ? {
+				label: item.description,
+				position: "right"
+			} : void 0,
 			color: "gray",
 			variant: "subtle",
 			variantActive: "default",
@@ -3276,11 +3304,19 @@ const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) =>
 		bg: ui.colors.surface,
 		style: { borderBottom: "1px solid var(--alepha-border)" },
 		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
+			}
 		})
 	});
 };
@@ -3332,6 +3368,10 @@ const DataTablePagination = ({ page, size, totalPages, onPageChange, onSizeChang
 	});
 };
 
+//#endregion
+//#region ../../src/core/components/table/types.ts
+const DEFAULT_MAX_VISIBLE_COLUMNS = 8;
+
 //#endregion
 //#region ../../src/core/components/table/ColumnPicker.tsx
 const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
@@ -3343,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({
@@ -3369,20 +3414,22 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 			duration: 200,
 			timingFunction: "ease"
 		},
-		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(ActionButton, {
+		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",
@@ -3394,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"
@@ -3453,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",
@@ -3467,20 +3515,22 @@ const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
 			duration: 200,
 			timingFunction: "ease"
 		},
-		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(ActionButton, {
+		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",
@@ -3492,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,
@@ -3508,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))
@@ -3525,8 +3576,50 @@ const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
 
 //#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,
@@ -3552,6 +3645,19 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 						visibility: columnVisibility,
 						onVisibilityChange: onColumnVisibilityChange
 					}),
+					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",
@@ -3587,18 +3693,80 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 					...props,
 					children: props.label
 				}, index) : props), /* @__PURE__ */ jsx(ActionButton, {
+					variant: "subtle",
 					icon: IconRefresh,
-					onClick: onRefresh,
-					children: "Refresh"
+					onClick: onRefresh
 				})]
 			})
 		]
 	});
 };
 
+//#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
@@ -3623,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;
@@ -3630,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]);
@@ -3665,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({
@@ -3744,7 +3891,7 @@ const DataTable = (props) => {
 		},
 		onReset: async () => {
 			setPage(1);
-			setSize("10");
+			setSize(String(defaultSize));
 			await form.submit();
 		},
 		onChange: async (key, value) => {
@@ -3761,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();
@@ -3777,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,
@@ -3796,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;
@@ -3865,9 +4079,7 @@ 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, {
@@ -3875,13 +4087,15 @@ const DataTable = (props) => {
 				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, {
 				schema: filterSchema,
@@ -3892,12 +4106,41 @@ 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("div", { ref: sentinelRef }),
 			!props.infinityScroll && /* @__PURE__ */ jsx(DataTablePagination, {
 				page,
 				size,
@@ -3908,6 +4151,14 @@ 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)
 			})
 		]
 	});