@alepha/ui 0.18.2 → 0.18.3

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, 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";
@@ -1548,41 +1548,10 @@ function isComponentType(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 +1596,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 +1753,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 +1767,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,6 +1794,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
@@ -2234,99 +2236,103 @@ const ToggleSidebarButton = (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, {
@@ -2405,7 +2411,7 @@ const StatCards = ({ items }) => /* @__PURE__ */ jsx(Flex$1, {
 //#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, ...rest } = props;
 	if (fill) rest.flex ??= 1;
 	if (col) rest.direction ??= "column";
 	if (center) {
@@ -2428,6 +2434,7 @@ 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();
 	return /* @__PURE__ */ jsx(Flex$1, {
 		ref,
 		...rest
@@ -2565,7 +2572,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 Breadcrumb = (props) => {
+	const { home = "Home", separator, size = "sm", ...groupProps } = props;
 	const state = useRouterState();
 	const router = useRouter();
 	const crumbs = [];
@@ -2621,67 +2629,231 @@ 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);
+	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;
 		}
-		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,
+		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,129 +2916,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
@@ -2907,6 +2956,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 +2965,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 +3002,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,
@@ -2962,41 +3017,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 +3030,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;
@@ -3039,8 +3068,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 +3095,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 +3122,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 +3140,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)
 	};
@@ -3345,7 +3361,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 +3371,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 +3382,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,10 +3393,8 @@ 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
 		});
 	}
@@ -3395,14 +3407,10 @@ const ControlDate = (props) => {
 *
 */
 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,34 +3423,25 @@ 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);
 		}
 	});
 };
@@ -3525,92 +3524,9 @@ 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,113 +3687,316 @@ 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 +4026,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 +4034,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 +4049,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 +4062,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 +4073,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 +4097,7 @@ const Control = (_props) => {
 			size: props.size,
 			id,
 			leftSection: icon,
-			onChange: (file) => {
-				props.input.set(file);
-			},
+			onChange: (file) => setValue(file),
 			...fileInputProps
 		});
 	}
@@ -3991,17 +4108,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 +4133,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 +4152,7 @@ const Control = (_props) => {
 		};
 		return /* @__PURE__ */ jsx(ControlSelect, {
 			size: props.size,
-			title: props.title,
+			label: props.label,
 			description: props.description,
 			icon,
 			...opts
@@ -4047,7 +4165,8 @@ const Control = (_props) => {
 			size: props.size,
 			id,
 			leftSection: icon,
-			...props.input.props,
+			value: value ?? "",
+			onChange: (ev) => setValue(ev.target.value),
 			...passwordInputProps
 		});
 	}
@@ -4058,14 +4177,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 +4200,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,14 +4209,9 @@ 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
 	});
 };
 
@@ -4145,6 +4260,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 +4323,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"
 						})]
@@ -4249,16 +4367,27 @@ const dialogForm = (form, options) => ({
 });
 
 //#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 +4436,21 @@ 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 +4460,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 +4486,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 +4495,29 @@ 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 +4597,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,6 +4629,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
@@ -4595,7 +4720,8 @@ 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 +4732,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,7 +4750,7 @@ const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) =>
 				sm: 2,
 				md: 3,
 				lg: 4,
-				xl: 6
+				xl: 5
 			}
 		})
 	});
@@ -4632,9 +4758,10 @@ const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) =>
 
 //#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,8 +4809,9 @@ 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
 			}) })]
@@ -4734,7 +4862,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 +4892,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"
 						})]
@@ -4835,7 +4963,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 +4993,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"
 						})]
@@ -4964,7 +5092,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 +5115,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 +5139,7 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 					...props,
 					children: props.label
 				}, index) : props), /* @__PURE__ */ jsx(ActionButton, {
-					variant: "subtle",
+					variant: "minimal",
 					icon: IconRefresh,
 					onClick: onRefresh
 				})]
@@ -5120,12 +5248,16 @@ 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;
@@ -5198,13 +5330,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 +5357,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 +5438,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 +5500,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 +5525,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 +5533,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,19 +5598,26 @@ 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,
-								zIndex: 1
+								zIndex: 1,
+								backgroundColor: "var(--alepha-elevated)"
 							},
 							children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
 								panelConfig && /* @__PURE__ */ jsx(Table.Th, { style: { width: 36 } }),
@@ -5462,30 +5625,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) => {
@@ -5632,8 +5804,8 @@ const OPERATOR_INFO = {
 * 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":
@@ -5746,5 +5918,5 @@ const AlephaUI = $module({
 });
 
 //#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, 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, 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