@alepha/ui 0.18.2 → 0.19.0

package/dist/core/index.js

@@ -1,5 +1,5 @@
 import { $atom, $context, $inject, $module, Alepha, AlephaError, TypeBoxError, t } from "alepha";
-import { AlephaReactForm, FormValidationError, useForm, useFormState } from "alepha/react/form";
+import { AlephaReactForm, FormModel, FormValidationError, useFieldValue, useForm, useFormState } from "alepha/react/form";
 import { $head, AlephaReactHead, BrowserHeadProvider } from "alepha/react/head";
 import { AlephaReactI18n, useI18n } from "alepha/react/i18n";
 import { $cookie } from "alepha/server/cookies";
@@ -18,7 +18,6 @@ import { useOs } from "@mantine/hooks";
 import { DateInput, DateTimePicker, TimeInput } from "@mantine/dates";
 import { parseQueryString } from "alepha/orm";
 import { DateTimeProvider } from "alepha/datetime";
-
 //#region ../../src/core/atoms/alephaSidebarAtom.ts
 const alephaSidebarAtom = $atom({
 	name: "alepha.ui.sidebar",
@@ -35,7 +34,6 @@ const alephaSidebarAtom = $atom({
 		collapsedWidth: 72
 	}
 });
-
 //#endregion
 //#region ../../src/core/atoms/alephaThemeAtom.ts
 const alephaThemeAtom = $atom({
@@ -43,7 +41,6 @@ const alephaThemeAtom = $atom({
 	schema: t.object({ index: t.integer() }),
 	default: { index: 0 }
 });
-
 //#endregion
 //#region ../../src/core/atoms/alephaThemeOverridesAtom.ts
 const alephaThemeOverridesAtom = $atom({
@@ -57,14 +54,12 @@ const alephaThemeOverridesAtom = $atom({
 	}),
 	default: {}
 });
-
 //#endregion
 //#region ../../src/core/atoms/themes/default.ts
 const defaultTheme = {
 	name: "Default",
 	description: "Default Alepha Theme"
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/editorial.ts
 /**
@@ -219,7 +214,6 @@ const editorialTheme = {
 		})
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/midnight.ts
 const midnightTheme = {
@@ -334,7 +328,6 @@ const midnightTheme = {
 		]
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/monochrome.ts
 /**
@@ -502,7 +495,6 @@ const monochromeTheme = {
 		})
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/rosePine.ts
 /**
@@ -674,7 +666,6 @@ const rosePineTheme = {
 		Badge: Badge.extend({ defaultProps: { fw: 500 } })
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/softBrutalism.ts
 /**
@@ -861,7 +852,6 @@ const softBrutalismTheme = {
 		})
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/terminal.ts
 /**
@@ -1017,7 +1007,6 @@ const terminalTheme = {
 		})
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/alephaThemeListAtom.ts
 const alephaThemeListAtom = $atom({
@@ -1033,7 +1022,6 @@ const alephaThemeListAtom = $atom({
 		monochromeTheme
 	]
 });
-
 //#endregion
 //#region ../../src/core/providers/ThemeProvider.ts
 var ThemeProvider = class ThemeProvider {
@@ -1131,7 +1119,6 @@ var ThemeProvider = class ThemeProvider {
 		}
 	}
 };
-
 //#endregion
 //#region ../../src/core/components/dialogs/AlertDialog.tsx
 const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text$1, {
@@ -1144,7 +1131,6 @@ const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment, { c
 		children: options?.okLabel || "OK"
 	})
 })] });
-
 //#endregion
 //#region ../../src/core/components/dialogs/ConfirmDialog.tsx
 const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text$1, {
@@ -1162,7 +1148,6 @@ const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ jsxs(Fragment,
 		children: options?.confirmLabel || "Confirm"
 	})]
 })] });
-
 //#endregion
 //#region ../../src/core/components/dialogs/PromptDialog.tsx
 const PromptDialog = ({ options, onSubmit }) => {
@@ -1194,6 +1179,7 @@ const PromptDialog = ({ options, onSubmit }) => {
 		}),
 		/* @__PURE__ */ jsxs(Flex$1, {
 			justify: "flex-end",
+			gap: "xs",
 			children: [/* @__PURE__ */ jsx(Button, {
 				variant: "subtle",
 				onClick: () => onSubmit(null),
@@ -1206,7 +1192,6 @@ const PromptDialog = ({ options, onSubmit }) => {
 		})
 	] });
 };
-
 //#endregion
 //#region ../../src/core/services/DialogService.tsx
 var DialogService = class {
@@ -1268,8 +1253,8 @@ var DialogService = class {
 				content: /* @__PURE__ */ jsx(ConfirmDialog, {
 					options,
 					onConfirm: (confirmed) => {
-						this.close(modalId);
 						done(confirmed);
+						this.close(modalId);
 					}
 				})
 			});
@@ -1295,8 +1280,8 @@ var DialogService = class {
 				content: /* @__PURE__ */ jsx(PromptDialog, {
 					options,
 					onSubmit: (value) => {
-						this.close(modalId);
 						done(value);
+						this.close(modalId);
 					}
 				})
 			});
@@ -1320,7 +1305,6 @@ var DialogService = class {
 		else modals.closeAll();
 	}
 };
-
 //#endregion
 //#region ../../src/core/services/ToastService.tsx
 var ToastService = class {
@@ -1379,7 +1363,6 @@ var ToastService = class {
 		});
 	}
 };
-
 //#endregion
 //#region ../../src/core/UiRouter.ts
 /**
@@ -1394,7 +1377,6 @@ var UiRouter = class {
 		component: AlephaMantineProvider
 	});
 };
-
 //#endregion
 //#region ../../src/core/hooks/useTheme.ts
 /**
@@ -1429,7 +1411,6 @@ const useTheme = () => {
 		}
 	];
 };
-
 //#endregion
 //#region ../../src/core/hooks/useToast.ts
 /**
@@ -1445,7 +1426,6 @@ const useTheme = () => {
 const useToast = () => {
 	return useInject(ToastService);
 };
-
 //#endregion
 //#region ../../src/core/components/layout/Omnibar.tsx
 const Omnibar = (props) => {
@@ -1477,7 +1457,6 @@ const Omnibar = (props) => {
 		nothingFound
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/AlephaMantineProvider.tsx
 const AlephaMantineProvider = (props) => {
@@ -1519,7 +1498,6 @@ const AlephaMantineProvider = (props) => {
 		]
 	})] });
 };
-
 //#endregion
 //#region ../../src/core/constants/ui.ts
 const ui = {
@@ -1538,51 +1516,18 @@ const ui = {
 		xl: 32
 	} }
 };
-
 //#endregion
 //#region ../../src/core/helpers/isComponentType.ts
 function isComponentType(param) {
 	if (isValidElement(param)) return false;
 	return typeof param === "function" || typeof param === "object" && param !== null && "$$typeof" in param;
 }
-
 //#endregion
 //#region ../../src/core/components/buttons/ActionButton.tsx
-const ActionMenuItem = (props) => {
-	const { item, index } = props;
-	const router = useRouter();
-	const action = useAction({ handler: async (e) => {
-		await item.onClick?.();
-	} }, [item.onClick]);
-	if (item.type === "divider") return /* @__PURE__ */ jsx(Menu.Divider, {}, index);
-	if (item.type === "label") return /* @__PURE__ */ jsx(Menu.Label, { children: item.label }, index);
-	if (item.children && item.children.length > 0) return /* @__PURE__ */ jsxs(Menu, {
-		trigger: "hover",
-		position: "right-start",
-		offset: 2,
-		children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Menu.Item, {
-			leftSection: item.icon,
-			rightSection: /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }),
-			children: item.label
-		}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: item.children.map((child, childIndex) => /* @__PURE__ */ jsx(ActionMenuItem, {
-			item: child,
-			index: childIndex
-		}, childIndex)) })]
-	}, index);
-	const menuItemProps = {};
-	if (props.item.onClick) menuItemProps.onClick = action.run;
-	else if (props.item.href) Object.assign(menuItemProps, router.anchor(props.item.href));
-	return /* @__PURE__ */ jsx(Menu.Item, {
-		leftSection: item.icon ?? (item.active ? /* @__PURE__ */ jsx(IconCheck, { size: ui.sizes.icon.sm }) : /* @__PURE__ */ jsx(Flex$1, { w: ui.sizes.icon.sm })),
-		onClick: item.onClick,
-		color: item.color,
-		...menuItemProps,
-		children: item.label
-	}, index);
-};
 const ActionButton = (_props) => {
 	const theme = useMantineTheme();
 	const props = { ..._props };
+	if (props.variant === "minimal") {}
 	const { tooltip, menu, icon, iconSize, ...restProps } = props;
 	if (props.intent) {
 		if (props.intent === "primary") restProps.color ??= theme.primaryColor;
@@ -1627,6 +1572,7 @@ const ActionButton = (_props) => {
 			children: /* @__PURE__ */ jsx(ActionButton, {
 				px: "xs",
 				...rest,
+				"aria-label": typeof children === "string" ? children : void 0,
 				tooltip,
 				menu,
 				children: leftSection
@@ -1783,7 +1729,7 @@ const ActionClickButton = ({ preventDefault, ...props }) => {
 * Action for navigation with active state support.
 */
 const ActionNavigationButton = (props) => {
-	const { active: options, classNameActive, variantActive, propsActive, routerGoOptions, onClick: propsOnClick, anchor, ...buttonProps } = props;
+	const { active: options, classNameActive, variantActive, propsActive, routerGoOptions, onClick: propsOnClick, anchorProps: buttonAnchorProps, anchor, ...buttonProps } = props;
 	const router = useRouter();
 	const { isPending, isActive } = useActive(options ? {
 		href: props.href,
@@ -1797,11 +1743,11 @@ const ActionNavigationButton = (props) => {
 	};
 	const className = buttonProps.className || "";
 	if (isActive && options !== false && classNameActive) buttonProps.className = `${className} ${classNameActive}`.trim();
-	if (props.anchorProps || anchor) return /* @__PURE__ */ jsx(Anchor, {
+	if (buttonAnchorProps || anchor) return /* @__PURE__ */ jsx(Anchor, {
 		component: "a",
 		...anchorProps,
 		...buttonProps,
-		...props.anchorProps,
+		...buttonAnchorProps,
 		onClick: combinedOnClick,
 		children: props.children
 	});
@@ -1824,7 +1770,38 @@ const ActionHrefButton = (props) => {
 		children: props.children
 	});
 };
-
+const ActionMenuItem = (props) => {
+	const { item, index } = props;
+	const router = useRouter();
+	const action = useAction({ handler: async (e) => {
+		await item.onClick?.();
+	} }, [item.onClick]);
+	if (item.type === "divider") return /* @__PURE__ */ jsx(Menu.Divider, {}, index);
+	if (item.type === "label") return /* @__PURE__ */ jsx(Menu.Label, { children: item.label }, index);
+	if (item.children && item.children.length > 0) return /* @__PURE__ */ jsxs(Menu, {
+		trigger: "hover",
+		position: "right-start",
+		offset: 2,
+		children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Menu.Item, {
+			leftSection: item.icon,
+			rightSection: /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }),
+			children: item.label
+		}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: item.children.map((child, childIndex) => /* @__PURE__ */ jsx(ActionMenuItem, {
+			item: child,
+			index: childIndex
+		}, childIndex)) })]
+	}, index);
+	const menuItemProps = {};
+	if (props.item.onClick) menuItemProps.onClick = action.run;
+	else if (props.item.href) Object.assign(menuItemProps, router.anchor(props.item.href));
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		leftSection: item.icon ?? (item.active ? /* @__PURE__ */ jsx(IconCheck, { size: ui.sizes.icon.sm }) : /* @__PURE__ */ jsx(Flex$1, { w: ui.sizes.icon.sm })),
+		onClick: item.onClick,
+		color: item.color,
+		...menuItemProps,
+		children: item.label
+	}, index);
+};
 //#endregion
 //#region ../../src/core/components/buttons/BurgerButton.tsx
 const BurgerButton = (props) => {
@@ -1840,7 +1817,6 @@ const BurgerButton = (props) => {
 		...props
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/ClipboardButton.tsx
 const ClipboardButton = (props) => {
@@ -1861,7 +1837,6 @@ const ClipboardButton = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/DarkModeButton.tsx
 /**
@@ -1893,7 +1868,6 @@ const DarkModeButton = (props) => {
 		...props
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/LanguageButton.tsx
 const LanguageButton = (props) => {
@@ -1909,7 +1883,6 @@ const LanguageButton = (props) => {
 		...props
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/OmnibarButton.tsx
 const OmnibarButton = (props) => {
@@ -1954,7 +1927,6 @@ const OmnibarButton = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/hooks/useDialog.ts
 /**
@@ -1971,7 +1943,6 @@ const OmnibarButton = (props) => {
 const useDialog = () => {
 	return useInject(DialogService);
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/ThemeExpertModal.tsx
 const MANTINE_COLORS = [
@@ -2180,7 +2151,6 @@ const ThemeExpertModal = () => {
 		]
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/ThemeButton.tsx
 const ThemeButton = (props) => {
@@ -2209,7 +2179,6 @@ const ThemeButton = (props) => {
 		...actionProps
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/ToggleSidebarButton.tsx
 const ToggleSidebarButton = (props) => {
@@ -2231,102 +2200,104 @@ const ToggleSidebarButton = (props) => {
 		...props
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/data/DetailDrawer.tsx
-const DetailDrawer = ({ opened, onClose, title, subtitle, status, actions, tabs, children, loading, size = "xl", defaultTab }) => /* @__PURE__ */ jsxs(Drawer, {
-	opened,
-	onClose,
-	position: "right",
-	size,
-	withCloseButton: false,
-	padding: 0,
-	children: [/* @__PURE__ */ jsxs(Flex$1, {
-		p: "md",
-		justify: "space-between",
-		align: "flex-start",
-		style: { borderBottom: "1px solid var(--mantine-color-default-border)" },
+const DetailDrawer = (props) => {
+	const { opened, onClose, title, subtitle, status, actions, tabs, children, loading, size = "xl", defaultTab } = props;
+	return /* @__PURE__ */ jsxs(Drawer, {
+		opened,
+		onClose,
+		position: "right",
+		size,
+		withCloseButton: false,
+		padding: 0,
 		children: [/* @__PURE__ */ jsxs(Flex$1, {
-			direction: "column",
-			gap: 2,
-			style: {
-				minWidth: 0,
-				flex: 1
-			},
+			p: "md",
+			justify: "space-between",
+			align: "flex-start",
+			style: { borderBottom: "1px solid var(--mantine-color-default-border)" },
 			children: [/* @__PURE__ */ jsxs(Flex$1, {
+				direction: "column",
+				gap: 2,
+				style: {
+					minWidth: 0,
+					flex: 1
+				},
+				children: [/* @__PURE__ */ jsxs(Flex$1, {
+					gap: "xs",
+					align: "center",
+					children: [status && /* @__PURE__ */ jsx(Flex$1, {
+						w: 8,
+						h: 8,
+						style: {
+							borderRadius: "50%",
+							backgroundColor: status.active ? "var(--mantine-color-green-6)" : "var(--mantine-color-red-6)",
+							flexShrink: 0
+						}
+					}), /* @__PURE__ */ jsx(Text$1, {
+						size: "lg",
+						fw: 600,
+						truncate: true,
+						children: title
+					})]
+				}), subtitle && /* @__PURE__ */ jsx(Text$1, {
+					size: "sm",
+					c: "dimmed",
+					truncate: true,
+					children: subtitle
+				})]
+			}), /* @__PURE__ */ jsxs(Flex$1, {
 				gap: "xs",
 				align: "center",
-				children: [status && /* @__PURE__ */ jsx(Flex$1, {
-					w: 8,
-					h: 8,
-					style: {
-						borderRadius: "50%",
-						backgroundColor: status.active ? "var(--mantine-color-green-6)" : "var(--mantine-color-red-6)",
-						flexShrink: 0
-					}
-				}), /* @__PURE__ */ jsx(Text$1, {
-					size: "lg",
-					fw: 600,
-					truncate: true,
-					children: title
+				style: { flexShrink: 0 },
+				children: [actions && actions.length > 0 && /* @__PURE__ */ jsx(ActionButton, {
+					variant: "default",
+					size: "xs",
+					menu: {
+						items: actions,
+						position: "bottom-end",
+						width: 200
+					},
+					children: "Actions"
+				}), /* @__PURE__ */ jsx(ActionButton, {
+					variant: "subtle",
+					size: "xs",
+					c: "dimmed",
+					onClick: onClose,
+					children: "Close"
 				})]
-			}), subtitle && /* @__PURE__ */ jsx(Text$1, {
-				size: "sm",
-				c: "dimmed",
-				truncate: true,
-				children: subtitle
 			})]
-		}), /* @__PURE__ */ jsxs(Flex$1, {
-			gap: "xs",
+		}), loading ? /* @__PURE__ */ jsx(Flex$1, {
+			flex: 1,
+			justify: "center",
 			align: "center",
-			style: { flexShrink: 0 },
-			children: [actions && actions.length > 0 && /* @__PURE__ */ jsx(ActionButton, {
-				variant: "default",
-				size: "xs",
-				menu: {
-					items: actions,
-					position: "bottom-end",
-					width: 200
-				},
-				children: "Actions"
-			}), /* @__PURE__ */ jsx(ActionButton, {
-				variant: "subtle",
-				size: "xs",
-				c: "dimmed",
-				onClick: onClose,
-				children: "Close"
-			})]
-		})]
-	}), loading ? /* @__PURE__ */ jsx(Flex$1, {
-		flex: 1,
-		justify: "center",
-		align: "center",
-		py: "xl",
-		children: /* @__PURE__ */ jsx(Loader, {})
-	}) : tabs && tabs.length > 0 ? /* @__PURE__ */ jsxs(Tabs, {
-		defaultValue: defaultTab || tabs[0].value,
-		children: [/* @__PURE__ */ jsx(Tabs.List, {
-			px: "md",
-			children: tabs.map((tab) => /* @__PURE__ */ jsx(Tabs.Tab, {
+			py: "xl",
+			children: /* @__PURE__ */ jsx(Loader, {})
+		}) : tabs && tabs.length > 0 ? /* @__PURE__ */ jsxs(Tabs, {
+			defaultValue: defaultTab || tabs[0].value,
+			children: [/* @__PURE__ */ jsx(Tabs.List, {
+				px: "md",
+				children: tabs.map((tab) => /* @__PURE__ */ jsx(Tabs.Tab, {
+					value: tab.value,
+					leftSection: tab.icon ? /* @__PURE__ */ jsx(tab.icon, { size: 14 }) : void 0,
+					children: tab.label
+				}, tab.value))
+			}), tabs.map((tab) => /* @__PURE__ */ jsx(Tabs.Panel, {
 				value: tab.value,
-				leftSection: tab.icon ? /* @__PURE__ */ jsx(tab.icon, { size: 14 }) : void 0,
-				children: tab.label
-			}, tab.value))
-		}), tabs.map((tab) => /* @__PURE__ */ jsx(Tabs.Panel, {
-			value: tab.value,
+				p: "md",
+				children: tab.content
+			}, tab.value))]
+		}) : /* @__PURE__ */ jsx(Flex$1, {
+			direction: "column",
 			p: "md",
-			children: tab.content
-		}, tab.value))]
-	}) : /* @__PURE__ */ jsx(Flex$1, {
-		direction: "column",
-		p: "md",
-		children
-	})]
-});
-
+			children
+		})]
+	});
+};
 //#endregion
 //#region ../../src/core/components/data/DetailList.tsx
-const DetailList = ({ items, columns = 1 }) => {
+const DetailList = (props) => {
+	const { items, columns = 1 } = props;
 	return /* @__PURE__ */ jsx(Grid, {
 		gutter: "xs",
 		children: items.filter((item) => !item.hidden).map((item) => /* @__PURE__ */ jsx(Grid.Col, {
@@ -2365,7 +2336,6 @@ const DetailList = ({ items, columns = 1 }) => {
 		}, item.label))
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/data/StatCards.tsx
 const StatCards = ({ items }) => /* @__PURE__ */ jsx(Flex$1, {
@@ -2401,11 +2371,10 @@ const StatCards = ({ items }) => /* @__PURE__ */ jsx(Flex$1, {
 		}, item.label);
 	})
 });
-
 //#endregion
 //#region ../../src/core/components/Flex.tsx
 const Flex = forwardRef((props, ref) => {
-	const { fill, center, centerX, centerY, col, ground, surface, elevated, rounded, bordered, borderedTop, borderedBottom, shadowed, ...rest } = props;
+	const { fill, center, centerX, centerY, col, ground, surface, elevated, rounded, bordered, borderedTop, borderedBottom, shadowed, overflow, form, ...rest } = props;
 	if (fill) rest.flex ??= 1;
 	if (col) rest.direction ??= "column";
 	if (center) {
@@ -2428,19 +2397,28 @@ const Flex = forwardRef((props, ref) => {
 		...rest.style ?? {}
 	};
 	if (shadowed) rest.className = `${rest.className ?? ""} shadow-${shadowed === true ? "md" : shadowed}`.trim();
+	if (overflow) rest.className = `${rest.className ?? ""} overflow-auto`.trim();
+	if (form) {
+		let formProps = typeof form === "object" ? form : {};
+		if (formProps instanceof FormModel) formProps = formProps.props;
+		return /* @__PURE__ */ jsx(Flex$1, {
+			ref,
+			component: "form",
+			...formProps,
+			...rest
+		});
+	}
 	return /* @__PURE__ */ jsx(Flex$1, {
 		ref,
 		...rest
 	});
 });
 Flex.displayName = "Flex";
-
 //#endregion
 //#region ../../src/core/components/Heading.tsx
 const Heading = (props) => {
 	return /* @__PURE__ */ jsx("h1", { children: "Heading" });
 };
-
 //#endregion
 //#region ../../src/core/components/layout/AppBar.tsx
 const AppBar = (props) => {
@@ -2555,7 +2533,6 @@ const AppBar = (props) => {
 	});
 	return content;
 };
-
 //#endregion
 //#region ../../src/core/components/layout/Breadcrumb.tsx
 /**
@@ -2565,7 +2542,8 @@ const AppBar = (props) => {
 * 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 = "sm", ...groupProps }) => {
+const Breadcrumbs = (props) => {
+	const { home = "Home", separator, size = "sm", ...groupProps } = props;
 	const state = useRouterState();
 	const router = useRouter();
 	const crumbs = [];
@@ -2609,7 +2587,6 @@ const Breadcrumb = ({ home = "Home", separator, size = "sm", ...groupProps }) =>
 		}, crumb.href))
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/layout/Container.tsx
 const Container = forwardRef((props, ref) => {
@@ -2619,69 +2596,228 @@ const Container = forwardRef((props, ref) => {
 	});
 });
 Container.displayName = "Container";
-
 //#endregion
-//#region ../../src/core/components/layout/Sidebar.tsx
-const Sidebar = (props) => {
+//#region ../../src/core/helpers/renderIcon.tsx
+const renderIcon = (icon, size) => {
+	if (!icon) return null;
+	if (isValidElement(icon)) return icon;
+	if (isComponentType(icon)) return /* @__PURE__ */ jsx(icon, { size: size ?? ui.sizes.icon.md });
+	return icon;
+};
+//#endregion
+//#region ../../src/core/components/Text.tsx
+const INTENT_COLORS = {
+	primary: "blue",
+	info: "cyan",
+	success: "green",
+	warning: "yellow",
+	danger: "red"
+};
+const Text = forwardRef((props, ref) => {
+	const { intent, bold, italic, light, muted, small, uppercase, capitalize, center, monospace, title, ...rest } = props;
+	if (intent) rest.c ??= INTENT_COLORS[intent];
+	if (bold) rest.fw ??= 700;
+	if (light) rest.fw ??= 300;
+	if (italic) rest.fs ??= "italic";
+	if (muted) rest.c ??= "dimmed";
+	if (small) rest.size ??= "xs";
+	if (uppercase) rest.tt ??= "uppercase";
+	if (capitalize) rest.tt ??= "capitalize";
+	if (center) rest.ta ??= "center";
+	if (monospace) rest.ff ??= "monospace";
+	if (title) rest.size ??= "xl";
+	return /* @__PURE__ */ jsx(Text$1, {
+		ref,
+		...rest
+	});
+});
+Text.displayName = "Text";
+//#endregion
+//#region ../../src/core/components/layout/SidebarCollapsedItem.tsx
+const SidebarCollapsedItem = (props) => {
 	const router = useRouter();
-	const { onItemClick } = props;
-	const divider = (key, fill, collapsed) => {
-		return /* @__PURE__ */ jsx(Flex, {
-			h: 1,
-			bg: "var(--mantine-color-default-border)",
-			my: "xs",
-			mx: fill ? "calc(-1 * var(--mantine-spacing-md))" : collapsed ? 0 : "sm"
-		}, key);
+	const handleItemClick = () => {
+		props.onItemClick?.(props.item);
+		props.item.onClick?.();
 	};
-	const renderNode = (item, key, collapsed) => {
-		if ("type" in item) {
-			if (item.type === "spacer") {
-				if (collapsed) return null;
-				return /* @__PURE__ */ jsx(Flex, { h: 16 }, key);
-			}
-			if (item.type === "divider") return divider(key, item.fill, collapsed);
-			if (item.type === "search") return /* @__PURE__ */ jsx(Flex, {
-				mb: "xs",
-				w: "100%",
-				justify: "center",
-				pos: "relative",
-				children: /* @__PURE__ */ jsx(OmnibarButton, { collapsed })
-			}, key);
-			if (item.type === "toggle") return /* @__PURE__ */ jsx(ToggleSidebarButton, {}, key);
-			if (item.type === "section") {
-				if (item.children && item.children.length > 0) {
-					if (!item.children.some((child) => !("can" in child) || !child.can || child.can())) return null;
-				}
-				if (collapsed) return /* @__PURE__ */ jsx(Fragment$1, { children: item.children?.map((child, index) => renderNode(child, `s${key}-${index}`, collapsed)) }, key);
-				return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Flex, {
-					mt: "md",
-					align: "center",
-					gap: "xs",
-					children: [renderIcon(item.icon, ui.sizes.icon.sm), /* @__PURE__ */ jsx(Text, {
-						size: "xs",
-						c: "dimmed",
-						tt: "uppercase",
-						fw: "bold",
-						children: item.label
-					})]
-				}), item.children?.map((child, index) => renderNode(child, `s${key}-${index}`, collapsed))] }, key);
-			}
-		}
-		if ("element" in item) return /* @__PURE__ */ jsx(Fragment$1, { children: item.element }, key);
-		if (item.can && !item.can()) return null;
-		if (item.children && item.children.length > 0) {
+	const hasChildren = props.item.children && props.item.children.length > 0;
+	const menu = hasChildren ? {
+		on: "hover",
+		position: "right",
+		menuProps: {
+			arrowPosition: "center",
+			arrowSize: 10,
+			withArrow: true
+		},
+		items: [{
+			type: "label",
+			label: props.item.label
+		}, ...props.item.children.filter((child) => !child.can || child.can()).map((child) => ({
+			label: child.label,
+			icon: renderIcon(child.icon, ui.sizes.icon.sm),
+			href: child.href,
+			active: child.href ? router.isActive(child.href, { startWith: child.activeStartsWith }) : void 0
+		}))]
+	} : void 0;
+	return /* @__PURE__ */ jsx(Flex, {
+		w: "100%",
+		justify: "center",
+		pos: "relative",
+		children: /* @__PURE__ */ jsx(ActionButton, {
+			size: props.item.theme?.size ?? props.theme.button?.size ?? (props.level === 0 ? "sm" : "xs"),
+			bd: 0,
+			variant: "default",
+			propsActive: { variant: "outline" },
+			tooltip: hasChildren ? void 0 : {
+				label: props.item.label,
+				position: "right"
+			},
+			onClick: hasChildren ? void 0 : handleItemClick,
+			icon: renderIcon(props.item.icon, ui.sizes.icon.sm) ?? /* @__PURE__ */ jsx(IconSquareRounded, { size: ui.sizes.icon.sm }),
+			href: hasChildren ? void 0 : props.item.href,
+			target: hasChildren ? void 0 : props.item.target,
+			menu,
+			...props.item.actionProps
+		})
+	});
+};
+//#endregion
+//#region ../../src/core/components/layout/SidebarItem.tsx
+const SidebarItem = (props) => {
+	const maxLevel = 2;
+	const router = useRouter();
+	const isActive = useCallback((item) => {
+		if (!item.children) return false;
+		for (const child of item.children) {
+			if (child.href) {
+				if (router.isActive(child.href)) return true;
+			}
+			if (isActive(child)) return true;
+		}
+		return false;
+	}, []);
+	const [isOpen, setIsOpen] = useState(isActive(props.item));
+	useEvents({ "react:transition:end": () => {
+		if (isActive(props.item)) setIsOpen(true);
+	} }, []);
+	if (props.level > maxLevel) return null;
+	const handleItemClick = (e) => {
+		if (!props.item.target) e.preventDefault();
+		if (props.item.children && props.item.children.length > 0) setIsOpen(!isOpen);
+		else {
+			props.onItemClick?.(props.item);
+			props.item.onClick?.();
+		}
+	};
+	return /* @__PURE__ */ jsxs(Flex, {
+		direction: "column",
+		ps: props.level === 0 ? 0 : 32,
+		pos: "relative",
+		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 ?? (props.level === 0 ? "sm" : "xs"),
+			bd: 0,
+			fw: "normal",
+			variant: "default",
+			propsActive: { variant: "outline" },
+			radius: props.item.theme?.radius ?? props.theme.button?.radius ?? "md",
+			onClick: handleItemClick,
+			leftSection: /* @__PURE__ */ jsxs(Flex, {
+				w: "100%",
+				align: "center",
+				gap: "sm",
+				children: [renderIcon(props.item.icon, ui.sizes.icon.sm), /* @__PURE__ */ jsx(Flex, {
+					direction: "column",
+					children: /* @__PURE__ */ jsx(Flex, { children: props.item.label })
+				})]
+			}),
+			rightSection: props.item.children ? /* @__PURE__ */ jsx(Flex, { children: isOpen ? /* @__PURE__ */ jsx(IconChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }) }) : props.item.rightSection,
+			...props.item.actionProps
+		}), props.item.children && isOpen && /* @__PURE__ */ jsxs(Flex, {
+			direction: "column",
+			"data-parent-level": props.level,
+			gap: 2,
+			py: 2,
+			children: [/* @__PURE__ */ jsx(Flex, { style: {
+				position: "absolute",
+				width: 1,
+				background: "linear-gradient(to bottom, transparent, var(--mantine-color-default-border), transparent)",
+				top: 48,
+				left: 20 + 32 * props.level,
+				bottom: 16
+			} }), props.item.children.filter((child) => !child.can || child.can()).map((child, index) => /* @__PURE__ */ jsx(SidebarItem, {
+				item: child,
+				level: props.level + 1,
+				onItemClick: props.onItemClick,
+				theme: props.theme
+			}, index))]
+		})]
+	});
+};
+//#endregion
+//#region ../../src/core/components/layout/Sidebar.tsx
+const Sidebar = (props) => {
+	const router = useRouter();
+	const divider = (key, fill, collapsed) => {
+		return /* @__PURE__ */ jsx(Flex, {
+			h: 1,
+			bg: "var(--mantine-color-default-border)",
+			my: "xs",
+			mx: fill ? "calc(-1 * var(--mantine-spacing-md))" : collapsed ? 0 : "sm"
+		}, key);
+	};
+	const renderNode = (item, key, collapsed) => {
+		if ("type" in item) {
+			if (item.type === "spacer") {
+				if (collapsed) return null;
+				return /* @__PURE__ */ jsx(Flex, { h: 16 }, key);
+			}
+			if (item.type === "divider") return divider(key, item.fill, collapsed);
+			if (item.type === "search") return /* @__PURE__ */ jsx(Flex, {
+				mb: "xs",
+				w: "100%",
+				justify: "center",
+				pos: "relative",
+				children: /* @__PURE__ */ jsx(OmnibarButton, { collapsed })
+			}, key);
+			if (item.type === "toggle") return /* @__PURE__ */ jsx(ToggleSidebarButton, {}, key);
+			if (item.type === "section") {
+				if (item.children && item.children.length > 0) {
+					if (!item.children.some((child) => !("can" in child) || !child.can || child.can())) return null;
+				}
+				if (collapsed) return /* @__PURE__ */ jsx(Fragment$1, { children: item.children?.map((child, index) => renderNode(child, `s${key}-${index}`, collapsed)) }, key);
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Flex, {
+					mt: "md",
+					align: "center",
+					gap: "xs",
+					children: [renderIcon(item.icon, ui.sizes.icon.sm), /* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						tt: "uppercase",
+						fw: "bold",
+						children: item.label
+					})]
+				}), item.children?.map((child, index) => renderNode(child, `s${key}-${index}`, collapsed))] }, key);
+			}
+		}
+		if ("element" in item) return /* @__PURE__ */ jsx(Fragment$1, { 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;
 		}
 		if (collapsed) return /* @__PURE__ */ jsx(SidebarCollapsedItem, {
 			item,
 			level: 0,
-			onItemClick,
+			onItemClick: props.onItemClick,
 			theme: props.theme ?? {}
 		}, key);
 		return /* @__PURE__ */ jsx(SidebarItem, {
 			item,
 			level: 0,
-			onItemClick,
+			onItemClick: props.onItemClick,
 			theme: props.theme ?? {}
 		}, key);
 	};
@@ -2744,130 +2880,6 @@ const Sidebar = (props) => {
 	})] });
 	return renderSidebar(false);
 };
-const SidebarItem = (props) => {
-	const { item, level } = props;
-	const maxLevel = 2;
-	const router = useRouter();
-	const isActive = useCallback((item) => {
-		if (!item.children) return false;
-		for (const child of item.children) {
-			if (child.href) {
-				if (router.isActive(child.href)) return true;
-			}
-			if (isActive(child)) return true;
-		}
-		return false;
-	}, []);
-	const [isOpen, setIsOpen] = useState(isActive(item));
-	useEvents({ "react:transition:end": () => {
-		if (isActive(item)) setIsOpen(true);
-	} }, []);
-	if (level > maxLevel) return null;
-	const handleItemClick = (e) => {
-		if (!props.item.target) e.preventDefault();
-		if (item.children && item.children.length > 0) setIsOpen(!isOpen);
-		else {
-			props.onItemClick?.(item);
-			item.onClick?.();
-		}
-	};
-	return /* @__PURE__ */ jsxs(Flex, {
-		direction: "column",
-		ps: level === 0 ? 0 : 32,
-		pos: "relative",
-		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"),
-			bd: 0,
-			fw: "normal",
-			variant: "default",
-			propsActive: { variant: "outline" },
-			radius: props.item.theme?.radius ?? props.theme.button?.radius ?? "md",
-			onClick: handleItemClick,
-			leftSection: /* @__PURE__ */ jsxs(Flex, {
-				w: "100%",
-				align: "center",
-				gap: "sm",
-				children: [renderIcon(item.icon, ui.sizes.icon.sm), /* @__PURE__ */ jsx(Flex, {
-					direction: "column",
-					children: /* @__PURE__ */ jsx(Flex, { children: item.label })
-				})]
-			}),
-			rightSection: item.children ? /* @__PURE__ */ jsx(Flex, { children: isOpen ? /* @__PURE__ */ jsx(IconChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }) }) : props.item.rightSection,
-			...props.item.actionProps
-		}), item.children && isOpen && /* @__PURE__ */ jsxs(Flex, {
-			direction: "column",
-			"data-parent-level": level,
-			gap: 2,
-			py: 2,
-			children: [/* @__PURE__ */ jsx(Flex, { style: {
-				position: "absolute",
-				width: 1,
-				background: "linear-gradient(to bottom, transparent, var(--mantine-color-default-border), transparent)",
-				top: 48,
-				left: 20 + 32 * level,
-				bottom: 16
-			} }), item.children.filter((child) => !child.can || child.can()).map((child, index) => /* @__PURE__ */ jsx(SidebarItem, {
-				item: child,
-				level: level + 1,
-				onItemClick: props.onItemClick,
-				theme: props.theme
-			}, index))]
-		})]
-	});
-};
-const SidebarCollapsedItem = (props) => {
-	const { item, level } = props;
-	const router = useRouter();
-	const handleItemClick = () => {
-		props.onItemClick?.(item);
-		item.onClick?.();
-	};
-	const hasChildren = item.children && item.children.length > 0;
-	const menu = hasChildren ? {
-		on: "hover",
-		position: "right",
-		menuProps: {
-			arrowPosition: "center",
-			arrowSize: 10,
-			withArrow: true
-		},
-		items: [{
-			type: "label",
-			label: item.label
-		}, ...item.children.filter((child) => !child.can || child.can()).map((child) => ({
-			label: child.label,
-			icon: renderIcon(child.icon, ui.sizes.icon.sm),
-			href: child.href,
-			active: child.href ? router.isActive(child.href, { startWith: child.activeStartsWith }) : void 0
-		}))]
-	} : void 0;
-	return /* @__PURE__ */ jsx(Flex, {
-		w: "100%",
-		justify: "center",
-		pos: "relative",
-		children: /* @__PURE__ */ jsx(ActionButton, {
-			size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
-			bd: 0,
-			variant: "default",
-			propsActive: { variant: "outline" },
-			tooltip: hasChildren ? void 0 : {
-				label: item.label,
-				position: "right"
-			},
-			onClick: hasChildren ? void 0 : handleItemClick,
-			icon: renderIcon(item.icon, ui.sizes.icon.sm) ?? /* @__PURE__ */ jsx(IconSquareRounded, { size: ui.sizes.icon.sm }),
-			href: hasChildren ? void 0 : props.item.href,
-			target: hasChildren ? void 0 : props.item.target,
-			menu,
-			...props.item.actionProps
-		})
-	});
-};
-
 //#endregion
 //#region ../../src/core/components/layout/DashboardShell.tsx
 const DashboardShell = (props) => {
@@ -2907,6 +2919,8 @@ const DashboardShell = (props) => {
 	const fHeight = props.footerHeight ?? 24;
 	const headerHeight = hasAppBar ? hHeight : 0;
 	const footerHeight = footerElement ? fHeight : 0;
+	const navbarWidth = collapsed ? collapsedWidth : expandedWidth;
+	const mainContent = props.children ?? /* @__PURE__ */ jsx(NestedView, {});
 	return /* @__PURE__ */ jsxs(AppShell, {
 		layout: "alt",
 		w: "100%",
@@ -2914,7 +2928,7 @@ const DashboardShell = (props) => {
 		flex: 1,
 		header: hasAppBar ? { height: hHeight } : void 0,
 		navbar: hasSidebar ? {
-			width: { base: collapsed ? collapsedWidth : expandedWidth },
+			width: { base: navbarWidth },
 			breakpoint: "md",
 			collapsed: { mobile: sidebar.closed }
 		} : void 0,
@@ -2951,8 +2965,12 @@ const DashboardShell = (props) => {
 				display: "flex",
 				bg: "var(--alepha-ground)",
 				pos: "relative",
+				h: props.fill ? "100%" : "inherit",
 				...props.appShellMainProps,
-				children: props.children ?? /* @__PURE__ */ jsx(NestedView, {})
+				children: props.container ? /* @__PURE__ */ jsx(Container, {
+					...typeof props.container === "boolean" ? {} : props.container,
+					children: mainContent
+				}) : mainContent
 			}),
 			footerElement && /* @__PURE__ */ jsx(AppShell.Footer, {
 				...props.appShellFooterProps,
@@ -2961,42 +2979,12 @@ const DashboardShell = (props) => {
 		]
 	});
 };
-
-//#endregion
-//#region ../../src/core/components/Text.tsx
-const INTENT_COLORS = {
-	primary: "blue",
-	info: "cyan",
-	success: "green",
-	warning: "yellow",
-	danger: "red"
-};
-const Text = forwardRef((props, ref) => {
-	const { intent, bold, italic, light, muted, small, uppercase, capitalize, center, monospace, title, ...rest } = props;
-	if (intent) rest.c ??= INTENT_COLORS[intent];
-	if (bold) rest.fw ??= 700;
-	if (light) rest.fw ??= 300;
-	if (italic) rest.fs ??= "italic";
-	if (muted) rest.c ??= "dimmed";
-	if (small) rest.size ??= "xs";
-	if (uppercase) rest.tt ??= "uppercase";
-	if (capitalize) rest.tt ??= "capitalize";
-	if (center) rest.ta ??= "center";
-	if (monospace) rest.ff ??= "monospace";
-	if (title) rest.size ??= "xl";
-	return /* @__PURE__ */ jsx(Text$1, {
-		ref,
-		...rest
-	});
-});
-Text.displayName = "Text";
-
 //#endregion
 //#region ../../src/core/form/utils/parseInput.ts
 const parseInput = (props, form) => {
 	const disabled = false;
 	const id = props.input.props.id;
-	const label = props.title ?? ("title" in props.input.schema && typeof props.input.schema.title === "string" ? props.input.schema.title : void 0) ?? prettyName(props.input.path);
+	const label = props.label ?? ("title" in props.input.schema && typeof props.input.schema.title === "string" ? props.input.schema.title : void 0) ?? prettyName(props.input.path);
 	const description = props.description ?? ("description" in props.input.schema && typeof props.input.schema.description === "string" ? props.input.schema.description : void 0);
 	const error = form.error && form.error instanceof TypeBoxError ? form.error.value.message : void 0;
 	const icon = !props.icon ? getDefaultIcon({
@@ -3004,17 +2992,20 @@ const parseInput = (props, form) => {
 		format: props.input.schema && "format" in props.input.schema && typeof props.input.schema.format === "string" ? props.input.schema.format : void 0,
 		name: props.input.props.name,
 		isEnum: props.input.schema && "enum" in props.input.schema && Boolean(props.input.schema.enum),
-		isArray: props.input.schema && "type" in props.input.schema && props.input.schema.type === "array"
-	}) : isValidElement(props.icon) ? props.icon : createElement(props.icon, { size: ui.sizes.icon.md });
+		isArray: props.input.schema && "type" in props.input.schema && props.input.schema.type === "array",
+		size: props.size
+	}) : isValidElement(props.icon) ? props.icon : createElement(props.icon, { size: ui.sizes.icon.sm });
 	const format = props.input.schema && "format" in props.input.schema && typeof props.input.schema.format === "string" ? props.input.schema.format : void 0;
 	const required = props.input.required;
 	const schema = props.input.schema;
+	const testId = props.input.props?.["data-testid"];
 	const inputProps = {
 		label,
 		description,
 		error,
 		required,
-		disabled
+		disabled,
+		...testId ? { "data-testid": testId } : {}
 	};
 	if ("minLength" in schema && typeof schema.minLength === "number") inputProps.minLength = schema.minLength;
 	if ("maxLength" in schema && typeof schema.maxLength === "number") inputProps.maxLength = schema.maxLength;
@@ -3028,7 +3019,6 @@ const parseInput = (props, form) => {
 		inputProps
 	};
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlArray.tsx
 /**
@@ -3039,8 +3029,8 @@ 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) => ({
+		const initial = input?.initialValue;
+		if (Array.isArray(initial)) return initial.map((value) => ({
 			key: keyCounter.current++,
 			value
 		}));
@@ -3066,22 +3056,9 @@ const useArrayItems = (input) => {
 		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) => {
+		return 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,
@@ -3106,10 +3083,10 @@ const createArrayItemInput = (parentInput, itemSchema, index, _itemKey, value, o
 		path: `${parentInput.path}/${index}`,
 		required: false,
 		form: parentInput.form,
+		initialValue: value,
 		props: {
 			id: `${parentInput.props.id}-${index}`,
-			name: `${parentInput.props.name}[${index}]`,
-			defaultValue: value
+			name: `${parentInput.props.name}[${index}]`
 		},
 		set: onValueChange
 	};
@@ -3124,10 +3101,10 @@ const createArrayItemFieldInput = (parentInput, itemSchema, fieldName, index, _i
 		path: `${parentInput.path}/${index}/${fieldName}`,
 		required: itemSchema.required?.includes(fieldName) ?? false,
 		form: parentInput.form,
+		initialValue: itemValue?.[fieldName],
 		props: {
 			id: `${parentInput.props.id}-${index}-${fieldName}`,
-			name: `${parentInput.props.name}[${index}].${fieldName}`,
-			defaultValue: itemValue?.[fieldName]
+			name: `${parentInput.props.name}[${index}].${fieldName}`
 		},
 		set: (value) => onFieldChange(fieldName, value)
 	};
@@ -3331,7 +3308,6 @@ const ControlArray = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlDate.tsx
 /**
@@ -3345,7 +3321,9 @@ const ControlArray = (props) => {
 * Automatically detects date formats from schema and renders appropriate picker.
 */
 const ControlDate = (props) => {
-	const { inputProps, id, icon, format } = parseInput(props, useFormState(props.input));
+	const form = useFormState(props.input);
+	const [value, setValue] = useFieldValue(props.input);
+	const { inputProps, id, icon, format } = parseInput(props, form);
 	if (!props.input?.props) return null;
 	if (props.datetime || format === "date-time") {
 		const dateTimePickerProps = typeof props.datetime === "object" ? props.datetime : {};
@@ -3353,10 +3331,8 @@ const ControlDate = (props) => {
 			...inputProps,
 			id,
 			leftSection: icon,
-			defaultValue: props.input.props.defaultValue ? new Date(props.input.props.defaultValue) : void 0,
-			onChange: (value) => {
-				props.input.set(value ? new Date(value).toISOString() : void 0);
-			},
+			value: value ? new Date(value) : null,
+			onChange: (val) => setValue(val ? new Date(val).toISOString() : void 0),
 			...dateTimePickerProps
 		});
 	}
@@ -3366,10 +3342,8 @@ const ControlDate = (props) => {
 			...inputProps,
 			id,
 			leftSection: icon,
-			defaultValue: props.input.props.defaultValue ? new Date(props.input.props.defaultValue) : void 0,
-			onChange: (value) => {
-				props.input.set(value ? new Date(value).toISOString().slice(0, 10) : void 0);
-			},
+			value: value ? new Date(value) : null,
+			onChange: (val) => setValue(val ? new Date(val).toISOString().slice(0, 10) : void 0),
 			...dateInputProps
 		});
 	}
@@ -3379,30 +3353,23 @@ const ControlDate = (props) => {
 			...inputProps,
 			id,
 			leftSection: icon,
-			defaultValue: props.input.props.defaultValue,
-			onChange: (event) => {
-				props.input.set(event.currentTarget.value);
-			},
+			value: value ?? "",
+			onChange: (event) => setValue(event.currentTarget.value),
 			...timeInputProps
 		});
 	}
 	return null;
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlNumber.tsx
 /**
 *
 */
 const ControlNumber = (props) => {
-	const { inputProps, id, icon } = parseInput(props, useFormState(props.input));
-	const ref = useRef(null);
-	const [value, setValue] = useState(props.input.props.defaultValue);
-	useEvents({ "form:reset": (event) => {
-		if (event.id === props.input?.form.id && ref.current) setValue(props.input.props.defaultValue);
-	} }, [props.input]);
+	const form = useFormState(props.input);
+	const [value, setValue] = useFieldValue(props.input);
+	const { inputProps, id, icon } = parseInput(props, form);
 	if (!props.input?.props) return null;
-	const { type, ...inputPropsWithoutType } = props.input.props;
 	if (props.sliderProps) {
 		const min = props.sliderProps.min ?? inputProps.minimum ?? 0;
 		const max = props.sliderProps.max ?? inputProps.maximum ?? 100;
@@ -3415,38 +3382,28 @@ const ControlNumber = (props) => {
 				},
 				children: /* @__PURE__ */ jsx(Slider, {
 					...inputProps,
-					ref,
 					id,
-					...inputPropsWithoutType,
 					...props.sliderProps,
-					value,
+					value: value ?? 0,
 					min,
 					max,
 					label: () => value,
-					onChange: (val) => {
-						setValue(val);
-						props.input.set(val);
-					}
+					onChange: (val) => setValue(val)
 				})
 			})
 		});
 	}
 	return /* @__PURE__ */ jsx(NumberInput, {
 		...inputProps,
-		ref,
 		id,
 		leftSection: icon,
-		...inputPropsWithoutType,
 		...props.numberInputProps,
 		value: value ?? "",
 		onChange: (val) => {
-			const newValue = val !== null ? Number(val) : void 0;
-			setValue(newValue);
-			props.input.set(newValue);
+			setValue(val !== null ? Number(val) : void 0);
 		}
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlObject.tsx
 /**
@@ -3523,94 +3480,10 @@ const ControlObject = (props) => {
 		})
 	});
 };
-
 //#endregion
-//#region ../../src/core/form/components/ControlQueryBuilder.tsx
-/**
-* Query builder with text input and help popover.
-* Generates query strings for parseQueryString syntax.
-*/
-const ControlQueryBuilder = ({ schema, value = "", onChange, placeholder = "Enter query or click for assistance...", ...textInputProps }) => {
-	const [helpOpened, setHelpOpened] = useState(false);
-	const [textValue, setTextValue] = useState(value);
-	const inputRef = useRef(null);
-	const fields = schema ? extractSchemaFields(schema) : [];
-	const [error, setError] = useState(null);
-	const isValid = (value) => {
-		try {
-			parseQueryString(value.trim());
-		} catch (e) {
-			setError(e.message);
-			return false;
-		}
-		setError(null);
-		return true;
-	};
-	const handleTextChange = (newValue) => {
-		setTextValue(newValue);
-		if (isValid(newValue)) onChange?.(newValue);
-	};
-	const handleClear = () => {
-		setTextValue("");
-		onChange?.("");
-		isValid("");
-	};
-	const handleInsert = (text) => {
-		const newValue = textValue ? `${textValue}${text} ` : `${text} `;
-		setTextValue(newValue);
-		if (isValid(newValue)) onChange?.(newValue);
-		setTimeout(() => {
-			inputRef.current?.focus();
-			const length = inputRef.current?.value.length || 0;
-			inputRef.current?.setSelectionRange(length, length);
-		}, 0);
-	};
-	useEvents({ "form:change": (event) => {
-		if (event.id === inputRef.current?.form?.id) {
-			if (event.path === textInputProps["data-path"]) setTextValue(event.value ?? "");
-		}
-	} }, []);
-	return /* @__PURE__ */ jsxs(Popover, {
-		width: 800,
-		position: "bottom-start",
-		shadow: "md",
-		opened: helpOpened,
-		onChange: setHelpOpened,
-		closeOnClickOutside: true,
-		closeOnEscape: true,
-		transitionProps: {
-			transition: "fade-up",
-			duration: 200,
-			timingFunction: "ease"
-		},
-		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(TextInput, {
-			ref: inputRef,
-			placeholder,
-			value: textValue,
-			onChange: (e) => handleTextChange(e.currentTarget.value),
-			onFocus: () => setHelpOpened(true),
-			leftSection: error ? /* @__PURE__ */ jsx(IconInfoTriangle, { size: 16 }) : /* @__PURE__ */ jsx(IconFilter, { size: 16 }),
-			rightSection: textValue && /* @__PURE__ */ jsx(ActionIcon, {
-				size: "sm",
-				variant: "subtle",
-				color: "gray",
-				onClick: handleClear,
-				children: /* @__PURE__ */ jsx(IconX, { size: 14 })
-			}),
-			...textInputProps
-		}) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
-			bg: "transparent",
-			p: "xs",
-			bd: `1px solid ${ui.colors.border}`,
-			style: { backdropFilter: "blur(20px)" },
-			children: /* @__PURE__ */ jsx(QueryHelp, {
-				fields,
-				onInsert: handleInsert
-			})
-		})]
-	});
-};
-function QueryHelp({ fields, onInsert }) {
+//#region ../../src/core/form/components/ControlQueryBuilderHelp.tsx
+const ControlQueryBuilderHelp = (props) => {
+	const { fields, onInsert } = props;
 	return /* @__PURE__ */ jsxs(Flex$1, {
 		gap: "md",
 		align: "flex-start",
@@ -3771,114 +3644,314 @@ function QueryHelp({ fields, onInsert }) {
 					}, field.path))
 				})]
 			})
-		]
+		]
+	});
+};
+//#endregion
+//#region ../../src/core/form/components/ControlQueryBuilder.tsx
+/**
+* Query builder with text input and help popover.
+* Generates query strings for parseQueryString syntax.
+*/
+const ControlQueryBuilder = (props) => {
+	const { schema, value = "", onChange, placeholder = "Enter query or click for assistance...", ...textInputProps } = props;
+	const [helpOpened, setHelpOpened] = useState(false);
+	const [textValue, setTextValue] = useState(value);
+	const inputRef = useRef(null);
+	const fields = schema ? extractSchemaFields(schema) : [];
+	const [error, setError] = useState(null);
+	const isValid = (value) => {
+		try {
+			parseQueryString(value.trim());
+		} catch (e) {
+			setError(e.message);
+			return false;
+		}
+		setError(null);
+		return true;
+	};
+	const handleTextChange = (newValue) => {
+		setTextValue(newValue);
+		if (isValid(newValue)) onChange?.(newValue);
+	};
+	const handleClear = () => {
+		setTextValue("");
+		onChange?.("");
+		isValid("");
+	};
+	const handleInsert = (text) => {
+		const newValue = textValue ? `${textValue}${text} ` : `${text} `;
+		setTextValue(newValue);
+		if (isValid(newValue)) onChange?.(newValue);
+		setTimeout(() => {
+			inputRef.current?.focus();
+			const length = inputRef.current?.value.length || 0;
+			inputRef.current?.setSelectionRange(length, length);
+		}, 0);
+	};
+	useEvents({ "form:change": (event) => {
+		if (event.id === inputRef.current?.form?.id) {
+			if (event.path === textInputProps["data-path"]) setTextValue(event.value ?? "");
+		}
+	} }, []);
+	return /* @__PURE__ */ jsxs(Popover, {
+		width: 800,
+		position: "bottom-start",
+		shadow: "md",
+		opened: helpOpened,
+		onChange: setHelpOpened,
+		closeOnClickOutside: true,
+		closeOnEscape: true,
+		transitionProps: {
+			transition: "fade-up",
+			duration: 200,
+			timingFunction: "ease"
+		},
+		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(TextInput, {
+			ref: inputRef,
+			placeholder,
+			value: textValue,
+			onChange: (e) => handleTextChange(e.currentTarget.value),
+			onFocus: () => setHelpOpened(true),
+			leftSection: error ? /* @__PURE__ */ jsx(IconInfoTriangle, { size: 16 }) : /* @__PURE__ */ jsx(IconFilter, { size: 16 }),
+			rightSection: textValue && /* @__PURE__ */ jsx(ActionIcon, {
+				size: "sm",
+				variant: "subtle",
+				color: "gray",
+				onClick: handleClear,
+				children: /* @__PURE__ */ jsx(IconX, { size: 14 })
+			}),
+			...textInputProps
+		}) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
+			bg: "transparent",
+			p: "xs",
+			bd: `1px solid ${ui.colors.border}`,
+			style: { backdropFilter: "blur(20px)" },
+			children: /* @__PURE__ */ jsx(ControlQueryBuilderHelp, {
+				fields,
+				onInsert: handleInsert
+			})
+		})]
 	});
-}
-
+};
 //#endregion
 //#region ../../src/core/form/components/ControlSelect.tsx
 /**
-* ControlSelect component for handling Select, MultiSelect, and TagsInput.
+* ControlSelect component for handling Select, MultiSelect, Autocomplete, and TagsInput.
 *
 * Features:
 * - Basic Select with enum support
 * - MultiSelect for array of enums
-* - TagsInput for array of strings (no enum)
-* - Future: Lazy loading
-* - Future: Searchable/filterable options
-* - Future: Custom option rendering
+* - Autocomplete for creatable single values
+* - TagsInput for creatable array values
+* - Async lazy loading with auto short/long mode detection
+* - Short mode: client-side filtering with cached data
+* - Long mode: debounced server search
 *
 * Automatically detects enum values and array types from schema.
 */
 const ControlSelect = (props) => {
-	const { inputProps, id, icon } = parseInput(props, useFormState(props.input));
+	const form = useFormState(props.input);
+	const [value, setValue] = useFieldValue(props.input);
+	const { inputProps, id, icon } = parseInput(props, form);
 	const isArray = props.input.schema && "type" in props.input.schema && props.input.schema.type === "array";
-	let itemsEnum;
-	if (isArray && "items" in props.input.schema && props.input.schema.items) {
-		const items = props.input.schema.items;
-		if ("enum" in items && Array.isArray(items.enum)) itemsEnum = items.enum;
-	}
+	const isNumeric = props.input.schema && "type" in props.input.schema && (props.input.schema.type === "integer" || props.input.schema.type === "number");
+	const isBoolean = props.input.schema && "type" in props.input.schema && props.input.schema.type === "boolean";
 	const enumValues = props.input.schema && "enum" in props.input.schema && Array.isArray(props.input.schema.enum) ? props.input.schema.enum : [];
-	const [data, setData] = useState([]);
+	const { data: asyncData, loading, mode, search } = useAsyncLoader(props.loader, props.loaderThreshold ?? 100, props.loaderDebounce ?? 300, props.input.initialValue);
+	const [staticData, setStaticData] = useState([]);
+	const enumKey = JSON.stringify(enumValues);
 	useEffect(() => {
-		if (!props.input?.props) return;
-		if (props.loader) props.loader().then(setData);
-		else setData(enumValues);
-	}, [props.input, props.loader]);
+		if (!props.input?.props || props.loader) return;
+		if (isBoolean && enumValues.length === 0) setStaticData([{
+			value: "true",
+			label: "True"
+		}, {
+			value: "false",
+			label: "False"
+		}]);
+		else setStaticData(enumValues);
+	}, [
+		props.input,
+		props.loader,
+		enumKey,
+		isBoolean
+	]);
+	const data = props.loader ? asyncData : staticData;
 	if (!props.input?.props) return null;
-	if (props.segmented) {
-		const segmentedControlProps = typeof props.segmented === "object" ? props.segmented : {};
+	/**
+	* Coerce value for numeric schemas — Select values are always strings.
+	*/
+	const coerceValue = (val) => {
+		if (val == null) return val;
+		if (isNumeric) return Number(val);
+		if (isBoolean) return val === "true";
+		return val;
+	};
+	if (props.segmentedProps) {
+		const segmentedControlProps = typeof props.segmentedProps === "object" ? props.segmentedProps : {};
+		const segmentedData = segmentedControlProps.data ?? data.slice(0, 10);
 		return /* @__PURE__ */ jsx(Input.Wrapper, {
 			...inputProps,
-			children: /* @__PURE__ */ jsx(Flex$1, { children: /* @__PURE__ */ jsx(SegmentedControl, {
-				disabled: inputProps.disabled,
-				defaultValue: String(props.input.props.defaultValue),
-				...segmentedControlProps,
-				onChange: (value) => {
-					props.input.set(value);
-				},
-				data: data.slice(0, 10)
-			}) })
+			children: /* @__PURE__ */ jsx(Flex$1, {
+				my: "calc(var(--mantine-spacing-xs) / 2)",
+				children: /* @__PURE__ */ jsx(SegmentedControl, {
+					disabled: inputProps.disabled,
+					value: value != null ? String(value) : "",
+					...segmentedControlProps,
+					onChange: (val) => {
+						setValue(coerceValue(val));
+					},
+					data: segmentedData
+				})
+			})
 		});
 	}
-	if (props.autocomplete) {
-		const autocompleteProps = typeof props.autocomplete === "object" ? props.autocomplete : {};
-		return /* @__PURE__ */ jsx(Autocomplete, {
+	const sharedProps = {
+		size: props.size,
+		id,
+		leftSection: loading ? /* @__PURE__ */ jsx(Loader, {
+			color: "gray",
+			size: 10
+		}) : icon,
+		data
+	};
+	const selectableProps = {
+		...sharedProps,
+		searchable: true,
+		rightSection: /* @__PURE__ */ jsx("span", {})
+	};
+	const longModeProps = mode === "long" ? {
+		filter: ({ options }) => options,
+		onSearchChange: search.run
+	} : {};
+	if (props.creatable && (isArray || props.tagsInputProps)) {
+		const tagsInputExtraProps = props.tagsInputProps ?? {};
+		return /* @__PURE__ */ jsx(TagsInput, {
 			...inputProps,
-			size: props.size,
-			id,
-			leftSection: icon,
-			data,
-			...props.input.props,
-			...autocompleteProps
+			...sharedProps,
+			...longModeProps,
+			value: Array.isArray(value) ? value : [],
+			onChange: (val) => {
+				setValue(val);
+			},
+			...tagsInputExtraProps
 		});
 	}
-	if (isArray && !itemsEnum || props.tags) {
-		const tagsInputProps = typeof props.tags === "object" ? props.tags : {};
-		return /* @__PURE__ */ jsx(TagsInput, {
+	if (props.creatable) {
+		const autocompleteExtraProps = props.autocompleteProps ?? {};
+		return /* @__PURE__ */ jsx(Autocomplete, {
 			...inputProps,
-			size: props.size,
-			id,
-			leftSection: icon,
-			defaultValue: Array.isArray(props.input.props.defaultValue) ? props.input.props.defaultValue : [],
-			onChange: (value) => {
-				props.input.set(value);
+			...sharedProps,
+			...longModeProps,
+			value: value != null ? String(value) : "",
+			onChange: (val) => {
+				setValue(coerceValue(val));
 			},
-			...tagsInputProps
+			...autocompleteExtraProps
 		});
 	}
-	if (isArray && itemsEnum || props.multi) {
-		const data = itemsEnum?.map((value) => ({
-			value,
-			label: value
-		})) || [];
-		const multiSelectProps = typeof props.multi === "object" ? props.multi : {};
+	if (isArray || props.multiSelectProps) {
+		const multiSelectExtraProps = typeof props.multiSelectProps === "object" ? props.multiSelectProps : {};
 		return /* @__PURE__ */ jsx(MultiSelect, {
 			...inputProps,
-			size: props.size,
-			id,
-			leftSection: icon,
-			data,
-			defaultValue: Array.isArray(props.input.props.defaultValue) ? props.input.props.defaultValue : [],
-			onChange: (value) => {
-				props.input.set(value);
+			...selectableProps,
+			...longModeProps,
+			value: Array.isArray(value) ? value : [],
+			onChange: (val) => {
+				setValue(val);
 			},
-			...multiSelectProps
+			...multiSelectExtraProps
 		});
 	}
-	const selectProps = typeof props.select === "object" ? props.select : {};
+	const selectExtraProps = typeof props.selectProps === "object" ? props.selectProps : {};
+	if (mode === "static") return /* @__PURE__ */ jsx(Select, {
+		...inputProps,
+		...selectableProps,
+		value: value != null ? String(value) : null,
+		onChange: (val) => {
+			setValue(coerceValue(val));
+		},
+		...selectExtraProps
+	});
 	return /* @__PURE__ */ jsx(Select, {
 		...inputProps,
-		size: props.size,
-		id,
-		leftSection: icon,
-		rightSection: null,
-		data,
-		...props.input.props,
-		...selectProps
+		...selectableProps,
+		...longModeProps,
+		value: value != null ? String(value) : null,
+		onChange: (val) => {
+			setValue(coerceValue(val));
+		},
+		...selectExtraProps
 	});
 };
-
+/**
+* Hook for async select data loading with auto short/long mode detection.
+*/
+const useAsyncLoader = (loader, threshold, debounceMs, defaultValue) => {
+	const [data, setData] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const [mode, setMode] = useState("static");
+	const cache = useRef(/* @__PURE__ */ new Map());
+	useAction({
+		name: "select:loader:init",
+		runOnInit: true,
+		handler: async () => {
+			if (!loader) {
+				setMode("static");
+				return;
+			}
+			setLoading(true);
+			try {
+				const result = await loader("");
+				const isShort = result.length <= threshold;
+				setMode(isShort ? "short" : "long");
+				cache.current.set("", result);
+				setData(result);
+				if (!isShort && defaultValue != null && String(defaultValue) !== "") {
+					const resolved = await loader("", [String(defaultValue)]);
+					if (resolved.length > 0) setData((prev) => {
+						const existing = new Set(prev.map((d) => typeof d === "string" ? d : d.value));
+						const newItems = resolved.filter((r) => {
+							const val = typeof r === "string" ? r : r.value;
+							return !existing.has(val);
+						});
+						return [...prev, ...newItems];
+					});
+				}
+			} finally {
+				setLoading(false);
+			}
+		}
+	}, [loader, threshold]);
+	return {
+		data,
+		loading,
+		mode,
+		search: useAction({
+			debounce: debounceMs,
+			handler: async (text) => {
+				if (!loader || mode !== "long") return;
+				if (cache.current.has(text)) {
+					setData(cache.current.get(text));
+					return;
+				}
+				setLoading(true);
+				try {
+					const result = await loader(text);
+					cache.current.set(text, result);
+					setData(result);
+				} finally {
+					setLoading(false);
+				}
+			}
+		}, [
+			loader,
+			mode,
+			debounceMs
+		])
+	};
+};
 //#endregion
 //#region ../../src/core/form/components/Control.tsx
 /**
@@ -3907,6 +3980,7 @@ const ControlSelect = (props) => {
 */
 const Control = (_props) => {
 	const form = useFormState(_props.input, ["error"]);
+	const [value, setValue] = useFieldValue(_props.input);
 	if (!_props.input?.props) return null;
 	const { inputProps, id, icon, format, schema } = parseInput(_props, form);
 	const props = {
@@ -3914,12 +3988,11 @@ const Control = (_props) => {
 		...schema.$control
 	};
 	if (props.query) return /* @__PURE__ */ jsx(ControlQueryBuilder, {
-		...props.input.props,
 		...inputProps,
 		schema: props.query,
-		value: props.input.props.value,
-		onChange: (value) => {
-			props.input.set(value);
+		value,
+		onChange: (val) => {
+			setValue(val);
 		}
 	});
 	if (props.custom) {
@@ -3930,9 +4003,9 @@ const Control = (_props) => {
 				flex: 1,
 				mt: "calc(var(--mantine-spacing-xs) / 2)",
 				children: /* @__PURE__ */ jsx(Custom, {
-					defaultValue: props.input.props.defaultValue,
-					onChange: (value) => {
-						props.input.set(value);
+					value,
+					onChange: (val) => {
+						setValue(val);
 					}
 				})
 			})
@@ -3943,7 +4016,7 @@ const Control = (_props) => {
 		const controlObjectProps = typeof props.object === "object" ? props.object : {};
 		return /* @__PURE__ */ jsx(ControlObject, {
 			input: props.input,
-			title: props.title,
+			label: props.label,
 			description: props.description,
 			...controlObjectProps
 		});
@@ -3954,18 +4027,18 @@ const Control = (_props) => {
 		const controlArrayProps = typeof props.array === "object" ? props.array : {};
 		return /* @__PURE__ */ jsx(ControlArray, {
 			input: props.input,
-			title: props.title,
+			label: props.label,
 			description: props.description,
 			...controlArrayProps
 		});
 	}
-	if (props.number || props.input.schema && "type" in props.input.schema && (props.input.schema.type === "number" || props.input.schema.type === "integer")) {
+	if (props.number || !props.select && 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, {
 			size: props.size,
 			input: props.input,
-			title: props.title,
+			label: props.label,
 			description: props.description,
 			icon,
 			...controlNumberProps
@@ -3978,9 +4051,7 @@ const Control = (_props) => {
 			size: props.size,
 			id,
 			leftSection: icon,
-			onChange: (file) => {
-				props.input.set(file);
-			},
+			onChange: (file) => setValue(file),
 			...fileInputProps
 		});
 	}
@@ -3991,17 +4062,18 @@ const Control = (_props) => {
 			size: props.size,
 			id,
 			leftSection: icon,
-			...props.input.props,
+			value: value ?? "",
+			onChange: (val) => setValue(val),
 			...colorInputProps
 		});
 	}
 	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 ??= {};
+		if (props.segmented) opts.segmentedProps ??= {};
 		return /* @__PURE__ */ jsx(ControlSelect, {
 			size: props.size,
 			input: props.input,
-			title: props.title,
+			label: props.label,
 			description: props.description,
 			icon,
 			...opts
@@ -4015,16 +4087,16 @@ const Control = (_props) => {
 				size: props.size,
 				id,
 				color: "blue",
-				defaultChecked: props.input.props.defaultValue,
+				checked: Boolean(value),
 				onChange: (event) => {
-					props.input.set(event.currentTarget.checked);
+					setValue(event.currentTarget.checked);
 				},
 				...switchProps
 			});
 		}
 		const opts = {
 			input: props.input,
-			select: { data: [{
+			selectProps: { data: [{
 				value: "true",
 				label: "Yes"
 			}, {
@@ -4034,7 +4106,7 @@ const Control = (_props) => {
 		};
 		return /* @__PURE__ */ jsx(ControlSelect, {
 			size: props.size,
-			title: props.title,
+			label: props.label,
 			description: props.description,
 			icon,
 			...opts
@@ -4047,7 +4119,8 @@ const Control = (_props) => {
 			size: props.size,
 			id,
 			leftSection: icon,
-			...props.input.props,
+			value: value ?? "",
+			onChange: (ev) => setValue(ev.target.value),
 			...passwordInputProps
 		});
 	}
@@ -4058,14 +4131,15 @@ const Control = (_props) => {
 			size: props.size,
 			id,
 			leftSection: icon,
-			...props.input.props,
+			value: value ?? "",
+			onChange: (ev) => setValue(ev.target.value),
 			...textAreaProps
 		});
 	}
 	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,
+		label: props.label,
 		description: props.description,
 		icon,
 		date: props.date,
@@ -4080,7 +4154,7 @@ const Control = (_props) => {
 			case "uri": return "url";
 			case "tel":
 			case "phone": return "tel";
-			default: return;
+			default: return props.input.props.type ?? "text";
 		}
 	};
 	return /* @__PURE__ */ jsx(TextInput, {
@@ -4089,17 +4163,11 @@ const Control = (_props) => {
 		id,
 		leftSection: icon,
 		type: getInputType(),
-		...props.input.props,
-		...textInputProps,
-		inputWrapperOrder: [
-			"label",
-			"input",
-			"description",
-			"error"
-		]
+		value: value ?? "",
+		onChange: (ev) => setValue(ev.target.value),
+		...textInputProps
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/TypeForm.tsx
 /**
@@ -4145,6 +4213,7 @@ const Control = (_props) => {
 */
 const TypeForm = (props) => {
 	const { form, columns = 3, children, controlProps, fieldControlProps, skipFormElement = false, skipSubmitButton = false, submitButtonProps, fill = true, size } = props;
+	const { dirty } = useFormState(form, ["dirty"]);
 	const schema = props.schema || form.options.schema;
 	if (!schema?.properties) return null;
 	const supportedFields = Object.keys(schema.properties);
@@ -4207,10 +4276,12 @@ const TypeForm = (props) => {
 						children: [/* @__PURE__ */ jsx(ActionButton, {
 							variant: "subtle",
 							type: "reset",
+							disabled: !dirty,
 							children: "Reset"
 						}), /* @__PURE__ */ jsx(ActionButton, {
 							intent: "primary",
 							form,
+							disabled: !dirty,
 							...submitButtonProps,
 							children: submitButtonProps?.children ?? "Submit"
 						})]
@@ -4228,7 +4299,6 @@ const TypeForm = (props) => {
 		children: content
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/factories/dialogForm.tsx
 /**
@@ -4247,18 +4317,27 @@ const dialogForm = (form, options) => ({
 		...options?.typeFormProps
 	})
 });
-
 //#endregion
-//#region ../../src/core/helpers/renderIcon.tsx
-const renderIcon = (icon, size) => {
-	if (!icon) return null;
-	if (isValidElement(icon)) return icon;
-	if (isComponentType(icon)) return /* @__PURE__ */ jsx(icon, { size: size ?? ui.sizes.icon.md });
-	return icon;
+//#region ../../src/core/json/components/JsonViewerCopyButton.tsx
+const JsonViewerCopyButton = (props) => {
+	const [copied, setCopied] = useState(false);
+	const handleCopy = useCallback((e) => {
+		e.stopPropagation();
+		navigator.clipboard.writeText(props.value);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 1500);
+	}, [props.value]);
+	return /* @__PURE__ */ jsx(ActionIcon, {
+		size: props.iconSize + 4,
+		variant: "transparent",
+		c: copied ? "green" : "dimmed",
+		onClick: handleCopy,
+		className: "alepha-json-viewer-copy",
+		children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: props.iconSize }) : /* @__PURE__ */ jsx(IconCopy, { size: props.iconSize })
+	});
 };
-
 //#endregion
-//#region ../../src/core/json/components/JsonViewer.tsx
+//#region ../../src/core/json/components/JsonViewerShared.ts
 const SIZE_CONFIG = {
 	xs: {
 		icon: 14,
@@ -4307,77 +4386,20 @@ const getValueType = (val) => {
 	if (Array.isArray(val)) return "array";
 	return typeof val;
 };
-function buildTreeNodes(data, path = [], key, isArrayItem = false, maxDepth = 10) {
-	const currentPath = key !== void 0 ? [...path, key] : path;
-	const nodeId = currentPath.length > 0 ? currentPath.join(".") : "root";
-	if (currentPath.length > maxDepth) return {
-		value: nodeId,
-		label: key ?? "",
-		nodeValue: data,
-		nodeKey: key,
-		path: currentPath,
-		isArrayItem
-	};
-	const type = getValueType(data);
-	if (type === "object" || type === "array") {
-		const children = (type === "array" ? data.map((v, i) => [String(i), v]) : Object.entries(data)).map(([k, v]) => buildTreeNodes(v, currentPath, k, type === "array", maxDepth)).filter((n) => n !== null);
-		return {
-			value: nodeId,
-			label: key ?? "",
-			nodeValue: data,
-			nodeKey: key,
-			path: currentPath,
-			isArrayItem,
-			children: children.length > 0 ? children : void 0
-		};
-	}
-	return {
-		value: nodeId,
-		label: key ?? "",
-		nodeValue: data,
-		nodeKey: key,
-		path: currentPath,
-		isArrayItem
-	};
-}
-function getExpandedIds(nodes, targetDepth, currentDepth = 0) {
-	if (currentDepth >= targetDepth) return [];
-	const ids = [];
-	for (const node of nodes) if (node.children) {
-		ids.push(node.value);
-		ids.push(...getExpandedIds(node.children, targetDepth, currentDepth + 1));
-	}
-	return ids;
-}
-const CopyButton$1 = ({ value, iconSize }) => {
-	const [copied, setCopied] = useState(false);
-	const handleCopy = useCallback((e) => {
-		e.stopPropagation();
-		navigator.clipboard.writeText(value);
-		setCopied(true);
-		setTimeout(() => setCopied(false), 1500);
-	}, [value]);
-	return /* @__PURE__ */ jsx(ActionIcon, {
-		size: iconSize + 4,
-		variant: "transparent",
-		c: copied ? "green" : "dimmed",
-		onClick: handleCopy,
-		className: "alepha-json-viewer-copy",
-		children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: iconSize }) : /* @__PURE__ */ jsx(IconCopy, { size: iconSize })
-	});
-};
-const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, showQuotes, showCopyButton, renderValue }) => {
-	const { nodeValue, nodeKey, path, isArrayItem, isRoot } = node;
+//#endregion
+//#region ../../src/core/json/components/JsonViewerRowNode.tsx
+const JsonViewerRowNode = (props) => {
+	const { nodeValue, nodeKey, path, isArrayItem } = props.node;
 	const type = getValueType(nodeValue);
 	const isExpandable = type === "object" || type === "array";
 	const getPreview = () => {
 		if (!isExpandable) return null;
 		const count = (type === "array" ? nodeValue : Object.keys(nodeValue)).length;
 		const label = type === "array" ? "item" : "key";
-		if (!expanded) return /* @__PURE__ */ jsx(Text$1, {
+		if (!props.expanded) return /* @__PURE__ */ jsx(Text$1, {
 			fs: "italic",
 			component: "span",
-			size,
+			size: props.size,
 			style: STYLES.preview,
 			children: count === 0 ? type === "array" ? "[]" : "{}" : type === "array" ? `[ ${count} ${count === 1 ? label : `${label}s`} ]` : `{ ${count} ${count === 1 ? label : `${label}s`} }`
 		});
@@ -4387,25 +4409,25 @@ const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, show
 	return /* @__PURE__ */ jsxs(Flex$1, {
 		gap: 6,
 		wrap: "nowrap",
-		...elementProps,
-		className: `alepha-json-viewer-row ${elementProps.className || ""}`,
+		...props.elementProps,
+		className: `alepha-json-viewer-row ${props.elementProps.className || ""}`,
 		children: [
-			hasChildren ? expanded ? /* @__PURE__ */ jsx(IconChevronDown, {
-				size: config.icon,
+			props.hasChildren ? props.expanded ? /* @__PURE__ */ jsx(IconChevronDown, {
+				size: props.config.icon,
 				style: STYLES.chevron
 			}) : /* @__PURE__ */ jsx(IconChevronRight, {
-				size: config.icon,
+				size: props.config.icon,
 				style: STYLES.chevron
 			}) : /* @__PURE__ */ jsx("span", { style: {
-				width: config.icon,
+				width: props.config.icon,
 				flexShrink: 0
 			} }),
 			nodeKey !== void 0 && !isArrayItem && /* @__PURE__ */ jsxs(Text$1, {
 				component: "span",
-				size,
+				size: props.size,
 				children: [/* @__PURE__ */ jsx("span", {
 					style: STYLES.key,
-					children: showQuotes ? `"${nodeKey}"` : nodeKey
+					children: props.showQuotes ? `"${nodeKey}"` : nodeKey
 				}), /* @__PURE__ */ jsx("span", {
 					style: STYLES.colon,
 					children: ":"
@@ -4413,7 +4435,7 @@ const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, show
 			}),
 			nodeKey !== void 0 && isArrayItem && /* @__PURE__ */ jsxs(Text$1, {
 				component: "span",
-				size,
+				size: props.size,
 				children: [/* @__PURE__ */ jsx("span", {
 					style: STYLES.key,
 					children: nodeKey
@@ -4422,25 +4444,28 @@ const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, show
 					children: ":"
 				})]
 			}),
-			hasChildren ? getPreview() : isExpandable ? type === "array" ? /* @__PURE__ */ jsx(Text$1, {
+			props.hasChildren ? getPreview() : isExpandable ? type === "array" ? /* @__PURE__ */ jsx(Text$1, {
 				component: "span",
-				size,
+				size: props.size,
 				style: STYLES.preview,
 				children: "[]"
 			}) : /* @__PURE__ */ jsx(Text$1, {
 				component: "span",
-				size,
+				size: props.size,
 				style: STYLES.preview,
 				children: "{}"
-			}) : renderValue(nodeValue, nodeKey, path),
-			showCopyButton && /* @__PURE__ */ jsx(CopyButton$1, {
+			}) : props.renderValue(nodeValue, nodeKey, path),
+			props.showCopyButton && /* @__PURE__ */ jsx(JsonViewerCopyButton, {
 				value: getCopyValue(),
-				iconSize: config.icon
+				iconSize: props.config.icon
 			})
 		]
 	});
 };
-const JsonViewer = ({ data, defaultExpandedDepth = 2, maxDepth = 10, size = "sm", showQuotes = false, showCopyButton = true, formatValue }) => {
+//#endregion
+//#region ../../src/core/json/components/JsonViewer.tsx
+const JsonViewer = (props) => {
+	const { data, defaultExpandedDepth = 2, maxDepth = 10, size = "sm", showQuotes = false, showCopyButton = true, formatValue } = props;
 	const config = SIZE_CONFIG[size] || SIZE_CONFIG.sm;
 	const treeData = useMemo(() => {
 		const type = getValueType(data);
@@ -4520,7 +4545,7 @@ const JsonViewer = ({ data, defaultExpandedDepth = 2, maxDepth = 10, size = "sm"
 		size
 	]);
 	const renderNode = useCallback(({ node, expanded, hasChildren, elementProps }) => {
-		return /* @__PURE__ */ jsx(RowNode, {
+		return /* @__PURE__ */ jsx(JsonViewerRowNode, {
 			node,
 			expanded,
 			hasChildren,
@@ -4552,7 +4577,54 @@ const JsonViewer = ({ data, defaultExpandedDepth = 2, maxDepth = 10, size = "sm"
 		styles: { root: STYLES.root }
 	});
 };
-
+/**
+* Convert JSON to tree data structure.
+*/
+const buildTreeNodes = (data, path = [], key, isArrayItem = false, maxDepth = 10) => {
+	const currentPath = key !== void 0 ? [...path, key] : path;
+	const nodeId = currentPath.length > 0 ? currentPath.join(".") : "root";
+	if (currentPath.length > maxDepth) return {
+		value: nodeId,
+		label: key ?? "",
+		nodeValue: data,
+		nodeKey: key,
+		path: currentPath,
+		isArrayItem
+	};
+	const type = getValueType(data);
+	if (type === "object" || type === "array") {
+		const children = (type === "array" ? data.map((v, i) => [String(i), v]) : Object.entries(data)).map(([k, v]) => buildTreeNodes(v, currentPath, k, type === "array", maxDepth)).filter((n) => n !== null);
+		return {
+			value: nodeId,
+			label: key ?? "",
+			nodeValue: data,
+			nodeKey: key,
+			path: currentPath,
+			isArrayItem,
+			children: children.length > 0 ? children : void 0
+		};
+	}
+	return {
+		value: nodeId,
+		label: key ?? "",
+		nodeValue: data,
+		nodeKey: key,
+		path: currentPath,
+		isArrayItem
+	};
+};
+/**
+* Get all expandable node IDs up to a certain depth.
+*/
+const getExpandedIds = (nodes, targetDepth, currentDepth = 0) => {
+	if (currentDepth >= targetDepth) return [];
+	const ids = [];
+	for (const node of nodes) if (node.children) {
+		ids.push(node.value);
+		ids.push(...getExpandedIds(node.children, targetDepth, currentDepth + 1));
+	}
+	return ids;
+};
 //#endregion
 //#region ../../src/core/json/factories/dialogJson.tsx
 /**
@@ -4577,7 +4649,6 @@ const dialogJson = (data, options) => ({
 		})
 	})
 });
-
 //#endregion
 //#region ../../src/core/primitives/$ui.ts
 /**
@@ -4588,14 +4659,10 @@ const $ui = (options = {}) => {
 	if (options.themes) alepha.store.set(alephaThemeListAtom, options.themes);
 	return alepha.inject(UiRouter);
 };
-
-//#endregion
-//#region ../../src/core/table/interfaces/types.ts
-const DEFAULT_MAX_VISIBLE_COLUMNS = 8;
-
 //#endregion
 //#region ../../src/core/table/components/DataTableFilters.tsx
-const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) => {
+const DataTableFilters = (props) => {
+	const { schema, form, typeFormProps, filterVisibility } = props;
 	const visibleSchema = useMemo(() => {
 		const visibleKeys = Object.keys(schema.properties).filter((key) => filterVisibility[key] !== false);
 		if (visibleKeys.length === 0) return null;
@@ -4606,14 +4673,14 @@ const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) =>
 		return t.object(visibleProps);
 	}, [schema, filterVisibility]);
 	if (!visibleSchema) return null;
-	return /* @__PURE__ */ jsx(Flex$1, {
-		w: "100%",
+	return /* @__PURE__ */ jsx(Flex, {
+		surface: true,
+		flex: 1,
+		mt: -4,
 		p: "xs",
 		m: "xs",
 		bdrs: "md",
-		bg: ui.colors.surface,
 		children: /* @__PURE__ */ jsx(TypeForm, {
-			size: "xs",
 			...typeFormProps,
 			skipSubmitButton: true,
 			fill: true,
@@ -4624,17 +4691,17 @@ const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) =>
 				sm: 2,
 				md: 3,
 				lg: 4,
-				xl: 6
+				xl: 5
 			}
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/DataTablePagination.tsx
-const DataTablePagination = ({ page, size, totalPages, totalElements, offset, numberOfElements, onPageChange, onSizeChange }) => {
+const DataTablePagination = ({ page, size, totalPages, totalElements, isFirst, isLast, offset, numberOfElements, onPageChange, onSizeChange }) => {
 	const from = numberOfElements > 0 ? offset + 1 : 0;
 	const to = offset + numberOfElements;
+	const hasTotal = totalPages != null;
 	return /* @__PURE__ */ jsxs(Flex, {
 		align: "center",
 		justify: "space-between",
@@ -4682,15 +4749,15 @@ const DataTablePagination = ({ page, size, totalPages, totalElements, offset, nu
 				]
 			}) }), /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(Pagination, {
 				size: "sm",
-				withEdges: true,
-				total: totalPages,
+				withEdges: hasTotal,
+				withPages: hasTotal,
+				total: hasTotal ? totalPages : isLast !== false ? page : page + 1,
 				value: page,
 				onChange: onPageChange
 			}) })]
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/ColumnPicker.tsx
 const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
@@ -4706,7 +4773,7 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 		let count = 0;
 		onVisibilityChange(columnEntries.reduce((acc, [key, col]) => {
 			if (col.defaultHidden) acc[key] = false;
-			else if (count < DEFAULT_MAX_VISIBLE_COLUMNS) {
+			else if (count < 8) {
 				acc[key] = true;
 				count++;
 			} else acc[key] = false;
@@ -4734,7 +4801,7 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 			timingFunction: "ease"
 		},
 		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ActionButton, {
-			variant: "subtle",
+			variant: "minimal",
 			icon: IconColumns,
 			onClick: () => setOpened((o) => !o)
 		}) }) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
@@ -4764,12 +4831,12 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 						gap: 4,
 						children: [/* @__PURE__ */ jsx(ActionButton, {
 							size: "compact-xs",
-							variant: "subtle",
+							variant: "minimal",
 							onClick: handleShowAll,
 							children: "All"
 						}), /* @__PURE__ */ jsx(ActionButton, {
 							size: "compact-xs",
-							variant: "subtle",
+							variant: "minimal",
 							onClick: handleDefault,
 							children: "Default"
 						})]
@@ -4791,7 +4858,6 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/FilterPicker.tsx
 const getFieldLabel = (schema, key) => {
@@ -4835,7 +4901,7 @@ const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
 			timingFunction: "ease"
 		},
 		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ActionButton, {
-			variant: "subtle",
+			variant: "minimal",
 			icon: IconFilter,
 			onClick: () => setOpened((o) => !o)
 		}) }) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
@@ -4865,12 +4931,12 @@ const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
 						gap: 4,
 						children: [/* @__PURE__ */ jsx(ActionButton, {
 							size: "compact-xs",
-							variant: "subtle",
+							variant: "minimal",
 							onClick: handleShowAll,
 							children: "All"
 						}), /* @__PURE__ */ jsx(ActionButton, {
 							size: "compact-xs",
-							variant: "subtle",
+							variant: "minimal",
 							onClick: handleHideAll,
 							children: "None"
 						})]
@@ -4892,7 +4958,6 @@ const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/DataTableToolbar.tsx
 const escapeCsvField = (value) => {
@@ -4964,7 +5029,7 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 						onVisibilityChange: onColumnVisibilityChange
 					}),
 					withExport && /* @__PURE__ */ jsx(ActionButton, {
-						variant: "subtle",
+						variant: "minimal",
 						icon: IconDownload,
 						menu: { items: [{
 							label: "Export as CSV",
@@ -4987,7 +5052,7 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 							children: [selectedItems.length, " selected"]
 						}),
 						/* @__PURE__ */ jsx(ActionButton, {
-							variant: "subtle",
+							variant: "minimal",
 							size: "compact-sm",
 							icon: IconX,
 							onClick: onClearSelection,
@@ -5011,7 +5076,7 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 					...props,
 					children: props.label
 				}, index) : props), /* @__PURE__ */ jsx(ActionButton, {
-					variant: "subtle",
+					variant: "minimal",
 					icon: IconRefresh,
 					onClick: onRefresh
 				})]
@@ -5019,7 +5084,6 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 		]
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/useTableSelection.ts
 const useTableSelection = (items, getItemKey, enabled) => {
@@ -5082,7 +5146,6 @@ const useTableSelection = (items, getItemKey, enabled) => {
 		isSelected: useCallback((item) => selectedKeys.has(getItemKey(item)), [selectedKeys, getItemKey])
 	};
 };
-
 //#endregion
 //#region ../../src/core/table/components/DataTable.tsx
 /**
@@ -5120,18 +5183,22 @@ const FIT_STYLE = {
 };
 const DataTable = (props) => {
 	const [items, setItems] = useState(typeof props.items === "function" ? { content: [] } : props.items);
-	const defaultSize = props.infinityScroll ? 100 : props.defaultSize || 10;
+	const itemsRef = useRef(items);
+	const [loaded, setLoaded] = useState(typeof props.items !== "function" || !props.submitOnInit);
+	const defaultSize = props.defaultSize || (props.infinityScroll ? 100 : 10);
 	const [page, setPage] = useState(1);
 	const [size, setSize] = useState(String(defaultSize));
 	const [currentPage, setCurrentPage] = useState(0);
 	const alepha = useInject(Alepha);
+	itemsRef.current = items;
 	const sentinelRef = useRef(null);
+	const debounceRef = useRef(null);
 	const [columnVisibility, setColumnVisibility] = useState(() => {
 		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) {
+			else if (visibleCount < 8) {
 				acc[key] = true;
 				visibleCount++;
 			} else acc[key] = false;
@@ -5198,13 +5265,14 @@ const DataTable = (props) => {
 		}),
 		handler: async (values) => {
 			if (typeof props.items === "function") {
-				const response = await props.items(values, { items: items.content });
+				const response = await props.items(values, { items: itemsRef.current.content });
 				if (props.infinityScroll && values.page > 0) setItems((prev) => ({
 					...response,
 					content: [...prev.content, ...response.content]
 				}));
 				else setItems(response);
 				setCurrentPage(values.page);
+				if (!loaded) setLoaded(true);
 			}
 		},
 		onReset: async () => {
@@ -5224,9 +5292,23 @@ const DataTable = (props) => {
 				return;
 			}
 			props.onFilterChange?.(key, value, form);
+			if (props.skipSubmitOnChange) return;
+			form.input.page.set(0);
+			const delay = props.debounce ?? 300;
+			if (delay > 0) {
+				if (debounceRef.current) clearTimeout(debounceRef.current);
+				debounceRef.current = setTimeout(() => {
+					form.submit();
+				}, delay);
+			} else await form.submit();
 		}
-	}, [items]);
+	}, []);
 	const dt = useInject(DateTimeProvider);
+	useEffect(() => {
+		return () => {
+			if (debounceRef.current) clearTimeout(debounceRef.current);
+		};
+	}, []);
 	useEffect(() => {
 		if (props.submitOnInit) form.submit();
 		if (props.submitEvery) {
@@ -5291,9 +5373,9 @@ const DataTable = (props) => {
 				}), col.sortable && /* @__PURE__ */ jsxs(Flex, {
 					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 })
+						sortDir === "asc" && /* @__PURE__ */ jsx(IconArrowUp, { size: ui.sizes.icon.xs }),
+						sortDir === "desc" && /* @__PURE__ */ jsx(IconArrowDown, { size: ui.sizes.icon.xs }),
+						sortDir === null && /* @__PURE__ */ jsx(IconArrowsSort, { size: ui.sizes.icon.xs })
 					]
 				})]
 			})
@@ -5353,9 +5435,15 @@ const DataTable = (props) => {
 						form,
 						alepha
 					};
+					const content = col.value?.(item, ctx);
 					return /* @__PURE__ */ jsx(Table.Td, {
 						style: col.fit ? FIT_STYLE : void 0,
-						children: col.value?.(item, ctx)
+						children: col.action ? /* @__PURE__ */ jsx(ActionButton, {
+							td: "inherit",
+							unstyled: true,
+							...col.action(item),
+							children: content
+						}) : content
 					}, key);
 				}),
 				props.rowActions && (() => {
@@ -5372,7 +5460,7 @@ const DataTable = (props) => {
 						style: FIT_STYLE,
 						onClick: (e) => e.stopPropagation(),
 						children: /* @__PURE__ */ jsx(ActionButton, {
-							variant: "subtle",
+							variant: "minimal",
 							size: "xs",
 							icon: IconDotsVertical,
 							menu: { items: actions.map((action) => {
@@ -5380,7 +5468,10 @@ const DataTable = (props) => {
 								return {
 									label: action.label ?? (typeof action.tooltip === "string" ? action.tooltip : void 0),
 									icon: Icon && isComponentType(Icon) ? /* @__PURE__ */ jsx(Icon, { size: 14 }) : Icon,
-									onClick: action.onClick,
+									onClick: action.onClick ? async () => {
+										await action.onClick();
+										if (!action.skipRefresh) await form.submit();
+									} : void 0,
 									color: action.color
 								};
 							}) }
@@ -5442,15 +5533,21 @@ const DataTable = (props) => {
 			bordered: true,
 			elevated: true,
 			shadowed: "xs",
+			flex: 1,
+			style: { minHeight: 0 },
 			children: [
 				/* @__PURE__ */ jsx(Flex, {
 					className: "overflow-auto",
+					flex: 1,
+					style: { minHeight: 0 },
+					col: true,
 					children: /* @__PURE__ */ jsxs(Table, {
 						"aria-label": "Data table",
 						withRowBorders: true,
 						highlightOnHover: true,
 						...props.tableProps,
 						children: [/* @__PURE__ */ jsx(Table.Thead, {
+							bdrs: "md",
 							style: {
 								position: "sticky",
 								top: 0,
@@ -5462,30 +5559,39 @@ const DataTable = (props) => {
 								head,
 								props.rowActions && /* @__PURE__ */ jsx(Table.Th, { style: FIT_STYLE })
 							] })
-						}), /* @__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" },
+						}), /* @__PURE__ */ jsx(Table.Tbody, { children: !loaded || form.submitting ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
+							colSpan: totalColumns || 1,
+							py: "sm",
+							children: /* @__PURE__ */ jsx(Flex, {
+								justify: "center",
+								p: "md",
+								children: /* @__PURE__ */ jsx(Loader, {
+									size: "sm",
+									type: "dots"
+								})
+							})
+						}) }) : rows.length === 0 ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
+							colSpan: totalColumns || 1,
+							py: "xl",
+							children: /* @__PURE__ */ jsx(Flex, {
+								justify: "center",
 								children: /* @__PURE__ */ jsx(Text, {
 									c: "dimmed",
 									size: "sm",
-									children: form.submitting ? "Loading…" : "No results"
+									children: props.emptyLabel ?? "No results"
 								})
-							}) })]
-						})]
+							})
+						}) }) : rows })]
 					})
 				}),
 				props.infinityScroll && /* @__PURE__ */ jsx("div", { ref: sentinelRef }),
 				!props.infinityScroll && /* @__PURE__ */ jsx(DataTablePagination, {
 					page,
 					size,
-					totalPages: items.page?.totalPages ?? 1,
+					totalPages: items.page?.totalPages,
 					totalElements: items.page?.totalElements,
+					isFirst: items.page?.isFirst,
+					isLast: items.page?.isLast,
 					offset: items.page?.offset ?? 0,
 					numberOfElements: items.content.length,
 					onPageChange: (value) => {
@@ -5507,7 +5613,6 @@ const DataTable = (props) => {
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/utils/extractSchemaFields.ts
 /**
@@ -5625,15 +5730,14 @@ const OPERATOR_INFO = {
 		example: "status=[active,pending]"
 	}
 };
-
 //#endregion
 //#region ../../src/core/utils/icons.tsx
 /**
 * Get the default icon for an input based on its type, format, or name.
 */
 const getDefaultIcon = (params) => {
-	const { type, format, name, isEnum, isArray, size = "sm" } = params;
-	const iconSize = ui.sizes.icon[size];
+	const { type, format, name, isEnum, isArray, size = "xs" } = params;
+	const iconSize = ui.sizes.icon[size] - 4;
 	if (format) switch (format) {
 		case "email": return /* @__PURE__ */ jsx(IconMail, { size: iconSize });
 		case "url":
@@ -5667,7 +5771,6 @@ const getDefaultIcon = (params) => {
 	}
 	return /* @__PURE__ */ jsx(IconAt, { size: iconSize });
 };
-
 //#endregion
 //#region ../../src/core/utils/string.ts
 /**
@@ -5705,7 +5808,6 @@ const prettyName = (name) => {
 	const segments = name.split("/").filter((s) => s && !/^\d+$/.test(s));
 	return toTitleCase(segments[segments.length - 1] || name.replaceAll("/", ""));
 };
-
 //#endregion
 //#region ../../src/core/index.ts
 /**
@@ -5744,7 +5846,7 @@ const AlephaUI = $module({
 		alepha.with(ToastService);
 	}
 });
-
 //#endregion
-export { $ui, ActionButton, DashboardShell as AdminShell, DashboardShell, AlephaMantineProvider, AlephaUI, AlertDialog, AppBar, Breadcrumb as Breadcrumbs, BurgerButton, ClipboardButton, ConfirmDialog, Container, Control, ControlArray, ControlDate, ControlNumber, ControlObject, ControlQueryBuilder, ControlSelect, DarkModeButton, DataTable, DetailDrawer, DetailList, DialogService, Flex, Heading, JsonViewer, LanguageButton, OPERATOR_INFO, Omnibar, OmnibarButton, PromptDialog, Sidebar, ToggleSidebarButton as SidebarCollapseButton, StatCards, Text, ThemeButton, ThemeProvider, ToastService, TypeForm, UiRouter, alephaSidebarAtom, alephaThemeAtom, alephaThemeListAtom, alephaThemeOverridesAtom, capitalize, defaultTheme, dialogForm, dialogJson, extractSchemaFields, getDefaultIcon, getOperatorsForField, isComponentType, midnightTheme, prettyName, renderIcon, toTitleCase, ui, useDialog, useTheme, useToast };
+export { $ui, ActionButton, DashboardShell as AdminShell, DashboardShell, AlephaMantineProvider, AlephaUI, AlertDialog, AppBar, Breadcrumbs, BurgerButton, ClipboardButton, ConfirmDialog, Container, Control, ControlArray, ControlDate, ControlNumber, ControlObject, ControlQueryBuilder, ControlSelect, DarkModeButton, DataTable, DetailDrawer, DetailList, DialogService, Flex, Heading, JsonViewer, LanguageButton, OPERATOR_INFO, Omnibar, OmnibarButton, PromptDialog, Sidebar, ToggleSidebarButton as SidebarCollapseButton, SidebarCollapsedItem, SidebarItem, StatCards, Text, ThemeButton, ThemeProvider, ToastService, TypeForm, UiRouter, alephaSidebarAtom, alephaThemeAtom, alephaThemeListAtom, alephaThemeOverridesAtom, capitalize, defaultTheme, dialogForm, dialogJson, extractSchemaFields, getDefaultIcon, getOperatorsForField, isComponentType, midnightTheme, prettyName, renderIcon, toTitleCase, ui, useDialog, useTheme, useToast };
+
 //# sourceMappingURL=index.js.map